From 568ff7788b5f310b088a3da9427826bf11900285 Mon Sep 17 00:00:00 2001
From: imdeaconu <imdeaconu@gmail.com>
Date: Sun, 27 Apr 2025 09:53:57 +0300
Subject: [PATCH 1/7] WIP: fix number inputs not validating and text, number
 and selection input losing the value when going back

---
 .../src/components/ReportAnswersStep.tsx                  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
index adca0797f..7964dae17 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
@@ -108,16 +108,20 @@ function ReportAnswersStep() {
   );
 
   useEffect(() => {
+    const dirtyFieldsSet = new Set(Object.keys(form.formState.dirtyFields));
     citizenReportForm.questions.forEach((question) => {
+      // do not reset if the user typed anything in that field
+      if (dirtyFieldsSet.has(`question-${question.id}`)) return;
+
       if (isMultiSelectQuestion(question)) {
         form.setValue(`question-${question.id}.selection`, []);
       }
 
-      if (isTextQuestion(question)) {
+      if (isTextQuestion(question) || isNumberQuestion(question)) {
         form.setValue(`question-${question.id}`, "");
       }
     });
-  }, [form.setValue, citizenReportForm]);
+  }, [form.setValue, form.formState.dirtyFields, citizenReportForm]);
 
   const questionHasFreeTextOption = useCallback(
     (question: SingleSelectQuestion | MultiSelectQuestion) => {

From f6e5873348932025eae79c48cbf715752d586ea8 Mon Sep 17 00:00:00 2001
From: imdeaconu <imdeaconu@gmail.com>
Date: Sun, 27 Apr 2025 11:20:28 +0300
Subject: [PATCH 2/7] fix form validation

---
 .../src/pages/ReportingForm.tsx                 | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx
index 39c87a978..3e5aecc05 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx
@@ -80,7 +80,7 @@ const CitizenReportStepperComponent = () => {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+      <form onSubmit={(e) => e.preventDefault()} className="space-y-4">
         <StepperNavigation>
           {methods.all.map((step) => (
             <StepperStep
@@ -112,26 +112,31 @@ const CitizenReportStepperComponent = () => {
               Previous
             </Button>
           )}
+          {methods.isLast && (
+            <Button variant="secondary" onClick={methods.reset}>
+              Reset
+            </Button>
+          )}
           <Button
-            type="submit"
             onClick={() => {
               if (methods.isLast) {
-                return methods.reset();
+                return form.handleSubmit(onSubmit)();
               }
               methods.beforeNext(async () => {
                 const fieldsToValidate: any = methods.current.schema
                   ? (Object.keys(methods.current.schema.shape) as string[])
                   : undefined;
 
-                console.log(fieldsToValidate);
-                const valid = await form.trigger(fieldsToValidate);
+                const valid = fieldsToValidate
+                  ? await form.trigger(fieldsToValidate)
+                  : await form.trigger();
                 if (!valid) return false;
 
                 return true;
               });
             }}
           >
-            {methods.isLast ? "Reset" : "Next"}
+            {methods.isLast ? "Submit" : "Next"}
           </Button>
         </StepperControls>
       </form>

From 825288cd819d28d925f864940dceb07335130897 Mon Sep 17 00:00:00 2001
From: imdeaconu <imdeaconu@gmail.com>
Date: Sun, 27 Apr 2025 16:34:57 +0300
Subject: [PATCH 3/7] add number input component

---
 .../src/components/ReportAnswersStep.tsx      |   5 +-
 .../src/components/ui/number-input.tsx        | 128 ++++++++++++++++++
 .../src/pages/ReportingForm.tsx               |   2 +-
 3 files changed, 131 insertions(+), 4 deletions(-)
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/components/ui/number-input.tsx

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
index 7964dae17..9cd4df46c 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
@@ -22,7 +22,6 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverContent,
@@ -48,6 +47,7 @@ import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
+import { NumberInput } from "./ui/number-input";
 import {
   Select,
   SelectContent,
@@ -243,8 +243,7 @@ function ReportAnswersStep() {
                       languageCode={selectedLanguage}
                     />
                     <FormControl>
-                      <Input
-                        type="number"
+                      <NumberInput
                         placeholder={
                           question?.inputPlaceholder?.[
                             citizenReportForm.defaultLanguage
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/number-input.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/number-input.tsx
new file mode 100644
index 000000000..f83d4aff1
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/number-input.tsx
@@ -0,0 +1,128 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+interface NumberInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  helperText?: string;
+  error?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange?: (value: any) => void;
+  className?: string;
+}
+
+export function NumberInput({
+  label,
+  helperText,
+  error,
+  min,
+  max,
+  step = 1,
+  onChange,
+  className,
+  id,
+  ...props
+}: NumberInputProps) {
+  const inputId = React.useId();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value === "" ? undefined : Number(e.target.value);
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Allow: backspace, delete, tab, escape, enter, decimal point, minus sign (for negative numbers)
+    const allowedKeys = [
+      "Backspace",
+      "Delete",
+      "Tab",
+      "Escape",
+      "Enter",
+      ".",
+      "-",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+      "Home",
+      "End",
+    ];
+
+    // Allow Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
+    if (
+      (e.ctrlKey && ["a", "c", "v", "x"].includes(e.key.toLowerCase())) ||
+      allowedKeys.includes(e.key)
+    ) {
+      // Check if decimal point is already present when trying to add another
+      if (e.key === "." && e.currentTarget.value.includes(".")) {
+        e.preventDefault();
+      }
+
+      // Check if minus sign is already present or not at the beginning
+      if (
+        e.key === "-" &&
+        (e.currentTarget.value.includes("-") ||
+          e.currentTarget.selectionStart !== 0)
+      ) {
+        e.preventDefault();
+      }
+
+      return;
+    }
+
+    // Allow numbers
+    if (/^\d$/.test(e.key)) {
+      return;
+    }
+
+    // Block everything else
+    e.preventDefault();
+  };
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {label && (
+        <Label htmlFor={inputId} className="text-sm font-medium">
+          {label}
+        </Label>
+      )}
+      <Input
+        id={inputId}
+        type="number"
+        min={min}
+        max={max}
+        step={step}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        className={cn(error && "border-red-500 focus-visible:ring-red-500")}
+        aria-invalid={!!error}
+        aria-describedby={
+          error
+            ? `${inputId}-error`
+            : helperText
+            ? `${inputId}-description`
+            : undefined
+        }
+        {...props}
+      />
+      {helperText && !error && (
+        <p
+          id={`${inputId}-description`}
+          className="text-sm text-muted-foreground"
+        >
+          {helperText}
+        </p>
+      )}
+      {error && (
+        <p id={`${inputId}-error`} className="text-sm text-red-500">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx
index 3e5aecc05..9817f2102 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx
@@ -49,7 +49,7 @@ const CitizenReportStepperComponent = () => {
   const methods = useStepper();
 
   const form = useForm({
-    mode: "onSubmit",
+    mode: "onChange",
     resolver: methods.current.schema
       ? zodResolver(methods.current.schema)
       : undefined,

From b6b9837fb9257e1f64375d7368ffc6db95b51dd1 Mon Sep 17 00:00:00 2001
From: imdeaconu <imdeaconu@gmail.com>
Date: Mon, 28 Apr 2025 17:41:40 +0300
Subject: [PATCH 4/7] fetch formData inside route

---
 .../src/components/ReportAnswersStep.tsx           | 14 +++++---------
 .../src/routes/forms/$formId.tsx                   | 13 +++++++++++--
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
index 9cd4df46c..3951d6c07 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
@@ -1,5 +1,6 @@
 import {
   type BaseQuestion,
+  type FormModel,
   type MultiSelectQuestion,
   type SingleSelectQuestion,
 } from "@/common/types";
@@ -39,10 +40,8 @@ import {
   isSingleSelectQuestion,
   isTextQuestion,
 } from "@/lib/utils";
-import { formsOptions } from "@/queries/use-forms";
 import { Route } from "@/routes/forms/$formId";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { notFound } from "@tanstack/react-router";
+import { useLoaderData } from "@tanstack/react-router";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
@@ -87,17 +86,14 @@ function QuestionDescription({
 
 function ReportAnswersStep() {
   const { formId } = Route.useParams();
-  const { data: citizenReportFoms } = useSuspenseQuery(formsOptions());
   const [loading, setLoading] = React.useState(false);
   const { onUpload, progresses, uploadedFiles, isUploading } = useUploadFile({
     defaultUploadedFiles: [],
   });
 
-  const citizenReportForm = citizenReportFoms.find((f) => f.id === formId);
-
-  if (citizenReportForm === undefined) {
-    throw notFound({ throw: false });
-  }
+  const citizenReportForm = useLoaderData({
+    from: "/forms/$formId",
+  }) as FormModel;
 
   const form = useFormContext();
 
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx
index 1978b9597..755023603 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx
@@ -1,10 +1,19 @@
 import NotFound from "@/pages/NotFound";
 import SubmitCitizenReport from "@/pages/ReportingForm";
 import { formsOptions } from "@/queries/use-forms";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, notFound } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/forms/$formId")({
-  loader: (opts) => opts.context.queryClient.ensureQueryData(formsOptions()),
+  loader: async (opts) => {
+    const { formId } = opts.params;
+    const allForms = await opts.context.queryClient.ensureQueryData(
+      formsOptions()
+    );
+    const formsMap = new Map(allForms.map((form) => [form.id, form]));
+    if (!formsMap.has(formId)) throw notFound({ throw: false });
+
+    return formsMap.get(formId);
+  },
   component: SubmitCitizenReport,
   notFoundComponent: NotFound,
 });

From 7bc8b83ebc4f301165d6c4048310c1407d6f15f5 Mon Sep 17 00:00:00 2001
From: imdeaconu <imdeaconu@gmail.com>
Date: Tue, 29 Apr 2025 09:24:01 +0300
Subject: [PATCH 5/7] call useLoaderData from the Route obj

---
 .../src/components/ReportAnswersStep.tsx                    | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
index 3951d6c07..cc5c1c8cd 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
@@ -41,7 +41,6 @@ import {
   isTextQuestion,
 } from "@/lib/utils";
 import { Route } from "@/routes/forms/$formId";
-import { useLoaderData } from "@tanstack/react-router";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
@@ -85,15 +84,12 @@ function QuestionDescription({
 }
 
 function ReportAnswersStep() {
-  const { formId } = Route.useParams();
   const [loading, setLoading] = React.useState(false);
   const { onUpload, progresses, uploadedFiles, isUploading } = useUploadFile({
     defaultUploadedFiles: [],
   });
 
-  const citizenReportForm = useLoaderData({
-    from: "/forms/$formId",
-  }) as FormModel;
+  const citizenReportForm = Route.useLoaderData() as FormModel;
 
   const form = useFormContext();
 

From 0df6e2ec1b873ef6b0a8f98aa656e70fabd33b2f Mon Sep 17 00:00:00 2001
From: imdeaconu <imdeaconu@gmail.com>
Date: Thu, 1 May 2025 19:43:46 +0300
Subject: [PATCH 6/7]  WIP: add display logic for form questions

---
 .../src/components/ReportAnswersStep.tsx      | 305 +++++++++---------
 .../features/forms/hooks/useDisplayLogic.ts   | 130 ++++++++
 .../src/features/forms/hooks/useFormMaps.ts   |  99 ++++++
 3 files changed, 384 insertions(+), 150 deletions(-)
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useDisplayLogic.ts
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFormMaps.ts

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
index cc5c1c8cd..61fb418c2 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
@@ -1,6 +1,5 @@
 import {
   type BaseQuestion,
-  type FormModel,
   type MultiSelectQuestion,
   type SingleSelectQuestion,
 } from "@/common/types";
@@ -31,6 +30,7 @@ import {
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
+import { useFormDisplayLogic } from "@/features/forms/hooks/useDisplayLogic";
 import { useUploadFile } from "@/hooks/use-upload-file";
 import {
   cn,
@@ -89,7 +89,10 @@ function ReportAnswersStep() {
     defaultUploadedFiles: [],
   });
 
-  const citizenReportForm = Route.useLoaderData() as FormModel;
+  const citizenReportForm = Route.useLoaderData();
+  const { shouldDisplayQuestion } = useFormDisplayLogic(
+    citizenReportForm.questions
+  );
 
   const form = useFormContext();
 
@@ -187,7 +190,7 @@ function ReportAnswersStep() {
       <CardContent className="flex flex-col gap-8">
         {citizenReportForm.questions.map((question) => (
           <div className="w-full flex flex-col gap-4" key={question.id}>
-            {isTextQuestion(question) && (
+            {shouldDisplayQuestion(question) && isTextQuestion(question) && (
               <FormField
                 control={form.control}
                 name={`question-${question.id}`}
@@ -219,7 +222,7 @@ function ReportAnswersStep() {
                 )}
               />
             )}
-            {isNumberQuestion(question) && (
+            {shouldDisplayQuestion(question) && isNumberQuestion(question) && (
               <FormField
                 control={form.control}
                 name={`question-${question.id}`}
@@ -251,7 +254,7 @@ function ReportAnswersStep() {
               />
             )}
 
-            {isDateQuestion(question) && (
+            {shouldDisplayQuestion(question) && isDateQuestion(question) && (
               <FormField
                 control={form.control}
                 name={`question-${question.id}`}
@@ -303,83 +306,15 @@ function ReportAnswersStep() {
               />
             )}
 
-            {isSingleSelectQuestion(question) && (
-              <div className="flex flex-col gap-4">
-                <FormField
-                  control={form.control}
-                  name={`question-${question.id}.selection`}
-                  rules={{ required: true }}
-                  render={({ field }) => (
-                    <FormItem className="space-y-3">
-                      <QuestionText
-                        question={question}
-                        languageCode={selectedLanguage}
-                      />
-                      <QuestionDescription
-                        question={question}
-                        languageCode={selectedLanguage}
-                      />
-                      <FormControl>
-                        <RadioGroup
-                          onValueChange={field.onChange}
-                          defaultValue={field.value}
-                          className="flex flex-col space-y-1"
-                        >
-                          {question.options.map((option) => (
-                            <FormItem
-                              className="flex items-center space-x-3 space-y-0"
-                              key={`${question.id}-${option.id}`}
-                            >
-                              <FormControl>
-                                <RadioGroupItem value={option.id} />
-                              </FormControl>
-                              <FormLabel className="font-normal">
-                                {option.text[selectedLanguage]}
-                              </FormLabel>
-                            </FormItem>
-                          ))}
-                        </RadioGroup>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                {questionHasFreeTextOption(question) &&
-                  isFreeTextOptionSelected(question) && (
-                    <FormField
-                      control={form.control}
-                      name={`question-${question.id}.${
-                        getFreeTextOption(question)?.id
-                      }`}
-                      rules={{ required: true }}
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Textarea
-                              {...field}
-                              placeholder={
-                                getFreeTextOption(question)?.text?.[
-                                  citizenReportForm.defaultLanguage
-                                ]
-                              }
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  )}
-              </div>
-            )}
-
-            {isMultiSelectQuestion(question) && (
-              <div className="flex flex-col gap-4">
-                <FormField
-                  control={form.control}
-                  name={`question-${question.id}.selection`}
-                  render={() => (
-                    <FormItem>
-                      <div className="mb-4">
+            {shouldDisplayQuestion(question) &&
+              isSingleSelectQuestion(question) && (
+                <div className="flex flex-col gap-4">
+                  <FormField
+                    control={form.control}
+                    name={`question-${question.id}.selection`}
+                    rules={{ required: true }}
+                    render={({ field }) => (
+                      <FormItem className="space-y-3">
                         <QuestionText
                           question={question}
                           languageCode={selectedLanguage}
@@ -388,80 +323,150 @@ function ReportAnswersStep() {
                           question={question}
                           languageCode={selectedLanguage}
                         />
-                      </div>
-                      {question.options.map((option) => (
-                        <FormField
-                          key={option.id}
-                          control={form.control}
-                          name={`question-${question.id}.selection`}
-                          rules={{ required: true, minLength: 1 }}
-                          render={({ field }) => {
-                            return (
+                        <FormControl>
+                          <RadioGroup
+                            onValueChange={field.onChange}
+                            defaultValue={field.value}
+                            className="flex flex-col space-y-1"
+                          >
+                            {question.options.map((option) => (
                               <FormItem
-                                key={option.id}
-                                className="flex flex-row items-start space-x-3 space-y-0"
+                                className="flex items-center space-x-3 space-y-0"
+                                key={`${question.id}-${option.id}`}
                               >
                                 <FormControl>
-                                  <Checkbox
-                                    checked={field.value?.includes(option.id)}
-                                    onCheckedChange={(checked) => {
-                                      return checked
-                                        ? field.onChange([
-                                            ...field.value,
-                                            option.id,
-                                          ])
-                                        : field.onChange(
-                                            field.value?.filter(
-                                              (value: string) =>
-                                                value !== option.id
-                                            )
-                                          );
-                                    }}
-                                  />
+                                  <RadioGroupItem value={option.id} />
                                 </FormControl>
-                                <FormLabel className="text-sm font-normal">
-                                  {
-                                    option.text[
-                                      citizenReportForm.defaultLanguage
-                                    ]
-                                  }
+                                <FormLabel className="font-normal">
+                                  {option.text[selectedLanguage]}
                                 </FormLabel>
                               </FormItem>
-                            );
-                          }}
-                        />
-                      ))}
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                {questionHasFreeTextOption(question) &&
-                  isFreeTextOptionSelected(question) && (
-                    <FormField
-                      control={form.control}
-                      name={`question-${question.id}.${
-                        getFreeTextOption(question)?.id
-                      }`}
-                      rules={{ required: true }}
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Textarea
-                              {...field}
-                              placeholder={
-                                getFreeTextOption(question)?.text?.[
-                                  citizenReportForm.defaultLanguage
-                                ]
-                              }
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  )}
-              </div>
-            )}
+                            ))}
+                          </RadioGroup>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  {questionHasFreeTextOption(question) &&
+                    isFreeTextOptionSelected(question) && (
+                      <FormField
+                        control={form.control}
+                        name={`question-${question.id}.${
+                          getFreeTextOption(question)?.id
+                        }`}
+                        rules={{ required: true }}
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormControl>
+                              <Textarea
+                                {...field}
+                                placeholder={
+                                  getFreeTextOption(question)?.text?.[
+                                    citizenReportForm.defaultLanguage
+                                  ]
+                                }
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    )}
+                </div>
+              )}
+
+            {shouldDisplayQuestion(question) &&
+              isMultiSelectQuestion(question) && (
+                <div className="flex flex-col gap-4">
+                  <FormField
+                    control={form.control}
+                    name={`question-${question.id}.selection`}
+                    render={() => (
+                      <FormItem>
+                        <div className="mb-4">
+                          <QuestionText
+                            question={question}
+                            languageCode={selectedLanguage}
+                          />
+                          <QuestionDescription
+                            question={question}
+                            languageCode={selectedLanguage}
+                          />
+                        </div>
+                        {question.options.map((option) => (
+                          <FormField
+                            key={option.id}
+                            control={form.control}
+                            name={`question-${question.id}.selection`}
+                            rules={{ required: true, minLength: 1 }}
+                            render={({ field }) => {
+                              return (
+                                <FormItem
+                                  key={option.id}
+                                  className="flex flex-row items-start space-x-3 space-y-0"
+                                >
+                                  <FormControl>
+                                    <Checkbox
+                                      checked={field.value?.includes(option.id)}
+                                      onCheckedChange={(checked) => {
+                                        return checked
+                                          ? field.onChange([
+                                              ...field.value,
+                                              option.id,
+                                            ])
+                                          : field.onChange(
+                                              field.value?.filter(
+                                                (value: string) =>
+                                                  value !== option.id
+                                              )
+                                            );
+                                      }}
+                                    />
+                                  </FormControl>
+                                  <FormLabel className="text-sm font-normal">
+                                    {
+                                      option.text[
+                                        citizenReportForm.defaultLanguage
+                                      ]
+                                    }
+                                  </FormLabel>
+                                </FormItem>
+                              );
+                            }}
+                          />
+                        ))}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  {questionHasFreeTextOption(question) &&
+                    isFreeTextOptionSelected(question) && (
+                      <FormField
+                        control={form.control}
+                        name={`question-${question.id}.${
+                          getFreeTextOption(question)?.id
+                        }`}
+                        rules={{ required: true }}
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormControl>
+                              <Textarea
+                                {...field}
+                                placeholder={
+                                  getFreeTextOption(question)?.text?.[
+                                    citizenReportForm.defaultLanguage
+                                  ]
+                                }
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    )}
+                </div>
+              )}
 
             <FormField
               control={form.control}
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useDisplayLogic.ts b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useDisplayLogic.ts
new file mode 100644
index 000000000..17aba7887
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useDisplayLogic.ts
@@ -0,0 +1,130 @@
+import {
+  DisplayLogicCondition,
+  QuestionType,
+  type BaseQuestion,
+} from "@/common/types";
+import {
+  isMultiSelectAnswer,
+  isNumberAnswer,
+  isRatingAnswer,
+  isSingleSelectAnswer,
+  isTextAnswer,
+} from "@/lib/utils";
+import { useEffect } from "react";
+import { useFormMaps } from "./useFormMaps";
+
+const mapDisplayConditionToMath = (
+  operand1: string,
+  operand2: string,
+  condition: DisplayLogicCondition
+) => {
+  switch (condition) {
+    case "Equals":
+      return operand1 === operand2;
+    case "GreaterEqual":
+      return operand1 >= operand2;
+    case "GreaterThan":
+      return operand1 > operand2;
+    case "LessEqual":
+      return operand1 <= operand2;
+    case "LessThan":
+      return operand1 < operand2;
+    case "NotEquals":
+      return operand1 !== operand2;
+    default:
+      return false;
+  }
+};
+
+export const useFormDisplayLogic = (questions: BaseQuestion[]) => {
+  const { answersMap, questionsMap } = useFormMaps(questions);
+
+  const shouldDisplayQuestion = (question: BaseQuestion) => {
+    if (!question.displayLogic) return true;
+    const parentQuestionId = question.displayLogic.parentQuestionId;
+    const parentAnswer = answersMap.get(parentQuestionId) ?? null;
+    if (!parentAnswer) return false;
+
+    const parentQuestionType =
+      questionsMap.get(parentQuestionId)?.$questionType;
+    const condition = question.displayLogic.condition;
+    const value = question.displayLogic.value;
+    let shouldDisplay = false;
+
+    switch (parentQuestionType) {
+      case QuestionType.NumberQuestionType:
+        if (
+          !parentAnswer ||
+          !parentAnswer.value ||
+          !isNumberAnswer(parentAnswer)
+        )
+          break;
+        shouldDisplay = mapDisplayConditionToMath(
+          parentAnswer.value.toString(),
+          value,
+          condition
+        );
+        break;
+
+      case QuestionType.TextQuestionType:
+        if (!parentAnswer || !parentAnswer.text || !isTextAnswer(parentAnswer))
+          break;
+
+        shouldDisplay = mapDisplayConditionToMath(
+          parentAnswer.text,
+          value,
+          condition
+        );
+
+        break;
+
+      case QuestionType.MultiSelectQuestionType:
+        if (
+          !parentAnswer ||
+          !parentAnswer.selection ||
+          !isMultiSelectAnswer(parentAnswer)
+        )
+          break;
+        shouldDisplay = !!parentAnswer.selection.find(
+          (option) => option.optionId === value
+        );
+        break;
+
+      case QuestionType.SingleSelectQuestionType:
+        if (
+          !parentAnswer ||
+          !parentAnswer.selection ||
+          !isSingleSelectAnswer(parentAnswer)
+        )
+          break;
+
+        shouldDisplay = parentAnswer.selection.optionId === value;
+        break;
+
+      case QuestionType.RatingQuestionType:
+        if (
+          !parentAnswer ||
+          !parentAnswer.value ||
+          !isRatingAnswer(parentAnswer)
+        )
+          break;
+
+        shouldDisplay = mapDisplayConditionToMath(
+          parentAnswer.value.toString(),
+          value,
+          condition
+        );
+        break;
+
+      default:
+        break;
+    }
+    return shouldDisplay;
+  };
+
+  useEffect(() => {
+    console.table(answersMap);
+  }, [answersMap]); // use JSON.stringify to track deep object changes
+
+  return { shouldDisplayQuestion };
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFormMaps.ts b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFormMaps.ts
new file mode 100644
index 000000000..81fbefc54
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFormMaps.ts
@@ -0,0 +1,99 @@
+import {
+  AnswerType,
+  QuestionType,
+  type BaseQuestion,
+  type MultiSelectAnswer,
+  type NumberAnswer,
+  type RatingAnswer,
+  type SingleSelectAnswer,
+  type TextAnswer,
+} from "@/common/types";
+import { useMemo } from "react";
+import { useFormContext } from "react-hook-form";
+
+const mapFormDataToAnswer = (
+  questionType: QuestionType,
+  questionId: string,
+  value: any
+) => {
+  switch (questionType) {
+    case QuestionType.NumberQuestionType:
+      const numberAnswer: NumberAnswer = {
+        $answerType: AnswerType.NumberAnswerType,
+        questionId,
+        value,
+      };
+      return numberAnswer;
+
+    case QuestionType.TextQuestionType:
+      const textAnswer: TextAnswer = {
+        $answerType: AnswerType.TextAnswerType,
+        questionId,
+        text: value,
+      };
+      return textAnswer;
+
+    case QuestionType.MultiSelectQuestionType:
+      const multiselectAnswer: MultiSelectAnswer = {
+        $answerType: AnswerType.MultiSelectAnswerType,
+        questionId,
+        selection: value.selection.map((val: string) => {
+          return { optionId: val };
+        }),
+      };
+      return multiselectAnswer;
+
+    case QuestionType.SingleSelectQuestionType:
+      const selectedOptionId = value.selection;
+      const singleSelectAnswer: SingleSelectAnswer = {
+        $answerType: AnswerType.SingleSelectAnswerType,
+        questionId,
+        selection: selectedOptionId
+          ? { optionId: selectedOptionId }
+          : undefined,
+      };
+
+      return singleSelectAnswer;
+
+    case QuestionType.RatingQuestionType:
+      const ratingAnswer: RatingAnswer = {
+        $answerType: AnswerType.RatingAnswerType,
+        questionId,
+        value,
+      };
+
+      return ratingAnswer;
+
+    default:
+      return value;
+      break;
+  }
+};
+
+export const useFormMaps = (questions: BaseQuestion[]) => {
+  const { watch } = useFormContext();
+  const formValues = watch();
+
+  const questionsMap = useMemo(() => {
+    return new Map(questions.map((question) => [question.id, question]));
+  }, [questions]);
+
+  const answersMap = useMemo(() => {
+    return new Map(
+      Object.entries(formValues)
+        .filter(([key, value]) => key.startsWith("question"))
+        .map(([key, value]) => {
+          const questionId = key.replace(/^question-/, "");
+          const question = questionsMap.get(questionId)!;
+          const mappedAnswer = mapFormDataToAnswer(
+            question?.$questionType,
+            questionId,
+            value
+          );
+          return [questionId, mappedAnswer];
+        })
+    );
+  }, [JSON.stringify(formValues), questionsMap]);
+
+  return { questionsMap, answersMap };
+};

From 07f9a8a1ea0e9aa6031a4515ebe19ba469d2d5a4 Mon Sep 17 00:00:00 2001
From: Iulian Deaconu <imdeaconu@gmail.com>
Date: Sat, 17 May 2025 17:03:02 +0300
Subject: [PATCH 7/7] Wip/refactor inputs (#17)

* start refactoring inputs

* fix multiselect and add free text responses

* refactor display logic check

* refactor and set required only if field is displayed

* refactor logic

* add freeform text to single select input

* add rating input
---
 .../src/api/get-forms.ts                      |  10 +
 .../src/components/ReportAnswersStep.tsx      | 450 +-----------------
 .../src/components/ui/form.tsx                |  87 ++--
 .../src/components/ui/ratings.tsx             |  90 ++++
 .../src/features/forms/atoms.ts               |   3 +
 .../forms/components/FormQuestion.tsx         |  98 ++++
 .../components/FormQuestionFreeTextInput.tsx  |  53 +++
 .../forms/components/FormQuestionInputs.tsx   |  98 ++++
 .../FormQuestionMultiSelectInput.tsx          | 123 +++++
 .../components/FormQuestionRatingInput.tsx    |  62 +++
 .../FormQuestionSingleSelectInput.tsx         |  79 +++
 .../features/forms/hooks/useDisplayLogic.ts   | 130 -----
 .../features/forms/hooks/useFreeTextInput.tsx |  71 +++
 .../forms/hooks/useShouldDisplayQuestion.ts   | 128 +++++
 .../forms/{hooks/useFormMaps.ts => utils.tsx} |  81 ++--
 .../src/queries/use-forms.tsx                 |  23 +-
 .../src/routes/forms/$formId.tsx              |  28 +-
 17 files changed, 954 insertions(+), 660 deletions(-)
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/components/ui/ratings.tsx
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/atoms.ts
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestion.tsx
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionFreeTextInput.tsx
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionInputs.tsx
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionMultiSelectInput.tsx
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionRatingInput.tsx
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionSingleSelectInput.tsx
 delete mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useDisplayLogic.ts
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFreeTextInput.tsx
 create mode 100644 web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useShouldDisplayQuestion.ts
 rename web-citizen-reporting/web-citizen-reporting-template/src/features/forms/{hooks/useFormMaps.ts => utils.tsx} (51%)

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/api/get-forms.ts b/web-citizen-reporting/web-citizen-reporting-template/src/api/get-forms.ts
index c4e20d432..7f475847e 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/api/get-forms.ts
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/api/get-forms.ts
@@ -7,3 +7,13 @@ export const getForms = (): Promise<Array<FormModel>> => {
     `/api/election-rounds/${electionRoundId}/citizen-reporting-forms`
   ).then((res) => res.data.forms);
 };
+
+export const getFormById = async (
+  formId: string
+): Promise<FormModel | undefined> => {
+  const formData = getForms().then((forms) =>
+    forms.find((form) => form.id === formId)
+  );
+
+  return formData;
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
index 61fb418c2..3025bf8b2 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
@@ -1,10 +1,3 @@
-import {
-  type BaseQuestion,
-  type MultiSelectQuestion,
-  type SingleSelectQuestion,
-} from "@/common/types";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
 import {
   Card,
   CardContent,
@@ -12,40 +5,12 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import { FileUploader } from "@/components/ui/file-uploader";
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
-import { useFormDisplayLogic } from "@/features/forms/hooks/useDisplayLogic";
-import { useUploadFile } from "@/hooks/use-upload-file";
-import {
-  cn,
-  isDateQuestion,
-  isMultiSelectQuestion,
-  isNumberQuestion,
-  isSingleSelectQuestion,
-  isTextQuestion,
-} from "@/lib/utils";
+import { currentFormLanguageAtom } from "@/features/forms/atoms";
+import { FormQuestion } from "@/features/forms/components/FormQuestion";
 import { Route } from "@/routes/forms/$formId";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import React, { useCallback, useEffect, useState } from "react";
+import { useAtom } from "jotai";
+import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
-import { NumberInput } from "./ui/number-input";
 import {
   Select,
   SelectContent,
@@ -55,104 +20,18 @@ import {
   SelectValue,
 } from "./ui/select";
 
-function QuestionText({
-  languageCode,
-  question,
-}: {
-  languageCode: string;
-  question: BaseQuestion;
-}) {
-  return (
-    <FormLabel className="flex gap-1">
-      <span> {question.code}</span>
-      <span>-</span>
-      <span>{question.text[languageCode]}</span>
-    </FormLabel>
-  );
-}
-
-function QuestionDescription({
-  languageCode,
-  question,
-}: {
-  languageCode: string;
-  question: BaseQuestion;
-}) {
-  return (
-    <FormDescription>{question?.helptext?.[languageCode]}</FormDescription>
-  );
-}
-
 function ReportAnswersStep() {
-  const [loading, setLoading] = React.useState(false);
-  const { onUpload, progresses, uploadedFiles, isUploading } = useUploadFile({
-    defaultUploadedFiles: [],
-  });
-
   const citizenReportForm = Route.useLoaderData();
-  const { shouldDisplayQuestion } = useFormDisplayLogic(
-    citizenReportForm.questions
+  const [selectedLanguage, setSelectedLanguage] = useAtom(
+    currentFormLanguageAtom
   );
 
-  const form = useFormContext();
-
-  const formValues = form.watch();
-
-  const [selectedLanguage, setSelectedLanguage] = useState<string>(
-    citizenReportForm.defaultLanguage
-  );
+  const { watch } = useFormContext();
+  const values = watch();
 
   useEffect(() => {
-    const dirtyFieldsSet = new Set(Object.keys(form.formState.dirtyFields));
-    citizenReportForm.questions.forEach((question) => {
-      // do not reset if the user typed anything in that field
-      if (dirtyFieldsSet.has(`question-${question.id}`)) return;
-
-      if (isMultiSelectQuestion(question)) {
-        form.setValue(`question-${question.id}.selection`, []);
-      }
-
-      if (isTextQuestion(question) || isNumberQuestion(question)) {
-        form.setValue(`question-${question.id}`, "");
-      }
-    });
-  }, [form.setValue, form.formState.dirtyFields, citizenReportForm]);
-
-  const questionHasFreeTextOption = useCallback(
-    (question: SingleSelectQuestion | MultiSelectQuestion) => {
-      return question.options.some((option) => option.isFreeText);
-    },
-    []
-  );
-
-  const getFreeTextOption = useCallback(
-    (question: SingleSelectQuestion | MultiSelectQuestion) => {
-      return question.options.find((option) => option.isFreeText);
-    },
-    []
-  );
-
-  const isFreeTextOptionSelected = useCallback(
-    (question: SingleSelectQuestion | MultiSelectQuestion) => {
-      const freeTextOption = getFreeTextOption(question);
-      const selection = formValues[`question-${question.id}.selection`];
-
-      if (!selection) {
-        return false;
-      }
-
-      if (isSingleSelectQuestion(question)) {
-        return !!selection || selection === freeTextOption?.id;
-      } else {
-        return selection.some((s: string) => s === freeTextOption?.id);
-      }
-    },
-    [formValues]
-  );
-
-  function onSubmit() {
-    console.log("submit");
-  }
+    console.table(values);
+  }, [values]);
 
   return (
     <Card>
@@ -189,314 +68,7 @@ function ReportAnswersStep() {
 
       <CardContent className="flex flex-col gap-8">
         {citizenReportForm.questions.map((question) => (
-          <div className="w-full flex flex-col gap-4" key={question.id}>
-            {shouldDisplayQuestion(question) && isTextQuestion(question) && (
-              <FormField
-                control={form.control}
-                name={`question-${question.id}`}
-                rules={{ required: true }}
-                render={({ field }) => (
-                  <FormItem>
-                    <QuestionText
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-                    <QuestionDescription
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-
-                    <FormControl>
-                      <Textarea
-                        placeholder={
-                          question?.inputPlaceholder?.[
-                            citizenReportForm.defaultLanguage
-                          ]
-                        }
-                        {...field}
-                      />
-                    </FormControl>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-            {shouldDisplayQuestion(question) && isNumberQuestion(question) && (
-              <FormField
-                control={form.control}
-                name={`question-${question.id}`}
-                rules={{ required: true }}
-                render={({ field }) => (
-                  <FormItem>
-                    <QuestionText
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-                    <QuestionDescription
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-                    <FormControl>
-                      <NumberInput
-                        placeholder={
-                          question?.inputPlaceholder?.[
-                            citizenReportForm.defaultLanguage
-                          ]
-                        }
-                        {...field}
-                      />
-                    </FormControl>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-
-            {shouldDisplayQuestion(question) && isDateQuestion(question) && (
-              <FormField
-                control={form.control}
-                name={`question-${question.id}`}
-                rules={{ required: true }}
-                render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                    <QuestionText
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-                    <QuestionDescription
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <FormControl>
-                          <Button
-                            variant={"outline"}
-                            className={cn(
-                              "w-[240px] pl-3 text-left font-normal",
-                              !field.value && "text-muted-foreground"
-                            )}
-                          >
-                            {field.value ? (
-                              format(field.value, "PPP")
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                          </Button>
-                        </FormControl>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={field.value}
-                          onSelect={field.onChange}
-                          disabled={(date) =>
-                            date > new Date() || date < new Date("1900-01-01")
-                          }
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-
-            {shouldDisplayQuestion(question) &&
-              isSingleSelectQuestion(question) && (
-                <div className="flex flex-col gap-4">
-                  <FormField
-                    control={form.control}
-                    name={`question-${question.id}.selection`}
-                    rules={{ required: true }}
-                    render={({ field }) => (
-                      <FormItem className="space-y-3">
-                        <QuestionText
-                          question={question}
-                          languageCode={selectedLanguage}
-                        />
-                        <QuestionDescription
-                          question={question}
-                          languageCode={selectedLanguage}
-                        />
-                        <FormControl>
-                          <RadioGroup
-                            onValueChange={field.onChange}
-                            defaultValue={field.value}
-                            className="flex flex-col space-y-1"
-                          >
-                            {question.options.map((option) => (
-                              <FormItem
-                                className="flex items-center space-x-3 space-y-0"
-                                key={`${question.id}-${option.id}`}
-                              >
-                                <FormControl>
-                                  <RadioGroupItem value={option.id} />
-                                </FormControl>
-                                <FormLabel className="font-normal">
-                                  {option.text[selectedLanguage]}
-                                </FormLabel>
-                              </FormItem>
-                            ))}
-                          </RadioGroup>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  {questionHasFreeTextOption(question) &&
-                    isFreeTextOptionSelected(question) && (
-                      <FormField
-                        control={form.control}
-                        name={`question-${question.id}.${
-                          getFreeTextOption(question)?.id
-                        }`}
-                        rules={{ required: true }}
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormControl>
-                              <Textarea
-                                {...field}
-                                placeholder={
-                                  getFreeTextOption(question)?.text?.[
-                                    citizenReportForm.defaultLanguage
-                                  ]
-                                }
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    )}
-                </div>
-              )}
-
-            {shouldDisplayQuestion(question) &&
-              isMultiSelectQuestion(question) && (
-                <div className="flex flex-col gap-4">
-                  <FormField
-                    control={form.control}
-                    name={`question-${question.id}.selection`}
-                    render={() => (
-                      <FormItem>
-                        <div className="mb-4">
-                          <QuestionText
-                            question={question}
-                            languageCode={selectedLanguage}
-                          />
-                          <QuestionDescription
-                            question={question}
-                            languageCode={selectedLanguage}
-                          />
-                        </div>
-                        {question.options.map((option) => (
-                          <FormField
-                            key={option.id}
-                            control={form.control}
-                            name={`question-${question.id}.selection`}
-                            rules={{ required: true, minLength: 1 }}
-                            render={({ field }) => {
-                              return (
-                                <FormItem
-                                  key={option.id}
-                                  className="flex flex-row items-start space-x-3 space-y-0"
-                                >
-                                  <FormControl>
-                                    <Checkbox
-                                      checked={field.value?.includes(option.id)}
-                                      onCheckedChange={(checked) => {
-                                        return checked
-                                          ? field.onChange([
-                                              ...field.value,
-                                              option.id,
-                                            ])
-                                          : field.onChange(
-                                              field.value?.filter(
-                                                (value: string) =>
-                                                  value !== option.id
-                                              )
-                                            );
-                                      }}
-                                    />
-                                  </FormControl>
-                                  <FormLabel className="text-sm font-normal">
-                                    {
-                                      option.text[
-                                        citizenReportForm.defaultLanguage
-                                      ]
-                                    }
-                                  </FormLabel>
-                                </FormItem>
-                              );
-                            }}
-                          />
-                        ))}
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  {questionHasFreeTextOption(question) &&
-                    isFreeTextOptionSelected(question) && (
-                      <FormField
-                        control={form.control}
-                        name={`question-${question.id}.${
-                          getFreeTextOption(question)?.id
-                        }`}
-                        rules={{ required: true }}
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormControl>
-                              <Textarea
-                                {...field}
-                                placeholder={
-                                  getFreeTextOption(question)?.text?.[
-                                    citizenReportForm.defaultLanguage
-                                  ]
-                                }
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    )}
-                </div>
-              )}
-
-            <FormField
-              control={form.control}
-              name={`question-${question.id}.attachments`}
-              render={({ field }) => (
-                <div className="space-y-6">
-                  <FormItem className="w-full">
-                    <FormLabel>Attachments </FormLabel>
-                    <FormControl>
-                      <FileUploader
-                        value={field.value}
-                        onValueChange={field.onChange}
-                        maxFileCount={undefined}
-                        maxSize={undefined}
-                        progresses={progresses}
-                        // pass the onUpload function here for direct upload
-                        // onUpload={uploadFiles}
-                        disabled={isUploading}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                  {/* {uploadedFiles.length > 0 ? (
-                        <UploadedFilesCard uploadedFiles={uploadedFiles} />
-                      ) : null} */}
-                </div>
-              )}
-            />
-            <Separator />
-          </div>
+          <FormQuestion question={question} />
         ))}
       </CardContent>
     </Card>
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/form.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/form.tsx
index 7d7474cc9..a58a5d90c 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/form.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/form.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
 import {
   Controller,
   FormProvider,
@@ -9,27 +9,27 @@ import {
   type ControllerProps,
   type FieldPath,
   type FieldValues,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
   {} as FormFieldContextValue
-)
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -37,21 +37,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -60,19 +60,19 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue
-)
+);
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
@@ -82,14 +82,14 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
         {...props}
       />
     </FormItemContext.Provider>
-  )
+  );
 }
 
 function FormLabel({
   className,
   ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -99,11 +99,12 @@ function FormLabel({
       htmlFor={formItemId}
       {...props}
     />
-  )
+  );
 }
 
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
@@ -117,11 +118,11 @@ function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
       aria-invalid={!!error}
       {...props}
     />
-  )
+  );
 }
 
 function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -130,15 +131,15 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -150,16 +151,16 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
     >
       {body}
     </p>
-  )
+  );
 }
 
 export {
-  useFormField,
   Form,
-  FormItem,
-  FormLabel,
   FormControl,
   FormDescription,
-  FormMessage,
   FormField,
-}
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/ratings.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/ratings.tsx
new file mode 100644
index 000000000..67d1a591d
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/ratings.tsx
@@ -0,0 +1,90 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface RatingItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+  selectedValue: number | null;
+  scale: number;
+}
+
+const RatingItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RatingItemProps
+>(({ className, value, selectedValue, scale, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      value={value}
+      className={cn(
+        Number(value) === 1 && "rounded-l-md",
+        "relative inline-flex items-center px-4 py-2 dark:text-white text-sm text-center font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0 w-full justify-center",
+        (selectedValue ?? -1) === Number(value) &&
+          "z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
+        Number(value) === scale && "rounded-r-md",
+        className
+      )}
+      {...props}
+    >
+      {value}
+    </RadioGroupPrimitive.Item>
+  );
+});
+
+RatingItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+interface RatingGroupProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+  scale?: number;
+  lowerLabel?: string;
+  upperLabel?: string;
+}
+
+const RatingGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  RatingGroupProps
+>(({ className, scale = 5, lowerLabel, upperLabel, ...props }, ref) => {
+  const [selectedValue, setSelectedValue] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    setSelectedValue(props.defaultValue ? Number(props.defaultValue) : null);
+  }, [props.defaultValue]);
+
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("", className)}
+      {...props}
+      ref={ref}
+      onValueChange={(value) => {
+        setSelectedValue(Number(value));
+        props.onValueChange && props.onValueChange(value);
+      }}
+      tabIndex={0}
+    >
+      <div className="w-full inline-flex">
+        {Array.from({ length: scale }, (_, i) => i + 1).map((value) => (
+          <RatingItem
+            key={value}
+            value={value.toString()}
+            selectedValue={selectedValue}
+            scale={scale}
+          />
+        ))}
+      </div>
+      <p className="text-sm italic" dir="auto">
+        {lowerLabel && <> 1 - {lowerLabel}</>}
+      </p>
+      <p className="text-sm italic" dir="auto">
+        {upperLabel && (
+          <>
+            {scale} - {upperLabel}
+          </>
+        )}
+      </p>
+    </RadioGroupPrimitive.Root>
+  );
+});
+RatingGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+export { RatingGroup, RatingItem };
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/atoms.ts b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/atoms.ts
new file mode 100644
index 000000000..79258e7fb
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/atoms.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const currentFormLanguageAtom = atom("");
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestion.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestion.tsx
new file mode 100644
index 000000000..9dcdb4330
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestion.tsx
@@ -0,0 +1,98 @@
+import { type BaseQuestion } from "@/common/types";
+import { FormDescription, FormLabel } from "@/components/ui/form";
+import { currentFormLanguageAtom } from "@/features/forms/atoms";
+import {
+  isMultiSelectQuestion,
+  isNumberQuestion,
+  isRatingQuestion,
+  isSingleSelectQuestion,
+  isTextQuestion,
+} from "@/lib/utils";
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+import { useShouldDisplayQuestion } from "../hooks/useShouldDisplayQuestion";
+import {
+  FormQuestionNumberInput,
+  FormQuestionTextInput,
+} from "./FormQuestionInputs";
+import { FormQuestionMultiSelectInput } from "./FormQuestionMultiSelectInput";
+import { FormQuestionSingleSelectInput } from "./FormQuestionSingleSelectInput";
+import { FormQuestionRatingInput } from "./FormQuestionRatingInput";
+
+interface FormQuestionProps {
+  question: BaseQuestion;
+  isRequired: boolean;
+}
+
+const BaseFormQuestion = ({ question, isRequired }: FormQuestionProps) => {
+  const language = useAtomValue(currentFormLanguageAtom);
+
+  return (
+    <div className="w-full flex flex-col gap-4" key={question.id}>
+      <div>
+        <FormLabel>
+          <span> {`${question.code} - ${question.text[language]}`}</span>
+        </FormLabel>
+
+        <FormDescription>{question?.helptext?.[language]}</FormDescription>
+      </div>
+      {isNumberQuestion(question) && (
+        <FormQuestionNumberInput
+          questionId={question.id}
+          isRequired={isRequired}
+        />
+      )}
+      {isTextQuestion(question) && (
+        <FormQuestionTextInput
+          questionId={question.id}
+          isRequired={isRequired}
+        />
+      )}
+      {isSingleSelectQuestion(question) && (
+        <FormQuestionSingleSelectInput
+          question={question}
+          language={language}
+          isRequired={isRequired}
+        />
+      )}
+      {isMultiSelectQuestion(question) && (
+        <FormQuestionMultiSelectInput
+          question={question}
+          language={language}
+          isRequired={isRequired}
+        />
+      )}
+
+      {isRatingQuestion(question) && (
+        <FormQuestionRatingInput
+          question={question}
+          language={language}
+          isRequired={isRequired}
+        />
+      )}
+    </div>
+  );
+};
+
+const QuestionWithDisplayLogic = ({ question }: { question: BaseQuestion }) => {
+  const { control, unregister } = useFormContext();
+  const shouldDisplay = useShouldDisplayQuestion({ question, control });
+
+  useEffect(() => {
+    const fieldName = `question-${question.id}`;
+    return () => {
+      // unregister field if user changes the value of the parent and the condition stops matching
+      if (shouldDisplay) unregister(fieldName);
+    };
+  }, [shouldDisplay]);
+
+  if (!shouldDisplay) return;
+  return <BaseFormQuestion question={question} isRequired={shouldDisplay} />;
+};
+
+export const FormQuestion = ({ question }: { question: BaseQuestion }) => {
+  if (question.displayLogic)
+    return <QuestionWithDisplayLogic question={question} />;
+  return <BaseFormQuestion question={question} isRequired={true} />;
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionFreeTextInput.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionFreeTextInput.tsx
new file mode 100644
index 000000000..fbfdf14ca
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionFreeTextInput.tsx
@@ -0,0 +1,53 @@
+import {
+  type MultiSelectQuestion,
+  type SingleSelectQuestion,
+} from "@/common/types";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { useFormContext } from "react-hook-form";
+import { useFreeTextInput } from "../hooks/useFreeTextInput";
+export const FormQuestionFreeTextInput = ({
+  question,
+  language,
+}: {
+  question: SingleSelectQuestion | MultiSelectQuestion;
+  language: string;
+}) => {
+  const { control, setValue } = useFormContext();
+  const {
+    fieldNames,
+    shouldDisplayFreeTextInput,
+    freeTextOption,
+    addFreeTextToOption,
+  } = useFreeTextInput(question);
+  return (
+    <FormField
+      control={control}
+      name={fieldNames.freeText}
+      rules={{
+        required: shouldDisplayFreeTextInput,
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <Textarea
+              {...field}
+              onChange={(event) => {
+                const updatedData = addFreeTextToOption(event.target.value);
+                setValue(fieldNames.parent, updatedData);
+                field.onChange(event);
+              }}
+              placeholder={freeTextOption?.text?.[language]}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionInputs.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionInputs.tsx
new file mode 100644
index 000000000..0c4672f94
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionInputs.tsx
@@ -0,0 +1,98 @@
+import {
+  QuestionType,
+  type NumberAnswer,
+  type TextAnswer,
+} from "@/common/types";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { NumberInput } from "@/components/ui/number-input";
+import { useFormContext } from "react-hook-form";
+import { mapFormDataToAnswer } from "../utils";
+
+export const FormQuestionNumberInput = ({
+  questionId,
+  isRequired,
+}: {
+  questionId: string;
+  isRequired?: boolean;
+}) => {
+  const { control } = useFormContext();
+  return (
+    <FormField
+      control={control}
+      name={`question-${questionId}`}
+      rules={{
+        required: isRequired,
+        validate: (value: NumberAnswer | undefined) =>
+          value?.value !== undefined,
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <NumberInput
+              onChange={(value) =>
+                field.onChange(
+                  mapFormDataToAnswer(
+                    QuestionType.NumberQuestionType,
+                    questionId,
+                    value
+                  )
+                )
+              }
+              onBlur={field.onBlur}
+              value={(field?.value as NumberAnswer)?.value}
+            />
+          </FormControl>
+
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export const FormQuestionTextInput = ({
+  questionId,
+  isRequired,
+}: {
+  questionId: string;
+  isRequired?: boolean;
+}) => {
+  const { control } = useFormContext();
+  return (
+    <FormField
+      control={control}
+      name={`question-${questionId}`}
+      rules={{
+        required: isRequired,
+        validate: (value: TextAnswer | undefined) => value?.text !== "",
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <Input
+              onChange={(evemt) =>
+                field.onChange(
+                  mapFormDataToAnswer(
+                    QuestionType.TextQuestionType,
+                    questionId,
+                    evemt.target.value
+                  )
+                )
+              }
+              onBlur={field.onBlur}
+              value={(field?.value as TextAnswer)?.text}
+            />
+          </FormControl>
+
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionMultiSelectInput.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionMultiSelectInput.tsx
new file mode 100644
index 000000000..e7f73a0a5
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionMultiSelectInput.tsx
@@ -0,0 +1,123 @@
+import {
+  AnswerType,
+  type MultiSelectAnswer,
+  type MultiSelectQuestion,
+  type SelectedOption,
+} from "@/common/types";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useFormContext } from "react-hook-form";
+import { useFreeTextInput } from "../hooks/useFreeTextInput";
+import { FormQuestionFreeTextInput } from "./FormQuestionFreeTextInput";
+
+export const FormQuestionMultiSelectInput = ({
+  question,
+  language,
+  isRequired,
+}: {
+  question: MultiSelectQuestion;
+  language: string;
+  isRequired?: boolean;
+}) => {
+  const { control } = useFormContext();
+
+  const { fieldNames, shouldDisplayFreeTextInput } = useFreeTextInput(question);
+
+  const addOptionToMultiSelectAnswer = (
+    questionId: string,
+    currentValue: MultiSelectAnswer,
+    option: SelectedOption
+  ) => {
+    let selections = currentValue?.selection ?? [];
+    selections = [...selections, option];
+    let multiselectAnswer: MultiSelectAnswer = {
+      $answerType: AnswerType.MultiSelectAnswerType,
+      questionId,
+      selection: selections,
+    };
+
+    return multiselectAnswer;
+  };
+  const removeSelectionFromMultiSelectAnswer = (
+    questionId: string,
+    currentValue: MultiSelectAnswer,
+    optionId: string
+  ) => {
+    let selections = currentValue?.selection ?? [];
+    const filteredSelections = selections.filter(
+      (selected) => selected.optionId !== optionId
+    );
+
+    const multiselectAnswer: MultiSelectAnswer = {
+      $answerType: AnswerType.MultiSelectAnswerType,
+      questionId,
+      selection: filteredSelections,
+    };
+    return multiselectAnswer;
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <FormField
+        control={control}
+        name={fieldNames.parent}
+        rules={{
+          required: isRequired,
+          validate: (value: MultiSelectAnswer | undefined) =>
+            value?.selection && value.selection.length > 0,
+        }}
+        render={({ field }) => (
+          <FormItem>
+            {question.options.map((option) => {
+              const isChecked = field.value?.selection?.some(
+                (opt: SelectedOption) => opt.optionId === option.id
+              );
+
+              return (
+                <FormItem
+                  key={option.id}
+                  className="flex flex-row items-start space-x-3 space-y-0"
+                >
+                  <FormControl>
+                    <Checkbox
+                      checked={isChecked}
+                      onCheckedChange={(checked) => {
+                        const newValue = checked
+                          ? addOptionToMultiSelectAnswer(
+                              question.id,
+                              field.value,
+                              {
+                                optionId: option.id,
+                              }
+                            )
+                          : removeSelectionFromMultiSelectAnswer(
+                              question.id,
+                              field.value,
+                              option.id
+                            );
+                        field.onChange(newValue);
+                      }}
+                    />
+                  </FormControl>
+                  <FormLabel className="text-sm font-normal">
+                    {option.text[language]}
+                  </FormLabel>
+                </FormItem>
+              );
+            })}
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      {shouldDisplayFreeTextInput && (
+        <FormQuestionFreeTextInput question={question} language={language} />
+      )}
+    </div>
+  );
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionRatingInput.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionRatingInput.tsx
new file mode 100644
index 000000000..2155c7633
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionRatingInput.tsx
@@ -0,0 +1,62 @@
+import {
+  QuestionType,
+  type NumberAnswer,
+  type RatingAnswer,
+  type RatingQuestion,
+} from "@/common/types";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { RatingGroup } from "@/components/ui/ratings";
+import { useFormContext } from "react-hook-form";
+import { mapFormDataToAnswer, ratingScaleToNumber } from "../utils";
+
+export const FormQuestionRatingInput = ({
+  question,
+  language,
+  isRequired,
+}: {
+  question: RatingQuestion;
+  language: string;
+  isRequired?: boolean;
+}) => {
+  const { control } = useFormContext();
+  return (
+    <FormField
+      control={control}
+      name={`question-${question.id}`}
+      rules={{
+        required: isRequired,
+        validate: (value: NumberAnswer | undefined) =>
+          value?.value !== undefined,
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <RatingGroup
+              scale={ratingScaleToNumber(question.scale)}
+              lowerLabel={question.lowerLabel?.[language]}
+              upperLabel={question.upperLabel?.[language]}
+              onValueChange={(value) =>
+                field.onChange(
+                  mapFormDataToAnswer(
+                    QuestionType.RatingQuestionType,
+                    question.id,
+                    value
+                  )
+                )
+              }
+              onBlur={field.onBlur}
+              value={(field?.value as RatingAnswer)?.value?.toString()}
+            />
+          </FormControl>
+
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionSingleSelectInput.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionSingleSelectInput.tsx
new file mode 100644
index 000000000..a5cb0e924
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionSingleSelectInput.tsx
@@ -0,0 +1,79 @@
+import {
+  QuestionType,
+  type SingleSelectAnswer,
+  type SingleSelectQuestion,
+} from "@/common/types";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useFormContext } from "react-hook-form";
+import { useFreeTextInput } from "../hooks/useFreeTextInput";
+import { mapFormDataToAnswer } from "../utils";
+import { FormQuestionFreeTextInput } from "./FormQuestionFreeTextInput";
+
+export const FormQuestionSingleSelectInput = ({
+  question,
+  language,
+  isRequired,
+}: {
+  question: SingleSelectQuestion;
+  language: string;
+  isRequired?: boolean;
+}) => {
+  const { control } = useFormContext();
+  const { fieldNames, shouldDisplayFreeTextInput } = useFreeTextInput(question);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <FormField
+        control={control}
+        name={fieldNames.parent}
+        rules={{ required: isRequired }}
+        render={({ field }) => (
+          <FormItem className="space-y-3">
+            <FormControl>
+              <RadioGroup
+                onValueChange={(value) =>
+                  field.onChange(
+                    mapFormDataToAnswer(
+                      QuestionType.SingleSelectQuestionType,
+                      question.id,
+                      value
+                    )
+                  )
+                }
+                value={
+                  (field?.value as SingleSelectAnswer)?.selection?.optionId
+                }
+                className="flex flex-col space-y-1"
+              >
+                {question.options.map((option) => (
+                  <FormItem
+                    className="flex items-center space-x-3 space-y-0"
+                    key={`${question.id}-${option.id}`}
+                  >
+                    <FormControl>
+                      <RadioGroupItem value={option.id} />
+                    </FormControl>
+                    <FormLabel className="font-normal">
+                      {option.text[language]}
+                    </FormLabel>
+                  </FormItem>
+                ))}
+              </RadioGroup>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      {shouldDisplayFreeTextInput && (
+        <FormQuestionFreeTextInput question={question} language={language} />
+      )}
+    </div>
+  );
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useDisplayLogic.ts b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useDisplayLogic.ts
deleted file mode 100644
index 17aba7887..000000000
--- a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useDisplayLogic.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import {
-  DisplayLogicCondition,
-  QuestionType,
-  type BaseQuestion,
-} from "@/common/types";
-import {
-  isMultiSelectAnswer,
-  isNumberAnswer,
-  isRatingAnswer,
-  isSingleSelectAnswer,
-  isTextAnswer,
-} from "@/lib/utils";
-import { useEffect } from "react";
-import { useFormMaps } from "./useFormMaps";
-
-const mapDisplayConditionToMath = (
-  operand1: string,
-  operand2: string,
-  condition: DisplayLogicCondition
-) => {
-  switch (condition) {
-    case "Equals":
-      return operand1 === operand2;
-    case "GreaterEqual":
-      return operand1 >= operand2;
-    case "GreaterThan":
-      return operand1 > operand2;
-    case "LessEqual":
-      return operand1 <= operand2;
-    case "LessThan":
-      return operand1 < operand2;
-    case "NotEquals":
-      return operand1 !== operand2;
-    default:
-      return false;
-  }
-};
-
-export const useFormDisplayLogic = (questions: BaseQuestion[]) => {
-  const { answersMap, questionsMap } = useFormMaps(questions);
-
-  const shouldDisplayQuestion = (question: BaseQuestion) => {
-    if (!question.displayLogic) return true;
-    const parentQuestionId = question.displayLogic.parentQuestionId;
-    const parentAnswer = answersMap.get(parentQuestionId) ?? null;
-    if (!parentAnswer) return false;
-
-    const parentQuestionType =
-      questionsMap.get(parentQuestionId)?.$questionType;
-    const condition = question.displayLogic.condition;
-    const value = question.displayLogic.value;
-    let shouldDisplay = false;
-
-    switch (parentQuestionType) {
-      case QuestionType.NumberQuestionType:
-        if (
-          !parentAnswer ||
-          !parentAnswer.value ||
-          !isNumberAnswer(parentAnswer)
-        )
-          break;
-        shouldDisplay = mapDisplayConditionToMath(
-          parentAnswer.value.toString(),
-          value,
-          condition
-        );
-        break;
-
-      case QuestionType.TextQuestionType:
-        if (!parentAnswer || !parentAnswer.text || !isTextAnswer(parentAnswer))
-          break;
-
-        shouldDisplay = mapDisplayConditionToMath(
-          parentAnswer.text,
-          value,
-          condition
-        );
-
-        break;
-
-      case QuestionType.MultiSelectQuestionType:
-        if (
-          !parentAnswer ||
-          !parentAnswer.selection ||
-          !isMultiSelectAnswer(parentAnswer)
-        )
-          break;
-        shouldDisplay = !!parentAnswer.selection.find(
-          (option) => option.optionId === value
-        );
-        break;
-
-      case QuestionType.SingleSelectQuestionType:
-        if (
-          !parentAnswer ||
-          !parentAnswer.selection ||
-          !isSingleSelectAnswer(parentAnswer)
-        )
-          break;
-
-        shouldDisplay = parentAnswer.selection.optionId === value;
-        break;
-
-      case QuestionType.RatingQuestionType:
-        if (
-          !parentAnswer ||
-          !parentAnswer.value ||
-          !isRatingAnswer(parentAnswer)
-        )
-          break;
-
-        shouldDisplay = mapDisplayConditionToMath(
-          parentAnswer.value.toString(),
-          value,
-          condition
-        );
-        break;
-
-      default:
-        break;
-    }
-    return shouldDisplay;
-  };
-
-  useEffect(() => {
-    console.table(answersMap);
-  }, [answersMap]); // use JSON.stringify to track deep object changes
-
-  return { shouldDisplayQuestion };
-};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFreeTextInput.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFreeTextInput.tsx
new file mode 100644
index 000000000..5b9858ce8
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFreeTextInput.tsx
@@ -0,0 +1,71 @@
+import type {
+  MultiSelectAnswer,
+  MultiSelectQuestion,
+  SelectedOption,
+  SingleSelectAnswer,
+  SingleSelectQuestion,
+} from "@/common/types";
+import { isSingleSelectAnswer } from "@/lib/utils";
+import { useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+
+export const useFreeTextInput = (
+  question: SingleSelectQuestion | MultiSelectQuestion
+) => {
+  const freeTextOption = question.options.find((option) => option.isFreeText);
+  const fieldNames = {
+    parent: `question-${question.id}`,
+    freeText: `question-${question.id}-ft-${freeTextOption?.id ?? "0"}`,
+  };
+
+  const { control } = useFormContext();
+  const currentValueFromParent = useWatch({ control, name: fieldNames.parent });
+
+  const isFreeTextOptionSelected = (
+    fieldValue: SingleSelectAnswer | MultiSelectAnswer
+  ) => {
+    if (!freeTextOption || !fieldValue || !fieldValue.selection) return false;
+
+    if (isSingleSelectAnswer(fieldValue))
+      return fieldValue.selection.optionId === freeTextOption.id;
+
+    if (fieldValue.selection.length === 0) return false;
+
+    const currentSelectionSet = new Set(
+      fieldValue.selection.map((opt) => opt.optionId)
+    );
+
+    return currentSelectionSet.has(freeTextOption.id);
+  };
+
+  const addFreeTextToOption = (text: string) => {
+    if (isSingleSelectAnswer(currentValueFromParent)) {
+      return {
+        ...currentValueFromParent,
+        selection: { ...currentValueFromParent.selection, text },
+      };
+    }
+
+    const updatedData = currentValueFromParent?.selection?.map(
+      (selection: SelectedOption) => {
+        if (selection.optionId === freeTextOption?.id)
+          return { ...selection, text };
+        return selection;
+      }
+    );
+    return { ...currentValueFromParent, selection: updatedData };
+  };
+
+  const shouldDisplayFreeTextInput = useMemo(
+    () => isFreeTextOptionSelected(currentValueFromParent),
+    [currentValueFromParent]
+  );
+
+  return {
+    freeTextOption,
+    fieldNames,
+    shouldDisplayFreeTextInput,
+    isFreeTextOptionSelected,
+    addFreeTextToOption,
+  };
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useShouldDisplayQuestion.ts b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useShouldDisplayQuestion.ts
new file mode 100644
index 000000000..eb6d66973
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useShouldDisplayQuestion.ts
@@ -0,0 +1,128 @@
+import {
+  AnswerType,
+  DisplayLogicCondition,
+  type BaseAnswer,
+  type BaseQuestion,
+  type MultiSelectAnswer,
+  type NumberAnswer,
+  type RatingAnswer,
+  type SingleSelectAnswer,
+  type TextAnswer,
+} from "@/common/types";
+import { useEffect, useState } from "react";
+import { useWatch, type Control } from "react-hook-form";
+
+const mapDisplayConditionToMath = (
+  operand1: string,
+  operand2: string,
+  condition: DisplayLogicCondition
+) => {
+  switch (condition) {
+    case "Equals":
+      return operand1 === operand2;
+    case "GreaterEqual":
+      return operand1 >= operand2;
+    case "GreaterThan":
+      return operand1 > operand2;
+    case "LessEqual":
+      return operand1 <= operand2;
+    case "LessThan":
+      return operand1 < operand2;
+    case "NotEquals":
+      return operand1 !== operand2;
+    default:
+      return false;
+  }
+};
+
+export const useShouldDisplayQuestion = ({
+  question,
+  control,
+}: {
+  question: BaseQuestion;
+  control: Control;
+}) => {
+  const [shouldDisplayQuestion, setShouldDisplay] = useState(false);
+
+  const parentAnswer: BaseAnswer = useWatch({
+    control,
+    name: `question-${question.displayLogic?.parentQuestionId}`,
+  });
+
+  const updateShouldDisplay = () => {
+    let shouldDisplay = false;
+    const condition = question.displayLogic!.condition;
+    const value = question.displayLogic!.value;
+
+    switch (parentAnswer.$answerType) {
+      case AnswerType.NumberAnswerType: {
+        const parent = parentAnswer as NumberAnswer;
+
+        if (!parent.value) {
+          shouldDisplay = false;
+          break;
+        }
+
+        shouldDisplay = mapDisplayConditionToMath(
+          parent.value!.toString(),
+          value,
+          condition
+        );
+        break;
+      }
+
+      case AnswerType.TextAnswerType: {
+        const answer = parentAnswer as TextAnswer;
+        if (!answer.text) break;
+
+        shouldDisplay = mapDisplayConditionToMath(
+          answer.text,
+          value,
+          condition
+        );
+
+        break;
+      }
+
+      case AnswerType.MultiSelectAnswerType: {
+        const parent = parentAnswer as MultiSelectAnswer;
+
+        if (!parent.selection) break;
+        shouldDisplay = !!parent.selection.find(
+          (option) => option.optionId === value
+        );
+        break;
+      }
+
+      case AnswerType.SingleSelectAnswerType: {
+        const parent = parentAnswer as SingleSelectAnswer;
+        if (!parent.selection) break;
+
+        shouldDisplay = parent.selection.optionId === value;
+        break;
+      }
+
+      case AnswerType.RatingAnswerType: {
+        const parent = parentAnswer as RatingAnswer;
+        if (!parent.value) break;
+
+        shouldDisplay = mapDisplayConditionToMath(
+          parent.value.toString(),
+          value,
+          condition
+        );
+        break;
+      }
+      default:
+        break;
+    }
+    setShouldDisplay(shouldDisplay);
+  };
+
+  useEffect(() => {
+    if (!parentAnswer) return;
+    updateShouldDisplay();
+  }, [parentAnswer]);
+
+  return shouldDisplayQuestion;
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFormMaps.ts b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/utils.tsx
similarity index 51%
rename from web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFormMaps.ts
rename to web-citizen-reporting/web-citizen-reporting-template/src/features/forms/utils.tsx
index 81fbefc54..7b269788a 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFormMaps.ts
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/utils.tsx
@@ -1,17 +1,15 @@
 import {
   AnswerType,
   QuestionType,
-  type BaseQuestion,
+  RatingScaleType,
   type MultiSelectAnswer,
   type NumberAnswer,
   type RatingAnswer,
   type SingleSelectAnswer,
   type TextAnswer,
 } from "@/common/types";
-import { useMemo } from "react";
-import { useFormContext } from "react-hook-form";
 
-const mapFormDataToAnswer = (
+export const mapFormDataToAnswer = (
   questionType: QuestionType,
   questionId: string,
   value: any
@@ -34,23 +32,23 @@ const mapFormDataToAnswer = (
       return textAnswer;
 
     case QuestionType.MultiSelectQuestionType:
+      let selectionArray = value
+        ? value.map((val: string) => {
+            return { optionId: val };
+          })
+        : [];
       const multiselectAnswer: MultiSelectAnswer = {
         $answerType: AnswerType.MultiSelectAnswerType,
         questionId,
-        selection: value.selection.map((val: string) => {
-          return { optionId: val };
-        }),
+        selection: selectionArray,
       };
       return multiselectAnswer;
 
     case QuestionType.SingleSelectQuestionType:
-      const selectedOptionId = value.selection;
       const singleSelectAnswer: SingleSelectAnswer = {
         $answerType: AnswerType.SingleSelectAnswerType,
         questionId,
-        selection: selectedOptionId
-          ? { optionId: selectedOptionId }
-          : undefined,
+        selection: { optionId: value },
       };
 
       return singleSelectAnswer;
@@ -59,41 +57,44 @@ const mapFormDataToAnswer = (
       const ratingAnswer: RatingAnswer = {
         $answerType: AnswerType.RatingAnswerType,
         questionId,
-        value,
+        value: Number(value),
       };
 
       return ratingAnswer;
 
     default:
       return value;
-      break;
   }
 };
 
-export const useFormMaps = (questions: BaseQuestion[]) => {
-  const { watch } = useFormContext();
-  const formValues = watch();
-
-  const questionsMap = useMemo(() => {
-    return new Map(questions.map((question) => [question.id, question]));
-  }, [questions]);
-
-  const answersMap = useMemo(() => {
-    return new Map(
-      Object.entries(formValues)
-        .filter(([key, value]) => key.startsWith("question"))
-        .map(([key, value]) => {
-          const questionId = key.replace(/^question-/, "");
-          const question = questionsMap.get(questionId)!;
-          const mappedAnswer = mapFormDataToAnswer(
-            question?.$questionType,
-            questionId,
-            value
-          );
-          return [questionId, mappedAnswer];
-        })
-    );
-  }, [JSON.stringify(formValues), questionsMap]);
-
-  return { questionsMap, answersMap };
-};
+export function ratingScaleToNumber(scale: RatingScaleType): number {
+  switch (scale) {
+    case RatingScaleType.OneTo3: {
+      return 3;
+    }
+    case RatingScaleType.OneTo4: {
+      return 4;
+    }
+    case RatingScaleType.OneTo5: {
+      return 5;
+    }
+    case RatingScaleType.OneTo6: {
+      return 6;
+    }
+    case RatingScaleType.OneTo7: {
+      return 7;
+    }
+    case RatingScaleType.OneTo8: {
+      return 8;
+    }
+    case RatingScaleType.OneTo9: {
+      return 9;
+    }
+    case RatingScaleType.OneTo10: {
+      return 10;
+    }
+    default: {
+      return 5;
+    }
+  }
+}
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/queries/use-forms.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/queries/use-forms.tsx
index b579d1dc8..1dc8caf04 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/queries/use-forms.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/queries/use-forms.tsx
@@ -1,4 +1,6 @@
-import { getForms } from "@/api/get-forms";
+import { getFormById, getForms } from "@/api/get-forms";
+import type { FormModel } from "@/common/types";
+import { queryClient } from "@/main";
 import { queryOptions, useQuery } from "@tanstack/react-query";
 const STALE_TIME = 1000 * 60 * 15; // 15 minutes
 
@@ -14,3 +16,22 @@ export const formsOptions = () => {
 export const useForms = () => {
   return useQuery(formsOptions());
 };
+
+export const formQueryOptions = (id: string) => {
+  return queryOptions({
+    queryKey: ["forms", id],
+    queryFn: () => getFormById(id),
+    staleTime: STALE_TIME,
+    initialData: () => {
+      const formData = (
+        queryClient.getQueryData(["forms"]) as FormModel[]
+      )?.find((form) => form.id === id);
+
+      return formData;
+    },
+  });
+};
+
+export const useFormById = (id: string) => {
+  return useQuery(formQueryOptions(id));
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx
index 755023603..f98d0e657 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx
@@ -1,19 +1,33 @@
+import { currentFormLanguageAtom } from "@/features/forms/atoms";
 import NotFound from "@/pages/NotFound";
 import SubmitCitizenReport from "@/pages/ReportingForm";
-import { formsOptions } from "@/queries/use-forms";
+import { formQueryOptions } from "@/queries/use-forms";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute, notFound } from "@tanstack/react-router";
+import { useSetAtom } from "jotai";
+import { useEffect } from "react";
 
 export const Route = createFileRoute("/forms/$formId")({
   loader: async (opts) => {
     const { formId } = opts.params;
-    const allForms = await opts.context.queryClient.ensureQueryData(
-      formsOptions()
+    const formData = await opts.context.queryClient.ensureQueryData(
+      formQueryOptions(formId)
     );
-    const formsMap = new Map(allForms.map((form) => [form.id, form]));
-    if (!formsMap.has(formId)) throw notFound({ throw: false });
 
-    return formsMap.get(formId);
+    if (!formData) throw notFound();
+    return formData;
+  },
+  component: () => {
+    const { formId } = Route.useParams();
+    const { data } = useSuspenseQuery(formQueryOptions(formId));
+    const setCurrentLanguage = useSetAtom(currentFormLanguageAtom);
+
+    useEffect(() => {
+      if (!data?.defaultLanguage) return;
+      setCurrentLanguage(data.defaultLanguage);
+    }, [data]);
+
+    return <SubmitCitizenReport />;
   },
-  component: SubmitCitizenReport,
   notFoundComponent: NotFound,
 });