From ac05dea952e23b1fb534b4404e590063fb4b8636 Mon Sep 17 00:00:00 2001
From: Sam <78538841+spwoodcock@users.noreply.github.com>
Date: Tue, 23 Apr 2024 00:11:31 +0000
Subject: [PATCH] feat: frontend buttons to load Entities in ODK Collect by
 intent (#1449)

* feat: add endpoint for easy entities upload from csv file

* feat: add logic to get project entities, get and update entity mapping status

* feat: add project/entities and project/entity-mapping-status endpoints

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* feat: endpoints for getting and updating entity status

* feat: add endpoint for minimal entity_uuid:osm_id mapping

* fix(backend): handle cases when select_one_from_file is either geojson or csv

* feat(frontend): add popup for task feature (entity) selection with link to odk by intent

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fix(backend): handle edge case when task area contains no geometries (fmtm-splitter #28)

* build: update osm-fiedwork --> v0.8.2

* refactor: wrap usage of OdkEntity in helper func with error handling

* refactor: directly pass project_info to model during proj create

* refactor: simplify project creation, divide into separate odk function

* refactor: rename state osm:entity mapping var for clarity

* refactor: change label on odk intent button --> map feature in odk

* fix(backend): functions to update existing xform after entity update

* refactor(frontend): allow default odk creds label to be clicked to toggle

* fix(backend): do not pretty print final odk xml (minify)

* build: upgrade osm-fieldwork --> 0.9.0 for entities workflow

* refactor: update references to osm_fieldwork entity registration form

* fix: update xform manipulation to factor in entities fields

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 src/backend/app/central/central_crud.py       | 143 ++++----
 src/backend/app/central/central_deps.py       |  43 +++
 src/backend/app/central/central_schemas.py    |   7 +
 src/backend/app/db/postgis_utils.py           |   2 +-
 src/backend/app/helpers/helper_routes.py      |   8 +-
 src/backend/app/projects/project_crud.py      | 313 +++++++-----------
 src/backend/app/projects/project_routes.py    |  37 ++-
 src/backend/pdm.lock                          |   8 +-
 src/backend/pyproject.toml                    |   2 +-
 src/frontend/src/api/Project.js               |  14 +
 .../FeatureSelectionPopup.tsx                 | 108 ++++++
 .../ProjectDetailsV2/TaskSelectionPopup.tsx   |   2 +-
 .../src/components/common/Checkbox.tsx        |   8 +-
 .../createnewproject/ProjectDetailsForm.tsx   |   1 +
 src/frontend/src/store/slices/ProjectSlice.ts |   8 +
 src/frontend/src/store/slices/TaskSlice.ts    |   6 +
 src/frontend/src/store/types/IProject.ts      |   8 +
 src/frontend/src/store/types/ITask.ts         |   1 +
 src/frontend/src/views/ProjectDetailsV2.tsx   |  97 +++---
 19 files changed, 498 insertions(+), 318 deletions(-)
 create mode 100644 src/backend/app/central/central_deps.py
 create mode 100644 src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx

diff --git a/src/backend/app/central/central_crud.py b/src/backend/app/central/central_crud.py
index bd59b28bd2..52fc3432e9 100644
--- a/src/backend/app/central/central_crud.py
+++ b/src/backend/app/central/central_crud.py
@@ -30,12 +30,12 @@
 from loguru import logger as log
 from osm_fieldwork.CSVDump import CSVDump
 from osm_fieldwork.OdkCentral import OdkAppUser, OdkForm, OdkProject
-from osm_fieldwork.OdkCentralAsync import OdkEntity
 from pyxform.builder import create_survey_element_from_dict
 from pyxform.xls2json import parse_file_to_json
 from sqlalchemy import text
 from sqlalchemy.orm import Session
 
+from app.central import central_deps
 from app.config import settings
 from app.db.postgis_utils import (
     geojson_to_javarosa_geom,
@@ -322,7 +322,6 @@ async def update_project_xform(
     odk_id: int,
     xform_data: BytesIO,
     form_file_ext: str,
-    project_name: str,
     category: str,
     odk_credentials: project_schemas.ODKCentralDecrypted,
 ) -> None:
@@ -333,15 +332,9 @@ async def update_project_xform(
         odk_id (int): ODK Central form ID.
         xform_data (BytesIO): XForm data.
         form_file_ext (str): Extension of the form file.
-        project_name (str): Name (title) of the project.
         category (str): Category of the XForm.
         odk_credentials (project_schemas.ODKCentralDecrypted): ODK Central creds.
     """
-    # TODO in the future we may possibly support multiple forms per project.
-    # TODO to faciliate this we need to add the _{category} suffix and track.
-    # TODO this in the new xforms.category field/table.
-    form_name = project_name
-
     xform_data = await read_and_test_xform(
         xform_data,
         form_file_ext,
@@ -349,27 +342,21 @@ async def update_project_xform(
     )
     updated_xform_data = await update_survey_xform(
         xform_data,
-        form_name,
         category,
         task_ids,
     )
 
-    try:
-        xform = get_odk_form(odk_credentials)
-    except Exception as e:
-        log.error(e)
-        raise HTTPException(
-            status_code=500, detail={"message": "Connection failed to odk central"}
-        ) from e
+    xform_obj = get_odk_form(odk_credentials)
 
-    # NOTE calling createForm with the form_name specified should update
-    xform.createForm(
+    # NOTE calling createForm for an existing form will update it
+    form_name = category
+    xform_obj.createForm(
         odk_id,
         updated_xform_data,
         form_name,
     )
     # The draft form must be published after upload
-    xform.publishForm(odk_id, form_name)
+    xform_obj.publishForm(odk_id, form_name)
 
 
 def download_submissions(
@@ -425,6 +412,7 @@ async def read_and_test_xform(
             xform_bytesio = BytesIO(
                 generated_xform.to_xml(
                     validate=False,
+                    pretty_print=False,
                 ).encode("utf-8")
             )
         except Exception as e:
@@ -505,25 +493,28 @@ async def update_entity_registration_xform(
     for instance_elem in root.findall(".//xforms:instance[@src]", namespaces):
         src_value = instance_elem.get("src", "")
         if src_value.endswith(".csv"):
-            instance_elem.set("src", f"jr://file/{category}.csv")
+            # NOTE geojson files require jr://file/{category}.geojson
+            # NOTE csv files require jr://file-csv/{category}.csv
+            instance_elem.set("src", f"jr://file-csv/{category}.csv")
 
     return BytesIO(ElementTree.tostring(root))
 
 
 async def update_survey_xform(
     form_data: BytesIO,
-    form_name: str,
     category: str,
-    task_ids: list,
+    task_ids: list[int],
 ) -> BytesIO:
     """Update fields in the XForm to work with FMTM.
 
-    Updates the 'id' and 'name' fields for the form.
-    Updates the csv filename to match the dataset name.
+    The 'id' field is set to random UUID (xFormId)
+    The 'name' field is set to the category name.
+    The upload media must match the (entity) dataset name (with .csv).
+    The task_id options are populated as choices in the form.
+    The form_category value is also injected to display in the instructions.
 
     Args:
         form_data (str): The input form data.
-        form_name (str): Name of the XForm to set.
         category (str): The form category, used to name the dataset (entity list)
             and the .csv file containing the geometries.
         task_ids (list): List of task IDs to insert as choices in form.
@@ -540,38 +531,77 @@ async def update_survey_xform(
         "entities": "http://www.opendatakit.org/xforms/entities",
     }
 
-    # Parse the XML
+    # Parse the XML from BytesIO obj
     root = ElementTree.fromstring(form_data.getvalue())
 
-    # Update id attribute to equal the form name to be generated
     xform_data = root.findall(".//xforms:data[@id]", namespaces)
     for dt in xform_data:
-        dt.set("id", form_name)
+        # This sets the xFormId in ODK Central (the form reference via API)
+        dt.set("id", category)
 
     # Update the form title (displayed in ODK Collect)
     existing_title = root.find(".//h:title", namespaces)
     if existing_title is not None:
-        existing_title.text = form_name
+        existing_title.text = category
 
     # Update the attachment name to {category}.csv, to link to the entity list
     xform_instance_src = root.findall(".//xforms:instance[@src]", namespaces)
     for inst in xform_instance_src:
         src_value = inst.get("src", "")
-        if src_value.endswith(".csv"):
-            inst.set("src", f"jr://file/{category}.csv")
+        if src_value.endswith(".geojson") or src_value.endswith(".csv"):
+            # NOTE geojson files require jr://file/{category}.geojson
+            # NOTE csv files require jr://file-csv/{category}.csv
+            inst.set("src", f"jr://file-csv/{category}.csv")
 
-    # <instance> must be defined inside <model></model> key
+    # NOTE add the task ID choices to the XML
+    # <instance> must be defined inside <model></model> root element
     model_element = root.find(".//xforms:model", namespaces)
+    # The existing dummy value for task_id must be removed
+    existing_instance = model_element.find(
+        ".//xforms:instance[@id='task_id']", namespaces
+    )
+    if existing_instance is not None:
+        model_element.remove(existing_instance)
+    # Create a new instance element
     instance_task_ids = Element("instance", id="task_id")
-    # Create sub-elements for each task ID, <name> <label> pairs
-    for task_id in task_ids:
-        item = SubElement(instance_task_ids, "item")
-        name = SubElement(item, "name")
-        name.text = str(task_id)
-        label = SubElement(item, "label")
-        label.text = str(task_id)
+    root_element = SubElement(instance_task_ids, "root")
+    # Create sub-elements for each task ID, <itextId> <name> pairs
+    for index, task_id in enumerate(task_ids):
+        item = SubElement(root_element, "item")
+        SubElement(item, "itextId").text = f"task_id-{index}"
+        SubElement(item, "name").text = str(task_id)
     model_element.append(instance_task_ids)
 
+    # Add task_id choice translations (necessary to be visible in form)
+    itext_element = root.find(".//xforms:itext", namespaces)
+    if itext_element is not None:
+        existing_translations = itext_element.findall(
+            ".//xforms:translation", namespaces
+        )
+        for translation in existing_translations:
+            # Remove dummy value from existing translations
+            existing_text = translation.find(
+                ".//xforms:text[@id='task_id-0']", namespaces
+            )
+            if existing_text is not None:
+                translation.remove(existing_text)
+
+            # Append new <text> elements for each task_id
+            for index, task_id in enumerate(task_ids):
+                new_text = Element("text", id=f"task_id-{index}")
+                value_element = Element("value")
+                value_element.text = str(task_id)
+                new_text.append(value_element)
+                translation.append(new_text)
+
+    # Hardcode the form_category value for the start instructions
+    form_category_update = root.find(
+        ".//xforms:bind[@nodeset='/data/all/form_category']", namespaces
+    )
+    log.warning(form_category_update)
+    if form_category_update is not None:
+        form_category_update.set("calculate", f"once('{category}')")
+
     return BytesIO(ElementTree.tostring(root))
 
 
@@ -751,11 +781,7 @@ async def get_entities_geojson(
     Returns:
         dict: Entity data in OData JSON format.
     """
-    async with OdkEntity(
-        url=odk_creds.odk_central_url,
-        user=odk_creds.odk_central_user,
-        passwd=odk_creds.odk_central_password,
-    ) as odk_central:
+    async with central_deps.get_odk_entity(odk_creds) as odk_central:
         entities = await odk_central.getEntityData(
             odk_id,
             dataset_name,
@@ -784,10 +810,11 @@ async def get_entities_geojson(
     return geojson.FeatureCollection(features=all_features)
 
 
-async def get_entities_mapping_statuses(
+async def get_entities_data(
     odk_creds: project_schemas.ODKCentralDecrypted,
     odk_id: int,
     dataset_name: str,
+    fields: str = "__system/updatedAt, osm_id, status",
 ) -> list:
     """Get all the entity mapping statuses.
 
@@ -797,20 +824,18 @@ async def get_entities_mapping_statuses(
         odk_creds (ODKCentralDecrypted): ODK credentials for a project.
         odk_id (str): The project ID in ODK Central.
         dataset_name (str): The dataset / Entity list name in ODK Central.
+        fields (str): Extra fields to include in $select filter.
+            __id is included by default.
 
     Returns:
-        list: JSON list containing Entity: id, status, updated_at.
-            updated_at is in string format 2022-01-31T23:59:59.999Z.
+        list: JSON list containing Entity info. If updated_at is included,
+            the format is string 2022-01-31T23:59:59.999Z.
     """
-    async with OdkEntity(
-        url=odk_creds.odk_central_url,
-        user=odk_creds.odk_central_user,
-        passwd=odk_creds.odk_central_password,
-    ) as odk_central:
+    async with central_deps.get_odk_entity(odk_creds) as odk_central:
         entities = await odk_central.getEntityData(
             odk_id,
             dataset_name,
-            url_params="$select=__id, __system/updatedAt, osm_id, status",
+            url_params=f"$select=__id{',' if fields else ''} {fields}",
         )
 
     all_entities = []
@@ -869,11 +894,7 @@ async def get_entity_mapping_status(
         dict: JSON containing Entity: id, status, updated_at.
             updated_at is in string format 2022-01-31T23:59:59.999Z.
     """
-    async with OdkEntity(
-        url=odk_creds.odk_central_url,
-        user=odk_creds.odk_central_user,
-        passwd=odk_creds.odk_central_password,
-    ) as odk_central:
+    async with central_deps.get_odk_entity(odk_creds) as odk_central:
         entity = await odk_central.getEntity(
             odk_id,
             dataset_name,
@@ -905,11 +926,7 @@ async def update_entity_mapping_status(
     Returns:
         dict: All Entity data in OData JSON format.
     """
-    async with OdkEntity(
-        url=odk_creds.odk_central_url,
-        user=odk_creds.odk_central_user,
-        passwd=odk_creds.odk_central_password,
-    ) as odk_central:
+    async with central_deps.get_odk_entity(odk_creds) as odk_central:
         entity = await odk_central.updateEntity(
             odk_id,
             dataset_name,
diff --git a/src/backend/app/central/central_deps.py b/src/backend/app/central/central_deps.py
new file mode 100644
index 0000000000..8a15f7fea3
--- /dev/null
+++ b/src/backend/app/central/central_deps.py
@@ -0,0 +1,43 @@
+# Copyright (c) 2022, 2023 Humanitarian OpenStreetMap Team
+#
+# This file is part of FMTM.
+#
+#     FMTM is free software: you can redistribute it and/or modify
+#     it under the terms of the GNU General Public License as published by
+#     the Free Software Foundation, either version 3 of the License, or
+#     (at your option) any later version.
+#
+#     FMTM is distributed in the hope that it will be useful,
+#     but WITHOUT ANY WARRANTY; without even the implied warranty of
+#     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#     GNU General Public License for more details.
+#
+#     You should have received a copy of the GNU General Public License
+#     along with FMTM.  If not, see <https:#www.gnu.org/licenses/>.
+#
+
+"""ODK Central dependency wrappers."""
+
+from contextlib import asynccontextmanager
+
+from fastapi.exceptions import HTTPException
+from osm_fieldwork.OdkCentralAsync import OdkEntity
+
+from app.models.enums import HTTPStatus
+from app.projects.project_schemas import ODKCentralDecrypted
+
+
+@asynccontextmanager
+async def get_odk_entity(odk_creds: ODKCentralDecrypted):
+    """Wrap getting an OdkEntity object with ConnectionError handling."""
+    try:
+        async with OdkEntity(
+            url=odk_creds.odk_central_url,
+            user=odk_creds.odk_central_user,
+            passwd=odk_creds.odk_central_password,
+        ) as odk_central:
+            yield odk_central
+    except ConnectionError as conn_error:
+        raise HTTPException(
+            status_code=HTTPStatus.BAD_REQUEST, detail=str(conn_error)
+        ) from conn_error
diff --git a/src/backend/app/central/central_schemas.py b/src/backend/app/central/central_schemas.py
index bd9f3d9073..cbb23c2bc2 100644
--- a/src/backend/app/central/central_schemas.py
+++ b/src/backend/app/central/central_schemas.py
@@ -91,6 +91,13 @@ class EntityFeatureCollection(FeatureCollection):
     features: list[EntityFeature]
 
 
+class EntityOsmID(BaseModel):
+    """Map of Entity UUID to OSM Feature ID."""
+
+    id: str
+    osm_id: Optional[str] = None
+
+
 class EntityMappingStatus(BaseModel):
     """The status for mapping an Entity/feature."""
 
diff --git a/src/backend/app/db/postgis_utils.py b/src/backend/app/db/postgis_utils.py
index 6c1cbc7e3c..d46d64c4a4 100644
--- a/src/backend/app/db/postgis_utils.py
+++ b/src/backend/app/db/postgis_utils.py
@@ -659,7 +659,7 @@ async def feature_geojson_to_entity_dict(
     properties["status"] = "0"
 
     task_id = properties.get("task_id")
-    entity_label = f"task {task_id} feature {feature_id}"
+    entity_label = f"Task {task_id} Feature {feature_id}"
 
     return {entity_label: {"geometry": javarosa_geom, **properties}}
 
diff --git a/src/backend/app/helpers/helper_routes.py b/src/backend/app/helpers/helper_routes.py
index 1af3e6564b..e24f2600ee 100644
--- a/src/backend/app/helpers/helper_routes.py
+++ b/src/backend/app/helpers/helper_routes.py
@@ -30,10 +30,10 @@
 )
 from fastapi.exceptions import HTTPException
 from fastapi.responses import FileResponse, Response
-from osm_fieldwork.OdkCentralAsync import OdkEntity
 from osm_fieldwork.xlsforms import xlsforms_path
 
 from app.auth.osm import AuthUser, login_required
+from app.central import central_deps
 from app.central.central_crud import (
     convert_geojson_to_odk_csv,
     convert_odk_submission_json_to_geojson,
@@ -176,11 +176,7 @@ def parse_csv(csv_bytes):
     parsed_data = parse_csv(await csv_file.read())
     entities_data_dict = {str(uuid4()): data for data in parsed_data}
 
-    async with OdkEntity(
-        url=odk_creds.odk_central_url,
-        user=odk_creds.odk_central_user,
-        passwd=odk_creds.odk_central_password,
-    ) as odk_central:
+    async with central_deps.get_odk_entity(odk_creds) as odk_central:
         entities = await odk_central.createEntities(
             odk_project_id,
             entity_name,
diff --git a/src/backend/app/projects/project_crud.py b/src/backend/app/projects/project_crud.py
index b16ec85b7e..b7ab2779dc 100644
--- a/src/backend/app/projects/project_crud.py
+++ b/src/backend/app/projects/project_crud.py
@@ -41,9 +41,7 @@
 from osm_fieldwork.basemapper import create_basemap_file
 from osm_fieldwork.json2osm import json2osm
 from osm_fieldwork.OdkCentral import OdkAppUser
-from osm_fieldwork.OdkCentralAsync import OdkEntity
-from osm_fieldwork.xlsforms import xlsforms_path
-from osm_fieldwork.xlsforms.entities import registration_form
+from osm_fieldwork.xlsforms import entities_registration, xlsforms_path
 from osm_rawdata.postgres import PostgresClient
 from shapely import wkt
 from shapely.geometry import Polygon, shape
@@ -51,7 +49,7 @@
 from sqlalchemy.dialects.postgresql import insert
 from sqlalchemy.orm import Session
 
-from app.central import central_crud
+from app.central import central_crud, central_deps
 from app.config import encrypt_value, settings
 from app.db import db_models
 from app.db.postgis_utils import (
@@ -332,12 +330,6 @@ async def create_project_with_project_info(
         f"organisation_id: {project_metadata.organisation_id}"
     )
 
-    # Extract project_info details, then remove key
-    project_name = project_metadata.project_info.name
-    project_description = project_metadata.project_info.description
-    project_short_description = project_metadata.project_info.short_description
-    project_instructions = project_metadata.project_info.per_task_instructions
-
     # create new project
     db_project = db_models.DbProject(
         author_id=current_user.id,
@@ -349,10 +341,10 @@ async def create_project_with_project_info(
     # add project info (project id needed to create project info)
     db_project_info = db_models.DbProjectInfo(
         project=db_project,
-        name=project_name,
-        short_description=project_short_description,
-        description=project_description,
-        per_task_instructions=project_instructions,
+        name=project_metadata.project_info.name,
+        description=project_metadata.project_info.description,
+        short_description=project_metadata.project_info.short_description,
+        per_task_instructions=project_metadata.project_info.per_task_instructions,
     )
     db.add(db_project_info)
 
@@ -911,28 +903,128 @@ def flatten_dict(d, parent_key="", sep="_"):
     return items
 
 
+async def generate_odk_central_project_content(
+    project_odk_id: int,
+    odk_credentials: project_schemas.ODKCentralDecrypted,
+    xlsform: BytesIO,
+    form_category: str,
+    form_file_ext: str,
+    task_ids: list[int],
+) -> str:
+    """Populate the project in ODK Central with XForm, Appuser, Permissions."""
+    # Create an app user (i.e. QR Code) for the project
+    appuser_name = f"fmtm_user_{form_category}"
+    log.info(
+        f"Creating ODK appuser ({appuser_name}) for ODK project ({project_odk_id})"
+    )
+    appuser = OdkAppUser(
+        odk_credentials.odk_central_url,
+        odk_credentials.odk_central_user,
+        odk_credentials.odk_central_password,
+    )
+    appuser_json = appuser.create(project_odk_id, appuser_name)
+
+    # If app user could not be created, raise an exception.
+    if not appuser_json:
+        msg = f"Couldn't create appuser {appuser_name} for project"
+        log.error(msg)
+        raise HTTPException(
+            status_code=HTTPStatus.UNPROCESSABLE_ENTITY, detail=msg
+        ) from None
+    if not (appuser_token := appuser_json.get("token")):
+        msg = f"Couldn't get token for appuser {appuser_name}"
+        log.error(msg)
+        raise HTTPException(
+            status_code=HTTPStatus.UNPROCESSABLE_ENTITY, detail=msg
+        ) from None
+    appuser_id = appuser_json.get("id")
+
+    # NOTE Entity Registration form: this may be removed with future Central
+    # API changes to allow Entity creation
+    with open(entities_registration, "rb") as f:
+        registration_xlsform = BytesIO(f.read())
+    registration_xform = await central_crud.read_and_test_xform(
+        registration_xlsform, "xls", return_form_data=True
+    )
+    # Manually modify fields in XML specific to project
+    updated_reg_xform = await central_crud.update_entity_registration_xform(
+        registration_xform, form_category
+    )
+    # Upload entity registration XForm
+    log.info("Uploading Entity registration XForm to ODK Central")
+    central_crud.create_odk_xform(
+        project_odk_id,
+        updated_reg_xform,
+        odk_credentials,
+    )
+
+    # NOTE Survey form
+    xform = await central_crud.read_and_test_xform(
+        xlsform, form_file_ext, return_form_data=True
+    )
+    # Manually modify fields in XML specific to project (id, name, etc)
+    updated_xform = await central_crud.update_survey_xform(
+        xform,
+        form_category,
+        task_ids,
+    )
+    # Upload survey XForm
+    log.info("Uploading survey XForm to ODK Central")
+    xform_name = central_crud.create_odk_xform(
+        project_odk_id,
+        updated_xform,
+        odk_credentials,
+    )
+
+    log.info("Updating XForm role for appuser in ODK Central")
+    # Update the user role for the created xform
+    response = appuser.updateRole(
+        projectId=project_odk_id,
+        xform=xform_name,
+        actorId=appuser_id,
+    )
+    if not response.ok:
+        try:
+            json_data = response.json()
+            log.error(json_data)
+        except json.decoder.JSONDecodeError:
+            log.error(
+                "Could not parse response json during appuser update. "
+                f"status_code={response.status_code}"
+            )
+        finally:
+            msg = f"Failed to update appuser for form: ({xform_name})"
+            log.error(msg)
+            raise HTTPException(
+                status_code=HTTPStatus.UNPROCESSABLE_ENTITY, detail=msg
+            ) from None
+
+    odk_url = odk_credentials.odk_central_url
+
+    return encrypt_value(f"{odk_url}/v1/key/{appuser_token}/projects/{project_odk_id}")
+
+
 async def generate_project_files(
     db: Session,
     project: db_models.DbProject,
     custom_form: Optional[BytesIO],
-    form_category: str,
     form_file_ext: str,
     background_task_id: Optional[uuid.UUID] = None,
 ) -> None:
     """Generate the files for a project.
 
-    QR code, new XForm, and the OSM data extract.
+    QR code (appuser), ODK XForm, ODK Entities from OSM data extract.
 
     Args:
         db (Session): the database session.
         project (DbProject): FMTM database project.
         custom_form (BytesIO): the xls file to upload if we have a custom form
-        form_category (str): the category for the custom XLS form
         form_file_ext (str): weather the form is xls, xlsx or xml
         background_task_id (uuid): the task_id of the background task.
     """
     try:
         project_id = project.id
+        form_category = project.xform_category
         log.info(f"Starting generate_project_files for project {project_id}")
         odk_credentials = await project_deps.get_odk_credentials(db, project_id)
 
@@ -963,109 +1055,27 @@ async def generate_project_files(
                 detail="Failed splitting extract by tasks.",
             )
 
-        # Get project name for XForm name
-        project_name = project.project_name_prefix
         # Get ODK Project ID
         project_odk_id = project.odkid
 
-        # Create an app user (i.e. QR Code) for the project
-        log.info(
-            f"Creating odkcentral app user ({project_name}) "
-            f"for FMTM project ({project_id})"
-        )
-        appuser = OdkAppUser(
-            odk_credentials.odk_central_url,
-            odk_credentials.odk_central_user,
-            odk_credentials.odk_central_password,
-        )
-        appuser_json = appuser.create(project_odk_id, project_name)
-
-        # If app user could not be created, raise an exception.
-        if not appuser_json:
-            log.error(f"Couldn't create appuser {project_name} for project")
-            return False
-        if not (appuser_token := appuser_json.get("token")):
-            log.error(f"Couldn't get token for appuser {project_name}")
-            return False
-        appuser_id = appuser_json.get("id")
-
-        # First upload entity registration form
-        with open(registration_form, "rb") as f:
-            reg_form_bytes = BytesIO(f.read())
-        # Convert XLSForm --> XForm
-        registration_form_data = await central_crud.read_and_test_xform(
-            reg_form_bytes, "xls", return_form_data=True
-        )
-        # Update fields in XML
-        updated_reg_xform = await central_crud.update_entity_registration_xform(
-            registration_form_data, form_category
-        )
-        # Upload entity registration XForm
-        log.info("Uploading Entity registration XForm to ODK Central")
-        central_crud.create_odk_xform(
+        encrypted_odk_token = await generate_odk_central_project_content(
             project_odk_id,
-            updated_reg_xform,
             odk_credentials,
-        )
-
-        # TODO in the future we may possibly support multiple forms per project.
-        # TODO to faciliate this we need to add the _{form_category} suffix and track.
-        # TODO this in the new xforms.category field/table.
-        xform_name_to_inject = project_name
-        task_ids = task_extract_dict.keys()
-        # Convert XLSForm --> XForm
-        xform_data = await central_crud.read_and_test_xform(
-            xlsform, form_file_ext, return_form_data=True
-        )
-        # This is where the ODK form name is set
-        updated_xform = await central_crud.update_survey_xform(
-            xform_data,
-            xform_name_to_inject,
+            xlsform,
             form_category,
-            task_ids,
+            form_file_ext,
+            list(task_extract_dict.keys()),
         )
-        # Upload survey XForm
-        log.info("Uploading survey XForm to ODK Central")
-        xform_name = central_crud.create_odk_xform(
-            project_odk_id,
-            updated_xform,
-            odk_credentials,
-        )
-
-        log.info("Updating XForm role for appuser in ODK Central")
-        # Update the user role for the created xform
-        response = appuser.updateRole(
-            projectId=project_odk_id,
-            xform=xform_name,
-            actorId=appuser_id,
-        )
-        if not response.ok:
-            try:
-                json_data = response.json()
-                log.error(json_data)
-            except json.decoder.JSONDecodeError:
-                log.error(
-                    "Could not parse response json during appuser update. "
-                    f"status_code={response.status_code}"
-                )
-            finally:
-                msg = f"Failed to update appuser for form: ({xform_name})"
-                log.error(msg)
-                raise HTTPException(
-                    status_code=HTTPStatus.UNPROCESSABLE_ENTITY, detail=msg
-                ) from None
-
-        odk_url = odk_credentials.odk_central_url
-
-        # NOTE ODK Central creation complete, update database
-        log.debug(f"Setting odk token for project ({project_id}) on server: {odk_url}")
-        project.odk_token = encrypt_value(
-            f"{odk_url}/v1/key/{appuser_token}/projects/{project_odk_id}"
+        log.debug(
+            f"Setting odk token for FMTM project ({project_id}) "
+            f"ODK project {project_odk_id}"
         )
+        project.odk_token = encrypted_odk_token
 
         for task in project.tasks:
             # Add task feature count to task
-            task.feature_count = len(task_extract_dict[task.id].get("features", []))
+            task_features = task_extract_dict.get(task.id, {})
+            task.feature_count = len(task_features.get("features", []))
             log.debug(f"({task.feature_count}) features added for task ({task.id})")
 
         # Commit all updated database records
@@ -1074,17 +1084,18 @@ async def generate_project_files(
         # Map geojson to entities dict
         entities_data_dict = await task_geojson_dict_to_entity_values(task_extract_dict)
         # Create entities
-        async with OdkEntity(
-            url=odk_credentials.odk_central_url,
-            user=odk_credentials.odk_central_user,
-            passwd=odk_credentials.odk_central_password,
-        ) as odk_central:
+        # TODO after Entity creation is a single API call,
+        # TODO move to generate_odk_central_project_content
+        async with central_deps.get_odk_entity(odk_credentials) as odk_central:
             entities = await odk_central.createEntities(
                 project_odk_id,
                 form_category,
                 entities_data_dict,
             )
-            log.debug(f"Wrote {len(entities)} entities for project ({project_id})")
+            if entities:
+                log.debug(f"Wrote {len(entities)} entities for project ({project_id})")
+            else:
+                log.debug(f"No entities uploaded for project ({project_id})")
 
         if background_task_id:
             # Update background task status to COMPLETED
@@ -1434,78 +1445,6 @@ async def update_background_task_status_in_database(
     return True
 
 
-# TODO remove me
-# async def update_project_form(
-#     db: Session, project_id: int, form_type: str, form: UploadFile = File(None)
-# ):
-#     """Upload a new custom XLSForm for a project."""
-#     project = await get_project(db, project_id)
-#     category = project.xform_title
-#     odk_id = project.odkid
-
-#     # ODK Credentials
-#     odk_credentials = await project_deps.get_odk_credentials(db, project_id)
-
-#     if form:
-#         xlsform = f"/tmp/custom_form.{form_type}"
-#         contents = await form.read()
-#         with open(xlsform, "wb") as f:
-#             f.write(contents)
-#     else:
-#         xlsform = f"{xlsforms_path}/{category}.xls"
-
-#     # TODO fix this to use correct data extract generation
-#     pg = PostgresClient("underpass")
-#     outfile = f"/tmp/{category}.geojson"  # This file will store osm extracts
-
-#     # FIXME test this works
-#     # FIXME PostgresClient.getFeatures does not exist...
-#     # FIXME getFeatures is part of the DataExtract osm-fieldwork class
-#     extract_polygon = True if project.data_extract_type == "polygon" else False
-
-#     project = table("projects", column("outline"))
-
-#     # where = f"id={project_id}
-#     sql = select(
-#         geoalchemy2.functions.ST_AsGeoJSON(project.c.outline).label("outline"),
-#     ).where(text(f"id={project_id}"))
-#     result = db.execute(sql)
-#     project_outline = result.first()
-
-#     final_outline = json.loads(project_outline.outline)
-
-#     feature_geojson = pg.getFeatures(
-#         boundary=final_outline,
-#         filespec=outfile,
-#         polygon=extract_polygon,
-#         xlsfile=f"{category}.xls",
-#         category=category,
-#     )
-#     # TODO upload data extract to S3 bucket
-
-#     tasks_list = await tasks_crud.get_task_id_list(db, project_id)
-
-#     for task_id in tasks_list:
-#         # This file will store xml contents of an xls form.
-#         xform_path = Path(f"/tmp/{category}_{task_id}.xml")
-
-#         outfile = central_crud.update_survey_xform(
-#             xlsform, xform_path, form_type, category
-#         )
-
-#         # Create an odk xform
-#         # TODO include data extract geojson correctly
-#         result = central_crud.create_odk_xform(
-#             odk_id,
-#             xform_path,
-#             category,
-#             feature_geojson,
-#             odk_credentials,
-#         )
-
-#     return True
-
-
 async def get_extracted_data_from_db(db: Session, project_id: int, outfile: str):
     """Get the geojson of those features for this project."""
     query = text(
diff --git a/src/backend/app/projects/project_routes.py b/src/backend/app/projects/project_routes.py
index 3b103e7c47..db5fb39872 100644
--- a/src/backend/app/projects/project_routes.py
+++ b/src/backend/app/projects/project_routes.py
@@ -262,16 +262,39 @@ async def get_odk_entities_geojson(
     "/{project_id}/entities/statuses",
     response_model=list[central_schemas.EntityMappingStatus],
 )
-async def get_odk_entities_mapping_statuses(
+async def get_odk_entities_osm_ids(
     project: db_models.DbProject = Depends(project_deps.get_project_by_id),
     db: Session = Depends(database.get_db),
 ):
     """Get the ODK entities mapping statuses, i.e. in progress or complete."""
     odk_credentials = await project_deps.get_odk_credentials(db, project.id)
-    return await central_crud.get_entities_mapping_statuses(
+    return await central_crud.get_entities_data(
+        odk_credentials,
+        project.odkid,
+        project.xform_category,
+    )
+
+
+@router.get(
+    "/{project_id}/entities/osm-ids",
+    response_model=list[central_schemas.EntityOsmID],
+)
+async def get_odk_entities_mapping_statuses(
+    project: db_models.DbProject = Depends(project_deps.get_project_by_id),
+    db: Session = Depends(database.get_db),
+):
+    """Get the ODK entities linked OSM IDs.
+
+    This endpoint is required as we cannot modify the data extract fields
+    when generated via raw-data-api.
+    We need to link Entity UUIDs to OSM/Feature IDs.
+    """
+    odk_credentials = await project_deps.get_odk_credentials(db, project.id)
+    return await central_crud.get_entities_data(
         odk_credentials,
         project.odkid,
         project.xform_category,
+        fields="osm_id",
     )
 
 
@@ -775,9 +798,8 @@ async def generate_files(
 
     log.debug(f"Generating media files tasks for project: {project.id}")
 
-    xform_category = project.xform_category
     custom_xls_form = None
-    file_ext = None
+    file_ext = ".xls"
     if xls_form_upload:
         log.debug("Validating uploaded XLS form")
 
@@ -808,8 +830,7 @@ async def generate_files(
         db,
         project,
         BytesIO(custom_xls_form) if custom_xls_form else None,
-        xform_category,
-        file_ext if xls_form_upload else ".xls",
+        file_ext,
         background_task_id,
     )
 
@@ -1023,9 +1044,6 @@ async def update_project_form(
     # Commit changes to db
     db.commit()
 
-    # The reference to the form via ODK Central API (minus task_id)
-    project_name = project.project_name_prefix
-
     # Get ODK Central credentials for project
     odk_creds = await project_deps.get_odk_credentials(db, project.id)
     # Get task id list
@@ -1036,7 +1054,6 @@ async def update_project_form(
         project.odkid,
         new_xform_data,
         file_ext,
-        project_name,
         category,
         odk_creds,
     )
diff --git a/src/backend/pdm.lock b/src/backend/pdm.lock
index 46aef1e011..fbd94c95e1 100644
--- a/src/backend/pdm.lock
+++ b/src/backend/pdm.lock
@@ -5,7 +5,7 @@
 groups = ["default", "debug", "dev", "docs", "test"]
 strategy = ["cross_platform"]
 lock_version = "4.4.1"
-content_hash = "sha256:8faa94b89299e0af2e3de5212dadef3ab34178abe3ba30af6395573751c2b551"
+content_hash = "sha256:37e44c8df0e7885989fc88e84be4c16e2ebca8db954d60a6d6953cf87153252f"
 
 [[package]]
 name = "aiohttp"
@@ -1475,7 +1475,7 @@ files = [
 
 [[package]]
 name = "osm-fieldwork"
-version = "0.8.1"
+version = "0.9.0"
 requires_python = ">=3.10"
 summary = "Processing field data from ODK to OpenStreetMap format."
 dependencies = [
@@ -1500,8 +1500,8 @@ dependencies = [
     "xmltodict>=0.13.0",
 ]
 files = [
-    {file = "osm-fieldwork-0.8.1.tar.gz", hash = "sha256:020d976840d9bb7f3ddac2c72a93262826cb1a3c7092c882dd7482482937e433"},
-    {file = "osm_fieldwork-0.8.1-py3-none-any.whl", hash = "sha256:2584e22fc667056e637c593e5d6018dc40bc924eb5a14948420a832c399957f4"},
+    {file = "osm-fieldwork-0.9.0.tar.gz", hash = "sha256:b332adec0ecb92799ee8734954602f1e4d8e9a72be9b5f337e91d86d7dea9e69"},
+    {file = "osm_fieldwork-0.9.0-py3-none-any.whl", hash = "sha256:30480994533d2af63dcea69a5f227c99d77fc3d770cbc5e6a12dddda4f115152"},
 ]
 
 [[package]]
diff --git a/src/backend/pyproject.toml b/src/backend/pyproject.toml
index 858f1f57b0..4a4d5ef5aa 100644
--- a/src/backend/pyproject.toml
+++ b/src/backend/pyproject.toml
@@ -47,7 +47,7 @@ dependencies = [
     "cryptography>=42.0.1",
     "defusedxml>=0.7.1",
     "osm-login-python==1.0.3",
-    "osm-fieldwork==0.8.1",
+    "osm-fieldwork==0.9.0",
     "osm-rawdata==0.2.4",
     "fmtm-splitter==1.2.1",
 ]
diff --git a/src/frontend/src/api/Project.js b/src/frontend/src/api/Project.js
index 66c3c4c16f..1b6b8e2a00 100755
--- a/src/frontend/src/api/Project.js
+++ b/src/frontend/src/api/Project.js
@@ -221,6 +221,20 @@ export const GetProjectDashboard = (url) => {
   };
 };
 
+export const GetEntityInfo = (url) => {
+  return async (dispatch) => {
+    const getEntityOsmMap = async (url) => {
+      try {
+        const response = await CoreModules.axios.get(url);
+        dispatch(ProjectActions.SetEntityToOsmIdMapping(response.data));
+      } catch (error) {
+      } finally {
+      }
+    };
+    await getEntityOsmMap(url);
+  };
+};
+
 export const GetProjectComments = (url) => {
   return async (dispatch) => {
     const getProjectComments = async (url) => {
diff --git a/src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx b/src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx
new file mode 100644
index 0000000000..cf8310f727
--- /dev/null
+++ b/src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx
@@ -0,0 +1,108 @@
+// Popup used to display task feature info & link to ODK Collect
+
+import React from 'react';
+import CoreModules from '@/shared/CoreModules';
+import AssetModules from '@/shared/AssetModules';
+import Button from '@/components/common/Button';
+import { ProjectActions } from '@/store/slices/ProjectSlice';
+
+type TaskFeatureSelectionProperties = {
+  osm_id: number;
+  tags: string;
+  timestamp: string;
+  version: number;
+  changeset: number;
+};
+
+type TaskFeatureSelectionPopupPropType = {
+  featureProperties: TaskFeatureSelectionProperties | null;
+};
+
+const TaskFeatureSelectionPopup = ({ featureProperties }: TaskFeatureSelectionPopupPropType) => {
+  const dispatch = CoreModules.useAppDispatch();
+  const taskModalStatus = CoreModules.useAppSelector((state) => state.project.taskModalStatus);
+  const projectInfo = CoreModules.useAppSelector((state) => state.project.projectInfo);
+  const entityOsmMap = CoreModules.useAppSelector((state) => state.project.entityOsmMap);
+  return (
+    <div
+      className={`fmtm-duration-1000 fmtm-z-[10002] fmtm-h-fit ${
+        taskModalStatus
+          ? 'fmtm-bottom-[4.4rem] md:fmtm-top-[50%] md:-fmtm-translate-y-[35%] fmtm-right-0 fmtm-w-[100vw] md:fmtm-w-[50vw] md:fmtm-max-w-[25rem]'
+          : 'fmtm-top-[calc(100vh)] md:fmtm-top-[calc(40vh)] md:fmtm-left-[calc(100vw)] fmtm-w-[100vw]'
+      } fmtm-fixed
+        fmtm-rounded-t-3xl fmtm-border-opacity-50`}
+    >
+      <div
+        className={`fmtm-absolute fmtm-top-[17px] fmtm-right-[20px] ${
+          taskModalStatus ? '' : 'fmtm-hidden'
+        }  fmtm-cursor-pointer fmtm-flex fmtm-items-center fmtm-gap-3`}
+      >
+        <div title="Close">
+          <AssetModules.CloseIcon
+            style={{ width: '20px' }}
+            className="hover:fmtm-text-primaryRed"
+            onClick={() => dispatch(ProjectActions.ToggleTaskModalStatus(false))}
+          />
+        </div>
+      </div>
+      <div
+        className={`fmtm-bg-[#fbfbfb] ${
+          taskModalStatus ? 'sm:fmtm-shadow-[-20px_0px_60px_25px_rgba(0,0,0,0.2)] fmtm-border-b sm:fmtm-border-b-0' : ''
+        } fmtm-rounded-t-2xl md:fmtm-rounded-tr-none md:fmtm-rounded-l-2xl`}
+      >
+        <div className="fmtm-flex fmtm-flex-col fmtm-gap-2 fmtm-p-3 sm:fmtm-p-5">
+          <h4 className="fmtm-text-lg fmtm-font-bold">Feature: {featureProperties?.osm_id}</h4>
+        </div>
+
+        <div className="fmtm-h-fit fmtm-p-2 sm:fmtm-p-5 fmtm-border-t">
+          <div className="fmtm-flex fmtm-flex-col fmtm-gap-1 fmtm-mt-1">
+            <p>
+              <span className="fmtm-font-semibold">Tags: </span>
+              <span className="fmtm-text-primaryRed fmtm-overflow-hidden fmtm-line-clamp-2">
+                {featureProperties?.tags}
+              </span>
+            </p>
+            <p>
+              <span className="fmtm-font-semibold">Timestamp: </span>
+              <span className="fmtm-text-primaryRed">{featureProperties?.timestamp}</span>
+            </p>
+            <p>
+              <span className="fmtm-font-semibold">Changeset: </span>
+              <span className="fmtm-text-primaryRed">{featureProperties?.changeset}</span>
+            </p>
+            <p>
+              <span className="fmtm-font-semibold">Version: </span>
+              <span className="fmtm-text-primaryRed">{featureProperties?.version}</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="fmtm-p-2 sm:fmtm-p-5 fmtm-border-t">
+          <Button
+            btnText="MAP FEATURE IN ODK"
+            btnType="primary"
+            type="submit"
+            className="fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center"
+            onClick={() => {
+              // XForm name is constructed from lower case project title with underscores
+              const projectName = projectInfo.title.toLowerCase().split(' ').join('_');
+              const projectCategory = projectInfo.xform_category;
+              const formName = `${projectName}_${projectCategory}`;
+
+              const entity = entityOsmMap.find((x) => x.osm_id === featureProperties?.osm_id);
+              const entityUuid = entity ? entity.id : null;
+
+              if (!formName || !entityUuid) {
+                return;
+              }
+
+              document.location.href = `odkcollect://form/${formName}?existing=${entityUuid}`;
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskFeatureSelectionPopup;
diff --git a/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx b/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
index 59a0dd5952..bf7c17160a 100644
--- a/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
+++ b/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
@@ -78,7 +78,7 @@ const TaskSelectionPopup = ({ taskId, body, feature }: TaskSelectionPopupPropTyp
             style={{ width: '20px' }}
             className="fmtm-text-primaryRed group-hover:fmtm-text-red-700"
           />
-          <p className="fmtm-text-base fmtm-text-primaryRed group-hover:fmtm-text-red-700">MB TILES</p>
+          <p className="fmtm-text-base fmtm-text-primaryRed group-hover:fmtm-text-red-700">Basemaps</p>
         </div>
         <div title="Close">
           <AssetModules.CloseIcon
diff --git a/src/frontend/src/components/common/Checkbox.tsx b/src/frontend/src/components/common/Checkbox.tsx
index 1c48b17e7f..cfd3775b21 100644
--- a/src/frontend/src/components/common/Checkbox.tsx
+++ b/src/frontend/src/components/common/Checkbox.tsx
@@ -8,6 +8,7 @@ type CustomCheckboxType = {
   checked: boolean;
   onCheckedChange: (checked: boolean) => void;
   className?: string;
+  labelClickable?: boolean;
 };
 
 const Checkbox = React.forwardRef<
@@ -29,13 +30,16 @@ const Checkbox = React.forwardRef<
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export const CustomCheckbox = ({ label, checked, onCheckedChange, className }: CustomCheckboxType) => {
+export const CustomCheckbox = ({ label, checked, onCheckedChange, className, labelClickable }: CustomCheckboxType) => {
+  const labelStyle = labelClickable ? { cursor: 'pointer' } : {};
+
   return (
     <div className="fmtm-flex fmtm-gap-2 sm:fmtm-gap-4">
       <Checkbox checked={checked} onCheckedChange={onCheckedChange} className="fmtm-mt-[2px]" />
       <p
-        style={{ width: 'calc(100% - 32px)' }}
+        style={{ width: 'calc(100% - 32px)', ...labelStyle }}
         className={`fmtm-text-[#7A7676] fmtm-font-archivo fmtm-text-base fmtm-break-words ${className}`}
+        onClick={() => labelClickable && onCheckedChange(!checked)}
       >
         {label}
       </p>
diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
index da93e1ca82..1a59852dea 100644
--- a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
+++ b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
@@ -197,6 +197,7 @@ const ProjectDetailsForm = ({ flag }) => {
                 handleCustomChange('defaultODKCredentials', !values.defaultODKCredentials);
               }}
               className="fmtm-text-black"
+              labelClickable={true}
             />
           )}
           {((!values.defaultODKCredentials && hasODKCredentials) || !hasODKCredentials) && (
diff --git a/src/frontend/src/store/slices/ProjectSlice.ts b/src/frontend/src/store/slices/ProjectSlice.ts
index b15cf9d711..6f45bf48a7 100755
--- a/src/frontend/src/store/slices/ProjectSlice.ts
+++ b/src/frontend/src/store/slices/ProjectSlice.ts
@@ -30,6 +30,7 @@ const initialState: ProjectStateTypes = {
     total_contributors: null,
     last_active: '',
   },
+  entityOsmMap: [],
   projectDashboardLoading: false,
   geolocationStatus: false,
   projectCommentsList: [],
@@ -100,6 +101,13 @@ const ProjectSlice = createSlice({
     SetProjectDashboardDetail(state, action) {
       state.projectDashboardDetail = action.payload;
     },
+    SetEntityToOsmIdMapping(state, action) {
+      // Convert osm_id to int before mapping to state
+      state.entityOsmMap = action.payload.map((entity) => ({
+        ...entity,
+        osm_id: entity.osm_id ? parseInt(entity.osm_id, 10) : null,
+      }));
+    },
     SetProjectDashboardLoading(state, action) {
       state.projectDashboardLoading = action.payload;
     },
diff --git a/src/frontend/src/store/slices/TaskSlice.ts b/src/frontend/src/store/slices/TaskSlice.ts
index 084526ffaa..60d83c6be0 100644
--- a/src/frontend/src/store/slices/TaskSlice.ts
+++ b/src/frontend/src/store/slices/TaskSlice.ts
@@ -6,6 +6,7 @@ const initialState: TaskStateTypes = {
   taskLoading: false,
   taskInfo: [],
   selectedTask: null,
+  selectedFeatureProps: null,
   projectBoundaryLoading: false,
   projectBoundary: [],
   convertToOsmLoading: false,
@@ -45,10 +46,15 @@ const TaskSlice = createSlice({
       const tasks = taskInfo.length;
       state.taskData = { ...featureSubmissionCount, task_count: tasks };
     },
+
     SetSelectedTask(state, action) {
       state.selectedTask = action.payload;
     },
 
+    SetSelectedFeatureProps(state, action) {
+      state.selectedFeatureProps = action.payload;
+    },
+
     GetDownloadProjectBoundary(state, action) {
       state.projectBoundary = action.payload;
     },
diff --git a/src/frontend/src/store/types/IProject.ts b/src/frontend/src/store/types/IProject.ts
index 5d2f815a36..fcd0035b18 100644
--- a/src/frontend/src/store/types/IProject.ts
+++ b/src/frontend/src/store/types/IProject.ts
@@ -24,6 +24,7 @@ export type ProjectStateTypes = {
   mobileFooterSelection: string;
   projectDetailsLoading: boolean;
   projectDashboardDetail: projectDashboardDetailTypes;
+  entityOsmMap: EntityOsmMap[];
   projectDashboardLoading: boolean;
   geolocationStatus: boolean;
   projectCommentsList: projectCommentsListTypes[];
@@ -35,6 +36,13 @@ export type ProjectStateTypes = {
   projectActivityLoading: boolean;
 };
 
+type EntityOsmMap = {
+  id: string;
+  osm_id: string;
+  status: number;
+  updated_at: string;
+};
+
 type tilesListTypes = {
   id: number;
   project_id: number;
diff --git a/src/frontend/src/store/types/ITask.ts b/src/frontend/src/store/types/ITask.ts
index 2f84f1d0c7..da1704812c 100644
--- a/src/frontend/src/store/types/ITask.ts
+++ b/src/frontend/src/store/types/ITask.ts
@@ -5,6 +5,7 @@ export type TaskStateTypes = {
   taskLoading: boolean;
   taskInfo: taskInfoType[];
   selectedTask: number | null;
+  selectedFeatureProps: number | null;
   projectBoundaryLoading: boolean;
   projectBoundary: [];
   convertToOsmLoading: boolean;
diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx
index 3de9ee0300..aa5df37323 100644
--- a/src/frontend/src/views/ProjectDetailsV2.tsx
+++ b/src/frontend/src/views/ProjectDetailsV2.tsx
@@ -4,7 +4,7 @@ import '../styles/home.scss';
 import WindowDimension from '@/hooks/WindowDimension';
 // import MapDescriptionComponents from '@/components/MapDescriptionComponents';
 import ActivitiesPanel from '@/components/ProjectDetailsV2/ActivitiesPanel';
-import { ProjectById, GetProjectDashboard } from '@/api/Project';
+import { ProjectById, GetProjectDashboard, GetEntityInfo } from '@/api/Project';
 import { ProjectActions } from '@/store/slices/ProjectSlice';
 import CustomizedSnackbar from '@/utilities/CustomizedSnackbar';
 import OnScroll from '@/hooks/OnScroll';
@@ -14,6 +14,7 @@ import AssetModules from '@/shared/AssetModules';
 import FmtmLogo from '@/assets/images/hotLog.png';
 import GenerateBasemap from '@/components/GenerateBasemap';
 import TaskSelectionPopup from '@/components/ProjectDetailsV2/TaskSelectionPopup';
+import FeatureSelectionPopup from '@/components/ProjectDetailsV2/FeatureSelectionPopup';
 import DialogTaskActions from '@/components/DialogTaskActions';
 import MobileFooter from '@/components/ProjectDetailsV2/MobileFooter';
 import MobileActivitiesContents from '@/components/ProjectDetailsV2/MobileActivitiesContents';
@@ -54,7 +55,8 @@ const Home = () => {
   const [divRef, toggle, handleToggle] = useOutsideClick();
 
   const [mainView, setView] = useState<any>();
-  const [featuresLayer, setFeaturesLayer] = useState();
+  const [selectedTaskArea, setSelectedTaskArea] = useState();
+  const [selectedTaskFeature, setSelectedTaskFeature] = useState();
   const [dataExtractUrl, setDataExtractUrl] = useState(null);
   const [dataExtractExtent, setDataExtractExtent] = useState(null);
   const [taskBoundariesLayer, setTaskBoundariesLayer] = useState<null | Record<string, any>>(null);
@@ -72,6 +74,7 @@ const Home = () => {
   const state = CoreModules.useAppSelector((state) => state.project);
   const projectInfo = useAppSelector((state) => state.home.selectedProject);
   const selectedTask = useAppSelector((state) => state.task.selectedTask);
+  const selectedFeatureProps = useAppSelector((state) => state.task.selectedFeatureProps);
   const stateSnackBar = useAppSelector((state) => state.home.snackbar);
   const mobileFooterSelection = useAppSelector((state) => state.project.mobileFooterSelection);
   const mapTheme = useAppSelector((state) => state.theme.hotTheme);
@@ -156,29 +159,12 @@ const Home = () => {
     setTaskBoundariesLayer(taskBoundariesFeatcol);
   }, [state.projectTaskBoundries[0]?.taskBoundries?.length]);
 
-  const dataExtractDataPopup = (properties: dataExtractPropertyType) => {
-    return (
-      <div className="fmtm-h-fit">
-        <h2 className="fmtm-border-b-[2px] fmtm-border-primaryRed fmtm-w-fit fmtm-pr-1">
-          OSM ID: #{properties?.osm_id}
-        </h2>
-        <div className="fmtm-flex fmtm-flex-col fmtm-gap-1 fmtm-mt-1">
-          <p>
-            Tags: <span className="fmtm-text-primaryRed">{properties?.tags}</span>
-          </p>
-          <p>
-            Timestamp: <span className="fmtm-text-primaryRed">{properties?.timestamp}</span>
-          </p>
-          <p>
-            Changeset: <span className="fmtm-text-primaryRed">{properties?.changeset}</span>
-          </p>
-          <p>
-            Version: <span className="fmtm-text-primaryRed">{properties?.version}</span>
-          </p>
-        </div>
-      </div>
-    );
-  };
+  /**
+   * Sets the data extract URL when the data extract URL in the state changes.
+   */
+  useEffect(() => {
+    setDataExtractUrl(state.projectInfo.data_extract_url);
+  }, [state.projectInfo.data_extract_url]);
 
   const lockedPopup = () => {
     return <p>This task was locked by you</p>;
@@ -190,8 +176,10 @@ const Home = () => {
    * @param {Object} properties - Properties attached to task area boundary feature.
    * @param {Object} feature - The clicked task area feature.
    */
-  const projectClickOnMapTask = (properties, feature) => {
-    setFeaturesLayer(feature);
+  const projectClickOnTaskArea = (properties, feature) => {
+    // Close task feature popup, open task area popup
+    setSelectedTaskFeature(undefined);
+    setSelectedTaskArea(feature);
 
     let extent = properties.geometry.getExtent();
     setDataExtractExtent(properties.geometry);
@@ -217,11 +205,39 @@ const Home = () => {
   };
 
   /**
-   * Sets the data extract URL when the data extract URL in the state changes.
+   * Handles the click event on a task feature (geometry).
+   *
+   * @param {Object} properties - Properties attached to map feature.
+   * @param {Object} feature - The clicked feature.
    */
-  useEffect(() => {
-    setDataExtractUrl(state.projectInfo.data_extract_url);
-  }, [state.projectInfo.data_extract_url]);
+  const projectClickOnTaskFeature = (properties, feature) => {
+    // Close task area popup, open task feature popup
+    setSelectedTaskArea(undefined);
+    setSelectedTaskFeature(feature);
+
+    dispatch(CoreModules.TaskActions.SetSelectedFeatureProps(properties));
+
+    // let extent = properties.geometry.getExtent();
+    // setDataExtractExtent(properties.geometry);
+
+    // mapRef.current?.scrollIntoView({
+    //   block: 'center',
+    //   behavior: 'smooth',
+    // });
+
+    dispatch(ProjectActions.ToggleTaskModalStatus(true));
+
+    // // Fit the map view to the clicked feature's extent based on the window size
+    // if (windowSize.width < 768 && map.getView().getZoom() < 17) {
+    //   map.getView().fit(extent, {
+    //     padding: [10, 20, 300, 20],
+    //   });
+    // } else if (windowSize.width > 768 && map.getView().getZoom() < 17) {
+    //   map.getView().fit(extent, {
+    //     padding: [20, 350, 50, 10],
+    //   });
+    // }
+  };
 
   const buildingStyle = {
     ...defaultStyles,
@@ -251,6 +267,7 @@ const Home = () => {
 
   useEffect(() => {
     dispatch(GetProjectDashboard(`${import.meta.env.VITE_API_URL}/projects/project_dashboard/${projectId}`));
+    dispatch(GetEntityInfo(`${import.meta.env.VITE_API_URL}/projects/${projectId}/entities/statuses`));
   }, []);
 
   useEffect(async () => {
@@ -451,7 +468,7 @@ const Home = () => {
                     duration: 2000,
                   }}
                   layerProperties={{ name: 'project-area' }}
-                  mapOnClick={projectClickOnMapTask}
+                  mapOnClick={projectClickOnTaskArea}
                   zoomToLayer
                   zIndex={5}
                   getTaskStatusStyle={(feature) => {
@@ -470,6 +487,7 @@ const Home = () => {
                     constrainResolution: true,
                     duration: 2000,
                   }}
+                  mapOnClick={projectClickOnTaskFeature}
                   zoomToLayer
                   zIndex={5}
                 />
@@ -482,14 +500,6 @@ const Home = () => {
                 popupId="locked-popup"
                 className="fmtm-w-[235px]"
               />
-              <AsyncPopup
-                map={map}
-                popupUI={dataExtractDataPopup}
-                primaryKey={'osm_id'}
-                showOnHover="singleclick"
-                popupId="data-extract-popup"
-                className="fmtm-w-[300px]"
-              />
               <div className="fmtm-absolute fmtm-bottom-20 sm:fmtm-bottom-5 fmtm-left-3 fmtm-z-50 fmtm-rounded-lg">
                 <Accordion
                   body={<MapLegends defaultTheme={defaultTheme} />}
@@ -570,17 +580,18 @@ const Home = () => {
           </div>
         )}
       </div>
-      {featuresLayer != undefined && (
+      {selectedTaskArea != undefined && (
         <TaskSelectionPopup
           taskId={selectedTask}
-          feature={featuresLayer}
+          feature={selectedTaskArea}
           body={
             <div>
-              <DialogTaskActions map={map} view={mainView} feature={featuresLayer} taskId={selectedTask} />
+              <DialogTaskActions map={map} view={mainView} feature={selectedTaskArea} taskId={selectedTask} />
             </div>
           }
         />
       )}
+      {selectedTaskFeature != undefined && <FeatureSelectionPopup featureProperties={selectedFeatureProps} />}
     </div>
   );
 };