From db276b7f55f6934df1d165010d76e2d7846b3243 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Wed, 8 May 2024 09:02:31 +1200
Subject: [PATCH 01/26] refactor(adminPanel): RN-1284: Update admin panel
 tables (#5602)

* Update tables to use v7 package

* Sorting

* WIP

* Update DataFetchingTableNew.jsx

* Styling

* Fix disableSortBy value

* Rename new datafetching table

* Remove comment

* Update packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>

* refactor(adminPanel): RN-1284: Update admin panel tables PART 2 (#5610)

* WIP

* Upgrade react router

* WIP

* Table styling and breadcrumbs

* Breadcrumbs and links

* surveys pages

* user routes

* WIP

* Remove recursive function

* Remove recursive func

* Use new routes syntax

* Use correct icons

* Allow custom link generation

* Update QrCodeButton.jsx

* Stop filtering on button columns

* Make filter cells sticky

* Tidy ups

* Update SecondaryNavbar.jsx

* Make navbar work on re-render

* Handle redirects

* Error and no data handling

* Fix react router type issue

* Remove commented out redirect

* Update handling of admin panel routes

* Add back in permissions

* Update packages/admin-panel/src/table/DataFetchingTable/Cells.jsx

Co-authored-by: Rohan Port <59544282+rohan-bes@users.noreply.github.com>

* refactor(lesmis): RN-1284: Rejig admin panel tables PART 3 (#5617)

* WIP

* Upgrade react router

* WIP

* Table styling and breadcrumbs

* Breadcrumbs and links

* surveys pages

* user routes

* WIP

* Remove recursive function

* Remove recursive func

* Use new routes syntax

* Use correct icons

* Allow custom link generation

* Update QrCodeButton.jsx

* Stop filtering on button columns

* Make filter cells sticky

* Tidy ups

* Update SecondaryNavbar.jsx

* Make navbar work on re-render

* Handle redirects

* Error and no data handling

* Fix react router type issue

* WIP

* Remove commented out redirect

* working main app

* exports

* Update handling of admin panel routes

* WIP

* WIP

* WIP

* Add back in permissions

* WIP

* Move all routes to new format

* re-arrange imports

* Add back in redirects, and styling

* Tidy ups

* Remove comment

* Tidy ups

* remove spread

* Fix build

* Fix build

* Fix imports

* Updates from review

* Fix export filename issue

* Changes to UI

* Fix home link

* Fix header cell overflow

* Update width handling

* Fix prop type errors

* LESMIS tidy ups

---------

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Co-authored-by: Rohan Port <59544282+rohan-bes@users.noreply.github.com>
---
 packages/admin-panel/package.json             |   5 +-
 packages/admin-panel/src/App.jsx              | 156 +++----
 .../admin-panel/src/VizBuilderApp/App.jsx     |  36 +-
 .../src/VizBuilderApp/views/CreateNew.jsx     |   6 +-
 .../src/api/queries/useResourceDetails.js     |  26 ++
 .../src/authentication/PrivateRoute.jsx       |  27 +-
 .../src/authentication/selectors.js           |   2 +-
 packages/admin-panel/src/common.jsx           |  51 +++
 packages/admin-panel/src/editor/actions.js    |   1 +
 .../src/importExport/ExportButton.jsx         |  15 +-
 .../admin-panel/src/layout/AppPageLayout.jsx  |  69 +++
 .../admin-panel/src/layout/Breadcrumbs.jsx    |  61 +++
 packages/admin-panel/src/layout/Page.jsx      |   5 +-
 .../admin-panel/src/layout/TabPageLayout.jsx  |  46 ++
 packages/admin-panel/src/layout/index.js      |   3 +
 .../src/layout/navigation/NavPanel.jsx        |   6 +-
 .../src/layout/navigation/SecondaryNavbar.jsx |  91 ++--
 packages/admin-panel/src/library.js           |  44 +-
 .../admin-panel/src/logsTable/LogsButton.jsx  |   8 +-
 .../admin-panel/src/logsTable/LogsTable.jsx   |   4 +-
 packages/admin-panel/src/main.jsx             |  29 +-
 packages/admin-panel/src/pages/LoginPage.jsx  |  13 +-
 packages/admin-panel/src/pages/LogoutPage.jsx |   4 +-
 .../src/pages/resources/CountriesPage.jsx     |  48 --
 .../pages/resources/DashboardItemsPage.jsx    | 139 ------
 .../src/pages/resources/DataSourcesPage.jsx   | 149 ------
 .../src/pages/resources/EntityTypesPage.jsx   |  28 --
 .../src/pages/resources/ResourcePage.jsx      |  90 +++-
 .../admin-panel/src/pages/resources/index.js  |  38 +-
 packages/admin-panel/src/profileRoutes.jsx    |  16 +-
 packages/admin-panel/src/routes.jsx           | 282 ------------
 .../src/routes/entities/countries.js          |  43 ++
 .../entities/entities.js}                     |  76 ++--
 .../src/routes/entities/entitiesTabRoutes.jsx |  17 +
 .../src/routes/entities/entityHierarchies.js  |  12 +
 .../src/routes/entities/entityTypes.js        |  23 +
 .../admin-panel/src/routes/entities/index.js  |   7 +
 .../externalData/dhisInstances.js}            |  22 +-
 .../externalData/externalDataTabRoutes.jsx    |  17 +
 .../externalDatabaseConnections.js}           |  28 +-
 .../src/routes/externalData/index.js          |   7 +
 .../externalData/msupplySupersetInstances.js} |  26 +-
 packages/admin-panel/src/routes/index.js      |  27 ++
 .../projects/entityHierarchy.js}              |  16 +-
 .../admin-panel/src/routes/projects/index.js  |   6 +
 .../projects/landingPages.jsx}                |  23 +-
 .../projects/projects.js}                     |  37 +-
 .../src/routes/projects/projectsTabRoutes.jsx |  17 +
 .../admin-panel/src/routes/projects/strive.js |  13 +
 packages/admin-panel/src/routes/routes.jsx    |  20 +
 .../src/routes/surveys/dataElements.js        |  37 ++
 .../src/routes/surveys/dataGroups.js          |  63 +++
 .../surveys/dataMapping.js}                   |  28 +-
 .../admin-panel/src/routes/surveys/index.js   |  11 +
 .../surveys/optionSets.js}                    |  37 +-
 .../surveys/questions.js}                     |  41 +-
 .../surveys/surveyResponses.js}               |  46 +-
 .../surveys/surveys.js}                       |  31 +-
 .../src/routes/surveys/surveysTabRoutes.jsx   |  32 ++
 .../surveys/syncGroups.js}                    |  34 +-
 .../users/accessRequests.js}                  |  61 ++-
 .../admin-panel/src/routes/users/index.js     |   8 +
 .../users/permissionGroups.jsx}               |  28 +-
 .../routes/users/permissionGroupsViewer.js    |  11 +
 .../users/permissions.js}                     |  34 +-
 .../UsersPage.jsx => routes/users/users.jsx}  |  56 +--
 .../src/routes/users/usersTabRoutes.jsx       |  19 +
 .../routes/visualisations/dashboardItems.jsx  | 123 +++++
 .../visualisations/dashboardMailingLists.js}  |  35 +-
 .../visualisations/dashboardRelations.js}     |  31 +-
 .../visualisations/dashboards.js}             |  39 +-
 .../visualisations/dataTables.js}             |  29 +-
 .../src/routes/visualisations/index.js        |  13 +
 .../visualisations/indicators.js}             |  22 +-
 .../visualisations/legacyReports.js}          |  15 +-
 .../mapOverlayGroupRelations.js}              |  21 +-
 .../visualisations/mapOverlayGroups.js}       |  40 +-
 .../visualisations/mapOverlays.jsx}           | 170 ++++---
 .../visualisations/socialFeed.jsx}            |  35 +-
 .../visualisationsTabRoutes.jsx               |  37 ++
 packages/admin-panel/src/sync/SyncStatus.jsx  |  28 +-
 .../src/table/DataFetchingTable.jsx           | 306 -------------
 .../src/table/DataFetchingTable/Cells.jsx     | 186 ++++++++
 .../DataFetchingTable/DataFetchingTable.jsx   | 428 ++++++++++++++++++
 .../table/DataFetchingTable/FilterCell.jsx    |  87 ++++
 .../table/DataFetchingTable/Pagination.jsx    | 179 ++++++++
 .../src/table/DataFetchingTable/index.js      |   1 +
 .../src/table/StyledReactTable.jsx            | 160 -------
 packages/admin-panel/src/table/actions.js     |   4 +-
 .../src/table/columnTypes/BulkEditButton.jsx  |  13 +-
 .../table/columnTypes/ColumnActionButton.jsx  |  13 +
 .../src/table/columnTypes/DeleteButton.jsx    |  18 +-
 .../src/table/columnTypes/EditButton.jsx      |   8 +-
 .../src/table/columnTypes/QrCodeButton.jsx    |  40 +-
 .../ResubmitSurveyResponseButton.jsx          |  20 +-
 .../TestDatabaseConnectionButton.jsx          |  15 +-
 .../src/table/columnTypes/Tooltip.jsx         |   6 +-
 .../src/table/columnTypes/columnFilters.jsx   |  43 +-
 .../generateConfigForColumnType.jsx           |  13 +-
 packages/admin-panel/src/table/index.js       |   2 +-
 packages/admin-panel/src/theme/theme.js       |  16 +-
 .../admin-panel/src/widgets/PageHeader.jsx    |  10 +-
 .../src/apiV2/GETHandler/GETHandler.js        |   3 +-
 .../datatrak-web/src/routes/PrivateRoute.tsx  |   1 +
 packages/lesmis/package.json                  |   3 +-
 packages/lesmis/src/App.jsx                   |  12 +-
 packages/lesmis/src/api/mutations/useLogin.js |   7 +-
 .../src/api/queries/useValidatedQuery.js      |   6 +-
 .../lesmis/src/components/FormBackButton.jsx  |   7 +-
 packages/lesmis/src/components/LocaleMenu.jsx |  31 +-
 packages/lesmis/src/components/LoginLink.jsx  |  10 +-
 packages/lesmis/src/components/SearchBar.jsx  |   6 +-
 packages/lesmis/src/components/SignUpLink.jsx |  10 +-
 packages/lesmis/src/routes/AdminPanelApp.jsx  | 346 +++++---------
 .../lesmis/src/routes/LesmisAdminRedirect.jsx |  15 +
 .../lesmis/src/routes/LesmisAdminRoute.jsx    |  16 -
 packages/lesmis/src/routes/PageRoutes.jsx     | 162 ++++---
 packages/lesmis/src/theme/theme.js            |   2 +-
 .../src/utils/useDefaultDashboardTab.js       |  11 +-
 packages/lesmis/src/utils/useHomeUrl.js       |   8 +-
 packages/lesmis/src/utils/useUrlParams.js     |   8 +-
 .../lesmis/src/utils/useUrlSearchParams.js    |  15 +-
 .../views/AdminPanel/AdminPanelLoginPage.jsx  |   5 +-
 .../views/AdminPanel/SurveyResponsesView.jsx  | 146 ------
 .../AdminPanel/components/ApproveButton.jsx   |  25 +-
 .../AdminPanel/components/RejectButton.jsx    |  12 +-
 .../src/views/AdminPanel/pages/LoginPage.jsx  |   6 +-
 .../pages/resources/EntitiesPage.jsx          | 149 ------
 .../pages/resources/QuestionsPage.jsx         |  27 --
 .../pages/resources/SurveysPage.jsx           |  29 --
 .../views/AdminPanel/pages/resources/index.js |  18 -
 .../routes/entities/getEntitiesPageConfig.js  |  91 ++++
 .../routes/entities/getEntitiesTabRoutes.js   |  12 +
 .../views/AdminPanel/routes/entities/index.js |   5 +
 .../src/views/AdminPanel/routes/getRoutes.js  |  26 ++
 .../helpers/getCreateConfigs.js               |   0
 .../helpers/getDeleteColumnConfigs.js         |   7 +-
 .../helpers/getDeleteConfigs.js               |   6 +-
 .../helpers/getEditorConfigs.js               |   6 +-
 .../helpers/getImportConfigs.js               |   6 +-
 .../{pages => routes}/helpers/index.js        |   7 +-
 .../src/views/AdminPanel/routes/index.js      |   6 +
 .../getSurveyResponsePageConfig.js}           |  27 +-
 .../getSurveyResponsesTabRoutes.js            | 104 +++++
 .../routes/surveyResponses/index.js           |   5 +
 .../surveys/getDataElementsPageConfig.js}     |  58 ++-
 .../surveys/getQuestionPageConfig.js}         |  29 +-
 .../surveys/getSurveysPageConfig.js}          |  47 +-
 .../routes/surveys/getSurveysTabRoutes.js     |  22 +
 .../surveys/getSyncGroupsPageConfig.js}       |  43 +-
 .../views/AdminPanel/routes/surveys/index.js  |   6 +
 .../users/getPermissionsPageConfig.jsx}       |  88 +---
 .../users/getUsersPageConfig.jsx}             |  53 +--
 .../routes/users/getUsersTabRoutes.js         |  13 +
 .../views/AdminPanel/routes/users/index.js    |   6 +
 .../getDashboardItemsPageConfig.jsx}          |  89 ++--
 .../getDashboardRelationsPageConfig.js}       |  51 +--
 .../getDashboardsPageConfig.js}               |  61 ++-
 .../visualisations/getDataTablesPageConfig.js |   0
 .../getMapOverlayGroupRelationsPageConfig.js} |  43 +-
 .../getMapOverlayGroupsPageConfig.js}         |  49 +-
 .../getMapOverlaysPageConfig.jsx}             |  92 ++--
 .../getVisualisationsTabsRoutes.js            |  28 ++
 .../AdminPanel/routes/visualisations/index.js |   6 +
 packages/lesmis/src/views/EntityView.jsx      |  22 +-
 packages/lesmis/src/views/LoginView.jsx       |  36 +-
 .../lesmis/src/views/NotAuthorisedView.jsx    |  10 +-
 packages/lesmis/src/views/VerifyEmailView.jsx |   4 +-
 .../src/components/Breadcrumbs.tsx            |   2 +-
 yarn.lock                                     |  43 +-
 170 files changed, 3668 insertions(+), 3355 deletions(-)
 create mode 100644 packages/admin-panel/src/api/queries/useResourceDetails.js
 create mode 100644 packages/admin-panel/src/layout/AppPageLayout.jsx
 create mode 100644 packages/admin-panel/src/layout/Breadcrumbs.jsx
 create mode 100644 packages/admin-panel/src/layout/TabPageLayout.jsx
 delete mode 100644 packages/admin-panel/src/pages/resources/CountriesPage.jsx
 delete mode 100644 packages/admin-panel/src/pages/resources/DashboardItemsPage.jsx
 delete mode 100644 packages/admin-panel/src/pages/resources/DataSourcesPage.jsx
 delete mode 100644 packages/admin-panel/src/pages/resources/EntityTypesPage.jsx
 delete mode 100644 packages/admin-panel/src/routes.jsx
 create mode 100644 packages/admin-panel/src/routes/entities/countries.js
 rename packages/admin-panel/src/{pages/resources/EntitiesPage.jsx => routes/entities/entities.js} (62%)
 create mode 100644 packages/admin-panel/src/routes/entities/entitiesTabRoutes.jsx
 create mode 100644 packages/admin-panel/src/routes/entities/entityHierarchies.js
 create mode 100644 packages/admin-panel/src/routes/entities/entityTypes.js
 create mode 100644 packages/admin-panel/src/routes/entities/index.js
 rename packages/admin-panel/src/{pages/resources/DhisInstancesPage.jsx => routes/externalData/dhisInstances.js} (69%)
 create mode 100644 packages/admin-panel/src/routes/externalData/externalDataTabRoutes.jsx
 rename packages/admin-panel/src/{pages/resources/ExternalDatabaseConnectionsPage.jsx => routes/externalData/externalDatabaseConnections.js} (74%)
 create mode 100644 packages/admin-panel/src/routes/externalData/index.js
 rename packages/admin-panel/src/{pages/resources/SupersetInstancesPage.jsx => routes/externalData/msupplySupersetInstances.js} (63%)
 create mode 100644 packages/admin-panel/src/routes/index.js
 rename packages/admin-panel/src/{pages/resources/EntityHierarchyPage.jsx => routes/projects/entityHierarchy.js} (73%)
 create mode 100644 packages/admin-panel/src/routes/projects/index.js
 rename packages/admin-panel/src/{pages/resources/CustomLandingPagesPage.jsx => routes/projects/landingPages.jsx} (95%)
 rename packages/admin-panel/src/{pages/resources/ProjectsPage.jsx => routes/projects/projects.js} (83%)
 create mode 100644 packages/admin-panel/src/routes/projects/projectsTabRoutes.jsx
 create mode 100644 packages/admin-panel/src/routes/projects/strive.js
 create mode 100644 packages/admin-panel/src/routes/routes.jsx
 create mode 100644 packages/admin-panel/src/routes/surveys/dataElements.js
 create mode 100644 packages/admin-panel/src/routes/surveys/dataGroups.js
 rename packages/admin-panel/src/{pages/resources/DataElementDataServicesPage.jsx => routes/surveys/dataMapping.js} (73%)
 create mode 100644 packages/admin-panel/src/routes/surveys/index.js
 rename packages/admin-panel/src/{pages/resources/OptionSetsPage.jsx => routes/surveys/optionSets.js} (78%)
 rename packages/admin-panel/src/{pages/resources/QuestionsPage.jsx => routes/surveys/questions.js} (78%)
 rename packages/admin-panel/src/{pages/resources/SurveyResponsesPage.jsx => routes/surveys/surveyResponses.js} (85%)
 rename packages/admin-panel/src/{pages/resources/SurveysPage.jsx => routes/surveys/surveys.js} (97%)
 create mode 100644 packages/admin-panel/src/routes/surveys/surveysTabRoutes.jsx
 rename packages/admin-panel/src/{pages/resources/SyncGroupsPage.jsx => routes/surveys/syncGroups.js} (77%)
 rename packages/admin-panel/src/{pages/resources/AccessRequestsPage.jsx => routes/users/accessRequests.js} (81%)
 create mode 100644 packages/admin-panel/src/routes/users/index.js
 rename packages/admin-panel/src/{pages/resources/PermissionGroupsPage.jsx => routes/users/permissionGroups.jsx} (67%)
 create mode 100644 packages/admin-panel/src/routes/users/permissionGroupsViewer.js
 rename packages/admin-panel/src/{pages/resources/PermissionsPage.jsx => routes/users/permissions.js} (83%)
 rename packages/admin-panel/src/{pages/resources/UsersPage.jsx => routes/users/users.jsx} (84%)
 create mode 100644 packages/admin-panel/src/routes/users/usersTabRoutes.jsx
 create mode 100644 packages/admin-panel/src/routes/visualisations/dashboardItems.jsx
 rename packages/admin-panel/src/{pages/resources/DashboardMailingListsPage.jsx => routes/visualisations/dashboardMailingLists.js} (87%)
 rename packages/admin-panel/src/{pages/resources/DashboardRelationsPage.jsx => routes/visualisations/dashboardRelations.js} (86%)
 rename packages/admin-panel/src/{pages/resources/DashboardsPage.jsx => routes/visualisations/dashboards.js} (85%)
 rename packages/admin-panel/src/{pages/resources/DataTablesPage.jsx => routes/visualisations/dataTables.js} (80%)
 create mode 100644 packages/admin-panel/src/routes/visualisations/index.js
 rename packages/admin-panel/src/{pages/resources/IndicatorsPage.jsx => routes/visualisations/indicators.js} (73%)
 rename packages/admin-panel/src/{pages/resources/LegacyReportsPage.jsx => routes/visualisations/legacyReports.js} (71%)
 rename packages/admin-panel/src/{pages/resources/MapOverlayGroupRelationsPage.jsx => routes/visualisations/mapOverlayGroupRelations.js} (84%)
 rename packages/admin-panel/src/{pages/resources/MapOverlayGroupsPage.jsx => routes/visualisations/mapOverlayGroups.js} (80%)
 rename packages/admin-panel/src/{pages/resources/MapOverlaysPage.jsx => routes/visualisations/mapOverlays.jsx} (51%)
 rename packages/admin-panel/src/{pages/resources/SocialFeedPage.jsx => routes/visualisations/socialFeed.jsx} (82%)
 create mode 100644 packages/admin-panel/src/routes/visualisations/visualisationsTabRoutes.jsx
 delete mode 100644 packages/admin-panel/src/table/DataFetchingTable.jsx
 create mode 100644 packages/admin-panel/src/table/DataFetchingTable/Cells.jsx
 create mode 100644 packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
 create mode 100644 packages/admin-panel/src/table/DataFetchingTable/FilterCell.jsx
 create mode 100644 packages/admin-panel/src/table/DataFetchingTable/Pagination.jsx
 create mode 100644 packages/admin-panel/src/table/DataFetchingTable/index.js
 delete mode 100644 packages/admin-panel/src/table/StyledReactTable.jsx
 create mode 100644 packages/admin-panel/src/table/columnTypes/ColumnActionButton.jsx
 create mode 100644 packages/lesmis/src/routes/LesmisAdminRedirect.jsx
 delete mode 100644 packages/lesmis/src/routes/LesmisAdminRoute.jsx
 delete mode 100644 packages/lesmis/src/views/AdminPanel/SurveyResponsesView.jsx
 delete mode 100644 packages/lesmis/src/views/AdminPanel/pages/resources/EntitiesPage.jsx
 delete mode 100644 packages/lesmis/src/views/AdminPanel/pages/resources/QuestionsPage.jsx
 delete mode 100644 packages/lesmis/src/views/AdminPanel/pages/resources/SurveysPage.jsx
 delete mode 100644 packages/lesmis/src/views/AdminPanel/pages/resources/index.js
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/entities/getEntitiesPageConfig.js
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/entities/getEntitiesTabRoutes.js
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/entities/index.js
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/getRoutes.js
 rename packages/lesmis/src/views/AdminPanel/{pages => routes}/helpers/getCreateConfigs.js (100%)
 rename packages/lesmis/src/views/AdminPanel/{pages => routes}/helpers/getDeleteColumnConfigs.js (72%)
 rename packages/lesmis/src/views/AdminPanel/{pages => routes}/helpers/getDeleteConfigs.js (76%)
 rename packages/lesmis/src/views/AdminPanel/{pages => routes}/helpers/getEditorConfigs.js (90%)
 rename packages/lesmis/src/views/AdminPanel/{pages => routes}/helpers/getImportConfigs.js (84%)
 rename packages/lesmis/src/views/AdminPanel/{pages => routes}/helpers/index.js (59%)
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/index.js
 rename packages/lesmis/src/views/AdminPanel/{pages/helpers/getSurveyResponsePageConfigs.js => routes/surveyResponses/getSurveyResponsePageConfig.js} (85%)
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/surveyResponses/getSurveyResponsesTabRoutes.js
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/surveyResponses/index.js
 rename packages/lesmis/src/views/AdminPanel/{pages/resources/DataElementsPage.jsx => routes/surveys/getDataElementsPageConfig.js} (61%)
 rename packages/lesmis/src/views/AdminPanel/{pages/helpers/getQuestionPageConfigs.js => routes/surveys/getQuestionPageConfig.js} (82%)
 rename packages/lesmis/src/views/AdminPanel/{pages/helpers/getSurveysPageConfigs.js => routes/surveys/getSurveysPageConfig.js} (94%)
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/surveys/getSurveysTabRoutes.js
 rename packages/lesmis/src/views/AdminPanel/{pages/resources/SyncGroupsPage.jsx => routes/surveys/getSyncGroupsPageConfig.js} (69%)
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/surveys/index.js
 rename packages/lesmis/src/views/AdminPanel/{pages/resources/PermissionsPage.jsx => routes/users/getPermissionsPageConfig.jsx} (53%)
 rename packages/lesmis/src/views/AdminPanel/{pages/resources/UsersPage.jsx => routes/users/getUsersPageConfig.jsx} (82%)
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/users/getUsersTabRoutes.js
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/users/index.js
 rename packages/lesmis/src/views/AdminPanel/{pages/resources/DashboardItemsPage.jsx => routes/visualisations/getDashboardItemsPageConfig.jsx} (54%)
 rename packages/lesmis/src/views/AdminPanel/{pages/resources/DashboardRelationsPage.jsx => routes/visualisations/getDashboardRelationsPageConfig.js} (72%)
 rename packages/lesmis/src/views/AdminPanel/{pages/resources/DashboardsPage.jsx => routes/visualisations/getDashboardsPageConfig.js} (72%)
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/visualisations/getDataTablesPageConfig.js
 rename packages/lesmis/src/views/AdminPanel/{pages/resources/MapOverlayGroupRelationsPage.jsx => routes/visualisations/getMapOverlayGroupRelationsPageConfig.js} (68%)
 rename packages/lesmis/src/views/AdminPanel/{pages/resources/MapOverlayGroupsPage.jsx => routes/visualisations/getMapOverlayGroupsPageConfig.js} (73%)
 rename packages/lesmis/src/views/AdminPanel/{pages/resources/MapOverlaysPage.jsx => routes/visualisations/getMapOverlaysPageConfig.jsx} (69%)
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/visualisations/getVisualisationsTabsRoutes.js
 create mode 100644 packages/lesmis/src/views/AdminPanel/routes/visualisations/index.js

diff --git a/packages/admin-panel/package.json b/packages/admin-panel/package.json
index 3eb0e7ca22..263d09a98c 100644
--- a/packages/admin-panel/package.json
+++ b/packages/admin-panel/package.json
@@ -66,9 +66,10 @@
     "react-password-strength-bar": "^0.3.2",
     "react-query": "^3.19.0",
     "react-redux": "^5.0.6",
-    "react-router-dom": "^5.2.0",
+    "react-router": "6.3.0",
+    "react-router-dom": "6.3.0",
     "react-select": "^1.2.1",
-    "react-table-v6": "npm:react-table@^6.7.6",
+    "react-table": "^7.8.0",
     "reactstrap": "^5.0.0",
     "redux": "^3.7.2",
     "redux-auth-wrapper": "^2.0.1",
diff --git a/packages/admin-panel/src/App.jsx b/packages/admin-panel/src/App.jsx
index 4fefd4f2b3..c406ef7282 100644
--- a/packages/admin-panel/src/App.jsx
+++ b/packages/admin-panel/src/App.jsx
@@ -1,18 +1,51 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { Footer, Main, NavPanel, PageContentWrapper, PageWrapper, SecondaryNavbar } from './layout';
+import { AppPageLayout, Footer } from './layout';
 import { ROUTES } from './routes';
 import { PROFILE_ROUTES } from './profileRoutes';
-import { getHasBESAdminPanelAccess, getUser, PrivateRoute } from './authentication';
+import { getHasBESAdminAccess, getUser, PrivateRoute } from './authentication';
 import { LoginPage } from './pages/LoginPage';
 import { LogoutPage } from './pages/LogoutPage';
-import { labelToId } from './utilities';
+import { ResourcePage } from './pages/resources/ResourcePage';
+import { TabPageLayout } from './layout/TabPageLayout';
+
+export const getFlattenedChildViews = (route, basePath = '') => {
+  return route.childViews.reduce((acc, childView) => {
+    const { nestedView } = childView;
+
+    const childViewWithRoute = {
+      ...childView,
+      basePath,
+      path: `${route.path}${childView.path}`,
+      to: `${basePath}${route.path}${childView.path}`, // this is an absolute route so that the breadcrumbs work
+    };
+
+    if (!nestedView) return [...acc, childViewWithRoute];
+
+    const updatedNestedView = nestedView
+      ? {
+          ...nestedView,
+          path: `${route.path}${childView.path}${nestedView.path}`,
+          parent: childViewWithRoute,
+        }
+      : null;
+
+    return [
+      ...acc,
+      {
+        ...childViewWithRoute,
+        nestedView: updatedNestedView,
+      },
+      updatedNestedView,
+    ];
+  }, []);
+};
 
 export const App = ({ user, hasBESAdminAccess }) => {
   const userHasAccessToTab = tab => {
@@ -27,87 +60,54 @@ export const App = ({ user, hasBESAdminAccess }) => {
     return ROUTES.map(route => {
       return {
         ...route,
-        tabs: route.tabs.filter(tab => userHasAccessToTab(tab)),
+        childViews: route.childViews.filter(childView => userHasAccessToTab(childView)),
       };
     }).filter(route => {
       if (route.isBESAdminOnly) return !!hasBESAdminAccess;
-      return route.tabs.length > 0;
+      return route.childViews.length > 0;
     });
   };
 
   const accessibleRoutes = getAccessibleRoutes();
   return (
-    <Switch>
-      <Route path="/login" exact>
-        <LoginPage />
-      </Route>
-      <Route path="/logout" exact>
-        <LogoutPage />
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/logout" element={<LogoutPage />} />
+      <Route path="/" element={<PrivateRoute />}>
+        <Route element={<AppPageLayout user={user} routes={accessibleRoutes} />}>
+          <Route index element={<Navigate to="/surveys" replace />} />
+          <Route path="*" element={<Navigate to="/surveys" replace />} />
+          {[...accessibleRoutes, ...PROFILE_ROUTES].map(route => (
+            <Route
+              key={route.path || route.label}
+              path={route.path}
+              element={
+                <TabPageLayout
+                  routes={route.childViews}
+                  basePath={route.path}
+                  Footer={<Footer />}
+                />
+              }
+            >
+              {getFlattenedChildViews(route).map(childRoute => (
+                <Route
+                  key={childRoute.path || childRoute.title}
+                  path={childRoute.path}
+                  element={
+                    childRoute.Component ? (
+                      <childRoute.Component />
+                    ) : (
+                      <ResourcePage {...childRoute} hasBESAdminAccess={hasBESAdminAccess} />
+                    )
+                  }
+                />
+              ))}
+              <Route path="*" element={<Navigate to={route.childViews[0].path} replace />} />
+            </Route>
+          ))}
+        </Route>
       </Route>
-      <PrivateRoute path="/">
-        <PageWrapper>
-          <NavPanel
-            links={accessibleRoutes.map(route => ({
-              ...route,
-              id: `app-tab-${labelToId(route.label)}`,
-            }))}
-            user={user}
-            userLinks={[
-              { label: 'Profile', to: '/profile' },
-              { label: 'Logout', to: '/logout' },
-            ]}
-          />
-          <Main>
-            <PageContentWrapper>
-              <Switch>
-                {[...accessibleRoutes, ...PROFILE_ROUTES].map(route => (
-                  <Route
-                    key={route.to}
-                    path={route.to}
-                    render={({ match }) => {
-                      return (
-                        <>
-                          <SecondaryNavbar
-                            links={route.tabs.map(tab => ({
-                              ...tab,
-                              id: `app-subTab-${labelToId(tab.label)}`,
-                            }))}
-                            baseRoute={match.url}
-                          />
-                          <Switch>
-                            {route.tabs.map(tab => (
-                              <Route
-                                key={`${route.to}-${tab.to}`}
-                                path={`${route.to}${tab.to}`}
-                                exact
-                              >
-                                <tab.component
-                                  hasBESAdminAccess={hasBESAdminAccess}
-                                  needsBESAdminAccess={tab.needsBESAdminAccess}
-                                />
-                              </Route>
-                            ))}
-                            <Redirect to={route.to} />
-                          </Switch>
-                        </>
-                      );
-                    }}
-                  />
-                ))}
-                <Redirect to="surveys" />
-              </Switch>
-              <Footer />
-            </PageContentWrapper>
-          </Main>
-        </PageWrapper>
-      </PrivateRoute>
-      <Redirect
-        to={{
-          pathname: '/login',
-          state: { from: window.location.pathname },
-        }}
-      />
-    </Switch>
+    </Routes>
   );
 };
 
@@ -128,7 +128,7 @@ App.propTypes = {
 export default connect(
   state => ({
     user: getUser(state),
-    hasBESAdminAccess: getHasBESAdminPanelAccess(state),
+    hasBESAdminAccess: getHasBESAdminAccess(state),
   }),
   null,
 )(App);
diff --git a/packages/admin-panel/src/VizBuilderApp/App.jsx b/packages/admin-panel/src/VizBuilderApp/App.jsx
index 2f1e3e16a7..5030c74932 100644
--- a/packages/admin-panel/src/VizBuilderApp/App.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/App.jsx
@@ -5,7 +5,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Switch, Route } from 'react-router-dom';
+import { renderMatches, useLocation } from 'react-router';
+import { matchRoutes } from 'react-router-dom';
 import { FullPageLoader } from '@tupaia/ui-components';
 import { Main } from './views/Main';
 import { CreateNew } from './views/CreateNew';
@@ -33,6 +34,27 @@ export const App = ({ Footer, homeLink, logo }) => {
   const { isLoading: isUserLoading } = useUser();
 
   const basePath = useVizBuilderBasePath();
+  const location = useLocation();
+
+  const matches = matchRoutes(
+    [
+      {
+        path: `${basePath}/viz-builder/:dashboardItemOrMapOverlay/new`,
+        exact: true,
+        element: <CreateNew />,
+      },
+      {
+        path: `${basePath}/viz-builder/:dashboardItemOrMapOverlay/:visualisationId`,
+        element: <Main />,
+      },
+      // react router v6 does not support optional params, so we need to define two routes
+      {
+        path: `${basePath}/viz-builder/:dashboardItemOrMapOverlay`,
+        element: <Main />,
+      },
+    ],
+    location.pathname,
+  );
 
   if (isUserLoading) {
     return <FullPageLoader />;
@@ -44,14 +66,8 @@ export const App = ({ Footer, homeLink, logo }) => {
         <NavPanel logo={logo} homeLink={homeLink} />
 
         <Container>
-          <Switch>
-            <Route path={`${basePath}/viz-builder/:dashboardItemOrMapOverlay/new`} exact>
-              <CreateNew />
-            </Route>
-            <Route path={`${basePath}/viz-builder/:dashboardItemOrMapOverlay/:visualisationId?`}>
-              <Main />
-            </Route>
-          </Switch>
+          {/** Workaround for handling issues with this nested app */}
+          {renderMatches(matches)}
           {Footer && <Footer />}
         </Container>
       </Wrapper>
@@ -60,7 +76,7 @@ export const App = ({ Footer, homeLink, logo }) => {
 };
 
 App.propTypes = {
-  Footer: PropTypes.node,
+  Footer: PropTypes.elementType,
   homeLink: PropTypes.string,
   logo: PropTypes.shape({
     url: PropTypes.string.isRequired,
diff --git a/packages/admin-panel/src/VizBuilderApp/views/CreateNew.jsx b/packages/admin-panel/src/VizBuilderApp/views/CreateNew.jsx
index e9a1ebd840..7f33217cd9 100644
--- a/packages/admin-panel/src/VizBuilderApp/views/CreateNew.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/views/CreateNew.jsx
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
 import React from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
 import MuiContainer from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
@@ -60,11 +60,11 @@ const getMetadataFormComponent = dashboardItemOrMapOverlay => {
 export const CreateNew = () => {
   const { dashboardItemOrMapOverlay } = useParams();
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const basePath = useVizBuilderBasePath();
 
   const handleCreate = () => {
-    history.push(`${basePath}/viz-builder/${dashboardItemOrMapOverlay}/`);
+    navigate(`${basePath}/viz-builder/${dashboardItemOrMapOverlay}`);
   };
 
   const MetadataFormComponent = getMetadataFormComponent(dashboardItemOrMapOverlay);
diff --git a/packages/admin-panel/src/api/queries/useResourceDetails.js b/packages/admin-panel/src/api/queries/useResourceDetails.js
new file mode 100644
index 0000000000..2fe9813af3
--- /dev/null
+++ b/packages/admin-panel/src/api/queries/useResourceDetails.js
@@ -0,0 +1,26 @@
+/**
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import { useQuery } from 'react-query';
+import { get } from '../../VizBuilderApp/api/api';
+
+export const useItemDetails = (params, parent) => {
+  return useQuery(
+    ['itemDetails', parent?.endpoint, params],
+    async () => {
+      return get(parent?.endpoint, {
+        params: {
+          filter: JSON.stringify(params),
+          columns: JSON.stringify(
+            parent?.columns?.map(column => column.source).filter(source => source),
+          ),
+        },
+      });
+    },
+    {
+      enabled: !!params && !!parent?.endpoint,
+      select: data => data?.[0] ?? null,
+    },
+  );
+};
diff --git a/packages/admin-panel/src/authentication/PrivateRoute.jsx b/packages/admin-panel/src/authentication/PrivateRoute.jsx
index 070aa147f0..81f2dd6698 100644
--- a/packages/admin-panel/src/authentication/PrivateRoute.jsx
+++ b/packages/admin-panel/src/authentication/PrivateRoute.jsx
@@ -5,35 +5,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Redirect, Route } from 'react-router-dom';
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
 import { getIsUserAuthenticated } from './selectors';
 
 /*
  * A wrapper for <Route> that redirects to the login
  * screen if you're not yet authenticated.
  */
-export const PrivateRouteComponent = ({ loginPath, isLoggedIn, children, ...props }) => {
-  return (
-    <Route
-      {...props}
-      render={({ location }) => {
-        return isLoggedIn ? (
-          children
-        ) : (
-          <Redirect
-            to={{
-              pathname: loginPath,
-              state: { from: location },
-            }}
-          />
-        );
-      }}
-    />
-  );
+export const PrivateRouteComponent = ({ loginPath, isLoggedIn }) => {
+  const location = useLocation();
+  if (!isLoggedIn) {
+    return <Navigate to={loginPath} state={{ from: location.pathname }} />;
+  }
+  return <Outlet />;
 };
 
 PrivateRouteComponent.propTypes = {
-  children: PropTypes.node.isRequired,
   isLoggedIn: PropTypes.bool,
   loginPath: PropTypes.string,
 };
diff --git a/packages/admin-panel/src/authentication/selectors.js b/packages/admin-panel/src/authentication/selectors.js
index 0ee98d78f4..a6866218b2 100644
--- a/packages/admin-panel/src/authentication/selectors.js
+++ b/packages/admin-panel/src/authentication/selectors.js
@@ -19,7 +19,7 @@ export const getIsUserAuthenticated = state => !!getAuthenticationState(state).u
 export const getUser = state => getAuthenticationState(state).user || {}; // If null, return empty object
 
 // Assume that if a user has any BES Admin access, they are an internal user, to avoid having to check permissions for every country
-export const getHasBESAdminPanelAccess = state => {
+export const getHasBESAdminAccess = state => {
   const user = getUser(state);
   if (!user || !user.accessPolicy) return false;
   return Object.keys(user.accessPolicy).some(countryCode =>
diff --git a/packages/admin-panel/src/common.jsx b/packages/admin-panel/src/common.jsx
index 6875abca92..261c9ccfcd 100644
--- a/packages/admin-panel/src/common.jsx
+++ b/packages/admin-panel/src/common.jsx
@@ -104,3 +104,54 @@ export const DataSourceConfigView = row => {
 
   return <dl>{entries}</dl>;
 };
+
+export const DATA_SOURCE_FIELDS = [
+  {
+    Header: 'Code',
+    source: 'code',
+  },
+  {
+    Header: 'Data Service',
+    source: 'service_type',
+    editConfig: { default: 'dhis', options: SERVICE_TYPE_OPTIONS },
+  },
+];
+
+export const getDataSourceButtonsConfig = (fields, recordType) => [
+  {
+    Header: 'Edit',
+    type: 'edit',
+    actionConfig: {
+      editEndpoint: `${recordType}s`,
+      fields,
+      displayUsedBy: true,
+      recordType,
+    },
+    source: 'id',
+  },
+  {
+    Header: 'Delete',
+    type: 'delete',
+    actionConfig: {
+      endpoint: `${recordType}s`,
+    },
+  },
+];
+
+export const DATA_ELEMENT_FIELDS = [
+  ...DATA_SOURCE_FIELDS,
+  {
+    Header: 'Data Service Configuration',
+    source: 'config',
+    Cell: DataSourceConfigView,
+    editConfig: DATA_ELEMENT_FIELD_EDIT_CONFIG,
+  },
+  {
+    Header: 'Permission Groups',
+    source: 'permission_groups',
+    type: 'tooltip',
+    editConfig: {
+      type: 'jsonArray',
+    },
+  },
+];
diff --git a/packages/admin-panel/src/editor/actions.js b/packages/admin-panel/src/editor/actions.js
index 510bd8989c..d88b7e0484 100644
--- a/packages/admin-panel/src/editor/actions.js
+++ b/packages/admin-panel/src/editor/actions.js
@@ -117,6 +117,7 @@ export const openEditModal =
     });
 
     // And then fetch data / set default field values for edit/new respectively
+
     if (recordId) {
       const endpoint = `${editEndpoint}/${recordId}`;
       dispatch({
diff --git a/packages/admin-panel/src/importExport/ExportButton.jsx b/packages/admin-panel/src/importExport/ExportButton.jsx
index e59e007163..50f9480430 100644
--- a/packages/admin-panel/src/importExport/ExportButton.jsx
+++ b/packages/admin-panel/src/importExport/ExportButton.jsx
@@ -9,10 +9,11 @@ import ExportIcon from '@material-ui/icons/GetApp';
 import { IconButton } from '../widgets';
 import { makeSubstitutionsInString } from '../utilities';
 import { useApiContext } from '../utilities/ApiProvider';
+import { ColumnActionButton } from '../table/columnTypes/ColumnActionButton';
 
 const buildExportQueryParameters = (rowIdQueryParameter, rowData, filterQueryParameters) => {
   if (!rowIdQueryParameter && !filterQueryParameters) return null;
-  const queryParameters = rowIdQueryParameter ? { [rowIdQueryParameter]: rowData.id } : {};
+  const queryParameters = rowIdQueryParameter ? { [rowIdQueryParameter]: rowData.original.id } : {};
   if (filterQueryParameters) {
     return { ...queryParameters, ...filterQueryParameters };
   }
@@ -23,16 +24,18 @@ export const ExportButton = ({ actionConfig, row }) => {
   const api = useApiContext();
 
   return (
-    <IconButton
+    <ColumnActionButton
       className="export-button"
       onClick={async () => {
         const { exportEndpoint, rowIdQueryParameter, extraQueryParameters, fileName } =
           actionConfig;
-        const queryParameters = buildExportQueryParameters(rowIdQueryParameter, row);
+        const queryParameters = buildExportQueryParameters(rowIdQueryParameter, row.original);
         const endpoint = `export/${exportEndpoint}${
-          !queryParameters && row.id ? `/${row.id}` : ''
+          !queryParameters && row.original.id ? `/${row.original.id}` : ''
         }`;
-        const processedFileName = fileName ? makeSubstitutionsInString(fileName, row) : null;
+        const processedFileName = fileName
+          ? makeSubstitutionsInString(fileName, row.original)
+          : null;
         await api.download(
           endpoint,
           { queryParameters, ...extraQueryParameters },
@@ -41,7 +44,7 @@ export const ExportButton = ({ actionConfig, row }) => {
       }}
     >
       <ExportIcon />
-    </IconButton>
+    </ColumnActionButton>
   );
 };
 
diff --git a/packages/admin-panel/src/layout/AppPageLayout.jsx b/packages/admin-panel/src/layout/AppPageLayout.jsx
new file mode 100644
index 0000000000..d7f652a559
--- /dev/null
+++ b/packages/admin-panel/src/layout/AppPageLayout.jsx
@@ -0,0 +1,69 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Outlet } from 'react-router-dom';
+import { labelToId } from '../utilities';
+import { Main, PageWrapper } from './Page';
+import { NavPanel } from './navigation';
+
+export const AppPageLayout = ({ user, routes, logo, homeLink, userLinks, basePath }) => {
+  return (
+    <PageWrapper>
+      <NavPanel
+        links={routes.map(route => ({ ...route, id: `app-tab-${labelToId(route.label)}` }))}
+        user={user}
+        userLinks={userLinks}
+        logo={logo}
+        homeLink={homeLink}
+        basePath={basePath}
+      />
+      <Main>
+        <Outlet />
+      </Main>
+    </PageWrapper>
+  );
+};
+
+AppPageLayout.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string,
+    email: PropTypes.string,
+    firstName: PropTypes.string,
+    profileImage: PropTypes.string,
+  }),
+  routes: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  logo: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    alt: PropTypes.string.isRequired,
+  }),
+  homeLink: PropTypes.string,
+  userLinks: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      to: PropTypes.string.isRequired,
+    }),
+  ),
+  basePath: PropTypes.string,
+};
+
+AppPageLayout.defaultProps = {
+  logo: {
+    url: '/admin-panel-logo-white.svg',
+    alt: 'Tupaia Admin Panel Logo',
+  },
+  homeLink: '/',
+  userLinks: [
+    { label: 'Profile', to: '/profile' },
+    { label: 'Logout', to: '/logout' },
+  ],
+  basePath: '',
+  user: {},
+};
diff --git a/packages/admin-panel/src/layout/Breadcrumbs.jsx b/packages/admin-panel/src/layout/Breadcrumbs.jsx
new file mode 100644
index 0000000000..1a569a0c73
--- /dev/null
+++ b/packages/admin-panel/src/layout/Breadcrumbs.jsx
@@ -0,0 +1,61 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { ArrowBack } from '@material-ui/icons';
+import { Typography, Breadcrumbs as MuiBreadcrumbs, IconButton } from '@material-ui/core';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey['400']};
+`;
+
+const BackButton = styled(IconButton)`
+  color: ${({ theme }) => theme.palette.text.primary};
+  margin-right: 0.5rem;
+`;
+
+const ActiveBreadcrumb = styled(Typography)`
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
+`;
+
+export const Breadcrumbs = ({ parent, displayProperty, title, details, getDisplayValue }) => {
+  const itemDisplayValue = getDisplayValue ? getDisplayValue(details) : details?.[displayProperty];
+
+  return (
+    <Wrapper>
+      <BackButton component={Link} to={parent?.to || '/'}>
+        <ArrowBack />
+      </BackButton>
+      <MuiBreadcrumbs separator="|">
+        <ActiveBreadcrumb component={Link} to={parent?.to || '/'}>
+          {parent?.title}
+        </ActiveBreadcrumb>
+        <ActiveBreadcrumb>{title}</ActiveBreadcrumb>
+        {details && <Typography>{itemDisplayValue}</Typography>}
+      </MuiBreadcrumbs>
+    </Wrapper>
+  );
+};
+
+Breadcrumbs.propTypes = {
+  parent: PropTypes.object,
+  displayProperty: PropTypes.string,
+  title: PropTypes.string,
+  details: PropTypes.object,
+  getDisplayValue: PropTypes.func,
+};
+
+Breadcrumbs.defaultProps = {
+  parent: null,
+  displayProperty: 'id',
+  title: '',
+  details: null,
+  getDisplayValue: null,
+};
diff --git a/packages/admin-panel/src/layout/Page.jsx b/packages/admin-panel/src/layout/Page.jsx
index f88cb661e7..04f1608eb7 100644
--- a/packages/admin-panel/src/layout/Page.jsx
+++ b/packages/admin-panel/src/layout/Page.jsx
@@ -27,5 +27,8 @@ export const PageContentWrapper = styled(Container).attrs({
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 1.5rem;
+  max-height: 100%;
+  overflow: hidden;
 `;
diff --git a/packages/admin-panel/src/layout/TabPageLayout.jsx b/packages/admin-panel/src/layout/TabPageLayout.jsx
new file mode 100644
index 0000000000..5f86f6ec4b
--- /dev/null
+++ b/packages/admin-panel/src/layout/TabPageLayout.jsx
@@ -0,0 +1,46 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Outlet } from 'react-router-dom';
+import { PageContentWrapper } from './Page';
+import { SecondaryNavbar } from './navigation';
+
+export const TabPageLayout = ({
+  routes,
+  basePath,
+  Footer,
+  ContainerComponent = PageContentWrapper,
+}) => {
+  return (
+    <ContainerComponent>
+      <SecondaryNavbar
+        // adding a key here is to force the component to re-render when the route changes. This is so that the link refs get regenerated and the scroll buttons work correctly when navigating between different routes
+        key={basePath}
+        links={routes}
+        basePath={basePath}
+      />
+      <Outlet />
+      {Footer}
+    </ContainerComponent>
+  );
+};
+
+TabPageLayout.propTypes = {
+  routes: PropTypes.arrayOf(
+    PropTypes.shape({
+      path: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
+  ).isRequired,
+  basePath: PropTypes.string,
+  Footer: PropTypes.node.isRequired,
+  ContainerComponent: PropTypes.elementType,
+};
+
+TabPageLayout.defaultProps = {
+  basePath: '',
+  ContainerComponent: undefined,
+};
diff --git a/packages/admin-panel/src/layout/index.js b/packages/admin-panel/src/layout/index.js
index b621b00d3b..1a35ccbe97 100644
--- a/packages/admin-panel/src/layout/index.js
+++ b/packages/admin-panel/src/layout/index.js
@@ -6,3 +6,6 @@ export { Footer } from './Footer';
 export { PageBody } from './PageBody';
 export { NavPanel, SecondaryNavbar, HomeLink, UserLink } from './navigation';
 export { PageWrapper, Main, PageContentWrapper } from './Page';
+export { AppPageLayout } from './AppPageLayout';
+export { Breadcrumbs } from './Breadcrumbs';
+export { TabPageLayout } from './TabPageLayout';
diff --git a/packages/admin-panel/src/layout/navigation/NavPanel.jsx b/packages/admin-panel/src/layout/navigation/NavPanel.jsx
index f293fcb3f5..dea420c8e0 100644
--- a/packages/admin-panel/src/layout/navigation/NavPanel.jsx
+++ b/packages/admin-panel/src/layout/navigation/NavPanel.jsx
@@ -67,7 +67,7 @@ const Container = styled.div`
   justify-content: space-between;
 `;
 
-export const NavPanel = ({ links, user, logo, homeLink, userLinks }) => {
+export const NavPanel = ({ links, user, logo, homeLink, userLinks, basePath }) => {
   return (
     <Wrapper>
       <HomeLink logo={logo} homeLink={homeLink} />
@@ -77,7 +77,7 @@ export const NavPanel = ({ links, user, logo, homeLink, userLinks }) => {
             <List>
               {links.map(link => (
                 <ListItem key={link.label} disableGutters>
-                  <NavLink to={link.to}>
+                  <NavLink to={`${basePath}${link.path}`}>
                     {link.icon}
                     {link.label}
                   </NavLink>
@@ -111,6 +111,7 @@ NavPanel.propTypes = {
       to: PropTypes.string.isRequired,
     }).isRequired,
   ),
+  basePath: PropTypes.string,
 };
 
 NavPanel.defaultProps = {
@@ -121,4 +122,5 @@ NavPanel.defaultProps = {
   },
   homeLink: '/',
   userLinks: [],
+  basePath: '',
 };
diff --git a/packages/admin-panel/src/layout/navigation/SecondaryNavbar.jsx b/packages/admin-panel/src/layout/navigation/SecondaryNavbar.jsx
index f2e113e0be..5c7374c98f 100644
--- a/packages/admin-panel/src/layout/navigation/SecondaryNavbar.jsx
+++ b/packages/admin-panel/src/layout/navigation/SecondaryNavbar.jsx
@@ -4,14 +4,14 @@
  */
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { NavLink as BaseNavLink } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+import { matchPath, Link, useLocation } from 'react-router-dom';
 import { Button } from '@material-ui/core';
 import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
+import { labelToId } from '../../utilities';
 
 const Wrapper = styled.div`
   max-width: 100%;
-  padding-inline: 1.5rem;
   display: flex;
   position: sticky;
   top: 0;
@@ -31,25 +31,22 @@ const NavBar = styled.nav`
   align-items: center;
 `;
 
-const NavLink = styled(BaseNavLink)`
+const RouteLink = styled(Link)`
   line-height: 1.5;
   text-decoration: none;
   padding-block: 0.43rem;
   padding-inline: 1.43rem;
   white-space: nowrap;
-  color: ${props => props.theme.palette.text.secondary};
-  &.active {
-    color: ${props => props.theme.palette.text.primary};
-    border-bottom: 4px solid ${props => props.theme.palette.primary.main};
-  }
+  color: ${({ theme }) => theme.palette.text.secondary};
   &:not(:last-child) {
-    border-right: 1px solid ${props => props.theme.palette.text.tertiary};
+    border-right: 1px solid ${({ theme }) => theme.palette.text.tertiary};
   }
 
   &:hover,
-  &:focus {
-    color: ${props => props.theme.palette.text.primary};
-    font-weight: ${props => props.theme.typography.fontWeightMedium};
+  &:focus,
+  &:focus-visible {
+    color: ${({ theme }) => theme.palette.text.primary};
+    font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
     outline: none;
   }
   /**
@@ -69,15 +66,18 @@ const NavLink = styled(BaseNavLink)`
     font-weight: ${props => props.theme.typography.fontWeightMedium};
     visibility: hidden;
   }
+  ${({ $active, theme }) =>
+    $active &&
+    css`
+      color: ${theme.palette.text.primary};
+      border-bottom: 4px solid ${theme.palette.primary.main};
+    `}
 `;
 
 const ScrollButton = styled(Button)`
   width: 2rem;
   min-width: 0;
   color: ${props => props.theme.palette.text.secondary};
-  &:last-child {
-    margin-inline-start: 1rem;
-  }
 `;
 
 const useScrollableMenu = (containerRef, navLinkRefs) => {
@@ -88,7 +88,7 @@ const useScrollableMenu = (containerRef, navLinkRefs) => {
     // observer for when we scroll, to see if we need to show the scroll buttons
     const observer = new IntersectionObserver(detectOverflow, {
       root: containerRef.current,
-      threshold: 0.5,
+      threshold: 0.8,
     });
 
     const firstLink = navLinkRefs.current[0];
@@ -202,13 +202,34 @@ const useScrollableMenu = (containerRef, navLinkRefs) => {
   };
 };
 
-export const SecondaryNavbar = ({ links: linkInput, baseRoute }) => {
+export const SecondaryNavbar = ({ links: linkInput, basePath }) => {
   const containerRef = useRef(null);
+  const location = useLocation();
   const navLinkRefs = useRef(linkInput.map(() => React.createRef()));
-  const links = linkInput.map(link => ({
-    ...link,
-    target: link.exact ? link.to : `${baseRoute}${link.to}`,
-  }));
+
+  const getIsActive = link => {
+    const matchResult = matchPath(link.target, location.pathname);
+    const nestedViewMatch = link.nestedView
+      ? matchPath(`${link.target}${link.nestedView.path}`, location.pathname)
+      : false;
+
+    return !!matchResult || !!nestedViewMatch;
+  };
+
+  const links = linkInput?.map(({ exact, path, title, ...rest }) => {
+    const target = exact ? path : `${basePath}${path}`;
+
+    return {
+      ...rest,
+      title,
+      target,
+      id: `app-sub-view-${labelToId(title)}`,
+      active: getIsActive({
+        ...rest,
+        target,
+      }),
+    };
+  });
 
   const { scrollToNextVisibleItem, scrollToPrevVisibleItem, overflows } = useScrollableMenu(
     containerRef,
@@ -224,21 +245,16 @@ export const SecondaryNavbar = ({ links: linkInput, baseRoute }) => {
       )}
       <Container ref={containerRef}>
         <NavBar>
-          {links.map(({ to, label, target }, i) => (
-            <NavLink
-              key={to}
+          {links.map(({ title, target, active }, i) => (
+            <RouteLink
+              key={title}
               to={target}
-              isActive={(match, location) => {
-                if (!match) {
-                  return false;
-                }
-                return match.url === location.pathname;
-              }}
-              data-text={label}
+              data-text={title}
               ref={navLinkRefs.current[i]}
+              $active={active}
             >
-              {label}
-            </NavLink>
+              {title}
+            </RouteLink>
           ))}
         </NavBar>
       </Container>
@@ -254,9 +270,10 @@ export const SecondaryNavbar = ({ links: linkInput, baseRoute }) => {
 SecondaryNavbar.propTypes = {
   links: PropTypes.arrayOf(
     PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      to: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      exact: PropTypes.bool,
     }),
   ).isRequired,
-  baseRoute: PropTypes.string.isRequired,
+  basePath: PropTypes.string.isRequired,
 };
diff --git a/packages/admin-panel/src/library.js b/packages/admin-panel/src/library.js
index af7789301f..be641e3dfc 100644
--- a/packages/admin-panel/src/library.js
+++ b/packages/admin-panel/src/library.js
@@ -2,16 +2,48 @@
  * Tupaia
  *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
-import 'react-table-v6/react-table.css';
-
+export {
+  surveys,
+  questions,
+  surveyResponses,
+  dataElements,
+  syncGroups,
+  users,
+  permissions,
+  dashboardItems,
+  dashboards,
+  dashboardRelations,
+  mapOverlays,
+  mapOverlayGroups,
+  mapOverlayGroupRelations,
+  visualisationsTabRoutes,
+  dataTables,
+  usersTabRoutes,
+  surveysTabRoutes,
+  entities,
+  entitiesTabRoutes,
+  externalDatabaseConnections,
+  QRCodeColumn,
+  externalDataTabRoutes,
+} from './routes';
 export { LoginPage, LogoutPage } from './pages';
-export { PrivateRoute } from './authentication';
+export { PrivateRoute, getHasBESAdminAccess } from './authentication';
 export * from './pages/resources';
 export { ReduxAutocomplete } from './autocomplete';
-export { ExportModal } from './importExport';
 export { IconButton } from './widgets';
 export { AdminPanelDataProviders } from './utilities/AdminPanelProviders';
 export { useApiContext } from './utilities/ApiProvider';
-export { DataChangeAction } from './editor';
+export { DataChangeAction, ActionButton } from './editor';
 export { App as VizBuilderApp } from './VizBuilderApp/App';
-export { NavPanel, PageWrapper, Main, SecondaryNavbar, PageContentWrapper } from './layout';
+export {
+  NavPanel,
+  PageWrapper,
+  Main,
+  SecondaryNavbar,
+  TabPageLayout,
+  PageContentWrapper,
+  AppPageLayout,
+} from './layout';
+export { getFlattenedChildViews } from './App';
+export { ExportModal } from './importExport';
+export { ColumnActionButton } from './table/columnTypes/ColumnActionButton';
diff --git a/packages/admin-panel/src/logsTable/LogsButton.jsx b/packages/admin-panel/src/logsTable/LogsButton.jsx
index 47eed548b3..b0a7e75373 100644
--- a/packages/admin-panel/src/logsTable/LogsButton.jsx
+++ b/packages/admin-panel/src/logsTable/LogsButton.jsx
@@ -7,15 +7,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import DescriptionIcon from '@material-ui/icons/Description';
-import { IconButton } from '../widgets';
 import { openLogsModal } from './actions';
+import { ColumnActionButton } from '../table/columnTypes/ColumnActionButton';
 
 export const LogsButtonComponent = props => {
   const { openModal } = props;
   return (
-    <IconButton className="logs-button" onClick={openModal}>
+    <ColumnActionButton className="logs-button" onClick={openModal}>
       <DescriptionIcon />
-    </IconButton>
+    </ColumnActionButton>
   );
 };
 
@@ -25,7 +25,7 @@ LogsButtonComponent.propTypes = {
 
 const mapDispatchToProps = (dispatch, { actionConfig, value: recordId, row }) => ({
   openModal: () => {
-    dispatch(openLogsModal(actionConfig, recordId, row));
+    dispatch(openLogsModal(actionConfig, recordId, row.original));
   },
 });
 
diff --git a/packages/admin-panel/src/logsTable/LogsTable.jsx b/packages/admin-panel/src/logsTable/LogsTable.jsx
index 1b45211574..e4f7f27362 100644
--- a/packages/admin-panel/src/logsTable/LogsTable.jsx
+++ b/packages/admin-panel/src/logsTable/LogsTable.jsx
@@ -28,8 +28,8 @@ export const LogsTable = ({ logs, logsCount, page, logsPerPage, onChangePage })
       orderBy={orderBy}
       onChangeOrderBy={sortColumn}
       columns={[
-        { key: 'timestamp', title: 'time', sortable: true, width: '250px', align: 'left' },
-        { key: 'message', title: 'message', sortable: false, align: 'left' },
+        { key: 'timestamp', title: 'time', disableSortBy: true, width: '250px', align: 'left' },
+        { key: 'message', title: 'message', disableSortBy: true, align: 'left' },
       ]}
     />
   );
diff --git a/packages/admin-panel/src/main.jsx b/packages/admin-panel/src/main.jsx
index 57be931dc9..b61dcef522 100644
--- a/packages/admin-panel/src/main.jsx
+++ b/packages/admin-panel/src/main.jsx
@@ -4,12 +4,11 @@
  */
 import React, { lazy, Suspense } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { render as renderReactApp } from 'react-dom';
 import { ThemeProvider } from 'styled-components';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { MuiThemeProvider, StylesProvider } from '@material-ui/core/styles';
-import 'react-table-v6/react-table.css';
 import { EnvBanner } from '@tupaia/ui-components';
 import AdminPanel from './App';
 import { AdminPanelProviders } from './utilities/AdminPanelProviders';
@@ -18,6 +17,14 @@ import { Footer, NavPanel } from './widgets';
 import { TupaiaApi } from './api';
 import { theme } from './theme';
 
+const AdminPanelRoute = () => {
+  return (
+    <AdminPanelProviders>
+      <AdminPanel />
+    </AdminPanelProviders>
+  );
+};
+
 const VizBuilder = lazy(() => import('./VizBuilderApp'));
 
 const disableReactDevTools = () => {
@@ -56,17 +63,13 @@ renderReactApp(
             <MuiThemeProvider theme={theme}>
               <ThemeProvider theme={theme}>
                 <CssBaseline />
-                <Switch>
-                  <Route path="/viz-builder">
-                    <VizBuilder NavPanel={NavPanel} Footer={Footer} />
-                  </Route>
-                  <Route path="/">
-                    <AdminPanelProviders>
-                      <AdminPanel />
-                    </AdminPanelProviders>
-                  </Route>
-                  <Redirect to="/login" />
-                </Switch>
+                <Routes>
+                  <Route
+                    path="/viz-builder/*"
+                    element={<VizBuilder NavPanel={NavPanel} Footer={Footer} />}
+                  />
+                  <Route path="*" default element={<AdminPanelRoute />} />
+                </Routes>
               </ThemeProvider>
             </MuiThemeProvider>
           </StylesProvider>
diff --git a/packages/admin-panel/src/pages/LoginPage.jsx b/packages/admin-panel/src/pages/LoginPage.jsx
index 087a0dfafe..079b978b5f 100644
--- a/packages/admin-panel/src/pages/LoginPage.jsx
+++ b/packages/admin-panel/src/pages/LoginPage.jsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Redirect, withRouter } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import MuiCard from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
@@ -62,8 +62,10 @@ const requestAnAccountUrl = 'https://info.tupaia.org/contact';
 const Logo = () => <StyledImg src="/admin-panel-logo.svg" alt="psss-logo" />;
 
 const LoginPageComponent = ({ isLoggedIn, redirectTo, LogoComponent }) => {
+  const location = useLocation();
   if (isLoggedIn) {
-    return <Redirect to={redirectTo} />;
+    const redirectUrl = redirectTo || location.state?.from || '/';
+    return <Navigate to={redirectUrl} />;
   }
 
   return (
@@ -89,13 +91,12 @@ LoginPageComponent.propTypes = {
 };
 
 LoginPageComponent.defaultProps = {
-  redirectTo: '/',
+  redirectTo: null,
   LogoComponent: Logo,
 };
 
-const mapStateToProps = (state, ownProps) => ({
+const mapStateToProps = state => ({
   isLoggedIn: getIsUserAuthenticated(state),
-  redirectTo: ownProps.redirectTo || ownProps.location?.state?.from || '/',
 });
 
-export const LoginPage = withRouter(connect(mapStateToProps)(LoginPageComponent));
+export const LoginPage = connect(mapStateToProps)(LoginPageComponent);
diff --git a/packages/admin-panel/src/pages/LogoutPage.jsx b/packages/admin-panel/src/pages/LogoutPage.jsx
index c8fc9d6e83..61a0418dbc 100644
--- a/packages/admin-panel/src/pages/LogoutPage.jsx
+++ b/packages/admin-panel/src/pages/LogoutPage.jsx
@@ -6,7 +6,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 import { getIsUserAuthenticated, logout } from '../authentication';
 
 const LogoutPageComponent = ({ redirectTo, onLogout, isLoggedIn }) => {
@@ -15,7 +15,7 @@ const LogoutPageComponent = ({ redirectTo, onLogout, isLoggedIn }) => {
   }, [onLogout]);
 
   if (!isLoggedIn) {
-    return <Redirect to={redirectTo} />;
+    return <Navigate to={redirectTo} />;
   }
 
   return <div>Logging out...</div>;
diff --git a/packages/admin-panel/src/pages/resources/CountriesPage.jsx b/packages/admin-panel/src/pages/resources/CountriesPage.jsx
deleted file mode 100644
index ca23156537..0000000000
--- a/packages/admin-panel/src/pages/resources/CountriesPage.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-import { COLUMNS as ENTITIES_COLUMNS } from './EntitiesPage';
-
-const FIELDS = [
-  { source: 'id', show: false },
-  {
-    Header: 'Name',
-    source: 'name',
-  },
-  {
-    Header: 'Code',
-    source: 'code',
-  },
-];
-
-const EXPANSION_CONFIG = [
-  {
-    title: 'Entities',
-    endpoint: 'countries/{id}/entities',
-    columns: ENTITIES_COLUMNS,
-  },
-];
-
-const CREATE_CONFIG = {
-  title: 'New Country',
-  actionConfig: {
-    title: 'Create New Country',
-    editEndpoint: 'countries',
-    fields: FIELDS,
-  },
-};
-
-export const CountriesPage = props => (
-  <ResourcePage
-    title="Countries"
-    endpoint="countries"
-    columns={FIELDS}
-    expansionTabs={EXPANSION_CONFIG}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
diff --git a/packages/admin-panel/src/pages/resources/DashboardItemsPage.jsx b/packages/admin-panel/src/pages/resources/DashboardItemsPage.jsx
deleted file mode 100644
index 82d581d6cf..0000000000
--- a/packages/admin-panel/src/pages/resources/DashboardItemsPage.jsx
+++ /dev/null
@@ -1,139 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { ResourcePage } from './ResourcePage';
-import { CreateActionButton } from '../../editor';
-
-export const DASHBOARD_ITEMS_ENDPOINT = 'dashboardItems';
-
-const FIELDS = [
-  {
-    Header: 'Code',
-    source: 'code',
-    type: 'tooltip',
-  },
-  {
-    Header: 'Report Code',
-    source: 'report_code',
-    type: 'tooltip',
-  },
-  {
-    Header: 'Config',
-    source: 'config',
-    type: 'jsonTooltip',
-    editConfig: { type: 'jsonEditor' },
-  },
-  {
-    Header: 'Legacy',
-    source: 'legacy',
-    type: 'boolean',
-    editConfig: { type: 'boolean' },
-  },
-];
-
-export const DashboardItemsPage = ({ vizBuilderBaseUrl, ...props }) => {
-  const extraEditFields = [
-    // ID field for constructing viz-builder path only, not for showing or editing
-    {
-      Header: 'ID',
-      source: 'id',
-      show: false,
-    },
-    {
-      Header: 'Edit using Visualisation Builder',
-      type: 'link',
-      editConfig: {
-        type: 'link',
-        linkOptions: {
-          path: `${vizBuilderBaseUrl}/viz-builder/dashboard-item/:id`,
-          parameters: { id: 'id' },
-        },
-        visibilityCriteria: {
-          legacy: false,
-        },
-      },
-    },
-  ];
-
-  const columns = [
-    ...FIELDS,
-    {
-      Header: 'Export',
-      source: 'id',
-      type: 'export',
-      actionConfig: {
-        exportEndpoint: 'dashboardVisualisation',
-        fileName: '{code}',
-      },
-    },
-    {
-      Header: 'Edit',
-      type: 'edit',
-      source: 'id',
-      actionConfig: {
-        title: 'Edit Dashboard Item',
-        editEndpoint: DASHBOARD_ITEMS_ENDPOINT,
-        fields: [...FIELDS, ...extraEditFields],
-      },
-    },
-    {
-      Header: 'Delete',
-      source: 'id',
-      type: 'delete',
-      actionConfig: {
-        endpoint: DASHBOARD_ITEMS_ENDPOINT,
-      },
-    },
-  ];
-
-  const renderNewDashboardVizButton = () => (
-    <CreateActionButton to={`${vizBuilderBaseUrl}/viz-builder/dashboard-item/new`} component={Link}>
-      New
-    </CreateActionButton>
-  );
-  const importConfig = {
-    title: 'Import Dashboard Visualisation',
-    subtitle: 'Please upload one or more .json files with visualisations to be imported:',
-    actionConfig: {
-      importEndpoint: 'dashboardVisualisations',
-      multiple: true,
-    },
-    getFinishedMessage: response => (
-      <>
-        <span>{response.message}</span>
-        {response.importedVizes.map(({ code, id }) => (
-          <p>
-            <span>{`${code}: `}</span>
-            <Link to={`${vizBuilderBaseUrl}/viz-builder/dashboard-item/${id}`}>
-              View in Visualisation Builder
-            </Link>
-          </p>
-        ))}
-      </>
-    ),
-  };
-
-  return (
-    <ResourcePage
-      title="Dashboard Items"
-      endpoint={DASHBOARD_ITEMS_ENDPOINT}
-      columns={columns}
-      importConfig={importConfig}
-      LinksComponent={renderNewDashboardVizButton}
-      {...props}
-    />
-  );
-};
-
-DashboardItemsPage.propTypes = {
-  vizBuilderBaseUrl: PropTypes.string,
-};
-
-DashboardItemsPage.defaultProps = {
-  vizBuilderBaseUrl: '',
-};
diff --git a/packages/admin-panel/src/pages/resources/DataSourcesPage.jsx b/packages/admin-panel/src/pages/resources/DataSourcesPage.jsx
deleted file mode 100644
index 64aa2e9617..0000000000
--- a/packages/admin-panel/src/pages/resources/DataSourcesPage.jsx
+++ /dev/null
@@ -1,149 +0,0 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-import {
-  DataSourceConfigView,
-  DATA_ELEMENT_FIELD_EDIT_CONFIG,
-  SERVICE_TYPE_OPTIONS,
-} from '../../common';
-
-const getButtonsConfig = (fields, recordType) => [
-  {
-    Header: 'Edit',
-    type: 'edit',
-    source: 'id',
-    actionConfig: {
-      editEndpoint: `${recordType}s`,
-      fields,
-      displayUsedBy: true,
-      recordType,
-    },
-  },
-  {
-    Header: 'Delete',
-    source: 'id',
-    type: 'delete',
-    actionConfig: {
-      endpoint: `${recordType}s`,
-    },
-  },
-];
-
-const DATA_SOURCE_FIELDS = [
-  {
-    Header: 'Code',
-    source: 'code',
-  },
-  {
-    Header: 'Data Service',
-    source: 'service_type',
-    editConfig: { default: 'dhis', options: SERVICE_TYPE_OPTIONS },
-  },
-];
-const DATA_ELEMENT_FIELDS = [
-  ...DATA_SOURCE_FIELDS,
-  {
-    Header: 'Data Service Configuration',
-    source: 'config',
-    Cell: DataSourceConfigView,
-    editConfig: DATA_ELEMENT_FIELD_EDIT_CONFIG,
-  },
-  {
-    Header: 'Permission Groups',
-    source: 'permission_groups',
-    type: 'jsontooltip',
-    editConfig: {
-      type: 'jsonArray',
-      optionsEndpoint: 'permissionGroups',
-      optionLabelKey: 'name',
-      optionValueKey: 'name',
-      sourceKey: 'permission_groups',
-      allowMultipleValues: true,
-    },
-  },
-];
-const DATA_GROUP_FIELDS = [
-  ...DATA_SOURCE_FIELDS,
-  {
-    Header: 'Data Service Configuration',
-    source: 'config',
-    Cell: DataSourceConfigView,
-    editConfig: {
-      type: 'json',
-      default: '{}',
-      visibilityCriteria: {
-        service_type: 'dhis',
-      },
-      getJsonFieldSchema: () => [
-        {
-          label: 'DHIS Server',
-          fieldName: 'dhisInstanceCode',
-          optionsEndpoint: 'dhisInstances',
-          optionLabelKey: 'dhisInstances.code',
-          optionValueKey: 'dhisInstances.code',
-          visibilityCriteria: { service_type: 'dhis' },
-        },
-      ],
-    },
-  },
-];
-
-const EDITOR_CONFIG = {
-  displayUsedBy: true,
-};
-
-export const DataGroupsPage = () => (
-  <ResourcePage
-    title="Data Groups"
-    endpoint="dataGroups"
-    reduxId="dataGroups"
-    columns={[...DATA_GROUP_FIELDS, ...getButtonsConfig(DATA_GROUP_FIELDS, 'dataGroup')]}
-    expansionTabs={[
-      {
-        title: 'Data Elements',
-        endpoint: 'dataGroups/{id}/dataElements',
-        columns: [...DATA_ELEMENT_FIELDS, ...getButtonsConfig(DATA_ELEMENT_FIELDS, 'dataElement')],
-      },
-    ]}
-    createConfig={{
-      title: 'New Data Group',
-      actionConfig: {
-        title: 'Edit Data Group',
-        editEndpoint: 'dataGroups',
-        fields: [...DATA_GROUP_FIELDS],
-      },
-    }}
-    editorConfig={EDITOR_CONFIG}
-  />
-);
-
-const IMPORT_CONFIG = {
-  title: 'Import Data Elements',
-  actionConfig: {
-    importEndpoint: 'dataElements',
-  },
-};
-
-export const DataElementsPage = props => (
-  <ResourcePage
-    title="Data Elements"
-    endpoint="dataElements"
-    reduxId="dataElements"
-    columns={[...DATA_ELEMENT_FIELDS, ...getButtonsConfig(DATA_ELEMENT_FIELDS, 'dataElement')]}
-    importConfig={IMPORT_CONFIG}
-    createConfig={{
-      title: 'New Data Element',
-      actionConfig: {
-        title: 'Edit Data Element',
-        editEndpoint: 'dataElements',
-        fields: [...DATA_ELEMENT_FIELDS],
-      },
-    }}
-    editorConfig={EDITOR_CONFIG}
-    {...props}
-  />
-);
diff --git a/packages/admin-panel/src/pages/resources/EntityTypesPage.jsx b/packages/admin-panel/src/pages/resources/EntityTypesPage.jsx
deleted file mode 100644
index 353debff47..0000000000
--- a/packages/admin-panel/src/pages/resources/EntityTypesPage.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
-const ENTITY_TYPES_ENDPOINT = 'entityTypes';
-
-export const ENTITY_TYPES_COLUMNS = [
-  { source: 'id', show: false },
-  {
-    Header: 'Type',
-    source: 'type',
-    filterable: false,
-    sortable: false,
-  },
-];
-
-export const EntityTypesPage = props => (
-  <ResourcePage
-    title="Entity Types"
-    endpoint={ENTITY_TYPES_ENDPOINT}
-    columns={ENTITY_TYPES_COLUMNS}
-    {...props}
-  />
-);
diff --git a/packages/admin-panel/src/pages/resources/ResourcePage.jsx b/packages/admin-panel/src/pages/resources/ResourcePage.jsx
index 7c655d71b9..8fcecefb5a 100644
--- a/packages/admin-panel/src/pages/resources/ResourcePage.jsx
+++ b/packages/admin-panel/src/pages/resources/ResourcePage.jsx
@@ -1,11 +1,12 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { useParams } from 'react-router-dom';
 import { DataFetchingTable } from '../../table';
 import { EditModal } from '../../editor';
 import { PageHeader, PageBody } from '../../widgets';
@@ -13,6 +14,8 @@ import { getExplodedFields } from '../../utilities';
 import { LogsModal } from '../../logsTable';
 import { QrCodeModal } from '../../qrCode';
 import { ResubmitSurveyResponseModal } from '../../surveyResponse/ResubmitSurveyResponseModal';
+import { Breadcrumbs } from '../../layout';
+import { useItemDetails } from '../../api/queries/useResourceDetails';
 
 const Container = styled(PageBody)`
   // This is a work around to put the scroll bar at the top of the section by rotating the
@@ -26,6 +29,14 @@ const Container = styled(PageBody)`
       transform: rotateX(180deg);
     }
   }
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  border-radius: 4px;
+  border: 1px solid ${({ theme }) => theme.palette.grey['400']};
+  padding-inline: 0;
+  max-height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 `;
 
 const TableComponent = ({ children }) => (
@@ -38,12 +49,27 @@ TableComponent.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
+const useEndpoint = (endpoint, details, params) => {
+  if (!details && !params) return endpoint;
+
+  const mergedDetails = { ...details, ...params };
+
+  const replaceParams = () => {
+    let updatedEndpoint = endpoint;
+    Object.keys(mergedDetails).forEach(key => {
+      updatedEndpoint = updatedEndpoint.replace(`{${key}}`, mergedDetails[key]);
+    });
+    return updatedEndpoint;
+  };
+  const updatedEndpoint = replaceParams();
+  return updatedEndpoint;
+};
+
 export const ResourcePage = ({
   columns,
   createConfig,
   endpoint,
   reduxId,
-  expansionTabs,
   importConfig,
   ExportModalComponent,
   exportConfig,
@@ -55,9 +81,24 @@ export const ResourcePage = ({
   defaultSorting,
   deleteConfig,
   editorConfig,
+  nestedView,
+  parent,
+  displayProperty,
+  getHasNestedView,
+  getDisplayValue,
+  getNestedViewLink,
+  basePath,
   hasBESAdminAccess,
   needsBESAdminAccess,
 }) => {
+  const { '*': unusedParam, locale, ...params } = useParams();
+  const { data: details } = useItemDetails(params, parent);
+
+  const { path } = nestedView || {};
+  const updatedEndpoint = useEndpoint(endpoint, details, params);
+
+  const isDetailsPage = !!parent;
+
   const getHasPermission = actionType => {
     if (!needsBESAdminAccess) return true;
     if (needsBESAdminAccess.includes(actionType)) return !!hasBESAdminAccess;
@@ -75,6 +116,15 @@ export const ResourcePage = ({
   return (
     <>
       <Container>
+        {isDetailsPage && (
+          <Breadcrumbs
+            parent={parent}
+            title={title}
+            displayProperty={displayProperty}
+            details={details}
+            getDisplayValue={getDisplayValue}
+          />
+        )}
         <PageHeader
           title={title}
           importConfig={canImport && importConfig}
@@ -84,15 +134,18 @@ export const ResourcePage = ({
           LinksComponent={LinksComponent}
         />
         <DataFetchingTable
+          endpoint={updatedEndpoint}
+          reduxId={reduxId || updatedEndpoint}
           columns={accessibleColumns}
-          endpoint={endpoint}
-          expansionTabs={expansionTabs}
-          reduxId={reduxId || endpoint}
           baseFilter={baseFilter}
           defaultFilters={defaultFilters}
           TableComponent={TableComponent}
           defaultSorting={defaultSorting}
           deleteConfig={deleteConfig}
+          detailUrl={path}
+          getHasNestedView={getHasNestedView}
+          getNestedViewLink={getNestedViewLink}
+          basePath={basePath}
         />
       </Container>
       <EditModal onProcessDataForSave={onProcessDataForSave} {...editorConfig} />
@@ -109,14 +162,6 @@ ResourcePage.propTypes = {
   onProcessDataForSave: PropTypes.func,
   endpoint: PropTypes.string.isRequired,
   reduxId: PropTypes.string,
-  expansionTabs: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      endpoint: PropTypes.string,
-      columns: PropTypes.array,
-      expansionTabs: PropTypes.array, // For nested expansions, uses same shape.
-    }),
-  ),
   importConfig: PropTypes.object,
   exportConfig: PropTypes.object,
   deleteConfig: PropTypes.object,
@@ -128,13 +173,19 @@ ResourcePage.propTypes = {
   defaultSorting: PropTypes.array,
   defaultFilters: PropTypes.array,
   editorConfig: PropTypes.object,
+  nestedView: PropTypes.object,
+  parent: PropTypes.object,
+  displayProperty: PropTypes.string,
+  getHasNestedView: PropTypes.func,
+  getDisplayValue: PropTypes.func,
+  getNestedViewLink: PropTypes.func,
+  basePath: PropTypes.string,
   hasBESAdminAccess: PropTypes.bool.isRequired,
   needsBESAdminAccess: PropTypes.arrayOf(PropTypes.string),
 };
 
 ResourcePage.defaultProps = {
   createConfig: null,
-  expansionTabs: null,
   importConfig: null,
   exportConfig: {},
   deleteConfig: {},
@@ -147,5 +198,12 @@ ResourcePage.defaultProps = {
   defaultFilters: [],
   reduxId: null,
   editorConfig: {},
+  nestedView: null,
+  parent: null,
+  displayProperty: null,
+  getHasNestedView: null,
+  getDisplayValue: null,
+  getNestedViewLink: null,
+  basePath: '',
   needsBESAdminAccess: [],
 };
diff --git a/packages/admin-panel/src/pages/resources/index.js b/packages/admin-panel/src/pages/resources/index.js
index 96b49e0976..93cadb5170 100644
--- a/packages/admin-panel/src/pages/resources/index.js
+++ b/packages/admin-panel/src/pages/resources/index.js
@@ -2,42 +2,6 @@
  * Tupaia Admin
  * Copyright (c) 2019 Beyond Essential Systems Pty Ltd
  */
-
-export { CountriesPage } from './CountriesPage';
-export { EntitiesPage } from './EntitiesPage';
-export { EntityTypesPage } from './EntityTypesPage';
+export { ResourcePage } from './ResourcePage';
 export { EntityHierarchiesPage } from './EntityHierarchiesPage';
-export { PermissionsPage } from './PermissionsPage';
-export { PermissionGroupsPage } from './PermissionGroupsPage';
-export {
-  SurveyResponsesPage,
-  SURVEY_RESPONSE_COLUMNS,
-  SURVEY_RESPONSE_PAGE_COLUMNS,
-  APPROVAL_STATUS_TYPES,
-} from './SurveyResponsesPage';
-export { SurveysPage } from './SurveysPage';
-export { QuestionsPage } from './QuestionsPage';
-export { OptionSetsPage } from './OptionSetsPage';
-export { UsersPage } from './UsersPage';
-export { SocialFeedPage } from './SocialFeedPage';
-export { DataGroupsPage, DataElementsPage } from './DataSourcesPage';
-export { DataTablesPage } from './DataTablesPage';
-export { AccessRequestsPage } from './AccessRequestsPage';
-export { MapOverlaysPage } from './MapOverlaysPage';
-export { MapOverlayGroupsPage } from './MapOverlayGroupsPage';
-export { MapOverlayGroupRelationsPage } from './MapOverlayGroupRelationsPage';
-export { IndicatorsPage } from './IndicatorsPage';
-export { DashboardsPage } from './DashboardsPage';
-export { DashboardItemsPage } from './DashboardItemsPage';
-export { DashboardMailingListsPage } from './DashboardMailingListsPage';
-export { DashboardRelationsPage } from './DashboardRelationsPage';
-export { LegacyReportsPage } from './LegacyReportsPage';
-export { ProjectsPage } from './ProjectsPage';
-export { SyncGroupsPage } from './SyncGroupsPage';
-export { ExternalDatabaseConnectionsPage } from './ExternalDatabaseConnectionsPage';
-export { EntityHierarchyPage } from './EntityHierarchyPage';
 export { PermissionGroupsViewerPage } from './PermissionGroupsViewerPage';
-export { CustomLandingPagesPage } from './CustomLandingPagesPage';
-export { DataElementDataServicesPage } from './DataElementDataServicesPage';
-export { DhisInstancesPage } from './DhisInstancesPage';
-export { SupersetInstancesPage } from './SupersetInstancesPage';
diff --git a/packages/admin-panel/src/profileRoutes.jsx b/packages/admin-panel/src/profileRoutes.jsx
index 01c7fb5086..dd90e7a53c 100644
--- a/packages/admin-panel/src/profileRoutes.jsx
+++ b/packages/admin-panel/src/profileRoutes.jsx
@@ -11,19 +11,19 @@ import { ChangePasswordPage } from './pages/ChangePasswordPage';
 
 export const PROFILE_ROUTES = [
   {
-    to: '/profile',
-    tabs: [
+    path: '/profile',
+    childViews: [
       {
-        label: 'Profile',
-        to: '',
+        title: 'Profile',
+        path: '',
         icon: <AccountCircleIcon />,
-        component: ProfilePage,
+        Component: ProfilePage,
       },
       {
-        label: 'Change Password',
-        to: '/change-password',
+        title: 'Change Password',
+        path: '/change-password',
         icon: <LockIcon />,
-        component: ChangePasswordPage,
+        Component: ChangePasswordPage,
       },
     ],
   },
diff --git a/packages/admin-panel/src/routes.jsx b/packages/admin-panel/src/routes.jsx
deleted file mode 100644
index 6e3689b543..0000000000
--- a/packages/admin-panel/src/routes.jsx
+++ /dev/null
@@ -1,282 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import { Assignment, PeopleAlt, Language } from '@material-ui/icons';
-import { StrivePage } from './pages/StrivePage';
-import {
-  CountriesPage,
-  CustomLandingPagesPage,
-  EntitiesPage,
-  EntityHierarchiesPage,
-  EntityTypesPage,
-  OptionSetsPage,
-  PermissionGroupsPage,
-  PermissionGroupsViewerPage,
-  PermissionsPage,
-  SocialFeedPage,
-  SurveyResponsesPage,
-  SurveysPage,
-  QuestionsPage,
-  UsersPage,
-  AccessRequestsPage,
-  MapOverlaysPage,
-  MapOverlayGroupsPage,
-  MapOverlayGroupRelationsPage,
-  IndicatorsPage,
-  DashboardsPage,
-  DashboardItemsPage,
-  DashboardRelationsPage,
-  LegacyReportsPage,
-  DataElementsPage,
-  DataGroupsPage,
-  ProjectsPage,
-  SyncGroupsPage,
-  DataTablesPage,
-  ExternalDatabaseConnectionsPage,
-  EntityHierarchyPage,
-  DataElementDataServicesPage,
-  DhisInstancesPage,
-  SupersetInstancesPage,
-  DashboardMailingListsPage,
-} from './pages/resources';
-import { EntitiesIcon, ProjectsIcon, VizIcon } from './icons';
-
-export const ROUTES = [
-  {
-    label: 'Surveys',
-    to: '/surveys',
-    icon: <Assignment />,
-    tabs: [
-      {
-        label: 'Surveys',
-        to: '',
-        component: SurveysPage,
-      },
-      {
-        label: 'Questions',
-        to: '/questions',
-        component: QuestionsPage,
-        isBESAdminOnly: true,
-      },
-      {
-        label: 'Option sets',
-        to: '/option-sets',
-        component: OptionSetsPage,
-      },
-      {
-        label: 'Data elements',
-        to: '/data-elements',
-        component: DataElementsPage,
-      },
-      {
-        label: 'Data groups',
-        to: '/data-groups',
-        component: DataGroupsPage,
-        isBESAdminOnly: true,
-      },
-      {
-        label: 'Survey responses',
-        to: '/survey-responses',
-        component: SurveyResponsesPage,
-      },
-      {
-        label: 'Sync groups',
-        to: '/sync-groups',
-        component: SyncGroupsPage,
-        isBESAdminOnly: true,
-      },
-      {
-        label: 'Data mapping',
-        to: '/data-mapping',
-        component: DataElementDataServicesPage,
-        isBESAdminOnly: true,
-      },
-    ],
-  },
-  {
-    label: 'Visualisations',
-    to: '/visualisations',
-    icon: <VizIcon />,
-    tabs: [
-      {
-        label: 'Dashboard items',
-        to: '',
-        component: DashboardItemsPage,
-        needsBESAdminAccess: ['delete'],
-      },
-      {
-        label: 'Dashboards',
-        to: '/dashboards',
-        component: DashboardsPage,
-        needsBESAdminAccess: ['delete'],
-      },
-      {
-        label: 'Dashboard relations',
-        to: '/dashboard-relations',
-        component: DashboardRelationsPage,
-      },
-      {
-        label: 'Dashboard mailing lists',
-        to: '/dashboard-mailing-lists',
-        component: DashboardMailingListsPage,
-        isBESAdminOnly: true,
-      },
-      {
-        label: 'Legacy reports',
-        to: '/legacy-reports',
-        component: LegacyReportsPage,
-        isBESAdminOnly: true,
-      },
-      {
-        label: 'Map overlays',
-        to: '/map-overlays',
-        component: MapOverlaysPage,
-        needsBESAdminAccess: ['delete'],
-      },
-      {
-        label: 'Map overlay groups',
-        to: '/map-overlay-groups',
-        component: MapOverlayGroupsPage,
-      },
-      {
-        label: 'Map overlay group relations',
-        to: '/map-overlay-group-relations',
-        component: MapOverlayGroupRelationsPage,
-      },
-      {
-        label: 'Indicators',
-        to: '/indicators',
-        component: IndicatorsPage,
-        isBESAdminOnly: true,
-      },
-      {
-        label: 'Data-tables',
-        to: '/dataTables',
-        component: DataTablesPage,
-        isBESAdminOnly: true,
-      },
-      {
-        label: 'Social feed',
-        to: '/social-feed',
-        component: SocialFeedPage,
-        isBESAdminOnly: true,
-      },
-    ],
-  },
-  {
-    label: 'Users & permissions',
-    to: '/users',
-    icon: <PeopleAlt />,
-    tabs: [
-      {
-        label: 'Users',
-        to: '',
-        component: UsersPage,
-      },
-      {
-        label: 'Permissions',
-        to: '/permissions',
-        component: PermissionsPage,
-      },
-      {
-        label: 'Permission groups',
-        to: '/permission-groups',
-        component: PermissionGroupsPage,
-      },
-      {
-        label: 'Permission groups viewer',
-        to: '/permission-groups-viewer',
-        component: PermissionGroupsViewerPage,
-      },
-      {
-        label: 'Access requests',
-        to: '/access-requests',
-        component: AccessRequestsPage,
-      },
-    ],
-  },
-  {
-    label: 'Entities',
-    to: '/entities',
-    icon: <EntitiesIcon />,
-    tabs: [
-      {
-        label: 'Entities',
-        to: '',
-        component: EntitiesPage,
-        needsBESAdminAccess: ['delete'],
-      },
-      {
-        label: 'Countries',
-        to: '/countries',
-        component: CountriesPage,
-        needsBESAdminAccess: ['create'],
-      },
-      {
-        label: 'Entity types',
-        to: '/entityTypes',
-        component: EntityTypesPage,
-      },
-      {
-        label: 'Entity hierarchies',
-        to: '/entityHierarchies',
-        component: EntityHierarchiesPage,
-      },
-    ],
-  },
-  {
-    label: 'Projects',
-    to: '/projects',
-    icon: <ProjectsIcon />,
-    tabs: [
-      {
-        label: 'Projects',
-        to: '',
-        component: ProjectsPage,
-        needsBESAdminAccess: ['create'],
-      },
-      {
-        label: 'Strive',
-        to: '/strive',
-        component: StrivePage,
-        isBESAdminOnly: true,
-      },
-      {
-        label: 'Entity hierarchy',
-        to: '/hierarchy',
-        component: EntityHierarchyPage,
-      },
-      {
-        label: 'Landing pages',
-        to: '/landing-pages',
-        component: CustomLandingPagesPage,
-      },
-    ],
-  },
-  {
-    label: 'External data',
-    to: '/external-database-connections',
-    isBESAdminOnly: true,
-    icon: <Language />,
-    tabs: [
-      {
-        label: 'External database connections',
-        to: '',
-        component: ExternalDatabaseConnectionsPage,
-      },
-      {
-        label: 'DHIS instances',
-        to: '/dhis-instances',
-        component: DhisInstancesPage,
-      },
-      {
-        label: 'mSupply superset instances',
-        to: '/superset-instances',
-        component: SupersetInstancesPage,
-      },
-    ],
-  },
-];
diff --git a/packages/admin-panel/src/routes/entities/countries.js b/packages/admin-panel/src/routes/entities/countries.js
new file mode 100644
index 0000000000..8e3e02416d
--- /dev/null
+++ b/packages/admin-panel/src/routes/entities/countries.js
@@ -0,0 +1,43 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { COLUMNS as ENTITIES_COLUMNS } from './entities';
+
+const FIELDS = [
+  { source: 'id', show: false },
+  {
+    Header: 'Name',
+    source: 'name',
+  },
+  {
+    Header: 'Code',
+    source: 'code',
+  },
+];
+
+const CREATE_CONFIG = {
+  title: 'New Country',
+  actionConfig: {
+    title: 'Create New Country',
+    editEndpoint: 'countries',
+    fields: FIELDS,
+  },
+};
+
+export const countries = {
+  title: 'Countries',
+  endpoint: 'countries',
+  path: '/countries',
+  columns: FIELDS,
+  createConfig: CREATE_CONFIG,
+  needsBESAdminAccess: ['create'],
+  nestedView: {
+    title: 'Entities',
+    endpoint: 'countries/{id}/entities',
+    columns: ENTITIES_COLUMNS,
+    path: '/:id/entities',
+    displayProperty: 'name',
+  },
+};
diff --git a/packages/admin-panel/src/pages/resources/EntitiesPage.jsx b/packages/admin-panel/src/routes/entities/entities.js
similarity index 62%
rename from packages/admin-panel/src/pages/resources/EntitiesPage.jsx
rename to packages/admin-panel/src/routes/entities/entities.js
index c5d1bd112a..cdb1797767 100644
--- a/packages/admin-panel/src/pages/resources/EntitiesPage.jsx
+++ b/packages/admin-panel/src/routes/entities/entities.js
@@ -1,11 +1,9 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-import { SURVEY_RESPONSE_COLUMNS, ANSWER_COLUMNS } from './SurveyResponsesPage';
+import { SURVEY_RESPONSE_COLUMNS } from '../surveys/surveyResponses';
 
 const ENTITIES_ENDPOINT = 'entities';
 
@@ -34,6 +32,16 @@ export const FIELDS = {
   },
 };
 
+export const QRCodeColumn = {
+  Header: 'QR',
+  type: 'qrCode',
+  actionConfig: {
+    qrCodeContentsKey: 'id',
+    humanReadableIdKey: 'name',
+    qrCodePrefix: 'entity-', // TODO: Consolidate id prefixing into a common util (RN-968)
+  },
+};
+
 export const COLUMNS = [
   ...Object.values(FIELDS),
   {
@@ -42,7 +50,6 @@ export const COLUMNS = [
   },
   {
     Header: 'Edit',
-    source: 'id',
     type: 'edit',
     actionConfig: {
       editEndpoint: ENTITIES_ENDPOINT,
@@ -52,37 +59,12 @@ export const COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: ENTITIES_ENDPOINT,
     },
   },
-  {
-    Header: 'QR',
-    source: 'id',
-    type: 'qrCode',
-    actionConfig: {
-      qrCodeContentsKey: 'id',
-      humanReadableIdKey: 'name',
-      qrCodePrefix: 'entity-', // TODO: Consolidate id prefixing into a common util (RN-968)
-    },
-  },
-];
-
-const EXPANSION_CONFIG = [
-  {
-    title: 'Survey Responses',
-    endpoint: 'entities/{id}/surveyResponses',
-    columns: SURVEY_RESPONSE_COLUMNS,
-    expansionTabs: [
-      {
-        title: 'Answers',
-        endpoint: 'surveyResponses/{id}/answers',
-        columns: ANSWER_COLUMNS,
-      },
-    ],
-  },
+  QRCodeColumn,
 ];
 
 const IMPORT_CONFIG = {
@@ -90,7 +72,7 @@ const IMPORT_CONFIG = {
   subtitle:
     'Please note that if this is the first time a country is being imported, you will need to restart central-server post-import for it to sync to DHIS2.', // hope to fix one day in https://github.com/beyondessential/central-server/issues/481
   actionConfig: {
-    importEndpoint: 'entities',
+    importEndpoint: ENTITIES_ENDPOINT,
   },
   queryParameters: [
     {
@@ -112,13 +94,19 @@ const IMPORT_CONFIG = {
   ],
 };
 
-export const EntitiesPage = props => (
-  <ResourcePage
-    title="Entities"
-    endpoint={ENTITIES_ENDPOINT}
-    columns={COLUMNS}
-    expansionTabs={EXPANSION_CONFIG}
-    importConfig={IMPORT_CONFIG}
-    {...props}
-  />
-);
+export const entities = {
+  title: 'Entities',
+  path: '',
+  default: true,
+  endpoint: ENTITIES_ENDPOINT,
+  columns: COLUMNS,
+  importConfig: IMPORT_CONFIG,
+  nestedView: {
+    title: 'Survey Responses',
+    endpoint: `${ENTITIES_ENDPOINT}/{id}/surveyResponses`,
+    columns: SURVEY_RESPONSE_COLUMNS,
+    path: '/:id/surveyResponses',
+    displayProperty: 'name',
+    getNestedViewLink: ({ id }) => `/surveys/survey-responses/${id}/answers`,
+  },
+};
diff --git a/packages/admin-panel/src/routes/entities/entitiesTabRoutes.jsx b/packages/admin-panel/src/routes/entities/entitiesTabRoutes.jsx
new file mode 100644
index 0000000000..864be7a921
--- /dev/null
+++ b/packages/admin-panel/src/routes/entities/entitiesTabRoutes.jsx
@@ -0,0 +1,17 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { entities } from './entities';
+import { countries } from './countries';
+import { entityTypes } from './entityTypes';
+import { entityHierarchies } from './entityHierarchies';
+import { EntitiesIcon } from '../../icons';
+
+export const entitiesTabRoutes = {
+  label: 'Entities',
+  path: '/entities',
+  icon: <EntitiesIcon />,
+  childViews: [entities, countries, entityTypes, entityHierarchies],
+};
diff --git a/packages/admin-panel/src/routes/entities/entityHierarchies.js b/packages/admin-panel/src/routes/entities/entityHierarchies.js
new file mode 100644
index 0000000000..29a4bfa870
--- /dev/null
+++ b/packages/admin-panel/src/routes/entities/entityHierarchies.js
@@ -0,0 +1,12 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { EntityHierarchiesPage } from '../../pages/resources';
+
+export const entityHierarchies = {
+  title: 'Entity hierarchies',
+  path: '/permission-groups-viewer',
+  Component: EntityHierarchiesPage,
+};
diff --git a/packages/admin-panel/src/routes/entities/entityTypes.js b/packages/admin-panel/src/routes/entities/entityTypes.js
new file mode 100644
index 0000000000..35ec4733b0
--- /dev/null
+++ b/packages/admin-panel/src/routes/entities/entityTypes.js
@@ -0,0 +1,23 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+const ENTITY_TYPES_ENDPOINT = 'entityTypes';
+
+export const ENTITY_TYPES_COLUMNS = [
+  { source: 'id', show: false },
+  {
+    Header: 'Type',
+    source: 'type',
+    filterable: false,
+    disableSortBy: true,
+  },
+];
+
+export const entityTypes = {
+  title: 'Entity types',
+  path: '/entityTypes',
+  endpoint: ENTITY_TYPES_ENDPOINT,
+  columns: ENTITY_TYPES_COLUMNS,
+};
diff --git a/packages/admin-panel/src/routes/entities/index.js b/packages/admin-panel/src/routes/entities/index.js
new file mode 100644
index 0000000000..712f14ab40
--- /dev/null
+++ b/packages/admin-panel/src/routes/entities/index.js
@@ -0,0 +1,7 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { entitiesTabRoutes } from './entitiesTabRoutes';
+export { entities, QRCodeColumn } from './entities';
diff --git a/packages/admin-panel/src/pages/resources/DhisInstancesPage.jsx b/packages/admin-panel/src/routes/externalData/dhisInstances.js
similarity index 69%
rename from packages/admin-panel/src/pages/resources/DhisInstancesPage.jsx
rename to packages/admin-panel/src/routes/externalData/dhisInstances.js
index c0bcfc0c71..7e26716c92 100644
--- a/packages/admin-panel/src/pages/resources/DhisInstancesPage.jsx
+++ b/packages/admin-panel/src/routes/externalData/dhisInstances.js
@@ -1,11 +1,8 @@
 /**
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 const FIELDS = [
   {
     Header: 'Code',
@@ -43,7 +40,6 @@ const COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: `dhisInstances`,
@@ -59,12 +55,10 @@ const CREATE_CONFIG = {
   },
 };
 
-export const DhisInstancesPage = props => (
-  <ResourcePage
-    title="DHIS Instances"
-    endpoint="dhisInstances"
-    columns={COLUMNS}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+export const dhisInstances = {
+  title: 'DHIS Instances',
+  endpoint: 'dhisInstances',
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+  path: '/dhis-instances',
+};
diff --git a/packages/admin-panel/src/routes/externalData/externalDataTabRoutes.jsx b/packages/admin-panel/src/routes/externalData/externalDataTabRoutes.jsx
new file mode 100644
index 0000000000..f758269b13
--- /dev/null
+++ b/packages/admin-panel/src/routes/externalData/externalDataTabRoutes.jsx
@@ -0,0 +1,17 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { Language } from '@material-ui/icons';
+import { externalDatabaseConnections } from './externalDatabaseConnections';
+import { dhisInstances } from './dhisInstances';
+import { supersetInstances } from './msupplySupersetInstances';
+
+export const externalDataTabRoutes = {
+  label: 'External data',
+  path: '/external-database-connections',
+  icon: <Language />,
+  childViews: [externalDatabaseConnections, dhisInstances, supersetInstances],
+  isBESAdminOnly: true,
+};
diff --git a/packages/admin-panel/src/pages/resources/ExternalDatabaseConnectionsPage.jsx b/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js
similarity index 74%
rename from packages/admin-panel/src/pages/resources/ExternalDatabaseConnectionsPage.jsx
rename to packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js
index ecd7f94523..b506d643c4 100644
--- a/packages/admin-panel/src/pages/resources/ExternalDatabaseConnectionsPage.jsx
+++ b/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js
@@ -1,10 +1,8 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
 
@@ -43,8 +41,8 @@ const COLUMNS = [
   ...FIELDS,
   {
     Header: 'Edit',
-    source: 'id',
     type: 'edit',
+    source: 'id',
     actionConfig: {
       editEndpoint: EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT,
       title: 'Edit External Database Connection',
@@ -53,15 +51,11 @@ const COLUMNS = [
   },
   {
     Header: 'Test',
-    source: 'id',
-    filterable: false,
-    sortable: false,
     type: 'testDatabaseConnection',
-    width: 70,
+    colWidth: '6.5rem',
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT,
@@ -77,12 +71,10 @@ const CREATE_CONFIG = {
   },
 };
 
-export const ExternalDatabaseConnectionsPage = props => (
-  <ResourcePage
-    title="External Database Connections"
-    endpoint={EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT}
-    columns={COLUMNS}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+export const externalDatabaseConnections = {
+  title: 'External database connections',
+  path: '',
+  endpoint: EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT,
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+};
diff --git a/packages/admin-panel/src/routes/externalData/index.js b/packages/admin-panel/src/routes/externalData/index.js
new file mode 100644
index 0000000000..f0310435c1
--- /dev/null
+++ b/packages/admin-panel/src/routes/externalData/index.js
@@ -0,0 +1,7 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { externalDataTabRoutes } from './externalDataTabRoutes';
+export { externalDatabaseConnections } from './externalDatabaseConnections';
diff --git a/packages/admin-panel/src/pages/resources/SupersetInstancesPage.jsx b/packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js
similarity index 63%
rename from packages/admin-panel/src/pages/resources/SupersetInstancesPage.jsx
rename to packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js
index bc129c409a..64673f7d98 100644
--- a/packages/admin-panel/src/pages/resources/SupersetInstancesPage.jsx
+++ b/packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js
@@ -1,11 +1,8 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 const FIELDS = [
   {
     Header: 'Code',
@@ -35,7 +32,6 @@ const COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: `supersetInstances`,
@@ -51,12 +47,10 @@ const CREATE_CONFIG = {
   },
 };
 
-export const SupersetInstancesPage = props => (
-  <ResourcePage
-    title="mSupply Superset Instances"
-    endpoint="supersetInstances"
-    columns={COLUMNS}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+export const supersetInstances = {
+  title: 'mSupply superset Instances',
+  endpoint: 'supersetInstances',
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+  path: '/superset-instances',
+};
diff --git a/packages/admin-panel/src/routes/index.js b/packages/admin-panel/src/routes/index.js
new file mode 100644
index 0000000000..5515cdf5e8
--- /dev/null
+++ b/packages/admin-panel/src/routes/index.js
@@ -0,0 +1,27 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { ROUTES } from './routes';
+export {
+  surveys,
+  questions,
+  surveyResponses,
+  dataElements,
+  syncGroups,
+  surveysTabRoutes,
+} from './surveys';
+export { users, permissions, usersTabRoutes } from './users';
+export {
+  dashboardItems,
+  dashboards,
+  dashboardRelations,
+  mapOverlays,
+  mapOverlayGroups,
+  mapOverlayGroupRelations,
+  visualisationsTabRoutes,
+  dataTables,
+} from './visualisations';
+export { entities, entitiesTabRoutes, QRCodeColumn } from './entities';
+export { externalDatabaseConnections, externalDataTabRoutes } from './externalData';
diff --git a/packages/admin-panel/src/pages/resources/EntityHierarchyPage.jsx b/packages/admin-panel/src/routes/projects/entityHierarchy.js
similarity index 73%
rename from packages/admin-panel/src/pages/resources/EntityHierarchyPage.jsx
rename to packages/admin-panel/src/routes/projects/entityHierarchy.js
index a5cb5b94c0..79424bf0f3 100644
--- a/packages/admin-panel/src/pages/resources/EntityHierarchyPage.jsx
+++ b/packages/admin-panel/src/routes/projects/entityHierarchy.js
@@ -1,15 +1,12 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-import { prettyArray } from '../../utilities';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
+import { prettyArray } from '../../utilities';
 
 const ENTITY_HIERARCHY_ENDPOINT = 'entityHierarchy';
-const TITLE = 'Entity Hierarchy';
 
 const FIELDS = [
   {
@@ -46,6 +43,9 @@ const COLUMNS = [
   },
 ];
 
-export const EntityHierarchyPage = props => (
-  <ResourcePage title={TITLE} endpoint={ENTITY_HIERARCHY_ENDPOINT} columns={COLUMNS} {...props} />
-);
+export const entityHierarchy = {
+  title: 'Entity hierarchy',
+  endpoint: ENTITY_HIERARCHY_ENDPOINT,
+  columns: COLUMNS,
+  path: '/hierarchy',
+};
diff --git a/packages/admin-panel/src/routes/projects/index.js b/packages/admin-panel/src/routes/projects/index.js
new file mode 100644
index 0000000000..a052ace4ff
--- /dev/null
+++ b/packages/admin-panel/src/routes/projects/index.js
@@ -0,0 +1,6 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { projectsTabRoutes } from './projectsTabRoutes';
diff --git a/packages/admin-panel/src/pages/resources/CustomLandingPagesPage.jsx b/packages/admin-panel/src/routes/projects/landingPages.jsx
similarity index 95%
rename from packages/admin-panel/src/pages/resources/CustomLandingPagesPage.jsx
rename to packages/admin-panel/src/routes/projects/landingPages.jsx
index 86b875027a..aff63a6abc 100644
--- a/packages/admin-panel/src/pages/resources/CustomLandingPagesPage.jsx
+++ b/packages/admin-panel/src/routes/projects/landingPages.jsx
@@ -1,7 +1,11 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
 import React from 'react';
 import { Link } from '@material-ui/core';
 import { SECTION_FIELD_TYPE } from '../../editor/constants';
-import { ResourcePage } from './ResourcePage';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
 
@@ -267,7 +271,6 @@ const COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: LANDING_PAGES_ENDPOINT,
@@ -283,14 +286,10 @@ const CREATE_CONFIG = {
   },
 };
 
-export const CustomLandingPagesPage = props => {
-  return (
-    <ResourcePage
-      title="Landing Pages"
-      endpoint={LANDING_PAGES_ENDPOINT}
-      columns={COLUMNS}
-      createConfig={CREATE_CONFIG}
-      {...props}
-    />
-  );
+export const landingPages = {
+  title: 'Landing pages',
+  path: '/landing-pages',
+  endpoint: LANDING_PAGES_ENDPOINT,
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
 };
diff --git a/packages/admin-panel/src/pages/resources/ProjectsPage.jsx b/packages/admin-panel/src/routes/projects/projects.js
similarity index 83%
rename from packages/admin-panel/src/pages/resources/ProjectsPage.jsx
rename to packages/admin-panel/src/routes/projects/projects.js
index 9917f0cb00..e769c79c20 100644
--- a/packages/admin-panel/src/pages/resources/ProjectsPage.jsx
+++ b/packages/admin-panel/src/routes/projects/projects.js
@@ -1,12 +1,10 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-import { prettyArray } from '../../utilities';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
+import { prettyArray } from '../../utilities';
 
 const PROJECTS_ENDPOINT = 'projects';
 
@@ -171,19 +169,18 @@ const CREATE_CONFIG = {
   },
 };
 
-export const ProjectsPage = props => (
-  <ResourcePage
-    title="Projects"
-    endpoint="projects"
-    columns={COLUMNS}
-    createConfig={CREATE_CONFIG}
-    onProcessDataForSave={(editedFields, recordData) => {
-      // If the project is being edited, and the code field is not being edited, then include the existing code in the edited fields so that it can be used for generating project image names.
-      if (recordData.code && !editedFields.code) {
-        return { ...editedFields, code: recordData.code };
-      }
-      return editedFields;
-    }}
-    {...props}
-  />
-);
+export const projects = {
+  title: 'Projects',
+  path: '',
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+  endpoint: PROJECTS_ENDPOINT,
+  onProcessDataForSave: (editedFields, recordData) => {
+    // If the project is being edited, and the code field is not being edited, then include the existing code in the edited fields so that it can be used for generating project image names.
+    if (recordData.code && !editedFields.code) {
+      return { ...editedFields, code: recordData.code };
+    }
+    return editedFields;
+  },
+  needsBESAdminAccess: ['create'],
+};
diff --git a/packages/admin-panel/src/routes/projects/projectsTabRoutes.jsx b/packages/admin-panel/src/routes/projects/projectsTabRoutes.jsx
new file mode 100644
index 0000000000..d35d65cdab
--- /dev/null
+++ b/packages/admin-panel/src/routes/projects/projectsTabRoutes.jsx
@@ -0,0 +1,17 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { projects } from './projects';
+import { strive } from './strive';
+import { entityHierarchy } from './entityHierarchy';
+import { landingPages } from './landingPages';
+import { ProjectsIcon } from '../../icons';
+
+export const projectsTabRoutes = {
+  label: 'Projects',
+  path: '/projects',
+  icon: <ProjectsIcon />,
+  childViews: [projects, strive, entityHierarchy, landingPages],
+};
diff --git a/packages/admin-panel/src/routes/projects/strive.js b/packages/admin-panel/src/routes/projects/strive.js
new file mode 100644
index 0000000000..d022530607
--- /dev/null
+++ b/packages/admin-panel/src/routes/projects/strive.js
@@ -0,0 +1,13 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { StrivePage } from '../../pages/StrivePage';
+
+export const strive = {
+  title: 'Strive',
+  path: '/strive',
+  Component: StrivePage,
+  isBESAdminOnly: true,
+};
diff --git a/packages/admin-panel/src/routes/routes.jsx b/packages/admin-panel/src/routes/routes.jsx
new file mode 100644
index 0000000000..2b5b6869d9
--- /dev/null
+++ b/packages/admin-panel/src/routes/routes.jsx
@@ -0,0 +1,20 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { entitiesTabRoutes } from './entities';
+import { externalDataTabRoutes } from './externalData';
+import { projectsTabRoutes } from './projects/projectsTabRoutes';
+import { surveysTabRoutes } from './surveys';
+import { usersTabRoutes } from './users';
+import { visualisationsTabRoutes } from './visualisations';
+
+export const ROUTES = [
+  surveysTabRoutes,
+  visualisationsTabRoutes,
+  usersTabRoutes,
+  entitiesTabRoutes,
+  projectsTabRoutes,
+  externalDataTabRoutes,
+];
diff --git a/packages/admin-panel/src/routes/surveys/dataElements.js b/packages/admin-panel/src/routes/surveys/dataElements.js
new file mode 100644
index 0000000000..4a94f1ce17
--- /dev/null
+++ b/packages/admin-panel/src/routes/surveys/dataElements.js
@@ -0,0 +1,37 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { DATA_ELEMENT_FIELDS, getDataSourceButtonsConfig } from '../../common';
+
+const IMPORT_CONFIG = {
+  title: 'Import Data Elements',
+  actionConfig: {
+    importEndpoint: 'dataElements',
+  },
+};
+
+const EDITOR_CONFIG = {
+  displayUsedBy: true,
+};
+
+export const dataElements = {
+  title: 'Data elements',
+  endpoint: 'dataElements',
+  columns: [
+    ...DATA_ELEMENT_FIELDS,
+    ...getDataSourceButtonsConfig(DATA_ELEMENT_FIELDS, 'dataElement'),
+  ],
+  importConfig: IMPORT_CONFIG,
+  path: '/data-elements',
+  createConfig: {
+    title: 'New Data Element',
+    actionConfig: {
+      title: 'Edit Data Element',
+      editEndpoint: 'dataElements',
+      fields: [...DATA_ELEMENT_FIELDS],
+    },
+  },
+  editorConfig: EDITOR_CONFIG,
+};
diff --git a/packages/admin-panel/src/routes/surveys/dataGroups.js b/packages/admin-panel/src/routes/surveys/dataGroups.js
new file mode 100644
index 0000000000..2a7c3a1ec7
--- /dev/null
+++ b/packages/admin-panel/src/routes/surveys/dataGroups.js
@@ -0,0 +1,63 @@
+import {
+  DATA_ELEMENT_FIELDS,
+  DATA_SOURCE_FIELDS,
+  DataSourceConfigView,
+  getDataSourceButtonsConfig,
+} from '../../common';
+
+const DATA_GROUP_FIELDS = [
+  ...DATA_SOURCE_FIELDS,
+  {
+    Header: 'Data Service Configuration',
+    source: 'config',
+    Cell: DataSourceConfigView,
+    editConfig: {
+      type: 'json',
+      default: '{}',
+      visibilityCriteria: {
+        service_type: 'dhis',
+      },
+      getJsonFieldSchema: () => [
+        {
+          label: 'DHIS Server',
+          fieldName: 'dhisInstanceCode',
+          optionsEndpoint: 'dhisInstances',
+          optionLabelKey: 'dhisInstances.code',
+          optionValueKey: 'dhisInstances.code',
+          visibilityCriteria: { service_type: 'dhis' },
+        },
+      ],
+    },
+  },
+];
+
+const EDITOR_CONFIG = {
+  displayUsedBy: true,
+};
+
+export const dataGroups = {
+  title: 'Data groups',
+  endpoint: 'dataGroups',
+  columns: [...DATA_GROUP_FIELDS, ...getDataSourceButtonsConfig(DATA_GROUP_FIELDS, 'dataGroup')],
+  path: '/data-groups',
+  createConfig: {
+    title: 'New Data Group',
+    actionConfig: {
+      title: 'Edit Data Group',
+      editEndpoint: 'dataGroups',
+      fields: DATA_GROUP_FIELDS,
+    },
+  },
+  editorConfig: EDITOR_CONFIG,
+  isBESAdminOnly: true,
+  nestedView: {
+    title: 'Data elements',
+    endpoint: 'dataGroups/{id}/dataElements',
+    columns: [
+      ...DATA_ELEMENT_FIELDS,
+      ...getDataSourceButtonsConfig(DATA_ELEMENT_FIELDS, 'dataElement'),
+    ],
+    path: '/:id/data-elements',
+    displayProperty: 'code',
+  },
+};
diff --git a/packages/admin-panel/src/pages/resources/DataElementDataServicesPage.jsx b/packages/admin-panel/src/routes/surveys/dataMapping.js
similarity index 73%
rename from packages/admin-panel/src/pages/resources/DataElementDataServicesPage.jsx
rename to packages/admin-panel/src/routes/surveys/dataMapping.js
index c3690cd49e..132fe1641a 100644
--- a/packages/admin-panel/src/pages/resources/DataElementDataServicesPage.jsx
+++ b/packages/admin-panel/src/routes/surveys/dataMapping.js
@@ -1,10 +1,8 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
 import {
   DATA_ELEMENT_FIELD_EDIT_CONFIG,
   SERVICE_TYPE_OPTIONS,
@@ -48,7 +46,6 @@ const COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: `dataElementDataServices`,
@@ -71,13 +68,12 @@ const CREATE_CONFIG = {
   },
 };
 
-export const DataElementDataServicesPage = props => (
-  <ResourcePage
-    title="Data Mapping"
-    endpoint="dataElementDataServices"
-    columns={COLUMNS}
-    importConfig={IMPORT_CONFIG}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+export const dataMapping = {
+  title: 'Data mapping',
+  path: '/data-mapping',
+  endpoint: 'dataElementDataServices',
+  columns: COLUMNS,
+  importConfig: IMPORT_CONFIG,
+  createConfig: CREATE_CONFIG,
+  isBESAdminOnly: true,
+};
diff --git a/packages/admin-panel/src/routes/surveys/index.js b/packages/admin-panel/src/routes/surveys/index.js
new file mode 100644
index 0000000000..ee462a90a5
--- /dev/null
+++ b/packages/admin-panel/src/routes/surveys/index.js
@@ -0,0 +1,11 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { surveysTabRoutes } from './surveysTabRoutes';
+export { surveys } from './surveys';
+export { surveyResponses } from './surveyResponses';
+export { dataElements } from './dataElements';
+export { syncGroups } from './syncGroups';
+export { questions } from './questions';
diff --git a/packages/admin-panel/src/pages/resources/OptionSetsPage.jsx b/packages/admin-panel/src/routes/surveys/optionSets.js
similarity index 78%
rename from packages/admin-panel/src/pages/resources/OptionSetsPage.jsx
rename to packages/admin-panel/src/routes/surveys/optionSets.js
index e2d15b0f15..ad0114300c 100644
--- a/packages/admin-panel/src/pages/resources/OptionSetsPage.jsx
+++ b/packages/admin-panel/src/routes/surveys/optionSets.js
@@ -1,11 +1,8 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 const OPTION_SET_FIELDS = [
   {
     Header: 'Name',
@@ -61,14 +58,6 @@ const OPTION_COLUMNS = [
   },
 ];
 
-const EXPANSION_CONFIG = [
-  {
-    title: 'Options',
-    endpoint: 'optionSets/{id}/options',
-    columns: OPTION_COLUMNS,
-  },
-];
-
 const IMPORT_CONFIG = {
   title: 'Import Option Sets',
   actionConfig: {
@@ -88,13 +77,17 @@ const IMPORT_CONFIG = {
   ],
 };
 
-export const OptionSetsPage = props => (
-  <ResourcePage
-    title="Option Sets"
-    endpoint="optionSets"
-    columns={OPTION_SET_COLUMNS}
-    expansionTabs={EXPANSION_CONFIG}
-    importConfig={IMPORT_CONFIG}
-    {...props}
-  />
-);
+export const optionSets = {
+  title: 'Option sets',
+  endpoint: 'optionSets',
+  columns: OPTION_SET_COLUMNS,
+  importConfig: IMPORT_CONFIG,
+  path: '/option-sets',
+  nestedView: {
+    title: 'Options',
+    endpoint: 'optionSets/{id}/options',
+    columns: OPTION_COLUMNS,
+    path: '/:id/options',
+    displayProperty: 'name',
+  },
+};
diff --git a/packages/admin-panel/src/pages/resources/QuestionsPage.jsx b/packages/admin-panel/src/routes/surveys/questions.js
similarity index 78%
rename from packages/admin-panel/src/pages/resources/QuestionsPage.jsx
rename to packages/admin-panel/src/routes/surveys/questions.js
index 2cc2c261f4..899e31fe38 100644
--- a/packages/admin-panel/src/pages/resources/QuestionsPage.jsx
+++ b/packages/admin-panel/src/routes/surveys/questions.js
@@ -1,11 +1,8 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 const QUESTION_FIELDS = [
   {
     Header: 'Code',
@@ -95,25 +92,23 @@ const OPTION_COLUMNS = [
   },
 ];
 
-const EXPANSION_CONFIG = [
-  {
+const EDITOR_CONFIG = {
+  displayUsedBy: true,
+};
+
+export const questions = {
+  title: 'Questions',
+  path: '/questions',
+  endpoint: 'questions',
+  columns: QUESTION_COLUMNS,
+  isBESAdminOnly: true,
+  editorConfig: EDITOR_CONFIG,
+  getHasNestedView: ({ option_set_id: optionSetId }) => !!optionSetId,
+  nestedView: {
     title: 'Options',
     endpoint: 'optionSets/{option_set_id}/options',
     columns: OPTION_COLUMNS,
+    path: '/:id/options',
+    displayProperty: 'code',
   },
-];
-
-const EDITOR_CONFIG = {
-  displayUsedBy: true,
 };
-
-export const QuestionsPage = props => (
-  <ResourcePage
-    title="Questions"
-    endpoint="questions"
-    columns={QUESTION_COLUMNS}
-    expansionTabs={EXPANSION_CONFIG}
-    editorConfig={EDITOR_CONFIG}
-    {...props}
-  />
-);
diff --git a/packages/admin-panel/src/pages/resources/SurveyResponsesPage.jsx b/packages/admin-panel/src/routes/surveys/surveyResponses.js
similarity index 85%
rename from packages/admin-panel/src/pages/resources/SurveyResponsesPage.jsx
rename to packages/admin-panel/src/routes/surveys/surveyResponses.js
index 1d1a0773ff..2271793230 100644
--- a/packages/admin-panel/src/pages/resources/SurveyResponsesPage.jsx
+++ b/packages/admin-panel/src/routes/surveys/surveyResponses.js
@@ -3,11 +3,9 @@
  * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import moment from 'moment';
 import { getBrowserTimeZone } from '@tupaia/utils';
+import moment from 'moment';
 import { ApprovalStatus } from '@tupaia/types';
-import { ResourcePage } from './ResourcePage';
 import { SurveyResponsesExportModal } from '../../importExport';
 
 // Don't include not_required as an editable option because it can lead to
@@ -94,8 +92,8 @@ export const SURVEY_RESPONSE_COLUMNS = [
   approvalStatus,
   {
     Header: 'Export',
-    source: 'id',
     type: 'export',
+    source: 'id',
     actionConfig: {
       exportEndpoint: 'surveyResponses',
       extraQueryParameters: {
@@ -112,11 +110,9 @@ export const SURVEY_RESPONSE_PAGE_COLUMNS = [
   {
     Header: 'Resubmit',
     type: 'resubmitSurveyResponse',
-    source: 'id',
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: 'surveyResponses',
@@ -138,14 +134,6 @@ export const ANSWER_COLUMNS = [
   },
 ];
 
-const EXPANSION_CONFIG = [
-  {
-    title: 'Answers',
-    columns: ANSWER_COLUMNS,
-    endpoint: 'surveyResponses/{id}/answers',
-  },
-];
-
 const IMPORT_CONFIG = {
   title: 'Import Survey Responses',
   actionConfig: {
@@ -168,16 +156,20 @@ const IMPORT_CONFIG = {
   ],
 };
 
-export const SurveyResponsesPage = props => (
-  <ResourcePage
-    title="Survey Responses"
-    endpoint="surveyResponses"
-    columns={SURVEY_RESPONSE_PAGE_COLUMNS}
-    defaultFilters={[{ id: 'outdated', value: false }]}
-    defaultSorting={[{ id: 'data_time', desc: true }]}
-    expansionTabs={EXPANSION_CONFIG}
-    importConfig={IMPORT_CONFIG}
-    ExportModalComponent={SurveyResponsesExportModal}
-    {...props}
-  />
-);
+export const surveyResponses = {
+  title: 'Survey responses',
+  path: '/survey-responses',
+  endpoint: 'surveyResponses',
+  columns: SURVEY_RESPONSE_PAGE_COLUMNS,
+  importConfig: IMPORT_CONFIG,
+  defaultFilters: [{ id: 'outdated', value: false }],
+  defaultSorting: [{ id: 'data_time', desc: true }],
+  ExportModalComponent: SurveyResponsesExportModal,
+  nestedView: {
+    title: 'Answers',
+    columns: ANSWER_COLUMNS,
+    endpoint: 'surveyResponses/{id}/answers',
+    path: '/:id/answers',
+    displayProperty: 'survey.name',
+  },
+};
diff --git a/packages/admin-panel/src/pages/resources/SurveysPage.jsx b/packages/admin-panel/src/routes/surveys/surveys.js
similarity index 97%
rename from packages/admin-panel/src/pages/resources/SurveysPage.jsx
rename to packages/admin-panel/src/routes/surveys/surveys.js
index b7e29839cc..47404c06bd 100644
--- a/packages/admin-panel/src/pages/resources/SurveysPage.jsx
+++ b/packages/admin-panel/src/routes/surveys/surveys.js
@@ -3,8 +3,6 @@
  * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
 import { SurveyEditFields } from '../../surveys/SurveyEditFields';
 
 const PERIOD_GRANULARITIES = [
@@ -213,7 +211,6 @@ const SURVEY_COLUMNS = [
   },
   {
     Header: 'Export',
-    source: 'id',
     type: 'export',
     actionConfig: {
       exportEndpoint: 'surveys',
@@ -232,7 +229,6 @@ const SURVEY_COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: 'surveys',
@@ -532,21 +528,18 @@ const QUESTION_COLUMNS = [
   },
 ];
 
-const EXPANSION_CONFIG = [
-  {
-    title: 'Questions',
+export const surveys = {
+  title: 'Surveys',
+  path: '',
+  default: true,
+  endpoint: 'surveys',
+  columns: SURVEY_COLUMNS,
+  createConfig: CREATE_CONFIG,
+  nestedView: {
+    path: '/:id/questions',
     endpoint: 'surveys/{id}/surveyScreenComponents',
     columns: QUESTION_COLUMNS,
+    title: 'Questions',
+    displayProperty: 'name', // gets used to determine what to display in the breadcrumbs
   },
-];
-
-export const SurveysPage = props => (
-  <ResourcePage
-    title="Surveys"
-    endpoint="surveys"
-    columns={SURVEY_COLUMNS}
-    expansionTabs={EXPANSION_CONFIG}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+};
diff --git a/packages/admin-panel/src/routes/surveys/surveysTabRoutes.jsx b/packages/admin-panel/src/routes/surveys/surveysTabRoutes.jsx
new file mode 100644
index 0000000000..5631df39c9
--- /dev/null
+++ b/packages/admin-panel/src/routes/surveys/surveysTabRoutes.jsx
@@ -0,0 +1,32 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import { Assignment } from '@material-ui/icons';
+import { surveys } from './surveys';
+import { questions } from './questions';
+import { optionSets } from './optionSets';
+import { dataElements } from './dataElements';
+import { dataGroups } from './dataGroups';
+import { surveyResponses } from './surveyResponses';
+import { syncGroups } from './syncGroups';
+import { dataMapping } from './dataMapping';
+
+export const surveysTabRoutes = {
+  label: 'Surveys',
+  path: '/surveys',
+  exact: true,
+  icon: <Assignment />,
+  childViews: [
+    surveys,
+    questions,
+    optionSets,
+    dataElements,
+    dataGroups,
+    surveyResponses,
+    syncGroups,
+    dataMapping,
+  ],
+};
diff --git a/packages/admin-panel/src/pages/resources/SyncGroupsPage.jsx b/packages/admin-panel/src/routes/surveys/syncGroups.js
similarity index 77%
rename from packages/admin-panel/src/pages/resources/SyncGroupsPage.jsx
rename to packages/admin-panel/src/routes/surveys/syncGroups.js
index f63b95fd17..7f5ec05f13 100644
--- a/packages/admin-panel/src/pages/resources/SyncGroupsPage.jsx
+++ b/packages/admin-panel/src/routes/surveys/syncGroups.js
@@ -1,11 +1,8 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 const SERVICE_TYPES = [{ label: 'Kobo', value: 'kobo' }];
 
 const FIELDS = [
@@ -48,7 +45,6 @@ const COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: 'dataServiceSyncGroups',
@@ -57,7 +53,6 @@ const COLUMNS = [
   {
     Header: 'Logs',
     type: 'logs',
-    source: 'id',
     actionConfig: {
       title: '{code} sync group logs',
       logsCountEndpoint: 'dataServiceSyncGroups/{id}/logs/count',
@@ -70,8 +65,8 @@ const COLUMNS = [
     type: 'sync',
     source: 'sync_status',
     filterable: false,
-    sortable: false,
-    width: 180,
+    disableSortBy: true,
+    colWidth: '12rem',
     actionConfig: {
       syncStatusEndpoint: 'dataServiceSyncGroups/{id}',
       latestSyncLogEndpoint: 'dataServiceSyncGroups/{id}/logs?limit=1',
@@ -92,13 +87,12 @@ const CREATE_CONFIG = {
   },
 };
 
-export const SyncGroupsPage = props => (
-  <ResourcePage
-    title="Sync Groups"
-    endpoint="dataServiceSyncGroups"
-    columns={COLUMNS}
-    editorConfig={EDITOR_CONFIG}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+export const syncGroups = {
+  title: 'Sync groups',
+  path: '/sync-groups',
+  endpoint: 'dataServiceSyncGroups',
+  columns: COLUMNS,
+  editorConfig: EDITOR_CONFIG,
+  createConfig: CREATE_CONFIG,
+  isBESAdminOnly: true,
+};
diff --git a/packages/admin-panel/src/pages/resources/AccessRequestsPage.jsx b/packages/admin-panel/src/routes/users/accessRequests.js
similarity index 81%
rename from packages/admin-panel/src/pages/resources/AccessRequestsPage.jsx
rename to packages/admin-panel/src/routes/users/accessRequests.js
index f4aaf974b4..75a020071c 100644
--- a/packages/admin-panel/src/pages/resources/AccessRequestsPage.jsx
+++ b/packages/admin-panel/src/routes/users/accessRequests.js
@@ -1,11 +1,8 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 export const ACCESS_REQUESTS_ENDPOINT = 'accessRequests';
 
 const USER_FIELDS = [
@@ -35,11 +32,6 @@ const USER_FIELDS = [
     source: 'approved',
     show: false,
   },
-  {
-    Header: 'user_id',
-    source: 'user_id',
-    show: false,
-  },
 ];
 
 const ACCESS_REQUEST_FIELDS = [
@@ -79,8 +71,8 @@ const USER_COLUMNS = [
   ...USER_FIELDS,
   {
     Header: 'Edit',
-    source: 'user_id',
     type: 'bulkEdit',
+    source: 'user_id',
     width: 150,
     actionConfig: {
       title: 'Edit & Approve Access Requests',
@@ -139,13 +131,13 @@ const USER_COLUMNS = [
   },
 ];
 
-const EXPANSION_COLUMNS = [
+const DETAILS_COLUMNS = [
   ...ACCESS_REQUEST_FIELDS,
   {
     Header: 'Approve/Decline',
     width: 140,
-    type: 'edit',
     source: 'id',
+    type: 'edit',
     actionConfig: {
       title: 'Edit & Approve Access Request',
       editEndpoint: 'accessRequests',
@@ -164,30 +156,29 @@ const EXPANSION_COLUMNS = [
   },
 ];
 
-const EXPANSION_CONFIG = [
-  {
+export const accessRequests = {
+  title: 'Access requests',
+  path: '/access-requests',
+  endpoint: ACCESS_REQUESTS_ENDPOINT,
+  columns: USER_COLUMNS,
+  baseFilter: { approved: null },
+  onProcessDataForSave: (editedFields, recordData) => {
+    if (!Array.isArray(recordData)) {
+      return editedFields;
+    }
+
+    // Return an array of records for bulk editing on the server
+    return recordData.map(record => ({ ...record, ...editedFields }));
+  },
+  nestedView: {
     title: 'Access Requests',
     endpoint: `users/{user_id}/${ACCESS_REQUESTS_ENDPOINT}`,
-    columns: EXPANSION_COLUMNS,
+    columns: DETAILS_COLUMNS,
     baseFilter: { approved: null },
+    path: '/:user_id/access-requests',
+    getDisplayValue: user => {
+      if (!user) return '';
+      return `${user['user.first_name']} ${user['user.last_name']}`;
+    },
   },
-];
-
-export const AccessRequestsPage = props => (
-  <ResourcePage
-    title="Access Requests"
-    endpoint="accessRequests"
-    columns={USER_COLUMNS}
-    expansionTabs={EXPANSION_CONFIG}
-    baseFilter={{ approved: null }}
-    onProcessDataForSave={(editedFields, recordData) => {
-      if (!Array.isArray(recordData)) {
-        return editedFields;
-      }
-
-      // Return an array of records for bulk editing on the server
-      return recordData.map(record => ({ ...record, ...editedFields }));
-    }}
-    {...props}
-  />
-);
+};
diff --git a/packages/admin-panel/src/routes/users/index.js b/packages/admin-panel/src/routes/users/index.js
new file mode 100644
index 0000000000..a32b19ad8f
--- /dev/null
+++ b/packages/admin-panel/src/routes/users/index.js
@@ -0,0 +1,8 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { usersTabRoutes } from './usersTabRoutes';
+export { users } from './users';
+export { permissions } from './permissions';
diff --git a/packages/admin-panel/src/pages/resources/PermissionGroupsPage.jsx b/packages/admin-panel/src/routes/users/permissionGroups.jsx
similarity index 67%
rename from packages/admin-panel/src/pages/resources/PermissionGroupsPage.jsx
rename to packages/admin-panel/src/routes/users/permissionGroups.jsx
index 4773f8703f..8b057ab19d 100644
--- a/packages/admin-panel/src/pages/resources/PermissionGroupsPage.jsx
+++ b/packages/admin-panel/src/routes/users/permissionGroups.jsx
@@ -1,10 +1,8 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-
 import React from 'react';
-import { ResourcePage } from './ResourcePage';
 import { prettyArray } from '../../utilities';
 
 const COLUMNS = [
@@ -16,7 +14,7 @@ const COLUMNS = [
     Header: 'Ancestors',
     source: 'ancestors',
     filterable: false,
-    sortable: false,
+    disableSortBy: true,
     // eslint-disable-next-line react/prop-types
     Cell: ({ value: ancestors }) => (ancestors.length > 0 ? prettyArray(ancestors) : <ul> - </ul>),
     accessor: ({ ancestors }) => ancestors.map(a => a.name).reverse(),
@@ -44,13 +42,11 @@ const CREATE_CONFIG = {
   },
 };
 
-export const PermissionGroupsPage = props => (
-  <ResourcePage
-    title="Permission Groups"
-    endpoint="permissionGroups"
-    columns={COLUMNS}
-    createConfig={CREATE_CONFIG}
-    defaultSorting={[{ id: 'name', desc: false }]}
-    {...props}
-  />
-);
+export const permissionGroups = {
+  title: 'Permission groups',
+  path: '/permission-groups',
+  endpoint: 'permissionGroups',
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+  defaultSorting: [{ id: 'name', desc: false }],
+};
diff --git a/packages/admin-panel/src/routes/users/permissionGroupsViewer.js b/packages/admin-panel/src/routes/users/permissionGroupsViewer.js
new file mode 100644
index 0000000000..8393e35016
--- /dev/null
+++ b/packages/admin-panel/src/routes/users/permissionGroupsViewer.js
@@ -0,0 +1,11 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import { PermissionGroupsViewerPage } from '../../pages/resources/PermissionGroupsViewerPage';
+
+export const permissionGroupsViewer = {
+  title: 'Permission Groups Viewer',
+  path: '/permission-groups-viewer',
+  Component: PermissionGroupsViewerPage,
+};
diff --git a/packages/admin-panel/src/pages/resources/PermissionsPage.jsx b/packages/admin-panel/src/routes/users/permissions.js
similarity index 83%
rename from packages/admin-panel/src/pages/resources/PermissionsPage.jsx
rename to packages/admin-panel/src/routes/users/permissions.js
index 840c3f7b8a..ad566c11ae 100644
--- a/packages/admin-panel/src/pages/resources/PermissionsPage.jsx
+++ b/packages/admin-panel/src/routes/users/permissions.js
@@ -1,12 +1,3 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
-// export for use on users page
 export const PERMISSIONS_ENDPOINT = 'userEntityPermissions';
 export const PERMISSIONS_COLUMNS = [
   {
@@ -45,8 +36,8 @@ const FIELDS = [
   ...PERMISSIONS_COLUMNS,
   {
     Header: 'Edit',
-    source: 'id',
     type: 'edit',
+    source: 'id',
     actionConfig: {
       title: "Edit User's Permission",
       editEndpoint: PERMISSIONS_ENDPOINT,
@@ -55,7 +46,6 @@ const FIELDS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: PERMISSIONS_ENDPOINT,
@@ -108,7 +98,7 @@ const IMPORT_CONFIG = {
 
 // When creating, return an array of records for bulk editing on the server
 // When editing, just process a single record as normal
-const processDataForSave = (fieldsToSave, recordData) => {
+const onProcessDataForSave = (fieldsToSave, recordData) => {
   const isEditingSingle = Object.keys(recordData).length > 0;
   if (isEditingSingle) {
     return fieldsToSave;
@@ -140,14 +130,12 @@ const processDataForSave = (fieldsToSave, recordData) => {
   return records;
 };
 
-export const PermissionsPage = props => (
-  <ResourcePage
-    title="Permissions"
-    endpoint={PERMISSIONS_ENDPOINT}
-    columns={FIELDS}
-    createConfig={CREATE_CONFIG}
-    importConfig={IMPORT_CONFIG}
-    {...props}
-    onProcessDataForSave={processDataForSave}
-  />
-);
+export const permissions = {
+  title: 'Permissions',
+  path: '/permissions',
+  endpoint: PERMISSIONS_ENDPOINT,
+  columns: FIELDS,
+  importConfig: IMPORT_CONFIG,
+  createConfig: CREATE_CONFIG,
+  onProcessDataForSave,
+};
diff --git a/packages/admin-panel/src/pages/resources/UsersPage.jsx b/packages/admin-panel/src/routes/users/users.jsx
similarity index 84%
rename from packages/admin-panel/src/pages/resources/UsersPage.jsx
rename to packages/admin-panel/src/routes/users/users.jsx
index 21dc9d0a3f..e1c2720143 100644
--- a/packages/admin-panel/src/pages/resources/UsersPage.jsx
+++ b/packages/admin-panel/src/routes/users/users.jsx
@@ -1,13 +1,11 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-
 import React from 'react';
 import { Tooltip as TooltipComponent } from '@tupaia/ui-components';
-import { ResourcePage } from './ResourcePage';
-import { PERMISSIONS_ENDPOINT, PERMISSIONS_COLUMNS } from './PermissionsPage';
 import { VerifiedFilter } from '../../table/columnTypes/columnFilters';
+import { PERMISSIONS_COLUMNS, PERMISSIONS_ENDPOINT } from './permissions';
 
 // eslint-disable-next-line react/prop-types
 const VerifiedCell = ({ value }) => {
@@ -102,28 +100,14 @@ const COLUMNS = [
   },
   {
     Header: 'Edit',
-    source: 'id',
     type: 'edit',
-    width: 150,
+    source: 'id',
     actionConfig: {
       title: 'Edit User',
       editEndpoint: 'users',
       fields: EDIT_FIELDS,
     },
   },
-  // Invisible columns
-  {
-    source: 'last_name',
-    show: false,
-  },
-];
-
-const EXPANSION_CONFIG = [
-  {
-    title: 'Permissions',
-    endpoint: `users/{id}/${PERMISSIONS_ENDPOINT}`,
-    columns: PERMISSIONS_COLUMNS,
-  },
 ];
 
 const IMPORT_CONFIG = {
@@ -173,14 +157,22 @@ const CREATE_CONFIG = {
   },
 };
 
-export const UsersPage = props => (
-  <ResourcePage
-    title="Users"
-    endpoint="users"
-    columns={COLUMNS}
-    expansionTabs={EXPANSION_CONFIG}
-    importConfig={IMPORT_CONFIG}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+export const users = {
+  title: 'Users',
+  path: '',
+  endpoint: 'users',
+  columns: COLUMNS,
+  importConfig: IMPORT_CONFIG,
+  createConfig: CREATE_CONFIG,
+  nestedView: {
+    title: 'Permissions',
+    endpoint: `users/{id}/${PERMISSIONS_ENDPOINT}`,
+    columns: PERMISSIONS_COLUMNS,
+    path: '/:id/permissions',
+    getDisplayValue: user => {
+      if (!user) return '';
+      const { first_name: firstName, last_name: lastName } = user;
+      return `${firstName} ${lastName}`;
+    },
+  },
+};
diff --git a/packages/admin-panel/src/routes/users/usersTabRoutes.jsx b/packages/admin-panel/src/routes/users/usersTabRoutes.jsx
new file mode 100644
index 0000000000..47a9c9f471
--- /dev/null
+++ b/packages/admin-panel/src/routes/users/usersTabRoutes.jsx
@@ -0,0 +1,19 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import { PeopleAlt } from '@material-ui/icons';
+import { users } from './users';
+import { permissions } from './permissions';
+import { permissionGroups } from './permissionGroups';
+import { permissionGroupsViewer } from './permissionGroupsViewer';
+import { accessRequests } from './accessRequests';
+
+export const usersTabRoutes = {
+  label: 'Users & Permissions',
+  path: '/users',
+  icon: <PeopleAlt />,
+  childViews: [users, permissions, permissionGroups, permissionGroupsViewer, accessRequests],
+};
diff --git a/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx b/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx
new file mode 100644
index 0000000000..968b3073af
--- /dev/null
+++ b/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx
@@ -0,0 +1,123 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { CreateActionButton } from '../../editor';
+
+export const DASHBOARD_ITEMS_ENDPOINT = 'dashboardItems';
+
+const FIELDS = [
+  {
+    Header: 'Code',
+    source: 'code',
+    type: 'tooltip',
+  },
+  {
+    Header: 'Report Code',
+    source: 'report_code',
+    type: 'tooltip',
+  },
+  {
+    Header: 'Config',
+    source: 'config',
+    type: 'jsonTooltip',
+    editConfig: { type: 'jsonEditor' },
+  },
+  {
+    Header: 'Legacy',
+    source: 'legacy',
+    type: 'boolean',
+    editConfig: { type: 'boolean' },
+  },
+];
+
+const extraEditFields = [
+  // ID field for constructing viz-builder path only, not for showing or editing
+  {
+    Header: 'ID',
+    source: 'id',
+    show: false,
+  },
+  {
+    Header: 'Edit using Visualisation Builder',
+    type: 'link',
+    editConfig: {
+      type: 'link',
+      linkOptions: {
+        path: '/viz-builder/dashboard-item/:id',
+        parameters: { id: 'id' },
+      },
+      visibilityCriteria: {
+        legacy: false,
+      },
+    },
+  },
+];
+
+const COLUMNS = [
+  ...FIELDS,
+  {
+    Header: 'Export',
+    type: 'export',
+    actionConfig: {
+      exportEndpoint: 'dashboardVisualisation',
+      fileName: '{code}',
+    },
+  },
+  {
+    Header: 'Edit',
+    type: 'edit',
+    source: 'id',
+    actionConfig: {
+      title: 'Edit Dashboard Item',
+      editEndpoint: DASHBOARD_ITEMS_ENDPOINT,
+      fields: [...FIELDS, ...extraEditFields],
+    },
+  },
+  {
+    Header: 'Delete',
+    type: 'delete',
+    actionConfig: {
+      endpoint: DASHBOARD_ITEMS_ENDPOINT,
+    },
+  },
+];
+
+const IMPORT_CONFIG = {
+  title: 'Import Dashboard Visualisation',
+  subtitle: 'Please upload one or more .json files with visualisations to be imported:',
+  actionConfig: {
+    importEndpoint: 'dashboardVisualisations',
+    multiple: true,
+  },
+  getFinishedMessage: response => (
+    <>
+      <span>{response.message}</span>
+      {response.importedVizes.map(({ code, id }) => (
+        <p>
+          <span>{`${code}: `}</span>
+          <Link to={`/viz-builder/dashboard-item/${id}`}>View in Visualisation Builder</Link>
+        </p>
+      ))}
+    </>
+  ),
+};
+
+const LinksComponent = () => (
+  <CreateActionButton to="/viz-builder/dashboard-item/new" component={Link}>
+    New
+  </CreateActionButton>
+);
+
+export const dashboardItems = {
+  title: 'Dashboard items',
+  path: '',
+  default: true,
+  endpoint: DASHBOARD_ITEMS_ENDPOINT,
+  importConfig: IMPORT_CONFIG,
+  columns: COLUMNS,
+  LinksComponent,
+  needsBESAdminAccess: ['delete'],
+};
diff --git a/packages/admin-panel/src/pages/resources/DashboardMailingListsPage.jsx b/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js
similarity index 87%
rename from packages/admin-panel/src/pages/resources/DashboardMailingListsPage.jsx
rename to packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js
index a5457ac2e7..38de5f3f83 100644
--- a/packages/admin-panel/src/pages/resources/DashboardMailingListsPage.jsx
+++ b/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js
@@ -1,10 +1,8 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
 
@@ -87,7 +85,6 @@ const DASHBOARD_MAILING_LIST_COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: 'dashboardMailingLists',
@@ -136,7 +133,6 @@ const ENTRY_COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: 'dashboardMailingListEntries',
@@ -144,21 +140,18 @@ const ENTRY_COLUMNS = [
   },
 ];
 
-const EXPANSION_CONFIG = [
-  {
+export const dashboardMailingLists = {
+  title: 'Dashboard mailing lists',
+  path: '/dashboard-mailing-lists',
+  endpoint: 'dashboardMailingLists',
+  columns: DASHBOARD_MAILING_LIST_COLUMNS,
+  createConfig: CREATE_CONFIG,
+  nestedView: {
     title: 'Entries',
     endpoint: 'dashboardMailingLists/{id}/dashboardMailingListEntries',
     columns: ENTRY_COLUMNS,
+    path: '/:id/entries',
+    displayProperty: 'dashboard.name',
   },
-];
-
-export const DashboardMailingListsPage = props => (
-  <ResourcePage
-    title="Dashboard Mailing Lists"
-    endpoint="dashboardMailingLists"
-    columns={DASHBOARD_MAILING_LIST_COLUMNS}
-    expansionTabs={EXPANSION_CONFIG}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+  isBESAdminOnly: true,
+};
diff --git a/packages/admin-panel/src/pages/resources/DashboardRelationsPage.jsx b/packages/admin-panel/src/routes/visualisations/dashboardRelations.js
similarity index 86%
rename from packages/admin-panel/src/pages/resources/DashboardRelationsPage.jsx
rename to packages/admin-panel/src/routes/visualisations/dashboardRelations.js
index 5ec8b071d0..c031771d3d 100644
--- a/packages/admin-panel/src/pages/resources/DashboardRelationsPage.jsx
+++ b/packages/admin-panel/src/routes/visualisations/dashboardRelations.js
@@ -1,12 +1,10 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-import { prettyArray } from '../../utilities';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
+import { prettyArray } from '../../utilities';
 
 // export for use on users page
 export const DASHBOARD_RELATION_ENDPOINT = 'dashboardRelations';
@@ -83,12 +81,12 @@ export const DASHBOARD_RELATION_COLUMNS = [
   },
 ];
 
-const FIELDS = [
+const COLUMNS = [
   ...DASHBOARD_RELATION_COLUMNS,
   {
     Header: 'Edit',
-    source: 'id',
     type: 'edit',
+    source: 'id',
     actionConfig: {
       title: 'Edit Dashboard Relation',
       editEndpoint: DASHBOARD_RELATION_ENDPOINT,
@@ -97,7 +95,6 @@ const FIELDS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: DASHBOARD_RELATION_ENDPOINT,
@@ -113,12 +110,10 @@ const CREATE_CONFIG = {
   },
 };
 
-export const DashboardRelationsPage = props => (
-  <ResourcePage
-    title="Dashboard Relations"
-    endpoint={DASHBOARD_RELATION_ENDPOINT}
-    columns={FIELDS}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+export const dashboardRelations = {
+  title: 'Dashboard relations',
+  path: '/dashboard-relations',
+  endpoint: DASHBOARD_RELATION_ENDPOINT,
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+};
diff --git a/packages/admin-panel/src/pages/resources/DashboardsPage.jsx b/packages/admin-panel/src/routes/visualisations/dashboards.js
similarity index 85%
rename from packages/admin-panel/src/pages/resources/DashboardsPage.jsx
rename to packages/admin-panel/src/routes/visualisations/dashboards.js
index f62267f0f8..675b6c68e2 100644
--- a/packages/admin-panel/src/pages/resources/DashboardsPage.jsx
+++ b/packages/admin-panel/src/routes/visualisations/dashboards.js
@@ -1,11 +1,8 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 const DASHBOARDS_ENDPOINT = 'dashboards';
 
 const FIELDS = [
@@ -48,7 +45,6 @@ const COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: DASHBOARDS_ENDPOINT,
@@ -115,14 +111,6 @@ const RELATION_COLUMNS = [
   },
 ];
 
-const EXPANSION_CONFIG = [
-  {
-    title: 'Dashboard Relations',
-    columns: RELATION_COLUMNS,
-    endpoint: 'dashboards/{id}/dashboardRelations',
-  },
-];
-
 const CREATE_CONFIG = {
   title: 'Create a new Dashboard',
   actionConfig: {
@@ -131,13 +119,18 @@ const CREATE_CONFIG = {
   },
 };
 
-export const DashboardsPage = props => (
-  <ResourcePage
-    title="Dashboards"
-    endpoint={DASHBOARDS_ENDPOINT}
-    columns={COLUMNS}
-    expansionTabs={EXPANSION_CONFIG}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+export const dashboards = {
+  title: 'Dashboards',
+  path: '/dashboards',
+  endpoint: DASHBOARDS_ENDPOINT,
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+  nestedView: {
+    title: 'Dashboard Relations',
+    columns: RELATION_COLUMNS,
+    endpoint: 'dashboards/{id}/dashboardRelations',
+    path: '/:id/dashboard-relations',
+    displayProperty: 'name',
+  },
+  needsBESAdminAccess: ['delete'],
+};
diff --git a/packages/admin-panel/src/pages/resources/DataTablesPage.jsx b/packages/admin-panel/src/routes/visualisations/dataTables.js
similarity index 80%
rename from packages/admin-panel/src/pages/resources/DataTablesPage.jsx
rename to packages/admin-panel/src/routes/visualisations/dataTables.js
index 6eab7bcb64..95d5b250e7 100644
--- a/packages/admin-panel/src/pages/resources/DataTablesPage.jsx
+++ b/packages/admin-panel/src/routes/visualisations/dataTables.js
@@ -1,10 +1,8 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
 import { DataTableEditFields } from '../../dataTables/DataTableEditFields';
 import { onProcessDataForSave } from '../../dataTables/onProcessDataForSave';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
@@ -48,7 +46,6 @@ const COLUMNS = [
   ...FIELDS,
   {
     Header: 'Export',
-    source: 'id',
     type: 'export',
     actionConfig: {
       exportEndpoint: 'dataTable',
@@ -74,7 +71,6 @@ const COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: DATA_TABLES_ENDPOINT,
@@ -103,15 +99,14 @@ const IMPORT_CONFIG = {
 };
 const EDITOR_CONFIG = { displayUsedBy: true };
 
-export const DataTablesPage = props => (
-  <ResourcePage
-    title="Data-Tables"
-    endpoint={DATA_TABLES_ENDPOINT}
-    columns={COLUMNS}
-    importConfig={IMPORT_CONFIG}
-    createConfig={CREATE_CONFIG}
-    onProcessDataForSave={onProcessDataForSave}
-    editorConfig={EDITOR_CONFIG}
-    {...props}
-  />
-);
+export const dataTables = {
+  title: 'Data tables',
+  path: '/data-tables',
+  endpoint: DATA_TABLES_ENDPOINT,
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+  importConfig: IMPORT_CONFIG,
+  editorConfig: EDITOR_CONFIG,
+  onProcessDataForSave,
+  isBESAdminOnly: true,
+};
diff --git a/packages/admin-panel/src/routes/visualisations/index.js b/packages/admin-panel/src/routes/visualisations/index.js
new file mode 100644
index 0000000000..dc7daf40b5
--- /dev/null
+++ b/packages/admin-panel/src/routes/visualisations/index.js
@@ -0,0 +1,13 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { visualisationsTabRoutes } from './visualisationsTabRoutes';
+export { dashboardItems } from './dashboardItems';
+export { dashboards } from './dashboards';
+export { dashboardRelations } from './dashboardRelations';
+export { mapOverlays } from './mapOverlays';
+export { mapOverlayGroups } from './mapOverlayGroups';
+export { mapOverlayGroupRelations } from './mapOverlayGroupRelations';
+export { dataTables } from './dataTables';
diff --git a/packages/admin-panel/src/pages/resources/IndicatorsPage.jsx b/packages/admin-panel/src/routes/visualisations/indicators.js
similarity index 73%
rename from packages/admin-panel/src/pages/resources/IndicatorsPage.jsx
rename to packages/admin-panel/src/routes/visualisations/indicators.js
index afbce4bcb7..eb92a3a06f 100644
--- a/packages/admin-panel/src/pages/resources/IndicatorsPage.jsx
+++ b/packages/admin-panel/src/routes/visualisations/indicators.js
@@ -1,11 +1,8 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 const FIELDS = [
   {
     Header: 'Code',
@@ -58,12 +55,11 @@ const CREATE_CONFIG = {
   },
 };
 
-export const IndicatorsPage = props => (
-  <ResourcePage
-    title="Indicators"
-    endpoint="indicators"
-    columns={COLUMNS}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+export const indicators = {
+  title: 'Indicators',
+  path: '/indicators',
+  endpoint: 'indicators',
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+  isBESAdminOnly: true,
+};
diff --git a/packages/admin-panel/src/pages/resources/LegacyReportsPage.jsx b/packages/admin-panel/src/routes/visualisations/legacyReports.js
similarity index 71%
rename from packages/admin-panel/src/pages/resources/LegacyReportsPage.jsx
rename to packages/admin-panel/src/routes/visualisations/legacyReports.js
index fa3537c789..eac733d466 100644
--- a/packages/admin-panel/src/pages/resources/LegacyReportsPage.jsx
+++ b/packages/admin-panel/src/routes/visualisations/legacyReports.js
@@ -1,11 +1,8 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 const FIELDS = [
   {
     Header: 'Code',
@@ -45,6 +42,10 @@ const COLUMNS = [
   },
 ];
 
-export const LegacyReportsPage = props => (
-  <ResourcePage title="Legacy Reports" endpoint="legacyReports" columns={COLUMNS} {...props} />
-);
+export const legacyReports = {
+  title: 'Legacy reports',
+  path: '/legacy-reports',
+  endpoint: 'legacyReports',
+  columns: COLUMNS,
+  isBESAdminOnly: true,
+};
diff --git a/packages/admin-panel/src/pages/resources/MapOverlayGroupRelationsPage.jsx b/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
similarity index 84%
rename from packages/admin-panel/src/pages/resources/MapOverlayGroupRelationsPage.jsx
rename to packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
index b9b3f98d0f..74c753d39f 100644
--- a/packages/admin-panel/src/pages/resources/MapOverlayGroupRelationsPage.jsx
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
@@ -2,10 +2,6 @@
  * Tupaia
  * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
  */
-
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 export const RELATION_ENDPOINT = 'mapOverlayGroupRelations';
 
 const FIELDS = [
@@ -71,7 +67,6 @@ const COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: 'mapOverlayGroupRelations',
@@ -87,12 +82,10 @@ const CREATE_CONFIG = {
   },
 };
 
-export const MapOverlayGroupRelationsPage = props => (
-  <ResourcePage
-    title="Map Overlay Group Relations"
-    endpoint="mapOverlayGroupRelations"
-    columns={COLUMNS}
-    createConfig={CREATE_CONFIG}
-    {...props}
-  />
-);
+export const mapOverlayGroupRelations = {
+  title: 'Map overlay group relations',
+  path: '/map-overlay-group-relations',
+  endpoint: RELATION_ENDPOINT,
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+};
diff --git a/packages/admin-panel/src/pages/resources/MapOverlayGroupsPage.jsx b/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
similarity index 80%
rename from packages/admin-panel/src/pages/resources/MapOverlayGroupsPage.jsx
rename to packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
index 2efca0255f..4b866b5223 100644
--- a/packages/admin-panel/src/pages/resources/MapOverlayGroupsPage.jsx
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
@@ -2,10 +2,6 @@
  * Tupaia
  * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
  */
-
-import React from 'react';
-import { ResourcePage } from './ResourcePage';
-
 const MAP_OVERLAY_GROUPS_ENDPOINT = 'mapOverlayGroups';
 
 const EDIT_FIELDS = [
@@ -36,7 +32,6 @@ const COLUMNS = [
   {
     Header: 'Edit',
     type: 'edit',
-    source: 'id',
     actionConfig: {
       title: 'Edit Map Overlay Group',
       editEndpoint: 'mapOverlayGroups',
@@ -94,14 +89,6 @@ export const RELATION_COLUMNS = [
   },
 ];
 
-const EXPANSION_CONFIG = [
-  {
-    title: 'Map Overlay Group Relations',
-    columns: RELATION_COLUMNS,
-    endpoint: 'mapOverlayGroups/{id}/mapOverlayGroupRelations',
-  },
-];
-
 const CREATE_CONFIG = {
   title: 'Create a new Map overlay group',
   actionConfig: {
@@ -110,16 +97,17 @@ const CREATE_CONFIG = {
   },
 };
 
-export const MapOverlayGroupsPage = props => (
-  <ResourcePage
-    title="Map Overlay Groups"
-    endpoint={MAP_OVERLAY_GROUPS_ENDPOINT}
-    columns={COLUMNS}
-    expansionTabs={EXPANSION_CONFIG}
-    createConfig={CREATE_CONFIG}
-    editConfig={{
-      title: 'Edit Map Overlay Group',
-    }}
-    {...props}
-  />
-);
+export const mapOverlayGroups = {
+  title: 'Map overlay groups',
+  path: '/map-overlay-groups',
+  endpoint: MAP_OVERLAY_GROUPS_ENDPOINT,
+  columns: COLUMNS,
+  createConfig: CREATE_CONFIG,
+  nestedView: {
+    title: 'Map Overlay Group Relations',
+    columns: RELATION_COLUMNS,
+    endpoint: 'mapOverlayGroups/{id}/mapOverlayGroupRelations',
+    path: '/:id/map-overlay-group-relations',
+    displayProperty: 'code',
+  },
+};
diff --git a/packages/admin-panel/src/pages/resources/MapOverlaysPage.jsx b/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
similarity index 51%
rename from packages/admin-panel/src/pages/resources/MapOverlaysPage.jsx
rename to packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
index 3350e082da..bb70a7d429 100644
--- a/packages/admin-panel/src/pages/resources/MapOverlaysPage.jsx
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
@@ -1,15 +1,12 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { CreateActionButton } from '../../editor';
 import { prettyArray } from '../../utilities';
-import { ResourcePage } from './ResourcePage';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
-import { CreateActionButton } from '../../editor';
 
 export const MAP_OVERLAYS_ENDPOINT = 'mapOverlays';
 
@@ -110,105 +107,90 @@ const FIELDS = [
   },
 ];
 
-export const MapOverlaysPage = ({ vizBuilderBaseUrl, ...props }) => {
-  const extraEditFields = [
-    // ID field for constructing viz-builder path only, not for showing or editing
-    {
-      Header: 'ID',
-      source: 'id',
-      show: false,
-    },
-    {
-      Header: 'Edit using Visualisation Builder',
+const extraEditFields = [
+  // ID field for constructing viz-builder path only, not for showing or editing
+  {
+    Header: 'ID',
+    source: 'id',
+    show: false,
+  },
+  {
+    Header: 'Edit using Visualisation Builder',
+    type: 'link',
+    editConfig: {
       type: 'link',
-      editConfig: {
-        type: 'link',
-        linkOptions: {
-          path: `${vizBuilderBaseUrl}/viz-builder/map-overlay/:id`,
-          parameters: { id: 'id' },
-        },
-        visibilityCriteria: {
-          legacy: false,
-        },
+      linkOptions: {
+        path: '/viz-builder/map-overlay/:id',
+        parameters: { id: 'id' },
       },
-    },
-  ];
-
-  const COLUMNS = [
-    ...FIELDS,
-    {
-      Header: 'Export',
-      source: 'id',
-      type: 'export',
-      actionConfig: {
-        exportEndpoint: 'mapOverlayVisualisation',
-        fileName: '{code}',
+      visibilityCriteria: {
+        legacy: false,
       },
     },
-    {
-      Header: 'Edit',
-      type: 'edit',
-      source: 'id',
-      actionConfig: {
-        title: 'Edit Map Overlay',
-        editEndpoint: MAP_OVERLAYS_ENDPOINT,
-        fields: [...FIELDS, ...extraEditFields],
-      },
+  },
+];
+
+const COLUMNS = [
+  ...FIELDS,
+  {
+    Header: 'Export',
+    type: 'export',
+    actionConfig: {
+      exportEndpoint: 'mapOverlayVisualisation',
+      fileName: '{code}',
     },
-    {
-      Header: 'Delete',
-      source: 'id',
-      type: 'delete',
-      actionConfig: {
-        endpoint: MAP_OVERLAYS_ENDPOINT,
-      },
+  },
+  {
+    Header: 'Edit',
+    type: 'edit',
+    source: 'id',
+    actionConfig: {
+      title: 'Edit Map Overlay',
+      editEndpoint: MAP_OVERLAYS_ENDPOINT,
+      fields: [...FIELDS, ...extraEditFields],
     },
-  ];
-
-  const importConfig = {
-    title: 'Import Map Overlay Visualisation',
-    subtitle: 'Please upload one or more .json files with visualisations to be imported:',
+  },
+  {
+    Header: 'Delete',
+    type: 'delete',
     actionConfig: {
-      importEndpoint: 'mapOverlayVisualisations',
-      multiple: true,
+      endpoint: MAP_OVERLAYS_ENDPOINT,
     },
-    getFinishedMessage: response => (
-      <>
-        <span>{response.message}</span>
-        {response.importedVizes.map(({ code, id }) => (
-          <p>
-            <span>{`${code}: `}</span>
-            <Link to={`${vizBuilderBaseUrl}/viz-builder/map-overlay/${id}`}>
-              View in Visualisation Builder
-            </Link>
-          </p>
-        ))}
-      </>
-    ),
-  };
-
-  const renderNewMapOverlayVizButton = () => (
-    <CreateActionButton to={`${vizBuilderBaseUrl}/viz-builder/map-overlay/new`} component={Link}>
-      New
-    </CreateActionButton>
-  );
+  },
+];
 
-  return (
-    <ResourcePage
-      title="Map Overlays"
-      endpoint="mapOverlays"
-      columns={COLUMNS}
-      importConfig={importConfig}
-      LinksComponent={renderNewMapOverlayVizButton}
-      {...props}
-    />
-  );
+const IMPORT_CONFIG = {
+  title: 'Import Map Overlay Visualisation',
+  subtitle: 'Please upload one or more .json files with visualisations to be imported:',
+  actionConfig: {
+    importEndpoint: 'mapOverlayVisualisations',
+    multiple: true,
+  },
+  getFinishedMessage: response => (
+    <>
+      <span>{response.message}</span>
+      {response.importedVizes.map(({ code, id }) => (
+        <p>
+          <span>{`${code}: `}</span>
+          <Link to={`/viz-builder/map-overlay/${id}`}>View in Visualisation Builder</Link>
+        </p>
+      ))}
+    </>
+  ),
 };
 
-MapOverlaysPage.propTypes = {
-  vizBuilderBaseUrl: PropTypes.string,
-};
+const LinksComponent = () => (
+  <CreateActionButton to="/viz-builder/map-overlay/new" component={Link}>
+    New
+  </CreateActionButton>
+);
 
-MapOverlaysPage.defaultProps = {
-  vizBuilderBaseUrl: '',
+export const mapOverlays = {
+  title: 'Map overlays',
+  path: '/map-overlays',
+  endpoint: 'mapOverlays',
+  columns: COLUMNS,
+  importConfig: IMPORT_CONFIG,
+  LinksComponent,
+  needsBESAdminAccess: ['delete'],
 };
diff --git a/packages/admin-panel/src/pages/resources/SocialFeedPage.jsx b/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
similarity index 82%
rename from packages/admin-panel/src/pages/resources/SocialFeedPage.jsx
rename to packages/admin-panel/src/routes/visualisations/socialFeed.jsx
index 4893c8fb02..1e7faf8268 100644
--- a/packages/admin-panel/src/pages/resources/SocialFeedPage.jsx
+++ b/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
@@ -1,13 +1,11 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
 import moment from 'moment';
 import styled from 'styled-components';
-import { ResourcePage } from './ResourcePage';
+import Typography from '@material-ui/core/Typography';
 
 const Image = styled.div`
   height: 200px;
@@ -80,8 +78,8 @@ export const SOCIAL_FEED_COLUMNS = [
   ...FIELDS,
   {
     Header: 'Edit',
-    source: 'id',
     type: 'edit',
+    source: 'id',
     actionConfig: {
       title: 'Edit Social Feed item',
       editEndpoint: 'feedItems',
@@ -90,7 +88,6 @@ export const SOCIAL_FEED_COLUMNS = [
   },
   {
     Header: 'Delete',
-    source: 'id',
     type: 'delete',
     actionConfig: {
       endpoint: 'feedItems',
@@ -105,15 +102,13 @@ const CREATE_CONFIG = {
     fields: FIELDS,
   },
 };
-
-export const SocialFeedPage = props => (
-  <ResourcePage
-    title="Social Feed"
-    endpoint="feedItems"
-    baseFilter={{ type: 'markdown' }}
-    columns={SOCIAL_FEED_COLUMNS}
-    createConfig={CREATE_CONFIG}
-    onProcessDataForSave={data => ({ ...data, type: 'markdown' })}
-    {...props}
-  />
-);
+export const socialFeed = {
+  title: 'Social feed',
+  path: '/social-feed',
+  endpoint: 'feedItems',
+  baseFilter: { type: 'markdown' },
+  columns: SOCIAL_FEED_COLUMNS,
+  createConfig: CREATE_CONFIG,
+  onProcessDataForSave: data => ({ ...data, type: 'markdown' }),
+  isBESAdminOnly: true,
+};
diff --git a/packages/admin-panel/src/routes/visualisations/visualisationsTabRoutes.jsx b/packages/admin-panel/src/routes/visualisations/visualisationsTabRoutes.jsx
new file mode 100644
index 0000000000..fb45400577
--- /dev/null
+++ b/packages/admin-panel/src/routes/visualisations/visualisationsTabRoutes.jsx
@@ -0,0 +1,37 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import { dashboardItems } from './dashboardItems';
+import { dashboards } from './dashboards';
+import { dashboardRelations } from './dashboardRelations';
+import { dashboardMailingLists } from './dashboardMailingLists';
+import { legacyReports } from './legacyReports';
+import { mapOverlays } from './mapOverlays';
+import { mapOverlayGroups } from './mapOverlayGroups';
+import { mapOverlayGroupRelations } from './mapOverlayGroupRelations';
+import { indicators } from './indicators';
+import { dataTables } from './dataTables';
+import { socialFeed } from './socialFeed';
+import { VizIcon } from '../../icons';
+
+export const visualisationsTabRoutes = {
+  label: 'Visualisations',
+  path: '/visualisations',
+  icon: <VizIcon />,
+  childViews: [
+    dashboardItems,
+    dashboards,
+    dashboardRelations,
+    dashboardMailingLists,
+    legacyReports,
+    mapOverlays,
+    mapOverlayGroups,
+    mapOverlayGroupRelations,
+    indicators,
+    dataTables,
+    socialFeed,
+  ],
+};
diff --git a/packages/admin-panel/src/sync/SyncStatus.jsx b/packages/admin-panel/src/sync/SyncStatus.jsx
index 2ecf4ad71b..33b80626eb 100644
--- a/packages/admin-panel/src/sync/SyncStatus.jsx
+++ b/packages/admin-panel/src/sync/SyncStatus.jsx
@@ -12,8 +12,8 @@ import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import { Tooltip } from '@material-ui/core';
 import styled, { keyframes } from 'styled-components';
 import { useApiContext } from '../utilities/ApiProvider';
-import { IconButton } from '../widgets';
 import { makeSubstitutionsInString } from '../utilities';
+import { ColumnActionButton } from '../table/columnTypes/ColumnActionButton';
 
 const STATUSES = {
   IDLE: 'IDLE',
@@ -61,7 +61,7 @@ const SpinningSyncIcon = styled(SyncIcon)`
   animation-iteration-count: infinite;
 `;
 
-const SyncingIconButton = styled(IconButton)`
+const SyncingIconButton = styled(ColumnActionButton)`
   display: flex;
 
   &.Mui-disabled {
@@ -96,7 +96,10 @@ const formatLog = ({ timestamp, message }) =>
   })}: ${message}`;
 
 export const SyncStatus = props => {
-  const { actionConfig, original } = props;
+  const {
+    actionConfig,
+    row: { original },
+  } = props;
   const api = useApiContext();
   const [status, setStatus] = useExternalState(`${original.id}.status`, original.sync_status);
   const [logMessage, setLogMessage] = useExternalState(`${original.id}.logMessage`, '');
@@ -149,9 +152,9 @@ export const SyncStatus = props => {
   if (errorMessage) {
     return (
       <SyncStatusContainer>
-        <IconButton className="sync-button" onClick={performManualSync}>
+        <ColumnActionButton className="sync-button" onClick={performManualSync}>
           <SyncIcon />
-        </IconButton>
+        </ColumnActionButton>
         <Tooltip title={errorMessage}>
           <StatusMessageContainer>
             <SyncFailingIcon />
@@ -165,9 +168,9 @@ export const SyncStatus = props => {
   if (status === STATUSES.ERROR) {
     return (
       <SyncStatusContainer>
-        <IconButton onClick={performManualSync}>
+        <ColumnActionButton onClick={performManualSync}>
           <SyncIcon />
-        </IconButton>
+        </ColumnActionButton>
         <Tooltip title={logMessage}>
           <StatusMessageContainer>
             <SyncFailingIcon />
@@ -193,9 +196,9 @@ export const SyncStatus = props => {
 
   return (
     <SyncStatusContainer>
-      <IconButton onClick={performManualSync}>
+      <ColumnActionButton onClick={performManualSync}>
         <SyncIcon />
-      </IconButton>
+      </ColumnActionButton>
       <Tooltip title={logMessage}>
         <StatusMessageContainer>
           <SyncSuccessIcon />
@@ -212,5 +215,10 @@ SyncStatus.propTypes = {
     latestSyncLogEndpoint: PropTypes.string,
     manualSyncEndpoint: PropTypes.string,
   }).isRequired,
-  original: PropTypes.shape({ id: PropTypes.string, sync_status: PropTypes.string }).isRequired,
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      id: PropTypes.string,
+      sync_status: PropTypes.string,
+    }),
+  }).isRequired,
 };
diff --git a/packages/admin-panel/src/table/DataFetchingTable.jsx b/packages/admin-panel/src/table/DataFetchingTable.jsx
deleted file mode 100644
index 98e4aee3fe..0000000000
--- a/packages/admin-panel/src/table/DataFetchingTable.jsx
+++ /dev/null
@@ -1,306 +0,0 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { SmallAlert, ConfirmDeleteModal } from '@tupaia/ui-components';
-import styled from 'styled-components';
-import { IndeterminateCheckBox, AddBox } from '@material-ui/icons';
-import queryString from 'query-string';
-import { Tabs } from '../widgets';
-import { TableHeadCell } from './TableHeadCell';
-import { ColumnFilter } from './ColumnFilter';
-import {
-  cancelAction,
-  changeExpansions,
-  changeExpansionsTab,
-  changeFilters,
-  changePage,
-  changePageSize,
-  changeResizedColumns,
-  changeSorting,
-  confirmAction,
-  refreshData,
-} from './actions';
-import { getTableState, getIsFetchingData } from './selectors';
-import { generateConfigForColumnType } from './columnTypes';
-import { getIsChangingDataOnServer } from '../dataChangeListener';
-import { makeSubstitutionsInString } from '../utilities';
-import { customPagination } from './customPagination';
-import { ExpansionContainer } from './ExpansionContainer';
-import { StyledReactTable } from './StyledReactTable';
-
-const StyledAlert = styled(SmallAlert)`
-  margin-top: 30px;
-`;
-
-const ExpandRowIcon = styled(AddBox)`
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: ${props => props.theme.palette.primary.main};
-  }
-`;
-
-class DataFetchingTableComponent extends React.Component {
-  componentWillMount() {
-    if (this.props.nestingLevel === 0) {
-      // Page-level filters only apply to top-level data tables
-      const params = queryString.parse(location.search); // set filters from query params
-      const filters = params.filters ? JSON.parse(params.filters) : undefined;
-      this.props.initialiseTable(filters);
-    } else {
-      this.props.initialiseTable();
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const propsCausingDataRefresh = ['filters', 'pageIndex', 'pageSize', 'sorting'];
-    if (
-      propsCausingDataRefresh.some(propKey => this.props[propKey] !== nextProps[propKey]) ||
-      (this.props.isChangingDataOnServer &&
-        !nextProps.isChangingDataOnServer &&
-        !nextProps.errorMessage)
-    ) {
-      nextProps.onRefreshData();
-    }
-  }
-
-  renderConfirmModal() {
-    const { confirmActionMessage, onConfirmAction, onCancelAction, deleteConfig } = this.props;
-    return (
-      <ConfirmDeleteModal
-        isOpen={!!confirmActionMessage}
-        message={confirmActionMessage}
-        onConfirm={onConfirmAction}
-        onCancel={onCancelAction}
-        title={deleteConfig.title}
-        description={deleteConfig.description}
-        cancelButtonText={deleteConfig.cancelButtonText}
-        confirmButtonText={deleteConfig.confirmButtonText}
-      />
-    );
-  }
-
-  renderReactTable() {
-    const {
-      reduxId,
-      columns,
-      data,
-      expansionTabs,
-      isFetchingData,
-      isChangingDataOnServer,
-      numberOfPages,
-      onPageChange,
-      onPageSizeChange,
-      onSortedChange,
-      onExpandedChange,
-      onFilteredChange,
-      onResizedChange,
-      pageIndex,
-      pageSize,
-      sorting,
-      expansions,
-      filters,
-      resizedColumns,
-      expansionTabStates,
-      onExpandedTabChange,
-      TableComponent,
-      nestingLevel,
-    } = this.props;
-
-    return (
-      <StyledReactTable
-        columns={columns}
-        data={data}
-        manual
-        onPageChange={onPageChange}
-        onPageSizeChange={onPageSizeChange}
-        onSortedChange={onSortedChange}
-        onExpandedChange={onExpandedChange}
-        onFilteredChange={onFilteredChange}
-        onResizedChange={onResizedChange}
-        page={pageIndex}
-        pageSize={pageSize}
-        sorted={sorting}
-        expanded={expansions}
-        filtered={filters}
-        resized={resizedColumns}
-        pages={numberOfPages}
-        loading={isFetchingData || isChangingDataOnServer}
-        filterable
-        freezeWhenExpanded
-        FilterComponent={ColumnFilter}
-        ThComponent={TableHeadCell}
-        TableComponent={TableComponent}
-        ExpanderComponent={({ isExpanded }) => (
-          <div className="expander">
-            {isExpanded ? <IndeterminateCheckBox color="primary" /> : <ExpandRowIcon />}
-          </div>
-        )}
-        getPaginationProps={customPagination}
-        SubComponent={
-          expansionTabs &&
-          (({ original: rowData }) => {
-            const { id } = rowData;
-            const expansionTab = expansionTabStates[id] || 0;
-            const expansionItem = expansionTabs[expansionTab];
-            const { title, endpoint, ...restOfProps } = expansionItem;
-            // Each table needs a unique id so that we can keep track of state separately in redux
-            return (
-              <ExpansionContainer>
-                <Tabs
-                  tabs={expansionTabs.map(({ title: tabTitle }, tabIndex) => ({
-                    label: tabTitle,
-                    value: tabIndex,
-                  }))}
-                  activeValue={expansionTab}
-                  onSelectTab={tabValue => onExpandedTabChange(id, tabValue)}
-                />
-                <DataFetchingTable
-                  reduxId={`${reduxId}_${id}_${expansionTab}`}
-                  endpoint={makeSubstitutionsInString(endpoint, rowData)}
-                  key={expansionTab} // Triggers refresh of data.
-                  {...restOfProps}
-                  nestingLevel={nestingLevel + 1}
-                />
-              </ExpansionContainer>
-            );
-          })
-        }
-      />
-    );
-  }
-
-  render() {
-    const { errorMessage } = this.props;
-    return (
-      <>
-        {errorMessage && (
-          <StyledAlert severity="error" variant="standard">
-            {errorMessage}
-          </StyledAlert>
-        )}
-        {this.renderReactTable()}
-        {this.renderConfirmModal()}
-      </>
-    );
-  }
-}
-
-DataFetchingTableComponent.propTypes = {
-  columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  confirmActionMessage: PropTypes.string,
-  errorMessage: PropTypes.string,
-  data: PropTypes.arrayOf(PropTypes.shape({})),
-  expansionTabs: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      endpoint: PropTypes.string,
-      columns: PropTypes.array,
-      expansionTabs: PropTypes.array, // For nested expansions, uses same shape.
-    }),
-  ),
-  expansions: PropTypes.object.isRequired,
-  filters: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  isFetchingData: PropTypes.bool.isRequired,
-  isChangingDataOnServer: PropTypes.bool.isRequired,
-  numberOfPages: PropTypes.number,
-  TableComponent: PropTypes.elementType,
-  onCancelAction: PropTypes.func.isRequired,
-  onConfirmAction: PropTypes.func.isRequired,
-  onExpandedChange: PropTypes.func.isRequired,
-  onFilteredChange: PropTypes.func.isRequired,
-  onPageChange: PropTypes.func.isRequired,
-  onPageSizeChange: PropTypes.func.isRequired,
-  onRefreshData: PropTypes.func.isRequired,
-  onResizedChange: PropTypes.func.isRequired,
-  onSortedChange: PropTypes.func.isRequired,
-  initialiseTable: PropTypes.func.isRequired,
-  pageIndex: PropTypes.number.isRequired,
-  pageSize: PropTypes.number.isRequired,
-  reduxId: PropTypes.string.isRequired,
-  resizedColumns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  sorting: PropTypes.array.isRequired,
-  expansionTabStates: PropTypes.object.isRequired,
-  onExpandedTabChange: PropTypes.func.isRequired,
-  nestingLevel: PropTypes.number,
-  deleteConfig: PropTypes.object,
-};
-
-DataFetchingTableComponent.defaultProps = {
-  confirmActionMessage: null,
-  expansionTabs: null,
-  data: [],
-  errorMessage: '',
-  numberOfPages: 0,
-  nestingLevel: 0,
-  deleteConfig: {},
-  TableComponent: undefined,
-};
-
-const mapStateToProps = (state, { columns, reduxId }) => ({
-  isFetchingData: getIsFetchingData(state, reduxId),
-  columns: columns.map(originalColumn => formatColumnForReactTable(originalColumn, reduxId)),
-  isChangingDataOnServer: getIsChangingDataOnServer(state),
-  ...getTableState(state, reduxId),
-});
-
-const mapDispatchToProps = (dispatch, { reduxId }) => ({
-  dispatch,
-  onCancelAction: () => dispatch(cancelAction(reduxId)),
-  onConfirmAction: () => dispatch(confirmAction(reduxId)),
-  onPageChange: newPageIndex => dispatch(changePage(reduxId, newPageIndex)),
-  onPageSizeChange: (newPageSize, newPageIndex) =>
-    dispatch(changePageSize(reduxId, newPageSize, newPageIndex)),
-  onSortedChange: newSorting => dispatch(changeSorting(reduxId, newSorting)),
-  onExpandedChange: newExpansions => dispatch(changeExpansions(reduxId, newExpansions)),
-  onExpandedTabChange: (rowId, tabValue) => dispatch(changeExpansionsTab(reduxId, rowId, tabValue)),
-  onFilteredChange: newFilters => dispatch(changeFilters(reduxId, newFilters)),
-  onResizedChange: newResized => dispatch(changeResizedColumns(reduxId, newResized)),
-});
-
-const mergeProps = (stateProps, { dispatch, ...dispatchProps }, ownProps) => {
-  const {
-    baseFilter = {},
-    defaultFilters = [],
-    defaultSorting = [],
-    endpoint,
-    columns,
-    reduxId,
-    ...restOfOwnProps
-  } = ownProps;
-  const onRefreshData = () =>
-    dispatch(refreshData(reduxId, endpoint, columns, baseFilter, stateProps));
-  const initialiseTable = (filters = defaultFilters) => {
-    dispatch(changeSorting(reduxId, defaultSorting));
-    dispatch(changeFilters(reduxId, filters)); // will trigger a data fetch afterwards
-  };
-  return {
-    reduxId,
-    ...restOfOwnProps,
-    ...stateProps,
-    ...dispatchProps,
-    onRefreshData,
-    initialiseTable,
-  };
-};
-
-const formatColumnForReactTable = (originalColumn, reduxId) => {
-  const { source, type, actionConfig, ...restOfColumn } = originalColumn;
-  return {
-    id: source,
-    accessor: source.includes('.') ? row => row[source] : source, // react-table doesn't like .'s
-    ...generateConfigForColumnType(type, actionConfig, reduxId), // Add custom Cell/width/etc.
-    ...restOfColumn,
-  };
-};
-
-export const DataFetchingTable = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-  mergeProps,
-)(DataFetchingTableComponent);
diff --git a/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx b/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx
new file mode 100644
index 0000000000..7989c126e0
--- /dev/null
+++ b/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx
@@ -0,0 +1,186 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { TableCell as MuiTableCell } from '@material-ui/core';
+import { Link } from 'react-router-dom';
+
+const BUTTON_COLUMN_WIDTH = '4.5rem';
+
+const Cell = styled(MuiTableCell)`
+  vertical-align: middle;
+  font-size: 0.75rem;
+  padding: 0;
+  max-width: ${({ $isButtonColumn }) => ($isButtonColumn ? BUTTON_COLUMN_WIDTH : '0')};
+  width: ${({ $isButtonColumn }) => ($isButtonColumn ? BUTTON_COLUMN_WIDTH : 'auto')};
+  border: none;
+  height: 1px; // need this to make the cell content fill the height of the cell
+  &:first-child {
+    padding-inline-start: 1.5rem;
+  }
+  &:last-child {
+    padding-inline-end: 1.5rem;
+  }
+`;
+
+const CellContentWrapper = styled.div`
+  padding: ${({ $shouldCenterContent }) => ($shouldCenterContent ? '0' : '0.7rem')};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  text-align: ${({ $shouldCenterContent }) => ($shouldCenterContent ? 'center' : 'left')};
+
+  tr:not(:last-child) & {
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
+  }
+  td:first-child & {
+    padding-inline-start: 0.2rem;
+  }
+
+  line-height: 1.5;
+
+  ${({ $width }) => $width && `width: ${$width}`};
+`;
+
+// Flex does not support ellipsis so we need to have another container to handle the ellipsis
+const CellContentContainer = styled.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+`;
+
+const HeaderCell = styled(Cell)`
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
+  padding-block: 0.7rem;
+  padding-inline: 0.7rem 0;
+  position: initial; // override this because we have 2 sticky header rows so we will apply sticky to the thead element
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  .MuiTableSortLabel-icon {
+    opacity: 1;
+  }
+  // apply a min width to the button column to prevent it from shrinking the filter input too much
+  ${({ $isButtonColumn }) => !$isButtonColumn && `min-width: 9rem;`};
+`;
+
+export const HeaderDisplayCell = ({ children, isButtonColumn, width, ...props }) => {
+  return (
+    <HeaderCell $isButtonColumn={isButtonColumn} $width={width} {...props}>
+      <CellContentContainer> {children}</CellContentContainer>
+    </HeaderCell>
+  );
+};
+
+HeaderDisplayCell.propTypes = {
+  children: PropTypes.node,
+  isButtonColumn: PropTypes.bool,
+  width: PropTypes.string,
+};
+
+HeaderDisplayCell.defaultProps = {
+  isButtonColumn: false,
+  width: null,
+  children: null,
+};
+
+export const TableCell = ({ children, width, isButtonColumn, url }) => {
+  return (
+    <Cell $isButtonColumn={isButtonColumn}>
+      <CellContentWrapper $width={width} $shouldCenterContent={isButtonColumn}>
+        <CellContentContainer to={url} as={url ? CellLink : 'div'}>
+          {children}
+        </CellContentContainer>
+      </CellContentWrapper>
+    </Cell>
+  );
+};
+
+TableCell.propTypes = {
+  children: PropTypes.node.isRequired,
+  width: PropTypes.number,
+  isButtonColumn: PropTypes.bool,
+  url: PropTypes.string,
+};
+
+TableCell.defaultProps = {
+  width: null,
+  isButtonColumn: false,
+  url: null,
+};
+
+const CellLink = styled(Link)`
+  color: inherit;
+  text-decoration: none;
+  &:hover,
+  &:focus {
+    tr:has(&) td > * {
+      background-color: ${({ theme }) => `${theme.palette.primary.main}33`};
+    }
+  }
+`;
+
+const formatDetailUrl = (detailUrl, row) => {
+  if (!detailUrl) {
+    return null;
+  }
+  const regexp = new RegExp(/(?<=:)(.*?)(?=\/|$)/, 'gi');
+  const matches = detailUrl.match(regexp);
+  if (!matches) {
+    return detailUrl;
+  }
+  if (matches.some(match => row[match] === null || row[match] === undefined)) return null;
+  return matches.reduce((url, match) => url.replace(`:${match}`, row[match]), detailUrl);
+};
+
+export const DisplayCell = ({
+  row,
+  children,
+  detailUrl,
+  getHasNestedView,
+  getNestedViewLink,
+  basePath,
+  isButtonColumn,
+  ...props
+}) => {
+  const generateLink = () => {
+    if (isButtonColumn || (!detailUrl && !getNestedViewLink)) return null;
+    if (getHasNestedView && !getHasNestedView(row.original)) return null;
+    if (getNestedViewLink) {
+      return getNestedViewLink(row.original);
+    }
+    const formattedUrl = formatDetailUrl(detailUrl, row.original);
+    if (!formattedUrl) return null;
+    return basePath ? `${basePath}${formattedUrl}` : formattedUrl;
+  };
+  const url = generateLink();
+  return (
+    <TableCell {...props} isButtonColumn={isButtonColumn} url={url}>
+      {children}
+    </TableCell>
+  );
+};
+
+DisplayCell.propTypes = {
+  row: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+  detailUrl: PropTypes.string,
+  getHasNestedView: PropTypes.func,
+  getNestedViewLink: PropTypes.func,
+  isButtonColumn: PropTypes.bool,
+  basePath: PropTypes.string,
+};
+
+DisplayCell.defaultProps = {
+  detailUrl: null,
+  getHasNestedView: null,
+  getNestedViewLink: null,
+  isButtonColumn: false,
+  basePath: '',
+};
diff --git a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
new file mode 100644
index 0000000000..4d736c2fa7
--- /dev/null
+++ b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
@@ -0,0 +1,428 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { connect } from 'react-redux';
+import { useTable, usePagination, useSortBy } from 'react-table';
+import {
+  TableHead,
+  TableContainer as MuiTableContainer,
+  TableRow,
+  TableBody,
+  Table,
+  Typography,
+  TableSortLabel,
+} from '@material-ui/core';
+import { KeyboardArrowDown } from '@material-ui/icons';
+import queryString from 'query-string';
+import PropTypes from 'prop-types';
+import { Alert, ConfirmDeleteModal } from '@tupaia/ui-components';
+import { generateConfigForColumnType } from '../columnTypes';
+import { getIsFetchingData, getTableState } from '../selectors';
+import { getIsChangingDataOnServer } from '../../dataChangeListener';
+import {
+  cancelAction,
+  changeFilters,
+  changePage,
+  changePageSize,
+  changeResizedColumns,
+  changeSorting,
+  confirmAction,
+  refreshData,
+} from '../actions';
+import { FilterCell } from './FilterCell';
+import { Pagination } from './Pagination';
+import { DisplayCell, HeaderDisplayCell } from './Cells';
+
+const ErrorAlert = styled(Alert).attrs({
+  severity: 'error',
+})`
+  margin: 0.5rem;
+`;
+
+const TableContainer = styled(MuiTableContainer)`
+  position: relative;
+  flex: 1;
+  overflow: auto;
+  table {
+    min-width: 45rem;
+  }
+  // Because we want two header rows to be sticky, we need to set the position of the thead to sticky
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: ${({ theme }) => theme.palette.background.paper};
+  }
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+`;
+
+const MessageWrapper = styled.div`
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.5);
+`;
+
+const DataFetchingTableComponent = ({
+  columns,
+  data = [],
+  numberOfPages,
+  pageSize,
+  pageIndex,
+  onPageChange,
+  onPageSizeChange,
+  initialiseTable,
+  nestingLevel,
+  filters,
+  sorting,
+  isChangingDataOnServer,
+  errorMessage,
+  onRefreshData,
+  confirmActionMessage,
+  onConfirmAction,
+  onCancelAction,
+  deleteConfig,
+  onFilteredChange,
+  totalRecords,
+  isFetchingData,
+  onSortedChange,
+  detailUrl,
+  getHasNestedView,
+  endpoint,
+  getNestedViewLink,
+  baseFilter,
+  basePath,
+}) => {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    rows,
+    pageCount,
+    gotoPage,
+    setPageSize,
+    visibleColumns,
+    // Get the state from the instance
+    state: { pageIndex: tablePageIndex, pageSize: tablePageSize, sortBy: tableSorting },
+  } = useTable(
+    {
+      columns,
+      data,
+      initialState: {
+        pageIndex,
+        pageSize,
+        sortBy: sorting,
+        hiddenColumns: columns.filter(column => column.show === false).map(column => column.id),
+      },
+      manualPagination: true,
+      pageCount: numberOfPages,
+      manualSortBy: true,
+    },
+    useSortBy,
+    usePagination,
+  );
+
+  // Listen for changes in pagination and use the state to fetch our new data
+  useEffect(() => {
+    onPageChange(tablePageIndex);
+  }, [tablePageIndex]);
+
+  useEffect(() => {
+    onPageSizeChange(tablePageSize);
+  }, [tablePageSize]);
+
+  useEffect(() => {
+    // If the redux pageIndex changes, update the table pageIndex
+    gotoPage(pageIndex);
+  }, [pageIndex]);
+
+  useEffect(() => {
+    onSortedChange(tableSorting);
+  }, [tableSorting]);
+
+  useEffect(() => {
+    onRefreshData();
+  }, [filters, pageIndex, pageSize, sorting]);
+
+  useEffect(() => {
+    if (!isChangingDataOnServer && !errorMessage) {
+      onRefreshData();
+    }
+  }, [errorMessage, isChangingDataOnServer]);
+
+  // initial render/re-render when endpoint changes
+  useEffect(() => {
+    if (nestingLevel === 0) {
+      // Page-level filters only apply to top-level data tables
+      const params = queryString.parse(location.search); // set filters from query params
+      const parsedFilters = params.filters ? JSON.parse(params.filters) : undefined;
+      initialiseTable(parsedFilters);
+    } else {
+      initialiseTable();
+    }
+  }, [endpoint, baseFilter]);
+
+  const isLoading = isFetchingData || isChangingDataOnServer;
+
+  const displayFilterRow = visibleColumns.some(column => column.filterable !== false);
+
+  return (
+    <Wrapper>
+      {errorMessage && <ErrorAlert>{errorMessage}</ErrorAlert>}
+      {isLoading && (
+        <MessageWrapper>
+          <Typography variant="body2">Loading</Typography>
+        </MessageWrapper>
+      )}
+      {data.length === 0 && !isLoading && (
+        <MessageWrapper>
+          <Typography variant="body2">No data to display</Typography>
+        </MessageWrapper>
+      )}
+      <TableContainer>
+        <Table {...getTableProps()} stickyHeader className="data-fetching-table">
+          <TableHead>
+            {headerGroups.map(({ getHeaderGroupProps, headers }, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <TableRow {...getHeaderGroupProps()} key={`table-header-row-${index}`}>
+                {headers.map(
+                  (
+                    {
+                      getHeaderProps,
+                      render,
+                      isSorted,
+                      isSortedDesc,
+                      getSortByToggleProps,
+                      canSort,
+                      isButtonColumn,
+                    },
+                    i,
+                  ) => {
+                    return (
+                      <HeaderDisplayCell
+                        {...getHeaderProps(getSortByToggleProps())}
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={`header-${i}`}
+                        isButtonColumn={isButtonColumn}
+                        width={visibleColumns[i].colWidth}
+                      >
+                        {render('Header')}
+                        {canSort && (
+                          <TableSortLabel
+                            active={isSorted}
+                            direction={isSortedDesc ? 'asc' : 'desc'}
+                            IconComponent={KeyboardArrowDown}
+                          />
+                        )}
+                      </HeaderDisplayCell>
+                    );
+                  },
+                )}
+              </TableRow>
+            ))}
+            <TableRow>
+              {displayFilterRow &&
+                visibleColumns.map(column => {
+                  return (
+                    <FilterCell
+                      key={column.id}
+                      column={column}
+                      onFilteredChange={onFilteredChange}
+                      filters={filters}
+                      width={column.colWidth}
+                      isButtonColumn={column.isButtonColumn}
+                    />
+                  );
+                })}
+            </TableRow>
+          </TableHead>
+          <TableBody {...getTableBodyProps()}>
+            {rows.map((row, index) => {
+              prepareRow(row);
+              return (
+                // eslint-disable-next-line react/no-array-index-key
+                <TableRow {...row.getRowProps()} key={`table-row-${index}`}>
+                  {row.cells.map(({ getCellProps, render }, i) => {
+                    return (
+                      <DisplayCell
+                        {...getCellProps()}
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={`table-row-${index}-cell-${i}`}
+                        row={row}
+                        detailUrl={visibleColumns[i].isButtonColumn ? '' : detailUrl}
+                        getHasNestedView={getHasNestedView}
+                        width={visibleColumns[i].colWidth}
+                        getNestedViewLink={getNestedViewLink}
+                        isButtonColumn={visibleColumns[i].isButtonColumn}
+                        basePath={basePath}
+                      >
+                        {render('Cell')}
+                      </DisplayCell>
+                    );
+                  })}
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <Pagination
+        page={tablePageIndex}
+        pageCount={pageCount}
+        gotoPage={gotoPage}
+        pageSize={pageSize}
+        setPageSize={setPageSize}
+        totalRecords={totalRecords}
+      />
+
+      <ConfirmDeleteModal
+        isOpen={!!confirmActionMessage}
+        message={confirmActionMessage}
+        onConfirm={onConfirmAction}
+        onCancel={onCancelAction}
+        title={deleteConfig.title}
+        description={deleteConfig.description}
+        cancelButtonText={deleteConfig.cancelButtonText}
+        confirmButtonText={deleteConfig.confirmButtonText}
+      />
+    </Wrapper>
+  );
+};
+
+DataFetchingTableComponent.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  confirmActionMessage: PropTypes.string,
+  errorMessage: PropTypes.string,
+  data: PropTypes.arrayOf(PropTypes.shape({})),
+  filters: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  isFetchingData: PropTypes.bool.isRequired,
+  isChangingDataOnServer: PropTypes.bool.isRequired,
+  numberOfPages: PropTypes.number,
+  TableComponent: PropTypes.elementType,
+  onCancelAction: PropTypes.func.isRequired,
+  onConfirmAction: PropTypes.func.isRequired,
+  onFilteredChange: PropTypes.func.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+  onPageSizeChange: PropTypes.func.isRequired,
+  onRefreshData: PropTypes.func.isRequired,
+  onResizedChange: PropTypes.func.isRequired,
+  onSortedChange: PropTypes.func.isRequired,
+  initialiseTable: PropTypes.func.isRequired,
+  pageIndex: PropTypes.number.isRequired,
+  pageSize: PropTypes.number.isRequired,
+  reduxId: PropTypes.string.isRequired,
+  resizedColumns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  sorting: PropTypes.array.isRequired,
+  nestingLevel: PropTypes.number,
+  deleteConfig: PropTypes.object,
+  actionColumns: PropTypes.arrayOf(PropTypes.shape({})),
+  totalRecords: PropTypes.number,
+  detailUrl: PropTypes.string,
+  getHasNestedView: PropTypes.func,
+  endpoint: PropTypes.string.isRequired,
+  getNestedViewLink: PropTypes.func,
+  baseFilter: PropTypes.object,
+  basePath: PropTypes.string,
+};
+
+DataFetchingTableComponent.defaultProps = {
+  confirmActionMessage: null,
+  data: [],
+  errorMessage: '',
+  numberOfPages: 0,
+  nestingLevel: 0,
+  deleteConfig: {},
+  TableComponent: undefined,
+  actionColumns: [],
+  totalRecords: 0,
+  detailUrl: '',
+  getHasNestedView: null,
+  getNestedViewLink: null,
+  baseFilter: null,
+  basePath: '',
+};
+
+const mapStateToProps = (state, { columns, reduxId, ...ownProps }) => ({
+  isFetchingData: getIsFetchingData(state, reduxId),
+  columns: columns.map(originalColumn => formatColumnForReactTable(originalColumn, reduxId)),
+  isChangingDataOnServer: getIsChangingDataOnServer(state),
+  ...ownProps,
+  ...getTableState(state, reduxId),
+});
+
+const mapDispatchToProps = (dispatch, { reduxId }) => ({
+  dispatch,
+  onCancelAction: () => dispatch(cancelAction(reduxId)),
+  onConfirmAction: () => dispatch(confirmAction(reduxId)),
+  onPageChange: newPageIndex => dispatch(changePage(reduxId, newPageIndex)),
+  onPageSizeChange: (newPageSize, newPageIndex) =>
+    dispatch(changePageSize(reduxId, newPageSize, newPageIndex)),
+  onSortedChange: newSorting => dispatch(changeSorting(reduxId, newSorting)),
+  onFilteredChange: newFilters => dispatch(changeFilters(reduxId, newFilters)),
+  onResizedChange: newResized => dispatch(changeResizedColumns(reduxId, newResized)),
+});
+
+const mergeProps = (stateProps, { dispatch, ...dispatchProps }, ownProps) => {
+  const {
+    baseFilter = {},
+    defaultFilters = [],
+    defaultSorting = [],
+    endpoint,
+    columns,
+    reduxId,
+    ...restOfOwnProps
+  } = ownProps;
+  const onRefreshData = () =>
+    dispatch(refreshData(reduxId, endpoint, columns, baseFilter, stateProps));
+  const initialiseTable = (filters = defaultFilters) => {
+    dispatch(changeSorting(reduxId, defaultSorting));
+    dispatch(changeFilters(reduxId, filters)); // will trigger a data fetch afterwards
+  };
+  return {
+    reduxId,
+    ...restOfOwnProps,
+    ...stateProps,
+    ...dispatchProps,
+    onRefreshData,
+    initialiseTable,
+  };
+};
+
+const formatColumnForReactTable = (originalColumn, reduxId) => {
+  const { source, type, actionConfig, filterable, ...restOfColumn } = originalColumn;
+  const id = source || type;
+  return {
+    id,
+    accessor: id?.includes('.') ? row => row[source] : id, // react-table doesn't like .'s
+    actionConfig,
+    reduxId,
+    type,
+    disableSortBy: !source, // disable action columns from being sortable
+    filterable: filterable !== false,
+    ...generateConfigForColumnType(type, actionConfig, reduxId), // Add custom Cell/width/etc.
+    ...restOfColumn,
+  };
+};
+
+export const DataFetchingTable = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps,
+)(DataFetchingTableComponent);
diff --git a/packages/admin-panel/src/table/DataFetchingTable/FilterCell.jsx b/packages/admin-panel/src/table/DataFetchingTable/FilterCell.jsx
new file mode 100644
index 0000000000..0a3d913a96
--- /dev/null
+++ b/packages/admin-panel/src/table/DataFetchingTable/FilterCell.jsx
@@ -0,0 +1,87 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { DefaultFilter } from '../columnTypes/columnFilters';
+import { HeaderDisplayCell } from './Cells';
+
+const FilterWrapper = styled.div`
+  .MuiFormControl-root {
+    margin-block-end: 0;
+  }
+  .MuiInputBase-input,
+  .MuiOutlinedInput-root {
+    font-size: inherit;
+  }
+  .MuiSvgIcon-root {
+    font-size: 1.25rem;
+  }
+  .MuiInputBase-input {
+    padding-block: 0.6rem;
+    padding-inline: 0.6rem;
+    line-height: 1.2;
+  }
+  .MuiAutocomplete-popperDisablePortal,
+  .MuiPaper-root,
+  .MuiAutocomplete-option,
+  .MuiAutocomplete-popperDisablePortal,
+  .MuiPaper-root,
+  .MuiAutocomplete-option {
+    font-size: inherit;
+  }
+  .MuiAutocomplete-listbox {
+    padding-block: 0.3rem;
+  }
+  .MuiAutocomplete-option {
+    padding-block: 0.5rem;
+  }
+`;
+
+export const FilterCell = ({ column, filters, onFilteredChange, width, isButtonColumn }) => {
+  const { id, Filter } = column;
+  const existingFilter = filters?.find(f => f.id === id);
+  const handleUpdate = value => {
+    const updatedFilters = existingFilter
+      ? filters.map(f => (f.id === id ? { ...f, value } : f))
+      : [...filters, { id, value }];
+
+    onFilteredChange(updatedFilters);
+  };
+  if (!column.filterable) return <HeaderDisplayCell isButtonColumn={isButtonColumn} />;
+  return (
+    <HeaderDisplayCell width={width}>
+      <FilterWrapper>
+        {Filter ? (
+          <Filter column={column} filter={existingFilter} onChange={handleUpdate} />
+        ) : (
+          <DefaultFilter
+            value={existingFilter?.value || ''}
+            onChange={e => handleUpdate(e.target.value)}
+            aria-label={`Search ${column.Header}`}
+          />
+        )}
+      </FilterWrapper>
+    </HeaderDisplayCell>
+  );
+};
+
+FilterCell.propTypes = {
+  filters: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  onFilteredChange: PropTypes.func.isRequired,
+  column: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    Header: PropTypes.string.isRequired,
+    Filter: PropTypes.func,
+    filterable: PropTypes.bool,
+  }).isRequired,
+  width: PropTypes.number,
+  isButtonColumn: PropTypes.bool,
+};
+
+FilterCell.defaultProps = {
+  width: null,
+  isButtonColumn: false,
+};
diff --git a/packages/admin-panel/src/table/DataFetchingTable/Pagination.jsx b/packages/admin-panel/src/table/DataFetchingTable/Pagination.jsx
new file mode 100644
index 0000000000..815a392f28
--- /dev/null
+++ b/packages/admin-panel/src/table/DataFetchingTable/Pagination.jsx
@@ -0,0 +1,179 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IconButton, Input, Typography } from '@material-ui/core';
+import styled from 'styled-components';
+import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
+import { Select } from '@tupaia/ui-components';
+
+const Wrapper = styled.div`
+  font-size: 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border-top: 1px solid ${({ theme }) => theme.palette.grey['400']};
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
+  label,
+  p,
+  .MuiInputBase-input {
+    font-size: 0.75rem;
+  }
+`;
+
+const ActionsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  :first-child {
+    padding-inline-start: 1rem;
+  }
+`;
+const Button = styled(IconButton)`
+  border: 1px solid ${({ theme }) => theme.palette.grey['400']};
+  padding: 0.4rem;
+  .MuiSvgIcon-root {
+    font-size: 1.2rem;
+  }
+  & + & {
+    margin-left: 0.7rem;
+  }
+`;
+
+const ManualPageInputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-inline-start: 0.5rem;
+  margin-inline-end: 0.8rem;
+`;
+
+const ManualPageInput = styled(Input)`
+  border: 1px solid ${({ theme }) => theme.palette.grey['400']};
+  border-radius: 4px;
+  padding-block: 0.5rem;
+  padding-inline: 0.8rem 0.2rem;
+  margin-inline: 0.5rem;
+  font-size: 0.75rem;
+  .MuiInputBase-input {
+    text-align: center;
+    padding-block: 0;
+    height: auto;
+  }
+`;
+
+const Text = styled(Typography)`
+  font-size: 0.75rem;
+`;
+
+const RowsSelect = styled(Select)`
+  display: flex;
+  flex-direction: row;
+  margin-block-end: 0;
+  margin-inline-end: 1.2rem;
+  width: 12rem;
+  .MuiSelect-root {
+    padding-block: 0.5rem;
+    padding-inline: 0.8rem 0.2rem;
+  }
+`;
+
+const PageSelectComponent = ({ onChangePage, page, pageCount }) => {
+  const pageDisplay = page + 1;
+  return (
+    <ActionsWrapper>
+      <ManualPageInputContainer>
+        <Text id="page-label" htmlFor="page" component="label">
+          Page
+        </Text>
+        <ManualPageInput
+          type="number"
+          value={pageDisplay}
+          onChange={e => {
+            const newPage = e.target.value ? Number(e.target.value) - 1 : '';
+            onChangePage(newPage);
+          }}
+          inputProps={{ min: 1, max: pageCount }}
+          aria-describedby="page-count"
+          id="page"
+          disableUnderline
+        />
+        <Text id="page-count">of {pageCount}</Text>
+      </ManualPageInputContainer>
+      <Button
+        onClick={() => onChangePage(page - 1)}
+        disabled={page === 0}
+        aria-label="Previous page"
+      >
+        <KeyboardArrowLeft />
+      </Button>
+      <Button
+        onClick={() => onChangePage(page + 1)}
+        disabled={page === pageCount - 1}
+        aria-label="Next page"
+      >
+        <KeyboardArrowRight />
+      </Button>
+    </ActionsWrapper>
+  );
+};
+
+PageSelectComponent.propTypes = {
+  onChangePage: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
+  pageCount: PropTypes.number.isRequired,
+};
+
+const RowsSelectComponent = ({ pageSize, setPageSize }) => {
+  const pageSizes = [5, 10, 20, 25, 50, 100];
+  return (
+    <ActionsWrapper>
+      <RowsSelect
+        value={pageSize}
+        onChange={event => setPageSize(Number(event.target.value))}
+        options={pageSizes.map(size => ({ label: `Rows per page: ${size}`, value: size }))}
+        variant="standard"
+      />
+    </ActionsWrapper>
+  );
+};
+
+RowsSelectComponent.propTypes = {
+  pageSize: PropTypes.number.isRequired,
+  setPageSize: PropTypes.func.isRequired,
+};
+
+export const Pagination = ({ page, pageCount, gotoPage, pageSize, setPageSize, totalRecords }) => {
+  if (!totalRecords) return null;
+  const currentDisplayStart = page * pageSize + 1;
+  const currentDisplayEnd = Math.min((page + 1) * pageSize, totalRecords);
+
+  const handleChangePage = newPage => {
+    gotoPage(newPage);
+  };
+  return (
+    <Wrapper>
+      <ActionsWrapper>
+        <Text>
+          {currentDisplayStart} - {currentDisplayEnd} of {totalRecords} entries
+        </Text>
+      </ActionsWrapper>
+      <ActionsWrapper>
+        <RowsSelectComponent pageSize={pageSize} setPageSize={setPageSize} />
+        <PageSelectComponent onChangePage={handleChangePage} page={page} pageCount={pageCount} />
+      </ActionsWrapper>
+    </Wrapper>
+  );
+};
+
+Pagination.propTypes = {
+  page: PropTypes.number.isRequired,
+  pageCount: PropTypes.number.isRequired,
+  gotoPage: PropTypes.func.isRequired,
+  pageSize: PropTypes.number.isRequired,
+  setPageSize: PropTypes.func.isRequired,
+  totalRecords: PropTypes.number.isRequired,
+};
diff --git a/packages/admin-panel/src/table/DataFetchingTable/index.js b/packages/admin-panel/src/table/DataFetchingTable/index.js
new file mode 100644
index 0000000000..69432ca154
--- /dev/null
+++ b/packages/admin-panel/src/table/DataFetchingTable/index.js
@@ -0,0 +1 @@
+export { DataFetchingTable } from './DataFetchingTable';
diff --git a/packages/admin-panel/src/table/StyledReactTable.jsx b/packages/admin-panel/src/table/StyledReactTable.jsx
deleted file mode 100644
index 2104d02217..0000000000
--- a/packages/admin-panel/src/table/StyledReactTable.jsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
- */
-
-import styled from 'styled-components';
-import ReactTable from 'react-table-v6';
-import * as COLORS from '../theme/colors';
-
-export const StyledReactTable = styled(ReactTable)`
-  margin-block: 2.5rem;
-  border: none;
-
-  .rt-tbody .rt-tr .rt-td,
-  .rt-thead.-header .rt-th,
-  .rt-thead.-filters .rt-th {
-    border-right: none;
-  }
-
-  // Header
-  .rt-thead.-header {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    background: white;
-    border: 1px solid ${COLORS.GREY_DE};
-    box-shadow: none;
-
-    .rt-th {
-      font-weight: 500;
-      font-size: 1rem;
-      color: ${COLORS.TEXT_DARKGREY};
-      text-align: left;
-      padding: 0.375rem;
-    }
-  }
-
-  // Filters
-  .rt-thead.-filters {
-    background: #f1f1f1;
-    border-bottom: 1px solid ${COLORS.GREY_DE};
-    border-left: 1px solid ${COLORS.GREY_DE};
-    border-right: 1px solid ${COLORS.GREY_DE};
-
-    .rt-th {
-      text-align: left;
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-
-      .MuiFormControl-root {
-        margin-bottom: 0;
-      }
-
-      .MuiInputBase-input {
-        height: auto;
-        border: none;
-        font-size: 1rem;
-        line-height: 1.2rem;
-        padding: 1rem;
-      }
-    }
-  }
-
-  // Body
-  .rt-tbody {
-    background: white;
-    border-left: 1px solid ${COLORS.GREY_DE};
-    border-right: 1px solid ${COLORS.GREY_DE};
-    border-bottom: 1px solid ${COLORS.GREY_DE};
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-
-  // Row
-  .rt-tbody .rt-tr-group {
-    border-bottom: 1px solid ${COLORS.GREY_DE};
-  }
-
-  .rt-tr {
-    padding-inline-start: 0.625rem;
-    padding-inline-end: 1.56rem;
-    align-items: center;
-
-    .rt-td {
-      font-size: 1rem;
-      color: ${COLORS.TEXT_MIDGREY};
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-    }
-
-    .rt-expandable {
-      position: relative;
-      top: 2px;
-    }
-  }
-
-  // Pagination
-  .-pagination {
-    box-shadow: none;
-    border: none;
-    padding: 1.25rem 0 0;
-    align-items: center;
-
-    .MuiButtonBase-root:not(:hover) {
-      background: ${COLORS.GREY_F1};
-    }
-
-    .-previous {
-      order: 2;
-      flex: 0;
-      margin-left: 10px;
-    }
-
-    .-next {
-      order: 3;
-      flex: 0;
-      margin-left: 10px;
-    }
-
-    .-center {
-      order: 1;
-      flex-direction: row-reverse;
-      justify-content: space-between;
-
-      .-pageInfo {
-        font-size: 14px;
-        line-height: 16px;
-        color: ${COLORS.TEXT_MIDGREY};
-      }
-
-      input {
-        color: ${COLORS.TEXT_DARKGREY};
-      }
-
-      .-pageSizeOptions {
-        margin: 0;
-        text-align: left;
-
-        .MuiInputBase-root {
-          background: ${COLORS.GREY_F1};
-          font-weight: 500;
-        }
-
-        .MuiSelect-root {
-          font-size: 14px;
-          line-height: 16px;
-          color: ${COLORS.TEXT_MIDGREY};
-          padding: 12px 44px 12px 15px;
-        }
-
-        .MuiOutlinedInput-notchedOutline {
-          border: none;
-        }
-
-        .MuiFormControl-root {
-          margin: 0;
-        }
-      }
-    }
-  }
-`;
diff --git a/packages/admin-panel/src/table/actions.js b/packages/admin-panel/src/table/actions.js
index 9c09de5b7d..39a8ee0ed1 100644
--- a/packages/admin-panel/src/table/actions.js
+++ b/packages/admin-panel/src/table/actions.js
@@ -90,7 +90,7 @@ const refreshDataWithDebounce = debounce(
     const sortString = JSON.stringify(sortObjects);
 
     // Set up columns
-    const columnSources = columns.map(column => column.source);
+    const columnSources = columns.map(column => column.source).filter(source => source);
     const columnsString = JSON.stringify(columnSources);
 
     // Prepare for request
@@ -111,6 +111,7 @@ const refreshDataWithDebounce = debounce(
       };
       const response = await api.get(endpoint, queryParameters);
       const linkHeader = parseLinkHeader(response.headers.get('Link'));
+      const totalRecords = parseInt(response.headers.get('X-Total-Count'), 10);
       const lastPageNumber = parseInt(linkHeader.last.page, 10);
       dispatch({
         type: DATA_FETCH_SUCCESS,
@@ -118,6 +119,7 @@ const refreshDataWithDebounce = debounce(
         data: response.body,
         numberOfPages: lastPageNumber,
         fetchId,
+        totalRecords,
       });
     } catch (error) {
       dispatch({
diff --git a/packages/admin-panel/src/table/columnTypes/BulkEditButton.jsx b/packages/admin-panel/src/table/columnTypes/BulkEditButton.jsx
index 7d17c35511..c2e8a86628 100644
--- a/packages/admin-panel/src/table/columnTypes/BulkEditButton.jsx
+++ b/packages/admin-panel/src/table/columnTypes/BulkEditButton.jsx
@@ -7,17 +7,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import EditIcon from '@material-ui/icons/Edit';
-import { IconButton } from '../../widgets';
 import { openBulkEditModal } from '../../editor/actions';
+import { ColumnActionButton } from './ColumnActionButton';
 
-export const BulkEditButtonComponent = ({ dispatch, value: recordId, actionConfig, row }) => {
+export const BulkEditButtonComponent = ({ dispatch, actionConfig, row }) => {
+  const recordId = row.id;
   return (
-    <IconButton
+    <ColumnActionButton
       id="page-button-bulk-edit"
-      onClick={() => dispatch(openBulkEditModal(actionConfig, recordId, row))}
+      title="Bulk edit"
+      onClick={() => dispatch(openBulkEditModal(actionConfig, recordId, row.original))}
     >
       <EditIcon />
-    </IconButton>
+    </ColumnActionButton>
   );
 };
 
@@ -29,7 +31,6 @@ BulkEditButtonComponent.propTypes = {
   }).isRequired,
   dispatch: PropTypes.func.isRequired,
   row: PropTypes.object.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 };
 
 export const BulkEditButton = connect()(BulkEditButtonComponent);
diff --git a/packages/admin-panel/src/table/columnTypes/ColumnActionButton.jsx b/packages/admin-panel/src/table/columnTypes/ColumnActionButton.jsx
new file mode 100644
index 0000000000..b2367c6966
--- /dev/null
+++ b/packages/admin-panel/src/table/columnTypes/ColumnActionButton.jsx
@@ -0,0 +1,13 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { IconButton } from '@material-ui/core';
+import styled from 'styled-components';
+
+export const ColumnActionButton = styled(IconButton).attrs({
+  color: 'primary',
+})`
+  padding: 0.3rem;
+`;
diff --git a/packages/admin-panel/src/table/columnTypes/DeleteButton.jsx b/packages/admin-panel/src/table/columnTypes/DeleteButton.jsx
index d8bc219111..594bcfba53 100644
--- a/packages/admin-panel/src/table/columnTypes/DeleteButton.jsx
+++ b/packages/admin-panel/src/table/columnTypes/DeleteButton.jsx
@@ -7,20 +7,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import DeleteIcon from '@material-ui/icons/Delete';
-import { IconButton } from '../../widgets';
 import { requestDeleteRecord } from '../actions';
+import { ColumnActionButton } from './ColumnActionButton';
 
-const DeleteButtonComponent = ({ dispatch, value, actionConfig, reduxId }) => (
-  <IconButton
+const DeleteButtonComponent = ({ dispatch, actionConfig, reduxId, row }) => (
+  <ColumnActionButton
     className="delete-button"
+    title="Delete record"
     onClick={() =>
       dispatch(
-        requestDeleteRecord(reduxId, actionConfig.endpoint, value, actionConfig.confirmMessage),
+        requestDeleteRecord(
+          reduxId,
+          actionConfig.endpoint,
+          row.original.id,
+          actionConfig.confirmMessage,
+        ),
       )
     }
   >
     <DeleteIcon />
-  </IconButton>
+  </ColumnActionButton>
 );
 
 DeleteButtonComponent.propTypes = {
@@ -29,8 +35,8 @@ DeleteButtonComponent.propTypes = {
     confirmMessage: PropTypes.string,
   }).isRequired,
   dispatch: PropTypes.func.isRequired,
-  value: PropTypes.string.isRequired,
   reduxId: PropTypes.string.isRequired,
+  row: PropTypes.object.isRequired,
 };
 
 export const DeleteButton = connect()(DeleteButtonComponent);
diff --git a/packages/admin-panel/src/table/columnTypes/EditButton.jsx b/packages/admin-panel/src/table/columnTypes/EditButton.jsx
index 372dc9e430..def35eeade 100644
--- a/packages/admin-panel/src/table/columnTypes/EditButton.jsx
+++ b/packages/admin-panel/src/table/columnTypes/EditButton.jsx
@@ -7,14 +7,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import EditIcon from '@material-ui/icons/Edit';
-import { IconButton } from '../../widgets';
 import { openEditModal } from '../../editor/actions';
 import { fetchUsedBy } from '../../usedBy';
+import { ColumnActionButton } from './ColumnActionButton';
 
 export const EditButtonComponent = ({ onEdit }) => (
-  <IconButton className="edit-button" onClick={onEdit}>
+  <ColumnActionButton className="edit-button" onClick={onEdit} title="Edit record">
     <EditIcon />
-  </IconButton>
+  </ColumnActionButton>
 );
 
 EditButtonComponent.propTypes = {
@@ -27,7 +27,7 @@ EditButtonComponent.defaultProps = {
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
   onEdit: () => {
-    const recordId = ownProps.value;
+    const recordId = ownProps.row.original.id;
     dispatch(openEditModal({ ...ownProps.actionConfig, isLoading: true }, recordId));
     if (ownProps.actionConfig?.displayUsedBy) {
       dispatch(fetchUsedBy(ownProps.actionConfig.recordType, recordId));
diff --git a/packages/admin-panel/src/table/columnTypes/QrCodeButton.jsx b/packages/admin-panel/src/table/columnTypes/QrCodeButton.jsx
index ff140bb682..6461cba210 100644
--- a/packages/admin-panel/src/table/columnTypes/QrCodeButton.jsx
+++ b/packages/admin-panel/src/table/columnTypes/QrCodeButton.jsx
@@ -6,25 +6,33 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import { openQrCodeModal } from '../../qrCode';
-import { IconButton } from '../../widgets';
+import { ColumnActionButton } from './ColumnActionButton';
 
-const LittleQrCodeIcon = () => (
-  <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g id="Vector">
-      <path
-        id="Vector_2"
-        d="M19.3333 29H16.1111V25.7778H19.3333V29ZM16.1111 17.7222H12.8889V25.7778H16.1111V17.7222ZM29 14.5H25.7778V20.9444H29V14.5ZM25.7778 11.2778H22.5556V14.5H25.7778V11.2778ZM6.44444 14.5H3.22222V17.7222H6.44444V14.5ZM3.22222 11.2778H0V14.5H3.22222V11.2778ZM14.5 3.22222H17.7222V0H14.5V3.22222ZM2.41667 2.41667V7.25H7.25V2.41667H2.41667ZM9.66667 9.66667H0V0H9.66667V9.66667ZM2.41667 21.75V26.5833H7.25V21.75H2.41667ZM9.66667 29H0V19.3333H9.66667V29ZM21.75 2.41667V7.25H26.5833V2.41667H21.75ZM29 9.66667H19.3333V0H29V9.66667ZM25.7778 25.7778V20.9444H19.3333V24.1667H22.5556V29H29V25.7778H25.7778ZM22.5556 14.5H16.1111V17.7222H22.5556V14.5ZM16.1111 11.2778H6.44444V14.5H9.66667V17.7222H12.8889V14.5H16.1111V11.2778ZM17.7222 9.66667V6.44444H14.5V3.22222H11.2778V9.66667H17.7222ZM6.04167 3.625H3.625V6.04167H6.04167V3.625ZM6.04167 22.9583H3.625V25.375H6.04167V22.9583ZM25.375 3.625H22.9583V6.04167H25.375V3.625Z"
-        fill="#434D54"
-      />
-    </g>
-  </svg>
-);
+const SVG = styled.svg`
+  fill: ${({ theme }) => theme.palette.text.primary};
+  height: 1.3rem;
+  width: 1.3rem;
+`;
+
+const LittleQrCodeIcon = () => {
+  return (
+    <SVG width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="Vector">
+        <path
+          id="Vector_2"
+          d="M19.3333 29H16.1111V25.7778H19.3333V29ZM16.1111 17.7222H12.8889V25.7778H16.1111V17.7222ZM29 14.5H25.7778V20.9444H29V14.5ZM25.7778 11.2778H22.5556V14.5H25.7778V11.2778ZM6.44444 14.5H3.22222V17.7222H6.44444V14.5ZM3.22222 11.2778H0V14.5H3.22222V11.2778ZM14.5 3.22222H17.7222V0H14.5V3.22222ZM2.41667 2.41667V7.25H7.25V2.41667H2.41667ZM9.66667 9.66667H0V0H9.66667V9.66667ZM2.41667 21.75V26.5833H7.25V21.75H2.41667ZM9.66667 29H0V19.3333H9.66667V29ZM21.75 2.41667V7.25H26.5833V2.41667H21.75ZM29 9.66667H19.3333V0H29V9.66667ZM25.7778 25.7778V20.9444H19.3333V24.1667H22.5556V29H29V25.7778H25.7778ZM22.5556 14.5H16.1111V17.7222H22.5556V14.5ZM16.1111 11.2778H6.44444V14.5H9.66667V17.7222H12.8889V14.5H16.1111V11.2778ZM17.7222 9.66667V6.44444H14.5V3.22222H11.2778V9.66667H17.7222ZM6.04167 3.625H3.625V6.04167H6.04167V3.625ZM6.04167 22.9583H3.625V25.375H6.04167V22.9583ZM25.375 3.625H22.9583V6.04167H25.375V3.625Z"
+        />
+      </g>
+    </SVG>
+  );
+};
 
 export const QrCodeButtonComponent = ({ openModal }) => (
-  <IconButton className="edit-button" onClick={openModal}>
+  <ColumnActionButton className="edit-button" onClick={openModal}>
     <LittleQrCodeIcon />
-  </IconButton>
+  </ColumnActionButton>
 );
 
 QrCodeButtonComponent.propTypes = {
@@ -40,8 +48,8 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
         'QR code button misconfigured. Must specify qrCodeContentsKey and humanReadableIdKey',
       );
     }
-    const qrCodeContents = row[qrCodeContentsKey];
-    const humanReadableId = row[humanReadableIdKey];
+    const qrCodeContents = row.original[qrCodeContentsKey];
+    const humanReadableId = row.original[humanReadableIdKey];
     dispatch(openQrCodeModal(`${qrCodePrefix}${qrCodeContents}`, humanReadableId));
   },
 });
diff --git a/packages/admin-panel/src/table/columnTypes/ResubmitSurveyResponseButton.jsx b/packages/admin-panel/src/table/columnTypes/ResubmitSurveyResponseButton.jsx
index 186795757b..727bdbda69 100644
--- a/packages/admin-panel/src/table/columnTypes/ResubmitSurveyResponseButton.jsx
+++ b/packages/admin-panel/src/table/columnTypes/ResubmitSurveyResponseButton.jsx
@@ -7,14 +7,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import EditIcon from '@material-ui/icons/Edit';
-import { IconButton } from '../../widgets';
 import { openResubmitSurveyResponseModal } from '../../surveyResponse/actions';
+import { ColumnActionButton } from './ColumnActionButton';
 
 export const ResubmitSurveyResponseButtonComponent = ({ openModal }) => {
   return (
-    <IconButton onClick={openModal}>
+    <ColumnActionButton onClick={openModal}>
       <EditIcon />
-    </IconButton>
+    </ColumnActionButton>
   );
 };
 
@@ -22,12 +22,14 @@ ResubmitSurveyResponseButtonComponent.propTypes = {
   openModal: PropTypes.func.isRequired,
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  openModal: () => {
-    const recordId = ownProps.value;
-    dispatch(openResubmitSurveyResponseModal(recordId));
-  },
-});
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    openModal: () => {
+      const recordId = ownProps.row.original.id;
+      dispatch(openResubmitSurveyResponseModal(recordId));
+    },
+  };
+};
 
 export const ResubmitSurveyResponseButton = connect(
   null,
diff --git a/packages/admin-panel/src/table/columnTypes/TestDatabaseConnectionButton.jsx b/packages/admin-panel/src/table/columnTypes/TestDatabaseConnectionButton.jsx
index 05f82af0a6..73d80498b7 100644
--- a/packages/admin-panel/src/table/columnTypes/TestDatabaseConnectionButton.jsx
+++ b/packages/admin-panel/src/table/columnTypes/TestDatabaseConnectionButton.jsx
@@ -11,8 +11,8 @@ import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import { Tooltip } from '@material-ui/core';
 import styled from 'styled-components';
 import { useApiContext } from '../../utilities/ApiProvider';
-import { IconButton } from '../../widgets';
 import { makeSubstitutionsInString } from '../../utilities';
+import { ColumnActionButton } from './ColumnActionButton';
 
 const BUTTON_STATES = {
   IDLE: 'idle',
@@ -26,6 +26,9 @@ const testDatabaseConnectionEndpointTemplate = 'externalDatabaseConnections/{id}
 const ButtonContainer = styled.div`
   display: flex;
   align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  flex: 1;
 `;
 
 const SuccessIcon = styled(CheckCircleIcon)`
@@ -38,10 +41,6 @@ const FailedIcon = styled(ErrorIcon)`
   color: ${props => props.theme.palette.error.main};
 `;
 
-const TestConnectionIconButton = styled(IconButton)`
-  display: flex;
-`;
-
 export const TestDatabaseConnectionButton = ({ row }) => {
   const api = useApiContext();
   const [buttonState, setButtonState] = useState(BUTTON_STATES.IDLE);
@@ -49,7 +48,7 @@ export const TestDatabaseConnectionButton = ({ row }) => {
 
   const testConnectionEndpoint = makeSubstitutionsInString(
     testDatabaseConnectionEndpointTemplate,
-    row,
+    row.original,
   );
 
   const testConnection = async () => {
@@ -66,9 +65,9 @@ export const TestDatabaseConnectionButton = ({ row }) => {
 
   const TestConnectionButton = ({ disabled = false }) => (
     <Tooltip title="Click to test database connection">
-      <TestConnectionIconButton disabled={disabled} onClick={testConnection}>
+      <ColumnActionButton disabled={disabled} onClick={testConnection}>
         <NetworkCheck />
-      </TestConnectionIconButton>
+      </ColumnActionButton>
     </Tooltip>
   );
 
diff --git a/packages/admin-panel/src/table/columnTypes/Tooltip.jsx b/packages/admin-panel/src/table/columnTypes/Tooltip.jsx
index d711631649..926d9ea5e6 100644
--- a/packages/admin-panel/src/table/columnTypes/Tooltip.jsx
+++ b/packages/admin-panel/src/table/columnTypes/Tooltip.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Tooltip as TooltipComponent } from '@tupaia/ui-components';
 import styled from 'styled-components';
 
-const Cell = styled.div`
+const Content = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -16,7 +16,7 @@ const Cell = styled.div`
 
 export const Tooltip = ({ value }) => (
   <TooltipComponent title={value || ''} placement="top-start">
-    <Cell>{value}</Cell>
+    <Content>{value}</Content>
   </TooltipComponent>
 );
 
@@ -30,7 +30,7 @@ Tooltip.defaultProps = {
 
 export const JSONTooltip = ({ value }) => (
   <TooltipComponent title={<pre>{JSON.stringify(value, null, 1)}</pre>}>
-    <Cell>{JSON.stringify(value)}</Cell>
+    <Content>{JSON.stringify(value)}</Content>
   </TooltipComponent>
 );
 
diff --git a/packages/admin-panel/src/table/columnTypes/columnFilters.jsx b/packages/admin-panel/src/table/columnTypes/columnFilters.jsx
index f47cc69086..bdd28116d8 100644
--- a/packages/admin-panel/src/table/columnTypes/columnFilters.jsx
+++ b/packages/admin-panel/src/table/columnTypes/columnFilters.jsx
@@ -7,15 +7,41 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import MuiChip from '@material-ui/core/Chip';
-import { Autocomplete, Select } from '@tupaia/ui-components';
+import { Autocomplete, Select, TextField } from '@tupaia/ui-components';
+import { Search } from '@material-ui/icons';
+
+export const DefaultFilter = styled(TextField).attrs(props => ({
+  InputProps: {
+    ...props.InputProps,
+    startAdornment: <Search />,
+  },
+  placeholder: 'Search...',
+}))`
+  margin-block-end: 0;
+  font-size: inherit;
+  width: 100%;
+  min-width: 6rem;
+  max-width: 100%;
+  // The following is overriding the padding in ui-components to make sure all filters match styling
+  .MuiInputBase-input,
+  .MuiInputBase-input.MuiAutocomplete-input.MuiInputBase-inputAdornedEnd {
+    padding-block: 0.6rem;
+    padding-inline: 0.2rem;
+  }
+  .MuiInputBase-root,
+  .MuiAutocomplete-inputRoot.MuiInputBase-adornedEnd.MuiOutlinedInput-adornedEnd {
+    padding-inline-start: 0.3rem;
+  }
+`;
+
+const StyledSelect = styled(Select)``;
 
 /*
  * Makes boolean fields work with the database filter
- * https://github.com/tannerlinsley/react-table/tree/v6/examples/custom-filtering
  */
 
 export const BooleanSelectFilter = ({ filter, onChange, column }) => (
-  <Select
+  <StyledSelect
     id={column.id}
     options={[
       { label: 'Show All', value: '' },
@@ -44,7 +70,7 @@ BooleanSelectFilter.defaultProps = {
 };
 
 export const VerifiedFilter = ({ filter, onChange, column }) => (
-  <Select
+  <StyledSelect
     id={column.id}
     options={[
       { label: 'Show All', value: '' },
@@ -79,10 +105,6 @@ const Chip = styled(MuiChip)`
   }
 `;
 
-const StyledAutocomplete = styled(Autocomplete)`
-  flex: 1;
-`;
-
 export const ArrayFilter = React.memo(({ onChange }) => {
   const [searchTerm, setSearchTerm] = React.useState('');
   const [selection, setSelection] = React.useState([]);
@@ -101,14 +123,13 @@ export const ArrayFilter = React.memo(({ onChange }) => {
   };
 
   return (
-    <StyledAutocomplete
+    <Autocomplete
       value={selection || []}
       inputValue={searchTerm}
       onInputChange={(event, newSearchTerm) => setSearchTerm(newSearchTerm)}
       options={searchTerm.length > 0 ? [searchTerm] : []}
       getOptionSelected={(option, selected) => option === selected}
       onChange={onChangeSelection}
-      placeholder={selection.length === 0 ? 'Enter values' : ''}
       muiProps={{
         freeSolo: true,
         multiple: true,
@@ -119,6 +140,8 @@ export const ArrayFilter = React.memo(({ onChange }) => {
           values.map((option, index) => (
             <Chip color="primary" label={option} {...getTagProps({ index })} />
           )),
+        renderInput: params => <DefaultFilter {...params} />,
+        disablePortal: true,
       }}
     />
   );
diff --git a/packages/admin-panel/src/table/columnTypes/generateConfigForColumnType.jsx b/packages/admin-panel/src/table/columnTypes/generateConfigForColumnType.jsx
index 2044feb66c..62450aac4e 100644
--- a/packages/admin-panel/src/table/columnTypes/generateConfigForColumnType.jsx
+++ b/packages/admin-panel/src/table/columnTypes/generateConfigForColumnType.jsx
@@ -16,15 +16,13 @@ import { TestDatabaseConnectionButton } from './TestDatabaseConnectionButton';
 import { QrCodeButton } from './QrCodeButton';
 import { ResubmitSurveyResponseButton } from './ResubmitSurveyResponseButton';
 
-const generateCustomCell = (CustomCell, actionConfig, reduxId) => props => (
-  <CustomCell actionConfig={actionConfig} reduxId={reduxId} {...props} />
-);
-
-const BUTTON_WIDTH = 60;
+const generateCustomCell = (CustomCell, actionConfig, reduxId) => props =>
+  <CustomCell actionConfig={actionConfig} reduxId={reduxId} {...props} />;
 
 const BUTTON_COLUMN_OPTIONS = {
   filterable: false,
-  sortable: false,
+  disableSortBy: true,
+  isButtonColumn: true,
 };
 
 const CUSTOM_CELL_COMPONENTS = {
@@ -49,6 +47,8 @@ const BUTTON_COLUMN_TYPES = [
   'logs',
   'resubmitSurveyResponse',
   'qrCode',
+  'testDatabaseConnection',
+  'bulkEdit',
 ];
 
 export const generateConfigForColumnType = (type, actionConfig, reduxId) => {
@@ -63,7 +63,6 @@ export const generateConfigForColumnType = (type, actionConfig, reduxId) => {
     config = {
       ...config,
       ...BUTTON_COLUMN_OPTIONS,
-      width: BUTTON_WIDTH,
     };
   }
   if (type === 'boolean') {
diff --git a/packages/admin-panel/src/table/index.js b/packages/admin-panel/src/table/index.js
index 03a7f68df8..c9fd67c34d 100644
--- a/packages/admin-panel/src/table/index.js
+++ b/packages/admin-panel/src/table/index.js
@@ -5,4 +5,4 @@
 
 export { DATA_CHANGE_ACTIONS } from './constants';
 export { reducer } from './reducer';
-export { DataFetchingTable } from './DataFetchingTable';
+export { DataFetchingTable as DataFetchingTable } from './DataFetchingTable';
diff --git a/packages/admin-panel/src/theme/theme.js b/packages/admin-panel/src/theme/theme.js
index 2e790c028d..70f5a43321 100644
--- a/packages/admin-panel/src/theme/theme.js
+++ b/packages/admin-panel/src/theme/theme.js
@@ -104,9 +104,9 @@ const typography = {
     letterSpacing: 0,
   },
   body1: {
-    fontSize: '1.125rem',
+    fontSize: '1rem',
     fontWeight: 400,
-    lineHeight: 1.18,
+    lineHeight: 1.2,
     letterSpacing: 0,
   },
   body2: {
@@ -134,6 +134,18 @@ const overrides = {
       backgroundColor: COLORS.GREY_DE,
     },
   },
+  MuiMenuItem: {
+    root: {
+      fontSize: '0.875rem',
+    },
+  },
+  MuiButton: {
+    root: {
+      '&.MuiButtonBase-root': {
+        fontSize: '0.875rem',
+      },
+    },
+  },
 };
 
 export const theme = createMuiTheme({ palette, themeName, typography, shape, overrides });
diff --git a/packages/admin-panel/src/widgets/PageHeader.jsx b/packages/admin-panel/src/widgets/PageHeader.jsx
index e7586f8c51..1f18b2ce93 100644
--- a/packages/admin-panel/src/widgets/PageHeader.jsx
+++ b/packages/admin-panel/src/widgets/PageHeader.jsx
@@ -14,7 +14,11 @@ const Container = styled.div`
   justify-content: flex-end;
 `;
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  padding-block: 0.7rem;
+  padding-inline: 1.5rem;
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey['400']};
+`;
 
 export const PageHeader = ({
   importConfig,
@@ -26,6 +30,10 @@ export const PageHeader = ({
   const CreateButton =
     createConfig && createConfig.bulkCreate ? BulkCreateButton : SingleCreateButton;
 
+  if (!importConfig && !createConfig && !ExportModalComponent && !LinksComponent) {
+    return null;
+  }
+
   return (
     <Wrapper>
       <Container>
diff --git a/packages/central-server/src/apiV2/GETHandler/GETHandler.js b/packages/central-server/src/apiV2/GETHandler/GETHandler.js
index 27df779795..6749d16291 100644
--- a/packages/central-server/src/apiV2/GETHandler/GETHandler.js
+++ b/packages/central-server/src/apiV2/GETHandler/GETHandler.js
@@ -142,7 +142,8 @@ export class GETHandler extends CRUDHandler {
     return {
       headers: {
         Link: linkHeader,
-        'Access-Control-Expose-Headers': 'Link', // To get around CORS
+        'Access-Control-Expose-Headers': 'Link, X-Total-Count', // to get around CORS
+        'X-Total-Count': totalNumberOfRecords,
       },
       body: pageOfRecords,
     };
diff --git a/packages/datatrak-web/src/routes/PrivateRoute.tsx b/packages/datatrak-web/src/routes/PrivateRoute.tsx
index 64ff65a61d..3bf592ca72 100644
--- a/packages/datatrak-web/src/routes/PrivateRoute.tsx
+++ b/packages/datatrak-web/src/routes/PrivateRoute.tsx
@@ -12,6 +12,7 @@ import { ADMIN_ONLY_ROUTES, ROUTES } from '../constants';
 export const PrivateRoute = ({ children }: { children?: ReactElement }): ReactElement => {
   const { isLoggedIn, hasAdminPanelAccess, ...user } = useCurrentUserContext();
   const location = useLocation();
+
   if (!isLoggedIn)
     return (
       <Navigate
diff --git a/packages/lesmis/package.json b/packages/lesmis/package.json
index 424034fe4a..5bc2c312a4 100644
--- a/packages/lesmis/package.json
+++ b/packages/lesmis/package.json
@@ -51,7 +51,8 @@
     "react-password-strength-bar": "^0.3.3",
     "react-query": "^3.19.0",
     "react-redux": "^5.0.6",
-    "react-router-dom": "^5.2.0",
+    "react-router": "6.3.0",
+    "react-router-dom": "6.3.0",
     "styled-components": "^5.1.0"
   },
   "devDependencies": {
diff --git a/packages/lesmis/src/App.jsx b/packages/lesmis/src/App.jsx
index 23a30090b2..3abc062cd0 100755
--- a/packages/lesmis/src/App.jsx
+++ b/packages/lesmis/src/App.jsx
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
  */
 import React from 'react';
-import { Route, Switch, BrowserRouter as Router, Redirect } from 'react-router-dom';
+import { Route, BrowserRouter as Router, Routes, Navigate } from 'react-router-dom';
 import { PageRoutes } from './routes/PageRoutes';
 import { DEFAULT_LOCALE, LOCALES } from './constants';
 
@@ -26,12 +26,10 @@ export const App = () => {
 
   return (
     <Router>
-      <Switch>
-        <Route path="/:locale(en|lo)">
-          <PageRoutes />
-        </Route>
-        <Redirect to={`/${locale}`} />
-      </Switch>
+      <Routes>
+        <Route path="/:locale/*" element={<PageRoutes />} />
+        <Route path="/" element={<Navigate to={`/${locale}`} replace />} />
+      </Routes>
     </Router>
   );
 };
diff --git a/packages/lesmis/src/api/mutations/useLogin.js b/packages/lesmis/src/api/mutations/useLogin.js
index 1be4e6737f..c6ab368167 100644
--- a/packages/lesmis/src/api/mutations/useLogin.js
+++ b/packages/lesmis/src/api/mutations/useLogin.js
@@ -4,14 +4,15 @@
  *
  */
 import { useMutation, useQueryClient } from 'react-query';
-import { useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { post } from '../api';
 import { useUser } from '../queries';
 import { useHomeUrl } from '../../utils/useHomeUrl';
 
 export const useLogin = () => {
   const { navigateToHomeUrl } = useHomeUrl();
-  const { push, location } = useHistory();
+  const location = useLocation();
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
 
   const loginQuery = useMutation(
@@ -29,7 +30,7 @@ export const useLogin = () => {
 
         // Send the user back to the previous page if there is one saved in referer
         if (location?.state?.referer) {
-          push(location.state.referer);
+          navigate(location.state.referer);
         } else {
           // Otherwise send them to the homepage
           navigateToHomeUrl();
diff --git a/packages/lesmis/src/api/queries/useValidatedQuery.js b/packages/lesmis/src/api/queries/useValidatedQuery.js
index 4f9bfd4bb8..a29a9ea8e8 100644
--- a/packages/lesmis/src/api/queries/useValidatedQuery.js
+++ b/packages/lesmis/src/api/queries/useValidatedQuery.js
@@ -3,15 +3,15 @@
  * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
  *
  */
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useHomeUrl } from '../../utils/useHomeUrl';
 
 export const useValidatedQuery = query => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { homeUrl } = useHomeUrl();
 
   if (query.isError && query.error.code === 403) {
-    history.push(`${homeUrl}/page-not-found`);
+    navigate(`${homeUrl}/page-not-found`);
   }
   return query;
 };
diff --git a/packages/lesmis/src/components/FormBackButton.jsx b/packages/lesmis/src/components/FormBackButton.jsx
index aceda14596..37df88b9bf 100644
--- a/packages/lesmis/src/components/FormBackButton.jsx
+++ b/packages/lesmis/src/components/FormBackButton.jsx
@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import styled from 'styled-components';
-import { useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import { useHomeUrl } from '../utils';
@@ -18,11 +18,12 @@ const CloseButton = styled(IconButton)`
 
 export const FormBackButton = () => {
   const { navigateToHomeUrl } = useHomeUrl();
-  const { push, location } = useHistory();
+  const location = useLocation();
+  const navigate = useNavigate();
 
   const handleClose = () => {
     if (location?.state?.referer) {
-      push(location.state.referer);
+      navigate(location.state.referer);
     } else {
       navigateToHomeUrl();
     }
diff --git a/packages/lesmis/src/components/LocaleMenu.jsx b/packages/lesmis/src/components/LocaleMenu.jsx
index f7c2c661d1..09b356a00a 100644
--- a/packages/lesmis/src/components/LocaleMenu.jsx
+++ b/packages/lesmis/src/components/LocaleMenu.jsx
@@ -7,7 +7,7 @@ import React, { useState } from 'react';
 import { useQueryClient } from 'react-query';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { generatePath, useHistory, useLocation } from 'react-router-dom';
+import { generatePath, useNavigate, useLocation } from 'react-router-dom';
 import MuiButton from '@material-ui/core/Button';
 import MuiMenu from '@material-ui/core/Menu';
 import MuiMenuItem from '@material-ui/core/MenuItem';
@@ -88,19 +88,36 @@ const options = [
 
 export const LocaleMenu = ({ className }) => {
   const [anchorEl, setAnchorEl] = useState(null);
-  const history = useHistory();
+  const navigate = useNavigate();
   const { locale, entityCode, view } = useUrlParams();
   const { search } = useLocation();
   const queryClient = useQueryClient();
 
-  const handleChange = (event, newLocale) => {
-    const path = generatePath(`/:locale/:entityCode?/:view?`, {
+  const generateNewPath = newLocale => {
+    if (entityCode && view) {
+      return generatePath(`/:locale/:entityCode/:view`, {
+        locale: newLocale,
+        entityCode,
+        view,
+      });
+    }
+    if (entityCode) {
+      return generatePath(`/:locale/:entityCode`, {
+        locale: newLocale,
+        entityCode,
+      });
+    }
+    return generatePath(`/:locale`, {
       locale: newLocale,
-      entityCode,
-      view,
     });
+  };
+
+  const handleChange = (event, newLocale) => {
+    const path = generateNewPath(newLocale);
     const link = `${path}${search}`;
-    history.replace(link);
+    navigate(link, {
+      replace: true,
+    });
     setAnchorEl(null);
     queryClient.clear();
 
diff --git a/packages/lesmis/src/components/LoginLink.jsx b/packages/lesmis/src/components/LoginLink.jsx
index 271e33fcc3..95e652683b 100644
--- a/packages/lesmis/src/components/LoginLink.jsx
+++ b/packages/lesmis/src/components/LoginLink.jsx
@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import styled from 'styled-components';
-import { Link as RouterLink, useHistory } from 'react-router-dom';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
 import MuiButton from '@material-ui/core/Button';
 
 import { useUrlParams, I18n } from '../utils';
@@ -18,17 +18,15 @@ const LoginLinkButton = styled(MuiButton)`
 `;
 
 export const LoginLink = () => {
-  const history = useHistory();
+  const location = useLocation();
   const { locale } = useUrlParams();
 
   return (
     <LoginLinkButton
       variant="outlined"
       component={RouterLink}
-      to={{
-        pathname: `/${locale}/login`,
-        state: { referer: history.location },
-      }}
+      to={`/${locale}/login`}
+      state={{ referer: `${location.pathname}${location.search}` }}
       className="login-link"
     >
       <I18n t="home.logIn" />
diff --git a/packages/lesmis/src/components/SearchBar.jsx b/packages/lesmis/src/components/SearchBar.jsx
index b8bd628694..a545338a1f 100644
--- a/packages/lesmis/src/components/SearchBar.jsx
+++ b/packages/lesmis/src/components/SearchBar.jsx
@@ -5,7 +5,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import MuiButton from '@material-ui/core/Button';
 import MuiPaper from '@material-ui/core/Paper';
 import InputBase from '@material-ui/core/InputBase';
@@ -114,7 +114,7 @@ const DEFAULT_LIMIT = 5;
 const EXPANDED_LIMIT = 200;
 
 export const SearchBar = ({ linkType, className }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { translate } = useI18n();
   const [inputValue, setInputValue] = useState('');
   const [expanded, setExpanded] = useState(false);
@@ -138,7 +138,7 @@ export const SearchBar = ({ linkType, className }) => {
     limit: inputValue && expanded ? EXPANDED_LIMIT : DEFAULT_LIMIT,
     onChange: (event, option) => {
       if (option && option.code) {
-        history.push(makeEntityLink(option.code, linkType));
+        navigate(makeEntityLink(option.code, linkType));
       }
     },
   });
diff --git a/packages/lesmis/src/components/SignUpLink.jsx b/packages/lesmis/src/components/SignUpLink.jsx
index 21ca2eb2d6..05b501b5e2 100644
--- a/packages/lesmis/src/components/SignUpLink.jsx
+++ b/packages/lesmis/src/components/SignUpLink.jsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link as RouterLink, useHistory } from 'react-router-dom';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
 import MuiButton from '@material-ui/core/Button';
 
 import { useUrlParams, I18n } from '../utils';
@@ -24,17 +24,15 @@ const TextButton = styled(MuiButton)`
 `;
 
 export const SignUpLink = ({ isRound }) => {
-  const history = useHistory();
+  const location = useLocation();
   const { locale } = useUrlParams();
 
   return (
     <TextButton
       variant={isRound && 'outlined'}
       component={RouterLink}
-      to={{
-        pathname: `/${locale}/register`,
-        state: { referer: history.location },
-      }}
+      to={`/${locale}/register`}
+      state={{ referer: location.pathname }}
       className={isRound && 'round'}
     >
       <I18n t="home.signUp" />
diff --git a/packages/lesmis/src/routes/AdminPanelApp.jsx b/packages/lesmis/src/routes/AdminPanelApp.jsx
index e792fd60d0..d9f0759323 100644
--- a/packages/lesmis/src/routes/AdminPanelApp.jsx
+++ b/packages/lesmis/src/routes/AdminPanelApp.jsx
@@ -4,270 +4,152 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Switch, Redirect, Route, useRouteMatch } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { Assignment, InsertChart, Language, PeopleAlt, Storage } from '@material-ui/icons';
+import styled from 'styled-components';
 import {
   LogoutPage,
   PrivateRoute,
+  ResourcePage,
+  TabPageLayout,
+  getFlattenedChildViews,
+  AppPageLayout,
   VizBuilderApp,
-  DashboardsPage,
-  QuestionsPage,
-  SurveysPage,
-  SyncGroupsPage,
-  DataElementsPage,
-  DashboardItemsPage,
-  DashboardRelationsPage,
-  MapOverlaysPage,
-  MapOverlayGroupsPage,
-  MapOverlayGroupRelationsPage,
-  UsersPage,
-  PermissionsPage,
-  EntitiesPage,
-  ExternalDatabaseConnectionsPage,
-  DataTablesPage,
-  PageWrapper,
-  Main,
-  SecondaryNavbar,
   PageContentWrapper,
 } from '@tupaia/admin-panel';
 
-import { LesmisAdminRoute } from './LesmisAdminRoute';
-import {
-  ApprovedSurveyResponsesView,
-  DraftSurveyResponsesView,
-  RejectedSurveyResponsesView,
-  NonApprovalSurveyResponsesView,
-} from '../views/AdminPanel/SurveyResponsesView';
-import { AdminPanelNavbar } from '../views/AdminPanel/AdminPanelNavBar';
+import { LesmisAdminRedirect } from './LesmisAdminRedirect';
 import { AdminPanelLoginPage } from '../views/AdminPanel/AdminPanelLoginPage';
 import { useAdminPanelUrl, useI18n, hasAdminPanelAccess } from '../utils';
 import { Footer } from '../components';
+import { getRoutes } from '../views/AdminPanel/routes';
+import { getIsBESAdmin } from '../views/AdminPanel/authentication';
+import { NotAuthorisedView } from '../views/NotAuthorisedView';
 
-const getRoutes = (adminUrl, translate) => {
-  return [
-    {
-      label: translate('admin.surveyData'),
-      to: `${adminUrl}/survey-responses`,
-      icon: <Assignment />,
-      tabs: [
-        {
-          label: translate('admin.review'),
-          to: '',
-          component: DraftSurveyResponsesView,
-        },
-        {
-          label: translate('admin.approved'),
-          to: '/approved',
-          component: ApprovedSurveyResponsesView,
-        },
-        {
-          label: translate('admin.rejected'),
-          to: '/rejected',
-          component: RejectedSurveyResponsesView,
-        },
-        {
-          label: translate('admin.approvalNotRequired'),
-          to: '/non-approval',
-          component: NonApprovalSurveyResponsesView,
-        },
-      ],
-    },
-    {
-      label: translate('admin.surveys'),
-      to: `${adminUrl}/surveys`,
-      icon: <Assignment />,
-      tabs: [
-        {
-          label: translate('admin.surveys'),
-          to: '',
-          component: SurveysPage,
-        },
-        {
-          label: translate('admin.questions'),
-          to: '/questions',
-          component: QuestionsPage,
-        },
-        {
-          label: translate('admin.dataElements'),
-          to: '/data-elements',
-          component: DataElementsPage,
-        },
-        {
-          label: translate('admin.syncGroups'),
-          to: '/sync-groups',
-          component: SyncGroupsPage,
-        },
-      ],
-    },
-    {
-      label: translate('admin.visualisations'),
-      to: `${adminUrl}/visualisations`,
-      icon: <InsertChart />,
-      tabs: [
-        {
-          label: translate('admin.dashboardItems'),
-          to: '',
-          component: props => <DashboardItemsPage {...props} vizBuilderBaseUrl={adminUrl} />,
-        },
-        {
-          label: translate('admin.dashboards'),
-          to: '/dashboards',
-          component: DashboardsPage,
-        },
-        {
-          label: translate('admin.dashboardRelations'),
-          to: '/dashboard-relations',
-          component: DashboardRelationsPage,
-        },
-        {
-          label: translate('admin.mapOverlays'),
-          to: '/map-overlays',
-          component: props => <MapOverlaysPage {...props} vizBuilderBaseUrl={adminUrl} />,
-        },
-        {
-          label: translate('admin.mapOverlayGroups'),
-          to: '/map-overlay-groups',
-          component: MapOverlayGroupsPage,
-        },
-        {
-          label: translate('admin.mapOverlayGroupRelations'),
-          to: '/map-overlay-group-relations',
-          component: MapOverlayGroupRelationsPage,
-        },
-        {
-          label: translate('admin.dataTables'),
-          to: '/dataTables',
-          component: DataTablesPage,
-        },
-      ],
-    },
-    {
-      label: `${translate('admin.users')} & ${translate('admin.permissions')}`,
-      to: `${adminUrl}/users`,
-      icon: <PeopleAlt />,
-      tabs: [
-        {
-          label: translate('admin.users'),
-          to: '',
-          component: UsersPage,
-        },
-        {
-          label: translate('admin.permissions'),
-          to: '/permissions',
-          component: PermissionsPage,
-        },
-      ],
-    },
-    {
-      label: translate('admin.entities'),
-      to: `${adminUrl}/entities`,
-      icon: <Storage />,
-      tabs: [
-        {
-          label: translate('admin.entities'),
-          to: '',
-          component: EntitiesPage,
-        },
-      ],
-    },
-    {
-      label: translate('admin.externalData'),
-      to: `${adminUrl}/external-database-connections`,
-      icon: <Language />,
-      tabs: [
-        {
-          label: translate('admin.externalDatabaseConnections'),
-          to: '',
-          component: ExternalDatabaseConnectionsPage,
-        },
-      ],
-    },
-  ];
-};
+const PageContentContainerComponent = styled(PageContentWrapper)`
+  padding-inline: 0;
+  > div {
+    margin-inline: 1.5rem;
+  }
+  footer {
+    margin-block-start: 1.5rem;
+  }
+`;
 
-const AdminPanelApp = ({ user }) => {
+const AdminPanelApp = ({ user, isBESAdmin }) => {
   const { translate } = useI18n();
-  const { path } = useRouteMatch();
+  const location = useLocation();
   const adminUrl = useAdminPanelUrl();
   const userHasAdminPanelAccess = hasAdminPanelAccess(user);
 
-  const routes = getRoutes(adminUrl, translate);
+  const routes = getRoutes(adminUrl, translate, isBESAdmin);
 
   return (
-    <Switch>
-      <Route path={`${path}/login`} exact>
-        <AdminPanelLoginPage />
-      </Route>
-      <Route path={`${path}/logout`} exact>
-        <LogoutPage redirectTo={`${adminUrl}/login`} />
+    <Routes>
+      <Route path="/login" element={<AdminPanelLoginPage />} />
+      <Route path="/logout" element={<LogoutPage redirectTo={`${adminUrl}/login`} />} />
+
+      <Route path="/" element={<PrivateRoute loginPath={`${adminUrl}/login`} />}>
+        <Route
+          path="/"
+          element={<LesmisAdminRedirect hasAdminPanelAccess={userHasAdminPanelAccess} />}
+        >
+          <Route
+            path="/viz-builder/*"
+            hasAdminPanelAccess={userHasAdminPanelAccess}
+            element={
+              <VizBuilderApp
+                logo={{
+                  url: '/lesmis-logo-white.svg',
+                  alt: 'LESMIS Admin Panel Logo',
+                }}
+                homeLink={`${adminUrl}/survey-responses`}
+                Footer={Footer}
+              />
+            }
+          />
+          <Route
+            element={
+              <AppPageLayout
+                user={user}
+                routes={routes}
+                logo={{
+                  url: '/lesmis-logo-white.svg',
+                  alt: 'LESMIS Admin Panel Logo',
+                }}
+                homeLink={`${adminUrl}/survey-responses`}
+                userLinks={[{ label: 'Logout', to: `${adminUrl}/logout` }]}
+                basePath={adminUrl}
+              />
+            }
+          >
+            {routes.map(route => (
+              <Route
+                key={route.path}
+                path={route.path}
+                element={
+                  <TabPageLayout
+                    routes={route.childViews}
+                    basePath={`${adminUrl}${route.path}`}
+                    Footer={<Footer />}
+                    ContainerComponent={PageContentContainerComponent}
+                  />
+                }
+              >
+                {getFlattenedChildViews(route, adminUrl).map(childRoute => (
+                  <Route
+                    key={childRoute.path}
+                    path={childRoute.path}
+                    element={
+                      childRoute.Component ? (
+                        <childRoute.Component />
+                      ) : (
+                        <ResourcePage {...childRoute} hasBESAdminAccess={isBESAdmin} />
+                      )
+                    }
+                  />
+                ))}
+              </Route>
+            ))}
+            <Route path="*" element={<Navigate to={`${adminUrl}/survey-responses`} replace />} />
+          </Route>
+        </Route>
       </Route>
-      <LesmisAdminRoute path={`${path}/viz-builder`} hasAdminPanelAccess={userHasAdminPanelAccess}>
-        <VizBuilderApp
-          logo={{
-            url: '/lesmis-logo-white.svg',
-            alt: 'LESMIS Admin Panel Logo',
-          }}
-          homeLink={adminUrl}
-          Footer={Footer}
-        />
-      </LesmisAdminRoute>
-      <PrivateRoute path={`${path}`} loginPath={`${adminUrl}/login`}>
-        <PageWrapper>
-          <AdminPanelNavbar user={user} links={routes} />
-          <Main>
-            <Switch>
-              {routes.map(route => (
-                <LesmisAdminRoute
-                  key={route.to}
-                  path={route.to}
-                  hasAdminPanelAccess={userHasAdminPanelAccess}
-                  render={({ match }) => {
-                    return (
-                      <>
-                        <SecondaryNavbar links={route.tabs} baseRoute={match.url} />
-                        <PageContentWrapper>
-                          <Switch>
-                            {route.tabs.map(tab => (
-                              <Route
-                                key={`${route.to}-${tab.to}`}
-                                path={`${route.to}${tab.to}`}
-                                exact
-                              >
-                                <tab.component translate={translate} />
-                              </Route>
-                            ))}
-                            <Redirect to={route.to} />
-                          </Switch>
-                          <Footer />
-                        </PageContentWrapper>
-                      </>
-                    );
-                  }}
-                />
-              ))}
-              <Redirect to={`${path}/survey-responses`} />
-            </Switch>
-          </Main>
-        </PageWrapper>
-      </PrivateRoute>
-      <Redirect to={`${path}/login`} />
-    </Switch>
+      <Route path="not-authorised" element={<NotAuthorisedView />} />
+      <Route
+        path="*"
+        element={
+          <Navigate
+            to={`${adminUrl}/login`}
+            state={{
+              referrer: location.pathname,
+            }}
+          />
+        }
+      />
+    </Routes>
   );
 };
 
 AdminPanelApp.propTypes = {
   user: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    email: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    email: PropTypes.string,
     firstName: PropTypes.string,
     profileImage: PropTypes.string,
-  }).isRequired,
+  }),
+  isBESAdmin: PropTypes.bool,
+};
+
+AdminPanelApp.defaultProps = {
+  isBESAdmin: false,
+  user: {},
 };
 
 export default connect(
   state => ({
     user: state?.authentication?.user || {},
+    isBESAdmin: getIsBESAdmin(state),
   }),
   null,
 )(AdminPanelApp);
diff --git a/packages/lesmis/src/routes/LesmisAdminRedirect.jsx b/packages/lesmis/src/routes/LesmisAdminRedirect.jsx
new file mode 100644
index 0000000000..4438e241c6
--- /dev/null
+++ b/packages/lesmis/src/routes/LesmisAdminRedirect.jsx
@@ -0,0 +1,15 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ *
+ */
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+
+export const LesmisAdminRedirect = ({ hasAdminPanelAccess = false }) => {
+  if (!hasAdminPanelAccess) {
+    return <Navigate to="/not-authorised" replace />;
+  }
+
+  return <Outlet />;
+};
diff --git a/packages/lesmis/src/routes/LesmisAdminRoute.jsx b/packages/lesmis/src/routes/LesmisAdminRoute.jsx
deleted file mode 100644
index 6740dd4d18..0000000000
--- a/packages/lesmis/src/routes/LesmisAdminRoute.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- *
- */
-import React from 'react';
-import { Route } from 'react-router-dom';
-import { NotAuthorisedView } from '../views/NotAuthorisedView';
-
-export const LesmisAdminRoute = ({ hasAdminPanelAccess = false, ...props }) => {
-  if (!hasAdminPanelAccess) {
-    return <NotAuthorisedView />;
-  }
-
-  return <Route {...props} />;
-};
diff --git a/packages/lesmis/src/routes/PageRoutes.jsx b/packages/lesmis/src/routes/PageRoutes.jsx
index 63e87a1d14..b15238bcfe 100644
--- a/packages/lesmis/src/routes/PageRoutes.jsx
+++ b/packages/lesmis/src/routes/PageRoutes.jsx
@@ -4,7 +4,7 @@
  *
  */
 import React from 'react';
-import { Switch, Route, useRouteMatch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { AdminPanelDataProviders } from '@tupaia/admin-panel';
 import { NavBar, Footer } from '../components';
 import { HomeView } from '../views/HomeView';
@@ -28,65 +28,107 @@ const adminPanelConfig = { apiUrl: `${getAdminApiUrl()}` };
  * eg. /en/LA/dashboard
  */
 export const PageRoutes = React.memo(() => {
-  const { path } = useRouteMatch();
-
   return (
-    <Switch>
-      <Route exact path={`${path}/`}>
-        <NavBar hideSearch />
-        <HomeView />
-      </Route>
-      <Route path={`${path}/login`}>
-        <LoginView />
-      </Route>
-      <Route path={`${path}/verify-email`}>
-        <VerifyEmailView />
-      </Route>
-      <Route path={`${path}/register`}>
-        <RegisterView />
-      </Route>
-      <Route path={`${path}/profile`}>
-        <NavBar />
-        <ProfileView />
-        <Footer />
-      </Route>
-      <Route path={`${path}/admin`}>
-        <AdminPanelDataProviders config={adminPanelConfig}>
-          <AdminPanel />
-        </AdminPanelDataProviders>
-      </Route>
-      <Route path={`${path}/about`}>
-        <NavBar />
-        <PageView content={ABOUT_PAGE} />
-        <Footer />
-      </Route>
-      <Route path={`${path}/fundamental-quality-standards`}>
-        <NavBar />
-        <TwoColumnPageView content={FQS_PAGE} />
-        <Footer />
-      </Route>
-      <Route path={`${path}/contact`}>
-        <NavBar />
-        <PageView content={CONTACT_PAGE} />
-        <Footer />
-      </Route>
-      <Route path={`${path}/page-not-found`}>
-        <NavBar />
-        <NotFoundView />
-        <Footer />
-      </Route>
-      <Route path={`${path}/not-authorised`}>
-        <NavBar />
-        <NotAuthorisedView />
-        <Footer />
-      </Route>
-      <Route path={`${path}/pdf-export/:entityCode?`}>
-        <ExportView viewType={PDF_DOWNLOAD_VIEW} />
-      </Route>
-      <Route path={`${path}/:entityCode/:view?`}>
-        <NavBar />
-        <EntityView />
-      </Route>
-    </Switch>
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <>
+            <NavBar hideSearch />
+            <HomeView />
+          </>
+        }
+      />
+      <Route path="/login" element={<LoginView />} />
+
+      <Route path="/verify-email" element={<VerifyEmailView />} />
+
+      <Route path="/register" element={<RegisterView />} />
+
+      <Route
+        path="/profile"
+        element={
+          <>
+            <NavBar />
+            <ProfileView />
+            <Footer />
+          </>
+        }
+      />
+
+      <Route
+        path="/admin/*"
+        element={
+          <AdminPanelDataProviders config={adminPanelConfig}>
+            <AdminPanel />
+          </AdminPanelDataProviders>
+        }
+      />
+      <Route
+        path="/about"
+        element={
+          <>
+            <NavBar />
+            <PageView content={ABOUT_PAGE} />
+            <Footer />
+          </>
+        }
+      />
+      <Route
+        path="/fundamental-quality-standards"
+        element={
+          <>
+            <NavBar />
+            <TwoColumnPageView content={FQS_PAGE} />
+            <Footer />
+          </>
+        }
+      />
+
+      <Route
+        path="/contact"
+        element={
+          <>
+            <NavBar />
+            <PageView content={CONTACT_PAGE} />
+            <Footer />
+          </>
+        }
+      />
+
+      <Route
+        path="/page-not-found"
+        element={
+          <>
+            <NavBar />
+            <NotFoundView />
+            <Footer />
+          </>
+        }
+      />
+      <Route
+        path="/not-authorised"
+        element={
+          <>
+            <NavBar />
+            <NotAuthorisedView />
+            <Footer />
+          </>
+        }
+      />
+      <Route
+        path="/pdf-export/:entityCode?"
+        element={<ExportView viewType={PDF_DOWNLOAD_VIEW} />}
+      />
+      <Route
+        path="/:entityCode/*"
+        element={
+          <>
+            <NavBar />
+            <EntityView />
+          </>
+        }
+      />
+    </Routes>
   );
 });
diff --git a/packages/lesmis/src/theme/theme.js b/packages/lesmis/src/theme/theme.js
index d81a8b93bc..6ac1ce1959 100755
--- a/packages/lesmis/src/theme/theme.js
+++ b/packages/lesmis/src/theme/theme.js
@@ -128,7 +128,7 @@ export const overrides = {
   },
   MuiTableRow: {
     root: {
-      'tbody &:nth-of-type(odd)': {
+      'table:not(.data-fetching-table) tbody &:nth-of-type(odd)': {
         backgroundColor: COLORS.GREY_F1,
       },
     },
diff --git a/packages/lesmis/src/utils/useDefaultDashboardTab.js b/packages/lesmis/src/utils/useDefaultDashboardTab.js
index c662bfa76a..e9490f81ae 100644
--- a/packages/lesmis/src/utils/useDefaultDashboardTab.js
+++ b/packages/lesmis/src/utils/useDefaultDashboardTab.js
@@ -1,11 +1,12 @@
-import { useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useUser } from '../api';
 import { useI18n } from './I18n';
 import { useHomeUrl } from './useHomeUrl';
 
 // Gets the best default dashboard possible, and check if the selected dashboard is valid
 export const useDefaultDashboardTab = (selectedDashboard = null, options) => {
-  const history = useHistory();
+  const location = useLocation();
+  const navigate = useNavigate();
   const { translate } = useI18n();
   const { homeUrl } = useHomeUrl();
   const { isLoggedIn, isFetching: isFetchingUser } = useUser();
@@ -23,7 +24,11 @@ export const useDefaultDashboardTab = (selectedDashboard = null, options) => {
       return selectedDashboard;
     }
     if (!isFetchingUser && !isLoggedIn) {
-      return history.push(`${homeUrl}/login`, { referer: history.location });
+      return navigate(`${homeUrl}/login`, {
+        state: {
+          referer: location.pathname,
+        },
+      });
     }
   }
 
diff --git a/packages/lesmis/src/utils/useHomeUrl.js b/packages/lesmis/src/utils/useHomeUrl.js
index b6f4b4b3ca..20e35040a2 100644
--- a/packages/lesmis/src/utils/useHomeUrl.js
+++ b/packages/lesmis/src/utils/useHomeUrl.js
@@ -3,17 +3,17 @@
  *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
 
-import { useHistory, useRouteMatch } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 export const useHomeUrl = () => {
-  const { params } = useRouteMatch();
-  const { push } = useHistory();
+  const params = useParams();
+  const navigate = useNavigate();
   const { locale } = params;
   const homeUrl = `/${locale}`;
 
   const isHomeUrl = path => path.replace(/\/$/, '') === homeUrl;
 
-  const navigateToHomeUrl = () => push(homeUrl);
+  const navigateToHomeUrl = () => navigate(homeUrl);
 
   return {
     homeUrl,
diff --git a/packages/lesmis/src/utils/useUrlParams.js b/packages/lesmis/src/utils/useUrlParams.js
index a569f9a5de..6a8d6ecb47 100644
--- a/packages/lesmis/src/utils/useUrlParams.js
+++ b/packages/lesmis/src/utils/useUrlParams.js
@@ -3,11 +3,13 @@
  * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
  *
  */
-import { useRouteMatch } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 
 export const useUrlParams = () => {
-  const { params } = useRouteMatch();
-  const { locale, entityCode, view } = params;
+  const params = useParams();
+  const location = useLocation();
+  const view = location.pathname.split('/').pop();
+  const { locale, entityCode } = params;
 
   return {
     locale,
diff --git a/packages/lesmis/src/utils/useUrlSearchParams.js b/packages/lesmis/src/utils/useUrlSearchParams.js
index 4d584cddf7..ccda5499d8 100644
--- a/packages/lesmis/src/utils/useUrlSearchParams.js
+++ b/packages/lesmis/src/utils/useUrlSearchParams.js
@@ -3,10 +3,10 @@
  * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
  *
  */
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 export const useUrlSearchParams = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const urlParams = new URLSearchParams(location.search);
 
@@ -20,11 +20,12 @@ export const useUrlSearchParams = () => {
     });
 
     if (location.search !== urlParams.toString()) {
-      if (pushToHistory) {
-        history.push({ ...location, search: urlParams.toString() });
-      } else {
-        history.replace({ ...location, search: urlParams.toString() });
-      }
+      navigate(
+        { ...location, search: urlParams.toString() },
+        {
+          replace: !pushToHistory,
+        },
+      );
     }
   };
 
diff --git a/packages/lesmis/src/views/AdminPanel/AdminPanelLoginPage.jsx b/packages/lesmis/src/views/AdminPanel/AdminPanelLoginPage.jsx
index 464b25e986..9cf046c81f 100644
--- a/packages/lesmis/src/views/AdminPanel/AdminPanelLoginPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/AdminPanelLoginPage.jsx
@@ -4,6 +4,7 @@
  */
 
 import React from 'react';
+import { useLocation } from 'react-router';
 import styled from 'styled-components';
 import { useAdminPanelUrl } from '../../utils';
 import { LoginPage } from './pages/LoginPage';
@@ -18,5 +19,7 @@ const LoginPageLogo = () => <StyledImg src="/lesmis-logo.svg" alt="lesmis-logo"
 
 export const AdminPanelLoginPage = () => {
   const adminUrl = useAdminPanelUrl();
-  return <LoginPage redirectTo={`${adminUrl}/survey-responses`} LogoComponent={LoginPageLogo} />;
+  const location = useLocation();
+  const redirectTo = location.state?.referrer || `${adminUrl}/survey-responses`;
+  return <LoginPage redirectTo={redirectTo} LogoComponent={LoginPageLogo} />;
 };
diff --git a/packages/lesmis/src/views/AdminPanel/SurveyResponsesView.jsx b/packages/lesmis/src/views/AdminPanel/SurveyResponsesView.jsx
deleted file mode 100644
index 645b31c173..0000000000
--- a/packages/lesmis/src/views/AdminPanel/SurveyResponsesView.jsx
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
- * Tupaia
- *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
- */
-import React from 'react';
-import { PropTypes } from 'prop-types';
-
-import { SurveyResponsesPage } from '@tupaia/admin-panel';
-import { ApproveButton, getRejectButton } from './components';
-import { getSurveyResponsePageConfigs } from './pages/helpers/getSurveyResponsePageConfigs';
-
-export const ApprovedSurveyResponsesView = props => {
-  const {
-    columns: COLUMNS,
-    importConfig,
-    exportConfig,
-    editorConfig,
-    ExportModalComponent,
-  } = getSurveyResponsePageConfigs(props);
-
-  return (
-    <SurveyResponsesPage
-      title={props.translate('admin.approvedSurveyResponses')}
-      baseFilter={{ approval_status: { comparisonValue: 'approved' } }}
-      columns={COLUMNS.filter(column => column.type !== 'delete')}
-      importConfig={importConfig}
-      exportConfig={exportConfig}
-      editorConfig={editorConfig}
-      ExportModalComponent={ExportModalComponent}
-      {...props}
-    />
-  );
-};
-
-export const RejectedSurveyResponsesView = props => {
-  const {
-    columns: COLUMNS,
-    importConfig,
-    exportConfig,
-    editorConfig,
-    ExportModalComponent,
-  } = getSurveyResponsePageConfigs(props);
-
-  return (
-    <SurveyResponsesPage
-      title={props.translate('admin.rejectedSurveyResponses')}
-      baseFilter={{ approval_status: { comparisonValue: 'rejected' } }}
-      columns={COLUMNS.filter(column => column.type !== 'delete')}
-      importConfig={importConfig}
-      exportConfig={exportConfig}
-      editorConfig={editorConfig}
-      ExportModalComponent={ExportModalComponent}
-      {...props}
-    />
-  );
-};
-
-export const DraftSurveyResponsesView = props => {
-  const {
-    columns: COLUMNS,
-    importConfig,
-    exportConfig,
-    editorConfig,
-    ExportModalComponent,
-  } = getSurveyResponsePageConfigs(props);
-
-  const DRAFT_COLUMNS = [
-    ...COLUMNS.filter(column => column.type !== 'delete'),
-    {
-      Header: props.translate('admin.approve'),
-      source: 'id',
-      Cell: ApproveButton,
-      filterable: false,
-      sortable: false,
-      width: 75,
-    },
-    {
-      Header: props.translate('admin.reject'),
-      source: 'id',
-      Cell: getRejectButton(props.translate),
-      type: 'delete',
-      actionConfig: {
-        endpoint: 'surveyResponses',
-      },
-    },
-  ];
-
-  return (
-    <SurveyResponsesPage
-      {...props}
-      title={props.translate('admin.surveyResponsesForReview')}
-      baseFilter={{ approval_status: { comparisonValue: 'pending' } }}
-      columns={DRAFT_COLUMNS}
-      importConfig={importConfig}
-      exportConfig={exportConfig}
-      editorConfig={editorConfig}
-      ExportModalComponent={ExportModalComponent}
-    />
-  );
-};
-
-export const NonApprovalSurveyResponsesView = props => {
-  const {
-    columns: COLUMNS,
-    importConfig,
-    exportConfig,
-    editorConfig,
-    ExportModalComponent,
-  } = getSurveyResponsePageConfigs(props);
-
-  // Don't include the approval column for the non-approval survey responses
-  const EDIT_CONFIG = COLUMNS.find(column => column.type === 'edit');
-  const EDIT_COLUMN = {
-    ...EDIT_CONFIG,
-    actionConfig: {
-      ...EDIT_CONFIG.actionConfig,
-      fields: EDIT_CONFIG.actionConfig.fields.filter(f => f.source !== 'approval_status'),
-    },
-  };
-  const NON_APPROVAL_COLUMNS = [...COLUMNS.filter(column => column.type !== 'edit'), EDIT_COLUMN];
-  return (
-    <SurveyResponsesPage
-      {...props}
-      title={props.translate('admin.approvalNotRequiredSurveyResponses')}
-      baseFilter={{ approval_status: { comparisonValue: 'not_required' } }}
-      columns={NON_APPROVAL_COLUMNS}
-      importConfig={importConfig}
-      exportConfig={exportConfig}
-      editorConfig={editorConfig}
-      ExportModalComponent={ExportModalComponent}
-    />
-  );
-};
-
-ApprovedSurveyResponsesView.propTypes = {
-  translate: PropTypes.func.isRequired,
-};
-DraftSurveyResponsesView.propTypes = {
-  translate: PropTypes.func.isRequired,
-};
-RejectedSurveyResponsesView.propTypes = {
-  translate: PropTypes.func.isRequired,
-};
-NonApprovalSurveyResponsesView.propTypes = {
-  translate: PropTypes.func.isRequired,
-};
diff --git a/packages/lesmis/src/views/AdminPanel/components/ApproveButton.jsx b/packages/lesmis/src/views/AdminPanel/components/ApproveButton.jsx
index 0be60acc6e..7544f91aa5 100644
--- a/packages/lesmis/src/views/AdminPanel/components/ApproveButton.jsx
+++ b/packages/lesmis/src/views/AdminPanel/components/ApproveButton.jsx
@@ -6,22 +6,13 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import CheckIcon from '@material-ui/icons/Check';
-import { IconButton, DataChangeAction, useApiContext } from '@tupaia/admin-panel';
+import { ColumnActionButton, DataChangeAction, useApiContext } from '@tupaia/admin-panel';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import MuiSnackbar from '@material-ui/core/Snackbar';
 import { SmallAlert } from '@tupaia/ui-components';
 import { useApproveSurveyResponseStatus } from '../api';
-import { GREEN } from '../../../constants';
 
-const Button = styled(IconButton)`
-  width: 56px;
-
-  &:hover {
-    background: ${GREEN};
-  }
-`;
-
-export const ApproveButton = ({ value: id }) => {
+export const ApproveButton = ({ row }) => {
   const api = useApiContext();
   const [showAlert, setShowAlert] = useState(false);
   const { mutate, isLoading, isError } = useApproveSurveyResponseStatus(api);
@@ -32,7 +23,7 @@ export const ApproveButton = ({ value: id }) => {
 
   const handleClickApprove = ({ onEditBegin, onEditSuccess, onEditError }) => {
     onEditBegin();
-    mutate(id, {
+    mutate(row.original.id, {
       onSuccess: () => {
         onEditSuccess();
       },
@@ -47,9 +38,9 @@ export const ApproveButton = ({ value: id }) => {
     <>
       <DataChangeAction
         render={props => (
-          <Button onClick={() => handleClickApprove(props)}>
+          <ColumnActionButton onClick={() => handleClickApprove(props)}>
             {isLoading ? <CircularProgress size={16} color="inherit" /> : <CheckIcon />}
-          </Button>
+          </ColumnActionButton>
         )}
       />
       <MuiSnackbar
@@ -71,5 +62,9 @@ export const ApproveButton = ({ value: id }) => {
 };
 
 ApproveButton.propTypes = {
-  value: PropTypes.string.isRequired,
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
 };
diff --git a/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx b/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx
index 95a25933cc..637cc2d33f 100644
--- a/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx
+++ b/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx
@@ -5,13 +5,13 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { ConfirmModal } from '@tupaia/ui-components';
-import { IconButton, DataChangeAction, useApiContext } from '@tupaia/admin-panel';
+import { ColumnActionButton, DataChangeAction, useApiContext } from '@tupaia/admin-panel';
 import { Delete } from '@material-ui/icons';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { useRejectSurveyResponseStatus } from '../api';
 
 export const getRejectButton = translate => {
-  const RejectButton = ({ value: id }) => {
+  const RejectButton = ({ row }) => {
     const api = useApiContext();
     const [isOpen, setIsOpen] = useState(false);
     const { mutate, isLoading, isError, error } = useRejectSurveyResponseStatus(api);
@@ -19,7 +19,7 @@ export const getRejectButton = translate => {
     const handleClickReject = ({ onEditBegin, onEditSuccess, onEditError }) => {
       onEditBegin();
 
-      mutate(id, {
+      mutate(row.original.id, {
         onSuccess: () => {
           onEditSuccess();
           setIsOpen(false);
@@ -33,9 +33,9 @@ export const getRejectButton = translate => {
 
     return (
       <>
-        <IconButton onClick={() => setIsOpen(true)}>
+        <ColumnActionButton onClick={() => setIsOpen(true)}>
           {isLoading ? <CircularProgress size={16} color="inherit" /> : <Delete />}
-        </IconButton>
+        </ColumnActionButton>
         <DataChangeAction
           render={props => (
             <ConfirmModal
@@ -60,7 +60,7 @@ export const getRejectButton = translate => {
   };
 
   RejectButton.propTypes = {
-    value: PropTypes.string.isRequired,
+    row: PropTypes.object.isRequired,
   };
 
   return RejectButton;
diff --git a/packages/lesmis/src/views/AdminPanel/pages/LoginPage.jsx b/packages/lesmis/src/views/AdminPanel/pages/LoginPage.jsx
index 4e550fc032..3a0bdec364 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/LoginPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/pages/LoginPage.jsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 import styled from 'styled-components';
 import MuiCard from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
@@ -64,7 +64,7 @@ const Logo = () => <StyledImg src="/admin-panel-logo.svg" alt="psss-logo" />;
 
 const LoginPageComponent = ({ isLoggedIn, redirectTo, LogoComponent }) => {
   if (isLoggedIn) {
-    return <Redirect to={redirectTo} />;
+    return <Navigate to={redirectTo} replace />;
   }
   const { translate } = useI18n();
 
@@ -87,7 +87,7 @@ const LoginPageComponent = ({ isLoggedIn, redirectTo, LogoComponent }) => {
 LoginPageComponent.propTypes = {
   isLoggedIn: PropTypes.bool.isRequired,
   redirectTo: PropTypes.string,
-  LogoComponent: PropTypes.element,
+  LogoComponent: PropTypes.elementType,
 };
 
 LoginPageComponent.defaultProps = {
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/EntitiesPage.jsx b/packages/lesmis/src/views/AdminPanel/pages/resources/EntitiesPage.jsx
deleted file mode 100644
index 69bd2014ea..0000000000
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/EntitiesPage.jsx
+++ /dev/null
@@ -1,149 +0,0 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { EntitiesPage as BaseEntitiesPage } from '@tupaia/admin-panel';
-import { getSurveyResponsePageConfigs } from '../helpers/getSurveyResponsePageConfigs';
-import { getColumnFilter } from '../../table/columnTypes';
-import { getBaseEditorConfigs, getDeleteConfigs, getImportConfigs } from '../helpers';
-import { getDeleteColumnConfigs } from '../helpers/getDeleteColumnConfigs';
-
-const ENTITIES_ENDPOINT = 'entities';
-
-export const EntitiesPage = ({ translate }) => {
-  const { SURVEY_RESPONSE_COLUMNS } = getSurveyResponsePageConfigs({ translate });
-  const ANSWER_FIELDS = [
-    {
-      Header: translate('admin.question'),
-      source: 'question.text',
-      editable: false,
-      type: 'tooltip',
-      Filter: getColumnFilter(translate),
-    },
-    {
-      Header: translate('admin.answer'),
-      source: 'text',
-      type: 'tooltip',
-      Filter: getColumnFilter(translate),
-    },
-  ];
-
-  const ANSWER_COLUMNS = [
-    ...ANSWER_FIELDS,
-    {
-      Header: translate('admin.edit'),
-      type: 'edit',
-      source: 'id',
-      actionConfig: {
-        title: translate('admin.edit'),
-        editEndpoint: 'answers',
-        fields: ANSWER_FIELDS,
-      },
-    },
-  ];
-
-  const ENTITIES_COLUMNS = [
-    { source: 'id', show: false },
-    {
-      Header: translate('admin.code'),
-      source: 'code',
-      Filter: getColumnFilter(translate),
-    },
-    {
-      Header: translate('admin.name'),
-      source: 'name',
-      type: 'tooltip',
-      Filter: getColumnFilter(translate),
-    },
-    {
-      Header: translate('admin.type'),
-      source: 'type',
-      Filter: getColumnFilter(translate),
-    },
-  ];
-
-  const FIELDS = [
-    ...ENTITIES_COLUMNS,
-    {
-      Header: translate('admin.country'),
-      source: 'country_code',
-      Filter: getColumnFilter(translate),
-    },
-    {
-      Header: translate('admin.edit'),
-      source: 'id',
-      type: 'edit',
-      actionConfig: {
-        editEndpoint: ENTITIES_ENDPOINT,
-        title: translate('admin.edit'),
-        fields: [
-          {
-            Header: translate('admin.name'),
-            source: 'name',
-          },
-        ],
-      },
-    },
-    getDeleteColumnConfigs(ENTITIES_ENDPOINT, translate),
-  ];
-
-  const EXPANSION_CONFIG = [
-    {
-      title: 'Survey Responses',
-      endpoint: 'entities/{id}/surveyResponses',
-      columns: SURVEY_RESPONSE_COLUMNS,
-      expansionTabs: [
-        {
-          title: translate('admin.answers'),
-          endpoint: 'surveyResponses/{id}/answers',
-          columns: ANSWER_COLUMNS,
-        },
-      ],
-    },
-  ];
-
-  const IMPORT_CONFIG = getImportConfigs(translate, {
-    subtitle:
-      'Please note that if this is the first time a country is being imported, you will need to restart central-server post-import for it to sync to DHIS2.', // hope to fix one day in https://github.com/beyondessential/central-server/issues/481
-    actionConfig: {
-      importEndpoint: 'entities',
-    },
-    queryParameters: [
-      {
-        label: 'Push new entities to DHIS2 server',
-        parameterKey: 'pushToDhis',
-        type: 'boolean',
-        editConfig: {
-          type: 'boolean',
-        },
-      },
-      {
-        label: 'Automatically fetch GeoJSON (defaults to "Yes")',
-        parameterKey: 'automaticallyFetchGeojson',
-        type: 'boolean',
-        editConfig: {
-          type: 'boolean',
-        },
-      },
-    ],
-  });
-
-  return (
-    <BaseEntitiesPage
-      title={translate('admin.entities')}
-      endpoint={ENTITIES_ENDPOINT}
-      columns={FIELDS}
-      expansionTabs={EXPANSION_CONFIG}
-      importConfig={IMPORT_CONFIG}
-      deleteConfig={getDeleteConfigs(translate)}
-      editorConfig={getBaseEditorConfigs(translate)}
-    />
-  );
-};
-
-EntitiesPage.propTypes = {
-  translate: PropTypes.func.isRequired,
-};
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/QuestionsPage.jsx b/packages/lesmis/src/views/AdminPanel/pages/resources/QuestionsPage.jsx
deleted file mode 100644
index 5ed9b12477..0000000000
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/QuestionsPage.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2022 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { QuestionsPage as BaseQuestionsPage } from '@tupaia/admin-panel';
-import { getQuestionPageConfigs } from '../helpers/getQuestionPageConfigs';
-
-export const QuestionsPage = ({ translate }) => {
-  const { QUESTION_COLUMNS, EXPANSION_CONFIG, EDITOR_CONFIG } = getQuestionPageConfigs(translate);
-
-  return (
-    <BaseQuestionsPage
-      title={translate('admin.questions')}
-      endpoint="questions"
-      columns={QUESTION_COLUMNS}
-      expansionTabs={EXPANSION_CONFIG}
-      editorConfig={EDITOR_CONFIG}
-    />
-  );
-};
-
-QuestionsPage.propTypes = {
-  translate: PropTypes.func.isRequired,
-};
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/SurveysPage.jsx b/packages/lesmis/src/views/AdminPanel/pages/resources/SurveysPage.jsx
deleted file mode 100644
index ae353a6851..0000000000
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/SurveysPage.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { SurveysPage as BaseSurveysPage } from '@tupaia/admin-panel';
-import { getSurveysPageConfigs } from '../helpers/getSurveysPageConfigs';
-
-export const SurveysPage = ({ translate }) => {
-  const { SURVEY_COLUMNS, EXPANSION_CONFIG, IMPORT_CONFIG, DELETE_CONFIG, EDITOR_CONFIG } =
-    getSurveysPageConfigs(translate);
-
-  return (
-    <BaseSurveysPage
-      title={translate('admin.surveys')}
-      columns={SURVEY_COLUMNS}
-      expansionTabs={EXPANSION_CONFIG}
-      importConfig={IMPORT_CONFIG}
-      deleteConfig={DELETE_CONFIG}
-      editorConfig={EDITOR_CONFIG}
-    />
-  );
-};
-
-SurveysPage.propTypes = {
-  translate: PropTypes.func.isRequired,
-};
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/index.js b/packages/lesmis/src/views/AdminPanel/pages/resources/index.js
deleted file mode 100644
index 7e3f42ffa4..0000000000
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Tupaia Admin
- * Copyright (c) 2022 Beyond Essential Systems Pty Ltd
- */
-
-export { SurveysPage } from './SurveysPage';
-export { QuestionsPage } from './QuestionsPage';
-export { UsersPage } from './UsersPage';
-export { MapOverlaysPage } from './MapOverlaysPage';
-export { MapOverlayGroupsPage } from './MapOverlayGroupsPage';
-export { MapOverlayGroupRelationsPage } from './MapOverlayGroupRelationsPage';
-export { DashboardsPage } from './DashboardsPage';
-export { DashboardItemsPage } from './DashboardItemsPage';
-export { DashboardRelationsPage } from './DashboardRelationsPage';
-export { DataElementsPage } from './DataElementsPage';
-export { SyncGroupsPage } from './SyncGroupsPage';
-export { PermissionsPage } from './PermissionsPage';
-export { EntitiesPage } from './EntitiesPage';
diff --git a/packages/lesmis/src/views/AdminPanel/routes/entities/getEntitiesPageConfig.js b/packages/lesmis/src/views/AdminPanel/routes/entities/getEntitiesPageConfig.js
new file mode 100644
index 0000000000..edc73288e4
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/entities/getEntitiesPageConfig.js
@@ -0,0 +1,91 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import { entities, QRCodeColumn } from '@tupaia/admin-panel';
+import { getColumnFilter } from '../../table/columnTypes';
+import { getSurveyResponsePageConfig } from '../surveyResponses/getSurveyResponsePageConfig';
+import { getDeleteColumnConfigs } from '../helpers/getDeleteColumnConfigs';
+import { getImportConfigs } from '../helpers/getImportConfigs';
+
+export const getEntitiesPageConfig = translate => {
+  const { baseColumns: SURVEY_RESPONSE_COLUMNS } = getSurveyResponsePageConfig(translate);
+
+  const ENTITIES_COLUMNS = [
+    {
+      Header: translate('admin.code'),
+      source: 'code',
+      Filter: getColumnFilter(translate),
+    },
+    {
+      Header: translate('admin.name'),
+      source: 'name',
+      type: 'tooltip',
+      Filter: getColumnFilter(translate),
+    },
+    {
+      Header: translate('admin.type'),
+      source: 'type',
+      Filter: getColumnFilter(translate),
+    },
+  ];
+
+  const FIELDS = [
+    ...ENTITIES_COLUMNS,
+    {
+      Header: translate('admin.country'),
+      source: 'country_code',
+      Filter: getColumnFilter(translate),
+    },
+    {
+      Header: translate('admin.edit'),
+      source: 'id',
+      type: 'edit',
+      actionConfig: {
+        editEndpoint: entities.endpoint,
+        title: translate('admin.edit'),
+        fields: [
+          {
+            Header: translate('admin.name'),
+            source: 'name',
+          },
+        ],
+      },
+    },
+    getDeleteColumnConfigs(entities.endpoint, translate),
+    QRCodeColumn,
+  ];
+
+  const IMPORT_CONFIG = getImportConfigs(translate, entities.importConfig);
+  return {
+    ...entities,
+    title: translate('admin.entities'),
+    columns: FIELDS,
+    importConfig: IMPORT_CONFIG,
+    nestedView: {
+      ...entities.nestedView,
+      columns: [
+        ...SURVEY_RESPONSE_COLUMNS,
+        {
+          Header: 'Approval Status',
+          source: 'approval_status',
+          show: false,
+        },
+        {
+          Header: 'id',
+          source: 'id',
+          show: false,
+        },
+      ],
+      getNestedViewLink: ({ id, approval_status: approvalStatus }) => {
+        if (approvalStatus === 'pending') {
+          return `../../survey-responses/${id}/answers`;
+        }
+        if (approvalStatus === 'not_required') {
+          return `../../survey-responses/non-approval/${id}/answers`;
+        }
+        return `../../survey-responses/${approvalStatus}/${id}/answers`;
+      },
+    },
+  };
+};
diff --git a/packages/lesmis/src/views/AdminPanel/routes/entities/getEntitiesTabRoutes.js b/packages/lesmis/src/views/AdminPanel/routes/entities/getEntitiesTabRoutes.js
new file mode 100644
index 0000000000..09e4c4e5cf
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/entities/getEntitiesTabRoutes.js
@@ -0,0 +1,12 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import { entitiesTabRoutes } from '@tupaia/admin-panel';
+import { getEntitiesPageConfig } from './getEntitiesPageConfig';
+
+export const getEntitiesTabRoutes = translate => ({
+  ...entitiesTabRoutes,
+  title: translate('admin.entities'),
+  childViews: [getEntitiesPageConfig(translate)],
+});
diff --git a/packages/lesmis/src/views/AdminPanel/routes/entities/index.js b/packages/lesmis/src/views/AdminPanel/routes/entities/index.js
new file mode 100644
index 0000000000..a25f368aa9
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/entities/index.js
@@ -0,0 +1,5 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+export { getEntitiesTabRoutes } from './getEntitiesTabRoutes';
diff --git a/packages/lesmis/src/views/AdminPanel/routes/getRoutes.js b/packages/lesmis/src/views/AdminPanel/routes/getRoutes.js
new file mode 100644
index 0000000000..1d074bada9
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/getRoutes.js
@@ -0,0 +1,26 @@
+import { externalDataTabRoutes, externalDatabaseConnections } from '@tupaia/admin-panel';
+import { getEntitiesTabRoutes } from './entities';
+import { getSurveyResponsesTabRoutes } from './surveyResponses';
+import { getSurveysTabRoutes } from './surveys';
+import { getUsersTabRoutes } from './users';
+import { getVisualisationsTabsRoutes } from './visualisations';
+
+export const getRoutes = (adminUrl, translate) => {
+  return [
+    getSurveyResponsesTabRoutes(translate, adminUrl),
+    getSurveysTabRoutes(translate, adminUrl),
+    getVisualisationsTabsRoutes(translate, adminUrl),
+    getUsersTabRoutes(translate),
+    getEntitiesTabRoutes(translate, adminUrl),
+    {
+      ...externalDataTabRoutes,
+      label: translate('admin.externalData'),
+      childViews: [
+        {
+          ...externalDatabaseConnections,
+          title: translate('admin.externalDatabaseConnections'),
+        },
+      ],
+    },
+  ];
+};
diff --git a/packages/lesmis/src/views/AdminPanel/pages/helpers/getCreateConfigs.js b/packages/lesmis/src/views/AdminPanel/routes/helpers/getCreateConfigs.js
similarity index 100%
rename from packages/lesmis/src/views/AdminPanel/pages/helpers/getCreateConfigs.js
rename to packages/lesmis/src/views/AdminPanel/routes/helpers/getCreateConfigs.js
diff --git a/packages/lesmis/src/views/AdminPanel/pages/helpers/getDeleteColumnConfigs.js b/packages/lesmis/src/views/AdminPanel/routes/helpers/getDeleteColumnConfigs.js
similarity index 72%
rename from packages/lesmis/src/views/AdminPanel/pages/helpers/getDeleteColumnConfigs.js
rename to packages/lesmis/src/views/AdminPanel/routes/helpers/getDeleteColumnConfigs.js
index 1c4d184aad..9c7199770c 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/helpers/getDeleteColumnConfigs.js
+++ b/packages/lesmis/src/views/AdminPanel/routes/helpers/getDeleteColumnConfigs.js
@@ -1,11 +1,10 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2022 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 export const getDeleteColumnConfigs = (endpoint, translate) => ({
   Header: translate('admin.delete'),
-  source: 'id',
   type: 'delete',
   actionConfig: {
     endpoint,
diff --git a/packages/lesmis/src/views/AdminPanel/pages/helpers/getDeleteConfigs.js b/packages/lesmis/src/views/AdminPanel/routes/helpers/getDeleteConfigs.js
similarity index 76%
rename from packages/lesmis/src/views/AdminPanel/pages/helpers/getDeleteConfigs.js
rename to packages/lesmis/src/views/AdminPanel/routes/helpers/getDeleteConfigs.js
index f15c9b0f83..aa9a59a951 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/helpers/getDeleteConfigs.js
+++ b/packages/lesmis/src/views/AdminPanel/routes/helpers/getDeleteConfigs.js
@@ -1,6 +1,6 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2022 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 export const getDeleteConfigs = translate => ({
diff --git a/packages/lesmis/src/views/AdminPanel/pages/helpers/getEditorConfigs.js b/packages/lesmis/src/views/AdminPanel/routes/helpers/getEditorConfigs.js
similarity index 90%
rename from packages/lesmis/src/views/AdminPanel/pages/helpers/getEditorConfigs.js
rename to packages/lesmis/src/views/AdminPanel/routes/helpers/getEditorConfigs.js
index 25ae5ee8ce..4c415e2fb8 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/helpers/getEditorConfigs.js
+++ b/packages/lesmis/src/views/AdminPanel/routes/helpers/getEditorConfigs.js
@@ -1,6 +1,6 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2022 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 export const getBaseEditorConfigs = translate => ({
diff --git a/packages/lesmis/src/views/AdminPanel/pages/helpers/getImportConfigs.js b/packages/lesmis/src/views/AdminPanel/routes/helpers/getImportConfigs.js
similarity index 84%
rename from packages/lesmis/src/views/AdminPanel/pages/helpers/getImportConfigs.js
rename to packages/lesmis/src/views/AdminPanel/routes/helpers/getImportConfigs.js
index 9cfd16f0a1..20c5c2e302 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/helpers/getImportConfigs.js
+++ b/packages/lesmis/src/views/AdminPanel/routes/helpers/getImportConfigs.js
@@ -1,6 +1,6 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2022 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 const getImportModalText = translate => ({
diff --git a/packages/lesmis/src/views/AdminPanel/pages/helpers/index.js b/packages/lesmis/src/views/AdminPanel/routes/helpers/index.js
similarity index 59%
rename from packages/lesmis/src/views/AdminPanel/pages/helpers/index.js
rename to packages/lesmis/src/views/AdminPanel/routes/helpers/index.js
index ed3823f4df..f23ef179f5 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/helpers/index.js
+++ b/packages/lesmis/src/views/AdminPanel/routes/helpers/index.js
@@ -1,9 +1,10 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2022 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 export { getImportConfigs } from './getImportConfigs';
 export { getCreateConfigs } from './getCreateConfigs';
 export { getDeleteConfigs } from './getDeleteConfigs';
 export * from './getEditorConfigs';
+export { getDeleteColumnConfigs } from './getDeleteColumnConfigs';
diff --git a/packages/lesmis/src/views/AdminPanel/routes/index.js b/packages/lesmis/src/views/AdminPanel/routes/index.js
new file mode 100644
index 0000000000..5d70daff9b
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/index.js
@@ -0,0 +1,6 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { getRoutes } from './getRoutes';
diff --git a/packages/lesmis/src/views/AdminPanel/pages/helpers/getSurveyResponsePageConfigs.js b/packages/lesmis/src/views/AdminPanel/routes/surveyResponses/getSurveyResponsePageConfig.js
similarity index 85%
rename from packages/lesmis/src/views/AdminPanel/pages/helpers/getSurveyResponsePageConfigs.js
rename to packages/lesmis/src/views/AdminPanel/routes/surveyResponses/getSurveyResponsePageConfig.js
index b882880408..59d736a5ed 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/helpers/getSurveyResponsePageConfigs.js
+++ b/packages/lesmis/src/views/AdminPanel/routes/surveyResponses/getSurveyResponsePageConfig.js
@@ -1,14 +1,14 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import moment from 'moment';
+import { surveyResponses } from '@tupaia/admin-panel';
 import { getBrowserTimeZone } from '@tupaia/utils';
-import { getImportConfigs } from './getImportConfigs';
+import { getImportConfigs, getDeleteColumnConfigs, getBaseEditorConfigs } from '../helpers';
 import { getSurveyResponsesExportModal } from '../../components';
-import { getColumnFilter } from '../../table/columnTypes/getColumnFilter';
-import { getDeleteColumnConfigs } from './getDeleteColumnConfigs';
-import { getBaseEditorConfigs } from './getEditorConfigs';
+import { getColumnFilter } from '../../table/columnTypes';
 
 const APPROVAL_STATUS_TYPES = [
   { label: 'Pending', value: 'pending' },
@@ -16,7 +16,7 @@ const APPROVAL_STATUS_TYPES = [
   { label: 'Approved', value: 'approved' },
 ];
 
-export const getSurveyResponsePageConfigs = ({ translate }) => {
+export const getSurveyResponsePageConfig = (translate, path, adminUrl) => {
   const surveyName = {
     Header: translate('admin.survey'),
     source: 'survey.name',
@@ -62,14 +62,13 @@ export const getSurveyResponsePageConfigs = ({ translate }) => {
     Filter: getColumnFilter(translate),
   };
 
-  const SURVEY_RESPONSE_COLUMNS = [
+  const baseColumns = [
     surveyName,
     assessorName,
     date,
     dateOfData,
     {
       Header: translate('admin.export'),
-      source: 'id',
       type: 'export',
       actionConfig: {
         exportEndpoint: 'surveyResponses',
@@ -110,13 +109,18 @@ export const getSurveyResponsePageConfigs = ({ translate }) => {
   };
 
   return {
+    ...surveyResponses,
     columns: [
       entityName,
-      ...SURVEY_RESPONSE_COLUMNS,
+      ...baseColumns,
+      {
+        Header: 'id',
+        source: 'id',
+        show: false,
+      },
       {
         Header: translate('admin.edit'),
         type: 'edit',
-        source: 'id',
         actionConfig: {
           title: translate('admin.edit'),
           editEndpoint: 'surveyResponses',
@@ -142,6 +146,7 @@ export const getSurveyResponsePageConfigs = ({ translate }) => {
     exportConfig,
     editorConfig: getBaseEditorConfigs(translate),
     ExportModalComponent: getSurveyResponsesExportModal(translate),
-    SURVEY_RESPONSE_COLUMNS,
+    baseColumns,
+    getNestedViewLink: record => `${adminUrl}/survey-responses${path}/${record.id}/answers`, // custom because the link needs to include the adminUrl
   };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/routes/surveyResponses/getSurveyResponsesTabRoutes.js b/packages/lesmis/src/views/AdminPanel/routes/surveyResponses/getSurveyResponsesTabRoutes.js
new file mode 100644
index 0000000000..3b180c61ae
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/surveyResponses/getSurveyResponsesTabRoutes.js
@@ -0,0 +1,104 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import { surveysTabRoutes } from '@tupaia/admin-panel';
+import { getSurveyResponsePageConfig } from './getSurveyResponsePageConfig';
+import { ApproveButton, getRejectButton } from '../../components';
+
+const approvedSurveyResponses = (translate, adminUrl) => {
+  const path = '/approved';
+  const { columns: COLUMNS, ...configs } = getSurveyResponsePageConfig(translate, path, adminUrl);
+
+  return {
+    ...configs,
+    reduxId: 'approvedSurveyResponses', // This is used to store the data in the redux store
+    title: translate('admin.approved'),
+    path,
+    baseFilter: { approval_status: { comparisonValue: 'approved' } },
+    columns: COLUMNS.filter(column => column.type !== 'delete'),
+  };
+};
+
+const rejectedSurveyResponses = (translate, adminUrl) => {
+  const path = '/rejected';
+  const { columns: COLUMNS, ...configs } = getSurveyResponsePageConfig(translate, path, adminUrl);
+
+  return {
+    ...configs,
+    reduxId: 'rejectedSurveyResponses', // This is used to store the data in the redux store
+    title: translate('admin.rejected'),
+    path,
+    baseFilter: { approval_status: { comparisonValue: 'rejected' } },
+    columns: COLUMNS.filter(column => column.type !== 'delete'),
+  };
+};
+
+const draftSurveyResponses = (translate, adminUrl) => {
+  const path = '';
+  const { columns: COLUMNS, ...configs } = getSurveyResponsePageConfig(translate, path, adminUrl);
+
+  const DRAFT_COLUMNS = [
+    ...COLUMNS.filter(column => column.type !== 'delete'),
+    {
+      Header: translate('admin.approve'),
+      Cell: ApproveButton,
+      filterable: false,
+      disableSortBy: true,
+      isButtonColumn: true,
+    },
+    {
+      Header: translate('admin.reject'),
+      Cell: getRejectButton(translate),
+      type: 'delete',
+      isButtonColumn: true,
+      actionConfig: {
+        endpoint: 'surveyResponses',
+      },
+    },
+  ];
+
+  return {
+    ...configs,
+    reduxId: 'pendingSurveyResponses', // This is used to store the data in the redux store
+    title: translate('admin.review'),
+    path,
+    default: true,
+    baseFilter: { approval_status: { comparisonValue: 'pending' } },
+    columns: DRAFT_COLUMNS,
+  };
+};
+
+const nonApprovalSurveyResponses = (translate, adminUrl) => {
+  const path = '/non-approval';
+  const { columns: COLUMNS, ...configs } = getSurveyResponsePageConfig(translate, path, adminUrl);
+  // Don't include the approval column for the non-approval survey responses
+  const EDIT_CONFIG = COLUMNS.find(column => column.type === 'edit');
+  const EDIT_COLUMN = {
+    ...EDIT_CONFIG,
+    actionConfig: {
+      ...EDIT_CONFIG.actionConfig,
+      fields: EDIT_CONFIG.actionConfig.fields.filter(f => f.source !== 'approval_status'),
+    },
+  };
+  const NON_APPROVAL_COLUMNS = [...COLUMNS.filter(column => column.type !== 'edit'), EDIT_COLUMN];
+  return {
+    ...configs,
+    path,
+    title: translate('admin.approvalNotRequired'),
+    baseFilter: { approval_status: { comparisonValue: 'not_required' } },
+    columns: NON_APPROVAL_COLUMNS,
+  };
+};
+
+export const getSurveyResponsesTabRoutes = (translate, adminUrl) => ({
+  label: translate('admin.surveyData'),
+  path: '/survey-responses',
+  icon: surveysTabRoutes.icon,
+  childViews: [
+    draftSurveyResponses(translate, adminUrl),
+    approvedSurveyResponses(translate, adminUrl),
+    rejectedSurveyResponses(translate, adminUrl),
+    nonApprovalSurveyResponses(translate, adminUrl),
+  ],
+});
diff --git a/packages/lesmis/src/views/AdminPanel/routes/surveyResponses/index.js b/packages/lesmis/src/views/AdminPanel/routes/surveyResponses/index.js
new file mode 100644
index 0000000000..4ce1614d41
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/surveyResponses/index.js
@@ -0,0 +1,5 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+export { getSurveyResponsesTabRoutes } from './getSurveyResponsesTabRoutes';
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/DataElementsPage.jsx b/packages/lesmis/src/views/AdminPanel/routes/surveys/getDataElementsPageConfig.js
similarity index 61%
rename from packages/lesmis/src/views/AdminPanel/pages/resources/DataElementsPage.jsx
rename to packages/lesmis/src/views/AdminPanel/routes/surveys/getDataElementsPageConfig.js
index aae06940c1..1ddfc25a2f 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/DataElementsPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/routes/surveys/getDataElementsPageConfig.js
@@ -1,21 +1,22 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DataElementsPage as BaseDataElementsPage } from '@tupaia/admin-panel';
+import { dataElements } from '@tupaia/admin-panel';
 import {
   DataSourceConfigView,
-  getDataElementFieldEditConfig,
   SERVICE_TYPE_OPTIONS,
+  getDataElementFieldEditConfig,
 } from '../../common';
-import { getDeleteConfigs } from '../helpers/getDeleteConfigs';
-import { getImportConfigs } from '../helpers/getImportConfigs';
-import { getColumnFilter } from '../../table/columnTypes/getColumnFilter';
-import { getDeleteColumnConfigs } from '../helpers/getDeleteColumnConfigs';
-import { getEditorConfigs, getCreateConfigs } from '../helpers';
+import { getColumnFilter } from '../../table/columnTypes';
+import {
+  getCreateConfigs,
+  getDeleteColumnConfigs,
+  getDeleteConfigs,
+  getEditorConfigs,
+  getImportConfigs,
+} from '../helpers';
 
 const getButtonsConfig = (fields, recordType, translate) => [
   {
@@ -67,7 +68,7 @@ const getDataElementFields = translate => {
   ];
 };
 
-export const DataElementsPage = ({ translate }) => {
+export const getDataElementsPageConfig = translate => {
   const DATA_ELEMENT_FIELDS = getDataElementFields(translate);
   const importConfig = getImportConfigs(translate, {
     actionConfig: {
@@ -84,23 +85,16 @@ export const DataElementsPage = ({ translate }) => {
     },
   });
 
-  return (
-    <BaseDataElementsPage
-      title={translate('admin.dataElements')}
-      endpoint="dataElements"
-      reduxId="dataElements"
-      columns={[
-        ...DATA_ELEMENT_FIELDS,
-        ...getButtonsConfig(DATA_ELEMENT_FIELDS, 'dataElement', translate),
-      ]}
-      importConfig={importConfig}
-      createConfig={createConfig}
-      editorConfig={editorConfig}
-      deleteConfig={deleteConfig}
-    />
-  );
-};
-
-DataElementsPage.propTypes = {
-  translate: PropTypes.func.isRequired,
+  return {
+    ...dataElements,
+    title: translate('admin.dataElements'),
+    columns: [
+      ...DATA_ELEMENT_FIELDS,
+      ...getButtonsConfig(DATA_ELEMENT_FIELDS, 'dataElement', translate),
+    ],
+    importConfig,
+    editorConfig,
+    deleteConfig,
+    createConfig,
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/pages/helpers/getQuestionPageConfigs.js b/packages/lesmis/src/views/AdminPanel/routes/surveys/getQuestionPageConfig.js
similarity index 82%
rename from packages/lesmis/src/views/AdminPanel/pages/helpers/getQuestionPageConfigs.js
rename to packages/lesmis/src/views/AdminPanel/routes/surveys/getQuestionPageConfig.js
index 57550c5350..e7ae99fade 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/helpers/getQuestionPageConfigs.js
+++ b/packages/lesmis/src/views/AdminPanel/routes/surveys/getQuestionPageConfig.js
@@ -1,12 +1,13 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2022 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+import { questions } from '@tupaia/admin-panel';
 import { getColumnFilter } from '../../table/columnTypes/getColumnFilter';
-import { getEditorConfigs } from './getEditorConfigs';
+import { getEditorConfigs } from '../helpers/getEditorConfigs';
 
-export const getQuestionPageConfigs = translate => {
+export const getQuestionPageConfig = translate => {
   const QUESTION_FIELDS = [
     {
       Header: translate('admin.code'),
@@ -93,15 +94,17 @@ export const getQuestionPageConfigs = translate => {
     },
   ];
 
-  const EXPANSION_CONFIG = [
-    {
+  const EDITOR_CONFIG = getEditorConfigs(translate);
+
+  return {
+    ...questions,
+    title: translate('admin.questions'),
+    columns: QUESTION_COLUMNS,
+    editorConfig: EDITOR_CONFIG,
+    nestedView: {
+      ...questions.nestedView,
       title: translate('admin.options'),
-      endpoint: 'optionSets/{option_set_id}/options',
       columns: OPTION_COLUMNS,
     },
-  ];
-
-  const EDITOR_CONFIG = getEditorConfigs(translate);
-
-  return { QUESTION_COLUMNS, EXPANSION_CONFIG, EDITOR_CONFIG };
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/pages/helpers/getSurveysPageConfigs.js b/packages/lesmis/src/views/AdminPanel/routes/surveys/getSurveysPageConfig.js
similarity index 94%
rename from packages/lesmis/src/views/AdminPanel/pages/helpers/getSurveysPageConfigs.js
rename to packages/lesmis/src/views/AdminPanel/routes/surveys/getSurveysPageConfig.js
index ce76c10d08..564c662e01 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/helpers/getSurveysPageConfigs.js
+++ b/packages/lesmis/src/views/AdminPanel/routes/surveys/getSurveysPageConfig.js
@@ -1,16 +1,18 @@
-/**
- * Tupaia Admin
- * Copyright (c) 2022 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { getBooleanSelectFilter } from '../../table/columnTypes/getBooleanSelectFilter';
-import { getColumnFilter } from '../../table/columnTypes/getColumnFilter';
-import { getDeleteColumnConfigs } from './getDeleteColumnConfigs';
-import { getDeleteConfigs } from './getDeleteConfigs';
-import { getBaseEditorConfigs } from './getEditorConfigs';
-import { getImportConfigs } from './getImportConfigs';
+import { surveys } from '@tupaia/admin-panel';
+import { getBooleanSelectFilter, getColumnFilter } from '../../table/columnTypes';
+import {
+  getDeleteColumnConfigs,
+  getDeleteConfigs,
+  getBaseEditorConfigs,
+  getImportConfigs,
+} from '../helpers';
 
-export const getSurveysPageConfigs = translate => {
+export const getSurveysPageConfig = translate => {
   const PERIOD_GRANULARITIES = [
     { label: translate('admin.daily'), value: 'daily' },
     { label: translate('admin.weekly'), value: 'weekly' },
@@ -75,7 +77,6 @@ export const getSurveysPageConfigs = translate => {
     ...SURVEY_FIELDS,
     {
       Header: translate('admin.export'),
-      source: 'id',
       type: 'export',
       actionConfig: {
         exportEndpoint: 'surveys',
@@ -343,14 +344,6 @@ export const getSurveysPageConfigs = translate => {
     },
   ];
 
-  const EXPANSION_CONFIG = [
-    {
-      title: translate('admin.questions'),
-      endpoint: 'surveys/{id}/surveyScreenComponents',
-      columns: QUESTION_COLUMNS,
-    },
-  ];
-
   const IMPORT_CONFIG = getImportConfigs(translate, {
     actionConfig: {
       importEndpoint: 'surveys',
@@ -425,10 +418,16 @@ export const getSurveysPageConfigs = translate => {
   });
 
   return {
-    SURVEY_COLUMNS,
-    EXPANSION_CONFIG,
-    IMPORT_CONFIG,
-    DELETE_CONFIG: getDeleteConfigs(translate),
-    EDITOR_CONFIG: getBaseEditorConfigs(translate),
+    ...surveys,
+    title: translate('admin.surveys'),
+    columns: SURVEY_COLUMNS,
+    importConfig: IMPORT_CONFIG,
+    deleteConfig: getDeleteConfigs(translate),
+    editorConfig: getBaseEditorConfigs(translate),
+    nestedView: {
+      ...surveys.nestedView,
+      title: translate('admin.questions'),
+      columns: QUESTION_COLUMNS,
+    },
   };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/routes/surveys/getSurveysTabRoutes.js b/packages/lesmis/src/views/AdminPanel/routes/surveys/getSurveysTabRoutes.js
new file mode 100644
index 0000000000..ea6ab8039c
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/surveys/getSurveysTabRoutes.js
@@ -0,0 +1,22 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import { surveysTabRoutes } from '@tupaia/admin-panel';
+import { getSurveysPageConfig } from './getSurveysPageConfig';
+import { getQuestionPageConfig } from './getQuestionPageConfig';
+import { getDataElementsPageConfig } from './getDataElementsPageConfig';
+import { getSyncGroupsPageConfig } from './getSyncGroupsPageConfig';
+
+export const getSurveysTabRoutes = (translate, adminUrl) => {
+  return {
+    ...surveysTabRoutes,
+    label: translate('admin.surveys'),
+    childViews: [
+      getSurveysPageConfig(translate, adminUrl),
+      getQuestionPageConfig(translate),
+      getDataElementsPageConfig(translate),
+      getSyncGroupsPageConfig(translate),
+    ],
+  };
+};
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/SyncGroupsPage.jsx b/packages/lesmis/src/views/AdminPanel/routes/surveys/getSyncGroupsPageConfig.js
similarity index 69%
rename from packages/lesmis/src/views/AdminPanel/pages/resources/SyncGroupsPage.jsx
rename to packages/lesmis/src/views/AdminPanel/routes/surveys/getSyncGroupsPageConfig.js
index b5dd0e5f43..17c8a67249 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/SyncGroupsPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/routes/surveys/getSyncGroupsPageConfig.js
@@ -1,18 +1,14 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { SyncGroupsPage as BaseSyncGroupsPage } from '@tupaia/admin-panel';
-import { getColumnFilter } from '../../table/columnTypes/getColumnFilter';
-import { getCreateConfigs, getBaseEditorConfigs } from '../helpers';
-import { getDeleteColumnConfigs } from '../helpers/getDeleteColumnConfigs';
+import { syncGroups } from '@tupaia/admin-panel';
+import { getColumnFilter } from '../../table/columnTypes';
+import { getCreateConfigs, getDeleteColumnConfigs, getBaseEditorConfigs } from '../helpers';
 
 const SERVICE_TYPES = [{ label: 'Kobo', value: 'kobo' }];
 
-export const SyncGroupsPage = ({ translate }) => {
+export const getSyncGroupsPageConfig = translate => {
   const FIELDS = [
     {
       Header: translate('admin.code'),
@@ -60,7 +56,6 @@ export const SyncGroupsPage = ({ translate }) => {
     {
       Header: translate('admin.logs'),
       type: 'logs',
-      source: 'id',
       actionConfig: {
         title: '{code} sync group logs',
         logsCountEndpoint: 'dataServiceSyncGroups/{id}/logs/count',
@@ -73,8 +68,8 @@ export const SyncGroupsPage = ({ translate }) => {
       type: 'sync',
       source: 'sync_status',
       filterable: false,
-      sortable: false,
-      width: 180,
+      disableSortBy: true,
+      colWidth: 180,
       actionConfig: {
         syncStatusEndpoint: 'dataServiceSyncGroups/{id}',
         latestSyncLogEndpoint: 'dataServiceSyncGroups/{id}/logs?limit=1',
@@ -91,17 +86,11 @@ export const SyncGroupsPage = ({ translate }) => {
     },
   });
 
-  return (
-    <BaseSyncGroupsPage
-      title={translate('admin.syncGroups')}
-      endpoint="dataServiceSyncGroups"
-      columns={COLUMNS}
-      editorConfig={editorConfig}
-      createConfig={createConfig}
-    />
-  );
-};
-
-SyncGroupsPage.propTypes = {
-  translate: PropTypes.func.isRequired,
+  return {
+    ...syncGroups,
+    title: translate('admin.syncGroups'),
+    columns: COLUMNS,
+    editorConfig,
+    createConfig,
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/routes/surveys/index.js b/packages/lesmis/src/views/AdminPanel/routes/surveys/index.js
new file mode 100644
index 0000000000..8ea43752a9
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/surveys/index.js
@@ -0,0 +1,6 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { getSurveysTabRoutes } from './getSurveysTabRoutes';
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/PermissionsPage.jsx b/packages/lesmis/src/views/AdminPanel/routes/users/getPermissionsPageConfig.jsx
similarity index 53%
rename from packages/lesmis/src/views/AdminPanel/pages/resources/PermissionsPage.jsx
rename to packages/lesmis/src/views/AdminPanel/routes/users/getPermissionsPageConfig.jsx
index 8f0cebcccb..bff0441d09 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/PermissionsPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/routes/users/getPermissionsPageConfig.jsx
@@ -1,53 +1,18 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import { PermissionsPage as BasePermissionsPage } from '@tupaia/admin-panel';
-import { getBaseEditorConfigs, getCreateConfigs, getDeleteConfigs } from '../helpers';
+import { permissions } from '@tupaia/admin-panel';
 import { getColumnFilter } from '../../table/columnTypes';
-import { getDeleteColumnConfigs } from '../helpers/getDeleteColumnConfigs';
+import {
+  getBaseEditorConfigs,
+  getCreateConfigs,
+  getDeleteColumnConfigs,
+  getDeleteConfigs,
+} from '../helpers';
 
-// export for use on users page
-export const PERMISSIONS_ENDPOINT = 'userEntityPermissions';
-
-// When creating, return an array of records for bulk editing on the server
-// When editing, just process a single record as normal
-const processDataForSave = (fieldsToSave, recordData) => {
-  const isEditingSingle = Object.keys(recordData).length > 0;
-  if (isEditingSingle) {
-    return fieldsToSave;
-  }
-
-  // Creating new records in bulk
-  const records = [];
-
-  const getRecordValues = (partialRecord, values) => {
-    const [firstKey] = Object.keys(values);
-    const { [firstKey]: ids, ...remainingRows } = values;
-
-    ids.forEach(id => {
-      const record = {
-        ...partialRecord,
-        [firstKey]: id,
-      };
-
-      if (Object.entries(remainingRows).length > 0) {
-        getRecordValues(record, remainingRows);
-      } else {
-        records.push(record);
-      }
-    });
-  };
-
-  getRecordValues({}, fieldsToSave);
-
-  return records;
-};
-
-export const PermissionsPage = ({ translate }) => {
+export const getPermissionsPageConfig = translate => {
   const PERMISSIONS_COLUMNS = [
     {
       Header: translate('admin.entity'),
@@ -93,18 +58,18 @@ export const PermissionsPage = ({ translate }) => {
       type: 'edit',
       actionConfig: {
         title: translate('admin.edit'),
-        editEndpoint: PERMISSIONS_ENDPOINT,
+        editEndpoint: permissions.endpoint,
         fields: PERMISSIONS_COLUMNS,
       },
     },
-    getDeleteColumnConfigs(PERMISSIONS_ENDPOINT, translate),
+    getDeleteColumnConfigs(permissions.endpoint, translate),
   ];
 
   const editorConfig = getBaseEditorConfigs(translate);
   const createConfig = getCreateConfigs(translate, {
     bulkCreate: true,
     actionConfig: {
-      bulkUpdateEndpoint: PERMISSIONS_ENDPOINT,
+      bulkUpdateEndpoint: permissions.endpoint,
       fields: [
         {
           Header: translate('admin.emailAddress'),
@@ -136,22 +101,11 @@ export const PermissionsPage = ({ translate }) => {
     },
   });
   const deleteConfig = getDeleteConfigs(translate);
-
-  return (
-    <BasePermissionsPage
-      title={translate('admin.permissions')}
-      endpoint={PERMISSIONS_ENDPOINT}
-      columns={FIELDS}
-      createConfig={createConfig}
-      editorConfig={editorConfig}
-      deleteConfig={deleteConfig}
-      onProcessDataForSave={processDataForSave}
-      importConfig={null}
-      LinksComponent={null}
-    />
-  );
-};
-
-PermissionsPage.propTypes = {
-  translate: PropTypes.func.isRequired,
+  return {
+    ...permissions,
+    columns: FIELDS,
+    editorConfig,
+    createConfig,
+    deleteConfig,
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/UsersPage.jsx b/packages/lesmis/src/views/AdminPanel/routes/users/getUsersPageConfig.jsx
similarity index 82%
rename from packages/lesmis/src/views/AdminPanel/pages/resources/UsersPage.jsx
rename to packages/lesmis/src/views/AdminPanel/routes/users/getUsersPageConfig.jsx
index eb79bbd540..dc361fc85a 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/UsersPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/routes/users/getUsersPageConfig.jsx
@@ -1,17 +1,15 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import { UsersPage as BaseUsersPage } from '@tupaia/admin-panel';
 import { Tooltip as TooltipComponent } from '@tupaia/ui-components';
-import { PERMISSIONS_ENDPOINT } from './PermissionsPage';
+import { users } from '@tupaia/admin-panel';
 import { getColumnFilter, getVerifiedFilter } from '../../table/columnTypes';
 import { getBaseEditorConfigs, getCreateConfigs, getImportConfigs } from '../helpers';
 
-export const UsersPage = ({ translate }) => {
+export const getUsersPageConfig = translate => {
   // eslint-disable-next-line react/prop-types
   const VerifiedCell = ({ value }) => {
     if (value === 'verified') {
@@ -117,11 +115,6 @@ export const UsersPage = ({ translate }) => {
         fields: EDIT_FIELDS,
       },
     },
-    // Invisible columns
-    {
-      source: 'last_name',
-      show: false,
-    },
   ];
 
   const PERMISSIONS_COLUMNS = [
@@ -142,14 +135,6 @@ export const UsersPage = ({ translate }) => {
     },
   ];
 
-  const expansionConfig = [
-    {
-      title: translate('admin.permissions'),
-      endpoint: `users/{id}/${PERMISSIONS_ENDPOINT}`,
-      columns: PERMISSIONS_COLUMNS,
-    },
-  ];
-
   const editorConfig = getBaseEditorConfigs(translate);
   const importConfig = getImportConfigs(translate, {
     actionConfig: {
@@ -173,19 +158,17 @@ export const UsersPage = ({ translate }) => {
     },
   });
 
-  return (
-    <BaseUsersPage
-      title={translate('admin.users')}
-      endpoint="users"
-      columns={COLUMNS}
-      expansionTabs={expansionConfig}
-      importConfig={importConfig}
-      editorConfig={editorConfig}
-      createConfig={createConfig}
-    />
-  );
-};
-
-UsersPage.propTypes = {
-  translate: PropTypes.func.isRequired,
+  return {
+    ...users,
+    title: translate('admin.users'),
+    columns: COLUMNS,
+    editorConfig,
+    importConfig,
+    createConfig,
+    nestedView: {
+      ...users.nestedView,
+      title: translate('admin.permissions'),
+      columns: PERMISSIONS_COLUMNS,
+    },
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/routes/users/getUsersTabRoutes.js b/packages/lesmis/src/views/AdminPanel/routes/users/getUsersTabRoutes.js
new file mode 100644
index 0000000000..f619384390
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/users/getUsersTabRoutes.js
@@ -0,0 +1,13 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import { usersTabRoutes } from '@tupaia/admin-panel';
+import { getUsersPageConfig } from './getUsersPageConfig';
+import { getPermissionsPageConfig } from './getPermissionsPageConfig';
+
+export const getUsersTabRoutes = translate => ({
+  ...usersTabRoutes,
+  label: `${translate('admin.users')} & ${translate('admin.permissions')}`,
+  childViews: [getUsersPageConfig(translate), getPermissionsPageConfig(translate)],
+});
diff --git a/packages/lesmis/src/views/AdminPanel/routes/users/index.js b/packages/lesmis/src/views/AdminPanel/routes/users/index.js
new file mode 100644
index 0000000000..e6073b1a7f
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/users/index.js
@@ -0,0 +1,6 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { getUsersTabRoutes } from './getUsersTabRoutes';
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/DashboardItemsPage.jsx b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getDashboardItemsPageConfig.jsx
similarity index 54%
rename from packages/lesmis/src/views/AdminPanel/pages/resources/DashboardItemsPage.jsx
rename to packages/lesmis/src/views/AdminPanel/routes/visualisations/getDashboardItemsPageConfig.jsx
index 4d76df2636..619d5bf9d1 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/DashboardItemsPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getDashboardItemsPageConfig.jsx
@@ -1,34 +1,22 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-
 import React from 'react';
-import PropTypes from 'prop-types';
-import { LightOutlinedButton } from '@tupaia/ui-components';
-import AddCircleIcon from '@material-ui/icons/AddCircle';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import { DashboardItemsPage as BaseDashboardItemsPage } from '@tupaia/admin-panel';
-import { getImportConfigs } from '../helpers/getImportConfigs';
-import { getDeleteConfigs, getEditorConfigs } from '../helpers';
+import { AddCircle } from '@material-ui/icons';
+import { dashboardItems, ActionButton } from '@tupaia/admin-panel';
 import { getColumnFilter } from '../../table/columnTypes';
-import { getDeleteColumnConfigs } from '../helpers/getDeleteColumnConfigs';
-
-const StyledLink = styled(Link)`
-  text-decoration: none;
-  &:focus,
-  &:hover,
-  &:visited,
-  &:link,
-  &:active {
-    text-decoration: none;
-  }
-`;
+import {
+  getBaseEditorConfigs,
+  getDeleteColumnConfigs,
+  getDeleteConfigs,
+  getImportConfigs,
+} from '../helpers';
 
 export const DASHBOARD_ITEMS_ENDPOINT = 'dashboardItems';
 
-export const DashboardItemsPage = ({ isBESAdmin, vizBuilderBaseUrl, translate, ...props }) => {
+export const getDashboardItemsPageConfig = (translate, adminUrl, isBESAdmin) => {
   const FIELDS = [
     {
       Header: translate('admin.code'),
@@ -70,7 +58,7 @@ export const DashboardItemsPage = ({ isBESAdmin, vizBuilderBaseUrl, translate, .
       editConfig: {
         type: 'link',
         linkOptions: {
-          path: `${vizBuilderBaseUrl}/viz-builder/dashboard-item/:id`,
+          path: `${adminUrl}/viz-builder/dashboard-item/:id`,
           parameters: { id: 'id' },
         },
         visibilityCriteria: {
@@ -84,7 +72,6 @@ export const DashboardItemsPage = ({ isBESAdmin, vizBuilderBaseUrl, translate, .
     ...FIELDS,
     {
       Header: translate('admin.export'),
-      source: 'id',
       type: 'export',
       actionConfig: {
         exportEndpoint: 'dashboardVisualisation',
@@ -105,18 +92,14 @@ export const DashboardItemsPage = ({ isBESAdmin, vizBuilderBaseUrl, translate, .
   ];
 
   const importConfig = getImportConfigs(translate, {
-    subtitle: 'Please upload one or more .json files with visualisations to be imported:',
-    actionConfig: {
-      importEndpoint: 'dashboardVisualisations',
-      multiple: true,
-    },
+    ...dashboardItems.importConfig,
     getFinishedMessage: response => (
       <>
         <span>{response.message}</span>
         {response.importedVizes.map(({ code, id }) => (
           <p>
             <span>{`${code}: `}</span>
-            <Link to={`${vizBuilderBaseUrl}/viz-builder/dashboard-item/${id}`}>
+            <Link to={`${adminUrl}/viz-builder/dashboard-item/${id}`}>
               View in Visualisation Builder
             </Link>
           </p>
@@ -126,36 +109,26 @@ export const DashboardItemsPage = ({ isBESAdmin, vizBuilderBaseUrl, translate, .
   });
 
   const renderNewDashboardVizButton = () => (
-    <StyledLink to={`${vizBuilderBaseUrl}/viz-builder/dashboard-item/new`}>
-      <LightOutlinedButton startIcon={<AddCircleIcon />}>
-        {translate('admin.new')}
-      </LightOutlinedButton>
-    </StyledLink>
+    <ActionButton
+      to={`${adminUrl}/viz-builder/dashboard-item/new`}
+      component={Link}
+      startIcon={<AddCircle />}
+    >
+      {translate('admin.new')}
+    </ActionButton>
   );
 
-  const editorConfig = getEditorConfigs(translate);
+  const editorConfig = getBaseEditorConfigs(translate);
   const deleteConfig = getDeleteConfigs(translate);
 
-  return (
-    <BaseDashboardItemsPage
-      title={translate('admin.dashboardItems')}
-      columns={columns}
-      importConfig={importConfig}
-      editorConfig={editorConfig}
-      deleteConfig={deleteConfig}
-      LinksComponent={renderNewDashboardVizButton}
-      {...props}
-    />
-  );
-};
-
-DashboardItemsPage.propTypes = {
-  isBESAdmin: PropTypes.bool,
-  vizBuilderBaseUrl: PropTypes.string,
-  translate: PropTypes.func.isRequired,
-};
-
-DashboardItemsPage.defaultProps = {
-  isBESAdmin: false,
-  vizBuilderBaseUrl: '',
+  return {
+    ...dashboardItems,
+    title: translate('admin.dashboardItems'),
+    columns,
+    importConfig,
+    editorConfig,
+    deleteConfig,
+    LinksComponent: renderNewDashboardVizButton,
+    needsBESAdminAccess: [],
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/DashboardRelationsPage.jsx b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getDashboardRelationsPageConfig.js
similarity index 72%
rename from packages/lesmis/src/views/AdminPanel/pages/resources/DashboardRelationsPage.jsx
rename to packages/lesmis/src/views/AdminPanel/routes/visualisations/getDashboardRelationsPageConfig.js
index 1b5683737a..61e456af09 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/DashboardRelationsPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getDashboardRelationsPageConfig.js
@@ -1,20 +1,19 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DashboardRelationsPage as BaseDashboardRelationsPage } from '@tupaia/admin-panel';
+import { dashboardRelations } from '@tupaia/admin-panel';
 import { prettyArray } from '../../utilities';
 import { getArrayFilter, getColumnFilter } from '../../table/columnTypes';
-import { getBaseEditorConfigs, getCreateConfigs, getDeleteConfigs } from '../helpers';
-import { getDeleteColumnConfigs } from '../helpers/getDeleteColumnConfigs';
+import {
+  getBaseEditorConfigs,
+  getCreateConfigs,
+  getDeleteColumnConfigs,
+  getDeleteConfigs,
+} from '../helpers';
 
-// export for use on users page
-export const DASHBOARD_RELATION_ENDPOINT = 'dashboardRelations';
-
-export const DashboardRelationsPage = ({ translate }) => {
+export const getDashboardRelationsPageConfig = translate => {
   const ArrayFilter = getArrayFilter(translate);
 
   const DASHBOARD_RELATION_COLUMNS = [
@@ -95,33 +94,29 @@ export const DashboardRelationsPage = ({ translate }) => {
       type: 'edit',
       actionConfig: {
         title: translate('admin.edit'),
-        editEndpoint: DASHBOARD_RELATION_ENDPOINT,
+        editEndpoint: dashboardRelations.endpoint,
         fields: DASHBOARD_RELATION_COLUMNS,
       },
     },
-    getDeleteColumnConfigs(DASHBOARD_RELATION_ENDPOINT, translate),
+    getDeleteColumnConfigs(dashboardRelations.endpoint, translate),
   ];
 
   const createConfig = getCreateConfigs(translate, {
     actionConfig: {
-      editEndpoint: DASHBOARD_RELATION_ENDPOINT,
+      editEndpoint: dashboardRelations.endpoint,
       fields: DASHBOARD_RELATION_COLUMNS,
     },
   });
   const editorConfig = getBaseEditorConfigs(translate);
   const deleteConfig = getDeleteConfigs(translate);
 
-  return (
-    <BaseDashboardRelationsPage
-      title={translate('admin.dashboardRelations')}
-      columns={FIELDS}
-      createConfig={createConfig}
-      editorConfig={editorConfig}
-      deleteConfig={deleteConfig}
-    />
-  );
-};
-
-DashboardRelationsPage.propTypes = {
-  translate: PropTypes.func.isRequired,
+  return {
+    ...dashboardRelations,
+    title: translate('admin.dashboardRelations'),
+    endpoint: dashboardRelations.endpoint,
+    columns: FIELDS,
+    createConfig,
+    editorConfig,
+    deleteConfig,
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/DashboardsPage.jsx b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getDashboardsPageConfig.js
similarity index 72%
rename from packages/lesmis/src/views/AdminPanel/pages/resources/DashboardsPage.jsx
rename to packages/lesmis/src/views/AdminPanel/routes/visualisations/getDashboardsPageConfig.js
index 9f5596471f..cea9fd087c 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/DashboardsPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getDashboardsPageConfig.js
@@ -1,18 +1,18 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DashboardsPage as BaseDashboardsPage } from '@tupaia/admin-panel';
-import { getCreateConfigs, getDeleteConfigs, getEditorConfigs } from '../helpers';
+import { dashboards } from '@tupaia/admin-panel';
+import {
+  getBaseEditorConfigs,
+  getCreateConfigs,
+  getDeleteColumnConfigs,
+  getDeleteConfigs,
+} from '../helpers';
 import { getColumnFilter } from '../../table/columnTypes';
-import { getDeleteColumnConfigs } from '../helpers/getDeleteColumnConfigs';
 
-const DASHBOARDS_ENDPOINT = 'dashboards';
-
-export const DashboardsPage = ({ translate }) => {
+export const getDashboardsPageConfig = translate => {
   const FIELDS = [
     {
       Header: translate('admin.code'),
@@ -53,10 +53,10 @@ export const DashboardsPage = ({ translate }) => {
       actionConfig: {
         title: translate('admin.edit'),
         editEndpoint: 'dashboards',
-        fields: [...FIELDS],
+        fields: FIELDS,
       },
     },
-    getDeleteColumnConfigs(DASHBOARDS_ENDPOINT, translate),
+    getDeleteColumnConfigs(dashboards.endpoint, translate),
   ];
 
   const RELATION_FIELDS = [
@@ -118,35 +118,26 @@ export const DashboardsPage = ({ translate }) => {
     },
   ];
 
-  const expansionConfig = [
-    {
-      title: translate('admin.dashboardRelations'),
-      columns: RELATION_COLUMNS,
-      endpoint: 'dashboards/{id}/dashboardRelations',
-    },
-  ];
-
   const createConfig = getCreateConfigs(translate, {
     actionConfig: {
-      editEndpoint: DASHBOARDS_ENDPOINT,
+      editEndpoint: dashboards.endpoint,
       fields: FIELDS,
     },
   });
-  const editorConfig = getEditorConfigs(translate);
+  const editorConfig = getBaseEditorConfigs(translate);
   const deleteConfig = getDeleteConfigs(translate);
 
-  return (
-    <BaseDashboardsPage
-      title={translate('admin.dashboards')}
-      columns={COLUMNS}
-      expansionTabs={expansionConfig}
-      createConfig={createConfig}
-      editorConfig={editorConfig}
-      deleteConfig={deleteConfig}
-    />
-  );
-};
-
-DashboardsPage.propTypes = {
-  translate: PropTypes.func.isRequired,
+  return {
+    ...dashboards,
+    columns: COLUMNS,
+    createConfig,
+    editorConfig,
+    deleteConfig,
+    needsBESAdminAccess: [],
+    nestedView: {
+      ...dashboards.nestedView,
+      title: translate('admin.dashboardRelations'),
+      columns: RELATION_COLUMNS,
+    },
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/routes/visualisations/getDataTablesPageConfig.js b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getDataTablesPageConfig.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/MapOverlayGroupRelationsPage.jsx b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getMapOverlayGroupRelationsPageConfig.js
similarity index 68%
rename from packages/lesmis/src/views/AdminPanel/pages/resources/MapOverlayGroupRelationsPage.jsx
rename to packages/lesmis/src/views/AdminPanel/routes/visualisations/getMapOverlayGroupRelationsPageConfig.js
index 03dc822c24..6ab0746086 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/MapOverlayGroupRelationsPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getMapOverlayGroupRelationsPageConfig.js
@@ -1,18 +1,17 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MapOverlayGroupRelationsPage as BaseMapOverlayGroupRelationsPage } from '@tupaia/admin-panel';
-import { getBaseEditorConfigs, getCreateConfigs, getDeleteConfigs } from '../helpers';
+import { mapOverlayGroupRelations } from '@tupaia/admin-panel';
 import { getColumnFilter } from '../../table/columnTypes';
-import { getDeleteColumnConfigs } from '../helpers/getDeleteColumnConfigs';
-
-export const RELATION_ENDPOINT = 'mapOverlayGroupRelations';
+import {
+  getBaseEditorConfigs,
+  getCreateConfigs,
+  getDeleteColumnConfigs,
+  getDeleteConfigs,
+} from '../helpers';
 
-export const MapOverlayGroupRelationsPage = ({ translate }) => {
+export const getMapOverlayGroupRelationsPageConfig = translate => {
   const FIELDS = [
     {
       Header: translate('admin.code'),
@@ -84,24 +83,18 @@ export const MapOverlayGroupRelationsPage = ({ translate }) => {
   const editorConfig = getBaseEditorConfigs(translate);
   const createConfig = getCreateConfigs(translate, {
     actionConfig: {
-      editEndpoint: RELATION_ENDPOINT,
+      editEndpoint: mapOverlayGroupRelations.endpoint,
       fields: FIELDS,
     },
   });
   const deleteConfig = getDeleteConfigs(translate);
 
-  return (
-    <BaseMapOverlayGroupRelationsPage
-      title={translate('admin.mapOverlayGroupRelations')}
-      endpoint="mapOverlayGroupRelations"
-      columns={COLUMNS}
-      createConfig={createConfig}
-      editorConfig={editorConfig}
-      deleteConfig={deleteConfig}
-    />
-  );
-};
-
-MapOverlayGroupRelationsPage.propTypes = {
-  translate: PropTypes.func.isRequired,
+  return {
+    ...mapOverlayGroupRelations,
+    title: translate('admin.mapOverlayGroupRelations'),
+    columns: COLUMNS,
+    editorConfig,
+    createConfig,
+    deleteConfig,
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/MapOverlayGroupsPage.jsx b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getMapOverlayGroupsPageConfig.js
similarity index 73%
rename from packages/lesmis/src/views/AdminPanel/pages/resources/MapOverlayGroupsPage.jsx
rename to packages/lesmis/src/views/AdminPanel/routes/visualisations/getMapOverlayGroupsPageConfig.js
index 3fee537296..534966137e 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/MapOverlayGroupsPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getMapOverlayGroupsPageConfig.js
@@ -1,17 +1,13 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MapOverlayGroupsPage as BaseMapOverlayGroupsPage } from '@tupaia/admin-panel';
-import { getBaseEditorConfigs, getCreateConfigs } from '../helpers';
+import { mapOverlayGroups } from '@tupaia/admin-panel';
 import { getColumnFilter } from '../../table/columnTypes';
+import { getBaseEditorConfigs, getCreateConfigs } from '../helpers';
 
-const MAP_OVERLAY_GROUPS_ENDPOINT = 'mapOverlayGroups';
-
-export const MapOverlayGroupsPage = ({ translate }) => {
+export const getMapOverlayGroupsPageConfig = translate => {
   const EDIT_FIELDS = [
     {
       Header: translate('admin.code'),
@@ -43,7 +39,6 @@ export const MapOverlayGroupsPage = ({ translate }) => {
     {
       Header: translate('admin.edit'),
       type: 'edit',
-      source: 'id',
       actionConfig: {
         title: translate('admin.edit'),
         editEndpoint: 'mapOverlayGroups',
@@ -104,34 +99,24 @@ export const MapOverlayGroupsPage = ({ translate }) => {
     },
   ];
 
-  const expansionConfig = [
-    {
-      title: translate('admin.mapOverlayGroupRelations'),
-      columns: RELATION_COLUMNS,
-      endpoint: 'mapOverlayGroups/{id}/mapOverlayGroupRelations',
-    },
-  ];
-
   const editorConfig = getBaseEditorConfigs(translate);
   const createConfig = getCreateConfigs(translate, {
     actionConfig: {
-      editEndpoint: MAP_OVERLAY_GROUPS_ENDPOINT,
+      editEndpoint: mapOverlayGroups.endpoint,
       fields: EDIT_FIELDS,
     },
   });
 
-  return (
-    <BaseMapOverlayGroupsPage
-      title={translate('admin.mapOverlayGroups')}
-      endpoint={MAP_OVERLAY_GROUPS_ENDPOINT}
-      columns={COLUMNS}
-      expansionTabs={expansionConfig}
-      createConfig={createConfig}
-      editorConfig={editorConfig}
-    />
-  );
-};
-
-MapOverlayGroupsPage.propTypes = {
-  translate: PropTypes.func.isRequired,
+  return {
+    ...mapOverlayGroups,
+    title: translate('admin.mapOverlayGroups'),
+    columns: COLUMNS,
+    editorConfig,
+    createConfig,
+    nestedView: {
+      ...mapOverlayGroups.nestedView,
+      title: translate('admin.mapOverlayGroupRelations'),
+      columns: RELATION_COLUMNS,
+    },
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/pages/resources/MapOverlaysPage.jsx b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getMapOverlaysPageConfig.jsx
similarity index 69%
rename from packages/lesmis/src/views/AdminPanel/pages/resources/MapOverlaysPage.jsx
rename to packages/lesmis/src/views/AdminPanel/routes/visualisations/getMapOverlaysPageConfig.jsx
index 3e3a36425f..a7fa5ef442 100644
--- a/packages/lesmis/src/views/AdminPanel/pages/resources/MapOverlaysPage.jsx
+++ b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getMapOverlaysPageConfig.jsx
@@ -1,35 +1,21 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2022 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-
 import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { LightOutlinedButton } from '@tupaia/ui-components';
-import { MapOverlaysPage as BaseMapOverlaysPage } from '@tupaia/admin-panel';
-import AddCircleIcon from '@material-ui/icons/AddCircle';
+import { mapOverlays, ActionButton } from '@tupaia/admin-panel';
 import { Link } from 'react-router-dom';
-import { prettyArray } from '../../utilities';
+import { AddCircle } from '@material-ui/icons';
 import { getArrayFilter, getBooleanSelectFilter, getColumnFilter } from '../../table/columnTypes';
-import { getImportConfigs } from '../helpers/getImportConfigs';
-import { getBaseEditorConfigs, getDeleteConfigs } from '../helpers';
-import { getDeleteColumnConfigs } from '../helpers/getDeleteColumnConfigs';
-
-const StyledLink = styled(Link)`
-  text-decoration: none;
-  &:focus,
-  &:hover,
-  &:visited,
-  &:link,
-  &:active {
-    text-decoration: none;
-  }
-`;
-
-export const MAP_OVERLAYS_ENDPOINT = 'mapOverlays';
+import { prettyArray } from '../../utilities';
+import {
+  getBaseEditorConfigs,
+  getDeleteColumnConfigs,
+  getDeleteConfigs,
+  getImportConfigs,
+} from '../helpers';
 
-export const MapOverlaysPage = ({ isBESAdmin, vizBuilderBaseUrl, translate }) => {
+export const getMapOverlaysPageConfig = (translate, adminUrl, isBESAdmin) => {
   const FIELDS = [
     {
       Header: translate('admin.code'),
@@ -63,7 +49,7 @@ export const MapOverlaysPage = ({ isBESAdmin, vizBuilderBaseUrl, translate }) =>
       Cell: ({ value }) => prettyArray(value),
       Filter: getArrayFilter(translate),
       editConfig: {
-        optionsEndpoint: MAP_OVERLAYS_ENDPOINT,
+        optionsEndpoint: mapOverlays.endpoint,
         optionLabelKey: 'id',
         sourceKey: 'linked_measures',
         allowMultipleValues: true,
@@ -136,7 +122,7 @@ export const MapOverlaysPage = ({ isBESAdmin, vizBuilderBaseUrl, translate }) =>
       editConfig: {
         type: 'link',
         linkOptions: {
-          path: `${vizBuilderBaseUrl}/viz-builder/map-overlay/:id`,
+          path: `${adminUrl}/viz-builder/map-overlay/:id`,
           parameters: { id: 'id' },
         },
         visibilityCriteria: {
@@ -150,7 +136,6 @@ export const MapOverlaysPage = ({ isBESAdmin, vizBuilderBaseUrl, translate }) =>
     ...FIELDS,
     {
       Header: translate('admin.export'),
-      source: 'id',
       type: 'export',
       actionConfig: {
         exportEndpoint: 'mapOverlayVisualisation',
@@ -163,11 +148,11 @@ export const MapOverlaysPage = ({ isBESAdmin, vizBuilderBaseUrl, translate }) =>
       source: 'id',
       actionConfig: {
         title: translate('admin.edit'),
-        editEndpoint: MAP_OVERLAYS_ENDPOINT,
+        editEndpoint: mapOverlays.endpoint,
         fields: [...FIELDS, ...extraEditFields],
       },
     },
-    getDeleteColumnConfigs(MAP_OVERLAYS_ENDPOINT, translate),
+    getDeleteColumnConfigs(mapOverlays.endpoint, translate),
   ];
 
   const importConfig = getImportConfigs(translate, {
@@ -182,7 +167,7 @@ export const MapOverlaysPage = ({ isBESAdmin, vizBuilderBaseUrl, translate }) =>
         {response.importedVizes.map(({ code, id }) => (
           <p>
             <span>{`${code}: `}</span>
-            <Link to={`${vizBuilderBaseUrl}/viz-builder/map-overlay/${id}`}>
+            <Link to={`${adminUrl}/viz-builder/map-overlay/${id}`}>
               View in Visualisation Builder
             </Link>
           </p>
@@ -192,35 +177,24 @@ export const MapOverlaysPage = ({ isBESAdmin, vizBuilderBaseUrl, translate }) =>
   });
 
   const renderNewMapOverlayVizButton = () => (
-    <StyledLink to={`${vizBuilderBaseUrl}/viz-builder/map-overlay/new`}>
-      <LightOutlinedButton startIcon={<AddCircleIcon />}>
-        {translate('admin.new')}
-      </LightOutlinedButton>
-    </StyledLink>
+    <ActionButton
+      startIcon={<AddCircle />}
+      to={`${adminUrl}/viz-builder/map-overlay/new`}
+      component={Link}
+    >
+      {translate('admin.new')}
+    </ActionButton>
   );
   const editorConfig = getBaseEditorConfigs(translate);
   const deleteConfig = getDeleteConfigs(translate);
-
-  return (
-    <BaseMapOverlaysPage
-      title={translate('admin.mapOverlays')}
-      endpoint="mapOverlays"
-      columns={COLUMNS}
-      importConfig={importConfig}
-      editorConfig={editorConfig}
-      deleteConfig={deleteConfig}
-      LinksComponent={renderNewMapOverlayVizButton}
-    />
-  );
-};
-
-MapOverlaysPage.propTypes = {
-  translate: PropTypes.func.isRequired,
-  isBESAdmin: PropTypes.bool,
-  vizBuilderBaseUrl: PropTypes.string,
-};
-
-MapOverlaysPage.defaultProps = {
-  isBESAdmin: false,
-  vizBuilderBaseUrl: '',
+  return {
+    ...mapOverlays,
+    title: translate('admin.mapOverlays'),
+    columns: COLUMNS,
+    importConfig,
+    LinksComponent: renderNewMapOverlayVizButton,
+    editorConfig,
+    deleteConfig,
+    needsBESAdminAccess: [],
+  };
 };
diff --git a/packages/lesmis/src/views/AdminPanel/routes/visualisations/getVisualisationsTabsRoutes.js b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getVisualisationsTabsRoutes.js
new file mode 100644
index 0000000000..d516898438
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/visualisations/getVisualisationsTabsRoutes.js
@@ -0,0 +1,28 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import { visualisationsTabRoutes, dataTables } from '@tupaia/admin-panel';
+import { getDashboardItemsPageConfig } from './getDashboardItemsPageConfig';
+import { getDashboardsPageConfig } from './getDashboardsPageConfig';
+import { getDashboardRelationsPageConfig } from './getDashboardRelationsPageConfig';
+import { getMapOverlaysPageConfig } from './getMapOverlaysPageConfig';
+import { getMapOverlayGroupsPageConfig } from './getMapOverlayGroupsPageConfig';
+import { getMapOverlayGroupRelationsPageConfig } from './getMapOverlayGroupRelationsPageConfig';
+
+export const getVisualisationsTabsRoutes = (translate, adminUrl, isBESAdmin) => ({
+  ...visualisationsTabRoutes,
+  label: translate('admin.visualisations'),
+  childViews: [
+    getDashboardItemsPageConfig(translate, adminUrl, isBESAdmin),
+    getDashboardsPageConfig(translate),
+    getDashboardRelationsPageConfig(translate),
+    getMapOverlaysPageConfig(translate, adminUrl, isBESAdmin),
+    getMapOverlayGroupsPageConfig(translate),
+    getMapOverlayGroupRelationsPageConfig(translate),
+    {
+      ...dataTables,
+      isBESAdminOnly: false,
+    },
+  ],
+});
diff --git a/packages/lesmis/src/views/AdminPanel/routes/visualisations/index.js b/packages/lesmis/src/views/AdminPanel/routes/visualisations/index.js
new file mode 100644
index 0000000000..b1c3ae4f47
--- /dev/null
+++ b/packages/lesmis/src/views/AdminPanel/routes/visualisations/index.js
@@ -0,0 +1,6 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { getVisualisationsTabsRoutes } from './getVisualisationsTabsRoutes';
diff --git a/packages/lesmis/src/views/EntityView.jsx b/packages/lesmis/src/views/EntityView.jsx
index cb725eba07..4a0144a3ff 100644
--- a/packages/lesmis/src/views/EntityView.jsx
+++ b/packages/lesmis/src/views/EntityView.jsx
@@ -4,7 +4,7 @@
  *
  */
 import React, { useState } from 'react';
-import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
+import { Route, Routes, Navigate } from 'react-router-dom';
 import { LocationHeader, Toolbar, Breadcrumbs, Footer, FlexSpaceBetween } from '../components';
 import { DashboardView } from './DashboardView';
 import { MapView } from './MapView';
@@ -13,10 +13,11 @@ import { LocaleMenu } from '../components/LocaleMenu';
 
 export const EntityView = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const match = useRouteMatch();
   const { locale, entityCode, view } = useUrlParams();
   const { breadcrumbs, isLoading } = useEntityBreadcrumbs();
 
+  const redirectPath = `/${locale}/${entityCode}/dashboard`;
+
   return (
     <>
       <Toolbar>
@@ -26,15 +27,14 @@ export const EntityView = () => {
         </FlexSpaceBetween>
       </Toolbar>
       <LocationHeader setIsOpen={setIsOpen} />
-      <Switch>
-        <Route path={`${match.path}/dashboard`}>
-          <DashboardView isOpen={isOpen} setIsOpen={setIsOpen} />
-        </Route>
-        <Route path={`${match.path}/map`}>
-          <MapView />
-        </Route>
-        <Redirect to={`/${locale}/${entityCode}/dashboard`} />
-      </Switch>
+      <Routes>
+        <Route
+          path="/dashboard"
+          element={<DashboardView isOpen={isOpen} setIsOpen={setIsOpen} />}
+        />
+        <Route path="/map" element={<MapView />} />
+        <Route path="*" element={<Navigate to={redirectPath} />} />
+      </Routes>
       {view !== 'map' && <Footer />}
     </>
   );
diff --git a/packages/lesmis/src/views/LoginView.jsx b/packages/lesmis/src/views/LoginView.jsx
index 0ae8d9361f..f9182029cd 100644
--- a/packages/lesmis/src/views/LoginView.jsx
+++ b/packages/lesmis/src/views/LoginView.jsx
@@ -43,20 +43,22 @@ const StyledLocaleLink = styled(LocaleLink)`
   text-decoration: none;
 `;
 
-export const LoginView = () => (
-  <Container>
-    <FormBackButton />
-    <StyledImg src="/lesmis-login-logo.svg" alt="lesmis-logo" />
-    <StyledCard>
-      <LoginForm />
-    </StyledCard>
-    <FlexCenter mb={4}>
-      <Text color="textSecondary">
-        <I18n t="login.dontHaveAccess" />
-      </Text>
-      <StyledLocaleLink to="/register" color="primary">
-        <I18n t="login.registerHere" />
-      </StyledLocaleLink>
-    </FlexCenter>
-  </Container>
-);
+export const LoginView = () => {
+  return (
+    <Container>
+      <FormBackButton />
+      <StyledImg src="/lesmis-login-logo.svg" alt="lesmis-logo" />
+      <StyledCard>
+        <LoginForm />
+      </StyledCard>
+      <FlexCenter mb={4}>
+        <Text color="textSecondary">
+          <I18n t="login.dontHaveAccess" />
+        </Text>
+        <StyledLocaleLink to="/register" color="primary">
+          <I18n t="login.registerHere" />
+        </StyledLocaleLink>
+      </FlexCenter>
+    </Container>
+  );
+};
diff --git a/packages/lesmis/src/views/NotAuthorisedView.jsx b/packages/lesmis/src/views/NotAuthorisedView.jsx
index 62258ec587..1b2072c4a4 100644
--- a/packages/lesmis/src/views/NotAuthorisedView.jsx
+++ b/packages/lesmis/src/views/NotAuthorisedView.jsx
@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import styled from 'styled-components';
-import { Link as RouterLink, useHistory } from 'react-router-dom';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
 import { Button } from '@tupaia/ui-components';
 import Typography from '@material-ui/core/Typography';
 import { NotAuthorised as NotAuthorisedIcon } from '../components/Icons/NotAuthorised';
@@ -33,7 +33,7 @@ const Text = styled(Typography)`
 `;
 
 export const NotAuthorisedView = () => {
-  const history = useHistory();
+  const location = useLocation();
   const { locale } = useUrlParams();
   const { isLoading, isLoggedIn } = useUser();
 
@@ -56,10 +56,8 @@ export const NotAuthorisedView = () => {
         {!isLoggedIn && !isLoading && (
           <Button
             component={RouterLink}
-            to={{
-              pathname: `/${locale}/login`,
-              state: { referer: history.location },
-            }}
+            to={`/${locale}/login`}
+            state={{ referer: `${location.pathname}${location.search}` }}
           >
             Login
           </Button>
diff --git a/packages/lesmis/src/views/VerifyEmailView.jsx b/packages/lesmis/src/views/VerifyEmailView.jsx
index d04b6d07c9..3068a78295 100644
--- a/packages/lesmis/src/views/VerifyEmailView.jsx
+++ b/packages/lesmis/src/views/VerifyEmailView.jsx
@@ -3,12 +3,12 @@
  *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
 import React from 'react';
-import { Redirect, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom';
 import { useUrlParams } from '../utils';
 
 export const VerifyEmailView = () => {
   const { locale } = useUrlParams();
   const location = useLocation();
 
-  return <Redirect to={{ ...location, pathname: `/${locale}/login` }} />;
+  return <Navigate to={{ ...location, pathname: `/${locale}/login` }} />;
 };
diff --git a/packages/ui-components/src/components/Breadcrumbs.tsx b/packages/ui-components/src/components/Breadcrumbs.tsx
index 302aaf1d74..b9b3abfcb8 100644
--- a/packages/ui-components/src/components/Breadcrumbs.tsx
+++ b/packages/ui-components/src/components/Breadcrumbs.tsx
@@ -50,7 +50,7 @@ This is a workaround for a typescript error that appears because of the 'compone
 
  */
 const LinkRef = React.forwardRef<HTMLAnchorElement, ReactRouterLinkProps>((props, ref) => (
-  <RouterLink innerRef={ref} {...props} />
+  <RouterLink ref={ref} {...props} />
 ));
 
 const Link = (props: MuiLinkProps & ReactRouterLinkProps) => (
diff --git a/yarn.lock b/yarn.lock
index b3df1a72c6..e63bdcfb4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11785,9 +11785,10 @@ __metadata:
     react-password-strength-bar: ^0.3.2
     react-query: ^3.19.0
     react-redux: ^5.0.6
-    react-router-dom: ^5.2.0
+    react-router: 6.3.0
+    react-router-dom: 6.3.0
     react-select: ^1.2.1
-    react-table-v6: "npm:react-table@^6.7.6"
+    react-table: ^7.8.0
     reactstrap: ^5.0.0
     redux: ^3.7.2
     redux-auth-wrapper: ^2.0.1
@@ -12243,7 +12244,8 @@ __metadata:
     react-password-strength-bar: ^0.3.3
     react-query: ^3.19.0
     react-redux: ^5.0.6
-    react-router-dom: ^5.2.0
+    react-router: 6.3.0
+    react-router-dom: 6.3.0
     styled-components: ^5.1.0
     vite: ^4.5.3
   languageName: unknown
@@ -13908,15 +13910,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-table@npm:^6.8.5":
-  version: 6.8.10
-  resolution: "@types/react-table@npm:6.8.10"
-  dependencies:
-    "@types/react": "*"
-  checksum: 2f8fcbe195c53b2685f403f5d66c09b60917d3af7ec9e29f8b3ecdc748eb6db5a93b4aecaaed4910ff33671a8745da2c34184b445cd184ad504b0240be994029
-  languageName: node
-  linkType: hard
-
 "@types/react-table@npm:^7.7.14":
   version: 7.7.14
   resolution: "@types/react-table@npm:7.7.14"
@@ -36866,7 +36859,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^5.1.2, react-router-dom@npm:^5.2.0":
+"react-router-dom@npm:^5.1.2":
   version: 5.2.0
   resolution: "react-router-dom@npm:5.2.0"
   dependencies:
@@ -36982,21 +36975,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-table-v6@npm:react-table@^6.7.6":
-  version: 6.11.5
-  resolution: "react-table@npm:6.11.5"
-  dependencies:
-    "@types/react-table": ^6.8.5
-    classnames: ^2.2.5
-    react-is: ^16.8.1
-  peerDependencies:
-    prop-types: ^15.7.0
-    react: ^16.x.x
-    react-dom: ^16.x.x
-  checksum: dda0e7f661664fe7e6331a2b518772160923195c6b9beb56f937cc1d617690d4124e31d4d4c6c1b9068f57b59ae00ae3b35c82a04f633ca2cfd2de83d5fd6da2
-  languageName: node
-  linkType: hard
-
 "react-table@npm:^7.7.0":
   version: 7.7.0
   resolution: "react-table@npm:7.7.0"
@@ -37006,6 +36984,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-table@npm:^7.8.0":
+  version: 7.8.0
+  resolution: "react-table@npm:7.8.0"
+  peerDependencies:
+    react: ^16.8.3 || ^17.0.0-0 || ^18.0.0
+  checksum: 44ca0fb848c6869cd793cede8dc33072b38ebb8f8d2833565afe7cf3eac5d1fa455ac5fb9d06838b16fab0523d5d03e3e82f7645032f71245096e67b892313b9
+  languageName: node
+  linkType: hard
+
 "react-test-renderer@npm:18.2.0":
   version: 18.2.0
   resolution: "react-test-renderer@npm:18.2.0"

From a37825cac5b6463567110c286bae938449e34a29 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Thu, 9 May 2024 09:49:37 +1200
Subject: [PATCH 02/26] tweak(adminPanel): RN-1292: Update hover styling for
 admin nav panel (#5623)

* tweak(adminPanel): RN-1292: Update hover styling for admin nav panel

* Update packages/admin-panel/src/layout/navigation/NavPanel.jsx

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>

---------

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
---
 packages/admin-panel/src/layout/navigation/NavPanel.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/admin-panel/src/layout/navigation/NavPanel.jsx b/packages/admin-panel/src/layout/navigation/NavPanel.jsx
index dea420c8e0..1ec9b1f46f 100644
--- a/packages/admin-panel/src/layout/navigation/NavPanel.jsx
+++ b/packages/admin-panel/src/layout/navigation/NavPanel.jsx
@@ -47,8 +47,11 @@ const NavLink = styled(BaseNavLink)`
   &.active {
     background-color: ${WHITE}33; // 33 is 20% opacity
   }
-  &:hover,
-  &:focus {
+  &:hover {
+    background-color: ${WHITE}18; //  18 is 10% opacity
+  }
+  &:focus,
+  &:focus-visible {
     border-color: ${WHITE};
   }
 `;

From b6c3c2d2b5995443aaf478e7b6d949c6da653ee6 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Thu, 9 May 2024 09:49:44 +1200
Subject: [PATCH 03/26] tweak(adminPanel): RN-1298: Remove home link hover
 state (#5624)

* tweak(adminPanel): RN-1298: Remove home link hover state

* Update packages/admin-panel/src/layout/navigation/HomeLink.jsx

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>

---------

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
---
 packages/admin-panel/src/layout/navigation/HomeLink.jsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/admin-panel/src/layout/navigation/HomeLink.jsx b/packages/admin-panel/src/layout/navigation/HomeLink.jsx
index 5585f1477d..950e4705b9 100644
--- a/packages/admin-panel/src/layout/navigation/HomeLink.jsx
+++ b/packages/admin-panel/src/layout/navigation/HomeLink.jsx
@@ -20,10 +20,8 @@ const Link = styled(BaseLink)`
     height: 100%;
     max-height: 100%;
   }
-  &:hover {
-    background-color: ${WHITE}33; // 33 is 20% opacity
-  }
-  &:focus {
+  &:focus,
+  &:focus-visible {
     border-color: ${WHITE};
   }
 `;

From c3f19bdb85112aeb2e958b7439a3ccb096855ae1 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Fri, 10 May 2024 08:26:34 +1200
Subject: [PATCH 04/26] tweak(adminPanel): RN-1192: General modal styling
 updates (#5622)

* WIP

* WIP

* WIP

* WIP

* WIP

* Remove old confirm delete modal

* Match modal styling

* Match heading styles

* resusable centred content

* Update packages/admin-panel/src/qrCode/QrCodeModal.jsx

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>

---------

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
---
 .../DataLibrary/component/InputField.jsx      |   3 -
 .../DataLibrary/component/TransformModal.jsx  |   4 +-
 .../components/Modal/EditModal.jsx            |  17 +-
 .../Modal/SaveVisualisationModal.jsx          | 104 +++++------
 .../components/PreviewSection.jsx             |   1 -
 packages/admin-panel/src/editor/EditModal.jsx |  76 ++++----
 .../src/importExport/ExportModal.jsx          | 100 ++++++-----
 .../src/importExport/ImportModal.jsx          | 167 +++++++++---------
 packages/admin-panel/src/library.js           |   9 +-
 .../admin-panel/src/logsTable/LogsModal.jsx   |  45 +++--
 .../admin-panel/src/pages/ProfilePage.jsx     |   4 -
 .../resources/PermissionGroupsViewerPage.jsx  |   7 +-
 .../src/pages/resources/TreeResourcePage.jsx  |   7 +-
 .../admin-panel/src/qrCode/QrCodeModal.jsx    |  22 +--
 .../src/routes/projects/landingPages.jsx      |   8 -
 .../src/routes/projects/projects.js           |   8 -
 .../src/routes/visualisations/socialFeed.jsx  |   4 -
 .../src/surveyResponse/FileQuestionField.jsx  |  50 +++---
 .../admin-panel/src/surveyResponse/Form.jsx   |  10 +-
 .../ResubmitSurveyResponseModal.jsx           |  11 +-
 .../DataFetchingTable/DataFetchingTable.jsx   |  21 ++-
 packages/admin-panel/src/theme/colors.js      |   3 +-
 packages/admin-panel/src/theme/theme.js       |  32 +++-
 .../src/widgets/ConfirmDeleteModal.jsx        |  68 +++++++
 .../src/widgets/InputField/JsonInputField.jsx |   7 +-
 .../InputField/registerInputFields.jsx        |   1 -
 .../admin-panel/src/widgets/Modal/Modal.jsx   |  95 ++++++++++
 .../widgets/Modal/ModalCenteredContent.jsx    |  13 ++
 .../{ => Modal}/ModalContentProvider.jsx      |  19 +-
 .../src/widgets/Modal/ModalHeader.jsx         |  48 +++++
 .../admin-panel/src/widgets/Modal/index.js    |   9 +
 packages/admin-panel/src/widgets/index.js     |   9 +-
 .../src/features/Questions/PhotoQuestion.tsx  |   1 -
 .../Reports/Inputs/EntityLevelInput.tsx       |   1 -
 .../AdminPanel/components/RejectButton.jsx    |  86 +++++++--
 .../psss/src/views/Tabs/ProfileTabView.jsx    |   4 -
 packages/tupaia-web/src/theme/theme.ts        |   9 +
 .../ui-components/src/components/Button.tsx   |   1 -
 .../src/components/ConfirmDeleteModal.tsx     |  66 -------
 .../src/components/Inputs/Autocomplete.tsx    |   3 +-
 .../src/components/Inputs/FileUploadField.tsx |   8 +-
 .../components/Inputs/ImageUploadField.tsx    |  27 +--
 .../src/components/Inputs/RadioGroup.tsx      |  19 +-
 .../src/components/Inputs/TextField.tsx       |   9 -
 .../ui-components/src/components/index.ts     |   1 -
 .../stories/confirmDeleteModal.stories.js     |  39 ----
 .../inputs/imageUploadField.stories.js        |   4 -
 47 files changed, 722 insertions(+), 538 deletions(-)
 create mode 100644 packages/admin-panel/src/widgets/ConfirmDeleteModal.jsx
 create mode 100644 packages/admin-panel/src/widgets/Modal/Modal.jsx
 create mode 100644 packages/admin-panel/src/widgets/Modal/ModalCenteredContent.jsx
 rename packages/admin-panel/src/widgets/{ => Modal}/ModalContentProvider.jsx (66%)
 create mode 100644 packages/admin-panel/src/widgets/Modal/ModalHeader.jsx
 create mode 100644 packages/admin-panel/src/widgets/Modal/index.js
 delete mode 100644 packages/ui-components/src/components/ConfirmDeleteModal.tsx
 delete mode 100644 packages/ui-components/stories/confirmDeleteModal.stories.js

diff --git a/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/InputField.jsx b/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/InputField.jsx
index 8ca6cada89..159167377c 100644
--- a/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/InputField.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/InputField.jsx
@@ -20,9 +20,6 @@ const StyledTextField = styled(TextField)`
   & .MuiInputBase-root {
     height: 40px;
   }
-  & .MuiInputBase-input {
-    font-size: 14px;
-  }
 `;
 
 export const InputField = ({ getRootProps, getInputProps, isLoading }) => (
diff --git a/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/TransformModal.jsx b/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/TransformModal.jsx
index c2418ef71a..5da6d3715a 100644
--- a/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/TransformModal.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/TransformModal.jsx
@@ -7,7 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Dialog } from '@material-ui/core';
 import styled from 'styled-components';
-import { DialogHeader } from '@tupaia/ui-components';
+import { ModalHeader } from '../../../../widgets';
 
 const Wrapper = styled.div`
   height: 80vh;
@@ -19,7 +19,7 @@ const Wrapper = styled.div`
 export const TransformModal = ({ onClose, children }) => {
   return (
     <Dialog open onClose={onClose} maxWidth={false}>
-      <DialogHeader onClose={onClose} />
+      <ModalHeader onClose={onClose} />
       <Wrapper>{children}</Wrapper>
     </Dialog>
   );
diff --git a/packages/admin-panel/src/VizBuilderApp/components/Modal/EditModal.jsx b/packages/admin-panel/src/VizBuilderApp/components/Modal/EditModal.jsx
index 28239e2cc6..50754fbf48 100644
--- a/packages/admin-panel/src/VizBuilderApp/components/Modal/EditModal.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/components/Modal/EditModal.jsx
@@ -3,17 +3,12 @@
  *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
 import React, { useState } from 'react';
-import styled from 'styled-components';
 import { useParams } from 'react-router-dom';
-import { Button, Dialog, DialogFooter, DialogHeader } from '@tupaia/ui-components';
+import { Button, Dialog } from '@tupaia/ui-components';
 import { DashboardItemMetadataForm } from '../DashboardItem';
 import { MapOverlayMetadataForm } from '../MapOverlay';
 import { DASHBOARD_ITEM_OR_MAP_OVERLAY_PARAM } from '../../constants';
-
-export const Body = styled.div`
-  padding: 30px 20px;
-  background-color: #f9f9f9;
-`;
+import { ModalContentProvider, ModalFooter, ModalHeader } from '../../../widgets';
 
 export const EditModal = () => {
   const { dashboardItemOrMapOverlay } = useParams();
@@ -42,15 +37,15 @@ export const EditModal = () => {
       <Dialog onClose={handleClose} open={isOpen}>
         <MetadataForm
           onSubmit={handleClose}
-          Header={() => <DialogHeader onClose={handleClose} title="Edit Details" />}
-          Body={Body}
+          Header={() => <ModalHeader onClose={handleClose} title="Edit Details" />}
+          Body={ModalContentProvider}
           Footer={() => (
-            <DialogFooter>
+            <ModalFooter>
               <Button onClick={handleClose} variant="outlined">
                 Cancel
               </Button>
               <Button type="submit">Save</Button>
-            </DialogFooter>
+            </ModalFooter>
           )}
         />
       </Dialog>
diff --git a/packages/admin-panel/src/VizBuilderApp/components/Modal/SaveVisualisationModal.jsx b/packages/admin-panel/src/VizBuilderApp/components/Modal/SaveVisualisationModal.jsx
index 75bf9bb018..a23643fda6 100644
--- a/packages/admin-panel/src/VizBuilderApp/components/Modal/SaveVisualisationModal.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/components/Modal/SaveVisualisationModal.jsx
@@ -7,33 +7,19 @@ import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Link as RouterLink, useParams } from 'react-router-dom';
-import CheckCircle from '@material-ui/icons/CheckCircle';
 import Typography from '@material-ui/core/Typography';
-
-import {
-  Button,
-  ConfirmModal,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  OutlinedButton,
-} from '@tupaia/ui-components';
-
 import { DASHBOARD_ITEM_OR_MAP_OVERLAY_PARAM, MODAL_STATUS } from '../../constants';
 import { useVisualisationContext, useVizConfigContext } from '../../context';
 import { useSaveDashboardVisualisation, useSaveMapOverlayVisualisation } from '../../api';
 import { useVizBuilderBasePath } from '../../utils';
+import { Modal, ModalCenteredContent } from '../../../widgets';
 
-const TickIcon = styled(CheckCircle)`
-  font-size: 2.5rem;
-  margin-bottom: 0.3rem;
-  color: ${props => props.theme.palette.success.main};
-`;
-
-const SuccessText = styled(Typography)`
-  font-size: 1rem;
-  margin-top: 1rem;
+const Heading = styled(Typography).attrs({
+  variant: 'h3',
+})`
+  font-weight: ${props => props.theme.typography.fontWeightMedium};
+  font-size: ${props => props.theme.typography.body1.fontSize};
+  margin-bottom: 0.5rem;
 `;
 
 export const SaveVisualisationModal = ({ isOpen, onClose }) => {
@@ -81,43 +67,59 @@ export const SaveVisualisationModal = ({ isOpen, onClose }) => {
   }
 
   if (status === MODAL_STATUS.SUCCESS) {
+    const buttons = [
+      {
+        text: 'Stay on this page',
+        onClick: handleClose,
+        variant: 'outlined',
+      },
+      {
+        text: 'Go back to Admin Panel',
+        to: backLink,
+        component: RouterLink,
+      },
+    ];
     return (
-      <Dialog onClose={handleClose} open={isOpen}>
-        <DialogHeader onClose={handleClose} title="Save visualisation" />
-        <DialogContent>
-          <TickIcon />
-          <Typography variant="h6" gutterBottom>
-            Visualisation saved successfully
-          </Typography>
-          <SuccessText>Visualisation has been saved</SuccessText>
-        </DialogContent>
-        <DialogFooter>
-          <OutlinedButton onClick={handleClose}>Stay on this page</OutlinedButton>
-          <Button to={backLink} component={RouterLink}>
-            Go back to Admin Panel
-          </Button>
-        </DialogFooter>
-      </Dialog>
+      <Modal onClose={handleClose} isOpen={isOpen} title="Save visualisation" buttons={buttons}>
+        <ModalCenteredContent>
+          <Heading>Visualisation saved successfully</Heading>
+          <Typography>Visualisation has been saved</Typography>
+        </ModalCenteredContent>
+      </Modal>
     );
   }
 
   return (
-    <ConfirmModal
-      onClose={onClose}
+    <Modal
+      onClose={handleClose}
       isOpen={isOpen}
-      isLoading={status === MODAL_STATUS.LOADING}
       title="Save visualisation"
-      mainText="Are you sure you want to save this visualisation?"
-      description={
-        visualisation.id
-          ? 'The previous version of this visualisation will be overwritten'
-          : `Visualisation will be created`
-      }
-      error={error && error.message}
-      actionText="Save"
-      loadingText="Saving"
-      handleAction={handleSave}
-    />
+      isLoading={status === MODAL_STATUS.LOADING}
+      errorMessage={error?.message}
+      buttons={[
+        {
+          text: 'Cancel',
+          onClick: handleClose,
+          variant: 'outlined',
+          disabled: status === MODAL_STATUS.LOADING,
+        },
+        {
+          text: 'Save',
+          onClick: handleSave,
+          color: 'primary',
+          disabled: status === MODAL_STATUS.LOADING,
+        },
+      ]}
+    >
+      <ContentWrapper>
+        <Heading>Are you sure you want to save this visualisation?</Heading>
+        <Typography>
+          {visualisation.id
+            ? 'The previous version of this visualisation will be overwritten'
+            : `Visualisation will be created`}
+        </Typography>
+      </ContentWrapper>
+    </Modal>
   );
 };
 
diff --git a/packages/admin-panel/src/VizBuilderApp/components/PreviewSection.jsx b/packages/admin-panel/src/VizBuilderApp/components/PreviewSection.jsx
index 783af2c384..cc0dba68b9 100644
--- a/packages/admin-panel/src/VizBuilderApp/components/PreviewSection.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/components/PreviewSection.jsx
@@ -37,7 +37,6 @@ const PreviewTabs = styled(MuiTabs)`
 `;
 
 const PreviewTab = styled(MuiTab)`
-  font-size: 15px;
   line-height: 140%;
   font-weight: 400;
   min-width: 100px;
diff --git a/packages/admin-panel/src/editor/EditModal.jsx b/packages/admin-panel/src/editor/EditModal.jsx
index d25bedffc8..8654966050 100644
--- a/packages/admin-panel/src/editor/EditModal.jsx
+++ b/packages/admin-panel/src/editor/EditModal.jsx
@@ -1,19 +1,19 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React, { useEffect, useState } from 'react';
 import keyBy from 'lodash.keyby';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Button, Dialog, DialogFooter, DialogHeader } from '@tupaia/ui-components';
+
 import { closeEditModal, editField, saveEdits } from './actions';
 import { getEditorState, getIsUnchanged } from './selectors';
 import { Editor } from './Editor';
-import { ModalContentProvider } from '../widgets';
 import { UsedBy } from '../usedBy/UsedBy';
 import { getExplodedFields } from '../utilities';
+import { Modal } from '../widgets';
 
 const getFieldSourceToEdit = field => {
   const { source, editConfig = {} } = field;
@@ -69,35 +69,45 @@ export const EditModalComponent = ({
 
   const FieldsComponentResolved = FieldsComponent ?? Editor;
 
+  const buttons = [
+    {
+      onClick: onDismiss,
+      text: errorMessage ? dismissButtonText : cancelButtonText,
+      disabled: isLoading,
+      variant: 'outlined',
+      id: 'form-button-cancel',
+    },
+    {
+      onClick: () => onSave(files),
+      id: 'form-button-save',
+      text: saveButtonText,
+      disabled: !!errorMessage || isLoading || isUnchanged,
+    },
+  ];
+
   return (
-    <Dialog onClose={onDismiss} open={isOpen} disableBackdropClick {...extraDialogProps}>
-      <DialogHeader onClose={onDismiss} title={title} />
-      <ModalContentProvider errorMessage={errorMessage} isLoading={isLoading}>
-        <FieldsComponentResolved
-          fields={fields}
-          isLoading={isLoading}
-          recordData={recordData}
-          onEditField={(fieldSource, newValue) => {
-            const fieldSourceToEdit = getFieldSourceToEdit(fieldsBySource[fieldSource]);
-            return onEditField(fieldSourceToEdit, newValue);
-          }}
-          onSetFormFile={handleSetFormFile}
-        />
-        {displayUsedBy && <UsedBy {...usedByConfig} />}
-      </ModalContentProvider>
-      <DialogFooter>
-        <Button id="form-button-cancel" variant="outlined" onClick={onDismiss} disabled={isLoading}>
-          {errorMessage ? dismissButtonText : cancelButtonText}
-        </Button>
-        <Button
-          id="form-button-save"
-          onClick={() => onSave(files)}
-          disabled={!!errorMessage || isLoading || isUnchanged}
-        >
-          {saveButtonText}
-        </Button>
-      </DialogFooter>
-    </Dialog>
+    <Modal
+      errorMessage={errorMessage}
+      isLoading={isLoading}
+      onClose={onDismiss}
+      isOpen={isOpen}
+      disableBackdropClick
+      title={title}
+      buttons={buttons}
+      {...extraDialogProps}
+    >
+      <FieldsComponentResolved
+        fields={fields}
+        isLoading={isLoading}
+        recordData={recordData}
+        onEditField={(fieldSource, newValue) => {
+          const fieldSourceToEdit = getFieldSourceToEdit(fieldsBySource[fieldSource]);
+          return onEditField(fieldSourceToEdit, newValue);
+        }}
+        onSetFormFile={handleSetFormFile}
+      />
+      {displayUsedBy && <UsedBy {...usedByConfig} />}
+    </Modal>
   );
 };
 
diff --git a/packages/admin-panel/src/importExport/ExportModal.jsx b/packages/admin-panel/src/importExport/ExportModal.jsx
index caa6593ebf..0aa9ca43de 100644
--- a/packages/admin-panel/src/importExport/ExportModal.jsx
+++ b/packages/admin-panel/src/importExport/ExportModal.jsx
@@ -1,13 +1,12 @@
 /**
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import ExportIcon from '@material-ui/icons/GetApp';
-import { Button, Dialog, DialogFooter, DialogHeader, OutlinedButton } from '@tupaia/ui-components';
-import { ModalContentProvider } from '../widgets';
+import { Modal } from '../widgets';
 import { useApiContext } from '../utilities/ApiProvider';
 import { ActionButton } from '../editor';
 
@@ -70,59 +69,66 @@ export const ExportModal = React.memo(
       }
     };
 
-    const renderButtons = useCallback(() => {
+    const getButtons = () => {
       switch (status) {
         case STATUS.TIMEOUT:
-          return (
-            <Button id="form-button-done" onClick={handleClose}>
-              Done
-            </Button>
-          );
+        case STATUS.SUCCESS:
+          return [
+            {
+              text: 'Done',
+              onClick: handleClose,
+              id: 'form-button-done',
+            },
+          ];
         case STATUS.ERROR:
-          return (
-            <>
-              <OutlinedButton id="form-button-dismiss" onClick={handleDismiss}>
-                Dismiss
-              </OutlinedButton>
-              <Button id="form-button-export" disabled>
-                {exportButtonText}
-              </Button>
-            </>
-          );
+          return [
+            {
+              text: 'Dismiss',
+              onClick: handleDismiss,
+              variant: 'outlined',
+              id: 'form-button-dismiss',
+            },
+            {
+              text: exportButtonText,
+              disabled: true,
+              id: 'form-button-export',
+            },
+          ];
         default:
-          return (
-            <>
-              <OutlinedButton id="form-button-cancel" onClick={handleClose}>
-                {cancelButtonText}
-              </OutlinedButton>
-              <Button
-                id="form-button-export"
-                type="submit"
-                isLoading={status === STATUS.LOADING}
-                onClick={handleSubmit}
-              >
-                {exportButtonText}
-              </Button>
-            </>
-          );
+          return [
+            {
+              text: cancelButtonText,
+              onClick: handleClose,
+              variant: 'outlined',
+              id: 'form-button-cancel',
+            },
+            {
+              text: exportButtonText,
+              disabled: status === STATUS.LOADING,
+              onClick: handleSubmit,
+              id: 'form-button-import',
+              type: 'submit',
+            },
+          ];
       }
-    }, [status, handleDismiss, handleClose, handleSubmit]);
+    };
+    const buttons = getButtons();
 
     return (
       <>
-        <Dialog onClose={handleClose} open={isOpen} disableBackdropClick>
+        <Modal
+          onClose={handleClose}
+          isOpen={isOpen}
+          disableBackdropClick
+          title={errorMessage ? 'Error' : title}
+          errorMessage={errorMessage}
+          isLoading={status === STATUS.LOADING}
+          buttons={buttons}
+        >
           <form onSubmit={handleSubmit} noValidate>
-            <DialogHeader
-              onClose={handleClose}
-              title={errorMessage ? 'Error' : title}
-              color={errorMessage ? 'error' : 'textPrimary'}
-            />
-            <ModalContentProvider errorMessage={errorMessage} isLoading={status === STATUS.LOADING}>
-              {status === STATUS.TIMEOUT ? <p>{isExportingMessage}</p> : children}
-            </ModalContentProvider>
-            <DialogFooter>{renderButtons()}</DialogFooter>
+            {status === STATUS.TIMEOUT ? <p>{isExportingMessage}</p> : children}
           </form>
-        </Dialog>
+        </Modal>
         <ActionButton
           id="page-export-button"
           startIcon={<ExportIcon />}
diff --git a/packages/admin-panel/src/importExport/ImportModal.jsx b/packages/admin-panel/src/importExport/ImportModal.jsx
index 16738759e9..c910f2fd51 100644
--- a/packages/admin-panel/src/importExport/ImportModal.jsx
+++ b/packages/admin-panel/src/importExport/ImportModal.jsx
@@ -3,20 +3,12 @@
  * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImportIcon from '@material-ui/icons/Publish';
-import {
-  Button,
-  Dialog,
-  DialogFooter,
-  DialogHeader,
-  FileUploadField,
-  LightOutlinedButton,
-  OutlinedButton,
-} from '@tupaia/ui-components';
-import { InputField, ModalContentProvider } from '../widgets';
+import { FileUploadField } from '@tupaia/ui-components';
+import { InputField, Modal } from '../widgets';
 import { useApiContext } from '../utilities/ApiProvider';
 import { DATA_CHANGE_ERROR, DATA_CHANGE_REQUEST, DATA_CHANGE_SUCCESS } from '../table/constants';
 import { checkVisibilityCriteriaAreMet, labelToId } from '../utilities';
@@ -123,89 +115,98 @@ export const ImportModalComponent = React.memo(
         ? 'Request timed out, but may have still succeeded. Please wait 2 minutes and check to see if the data has changed'
         : errorMessage;
 
-    const renderButtons = useCallback(() => {
+    const getButtons = () => {
       switch (status) {
         case STATUS.TIMEOUT:
         case STATUS.SUCCESS:
-          return <Button onClick={handleClose}>Done</Button>;
+          return [
+            {
+              text: 'Done',
+              onClick: handleClose,
+            },
+          ];
         case STATUS.ERROR:
-          return (
-            <>
-              <OutlinedButton onClick={handleDismiss}>Dismiss</OutlinedButton>
-              <Button disabled>{confirmButtonText}</Button>
-            </>
-          );
+          return [
+            {
+              text: 'Dismiss',
+              onClick: handleDismiss,
+              variant: 'outlined',
+            },
+            {
+              text: confirmButtonText,
+              disabled: true,
+            },
+          ];
         default:
-          return (
-            <>
-              <OutlinedButton id="form-button-cancel" onClick={handleClose}>
-                {cancelButtonText}
-              </OutlinedButton>
-              <Button
-                id="form-button-import"
-                type="submit"
-                disabled={files.length === 0}
-                isLoading={status === STATUS.LOADING}
-                onClick={handleSubmit}
-              >
-                {confirmButtonText}
-              </Button>
-            </>
-          );
+          return [
+            {
+              text: cancelButtonText,
+              onClick: handleClose,
+              variant: 'outlined',
+              id: 'form-button-cancel',
+            },
+            {
+              text: confirmButtonText,
+              disabled: files.length === 0 || status === STATUS.LOADING,
+              isLoading: status === STATUS.LOADING,
+              onClick: handleSubmit,
+              id: 'form-button-import',
+              type: 'submit',
+            },
+          ];
       }
-    }, [status, files, handleDismiss, handleClose, handleSubmit]);
+    };
+
+    const buttons = getButtons();
 
     return (
       <>
-        <Dialog onClose={handleClose} open={isOpen} disableBackdropClick>
+        <Modal
+          onClose={handleClose}
+          isOpen={isOpen}
+          disableBackdropClick
+          title={fileErrorMessage ? 'Error' : title}
+          errorMessage={fileErrorMessage}
+          isLoading={status === STATUS.LOADING}
+          buttons={buttons}
+        >
           <form>
-            <DialogHeader
-              onClose={handleClose}
-              title={fileErrorMessage ? 'Error' : title}
-              color={fileErrorMessage ? 'error' : 'textPrimary'}
-            />
-            <ModalContentProvider
-              errorMessage={fileErrorMessage}
-              isLoading={status === STATUS.LOADING}
-            >
-              {finishedMessage ? (
-                <>{finishedMessage}</>
-              ) : (
-                <>
-                  <p>{subtitle}</p>
-                  {queryParameters
-                    .filter(({ visibilityCriteria }) =>
-                      checkVisibilityCriteriaAreMet(visibilityCriteria, values),
-                    )
-                    .map(queryParameter => {
-                      const { parameterKey, ...restOfProps } = queryParameter;
-                      return (
-                        <InputField
-                          key={parameterKey}
-                          inputKey={parameterKey}
-                          value={values[parameterKey]}
-                          {...restOfProps}
-                          onChange={handleValueChange}
-                          id={`field-${labelToId(parameterKey)}`}
-                        />
-                      );
-                    })}
-                  <FileUploadField
-                    onChange={({ target }, newName) => {
-                      setFileName(newName);
-                      setFiles(Array.from(target.files));
-                    }}
-                    name="file-upload"
-                    fileName={fileName}
-                    multiple={actionConfig.multiple}
-                    textOnButton={uploadButtonText}
-                  />
-                </>
-              )}
-            </ModalContentProvider>
-            <DialogFooter>{renderButtons()}</DialogFooter>
+            {finishedMessage ? (
+              <>{finishedMessage}</>
+            ) : (
+              <>
+                <p>{subtitle}</p>
+                {queryParameters
+                  .filter(({ visibilityCriteria }) =>
+                    checkVisibilityCriteriaAreMet(visibilityCriteria, values),
+                  )
+                  .map(queryParameter => {
+                    const { parameterKey, ...restOfProps } = queryParameter;
+                    return (
+                      <InputField
+                        key={parameterKey}
+                        inputKey={parameterKey}
+                        value={values[parameterKey]}
+                        {...restOfProps}
+                        onChange={handleValueChange}
+                        id={`field-${labelToId(parameterKey)}`}
+                      />
+                    );
+                  })}
+                <FileUploadField
+                  onChange={({ target }, newName) => {
+                    setFileName(newName);
+                    setFiles(Array.from(target.files));
+                  }}
+                  name="file-upload"
+                  fileName={fileName}
+                  multiple={actionConfig.multiple}
+                  textOnButton={uploadButtonText}
+                />
+              </>
+            )}
           </form>
-        </Dialog>
+        </Modal>
         <ActionButton id="page-import-button" startIcon={<ImportIcon />} onClick={handleOpen}>
           {confirmButtonText}
         </ActionButton>
diff --git a/packages/admin-panel/src/library.js b/packages/admin-panel/src/library.js
index be641e3dfc..92087a8ee0 100644
--- a/packages/admin-panel/src/library.js
+++ b/packages/admin-panel/src/library.js
@@ -30,7 +30,14 @@ export { LoginPage, LogoutPage } from './pages';
 export { PrivateRoute, getHasBESAdminAccess } from './authentication';
 export * from './pages/resources';
 export { ReduxAutocomplete } from './autocomplete';
-export { IconButton } from './widgets';
+export {
+  IconButton,
+  ModalContentProvider,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  ModalCenteredContent,
+} from './widgets';
 export { AdminPanelDataProviders } from './utilities/AdminPanelProviders';
 export { useApiContext } from './utilities/ApiProvider';
 export { DataChangeAction, ActionButton } from './editor';
diff --git a/packages/admin-panel/src/logsTable/LogsModal.jsx b/packages/admin-panel/src/logsTable/LogsModal.jsx
index 1f2b2089e9..26aa31c849 100644
--- a/packages/admin-panel/src/logsTable/LogsModal.jsx
+++ b/packages/admin-panel/src/logsTable/LogsModal.jsx
@@ -6,9 +6,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Button, Dialog, DialogFooter, DialogHeader } from '@tupaia/ui-components';
 import { changeLogsTablePage, closeLogsModal } from './actions';
-import { ModalContentProvider } from '../widgets';
+import { Modal } from '../widgets';
 import { LogsTable } from './LogsTable';
 
 export const LogsModalComponent = ({
@@ -24,23 +23,31 @@ export const LogsModalComponent = ({
   title,
 }) => {
   return (
-    <Dialog onClose={onDismiss} open={isOpen} disableBackdropClick maxWidth="xl">
-      <DialogHeader onClose={onDismiss} title={title} />
-      <ModalContentProvider errorMessage={errorMessage} isLoading={isLoading}>
-        <LogsTable
-          logs={logs}
-          logsCount={logsCount}
-          page={page}
-          logsPerPage={logsPerPage}
-          onChangePage={onChangeLogsTablePage}
-        />
-      </ModalContentProvider>
-      <DialogFooter>
-        <Button variant="outlined" onClick={onDismiss} disabled={isLoading}>
-          {errorMessage ? 'Dismiss' : 'Cancel'}
-        </Button>
-      </DialogFooter>
-    </Dialog>
+    <Modal
+      onClose={onDismiss}
+      isOpen={isOpen}
+      disableBackdropClick
+      maxWidth="xl"
+      title={title}
+      errorMessage={errorMessage}
+      isLoading={isLoading}
+      buttons={[
+        {
+          disabled: isLoading,
+          variant: 'outlined',
+          onClick: onDismiss,
+          text: errorMessage ? 'Dismiss' : 'Cancel',
+        },
+      ]}
+    >
+      <LogsTable
+        logs={logs}
+        logsCount={logsCount}
+        page={page}
+        logsPerPage={logsPerPage}
+        onChangePage={onChangeLogsTablePage}
+      />
+    </Modal>
   );
 };
 
diff --git a/packages/admin-panel/src/pages/ProfilePage.jsx b/packages/admin-panel/src/pages/ProfilePage.jsx
index 8b844ace94..6df12ebdfe 100644
--- a/packages/admin-panel/src/pages/ProfilePage.jsx
+++ b/packages/admin-panel/src/pages/ProfilePage.jsx
@@ -109,10 +109,6 @@ const ProfilePageComponent = React.memo(({ user, onUpdateProfile }) => {
             onDelete={handleFileDelete}
             avatarInitial={userInitial}
             label="Your avatar"
-            deleteModal={{
-              title: 'Remove Photo',
-              message: 'Are you sure you want to delete your photo?',
-            }}
           />
           <Divider />
           <TextField
diff --git a/packages/admin-panel/src/pages/resources/PermissionGroupsViewerPage.jsx b/packages/admin-panel/src/pages/resources/PermissionGroupsViewerPage.jsx
index 644a2cc701..7ec409c92b 100644
--- a/packages/admin-panel/src/pages/resources/PermissionGroupsViewerPage.jsx
+++ b/packages/admin-panel/src/pages/resources/PermissionGroupsViewerPage.jsx
@@ -8,7 +8,6 @@ import { HorizontalTree } from '@tupaia/ui-components';
 import { useQuery } from 'react-query';
 import { PageHeader, PageBody } from '../../widgets';
 import { LogsModal } from '../../logsTable';
-import * as COLORS from '../../theme/colors';
 import { get } from '../../VizBuilderApp/api';
 import { DEFAULT_REACT_QUERY_OPTIONS } from '../../VizBuilderApp/api/constants';
 
@@ -20,11 +19,7 @@ const StyledHorizontalTree = styled(HorizontalTree)`
   margin-top: 40px;
   margin-bottom: 40px;
   max-height: 870px;
-  color: ${COLORS.TEXT_MIDGREY};
-
-  .MuiTypography-body1 {
-    font-size: 15px;
-  }
+  color: ${({ theme }) => theme.palette.text.primary};
 `;
 
 const getRootLevelNodes = data =>
diff --git a/packages/admin-panel/src/pages/resources/TreeResourcePage.jsx b/packages/admin-panel/src/pages/resources/TreeResourcePage.jsx
index f00d81ce97..54df223e26 100644
--- a/packages/admin-panel/src/pages/resources/TreeResourcePage.jsx
+++ b/packages/admin-panel/src/pages/resources/TreeResourcePage.jsx
@@ -9,7 +9,6 @@ import styled from 'styled-components';
 import { HorizontalTree } from '@tupaia/ui-components';
 import { PageHeader, PageBody } from '../../widgets';
 import { LogsModal } from '../../logsTable';
-import * as COLORS from '../../theme/colors';
 
 const Container = styled(PageBody)`
   overflow: auto;
@@ -20,11 +19,7 @@ const StyledHorizontalTree = styled(HorizontalTree)`
   margin-top: 40px;
   margin-bottom: 40px;
   max-height: 870px;
-  color: ${COLORS.TEXT_MIDGREY};
-
-  .MuiTypography-body1 {
-    font-size: 15px;
-  }
+  color: ${({ theme }) => theme.palette.text.primary};
 `;
 
 export const TreeResourcePage = ({ title, fetchRoot, fetchBranch, ExportModalComponent }) => {
diff --git a/packages/admin-panel/src/qrCode/QrCodeModal.jsx b/packages/admin-panel/src/qrCode/QrCodeModal.jsx
index 811d64265c..ac4546f5cf 100644
--- a/packages/admin-panel/src/qrCode/QrCodeModal.jsx
+++ b/packages/admin-panel/src/qrCode/QrCodeModal.jsx
@@ -1,26 +1,22 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Dialog, DialogHeader } from '@tupaia/ui-components';
 import { QrCodeContainer } from './QrCodeContainer';
 import { closeQrCodeModal } from './actions';
-import { ModalContentProvider } from '../widgets';
+import { Modal } from '../widgets';
 
 export const QrCodeModalComponent = ({ isOpen, onDismiss, qrCodeContents, humanReadableId }) => {
   return (
-    <Dialog onClose={onDismiss} open={isOpen} disableBackdropClick>
-      <DialogHeader onClose={onDismiss} title="Share QR Code" />
-      <ModalContentProvider isLoading={false}>
-        {qrCodeContents && humanReadableId && (
-          <QrCodeContainer qrCodeContents={qrCodeContents} humanReadableId={humanReadableId} />
-        )}
-      </ModalContentProvider>
-    </Dialog>
+    <Modal onClose={onDismiss} isOpen={isOpen} disableBackdropClick title="Share QR code">
+      {qrCodeContents && humanReadableId && (
+        <QrCodeContainer qrCodeContents={qrCodeContents} humanReadableId={humanReadableId} />
+      )}
+    </Modal>
   );
 };
 
diff --git a/packages/admin-panel/src/routes/projects/landingPages.jsx b/packages/admin-panel/src/routes/projects/landingPages.jsx
index aff63a6abc..d54eb40760 100644
--- a/packages/admin-panel/src/routes/projects/landingPages.jsx
+++ b/packages/admin-panel/src/routes/projects/landingPages.jsx
@@ -52,10 +52,6 @@ const FIELDS = {
     editConfig: {
       type: 'image',
       avatarVariant: 'square',
-      deleteModal: {
-        title: 'Remove landing page image',
-        message: 'Are you sure you want to delete your image?',
-      },
       minWidth: 1500,
       minHeight: 900,
       maxHeight: 2000,
@@ -68,10 +64,6 @@ const FIELDS = {
     editConfig: {
       type: 'image',
       avatarVariant: 'square',
-      deleteModal: {
-        title: 'Remove logo image',
-        message: 'Are you sure you want to delete your image?',
-      },
       maxHeight: 300,
       maxWidth: 300,
     },
diff --git a/packages/admin-panel/src/routes/projects/projects.js b/packages/admin-panel/src/routes/projects/projects.js
index e769c79c20..b0b9fb2550 100644
--- a/packages/admin-panel/src/routes/projects/projects.js
+++ b/packages/admin-panel/src/routes/projects/projects.js
@@ -55,10 +55,6 @@ const DEFAULT_FIELDS = [
       type: 'image',
       name: 'image_url',
       avatarVariant: 'square',
-      deleteModal: {
-        title: 'Remove Project Image',
-        message: 'Are you sure you want to delete your image?',
-      },
       secondaryLabel: 'Recommended size: 480x240px',
       maxHeight: 240,
       maxWidth: 480,
@@ -71,10 +67,6 @@ const DEFAULT_FIELDS = [
       type: 'image',
       name: 'logo_url',
       avatarVariant: 'square',
-      deleteModal: {
-        title: 'Remove Project Logo',
-        message: 'Are you sure you want to delete your image?',
-      },
       secondaryLabel: 'Recommended size: 480x240px',
       maxHeight: 240,
       maxWidth: 480,
diff --git a/packages/admin-panel/src/routes/visualisations/socialFeed.jsx b/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
index 1e7faf8268..867ae6a189 100644
--- a/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
+++ b/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
@@ -54,10 +54,6 @@ const FIELDS = [
           fieldName: 'image',
           type: 'image',
           avatarVariant: 'square',
-          deleteModal: {
-            title: 'Remove Feed Item Image',
-            message: 'Are you sure you want to delete your image?',
-          },
         },
         {
           label: 'Body (accepts basic markdown)',
diff --git a/packages/admin-panel/src/surveyResponse/FileQuestionField.jsx b/packages/admin-panel/src/surveyResponse/FileQuestionField.jsx
index 64f0257784..043ea5755a 100644
--- a/packages/admin-panel/src/surveyResponse/FileQuestionField.jsx
+++ b/packages/admin-panel/src/surveyResponse/FileQuestionField.jsx
@@ -1,19 +1,19 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import generateId from 'uuid/v1';
-import { Button, Dialog, DialogFooter, DialogHeader, TextField } from '@tupaia/ui-components';
+import { TextField } from '@tupaia/ui-components';
 import { getUniqueFileNameParts } from '@tupaia/utils';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
 import ExportIcon from '@material-ui/icons/GetApp';
 import { FileUploadField } from '../widgets/InputField/FileUploadField';
-import { IconButton, ModalContentProvider } from '../widgets';
+import { IconButton, Modal } from '../widgets';
 import { useApiContext } from '../utilities/ApiProvider';
 
 const Container = styled.div`
@@ -58,25 +58,31 @@ const AttachModal = ({ isOpen, onClose, maxSizeInBytes, onAttachFile, title }) =
   };
 
   return (
-    <Dialog onClose={handleClose} open={isOpen} disableBackdropClick>
-      <DialogHeader onClose={handleClose} title={title} />
-      <ModalContentProvider isLoading={false}>
-        <FileUploadField
-          label="Select a file"
-          showFileSize
-          maxSizeInBytes={maxSizeInBytes}
-          onChange={handleSelectFile}
-        />
-      </ModalContentProvider>
-      <DialogFooter>
-        <Button variant="outlined" onClick={handleClose}>
-          Cancel
-        </Button>
-        <Button disabled={selectedFileSpec.file === null} onClick={handleAttachSelectedFile}>
-          Attach
-        </Button>
-      </DialogFooter>
-    </Dialog>
+    <Modal
+      onClose={handleClose}
+      isOpen={isOpen}
+      disableBackdropClick
+      title={title}
+      buttons={[
+        {
+          onClick: handleClose,
+          text: 'Cancel',
+          variant: 'outlined',
+        },
+        {
+          onClick: handleAttachSelectedFile,
+          text: 'Attach',
+          disabled: selectedFileSpec.file === null,
+        },
+      ]}
+    >
+      <FileUploadField
+        label="Select a file"
+        showFileSize
+        maxSizeInBytes={maxSizeInBytes}
+        onChange={handleSelectFile}
+      />
+    </Modal>
   );
 };
 AttachModal.propTypes = {
diff --git a/packages/admin-panel/src/surveyResponse/Form.jsx b/packages/admin-panel/src/surveyResponse/Form.jsx
index 46b3dc6a02..e69f9dcd61 100644
--- a/packages/admin-panel/src/surveyResponse/Form.jsx
+++ b/packages/admin-panel/src/surveyResponse/Form.jsx
@@ -1,16 +1,14 @@
 /*
  * Tupaia
- * Copyright (c) 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-/* eslint-disable camelcase */
-
 import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Button, DialogFooter } from '@tupaia/ui-components';
+import { Button } from '@tupaia/ui-components';
 import { Divider } from '@material-ui/core';
 import { useGetExistingData } from './useGetExistingData';
-import { ModalContentProvider } from '../widgets';
+import { ModalContentProvider, ModalFooter } from '../widgets';
 import { useResubmitSurveyResponse } from '../api/mutations/useResubmitSurveyResponse';
 import { MODAL_STATUS } from './constants';
 import { SurveyScreens } from './SurveyScreens';
@@ -145,7 +143,7 @@ export const Form = ({ surveyResponseId, onDismiss, onAfterMutate }) => {
         )}
         {isResubmitSuccess && 'The survey response has been successfully submitted.'}
       </ModalContentProvider>
-      <DialogFooter>{renderButtons()}</DialogFooter>
+      <ModalFooter>{renderButtons()}</ModalFooter>
     </>
   );
 };
diff --git a/packages/admin-panel/src/surveyResponse/ResubmitSurveyResponseModal.jsx b/packages/admin-panel/src/surveyResponse/ResubmitSurveyResponseModal.jsx
index 2c5e2ecaad..2bfcb87b69 100644
--- a/packages/admin-panel/src/surveyResponse/ResubmitSurveyResponseModal.jsx
+++ b/packages/admin-panel/src/surveyResponse/ResubmitSurveyResponseModal.jsx
@@ -1,14 +1,15 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Dialog, DialogHeader } from '@tupaia/ui-components';
+import { Dialog } from '@tupaia/ui-components';
 import { closeResubmitSurveyModal, onAfterMutate as onAfterMutateAction } from './actions';
 import { Form } from './Form';
+import { ModalHeader } from '../widgets';
 
 export const ResubmitSurveyResponseModalComponent = ({
   isOpen,
@@ -18,7 +19,7 @@ export const ResubmitSurveyResponseModalComponent = ({
 }) => {
   return (
     <Dialog onClose={onDismiss} open={isOpen} disableBackdropClick maxWidth="md">
-      <DialogHeader onClose={onDismiss} title="Resubmit Survey Response" />
+      <ModalHeader onClose={onDismiss} title="Resubmit Survey Response" />
       <Form
         surveyResponseId={surveyResponseId}
         onDismiss={() => onDismiss()}
diff --git a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
index 4d736c2fa7..dfd1c74046 100644
--- a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
+++ b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
@@ -18,7 +18,7 @@ import {
 import { KeyboardArrowDown } from '@material-ui/icons';
 import queryString from 'query-string';
 import PropTypes from 'prop-types';
-import { Alert, ConfirmDeleteModal } from '@tupaia/ui-components';
+import { Alert } from '@tupaia/ui-components';
 import { generateConfigForColumnType } from '../columnTypes';
 import { getIsFetchingData, getTableState } from '../selectors';
 import { getIsChangingDataOnServer } from '../../dataChangeListener';
@@ -35,6 +35,7 @@ import {
 import { FilterCell } from './FilterCell';
 import { Pagination } from './Pagination';
 import { DisplayCell, HeaderDisplayCell } from './Cells';
+import { ConfirmDeleteModal } from '../../widgets';
 
 const ErrorAlert = styled(Alert).attrs({
   severity: 'error',
@@ -108,6 +109,7 @@ const DataFetchingTableComponent = ({
   getNestedViewLink,
   baseFilter,
   basePath,
+  resourceName,
 }) => {
   const {
     getTableProps,
@@ -182,7 +184,7 @@ const DataFetchingTableComponent = ({
   const isLoading = isFetchingData || isChangingDataOnServer;
 
   const displayFilterRow = visibleColumns.some(column => column.filterable !== false);
-
+  const { singular = 'record' } = resourceName;
   return (
     <Wrapper>
       {errorMessage && <ErrorAlert>{errorMessage}</ErrorAlert>}
@@ -294,13 +296,16 @@ const DataFetchingTableComponent = ({
 
       <ConfirmDeleteModal
         isOpen={!!confirmActionMessage}
-        message={confirmActionMessage}
         onConfirm={onConfirmAction}
         onCancel={onCancelAction}
-        title={deleteConfig.title}
-        description={deleteConfig.description}
-        cancelButtonText={deleteConfig.cancelButtonText}
-        confirmButtonText={deleteConfig.confirmButtonText}
+        title={deleteConfig?.title || `Delete ${singular}`}
+        heading={deleteConfig?.heading || `You are about to delete this ${singular}`}
+        description={
+          deleteConfig?.description ||
+          `Are you sure you would like to delete this ${singular}? This cannot be undone.`
+        }
+        confirmButtonText={deleteConfig?.confirmButtonText || `Delete ${singular}`}
+        cancelButtonText={deleteConfig?.cancelButtonText || 'Cancel'}
       />
     </Wrapper>
   );
@@ -340,6 +345,7 @@ DataFetchingTableComponent.propTypes = {
   getNestedViewLink: PropTypes.func,
   baseFilter: PropTypes.object,
   basePath: PropTypes.string,
+  resourceName: PropTypes.object,
 };
 
 DataFetchingTableComponent.defaultProps = {
@@ -357,6 +363,7 @@ DataFetchingTableComponent.defaultProps = {
   getNestedViewLink: null,
   baseFilter: null,
   basePath: '',
+  resourceName: {},
 };
 
 const mapStateToProps = (state, { columns, reduxId, ...ownProps }) => ({
diff --git a/packages/admin-panel/src/theme/colors.js b/packages/admin-panel/src/theme/colors.js
index 76c0ca79a8..7bfd041f7d 100644
--- a/packages/admin-panel/src/theme/colors.js
+++ b/packages/admin-panel/src/theme/colors.js
@@ -14,7 +14,7 @@ export const GREEN = '#02B851';
 export const DARKGREY = '#283238'; // dark background
 export const LIGHTGREY = '#F9F9F9'; // page background
 export const TEXT_DARKGREY = '#414D55';
-export const TEXT_MIDGREY = '#898989';
+export const TEXT_MIDGREY = '#666666';
 export const TEXT_LIGHTGREY = '#DEDEDE';
 
 export const DARK_BLUE = '#328DE5';
@@ -31,6 +31,7 @@ export const GREY_DE = '#DEDEE0'; // use for border colors of cards
 export const GREY_E2 = '#E2E2E2';
 export const GREY_F1 = '#F1F1F1';
 export const GREY_FB = '#FBF9F9';
+export const GREY_B8 = '#B8B8B8';
 
 // Blues
 export const BLUE_BF = '#BFD5E4';
diff --git a/packages/admin-panel/src/theme/theme.js b/packages/admin-panel/src/theme/theme.js
index 70f5a43321..1df2ca1377 100644
--- a/packages/admin-panel/src/theme/theme.js
+++ b/packages/admin-panel/src/theme/theme.js
@@ -104,7 +104,7 @@ const typography = {
     letterSpacing: 0,
   },
   body1: {
-    fontSize: '1rem',
+    fontSize: '0.875rem',
     fontWeight: 400,
     lineHeight: 1.2,
     letterSpacing: 0,
@@ -134,6 +134,36 @@ const overrides = {
       backgroundColor: COLORS.GREY_DE,
     },
   },
+  MuiFormLabel: {
+    root: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      color: palette.text.primary,
+    },
+  },
+  MuiInputBase: {
+    input: {
+      fontSize: '0.875rem',
+      '&::placeholder': {
+        color: COLORS.GREY_B8,
+      },
+    },
+  },
+  MuiFormControl: {
+    root: {
+      '& legend': {
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        color: palette.text.primary,
+      },
+    },
+  },
+  MuiOutlinedInput: {
+    input: {
+      paddingInline: '1.1rem',
+      paddingBlock: '0.875rem',
+    },
+  },
   MuiMenuItem: {
     root: {
       fontSize: '0.875rem',
diff --git a/packages/admin-panel/src/widgets/ConfirmDeleteModal.jsx b/packages/admin-panel/src/widgets/ConfirmDeleteModal.jsx
new file mode 100644
index 0000000000..45199978ae
--- /dev/null
+++ b/packages/admin-panel/src/widgets/ConfirmDeleteModal.jsx
@@ -0,0 +1,68 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@material-ui/core/Typography';
+import styled from 'styled-components';
+import { Modal, ModalCenteredContent } from './Modal';
+
+const Heading = styled(Typography).attrs({
+  variant: 'h3',
+})`
+  margin-bottom: 0.8rem;
+  font-size: ${props => props.theme.typography.body2.fontSize};
+  font-weight: ${props => props.theme.typography.fontWeightMedium};
+  color: ${props => props.theme.palette.error.main};
+`;
+
+export const ConfirmDeleteModal = ({
+  isOpen,
+  title,
+  onConfirm,
+  onCancel,
+  description,
+  heading,
+  confirmButtonText,
+  cancelButtonText,
+}) => {
+  const buttons = [
+    {
+      text: cancelButtonText,
+      onClick: onCancel,
+      variant: 'outlined',
+    },
+    {
+      text: confirmButtonText,
+      onClick: onConfirm,
+    },
+  ];
+  return (
+    <Modal onClose={onCancel} isOpen={isOpen} title={title} buttons={buttons}>
+      <ModalCenteredContent>
+        {heading && <Heading>{heading}</Heading>}
+        <Typography>{description}</Typography>
+      </ModalCenteredContent>
+    </Modal>
+  );
+};
+
+ConfirmDeleteModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func,
+  confirmButtonText: PropTypes.string.isRequired,
+  cancelButtonText: PropTypes.string,
+  heading: PropTypes.string,
+};
+
+ConfirmDeleteModal.defaultProps = {
+  onConfirm: () => {},
+  onCancel: () => {},
+  cancelButtonText: 'Cancel',
+  heading: '',
+};
diff --git a/packages/admin-panel/src/widgets/InputField/JsonInputField.jsx b/packages/admin-panel/src/widgets/InputField/JsonInputField.jsx
index a4f476f93e..0afcd8cd35 100644
--- a/packages/admin-panel/src/widgets/InputField/JsonInputField.jsx
+++ b/packages/admin-panel/src/widgets/InputField/JsonInputField.jsx
@@ -11,6 +11,7 @@ import CardContent from '@material-ui/core/CardContent';
 import Typography from '@material-ui/core/Typography';
 import { InputField } from './InputField';
 import { checkVisibilityCriteriaAreMet, labelToId } from '../../utilities';
+import { FormLabel } from '@material-ui/core';
 
 const getJsonFieldValues = value => {
   if (value) {
@@ -39,11 +40,7 @@ const Container = styled.div`
   margin-bottom: 20px;
 `;
 
-const CardLabel = styled.label`
-  color: rgb(111, 123, 130);
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 18px;
+const CardLabel = styled(FormLabel)`
   display: block;
   margin-bottom: 3px;
 `;
diff --git a/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx b/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx
index c4293e69fa..57e644f815 100644
--- a/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx
+++ b/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx
@@ -284,7 +284,6 @@ export const registerInputFields = () => {
         label={props.label}
         buttonLabel={props.buttonLabel}
         avatarVariant={props.avatarVariant}
-        deleteModal={props.deleteModal}
         maxWidth={props.maxWidth}
         maxHeight={props.maxHeight}
         minWidth={props.minWidth}
diff --git a/packages/admin-panel/src/widgets/Modal/Modal.jsx b/packages/admin-panel/src/widgets/Modal/Modal.jsx
new file mode 100644
index 0000000000..59b48c8982
--- /dev/null
+++ b/packages/admin-panel/src/widgets/Modal/Modal.jsx
@@ -0,0 +1,95 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { DialogFooter as BaseDialogFooter, Button } from '@tupaia/ui-components';
+import { Dialog } from '@material-ui/core';
+import { ModalContentProvider } from './ModalContentProvider';
+import { ModalHeader } from './ModalHeader';
+
+export const ModalFooter = styled(BaseDialogFooter)`
+  background-color: ${props => props.theme.palette.background.paper};
+  padding-block: 1.3rem;
+  padding-inline: 1.9rem;
+`;
+
+export const Modal = ({
+  children,
+  isOpen,
+  onClose,
+  title,
+  isLoading,
+  errorMessage,
+  buttons,
+  ...muiDialogProps
+}) => {
+  return (
+    <Dialog onClose={onClose} open={isOpen} fullWidth {...muiDialogProps}>
+      <ModalHeader onClose={onClose} title={title} />
+      <ModalContentProvider errorMessage={errorMessage} isLoading={isLoading}>
+        {children}
+      </ModalContentProvider>
+      {buttons?.length > 0 && (
+        <ModalFooter>
+          {buttons?.map(
+            ({
+              onClick,
+              color = 'primary',
+              text,
+              id,
+              disabled,
+              variant = 'contained',
+              type = 'button',
+              component,
+              to,
+            }) => (
+              <Button
+                onClick={onClick}
+                color={color}
+                id={id}
+                disabled={disabled}
+                variant={variant}
+                type={type}
+                component={component}
+                to={to}
+              >
+                {text}
+              </Button>
+            ),
+          )}
+        </ModalFooter>
+      )}
+    </Dialog>
+  );
+};
+
+Modal.propTypes = {
+  children: PropTypes.node.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool,
+  errorMessage: PropTypes.string,
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      onClick: PropTypes.func.isRequired,
+      color: PropTypes.string,
+      text: PropTypes.string.isRequired,
+      id: PropTypes.string,
+      disabled: PropTypes.bool,
+      variant: PropTypes.string,
+      type: PropTypes.string,
+      component: PropTypes.elementType,
+      to: PropTypes.string,
+    }),
+  ),
+};
+
+Modal.defaultProps = {
+  buttons: [],
+  errorMessage: '',
+  isLoading: false,
+};
diff --git a/packages/admin-panel/src/widgets/Modal/ModalCenteredContent.jsx b/packages/admin-panel/src/widgets/Modal/ModalCenteredContent.jsx
new file mode 100644
index 0000000000..e70fa913f4
--- /dev/null
+++ b/packages/admin-panel/src/widgets/Modal/ModalCenteredContent.jsx
@@ -0,0 +1,13 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import styled from 'styled-components';
+
+export const ModalCenteredContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+`;
diff --git a/packages/admin-panel/src/widgets/ModalContentProvider.jsx b/packages/admin-panel/src/widgets/Modal/ModalContentProvider.jsx
similarity index 66%
rename from packages/admin-panel/src/widgets/ModalContentProvider.jsx
rename to packages/admin-panel/src/widgets/Modal/ModalContentProvider.jsx
index e427113d44..9539a2677d 100644
--- a/packages/admin-panel/src/widgets/ModalContentProvider.jsx
+++ b/packages/admin-panel/src/widgets/Modal/ModalContentProvider.jsx
@@ -1,17 +1,25 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React from 'react';
 import styled from 'styled-components';
-import { DialogContent, SmallAlert } from '@tupaia/ui-components';
+import { SmallAlert } from '@tupaia/ui-components';
 import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';
+import { DialogContent } from '@material-ui/core';
 
 const Content = styled(DialogContent)`
   text-align: left;
   min-height: 220px;
+  border-color: ${props => props.theme.palette.grey['400']};
+  border-style: solid;
+  border-width: 1px 0;
+  padding-block: 1.25rem;
+  padding-inline: 1.9rem;
+  display: flex;
+  flex-direction: column;
 `;
 
 const Heading = styled(Typography)`
@@ -30,7 +38,8 @@ export const ModalContentProvider = ({ isLoading, errorMessage, children }) => {
           </SmallAlert>
         </>
       )}
-      <span style={isLoading || !!errorMessage ? { display: 'none' } : {}}>{children}</span>
+      {/* If loading or error message, don't show children */}
+      {!isLoading && !errorMessage && children}
     </Content>
   );
 };
diff --git a/packages/admin-panel/src/widgets/Modal/ModalHeader.jsx b/packages/admin-panel/src/widgets/Modal/ModalHeader.jsx
new file mode 100644
index 0000000000..263d13a4ab
--- /dev/null
+++ b/packages/admin-panel/src/widgets/Modal/ModalHeader.jsx
@@ -0,0 +1,48 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@material-ui/core';
+import { FlexStart, IconButton } from '@tupaia/ui-components';
+import styled from 'styled-components';
+import { Close } from '@material-ui/icons';
+
+const Header = styled(FlexStart)`
+  position: relative;
+  padding: 1.1rem 1.3rem 0.9rem;
+`;
+
+const Title = styled(Typography)`
+  font-weight: ${props => props.theme.typography.fontWeightMedium};
+  font-size: 1rem;
+`;
+
+const CloseButton = styled(IconButton)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: ${props => props.theme.palette.text.secondary};
+`;
+
+export const ModalHeader = ({ title, onClose, children }) => (
+  <Header>
+    <Title variant="h2">{title}</Title>
+    {children}
+    <CloseButton onClick={onClose}>
+      <Close />
+    </CloseButton>
+  </Header>
+);
+
+ModalHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node,
+};
+
+ModalHeader.defaultProps = {
+  children: null,
+};
diff --git a/packages/admin-panel/src/widgets/Modal/index.js b/packages/admin-panel/src/widgets/Modal/index.js
new file mode 100644
index 0000000000..2451fb3369
--- /dev/null
+++ b/packages/admin-panel/src/widgets/Modal/index.js
@@ -0,0 +1,9 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { Modal, ModalFooter } from './Modal';
+export { ModalContentProvider } from './ModalContentProvider';
+export { ModalHeader } from './ModalHeader';
+export { ModalCenteredContent } from './ModalCenteredContent';
diff --git a/packages/admin-panel/src/widgets/index.js b/packages/admin-panel/src/widgets/index.js
index e4e93d0680..4b9450535e 100644
--- a/packages/admin-panel/src/widgets/index.js
+++ b/packages/admin-panel/src/widgets/index.js
@@ -9,6 +9,13 @@ export { NavPanel } from '../layout/navigation/NavPanel';
 export { Tabs } from './Tabs';
 export { PageHeader } from './PageHeader';
 export { PageBody, Footer } from '../layout';
-export { ModalContentProvider } from './ModalContentProvider';
+export {
+  ModalContentProvider,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  ModalCenteredContent,
+} from './Modal';
 export { JsonEditor, JsonTreeEditor } from './JsonEditor';
 export { SecondaryNavbar } from '../layout/navigation/SecondaryNavbar';
+export { ConfirmDeleteModal } from './ConfirmDeleteModal';
diff --git a/packages/datatrak-web/src/features/Questions/PhotoQuestion.tsx b/packages/datatrak-web/src/features/Questions/PhotoQuestion.tsx
index d2bd188f33..a10b05e751 100644
--- a/packages/datatrak-web/src/features/Questions/PhotoQuestion.tsx
+++ b/packages/datatrak-web/src/features/Questions/PhotoQuestion.tsx
@@ -51,7 +51,6 @@ export const PhotoQuestion = ({
         name={name!}
         required={required}
         avatarVariant="square"
-        deleteModal={null}
         FormHelperTextComponent={InputHelperText}
         invalid={invalid}
       />
diff --git a/packages/datatrak-web/src/features/Reports/Inputs/EntityLevelInput.tsx b/packages/datatrak-web/src/features/Reports/Inputs/EntityLevelInput.tsx
index 404667ae3b..5ebd46b97f 100644
--- a/packages/datatrak-web/src/features/Reports/Inputs/EntityLevelInput.tsx
+++ b/packages/datatrak-web/src/features/Reports/Inputs/EntityLevelInput.tsx
@@ -13,7 +13,6 @@ const RadioGroup = styled(BaseRadioGroup)`
   margin: 0;
   .MuiFormGroup-root {
     width: 100%;
-    justify-content: space-between;
     border: none;
   }
   .MuiFormControlLabel-label {
diff --git a/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx b/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx
index 637cc2d33f..1b7c51f31f 100644
--- a/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx
+++ b/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx
@@ -4,17 +4,79 @@
  */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { ConfirmModal } from '@tupaia/ui-components';
-import { ColumnActionButton, DataChangeAction, useApiContext } from '@tupaia/admin-panel';
+import styled from 'styled-components';
+import { Typography } from '@material-ui/core';
+import {
+  ColumnActionButton,
+  DataChangeAction,
+  useApiContext,
+  Modal,
+  ModalCenteredContent,
+} from '@tupaia/admin-panel';
 import { Delete } from '@material-ui/icons';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { useRejectSurveyResponseStatus } from '../api';
 
+const ConfirmModalHeading = styled(Typography).attrs({
+  variant: 'h3',
+})`
+  font-weight: ${props => props.theme.typography.fontWeightMedium};
+  font-size: ${props => props.theme.typography.body1.fontSize};
+  margin-bottom: 0.5rem;
+`;
+
+const RejectConfirmModal = ({ isOpen, onClose, onConfirm, errorMessage, translate, isLoading }) => (
+  <Modal
+    onClose={onClose}
+    isOpen={isOpen}
+    isLoading={isLoading}
+    errorMessage={errorMessage}
+    buttons={[
+      {
+        text: translate('admin.cancel'),
+        onClick: onClose,
+        disabled: isLoading,
+        variant: 'outlined',
+      },
+      {
+        text: translate('admin.yesReject'),
+        onClick: onConfirm,
+        disabled: isLoading,
+      },
+    ]}
+    title={translate('admin.rejectSurveyResponse')}
+  >
+    <ModalCenteredContent>
+      <ConfirmModalHeading>
+        {translate('admin.areYouSureYouWantToRejectThisSurveyResponse')}
+      </ConfirmModalHeading>
+      <Typography>
+        {translate(
+          'admin.rejectingASurveyResponseWillRemoveTheRecordFromThisTabAndPreventTheDataDisplayingInAnyVisualisations',
+        )}
+      </Typography>
+    </ModalCenteredContent>
+  </Modal>
+);
+
+RejectConfirmModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string,
+  translate: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+};
+
+RejectConfirmModal.defaultProps = {
+  errorMessage: null,
+};
+
 export const getRejectButton = translate => {
   const RejectButton = ({ row }) => {
     const api = useApiContext();
     const [isOpen, setIsOpen] = useState(false);
-    const { mutate, isLoading, isError, error } = useRejectSurveyResponseStatus(api);
+    const { mutate, isLoading, error } = useRejectSurveyResponseStatus(api);
 
     const handleClickReject = ({ onEditBegin, onEditSuccess, onEditError }) => {
       onEditBegin();
@@ -38,20 +100,14 @@ export const getRejectButton = translate => {
         </ColumnActionButton>
         <DataChangeAction
           render={props => (
-            <ConfirmModal
-              onClose={() => setIsOpen(false)}
+            <RejectConfirmModal
+              {...props}
               isOpen={isOpen}
-              handleAction={() => handleClickReject(props)}
+              onClose={() => setIsOpen(false)}
+              onConfirm={() => handleClickReject(props)}
+              errorMessage={error?.message}
+              translate={translate}
               isLoading={isLoading}
-              error={isError ? error : null}
-              title={translate('admin.rejectSurveyResponse')}
-              mainText={translate('admin.areYouSureYouWantToRejectThisSurveyResponse')}
-              description={translate(
-                'admin.rejectingASurveyResponseWillRemoveTheRecordFromThisTabAndPreventTheDataDisplayingInAnyVisualisations',
-              )}
-              actionText={translate('admin.yesReject')}
-              loadingText="Saving"
-              cancelText={translate('admin.cancel')}
             />
           )}
         />
diff --git a/packages/psss/src/views/Tabs/ProfileTabView.jsx b/packages/psss/src/views/Tabs/ProfileTabView.jsx
index 55b4893606..98693c51b4 100644
--- a/packages/psss/src/views/Tabs/ProfileTabView.jsx
+++ b/packages/psss/src/views/Tabs/ProfileTabView.jsx
@@ -110,10 +110,6 @@ const ProfileTabViewComponent = React.memo(({ user, onUpdateProfile }) => {
             onDelete={handleFileDelete}
             avatarInitial={userInitial}
             label="Your avatar"
-            deleteModal={{
-              title: 'Remove Photo',
-              message: 'Are you sure you want to delete your photo?',
-            }}
           />
           <Divider />
           <TextField
diff --git a/packages/tupaia-web/src/theme/theme.ts b/packages/tupaia-web/src/theme/theme.ts
index aaf2869bd7..c3144eb38e 100644
--- a/packages/tupaia-web/src/theme/theme.ts
+++ b/packages/tupaia-web/src/theme/theme.ts
@@ -135,4 +135,13 @@ theme.overrides = {
       backgroundColor: 'inherit', // make the sticky header cells have the row's background color
     },
   },
+  MuiButton: {
+    // set these and not the text buttons to avoid having issues wih text sizes in chart legends
+    outlined: {
+      fontSize: '0.875rem',
+    },
+    contained: {
+      fontSize: '0.875rem',
+    },
+  },
 };
diff --git a/packages/ui-components/src/components/Button.tsx b/packages/ui-components/src/components/Button.tsx
index 0d2f9c1d9e..3bcbc8119f 100644
--- a/packages/ui-components/src/components/Button.tsx
+++ b/packages/ui-components/src/components/Button.tsx
@@ -9,7 +9,6 @@ import MuiLink, { LinkProps as MuiLinkProps } from '@material-ui/core/Link';
 import { OverrideableComponentProps } from '../types';
 
 const StyledButton = styled(MuiButton)`
-  font-size: 0.9375rem;
   line-height: 1.75;
   letter-spacing: 0;
   padding: 0.5em 1.75em;
diff --git a/packages/ui-components/src/components/ConfirmDeleteModal.tsx b/packages/ui-components/src/components/ConfirmDeleteModal.tsx
deleted file mode 100644
index 57d1d06ddd..0000000000
--- a/packages/ui-components/src/components/ConfirmDeleteModal.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import DeleteIcon from '@material-ui/icons/Delete';
-import Typography from '@material-ui/core/Typography';
-import styled from 'styled-components';
-import { Dialog, DialogFooter, DialogHeader, DialogContent } from './Dialog';
-import { ErrorOutlinedButton, WarningButton } from './Button';
-
-const Container = styled.div`
-  margin: 1rem 0 3rem;
-`;
-
-const Icon = styled(DeleteIcon)`
-  font-size: 2.4rem;
-  color: ${props => props.theme.palette.error.main};
-  margin-bottom: 0.8rem;
-`;
-
-const Heading = styled(Typography)`
-  margin-bottom: 0.8rem;
-`;
-
-export interface ConfirmDeleteModalProps {
-  isOpen?: boolean;
-  title?: string;
-  message?: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-  description?: string;
-  cancelButtonText?: string;
-  confirmButtonText?: string;
-  disablePortal?: boolean;
-}
-
-export const ConfirmDeleteModal = React.memo(
-  ({
-    isOpen = false,
-    title = 'Delete Record',
-    message = '',
-    onConfirm,
-    onCancel,
-    description = `Once deleted this can't be undone.`,
-    cancelButtonText = 'Cancel',
-    confirmButtonText = 'Yes, Delete',
-    disablePortal = false,
-  }: ConfirmDeleteModalProps) => (
-    <Dialog onClose={onCancel} open={isOpen} disablePortal={disablePortal}>
-      <DialogHeader onClose={onCancel} title={title} color="error" />
-      <DialogContent>
-        <Container>
-          <Icon />
-          <Heading variant="h6">{message}</Heading>
-          <Typography>{description}</Typography>
-        </Container>
-      </DialogContent>
-      <DialogFooter>
-        <ErrorOutlinedButton onClick={onCancel}>{cancelButtonText}</ErrorOutlinedButton>
-        <WarningButton onClick={onConfirm}>{confirmButtonText}</WarningButton>
-      </DialogFooter>
-    </Dialog>
-  ),
-);
diff --git a/packages/ui-components/src/components/Inputs/Autocomplete.tsx b/packages/ui-components/src/components/Inputs/Autocomplete.tsx
index 28af193f16..9bcc63869d 100644
--- a/packages/ui-components/src/components/Inputs/Autocomplete.tsx
+++ b/packages/ui-components/src/components/Inputs/Autocomplete.tsx
@@ -13,7 +13,6 @@ import styled from 'styled-components';
 import { TextField } from './TextField';
 
 const KeyboardArrowDown = styled(MuiKeyboardArrowDown)`
-  color: ${props => props.theme.palette.text.tertiary};
   font-size: 1.5rem;
 `;
 
@@ -31,7 +30,7 @@ const StyledAutocomplete = styled(MuiAutocomplete)`
   }
 
   .MuiInputBase-input.MuiAutocomplete-input.MuiInputBase-inputAdornedEnd {
-    padding: 0.9rem 0.3rem 1rem 0.9rem;
+    padding: 0.85rem 0.3rem 0.85rem 1.1rem;
   }
 
   .MuiAutocomplete-inputRoot .MuiAutocomplete-endAdornment {
diff --git a/packages/ui-components/src/components/Inputs/FileUploadField.tsx b/packages/ui-components/src/components/Inputs/FileUploadField.tsx
index 96ae194a1d..56c9234b3e 100644
--- a/packages/ui-components/src/components/Inputs/FileUploadField.tsx
+++ b/packages/ui-components/src/components/Inputs/FileUploadField.tsx
@@ -10,6 +10,7 @@ import { GreyButton } from '../Button';
 import { FlexStart } from '../Layout';
 import { SaveAlt } from '../Icons';
 import { InputLabel } from './InputLabel';
+import { FormLabel } from '@material-ui/core';
 
 const HiddenFileInput = styled.input`
   display: none; // Hide the input element without applying other styles - setting it to be small and position absolute causes the form to crash when the input is clicked
@@ -21,9 +22,8 @@ const FileNameAndFileSize = styled.span`
   margin-left: 0.8rem;
 `;
 
-const FileUploadWrapper = styled.div``;
 const FileUploadContainer = styled(FlexStart)`
-  margin-top: 15px;
+  margin-top: 0.5rem;
 `;
 
 const humanFileSize = (sizeInBytes: number) => {
@@ -110,7 +110,7 @@ export const FileUploadField = ({
   };
 
   return (
-    <FileUploadWrapper as="label" htmlFor={name}>
+    <FormLabel htmlFor={name}>
       <InputLabel label={label} tooltip={tooltip} as="span" />
       <FileUploadContainer>
         <HiddenFileInput
@@ -136,6 +136,6 @@ export const FileUploadField = ({
       {helperText && (
         <MuiFormHelperText component={FormHelperTextComponent}>{helperText}</MuiFormHelperText>
       )}
-    </FileUploadWrapper>
+    </FormLabel>
   );
 };
diff --git a/packages/ui-components/src/components/Inputs/ImageUploadField.tsx b/packages/ui-components/src/components/Inputs/ImageUploadField.tsx
index 750b6dbc76..132a79d6f7 100644
--- a/packages/ui-components/src/components/Inputs/ImageUploadField.tsx
+++ b/packages/ui-components/src/components/Inputs/ImageUploadField.tsx
@@ -7,7 +7,6 @@ import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { AvatarProps, Box, Fab, FormHelperText } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
-import { ConfirmDeleteModal, ConfirmDeleteModalProps } from '../ConfirmDeleteModal';
 import { FlexStart } from '../Layout';
 import { GreyOutlinedButton } from '../Button';
 import { Avatar } from '../Avatar';
@@ -86,7 +85,6 @@ interface ImageUploadFieldProps {
   onDelete?: () => void;
   label: string;
   buttonLabel?: string;
-  deleteModal?: Omit<ConfirmDeleteModalProps, 'isOpen' | 'onConfirm' | 'onCancel'> | null;
   avatarVariant?: AvatarProps['variant'];
   maxHeight?: number;
   maxWidth?: number;
@@ -122,10 +120,6 @@ export const ImageUploadField = React.memo(
     avatarInitial,
     label,
     buttonLabel = 'Upload photo',
-    deleteModal = {
-      title: 'Remove Photo',
-      message: 'Are you sure you want to remove your photo?',
-    },
     avatarVariant = 'circle',
     maxHeight,
     maxWidth,
@@ -137,12 +131,10 @@ export const ImageUploadField = React.memo(
     FormHelperTextComponent,
     invalid,
   }: ImageUploadFieldProps) => {
-    const [confirmModalIsOpen, setConfirmModalIsOpen] = useState(false);
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const inputEl = useRef<HTMLInputElement | null>(null);
 
     const handleDelete = () => {
-      setConfirmModalIsOpen(false);
       if (inputEl && inputEl.current) inputEl.current.value = '';
       onDelete();
       setErrorMessage(null);
@@ -186,14 +178,6 @@ export const ImageUploadField = React.memo(
       }
     };
 
-    const onClickDelete = () => {
-      if (deleteModal) {
-        setConfirmModalIsOpen(true);
-      } else {
-        handleDelete();
-      }
-    };
-
     return (
       <Wrapper className="upload_wrapper">
         <Box position="relative">
@@ -206,7 +190,7 @@ export const ImageUploadField = React.memo(
             {avatarInitial}
           </StyledAvatar>
           {imageSrc && (
-            <DeleteButton onClick={onClickDelete}>
+            <DeleteButton onClick={handleDelete}>
               <DeleteIcon />
             </DeleteButton>
           )}
@@ -236,15 +220,6 @@ export const ImageUploadField = React.memo(
           <GreyOutlinedButton component="span">{buttonLabel}</GreyOutlinedButton>
           {errorMessage && <ErrorMessage id={`${name}-error-message`}>{errorMessage}</ErrorMessage>}
         </Label>
-
-        {deleteModal && (
-          <ConfirmDeleteModal
-            isOpen={confirmModalIsOpen}
-            onConfirm={handleDelete}
-            onCancel={() => setConfirmModalIsOpen(false)}
-            {...deleteModal}
-          />
-        )}
       </Wrapper>
     );
   },
diff --git a/packages/ui-components/src/components/Inputs/RadioGroup.tsx b/packages/ui-components/src/components/Inputs/RadioGroup.tsx
index 7bc7780479..299c821bdc 100644
--- a/packages/ui-components/src/components/Inputs/RadioGroup.tsx
+++ b/packages/ui-components/src/components/Inputs/RadioGroup.tsx
@@ -32,26 +32,23 @@ const Legend = styled.legend`
 const StyledRadioGroup = styled(MuiRadioGroup)`
   display: inline-flex;
   flex-direction: row;
-  border: 1px solid ${props => props.theme.palette.grey['400']};
-  border-radius: 3px;
   overflow: hidden;
+  justify-content: space-between;
 `;
 
 const FormControlLabel = styled(MuiFormControlLabel)`
-  padding: 0.6rem 1.2rem 0.6rem 0.6rem;
+  padding: 0.5rem 1.2rem 0.5rem 0.6rem;
   margin: 0;
-  border-right: 1px solid ${props => props.theme.palette.grey['400']};
-  font-size: 1rem;
-  line-height: 1.2rem;
-  color: ${props => props.theme.palette.text.tertiary};
-  background: white;
+  border: 1px solid ${props => props.theme.palette.grey['400']};
+  border-radius: 3px;
+  min-width: 0;
 
   .MuiButtonBase-root {
     padding: 0.3rem;
   }
 
-  &:last-child {
-    border-right: none;
+  & + & {
+    margin-left: 0.625rem;
   }
 `;
 
@@ -67,7 +64,7 @@ const Radio = styled(MuiRadio)<
   }
 
   .MuiSvgIcon-root {
-    font-size: 1.125rem;
+    font-size: 1rem;
   }
 `;
 
diff --git a/packages/ui-components/src/components/Inputs/TextField.tsx b/packages/ui-components/src/components/Inputs/TextField.tsx
index 83164c102d..6768ce734e 100644
--- a/packages/ui-components/src/components/Inputs/TextField.tsx
+++ b/packages/ui-components/src/components/Inputs/TextField.tsx
@@ -23,16 +23,10 @@ const StyledTextField = styled(MuiTextField)<TextFieldProps>`
   .MuiInputBase-input {
     color: ${props => props.theme.palette.text.primary};
     font-weight: 400;
-    font-size: 1rem;
     line-height: 1.2rem;
-    padding: 1rem;
     border-radius: 3px;
   }
 
-  .MuiSelect-root {
-    color: ${props => props.theme.palette.text.tertiary};
-  }
-
   // Error state
   .MuiInputBase-root.Mui-error {
     background: ${props => props.theme.palette.error.light};
@@ -83,8 +77,6 @@ const StyledTextField = styled(MuiTextField)<TextFieldProps>`
   .MuiFormLabel-root {
     position: relative;
     margin-bottom: 3px;
-    color: ${props => props.theme.palette.text.secondary};
-    font-size: 0.9375rem;
     line-height: 1.125rem;
     transform: none;
     display: flex;
@@ -111,7 +103,6 @@ const StyledTextField = styled(MuiTextField)<TextFieldProps>`
   &&&& {
     .MuiInputBase-input::placeholder {
       opacity: 1 !important;
-      color: ${props => props.theme.palette.text.secondary};
     }
   }
 
diff --git a/packages/ui-components/src/components/index.ts b/packages/ui-components/src/components/index.ts
index 7aeb4defcc..b02b433a6a 100644
--- a/packages/ui-components/src/components/index.ts
+++ b/packages/ui-components/src/components/index.ts
@@ -13,7 +13,6 @@ export * from './Card';
 export * from './CardTabs';
 export * from './CheckboxList';
 export * from './CircleMeter';
-export * from './ConfirmDeleteModal';
 export * from './DataGrid';
 export * from './DataTable';
 export * from './DateRangePicker';
diff --git a/packages/ui-components/stories/confirmDeleteModal.stories.js b/packages/ui-components/stories/confirmDeleteModal.stories.js
deleted file mode 100644
index a68e1c4ac8..0000000000
--- a/packages/ui-components/stories/confirmDeleteModal.stories.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- */
-
-import React, { useState } from 'react';
-import MuiBox from '@material-ui/core/Box';
-import { ConfirmDeleteModal, WarningButton } from '../src/components';
-
-export default {
-  title: 'ConfirmDeleteModal',
-  component: ConfirmDeleteModal,
-};
-
-export const Simple = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <MuiBox p={3}>
-      <ConfirmDeleteModal
-        isOpen={isOpen}
-        message="Are you sure you want to delete this?"
-        onCancel={() => {
-          setIsOpen(false);
-        }}
-        onConfirm={() => {
-          setIsOpen(false);
-        }}
-      />
-      <WarningButton
-        onClick={() => {
-          setIsOpen(true);
-        }}
-      >
-        Delete this item
-      </WarningButton>
-    </MuiBox>
-  );
-};
diff --git a/packages/ui-components/stories/inputs/imageUploadField.stories.js b/packages/ui-components/stories/inputs/imageUploadField.stories.js
index 329c60a4fd..bff005f9fa 100644
--- a/packages/ui-components/stories/inputs/imageUploadField.stories.js
+++ b/packages/ui-components/stories/inputs/imageUploadField.stories.js
@@ -49,10 +49,6 @@ export const Simple = () => {
         onDelete={handleFileDelete}
         avatarInitial="BES"
         label="Your avatar"
-        deleteModal={{
-          title: 'Remove Photo',
-          message: 'Are you sure you want to delete your photo?',
-        }}
       />
     </Container>
   );

From d1e9b8fed9da76edd44b4c40cd19f2ff910fde19 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Fri, 10 May 2024 12:10:36 +1200
Subject: [PATCH 05/26] fix(adminPanel): Fix undefined component (#5630)

---
 .../VizBuilderApp/components/Modal/SaveVisualisationModal.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/admin-panel/src/VizBuilderApp/components/Modal/SaveVisualisationModal.jsx b/packages/admin-panel/src/VizBuilderApp/components/Modal/SaveVisualisationModal.jsx
index a23643fda6..964c2adb75 100644
--- a/packages/admin-panel/src/VizBuilderApp/components/Modal/SaveVisualisationModal.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/components/Modal/SaveVisualisationModal.jsx
@@ -111,14 +111,14 @@ export const SaveVisualisationModal = ({ isOpen, onClose }) => {
         },
       ]}
     >
-      <ContentWrapper>
+      <ModalCenteredContent>
         <Heading>Are you sure you want to save this visualisation?</Heading>
         <Typography>
           {visualisation.id
             ? 'The previous version of this visualisation will be overwritten'
             : `Visualisation will be created`}
         </Typography>
-      </ContentWrapper>
+      </ModalCenteredContent>
     </Modal>
   );
 };

From adaa0c88c9cad1d77996073aa38b42df7bf9e741 Mon Sep 17 00:00:00 2001
From: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date: Fri, 10 May 2024 14:14:22 +1200
Subject: [PATCH 06/26] feat(datatrakWeb): RN-1220: request country access
 (#5421)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* more descriptive `CountryAccess` typing

* prepare `ProjectResponse` for country access req

* regenerate JSON schema

* use baseline alignment on buttons

* introduce `ChangeProjectButton` component

* use `ChangeProjectButton` component

* export `Icons` before `ChangeProjectButton`

* fix export/initialisation order

* code style in `UserInfo`

* ProjectSelectForm styling when child of paragraph

* update copyright header comment

* fix legacy `UserMenu` usage

and some code formatting style

* code style

* clearer `AccountSettingsColumn` layout

* update login redirect test to use `/survey`

* fix project button font in header

* extend `useRequestProjectAccess` callbacks

* add initial data for `useCountryAccessList`

* tweak `AccountSettingsSection` layout

* update copyright header comment

* introduce `AccessGrantedCountryList`

* partially implement `RequestCountryAccessForm`

* fix `RequestCountryAccessSection` heading spacing

* streamline `RequestCoutryAccessForm` import/export

* trivial refactor (use destructuring)

* Squashed commit of the following:

commit 1e92c29785fd130e522d3b0b821f4cf14fc7eb27
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Thu Feb 22 12:00:08 2024 +1300

    remove `ensure()`… again 🥲

commit 124b0ee1b71b01d7fbc849082c4f14791ab9a1fb
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Thu Feb 22 11:00:52 2024 +1300

    fix mobile layout quirks

commit 6dc3f9a33e035f1ec9c09e7af279973bca0174e0
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Thu Feb 22 10:30:39 2024 +1300

    reuse a variable

commit b401d428194c40c3302052fb1502ccaed25c1976
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Thu Feb 22 10:27:11 2024 +1300

    🚑 add `tsutils` to `yarn.lock`

commit 03c3ca08d8e51858d3205c6b9d9a89bcc7ff4c23
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 16:48:52 2024 +1300

    🚑 fix dependency spelling

commit bfbaafd234b2fdd1d30f5767300b343b14e1a6bc
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 16:43:11 2024 +1300

    reintroduce `ensure()`

commit 4ebc20a6a80a4fe8025775cb2f025de528712d10
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 16:41:48 2024 +1300

    add `tsutils` as dep of DataTrak

commit 5944a629a44eec010cea5cb34e622fc0fdac6a93
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 16:28:09 2024 +1300

    typo

commit 5ecb1c47ea4d3dd33906b76a6259d67d6834742a
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 16:28:06 2024 +1300

    restore RequestableCountryChecklist behaviour

commit 1a89ef83a51d22693a3c7b8f95d3ad25d53e394c
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 15:53:30 2024 +1300

    use `assertIsNotNullish()` instead of `ensure()`

commit ebe1f2d229f6db7fe8511c5fec290bcded1faf43
Merge: 4a9f887da fea259fad
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 15:11:02 2024 +1300

    Merge branch 'waitp-1468-request-country-access-3' into waitp-1468-headbanging

commit 4a9f887da5442edae1c62a647bf9651a5be93caf
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 15:06:40 2024 +1300

    use `project`

commit 1f53f1e34c4ddca3d7c41ce3e82eaa7c33d86d53
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 15:01:00 2024 +1300

    Revert "`CurrentUserContext` logs"

    This reverts commit c003df94ba8a942dd1870b9ba37d0cd79a423225.

commit 9247f15426ccf6f666a716b2bfa54ea0b8ca5336
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 14:07:55 2024 +1300

    remove use of `ensure()`

commit 34485bde91febdb096770949cee4cf343a173b48
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 13:30:06 2024 +1300

    push change to trigger redeployment

commit cbf668c841cebd626100026ac6afb16703e90c86
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 11:28:21 2024 +1300

    access project code

commit 2f67ac52e7ba868ce9dfea48d227e9c8dcd893ba
Merge: 59d88b975 886ad3785
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 10:20:24 2024 +1300

    Merge branch 'dev' into waitp-1468-headbanging

    # Conflicts:
    #	packages/datatrak-web/src/features/ProjectSelectForm.tsx
    #	packages/server-boilerplate/README.md

commit 59d88b975ce49a34a2e576ff6bf5cb0879206588
Merge: e4ae44764 ee32cd8db
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 10:16:56 2024 +1300

    Merge branch 'dev' into waitp-1468-headbanging

commit e4ae447646e8e02cba76b2f04236cd4b6bf07a76
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Tue Feb 20 09:44:45 2024 +1300

    call `useCurrentUser()`

commit c003df94ba8a942dd1870b9ba37d0cd79a423225
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Mon Feb 19 16:57:18 2024 +1300

    `CurrentUserContext` logs

commit 14fc6b42e813eeb83d80c6046d129edb25745df4
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Mon Feb 19 15:15:21 2024 +1300

    put things back

commit 0eddc2c8aeac617b91ddf374182bb90a16aa396d
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Mon Feb 19 14:13:09 2024 +1300

    remove `useCurrentUser()` usage

commit 6bb92878d103f3909c814bcb503118f33ee01090
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Mon Feb 19 09:51:07 2024 +1300

    remove `useCountryAccessList` usage

commit 89a269ccace061e0b4c111fb744ab6c840a175d5
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 16:51:26 2024 +1300

    Revert "editorial nitpicks"

    This reverts commit de98244a030261ce7e3666c8e0cc884723ad6ae1.

commit c2fea6dbd2640ccdbf68f520218213ac6b4c19ad
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 16:51:26 2024 +1300

    Revert "curly apostrophe"

    This reverts commit 85678ebb523c3a59ad72ece609a3d8b65ba55fe0.

commit 2f13b9f31c0dcf6fe79df086f39775ed0c49fad1
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 16:51:25 2024 +1300

    Revert "editorial nitpicks"

    This reverts commit f68752646abe5a55180b71a893e7c4527cd86963.

commit 3c327b6f4a60d6c80edc7e0af6ca4785880dd6e4
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 16:51:23 2024 +1300

    Revert "standardise spelling of “microservice”"

    This reverts commit 4f7682250a53b41d98c85e69affe4996193072dd.

commit de98244a030261ce7e3666c8e0cc884723ad6ae1
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 16:34:16 2024 +1300

    editorial nitpicks

commit 85678ebb523c3a59ad72ece609a3d8b65ba55fe0
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 16:33:32 2024 +1300

    curly apostrophe

commit f68752646abe5a55180b71a893e7c4527cd86963
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 16:32:49 2024 +1300

    editorial nitpicks

commit 4f7682250a53b41d98c85e69affe4996193072dd
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 16:31:10 2024 +1300

    standardise spelling of “microservice”

commit 7598d65e56bc5e444750b66801b2937c599c9abd
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 16:24:52 2024 +1300

    remove `register()` usage

commit 66e54c47de76d83d05a8236664e05a7f8b6bfaa4
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 15:25:16 2024 +1300

    comment some stuff out

commit 79a12169be0bdf631743a982db274f2497234be1
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 15:25:11 2024 +1300

    rename a variable

commit a8433958714a63f73877fae49fc7fa690cc089b6
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 15:00:14 2024 +1300

    remove placeholder

commit ef341d9d37daddc66077babc537d7080fd9e4f15
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 14:40:53 2024 +1300

    introduce `RequestableCountryChecklist`

commit 1e6e14d3f2dad7fbaae30bed195e0748b6133848
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 13:04:35 2024 +1300

    comment out more stuff

commit 28cc1b27e83652f03cca5900533ed7a6585a303b
Author: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date:   Fri Feb 16 09:21:55 2024 +1300

    ⚗️ remove use of `useTheme`

* correct inline comment

* fix larger size class layout

* code style

* refactor, refine sm/md size class layout

* show only relevant granted countries

* fix imports

and a typo

* remove rogue log

Co-authored-by: alexd-bes <129009580+alexd-bes@users.noreply.github.com>

* accept that `project` may be nullish

* share `ProjectCountryAccessListRequest` type

* fix typing error

* update copyright date

* fix build error

* regenerate schemas

* use new shared type

* use new `CountryAccessObject` type

* fix a build error

* `projectCountryAccessList` API endpoint

* refactor out dead logic

* refactor out more dead logic

* fix export order

* fix import/build error

merging dev somehow missed this

* fix import

* feat(centralServer): RN-1220: centralise `countryAccessList` & make project-dependent (#5503)

* organise imports

* move/rename `ProjectCountryAccessListRequest` type

* consolidate country access list types

* use new `useCountryAccessList` signature

* un-export `CountryAccessObject`

* remove explicit usages of `CountryAccessObject`

* fix typing error

* consolidate country access list routes

* include `projectCode` as query param

* throw 400 error if no project code

* destructure `models`

* destructure `country`

* return `hasPendingAccess`, not access req list

* add `countries()` to project model

* optimise query for entities

* wait for array of promises

* header comment

* the big refactor

* inline variable

* adapt `ProjectAccessForm` to new behaviour

* amend AccessGrantedCountryList to new behaviour

* add example call in `examples.http`

* newline at EOF

* clean up diff

* more diff clean-up

* again

* update copyright header comments

* rename type to `ProjectCountryAccessListRequest`

* deprecate tupaia-web-server version

* specify HTTP version

* remove redundant leading slash

* make query key match endpoint path

Co-authored-by: alexd-bes <129009580+alexd-bes@users.noreply.github.com>

---------

Co-authored-by: alexd-bes <129009580+alexd-bes@users.noreply.github.com>

* update models

* inconsequential code style

* regenerate types

* use correct db to generate types

* no submission when has access to all countries

* performancee: prefer `concat` to `...`

* fix cache invalidation

* fix query invalidation in DataTrak

* code style

* fix project list not updating after access request

* invalidate country list after project request

* code style

* delete unused code 💣

* re-fix query invalidation in DataTrak

---------

Co-authored-by: Andrew <vanbeekandrew@gmail.com>
Co-authored-by: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
---
 .../api-client/src/connections/CentralApi.ts  |   9 +-
 .../src/connections/mocks/MockCentralApi.ts   |   9 +-
 packages/central-server/examples.http         |  15 +-
 .../src/apiV2/getCountryAccessList.js         |  63 ++--
 packages/database/src/modelClasses/Project.js |  21 +-
 .../datatrak-web-server/src/app/createApp.ts  |   4 +-
 .../__tests__/__integration__/login.test.tsx  |   6 +-
 .../api/mutations/useRequestProjectAccess.ts  |  33 +-
 .../src/api/queries/useCountryAccessList.ts   |  13 +-
 .../datatrak-web/src/components/Button.tsx    |   8 +-
 .../src/components/ChangeProjectButton.tsx    |  83 +++++
 packages/datatrak-web/src/components/index.ts |  25 +-
 .../src/features/ProjectSelectForm.tsx        |  11 +-
 .../ProjectAccessForm.tsx                     |  26 +-
 .../RequestProjectAccess.tsx                  |  13 +-
 .../src/layout/UserMenu/UserInfo.tsx          |  60 +---
 .../src/layout/UserMenu/UserMenu.tsx          |  22 +-
 packages/datatrak-web/src/theme/theme.ts      |   4 +-
 .../AccountSettingsColumn.tsx                 |  20 +-
 .../AccountSettingsSection.tsx                |  10 +-
 .../RequestCountryAccessSection.tsx           |  16 -
 .../AccessGrantedCountryList.tsx              |  89 +++++
 .../RequestCountryAccessForm.tsx              | 200 +++++++++++
 .../RequestCountryAccessSection.tsx           |  36 ++
 .../RequestableCountryChecklist.tsx           |  99 ++++++
 .../RequestCountryAccessSection/index.ts      |   6 +
 packages/tupaia-web-server/examples.http      |   2 +-
 .../tupaia-web-server/src/app/createApp.ts    |   5 +-
 .../routes/ProjectCountryAccessListRoute.ts   |  54 ---
 .../tupaia-web-server/src/routes/index.ts     |   4 -
 .../api/mutations/useRequestCountryAccess.ts  |   5 +-
 .../queries/useProjectCountryAccessList.ts    |  10 +-
 packages/tupaia-web/src/types/types.d.ts      |   7 +-
 .../ProjectAccessForm.tsx                     |  16 +-
 packages/types/src/schemas/schemas.ts         | 315 ++++++------------
 .../central-server/CountryAccessRequest.ts    |  12 -
 .../ProjectCountryAccessListRequest.ts        |  15 +-
 .../types/requests/central-server/index.ts    |   5 +-
 .../CountryAccessListRequest.ts               |  12 +-
 .../requests/datatrak-web-server/index.ts     |   1 -
 packages/types/src/types/requests/index.ts    |   9 +-
 .../types/requests/tupaia-web-server/index.ts |   1 -
 .../requests/web-server/ProjectRequest.ts     |  14 +-
 .../src/types/requests/web-server/index.ts    |   6 +-
 44 files changed, 857 insertions(+), 537 deletions(-)
 create mode 100644 packages/datatrak-web/src/components/ChangeProjectButton.tsx
 delete mode 100644 packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection.tsx
 create mode 100644 packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/AccessGrantedCountryList.tsx
 create mode 100644 packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessForm.tsx
 create mode 100644 packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessSection.tsx
 create mode 100644 packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestableCountryChecklist.tsx
 create mode 100644 packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/index.ts
 delete mode 100644 packages/tupaia-web-server/src/routes/ProjectCountryAccessListRoute.ts
 delete mode 100644 packages/types/src/types/requests/central-server/CountryAccessRequest.ts
 rename packages/types/src/types/requests/{tupaia-web-server => central-server}/ProjectCountryAccessListRequest.ts (51%)

diff --git a/packages/api-client/src/connections/CentralApi.ts b/packages/api-client/src/connections/CentralApi.ts
index d15dfe5666..7b784c6bb8 100644
--- a/packages/api-client/src/connections/CentralApi.ts
+++ b/packages/api-client/src/connections/CentralApi.ts
@@ -1,9 +1,10 @@
-/**
+/*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import type { MeditrakSurveyResponseRequest, CountryAccessResponse } from '@tupaia/types';
+import type { MeditrakSurveyResponseRequest } from '@tupaia/types';
+import { ProjectCountryAccessListRequest } from '@tupaia/types';
 import { QueryParameters } from '../types';
 import { RequestBody } from './ApiConnection';
 import { BaseApi } from './BaseApi';
@@ -31,7 +32,7 @@ export class CentralApi extends BaseApi {
     return this.connection.get('me');
   }
 
-  public async getCountryAccessList(): Promise<CountryAccessResponse[]> {
+  public async getCountryAccessList(): Promise<ProjectCountryAccessListRequest.ResBody> {
     return this.connection.get('me/countries');
   }
 
diff --git a/packages/api-client/src/connections/mocks/MockCentralApi.ts b/packages/api-client/src/connections/mocks/MockCentralApi.ts
index f070b606e0..40f1a20402 100644
--- a/packages/api-client/src/connections/mocks/MockCentralApi.ts
+++ b/packages/api-client/src/connections/mocks/MockCentralApi.ts
@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-/**
+/*
  * Tupaia
- * Copyright (c) 2017 - 2022 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import type { MeditrakSurveyResponseRequest, CountryAccessResponse } from '@tupaia/types';
+import type { MeditrakSurveyResponseRequest } from '@tupaia/types';
+import { ProjectCountryAccessListRequest } from '@tupaia/types';
 import { CentralApiInterface } from '..';
 import { RequestBody } from '../ApiConnection';
 
@@ -59,7 +60,7 @@ export class MockCentralApi implements CentralApiInterface {
   public getUser(): Promise<any> {
     throw new Error('Method not implemented.');
   }
-  public getCountryAccessList(): Promise<CountryAccessResponse[]> {
+  public getCountryAccessList(): Promise<ProjectCountryAccessListRequest.ResBody> {
     throw new Error('Method not implemented.');
   }
   public registerUserAccount(
diff --git a/packages/central-server/examples.http b/packages/central-server/examples.http
index 86a952da43..fc9afdc3b0 100644
--- a/packages/central-server/examples.http
+++ b/packages/central-server/examples.http
@@ -37,21 +37,26 @@ GET {{baseUrl}}/surveyResponses?pageSize=5&columns=["entity.name", "country.name
 content-type: {{contentType}}
 Authorization: {{user-authorization}}
 
-
 ### Get social feed
 
 GET {{baseUrl}}/socialFeed?appVersion=1.14.140&page=0&earliestCreationDate=2024-02-19T21:45:16.391Z HTTP/2.0
 content-type: {{contentType}}
 Authorization: {{user-authorization}}
 
+### Get country access list for a project
 
-### GET entity hierarchy
-GET http://{{host}}/{{version}}/entityHierarchy/5e9d06e261f76a30c4000002 HTTP/2.0
+GET {{baseUrl}}/{{version}}/me/countries?projectCode=explore
+content-type: {{contentType}}
+Authorization: Basic {{user-authorization}}
+
+### GET entity hierarchies
+
+GET {{baseUrl}}/{{version}}/entityHierarchy HTTP/2.0
 content-type: {{contentType}}
 Authorization: {{user-authorization}}
 
+### GET entity hierarchy
 
-### GET entity hierarchies
-GET http://{{host}}/{{version}}/entityHierarchy HTTP/2.0
+GET {{baseUrl}}/{{version}}/entityHierarchy/5e9d06e261f76a30c4000002 HTTP/2.0
 content-type: {{contentType}}
 Authorization: {{user-authorization}}
diff --git a/packages/central-server/src/apiV2/getCountryAccessList.js b/packages/central-server/src/apiV2/getCountryAccessList.js
index d623fb33a2..c863393e3b 100644
--- a/packages/central-server/src/apiV2/getCountryAccessList.js
+++ b/packages/central-server/src/apiV2/getCountryAccessList.js
@@ -1,46 +1,39 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { respond, reduceToDictionary } from '@tupaia/utils';
-
-const mapRequestsToEntities = (requestedEntities, projectCodeById) => {
-  const entityRequests = {};
-  requestedEntities.forEach(request => {
-    if (!(request.entity_id in entityRequests)) {
-      entityRequests[request.entity_id] = [];
-    }
-    const projectCode = request.project_id != null ? projectCodeById[request.project_id] : 'none';
-    entityRequests[request.entity_id].push(projectCode);
-  });
-  return entityRequests;
-};
+import { respond } from '@tupaia/utils';
 
 export async function getCountryAccessList(req, res, next) {
-  const { userId, models } = req;
+  const { userId, models, query, accessPolicy } = req;
+  const { projectCode } = query;
+  if (!projectCode) throw new Error('No project code provided');
 
   try {
-    const countries = await models.entity.find({ type: 'country' });
-    const entityPermissions = await models.userEntityPermission.find({ user_id: userId });
-    const permittedEntityIds = new Set(entityPermissions.map(p => p.entity_id));
-    const accessRequests = await models.accessRequest.find({
-      user_id: userId,
-      processed_date: null,
-    });
-    const projects = await models.project.find();
-    const projectCodeById = reduceToDictionary(projects, 'id', 'code');
-    const entityRequests = mapRequestsToEntities(accessRequests, projectCodeById);
+    const project = await models.project.findOne({ code: projectCode });
+    if (!project) throw new Error(`No project found with code ‘${projectCode}’`);
+
+    const countries = await project.countries();
+    const countriesPendingAccess = (
+      await models.accessRequest.find({
+        user_id: userId,
+        project_id: project.id,
+        approved: null,
+      })
+    ).map(accessRequest => accessRequest.entity_id);
 
     const countryAccessList = countries
-      .filter(country => country.name !== 'No Country')
-      .map(country => ({
-        id: country.id,
-        name: country.name,
-        hasAccess: permittedEntityIds.has(country.id),
-        accessRequests: entityRequests[country.id] || [],
-        code: country.code,
-      }))
+      .reduce((listSoFar, country) => {
+        const { id, code, name } = country;
+        const hasAccess = project.permission_groups.some(permissionGroup =>
+          accessPolicy.allows(code, permissionGroup),
+        );
+        const hasPendingAccess = countriesPendingAccess.includes(id);
+
+        const countryAccessListItem = { id, name, hasAccess, hasPendingAccess };
+        return [...listSoFar, countryAccessListItem];
+      }, [])
       .sort((a, b) => a.name.localeCompare(b.name));
 
     respond(res, countryAccessList);
diff --git a/packages/database/src/modelClasses/Project.js b/packages/database/src/modelClasses/Project.js
index a3ed1ffa38..5a8b5f4fde 100644
--- a/packages/database/src/modelClasses/Project.js
+++ b/packages/database/src/modelClasses/Project.js
@@ -1,6 +1,6 @@
-/**
+/*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import { DatabaseModel } from '../DatabaseModel';
@@ -13,6 +13,23 @@ const BES_ADMIN_PERMISSION_GROUP = 'BES Admin';
 export class ProjectRecord extends DatabaseRecord {
   static databaseRecord = RECORDS.PROJECT;
 
+  /**
+   * The countries which apply to this project.
+   */
+  async countries() {
+    const entityRelations = await this.otherModels.entityRelation.find({
+      parent_id: this.entity_id,
+    });
+    return Promise.all(
+      entityRelations.map(async entityRelation =>
+        this.otherModels.entity.findOne({
+          id: entityRelation.child_id,
+          type: 'country',
+        }),
+      ),
+    );
+  }
+
   async permissionGroups() {
     return this.otherModels.permissionGroup.find({ name: this.permission_groups });
   }
diff --git a/packages/datatrak-web-server/src/app/createApp.ts b/packages/datatrak-web-server/src/app/createApp.ts
index c88026b745..9383cbcff1 100644
--- a/packages/datatrak-web-server/src/app/createApp.ts
+++ b/packages/datatrak-web-server/src/app/createApp.ts
@@ -1,6 +1,6 @@
-/**
+/*
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import { Request } from 'express';
diff --git a/packages/datatrak-web/src/__tests__/__integration__/login.test.tsx b/packages/datatrak-web/src/__tests__/__integration__/login.test.tsx
index 6fbb9db8be..9a13272233 100644
--- a/packages/datatrak-web/src/__tests__/__integration__/login.test.tsx
+++ b/packages/datatrak-web/src/__tests__/__integration__/login.test.tsx
@@ -1,6 +1,6 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 import { fireEvent, screen } from '@testing-library/react';
 import { rest } from 'msw';
@@ -58,12 +58,12 @@ describe('Login', () => {
   });
 
   it('Redirects back where it came from', async () => {
-    renderPage('/account-settings');
+    renderPage('/survey');
     expect(await screen.findByRole('heading', { level: 2 })).toHaveTextContent('Log in');
 
     server.use(mockUserRequest({ email: 'john@gmail.com', projectId: 'foo' }));
     await doLogin();
 
-    expect(await screen.findByRole('heading', { level: 1 })).toHaveTextContent(/Account settings/i);
+    expect(await screen.findByRole('heading', { level: 1 })).toHaveTextContent(/Select survey/i);
   });
 });
diff --git a/packages/datatrak-web/src/api/mutations/useRequestProjectAccess.ts b/packages/datatrak-web/src/api/mutations/useRequestProjectAccess.ts
index acd6ae062d..26c3d0b6dc 100644
--- a/packages/datatrak-web/src/api/mutations/useRequestProjectAccess.ts
+++ b/packages/datatrak-web/src/api/mutations/useRequestProjectAccess.ts
@@ -1,18 +1,29 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import { useMutation, useQueryClient } from 'react-query';
-import { Country } from '@tupaia/types';
+import { Country, Project } from '@tupaia/types';
 import { post } from '../api';
 
 type RequestCountryAccessParams = {
   entityIds: Country['id'][];
   message?: string;
-  projectCode?: string;
+  projectCode?: Project['code'];
 };
-export const useRequestProjectAccess = () => {
+
+interface ResponseBody {
+  message: string;
+}
+
+interface RequestProjectAccessOptions {
+  onError?: (error: Error) => void;
+  onSettled?: () => void;
+  onSuccess?: (response: ResponseBody) => void;
+}
+
+export const useRequestProjectAccess = (options?: RequestProjectAccessOptions) => {
   const queryClient = useQueryClient();
 
   return useMutation<any, Error, RequestCountryAccessParams, unknown>(
@@ -26,10 +37,16 @@ export const useRequestProjectAccess = () => {
       });
     },
     {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: ['projects'],
-        });
+      onError(error: Error) {
+        options?.onError?.(error);
+      },
+      onSettled() {
+        options?.onSettled?.();
+      },
+      async onSuccess(response: ResponseBody) {
+        await queryClient.invalidateQueries({ queryKey: ['me/countries'] });
+        await queryClient.invalidateQueries({ queryKey: ['projects'] });
+        options?.onSuccess?.(response);
       },
     },
   );
diff --git a/packages/datatrak-web/src/api/queries/useCountryAccessList.ts b/packages/datatrak-web/src/api/queries/useCountryAccessList.ts
index 27fd61646c..fbfdcc5718 100644
--- a/packages/datatrak-web/src/api/queries/useCountryAccessList.ts
+++ b/packages/datatrak-web/src/api/queries/useCountryAccessList.ts
@@ -1,17 +1,20 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import { useQuery } from 'react-query';
-import { DatatrakWebCountryAccessListRequest } from '@tupaia/types';
+import { Project, ProjectCountryAccessListRequest } from '@tupaia/types';
 import { get } from '../api';
 
-export const useCountryAccessList = () => {
+export const useCountryAccessList = (projectCode: Project['code']) => {
   return useQuery(
-    'countryAccessList',
-    (): Promise<DatatrakWebCountryAccessListRequest.ResBody> => get('me/countries'),
+    ['me/countries', projectCode],
+    (): Promise<ProjectCountryAccessListRequest.ResBody> =>
+      get('me/countries', { params: { projectCode } }),
     {
+      enabled: !!projectCode,
+      initialData: [],
       placeholderData: [],
       staleTime: 0, // Disable cache so that if we go back to the request access view, the country list is up to date
     },
diff --git a/packages/datatrak-web/src/components/Button.tsx b/packages/datatrak-web/src/components/Button.tsx
index cc311efe35..bb3fca08ea 100644
--- a/packages/datatrak-web/src/components/Button.tsx
+++ b/packages/datatrak-web/src/components/Button.tsx
@@ -1,7 +1,8 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import React, { ReactElement, ReactNode } from 'react';
 import { Link as RouterLink, To } from 'react-router-dom';
 import { Button as UIButton, Tooltip } from '@tupaia/ui-components';
@@ -13,9 +14,10 @@ const StyledButton = styled(UIButton)`
   }
 `;
 
-const TooltipButtonWrapper = styled.span`
+export const TooltipButtonWrapper = styled.span`
   display: flex;
   flex-direction: column;
+  vertical-align: baseline;
 `;
 
 interface ButtonProps extends Record<string, any> {
@@ -33,7 +35,7 @@ const ButtonWrapper = ({
 }) => {
   if (!tooltip) return children;
   return (
-    // we need to wrap the button in a span so that there is not a console error about tooltips on disabled buttons
+    // Wrap the button in a <span> to suppress console error about tooltips on disabled buttons
     <Tooltip title={tooltip} arrow enterDelay={1000}>
       <TooltipButtonWrapper>{children}</TooltipButtonWrapper>
     </Tooltip>
diff --git a/packages/datatrak-web/src/components/ChangeProjectButton.tsx b/packages/datatrak-web/src/components/ChangeProjectButton.tsx
new file mode 100644
index 0000000000..9337d41161
--- /dev/null
+++ b/packages/datatrak-web/src/components/ChangeProjectButton.tsx
@@ -0,0 +1,83 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { ProjectSelectModal } from '../layout/UserMenu/ProjectSelectModal';
+import { useCurrentUserContext } from '../api';
+import { UserDetails as NavbarUserDetails } from '../layout/UserMenu/UserInfo';
+import { Button, TooltipButtonWrapper } from './Button';
+
+/**
+ * Manages how this “Change Project button” component is laid out. Under normal circumstances, it
+ * uses block display; but if it’s the child of a paragraph or heading, it is displayed inline.
+ *
+ * Also adds a border to separate it from adjacent elements in certain contexts.
+ */
+const Container = styled.div`
+  ${NavbarUserDetails} & {
+    border-inline-start: 1px solid ${({ theme }) => theme.palette.text.secondary};
+    padding-inline-start: 0.5rem;
+  }
+
+  .MuiTypography-root & {
+    &,
+    > ${TooltipButtonWrapper} // Prevent span wrapper on button from growing to fill parent
+    {
+      display: inline;
+    }
+
+    :before {
+      color: ${({ theme }) => theme.palette.text.secondary};
+      content: '|';
+      margin-inline: 0.25rem;
+    }
+  }
+`;
+
+const ProjectButton = styled(Button).attrs({
+  disableFocusRipple: true,
+  disableRipple: true,
+  variant: 'text',
+})`
+  color: ${({ theme }) => theme.palette.text.secondary};
+
+  :focus,
+  :focus-visible,
+  :hover {
+    background: none;
+    color: ${({ theme }) => theme.palette.action.hover};
+    text-decoration: underline;
+  }
+
+  &,
+  .MuiButton-root,
+  .MuiButton-label {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    inline-size: fit-content;
+    margin: 0;
+    padding: 0;
+  }
+`;
+
+export const ChangeProjectButton = ({ className }: { className?: string }) => {
+  const { project } = useCurrentUserContext();
+  const projectName = project?.name ?? null;
+
+  const [projectModalIsOpen, setProjectModalIsOpen] = useState(false);
+  const openProjectModal = () => setProjectModalIsOpen(true);
+  const closeProjectModal = () => setProjectModalIsOpen(false);
+
+  return (
+    <Container className={className}>
+      <ProjectButton onClick={openProjectModal} tooltip="Change project">
+        {projectName ?? 'Select project'}
+      </ProjectButton>
+      {projectModalIsOpen && <ProjectSelectModal onClose={closeProjectModal} />}
+    </Container>
+  );
+};
diff --git a/packages/datatrak-web/src/components/index.ts b/packages/datatrak-web/src/components/index.ts
index 76ac39845a..fe7d66d3f4 100644
--- a/packages/datatrak-web/src/components/index.ts
+++ b/packages/datatrak-web/src/components/index.ts
@@ -1,21 +1,22 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 export { PageContainer } from './PageContainer';
-export { ButtonLink } from './ButtonLink';
-export { Modal } from './Modal';
-export { TopProgressBar } from './TopProgressBar';
-export { Button } from './Button';
-export * from './SelectList';
-export { TextInput } from './TextInput';
-export { Toast } from './Toast';
-export { Tile, LoadingTile } from './Tile';
 export * from './Icons';
-export { SmallModal } from './SmallModal';
+export * from './SelectList';
+export { Autocomplete } from './Autocomplete';
+export { Button } from './Button';
+export { ButtonLink } from './ButtonLink';
 export { CancelConfirmModal } from './CancelConfirmModal';
+export { ChangeProjectButton } from './ChangeProjectButton';
 export { ErrorDisplay } from './ErrorDisplay';
-export { PageTitleBar } from './PageTitleBar';
-export { Autocomplete } from './Autocomplete';
 export { InputHelperText } from './InputHelperText';
+export { Modal } from './Modal';
+export { PageTitleBar } from './PageTitleBar';
+export { SmallModal } from './SmallModal';
+export { TextInput } from './TextInput';
+export { Tile, LoadingTile } from './Tile';
+export { Toast } from './Toast';
+export { TopProgressBar } from './TopProgressBar';
diff --git a/packages/datatrak-web/src/features/ProjectSelectForm.tsx b/packages/datatrak-web/src/features/ProjectSelectForm.tsx
index 8e7cfbb6eb..e073e3ffcf 100644
--- a/packages/datatrak-web/src/features/ProjectSelectForm.tsx
+++ b/packages/datatrak-web/src/features/ProjectSelectForm.tsx
@@ -26,12 +26,19 @@ const LoadingContainer = styled.div`
 const ListWrapper = styled.div<{
   $variant?: 'modal' | 'page';
 }>`
-  max-height: ${({ $variant }) => ($variant === 'modal' ? 'none' : '35rem')};
   display: flex;
   flex-direction: column;
   overflow: auto;
+
+  // Keep body text styling, even if component is child of a paragraph/heading
+  font-size: ${({ theme }) => theme.typography.body1.fontSize};
+  font-weight: 400;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+
+  max-block-size: ${({ $variant }) => ($variant === 'modal' ? 'none' : '35rem')};
   ${({ theme }) => theme.breakpoints.up('sm')} {
-    max-height: 35rem;
+    max-block-size: 35rem;
   }
 `;
 
diff --git a/packages/datatrak-web/src/features/RequestProjectAccess/ProjectAccessForm.tsx b/packages/datatrak-web/src/features/RequestProjectAccess/ProjectAccessForm.tsx
index ba22819a01..9c144458f7 100644
--- a/packages/datatrak-web/src/features/RequestProjectAccess/ProjectAccessForm.tsx
+++ b/packages/datatrak-web/src/features/RequestProjectAccess/ProjectAccessForm.tsx
@@ -107,7 +107,7 @@ interface ProjectAccessFormProps {
 }
 
 export const ProjectAccessForm = ({ project, onClose }: ProjectAccessFormProps) => {
-  const { data: countries } = useCountryAccessList();
+  const { data: countries } = useCountryAccessList(project.code);
   const formContext = useForm({
     mode: 'onChange',
   });
@@ -117,9 +117,6 @@ export const ProjectAccessForm = ({ project, onClose }: ProjectAccessFormProps)
   } = formContext;
   const { mutate: requestProjectAccess, isLoading, isSuccess } = useRequestProjectAccess();
 
-  // the countries that are applicable to this project
-  const projectCountries = countries?.filter((c: any) => project?.names?.includes(c.name));
-
   const projectCode = project?.code;
   const submitForm = (formData: any) => {
     requestProjectAccess({
@@ -161,23 +158,18 @@ export const ProjectAccessForm = ({ project, onClose }: ProjectAccessFormProps)
     <Form onSubmit={submitForm as SubmitHandler<any>} formContext={formContext}>
       <FormControl>
         <FormGroup>
-          {projectCountries?.map((country: any) => {
-            const hasRequestedAccess = country.accessRequests.includes(projectCode);
+          {countries?.map(({ id, name, hasPendingAccess }) => {
             return (
               <Checkbox
-                id={country.id}
-                inputRef={register({
-                  validate: value => value.length > 0,
-                })}
-                disabled={hasRequestedAccess}
-                key={country.id}
-                label={country.name}
+                id={id}
+                inputRef={register({ validate: value => value.length > 0 })}
+                disabled={hasPendingAccess}
+                key={id}
+                label={name}
                 name="entityIds"
-                value={country.id}
+                value={id}
                 tooltip={
-                  hasRequestedAccess
-                    ? 'You have already requested access to this country'
-                    : undefined
+                  hasPendingAccess ? 'You have already requested access to this country' : undefined
                 }
               />
             );
diff --git a/packages/datatrak-web/src/features/RequestProjectAccess/RequestProjectAccess.tsx b/packages/datatrak-web/src/features/RequestProjectAccess/RequestProjectAccess.tsx
index 55cc20dbf4..eb3601e3a4 100644
--- a/packages/datatrak-web/src/features/RequestProjectAccess/RequestProjectAccess.tsx
+++ b/packages/datatrak-web/src/features/RequestProjectAccess/RequestProjectAccess.tsx
@@ -1,12 +1,13 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import React from 'react';
 import styled from 'styled-components';
 import { Typography } from '@material-ui/core';
 import { SpinningLoader } from '@tupaia/ui-components';
-import { useProject } from '../../api/queries';
+import { useProject } from '../../api';
 import { ProjectAccessForm } from './ProjectAccessForm';
 
 const Wrapper = styled.div`
@@ -17,8 +18,8 @@ const Wrapper = styled.div`
 const BodyText = styled(Typography).attrs({
   color: 'textSecondary',
 })`
-  margin: 1rem 0 2rem 0;
   font-size: 0.875rem;
+  margin: 1rem 0 2rem;
 `;
 
 const Container = styled.div`
@@ -32,7 +33,7 @@ const Logo = styled.img`
 `;
 
 const ProjectDetails = styled.div`
-  padding: 1rem 0 1.6rem 0;
+  padding: 1rem 0 1.6rem;
 `;
 
 interface RequestProjectAccessProps {
@@ -55,10 +56,10 @@ export const RequestProjectAccess = ({ projectCode, onClose }: RequestProjectAcc
           <SpinningLoader />
         ) : (
           <>
-            {project?.logoUrl && <Logo src={project?.logoUrl!} alt={project?.name} />}
+            {project?.logoUrl && <Logo src={project.logoUrl} alt={project.name} />}
             <ProjectDetails>
               <Typography variant="h2">{project?.name}</Typography>
-              {project?.description && <Typography>{project?.description}</Typography>}
+              {project?.description && <Typography>{project.description}</Typography>}
             </ProjectDetails>
             <ProjectAccessForm project={project} onClose={onClose} />
           </>
diff --git a/packages/datatrak-web/src/layout/UserMenu/UserInfo.tsx b/packages/datatrak-web/src/layout/UserMenu/UserInfo.tsx
index 97383beae6..a8f89e2a6a 100644
--- a/packages/datatrak-web/src/layout/UserMenu/UserInfo.tsx
+++ b/packages/datatrak-web/src/layout/UserMenu/UserInfo.tsx
@@ -1,62 +1,37 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React from 'react';
 import styled from 'styled-components';
 import { Typography } from '@material-ui/core';
 import { RouterLink } from '@tupaia/ui-components';
-import { Button } from '../../components';
+import { Button, ChangeProjectButton } from '../../components';
 import { useCurrentUserContext } from '../../api';
 import { ROUTES } from '../../constants';
 
 const Wrapper = styled.div`
-  padding-left: 1rem;
+  padding-inline-start: 1rem;
   ${({ theme }) => theme.breakpoints.up('md')} {
-    padding-left: 1.5rem;
+    padding-inline-start: 1.5rem;
   }
 `;
 
-const Details = styled.div`
-  align-items: center;
+export const UserDetails = styled.div`
+  align-items: baseline;
   display: flex;
+  font-size: 1.2em;
   gap: 0.5rem;
   padding-inline: 0.5rem;
   > span {
     color: ${props => props.theme.palette.text.primary};
-    font-size: 1.2em;
   }
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
 `;
 
-const ProjectButton = styled(Button).attrs({
-  variant: 'text',
-})`
-  padding-inline: 0;
-  justify-content: center;
-  .MuiButton-label {
-    font-size: 1rem;
-    line-height: 1.4;
-    font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
-  }
-  color: ${props => props.theme.palette.text.secondary};
-  &:hover {
-    background: none;
-    color: ${props => props.theme.palette.action.hover};
-    text-decoration: underline;
-  }
-
-  &:before {
-    content: '';
-    border-left: 1px solid ${props => props.theme.palette.text.secondary};
-    height: 1.2rem;
-    margin-inline-end: 0.5rem;
-  }
-`;
-
 const AuthLink = styled(Button).attrs({
   color: 'default',
   component: RouterLink,
@@ -66,7 +41,7 @@ const LoginLink = styled(AuthLink).attrs({
   variant: 'outlined',
 })`
   border-radius: 4rem;
-  border-color: ${props => props.theme.palette.text.primary};
+  border-color: ${({ theme }) => theme.palette.text.primary};
 `;
 
 const UserName = styled(Typography)`
@@ -80,23 +55,20 @@ const AuthButtons = styled.div`
     display: none;
   }
 `;
+
 /**
  * This is the displayed user name OR the login/register buttons on desktop
  */
-export const UserInfo = ({ openProjectModal }: { openProjectModal: () => void }) => {
-  const user = useCurrentUserContext();
+export const UserInfo = () => {
+  const { isLoggedIn, projectId, userName } = useCurrentUserContext();
 
   return (
     <Wrapper>
-      {user.isLoggedIn ? (
-        <Details>
-          <UserName>{user.userName}</UserName>
-          {user.projectId && (
-            <ProjectButton onClick={openProjectModal} tooltip="Change project">
-              {user.project?.name}
-            </ProjectButton>
-          )}
-        </Details>
+      {isLoggedIn ? (
+        <UserDetails>
+          <UserName>{userName}</UserName>
+          {projectId && <ChangeProjectButton />}
+        </UserDetails>
       ) : (
         <AuthButtons>
           <AuthLink variant="text" to={ROUTES.REGISTER}>
diff --git a/packages/datatrak-web/src/layout/UserMenu/UserMenu.tsx b/packages/datatrak-web/src/layout/UserMenu/UserMenu.tsx
index f9f59fa376..a876eed5bd 100644
--- a/packages/datatrak-web/src/layout/UserMenu/UserMenu.tsx
+++ b/packages/datatrak-web/src/layout/UserMenu/UserMenu.tsx
@@ -1,7 +1,8 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import MuiMenuIcon from '@material-ui/icons/Menu';
@@ -39,24 +40,15 @@ const MenuIcon = styled(MuiMenuIcon)`
 export const UserMenu = () => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [projectModalOpen, setProjectModalOpen] = useState(false);
-  const openProjectModal = () => {
-    setProjectModalOpen(true);
-  };
-
-  const closeProjectModal = () => {
-    setProjectModalOpen(false);
-  };
+  const openProjectModal = () => setProjectModalOpen(true);
+  const closeProjectModal = () => setProjectModalOpen(false);
 
-  const onCloseMenu = () => {
-    setMenuOpen(false);
-  };
+  const onCloseMenu = () => setMenuOpen(false);
+  const toggleUserMenu = () => setMenuOpen(!menuOpen);
 
-  const toggleUserMenu = () => {
-    setMenuOpen(!menuOpen);
-  };
   return (
     <Wrapper>
-      <UserInfo openProjectModal={openProjectModal} />
+      <UserInfo />
       <MenuButton onClick={toggleUserMenu} id="user-menu-button" title="Toggle menu">
         <MenuIcon />
       </MenuButton>
diff --git a/packages/datatrak-web/src/theme/theme.ts b/packages/datatrak-web/src/theme/theme.ts
index 12ffc1d8d4..02f9a6578f 100755
--- a/packages/datatrak-web/src/theme/theme.ts
+++ b/packages/datatrak-web/src/theme/theme.ts
@@ -1,7 +1,8 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import { createMuiTheme } from '@material-ui/core';
 import { MOBILE_BREAKPOINT } from '../constants';
 
@@ -98,6 +99,7 @@ export const theme = createMuiTheme({
     MuiButton: {
       root: {
         textTransform: 'none',
+        verticalAlign: 'baseline',
       },
       label: {
         fontSize: '0.875rem',
diff --git a/packages/datatrak-web/src/views/AccountSettingsPage/AccountSettingsColumn.tsx b/packages/datatrak-web/src/views/AccountSettingsPage/AccountSettingsColumn.tsx
index f892c40437..ac0ebe872c 100644
--- a/packages/datatrak-web/src/views/AccountSettingsPage/AccountSettingsColumn.tsx
+++ b/packages/datatrak-web/src/views/AccountSettingsPage/AccountSettingsColumn.tsx
@@ -8,16 +8,18 @@ import styled from 'styled-components';
 export const AccountSettingsColumn = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
   margin-bottom: 1rem;
-  &:not(:last-child) {
-    padding-right: 2rem;
-  }
-  &:first-child {
-    margin-bottom: 1.9rem;
-  }
-  &:last-child {
-    margin-bottom: 0;
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('md')} {
+    // Whitespace after section title & description when in single-column layout...
+    :first-child {
+      margin-bottom: 1.9rem;
+    }
+    // ...unless it’s the only thing in the section.
+    :last-child {
+      margin-bottom: 0;
+    }
   }
 
   ${({ theme }) => theme.breakpoints.up('md')} {
diff --git a/packages/datatrak-web/src/views/AccountSettingsPage/AccountSettingsSection.tsx b/packages/datatrak-web/src/views/AccountSettingsPage/AccountSettingsSection.tsx
index c4848b8557..2926be7646 100644
--- a/packages/datatrak-web/src/views/AccountSettingsPage/AccountSettingsSection.tsx
+++ b/packages/datatrak-web/src/views/AccountSettingsPage/AccountSettingsSection.tsx
@@ -1,6 +1,6 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import { Paper, Typography } from '@material-ui/core';
@@ -12,10 +12,12 @@ const Wrapper = styled(Paper).attrs({
   elevation: 0,
   component: 'section',
 })`
-  padding: 0.8rem;
-  margin-top: 1.5rem;
-  display: flex;
+  column-gap: 2rem;
+  display: block flex;
   flex-direction: column;
+  margin-block-start: 1.5rem;
+  padding-block: 1rem;
+  padding-inline: 1.25rem;
   ${({ theme }) => theme.breakpoints.up('md')} {
     flex-direction: row;
     gap: 2.5rem;
diff --git a/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection.tsx b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection.tsx
deleted file mode 100644
index fa8ebd7204..0000000000
--- a/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import { AccountSettingsSection } from './AccountSettingsSection';
-
-export const RequestCountryAccessSection = () => {
-  return (
-    <AccountSettingsSection
-      title="Request country access"
-      description="Select the countries you would like access to and the reason for requesting access"
-    />
-  );
-};
diff --git a/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/AccessGrantedCountryList.tsx b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/AccessGrantedCountryList.tsx
new file mode 100644
index 0000000000..a41702597a
--- /dev/null
+++ b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/AccessGrantedCountryList.tsx
@@ -0,0 +1,89 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@material-ui/core';
+import { ProjectCountryAccessListRequest } from '@tupaia/types';
+import { UseQueryResult } from 'react-query';
+
+const StyledTableContainer = styled(TableContainer).attrs({
+  elevation: 0,
+  component: Paper,
+})`
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  justify-self: flex-end;
+  margin-block-start: 0.6rem;
+  max-block-size: 12rem;
+
+  .MuiTableBody-root {
+    display: flex;
+    flex-direction: column;
+    padding-block: 0.1875rem;
+  }
+
+  .MuiTableCell-stickyHeader {
+    background-color: ${({ theme }) => theme.palette.background.paper};
+    // Shadow because border disappears when table body is scrolled
+    box-shadow: 0 1px 0 0 ${({ theme }) => theme.palette.divider};
+    // Fix table header appearing over modals
+    z-index: auto;
+  }
+
+  .MuiTableCell-root {
+    border: none;
+  }
+`;
+
+const EmptyStateLabel = styled(Typography).attrs({ color: 'textSecondary' })`
+  font-size: inherit;
+`;
+
+interface AccessGrantedCountryListProps {
+  countryAccessList: UseQueryResult<ProjectCountryAccessListRequest.ResBody>;
+}
+
+export const AccessGrantedCountryList = ({ countryAccessList }: AccessGrantedCountryListProps) => {
+  const { data: countries = [], isFetched, isLoading } = countryAccessList;
+  const grantedCountries = countries.filter(country => country.hasAccess);
+
+  const emptyStateText = isLoading || !isFetched ? 'Loading…' : 'None';
+
+  return (
+    <StyledTableContainer>
+      <Table size="small" stickyHeader>
+        <TableHead>
+          <TableRow>
+            <TableCell>Countries with access granted</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {grantedCountries.length > 0 ? (
+            grantedCountries.map(({ id, name }) => (
+              <TableRow key={id}>
+                <TableCell>{name}</TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell>
+                <EmptyStateLabel>{emptyStateText}</EmptyStateLabel>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  );
+};
diff --git a/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessForm.tsx b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessForm.tsx
new file mode 100644
index 0000000000..c901cdd352
--- /dev/null
+++ b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessForm.tsx
@@ -0,0 +1,200 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useForm } from 'react-hook-form';
+import { UseQueryResult } from 'react-query';
+import { FormLabel, useMediaQuery, useTheme } from '@material-ui/core';
+import { Entity, ProjectCountryAccessListRequest, ProjectResponse } from '@tupaia/types';
+import { Form, FormInput, TextField } from '@tupaia/ui-components';
+import { useRequestProjectAccess } from '../../../api';
+import { Button } from '../../../components';
+import { errorToast, successToast } from '../../../utils';
+import { RequestableCountryChecklist } from './RequestableCountryChecklist';
+
+const StyledForm = styled(Form)`
+  inline-size: 100%;
+
+  ${({ theme }) => theme.breakpoints.up('md')} {
+    max-inline-size: 44.25rem;
+  }
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: grid;
+  gap: 1.25rem;
+  grid-auto-flow: column;
+  grid-template: auto auto / auto;
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    block-size: 18.32rem;
+    grid-template: auto / 1fr 1fr;
+  }
+
+  .MuiFormLabel-root {
+    color: ${({ theme }) => theme.palette.text.primary};
+    font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
+  }
+
+  // Fix labels appearing over hamburger menu drawer
+  .MuiInputLabel-outlined {
+    z-index: auto;
+  }
+`;
+
+const CountryChecklistWrapper = styled.div`
+  block-size: 100%;
+  display: block flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+
+/** Matches styling of `.FormLabel-root` in ui-components `TextField` */
+const StyledFormLabel = styled(FormLabel)`
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  margin-block-end: 0.1875rem;
+`;
+
+const Flexbox = styled.div`
+  display: block flex;
+  flex-direction: column;
+  gap: 1.25rem;
+`;
+
+// Usage of this component has inline styling. See there for explanation.
+const StyledFormInput = styled(FormInput).attrs({
+  fullWidth: true,
+  multiline: true,
+})`
+  block-size: 100%;
+  margin: 0;
+
+  .MuiInputBase-root {
+    align-items: start;
+    block-size: 100%;
+    max-block-size: 100%;
+  }
+
+  .MuiInputBase-input {
+    box-sizing: border-box;
+  }
+`;
+
+interface RequestCountryAccessFormProps {
+  countryAccessList: UseQueryResult<ProjectCountryAccessListRequest.ResBody>;
+  project?: ProjectResponse | null;
+}
+
+interface RequestCountryAccessFormFields {
+  entityIds: Entity['id'][];
+  message?: string;
+}
+
+export const RequestCountryAccessForm = ({
+  countryAccessList,
+  project,
+}: RequestCountryAccessFormProps) => {
+  const { data: countries, isLoading: accessListIsLoading } = countryAccessList;
+  const projectCode = project?.code;
+
+  const formContext = useForm<RequestCountryAccessFormFields>({
+    defaultValues: {
+      entityIds: [],
+      message: '',
+    } as RequestCountryAccessFormFields,
+    mode: 'onChange',
+  });
+  const {
+    formState: { isSubmitting, isValidating, isValid },
+    handleSubmit,
+    reset,
+  } = formContext;
+
+  /*
+   * Semantically, this belongs in `RequestableCountryChecklist` (child of this component), but
+   * `setSelectedCountries` is used here to circumvent some quirks of how React Hook Form +
+   * MUI checkboxes (mis-)handle multiple checkboxes with the same control name.
+   */
+  const [selectedCountries, setSelectedCountries] = useState([] as Entity['id'][]);
+  const resetForm = () => {
+    reset();
+    setSelectedCountries([]);
+  };
+
+  const { mutate: requestCountryAccess, isLoading: requestIsLoading } = useRequestProjectAccess({
+    onError: error =>
+      errorToast(error?.message ?? 'Sorry, couldn’t submit your request. Please try again'),
+    onSettled: resetForm,
+    onSuccess: response => successToast(response.message),
+  });
+
+  const { breakpoints } = useTheme();
+  const sizeClassIsMdOrLarger = useMediaQuery(breakpoints.up('sm'));
+
+  const getTooltip = () => {
+    if (!project) return 'Select a project to request country access';
+    return isValid ? undefined : 'Select countries to request access';
+  };
+
+  const hasAccessToEveryCountry = (countries ?? []).every(c => c.hasAccess);
+  const noRequestableCountries = !project || hasAccessToEveryCountry;
+
+  const formIsSubmitting = isSubmitting || requestIsLoading;
+  const formIsInsubmissible = isValidating || !isValid || accessListIsLoading || formIsSubmitting;
+
+  function onSubmit({ entityIds, message }: RequestCountryAccessFormFields) {
+    requestCountryAccess({
+      entityIds,
+      message,
+      projectCode, // Should not be undefined by this point, but TS can’t pick up that form is disabled if project is undefined
+    });
+  }
+
+  return (
+    <StyledForm formContext={formContext} onSubmit={handleSubmit(onSubmit)}>
+      <StyledFieldset disabled={noRequestableCountries || formIsSubmitting}>
+        <CountryChecklistWrapper>
+          <StyledFormLabel>Select countries</StyledFormLabel>
+          <RequestableCountryChecklist
+            projectCode={projectCode}
+            countries={countries}
+            disabled={formIsSubmitting}
+            selectedCountries={selectedCountries}
+            setSelectedCountries={setSelectedCountries}
+          />
+        </CountryChecklistWrapper>
+        <Flexbox>
+          <StyledFormInput
+            id="message"
+            Input={TextField}
+            inputProps={{
+              enterKeyHint: 'done',
+              /*
+               * Make `<textarea>` scroll upon overflow.
+               *
+               * MUI uses inline styling (element.style) to resize `<textarea>`s to fit an integer
+               * number of lines. This behaviour is desirable in single-column layouts, which we use
+               * in smaller size classes. In a multi-column grid it causes misalignment, so we
+               * override it, also with inline styling.
+               */
+              style: sizeClassIsMdOrLarger ? { height: '100%', overflow: 'auto' } : undefined,
+            }}
+            label="Reason for access"
+            name="message"
+          />
+          <Button
+            disabled={noRequestableCountries || formIsInsubmissible}
+            tooltip={getTooltip()}
+            type="submit"
+          >
+            {formIsSubmitting ? 'Submitting request' : 'Request access'}
+          </Button>
+        </Flexbox>
+      </StyledFieldset>
+    </StyledForm>
+  );
+};
diff --git a/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessSection.tsx b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessSection.tsx
new file mode 100644
index 0000000000..7f71173849
--- /dev/null
+++ b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessSection.tsx
@@ -0,0 +1,36 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import { useCountryAccessList, useCurrentUserContext } from '../../../api';
+import { ChangeProjectButton } from '../../../components';
+import { AccountSettingsSection } from '../AccountSettingsSection';
+import { AccessGrantedCountryList } from './AccessGrantedCountryList';
+import { RequestCountryAccessForm } from './RequestCountryAccessForm';
+
+export const RequestCountryAccessSection = () => {
+  const { project } = useCurrentUserContext();
+  const countryAccessList = useCountryAccessList(project?.code ?? '');
+
+  const title = (
+    <>
+      Request country access
+      <ChangeProjectButton />
+    </>
+  );
+
+  const description = (
+    <>
+      <p>Select the countries you would like access to and the reason for requesting access</p>
+      <AccessGrantedCountryList countryAccessList={countryAccessList} />
+    </>
+  );
+
+  return (
+    <AccountSettingsSection title={title} description={description}>
+      <RequestCountryAccessForm countryAccessList={countryAccessList} project={project} />
+    </AccountSettingsSection>
+  );
+};
diff --git a/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestableCountryChecklist.tsx b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestableCountryChecklist.tsx
new file mode 100644
index 0000000000..b3e07fa835
--- /dev/null
+++ b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestableCountryChecklist.tsx
@@ -0,0 +1,99 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import styled from 'styled-components';
+import { Checkbox } from '@tupaia/ui-components';
+import { Entity, Project, ProjectCountryAccessListRequest } from '@tupaia/types';
+import { theme } from '../../../theme';
+
+const Container = styled.fieldset`
+  border-radius: 0.1875rem;
+  border: 1px solid ${theme.palette.grey[400]};
+  block-size: 100%;
+  overflow-y: auto; /* fallback */
+  overflow-block: auto;
+  padding-inline: 0.87rem;
+
+  // Prevent overbearingly tall list on mobile (where parent gridlines are not used to limit height)
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    max-block-size: 16.875rem;
+  }
+
+  // Match styling of ui-components TextField
+  :disabled {
+    color: ${theme.palette.text.secondary};
+    background-color: ${theme.palette.grey['100']};
+  }
+`;
+
+const StyledCheckbox = styled(Checkbox).attrs({ color: 'primary' })`
+  margin-block: 0;
+
+  .MuiFormControlLabel-root {
+    inline-size: 100%;
+  }
+
+  .MuiFormControlLabel-label {
+    font-size: 0.875rem;
+    inline-size: 100%;
+    line-height: 1.125rem;
+  }
+`;
+
+interface RequestableCountryChecklistProps {
+  projectCode?: Project['code'];
+  countries?: ProjectCountryAccessListRequest.ResBody;
+  selectedCountries: Entity['id'][];
+  setSelectedCountries: React.Dispatch<React.SetStateAction<Entity['id'][]>>;
+  disabled?: boolean;
+}
+
+export const RequestableCountryChecklist = ({
+  projectCode,
+  countries = [],
+  selectedCountries,
+  setSelectedCountries,
+  disabled,
+}: RequestableCountryChecklistProps) => {
+  const { register } = useFormContext();
+
+  const selectCountry = (id: Entity['id'], select = true) =>
+    setSelectedCountries(
+      select ? selectedCountries.concat([id]) : selectedCountries.filter(element => element !== id),
+    );
+
+  const getTooltip = (hasAccess: boolean, hasPendingAccess: boolean) => {
+    if (hasAccess) return 'You already have access';
+    if (hasPendingAccess) return 'Approval in progress';
+  };
+
+  return (
+    <Container disabled={disabled}>
+      {!projectCode
+        ? null
+        : countries.map(({ id, name, hasAccess, hasPendingAccess }) => {
+            const isSelected = selectedCountries.includes(id);
+            const tooltip = getTooltip(hasAccess, hasPendingAccess);
+
+            return (
+              <StyledCheckbox
+                checked={isSelected}
+                disabled={hasAccess || hasPendingAccess}
+                id="entityIds"
+                inputRef={register({ validate: (value: Entity['id'][]) => value.length > 0 })}
+                key={id}
+                label={name}
+                name="entityIds"
+                onChange={() => selectCountry(id, !isSelected)}
+                tooltip={tooltip}
+                value={id}
+              />
+            );
+          })}
+    </Container>
+  );
+};
diff --git a/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/index.ts b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/index.ts
new file mode 100644
index 0000000000..d0379bf2ba
--- /dev/null
+++ b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { RequestCountryAccessSection } from './RequestCountryAccessSection';
diff --git a/packages/tupaia-web-server/examples.http b/packages/tupaia-web-server/examples.http
index 2855f1dfa8..88e8fe0616 100644
--- a/packages/tupaia-web-server/examples.http
+++ b/packages/tupaia-web-server/examples.http
@@ -65,7 +65,7 @@ GET {{host}}/dashboards HTTP/1.1
 content-type: {{contentType}}
 
 ### Fetch country access list
-GET {{host}}/countryAccessList/pacmossi
+GET {{host}}/me/countries?projectCode=pacmossi HTTP/1.1
 content-type: {{contentType}}
 
 ### Fetch legacy report
diff --git a/packages/tupaia-web-server/src/app/createApp.ts b/packages/tupaia-web-server/src/app/createApp.ts
index c89fb04590..2fd0aecd61 100644
--- a/packages/tupaia-web-server/src/app/createApp.ts
+++ b/packages/tupaia-web-server/src/app/createApp.ts
@@ -55,10 +55,6 @@ export async function createApp(db: TupaiaDatabase = new TupaiaDatabase()) {
       'dashboards/:projectCode/:entityCode/:dashboardCode/email',
       handleWith(routes.EmailDashboardRoute),
     )
-    .get<routes.ProjectCountryAccessListRequest>(
-      'countryAccessList/:projectCode',
-      handleWith(routes.ProjectCountryAccessListRoute),
-    )
     .post<routes.RequestCountryAccessRequest>(
       'requestCountryAccess',
       handleWith(routes.RequestCountryAccessRoute),
@@ -94,6 +90,7 @@ export async function createApp(db: TupaiaDatabase = new TupaiaDatabase()) {
       handleWith(routes.UnsubscribeDashboardMailingListRoute),
     )
     .use('downloadFiles', forwardRequest(CENTRAL_API_URL, { authHandlerProvider }))
+    .use('me/countries', forwardRequest(CENTRAL_API_URL, { authHandlerProvider }))
     // Forward everything else to webConfigApi
     .use('dashboards', forwardRequest(WEB_CONFIG_API_URL, { authHandlerProvider }))
     .use('export/surveyDataDownload', forwardRequest(WEB_CONFIG_API_URL, { authHandlerProvider }))
diff --git a/packages/tupaia-web-server/src/routes/ProjectCountryAccessListRoute.ts b/packages/tupaia-web-server/src/routes/ProjectCountryAccessListRoute.ts
deleted file mode 100644
index 687be5670b..0000000000
--- a/packages/tupaia-web-server/src/routes/ProjectCountryAccessListRoute.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
- */
-
-import { Request } from 'express';
-import { Route } from '@tupaia/server-boilerplate';
-import { TupaiaWebProjectCountryAccessListRequest, CountryAccessResponse } from '@tupaia/types';
-
-export type ProjectCountryAccessListRequest = Request<
-  TupaiaWebProjectCountryAccessListRequest.Params,
-  TupaiaWebProjectCountryAccessListRequest.ResBody,
-  TupaiaWebProjectCountryAccessListRequest.ReqBody,
-  TupaiaWebProjectCountryAccessListRequest.ReqQuery
->;
-
-export class ProjectCountryAccessListRoute extends Route<ProjectCountryAccessListRequest> {
-  public async buildResponse() {
-    const { ctx, params, accessPolicy } = this.req;
-    const { projectCode } = params;
-    const { projects } = await ctx.services.webConfig.fetchProjects();
-
-    const project = projects.find(({ code }: { code: string }) => code === projectCode);
-    if (!project) {
-      throw new Error(`No project found with code '${projectCode}'`);
-    }
-    const { names } = project;
-    const countryAccessList = await ctx.services.central.getCountryAccessList();
-
-    return names
-      .sort()
-      .reduce((result: TupaiaWebProjectCountryAccessListRequest.ResBody, name: string) => {
-        const country = countryAccessList.find(
-          ({ name: countryName }: CountryAccessResponse) => countryName === name,
-        );
-        if (!country) return result;
-        const hasPendingAccess = country.accessRequests.includes(projectCode);
-
-        const hasAccess = project.permissionGroups.some((permissionGroup: string) =>
-          accessPolicy.allows(country.code, permissionGroup),
-        );
-
-        return [
-          ...result,
-          {
-            id: country?.id,
-            name,
-            hasAccess,
-            hasPendingAccess,
-          },
-        ];
-      }, []);
-  }
-}
diff --git a/packages/tupaia-web-server/src/routes/index.ts b/packages/tupaia-web-server/src/routes/index.ts
index 9af42fcfd5..e9a7569718 100644
--- a/packages/tupaia-web-server/src/routes/index.ts
+++ b/packages/tupaia-web-server/src/routes/index.ts
@@ -31,10 +31,6 @@ export {
   ExportSurveyResponsesRequest,
   ExportSurveyResponsesRoute,
 } from './ExportSurveyResponsesRoute';
-export {
-  ProjectCountryAccessListRequest,
-  ProjectCountryAccessListRoute,
-} from './ProjectCountryAccessListRoute';
 export { SubscribeDashboardRoute, SubscribeDashboardRequest } from './SubscribeDashboardRoute';
 export {
   UnsubscribeDashboardRoute,
diff --git a/packages/tupaia-web/src/api/mutations/useRequestCountryAccess.ts b/packages/tupaia-web/src/api/mutations/useRequestCountryAccess.ts
index c126987cb0..20ce5d569f 100644
--- a/packages/tupaia-web/src/api/mutations/useRequestCountryAccess.ts
+++ b/packages/tupaia-web/src/api/mutations/useRequestCountryAccess.ts
@@ -37,9 +37,8 @@ export const useRequestCountryAccess = () => {
             queryKey: ['landingPage', landingPageUrlSegment],
           });
         }
-        queryClient.invalidateQueries({
-          queryKey: ['projects'],
-        });
+
+        queryClient.invalidateQueries({ queryKey: ['projects'] });
       },
     },
   );
diff --git a/packages/tupaia-web/src/api/queries/useProjectCountryAccessList.ts b/packages/tupaia-web/src/api/queries/useProjectCountryAccessList.ts
index b5294c6a67..3aea27dc3c 100644
--- a/packages/tupaia-web/src/api/queries/useProjectCountryAccessList.ts
+++ b/packages/tupaia-web/src/api/queries/useProjectCountryAccessList.ts
@@ -1,18 +1,18 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import { useQuery } from 'react-query';
-import { TupaiaWebProjectCountryAccessListRequest } from '@tupaia/types';
+import { ProjectCountryAccessListRequest } from '@tupaia/types';
 import { get } from '../api';
 import { ProjectCode } from '../../types';
 
 export const useProjectCountryAccessList = (projectCode: ProjectCode) => {
   return useQuery(
-    ['countryAccessList', projectCode],
-    (): Promise<TupaiaWebProjectCountryAccessListRequest.ResBody> =>
-      get(`countryAccessList/${projectCode}`),
+    ['me/countries', projectCode],
+    (): Promise<ProjectCountryAccessListRequest.ResBody> =>
+      get(`me/countries`, { params: { projectCode } }),
     {
       placeholderData: [],
       enabled: !!projectCode,
diff --git a/packages/tupaia-web/src/types/types.d.ts b/packages/tupaia-web/src/types/types.d.ts
index dd11c4c9d7..a51e8b3f58 100644
--- a/packages/tupaia-web/src/types/types.d.ts
+++ b/packages/tupaia-web/src/types/types.d.ts
@@ -1,11 +1,12 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import {
   LandingPage,
   Project,
-  TupaiaWebProjectCountryAccessListRequest,
+  ProjectCountryAccessListRequest,
   TupaiaWebProjectRequest,
 } from '@tupaia/types';
 import { KeysToCamelCase } from './helpers';
@@ -27,4 +28,4 @@ export type SingleLandingPage = KeysToCamelCase<Omit<LandingPage, 'project_codes
   projects: SingleProject[];
 };
 
-export type CountryAccessListItem = TupaiaWebProjectCountryAccessListRequest.ResBody[number];
+export type CountryAccessListItem = ProjectCountryAccessListRequest.ResBody[number];
diff --git a/packages/tupaia-web/src/views/RequestProjectAccessModal/ProjectAccessForm.tsx b/packages/tupaia-web/src/views/RequestProjectAccessModal/ProjectAccessForm.tsx
index a7cb6f1184..fb7c6b229e 100644
--- a/packages/tupaia-web/src/views/RequestProjectAccessModal/ProjectAccessForm.tsx
+++ b/packages/tupaia-web/src/views/RequestProjectAccessModal/ProjectAccessForm.tsx
@@ -3,19 +3,20 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import React from 'react';
-import { useForm, SubmitHandler } from 'react-hook-form';
+import { SubmitHandler, useForm } from 'react-hook-form';
 import { Typography } from '@material-ui/core';
 import styled from 'styled-components';
 import { Alert } from '@tupaia/ui-components';
 import { CountryAccessListItem, SingleProject } from '../../types';
 import {
+  AuthModalButton,
   CheckboxList,
   Form as BaseForm,
   LoadingScreen,
   TextField,
-  AuthModalButton,
 } from '../../components';
 import { useRequestCountryAccess } from '../../api/mutations';
+import { useQueryClient } from 'react-query';
 
 const Note = styled.p`
   text-align: left;
@@ -70,6 +71,8 @@ export const ProjectAccessForm = ({
     isSuccess,
   } = useRequestCountryAccess();
 
+  const queryClient = useQueryClient();
+
   if (isSuccess)
     return (
       <div>
@@ -84,7 +87,14 @@ export const ProjectAccessForm = ({
           granted.
         </Note>
         {!isLandingPage && (
-          <AuthModalButton onClick={onCloseModal}>{closeButtonText}</AuthModalButton>
+          <AuthModalButton
+            onClick={() => {
+              queryClient.invalidateQueries({ queryKey: ['me/countries'] });
+              onCloseModal?.();
+            }}
+          >
+            {closeButtonText}
+          </AuthModalButton>
         )}
       </div>
     );
diff --git a/packages/types/src/schemas/schemas.ts b/packages/types/src/schemas/schemas.ts
index e8a51d933d..e10cd993ab 100644
--- a/packages/types/src/schemas/schemas.ts
+++ b/packages/types/src/schemas/schemas.ts
@@ -83932,6 +83932,98 @@ export const ApprovalStatusSchema = {
 	"type": "string"
 } 
 
+export const ParamsSchema = {
+	"type": "object",
+	"properties": {
+		"projectCode": {
+			"type": "string"
+		}
+	},
+	"additionalProperties": false,
+	"required": [
+		"projectCode"
+	]
+} 
+
+export const CountryAccessObjectSchema = {
+	"type": "object",
+	"properties": {
+		"id": {
+			"type": "string"
+		},
+		"name": {
+			"type": "string"
+		},
+		"code": {
+			"type": "string"
+		},
+		"hasAccess": {
+			"type": "boolean"
+		},
+		"hasPendingAccess": {
+			"type": "boolean"
+		}
+	},
+	"additionalProperties": false,
+	"required": [
+		"code",
+		"hasAccess",
+		"hasPendingAccess",
+		"id",
+		"name"
+	]
+} 
+
+export const ResBodySchema = {
+	"type": "array",
+	"items": {
+		"type": "object",
+		"properties": {
+			"id": {
+				"type": "string"
+			},
+			"name": {
+				"type": "string"
+			},
+			"code": {
+				"type": "string"
+			},
+			"hasAccess": {
+				"type": "boolean"
+			},
+			"hasPendingAccess": {
+				"type": "boolean"
+			}
+		},
+		"additionalProperties": false,
+		"required": [
+			"code",
+			"hasAccess",
+			"hasPendingAccess",
+			"id",
+			"name"
+		]
+	}
+} 
+
+export const ReqBodySchema = {
+	"type": "object",
+	"additionalProperties": false
+} 
+
+export const ReqQuerySchema = {
+	"type": "object",
+	"properties": {
+		"projectId": {
+			"type": "string"
+		}
+	},
+	"additionalProperties": false,
+	"required": [
+		"projectId"
+	]
+} 
+
 export const IdSchema = {
 	"type": "string"
 } 
@@ -84188,39 +84280,6 @@ export const MeditrakSurveyResponseRequestSchema = {
 	]
 } 
 
-export const CountryAccessResponseSchema = {
-	"description": "Tupaia\nCopyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd",
-	"type": "object",
-	"properties": {
-		"id": {
-			"type": "string"
-		},
-		"name": {
-			"type": "string"
-		},
-		"hasAccess": {
-			"type": "boolean"
-		},
-		"accessRequests": {
-			"type": "array",
-			"items": {
-				"type": "string"
-			}
-		},
-		"code": {
-			"type": "string"
-		}
-	},
-	"additionalProperties": false,
-	"required": [
-		"accessRequests",
-		"code",
-		"hasAccess",
-		"id",
-		"name"
-	]
-} 
-
 export const DataTablePreviewRequestSchema = {
 	"type": "object",
 	"properties": {
@@ -84268,19 +84327,6 @@ export const DataTablePreviewRequestSchema = {
 	]
 } 
 
-export const ParamsSchema = {
-	"type": "object",
-	"properties": {
-		"projectCode": {
-			"type": "string"
-		}
-	},
-	"additionalProperties": false,
-	"required": [
-		"projectCode"
-	]
-} 
-
 export const ProjectResponseSchema = {
 	"additionalProperties": false,
 	"type": "object",
@@ -84372,9 +84418,6 @@ export const ProjectResponseSchema = {
 		"sortOrder": {
 			"type": "number"
 		},
-		"name": {
-			"type": "string"
-		},
 		"hasAccess": {
 			"type": "boolean"
 		},
@@ -84383,122 +84426,15 @@ export const ProjectResponseSchema = {
 		},
 		"homeEntityCode": {
 			"type": "string"
-		}
-	},
-	"required": [
-		"code",
-		"config",
-		"hasAccess",
-		"hasPendingAccess",
-		"homeEntityCode",
-		"id",
-		"name",
-		"permissionGroups"
-	]
-} 
-
-export const ResBodySchema = {
-	"additionalProperties": false,
-	"type": "object",
-	"properties": {
-		"code": {
-			"type": "string"
-		},
-		"config": {
-			"type": "object",
-			"properties": {
-				"frontendExcluded": {
-					"type": "array",
-					"items": {
-						"type": "object",
-						"properties": {
-							"types": {
-								"type": "array",
-								"items": {
-									"type": "string"
-								}
-							},
-							"exceptions": {
-								"type": "object",
-								"properties": {
-									"permissionGroups": {
-										"type": "array",
-										"items": {
-											"type": "string"
-										}
-									}
-								},
-								"additionalProperties": false,
-								"required": [
-									"permissionGroups"
-								]
-							}
-						},
-						"additionalProperties": false,
-						"required": [
-							"types"
-						]
-					}
-				},
-				"permanentRegionLabels": {
-					"type": "boolean"
-				},
-				"tileSets": {
-					"type": "string"
-				},
-				"includeDefaultTileSets": {
-					"type": "boolean"
-				},
-				"projectDashboardHeader": {
-					"type": "string"
-				}
-			},
-			"additionalProperties": false
-		},
-		"dashboardGroupName": {
-			"type": "string"
-		},
-		"defaultMeasure": {
-			"type": "string"
-		},
-		"description": {
-			"type": "string"
 		},
-		"entityHierarchyId": {
-			"type": "string"
-		},
-		"entityId": {
-			"type": "string"
-		},
-		"id": {
-			"type": "string"
-		},
-		"imageUrl": {
-			"type": "string"
-		},
-		"logoUrl": {
+		"name": {
 			"type": "string"
 		},
-		"permissionGroups": {
+		"names": {
 			"type": "array",
 			"items": {
 				"type": "string"
 			}
-		},
-		"sortOrder": {
-			"type": "number"
-		},
-		"name": {
-			"type": "string"
-		},
-		"hasAccess": {
-			"type": "boolean"
-		},
-		"hasPendingAccess": {
-			"type": "boolean"
-		},
-		"homeEntityCode": {
-			"type": "string"
 		}
 	},
 	"required": [
@@ -84513,16 +84449,6 @@ export const ResBodySchema = {
 	]
 } 
 
-export const ReqBodySchema = {
-	"type": "object",
-	"additionalProperties": false
-} 
-
-export const ReqQuerySchema = {
-	"type": "object",
-	"additionalProperties": false
-} 
-
 export const VisibilityCriteriaSchema = {
 	"additionalProperties": false,
 	"type": "object",
@@ -85007,34 +84933,6 @@ export const CamelCaseFeedItemSchema = {
 	]
 } 
 
-export const CountryAccessSchema = {
-	"type": "object",
-	"properties": {
-		"id": {
-			"type": "string"
-		},
-		"name": {
-			"type": "string"
-		},
-		"hasAccess": {
-			"type": "boolean"
-		},
-		"accessRequests": {
-			"type": "array",
-			"items": {
-				"type": "string"
-			}
-		}
-	},
-	"additionalProperties": false,
-	"required": [
-		"accessRequests",
-		"hasAccess",
-		"id",
-		"name"
-	]
-} 
-
 export const EntityResponseSchema = {
 	"additionalProperties": false,
 	"type": "object",
@@ -97396,31 +97294,6 @@ export const OverlayChildSchema = {
 	"$ref": "#/definitions/OverlayChild"
 } 
 
-export const CountryAccessObjectSchema = {
-	"type": "object",
-	"properties": {
-		"id": {
-			"type": "string"
-		},
-		"name": {
-			"type": "string"
-		},
-		"hasAccess": {
-			"type": "boolean"
-		},
-		"hasPendingAccess": {
-			"type": "boolean"
-		}
-	},
-	"additionalProperties": false,
-	"required": [
-		"hasAccess",
-		"hasPendingAccess",
-		"id",
-		"name"
-	]
-} 
-
 export const SubscribeDashboardResponseSchema = {
 	"type": "object",
 	"properties": {
diff --git a/packages/types/src/types/requests/central-server/CountryAccessRequest.ts b/packages/types/src/types/requests/central-server/CountryAccessRequest.ts
deleted file mode 100644
index 7516b0e5f7..0000000000
--- a/packages/types/src/types/requests/central-server/CountryAccessRequest.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- */
-
-export interface CountryAccessResponse {
-  id: string;
-  name: string;
-  hasAccess: boolean;
-  accessRequests: string[];
-  code: string;
-}
diff --git a/packages/types/src/types/requests/tupaia-web-server/ProjectCountryAccessListRequest.ts b/packages/types/src/types/requests/central-server/ProjectCountryAccessListRequest.ts
similarity index 51%
rename from packages/types/src/types/requests/tupaia-web-server/ProjectCountryAccessListRequest.ts
rename to packages/types/src/types/requests/central-server/ProjectCountryAccessListRequest.ts
index 1f1393d336..1733a7c0a1 100644
--- a/packages/types/src/types/requests/tupaia-web-server/ProjectCountryAccessListRequest.ts
+++ b/packages/types/src/types/requests/central-server/ProjectCountryAccessListRequest.ts
@@ -1,19 +1,24 @@
-/**
+/*
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+import { Entity, Project } from '../..';
+
 export interface Params {
   projectCode: string;
 }
 
 interface CountryAccessObject {
-  id: string;
-  name: string;
+  id: Entity['id'];
+  name: Entity['name'];
+  code: Entity['code'];
   hasAccess: boolean;
   hasPendingAccess: boolean;
 }
 export type ResBody = CountryAccessObject[];
 
 export type ReqBody = Record<string, never>;
-export type ReqQuery = Record<string, never>;
+export interface ReqQuery {
+  projectId: Project['id'];
+}
diff --git a/packages/types/src/types/requests/central-server/index.ts b/packages/types/src/types/requests/central-server/index.ts
index c0fcb3be8a..60529b24f4 100644
--- a/packages/types/src/types/requests/central-server/index.ts
+++ b/packages/types/src/types/requests/central-server/index.ts
@@ -1,8 +1,7 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- *
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+export * as ProjectCountryAccessListRequest from './ProjectCountryAccessListRequest';
 export { MeditrakSurveyResponseRequest } from './MeditrakSurveyResponseRequest';
-export { CountryAccessResponse } from './CountryAccessRequest';
diff --git a/packages/types/src/types/requests/datatrak-web-server/CountryAccessListRequest.ts b/packages/types/src/types/requests/datatrak-web-server/CountryAccessListRequest.ts
index 749934a371..45598d79cc 100644
--- a/packages/types/src/types/requests/datatrak-web-server/CountryAccessListRequest.ts
+++ b/packages/types/src/types/requests/datatrak-web-server/CountryAccessListRequest.ts
@@ -1,15 +1,17 @@
-/**
+/*
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+import { Entity, Project } from '../../models';
+
 export type Params = Record<string, never>;
 
 interface CountryAccess {
-  id: string;
-  name: string;
+  id: Entity['id'];
+  name: Entity['name'];
   hasAccess: boolean;
-  accessRequests: string[];
+  accessRequests: Project['code'][];
 }
 export type ResBody = CountryAccess[];
 
diff --git a/packages/types/src/types/requests/datatrak-web-server/index.ts b/packages/types/src/types/requests/datatrak-web-server/index.ts
index 458ac7d641..433e357c91 100644
--- a/packages/types/src/types/requests/datatrak-web-server/index.ts
+++ b/packages/types/src/types/requests/datatrak-web-server/index.ts
@@ -14,6 +14,5 @@ export * as DatatrakWebRecentSurveysRequest from './RecentSurveysRequest';
 export * as DatatrakWebSingleSurveyResponseRequest from './SingleSurveyResponseRequest';
 export * as DatatrakWebLeaderboardRequest from './LeaderboardRequest';
 export * as DatatrakWebActivityFeedRequest from './ActivityFeedRequest';
-export * as DatatrakWebCountryAccessListRequest from './CountryAccessListRequest';
 export * as DatatrakWebGenerateLoginTokenRequest from './GenerateLoginTokenRequest';
 export * as DatatrakWebEntityDescendantsRequest from './EntityDescendantsRequest';
diff --git a/packages/types/src/types/requests/index.ts b/packages/types/src/types/requests/index.ts
index 18c5d6eb75..5432c28c0d 100644
--- a/packages/types/src/types/requests/index.ts
+++ b/packages/types/src/types/requests/index.ts
@@ -1,10 +1,9 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- *
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-export { MeditrakSurveyResponseRequest, CountryAccessResponse } from './central-server';
+export { ProjectCountryAccessListRequest, MeditrakSurveyResponseRequest } from './central-server';
 export { DataTablePreviewRequest } from './data-table-server/DataTablePreviewRequest';
 export {
   DatatrakWebEntitiesRequest,
@@ -18,7 +17,6 @@ export {
   DatatrakWebSingleSurveyResponseRequest,
   DatatrakWebLeaderboardRequest,
   DatatrakWebActivityFeedRequest,
-  DatatrakWebCountryAccessListRequest,
   DatatrakWebGenerateLoginTokenRequest,
   DatatrakWebEntityDescendantsRequest,
 } from './datatrak-web-server';
@@ -37,9 +35,8 @@ export {
   TupaiaWebReportRequest,
   TupaiaWebRequestCountryAccessRequest,
   TupaiaWebUserRequest,
-  TupaiaWebProjectCountryAccessListRequest,
   TupaiaWebSubscribeDashboardRequest,
   TupaiaWebUnsubscribeDashboardRequest,
   TupaiaWebUnsubscribeDashboardMailingListRequest,
 } from './tupaia-web-server';
-export { WebServerProjectRequest, ProjectResponse, WebServerEntityRequest } from './web-server';
+export { ProjectResponse, WebServerEntityRequest, WebServerProjectRequest } from './web-server';
diff --git a/packages/types/src/types/requests/tupaia-web-server/index.ts b/packages/types/src/types/requests/tupaia-web-server/index.ts
index 57336af7da..6d0b2049ae 100644
--- a/packages/types/src/types/requests/tupaia-web-server/index.ts
+++ b/packages/types/src/types/requests/tupaia-web-server/index.ts
@@ -17,7 +17,6 @@ export * as TupaiaWebProjectRequest from './ProjectRequest';
 export * as TupaiaWebReportRequest from './ReportRequest';
 export * as TupaiaWebRequestCountryAccessRequest from './RequestCountryAccessRequest';
 export * as TupaiaWebUserRequest from './UserRequest';
-export * as TupaiaWebProjectCountryAccessListRequest from './ProjectCountryAccessListRequest';
 export * as TupaiaWebSubscribeDashboardRequest from './SubscribeDashboardRequest';
 export * as TupaiaWebUnsubscribeDashboardRequest from './UnsubscribeDashboardRequest';
 export * as TupaiaWebUnsubscribeDashboardMailingListRequest from './UnsubscribeDashboardMailingListRequest';
diff --git a/packages/types/src/types/requests/web-server/ProjectRequest.ts b/packages/types/src/types/requests/web-server/ProjectRequest.ts
index d3ec8a235c..31e6da4d29 100644
--- a/packages/types/src/types/requests/web-server/ProjectRequest.ts
+++ b/packages/types/src/types/requests/web-server/ProjectRequest.ts
@@ -1,19 +1,21 @@
-/**
+/*
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { Project } from '../../models';
-import { KeysToCamelCase } from '../../../utils/casing';
+import { Entity, Project } from '../../models';
+import { KeysToCamelCase } from '../../../utils';
 
 export interface Params {
   projectCode: string;
 }
+
 export type ProjectResponse = KeysToCamelCase<Project> & {
-  name: string;
   hasAccess: boolean;
   hasPendingAccess: boolean;
-  homeEntityCode: string;
+  homeEntityCode: Entity['code'];
+  name: Entity['name'];
+  names?: Entity['name'][];
 };
 
 export type ResBody = ProjectResponse;
diff --git a/packages/types/src/types/requests/web-server/index.ts b/packages/types/src/types/requests/web-server/index.ts
index 0dea1bf539..14fdccce8d 100644
--- a/packages/types/src/types/requests/web-server/index.ts
+++ b/packages/types/src/types/requests/web-server/index.ts
@@ -1,11 +1,11 @@
-/**
+/*
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 /**
  * This is the index file for all web server requests. This folder is for request types that are common between multiple web servers, e.g. datatrak-web and tupaia-web.
  */
-export * as WebServerProjectRequest from './ProjectRequest';
 export * as WebServerEntityRequest from './EntityRequest';
+export * as WebServerProjectRequest from './ProjectRequest';
 export { ProjectResponse } from './ProjectRequest';

From 990b093065603bc534f411a5e6bb4d81410e503f Mon Sep 17 00:00:00 2001
From: Rohan Port <59544282+rohan-bes@users.noreply.github.com>
Date: Wed, 15 May 2024 10:35:44 +1000
Subject: [PATCH 07/26] fix(vizBuilder): Fixed up a couple presentation config
 schema options (#5639)

* fix(vizBuilder): Fixed up a couple presentation config schema options

* Add null support for all valueToColor functions
---
 packages/types/src/schemas/schemas.ts         | 5172 ++++++++++++-----
 .../models-extra/dashboard-item/common.ts     |   13 +-
 .../src/types/models-extra/mapOverlay.ts      |    2 +-
 .../src/utils/markerColors.ts                 |   42 +-
 4 files changed, 3598 insertions(+), 1631 deletions(-)

diff --git a/packages/types/src/schemas/schemas.ts b/packages/types/src/schemas/schemas.ts
index e10cd993ab..775af73973 100644
--- a/packages/types/src/schemas/schemas.ts
+++ b/packages/types/src/schemas/schemas.ts
@@ -672,21 +672,37 @@ export const BaseConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -1092,21 +1108,37 @@ export const MatrixConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -1773,21 +1805,37 @@ export const MatrixVizBuilderConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -2949,21 +2997,37 @@ export const ComponentConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -3455,21 +3519,37 @@ export const BaseChartConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -4304,21 +4384,37 @@ export const CartesianChartConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -5098,21 +5194,37 @@ export const PieChartConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -5632,21 +5744,37 @@ export const BarChartConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -6562,21 +6690,37 @@ export const LineChartConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"weekDisplayFormat": {
@@ -7484,21 +7628,37 @@ export const ComposedChartConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"weekDisplayFormat": {
@@ -8222,21 +8382,37 @@ export const GaugeChartConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -8663,21 +8839,37 @@ export const ChartConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -9137,21 +9329,37 @@ export const ChartConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -9891,21 +10099,37 @@ export const ChartConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"weekDisplayFormat": {
@@ -10639,21 +10863,37 @@ export const ChartConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"weekDisplayFormat": {
@@ -11376,21 +11616,37 @@ export const ChartConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -11947,21 +12203,37 @@ export const BaseViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -12383,21 +12655,37 @@ export const MultiValueViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -12927,21 +13215,37 @@ export const MultiValueRowViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -13422,21 +13726,37 @@ export const SingleValueViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -13831,21 +14151,37 @@ export const MultiPhotographViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -14236,21 +14572,37 @@ export const MultiSingleValueViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -14641,21 +14993,37 @@ export const SingleDownloadLinkViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -15046,21 +15414,37 @@ export const DataDownloadViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -15451,21 +15835,37 @@ export const DataDownloadViewVizBuilderConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -15872,21 +16272,37 @@ export const SingleDateViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -16277,21 +16693,37 @@ export const DownloadFilesViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -16682,21 +17114,37 @@ export const QRCodeViewConfigSchema = {
 		},
 		"reference": {
 			"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-			"type": "object",
-			"properties": {
-				"link": {
-					"description": "url",
-					"type": "string"
+			"anyOf": [
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"text": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"text"
+					]
 				},
-				"name": {
-					"description": "label",
-					"type": "string"
+				{
+					"description": "One of the two shapes which {@link ReferenceProps} can take.",
+					"type": "object",
+					"properties": {
+						"name": {
+							"type": "string"
+						},
+						"link": {
+							"type": "string"
+						}
+					},
+					"additionalProperties": false,
+					"required": [
+						"link",
+						"name"
+					]
 				}
-			},
-			"additionalProperties": false,
-			"required": [
-				"link",
-				"name"
 			]
 		},
 		"source": {
@@ -17089,21 +17537,37 @@ export const ViewConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -17506,21 +17970,37 @@ export const ViewConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -18000,21 +18480,37 @@ export const ViewConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -18408,21 +18904,37 @@ export const ViewConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -18812,21 +19324,37 @@ export const ViewConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -19216,21 +19744,37 @@ export const ViewConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -19620,21 +20164,37 @@ export const ViewConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -20024,21 +20584,37 @@ export const ViewConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -20428,21 +21004,37 @@ export const ViewConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -20832,21 +21424,37 @@ export const ViewConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -21351,21 +21959,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -22032,21 +22656,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -22420,21 +23060,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -22894,21 +23550,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -23648,21 +24320,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"weekDisplayFormat": {
@@ -24396,21 +25084,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"weekDisplayFormat": {
@@ -25133,21 +25837,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -25570,21 +26290,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -25987,21 +26723,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -26481,21 +27233,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -26889,21 +27657,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -27293,21 +28077,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -27697,21 +28497,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -28101,21 +28917,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -28505,21 +29337,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -28909,21 +29757,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -29313,21 +30177,37 @@ export const DashboardItemConfigSchema = {
 				},
 				"reference": {
 					"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-					"type": "object",
-					"properties": {
-						"link": {
-							"description": "url",
-							"type": "string"
+					"anyOf": [
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"text": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"text"
+							]
 						},
-						"name": {
-							"description": "label",
-							"type": "string"
+						{
+							"description": "One of the two shapes which {@link ReferenceProps} can take.",
+							"type": "object",
+							"properties": {
+								"name": {
+									"type": "string"
+								},
+								"link": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false,
+							"required": [
+								"link",
+								"name"
+							]
 						}
-					},
-					"additionalProperties": false,
-					"required": [
-						"link",
-						"name"
 					]
 				},
 				"source": {
@@ -32336,7 +33216,6 @@ export const SpectrumMapOverlayConfigSchema = {
 	},
 	"required": [
 		"displayType",
-		"scaleColorScheme",
 		"scaleType"
 	]
 } 
@@ -35992,7 +36871,6 @@ export const MapOverlayConfigSchema = {
 			},
 			"required": [
 				"displayType",
-				"scaleColorScheme",
 				"scaleType"
 			]
 		},
@@ -41861,21 +42739,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -42542,21 +43436,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -42930,21 +43840,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -43404,21 +44330,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -44158,21 +45100,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"weekDisplayFormat": {
@@ -44906,21 +45864,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"weekDisplayFormat": {
@@ -45643,21 +46617,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -46080,21 +47070,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -46497,21 +47503,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -46991,21 +48013,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -47399,21 +48437,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -47803,21 +48857,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -48207,21 +49277,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -48611,21 +49697,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -49015,21 +50117,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -49419,21 +50537,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -49823,21 +50957,37 @@ export const DashboardItemSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -50264,21 +51414,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -50945,21 +52111,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -51333,21 +52515,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -51807,21 +53005,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -52561,21 +53775,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"weekDisplayFormat": {
@@ -53309,21 +54539,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"weekDisplayFormat": {
@@ -54046,21 +55292,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -54483,21 +55745,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -54900,21 +56178,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -55394,21 +56688,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -55802,21 +57112,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -56206,21 +57532,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -56610,21 +57952,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -57014,21 +58372,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -57418,21 +58792,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -57822,21 +59212,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -58226,21 +59632,37 @@ export const DashboardItemCreateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -58661,21 +60083,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -59342,21 +60780,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -59730,21 +61184,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -60204,21 +61674,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -60958,21 +62444,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"weekDisplayFormat": {
@@ -61706,21 +63208,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"weekDisplayFormat": {
@@ -62443,21 +63961,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -62880,21 +64414,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -63297,21 +64847,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -63791,21 +65357,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -64199,21 +65781,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -64603,21 +66201,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -65007,21 +66621,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -65411,21 +67041,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -65815,21 +67461,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -66219,21 +67881,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -66623,21 +68301,37 @@ export const DashboardItemUpdateSchema = {
 						},
 						"reference": {
 							"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-							"type": "object",
-							"properties": {
-								"link": {
-									"description": "url",
-									"type": "string"
+							"anyOf": [
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"text": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"text"
+									]
 								},
-								"name": {
-									"description": "label",
-									"type": "string"
+								{
+									"description": "One of the two shapes which {@link ReferenceProps} can take.",
+									"type": "object",
+									"properties": {
+										"name": {
+											"type": "string"
+										},
+										"link": {
+											"type": "string"
+										}
+									},
+									"additionalProperties": false,
+									"required": [
+										"link",
+										"name"
+									]
 								}
-							},
-							"additionalProperties": false,
-							"required": [
-								"link",
-								"name"
 							]
 						},
 						"source": {
@@ -70235,7 +71929,6 @@ export const MapOverlaySchema = {
 					},
 					"required": [
 						"displayType",
-						"scaleColorScheme",
 						"scaleType"
 					]
 				},
@@ -73948,7 +75641,6 @@ export const MapOverlayCreateSchema = {
 					},
 					"required": [
 						"displayType",
-						"scaleColorScheme",
 						"scaleType"
 					]
 				},
@@ -77654,7 +79346,6 @@ export const MapOverlayUpdateSchema = {
 					},
 					"required": [
 						"displayType",
-						"scaleColorScheme",
 						"scaleType"
 					]
 				},
@@ -85407,21 +87098,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -86088,21 +87795,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -86476,21 +88199,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -86950,21 +88689,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -87704,21 +89459,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"weekDisplayFormat": {
@@ -88452,21 +90223,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"weekDisplayFormat": {
@@ -89189,21 +90976,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -89626,21 +91429,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -90043,21 +91862,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -90537,21 +92372,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -90945,21 +92796,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -91349,21 +93216,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -91753,21 +93636,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -92157,21 +94056,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -92561,21 +94476,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -92965,21 +94896,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -93369,21 +95316,37 @@ export const DashboardWithMetadataSchema = {
 									},
 									"reference": {
 										"description": "If provided shows an (i) icon next to the viz title, which allows linking to the source data",
-										"type": "object",
-										"properties": {
-											"link": {
-												"description": "url",
-												"type": "string"
+										"anyOf": [
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"text": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"text"
+												]
 											},
-											"name": {
-												"description": "label",
-												"type": "string"
+											{
+												"description": "One of the two shapes which {@link ReferenceProps} can take.",
+												"type": "object",
+												"properties": {
+													"name": {
+														"type": "string"
+													},
+													"link": {
+														"type": "string"
+													}
+												},
+												"additionalProperties": false,
+												"required": [
+													"link",
+													"name"
+												]
 											}
-										},
-										"additionalProperties": false,
-										"required": [
-											"link",
-											"name"
 										]
 									},
 									"source": {
@@ -94342,7 +96305,6 @@ export const TranslatedMapOverlaySchema = {
 				"entityAttributesFilter",
 				"legacy",
 				"name",
-				"scaleColorScheme",
 				"scaleType"
 			]
 		},
diff --git a/packages/types/src/types/models-extra/dashboard-item/common.ts b/packages/types/src/types/models-extra/dashboard-item/common.ts
index b12f4d1a18..7fbb6386ba 100644
--- a/packages/types/src/types/models-extra/dashboard-item/common.ts
+++ b/packages/types/src/types/models-extra/dashboard-item/common.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
  */
 
-import { DateOffsetSpec, DefaultTimePeriod, VizPeriodGranularity } from '../common';
+import { DateOffsetSpec, DefaultTimePeriod, ReferenceProps, VizPeriodGranularity } from '../common';
 
 export type BaseConfig = {
   /**
@@ -112,16 +112,7 @@ export type BaseConfig = {
   /**
    * @description If provided shows an (i) icon next to the viz title, which allows linking to the source data
    */
-  reference?: {
-    /**
-     * @description url
-     */
-    link: string;
-    /**
-     * @description label
-     */
-    name: string;
-  };
+  reference?: ReferenceProps;
 
   /**
    * @description If specified allows the frontend to know where the data is coming from, so if there is no data it can show a custom no-data message e.g. "Requires mSupply".
diff --git a/packages/types/src/types/models-extra/mapOverlay.ts b/packages/types/src/types/models-extra/mapOverlay.ts
index dd1e198045..b357b57f7f 100644
--- a/packages/types/src/types/models-extra/mapOverlay.ts
+++ b/packages/types/src/types/models-extra/mapOverlay.ts
@@ -293,7 +293,7 @@ export type SpectrumMapOverlayConfig = BaseMapOverlayConfig & {
   /**
    * @description What color scheme to use for the scale
    */
-  scaleColorScheme: MeasureColorScheme;
+  scaleColorScheme?: MeasureColorScheme;
 
   /**
    * @description Limits on the min and max values for the scale
diff --git a/packages/ui-map-components/src/utils/markerColors.ts b/packages/ui-map-components/src/utils/markerColors.ts
index 0fbf6135ed..1ddfbcc703 100644
--- a/packages/ui-map-components/src/utils/markerColors.ts
+++ b/packages/ui-map-components/src/utils/markerColors.ts
@@ -35,7 +35,7 @@ export type ColorScheme = keyof typeof COLOR_SCHEME_TO_FUNCTION;
  */
 export function resolveSpectrumColour(
   scaleType: `${ScaleType}`,
-  scaleColorScheme: ColorScheme,
+  scaleColorScheme: ColorScheme | undefined,
   value: number | null, // a number in range [0..1] representing percentage or a string of a date within a range specified by [min, max]
   min: number | string, // the lowest number or a string representing earliest date in a range
   max: number | string, // the highest number or a string representing latest date in a range
@@ -44,12 +44,14 @@ export function resolveSpectrumColour(
   if (value === null || (isNaN(value) && scaleType !== ScaleType.TIME))
     return noDataColour || HEATMAP_UNKNOWN_COLOR;
 
-  const valueToColor = (COLOR_SCHEME_TO_FUNCTION[scaleColorScheme] ||
-    COLOR_SCHEME_TO_FUNCTION[SCALE_TYPE_TO_COLOR_SCHEME[scaleType] as ColorScheme] ||
-    COLOR_SCHEME_TO_FUNCTION[MeasureColorScheme.DEFAULT]) as (
-    value: number | null,
-    ...args: any[]
-  ) => string;
+  let valueToColor: (value: number | null, ...args: any[]) => string;
+  if (scaleColorScheme) {
+    valueToColor = COLOR_SCHEME_TO_FUNCTION[scaleColorScheme];
+  } else if (SCALE_TYPE_TO_COLOR_SCHEME[scaleType]) {
+    valueToColor = COLOR_SCHEME_TO_FUNCTION[SCALE_TYPE_TO_COLOR_SCHEME[scaleType]];
+  } else {
+    valueToColor = COLOR_SCHEME_TO_FUNCTION[MeasureColorScheme.DEFAULT];
+  }
 
   switch (scaleType) {
     case ScaleType.PERFORMANCE_DESC: {
@@ -89,12 +91,16 @@ const normaliseToPercentage = (value: number, min = 0, max = 1) => {
  * Takes a value and return a hsl color string for use as a style
  */
 export function getPerformanceHeatmapColor(
-  value: number, // Number in range [0..1] representing percentage
+  value: number | null, // Number in range [0..1] representing percentage
 ): string {
+  if (value === null) {
+    return HEATMAP_UNKNOWN_COLOR;
+  }
+
   return `hsl(${Math.floor(value * 100)}, 100%, 50%)`;
 }
 
-const getTimeProportion = (value: number, min: string, max: string) => {
+const getTimeProportion = (value: number | null, min: string, max: string) => {
   if (!value || !isNaN(value)) return null;
   const range = moment(max).diff(min, 'days');
   const valueAsMoment = moment(value);
@@ -106,7 +112,7 @@ const getTimeProportion = (value: number, min: string, max: string) => {
  * Takes a value and return a hsl color string for use as a style
  */
 export function getTimeHeatmapColor(
-  value: number, // Number in range [0..1] representing percentage
+  value: number | null, // Number in range [0..1] representing percentage
   noDataColour?: string,
 ): string {
   if (value === null || isNaN(value)) return noDataColour || HEATMAP_UNKNOWN_COLOR;
@@ -135,21 +141,25 @@ function getHeatmapColorByOrder({
   swapColor = false,
   colorSet = HEATMAP_DEFAULT_RGB_SET,
 }: {
-  value: number;
+  value: number | null;
   swapColor?: boolean;
   colorSet?: string[];
 }): string {
+  if (value === null) {
+    return HEATMAP_UNKNOWN_COLOR;
+  }
+
   const difference = value - 0.15;
   const index = difference < 0 ? 0 : Math.floor(difference / 0.1) + 1;
   const indexInRange = index > colorSet.length - 1 ? colorSet.length - 1 : index;
   return !swapColor ? colorSet[indexInRange] : colorSet[colorSet.length - indexInRange - 1];
 }
 
-export function getHeatmapColor(value: number) {
+export function getHeatmapColor(value: number | null) {
   return getHeatmapColorByOrder({ value, swapColor: false });
 }
 
-export function getReverseHeatmapColor(value: number) {
+export function getReverseHeatmapColor(value: number | null) {
   return getHeatmapColorByOrder({ value, swapColor: true });
 }
 
@@ -197,7 +207,11 @@ const GPI_PARITY_LOWER_LIMIT = 0.97;
  *
  * @returns {string}
  */
-export function getGPIColor(value: number, min?: number, max?: number): string {
+export function getGPIColor(value: number | null, min?: number, max?: number): string {
+  if (value === null) {
+    return HEATMAP_UNKNOWN_COLOR;
+  }
+
   if (value > GPI_PARITY_UPPER_LIMIT) {
     const normalisedValue = normaliseToPercentage(Math.min(value, 2), GPI_PARITY_UPPER_LIMIT, max);
     return getHeatmapColorByOrder({ value: normalisedValue, colorSet: RED_COLOR_SET });

From 13a457b2ae2a2314ce0a31177105f9b116d66f39 Mon Sep 17 00:00:00 2001
From: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date: Thu, 16 May 2024 09:15:11 +1200
Subject: [PATCH 08/26] feat(adminPanel): RN-1124: Option set export (#5605)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* use correct variable

* avoid interpolation

* document `/optionSets` endpoint

* set up front-end for export

* augment `OptionSet` model with `options()`

* document example call

* WIP: export option set endpoint

* copyright message

* remove unused variable

* WIP: respond with XLSX file

* add auth header in example call

* don’t sort in model

* fix crash cauesd by duplicate ID

* fix workbook initialisation

* sort in model

* regenerate types

* support multiple attributes

* remove test response

* content type for XLSX and use different example

* reorder

* restore correct endpoint

* shallow copy

* more consistent API endpoint (plural form)

* remove commented-out property

Co-authored-by: alexd-bes <129009580+alexd-bes@users.noreply.github.com>

---------

Co-authored-by: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
---
 .../src/importExport/ExportModal.jsx          |  7 +--
 .../src/routes/surveys/optionSets.js          | 10 +++-
 packages/central-server/examples.http         | 34 ++++++++++++++
 .../export/exportOptionSet/exportOptionSet.js | 46 +++++++++++++++++++
 .../src/apiV2/export/exportOptionSet/index.js |  6 +++
 .../central-server/src/apiV2/export/index.js  |  2 +
 .../database/src/modelClasses/OptionSet.js    |  5 ++
 7 files changed, 106 insertions(+), 4 deletions(-)
 create mode 100644 packages/central-server/src/apiV2/export/exportOptionSet/exportOptionSet.js
 create mode 100644 packages/central-server/src/apiV2/export/exportOptionSet/index.js

diff --git a/packages/admin-panel/src/importExport/ExportModal.jsx b/packages/admin-panel/src/importExport/ExportModal.jsx
index 0aa9ca43de..191503302c 100644
--- a/packages/admin-panel/src/importExport/ExportModal.jsx
+++ b/packages/admin-panel/src/importExport/ExportModal.jsx
@@ -133,8 +133,8 @@ export const ExportModal = React.memo(
           id="page-export-button"
           startIcon={<ExportIcon />}
           onClick={handleOpen}
-          isLoading={STATUS === STATUS.LOADING}
-          disabled={STATUS === STATUS.ERROR}
+          isLoading={status === STATUS.LOADING}
+          disabled={status === STATUS.ERROR}
         >
           {exportButtonText}
         </ActionButton>
@@ -159,6 +159,7 @@ ExportModal.defaultProps = {
   title: 'Export',
   exportButtonText: 'Export',
   cancelButtonText: 'Cancel',
-  isExportingMessage: `Export is taking a while, and will continue in the background. You will be emailed the exported file when the process completes.`,
+  isExportingMessage:
+    'Export is taking a while, and will continue in the background. You will be emailed the exported file when the process completes.',
   values: {},
 };
diff --git a/packages/admin-panel/src/routes/surveys/optionSets.js b/packages/admin-panel/src/routes/surveys/optionSets.js
index ad0114300c..fe30c0f25f 100644
--- a/packages/admin-panel/src/routes/surveys/optionSets.js
+++ b/packages/admin-panel/src/routes/surveys/optionSets.js
@@ -12,6 +12,14 @@ const OPTION_SET_FIELDS = [
 
 const OPTION_SET_COLUMNS = [
   ...OPTION_SET_FIELDS,
+  {
+    Header: 'Export',
+    type: 'export',
+    actionConfig: {
+      exportEndpoint: 'optionSets',
+      fileName: '{name}',
+    },
+  },
   {
     Header: 'Edit',
     type: 'edit',
@@ -19,7 +27,7 @@ const OPTION_SET_COLUMNS = [
     actionConfig: {
       title: 'Edit Option Set',
       editEndpoint: 'optionSets',
-      fields: [...OPTION_SET_FIELDS],
+      fields: OPTION_SET_FIELDS,
     },
   },
 ];
diff --git a/packages/central-server/examples.http b/packages/central-server/examples.http
index fc9afdc3b0..75a4fa96af 100644
--- a/packages/central-server/examples.http
+++ b/packages/central-server/examples.http
@@ -31,6 +31,24 @@ GET {{baseUrl}}/downloadFiles?uniqueFileNames=cat_pic.pdf HTTP/2.0
 content-type: {{contentType}}
 Authorization: {{user-authorization}}
 
+### Get all option sets
+
+GET {{baseUrl}}/optionSets
+content-type: {{contentType}}
+Authorization: {{user-authorization}}
+
+### Get option sets by ID
+
+GET {{baseUrl}}/optionSets/5c625e11f013d60db4249466
+content-type: {{contentType}}
+Authorization: {{user-authorization}}
+
+### Export option set by ID
+
+GET {{baseUrl}}/export/optionSet/5c625e01f013d60db42a5763 HTTP/1.1
+Authorization: {{user-authorization}}
+Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
+
 ### Get survey responses
 
 GET {{baseUrl}}/surveyResponses?pageSize=5&columns=["entity.name", "country.name"] HTTP/2.0
@@ -43,6 +61,22 @@ GET {{baseUrl}}/socialFeed?appVersion=1.14.140&page=0&earliestCreationDate=2024-
 content-type: {{contentType}}
 Authorization: {{user-authorization}}
 
+### Export survey response
+
+GET {{baseUrl}}/export/surveyResponses/6631d8b281240914d69f5432?timeZone=Pacific%2FAuckland HTTP/1.1
+content-type: {{contentType}}
+Authorization: {{user-authorization}}
+
+### GET entity hierarchies
+
+GET {{baseUrl}}/entityHierarchy HTTP/2.0
+content-type: {{contentType}}
+Authorization: {{user-authorization}}
+
+### Get entity hierarchy
+
+GET {{baseUrl}}/entityHierarchy/5e9d06e261f76a30c4000002 HTTP/2.0
+
 ### Get country access list for a project
 
 GET {{baseUrl}}/{{version}}/me/countries?projectCode=explore
diff --git a/packages/central-server/src/apiV2/export/exportOptionSet/exportOptionSet.js b/packages/central-server/src/apiV2/export/exportOptionSet/exportOptionSet.js
new file mode 100644
index 0000000000..e51add3cce
--- /dev/null
+++ b/packages/central-server/src/apiV2/export/exportOptionSet/exportOptionSet.js
@@ -0,0 +1,46 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import xlsx from 'xlsx';
+import { respondWithDownload, toFilename } from '@tupaia/utils';
+import { getExportPathForUser } from '../getExportPathForUser';
+
+const objectToHumanReadableKeyValuePairs = obj => {
+  const entries = [];
+  for (const [key, value] of Object.entries(obj)) {
+    entries.push(`${key}: ${value}`);
+  }
+  return entries.join('\n');
+};
+
+export async function exportOptionSet(req, res) {
+  const { models, userId } = req;
+  const { optionSetId } = req.params;
+
+  const optionSetRecord = await models.optionSet.findOne({ id: optionSetId });
+  const optionRecords = await optionSetRecord.options();
+  const options = optionRecords.map(option => {
+    return {
+      value: option.value,
+      label: option.label,
+      sort_order: option.sort_order,
+      attributes: objectToHumanReadableKeyValuePairs(option.attributes),
+    };
+  });
+
+  const worksheet = xlsx.utils.json_to_sheet(options);
+  const sheetName = optionSetRecord.name.substring(0, 31); // Sheet name max. length is hard-coded in Excel
+
+  // Upgrade xlsx to v0.20 or newer to do next two lines in one go
+  const workbook = xlsx.utils.book_new();
+  xlsx.utils.book_append_sheet(workbook, worksheet, sheetName);
+
+  const dirname = getExportPathForUser(userId);
+  const basename = toFilename(`Option Set - ${optionSetRecord.name}.xlsx`);
+  const filepath = `${dirname}/${basename}`;
+  xlsx.writeFile(workbook, filepath);
+
+  respondWithDownload(res, filepath);
+}
diff --git a/packages/central-server/src/apiV2/export/exportOptionSet/index.js b/packages/central-server/src/apiV2/export/exportOptionSet/index.js
new file mode 100644
index 0000000000..df0d73a788
--- /dev/null
+++ b/packages/central-server/src/apiV2/export/exportOptionSet/index.js
@@ -0,0 +1,6 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { exportOptionSet } from './exportOptionSet';
diff --git a/packages/central-server/src/apiV2/export/index.js b/packages/central-server/src/apiV2/export/index.js
index 76eba06554..b5ba11af6a 100644
--- a/packages/central-server/src/apiV2/export/index.js
+++ b/packages/central-server/src/apiV2/export/index.js
@@ -8,6 +8,7 @@ import { catchAsyncErrors, emailAfterTimeout } from '../middleware';
 import { useRouteHandler } from '../RouteHandler';
 import { constructExportEmail } from './constructExportEmail';
 import { DownloadHandler } from './download';
+import { exportOptionSet } from './exportOptionSet';
 import { exportSurveyResponses } from './exportSurveyResponses';
 import { exportSurveys } from './exportSurveys';
 
@@ -17,6 +18,7 @@ exportRoutes.get('/download/:fileName', useRouteHandler(DownloadHandler));
 
 exportRoutes.use(emailAfterTimeout(constructExportEmail));
 
+exportRoutes.get('/optionSets/:optionSetId', catchAsyncErrors(exportOptionSet));
 exportRoutes.get('/surveyResponses', catchAsyncErrors(exportSurveyResponses));
 exportRoutes.get('/surveyResponses/:surveyResponseId', catchAsyncErrors(exportSurveyResponses));
 exportRoutes.get('/surveys', catchAsyncErrors(exportSurveys));
diff --git a/packages/database/src/modelClasses/OptionSet.js b/packages/database/src/modelClasses/OptionSet.js
index fefef75f14..025a819878 100644
--- a/packages/database/src/modelClasses/OptionSet.js
+++ b/packages/database/src/modelClasses/OptionSet.js
@@ -10,6 +10,11 @@ import { RECORDS } from '../records';
 export class OptionSetRecord extends DatabaseRecord {
   static databaseRecord = RECORDS.OPTION_SET;
 
+  async options() {
+    const options = await this.otherModels.option.find({ option_set_id: this.id });
+    return options.sort((a, b) => a.sort_order - b.sort_order);
+  }
+
   async getSurveyIds() {
     const surveyScreens = await this.database.executeSql(
       `

From fa2782588058fc01e02c307483334c8289093c66 Mon Sep 17 00:00:00 2001
From: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date: Thu, 16 May 2024 10:25:18 +1200
Subject: [PATCH 09/26] ci: fix never-ending `run_tests` (#5635)

---
 .github/workflows/ci.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index aae2e10c22..cf5ad98c55 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -83,6 +83,7 @@ jobs:
 
   run_tests:
     name: Run tests
+    timeout-minutes: 15 # Sometimes Jest doesn’t exit properly for meditrak-app-server tests
     runs-on: ubuntu-latest
     env:
       # common

From 53c0bd170df1da340b6abbe82e72adc39fb28506 Mon Sep 17 00:00:00 2001
From: Rohan Port <59544282+rohan-bes@users.noreply.github.com>
Date: Thu, 16 May 2024 16:15:31 +1000
Subject: [PATCH 10/26] merge(lesmis): Merge deployment logic from
 lesmis-on-premise into mainline (#5606)

---
 packages/admin-panel/src/api/TupaiaApi.js     |    2 +-
 .../src/connections/ApiConnection.ts          |    2 +-
 packages/api-client/src/constants.ts          |    8 +-
 packages/auth/src/buildAccessPolicy.js        |   11 +-
 .../src/ms1/startSyncWithMs1.js               |    2 +-
 .../central-server/src/utilities/getApiUrl.js |    4 +-
 packages/data-api/README.md                   |    2 +-
 .../scripts/grantMvRefreshPermissions.sql     |    2 +-
 .../scripts/installMvRefreshModule.sh         |    2 +-
 packages/database/README.md                   |    5 +
 packages/database/package.json                |    7 +-
 .../testDataDump.sql => schema/schema.sql}    | 1069 +++++++++++++----
 packages/database/scripts/setupNewDatabase.sh |   63 +
 .../database/scripts/setupTestDatabase.sh     |   49 -
 packages/database/scripts/updateSchema.sh     |   31 +
 .../https-config-non-ssl.snippet              |    4 +
 .../nginx-template/https-config-ssl.snippet   |   11 +
 .../servers.template.conf}                    |  272 ++---
 packages/devops/configs/vm-app/.bash_profile  |    4 +
 packages/devops/configs/vm-app/.bashrc        |  126 ++
 packages/devops/configs/vm-app/.env.example   |    6 +
 .../buildDeployablePackages.sh                |    0
 .../checkoutLatest.sh                         |    0
 .../cloudwatchConfig.json                     |    0
 .../configureNginx.sh                         |    6 +-
 .../scripts/deployment-aws/downloadFromS3.sh  |    5 +
 .../fetchParameterStoreValue.sh               |    0
 .../scripts/deployment-aws/setupGoldMaster.sh |   10 +
 .../deployment-aws/setupSslCertificate.sh     |   38 +
 .../startCloudwatchAgent.sh                   |    0
 .../deployment-common/configureNginx.sh       |   38 +
 .../devops/scripts/deployment-common/setup.sh |  127 ++
 .../startBackEnds.sh                          |    0
 .../deployment-vm-app/checkRequiredEnvVars.sh |   34 +
 .../scripts/deployment-vm-app/install.sh      |   46 +
 .../devops/scripts/deployment-vm-app/setup.sh |   10 +
 .../devops/scripts/deployment-vm-app/start.sh |   15 +
 .../scripts/deployment-vm-db/importDbDump.sh  |   12 +
 .../deployment-vm-db/initialiseDatabase.sh    |   20 +
 .../devops/scripts/deployment-vm-db/setup.sh  |   32 +
 .../scripts/deployment/setupGoldMaster.sh     |   96 --
 .../lambda/actions/redeploy_tupaia_server.py  |    6 +-
 .../actions/spin_up_lesmis_deployment.py      |   71 ++
 .../actions/spin_up_tupaia_deployment.py      |    4 +-
 .../actions/tear_down_lesmis_deployment.py    |   43 +
 .../lambda/helpers/create_from_image.py       |   34 +-
 .../devops/scripts/lambda/helpers/creation.py |   22 +-
 .../devops/scripts/lambda/lambda_function.py  |    4 +
 .../scripts/lambda/resources/startupLesmis.sh |   84 ++
 .../{startup.sh => startupTupaia.sh}          |    6 +-
 packages/lesmis/src/api/api.js                |    2 +-
 .../server-utils/src/downloadPageAsPDF.ts     |    3 +-
 packages/types/src/schemas/schemas.ts         |  765 ++++++++++++
 packages/types/src/types/models.ts            |   12 +-
 packages/utils/src/request.js                 |    2 +-
 scripts/bash/downloadEnvironmentVariables.sh  |    5 +
 56 files changed, 2656 insertions(+), 578 deletions(-)
 rename packages/database/{src/__tests__/testData/testDataDump.sql => schema/schema.sql} (90%)
 create mode 100755 packages/database/scripts/setupNewDatabase.sh
 delete mode 100755 packages/database/scripts/setupTestDatabase.sh
 create mode 100755 packages/database/scripts/updateSchema.sh
 create mode 100644 packages/devops/configs/nginx-template/https-config-non-ssl.snippet
 create mode 100644 packages/devops/configs/nginx-template/https-config-ssl.snippet
 rename packages/devops/configs/{servers.conf => nginx-template/servers.template.conf} (74%)
 create mode 100644 packages/devops/configs/vm-app/.bash_profile
 create mode 100644 packages/devops/configs/vm-app/.bashrc
 create mode 100644 packages/devops/configs/vm-app/.env.example
 rename packages/devops/scripts/{deployment => deployment-aws}/buildDeployablePackages.sh (100%)
 rename packages/devops/scripts/{deployment => deployment-aws}/checkoutLatest.sh (100%)
 rename packages/devops/scripts/{deployment => deployment-aws}/cloudwatchConfig.json (100%)
 rename packages/devops/scripts/{deployment => deployment-aws}/configureNginx.sh (62%)
 create mode 100755 packages/devops/scripts/deployment-aws/downloadFromS3.sh
 rename packages/devops/scripts/{deployment => deployment-aws}/fetchParameterStoreValue.sh (100%)
 create mode 100755 packages/devops/scripts/deployment-aws/setupGoldMaster.sh
 create mode 100755 packages/devops/scripts/deployment-aws/setupSslCertificate.sh
 rename packages/devops/scripts/{deployment => deployment-aws}/startCloudwatchAgent.sh (100%)
 create mode 100755 packages/devops/scripts/deployment-common/configureNginx.sh
 create mode 100755 packages/devops/scripts/deployment-common/setup.sh
 rename packages/devops/scripts/{deployment => deployment-common}/startBackEnds.sh (100%)
 create mode 100755 packages/devops/scripts/deployment-vm-app/checkRequiredEnvVars.sh
 create mode 100755 packages/devops/scripts/deployment-vm-app/install.sh
 create mode 100755 packages/devops/scripts/deployment-vm-app/setup.sh
 create mode 100755 packages/devops/scripts/deployment-vm-app/start.sh
 create mode 100755 packages/devops/scripts/deployment-vm-db/importDbDump.sh
 create mode 100755 packages/devops/scripts/deployment-vm-db/initialiseDatabase.sh
 create mode 100755 packages/devops/scripts/deployment-vm-db/setup.sh
 delete mode 100755 packages/devops/scripts/deployment/setupGoldMaster.sh
 create mode 100644 packages/devops/scripts/lambda/actions/spin_up_lesmis_deployment.py
 create mode 100644 packages/devops/scripts/lambda/actions/tear_down_lesmis_deployment.py
 create mode 100644 packages/devops/scripts/lambda/resources/startupLesmis.sh
 rename packages/devops/scripts/lambda/resources/{startup.sh => startupTupaia.sh} (90%)

diff --git a/packages/admin-panel/src/api/TupaiaApi.js b/packages/admin-panel/src/api/TupaiaApi.js
index 787e3a8e2d..dad6e34b1a 100644
--- a/packages/admin-panel/src/api/TupaiaApi.js
+++ b/packages/admin-panel/src/api/TupaiaApi.js
@@ -10,7 +10,7 @@ import { verifyResponseStatus, stringifyQuery } from '@tupaia/utils';
 
 import { logout } from '../authentication';
 
-const FETCH_TIMEOUT = 45 * 1000; // 45 seconds in milliseconds
+const FETCH_TIMEOUT = 120 * 1000; // 120 seconds in milliseconds
 
 const isJsonResponse = response => {
   const contentType = response.headers.get('content-type');
diff --git a/packages/api-client/src/connections/ApiConnection.ts b/packages/api-client/src/connections/ApiConnection.ts
index cf29ec41f1..549012fab5 100644
--- a/packages/api-client/src/connections/ApiConnection.ts
+++ b/packages/api-client/src/connections/ApiConnection.ts
@@ -20,7 +20,7 @@ type FetchConfig = RequestInit & {
   headers: FetchHeaders;
 };
 
-const DEFAULT_MAX_WAIT_TIME = 45 * 1000; // 45 seconds in milliseconds
+const DEFAULT_MAX_WAIT_TIME = 120 * 1000; // 120 seconds in milliseconds
 
 export class ApiConnection {
   private readonly authHandler: AuthHandler;
diff --git a/packages/api-client/src/constants.ts b/packages/api-client/src/constants.ts
index 818539f545..d9aa5cdf06 100644
--- a/packages/api-client/src/constants.ts
+++ b/packages/api-client/src/constants.ts
@@ -3,6 +3,8 @@
  * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
 
+import { getEnvVarOrDefault } from '@tupaia/utils';
+
 export const DATA_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 
 type ServiceName = 'auth' | 'entity' | 'central' | 'report' | 'dataTable' | 'webConfig';
@@ -82,9 +84,10 @@ export const LOCALHOST_BASE_URLS: ServiceBaseUrlSet = {
 };
 
 const getServiceUrl = (service: ServiceName, subdomainPrefix?: string): string => {
+  const DOMAIN = getEnvVarOrDefault('DOMAIN', 'tupaia.org');
   const { subdomain, version } = SERVICES[service];
   const fullSubdomain = subdomainPrefix ? `${subdomainPrefix}-${subdomain}` : subdomain;
-  return `https://${fullSubdomain}.tupaia.org/${version}`;
+  return `https://${fullSubdomain}.${DOMAIN}/${version}`;
 };
 
 export const DEV_BASE_URLS: ServiceBaseUrlSet = {
@@ -126,13 +129,14 @@ const isLocalhost = (hostname: string) =>
   hostname.startsWith('10.0.2.2'); // Android Emulator out to host
 
 export const getDefaultBaseUrls = (hostname: string): ServiceBaseUrlSet => {
+  const DOMAIN = getEnvVarOrDefault('DOMAIN', 'tupaia.org');
   if (isLocalhost(hostname)) {
     return LOCALHOST_BASE_URLS;
   }
 
   // production uses standard base urls
   const [subdomain] = hostname.split('.');
-  if (hostname === 'tupaia.org' || productionSubdomainSet.has(subdomain)) {
+  if (hostname === DOMAIN || productionSubdomainSet.has(subdomain)) {
     return PRODUCTION_BASE_URLS;
   }
 
diff --git a/packages/auth/src/buildAccessPolicy.js b/packages/auth/src/buildAccessPolicy.js
index a095c7e9d0..1a3ce4cf96 100644
--- a/packages/auth/src/buildAccessPolicy.js
+++ b/packages/auth/src/buildAccessPolicy.js
@@ -26,10 +26,8 @@ export const buildAccessPolicy = async (models, userId) => {
   // iterate through the user's permissions and build the permission groups per entity
   await Promise.all(
     userEntityPermissions.map(async userEntityPermission => {
-      const {
-        permission_group_name: permissionGroupName,
-        entity_code: entityCode,
-      } = userEntityPermission;
+      const { permission_group_name: permissionGroupName, entity_code: entityCode } =
+        userEntityPermission;
 
       permissionsByEntity[entityCode] = permissionsByEntity[entityCode] || [];
       permissionsByEntity[entityCode].push(permissionGroupName);
@@ -38,9 +36,8 @@ export const buildAccessPolicy = async (models, userId) => {
       // implied access for them, so they'll also be added to the access policy (which has a simple,
       // flat structure, ignorant of the fact that permission groups exist in a hierarchy)
       const permissionGroupChildren = await getOrFetchPermissionGroupChildren(permissionGroupName);
-      permissionsByEntity[entityCode] = permissionsByEntity[entityCode].concat(
-        permissionGroupChildren,
-      );
+      permissionsByEntity[entityCode] =
+        permissionsByEntity[entityCode].concat(permissionGroupChildren);
     }),
   );
 
diff --git a/packages/central-server/src/ms1/startSyncWithMs1.js b/packages/central-server/src/ms1/startSyncWithMs1.js
index b3d216f741..91076f3f26 100644
--- a/packages/central-server/src/ms1/startSyncWithMs1.js
+++ b/packages/central-server/src/ms1/startSyncWithMs1.js
@@ -21,7 +21,7 @@ const ENDPOINT_NOT_FOUND = 'Endpoint not found to send data to MS1';
 export async function startSyncWithMs1(models) {
   if (process.env.MS1_SYNC_DISABLE === 'true') {
     // eslint-disable-next-line no-console
-    console.log('Ms1 sync is disabled');
+    console.log('MS1 sync is disabled');
     return;
   }
 
diff --git a/packages/central-server/src/utilities/getApiUrl.js b/packages/central-server/src/utilities/getApiUrl.js
index 33ed53dab9..3f4889e274 100644
--- a/packages/central-server/src/utilities/getApiUrl.js
+++ b/packages/central-server/src/utilities/getApiUrl.js
@@ -3,12 +3,12 @@
  * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
  */
 
-import { getIsProductionEnvironment } from '@tupaia/utils';
+import { getEnvVarOrDefault, getIsProductionEnvironment } from '@tupaia/utils';
 
 const API_VERSION = 2;
-const DOMAIN = 'tupaia.org';
 
 export const getApiUrl = (endpoint, queryParameters) => {
+  const DOMAIN = getEnvVarOrDefault('DOMAIN', 'tupaia.org');
   const subdomain = getIsProductionEnvironment() ? 'api' : 'dev-api';
   const queryString = Object.entries(queryParameters).reduce(
     (stringSoFar, [key, value]) =>
diff --git a/packages/data-api/README.md b/packages/data-api/README.md
index c0312b1cd6..cc7a9d8aa2 100644
--- a/packages/data-api/README.md
+++ b/packages/data-api/README.md
@@ -32,7 +32,7 @@ Once this process is complete, you can check the analytics table is present in y
 
 ### Uninstallation
 
-Removing the analytics table may sometimes be necessary when creating a test database dump, or making configuration changes. Run:
+Removing the analytics table may sometimes be necessary. Run:
 
 `yarn workspace @tupaia/data-api drop-analytics-table`
 
diff --git a/packages/data-api/scripts/grantMvRefreshPermissions.sql b/packages/data-api/scripts/grantMvRefreshPermissions.sql
index c33481d0c4..57d8c2e339 100644
--- a/packages/data-api/scripts/grantMvRefreshPermissions.sql
+++ b/packages/data-api/scripts/grantMvRefreshPermissions.sql
@@ -9,7 +9,7 @@ ALTER ROLE :mv_user SET search_path TO public,:mv_user;
 ALTER ROLE :db_user SET search_path TO public,:mv_user;
 
 GRANT USAGE ON SCHEMA public TO :mv_user;
-GRANT ALL PRIVILEGES ON DATABASE :db_user TO :mv_user;
+GRANT ALL PRIVILEGES ON DATABASE :db_name TO :mv_user;
 GRANT ALL ON SCHEMA public  TO :mv_user;
 GRANT USAGE ON SCHEMA public  TO :mv_user;
 GRANT USAGE ON SCHEMA :mv_user TO :db_user;
diff --git a/packages/data-api/scripts/installMvRefreshModule.sh b/packages/data-api/scripts/installMvRefreshModule.sh
index f6800f1ece..087baef3de 100755
--- a/packages/data-api/scripts/installMvRefreshModule.sh
+++ b/packages/data-api/scripts/installMvRefreshModule.sh
@@ -23,4 +23,4 @@ else
 fi
 
 export PGPASSWORD=$DB_PG_PASSWORD
-psql -p $DB_PORT --set=db_user="$DB_USER" --set=mv_user="$DB_MV_USER" -h $DB_URL -d $DB_NAME -U $DB_PG_USER -f scripts/grantMvRefreshPermissions.sql
+psql -p $DB_PORT --set=db_user="$DB_USER" --set=mv_user="$DB_MV_USER" --set=db_name="$DB_NAME" -h $DB_URL -d $DB_NAME -U $DB_PG_USER -f scripts/grantMvRefreshPermissions.sql
diff --git a/packages/database/README.md b/packages/database/README.md
index 484cda6226..6870ec583e 100644
--- a/packages/database/README.md
+++ b/packages/database/README.md
@@ -47,3 +47,8 @@ for those changes to be transpiled down and reflected in other packages
 Migrations using db-migrate work in a similar way to Laravel and Rails. When running migrate, the script will scan the `src/migrations` directory and find any files that haven't been added to the `migrations` table of the database. The files will then be executed in alphabetical order and, on each successful migration, a record will be stored in the database to indicate the migration completed and should not be run in the future.
 
 A migration file can be technically called anything however the standard is to prefix it with the current time to guarantee alphabetical order. Migrations function more as patch files than schema definitions. For example if, in a previous migration, a developer created a column that they no longer require they would create a new migration that removes that column and not edit the previous migration to remove the column. A migration is a paper trail of database changes. You wouldn't rewrite commits in GIT in order to fix a bug, similarly you wouldn't rewrite migrations to change schema.
+
+## Schema
+
+We keep a copy of the schema in schema/schema.sql. This is used to spin up a new database e.g. as a test database or a new deployment
+of Tupaia. Periodically this should be updated (`yarn update-schema`) to squash the schema migrations into it.
\ No newline at end of file
diff --git a/packages/database/package.json b/packages/database/package.json
index 4a45d1bba5..97abedd1e8 100644
--- a/packages/database/package.json
+++ b/packages/database/package.json
@@ -26,9 +26,10 @@
     "setup-test": "yarn setup-test-database",
     "test": "yarn package:test:withdb",
     "test:coverage": "yarn test --coverage",
-    "update-test-data": "bash -c 'source .env && pg_dump -s -h $DB_URL -U $DB_USER -O $DB_NAME > src/__tests__/testData/testDataDump.sql && pg_dump -t migrations -c -h $DB_URL -U $DB_USER -O $DB_NAME >> src/__tests__/testData/testDataDump.sql'",
-    "setup-test-database": "DB_NAME=tupaia_test scripts/setupTestDatabase.sh",
-    "check-test-database-exists": "DB_NAME=tupaia_test scripts/checkTestDatabaseExists.sh"
+    "update-schema": "./scripts/updateSchema.sh",
+    "setup-test-database": "DB_NAME=tupaia_test ./scripts/setupNewDatabase.sh OK",
+    "check-test-database-exists": "DB_NAME=tupaia_test scripts/checkTestDatabaseExists.sh",
+    "setup-new-database": "./scripts/setupNewDatabase.sh"
   },
   "dependencies": {
     "@tupaia/access-policy": "workspace:*",
diff --git a/packages/database/src/__tests__/testData/testDataDump.sql b/packages/database/schema/schema.sql
similarity index 90%
rename from packages/database/src/__tests__/testData/testDataDump.sql
rename to packages/database/schema/schema.sql
index 8f1b25d2e8..5ecedf9f65 100644
--- a/packages/database/src/__tests__/testData/testDataDump.sql
+++ b/packages/database/schema/schema.sql
@@ -2,8 +2,8 @@
 -- PostgreSQL database dump
 --
 
--- Dumped from database version 13.7
--- Dumped by pg_dump version 13.5 (Ubuntu 13.5-1.pgdg18.04+1)
+-- Dumped from database version 13.13
+-- Dumped by pg_dump version 14.11 (Ubuntu 14.11-0ubuntu0.22.04.1)
 
 SET statement_timeout = 0;
 SET lock_timeout = 0;
@@ -17,17 +17,17 @@ SET client_min_messages = warning;
 SET row_security = off;
 
 --
--- Name: postgis; Type: EXTENSION; Schema: -; Owner: -
+-- Name: public; Type: SCHEMA; Schema: -; Owner: -
 --
 
-CREATE EXTENSION IF NOT EXISTS postgis WITH SCHEMA public;
+CREATE SCHEMA public;
 
 
 --
--- Name: EXTENSION postgis; Type: COMMENT; Schema: -; Owner: -
+-- Name: SCHEMA public; Type: COMMENT; Schema: -; Owner: -
 --
 
-COMMENT ON EXTENSION postgis IS 'PostGIS geometry, geography, and raster spatial types and functions';
+COMMENT ON SCHEMA public IS 'standard public schema';
 
 
 --
@@ -64,31 +64,8 @@ CREATE TYPE public.data_table_type AS ENUM (
     'sql',
     'data_group_metadata',
     'data_element_metadata',
-    'entity_attributes'
-);
-
-
---
--- Name: disaster_event_type; Type: TYPE; Schema: public; Owner: -
---
-
-CREATE TYPE public.disaster_event_type AS ENUM (
-    'start',
-    'end',
-    'resolve'
-);
-
-
---
--- Name: disaster_type; Type: TYPE; Schema: public; Owner: -
---
-
-CREATE TYPE public.disaster_type AS ENUM (
-    'cyclone',
-    'eruption',
-    'earthquake',
-    'tsunami',
-    'flood'
+    'entity_attributes',
+    'survey_responses'
 );
 
 
@@ -130,7 +107,21 @@ CREATE TYPE public.entity_type AS ENUM (
     'institute',
     'msupply_store',
     'complaint',
-    'water_sample'
+    'water_sample',
+    'facility_building',
+    'facility_division',
+    'facility_section',
+    'hospital_ward',
+    'farm',
+    'repair_request',
+    'district_operational',
+    'commune',
+    'business',
+    'health_clinic_boundary',
+    'enumeration_area',
+    'maintenance',
+    'larval_sample',
+    'transfer'
 );
 
 
@@ -153,7 +144,35 @@ CREATE TYPE public.period_granularity AS ENUM (
 
 CREATE TYPE public.primary_platform AS ENUM (
     'tupaia',
-    'lesmis'
+    'lesmis',
+    'datatrak'
+);
+
+
+--
+-- Name: question_type; Type: TYPE; Schema: public; Owner: -
+--
+
+CREATE TYPE public.question_type AS ENUM (
+    'Arithmetic',
+    'Autocomplete',
+    'Binary',
+    'Checkbox',
+    'CodeGenerator',
+    'Condition',
+    'Date',
+    'DateOfData',
+    'DateTime',
+    'Entity',
+    'FreeText',
+    'Geolocate',
+    'Instruction',
+    'Number',
+    'Photo',
+    'PrimaryEntity',
+    'Radio',
+    'SubmissionDate',
+    'File'
 );
 
 
@@ -437,39 +456,39 @@ $_X$;
 CREATE FUNCTION public.drop_analytics_log_tables() RETURNS void
     LANGUAGE plpgsql
     AS $_X$
-  declare
-    tStartTime TIMESTAMP;
-    source_table TEXT;
-    source_tables_array TEXT[] := array['answer', 'survey_response', 'entity', 'survey', 'question', 'data_element'];
-  
-  begin
-    IF (SELECT EXISTS (
-      SELECT FROM pg_tables
-      WHERE schemaname = 'public'
-      AND tablename   = 'analytics'
-    ))
-    THEN
-      RAISE NOTICE 'Must drop analytics table before dropping log tables. Run drop_analytics_table()';
-    ELSE
-      RAISE NOTICE 'Dropping Materialized View Logs...';
-      FOREACH source_table IN ARRAY source_tables_array LOOP
-        IF (SELECT EXISTS (
-          SELECT FROM pg_tables
-          WHERE schemaname = 'public'
-          AND tablename   = 'log$_' || source_table
-        ))
-        THEN
-          EXECUTE 'ALTER TABLE ' || source_table || ' DISABLE TRIGGER ' || source_table || '_trigger';
-          tStartTime := clock_timestamp();
-          PERFORM mv$removeMaterializedViewLog(source_table, 'public');
-          RAISE NOTICE 'Dropped Materialized View Log for % table, took %', source_table, clock_timestamp() - tStartTime;
-          EXECUTE 'ALTER TABLE ' || source_table || ' ENABLE TRIGGER ' || source_table || '_trigger';
-        ELSE
-          RAISE NOTICE 'Materialized View Log for % table does not exist, skipping', source_table;
-        END IF;
-      END LOOP;
-    END IF;
-  end $_X$;
+declare
+  tStartTime TIMESTAMP;
+  source_table TEXT;
+  source_tables_array TEXT[] := array['answer', 'survey_response', 'entity', 'survey', 'question', 'data_element'];
+
+begin
+  IF (SELECT EXISTS (
+    SELECT FROM pg_tables
+    WHERE schemaname = 'public'
+    AND tablename   = 'analytics'
+  ))
+  THEN
+    RAISE NOTICE 'Must drop analytics table before dropping log tables. Run drop_analytics_table()';
+  ELSE
+    RAISE NOTICE 'Dropping Materialized View Logs...';
+    FOREACH source_table IN ARRAY source_tables_array LOOP
+      IF (SELECT EXISTS (
+        SELECT FROM pg_tables
+        WHERE schemaname = 'public'
+        AND tablename   = 'log$_' || source_table
+      ))
+      THEN
+        EXECUTE 'ALTER TABLE ' || source_table || ' DISABLE TRIGGER ' || source_table || '_trigger';
+        tStartTime := clock_timestamp();
+        PERFORM mv$removeMaterializedViewLog(source_table, 'public');
+        RAISE NOTICE 'Dropped Materialized View Log for % table, took %', source_table, clock_timestamp() - tStartTime;
+        EXECUTE 'ALTER TABLE ' || source_table || ' ENABLE TRIGGER ' || source_table || '_trigger';
+      ELSE
+        RAISE NOTICE 'Materialized View Log for % table does not exist, skipping', source_table;
+      END IF;
+    END LOOP;
+  END IF;
+end $_X$;
 
 
 --
@@ -721,20 +740,6 @@ CREATE FUNCTION public.scrub_geo_data(current_record jsonb DEFAULT NULL::jsonb,
     $$;
 
 
---
--- Name: update_change_time(); Type: FUNCTION; Schema: public; Owner: -
---
-
-CREATE FUNCTION public.update_change_time() RETURNS trigger
-    LANGUAGE plpgsql
-    AS $$
-    BEGIN
-      NEW.change_time = floor(extract(epoch from clock_timestamp()) * 1000) + (CAST (nextval('change_time_seq') AS FLOAT)/1000);
-      RETURN NEW;
-    END;
-    $$;
-
-
 --
 -- Name: array_concat_agg(anyarray); Type: AGGREGATE; Schema: public; Owner: -
 --
@@ -926,7 +931,34 @@ CREATE TABLE public.dashboard_item (
     config jsonb DEFAULT '{}'::jsonb NOT NULL,
     report_code text,
     legacy boolean DEFAULT false NOT NULL,
-    permission_group_ids text[]
+    permission_group_ids text[],
+    CONSTRAINT check_code_equals_report_code CHECK (((legacy = true) OR (code = report_code)))
+);
+
+
+--
+-- Name: dashboard_mailing_list; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.dashboard_mailing_list (
+    id text NOT NULL,
+    project_id text NOT NULL,
+    entity_id text NOT NULL,
+    dashboard_id text NOT NULL,
+    admin_permission_groups text[] DEFAULT '{}'::text[] NOT NULL
+);
+
+
+--
+-- Name: dashboard_mailing_list_entry; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.dashboard_mailing_list_entry (
+    id text NOT NULL,
+    dashboard_mailing_list_id text NOT NULL,
+    email text NOT NULL,
+    subscribed boolean DEFAULT true NOT NULL,
+    unsubscribed_time timestamp without time zone
 );
 
 
@@ -942,6 +974,7 @@ CREATE TABLE public.dashboard_relation (
     project_codes text[] NOT NULL,
     permission_groups text[] NOT NULL,
     sort_order integer,
+    attributes_filter jsonb DEFAULT '{}'::jsonb NOT NULL,
     CONSTRAINT entity_types_not_empty CHECK ((entity_types <> '{}'::public.entity_type[])),
     CONSTRAINT permission_groups_not_empty CHECK ((permission_groups <> '{}'::text[])),
     CONSTRAINT project_codes_not_empty CHECK ((project_codes <> '{}'::text[]))
@@ -1040,6 +1073,20 @@ CREATE TABLE public.data_table (
 );
 
 
+--
+-- Name: datatrak_session; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.datatrak_session (
+    id text NOT NULL,
+    email text NOT NULL,
+    access_policy jsonb NOT NULL,
+    access_token text NOT NULL,
+    access_token_expiry bigint NOT NULL,
+    refresh_token text NOT NULL
+);
+
+
 --
 -- Name: dhis_instance; Type: TABLE; Schema: public; Owner: -
 --
@@ -1088,32 +1135,6 @@ CREATE TABLE public.dhis_sync_queue (
 );
 
 
---
--- Name: disaster; Type: TABLE; Schema: public; Owner: -
---
-
-CREATE TABLE public.disaster (
-    id text NOT NULL,
-    type public.disaster_type NOT NULL,
-    description text,
-    name text NOT NULL,
-    "countryCode" text NOT NULL
-);
-
-
---
--- Name: disasterEvent; Type: TABLE; Schema: public; Owner: -
---
-
-CREATE TABLE public."disasterEvent" (
-    id text NOT NULL,
-    date timestamp with time zone NOT NULL,
-    type public.disaster_event_type NOT NULL,
-    "organisationUnitCode" text NOT NULL,
-    "disasterId" text NOT NULL
-);
-
-
 --
 -- Name: entity; Type: TABLE; Schema: public; Owner: -
 --
@@ -1123,14 +1144,14 @@ CREATE TABLE public.entity (
     code character varying(64) NOT NULL,
     parent_id character varying(64),
     name character varying(128) NOT NULL,
-    type public.entity_type,
+    type public.entity_type NOT NULL,
     point public.geography(Point,4326),
     region public.geography(MultiPolygon,4326),
     image_url text,
     country_code character varying(6),
     bounds public.geography(Polygon,4326),
-    metadata jsonb,
-    attributes jsonb DEFAULT '{}'::jsonb
+    metadata jsonb DEFAULT '{}'::jsonb NOT NULL,
+    attributes jsonb DEFAULT '{}'::jsonb NOT NULL
 );
 
 
@@ -1227,6 +1248,29 @@ CREATE TABLE public.indicator (
 );
 
 
+--
+-- Name: landing_page; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.landing_page (
+    id text NOT NULL,
+    name character varying(40) NOT NULL,
+    url_segment text NOT NULL,
+    image_url text,
+    logo_url text,
+    primary_hexcode text,
+    secondary_hexcode text,
+    extended_title text,
+    long_bio text,
+    contact_us text,
+    external_link text,
+    phone_number text,
+    website_url text,
+    include_name_in_header boolean,
+    project_codes text[]
+);
+
+
 --
 -- Name: legacy_report; Type: TABLE; Schema: public; Owner: -
 --
@@ -1269,7 +1313,8 @@ CREATE TABLE public.map_overlay (
     report_code text,
     legacy boolean DEFAULT false NOT NULL,
     data_services jsonb DEFAULT '[{"isDataRegional": true}]'::jsonb,
-    id text DEFAULT public.generate_object_id() NOT NULL
+    id text DEFAULT public.generate_object_id() NOT NULL,
+    entity_attributes_filter jsonb DEFAULT '{}'::jsonb NOT NULL
 );
 
 
@@ -1466,11 +1511,11 @@ CREATE TABLE public.project (
     image_url text,
     default_measure text DEFAULT '126,171'::text,
     dashboard_group_name text DEFAULT 'General'::text,
-    permission_groups text[],
+    permission_groups text[] DEFAULT '{}'::text[] NOT NULL,
     logo_url text,
     entity_id text,
     entity_hierarchy_id text,
-    config jsonb DEFAULT '{"permanentRegionLabels": true}'::jsonb
+    config jsonb DEFAULT '{"permanentRegionLabels": true}'::jsonb NOT NULL
 );
 
 
@@ -1496,14 +1541,13 @@ CREATE TABLE public.question (
     id text NOT NULL,
     text text NOT NULL,
     name text,
-    type text NOT NULL,
     options text[],
     code text,
     detail text,
     option_set_id character varying,
     hook text,
     data_element_id text,
-    CONSTRAINT data_source_id_not_null_on_conditions CHECK (((type = ANY (ARRAY['DateOfData'::text, 'Instruction'::text, 'PrimaryEntity'::text, 'SubmissionDate'::text])) OR (data_element_id IS NOT NULL)))
+    type public.question_type NOT NULL
 );
 
 
@@ -1529,7 +1573,8 @@ CREATE TABLE public.report (
     id text NOT NULL,
     code text NOT NULL,
     config jsonb NOT NULL,
-    permission_group_id text NOT NULL
+    permission_group_id text NOT NULL,
+    latest_data_parameters jsonb DEFAULT '{}'::jsonb NOT NULL
 );
 
 
@@ -1570,7 +1615,8 @@ CREATE TABLE public.survey (
     integration_metadata jsonb DEFAULT '{}'::jsonb,
     period_granularity public.period_granularity,
     requires_approval boolean DEFAULT false,
-    data_group_id text
+    data_group_id text,
+    project_id text NOT NULL
 );
 
 
@@ -1658,6 +1704,20 @@ CREATE TABLE public.sync_group_log (
 );
 
 
+--
+-- Name: tupaia_web_session; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.tupaia_web_session (
+    id text NOT NULL,
+    email text NOT NULL,
+    access_policy jsonb NOT NULL,
+    access_token text NOT NULL,
+    access_token_expiry bigint NOT NULL,
+    refresh_token text NOT NULL
+);
+
+
 --
 -- Name: userSession; Type: TABLE; Schema: public; Owner: -
 --
@@ -1690,7 +1750,8 @@ CREATE TABLE public.user_account (
     password_salt text NOT NULL,
     verified_email public.verified_email DEFAULT 'new_user'::public.verified_email,
     profile_image text,
-    primary_platform public.primary_platform DEFAULT 'tupaia'::public.primary_platform
+    primary_platform public.primary_platform DEFAULT 'tupaia'::public.primary_platform,
+    preferences jsonb DEFAULT '{}'::jsonb NOT NULL
 );
 
 
@@ -1700,9 +1761,9 @@ CREATE TABLE public.user_account (
 
 CREATE TABLE public.user_entity_permission (
     id text NOT NULL,
-    user_id text,
-    entity_id text,
-    permission_group_id text
+    user_id text NOT NULL,
+    entity_id text NOT NULL,
+    permission_group_id text NOT NULL
 );
 
 
@@ -1906,6 +1967,14 @@ ALTER TABLE ONLY public.dashboard
     ADD CONSTRAINT dashboard_code_key UNIQUE (code);
 
 
+--
+-- Name: dashboard_mailing_list dashboard_id_project_id_entity_id_unique; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.dashboard_mailing_list
+    ADD CONSTRAINT dashboard_id_project_id_entity_id_unique UNIQUE (dashboard_id, project_id, entity_id);
+
+
 --
 -- Name: dashboard_item dashboard_item_code_key; Type: CONSTRAINT; Schema: public; Owner: -
 --
@@ -1922,6 +1991,30 @@ ALTER TABLE ONLY public.dashboard_item
     ADD CONSTRAINT dashboard_item_pkey PRIMARY KEY (id);
 
 
+--
+-- Name: dashboard_mailing_list_entry dashboard_mailing_list_entry_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.dashboard_mailing_list_entry
+    ADD CONSTRAINT dashboard_mailing_list_entry_pkey PRIMARY KEY (id);
+
+
+--
+-- Name: dashboard_mailing_list_entry dashboard_mailing_list_id_email_unique; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.dashboard_mailing_list_entry
+    ADD CONSTRAINT dashboard_mailing_list_id_email_unique UNIQUE (dashboard_mailing_list_id, email);
+
+
+--
+-- Name: dashboard_mailing_list dashboard_mailing_list_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.dashboard_mailing_list
+    ADD CONSTRAINT dashboard_mailing_list_pkey PRIMARY KEY (id);
+
+
 --
 -- Name: dashboard dashboard_pkey; Type: CONSTRAINT; Schema: public; Owner: -
 --
@@ -2026,6 +2119,14 @@ ALTER TABLE ONLY public.data_table
     ADD CONSTRAINT data_table_pkey PRIMARY KEY (id);
 
 
+--
+-- Name: datatrak_session datatrak_session_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.datatrak_session
+    ADD CONSTRAINT datatrak_session_pkey PRIMARY KEY (id);
+
+
 --
 -- Name: dhis_instance dhis_instance_code_key; Type: CONSTRAINT; Schema: public; Owner: -
 --
@@ -2082,22 +2183,6 @@ ALTER TABLE ONLY public.dhis_sync_queue
     ADD CONSTRAINT dhis_sync_queue_record_id_unique UNIQUE (record_id);
 
 
---
--- Name: disasterEvent disasterEvent_pkey; Type: CONSTRAINT; Schema: public; Owner: -
---
-
-ALTER TABLE ONLY public."disasterEvent"
-    ADD CONSTRAINT "disasterEvent_pkey" PRIMARY KEY (id);
-
-
---
--- Name: disaster disaster_pkey; Type: CONSTRAINT; Schema: public; Owner: -
---
-
-ALTER TABLE ONLY public.disaster
-    ADD CONSTRAINT disaster_pkey PRIMARY KEY (id);
-
-
 --
 -- Name: entity entity_code_key; Type: CONSTRAINT; Schema: public; Owner: -
 --
@@ -2202,6 +2287,14 @@ ALTER TABLE ONLY public.meditrak_device
     ADD CONSTRAINT install_id_pkey PRIMARY KEY (id);
 
 
+--
+-- Name: landing_page landing_page_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.landing_page
+    ADD CONSTRAINT landing_page_pkey PRIMARY KEY (id);
+
+
 --
 -- Name: legacy_report legacy_report_code_key; Type: CONSTRAINT; Schema: public; Owner: -
 --
@@ -2562,6 +2655,14 @@ ALTER TABLE ONLY public.sync_group_log
     ADD CONSTRAINT sync_service_log_pkey PRIMARY KEY (id);
 
 
+--
+-- Name: tupaia_web_session tupaia_web_session_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.tupaia_web_session
+    ADD CONSTRAINT tupaia_web_session_pkey PRIMARY KEY (id);
+
+
 --
 -- Name: userSession userSession_id_key; Type: CONSTRAINT; Schema: public; Owner: -
 --
@@ -2779,13 +2880,6 @@ CREATE UNIQUE INDEX permissions_based_meditrak_sync_queue_id_idx ON public.permi
 CREATE INDEX question_code_idx ON public.question USING btree (code);
 
 
---
--- Name: question_type_idx; Type: INDEX; Schema: public; Owner: -
---
-
-CREATE INDEX question_type_idx ON public.question USING btree (type);
-
-
 --
 -- Name: refresh_token_token_idx; Type: INDEX; Schema: public; Owner: -
 --
@@ -2835,6 +2929,13 @@ CREATE INDEX survey_name_idx ON public.survey USING btree (name);
 CREATE INDEX survey_permission_group_id_idx ON public.survey USING btree (permission_group_id);
 
 
+--
+-- Name: survey_project_id_idx; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX survey_project_id_idx ON public.survey USING btree (project_id);
+
+
 --
 -- Name: survey_response_data_time_idx; Type: INDEX; Schema: public; Owner: -
 --
@@ -2996,6 +3097,13 @@ CREATE TRIGGER access_request_trigger AFTER INSERT OR DELETE OR UPDATE ON public
 CREATE TRIGGER ancestor_descendant_relation_immutable_trigger AFTER UPDATE ON public.ancestor_descendant_relation FOR EACH ROW EXECUTE FUNCTION public.immutable_table();
 
 
+--
+-- Name: ancestor_descendant_relation ancestor_descendant_relation_trigger; Type: TRIGGER; Schema: public; Owner: -
+--
+
+CREATE TRIGGER ancestor_descendant_relation_trigger AFTER INSERT OR DELETE OR UPDATE ON public.ancestor_descendant_relation FOR EACH ROW EXECUTE FUNCTION public.notification();
+
+
 --
 -- Name: answer answer_trigger; Type: TRIGGER; Schema: public; Owner: -
 --
@@ -3087,13 +3195,6 @@ CREATE TRIGGER data_group_trigger AFTER INSERT OR DELETE OR UPDATE ON public.dat
 CREATE TRIGGER data_service_entity_trigger AFTER INSERT OR DELETE OR UPDATE ON public.data_service_entity FOR EACH ROW EXECUTE FUNCTION public.notification();
 
 
---
--- Name: data_table data_table_trigger; Type: TRIGGER; Schema: public; Owner: -
---
-
-CREATE TRIGGER data_table_trigger AFTER INSERT OR DELETE OR UPDATE ON public.data_table FOR EACH ROW EXECUTE FUNCTION public.notification();
-
-
 --
 -- Name: dhis_instance dhis_instance_trigger; Type: TRIGGER; Schema: public; Owner: -
 --
@@ -3105,21 +3206,7 @@ CREATE TRIGGER dhis_instance_trigger AFTER INSERT OR DELETE OR UPDATE ON public.
 -- Name: dhis_sync_queue dhis_sync_queue_trigger; Type: TRIGGER; Schema: public; Owner: -
 --
 
-CREATE TRIGGER dhis_sync_queue_trigger BEFORE INSERT OR UPDATE ON public.dhis_sync_queue FOR EACH ROW EXECUTE FUNCTION public.update_change_time();
-
-
---
--- Name: disaster disaster_trigger; Type: TRIGGER; Schema: public; Owner: -
---
-
-CREATE TRIGGER disaster_trigger AFTER INSERT OR DELETE OR UPDATE ON public.disaster FOR EACH ROW EXECUTE FUNCTION public.notification();
-
-
---
--- Name: disasterEvent disasterevent_trigger; Type: TRIGGER; Schema: public; Owner: -
---
-
-CREATE TRIGGER disasterevent_trigger AFTER INSERT OR DELETE OR UPDATE ON public."disasterEvent" FOR EACH ROW EXECUTE FUNCTION public.notification();
+CREATE TRIGGER dhis_sync_queue_trigger AFTER INSERT OR DELETE OR UPDATE ON public.dhis_sync_queue FOR EACH ROW EXECUTE FUNCTION public.notification();
 
 
 --
@@ -3171,6 +3258,13 @@ CREATE TRIGGER indicator_trigger AFTER INSERT OR DELETE OR UPDATE ON public.indi
 CREATE TRIGGER install_id_trigger AFTER INSERT OR DELETE OR UPDATE ON public.meditrak_device FOR EACH ROW EXECUTE FUNCTION public.notification();
 
 
+--
+-- Name: landing_page landing_page_trigger; Type: TRIGGER; Schema: public; Owner: -
+--
+
+CREATE TRIGGER landing_page_trigger AFTER INSERT OR DELETE OR UPDATE ON public.landing_page FOR EACH ROW EXECUTE FUNCTION public.notification();
+
+
 --
 -- Name: map_overlay_group_relation map_overlay_group_relation_trigger; Type: TRIGGER; Schema: public; Owner: -
 --
@@ -3210,7 +3304,7 @@ CREATE TRIGGER meditrak_device_trigger AFTER INSERT OR DELETE OR UPDATE ON publi
 -- Name: meditrak_sync_queue meditrak_sync_queue_trigger; Type: TRIGGER; Schema: public; Owner: -
 --
 
-CREATE TRIGGER meditrak_sync_queue_trigger BEFORE INSERT OR UPDATE ON public.meditrak_sync_queue FOR EACH ROW EXECUTE FUNCTION public.update_change_time();
+CREATE TRIGGER meditrak_sync_queue_trigger AFTER INSERT OR DELETE OR UPDATE ON public.meditrak_sync_queue FOR EACH ROW EXECUTE FUNCTION public.notification();
 
 
 --
@@ -3224,7 +3318,7 @@ CREATE TRIGGER ms1_sync_log_trigger AFTER INSERT OR DELETE OR UPDATE ON public.m
 -- Name: ms1_sync_queue ms1_sync_queue_trigger; Type: TRIGGER; Schema: public; Owner: -
 --
 
-CREATE TRIGGER ms1_sync_queue_trigger BEFORE INSERT OR UPDATE ON public.ms1_sync_queue FOR EACH ROW EXECUTE FUNCTION public.update_change_time();
+CREATE TRIGGER ms1_sync_queue_trigger AFTER INSERT OR DELETE OR UPDATE ON public.ms1_sync_queue FOR EACH ROW EXECUTE FUNCTION public.notification();
 
 
 --
@@ -3487,6 +3581,38 @@ ALTER TABLE ONLY public.comment
     ADD CONSTRAINT comment_user_id_fkey FOREIGN KEY (user_id) REFERENCES public.user_account(id);
 
 
+--
+-- Name: dashboard_mailing_list dashboard_mailing_list_dashboard_id_fk; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.dashboard_mailing_list
+    ADD CONSTRAINT dashboard_mailing_list_dashboard_id_fk FOREIGN KEY (dashboard_id) REFERENCES public.dashboard(id) ON UPDATE CASCADE ON DELETE CASCADE;
+
+
+--
+-- Name: dashboard_mailing_list dashboard_mailing_list_entity_id_fk; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.dashboard_mailing_list
+    ADD CONSTRAINT dashboard_mailing_list_entity_id_fk FOREIGN KEY (entity_id) REFERENCES public.entity(id) ON UPDATE CASCADE ON DELETE CASCADE;
+
+
+--
+-- Name: dashboard_mailing_list_entry dashboard_mailing_list_entry_dashboard_mailing_list_id_fk; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.dashboard_mailing_list_entry
+    ADD CONSTRAINT dashboard_mailing_list_entry_dashboard_mailing_list_id_fk FOREIGN KEY (dashboard_mailing_list_id) REFERENCES public.dashboard_mailing_list(id) ON UPDATE CASCADE ON DELETE CASCADE;
+
+
+--
+-- Name: dashboard_mailing_list dashboard_mailing_list_project_id_fk; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.dashboard_mailing_list
+    ADD CONSTRAINT dashboard_mailing_list_project_id_fk FOREIGN KEY (project_id) REFERENCES public.project(id) ON UPDATE CASCADE ON DELETE CASCADE;
+
+
 --
 -- Name: dashboard_relation dashboard_relation_child_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
 --
@@ -3527,14 +3653,6 @@ ALTER TABLE ONLY public.data_element_data_group
     ADD CONSTRAINT data_element_data_group_data_group_id_fkey FOREIGN KEY (data_group_id) REFERENCES public.data_group(id) ON UPDATE CASCADE ON DELETE CASCADE;
 
 
---
--- Name: disasterEvent disaster_event_disaster_id_fk; Type: FK CONSTRAINT; Schema: public; Owner: -
---
-
-ALTER TABLE ONLY public."disasterEvent"
-    ADD CONSTRAINT disaster_event_disaster_id_fk FOREIGN KEY ("disasterId") REFERENCES public.disaster(id) ON UPDATE CASCADE ON DELETE CASCADE;
-
-
 --
 -- Name: entity entity_parent_fk; Type: FK CONSTRAINT; Schema: public; Owner: -
 --
@@ -3727,6 +3845,14 @@ ALTER TABLE ONLY public.survey
     ADD CONSTRAINT survey_permission_group_id_fkey FOREIGN KEY (permission_group_id) REFERENCES public.permission_group(id) ON UPDATE CASCADE ON DELETE RESTRICT;
 
 
+--
+-- Name: survey survey_project_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.survey
+    ADD CONSTRAINT survey_project_id_fkey FOREIGN KEY (project_id) REFERENCES public.project(id);
+
+
 --
 -- Name: survey_response_comment survey_response_comment_comment_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
 --
@@ -3843,36 +3969,515 @@ ALTER TABLE ONLY public.user_favourite_dashboard_item
 -- Name: SCHEMA public; Type: ACL; Schema: -; Owner: -
 --
 
+REVOKE ALL ON SCHEMA public FROM rdsadmin;
 REVOKE ALL ON SCHEMA public FROM PUBLIC;
 GRANT ALL ON SCHEMA public TO postgres;
 GRANT ALL ON SCHEMA public TO tupaia;
+GRANT USAGE ON SCHEMA public TO tupaia_read;
+GRANT ALL ON SCHEMA public TO mvrefresh;
+GRANT USAGE ON SCHEMA public TO analytics_readonly;
 
 
 --
--- Name: schema_change_trigger; Type: EVENT TRIGGER; Schema: -; Owner: -
+-- Name: TABLE access_request; Type: ACL; Schema: public; Owner: -
 --
 
-CREATE EVENT TRIGGER schema_change_trigger ON ddl_command_end
-   EXECUTE FUNCTION public.schema_change_notification();
+GRANT SELECT ON TABLE public.access_request TO tupaia_read;
 
 
 --
--- PostgreSQL database dump complete
+-- Name: TABLE admin_panel_session; Type: ACL; Schema: public; Owner: -
 --
 
+GRANT SELECT ON TABLE public.admin_panel_session TO tupaia_read;
+
+
 --
--- PostgreSQL database dump
+-- Name: TABLE ancestor_descendant_relation; Type: ACL; Schema: public; Owner: -
 --
 
--- Dumped from database version 13.7
--- Dumped by pg_dump version 13.5 (Ubuntu 13.5-1.pgdg18.04+1)
+GRANT SELECT ON TABLE public.ancestor_descendant_relation TO tupaia_read;
 
-SET statement_timeout = 0;
-SET lock_timeout = 0;
-SET idle_in_transaction_session_timeout = 0;
-SET client_encoding = 'UTF8';
-SET standard_conforming_strings = on;
-SELECT pg_catalog.set_config('search_path', '', false);
+
+--
+-- Name: TABLE answer; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.answer TO tupaia_read;
+
+
+--
+-- Name: TABLE api_client; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.api_client TO tupaia_read;
+
+
+--
+-- Name: TABLE api_request_log; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.api_request_log TO tupaia_read;
+
+
+--
+-- Name: TABLE clinic; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.clinic TO tupaia_read;
+
+
+--
+-- Name: TABLE comment; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.comment TO tupaia_read;
+
+
+--
+-- Name: TABLE country; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.country TO tupaia_read;
+
+
+--
+-- Name: TABLE dashboard; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.dashboard TO tupaia_read;
+
+
+--
+-- Name: TABLE dashboard_item; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.dashboard_item TO tupaia_read;
+
+
+--
+-- Name: TABLE dashboard_mailing_list; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.dashboard_mailing_list TO tupaia_read;
+
+
+--
+-- Name: TABLE dashboard_mailing_list_entry; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.dashboard_mailing_list_entry TO tupaia_read;
+
+
+--
+-- Name: TABLE dashboard_relation; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.dashboard_relation TO tupaia_read;
+
+
+--
+-- Name: TABLE data_element; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.data_element TO tupaia_read;
+
+
+--
+-- Name: TABLE data_element_data_group; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.data_element_data_group TO tupaia_read;
+
+
+--
+-- Name: TABLE data_element_data_service; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.data_element_data_service TO tupaia_read;
+
+
+--
+-- Name: TABLE data_group; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.data_group TO tupaia_read;
+
+
+--
+-- Name: TABLE data_service_entity; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.data_service_entity TO tupaia_read;
+
+
+--
+-- Name: TABLE data_service_sync_group; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.data_service_sync_group TO tupaia_read;
+
+
+--
+-- Name: TABLE data_table; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.data_table TO tupaia_read;
+
+
+--
+-- Name: TABLE datatrak_session; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.datatrak_session TO tupaia_read;
+
+
+--
+-- Name: TABLE dhis_instance; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.dhis_instance TO tupaia_read;
+
+
+--
+-- Name: TABLE dhis_sync_log; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.dhis_sync_log TO tupaia_read;
+
+
+--
+-- Name: TABLE dhis_sync_queue; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.dhis_sync_queue TO tupaia_read;
+
+
+--
+-- Name: TABLE entity; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.entity TO tupaia_read;
+
+
+--
+-- Name: TABLE entity_hierarchy; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.entity_hierarchy TO tupaia_read;
+
+
+--
+-- Name: TABLE entity_relation; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.entity_relation TO tupaia_read;
+
+
+--
+-- Name: TABLE error_log; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.error_log TO tupaia_read;
+
+
+--
+-- Name: TABLE external_database_connection; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.external_database_connection TO tupaia_read;
+
+
+--
+-- Name: TABLE feed_item; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.feed_item TO tupaia_read;
+
+
+--
+-- Name: TABLE geographical_area; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.geographical_area TO tupaia_read;
+
+
+--
+-- Name: TABLE indicator; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.indicator TO tupaia_read;
+
+
+--
+-- Name: TABLE landing_page; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.landing_page TO tupaia_read;
+
+
+--
+-- Name: TABLE legacy_report; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.legacy_report TO tupaia_read;
+
+
+--
+-- Name: TABLE lesmis_session; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.lesmis_session TO tupaia_read;
+
+
+--
+-- Name: TABLE map_overlay; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.map_overlay TO tupaia_read;
+
+
+--
+-- Name: TABLE map_overlay_group; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.map_overlay_group TO tupaia_read;
+
+
+--
+-- Name: TABLE map_overlay_group_relation; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.map_overlay_group_relation TO tupaia_read;
+
+
+--
+-- Name: TABLE meditrak_device; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.meditrak_device TO tupaia_read;
+
+
+--
+-- Name: TABLE meditrak_sync_queue; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.meditrak_sync_queue TO tupaia_read;
+
+
+--
+-- Name: TABLE migrations; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.migrations TO tupaia_read;
+
+
+--
+-- Name: TABLE ms1_sync_log; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.ms1_sync_log TO tupaia_read;
+
+
+--
+-- Name: TABLE ms1_sync_queue; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.ms1_sync_queue TO tupaia_read;
+
+
+--
+-- Name: TABLE one_time_login; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.one_time_login TO tupaia_read;
+
+
+--
+-- Name: TABLE option; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.option TO tupaia_read;
+
+
+--
+-- Name: TABLE option_set; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.option_set TO tupaia_read;
+
+
+--
+-- Name: TABLE permission_group; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.permission_group TO tupaia_read;
+
+
+--
+-- Name: TABLE project; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.project TO tupaia_read;
+
+
+--
+-- Name: TABLE psss_session; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.psss_session TO tupaia_read;
+
+
+--
+-- Name: TABLE question; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.question TO tupaia_read;
+
+
+--
+-- Name: TABLE refresh_token; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.refresh_token TO tupaia_read;
+
+
+--
+-- Name: TABLE report; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.report TO tupaia_read;
+
+
+--
+-- Name: TABLE setting; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.setting TO tupaia_read;
+
+
+--
+-- Name: TABLE superset_instance; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.superset_instance TO tupaia_read;
+
+
+--
+-- Name: TABLE survey; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.survey TO tupaia_read;
+
+
+--
+-- Name: TABLE survey_group; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.survey_group TO tupaia_read;
+
+
+--
+-- Name: TABLE survey_response; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.survey_response TO tupaia_read;
+
+
+--
+-- Name: TABLE survey_response_comment; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.survey_response_comment TO tupaia_read;
+
+
+--
+-- Name: TABLE survey_screen; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.survey_screen TO tupaia_read;
+
+
+--
+-- Name: TABLE survey_screen_component; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.survey_screen_component TO tupaia_read;
+
+
+--
+-- Name: TABLE sync_group_log; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.sync_group_log TO tupaia_read;
+
+
+--
+-- Name: TABLE tupaia_web_session; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.tupaia_web_session TO tupaia_read;
+
+
+--
+-- Name: TABLE "userSession"; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public."userSession" TO tupaia_read;
+
+
+--
+-- Name: TABLE user_account; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.user_account TO tupaia_read;
+
+
+--
+-- Name: TABLE user_entity_permission; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.user_entity_permission TO tupaia_read;
+
+
+--
+-- Name: TABLE user_favourite_dashboard_item; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.user_favourite_dashboard_item TO tupaia_read;
+
+
+--
+-- Name: TABLE permissions_based_meditrak_sync_queue; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.permissions_based_meditrak_sync_queue TO tupaia_read;
+
+
+--
+-- Name: DEFAULT PRIVILEGES FOR TABLES; Type: DEFAULT ACL; Schema: public; Owner: -
+--
+
+ALTER DEFAULT PRIVILEGES FOR ROLE tupaia IN SCHEMA public GRANT SELECT ON TABLES  TO tupaia_read;
+
+
+--
+-- PostgreSQL database dump complete
+--
+
+--
+-- PostgreSQL database dump
+--
+
+-- Dumped from database version 13.13
+-- Dumped by pg_dump version 14.11 (Ubuntu 14.11-0ubuntu0.22.04.1)
+
+SET statement_timeout = 0;
+SET lock_timeout = 0;
+SET idle_in_transaction_session_timeout = 0;
+SET client_encoding = 'UTF8';
+SET standard_conforming_strings = on;
+SELECT pg_catalog.set_config('search_path', '', false);
 SET check_function_bodies = false;
 SET xmloption = content;
 SET client_min_messages = warning;
@@ -5440,21 +6045,70 @@ COPY public.migrations (id, name, run_on) FROM stdin;
 1555	/20230116004255-AddPermissionGroupColumnToDashboardItems-modifies-data	2023-02-14 00:20:56.161
 1556	/20230119053753-ConvertInternalDataTablesToTheirOwnTypes-modifies-schema	2023-02-14 00:20:58.597
 1557	/20221002042508-AddSqlDataTableType-modifies-schema	2023-02-16 13:58:55.864336
-1558	/20230214033100-ChangeConstraintOnTypeAndPermissionGroupsInDataTable-modifies-schema	2023-04-13 14:08:46.011
-1559	/20230216140701-MoveFetchIntoTransformInReports-modifies-data	2023-04-13 14:09:18.031
-1560	/20230216141720-ConvertReportsToPullFromDataTables-modifies-schema	2023-04-13 14:09:49.522
-1561	/20230217031100-AddNewDataTableTypes-modifies-schema	2023-04-13 14:10:00.428
-1562	/20230219232553-AddMetadataInDataTable-modifies-data	2023-04-13 14:10:00.645
-1563	/20230222233428-RewriteVizsUsedDataElementCodeToName-modifies-schema	2023-04-13 14:10:02.728
-1564	/20230314005038-RewriteWishFijiBaselineVizesWithOrgUnitContext-modifies-data	2023-04-13 14:10:03.256
-1565	/20230314042110-MigrateInsertNumberOfFacilitiesColumn-modifies-data	2023-04-13 14:10:04.073
-1566	/20230316041331-RewriteWishFijiMatrixReports-modifies-data	2023-04-13 14:10:04.457
-1567	/20230316061147-RewriteWishFijiMatrixReportsWithMultiDataElements-modifies-data	2023-04-13 14:10:04.717
-1568	/20230320011713-ConvertOrgUnitCodeToNameMatrixReports-modifies-data	2023-04-13 14:10:06.267
-1569	/20230321045049-AddEntityAttributesDataTableType-modifies-schema	2023-04-13 14:10:06.56
-1570	/20230328002338-FixDateOffsetVizes-modifies-data	2023-04-13 14:10:07.118
-1571	/20230402232608-AddEntityAttributesDataTable-modifies-data	2023-04-13 14:10:07.319
-1572	/20230413041856-FixupDropAnalyticsLogTablesFunction-modifies-schema	2023-04-13 14:20:27.99
+1558	/20230214033100-ChangeConstraintOnTypeAndPermissionGroupsInDataTable-modifies-schema	2023-04-13 02:01:13.311
+1559	/20230216140701-MoveFetchIntoTransformInReports-modifies-data	2023-04-13 02:01:26.049
+1560	/20230216141720-ConvertReportsToPullFromDataTables-modifies-schema	2023-04-13 02:01:28.794
+1561	/20230217031100-AddNewDataTableTypes-modifies-schema	2023-04-13 02:01:28.848
+1562	/20230219232553-AddMetadataInDataTable-modifies-data	2023-04-13 02:01:30.542
+1563	/20230222233428-RewriteVizsUsedDataElementCodeToName-modifies-schema	2023-04-13 02:01:36.167
+1564	/20230314005038-RewriteWishFijiBaselineVizesWithOrgUnitContext-modifies-data	2023-04-13 02:01:37.835
+1565	/20230314042110-MigrateInsertNumberOfFacilitiesColumn-modifies-data	2023-04-13 02:01:38.669
+1566	/20230316041331-RewriteWishFijiMatrixReports-modifies-data	2023-04-13 02:01:38.882
+1567	/20230316061147-RewriteWishFijiMatrixReportsWithMultiDataElements-modifies-data	2023-04-13 02:01:38.997
+1568	/20230320011713-ConvertOrgUnitCodeToNameMatrixReports-modifies-data	2023-04-13 02:01:39.722
+1569	/20230321045049-AddEntityAttributesDataTableType-modifies-schema	2023-04-13 02:01:40.867
+1570	/20230328002338-FixDateOffsetVizes-modifies-data	2023-04-13 02:01:41.753
+1571	/20230402232608-AddEntityAttributesDataTable-modifies-data	2023-04-13 02:01:41.852
+1572	/20230413041856-FixupDropAnalyticsLogTablesFunction-modifies-schema	2023-04-27 05:53:55.465
+1573	/20230430221850-AddTablesForLandingPages-modifies-schema	2023-06-13 01:04:10.31
+1574	/20230522070125-AddQuestionTypeEnum-modifies-schema	2023-06-13 01:04:22.852
+1575	/20230529002449-AddFileQuestionType-modifies-schema	2023-06-13 01:04:23.09
+1576	/20230517233806-addTupaiaWebSessionTable-modifies-schema	2023-08-01 06:34:59.237
+1577	/20230822035858-AddDataTrakSessionTable-modifies-schema	2023-09-26 06:23:52.645
+1578	/20230831023940-AddFarmEntityType-modifies-schema	2023-09-26 06:23:53.734
+1579	/20230831024740-UpdatePalauAgricultureHierarchy-modifies-data	2023-09-26 06:23:57.445
+1580	/20230915002216-DropMeditrakSyncQueueChangeTimeTrigger-modifies-schema	2023-09-26 06:24:00.874
+1581	/20230919051240-AddRepairRequestEntityType-modifies-schema	2023-09-26 06:24:01.234
+1582	/20230827220641-ConvertEntityScreenComponentConfig-modifies-data	2023-10-12 06:39:00.724
+1583	/20230904033341-AddProjectToUserAccount-modifies-schema	2023-10-24 01:27:57.447
+1584	/20230925004700-AddPreferencesToUserAccount-modifies-schema	2023-10-24 01:27:58.837
+1585	/20231012204228-DetachTimorLesteFromEntityHierarchies-modifies-data	2023-10-24 01:27:59.625
+1586	/20231012222503-DeleteLaosEOCAndCOVIDAuProjects-modifies-data	2023-10-24 01:28:03.858
+1587	/20231026042714-AddSurveyResponsesDataTableType-modifies-schema	2023-11-07 00:58:41.091
+1588	/20231026043557-AddSurveyResponsesDataTable-modifies-data	2023-11-07 00:58:41.984
+1589	/20231027053345-AddDashboardMailingListTable-modifies-schema	2023-11-21 04:37:13.775
+1590	/20231112212117-AddProjectIdToSurveys-modifies-schema	2023-11-23 20:56:13.69
+1591	/20231119225952-AddNewSurveyProjects-modifies-data	2023-12-07 01:35:55.988
+1592	/20231119234449-AddProjectIdToSurveys-modifies-data	2023-12-07 01:35:56.814
+1593	/20231120003955-CreateDuplicateSurveys-modifies-data	2023-12-07 01:36:00.222
+1594	/20231123022242-AddEmailAdminPermissionGroupsToDashboardMailingList-modifies-schema	2023-12-20 03:58:46.262
+1595	/20231204032614-MakeEntityTypeNotNull-modifies-schema	2023-12-20 03:58:47.81
+1596	/20231214020916-ResetIncorrectDefaultMeasureCodes-modifies-data	2023-12-20 03:58:49.574
+1597	/20240108015220-UpdateSurveyProjectIdToBeNonNullable-modifies-schema	2024-01-16 00:39:45.84
+1598	/20231211002514-MakeRelatedEntityCreateQuestionsMandatory-modifies-data	2024-01-29 23:54:20.835
+1599	/20240110031515-AddDatatrakToPrimaryPlatformEnum-modifies-schema	2024-02-13 03:58:27.39
+1600	/20240122235629-EnforceNotNullOnUserEntityPermissionFKEYs-modifies-schema	2024-02-13 03:58:33.288
+1601	/20240131203140-AddBusinessEntityTypeNauru-modifies-schema	2024-02-13 03:58:33.806
+1602	/20240213004001-GrantLESMISAdminUsersTupaiaAdminPanelAccess-modifies-data	2024-02-13 03:58:36.72
+1603	/20240111020232-AddForeignKeyConstraintToReportCode-modifies-schema	2024-02-26 22:08:57.74
+1604	/20240211183452-AddDashboardAttributesFilter-modifies-schema	2024-03-12 01:01:43.493
+1605	/20240226202900-MigrateDisplayOnEntityConditionsToEntityAttributeFilters-modifies-data	2024-03-12 01:01:53.266
+1606	/20240303205520-AddEntityAttributesFilterToMapOverlaysTable-modifies-schema	2024-03-12 01:01:53.409
+1607	/20240305204428-ChangeNestedDelimiterReportConfigs-modifies-data	2024-03-12 01:01:58.767
+1608	/20240213024728-AddReportLatestDataParametersColumn-modifies-schema	2024-03-26 03:33:41.277
+1609	/20240312004705-SplitPieChartPresentationOptionsIntoDynamicAndStaticObjects-modifies-data	2024-03-26 03:33:52.523
+1610	/20240314004136-SetEntityAttributesNonNullable-modifies-schema	2024-03-26 03:33:54.241
+1611	/20240319010222-RemoveDisasterTables-modifies-schema	2024-03-26 03:33:56.338
+1612	/20240319010415-RemoveDisasterDashboards-modifies-data	2024-03-26 03:34:06.142
+1613	/20240319014555-RemoveDisasterEntities-modifies-data	2024-03-26 03:34:27.231
+1614	/20240320201246-AddEntityTypesHealthClinicBoundaryAndEnumerationArea-modifies-schema	2024-03-26 03:34:27.597
+1615	/20240320230959-RemoveDisasterPermissions-modifies-data	2024-03-26 03:34:27.885
+1616	/20240321045103-SetEntityMetadataNonNullable-modifies-schema	2024-03-26 03:39:00.945
+1617	/20240321062219-SetProjectPermissionGroupsNotNullable-modifies-schema	2024-03-26 03:39:03.392
+1618	/20240401222409-AddMaintenanceEntityType-modifies-schema	2024-04-14 21:40:26.11
+1619	/20240404003956-AddLarvalSampleEntityType-modifies-schema	2024-04-14 21:40:26.922
+1620	/20240404034101-SetProjectConfigNotNull-modifies-schema	2024-04-23 01:18:02.391
+1621	/20240418030017-AddTransferEntityType-modifies-schema	2024-04-23 01:18:03.214
 \.
 
 
@@ -5462,7 +6116,7 @@ COPY public.migrations (id, name, run_on) FROM stdin;
 -- Name: migrations_id_seq; Type: SEQUENCE SET; Schema: public; Owner: -
 --
 
-SELECT pg_catalog.setval('public.migrations_id_seq', 1572, true);
+SELECT pg_catalog.setval('public.migrations_id_seq', 1621, true);
 
 
 --
@@ -5473,6 +6127,11 @@ ALTER TABLE ONLY public.migrations
     ADD CONSTRAINT migrations_pkey PRIMARY KEY (id);
 
 
+--
+-- Name: TABLE migrations; Type: ACL; Schema: public; Owner: -
+--
+
+GRANT SELECT ON TABLE public.migrations TO tupaia_read;
 
 
 --
diff --git a/packages/database/scripts/setupNewDatabase.sh b/packages/database/scripts/setupNewDatabase.sh
new file mode 100755
index 0000000000..aa1e4791d0
--- /dev/null
+++ b/packages/database/scripts/setupNewDatabase.sh
@@ -0,0 +1,63 @@
+#!/bin/bash -e
+
+SCRIPT_DIR=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+cd "$SCRIPT_DIR/.."
+
+if [[ $1 != OK ]]; then
+  echo 'Note: this script reads .env vars'
+  echo '  Update DB_NAME etc... in database db.env'
+  echo 
+  echo 're-run with OK to continue'
+  exit 1;
+fi
+
+DIR=$(pwd "$0")
+source "$DIR/../../scripts/bash/mergeEnvForDB.sh" 
+
+# Set default port in case it wasn't in .env
+: "${DB_PORT:=5432}"
+
+set -x
+
+IS_RDS=$(PGPASSWORD="$DB_PG_PASSWORD" psql -qtAX -h "$DB_URL" -p "$DB_PORT" -U "$DB_PG_USER" -c "SELECT 1 FROM pg_roles WHERE rolname='rds_superuser'")
+
+PGPASSWORD="$DB_PG_PASSWORD" psql -h "$DB_URL" -p "$DB_PORT" -U "$DB_PG_USER" -c "CREATE ROLE $DB_USER LOGIN PASSWORD '$DB_PASSWORD'" || echo "Role $DB_USER already exists?"
+
+# Temporarily grant DB_USER superuser access, to allow installing postgis and importing the schema
+if [ "$IS_RDS" = "1" ]; then
+  PGPASSWORD="$DB_PG_PASSWORD" psql -h "$DB_URL" -p "$DB_PORT" -U "$DB_PG_USER" -c "GRANT rds_superuser TO $DB_USER"
+  PGPASSWORD="$DB_PG_PASSWORD" psql -h "$DB_URL" -p "$DB_PORT" -U "$DB_PG_USER" -c "GRANT $DB_USER TO postgres"
+else
+  PGPASSWORD="$DB_PG_PASSWORD" psql -h "$DB_URL" -p "$DB_PORT" -U "$DB_PG_USER" -c "ALTER USER $DB_USER WITH SUPERUSER"
+fi
+
+PGPASSWORD="$DB_PG_PASSWORD" psql -h "$DB_URL" -p "$DB_PORT" -U "$DB_PG_USER" -c "CREATE ROLE tupaia_read PASSWORD '$DB_PASSWORD'" || echo "Role tupaia_read already exists?"
+PGPASSWORD="$DB_PG_PASSWORD" psql -h "$DB_URL" -p "$DB_PORT" -U "$DB_PG_USER" -c "CREATE DATABASE $DB_NAME WITH OWNER $DB_USER"
+PGPASSWORD="$DB_PG_PASSWORD" psql -h "$DB_URL" -p "$DB_PORT" -U "$DB_PG_USER" "$DB_NAME" -c "CREATE EXTENSION IF NOT EXISTS postgis"
+PGPASSWORD=$DB_PASSWORD psql -h "$DB_URL" -p "$DB_PORT" -U "$DB_USER" -d "$DB_NAME" -f schema/schema.sql
+
+if [ "$IS_RDS" = "1" ]; then
+  PGPASSWORD="$DB_PG_PASSWORD" psql -h "$DB_URL" -p "$DB_PORT" -U "$DB_PG_USER" -c "REVOKE rds_superuser FROM $DB_USER"
+else
+  PGPASSWORD="$DB_PG_PASSWORD" psql -h "$DB_URL" -p "$DB_PORT" -U "$DB_PG_USER" -c "ALTER USER $DB_USER WITH NOSUPERUSER"
+fi
+
+set +x
+
+echo "Installing mvrefresh"
+DB_NAME="$DB_NAME" yarn workspace @tupaia/data-api install-mv-refresh
+echo "Patching mvrefresh"
+DB_NAME="$DB_NAME" yarn workspace @tupaia/data-api patch-mv-refresh up
+echo "Installing Analytics table"
+DB_NAME="$DB_NAME" yarn workspace @tupaia/data-api build-analytics-table
+
+echo "Deleting migrations that target data modifications, as there is no data to migrate in the new database"
+rm -rf ./src/migrations-backup
+mkdir  ./src/migrations-backup
+cp -r ./src/migrations/* ./src/migrations-backup/
+rm ./src/migrations/*modifies-data.js
+DB_NAME="$DB_NAME" yarn migrate
+cp -r ./src/migrations-backup/* ./src/migrations/
+rm -rf ./src/migrations-backup
+
+echo "Done"
\ No newline at end of file
diff --git a/packages/database/scripts/setupTestDatabase.sh b/packages/database/scripts/setupTestDatabase.sh
deleted file mode 100755
index b0cb07538c..0000000000
--- a/packages/database/scripts/setupTestDatabase.sh
+++ /dev/null
@@ -1,49 +0,0 @@
-#!/bin/bash -e
-
-DIR=$(pwd "$0")
-source "$DIR/../../scripts/bash/mergeEnvForDB.sh" 
-
-# Set default port in case it wasn't in .env
-: "${DB_PORT:=5432}"
-
-TUPAIA_USER_EXISTS=`PGPASSWORD=$DB_PG_PASSWORD psql -p $DB_PORT -X -A -h $DB_URL -U $DB_PG_USER -t -c "SELECT rolname FROM pg_catalog.pg_roles WHERE rolname = '$DB_USER'"`
-IS_RDS=`PGPASSWORD=$DB_PG_PASSWORD psql -p $DB_PORT -X -A -h $DB_URL -U $DB_PG_USER -t -c "SELECT rolname FROM pg_catalog.pg_roles WHERE rolname = 'rds_superuser'"`
-
-if [ -z "$TUPAIA_USER_EXISTS" ]; then
-    PGPASSWORD=$DB_PG_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_PG_USER -c "CREATE ROLE $DB_USER LOGIN SUPERUSER PASSWORD '$DB_PASSWORD'"
-fi
-
-PGPASSWORD=$DB_PG_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_PG_USER -c "DROP DATABASE IF EXISTS $DB_NAME"
-PGPASSWORD=$DB_PG_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_PG_USER -c "CREATE DATABASE $DB_NAME WITH OWNER $DB_USER"
-PGPASSWORD=$DB_PG_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_PG_USER -c "CREATE EXTENSION IF NOT EXISTS postgis"
-
-if [ -z "$IS_RDS" ]; then
-    PGPASSWORD=$DB_PG_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_PG_USER -c "ALTER USER $DB_USER WITH SUPERUSER"
-else
-    PGPASSWORD=$DB_PG_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_PG_USER -c "GRANT rds_superuser TO $DB_USER"
-fi
-
-PGPASSWORD=$DB_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_USER -d $DB_NAME -f ./src/__tests__/testData/testDataDump.sql
-
-if [ -z "$IS_RDS" ]; then
-    PGPASSWORD=$DB_PG_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_PG_USER -c "ALTER USER $DB_USER WITH NOSUPERUSER"
-else
-    PGPASSWORD=$DB_PG_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_PG_USER -c "REVOKE rds_superuser FROM $DB_USER"
-fi
-
-
-echo "Installing mvrefresh"
-DB_NAME=$DB_NAME yarn workspace @tupaia/data-api install-mv-refresh
-echo "Patching mvrefresh"
-DB_NAME=$DB_NAME yarn workspace @tupaia/data-api patch-mv-refresh up
-echo "Installing Analytics table"
-DB_NAME=$DB_NAME yarn workspace @tupaia/data-api build-analytics-table
-
-echo "Deleting migrations that target data modifications, as there is no data to migrate on the test database"
-rm -rf ./src/migrations-backup
-mkdir ./src/migrations-backup
-cp -r ./src/migrations/* ./src/migrations-backup/
-rm ./src/migrations/*modifies-data.js
-DB_NAME=$DB_NAME yarn migrate
-cp -r ./src/migrations-backup/* ./src/migrations/
-rm -rf ./src/migrations-backup
diff --git a/packages/database/scripts/updateSchema.sh b/packages/database/scripts/updateSchema.sh
new file mode 100755
index 0000000000..b65d7e943f
--- /dev/null
+++ b/packages/database/scripts/updateSchema.sh
@@ -0,0 +1,31 @@
+#!/bin/bash -e
+
+SCRIPT_DIR=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+cd "$SCRIPT_DIR"
+cd ..
+
+if [ "$1" != "OK" ]; then
+  echo "Warning, rebuild of analytics table will take a while, run with OK to proceed"
+  exit 1;
+fi
+
+set -x
+
+source "$SCRIPT_DIR/../../../scripts/bash/mergeEnvForDB.sh"
+
+# Set default port in case it wasn't in .env
+: "${DB_PORT:=5432}"
+
+# Drop materialized views and uninstall mv-refresh, as it is added after the base schema is set up
+yarn workspace @tupaia/data-api drop-analytics-table
+yarn workspace @tupaia/data-api uninstall-mv-refresh
+
+# Dump
+PGPASSWORD="$DB_PASSWORD" pg_dump -h "$DB_URL" -p "$DB_PORT" -U "$DB_USER" -O --schema public --exclude-table "$EXCLUDETABLE" -s "$DB_NAME" > "schema/schema.sql"
+PGPASSWORD="$DB_PASSWORD" pg_dump -h "$DB_URL" -p "$DB_PORT" -U "$DB_USER" -O --schema public --exclude-table "$EXCLUDETABLE" -c -t migrations "$DB_NAME" >> "schema/schema.sql"
+
+# Reinstall materialized views
+yarn workspace @tupaia/data-api install-mv-refresh
+yarn workspace @tupaia/data-api build-analytics-table
+
+echo "Done"
\ No newline at end of file
diff --git a/packages/devops/configs/nginx-template/https-config-non-ssl.snippet b/packages/devops/configs/nginx-template/https-config-non-ssl.snippet
new file mode 100644
index 0000000000..a3743fbab5
--- /dev/null
+++ b/packages/devops/configs/nginx-template/https-config-non-ssl.snippet
@@ -0,0 +1,4 @@
+  # Redirect to HTTPs when behind a proxy
+  if ($http_x_forwarded_proto = "http") {
+    return 301 https://$host$request_uri;
+  }
\ No newline at end of file
diff --git a/packages/devops/configs/nginx-template/https-config-ssl.snippet b/packages/devops/configs/nginx-template/https-config-ssl.snippet
new file mode 100644
index 0000000000..16a0b10f57
--- /dev/null
+++ b/packages/devops/configs/nginx-template/https-config-ssl.snippet
@@ -0,0 +1,11 @@
+  # Handle SSL certificate
+  ssl_certificate /etc/ssl/__DOMAIN__/fullchain.pem;
+  ssl_certificate_key /etc/ssl/__DOMAIN__/privkey.pem;
+  # It is *strongly* recommended to generate unique DH parameters
+  # Generate them with: openssl dhparam -out /etc/pki/nginx/dhparams.pem 2048
+  #ssl_dhparam "/etc/pki/nginx/dhparams.pem";
+  ssl_session_cache shared:SSL:1m;
+  ssl_session_timeout  10m;
+  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
+  ssl_ciphers HIGH:SEED:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!RSAPSK:!aDH:!aECDH:!EDH-DSS-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!SRP;
+  ssl_prefer_server_ciphers on;
\ No newline at end of file
diff --git a/packages/devops/configs/servers.conf b/packages/devops/configs/nginx-template/servers.template.conf
similarity index 74%
rename from packages/devops/configs/servers.conf
rename to packages/devops/configs/nginx-template/servers.template.conf
index d28026daa1..d1345630b8 100644
--- a/packages/devops/configs/servers.conf
+++ b/packages/devops/configs/nginx-template/servers.template.conf
@@ -1,14 +1,17 @@
+server_names_hash_bucket_size 128;
+
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*admin\.tupaia\.org$;
-  root         /home/ubuntu/tupaia/packages/admin-panel/dist;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__tupaia-web.__DOMAIN__;
+  root         /home/ubuntu/tupaia/packages/tupaia-web/dist;
+
+  # serve gzip files if they are available
+  gzip_static on;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -19,6 +22,11 @@ server {
     expires 0;
   }
 
+  location /healthcheck {
+    add_header 'Content-Type' 'text/html';
+    return 200 'HEALTHY';
+  }
+
   # Redirect error pages
   #
   error_page 404 500 502 503 504 /error_page.html;
@@ -26,19 +34,17 @@ server {
         root /home/ubuntu/tupaia;
         internal;
   }
-
 }
+
+
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*psss\.tupaia\.org$;
-  root         /home/ubuntu/tupaia/packages/psss/dist;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__admin.__DOMAIN__;
+  root         /home/ubuntu/tupaia/packages/admin-panel/dist;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -60,18 +66,12 @@ server {
 }
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*datatrak\.tupaia\.org$;
-  root         /home/ubuntu/tupaia/packages/datatrak-web/dist;
-
-  # serve gzip files if they are available
-  gzip_static on;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__psss.__DOMAIN__;
+  root         /home/ubuntu/tupaia/packages/psss/dist;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -93,32 +93,24 @@ server {
 }
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*psss-api\.tupaia\.org$;
-  root         /usr/share/nginx/html;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__datatrak.__DOMAIN__;
+  root         /home/ubuntu/tupaia/packages/datatrak-web/dist;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  # serve gzip files if they are available
+  gzip_static on;
+
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
   include /etc/nginx/h5bp/basic.conf;
 
   location / {
-              proxy_pass http://localhost:8040;
-              proxy_set_header Host $host;
-              proxy_set_header X-Real-IP $remote_addr;
-              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-              proxy_connect_timeout 150;
-              proxy_send_timeout 100;
-              proxy_read_timeout 100;
-              proxy_buffers 4 32k;
-              client_max_body_size 50m;
-              client_body_buffer_size 128k;
-      }
+    try_files '' /index.html =404;
+    expires 0;
+  }
 
   # Redirect error pages
   #
@@ -131,24 +123,29 @@ server {
 }
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*lesmis\.tupaia\.org$;
-  root         /home/ubuntu/tupaia/packages/lesmis/dist;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__psss-api.__DOMAIN__;
+  root         /usr/share/nginx/html;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
   include /etc/nginx/h5bp/basic.conf;
 
   location / {
-    try_files '' /index.html =404;
-    expires 0;
-  }
+              proxy_pass http://localhost:8040;
+              proxy_set_header Host $host;
+              proxy_set_header X-Real-IP $remote_addr;
+              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+              proxy_connect_timeout 150;
+              proxy_send_timeout 100;
+              proxy_read_timeout 100;
+              proxy_buffers 4 32k;
+              client_max_body_size 50m;
+              client_body_buffer_size 128k;
+      }
 
   # Redirect error pages
   #
@@ -161,15 +158,12 @@ server {
 }
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  www.lesmis.la lesmis.la;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__lesmis.__DOMAIN__;
   root         /home/ubuntu/tupaia/packages/lesmis/dist;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -191,15 +185,12 @@ server {
 }
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  api.lesmis.la ~^.*lesmis-api\.tupaia\.org$;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__lesmis-api.__DOMAIN__;
   root         /usr/share/nginx/html;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -229,15 +220,12 @@ server {
 }
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*meditrak-api\.tupaia\.org$;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__meditrak-api.__DOMAIN__;
   root         /usr/share/nginx/html;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -267,15 +255,12 @@ server {
 }
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  admin-api.lesmis.la ~^.*admin-api\.tupaia\.org$;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__admin-api.__DOMAIN__;
   root         /usr/share/nginx/html;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -305,15 +290,12 @@ server {
 }
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*report-api\.tupaia\.org$;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__report-api.__DOMAIN__;
   root         /usr/share/nginx/html;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -343,15 +325,12 @@ server {
 }
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*entity-api\.tupaia\.org$;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__entity-api.__DOMAIN__;
   root         /usr/share/nginx/html;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -382,15 +361,12 @@ server {
 
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*data-table-api\.tupaia\.org$;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__data-table-api.__DOMAIN__;
   root         /usr/share/nginx/html;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -420,9 +396,9 @@ server {
 }
 
 server {
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*tupaia-web-api\.tupaia\.org$;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__tupaia-web-api.__DOMAIN__;
   root         /usr/share/nginx/html;
 
   gzip on;
@@ -430,10 +406,7 @@ server {
   gzip_proxied no-cache no-store private expired auth;
   gzip_min_length 10000;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -464,9 +437,9 @@ server {
 
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*datatrak-web-api\.tupaia\.org$;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__datatrak-web-api.__DOMAIN__;
   root         /usr/share/nginx/html;
 
   gzip on;
@@ -474,10 +447,7 @@ server {
   gzip_proxied no-cache no-store private expired auth;
   gzip_min_length 10000;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -508,15 +478,12 @@ server {
 
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*api\.tupaia\.org$;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__api.__DOMAIN__;
   root         /usr/share/nginx/html;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -547,15 +514,12 @@ server {
 }
 server {
 
-  listen       80;
-  listen       [::]:80;
-  server_name  ~^.*config\.tupaia\.org$;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __SUBDOMAIN_PREFIX__config.__DOMAIN__;
   root         /usr/share/nginx/html;
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
+  __HTTPS_CONFIG__
 
   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;
@@ -592,41 +556,15 @@ server {
   }
 
 }
-server {
-
-  listen       80;
-  listen       [::]:80;
-  server_name  tupaia.org www.tupaia.org ~^(?<subdomain>((?!^www).)+)\.tupaia\.org$ ~^.*mobile\.tupaia\.org$;
-  root         /home/ubuntu/tupaia/packages/tupaia-web/dist;
-
-  # serve gzip files if they are available
-  gzip_static on;
 
+server {
+  # Redirect traffic to the domain to the default frontend
 
-  # Redirect to HTTPs when behind a proxy
-  if ($http_x_forwarded_proto = "http") {
-    return 301 https://$host$request_uri;
-  }
-
-  # Load configuration files for the default server block.
-  include /etc/nginx/default.d/*.conf;
-  include /etc/nginx/h5bp/basic.conf;
+  listen       __PORT__;
+  listen       [::]:__PORT__;
+  server_name  __DOMAIN_PREFIX____DOMAIN__;
 
   location / {
-    try_files '' /index.html =404;
-    expires 0;
-  }
-
-  location /healthcheck {
-    add_header 'Content-Type' 'text/html';
-    return 200 'HEALTHY';
-  }
-
-  # Redirect error pages
-  #
-  error_page 404 500 502 503 504 /error_page.html;
-      location = /error_page.html {
-        root /home/ubuntu/tupaia;
-        internal;
+    proxy_pass https://__SUBDOMAIN_PREFIX____DEFAULT_FRONTEND__.__DOMAIN__;
   }
 }
diff --git a/packages/devops/configs/vm-app/.bash_profile b/packages/devops/configs/vm-app/.bash_profile
new file mode 100644
index 0000000000..e0f8d09b95
--- /dev/null
+++ b/packages/devops/configs/vm-app/.bash_profile
@@ -0,0 +1,4 @@
+# Consolidate everything in .bashrc
+if [ -f $HOME/.bashrc ]; then
+  source $HOME/.bashrc
+fi
diff --git a/packages/devops/configs/vm-app/.bashrc b/packages/devops/configs/vm-app/.bashrc
new file mode 100644
index 0000000000..214bc05068
--- /dev/null
+++ b/packages/devops/configs/vm-app/.bashrc
@@ -0,0 +1,126 @@
+# ~/.bashrc: executed by bash(1) for non-login shells.
+# see /usr/share/doc/bash/examples/startup-files (in the package bash-doc)
+# for examples
+
+# If not running interactively, don't do anything
+#case $- in
+#    *i*) ;;
+#      *) return;;
+#esac
+
+# don't put duplicate lines or lines starting with space in the history.
+# See bash(1) for more options
+HISTCONTROL=ignoreboth
+
+# append to the history file, don't overwrite it
+shopt -s histappend
+
+# for setting history length see HISTSIZE and HISTFILESIZE in bash(1)
+HISTSIZE=1000
+HISTFILESIZE=2000
+
+# check the window size after each command and, if necessary,
+# update the values of LINES and COLUMNS.
+shopt -s checkwinsize
+
+# If set, the pattern "**" used in a pathname expansion context will
+# match all files and zero or more directories and subdirectories.
+#shopt -s globstar
+
+# make less more friendly for non-text input files, see lesspipe(1)
+[ -x /usr/bin/lesspipe ] && eval "$(SHELL=/bin/sh lesspipe)"
+
+# set variable identifying the chroot you work in (used in the prompt below)
+if [ -z "${debian_chroot:-}" ] && [ -r /etc/debian_chroot ]; then
+    debian_chroot=$(cat /etc/debian_chroot)
+fi
+
+# set a fancy prompt (non-color, unless we know we "want" color)
+case "$TERM" in
+    xterm-color|*-256color) color_prompt=yes;;
+esac
+
+# uncomment for a colored prompt, if the terminal has the capability; turned
+# off by default to not distract the user: the focus in a terminal window
+# should be on the output of commands, not on the prompt
+#force_color_prompt=yes
+
+if [ -n "$force_color_prompt" ]; then
+    if [ -x /usr/bin/tput ] && tput setaf 1 >&/dev/null; then
+	# We have color support; assume it's compliant with Ecma-48
+	# (ISO/IEC-6429). (Lack of such support is extremely rare, and such
+	# a case would tend to support setf rather than setaf.)
+	color_prompt=yes
+    else
+	color_prompt=
+    fi
+fi
+
+if [ "$color_prompt" = yes ]; then
+    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ '
+else
+    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w\$ '
+fi
+unset color_prompt force_color_prompt
+
+# If this is an xterm set the title to user@host:dir
+case "$TERM" in
+xterm*|rxvt*)
+    PS1="\[\e]0;${debian_chroot:+($debian_chroot)}\u@\h: \w\a\]$PS1"
+    ;;
+*)
+    ;;
+esac
+
+# enable color support of ls and also add handy aliases
+if [ -x /usr/bin/dircolors ]; then
+    test -r ~/.dircolors && eval "$(dircolors -b ~/.dircolors)" || eval "$(dircolors -b)"
+    alias ls='ls --color=auto'
+    #alias dir='dir --color=auto'
+    #alias vdir='vdir --color=auto'
+
+    alias grep='grep --color=auto'
+    alias fgrep='fgrep --color=auto'
+    alias egrep='egrep --color=auto'
+fi
+
+# colored GCC warnings and errors
+#export GCC_COLORS='error=01;31:warning=01;35:note=01;36:caret=01;32:locus=01:quote=01'
+
+# some more ls aliases
+alias ll='ls -alF'
+alias la='ls -A'
+alias l='ls -CF'
+
+# Add an "alert" alias for long running commands.  Use like so:
+#   sleep 10; alert
+alias alert='notify-send --urgency=low -i "$([ $? = 0 ] && echo terminal || echo error)" "$(history|tail -n1|sed -e '\''s/^\s*[0-9]\+\s*//;s/[;&|]\s*alert$//'\'')"'
+
+# Alias definitions.
+# You may want to put all your additions into a separate file like
+# ~/.bash_aliases, instead of adding them here directly.
+# See /usr/share/doc/bash-doc/examples in the bash-doc package.
+
+if [ -f ~/.bash_aliases ]; then
+    . ~/.bash_aliases
+fi
+
+# enable programmable completion features (you don't need to enable
+# this, if it's already enabled in /etc/bash.bashrc and /etc/profile
+# sources /etc/bash.bashrc).
+if ! shopt -oq posix; then
+  if [ -f /usr/share/bash-completion/bash_completion ]; then
+    . /usr/share/bash-completion/bash_completion
+  elif [ -f /etc/bash_completion ]; then
+    . /etc/bash_completion
+  fi
+fi
+
+# Load env vars needed for Tupaia
+set -o allexport
+source /home/ubuntu/.env
+set +o allexport
+
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
+[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
\ No newline at end of file
diff --git a/packages/devops/configs/vm-app/.env.example b/packages/devops/configs/vm-app/.env.example
new file mode 100644
index 0000000000..48914c6d75
--- /dev/null
+++ b/packages/devops/configs/vm-app/.env.example
@@ -0,0 +1,6 @@
+DOMAIN=tupaia.org
+BITWARDEN_EMAIL=
+BITWARDEN_PASSWORD=
+GIT_REPO=https://github.com/beyondessential/tupaia.git
+GIT_BRANCH=dev
+DEPLOYMENT_NAME=dev
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment/buildDeployablePackages.sh b/packages/devops/scripts/deployment-aws/buildDeployablePackages.sh
similarity index 100%
rename from packages/devops/scripts/deployment/buildDeployablePackages.sh
rename to packages/devops/scripts/deployment-aws/buildDeployablePackages.sh
diff --git a/packages/devops/scripts/deployment/checkoutLatest.sh b/packages/devops/scripts/deployment-aws/checkoutLatest.sh
similarity index 100%
rename from packages/devops/scripts/deployment/checkoutLatest.sh
rename to packages/devops/scripts/deployment-aws/checkoutLatest.sh
diff --git a/packages/devops/scripts/deployment/cloudwatchConfig.json b/packages/devops/scripts/deployment-aws/cloudwatchConfig.json
similarity index 100%
rename from packages/devops/scripts/deployment/cloudwatchConfig.json
rename to packages/devops/scripts/deployment-aws/cloudwatchConfig.json
diff --git a/packages/devops/scripts/deployment/configureNginx.sh b/packages/devops/scripts/deployment-aws/configureNginx.sh
similarity index 62%
rename from packages/devops/scripts/deployment/configureNginx.sh
rename to packages/devops/scripts/deployment-aws/configureNginx.sh
index af37cb6a89..41d6d8a843 100755
--- a/packages/devops/scripts/deployment/configureNginx.sh
+++ b/packages/devops/scripts/deployment-aws/configureNginx.sh
@@ -7,8 +7,10 @@ TUPAIA_DIR=$DIR/../../../..
 service nginx stop
 
 # Copy servers.conf to proper nginx location
-cp ${TUPAIA_DIR}/packages/devops/configs/nginx.conf /etc/nginx/nginx.conf
-cp ${TUPAIA_DIR}/packages/devops/configs/servers.conf /etc/nginx/conf.d/servers.conf
+export DEFAULT_FRONTEND=tupaia-web
+export DOMAIN=tupaia.org
+export USE_SSL=false
+"$TUPAIA_DIR/packages/devops/scripts/deployment-common/configureNginx.sh"
 
 cp ${TUPAIA_DIR}/packages/devops/misc/error_page.html ${TUPAIA_DIR}/error_page.html
 
diff --git a/packages/devops/scripts/deployment-aws/downloadFromS3.sh b/packages/devops/scripts/deployment-aws/downloadFromS3.sh
new file mode 100755
index 0000000000..d6825dc5d3
--- /dev/null
+++ b/packages/devops/scripts/deployment-aws/downloadFromS3.sh
@@ -0,0 +1,5 @@
+#!/bin/bash -le
+
+FILE_URI="s3://$1"
+DESTINATION=$2
+aws s3 cp $FILE_URI $DESTINATION
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment/fetchParameterStoreValue.sh b/packages/devops/scripts/deployment-aws/fetchParameterStoreValue.sh
similarity index 100%
rename from packages/devops/scripts/deployment/fetchParameterStoreValue.sh
rename to packages/devops/scripts/deployment-aws/fetchParameterStoreValue.sh
diff --git a/packages/devops/scripts/deployment-aws/setupGoldMaster.sh b/packages/devops/scripts/deployment-aws/setupGoldMaster.sh
new file mode 100755
index 0000000000..644793a087
--- /dev/null
+++ b/packages/devops/scripts/deployment-aws/setupGoldMaster.sh
@@ -0,0 +1,10 @@
+#!/bin/bash -le
+
+# This script is used by Amazon Image Builder to pre-bake a Tupaia AMI
+# To deploy changes, upload the latest to the S3 bucket "tupaia_devops"
+
+# clone our repo
+cd /home/ubuntu
+sudo -Hu ubuntu git clone https://github.com/beyondessential/tupaia.git
+
+sudo -Hu ubuntu /home/ubuntu/tupaia/packages/devops/scripts/deployment-common/setup.sh
diff --git a/packages/devops/scripts/deployment-aws/setupSslCertificate.sh b/packages/devops/scripts/deployment-aws/setupSslCertificate.sh
new file mode 100755
index 0000000000..372498b34c
--- /dev/null
+++ b/packages/devops/scripts/deployment-aws/setupSslCertificate.sh
@@ -0,0 +1,38 @@
+#!/bin/bash -e
+
+HOME_DIR=/home/ubuntu
+
+DEPLOYMENT_NAME=$1
+DOMAIN=$2
+SUBDOMAINS=$3
+
+if [[ $DEPLOYMENT_NAME == "production" ]]; then
+  DOMAIN_PREFIX=""
+  SUBDOMAIN_PREFIX=""
+else
+  DOMAIN_PREFIX="$DEPLOYMENT_NAME."
+  SUBDOMAIN_PREFIX="$DEPLOYMENT_NAME-"
+fi
+
+cd $HOME_DIR
+
+sudo snap install lego
+
+LEGO_COMMAND="sudo lego --email=\"tupaia@$DOMAIN_PREFIX$DOMAIN\" -d $DOMAIN_PREFIX$DOMAIN"
+
+# Certificate must have all subdomains registered
+for SUBDOMAIN in ${SUBDOMAINS//,/ }
+do
+    LEGO_COMMAND="$LEGO_COMMAND -d $SUBDOMAIN_PREFIX$SUBDOMAIN.$DOMAIN"
+done
+
+LEGO_COMMAND="$LEGO_COMMAND --http run"
+
+echo "Running: $LEGO_COMMAND"
+
+# Prompt may require Yes
+eval "yes | $LEGO_COMMAND"
+
+sudo mkdir /etc/ssl/tupaia.org
+sudo cp /var/snap/lego/common/.lego/certificates/$DOMAIN_PREFIX$DOMAIN.crt /etc/ssl/tupaia.org/fullchain.pem
+sudo cp /var/snap/lego/common/.lego/certificates/$DOMAIN_PREFIX$DOMAIN.key /etc/ssl/tupaia.org/privkey.pem
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment/startCloudwatchAgent.sh b/packages/devops/scripts/deployment-aws/startCloudwatchAgent.sh
similarity index 100%
rename from packages/devops/scripts/deployment/startCloudwatchAgent.sh
rename to packages/devops/scripts/deployment-aws/startCloudwatchAgent.sh
diff --git a/packages/devops/scripts/deployment-common/configureNginx.sh b/packages/devops/scripts/deployment-common/configureNginx.sh
new file mode 100755
index 0000000000..c26bc07eb3
--- /dev/null
+++ b/packages/devops/scripts/deployment-common/configureNginx.sh
@@ -0,0 +1,38 @@
+#!/bin/bash -le
+
+HOME_DIR=/home/ubuntu
+CONFIG_DIR=$HOME_DIR/tupaia/packages/devops/configs
+TEMPLATE_DIR=$CONFIG_DIR/nginx-template
+
+# configure nginx
+if [[ $DEPLOYMENT_NAME == "production" ]]; then
+  DOMAIN_PREFIX=""
+  SUBDOMAIN_PREFIX=""
+else
+  DOMAIN_PREFIX="$DEPLOYMENT_NAME."
+  SUBDOMAIN_PREFIX="$DEPLOYMENT_NAME-"
+fi
+
+if [ "$USE_SSL" = true ]; then 
+    PORT="443 ssl http2"
+else 
+    PORT="80"
+fi
+
+if [ "$USE_SSL" = true ]; then 
+    HTTPS_CONFIG_FILE=$TEMPLATE_DIR/https-config-ssl.snippet
+else 
+    HTTPS_CONFIG_FILE=$TEMPLATE_DIR/https-config-non-ssl.snippet 
+fi
+
+sed -e "/__HTTPS_CONFIG__/r $HTTPS_CONFIG_FILE" -e "s/__HTTPS_CONFIG__//g" $TEMPLATE_DIR/servers.template.conf > $HOME_DIR/servers.conf
+sed -i "s/__DEFAULT_FRONTEND__/$DEFAULT_FRONTEND/g" $HOME_DIR/servers.conf
+sed -i "s/__DOMAIN_PREFIX__/$DOMAIN_PREFIX/g" $HOME_DIR/servers.conf
+sed -i "s/__SUBDOMAIN_PREFIX__/$SUBDOMAIN_PREFIX/g" $HOME_DIR/servers.conf
+sed -i "s/__DOMAIN__/$DOMAIN/g" $HOME_DIR/servers.conf
+sed -i "s/__PORT__/$PORT/g" $HOME_DIR/servers.conf
+
+sudo cp $CONFIG_DIR/nginx.conf /etc/nginx/nginx.conf
+sudo cp $HOME_DIR/servers.conf /etc/nginx/conf.d/servers.conf
+
+rm $HOME_DIR/servers.conf
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment-common/setup.sh b/packages/devops/scripts/deployment-common/setup.sh
new file mode 100755
index 0000000000..e50237ad25
--- /dev/null
+++ b/packages/devops/scripts/deployment-common/setup.sh
@@ -0,0 +1,127 @@
+#!/bin/bash -le
+
+# This script is used by Amazon Image Builder to pre-bake a Tupaia AMI
+# To deploy changes, upload the latest to the S3 bucket "tupaia_devops"
+
+HOME_DIR=/home/ubuntu
+TUPAIA_DIR=$HOME_DIR/tupaia
+
+cd $HOME_DIR
+
+sudo apt-get update
+
+# install nginx and add h5bp config
+if ! command -v nginx &> /dev/null
+then
+  sudo apt-get install -yqq nginx
+  git clone https://github.com/h5bp/server-configs-nginx.git
+  cd ./server-configs-nginx
+  git checkout tags/2.0.0
+  cd ..
+  sudo cp -R ./server-configs-nginx/h5bp/ /etc/nginx/
+  rm -rf server-configs-nginx
+
+  # Add the nginx user (www-data) to the ubuntu group to give it access to the tupaia code
+  sudo usermod -a -G ubuntu www-data
+else
+  echo "nginx already installed, skipping"
+fi
+
+# install psql for use when installing mv refresh in the db
+sudo apt-get install -yqq postgresql-client
+
+# install base dependencies
+sudo apt-get --no-install-recommends -yqq install \
+  bash-completion \
+  build-essential \
+  cmake \
+  libcurl4  \
+  libcurl4-openssl-dev  \
+  libssl-dev  \
+  libxml2 \
+  libxml2-dev  \
+  libssl3 \
+  pkg-config \
+  ca-certificates \
+  xclip \
+  jq
+
+# Install base dependencies
+# Note: Many of these are for puppeteer: https://pptr.dev/15.3.0/troubleshooting#chrome-headless-doesnt-launch-on-unix
+sudo apt-get -yqq install \
+  fonts-liberation \
+  libappindicator3-1 \
+  libasound2 \
+  libatk-bridge2.0-0 \
+  libatk1.0-0 \
+  libc6 \
+  libcairo2 \
+  libcups2 \
+  libdbus-1-3 \
+  libexpat1 \
+  libfontconfig1 \
+  libgbm1 \
+  libgcc1 \
+  libglib2.0-0 \
+  libgtk-3-0 \
+  libnspr4 \
+  libnss3 \
+  libpango-1.0-0 \
+  libpangocairo-1.0-0 \
+  libstdc++6 \
+  libx11-6 \
+  libx11-xcb1 \
+  libxcb1 \
+  libxcomposite1 \
+  libxcursor1 \
+  libxdamage1 \
+  libxext6 \
+  libxfixes3 \
+  libxi6 \
+  libxrandr2 \
+  libxrender1 \
+  libxss1 \
+  libxtst6 \
+  lsb-release \
+  wget \
+  xdg-utils
+
+
+# install node and yarn
+if ! command -v node &> /dev/null
+then
+  echo "Installing nvm"
+  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+  export NVM_DIR="$HOME/.nvm"
+  [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
+  nvm install $(sudo cat "$TUPAIA_DIR/.nvmrc")
+  npm install --global yarn
+else
+  echo "nvm already installed, skipping"
+fi
+
+# install pm2
+if ! command -v pm2 &> /dev/null
+then
+  echo "Installing pm2"
+  npm install --global pm2
+  pm2 install pm2-logrotate
+else
+  echo "pm2 already installed, skipping"
+fi
+
+# install bitwarden
+if ! command -v bw &> /dev/null
+then
+  echo "Installing bitwarden-cli"
+  npm install --global @bitwarden/cli
+else
+  echo "bitwarden-cli already installed, skipping"
+fi
+
+LOGS_DIR=$HOME_DIR/logs
+# Create a directory for logs to go
+mkdir -m 777 -p $LOGS_DIR
+
+cd $TUPAIA_DIR
+yarn install # pre install to save time spinning up new ec2 instances
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment/startBackEnds.sh b/packages/devops/scripts/deployment-common/startBackEnds.sh
similarity index 100%
rename from packages/devops/scripts/deployment/startBackEnds.sh
rename to packages/devops/scripts/deployment-common/startBackEnds.sh
diff --git a/packages/devops/scripts/deployment-vm-app/checkRequiredEnvVars.sh b/packages/devops/scripts/deployment-vm-app/checkRequiredEnvVars.sh
new file mode 100755
index 0000000000..2b9f0137cc
--- /dev/null
+++ b/packages/devops/scripts/deployment-vm-app/checkRequiredEnvVars.sh
@@ -0,0 +1,34 @@
+#!/bin/bash -ex
+
+if [[ ! -v DOMAIN ]]; then
+    echo "DOMAIN must be set"
+    exit 1
+fi
+if [[ ! -v DEFAULT_FRONTEND ]]; then
+    echo "DEFAULT_FRONTEND must be set"
+    exit 1
+fi
+if [[ ! -v USE_SSL ]]; then
+    echo "USE_SSL must be set"
+    exit 1
+fi
+if [[ ! -v BITWARDEN_EMAIL ]]; then
+    echo "BITWARDEN_EMAIL must be set"
+    exit 1
+fi
+if [[ ! -v BITWARDEN_PASSWORD ]]; then
+    echo "BITWARDEN_PASSWORD must be set"
+    exit 1
+fi
+if [[ ! -v GIT_REPO ]]; then
+    echo "GIT_REPO must be set"
+    exit 1
+fi
+if [[ ! -v GIT_BRANCH ]]; then
+    echo "GIT_BRANCH must be set"
+    exit 1
+fi
+if [[ ! -v DEPLOYMENT_NAME ]]; then
+    echo "DEPLOYMENT_NAME must be set"
+    exit 1
+fi
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment-vm-app/install.sh b/packages/devops/scripts/deployment-vm-app/install.sh
new file mode 100755
index 0000000000..156a79d592
--- /dev/null
+++ b/packages/devops/scripts/deployment-vm-app/install.sh
@@ -0,0 +1,46 @@
+#!/bin/bash -ex
+
+HOME_DIR=/home/ubuntu
+TUPAIA_DIR=$HOME_DIR/tupaia
+LOGS_DIR=$HOME_DIR/logs
+
+SCRIPT_DIR=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+cd "$SCRIPT_DIR"
+
+./checkRequiredEnvVars.sh
+
+set -x
+
+../deployment-common/configureNginx.sh
+
+# clone our repo
+mkdir -p $TUPAIA_DIR
+cd $TUPAIA_DIR
+git status || git clone -b $GIT_BRANCH $GIT_REPO .
+git remote set-branches --add origin ${GIT_BRANCH}
+git fetch --all --prune
+git reset --hard # clear out any manual changes that have been made, which would cause checkout to fail
+git checkout ${GIT_BRANCH}
+git reset --hard origin/${GIT_BRANCH}
+
+# Yarn install
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
+nvm use
+corepack enable yarn
+yarn install --immutable
+
+# Fetch env vars
+BITWARDEN_EMAIL=$BITWARDEN_EMAIL BITWARDEN_PASSWORD=$BITWARDEN_PASSWORD yarn download-env-vars $DEPLOYMENT_NAME
+
+# Build
+yarn build:internal-dependencies
+
+echo "Building deployable packages"
+PACKAGES=$(${TUPAIA_DIR}/scripts/bash/getDeployablePackages.sh)
+for PACKAGE in ${PACKAGES[@]}; do
+    echo "Building ${PACKAGE}"
+    REACT_APP_DEPLOYMENT_NAME=${DEPLOYMENT_NAME} yarn workspace @tupaia/${PACKAGE} build
+done
+
+echo "Tupaia installed successfully"
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment-vm-app/setup.sh b/packages/devops/scripts/deployment-vm-app/setup.sh
new file mode 100755
index 0000000000..fb2ec9b481
--- /dev/null
+++ b/packages/devops/scripts/deployment-vm-app/setup.sh
@@ -0,0 +1,10 @@
+#!/bin/bash -ex
+
+SCRIPT_DIR=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+cd "$SCRIPT_DIR"
+
+./checkRequiredEnvVars.sh
+
+../deployment-common/setup.sh
+
+echo "Server set up successfully"
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment-vm-app/start.sh b/packages/devops/scripts/deployment-vm-app/start.sh
new file mode 100755
index 0000000000..71739ab44e
--- /dev/null
+++ b/packages/devops/scripts/deployment-vm-app/start.sh
@@ -0,0 +1,15 @@
+#!/bin/bash -ex
+
+HOME_DIR=/home/ubuntu
+TUPAIA_DIR=$HOME_DIR/tupaia
+
+SCRIPT_DIR=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+cd "$SCRIPT_DIR"
+
+./checkRequiredEnvVars.sh
+
+# Start servers
+../deployment-common/startBackEnds.sh
+
+# Restart nginx
+sudo service nginx restart
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment-vm-db/importDbDump.sh b/packages/devops/scripts/deployment-vm-db/importDbDump.sh
new file mode 100755
index 0000000000..818b06bc24
--- /dev/null
+++ b/packages/devops/scripts/deployment-vm-db/importDbDump.sh
@@ -0,0 +1,12 @@
+#!/bin/bash -ex
+
+DB_DUMP=$1
+
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+source "$SCRIPT_DIR/../../../../scripts/bash/mergeEnvForDB.sh" 
+
+# Set default port in case it wasn't in .env
+: "${DB_PORT:=5432}"
+
+export PGPASSWORD=$DB_PG_PASSWORD
+psql -p $DB_PORT -h $DB_URL -U $DB_PG_USER -f $DB_DUMP
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment-vm-db/initialiseDatabase.sh b/packages/devops/scripts/deployment-vm-db/initialiseDatabase.sh
new file mode 100755
index 0000000000..2765ab6987
--- /dev/null
+++ b/packages/devops/scripts/deployment-vm-db/initialiseDatabase.sh
@@ -0,0 +1,20 @@
+#!/bin/bash -ex
+
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+ROOT_DIR="$SCRIPT_DIR/../../../../"
+source "$ROOT_DIR/scripts/bash/mergeEnvForDB.sh" 
+
+# Set default port in case it wasn't in .env
+: "${DB_PORT:=5432}"
+
+sudo -u postgres psql -p $DB_PORT -c "ALTER USER $DB_PG_USER WITH PASSWORD '$DB_PG_PASSWORD';"
+PGPASSWORD=$DB_PG_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_PG_USER -c "CREATE ROLE $DB_USER LOGIN PASSWORD '$DB_PASSWORD';"
+PGPASSWORD=$DB_PG_PASSWORD psql -h $DB_URL -p $DB_PORT -U $DB_PG_USER -c "CREATE DATABASE $DB_NAME OWNER $DB_USER;"
+
+cd $ROOT_DIR
+
+# Initialise NVM (which sets the path for access to npm, yarn etc. as well)
+. $HOME/.nvm/nvm.sh
+
+echo "Installing mvrefresh"
+DB_NAME=$DB_NAME yarn workspace @tupaia/data-api install-mv-refresh
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment-vm-db/setup.sh b/packages/devops/scripts/deployment-vm-db/setup.sh
new file mode 100755
index 0000000000..6dd61de0ee
--- /dev/null
+++ b/packages/devops/scripts/deployment-vm-db/setup.sh
@@ -0,0 +1,32 @@
+#!/bin/bash -ex
+
+HOME_DIR=/home/ubuntu
+
+SCRIPT_DIR=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+cd "$SCRIPT_DIR"
+
+# install postgres 13
+if ! command -v postgres &> /dev/null
+then
+  sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
+  wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
+  sudo apt-get update
+  sudo apt-get -y install postgresql-13
+
+  sudo apt-get -y install postgis postgresql-13-postgis-3
+else
+  echo "postgresql already installed, skipping"
+fi
+
+# Allow remote connection
+sudo -u postgres sed -i "$ a\listen_addresses = '*'" /etc/postgresql/13/main/postgresql.conf
+sudo -u postgres sed -i "$ a\host all all 0.0.0.0/0 md5" /etc/postgresql/13/main/pg_hba.conf
+sudo -u postgres sed -i "$ a\host all all ::/0 md5" /etc/postgresql/13/main/pg_hba.conf
+
+# Increase max connections
+sudo -u postgres sed -i "s/max_connections = 100/max_connections = 500/g" /etc/postgresql/13/main/postgresql.conf
+
+# start postgres
+sudo service postgresql restart
+
+echo "Db Server set up successfully"
\ No newline at end of file
diff --git a/packages/devops/scripts/deployment/setupGoldMaster.sh b/packages/devops/scripts/deployment/setupGoldMaster.sh
deleted file mode 100755
index ee47760f1e..0000000000
--- a/packages/devops/scripts/deployment/setupGoldMaster.sh
+++ /dev/null
@@ -1,96 +0,0 @@
-#!/bin/bash -le
-
-# This script is used by Amazon Image Builder to pre-bake a Tupaia AMI
-# To deploy changes, upload the latest to the S3 bucket "tupaia_devops"
-
-# install nginx and add h5bp config
-sudo apt-get install -yqq nginx
-git clone https://github.com/h5bp/server-configs-nginx.git
-cd ./server-configs-nginx
-git checkout tags/2.0.0
-cd ..
-sudo cp -R ./server-configs-nginx/h5bp/ /etc/nginx/
-rm -rf server-configs-nginx
-
-# Add the nginx user (www-data) to the ubuntu group to give it access to the tupaia code
-sudo usermod -a -G ubuntu www-data
-
-# install psql for use when installing mv refresh in the db
-sudo apt-get install -yqq postgresql-client
-
-# install base dependencies
-sudo apt-get --no-install-recommends -yqq install \
-  bash-completion \
-  build-essential \
-  cmake \
-  libcurl4  \
-  libcurl4-openssl-dev  \
-  libssl-dev  \
-  libxml2 \
-  libxml2-dev  \
-  libssl3 \
-  pkg-config \
-  ca-certificates \
-  xclip \
-  jq
-
-# install puppeteer dependencies https://pptr.dev/15.3.0/troubleshooting#chrome-headless-doesnt-launch-on-unix
-sudo apt-get -yqq install \
-  ca-certificates \
-  fonts-liberation \
-  libappindicator3-1 \
-  libasound2 \
-  libatk-bridge2.0-0 \
-  libatk1.0-0 \
-  libc6 \
-  libcairo2 \
-  libcups2 \
-  libdbus-1-3 \
-  libexpat1 \
-  libfontconfig1 \
-  libgbm1 \
-  libgcc1 \
-  libglib2.0-0 \
-  libgtk-3-0 \
-  libnspr4 \
-  libnss3 \
-  libpango-1.0-0 \
-  libpangocairo-1.0-0 \
-  libstdc++6 \
-  libx11-6 \
-  libx11-xcb1 \
-  libxcb1 \
-  libxcomposite1 \
-  libxcursor1 \
-  libxdamage1 \
-  libxext6 \
-  libxfixes3 \
-  libxi6 \
-  libxrandr2 \
-  libxrender1 \
-  libxss1 \
-  libxtst6 \
-  lsb-release \
-  wget \
-  xdg-utils 
-
-# clone our repo
-cd /home/ubuntu
-sudo -Hu ubuntu git clone https://github.com/beyondessential/tupaia.git
-
-# install node and yarn
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
-export NVM_DIR="$HOME/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
-nvm install $(sudo cat tupaia/.nvmrc)
-npm install --global yarn
-
-# install bitwarden cli
-npm install --global @bitwarden/cli
-
-# install pm2
-npm install --global pm2
-pm2 install pm2-logrotate
-
-# build all packages once using dev to speed up future branch-specific builds
-sudo -Hu ubuntu /home/ubuntu/tupaia/packages/devops/scripts/deployment/buildDeployablePackages.sh gold-master-image-builder
diff --git a/packages/devops/scripts/lambda/actions/redeploy_tupaia_server.py b/packages/devops/scripts/lambda/actions/redeploy_tupaia_server.py
index c36f5fdd6f..c4fb78ce9c 100644
--- a/packages/devops/scripts/lambda/actions/redeploy_tupaia_server.py
+++ b/packages/devops/scripts/lambda/actions/redeploy_tupaia_server.py
@@ -30,7 +30,7 @@
 # N.B. example 3 is unusual and generally just used for debugging the redeploy process itself. If
 # used, you need to tag the AMI and security groups with the codes you specify
 
-from helpers.create_from_image import create_tupaia_instance_from_image
+from helpers.create_from_image import create_server_instance_from_image
 from helpers.utilities import find_instances, get_tag
 
 def redeploy_tupaia_server(event):
@@ -89,11 +89,11 @@ def redeploy_tupaia_server(event):
 
         # launch server instance based on gold master AMI
         # original instance will be deleted by lambda script "swap_out_tupaia_server" once new instance is running
-        new_instance = create_tupaia_instance_from_image(
+        new_instance = create_server_instance_from_image(
             deployment_name=get_tag(existing_instance, 'DeploymentName'),
             branch=get_tag(existing_instance, 'Branch'),
             instance_type=event.get('InstanceType', existing_instance['InstanceType']),
-            image_code=event.get('ImageCode', 'tupaia-gold-master'), # will use tupaia-gold-master by default if not defined in the event
+            image_code=event.get('ImageCode', get_tag(existing_instance, 'ImageCode')),
             extra_tags=extra_tags,
             security_group_code=event.get('SecurityGroupCode', None), # will use id below if not defined in the event
             security_group_id=existing_instance['SecurityGroups'][0]['GroupId'],
diff --git a/packages/devops/scripts/lambda/actions/spin_up_lesmis_deployment.py b/packages/devops/scripts/lambda/actions/spin_up_lesmis_deployment.py
new file mode 100644
index 0000000000..cf9318f325
--- /dev/null
+++ b/packages/devops/scripts/lambda/actions/spin_up_lesmis_deployment.py
@@ -0,0 +1,71 @@
+# Creates a new deployment of LESMIS with a specific branch checked out
+#
+# Example config
+#
+# 1. Spin up a new feature branch deployment of LESMIS, that will be deleted after 8 hours
+# {
+#   "Action": "spin_up_lesmis_deployment",
+#   "User": "edwin",
+#   "Branch": "wai-965",
+#   "DbDumpFile": "lesmis-on-premise/lesmis-dump-tupaia-202404091048.sql",
+#   "HoursOfLife": 8
+# }
+
+from pathlib import Path
+
+from helpers.create_from_image import create_server_instance_from_image
+from helpers.utilities import find_instances, build_extra_tags
+
+def spin_up_lesmis_deployment(event):
+    # validate input config
+    if 'DeploymentName' not in event:
+        raise Exception('You must include the key "DeploymentName" in the lambda config, e.g. "dev".')
+    deployment_name = event['DeploymentName']
+    branch = event.get('Branch', deployment_name) # branch defaults to deployment name if not specified
+    if deployment_name == 'production' and branch != 'master':
+        raise Exception('The production deployment needs to check out master, not ' + branch)
+
+    # find current instances
+    existing_instances = find_instances([
+        { 'Name': 'tag:DeploymentName', 'Values': [deployment_name] },
+        { 'Name': 'tag:DeploymentType', 'Values': ['lesmis'] },
+        { 'Name': 'instance-state-name', 'Values': ['running', 'stopped'] } # ignore terminated instances
+    ])
+
+    if len(existing_instances) != 0:
+      raise Exception('A deployment already exists, perhaps you want to redeploy and swap out the existing one? The easiest way is to push a new commit.')
+    
+    if 'DbDumpFile' not in event:
+        raise Exception('You must include the file location of a dump of the lesmis database in S3')
+    db_dump_file = event.get('DbDumpFile')
+
+
+    # get manual input parameters, or default for any not provided
+    instance_type = event.get('InstanceType', 't3a.large')
+    image_code = event.get('ImageCode', 'lesmis-gold-master') # Use AMI tagged with code
+    security_group_code = event.get('SecurityGroupCode', 'tupaia-dev-sg') # Use security group tagged with code
+    
+    # launch server instance based on gold master AMI
+    server_extra_tags = build_extra_tags(
+        event,
+        # Default to turning off between 7pm AEST and 8am NZDT, i.e. all work hours throughout the year
+        { 'StopAtUTC': '09:00', 'StartAtUTC': '19:00' }
+    )
+
+    server_extra_tags.append({ 'Key': 'DbDumpFile', 'Value': db_dump_file})
+
+    create_server_instance_from_image(
+        deployment_name,
+        branch,
+        instance_type,
+        image_code,
+        deployment_type='lesmis',
+        startup_script = Path('./resources/startupLesmis.sh').read_text(),
+        volume_size=50,
+        extra_tags=server_extra_tags,
+        security_group_code=security_group_code,
+        setup_gateway=False,
+        setup_dns=True,
+    )
+
+    print('Successfully deployed branch ' + branch)
diff --git a/packages/devops/scripts/lambda/actions/spin_up_tupaia_deployment.py b/packages/devops/scripts/lambda/actions/spin_up_tupaia_deployment.py
index 8c8ac040bb..174ce9ab4b 100644
--- a/packages/devops/scripts/lambda/actions/spin_up_tupaia_deployment.py
+++ b/packages/devops/scripts/lambda/actions/spin_up_tupaia_deployment.py
@@ -35,7 +35,7 @@
 # used, you need to tag the AMI and security groups with the codes you specify
 
 from helpers.creation import create_db_instance_from_snapshot
-from helpers.create_from_image import create_tupaia_instance_from_image
+from helpers.create_from_image import create_server_instance_from_image
 from helpers.utilities import find_instances, build_extra_tags
 from helpers.rds import set_db_instance_master_password
 from helpers.secrets import get_db_master_password
@@ -72,7 +72,7 @@ def spin_up_tupaia_deployment(event):
         # Default to turning off between 7pm AEST and 8am NZDT, i.e. all work hours throughout the year
         { 'StopAtUTC': '09:00', 'StartAtUTC': '19:00' }
     )
-    create_tupaia_instance_from_image(
+    create_server_instance_from_image(
         deployment_name,
         branch,
         instance_type,
diff --git a/packages/devops/scripts/lambda/actions/tear_down_lesmis_deployment.py b/packages/devops/scripts/lambda/actions/tear_down_lesmis_deployment.py
new file mode 100644
index 0000000000..fab24ccf28
--- /dev/null
+++ b/packages/devops/scripts/lambda/actions/tear_down_lesmis_deployment.py
@@ -0,0 +1,43 @@
+# Tears down a full Tupaia deployment, including the server instance, the db instance, and the
+# associated elastic ips, route53 entries, load balancer, and gateway
+#
+# Example configs
+#
+# 1. Tear down a specific branch deployment of Tupaia
+# {
+#   "Action": "tear_down_lesmis_deployment",
+#   "User": "edwin",
+#   "Branch": "wai-965"
+# }
+#
+# 1. Tear down a LESMIS deployment using its deployment name (which is usually the same as the branch)
+# {
+#   "Action": "tear_down_lesmis_deployment",
+#   "User": "edwin",
+#   "DeploymentName": "wai-965"
+# }
+
+from helpers.teardown import teardown_instance, teardown_db_instance
+from helpers.utilities import find_instances, get_tag
+
+def tear_down_lesmis_deployment(event):
+    if 'DeploymentName' not in event:
+        raise Exception('You must include "DeploymentName" in the lambda config, which is the subdomain of tupaia.org you want to tear down (e.g. "dev").')
+
+    deployment_name = event['DeploymentName']
+    instance_filters = [
+      { 'Name': 'tag:DeploymentName', 'Values': [deployment_name] },
+      { 'Name': 'tag:DeploymentType', 'Values': ['lesmis'] },
+      { 'Name': 'instance-state-name', 'Values': ['running', 'stopped']} # ignore terminated instances
+    ]
+    instances = find_instances(instance_filters)
+
+    if len(instances) == 0:
+      raise Exception('No matching instances found')
+
+    print('Tearing down the instances ' + ', '.join([get_tag(instance, 'Name') for instance in instances]))
+
+    for instance in instances:
+      teardown_instance(instance)
+
+    print('Finished tearing down LESMIS deployment')
diff --git a/packages/devops/scripts/lambda/helpers/create_from_image.py b/packages/devops/scripts/lambda/helpers/create_from_image.py
index 0e5bcf6bb5..01925b2fe5 100644
--- a/packages/devops/scripts/lambda/helpers/create_from_image.py
+++ b/packages/devops/scripts/lambda/helpers/create_from_image.py
@@ -2,22 +2,9 @@
 from pathlib import Path
 
 from helpers.creation import create_instance
-from helpers.utilities import get_account_ids
 
 ec = boto3.client('ec2')
 
-def get_latest_image_id(code):
-    filters = [
-        {'Name': 'tag:Code', 'Values': [code]},
-    ]
-    account_ids = get_account_ids()
-    image_response = ec.describe_images(Owners=account_ids, Filters=filters)
-    if 'Images' not in image_response or len(image_response['Images']) == 0:
-        raise Exception('No images matching ' + code)
-    image_id = sorted(image_response['Images'], key=lambda k: k['CreationDate'], reverse=True)[0]['ImageId']
-    print('Found image with id ' + image_id)
-    return image_id
-
 def create_instance_from_image(
     deployment_name,
     deployment_type,
@@ -35,9 +22,6 @@ def create_instance_from_image(
 ):
     print('Creating ' + deployment_name + ' as ' + instance_type)
 
-    # get ami to create instance from
-    image_id = get_latest_image_id(image_code)
-
     instance_object = create_instance(
         deployment_name,
         deployment_type,
@@ -45,7 +29,7 @@ def create_instance_from_image(
         branch=branch,
         extra_tags=extra_tags,
         iam_role_arn=iam_role_arn,
-        image_id=image_id,
+        image_code=image_code,
         security_group_code=security_group_code,
         security_group_id=security_group_id,
         subdomains_via_dns=subdomains_via_dns,
@@ -56,21 +40,22 @@ def create_instance_from_image(
 
     return instance_object
 
-def create_tupaia_instance_from_image(
+def create_server_instance_from_image(
     deployment_name,
     branch,
     instance_type,
     image_code,
+    deployment_type = 'tupaia',
+    startup_script = Path('./resources/startupTupaia.sh').read_text(),
+    volume_size = 20, # 20GB
     extra_tags=None,
     security_group_code=None,
     security_group_id=None,
     setup_gateway=True,
+    setup_dns=False,
 ):
-    deployment_type = 'tupaia'
     tupaia_server_iam_role_arn = 'arn:aws:iam::843218180240:instance-profile/TupaiaServerRole'
-    tupaia_subdomains = ['','admin','admin-api','api','config','export','mobile','psss','report-api','psss-api','entity-api','lesmis-api','lesmis', 'meditrak-api', 'data-table-api', 'tupaia-web-api', 'datatrak-web-api', 'datatrak'] if setup_gateway else None
-    tupaia_volume_size = 20 # 20GB
-    startup_script = Path('./resources/startup.sh').read_text()
+    tupaia_subdomains = ['','admin','admin-api','api','config','psss','report-api','psss-api','entity-api','lesmis-api','lesmis', 'meditrak-api', 'data-table-api', 'tupaia-web-api', 'tupaia-web', 'datatrak-web-api', 'datatrak']
 
     return create_instance_from_image(
         deployment_name,
@@ -82,7 +67,8 @@ def create_tupaia_instance_from_image(
         iam_role_arn=tupaia_server_iam_role_arn,
         security_group_code=security_group_code,
         security_group_id=security_group_id,
-        subdomains_via_gateway=tupaia_subdomains,
+        subdomains_via_gateway=tupaia_subdomains if setup_gateway == True else None,
+        subdomains_via_dns=tupaia_subdomains if setup_dns == True else None,
         user_data=startup_script,
-        volume_size=tupaia_volume_size,
+        volume_size=volume_size,
     )
diff --git a/packages/devops/scripts/lambda/helpers/creation.py b/packages/devops/scripts/lambda/helpers/creation.py
index 761d70c614..affe39a735 100644
--- a/packages/devops/scripts/lambda/helpers/creation.py
+++ b/packages/devops/scripts/lambda/helpers/creation.py
@@ -1,13 +1,25 @@
 import boto3
 
 from helpers.networking import add_subdomains_to_route53, setup_subdomains_via_dns, setup_subdomains_via_gateway
-from helpers.utilities import get_instance_by_id
+from helpers.utilities import get_instance_by_id, get_account_ids
 from helpers.rds import get_latest_db_snapshot, wait_for_db_instance
 
 ec2 = boto3.resource('ec2')
 ec = boto3.client('ec2')
 rds = boto3.client('rds')
 
+def get_latest_image_id(image_code):
+    filters = [
+        {'Name': 'tag:Code', 'Values': [image_code]},
+    ]
+    account_ids = get_account_ids()
+    image_response = ec.describe_images(Owners=account_ids, Filters=filters)
+    if 'Images' not in image_response or len(image_response['Images']) == 0:
+        raise Exception('No images matching ' + image_code)
+    image_id = sorted(image_response['Images'], key=lambda k: k['CreationDate'], reverse=True)[0]['ImageId']
+    print('Found image with id ' + image_id)
+    return image_id
+
 def allocate_elastic_ip(instance_id):
     elastic_ip = ec.allocate_address(Domain='Vpc')
     ec.associate_address(AllocationId=elastic_ip['AllocationId'],InstanceId=instance_id)
@@ -42,6 +54,7 @@ def get_instance_creation_config(
   cloned_from=None,
   extra_tags=None,
   iam_role_arn=None,
+  image_code=None,
   image_id=None,
   security_group_code=None,
   security_group_id=None,
@@ -54,6 +67,8 @@ def get_instance_creation_config(
 
     instance_name = deployment_type + ': ' + deployment_name
 
+    image_id = image_id if image_id != None else get_latest_image_id(image_code)
+
     tags = [
       { 'Key': 'Name', 'Value': instance_name },
       { 'Key': 'DeploymentName', 'Value': deployment_name },
@@ -69,6 +84,9 @@ def get_instance_creation_config(
     if subdomains_via_gateway:
       tags.append({ 'Key': 'SubdomainsViaGateway', 'Value': ','.join(subdomains_via_gateway) })
 
+    if image_code:
+      tags.append({ 'Key': 'ImageCode', 'Value': image_code })
+
     # attach cloning config tags
     if cloned_from:
       tags.append({ 'Key': 'ClonedFrom', 'Value': cloned_from })
@@ -113,6 +131,7 @@ def create_instance(
   cloned_from=None,
   extra_tags=None,
   iam_role_arn=None,
+  image_code=None,
   image_id=None,
   security_group_code=None,
   security_group_id=None,
@@ -129,6 +148,7 @@ def create_instance(
       extra_tags=extra_tags,
       cloned_from=cloned_from,
       iam_role_arn=iam_role_arn,
+      image_code=image_code,
       image_id=image_id,
       security_group_code=security_group_code,
       security_group_id=security_group_id,
diff --git a/packages/devops/scripts/lambda/lambda_function.py b/packages/devops/scripts/lambda/lambda_function.py
index bd8e531756..5823fbffb5 100644
--- a/packages/devops/scripts/lambda/lambda_function.py
+++ b/packages/devops/scripts/lambda/lambda_function.py
@@ -6,6 +6,7 @@
 from actions.refresh_cloned_databases import refresh_cloned_databases
 from actions.redeploy_tupaia_server import redeploy_tupaia_server
 from actions.spin_up_dhis_deployment import spin_up_dhis_deployment
+from actions.spin_up_lesmis_deployment import spin_up_lesmis_deployment
 from actions.spin_up_tupaia_deployment import spin_up_tupaia_deployment
 from actions.spin_up_tupaia_database import spin_up_tupaia_database
 from actions.start_tagged_databases import start_tagged_databases
@@ -13,6 +14,7 @@
 from actions.stop_tagged_databases import stop_tagged_databases
 from actions.stop_tagged_servers import stop_tagged_servers
 from actions.swap_out_tupaia_server import swap_out_tupaia_server
+from actions.tear_down_lesmis_deployment import tear_down_lesmis_deployment
 from actions.tear_down_tupaia_deployment import tear_down_tupaia_deployment
 from actions.tear_down_dhis_deployment import tear_down_dhis_deployment
 
@@ -25,6 +27,7 @@
   'refresh_cloned_databases': refresh_cloned_databases,
   'redeploy_tupaia_server': redeploy_tupaia_server,
   'spin_up_dhis_deployment': spin_up_dhis_deployment,
+  'spin_up_lesmis_deployment': spin_up_lesmis_deployment,
   'spin_up_tupaia_deployment': spin_up_tupaia_deployment,
   'spin_up_tupaia_database': spin_up_tupaia_database,
   'start_tagged_databases': start_tagged_databases,
@@ -32,6 +35,7 @@
   'stop_tagged_databases': stop_tagged_databases,
   'stop_tagged_servers': stop_tagged_servers,
   'swap_out_tupaia_server': swap_out_tupaia_server,
+  'tear_down_lesmis_deployment': tear_down_lesmis_deployment,
   'tear_down_tupaia_deployment': tear_down_tupaia_deployment,
   'tear_down_dhis_deployment': tear_down_dhis_deployment,
 }
diff --git a/packages/devops/scripts/lambda/resources/startupLesmis.sh b/packages/devops/scripts/lambda/resources/startupLesmis.sh
new file mode 100644
index 0000000000..ad4e49aaec
--- /dev/null
+++ b/packages/devops/scripts/lambda/resources/startupLesmis.sh
@@ -0,0 +1,84 @@
+#!/bin/bash -leE
+# This script gets loaded as "User Data" against the EC2 instance, and deploys the tagged branch
+# the first time the instance starts
+
+set -o pipefail # fail pipe where scripts are e.g. piped out to deployment logs
+
+HOME_DIR=/home/ubuntu
+
+# Add tag for CI/CD to use as a health check
+INSTANCE_ID=$(ec2metadata --instance-id)
+aws ec2 create-tags --resources ${INSTANCE_ID} --tags Key=StartupBuildProgress,Value=building
+
+# Mark the build progress as errored if anything goes wrong
+tag_errored() {
+  aws ec2 create-tags --resources ${INSTANCE_ID} --tags Key=StartupBuildProgress,Value=errored
+  service nginx stop # stop nginx as an obvious sign the build has failed
+}
+trap tag_errored ERR
+
+cd $HOME_DIR
+sudo -Hu ubuntu git clone https://github.com/beyondessential/tupaia.git
+
+TUPAIA_DIR=$HOME_DIR/tupaia
+LOGS_DIR=$HOME_DIR/logs
+DEPLOYMENT_SCRIPTS=${TUPAIA_DIR}/packages/devops/scripts
+AWS_DEPLOYMENT_SCRIPTS=${DEPLOYMENT_SCRIPTS}/deployment-aws
+
+DEPLOYMENT_NAME=$(${AWS_DEPLOYMENT_SCRIPTS}/../utility/getEC2TagValue.sh DeploymentName)
+BRANCH=$(${AWS_DEPLOYMENT_SCRIPTS}/../utility/getEC2TagValue.sh Branch)
+DB_DUMP_FILE=$(${AWS_DEPLOYMENT_SCRIPTS}/../utility/getEC2TagValue.sh DbDumpFile)
+SUBDOMAINS=$(${AWS_DEPLOYMENT_SCRIPTS}/../utility/getEC2TagValue.sh SubdomainsViaDns)
+echo "Starting up ${DEPLOYMENT_NAME} (${BRANCH})"
+
+# Set bash prompt to have deployment name in it
+if [[ $DEPLOYMENT_NAME == "production" ]]; then
+  BASH_PROMPT_NAME="PROD"
+  BASH_PROMPT_COLOR="31"
+else
+  BASH_PROMPT_NAME="${DEPLOYMENT_NAME}"
+  BASH_PROMPT_COLOR="36"
+fi
+BASH_PROMPT="\\[\\e]0;\\u@${BASH_PROMPT_NAME}: \\w\\a\\]\\\${debian_chroot:+(\\\$debian_chroot)}\\[\\033[01;32m\\]\\u@\\033[01;${BASH_PROMPT_COLOR}m\\]${BASH_PROMPT_NAME}\\[\\033[00m\\]:\\[\\033[01;34m\\]\\w\\[\\033[00m\\]\\$ "
+echo "PS1=\"${BASH_PROMPT}\"" >> $HOME_DIR/.bashrc
+
+# Create a directory for logs to go
+mkdir -m 777 -p $LOGS_DIR
+
+# Fetch the latest code
+cd $TUPAIA_DIR
+BRANCH_ON_REMOTE=$(sudo -Hu ubuntu git ls-remote --heads origin ${BRANCH})
+if [[ $BRANCH_ON_REMOTE == *${BRANCH} ]]; then
+  echo "${BRANCH} exists"
+  BRANCH_TO_USE=${BRANCH}
+else
+  echo "${BRANCH} does not exist, defaulting to dev"
+  BRANCH_TO_USE="dev"
+fi
+sudo -Hu ubuntu git remote set-branches --add origin ${BRANCH_TO_USE}
+sudo -Hu ubuntu git fetch --all --prune
+sudo -Hu ubuntu git reset --hard # clear out any manual changes that have been made, which would cause checkout to fail
+sudo -Hu ubuntu git checkout ${BRANCH_TO_USE}
+sudo -Hu ubuntu git reset --hard origin/${BRANCH_TO_USE}
+
+export DOMAIN=tupaia.org
+export DEFAULT_FRONTEND=lesmis
+export GIT_REPO=https://github.com/beyondessential/tupaia.git
+export GIT_BRANCH=$BRANCH
+export DEPLOYMENT_NAME=$DEPLOYMENT_NAME
+export USE_SSL=true
+
+export BITWARDEN_EMAIL=$($AWS_DEPLOYMENT_SCRIPTS/fetchParameterStoreValue.sh BITWARDEN_EMAIL)
+export BITWARDEN_PASSWORD=$($AWS_DEPLOYMENT_SCRIPTS/fetchParameterStoreValue.sh BITWARDEN_PASSWORD)
+DB_DUMP=$HOME_DIR/dump.sql
+
+sudo -E -Hu ubuntu $AWS_DEPLOYMENT_SCRIPTS/downloadFromS3.sh $DB_DUMP_FILE $DB_DUMP.gz && sudo -E -Hu ubuntu gunzip $DB_DUMP.gz &> /home/ubuntu/logs/download_db.log
+sudo -E -Hu ubuntu $DEPLOYMENT_SCRIPTS/deployment-aws/setupSslCertificate.sh $DEPLOYMENT_NAME $DOMAIN $SUBDOMAINS &> /home/ubuntu/logs/setup_ssl_cert.log
+sudo -E -Hu ubuntu $DEPLOYMENT_SCRIPTS/deployment-vm-app/setup.sh &> /home/ubuntu/logs/setup_app.log
+sudo -E -Hu ubuntu $DEPLOYMENT_SCRIPTS/deployment-vm-db/setup.sh &> /home/ubuntu/logs/setup_db.log
+sudo -E -Hu ubuntu $DEPLOYMENT_SCRIPTS/deployment-vm-app/install.sh &> /home/ubuntu/logs/install_app.log
+sudo -E -Hu ubuntu $DEPLOYMENT_SCRIPTS/deployment-vm-db/initialiseDatabase.sh &> /home/ubuntu/logs/initialise_db.log
+sudo -E -Hu ubuntu $DEPLOYMENT_SCRIPTS/deployment-vm-db/importDbDump.sh $DB_DUMP &> /home/ubuntu/logs/import_db.log
+
+# Tag as complete so CI/CD system can use the tag as a health check
+aws ec2 create-tags --resources ${INSTANCE_ID} --tags Key=StartupBuildProgress,Value=complete
diff --git a/packages/devops/scripts/lambda/resources/startup.sh b/packages/devops/scripts/lambda/resources/startupTupaia.sh
similarity index 90%
rename from packages/devops/scripts/lambda/resources/startup.sh
rename to packages/devops/scripts/lambda/resources/startupTupaia.sh
index 6a93fff68d..c0c3ca3c74 100755
--- a/packages/devops/scripts/lambda/resources/startup.sh
+++ b/packages/devops/scripts/lambda/resources/startupTupaia.sh
@@ -7,7 +7,7 @@ set -o pipefail # fail pipe where scripts are e.g. piped out to deployment logs
 HOME_DIR=/home/ubuntu
 TUPAIA_DIR=$HOME_DIR/tupaia
 LOGS_DIR=$HOME_DIR/logs
-DEPLOYMENT_SCRIPTS=${TUPAIA_DIR}/packages/devops/scripts/deployment
+DEPLOYMENT_SCRIPTS=${TUPAIA_DIR}/packages/devops/scripts/deployment-aws
 
 # Add tag for CI/CD to use as a health check
 INSTANCE_ID=$(ec2metadata --instance-id)
@@ -71,10 +71,10 @@ sudo -Hu ubuntu git reset --hard origin/${BRANCH_TO_USE}
 
 # Deploy each package, including injecting environment variables from LastPass
 sudo -Hu ubuntu $DEPLOYMENT_SCRIPTS/buildDeployablePackages.sh $DEPLOYMENT_NAME |& while IFS= read -r line; do printf '\%s \%s\n' "$(date)" "$line"; done  >> $LOGS_DIR/deployment_log.txt
-sudo -Hu ubuntu $DEPLOYMENT_SCRIPTS/startBackEnds.sh |& while IFS= read -r line; do printf '\%s \%s\n' "$(date)" "$line"; done  >> $LOGS_DIR/deployment_log.txt
+sudo -Hu ubuntu $DEPLOYMENT_SCRIPTS/../deployment-common/startBackEnds.sh |& while IFS= read -r line; do printf '\%s \%s\n' "$(date)" "$line"; done  >> $LOGS_DIR/deployment_log.txt
 
 # Set nginx config and start the service running
-$DEPLOYMENT_SCRIPTS/configureNginx.sh |& while IFS= read -r line; do printf '\%s \%s\n' "$(date)" "$line"; done  >> $LOGS_DIR/deployment_log.txt
+sudo -E DEPLOYMENT_NAME=$DEPLOYMENT_NAME $DEPLOYMENT_SCRIPTS/configureNginx.sh |& while IFS= read -r line; do printf '\%s \%s\n' "$(date)" "$line"; done  >> $LOGS_DIR/deployment_log.txt
 
 # Tag as complete so CI/CD system can use the tag as a health check
 aws ec2 create-tags --resources ${INSTANCE_ID} --tags Key=StartupBuildProgress,Value=complete
diff --git a/packages/lesmis/src/api/api.js b/packages/lesmis/src/api/api.js
index a51631c113..5ed6d60826 100644
--- a/packages/lesmis/src/api/api.js
+++ b/packages/lesmis/src/api/api.js
@@ -10,7 +10,7 @@ import { getApiUrl } from '../utils/getApiUrl';
 // withCredentials needs to be set for cookies to save @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
 axios.defaults.withCredentials = true;
 
-const timeout = 45 * 1000; // 45 seconds
+const timeout = 120 * 1000; // 120 seconds
 
 const getRequestOptions = options => {
   const locale = window.location.pathname.split('/')[1];
diff --git a/packages/server-utils/src/downloadPageAsPDF.ts b/packages/server-utils/src/downloadPageAsPDF.ts
index 55cac6b38f..e427182713 100644
--- a/packages/server-utils/src/downloadPageAsPDF.ts
+++ b/packages/server-utils/src/downloadPageAsPDF.ts
@@ -2,7 +2,8 @@ import cookie from 'cookie';
 import puppeteer from 'puppeteer';
 
 const verifyPDFPageUrl = (pdfPageUrl: string): string => {
-  const validDomains = ['tupaia.org', 'lesmis.la', 'www.lesmis.la'];
+  const { VALID_DOMAINS = 'tupaia.org' } = process.env;
+  const validDomains = VALID_DOMAINS.split(' ');
   if (!pdfPageUrl || typeof pdfPageUrl !== 'string') {
     throw new Error(`'pdfPageUrl' should be provided in request body, got: ${pdfPageUrl}`);
   }
diff --git a/packages/types/src/schemas/schemas.ts b/packages/types/src/schemas/schemas.ts
index 775af73973..fbf1f4bf5c 100644
--- a/packages/types/src/schemas/schemas.ts
+++ b/packages/types/src/schemas/schemas.ts
@@ -31463,17 +31463,23 @@ export const MeasureConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -31653,17 +31659,23 @@ export const EntityLevelSchema = {
 		"CaseContact",
 		"Catchment",
 		"City",
+		"Commune",
 		"Complaint",
 		"Country",
 		"Disaster",
 		"District",
+		"DistrictOperational",
 		"EnumerationArea",
 		"Facility",
+		"FacilityBuilding",
+		"FacilityDivision",
+		"FacilitySection",
 		"Farm",
 		"FetpGraduate",
 		"FieldStation",
 		"FijiAspenFacility",
 		"HealthClinicBoundary",
+		"HospitalWard",
 		"Household",
 		"Incident",
 		"IncidentReported",
@@ -31994,17 +32006,23 @@ export const BaseMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -32136,17 +32154,23 @@ export const BaseMapOverlayConfigSchema = {
 							"CaseContact",
 							"Catchment",
 							"City",
+							"Commune",
 							"Complaint",
 							"Country",
 							"Disaster",
 							"District",
+							"DistrictOperational",
 							"EnumerationArea",
 							"Facility",
+							"FacilityBuilding",
+							"FacilityDivision",
+							"FacilitySection",
 							"Farm",
 							"FetpGraduate",
 							"FieldStation",
 							"FijiAspenFacility",
 							"HealthClinicBoundary",
+							"HospitalWard",
 							"Household",
 							"Incident",
 							"IncidentReported",
@@ -32268,17 +32292,23 @@ export const BaseMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -32691,17 +32721,23 @@ export const SpectrumMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -32833,17 +32869,23 @@ export const SpectrumMapOverlayConfigSchema = {
 							"CaseContact",
 							"Catchment",
 							"City",
+							"Commune",
 							"Complaint",
 							"Country",
 							"Disaster",
 							"District",
+							"DistrictOperational",
 							"EnumerationArea",
 							"Facility",
+							"FacilityBuilding",
+							"FacilityDivision",
+							"FacilitySection",
 							"Farm",
 							"FetpGraduate",
 							"FieldStation",
 							"FijiAspenFacility",
 							"HealthClinicBoundary",
+							"HospitalWard",
 							"Household",
 							"Incident",
 							"IncidentReported",
@@ -32965,17 +33007,23 @@ export const SpectrumMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -33495,17 +33543,23 @@ export const IconMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -33637,17 +33691,23 @@ export const IconMapOverlayConfigSchema = {
 							"CaseContact",
 							"Catchment",
 							"City",
+							"Commune",
 							"Complaint",
 							"Country",
 							"Disaster",
 							"District",
+							"DistrictOperational",
 							"EnumerationArea",
 							"Facility",
+							"FacilityBuilding",
+							"FacilityDivision",
+							"FacilitySection",
 							"Farm",
 							"FetpGraduate",
 							"FieldStation",
 							"FijiAspenFacility",
 							"HealthClinicBoundary",
+							"HospitalWard",
 							"Household",
 							"Incident",
 							"IncidentReported",
@@ -33769,17 +33829,23 @@ export const IconMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -34222,17 +34288,23 @@ export const RadiusMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -34364,17 +34436,23 @@ export const RadiusMapOverlayConfigSchema = {
 							"CaseContact",
 							"Catchment",
 							"City",
+							"Commune",
 							"Complaint",
 							"Country",
 							"Disaster",
 							"District",
+							"DistrictOperational",
 							"EnumerationArea",
 							"Facility",
+							"FacilityBuilding",
+							"FacilityDivision",
+							"FacilitySection",
 							"Farm",
 							"FetpGraduate",
 							"FieldStation",
 							"FijiAspenFacility",
 							"HealthClinicBoundary",
+							"HospitalWard",
 							"Household",
 							"Incident",
 							"IncidentReported",
@@ -34496,17 +34574,23 @@ export const RadiusMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -34923,17 +35007,23 @@ export const ColorMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -35065,17 +35155,23 @@ export const ColorMapOverlayConfigSchema = {
 							"CaseContact",
 							"Catchment",
 							"City",
+							"Commune",
 							"Complaint",
 							"Country",
 							"Disaster",
 							"District",
+							"DistrictOperational",
 							"EnumerationArea",
 							"Facility",
+							"FacilityBuilding",
+							"FacilityDivision",
+							"FacilitySection",
 							"Farm",
 							"FetpGraduate",
 							"FieldStation",
 							"FijiAspenFacility",
 							"HealthClinicBoundary",
+							"HospitalWard",
 							"Household",
 							"Incident",
 							"IncidentReported",
@@ -35197,17 +35293,23 @@ export const ColorMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -35639,17 +35741,23 @@ export const ShadingMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -35781,17 +35889,23 @@ export const ShadingMapOverlayConfigSchema = {
 							"CaseContact",
 							"Catchment",
 							"City",
+							"Commune",
 							"Complaint",
 							"Country",
 							"Disaster",
 							"District",
+							"DistrictOperational",
 							"EnumerationArea",
 							"Facility",
+							"FacilityBuilding",
+							"FacilityDivision",
+							"FacilitySection",
 							"Farm",
 							"FetpGraduate",
 							"FieldStation",
 							"FijiAspenFacility",
 							"HealthClinicBoundary",
+							"HospitalWard",
 							"Household",
 							"Incident",
 							"IncidentReported",
@@ -35913,17 +36027,23 @@ export const ShadingMapOverlayConfigSchema = {
 				"CaseContact",
 				"Catchment",
 				"City",
+				"Commune",
 				"Complaint",
 				"Country",
 				"Disaster",
 				"District",
+				"DistrictOperational",
 				"EnumerationArea",
 				"Facility",
+				"FacilityBuilding",
+				"FacilityDivision",
+				"FacilitySection",
 				"Farm",
 				"FetpGraduate",
 				"FieldStation",
 				"FijiAspenFacility",
 				"HealthClinicBoundary",
+				"HospitalWard",
 				"Household",
 				"Incident",
 				"IncidentReported",
@@ -36346,17 +36466,23 @@ export const MapOverlayConfigSchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -36488,17 +36614,23 @@ export const MapOverlayConfigSchema = {
 									"CaseContact",
 									"Catchment",
 									"City",
+									"Commune",
 									"Complaint",
 									"Country",
 									"Disaster",
 									"District",
+									"DistrictOperational",
 									"EnumerationArea",
 									"Facility",
+									"FacilityBuilding",
+									"FacilityDivision",
+									"FacilitySection",
 									"Farm",
 									"FetpGraduate",
 									"FieldStation",
 									"FijiAspenFacility",
 									"HealthClinicBoundary",
+									"HospitalWard",
 									"Household",
 									"Incident",
 									"IncidentReported",
@@ -36620,17 +36752,23 @@ export const MapOverlayConfigSchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -37149,17 +37287,23 @@ export const MapOverlayConfigSchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -37291,17 +37435,23 @@ export const MapOverlayConfigSchema = {
 									"CaseContact",
 									"Catchment",
 									"City",
+									"Commune",
 									"Complaint",
 									"Country",
 									"Disaster",
 									"District",
+									"DistrictOperational",
 									"EnumerationArea",
 									"Facility",
+									"FacilityBuilding",
+									"FacilityDivision",
+									"FacilitySection",
 									"Farm",
 									"FetpGraduate",
 									"FieldStation",
 									"FijiAspenFacility",
 									"HealthClinicBoundary",
+									"HospitalWard",
 									"Household",
 									"Incident",
 									"IncidentReported",
@@ -37423,17 +37573,23 @@ export const MapOverlayConfigSchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -37875,17 +38031,23 @@ export const MapOverlayConfigSchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -38017,17 +38179,23 @@ export const MapOverlayConfigSchema = {
 									"CaseContact",
 									"Catchment",
 									"City",
+									"Commune",
 									"Complaint",
 									"Country",
 									"Disaster",
 									"District",
+									"DistrictOperational",
 									"EnumerationArea",
 									"Facility",
+									"FacilityBuilding",
+									"FacilityDivision",
+									"FacilitySection",
 									"Farm",
 									"FetpGraduate",
 									"FieldStation",
 									"FijiAspenFacility",
 									"HealthClinicBoundary",
+									"HospitalWard",
 									"Household",
 									"Incident",
 									"IncidentReported",
@@ -38149,17 +38317,23 @@ export const MapOverlayConfigSchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -38575,17 +38749,23 @@ export const MapOverlayConfigSchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -38717,17 +38897,23 @@ export const MapOverlayConfigSchema = {
 									"CaseContact",
 									"Catchment",
 									"City",
+									"Commune",
 									"Complaint",
 									"Country",
 									"Disaster",
 									"District",
+									"DistrictOperational",
 									"EnumerationArea",
 									"Facility",
+									"FacilityBuilding",
+									"FacilityDivision",
+									"FacilitySection",
 									"Farm",
 									"FetpGraduate",
 									"FieldStation",
 									"FijiAspenFacility",
 									"HealthClinicBoundary",
+									"HospitalWard",
 									"Household",
 									"Incident",
 									"IncidentReported",
@@ -38849,17 +39035,23 @@ export const MapOverlayConfigSchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -39290,17 +39482,23 @@ export const MapOverlayConfigSchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -39432,17 +39630,23 @@ export const MapOverlayConfigSchema = {
 									"CaseContact",
 									"Catchment",
 									"City",
+									"Commune",
 									"Complaint",
 									"Country",
 									"Disaster",
 									"District",
+									"DistrictOperational",
 									"EnumerationArea",
 									"Facility",
+									"FacilityBuilding",
+									"FacilityDivision",
+									"FacilitySection",
 									"Farm",
 									"FetpGraduate",
 									"FieldStation",
 									"FijiAspenFacility",
 									"HealthClinicBoundary",
+									"HospitalWard",
 									"Household",
 									"Incident",
 									"IncidentReported",
@@ -39564,17 +39768,23 @@ export const MapOverlayConfigSchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -40197,17 +40407,23 @@ export const EntityQuestionConfigSchema = {
 									"case_contact",
 									"catchment",
 									"city",
+									"commune",
 									"complaint",
 									"country",
 									"disaster",
 									"district",
+									"district_operational",
 									"enumeration_area",
 									"facility",
+									"facility_building",
+									"facility_division",
+									"facility_section",
 									"farm",
 									"fetp_graduate",
 									"field_station",
 									"fiji_aspen_facility",
 									"health_clinic_boundary",
+									"hospital_ward",
 									"household",
 									"incident",
 									"incident_reported",
@@ -40245,17 +40461,23 @@ export const EntityQuestionConfigSchema = {
 								"case_contact",
 								"catchment",
 								"city",
+								"commune",
 								"complaint",
 								"country",
 								"disaster",
 								"district",
+								"district_operational",
 								"enumeration_area",
 								"facility",
+								"facility_building",
+								"facility_division",
+								"facility_section",
 								"farm",
 								"fetp_graduate",
 								"field_station",
 								"fiji_aspen_facility",
 								"health_clinic_boundary",
+								"hospital_ward",
 								"household",
 								"incident",
 								"incident_reported",
@@ -40715,17 +40937,23 @@ export const SurveyScreenComponentConfigSchema = {
 											"case_contact",
 											"catchment",
 											"city",
+											"commune",
 											"complaint",
 											"country",
 											"disaster",
 											"district",
+											"district_operational",
 											"enumeration_area",
 											"facility",
+											"facility_building",
+											"facility_division",
+											"facility_section",
 											"farm",
 											"fetp_graduate",
 											"field_station",
 											"fiji_aspen_facility",
 											"health_clinic_boundary",
+											"hospital_ward",
 											"household",
 											"incident",
 											"incident_reported",
@@ -40763,17 +40991,23 @@ export const SurveyScreenComponentConfigSchema = {
 										"case_contact",
 										"catchment",
 										"city",
+										"commune",
 										"complaint",
 										"country",
 										"disaster",
 										"district",
+										"district_operational",
 										"enumeration_area",
 										"facility",
+										"facility_building",
+										"facility_division",
+										"facility_section",
 										"farm",
 										"fetp_graduate",
 										"field_station",
 										"fiji_aspen_facility",
 										"health_clinic_boundary",
+										"hospital_ward",
 										"household",
 										"incident",
 										"incident_reported",
@@ -41229,6 +41463,30 @@ export const RecentEntitiesForCountrySchema = {
 				"type": "string"
 			}
 		},
+		"facility_building": {
+			"type": "array",
+			"items": {
+				"type": "string"
+			}
+		},
+		"facility_division": {
+			"type": "array",
+			"items": {
+				"type": "string"
+			}
+		},
+		"facility_section": {
+			"type": "array",
+			"items": {
+				"type": "string"
+			}
+		},
+		"hospital_ward": {
+			"type": "array",
+			"items": {
+				"type": "string"
+			}
+		},
 		"farm": {
 			"type": "array",
 			"items": {
@@ -41241,6 +41499,18 @@ export const RecentEntitiesForCountrySchema = {
 				"type": "string"
 			}
 		},
+		"district_operational": {
+			"type": "array",
+			"items": {
+				"type": "string"
+			}
+		},
+		"commune": {
+			"type": "array",
+			"items": {
+				"type": "string"
+			}
+		},
 		"business": {
 			"type": "array",
 			"items": {
@@ -41643,6 +41913,27 @@ export const AnalyticsSchema = {
 			"type": "string"
 		},
 		"type": {
+			"enum": [
+				"Arithmetic",
+				"Autocomplete",
+				"Binary",
+				"Checkbox",
+				"CodeGenerator",
+				"Condition",
+				"Date",
+				"DateOfData",
+				"DateTime",
+				"Entity",
+				"File",
+				"FreeText",
+				"Geolocate",
+				"Instruction",
+				"Number",
+				"Photo",
+				"PrimaryEntity",
+				"Radio",
+				"SubmissionDate"
+			],
 			"type": "string"
 		},
 		"value": {
@@ -41687,6 +41978,27 @@ export const AnalyticsCreateSchema = {
 			"type": "string"
 		},
 		"type": {
+			"enum": [
+				"Arithmetic",
+				"Autocomplete",
+				"Binary",
+				"Checkbox",
+				"CodeGenerator",
+				"Condition",
+				"Date",
+				"DateOfData",
+				"DateTime",
+				"Entity",
+				"File",
+				"FreeText",
+				"Geolocate",
+				"Instruction",
+				"Number",
+				"Photo",
+				"PrimaryEntity",
+				"Radio",
+				"SubmissionDate"
+			],
 			"type": "string"
 		},
 		"value": {
@@ -41731,6 +42043,27 @@ export const AnalyticsUpdateSchema = {
 			"type": "string"
 		},
 		"type": {
+			"enum": [
+				"Arithmetic",
+				"Autocomplete",
+				"Binary",
+				"Checkbox",
+				"CodeGenerator",
+				"Condition",
+				"Date",
+				"DateOfData",
+				"DateTime",
+				"Entity",
+				"File",
+				"FreeText",
+				"Geolocate",
+				"Instruction",
+				"Number",
+				"Photo",
+				"PrimaryEntity",
+				"Radio",
+				"SubmissionDate"
+			],
 			"type": "string"
 		},
 		"value": {
@@ -68592,17 +68925,23 @@ export const DashboardRelationSchema = {
 					"case_contact",
 					"catchment",
 					"city",
+					"commune",
 					"complaint",
 					"country",
 					"disaster",
 					"district",
+					"district_operational",
 					"enumeration_area",
 					"facility",
+					"facility_building",
+					"facility_division",
+					"facility_section",
 					"farm",
 					"fetp_graduate",
 					"field_station",
 					"fiji_aspen_facility",
 					"health_clinic_boundary",
+					"hospital_ward",
 					"household",
 					"incident",
 					"incident_reported",
@@ -68686,17 +69025,23 @@ export const DashboardRelationCreateSchema = {
 					"case_contact",
 					"catchment",
 					"city",
+					"commune",
 					"complaint",
 					"country",
 					"disaster",
 					"district",
+					"district_operational",
 					"enumeration_area",
 					"facility",
+					"facility_building",
+					"facility_division",
+					"facility_section",
 					"farm",
 					"fetp_graduate",
 					"field_station",
 					"fiji_aspen_facility",
 					"health_clinic_boundary",
+					"hospital_ward",
 					"household",
 					"incident",
 					"incident_reported",
@@ -68775,17 +69120,23 @@ export const DashboardRelationUpdateSchema = {
 					"case_contact",
 					"catchment",
 					"city",
+					"commune",
 					"complaint",
 					"country",
 					"disaster",
 					"district",
+					"district_operational",
 					"enumeration_area",
 					"facility",
+					"facility_building",
+					"facility_division",
+					"facility_section",
 					"farm",
 					"fetp_graduate",
 					"field_station",
 					"fiji_aspen_facility",
 					"health_clinic_boundary",
+					"hospital_ward",
 					"household",
 					"incident",
 					"incident_reported",
@@ -69973,17 +70324,23 @@ export const EntitySchema = {
 				"case_contact",
 				"catchment",
 				"city",
+				"commune",
 				"complaint",
 				"country",
 				"disaster",
 				"district",
+				"district_operational",
 				"enumeration_area",
 				"facility",
+				"facility_building",
+				"facility_division",
+				"facility_section",
 				"farm",
 				"fetp_graduate",
 				"field_station",
 				"fiji_aspen_facility",
 				"health_clinic_boundary",
+				"hospital_ward",
 				"household",
 				"incident",
 				"incident_reported",
@@ -70072,17 +70429,23 @@ export const EntityCreateSchema = {
 				"case_contact",
 				"catchment",
 				"city",
+				"commune",
 				"complaint",
 				"country",
 				"disaster",
 				"district",
+				"district_operational",
 				"enumeration_area",
 				"facility",
+				"facility_building",
+				"facility_division",
+				"facility_section",
 				"farm",
 				"fetp_graduate",
 				"field_station",
 				"fiji_aspen_facility",
 				"health_clinic_boundary",
+				"hospital_ward",
 				"household",
 				"incident",
 				"incident_reported",
@@ -70171,17 +70534,23 @@ export const EntityUpdateSchema = {
 				"case_contact",
 				"catchment",
 				"city",
+				"commune",
 				"complaint",
 				"country",
 				"disaster",
 				"district",
+				"district_operational",
 				"enumeration_area",
 				"facility",
+				"facility_building",
+				"facility_division",
+				"facility_section",
 				"farm",
 				"fetp_graduate",
 				"field_station",
 				"fiji_aspen_facility",
 				"health_clinic_boundary",
+				"hospital_ward",
 				"household",
 				"incident",
 				"incident_reported",
@@ -71404,17 +71773,23 @@ export const MapOverlaySchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -71546,17 +71921,23 @@ export const MapOverlaySchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -71678,17 +72059,23 @@ export const MapOverlaySchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -72207,17 +72594,23 @@ export const MapOverlaySchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -72349,17 +72742,23 @@ export const MapOverlaySchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -72481,17 +72880,23 @@ export const MapOverlaySchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -72933,17 +73338,23 @@ export const MapOverlaySchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -73075,17 +73486,23 @@ export const MapOverlaySchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -73207,17 +73624,23 @@ export const MapOverlaySchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -73633,17 +74056,23 @@ export const MapOverlaySchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -73775,17 +74204,23 @@ export const MapOverlaySchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -73907,17 +74342,23 @@ export const MapOverlaySchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -74348,17 +74789,23 @@ export const MapOverlaySchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -74490,17 +74937,23 @@ export const MapOverlaySchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -74622,17 +75075,23 @@ export const MapOverlaySchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -75116,17 +75575,23 @@ export const MapOverlayCreateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -75258,17 +75723,23 @@ export const MapOverlayCreateSchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -75390,17 +75861,23 @@ export const MapOverlayCreateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -75919,17 +76396,23 @@ export const MapOverlayCreateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -76061,17 +76544,23 @@ export const MapOverlayCreateSchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -76193,17 +76682,23 @@ export const MapOverlayCreateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -76645,17 +77140,23 @@ export const MapOverlayCreateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -76787,17 +77288,23 @@ export const MapOverlayCreateSchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -76919,17 +77426,23 @@ export const MapOverlayCreateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -77345,17 +77858,23 @@ export const MapOverlayCreateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -77487,17 +78006,23 @@ export const MapOverlayCreateSchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -77619,17 +78144,23 @@ export const MapOverlayCreateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -78060,17 +78591,23 @@ export const MapOverlayCreateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -78202,17 +78739,23 @@ export const MapOverlayCreateSchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -78334,17 +78877,23 @@ export const MapOverlayCreateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -78821,17 +79370,23 @@ export const MapOverlayUpdateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -78963,17 +79518,23 @@ export const MapOverlayUpdateSchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -79095,17 +79656,23 @@ export const MapOverlayUpdateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -79624,17 +80191,23 @@ export const MapOverlayUpdateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -79766,17 +80339,23 @@ export const MapOverlayUpdateSchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -79898,17 +80477,23 @@ export const MapOverlayUpdateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -80350,17 +80935,23 @@ export const MapOverlayUpdateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -80492,17 +81083,23 @@ export const MapOverlayUpdateSchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -80624,17 +81221,23 @@ export const MapOverlayUpdateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -81050,17 +81653,23 @@ export const MapOverlayUpdateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -81192,17 +81801,23 @@ export const MapOverlayUpdateSchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -81324,17 +81939,23 @@ export const MapOverlayUpdateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -81765,17 +82386,23 @@ export const MapOverlayUpdateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -81907,17 +82534,23 @@ export const MapOverlayUpdateSchema = {
 											"CaseContact",
 											"Catchment",
 											"City",
+											"Commune",
 											"Complaint",
 											"Country",
 											"Disaster",
 											"District",
+											"DistrictOperational",
 											"EnumerationArea",
 											"Facility",
+											"FacilityBuilding",
+											"FacilityDivision",
+											"FacilitySection",
 											"Farm",
 											"FetpGraduate",
 											"FieldStation",
 											"FijiAspenFacility",
 											"HealthClinicBoundary",
+											"HospitalWard",
 											"Household",
 											"Incident",
 											"IncidentReported",
@@ -82039,17 +82672,23 @@ export const MapOverlayUpdateSchema = {
 								"CaseContact",
 								"Catchment",
 								"City",
+								"Commune",
 								"Complaint",
 								"Country",
 								"Disaster",
 								"District",
+								"DistrictOperational",
 								"EnumerationArea",
 								"Facility",
+								"FacilityBuilding",
+								"FacilityDivision",
+								"FacilitySection",
 								"Farm",
 								"FetpGraduate",
 								"FieldStation",
 								"FijiAspenFacility",
 								"HealthClinicBoundary",
+								"HospitalWard",
 								"Household",
 								"Incident",
 								"IncidentReported",
@@ -83013,17 +83652,23 @@ export const PermissionsBasedMeditrakSyncQueueSchema = {
 				"case_contact",
 				"catchment",
 				"city",
+				"commune",
 				"complaint",
 				"country",
 				"disaster",
 				"district",
+				"district_operational",
 				"enumeration_area",
 				"facility",
+				"facility_building",
+				"facility_division",
+				"facility_section",
 				"farm",
 				"fetp_graduate",
 				"field_station",
 				"fiji_aspen_facility",
 				"health_clinic_boundary",
+				"hospital_ward",
 				"household",
 				"incident",
 				"incident_reported",
@@ -83094,17 +83739,23 @@ export const PermissionsBasedMeditrakSyncQueueCreateSchema = {
 				"case_contact",
 				"catchment",
 				"city",
+				"commune",
 				"complaint",
 				"country",
 				"disaster",
 				"district",
+				"district_operational",
 				"enumeration_area",
 				"facility",
+				"facility_building",
+				"facility_division",
+				"facility_section",
 				"farm",
 				"fetp_graduate",
 				"field_station",
 				"fiji_aspen_facility",
 				"health_clinic_boundary",
+				"hospital_ward",
 				"household",
 				"incident",
 				"incident_reported",
@@ -83172,17 +83823,23 @@ export const PermissionsBasedMeditrakSyncQueueUpdateSchema = {
 				"case_contact",
 				"catchment",
 				"city",
+				"commune",
 				"complaint",
 				"country",
 				"disaster",
 				"district",
+				"district_operational",
 				"enumeration_area",
 				"facility",
+				"facility_building",
+				"facility_division",
+				"facility_section",
 				"farm",
 				"fetp_graduate",
 				"field_station",
 				"fiji_aspen_facility",
 				"health_clinic_boundary",
+				"hospital_ward",
 				"household",
 				"incident",
 				"incident_reported",
@@ -85550,17 +86207,23 @@ export const EntityTypeSchema = {
 		"case_contact",
 		"catchment",
 		"city",
+		"commune",
 		"complaint",
 		"country",
 		"disaster",
 		"district",
+		"district_operational",
 		"enumeration_area",
 		"facility",
+		"facility_building",
+		"facility_division",
+		"facility_section",
 		"farm",
 		"fetp_graduate",
 		"field_station",
 		"fiji_aspen_facility",
 		"health_clinic_boundary",
+		"hospital_ward",
 		"household",
 		"incident",
 		"incident_reported",
@@ -85876,17 +86539,23 @@ export const MeditrakSurveyResponseRequestSchema = {
 							"case_contact",
 							"catchment",
 							"city",
+							"commune",
 							"complaint",
 							"country",
 							"disaster",
 							"district",
+							"district_operational",
 							"enumeration_area",
 							"facility",
+							"facility_building",
+							"facility_division",
+							"facility_section",
 							"farm",
 							"fetp_graduate",
 							"field_station",
 							"fiji_aspen_facility",
 							"health_clinic_boundary",
+							"hospital_ward",
 							"household",
 							"incident",
 							"incident_reported",
@@ -86676,17 +87345,23 @@ export const EntityResponseSchema = {
 				"case_contact",
 				"catchment",
 				"city",
+				"commune",
 				"complaint",
 				"country",
 				"disaster",
 				"district",
+				"district_operational",
 				"enumeration_area",
 				"facility",
+				"facility_building",
+				"facility_division",
+				"facility_section",
 				"farm",
 				"fetp_graduate",
 				"field_station",
 				"fiji_aspen_facility",
 				"health_clinic_boundary",
+				"hospital_ward",
 				"household",
 				"incident",
 				"incident_reported",
@@ -95773,17 +96448,23 @@ export const TranslatedMapOverlaySchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -95915,17 +96596,23 @@ export const TranslatedMapOverlaySchema = {
 									"CaseContact",
 									"Catchment",
 									"City",
+									"Commune",
 									"Complaint",
 									"Country",
 									"Disaster",
 									"District",
+									"DistrictOperational",
 									"EnumerationArea",
 									"Facility",
+									"FacilityBuilding",
+									"FacilityDivision",
+									"FacilitySection",
 									"Farm",
 									"FetpGraduate",
 									"FieldStation",
 									"FijiAspenFacility",
 									"HealthClinicBoundary",
+									"HospitalWard",
 									"Household",
 									"Incident",
 									"IncidentReported",
@@ -96047,17 +96734,23 @@ export const TranslatedMapOverlaySchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -96599,17 +97292,23 @@ export const TranslatedMapOverlaySchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -96741,17 +97440,23 @@ export const TranslatedMapOverlaySchema = {
 									"CaseContact",
 									"Catchment",
 									"City",
+									"Commune",
 									"Complaint",
 									"Country",
 									"Disaster",
 									"District",
+									"DistrictOperational",
 									"EnumerationArea",
 									"Facility",
+									"FacilityBuilding",
+									"FacilityDivision",
+									"FacilitySection",
 									"Farm",
 									"FetpGraduate",
 									"FieldStation",
 									"FijiAspenFacility",
 									"HealthClinicBoundary",
+									"HospitalWard",
 									"Household",
 									"Incident",
 									"IncidentReported",
@@ -96873,17 +97578,23 @@ export const TranslatedMapOverlaySchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -97348,17 +98059,23 @@ export const TranslatedMapOverlaySchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -97490,17 +98207,23 @@ export const TranslatedMapOverlaySchema = {
 									"CaseContact",
 									"Catchment",
 									"City",
+									"Commune",
 									"Complaint",
 									"Country",
 									"Disaster",
 									"District",
+									"DistrictOperational",
 									"EnumerationArea",
 									"Facility",
+									"FacilityBuilding",
+									"FacilityDivision",
+									"FacilitySection",
 									"Farm",
 									"FetpGraduate",
 									"FieldStation",
 									"FijiAspenFacility",
 									"HealthClinicBoundary",
+									"HospitalWard",
 									"Household",
 									"Incident",
 									"IncidentReported",
@@ -97622,17 +98345,23 @@ export const TranslatedMapOverlaySchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -98071,17 +98800,23 @@ export const TranslatedMapOverlaySchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -98213,17 +98948,23 @@ export const TranslatedMapOverlaySchema = {
 									"CaseContact",
 									"Catchment",
 									"City",
+									"Commune",
 									"Complaint",
 									"Country",
 									"Disaster",
 									"District",
+									"DistrictOperational",
 									"EnumerationArea",
 									"Facility",
+									"FacilityBuilding",
+									"FacilityDivision",
+									"FacilitySection",
 									"Farm",
 									"FetpGraduate",
 									"FieldStation",
 									"FijiAspenFacility",
 									"HealthClinicBoundary",
+									"HospitalWard",
 									"Household",
 									"Incident",
 									"IncidentReported",
@@ -98345,17 +99086,23 @@ export const TranslatedMapOverlaySchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -98809,17 +99556,23 @@ export const TranslatedMapOverlaySchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
@@ -98951,17 +99704,23 @@ export const TranslatedMapOverlaySchema = {
 									"CaseContact",
 									"Catchment",
 									"City",
+									"Commune",
 									"Complaint",
 									"Country",
 									"Disaster",
 									"District",
+									"DistrictOperational",
 									"EnumerationArea",
 									"Facility",
+									"FacilityBuilding",
+									"FacilityDivision",
+									"FacilitySection",
 									"Farm",
 									"FetpGraduate",
 									"FieldStation",
 									"FijiAspenFacility",
 									"HealthClinicBoundary",
+									"HospitalWard",
 									"Household",
 									"Incident",
 									"IncidentReported",
@@ -99083,17 +99842,23 @@ export const TranslatedMapOverlaySchema = {
 						"CaseContact",
 						"Catchment",
 						"City",
+						"Commune",
 						"Complaint",
 						"Country",
 						"Disaster",
 						"District",
+						"DistrictOperational",
 						"EnumerationArea",
 						"Facility",
+						"FacilityBuilding",
+						"FacilityDivision",
+						"FacilitySection",
 						"Farm",
 						"FetpGraduate",
 						"FieldStation",
 						"FijiAspenFacility",
 						"HealthClinicBoundary",
+						"HospitalWard",
 						"Household",
 						"Incident",
 						"IncidentReported",
diff --git a/packages/types/src/types/models.ts b/packages/types/src/types/models.ts
index 34d2ffae56..4f89612965 100644
--- a/packages/types/src/types/models.ts
+++ b/packages/types/src/types/models.ts
@@ -84,7 +84,7 @@ export interface Analytics {
   'entity_name'?: string | null;
   'event_id'?: string | null;
   'month_period'?: string | null;
-  'type'?: string | null;
+  'type'?: QuestionType | null;
   'value'?: string | null;
   'week_period'?: string | null;
   'year_period'?: string | null;
@@ -98,7 +98,7 @@ export interface AnalyticsCreate {
   'entity_name'?: string | null;
   'event_id'?: string | null;
   'month_period'?: string | null;
-  'type'?: string | null;
+  'type'?: QuestionType | null;
   'value'?: string | null;
   'week_period'?: string | null;
   'year_period'?: string | null;
@@ -112,7 +112,7 @@ export interface AnalyticsUpdate {
   'entity_name'?: string | null;
   'event_id'?: string | null;
   'month_period'?: string | null;
-  'type'?: string | null;
+  'type'?: QuestionType | null;
   'value'?: string | null;
   'week_period'?: string | null;
   'year_period'?: string | null;
@@ -1747,8 +1747,14 @@ export enum EntityType {
   'msupply_store' = 'msupply_store',
   'complaint' = 'complaint',
   'water_sample' = 'water_sample',
+  'facility_building' = 'facility_building',
+  'facility_division' = 'facility_division',
+  'facility_section' = 'facility_section',
+  'hospital_ward' = 'hospital_ward',
   'farm' = 'farm',
   'repair_request' = 'repair_request',
+  'district_operational' = 'district_operational',
+  'commune' = 'commune',
   'business' = 'business',
   'health_clinic_boundary' = 'health_clinic_boundary',
   'enumeration_area' = 'enumeration_area',
diff --git a/packages/utils/src/request.js b/packages/utils/src/request.js
index 8bad6e06db..6246a19c64 100644
--- a/packages/utils/src/request.js
+++ b/packages/utils/src/request.js
@@ -7,7 +7,7 @@
 import nodeFetch, { Response as NodeFetchResponse } from 'node-fetch';
 import { CustomError } from './errors';
 
-const DEFAULT_MAX_WAIT_TIME = 45 * 1000; // 45 seconds in milliseconds
+const DEFAULT_MAX_WAIT_TIME = 120 * 1000; // 120 seconds in milliseconds
 
 const buildParameterString = (key, value) => {
   return Array.isArray(value)
diff --git a/scripts/bash/downloadEnvironmentVariables.sh b/scripts/bash/downloadEnvironmentVariables.sh
index 56208db512..ad382b1693 100755
--- a/scripts/bash/downloadEnvironmentVariables.sh
+++ b/scripts/bash/downloadEnvironmentVariables.sh
@@ -47,6 +47,11 @@ load_env_file_from_bw () {
     sed -i -e "s/\[deployment-name\]/${DEPLOYMENT_NAME}/g" "${ENV_FILE_PATH}"
 
 
+    if [[ -v DOMAIN ]]; then
+        # Replace the placeholder [domain]
+        sed -i -e "s/\[domain\]/${DOMAIN}/g" ${ENV_FILE_PATH}
+    fi
+
     if [[ "${DEPLOYMENT_NAME}" == *-e2e || "${DEPLOYMENT_NAME}" == e2e ]]; then
         # Update e2e environment variables
         if [[ ${FILE_NAME} == "aggregation" ]]; then

From 8718d966154bb574f83673baefd4609b3392bbcd Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Fri, 17 May 2024 12:57:45 +1200
Subject: [PATCH 11/26] fix(tupaiaWeb): RN-1290: Handle multiple underscores in
 measure level (#5637)

Co-authored-by: Andrew <vanbeekandrew@gmail.com>
---
 .../src/features/Map/MapOverlaysLayer/PolygonLayer.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tupaia-web/src/features/Map/MapOverlaysLayer/PolygonLayer.tsx b/packages/tupaia-web/src/features/Map/MapOverlaysLayer/PolygonLayer.tsx
index 53cb626cd5..7092fce95b 100644
--- a/packages/tupaia-web/src/features/Map/MapOverlaysLayer/PolygonLayer.tsx
+++ b/packages/tupaia-web/src/features/Map/MapOverlaysLayer/PolygonLayer.tsx
@@ -105,7 +105,7 @@ export const PolygonLayer = ({ measureData = [], serieses = [], isLoading }: Pol
     if (
       !isLoading &&
       isPolygonSerieses &&
-      overlayLevels.includes(measure?.type?.toLowerCase().replace('_', '')) // handle differences between camelCase and snake_case
+      overlayLevels.includes(measure?.type?.toLowerCase().replaceAll('_', '')) // handle differences between camelCase and snake_case
     ) {
       // The active entity is part of the data visual so display it as a shaded polygon rather
       // than an active polygon

From 94620620a29b217feec435c5d1f805c7925dbfa6 Mon Sep 17 00:00:00 2001
From: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date: Fri, 17 May 2024 16:14:40 +1200
Subject: [PATCH 12/26] feat(adminPanel): RN-1197: update table columns (#5634)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* update Permissions page

* update Users page

* update Survey Responses page

update copyright message

* update Surveys page

update copyright message

* update Map Overlay Groups page

use even column widths

* update Map Overlay Group Relations Page

autocomplete for child code

* restore Approval Status on Survey Responses page

* fix map overlay group relation creation

* revert to IDs for map overlay group relations

* update map overlay page columns

* Revert "update map overlay page columns"

This reverts commit 3313355ce69f09897af99825de24629d6a4231b8.

* update columns without hiding from ‘Edit’

* remove unneeded properties

* use endpoint const

* fix null modal content

* Permissions page: fix missing Last Name column

---------

Co-authored-by: Andrew <vanbeekandrew@gmail.com>
---
 .../src/routes/surveys/surveyResponses.js     | 13 +---
 .../admin-panel/src/routes/surveys/surveys.js | 12 +---
 .../src/routes/users/permissions.js           | 14 ++---
 .../admin-panel/src/routes/users/users.jsx    | 34 ++++++-----
 .../mapOverlayGroupRelations.js               |  4 +-
 .../routes/visualisations/mapOverlayGroups.js | 26 ++++----
 .../src/routes/visualisations/mapOverlays.jsx | 61 ++++++++++---------
 7 files changed, 77 insertions(+), 87 deletions(-)

diff --git a/packages/admin-panel/src/routes/surveys/surveyResponses.js b/packages/admin-panel/src/routes/surveys/surveyResponses.js
index 2271793230..9581fc576b 100644
--- a/packages/admin-panel/src/routes/surveys/surveyResponses.js
+++ b/packages/admin-panel/src/routes/surveys/surveyResponses.js
@@ -1,6 +1,6 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import { getBrowserTimeZone } from '@tupaia/utils';
@@ -57,12 +57,6 @@ const dateOfData = {
   },
 };
 
-const outdated = {
-  Header: 'Outdated',
-  source: 'outdated',
-  type: 'boolean',
-};
-
 const approvalStatus = {
   Header: 'Approval Status',
   source: 'approval_status',
@@ -88,7 +82,6 @@ export const SURVEY_RESPONSE_COLUMNS = [
   assessorName,
   date,
   dateOfData,
-  outdated,
   approvalStatus,
   {
     Header: 'Export',
diff --git a/packages/admin-panel/src/routes/surveys/surveys.js b/packages/admin-panel/src/routes/surveys/surveys.js
index 47404c06bd..a4fe18b8c1 100644
--- a/packages/admin-panel/src/routes/surveys/surveys.js
+++ b/packages/admin-panel/src/routes/surveys/surveys.js
@@ -1,6 +1,6 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import { SurveyEditFields } from '../../surveys/SurveyEditFields';
@@ -203,12 +203,6 @@ const SURVEY_COLUMNS = [
     Header: 'Survey Group',
     source: 'survey_group.name',
   },
-  SURVEY_FIELDS.can_repeat,
-  SURVEY_FIELDS.period_granularity,
-  {
-    Header: 'Service Type',
-    source: 'data_group.service_type',
-  },
   {
     Header: 'Export',
     type: 'export',
diff --git a/packages/admin-panel/src/routes/users/permissions.js b/packages/admin-panel/src/routes/users/permissions.js
index ad566c11ae..747d0baa82 100644
--- a/packages/admin-panel/src/routes/users/permissions.js
+++ b/packages/admin-panel/src/routes/users/permissions.js
@@ -9,7 +9,7 @@ export const PERMISSIONS_COLUMNS = [
     },
   },
   {
-    Header: 'Permission Group',
+    Header: 'Permission group',
     source: 'permission_group.name',
     editConfig: {
       optionsEndpoint: 'permissionGroups',
@@ -19,19 +19,19 @@ export const PERMISSIONS_COLUMNS = [
 
 const FIELDS = [
   {
-    Header: 'User',
+    Header: 'First name',
     source: 'user.first_name',
-    accessor: rowData => `${rowData['user.first_name']} ${rowData['user.last_name']}`,
     editable: false,
   },
   {
-    Header: 'Email',
-    source: 'user.email',
+    Header: 'Last name',
+    source: 'user.last_name',
     editable: false,
   },
   {
-    source: 'user.last_name',
-    show: false,
+    Header: 'Email address',
+    source: 'user.email',
+    editable: false,
   },
   ...PERMISSIONS_COLUMNS,
   {
diff --git a/packages/admin-panel/src/routes/users/users.jsx b/packages/admin-panel/src/routes/users/users.jsx
index e1c2720143..e767f338d4 100644
--- a/packages/admin-panel/src/routes/users/users.jsx
+++ b/packages/admin-panel/src/routes/users/users.jsx
@@ -2,6 +2,7 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import React from 'react';
 import { Tooltip as TooltipComponent } from '@tupaia/ui-components';
 import { VerifiedFilter } from '../../table/columnTypes/columnFilters';
@@ -22,7 +23,15 @@ const VerifiedCell = ({ value }) => {
   );
 };
 
-const FIELDS = [
+const EDIT_FIELDS = [
+  {
+    Header: 'First Name',
+    source: 'first_name',
+  },
+  {
+    Header: 'Last Name',
+    source: 'last_name',
+  },
   {
     Header: 'Email Address',
     source: 'email',
@@ -41,18 +50,6 @@ const FIELDS = [
     source: 'employer',
     type: 'tooltip',
   },
-];
-
-const EDIT_FIELDS = [
-  {
-    Header: 'First Name',
-    source: 'first_name',
-  },
-  {
-    Header: 'Last Name',
-    source: 'last_name',
-  },
-  ...FIELDS,
   {
     Header: 'Verified',
     source: 'verified_email',
@@ -91,7 +88,16 @@ const COLUMNS = [
     source: 'last_name',
     width: 150,
   },
-  ...FIELDS,
+  {
+    Header: 'Email Address',
+    source: 'email',
+    type: 'tooltip',
+  },
+  {
+    Header: 'Employer',
+    source: 'employer',
+    type: 'tooltip',
+  },
   {
     Header: 'Verified',
     source: 'verified_email',
diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js b/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
index 74c753d39f..170fd9dc56 100644
--- a/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
@@ -1,6 +1,6 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 export const RELATION_ENDPOINT = 'mapOverlayGroupRelations';
 
@@ -17,7 +17,7 @@ const FIELDS = [
     },
   },
   {
-    Header: 'Child Id',
+    Header: 'Child ID',
     source: 'child_id',
     type: 'tooltip',
     editConfig: {
diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js b/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
index 4b866b5223..590d6fb79b 100644
--- a/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
@@ -1,10 +1,16 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 const MAP_OVERLAY_GROUPS_ENDPOINT = 'mapOverlayGroups';
 
-const EDIT_FIELDS = [
+const FIELDS = [
+  {
+    Header: 'ID',
+    source: 'id',
+    show: false,
+  },
   {
     Header: 'Code',
     source: 'code',
@@ -13,18 +19,8 @@ const EDIT_FIELDS = [
   {
     Header: 'Name',
     source: 'name',
-    width: 140,
-    type: 'tooltip',
-  },
-];
-
-const FIELDS = [
-  {
-    Header: 'ID',
-    source: 'id',
     type: 'tooltip',
   },
-  ...EDIT_FIELDS,
 ];
 
 const COLUMNS = [
@@ -34,8 +30,8 @@ const COLUMNS = [
     type: 'edit',
     actionConfig: {
       title: 'Edit Map Overlay Group',
-      editEndpoint: 'mapOverlayGroups',
-      fields: EDIT_FIELDS,
+      editEndpoint: MAP_OVERLAY_GROUPS_ENDPOINT,
+      fields: FIELDS,
     },
   },
 ];
@@ -93,7 +89,7 @@ const CREATE_CONFIG = {
   title: 'Create a new Map overlay group',
   actionConfig: {
     editEndpoint: MAP_OVERLAY_GROUPS_ENDPOINT,
-    fields: EDIT_FIELDS,
+    fields: FIELDS,
   },
 };
 
diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx b/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
index bb70a7d429..b3ccd4d482 100644
--- a/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
@@ -33,19 +33,6 @@ const FIELDS = [
       sourceKey: 'permission_group',
     },
   },
-  {
-    Header: 'Linked Measures',
-    source: 'linked_measures',
-    width: 160,
-    Cell: ({ value }) => prettyArray(value),
-    Filter: ArrayFilter,
-    editConfig: {
-      optionsEndpoint: MAP_OVERLAYS_ENDPOINT,
-      optionLabelKey: 'id',
-      sourceKey: 'linked_measures',
-      allowMultipleValues: true,
-    },
-  },
   {
     Header: 'Config',
     source: 'config',
@@ -53,17 +40,6 @@ const FIELDS = [
     width: 200,
     editConfig: { type: 'jsonEditor' },
   },
-  {
-    Header: 'Entity attributes filters',
-    source: 'entity_attributes_filter',
-    type: 'jsonTooltip',
-    width: 200,
-    editConfig: {
-      type: 'jsonEditor',
-      secondaryLabel:
-        'This field will be used to filter the entities that this map overlay will have data for. This field is case sensitive. It is an extension of `config.measureLevel`. E.g. {"facility_type": "Hospital"}',
-    },
-  },
   {
     Header: 'Country Codes',
     source: 'country_codes',
@@ -92,12 +68,6 @@ const FIELDS = [
       allowMultipleValues: true,
     },
   },
-  {
-    Header: 'Report Code',
-    source: 'report_code',
-    width: 140,
-    type: 'tooltip',
-  },
   {
     Header: 'Legacy',
     source: 'legacy',
@@ -114,6 +84,37 @@ const extraEditFields = [
     source: 'id',
     show: false,
   },
+  {
+    Header: 'Linked measures',
+    source: 'linked_measures',
+    Filter: ArrayFilter,
+    editConfig: {
+      optionsEndpoint: MAP_OVERLAYS_ENDPOINT,
+      optionLabelKey: 'id',
+      sourceKey: 'linked_measures',
+      allowMultipleValues: true,
+    },
+  },
+  {
+    Header: 'Entity attributes filters',
+    source: 'entity_attributes_filter',
+    editConfig: {
+      type: 'jsonEditor',
+      secondaryLabel: (
+        <>
+          Case-sensitive. This field will be used to filter the entities that this map overlay will
+          have data for. It is an extension of <code>config.measureLevel</code>. e.g.&nbsp;
+          <code>
+            {'{'} "facility_type": "Hospital" {'}'}
+          </code>
+        </>
+      ),
+    },
+  },
+  {
+    Header: 'Report code',
+    source: 'report_code',
+  },
   {
     Header: 'Edit using Visualisation Builder',
     type: 'link',

From 19b5a39e1770cb5efb55c5eed212451044b99cd7 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Mon, 20 May 2024 09:20:36 +1200
Subject: [PATCH 13/26] fix(adminPanel): Fix re-render issue on tables (#5648)

* fix(adminPanel): Fix re-render issue on tables

* Reset sorting when table is reinitialised

* Update Cells.jsx
---
 .../src/table/DataFetchingTable/Cells.jsx     |  3 +--
 .../DataFetchingTable/DataFetchingTable.jsx   | 19 ++++++++++++-------
 packages/admin-panel/src/table/reducer.js     |  3 ---
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx b/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx
index 7989c126e0..dac7f2fd8e 100644
--- a/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx
+++ b/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx
@@ -118,8 +118,7 @@ TableCell.defaultProps = {
 const CellLink = styled(Link)`
   color: inherit;
   text-decoration: none;
-  &:hover,
-  &:focus {
+  &:hover {
     tr:has(&) td > * {
       background-color: ${({ theme }) => `${theme.palette.primary.main}33`};
     }
diff --git a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
index dfd1c74046..e86e72df83 100644
--- a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
+++ b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
@@ -121,6 +121,7 @@ const DataFetchingTableComponent = ({
     gotoPage,
     setPageSize,
     visibleColumns,
+    setSortBy,
     // Get the state from the instance
     state: { pageIndex: tablePageIndex, pageSize: tablePageSize, sortBy: tableSorting },
   } = useTable(
@@ -141,22 +142,19 @@ const DataFetchingTableComponent = ({
     usePagination,
   );
 
-  // Listen for changes in pagination and use the state to fetch our new data
+  //  Listen for changes in pagination and use the state to fetch our new data
   useEffect(() => {
     onPageChange(tablePageIndex);
   }, [tablePageIndex]);
 
   useEffect(() => {
     onPageSizeChange(tablePageSize);
+    gotoPage(0);
   }, [tablePageSize]);
 
-  useEffect(() => {
-    // If the redux pageIndex changes, update the table pageIndex
-    gotoPage(pageIndex);
-  }, [pageIndex]);
-
   useEffect(() => {
     onSortedChange(tableSorting);
+    gotoPage(0);
   }, [tableSorting]);
 
   useEffect(() => {
@@ -179,8 +177,15 @@ const DataFetchingTableComponent = ({
     } else {
       initialiseTable();
     }
+    gotoPage(0);
+    setSortBy([]); // reset sorting when table is re-initialised
   }, [endpoint, baseFilter]);
 
+  const onChangeFilters = newFilters => {
+    onFilteredChange(newFilters);
+    gotoPage(0);
+  };
+
   const isLoading = isFetchingData || isChangingDataOnServer;
 
   const displayFilterRow = visibleColumns.some(column => column.filterable !== false);
@@ -246,7 +251,7 @@ const DataFetchingTableComponent = ({
                     <FilterCell
                       key={column.id}
                       column={column}
-                      onFilteredChange={onFilteredChange}
+                      onFilteredChange={onChangeFilters}
                       filters={filters}
                       width={column.colWidth}
                       isButtonColumn={column.isButtonColumn}
diff --git a/packages/admin-panel/src/table/reducer.js b/packages/admin-panel/src/table/reducer.js
index 6e73089a6f..d66826c483 100644
--- a/packages/admin-panel/src/table/reducer.js
+++ b/packages/admin-panel/src/table/reducer.js
@@ -72,11 +72,9 @@ const stateChanges = {
   [PAGE_INDEX_CHANGE]: payload => payload,
   [PAGE_SIZE_CHANGE]: payload => ({
     ...payload,
-    pageIndex: 0,
   }),
   [FILTERS_CHANGE]: payload => ({
     ...payload,
-    pageIndex: 0,
   }),
   [EXPANSIONS_CHANGE]: payload => payload,
   [EXPANSIONS_TAB_CHANGE]: ({ rowId, tabValue }, currentState) => ({
@@ -88,7 +86,6 @@ const stateChanges = {
   [COLUMNS_RESIZE]: payload => payload,
   [SORTING_CHANGE]: payload => ({
     ...payload,
-    pageIndex: 0,
   }),
 };
 

From da2741732ccf572ea9735151a4a11a15dc175859 Mon Sep 17 00:00:00 2001
From: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date: Mon, 20 May 2024 10:10:30 +1200
Subject: [PATCH 14/26] tweak(adminPanel): RN-1209: standardise titles in
 creation modals (#5629)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* introduce `resourceName` prop

* use prop in `SecondaryNavbar`

* helper functions

* move helpers

* use dynamic title in breadcrumbs

* fix `generateTitle`

* reorder

* resource name in `TreeResourcePage`

* define `RESOURCE_NAME`S

* update Visualisation tabs

* update dashboard items page

* update copyright messages

* sentence case in surveys page

ditto survey page

* ditto data elements

* ditto data groups

* ditto data mapping

* ditto options sets

* ditto question

* ditto survey responses

* ditto sync groups

* ditto access requests

* use `RESOURCE_NAME` in permission groups page

* em dash

* sentence case permissions

* ditto users

* ditto users tab routes

* ditto entity hierarchy

* ditto projects

* `RESOURCE_NAME` in superset instances page

* ditto entities

* use `RESOURCE_NAME` in landing pages

* sentence case in dashboard items

* fix straggling title case labels

* sentence casing on Strive page

* remove redundant spread

* fix “New dashboard relation” modal header

* fix modal title in Users page

* sentence casing in Permissions page

* parameterise modal title in Permissons page

* fix: use custom titles in `openBulkEditModal`

* shorter “New dashboard relation” title

---------

Co-authored-by: Andrew <vanbeekandrew@gmail.com>
---
 packages/admin-panel/src/editor/actions.js    |  1 +
 .../admin-panel/src/layout/Breadcrumbs.jsx    |  7 +-
 .../src/layout/navigation/SecondaryNavbar.jsx | 10 +--
 packages/admin-panel/src/pages/StrivePage.jsx |  8 +--
 .../pages/resources/EntityHierarchiesPage.jsx |  3 +-
 .../src/pages/resources/ResourcePage.jsx      | 18 ++++--
 .../src/pages/resources/TreeResourcePage.jsx  | 28 ++++++--
 .../src/pages/resources/resourceName.js       | 10 +++
 .../src/routes/entities/countries.js          |  7 +-
 .../src/routes/entities/entities.js           | 13 ++--
 .../src/routes/entities/entityTypes.js        |  4 +-
 .../src/routes/externalData/dhisInstances.js  |  6 +-
 .../externalDatabaseConnections.js            | 12 ++--
 .../externalData/msupplySupersetInstances.js  |  6 +-
 .../src/routes/projects/entityHierarchy.js    |  9 ++-
 .../src/routes/projects/landingPages.jsx      | 14 ++--
 .../src/routes/projects/projects.js           | 22 ++++---
 .../src/routes/surveys/dataElements.js        | 11 ++--
 .../src/routes/surveys/dataGroups.js          | 13 ++--
 .../src/routes/surveys/dataMapping.js         | 17 +++--
 .../src/routes/surveys/optionSets.js          | 19 ++++--
 .../src/routes/surveys/questions.js           | 12 ++--
 .../src/routes/surveys/surveyResponses.js     | 15 +++--
 .../admin-panel/src/routes/surveys/surveys.js | 64 ++++++++++---------
 .../src/routes/surveys/syncGroups.js          | 14 ++--
 .../src/routes/users/accessRequests.js        | 26 ++++----
 .../src/routes/users/permissionGroups.jsx     | 11 ++--
 .../routes/users/permissionGroupsViewer.js    |  4 +-
 .../src/routes/users/permissions.js           | 21 ++++--
 .../admin-panel/src/routes/users/users.jsx    | 23 ++++---
 .../src/routes/users/usersTabRoutes.jsx       |  2 +-
 .../routes/visualisations/dashboardItems.jsx  | 13 ++--
 .../visualisations/dashboardMailingLists.js   | 12 ++--
 .../visualisations/dashboardRelations.js      | 24 +++----
 .../src/routes/visualisations/dashboards.js   | 30 +++++----
 .../src/routes/visualisations/dataTables.js   | 10 +--
 .../src/routes/visualisations/indicators.js   |  8 ++-
 .../routes/visualisations/legacyReports.js    | 14 ++--
 .../mapOverlayGroupRelations.js               | 21 +++---
 .../routes/visualisations/mapOverlayGroups.js | 18 +++---
 .../src/routes/visualisations/mapOverlays.jsx | 16 +++--
 .../src/routes/visualisations/socialFeed.jsx  | 10 ++-
 .../ResubmitSurveyResponseModal.jsx           |  2 +-
 43 files changed, 366 insertions(+), 242 deletions(-)
 create mode 100644 packages/admin-panel/src/pages/resources/resourceName.js

diff --git a/packages/admin-panel/src/editor/actions.js b/packages/admin-panel/src/editor/actions.js
index d88b7e0484..59fa6bd94d 100644
--- a/packages/admin-panel/src/editor/actions.js
+++ b/packages/admin-panel/src/editor/actions.js
@@ -80,6 +80,7 @@ export const openBulkEditModal =
 
       dispatch({
         type: EDITOR_OPEN,
+        title,
         fields,
         recordData: {},
         endpoint: bulkUpdateEndpoint,
diff --git a/packages/admin-panel/src/layout/Breadcrumbs.jsx b/packages/admin-panel/src/layout/Breadcrumbs.jsx
index 1a569a0c73..40aacd8d45 100644
--- a/packages/admin-panel/src/layout/Breadcrumbs.jsx
+++ b/packages/admin-panel/src/layout/Breadcrumbs.jsx
@@ -6,8 +6,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { ArrowBack } from '@material-ui/icons';
-import { Typography, Breadcrumbs as MuiBreadcrumbs, IconButton } from '@material-ui/core';
+import { Breadcrumbs as MuiBreadcrumbs, IconButton, Typography } from '@material-ui/core';
 import styled from 'styled-components';
+import { generateTitle } from '../pages/resources/resourceName';
 
 const Wrapper = styled.div`
   display: flex;
@@ -28,6 +29,8 @@ const ActiveBreadcrumb = styled(Typography)`
 export const Breadcrumbs = ({ parent, displayProperty, title, details, getDisplayValue }) => {
   const itemDisplayValue = getDisplayValue ? getDisplayValue(details) : details?.[displayProperty];
 
+  const parentTitle = parent ? parent.title ?? generateTitle(parent.resourceName) : null;
+
   return (
     <Wrapper>
       <BackButton component={Link} to={parent?.to || '/'}>
@@ -35,7 +38,7 @@ export const Breadcrumbs = ({ parent, displayProperty, title, details, getDispla
       </BackButton>
       <MuiBreadcrumbs separator="|">
         <ActiveBreadcrumb component={Link} to={parent?.to || '/'}>
-          {parent?.title}
+          {parentTitle}
         </ActiveBreadcrumb>
         <ActiveBreadcrumb>{title}</ActiveBreadcrumb>
         {details && <Typography>{itemDisplayValue}</Typography>}
diff --git a/packages/admin-panel/src/layout/navigation/SecondaryNavbar.jsx b/packages/admin-panel/src/layout/navigation/SecondaryNavbar.jsx
index 5c7374c98f..2905b2c78b 100644
--- a/packages/admin-panel/src/layout/navigation/SecondaryNavbar.jsx
+++ b/packages/admin-panel/src/layout/navigation/SecondaryNavbar.jsx
@@ -5,10 +5,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { matchPath, Link, useLocation } from 'react-router-dom';
+import { Link, matchPath, useLocation } from 'react-router-dom';
 import { Button } from '@material-ui/core';
 import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
 import { labelToId } from '../../utilities';
+import { generateTitle } from '../../pages/resources/resourceName';
 
 const Wrapper = styled.div`
   max-width: 100%;
@@ -216,14 +217,15 @@ export const SecondaryNavbar = ({ links: linkInput, basePath }) => {
     return !!matchResult || !!nestedViewMatch;
   };
 
-  const links = linkInput?.map(({ exact, path, title, ...rest }) => {
+  const links = linkInput?.map(({ exact, path, resourceName, title, ...rest }) => {
+    const linkTitle = title ?? generateTitle(resourceName);
     const target = exact ? path : `${basePath}${path}`;
 
     return {
       ...rest,
-      title,
+      title: linkTitle,
       target,
-      id: `app-sub-view-${labelToId(title)}`,
+      id: `app-sub-view-${labelToId(linkTitle)}`,
       active: getIsActive({
         ...rest,
         target,
diff --git a/packages/admin-panel/src/pages/StrivePage.jsx b/packages/admin-panel/src/pages/StrivePage.jsx
index 0c2fdc4367..6893d1cf84 100644
--- a/packages/admin-panel/src/pages/StrivePage.jsx
+++ b/packages/admin-panel/src/pages/StrivePage.jsx
@@ -6,17 +6,17 @@
 import React from 'react';
 import styled from 'styled-components';
 import Typography from '@material-ui/core/Typography';
-import { PageHeader, PageBody } from '../widgets';
+import { PageBody, PageHeader } from '../widgets';
 
 const importConfig = {
-  title: 'Import Lab Results or Vector Data',
+  title: 'Import lab results or vector data',
   actionConfig: {
     importEndpoint: 'striveLabResults',
   },
 };
 
 const StyledBody = styled(PageBody)`
-  padding-top: 2rem;
+  padding-block-start: 2rem;
 `;
 
 export const StrivePage = () => {
@@ -26,7 +26,7 @@ export const StrivePage = () => {
       <Typography variant="h4" gutterBottom>
         Import lab results or vector data
       </Typography>
-      <Typography>Use the above Import button to import lab results or vector data.</Typography>
+      <Typography>Use the above Import button to import lab results or vector data</Typography>
     </StyledBody>
   );
 };
diff --git a/packages/admin-panel/src/pages/resources/EntityHierarchiesPage.jsx b/packages/admin-panel/src/pages/resources/EntityHierarchiesPage.jsx
index b1d831855a..76cd499149 100644
--- a/packages/admin-panel/src/pages/resources/EntityHierarchiesPage.jsx
+++ b/packages/admin-panel/src/pages/resources/EntityHierarchiesPage.jsx
@@ -10,6 +10,7 @@ import { getSortByKey } from '@tupaia/utils';
 import { get } from '../../VizBuilderApp/api';
 import { TreeResourcePage } from './TreeResourcePage';
 import { EntityHierarchyExportModal } from '../../importExport';
+import { RESOURCE_NAME } from '../../routes/projects/entityHierarchy';
 
 const fetchRoot = async () => get('hierarchies');
 
@@ -40,7 +41,7 @@ const fetchBranch = async (rootNode, node) => {
 
 export const EntityHierarchiesPage = props => (
   <TreeResourcePage
-    title="Entity Hierarchies"
+    resourceName={RESOURCE_NAME}
     fetchRoot={fetchRoot}
     fetchBranch={fetchBranch}
     ExportModalComponent={EntityHierarchyExportModal}
diff --git a/packages/admin-panel/src/pages/resources/ResourcePage.jsx b/packages/admin-panel/src/pages/resources/ResourcePage.jsx
index 8fcecefb5a..0cffe12601 100644
--- a/packages/admin-panel/src/pages/resources/ResourcePage.jsx
+++ b/packages/admin-panel/src/pages/resources/ResourcePage.jsx
@@ -9,13 +9,14 @@ import styled from 'styled-components';
 import { useParams } from 'react-router-dom';
 import { DataFetchingTable } from '../../table';
 import { EditModal } from '../../editor';
-import { PageHeader, PageBody } from '../../widgets';
+import { PageBody, PageHeader } from '../../widgets';
 import { getExplodedFields } from '../../utilities';
 import { LogsModal } from '../../logsTable';
 import { QrCodeModal } from '../../qrCode';
 import { ResubmitSurveyResponseModal } from '../../surveyResponse/ResubmitSurveyResponseModal';
 import { Breadcrumbs } from '../../layout';
 import { useItemDetails } from '../../api/queries/useResourceDetails';
+import { generateTitle } from './resourceName';
 
 const Container = styled(PageBody)`
   // This is a work around to put the scroll bar at the top of the section by rotating the
@@ -66,6 +67,7 @@ const useEndpoint = (endpoint, details, params) => {
 };
 
 export const ResourcePage = ({
+  resourceName,
   columns,
   createConfig,
   endpoint,
@@ -99,6 +101,8 @@ export const ResourcePage = ({
 
   const isDetailsPage = !!parent;
 
+  const pageTitle = title ?? generateTitle(resourceName);
+
   const getHasPermission = actionType => {
     if (!needsBESAdminAccess) return true;
     if (needsBESAdminAccess.includes(actionType)) return !!hasBESAdminAccess;
@@ -119,14 +123,14 @@ export const ResourcePage = ({
         {isDetailsPage && (
           <Breadcrumbs
             parent={parent}
-            title={title}
+            title={pageTitle}
             displayProperty={displayProperty}
             details={details}
             getDisplayValue={getDisplayValue}
           />
         )}
         <PageHeader
-          title={title}
+          title={pageTitle}
           importConfig={canImport && importConfig}
           exportConfig={canExport && exportConfig}
           createConfig={canCreate && createConfig}
@@ -157,6 +161,10 @@ export const ResourcePage = ({
 };
 
 ResourcePage.propTypes = {
+  resourceName: PropTypes.shape({
+    singular: PropTypes.string.isRequired,
+    plural: PropTypes.string,
+  }),
   columns: PropTypes.array.isRequired,
   createConfig: PropTypes.object,
   onProcessDataForSave: PropTypes.func,
@@ -168,7 +176,7 @@ ResourcePage.propTypes = {
   ExportModalComponent: PropTypes.elementType,
   TableComponent: PropTypes.elementType,
   LinksComponent: PropTypes.elementType,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   baseFilter: PropTypes.object,
   defaultSorting: PropTypes.array,
   defaultFilters: PropTypes.array,
@@ -185,6 +193,7 @@ ResourcePage.propTypes = {
 };
 
 ResourcePage.defaultProps = {
+  resourceName: {},
   createConfig: null,
   importConfig: null,
   exportConfig: {},
@@ -193,6 +202,7 @@ ResourcePage.defaultProps = {
   TableComponent: null,
   LinksComponent: null,
   onProcessDataForSave: null,
+  title: null,
   baseFilter: {},
   defaultSorting: [],
   defaultFilters: [],
diff --git a/packages/admin-panel/src/pages/resources/TreeResourcePage.jsx b/packages/admin-panel/src/pages/resources/TreeResourcePage.jsx
index 54df223e26..fbd499d8bb 100644
--- a/packages/admin-panel/src/pages/resources/TreeResourcePage.jsx
+++ b/packages/admin-panel/src/pages/resources/TreeResourcePage.jsx
@@ -7,26 +7,35 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { HorizontalTree } from '@tupaia/ui-components';
-import { PageHeader, PageBody } from '../../widgets';
+import { PageBody, PageHeader } from '../../widgets';
 import { LogsModal } from '../../logsTable';
+import { generateTitle } from './resourceName';
 
 const Container = styled(PageBody)`
   overflow: auto;
 `;
 
 const StyledHorizontalTree = styled(HorizontalTree)`
-  height: 930px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-  max-height: 870px;
   color: ${({ theme }) => theme.palette.text.primary};
+  height: 930px;
+  margin-block: 40px;
+  max-block-size: 870px;
 `;
 
-export const TreeResourcePage = ({ title, fetchRoot, fetchBranch, ExportModalComponent }) => {
+export const TreeResourcePage = ({
+  resourceName,
+  title,
+  fetchRoot,
+  fetchBranch,
+  ExportModalComponent,
+}) => {
   return (
     <>
       <Container>
-        <PageHeader title={title} ExportModalComponent={ExportModalComponent} />
+        <PageHeader
+          title={title ?? generateTitle(resourceName)}
+          ExportModalComponent={ExportModalComponent}
+        />
         <StyledHorizontalTree fetchRoot={fetchRoot} fetchBranch={fetchBranch} />
       </Container>
       <LogsModal />
@@ -35,10 +44,15 @@ export const TreeResourcePage = ({ title, fetchRoot, fetchBranch, ExportModalCom
 };
 
 TreeResourcePage.defaultProps = {
+  resourceName: {},
   ExportModalComponent: null,
 };
 
 TreeResourcePage.propTypes = {
+  resourceName: PropTypes.shape({
+    singular: PropTypes.string.isRequired,
+    plural: PropTypes.string,
+  }),
   title: PropTypes.string.isRequired,
   fetchRoot: PropTypes.func.isRequired,
   fetchBranch: PropTypes.func.isRequired,
diff --git a/packages/admin-panel/src/pages/resources/resourceName.js b/packages/admin-panel/src/pages/resources/resourceName.js
new file mode 100644
index 0000000000..e5f662c3f6
--- /dev/null
+++ b/packages/admin-panel/src/pages/resources/resourceName.js
@@ -0,0 +1,10 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export const capitalizeFirst = str => str[0].toUpperCase() + str.slice(1);
+
+export const getPluralForm = ({ singular, plural }) => plural ?? `${singular}s`;
+
+export const generateTitle = resourceName => capitalizeFirst(getPluralForm(resourceName));
diff --git a/packages/admin-panel/src/routes/entities/countries.js b/packages/admin-panel/src/routes/entities/countries.js
index 8e3e02416d..3c5c2d7c75 100644
--- a/packages/admin-panel/src/routes/entities/countries.js
+++ b/packages/admin-panel/src/routes/entities/countries.js
@@ -5,6 +5,8 @@
 
 import { COLUMNS as ENTITIES_COLUMNS } from './entities';
 
+const RESOURCE_NAME = { singular: 'country', plural: 'countries' };
+
 const FIELDS = [
   { source: 'id', show: false },
   {
@@ -18,16 +20,15 @@ const FIELDS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'New Country',
   actionConfig: {
-    title: 'Create New Country',
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'countries',
     fields: FIELDS,
   },
 };
 
 export const countries = {
-  title: 'Countries',
+  resourceName: RESOURCE_NAME,
   endpoint: 'countries',
   path: '/countries',
   columns: FIELDS,
diff --git a/packages/admin-panel/src/routes/entities/entities.js b/packages/admin-panel/src/routes/entities/entities.js
index cdb1797767..a2d648daa9 100644
--- a/packages/admin-panel/src/routes/entities/entities.js
+++ b/packages/admin-panel/src/routes/entities/entities.js
@@ -4,6 +4,9 @@
  */
 
 import { SURVEY_RESPONSE_COLUMNS } from '../surveys/surveyResponses';
+import { getPluralForm } from '../../pages/resources/resourceName';
+
+const RESOURCE_NAME = { singular: 'entity', plural: 'entities' };
 
 const ENTITIES_ENDPOINT = 'entities';
 
@@ -53,7 +56,7 @@ export const COLUMNS = [
     type: 'edit',
     actionConfig: {
       editEndpoint: ENTITIES_ENDPOINT,
-      title: 'Edit Entity',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       fields: [FIELDS.name, FIELDS.attributes],
     },
   },
@@ -68,7 +71,7 @@ export const COLUMNS = [
 ];
 
 const IMPORT_CONFIG = {
-  title: 'Import Entities',
+  title: `Import ${getPluralForm(RESOURCE_NAME)}`,
   subtitle:
     'Please note that if this is the first time a country is being imported, you will need to restart central-server post-import for it to sync to DHIS2.', // hope to fix one day in https://github.com/beyondessential/central-server/issues/481
   actionConfig: {
@@ -84,7 +87,7 @@ const IMPORT_CONFIG = {
       },
     },
     {
-      label: 'Automatically fetch GeoJSON (defaults to "Yes")',
+      label: 'Automatically fetch GeoJSON (defaults to ‘Yes’)',
       parameterKey: 'automaticallyFetchGeojson',
       type: 'boolean',
       editConfig: {
@@ -95,14 +98,14 @@ const IMPORT_CONFIG = {
 };
 
 export const entities = {
-  title: 'Entities',
+  resourceName: RESOURCE_NAME,
   path: '',
   default: true,
   endpoint: ENTITIES_ENDPOINT,
   columns: COLUMNS,
   importConfig: IMPORT_CONFIG,
   nestedView: {
-    title: 'Survey Responses',
+    title: 'Survey responses',
     endpoint: `${ENTITIES_ENDPOINT}/{id}/surveyResponses`,
     columns: SURVEY_RESPONSE_COLUMNS,
     path: '/:id/surveyResponses',
diff --git a/packages/admin-panel/src/routes/entities/entityTypes.js b/packages/admin-panel/src/routes/entities/entityTypes.js
index 35ec4733b0..cf82027b93 100644
--- a/packages/admin-panel/src/routes/entities/entityTypes.js
+++ b/packages/admin-panel/src/routes/entities/entityTypes.js
@@ -3,6 +3,8 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+const RESOURCE_NAME = { singular: 'entity type' };
+
 const ENTITY_TYPES_ENDPOINT = 'entityTypes';
 
 export const ENTITY_TYPES_COLUMNS = [
@@ -16,7 +18,7 @@ export const ENTITY_TYPES_COLUMNS = [
 ];
 
 export const entityTypes = {
-  title: 'Entity types',
+  resourceName: RESOURCE_NAME,
   path: '/entityTypes',
   endpoint: ENTITY_TYPES_ENDPOINT,
   columns: ENTITY_TYPES_COLUMNS,
diff --git a/packages/admin-panel/src/routes/externalData/dhisInstances.js b/packages/admin-panel/src/routes/externalData/dhisInstances.js
index 7e26716c92..1334a075d1 100644
--- a/packages/admin-panel/src/routes/externalData/dhisInstances.js
+++ b/packages/admin-panel/src/routes/externalData/dhisInstances.js
@@ -3,6 +3,8 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+const RESOURCE_NAME = { singular: 'DHIS instance' };
+
 const FIELDS = [
   {
     Header: 'Code',
@@ -48,15 +50,15 @@ const COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'New Dhis Instance',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'dhisInstances',
     fields: FIELDS,
   },
 };
 
 export const dhisInstances = {
-  title: 'DHIS Instances',
+  resourceName: RESOURCE_NAME,
   endpoint: 'dhisInstances',
   columns: COLUMNS,
   createConfig: CREATE_CONFIG,
diff --git a/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js b/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js
index b506d643c4..48683a70c2 100644
--- a/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js
+++ b/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js
@@ -6,6 +6,8 @@
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
 
+const RESOURCE_NAME = { singular: 'external database connection' };
+
 const EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT = 'externalDatabaseConnections';
 
 const FIELDS = [
@@ -45,8 +47,8 @@ const COLUMNS = [
     source: 'id',
     actionConfig: {
       editEndpoint: EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT,
-      title: 'Edit External Database Connection',
-      fields: [...FIELDS],
+      title: `Edit ${RESOURCE_NAME.singular}`,
+      fields: FIELDS,
     },
   },
   {
@@ -64,15 +66,15 @@ const COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'Create a new External Database Connection',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT,
-    fields: [...FIELDS],
+    fields: FIELDS,
   },
 };
 
 export const externalDatabaseConnections = {
-  title: 'External database connections',
+  resourceName: RESOURCE_NAME,
   path: '',
   endpoint: EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT,
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js b/packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js
index 64673f7d98..483314875e 100644
--- a/packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js
+++ b/packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js
@@ -3,6 +3,8 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+const RESOURCE_NAME = { singular: 'superset instance' };
+
 const FIELDS = [
   {
     Header: 'Code',
@@ -40,15 +42,15 @@ const COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'New Superset Instance',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'supersetInstances',
     fields: FIELDS,
   },
 };
 
 export const supersetInstances = {
-  title: 'mSupply superset Instances',
+  title: 'mSupply superset instances',
   endpoint: 'supersetInstances',
   columns: COLUMNS,
   createConfig: CREATE_CONFIG,
diff --git a/packages/admin-panel/src/routes/projects/entityHierarchy.js b/packages/admin-panel/src/routes/projects/entityHierarchy.js
index 79424bf0f3..dde0dde49f 100644
--- a/packages/admin-panel/src/routes/projects/entityHierarchy.js
+++ b/packages/admin-panel/src/routes/projects/entityHierarchy.js
@@ -6,6 +6,9 @@
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
 
+/* Exported for use in EntityHierarchiesPage */
+export const RESOURCE_NAME = { singular: 'entity hierarchy', plural: 'entity hierarchies' };
+
 const ENTITY_HIERARCHY_ENDPOINT = 'entityHierarchy';
 
 const FIELDS = [
@@ -15,7 +18,7 @@ const FIELDS = [
     editable: false,
   },
   {
-    Header: 'Canonical Types',
+    Header: 'Canonical types',
     source: 'canonical_types',
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
@@ -36,7 +39,7 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Entity Hierarchy',
+      title: 'Edit entity hierarchy',
       editEndpoint: ENTITY_HIERARCHY_ENDPOINT,
       fields: FIELDS,
     },
@@ -44,7 +47,7 @@ const COLUMNS = [
 ];
 
 export const entityHierarchy = {
-  title: 'Entity hierarchy',
+  resourceName: RESOURCE_NAME,
   endpoint: ENTITY_HIERARCHY_ENDPOINT,
   columns: COLUMNS,
   path: '/hierarchy',
diff --git a/packages/admin-panel/src/routes/projects/landingPages.jsx b/packages/admin-panel/src/routes/projects/landingPages.jsx
index d54eb40760..397d54c1c4 100644
--- a/packages/admin-panel/src/routes/projects/landingPages.jsx
+++ b/packages/admin-panel/src/routes/projects/landingPages.jsx
@@ -9,6 +9,8 @@ import { SECTION_FIELD_TYPE } from '../../editor/constants';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
 
+const RESOURCE_NAME = { singular: 'landing page' };
+
 const LANDING_PAGES_ENDPOINT = 'landingPages';
 
 // the URL prefix to display in the url_segment field
@@ -95,7 +97,7 @@ const FIELDS = {
     },
   },
   EXTENDED_TITLE: {
-    Header: 'Extended title (max 60 characters)',
+    Header: 'Extended title (max. 60 characters)',
     source: 'extended_title',
     editConfig: {
       maxLength: 60,
@@ -105,7 +107,7 @@ const FIELDS = {
     },
   },
   LONG_BIO: {
-    Header: 'Long bio (max 250 characters)',
+    Header: 'Long bio (max. 250 characters)',
     source: 'long_bio',
     editConfig: {
       maxLength: 250,
@@ -135,7 +137,7 @@ const FIELDS = {
     },
   },
   PROJECTS: {
-    Header: 'Project code/s',
+    Header: 'Project code(s)',
     source: 'project_codes',
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
@@ -256,7 +258,7 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Landing page',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: LANDING_PAGES_ENDPOINT,
       fields: EDIT_FIELDS,
     },
@@ -272,14 +274,14 @@ const COLUMNS = [
 
 const CREATE_CONFIG = {
   actionConfig: {
-    title: 'New Landing Page',
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: LANDING_PAGES_ENDPOINT,
     fields: CREATE_FIELDS,
   },
 };
 
 export const landingPages = {
-  title: 'Landing pages',
+  resourceName: RESOURCE_NAME,
   path: '/landing-pages',
   endpoint: LANDING_PAGES_ENDPOINT,
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/projects/projects.js b/packages/admin-panel/src/routes/projects/projects.js
index b0b9fb2550..4e9293f546 100644
--- a/packages/admin-panel/src/routes/projects/projects.js
+++ b/packages/admin-panel/src/routes/projects/projects.js
@@ -6,6 +6,8 @@
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
 
+const RESOURCE_NAME = { singular: 'project' };
+
 const PROJECTS_ENDPOINT = 'projects';
 
 const DEFAULT_FIELDS = [
@@ -27,7 +29,7 @@ const DEFAULT_FIELDS = [
     },
   },
   {
-    Header: 'Map Overlay Code',
+    Header: 'Map overlay code',
     source: 'default_measure',
     editConfig: {
       optionsEndpoint: 'mapOverlays',
@@ -37,7 +39,7 @@ const DEFAULT_FIELDS = [
     },
   },
   {
-    Header: 'Permission Group',
+    Header: 'Permission group',
     source: 'permission_groups',
     type: 'jsonTooltip',
     editConfig: {
@@ -55,7 +57,7 @@ const DEFAULT_FIELDS = [
       type: 'image',
       name: 'image_url',
       avatarVariant: 'square',
-      secondaryLabel: 'Recommended size: 480x240px',
+      secondaryLabel: 'Recommended size: 480 × 240 px',
       maxHeight: 240,
       maxWidth: 480,
     },
@@ -67,7 +69,7 @@ const DEFAULT_FIELDS = [
       type: 'image',
       name: 'logo_url',
       avatarVariant: 'square',
-      secondaryLabel: 'Recommended size: 480x240px',
+      secondaryLabel: 'Recommended size: 480 × 240 px',
       maxHeight: 240,
       maxWidth: 480,
     },
@@ -79,7 +81,7 @@ const DEFAULT_FIELDS = [
     editConfig: {
       type: 'jsonEditor',
     },
-    secondaryLabel: 'eg. { "tileSets": "osm,satellite,terrain", "permanentRegionLabels": true }',
+    secondaryLabel: 'e.g. { "tileSets": "osm,satellite,terrain", "permanentRegionLabels": true }',
   },
   {
     Header: 'Sort',
@@ -112,7 +114,7 @@ const NEW_PROJECT_COLUMNS = [
   },
   ...CREATE_FIELDS,
   {
-    Header: 'Country Code/s',
+    Header: 'Country code(s)',
     source: 'country.code',
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
@@ -125,7 +127,7 @@ const NEW_PROJECT_COLUMNS = [
     },
   },
   {
-    Header: 'Canonical Types (leave blank for default)',
+    Header: 'Canonical types (leave blank for default)',
     source: 'entityTypes',
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
@@ -146,7 +148,7 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Project',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: 'projects',
       fields: EDIT_FIELDS,
     },
@@ -154,15 +156,15 @@ const COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'Create a new project',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: PROJECTS_ENDPOINT,
     fields: NEW_PROJECT_COLUMNS,
   },
 };
 
 export const projects = {
-  title: 'Projects',
+  resourceName: RESOURCE_NAME,
   path: '',
   columns: COLUMNS,
   createConfig: CREATE_CONFIG,
diff --git a/packages/admin-panel/src/routes/surveys/dataElements.js b/packages/admin-panel/src/routes/surveys/dataElements.js
index 4a94f1ce17..857a802cbe 100644
--- a/packages/admin-panel/src/routes/surveys/dataElements.js
+++ b/packages/admin-panel/src/routes/surveys/dataElements.js
@@ -5,8 +5,10 @@
 
 import { DATA_ELEMENT_FIELDS, getDataSourceButtonsConfig } from '../../common';
 
+const RESOURCE_NAME = { singular: 'data element' };
+
 const IMPORT_CONFIG = {
-  title: 'Import Data Elements',
+  title: `Import ${RESOURCE_NAME.singular}`,
   actionConfig: {
     importEndpoint: 'dataElements',
   },
@@ -17,7 +19,7 @@ const EDITOR_CONFIG = {
 };
 
 export const dataElements = {
-  title: 'Data elements',
+  resourceName: RESOURCE_NAME,
   endpoint: 'dataElements',
   columns: [
     ...DATA_ELEMENT_FIELDS,
@@ -26,11 +28,10 @@ export const dataElements = {
   importConfig: IMPORT_CONFIG,
   path: '/data-elements',
   createConfig: {
-    title: 'New Data Element',
     actionConfig: {
-      title: 'Edit Data Element',
+      title: `New ${RESOURCE_NAME.singular}`,
       editEndpoint: 'dataElements',
-      fields: [...DATA_ELEMENT_FIELDS],
+      fields: DATA_ELEMENT_FIELDS,
     },
   },
   editorConfig: EDITOR_CONFIG,
diff --git a/packages/admin-panel/src/routes/surveys/dataGroups.js b/packages/admin-panel/src/routes/surveys/dataGroups.js
index 2a7c3a1ec7..c91f4ebf1f 100644
--- a/packages/admin-panel/src/routes/surveys/dataGroups.js
+++ b/packages/admin-panel/src/routes/surveys/dataGroups.js
@@ -5,10 +5,12 @@ import {
   getDataSourceButtonsConfig,
 } from '../../common';
 
+const RESOURCE_NAME = { singular: 'data group' };
+
 const DATA_GROUP_FIELDS = [
   ...DATA_SOURCE_FIELDS,
   {
-    Header: 'Data Service Configuration',
+    Header: 'Data service configuration',
     source: 'config',
     Cell: DataSourceConfigView,
     editConfig: {
@@ -19,7 +21,7 @@ const DATA_GROUP_FIELDS = [
       },
       getJsonFieldSchema: () => [
         {
-          label: 'DHIS Server',
+          label: 'DHIS server',
           fieldName: 'dhisInstanceCode',
           optionsEndpoint: 'dhisInstances',
           optionLabelKey: 'dhisInstances.code',
@@ -36,14 +38,13 @@ const EDITOR_CONFIG = {
 };
 
 export const dataGroups = {
-  title: 'Data groups',
+  resourceName: RESOURCE_NAME,
   endpoint: 'dataGroups',
   columns: [...DATA_GROUP_FIELDS, ...getDataSourceButtonsConfig(DATA_GROUP_FIELDS, 'dataGroup')],
   path: '/data-groups',
   createConfig: {
-    title: 'New Data Group',
     actionConfig: {
-      title: 'Edit Data Group',
+      title: `New ${RESOURCE_NAME.singular}`,
       editEndpoint: 'dataGroups',
       fields: DATA_GROUP_FIELDS,
     },
@@ -51,7 +52,7 @@ export const dataGroups = {
   editorConfig: EDITOR_CONFIG,
   isBESAdminOnly: true,
   nestedView: {
-    title: 'Data elements',
+    resourceName: RESOURCE_NAME,
     endpoint: 'dataGroups/{id}/dataElements',
     columns: [
       ...DATA_ELEMENT_FIELDS,
diff --git a/packages/admin-panel/src/routes/surveys/dataMapping.js b/packages/admin-panel/src/routes/surveys/dataMapping.js
index 132fe1641a..cea74cfa42 100644
--- a/packages/admin-panel/src/routes/surveys/dataMapping.js
+++ b/packages/admin-panel/src/routes/surveys/dataMapping.js
@@ -5,28 +5,30 @@
 
 import {
   DATA_ELEMENT_FIELD_EDIT_CONFIG,
-  SERVICE_TYPE_OPTIONS,
   DataSourceConfigView,
+  SERVICE_TYPE_OPTIONS,
 } from '../../common';
 
+const RESOURCE_NAME = { singular: 'mapping' };
+
 const FIELDS = [
   {
-    Header: 'Data Element',
+    Header: 'Data element',
     source: 'data_element_code',
   },
   {
-    Header: 'Country Code',
+    Header: 'Country code',
     source: 'country_code',
   },
   {
-    Header: 'Service Type',
+    Header: 'Service type',
     source: 'service_type',
     editConfig: {
       options: SERVICE_TYPE_OPTIONS,
     },
   },
   {
-    Header: 'Data Service Configuration',
+    Header: 'Data service sonfiguration',
     source: 'service_config',
     Cell: DataSourceConfigView,
     editConfig: DATA_ELEMENT_FIELD_EDIT_CONFIG,
@@ -54,15 +56,15 @@ const COLUMNS = [
 ];
 
 const IMPORT_CONFIG = {
-  title: 'Import Mapping',
+  title: `Import ${RESOURCE_NAME.singular}`,
   actionConfig: {
     importEndpoint: 'dataElementDataServices',
   },
 };
 
 const CREATE_CONFIG = {
-  title: 'New Mapping',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'dataElementDataServices',
     fields: FIELDS,
   },
@@ -70,6 +72,7 @@ const CREATE_CONFIG = {
 
 export const dataMapping = {
   title: 'Data mapping',
+  resourceName: RESOURCE_NAME,
   path: '/data-mapping',
   endpoint: 'dataElementDataServices',
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/surveys/optionSets.js b/packages/admin-panel/src/routes/surveys/optionSets.js
index fe30c0f25f..f03c156e00 100644
--- a/packages/admin-panel/src/routes/surveys/optionSets.js
+++ b/packages/admin-panel/src/routes/surveys/optionSets.js
@@ -3,6 +3,10 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+import { capitalizeFirst, getPluralForm } from '../../pages/resources/resourceName';
+
+const RESOURCE_NAME = { singular: 'option set' };
+
 const OPTION_SET_FIELDS = [
   {
     Header: 'Name',
@@ -25,7 +29,7 @@ const OPTION_SET_COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Option Set',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: 'optionSets',
       fields: OPTION_SET_FIELDS,
     },
@@ -42,7 +46,7 @@ const OPTION_FIELDS = [
     source: 'label',
   },
   {
-    Header: 'Sort Order',
+    Header: 'Sort order',
     source: 'sort_order',
   },
   {
@@ -67,15 +71,16 @@ const OPTION_COLUMNS = [
 ];
 
 const IMPORT_CONFIG = {
-  title: 'Import Option Sets',
+  title: `Import ${getPluralForm(RESOURCE_NAME)}`,
   actionConfig: {
     importEndpoint: 'optionSets',
   },
   queryParameters: [
     {
-      label: 'Option Set Names',
-      secondaryLabel:
-        'Please enter the names of the option sets to be imported. These should match the tab names in the file.',
+      label: `${capitalizeFirst(RESOURCE_NAME.singular)} names`,
+      secondaryLabel: `Please enter the names of the ${getPluralForm(
+        RESOURCE_NAME,
+      )} to be imported. These should match the tab names in the file.`,
       parameterKey: 'optionSetNames',
       optionsEndpoint: 'optionSets',
       optionValueKey: 'name',
@@ -86,7 +91,7 @@ const IMPORT_CONFIG = {
 };
 
 export const optionSets = {
-  title: 'Option sets',
+  resourceName: RESOURCE_NAME,
   endpoint: 'optionSets',
   columns: OPTION_SET_COLUMNS,
   importConfig: IMPORT_CONFIG,
diff --git a/packages/admin-panel/src/routes/surveys/questions.js b/packages/admin-panel/src/routes/surveys/questions.js
index 899e31fe38..c1c41fe1e5 100644
--- a/packages/admin-panel/src/routes/surveys/questions.js
+++ b/packages/admin-panel/src/routes/surveys/questions.js
@@ -3,6 +3,8 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+const RESOURCE_NAME = { singular: 'question' };
+
 const QUESTION_FIELDS = [
   {
     Header: 'Code',
@@ -24,7 +26,7 @@ const QUESTION_FIELDS = [
     type: 'tooltip',
   },
   {
-    Header: 'Legacy Options',
+    Header: 'Legacy options',
     source: 'options',
     type: 'tooltip',
     editConfig: {
@@ -42,7 +44,7 @@ const QUESTION_FIELDS = [
     type: 'tooltip',
   },
   {
-    Header: 'Option Set Id',
+    Header: 'Option set ID',
     source: 'option_set_id',
     show: false,
   },
@@ -55,7 +57,7 @@ const QUESTION_COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Question',
+      title: 'Edit question',
       editEndpoint: 'questions',
       fields: QUESTION_FIELDS,
       displayUsedBy: true,
@@ -74,7 +76,7 @@ const OPTION_FIELDS = [
     source: 'label',
   },
   {
-    Header: 'Sort Order',
+    Header: 'Sort order',
     source: 'sort_order',
   },
 ];
@@ -97,7 +99,7 @@ const EDITOR_CONFIG = {
 };
 
 export const questions = {
-  title: 'Questions',
+  resourceName: RESOURCE_NAME,
   path: '/questions',
   endpoint: 'questions',
   columns: QUESTION_COLUMNS,
diff --git a/packages/admin-panel/src/routes/surveys/surveyResponses.js b/packages/admin-panel/src/routes/surveys/surveyResponses.js
index 9581fc576b..9c0cc715b2 100644
--- a/packages/admin-panel/src/routes/surveys/surveyResponses.js
+++ b/packages/admin-panel/src/routes/surveys/surveyResponses.js
@@ -7,6 +7,9 @@ import { getBrowserTimeZone } from '@tupaia/utils';
 import moment from 'moment';
 import { ApprovalStatus } from '@tupaia/types';
 import { SurveyResponsesExportModal } from '../../importExport';
+import { getPluralForm } from '../../pages/resources/resourceName';
+
+const RESOURCE_NAME = { singular: 'survey response' };
 
 // Don't include not_required as an editable option because it can lead to
 // mis-matches between surveys and survey responses
@@ -23,7 +26,7 @@ const surveyName = {
 };
 
 const surveyId = {
-  Header: 'Survey Id',
+  Header: 'Survey ID',
   source: 'survey.id',
   editable: false,
   type: 'tooltip',
@@ -37,7 +40,7 @@ const assessorName = {
 };
 
 const date = {
-  Header: 'Date of Survey',
+  Header: 'Date of survey',
   source: 'end_time',
   type: 'tooltip',
   accessor: row => moment(row.end_time).local().format('ddd, MMM Do YYYY, HH:mm:ss ZZ'),
@@ -46,7 +49,7 @@ const date = {
 };
 
 const dateOfData = {
-  Header: 'Date of Data',
+  Header: 'Date of data',
   source: 'data_time',
   type: 'tooltip',
   accessor: row => moment.parseZone(row.data_time).format('ddd, MMM Do YYYY, HH:mm:ss'),
@@ -58,7 +61,7 @@ const dateOfData = {
 };
 
 const approvalStatus = {
-  Header: 'Approval Status',
+  Header: 'Approval status',
   source: 'approval_status',
   type: 'tooltip',
 };
@@ -128,7 +131,7 @@ export const ANSWER_COLUMNS = [
 ];
 
 const IMPORT_CONFIG = {
-  title: 'Import Survey Responses',
+  title: `Import ${getPluralForm(RESOURCE_NAME)}`,
   actionConfig: {
     importEndpoint: 'surveyResponses',
     extraQueryParameters: {
@@ -150,7 +153,7 @@ const IMPORT_CONFIG = {
 };
 
 export const surveyResponses = {
-  title: 'Survey responses',
+  resourceName: RESOURCE_NAME,
   path: '/survey-responses',
   endpoint: 'surveyResponses',
   columns: SURVEY_RESPONSE_PAGE_COLUMNS,
diff --git a/packages/admin-panel/src/routes/surveys/surveys.js b/packages/admin-panel/src/routes/surveys/surveys.js
index a4fe18b8c1..a926b187c0 100644
--- a/packages/admin-panel/src/routes/surveys/surveys.js
+++ b/packages/admin-panel/src/routes/surveys/surveys.js
@@ -5,6 +5,8 @@
 
 import { SurveyEditFields } from '../../surveys/SurveyEditFields';
 
+const RESOURCE_NAME = { singular: 'survey' };
+
 const PERIOD_GRANULARITIES = [
   { label: 'Daily', value: 'daily' },
   { label: 'Weekly', value: 'weekly' },
@@ -60,7 +62,7 @@ const SURVEY_FIELDS = {
     },
   },
   permission_group_id: {
-    Header: 'Permission Group',
+    Header: 'Permission group',
     source: 'permission_group.name', // TODO: cleanup as part of RN-910
     editConfig: {
       sourceKey: 'permission_group.name',
@@ -71,7 +73,7 @@ const SURVEY_FIELDS = {
     },
   },
   survey_group_id: {
-    Header: 'Survey Group',
+    Header: 'Survey group',
     source: 'survey_group.name', // TODO: cleanup as part of RN-910
     editConfig: {
       sourceKey: 'survey_group.name',
@@ -92,7 +94,7 @@ const SURVEY_FIELDS = {
     },
   },
   period_granularity: {
-    Header: 'Reporting Period',
+    Header: 'Reporting period',
     source: 'period_granularity',
     editConfig: {
       options: [{ label: 'None', value: '' }, ...PERIOD_GRANULARITIES],
@@ -101,7 +103,7 @@ const SURVEY_FIELDS = {
     },
   },
   requires_approval: {
-    Header: 'Requires Approval',
+    Header: 'Requires approval',
     source: 'requires_approval',
     type: 'boolean',
     editConfig: {
@@ -111,7 +113,7 @@ const SURVEY_FIELDS = {
     },
   },
   'data_group.service_type': {
-    Header: 'Data Service',
+    Header: 'Data service',
     source: 'data_group.service_type',
     editConfig: {
       secondaryLabel: 'Select the data service this survey should use',
@@ -126,7 +128,7 @@ const SURVEY_FIELDS = {
     },
   },
   'data_group.config': {
-    Header: 'Data Service Configuration',
+    Header: 'Data service configuration',
     source: 'data_group.config',
     editConfig: {
       type: 'json',
@@ -137,7 +139,7 @@ const SURVEY_FIELDS = {
         recordData['data_group.service_type'] === 'dhis'
           ? [
               {
-                label: 'DHIS Server',
+                label: 'DHIS server',
                 fieldName: 'dhisInstanceCode',
                 optionsEndpoint: 'dhisInstances',
                 optionLabelKey: 'code',
@@ -148,7 +150,7 @@ const SURVEY_FIELDS = {
     },
   },
   integration_metadata: {
-    Header: 'Integration Details',
+    Header: 'Integration details',
     source: 'integration_metadata',
     editConfig: {
       type: 'json',
@@ -180,7 +182,7 @@ const SURVEY_FIELDS = {
     },
   },
   surveyQuestions: {
-    Header: 'Survey Questions',
+    Header: 'Survey questions',
     source: 'surveyQuestions',
     editConfig: {
       type: 'file',
@@ -196,11 +198,11 @@ const SURVEY_COLUMNS = [
   SURVEY_FIELDS.name,
   SURVEY_FIELDS.code,
   {
-    Header: 'Permission Group',
+    Header: 'Permission group',
     source: 'permission_group.name',
   },
   {
-    Header: 'Survey Group',
+    Header: 'Survey group',
     source: 'survey_group.name',
   },
   {
@@ -216,9 +218,9 @@ const SURVEY_COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Survey',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: 'surveys',
-      fields: [...Object.values(SURVEY_FIELDS)],
+      fields: Object.values(SURVEY_FIELDS),
     },
   },
   {
@@ -232,6 +234,7 @@ const SURVEY_COLUMNS = [
 
 const CREATE_CONFIG = {
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'surveys',
     // All fields except Integration Metadata
     // (Only one project uses it, hidden to improve UX for everyone else, see MDEV-48)
@@ -257,7 +260,6 @@ const CREATE_CONFIG = {
       'data_group.service_type': 'tupaia',
       'data_group.config': {},
     },
-    title: 'New Survey',
   },
 };
 
@@ -288,12 +290,12 @@ const QUESTION_FIELDS = [
     type: 'tooltip',
   },
   {
-    Header: 'Question Label',
+    Header: 'Question label',
     source: 'question_label',
     type: 'tooltip',
   },
   {
-    Header: 'Detail Label',
+    Header: 'Detail label',
     source: 'detail_label',
     type: 'tooltip',
   },
@@ -310,7 +312,7 @@ const QUESTION_COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Question',
+      title: 'Edit question',
       editEndpoint: 'surveyScreenComponents',
       fields: [
         ...QUESTION_FIELDS,
@@ -326,22 +328,22 @@ const QUESTION_COLUMNS = [
                 type: 'json',
                 getJsonFieldSchema: () => [
                   {
-                    label: 'Create New',
+                    label: 'Create new',
                     fieldName: 'createNew',
                     type: 'boolean',
                   },
                   {
-                    label: 'Allow Scan QR Code',
+                    label: 'Allow scan QR code',
                     fieldName: 'allowScanQrCode',
                     type: 'boolean',
                   },
                   {
-                    label: 'Generate QR Code',
+                    label: 'Generate QR code',
                     fieldName: 'generateQrCode',
                     type: 'boolean',
                   },
                   {
-                    label: 'Hide Parent Entity Name',
+                    label: 'Hide parent entity name',
                     fieldName: 'hideParentName',
                     type: 'boolean',
                   },
@@ -351,12 +353,12 @@ const QUESTION_COLUMNS = [
                     type: 'json',
                     getJsonFieldSchema: () => [
                       {
-                        label: 'Accepted Types (comma separated values)',
+                        label: 'Accepted types (comma-separated values)',
                         fieldName: 'type',
                         csv: true,
                       },
                       {
-                        label: 'Parent Entity',
+                        label: 'Parent entity',
                         fieldName: 'parentId',
                         type: 'json',
                         getJsonFieldSchema: () => [
@@ -364,7 +366,7 @@ const QUESTION_COLUMNS = [
                         ],
                       },
                       {
-                        label: 'Grandparent Entity',
+                        label: 'Grandparent entity',
                         fieldName: 'grandparentId',
                         type: 'json',
                         getJsonFieldSchema: () => [
@@ -398,7 +400,7 @@ const QUESTION_COLUMNS = [
                         fieldName: 'type',
                       },
                       {
-                        label: 'Parent Entity',
+                        label: 'Parent entity',
                         fieldName: 'parentId',
                         type: 'json',
                         getJsonFieldSchema: () => [
@@ -441,7 +443,7 @@ const QUESTION_COLUMNS = [
                 ],
               },
               {
-                label: 'Code Generator',
+                label: 'Code generator',
                 fieldName: 'codeGenerator',
                 type: 'json',
                 getJsonFieldSchema: () => [
@@ -460,17 +462,17 @@ const QUESTION_COLUMNS = [
                     fieldName: 'formula',
                   },
                   {
-                    label: 'Default Values',
+                    label: 'Default values',
                     fieldName: 'defaultValues',
                     type: 'jsonEditor',
                   },
                   {
-                    label: 'Value Translation',
+                    label: 'Value translation',
                     fieldName: 'valueTranslation',
                     type: 'jsonEditor',
                   },
                   {
-                    label: 'Answer Display Text',
+                    label: 'Answer display text',
                     fieldName: 'answerDisplayText',
                   },
                 ],
@@ -503,7 +505,7 @@ const QUESTION_COLUMNS = [
                     type: 'json',
                     getJsonFieldSchema: () => [
                       {
-                        label: 'Parent Project',
+                        label: 'Parent project',
                         fieldName: 'parent_project',
                         type: 'json',
                         getJsonFieldSchema: () => [
@@ -523,7 +525,7 @@ const QUESTION_COLUMNS = [
 ];
 
 export const surveys = {
-  title: 'Surveys',
+  resourceName: RESOURCE_NAME,
   path: '',
   default: true,
   endpoint: 'surveys',
diff --git a/packages/admin-panel/src/routes/surveys/syncGroups.js b/packages/admin-panel/src/routes/surveys/syncGroups.js
index 7f5ec05f13..aff59aeba9 100644
--- a/packages/admin-panel/src/routes/surveys/syncGroups.js
+++ b/packages/admin-panel/src/routes/surveys/syncGroups.js
@@ -3,6 +3,8 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+const RESOURCE_NAME = { singular: 'sync group' };
+
 const SERVICE_TYPES = [{ label: 'Kobo', value: 'kobo' }];
 
 const FIELDS = [
@@ -11,11 +13,11 @@ const FIELDS = [
     source: 'code',
   },
   {
-    Header: 'Survey Code',
+    Header: 'Survey code',
     source: 'data_group_code',
   },
   {
-    Header: 'Service Type',
+    Header: 'Service type',
     source: 'service_type',
     editConfig: {
       options: SERVICE_TYPES,
@@ -40,7 +42,7 @@ const COLUMNS = [
     source: 'id',
     actionConfig: {
       editEndpoint: 'dataServiceSyncGroups',
-      fields: [...FIELDS],
+      fields: FIELDS,
     },
   },
   {
@@ -76,19 +78,19 @@ const COLUMNS = [
 ];
 
 const EDITOR_CONFIG = {
-  title: 'Edit Sync Group',
+  title: `Edit ${RESOURCE_NAME.singular}`,
 };
 
 const CREATE_CONFIG = {
-  title: 'Add Sync Group',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'dataServiceSyncGroups',
     fields: FIELDS,
   },
 };
 
 export const syncGroups = {
-  title: 'Sync groups',
+  resourceName: RESOURCE_NAME,
   path: '/sync-groups',
   endpoint: 'dataServiceSyncGroups',
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/users/accessRequests.js b/packages/admin-panel/src/routes/users/accessRequests.js
index 75a020071c..5f3b518bb4 100644
--- a/packages/admin-panel/src/routes/users/accessRequests.js
+++ b/packages/admin-panel/src/routes/users/accessRequests.js
@@ -5,18 +5,20 @@
 
 export const ACCESS_REQUESTS_ENDPOINT = 'accessRequests';
 
+const RESOURCE_NAME = { singular: 'access request' };
+
 const USER_FIELDS = [
   {
-    Header: 'Email Address',
+    Header: 'Email address',
     source: 'user_account.email',
     type: 'tooltip',
   },
   {
-    Header: 'First Name',
+    Header: 'First name',
     source: 'user.first_name',
   },
   {
-    Header: 'Last Name',
+    Header: 'Last name',
     source: 'user.last_name',
   },
   {
@@ -41,7 +43,7 @@ const ACCESS_REQUEST_FIELDS = [
     editConfig: { optionsEndpoint: 'entities', baseFilter: { type: 'country' } },
   },
   {
-    Header: 'Project Code',
+    Header: 'Project code',
     source: 'project.code',
     editable: false,
   },
@@ -57,7 +59,7 @@ const ACCESS_REQUEST_FIELDS = [
     editConfig: { type: 'textarea' },
   },
   {
-    Header: 'Permission Group',
+    Header: 'Permission group',
     source: 'permission_group.name',
     editConfig: {
       optionsEndpoint: 'permissionGroups',
@@ -75,7 +77,7 @@ const USER_COLUMNS = [
     source: 'user_id',
     width: 150,
     actionConfig: {
-      title: 'Edit & Approve Access Requests',
+      title: 'Edit & approve access requests',
       bulkGetEndpoint: `users/{user_id}/${ACCESS_REQUESTS_ENDPOINT}`,
       bulkUpdateEndpoint: `${ACCESS_REQUESTS_ENDPOINT}`,
       baseFilter: { approved: null },
@@ -87,7 +89,7 @@ const USER_COLUMNS = [
           editable: false,
         },
         {
-          Header: 'Project Code',
+          Header: 'Project code',
           source: 'project.code',
           bulkAccessor: rows => rows.map(row => row['project.code'] ?? 'blank').join(', '),
           editable: false,
@@ -105,7 +107,7 @@ const USER_COLUMNS = [
           show: false,
         },
         {
-          Header: 'Permission Group',
+          Header: 'Permission group',
           source: 'permission_group.name',
           editConfig: {
             optionsEndpoint: 'permissionGroups',
@@ -134,12 +136,12 @@ const USER_COLUMNS = [
 const DETAILS_COLUMNS = [
   ...ACCESS_REQUEST_FIELDS,
   {
-    Header: 'Approve/Decline',
+    Header: 'Approve/decline',
     width: 140,
     source: 'id',
     type: 'edit',
     actionConfig: {
-      title: 'Edit & Approve Access Request',
+      title: 'Edit & approve access request',
       editEndpoint: 'accessRequests',
       fields: [
         ...ACCESS_REQUEST_FIELDS,
@@ -157,7 +159,7 @@ const DETAILS_COLUMNS = [
 ];
 
 export const accessRequests = {
-  title: 'Access requests',
+  resourceName: RESOURCE_NAME,
   path: '/access-requests',
   endpoint: ACCESS_REQUESTS_ENDPOINT,
   columns: USER_COLUMNS,
@@ -171,7 +173,7 @@ export const accessRequests = {
     return recordData.map(record => ({ ...record, ...editedFields }));
   },
   nestedView: {
-    title: 'Access Requests',
+    resourceName: RESOURCE_NAME,
     endpoint: `users/{user_id}/${ACCESS_REQUESTS_ENDPOINT}`,
     columns: DETAILS_COLUMNS,
     baseFilter: { approved: null },
diff --git a/packages/admin-panel/src/routes/users/permissionGroups.jsx b/packages/admin-panel/src/routes/users/permissionGroups.jsx
index 8b057ab19d..9f76d4cff1 100644
--- a/packages/admin-panel/src/routes/users/permissionGroups.jsx
+++ b/packages/admin-panel/src/routes/users/permissionGroups.jsx
@@ -2,9 +2,12 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import React from 'react';
 import { prettyArray } from '../../utilities';
 
+const RESOURCE_NAME = { singular: 'permission group' };
+
 const COLUMNS = [
   {
     Header: 'Name',
@@ -16,15 +19,15 @@ const COLUMNS = [
     filterable: false,
     disableSortBy: true,
     // eslint-disable-next-line react/prop-types
-    Cell: ({ value: ancestors }) => (ancestors.length > 0 ? prettyArray(ancestors) : <ul> - </ul>),
+    Cell: ({ value: ancestors }) =>
+      ancestors.length > 0 ? prettyArray(ancestors) : <ul>&mdash;</ul>,
     accessor: ({ ancestors }) => ancestors.map(a => a.name).reverse(),
   },
 ];
 
 const CREATE_CONFIG = {
-  title: 'Create Permission Group',
   actionConfig: {
-    title: 'Edit Permission Group',
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'permissionGroups',
     fields: [
       {
@@ -43,7 +46,7 @@ const CREATE_CONFIG = {
 };
 
 export const permissionGroups = {
-  title: 'Permission groups',
+  resourceName: RESOURCE_NAME,
   path: '/permission-groups',
   endpoint: 'permissionGroups',
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/users/permissionGroupsViewer.js b/packages/admin-panel/src/routes/users/permissionGroupsViewer.js
index 8393e35016..4d1b5cdab6 100644
--- a/packages/admin-panel/src/routes/users/permissionGroupsViewer.js
+++ b/packages/admin-panel/src/routes/users/permissionGroupsViewer.js
@@ -2,10 +2,10 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-import { PermissionGroupsViewerPage } from '../../pages/resources/PermissionGroupsViewerPage';
+import { PermissionGroupsViewerPage } from '../../pages/resources';
 
 export const permissionGroupsViewer = {
-  title: 'Permission Groups Viewer',
+  title: 'Permission groups viewer',
   path: '/permission-groups-viewer',
   Component: PermissionGroupsViewerPage,
 };
diff --git a/packages/admin-panel/src/routes/users/permissions.js b/packages/admin-panel/src/routes/users/permissions.js
index 747d0baa82..02bd3d7d18 100644
--- a/packages/admin-panel/src/routes/users/permissions.js
+++ b/packages/admin-panel/src/routes/users/permissions.js
@@ -1,3 +1,12 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { getPluralForm } from '../../pages/resources/resourceName';
+
+const RESOURCE_NAME = { singular: 'permission' };
+
 export const PERMISSIONS_ENDPOINT = 'userEntityPermissions';
 export const PERMISSIONS_COLUMNS = [
   {
@@ -39,7 +48,7 @@ const FIELDS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: "Edit User's Permission",
+      title: 'Edit user’s permission',
       editEndpoint: PERMISSIONS_ENDPOINT,
       fields: PERMISSIONS_COLUMNS,
     },
@@ -54,13 +63,13 @@ const FIELDS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'Give User Permission',
   bulkCreate: true,
   actionConfig: {
+    title: `Give user ${RESOURCE_NAME.singular}`,
     bulkUpdateEndpoint: PERMISSIONS_ENDPOINT,
     fields: [
       {
-        Header: 'User Email',
+        Header: 'User email',
         source: 'user.email',
         editConfig: {
           optionsEndpoint: 'users',
@@ -78,7 +87,7 @@ const CREATE_CONFIG = {
         },
       },
       {
-        Header: 'Permission Group',
+        Header: 'Permission group',
         source: 'permission_group.name',
         editConfig: {
           optionsEndpoint: 'permissionGroups',
@@ -90,7 +99,7 @@ const CREATE_CONFIG = {
 };
 
 const IMPORT_CONFIG = {
-  title: 'Import User Permissions',
+  title: `Import user ${getPluralForm(RESOURCE_NAME)}`,
   actionConfig: {
     importEndpoint: 'userPermissions',
   },
@@ -131,7 +140,7 @@ const onProcessDataForSave = (fieldsToSave, recordData) => {
 };
 
 export const permissions = {
-  title: 'Permissions',
+  resourceName: RESOURCE_NAME,
   path: '/permissions',
   endpoint: PERMISSIONS_ENDPOINT,
   columns: FIELDS,
diff --git a/packages/admin-panel/src/routes/users/users.jsx b/packages/admin-panel/src/routes/users/users.jsx
index e767f338d4..b250feff4e 100644
--- a/packages/admin-panel/src/routes/users/users.jsx
+++ b/packages/admin-panel/src/routes/users/users.jsx
@@ -7,6 +7,9 @@ import React from 'react';
 import { Tooltip as TooltipComponent } from '@tupaia/ui-components';
 import { VerifiedFilter } from '../../table/columnTypes/columnFilters';
 import { PERMISSIONS_COLUMNS, PERMISSIONS_ENDPOINT } from './permissions';
+import { getPluralForm } from '../../pages/resources/resourceName';
+
+const RESOURCE_NAME = { singular: 'user' };
 
 // eslint-disable-next-line react/prop-types
 const VerifiedCell = ({ value }) => {
@@ -33,12 +36,12 @@ const EDIT_FIELDS = [
     source: 'last_name',
   },
   {
-    Header: 'Email Address',
+    Header: 'Email address',
     source: 'email',
     type: 'tooltip',
   },
   {
-    Header: 'Phone Number',
+    Header: 'Phone number',
     source: 'mobile_number',
   },
   {
@@ -79,12 +82,12 @@ const EDIT_FIELDS = [
 
 const COLUMNS = [
   {
-    Header: 'First Name',
+    Header: 'First name',
     source: 'first_name',
     width: 150,
   },
   {
-    Header: 'Last Name',
+    Header: 'Last name',
     source: 'last_name',
     width: 150,
   },
@@ -109,7 +112,7 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit User',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: 'users',
       fields: EDIT_FIELDS,
     },
@@ -117,15 +120,15 @@ const COLUMNS = [
 ];
 
 const IMPORT_CONFIG = {
-  title: 'Import Users',
+  title: `Import ${getPluralForm(RESOURCE_NAME)}`,
   actionConfig: {
     importEndpoint: 'users',
   },
 };
 
 const CREATE_CONFIG = {
-  title: 'New User',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'users',
     fields: [
       ...EDIT_FIELDS,
@@ -141,7 +144,7 @@ const CREATE_CONFIG = {
         },
       },
       {
-        Header: 'Permission Group',
+        Header: 'Permission group',
         source: 'permissionGroupName',
         editConfig: {
           sourceKey: 'permissionGroupName',
@@ -152,7 +155,7 @@ const CREATE_CONFIG = {
         },
       },
       {
-        Header: 'Api Client (Not required for most users, see Readme of admin-panel for usage)',
+        Header: 'API Client (not required for most users, see README of admin-panel for usage)',
         source: 'is_api_client',
         type: 'boolean',
         editConfig: {
@@ -164,7 +167,7 @@ const CREATE_CONFIG = {
 };
 
 export const users = {
-  title: 'Users',
+  resourceName: RESOURCE_NAME,
   path: '',
   endpoint: 'users',
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/users/usersTabRoutes.jsx b/packages/admin-panel/src/routes/users/usersTabRoutes.jsx
index 47a9c9f471..2c1e1d983f 100644
--- a/packages/admin-panel/src/routes/users/usersTabRoutes.jsx
+++ b/packages/admin-panel/src/routes/users/usersTabRoutes.jsx
@@ -12,7 +12,7 @@ import { permissionGroupsViewer } from './permissionGroupsViewer';
 import { accessRequests } from './accessRequests';
 
 export const usersTabRoutes = {
-  label: 'Users & Permissions',
+  label: 'Users & permissions',
   path: '/users',
   icon: <PeopleAlt />,
   childViews: [users, permissions, permissionGroups, permissionGroupsViewer, accessRequests],
diff --git a/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx b/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx
index 968b3073af..f6ccab516b 100644
--- a/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx
+++ b/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx
@@ -2,10 +2,13 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { CreateActionButton } from '../../editor';
 
+const RESOURCE_NAME = { singular: 'dashboard item' };
+
 export const DASHBOARD_ITEMS_ENDPOINT = 'dashboardItems';
 
 const FIELDS = [
@@ -15,7 +18,7 @@ const FIELDS = [
     type: 'tooltip',
   },
   {
-    Header: 'Report Code',
+    Header: 'Report code',
     source: 'report_code',
     type: 'tooltip',
   },
@@ -71,7 +74,7 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Dashboard Item',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: DASHBOARD_ITEMS_ENDPOINT,
       fields: [...FIELDS, ...extraEditFields],
     },
@@ -86,8 +89,8 @@ const COLUMNS = [
 ];
 
 const IMPORT_CONFIG = {
-  title: 'Import Dashboard Visualisation',
-  subtitle: 'Please upload one or more .json files with visualisations to be imported:',
+  title: `Import ${RESOURCE_NAME.singular}s`,
+  subtitle: 'Please upload one or more JSON files with visualisations to be imported',
   actionConfig: {
     importEndpoint: 'dashboardVisualisations',
     multiple: true,
@@ -112,7 +115,7 @@ const LinksComponent = () => (
 );
 
 export const dashboardItems = {
-  title: 'Dashboard items',
+  resourceName: RESOURCE_NAME,
   path: '',
   default: true,
   endpoint: DASHBOARD_ITEMS_ENDPOINT,
diff --git a/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js b/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js
index 38de5f3f83..6d4365ace0 100644
--- a/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js
+++ b/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js
@@ -6,6 +6,8 @@
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
 
+const RESOURCE_NAME = { singular: 'dashboard mailing list' };
+
 const DASHBOARD_MAILING_LIST_FIELDS = {
   project: {
     Header: 'Project',
@@ -73,7 +75,7 @@ const DASHBOARD_MAILING_LIST_COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Dashboard Mailing List',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: 'dashboardMailingLists',
       fields: [
         DASHBOARD_MAILING_LIST_FIELDS.project,
@@ -94,6 +96,7 @@ const DASHBOARD_MAILING_LIST_COLUMNS = [
 
 const CREATE_CONFIG = {
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'dashboardMailingLists',
     fields: [
       DASHBOARD_MAILING_LIST_FIELDS.project,
@@ -101,7 +104,6 @@ const CREATE_CONFIG = {
       DASHBOARD_MAILING_LIST_FIELDS.entity_name,
       DASHBOARD_MAILING_LIST_FIELDS.admin_permission_groups,
     ],
-    title: 'New dashboard mailing list',
   },
 };
 
@@ -126,9 +128,9 @@ const ENTRY_COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Entry',
+      title: 'Edit entry',
       editEndpoint: 'dashboardMailingListEntries',
-      fields: [...ENTRY_FIELDS],
+      fields: ENTRY_FIELDS,
     },
   },
   {
@@ -141,7 +143,7 @@ const ENTRY_COLUMNS = [
 ];
 
 export const dashboardMailingLists = {
-  title: 'Dashboard mailing lists',
+  resourceName: RESOURCE_NAME,
   path: '/dashboard-mailing-lists',
   endpoint: 'dashboardMailingLists',
   columns: DASHBOARD_MAILING_LIST_COLUMNS,
diff --git a/packages/admin-panel/src/routes/visualisations/dashboardRelations.js b/packages/admin-panel/src/routes/visualisations/dashboardRelations.js
index c031771d3d..aec4275c75 100644
--- a/packages/admin-panel/src/routes/visualisations/dashboardRelations.js
+++ b/packages/admin-panel/src/routes/visualisations/dashboardRelations.js
@@ -6,11 +6,13 @@
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
 
+const RESOURCE_NAME = { singular: 'dashboard relation' };
+
 // export for use on users page
 export const DASHBOARD_RELATION_ENDPOINT = 'dashboardRelations';
 export const DASHBOARD_RELATION_COLUMNS = [
   {
-    Header: 'Dashboard Code',
+    Header: 'Dashboard code',
     source: 'dashboard.code',
     editConfig: {
       optionsEndpoint: 'dashboards',
@@ -20,7 +22,7 @@ export const DASHBOARD_RELATION_COLUMNS = [
     },
   },
   {
-    Header: 'Dashboard Item Code',
+    Header: 'Dashboard item code',
     source: 'dashboard_item.code',
     editConfig: {
       optionsEndpoint: 'dashboardItems',
@@ -30,7 +32,7 @@ export const DASHBOARD_RELATION_COLUMNS = [
     },
   },
   {
-    Header: 'Permission Groups',
+    Header: 'Permission groups',
     source: 'permission_groups',
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
@@ -43,7 +45,7 @@ export const DASHBOARD_RELATION_COLUMNS = [
     },
   },
   {
-    Header: 'Entity Types',
+    Header: 'Entity types',
     source: 'entity_types',
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
@@ -53,17 +55,17 @@ export const DASHBOARD_RELATION_COLUMNS = [
       canCreateNewOptions: true,
       optionLabelKey: 'entityTypes',
       optionValueKey: 'entityTypes',
-      secondaryLabel: "Input the entity types you want. Eg: 'country', 'sub_district'",
+      secondaryLabel: 'Input the entity types you want. e.g: ‘country’, ‘sub_district’',
     },
   },
   {
-    Header: 'Attributes Filter',
+    Header: 'Attributes filter',
     source: 'attributes_filter',
     type: 'jsonTooltip',
     editConfig: { type: 'jsonEditor' },
   },
   {
-    Header: 'Project Codes',
+    Header: 'Project codes',
     source: 'project_codes',
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
@@ -76,7 +78,7 @@ export const DASHBOARD_RELATION_COLUMNS = [
     },
   },
   {
-    Header: 'Sort Order',
+    Header: 'Sort order',
     source: 'sort_order',
   },
 ];
@@ -88,7 +90,7 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Dashboard Relation',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: DASHBOARD_RELATION_ENDPOINT,
       fields: DASHBOARD_RELATION_COLUMNS,
     },
@@ -103,15 +105,15 @@ const COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'Create a new relation between Dashboard and DashboardItem',
   actionConfig: {
+    title: 'New relation between dashboard and dashboard item',
     editEndpoint: DASHBOARD_RELATION_ENDPOINT,
     fields: DASHBOARD_RELATION_COLUMNS,
   },
 };
 
 export const dashboardRelations = {
-  title: 'Dashboard relations',
+  resourceName: RESOURCE_NAME,
   path: '/dashboard-relations',
   endpoint: DASHBOARD_RELATION_ENDPOINT,
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/visualisations/dashboards.js b/packages/admin-panel/src/routes/visualisations/dashboards.js
index 675b6c68e2..65ab2f8e7c 100644
--- a/packages/admin-panel/src/routes/visualisations/dashboards.js
+++ b/packages/admin-panel/src/routes/visualisations/dashboards.js
@@ -3,6 +3,8 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+const RESOURCE_NAME = { singular: 'dashboard' };
+
 const DASHBOARDS_ENDPOINT = 'dashboards';
 
 const FIELDS = [
@@ -16,7 +18,7 @@ const FIELDS = [
     source: 'name',
   },
   {
-    Header: 'Organisation Unit Code',
+    Header: 'Organisation unit code',
     source: 'root_entity_code',
     editConfig: {
       optionsEndpoint: 'entities',
@@ -26,7 +28,7 @@ const FIELDS = [
     },
   },
   {
-    Header: 'Sort Order',
+    Header: 'Sort order',
     source: 'sort_order',
   },
 ];
@@ -38,9 +40,9 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Dashboard',
-      editEndpoint: 'dashboards',
-      fields: [...FIELDS],
+      title: `Edit ${RESOURCE_NAME.singular}`,
+      editEndpoint: DASHBOARDS_ENDPOINT,
+      fields: FIELDS,
     },
   },
   {
@@ -54,12 +56,12 @@ const COLUMNS = [
 
 const RELATION_FIELDS = [
   {
-    Header: 'Dashboard Item Code',
+    Header: 'Dashboard item code',
     source: 'dashboard_item.code',
     editable: false,
   },
   {
-    Header: 'Permission Groups',
+    Header: 'Permission groups',
     source: 'permission_groups',
     editConfig: {
       optionsEndpoint: 'permissionGroups',
@@ -70,7 +72,7 @@ const RELATION_FIELDS = [
     },
   },
   {
-    Header: 'Entity Types',
+    Header: 'Entity types',
     source: 'entity_types',
     editConfig: {
       type: 'autocomplete',
@@ -78,11 +80,11 @@ const RELATION_FIELDS = [
       canCreateNewOptions: true,
       optionLabelKey: 'entityTypes',
       optionValueKey: 'entityTypes',
-      secondaryLabel: "Input the entity types you want. Eg: 'country', 'sub_district'",
+      secondaryLabel: 'Input the entity types you want. e.g. ‘country’, ‘sub_district’',
     },
   },
   {
-    Header: 'Project Codes',
+    Header: 'Project codes',
     source: 'project_codes',
     editConfig: {
       optionsEndpoint: 'projects',
@@ -93,7 +95,7 @@ const RELATION_FIELDS = [
     },
   },
   {
-    Header: 'Sort Order',
+    Header: 'Sort order',
     source: 'sort_order',
   },
 ];
@@ -112,21 +114,21 @@ const RELATION_COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'Create a new Dashboard',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: DASHBOARDS_ENDPOINT,
     fields: FIELDS,
   },
 };
 
 export const dashboards = {
-  title: 'Dashboards',
+  resourceName: RESOURCE_NAME,
   path: '/dashboards',
   endpoint: DASHBOARDS_ENDPOINT,
   columns: COLUMNS,
   createConfig: CREATE_CONFIG,
   nestedView: {
-    title: 'Dashboard Relations',
+    resourceName: RESOURCE_NAME,
     columns: RELATION_COLUMNS,
     endpoint: 'dashboards/{id}/dashboardRelations',
     path: '/:id/dashboard-relations',
diff --git a/packages/admin-panel/src/routes/visualisations/dataTables.js b/packages/admin-panel/src/routes/visualisations/dataTables.js
index 95d5b250e7..c3ace62900 100644
--- a/packages/admin-panel/src/routes/visualisations/dataTables.js
+++ b/packages/admin-panel/src/routes/visualisations/dataTables.js
@@ -8,6 +8,8 @@ import { onProcessDataForSave } from '../../dataTables/onProcessDataForSave';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
 
+const RESOURCE_NAME = { singular: 'data table' };
+
 const DATA_TABLES_ENDPOINT = 'dataTables';
 
 const FIELDS = [
@@ -57,7 +59,7 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Data Table',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: DATA_TABLES_ENDPOINT,
       fields: FIELDS,
       FieldsComponent: DataTableEditFields,
@@ -79,8 +81,8 @@ const COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'New Data Table',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: DATA_TABLES_ENDPOINT,
     fields: FIELDS,
     FieldsComponent: DataTableEditFields,
@@ -92,7 +94,7 @@ const CREATE_CONFIG = {
 };
 
 const IMPORT_CONFIG = {
-  title: 'Import Data Table',
+  title: `Import ${RESOURCE_NAME.singular}`,
   actionConfig: {
     importEndpoint: 'dataTables',
   },
@@ -100,7 +102,7 @@ const IMPORT_CONFIG = {
 const EDITOR_CONFIG = { displayUsedBy: true };
 
 export const dataTables = {
-  title: 'Data tables',
+  resourceName: RESOURCE_NAME,
   path: '/data-tables',
   endpoint: DATA_TABLES_ENDPOINT,
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/visualisations/indicators.js b/packages/admin-panel/src/routes/visualisations/indicators.js
index eb92a3a06f..8b9c2fe275 100644
--- a/packages/admin-panel/src/routes/visualisations/indicators.js
+++ b/packages/admin-panel/src/routes/visualisations/indicators.js
@@ -3,6 +3,8 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+const RESOURCE_NAME = { singular: 'indicator' };
+
 const FIELDS = [
   {
     Header: 'Code',
@@ -40,7 +42,7 @@ const COLUMNS = [
     source: 'id',
     width: 70,
     actionConfig: {
-      title: 'Edit Indicator',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: 'indicators',
       fields: [...FIELDS],
     },
@@ -48,15 +50,15 @@ const COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'Add Indicator',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'indicators',
     fields: FIELDS,
   },
 };
 
 export const indicators = {
-  title: 'Indicators',
+  resourceName: RESOURCE_NAME,
   path: '/indicators',
   endpoint: 'indicators',
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/visualisations/legacyReports.js b/packages/admin-panel/src/routes/visualisations/legacyReports.js
index eac733d466..7b8aec48b8 100644
--- a/packages/admin-panel/src/routes/visualisations/legacyReports.js
+++ b/packages/admin-panel/src/routes/visualisations/legacyReports.js
@@ -3,6 +3,8 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+const RESOURCE_NAME = { singular: 'legacy report' };
+
 const FIELDS = [
   {
     Header: 'Code',
@@ -10,18 +12,18 @@ const FIELDS = [
     type: 'tooltip',
   },
   {
-    Header: 'Data Builder',
+    Header: 'Data builder',
     source: 'data_builder',
     type: 'tooltip',
   },
   {
-    Header: 'Data Builder Config',
+    Header: 'Data builder config',
     source: 'data_builder_config',
     type: 'jsonTooltip',
     editConfig: { type: 'jsonEditor' },
   },
   {
-    Header: 'Data Services',
+    Header: 'Data services',
     source: 'data_services',
     type: 'jsonTooltip',
     editConfig: { type: 'jsonEditor' },
@@ -35,15 +37,15 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Legacy Report',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: 'legacyReports',
-      fields: [...FIELDS],
+      fields: FIELDS,
     },
   },
 ];
 
 export const legacyReports = {
-  title: 'Legacy reports',
+  resourceName: RESOURCE_NAME,
   path: '/legacy-reports',
   endpoint: 'legacyReports',
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js b/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
index 170fd9dc56..0026963711 100644
--- a/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
@@ -2,11 +2,14 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
+const RESOURCE_NAME = { singular: 'map overlay group relation' };
+
 export const RELATION_ENDPOINT = 'mapOverlayGroupRelations';
 
 const FIELDS = [
   {
-    Header: 'Map Overlay Group Code',
+    Header: 'Map overlay group code',
     source: 'map_overlay_group.code',
     type: 'tooltip',
     editConfig: {
@@ -29,25 +32,25 @@ const FIELDS = [
     },
   },
   {
-    Header: 'Child Type',
+    Header: 'Child type',
     width: 160,
     source: 'child_type',
     type: 'tooltip',
     editConfig: {
       options: [
         {
-          label: 'Map Overlay',
+          label: 'Map overlay',
           value: 'mapOverlay',
         },
         {
-          label: 'Map Overlay Group',
+          label: 'Map overlay group',
           value: 'mapOverlayGroup',
         },
       ],
     },
   },
   {
-    Header: 'Sort Order',
+    Header: 'Sort order',
     source: 'sort_order',
     type: 'tooltip',
   },
@@ -60,9 +63,9 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Map Overlay Group Relation',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: 'mapOverlayGroupRelations',
-      fields: [...FIELDS],
+      fields: FIELDS,
     },
   },
   {
@@ -75,15 +78,15 @@ const COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'Create a new relation between Map Overlay and Map Overlay Group',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: RELATION_ENDPOINT,
     fields: FIELDS,
   },
 };
 
 export const mapOverlayGroupRelations = {
-  title: 'Map overlay group relations',
+  resourceName: RESOURCE_NAME,
   path: '/map-overlay-group-relations',
   endpoint: RELATION_ENDPOINT,
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js b/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
index 590d6fb79b..957f7b3727 100644
--- a/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
@@ -3,6 +3,8 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+const RESOURCE_NAME = { singular: 'map overlay group' };
+
 const MAP_OVERLAY_GROUPS_ENDPOINT = 'mapOverlayGroups';
 
 const FIELDS = [
@@ -29,7 +31,7 @@ const COLUMNS = [
     Header: 'Edit',
     type: 'edit',
     actionConfig: {
-      title: 'Edit Map Overlay Group',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: MAP_OVERLAY_GROUPS_ENDPOINT,
       fields: FIELDS,
     },
@@ -38,7 +40,7 @@ const COLUMNS = [
 
 export const RELATION_FIELDS = [
   {
-    Header: 'Child Id',
+    Header: 'Child ID',
     source: 'child_id',
     type: 'tooltip',
     editConfig: {
@@ -49,24 +51,24 @@ export const RELATION_FIELDS = [
     },
   },
   {
-    Header: 'Child Type',
+    Header: 'Child type',
     source: 'child_type',
     type: 'tooltip',
     editConfig: {
       options: [
         {
-          label: 'Map Overlay',
+          label: 'Map overlay',
           value: 'mapOverlay',
         },
         {
-          label: 'Map Overlay Group',
+          label: 'Map overlay group',
           value: 'mapOverlayGroup',
         },
       ],
     },
   },
   {
-    Header: 'Sort Order',
+    Header: 'Sort order',
     source: 'sort_order',
     type: 'tooltip',
   },
@@ -86,15 +88,15 @@ export const RELATION_COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'Create a new Map overlay group',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: MAP_OVERLAY_GROUPS_ENDPOINT,
     fields: FIELDS,
   },
 };
 
 export const mapOverlayGroups = {
-  title: 'Map overlay groups',
+  resourceName: RESOURCE_NAME,
   path: '/map-overlay-groups',
   endpoint: MAP_OVERLAY_GROUPS_ENDPOINT,
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx b/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
index b3ccd4d482..8ebb31fafc 100644
--- a/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
@@ -2,11 +2,15 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { CreateActionButton } from '../../editor';
 import { prettyArray } from '../../utilities';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
+import { getPluralForm } from '../../pages/resources/resourceName';
+
+const RESOURCE_NAME = { singular: 'map overlay' };
 
 export const MAP_OVERLAYS_ENDPOINT = 'mapOverlays';
 
@@ -23,7 +27,7 @@ const FIELDS = [
     type: 'tooltip',
   },
   {
-    Header: 'Permission Group',
+    Header: 'Permission group',
     width: 160,
     source: 'permission_group',
     editConfig: {
@@ -55,7 +59,7 @@ const FIELDS = [
     },
   },
   {
-    Header: 'Project Codes',
+    Header: 'Project codes',
     source: 'project_codes',
     width: 140,
     Cell: ({ value }) => prettyArray(value),
@@ -146,7 +150,7 @@ const COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Map Overlay',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: MAP_OVERLAYS_ENDPOINT,
       fields: [...FIELDS, ...extraEditFields],
     },
@@ -161,8 +165,8 @@ const COLUMNS = [
 ];
 
 const IMPORT_CONFIG = {
-  title: 'Import Map Overlay Visualisation',
-  subtitle: 'Please upload one or more .json files with visualisations to be imported:',
+  title: `Import ${getPluralForm(RESOURCE_NAME)}`,
+  subtitle: 'Please upload one or more JSON files with visualisations to be imported',
   actionConfig: {
     importEndpoint: 'mapOverlayVisualisations',
     multiple: true,
@@ -187,7 +191,7 @@ const LinksComponent = () => (
 );
 
 export const mapOverlays = {
-  title: 'Map overlays',
+  resourceName: RESOURCE_NAME,
   path: '/map-overlays',
   endpoint: 'mapOverlays',
   columns: COLUMNS,
diff --git a/packages/admin-panel/src/routes/visualisations/socialFeed.jsx b/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
index 867ae6a189..16c919f618 100644
--- a/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
+++ b/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
@@ -2,11 +2,14 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import React from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
 import Typography from '@material-ui/core/Typography';
 
+const RESOURCE_NAME = { singular: 'social feed post' };
+
 const Image = styled.div`
   height: 200px;
   width: 200px;
@@ -56,7 +59,7 @@ const FIELDS = [
           avatarVariant: 'square',
         },
         {
-          label: 'Body (accepts basic markdown)',
+          label: 'Body (accepts basic Markdown)',
           fieldName: 'body',
           type: 'textarea',
         },
@@ -77,7 +80,7 @@ export const SOCIAL_FEED_COLUMNS = [
     type: 'edit',
     source: 'id',
     actionConfig: {
-      title: 'Edit Social Feed item',
+      title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: 'feedItems',
       fields: FIELDS,
     },
@@ -92,12 +95,13 @@ export const SOCIAL_FEED_COLUMNS = [
 ];
 
 const CREATE_CONFIG = {
-  title: 'Add Social Feed item',
   actionConfig: {
+    title: `New ${RESOURCE_NAME.singular}`,
     editEndpoint: 'feedItems',
     fields: FIELDS,
   },
 };
+
 export const socialFeed = {
   title: 'Social feed',
   path: '/social-feed',
diff --git a/packages/admin-panel/src/surveyResponse/ResubmitSurveyResponseModal.jsx b/packages/admin-panel/src/surveyResponse/ResubmitSurveyResponseModal.jsx
index 2bfcb87b69..c4c1356c06 100644
--- a/packages/admin-panel/src/surveyResponse/ResubmitSurveyResponseModal.jsx
+++ b/packages/admin-panel/src/surveyResponse/ResubmitSurveyResponseModal.jsx
@@ -19,7 +19,7 @@ export const ResubmitSurveyResponseModalComponent = ({
 }) => {
   return (
     <Dialog onClose={onDismiss} open={isOpen} disableBackdropClick maxWidth="md">
-      <ModalHeader onClose={onDismiss} title="Resubmit Survey Response" />
+      <ModalHeader onClose={onDismiss} title="Resubmit survey response" />
       <Form
         surveyResponseId={surveyResponseId}
         onDismiss={() => onDismiss()}

From 662d621f46bc40450992d4d89913ca0b0b54ae1c Mon Sep 17 00:00:00 2001
From: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Date: Mon, 20 May 2024 10:12:36 +1200
Subject: [PATCH 15/26] =?UTF-8?q?tweak(database):=20fix=20straggling=20?=
 =?UTF-8?q?=E2=80=9Ctype=E2=80=9D=20symbol=20name=20to=20use=20=E2=80=9Cre?=
 =?UTF-8?q?cord=E2=80=9D=20(#5642)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix straggler database “type” symbol name
---
 .../src/__tests__/services/weather/WeatherService.stubs.ts    | 2 +-
 packages/database/src/DatabaseModel.js                        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/data-broker/src/__tests__/services/weather/WeatherService.stubs.ts b/packages/data-broker/src/__tests__/services/weather/WeatherService.stubs.ts
index 12e8cdc531..03b0920b56 100644
--- a/packages/data-broker/src/__tests__/services/weather/WeatherService.stubs.ts
+++ b/packages/data-broker/src/__tests__/services/weather/WeatherService.stubs.ts
@@ -61,7 +61,7 @@ export const createWeatherApiStubWithMockResponse = () => {
 export const createMockEntity = async (fieldValues?: Partial<Entity>) => {
   const mockModels = createMockModelsStub();
 
-  return mockModels.entity.createTypeInstance({
+  return mockModels.entity.createRecordInstance({
     code: 'MELB',
     name: 'Melbourne',
     point: JSON.stringify({ type: 'Point', coordinates: [144.986, -37.915] }),
diff --git a/packages/database/src/DatabaseModel.js b/packages/database/src/DatabaseModel.js
index 0897ab563f..75a7b60295 100644
--- a/packages/database/src/DatabaseModel.js
+++ b/packages/database/src/DatabaseModel.js
@@ -235,13 +235,13 @@ export class DatabaseModel {
       });
     });
 
-    return this.createTypeInstance(data);
+    return this.createRecordInstance(data);
   };
 
   /**
    * @returns {*} DatabaseRecordClass
    */
-  createTypeInstance = (data = {}) => {
+  createRecordInstance = (data = {}) => {
     return new this.DatabaseRecordClass(this, data);
   };
 

From cd4a8e54ecf1941fa731811f6229f0f05765d386 Mon Sep 17 00:00:00 2001
From: Rohan Port <59544282+rohan-bes@users.noreply.github.com>
Date: Mon, 20 May 2024 09:15:31 +1000
Subject: [PATCH 16/26] fix(mapOverlay): RN-1286: Remove 'Most Recent Data
 Date' from map overlay tables (#5517)

no-issue: Remove 'Most Recent Data Date' from map overlay tables
- Removed checkTimeliness measureBuilder as it is not used by any map overlays
- Removed 'time' scale type

Co-authored-by: Rohan Port <rohan@bes.au>
Co-authored-by: Andrew <vanbeekandrew@gmail.com>
---
 packages/types/src/schemas/schemas.ts         | 60 +++++++------------
 .../src/types/models-extra/mapOverlay.ts      |  2 -
 .../src/components/Legend/SpectrumLegend.tsx  |  8 ---
 .../src/components/Table/getMapTableData.tsx  | 10 ++--
 packages/ui-map-components/src/types/types.ts |  1 -
 .../src/utils/markerColors.ts                 | 10 +---
 .../src/utils/markerFormats.ts                | 26 +-------
 .../apiV1/measureBuilders/checkTimeliness.js  | 55 -----------------
 .../src/apiV1/measureBuilders/index.js        |  1 -
 9 files changed, 28 insertions(+), 145 deletions(-)
 delete mode 100644 packages/web-config-server/src/apiV1/measureBuilders/checkTimeliness.js

diff --git a/packages/types/src/schemas/schemas.ts b/packages/types/src/schemas/schemas.ts
index fbf1f4bf5c..f550bf4687 100644
--- a/packages/types/src/schemas/schemas.ts
+++ b/packages/types/src/schemas/schemas.ts
@@ -31623,8 +31623,7 @@ export const ScaleTypeSchema = {
 		"neutral",
 		"neutralReverse",
 		"performance",
-		"performanceDesc",
-		"time"
+		"performanceDesc"
 	],
 	"type": "string"
 } 
@@ -31726,8 +31725,7 @@ export const MeasureColorSchemeSchema = {
 		"default",
 		"default-reverse",
 		"gpi",
-		"performance",
-		"time"
+		"performance"
 	],
 	"type": "string"
 } 
@@ -33159,8 +33157,7 @@ export const SpectrumMapOverlayConfigSchema = {
 				"neutral",
 				"neutralReverse",
 				"performance",
-				"performanceDesc",
-				"time"
+				"performanceDesc"
 			],
 			"type": "string"
 		},
@@ -33170,8 +33167,7 @@ export const SpectrumMapOverlayConfigSchema = {
 				"default",
 				"default-reverse",
 				"gpi",
-				"performance",
-				"time"
+				"performance"
 			],
 			"type": "string"
 		},
@@ -35455,8 +35451,7 @@ export const ColorMapOverlayConfigSchema = {
 				"neutral",
 				"neutralReverse",
 				"performance",
-				"performanceDesc",
-				"time"
+				"performanceDesc"
 			],
 			"type": "string"
 		}
@@ -36904,8 +36899,7 @@ export const MapOverlayConfigSchema = {
 						"neutral",
 						"neutralReverse",
 						"performance",
-						"performanceDesc",
-						"time"
+						"performanceDesc"
 					],
 					"type": "string"
 				},
@@ -36915,8 +36909,7 @@ export const MapOverlayConfigSchema = {
 						"default",
 						"default-reverse",
 						"gpi",
-						"performance",
-						"time"
+						"performance"
 					],
 					"type": "string"
 				},
@@ -39197,8 +39190,7 @@ export const MapOverlayConfigSchema = {
 						"neutral",
 						"neutralReverse",
 						"performance",
-						"performanceDesc",
-						"time"
+						"performanceDesc"
 					],
 					"type": "string"
 				}
@@ -72211,8 +72203,7 @@ export const MapOverlaySchema = {
 								"neutral",
 								"neutralReverse",
 								"performance",
-								"performanceDesc",
-								"time"
+								"performanceDesc"
 							],
 							"type": "string"
 						},
@@ -72222,8 +72213,7 @@ export const MapOverlaySchema = {
 								"default",
 								"default-reverse",
 								"gpi",
-								"performance",
-								"time"
+								"performance"
 							],
 							"type": "string"
 						},
@@ -74504,8 +74494,7 @@ export const MapOverlaySchema = {
 								"neutral",
 								"neutralReverse",
 								"performance",
-								"performanceDesc",
-								"time"
+								"performanceDesc"
 							],
 							"type": "string"
 						}
@@ -76013,8 +76002,7 @@ export const MapOverlayCreateSchema = {
 								"neutral",
 								"neutralReverse",
 								"performance",
-								"performanceDesc",
-								"time"
+								"performanceDesc"
 							],
 							"type": "string"
 						},
@@ -76024,8 +76012,7 @@ export const MapOverlayCreateSchema = {
 								"default",
 								"default-reverse",
 								"gpi",
-								"performance",
-								"time"
+								"performance"
 							],
 							"type": "string"
 						},
@@ -78306,8 +78293,7 @@ export const MapOverlayCreateSchema = {
 								"neutral",
 								"neutralReverse",
 								"performance",
-								"performanceDesc",
-								"time"
+								"performanceDesc"
 							],
 							"type": "string"
 						}
@@ -79808,8 +79794,7 @@ export const MapOverlayUpdateSchema = {
 								"neutral",
 								"neutralReverse",
 								"performance",
-								"performanceDesc",
-								"time"
+								"performanceDesc"
 							],
 							"type": "string"
 						},
@@ -79819,8 +79804,7 @@ export const MapOverlayUpdateSchema = {
 								"default",
 								"default-reverse",
 								"gpi",
-								"performance",
-								"time"
+								"performance"
 							],
 							"type": "string"
 						},
@@ -82101,8 +82085,7 @@ export const MapOverlayUpdateSchema = {
 								"neutral",
 								"neutralReverse",
 								"performance",
-								"performanceDesc",
-								"time"
+								"performanceDesc"
 							],
 							"type": "string"
 						}
@@ -96886,8 +96869,7 @@ export const TranslatedMapOverlaySchema = {
 						"neutral",
 						"neutralReverse",
 						"performance",
-						"performanceDesc",
-						"time"
+						"performanceDesc"
 					],
 					"type": "string"
 				},
@@ -96897,8 +96879,7 @@ export const TranslatedMapOverlaySchema = {
 						"default",
 						"default-reverse",
 						"gpi",
-						"performance",
-						"time"
+						"performance"
 					],
 					"type": "string"
 				},
@@ -99248,8 +99229,7 @@ export const TranslatedMapOverlaySchema = {
 						"neutral",
 						"neutralReverse",
 						"performance",
-						"performanceDesc",
-						"time"
+						"performanceDesc"
 					],
 					"type": "string"
 				},
diff --git a/packages/types/src/types/models-extra/mapOverlay.ts b/packages/types/src/types/models-extra/mapOverlay.ts
index b357b57f7f..a99da10b5a 100644
--- a/packages/types/src/types/models-extra/mapOverlay.ts
+++ b/packages/types/src/types/models-extra/mapOverlay.ts
@@ -104,7 +104,6 @@ export enum ScaleType {
   PERFORMANCE_DESC = 'performanceDesc',
   NEUTRAL = 'neutral',
   NEUTRAL_REVERSE = 'neutralReverse',
-  TIME = 'time',
   GPI = 'gpi',
 }
 
@@ -143,7 +142,6 @@ export enum MeasureColorScheme {
   DEFAULT = 'default',
   REVERSE_DEFAULT = 'default-reverse',
   PERFORMANCE = 'performance',
-  TIME = 'time',
   GPI = 'gpi',
 }
 
diff --git a/packages/ui-map-components/src/components/Legend/SpectrumLegend.tsx b/packages/ui-map-components/src/components/Legend/SpectrumLegend.tsx
index 408f370e13..4af6a1a570 100644
--- a/packages/ui-map-components/src/components/Legend/SpectrumLegend.tsx
+++ b/packages/ui-map-components/src/components/Legend/SpectrumLegend.tsx
@@ -63,8 +63,6 @@ const getSpectrumLabels = (
         left: formatDataValueByType({ value: min }, valueType),
         right: formatDataValueByType({ value: max }, valueType),
       };
-    case ScaleType.TIME:
-      return { left: '0 days', right: `${moment(max).diff(min, 'days')} days old` };
     default:
       return { left: '0%', right: '100%' };
   }
@@ -92,12 +90,6 @@ const renderSpectrum = ({ min, max, scaleType, scaleColorScheme, valueType }: Sp
   }
 
   switch (scaleType) {
-    case ScaleType.TIME:
-      for (let i = 0; i < 1; i += 0.01) {
-        const colour = resolveSpectrumColour(scaleType, scaleColorScheme, i, min, max);
-        spectrumDivs.push(<SpectrumSliver style={{ background: colour }} key={i} />);
-      }
-      break;
     case ScaleType.PERFORMANCE:
     case ScaleType.GPI:
     case ScaleType.PERFORMANCE_DESC:
diff --git a/packages/ui-map-components/src/components/Table/getMapTableData.tsx b/packages/ui-map-components/src/components/Table/getMapTableData.tsx
index feda9cdcd5..f6a41a01a3 100644
--- a/packages/ui-map-components/src/components/Table/getMapTableData.tsx
+++ b/packages/ui-map-components/src/components/Table/getMapTableData.tsx
@@ -36,7 +36,6 @@ const processColumns = (serieses: Series[]) => {
       },
     },
     ...configColumns,
-    { Header: 'Most Recent Data Date', accessor: 'submissionDate' },
   ];
 };
 
@@ -54,17 +53,16 @@ const processData = (serieses: Series[], measureData: MeasureData[]) => {
     return {
       name: row.name,
       ...columns,
-      submissionDate: row.submissionDate ?? 'No data',
     };
   });
 };
 
 export const getMapTableData = (serieses: Series[], measureData: MeasureData[]) => {
   const columns = useMemo(() => processColumns(serieses), [JSON.stringify(serieses)]);
-  const data = useMemo(() => processData(serieses, measureData), [
-    JSON.stringify(serieses),
-    JSON.stringify(measureData),
-  ]);
+  const data = useMemo(
+    () => processData(serieses, measureData),
+    [JSON.stringify(serieses), JSON.stringify(measureData)],
+  );
 
   return {
     columns,
diff --git a/packages/ui-map-components/src/types/types.ts b/packages/ui-map-components/src/types/types.ts
index b9864fe8cd..62962f61e2 100644
--- a/packages/ui-map-components/src/types/types.ts
+++ b/packages/ui-map-components/src/types/types.ts
@@ -51,7 +51,6 @@ export type MeasureData = Omit<PolygonProps, 'positions'> &
     icon?: IconKey;
     photoUrl?: string;
     value?: number | string;
-    submissionDate?: string | Date;
     positions?: PolygonProps['positions']; //allow this to be optional because of the loose types of measure data
   };
 
diff --git a/packages/ui-map-components/src/utils/markerColors.ts b/packages/ui-map-components/src/utils/markerColors.ts
index 1ddfbcc703..d2d4dd2a2a 100644
--- a/packages/ui-map-components/src/utils/markerColors.ts
+++ b/packages/ui-map-components/src/utils/markerColors.ts
@@ -14,7 +14,6 @@ const COLOR_SCHEME_TO_FUNCTION = {
   [MeasureColorScheme.DEFAULT]: getHeatmapColor,
   [MeasureColorScheme.REVERSE_DEFAULT]: getReverseHeatmapColor,
   [MeasureColorScheme.PERFORMANCE]: getPerformanceHeatmapColor,
-  [MeasureColorScheme.TIME]: getTimeHeatmapColor,
   [MeasureColorScheme.GPI]: getGPIColor,
 };
 
@@ -23,7 +22,6 @@ const SCALE_TYPE_TO_COLOR_SCHEME = {
   [ScaleType.PERFORMANCE_DESC]: MeasureColorScheme.PERFORMANCE,
   [ScaleType.NEUTRAL]: MeasureColorScheme.DEFAULT,
   [ScaleType.NEUTRAL_REVERSE]: MeasureColorScheme.REVERSE_DEFAULT,
-  [ScaleType.TIME]: MeasureColorScheme.TIME,
   [ScaleType.GPI]: MeasureColorScheme.GPI,
 };
 
@@ -41,8 +39,7 @@ export function resolveSpectrumColour(
   max: number | string, // the highest number or a string representing latest date in a range
   noDataColour?: string, // css hsl string, e.g. `hsl(value, 100%, 50%)` for null value
 ): string {
-  if (value === null || (isNaN(value) && scaleType !== ScaleType.TIME))
-    return noDataColour || HEATMAP_UNKNOWN_COLOR;
+  if (value === null || isNaN(value)) return noDataColour || HEATMAP_UNKNOWN_COLOR;
 
   let valueToColor: (value: number | null, ...args: any[]) => string;
   if (scaleColorScheme) {
@@ -61,11 +58,6 @@ export function resolveSpectrumColour(
           : null;
       return valueToColor(percentage as number);
     }
-    case ScaleType.TIME:
-      // if the value passed is a date locate it in the [min, max] range
-      if (isNaN(value))
-        return valueToColor(getTimeProportion(value, min as string, max as string), noDataColour);
-      return valueToColor(value, noDataColour);
 
     case ScaleType.GPI:
       return valueToColor(value, min, max);
diff --git a/packages/ui-map-components/src/utils/markerFormats.ts b/packages/ui-map-components/src/utils/markerFormats.ts
index 9cab4383ab..e3a716645b 100644
--- a/packages/ui-map-components/src/utils/markerFormats.ts
+++ b/packages/ui-map-components/src/utils/markerFormats.ts
@@ -5,7 +5,7 @@
  */
 
 import { formatDataValueByType } from '@tupaia/utils';
-import { IconMapOverlayConfig, ScaleType } from '@tupaia/types';
+import { IconMapOverlayConfig } from '@tupaia/types';
 import { YES_COLOR, NO_COLOR, BREWER_AUTO, UNKNOWN_COLOR, MAP_COLORS } from '../constants';
 import { SPECTRUM_ICON, DEFAULT_ICON, UNKNOWN_ICON } from '../components/Markers/markerIcons';
 import {
@@ -111,24 +111,16 @@ function getFormattedValue(
   value: Value,
   type: Series['type'],
   valueInfo: SeriesValue,
-  scaleType: `${ScaleType}` | undefined,
   valueType: Series['valueType'],
-  submissionDate: MeasureData['submissionDate'],
 ) {
   switch (type) {
     case MEASURE_TYPE_SPECTRUM:
     case MEASURE_TYPE_SHADED_SPECTRUM:
-      if (scaleType === ScaleType.TIME) {
-        return `last submission on ${submissionDate}`;
-      }
       return formatDataValueByType({ value }, valueType);
     case MEASURE_TYPE_RADIUS:
     case MEASURE_TYPE_ICON:
     case MEASURE_TYPE_COLOR:
     case MEASURE_TYPE_SHADING:
-      if (scaleType === ScaleType.TIME) {
-        return `last submission on ${submissionDate}`;
-      }
       return valueInfo.name || value;
     default:
       return value;
@@ -136,11 +128,7 @@ function getFormattedValue(
 }
 
 export const getSpectrumScaleValues = (measureData: MeasureData[], series: Series) => {
-  const { key, startDate, endDate } = series;
-
-  if ('scaleType' in series && series.scaleType === ScaleType.TIME) {
-    return { min: startDate, max: endDate };
-  }
+  const { key } = series;
 
   const flattenedMeasureData = flattenNumericalMeasureData(measureData, key);
 
@@ -281,7 +269,6 @@ export const getSingleFormattedValue = (markerData: MeasureData, series: Series[
 
 export function getFormattedInfo(markerData: MeasureData, series: Series) {
   const { key, valueMapping, type, displayedValueKey, valueType } = series;
-  const scaleType = 'scaleType' in series ? series.scaleType : undefined;
   const value = markerData[key];
   const valueInfo = getValueInfo(value, valueMapping);
 
@@ -301,14 +288,7 @@ export function getFormattedInfo(markerData: MeasureData, series: Series) {
   }
 
   return {
-    formattedValue: getFormattedValue(
-      value,
-      type,
-      valueInfo,
-      scaleType,
-      valueType,
-      markerData.submissionDate,
-    ),
+    formattedValue: getFormattedValue(value, type, valueInfo, valueType),
     valueInfo,
   };
 }
diff --git a/packages/web-config-server/src/apiV1/measureBuilders/checkTimeliness.js b/packages/web-config-server/src/apiV1/measureBuilders/checkTimeliness.js
deleted file mode 100644
index 6ca01139e4..0000000000
--- a/packages/web-config-server/src/apiV1/measureBuilders/checkTimeliness.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { DataBuilder } from '/apiV1/dataBuilders/DataBuilder';
-import { getDateRange } from '/apiV1/utils';
-import { periodToMoment } from '@tupaia/tsutils';
-
-class CheckTimelinessMeasureBuilder extends DataBuilder {
-  async build() {
-    const { periodGranularity } = this.config;
-    const { dataElementCode, startDate: passedStartDate, endDate: passedEndDate } = this.query;
-    const { startDate, endDate } = getDateRange(periodGranularity, passedStartDate, passedEndDate);
-
-    const dhisParameters = {
-      dataElementGroupCode: dataElementCode,
-      orgUnitIdScheme: 'code',
-      startDate: startDate.toISOString(),
-      endDate: endDate.toISOString(),
-    };
-    const results = await this.dhisApi.getDataValuesInSets(dhisParameters, this.entity);
-
-    // annotate each facility with the corresponding data from dhis
-    return {
-      data: results.map(row => ({
-        organisationUnitCode: row.organisationUnit,
-        [dataElementCode]: row.value === undefined ? '' : row.value.toString(),
-        submissionDate: periodToMoment(row.period.toString()).format('YYYY-MM-DD'),
-      })),
-    };
-  }
-}
-
-/**
- * @param {DhisApi} dhisApi
- * @param {Object} query
- * @param {Object} [measureBuilderConfig={}]
- * @returns {Promise<Object>}
- */
-export const checkTimeliness = async (
-  models,
-  aggregator,
-  dhisApi,
-  query,
-  measureBuilderConfig = {},
-  entity,
-) => {
-  const builder = new CheckTimelinessMeasureBuilder(
-    models,
-    aggregator,
-    dhisApi,
-    measureBuilderConfig,
-    query,
-    entity,
-  );
-  const responseObject = await builder.build();
-
-  return responseObject;
-};
diff --git a/packages/web-config-server/src/apiV1/measureBuilders/index.js b/packages/web-config-server/src/apiV1/measureBuilders/index.js
index 789511bcf1..cb834dcd60 100644
--- a/packages/web-config-server/src/apiV1/measureBuilders/index.js
+++ b/packages/web-config-server/src/apiV1/measureBuilders/index.js
@@ -1,4 +1,3 @@
-export { checkTimeliness } from './checkTimeliness';
 export { checkConditions } from './checkConditions';
 export { composePercentagePerOrgUnit } from './composePercentagePerOrgUnit';
 export { countEventsPerOrgUnit } from './countEventsPerOrgUnit';

From 218d9c982dda2c3dfb2d32ff10f4dba501836ad9 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Mon, 20 May 2024 14:26:04 +1200
Subject: [PATCH 17/26] fix(adminPanel): Fix default sorting not being set

---
 .../src/table/DataFetchingTable/DataFetchingTable.jsx          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
index e86e72df83..762e9d3d65 100644
--- a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
+++ b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
@@ -110,6 +110,7 @@ const DataFetchingTableComponent = ({
   baseFilter,
   basePath,
   resourceName,
+  defaultSorting,
 }) => {
   const {
     getTableProps,
@@ -178,7 +179,7 @@ const DataFetchingTableComponent = ({
       initialiseTable();
     }
     gotoPage(0);
-    setSortBy([]); // reset sorting when table is re-initialised
+    setSortBy(defaultSorting ?? []); // reset sorting when table is re-initialised
   }, [endpoint, baseFilter]);
 
   const onChangeFilters = newFilters => {

From 6173c7bb977587731a456927a708ae897430875b Mon Sep 17 00:00:00 2001
From: Rohan Port <59544282+rohan-bes@users.noreply.github.com>
Date: Mon, 20 May 2024 14:40:29 +1200
Subject: [PATCH 18/26] fix(viz): Ensure that the `Date` column in the viz
 table is formatted the same as the X axis (#5619)

---
 .../src/components/Reference/ChartTooltip.tsx | 27 ++++++++++++++-----
 .../src/utils/getChartTableData.tsx           | 10 ++++++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/ui-chart-components/src/components/Reference/ChartTooltip.tsx b/packages/ui-chart-components/src/components/Reference/ChartTooltip.tsx
index 532be543a2..fe95fefada 100644
--- a/packages/ui-chart-components/src/components/Reference/ChartTooltip.tsx
+++ b/packages/ui-chart-components/src/components/Reference/ChartTooltip.tsx
@@ -127,7 +127,11 @@ const MultiValueTooltip = ({
         {headline ||
           (getIsTimeSeries([data]) &&
             periodGranularity &&
-            formatTimestampForChart(timestamp, periodGranularity))}
+            formatTimestampForChart(
+              timestamp,
+              periodGranularity,
+              presentationOptions?.periodTickFormat,
+            ))}
       </Heading>
       <List>{valueLabels}</List>
     </TooltipContainer>
@@ -138,6 +142,7 @@ const SingleValueTooltip = ({
   valueType,
   payload,
   periodGranularity,
+  presentationOptions,
   labelType,
 }: ChartTooltipPropsWithData) => {
   const data = payload[0].payload;
@@ -150,7 +155,13 @@ const SingleValueTooltip = ({
     <TooltipContainer>
       {getIsTimeSeries([payload[0].payload]) && periodGranularity ? (
         <>
-          <Heading>{formatTimestampForChart(timestamp, periodGranularity)}</Heading>
+          <Heading>
+            {formatTimestampForChart(
+              timestamp,
+              periodGranularity,
+              presentationOptions?.periodTickFormat,
+            )}
+          </Heading>
           <Text>{formatDataValueByType({ value, metadata }, valueTypeForLabel)}</Text>
         </>
       ) : (
@@ -163,10 +174,8 @@ const SingleValueTooltip = ({
 const NoDataTooltip = ({
   payload,
   periodGranularity,
-}: {
-  payload: any[];
-  periodGranularity?: `${VizPeriodGranularity}`;
-}) => {
+  presentationOptions,
+}: ChartTooltipPropsWithData) => {
   const data = payload[0]?.payload;
   const { name = undefined, timestamp = undefined } = data || {};
 
@@ -176,7 +185,11 @@ const NoDataTooltip = ({
         {name ||
           (getIsTimeSeries([data]) &&
             periodGranularity &&
-            formatTimestampForChart(timestamp, periodGranularity))}
+            formatTimestampForChart(
+              timestamp,
+              periodGranularity,
+              presentationOptions?.periodTickFormat,
+            ))}
       </Heading>
       <Text>No Data</Text>
     </TooltipContainer>
diff --git a/packages/ui-chart-components/src/utils/getChartTableData.tsx b/packages/ui-chart-components/src/utils/getChartTableData.tsx
index 8eac57d8ae..2434f6ca35 100644
--- a/packages/ui-chart-components/src/utils/getChartTableData.tsx
+++ b/packages/ui-chart-components/src/utils/getChartTableData.tsx
@@ -78,9 +78,17 @@ const processColumns = (report?: ChartReport, config?: ChartConfig, sortByTimest
   }
 
   if (hasTimeSeriesData) {
+    const periodTickFormat =
+      config &&
+      'presentationOptions' in config &&
+      typeof config.presentationOptions?.periodTickFormat === 'string' // Must check for string as otherwise might be a PieChart presentationOption
+        ? config.presentationOptions?.periodTickFormat
+        : undefined;
+
     firstColumn = makeFirstColumn(
       xName || 'Date',
-      (row: LooseObject) => formatTimestampForChart(row.timestamp, config?.periodGranularity),
+      (row: LooseObject) =>
+        formatTimestampForChart(row.timestamp, config?.periodGranularity, periodTickFormat),
       sortByTimestamp,
     );
   }

From 377604ac57574c38290c55fb318ca841d033c846 Mon Sep 17 00:00:00 2001
From: Rohan Port <59544282+rohan-bes@users.noreply.github.com>
Date: Tue, 21 May 2024 08:58:35 +1200
Subject: [PATCH 19/26] fix(meditrak): RN-1316: Improve responsiveness when
 filling out a survey with lots of conditional or calculated questions (#5657)

---
 .../meditrak-app/app/assessment/selectors.jsx | 101 ++++++++++++------
 1 file changed, 69 insertions(+), 32 deletions(-)

diff --git a/packages/meditrak-app/app/assessment/selectors.jsx b/packages/meditrak-app/app/assessment/selectors.jsx
index 5327b7d0a3..dcfa6615bb 100644
--- a/packages/meditrak-app/app/assessment/selectors.jsx
+++ b/packages/meditrak-app/app/assessment/selectors.jsx
@@ -3,14 +3,23 @@
  * Copyright (c) 2017 Beyond Essential Systems Pty Ltd
  */
 
-import { ExpressionParser, BooleanExpressionParser } from '@tupaia/expression-parser';
-import { checkAnswerPreconditionsAreMet } from './helpers';
+import {
+  ExpressionParser,
+  BooleanExpressionParser,
+} from '@tupaia/expression-parser';
+import {checkAnswerPreconditionsAreMet} from './helpers';
 
-export const getSurveyScreenIndex = state => state.assessment.currentScreenIndex;
+const expressionParser = new ExpressionParser();
+const booleanExpressionParser = new BooleanExpressionParser();
 
-export const getCurrentScreen = state => getSurveyScreen(state, getSurveyScreenIndex(state));
+export const getSurveyScreenIndex = state =>
+  state.assessment.currentScreenIndex;
 
-export const getSurveyScreen = (state, screenIndex) => getScreens(state)[screenIndex];
+export const getCurrentScreen = state =>
+  getSurveyScreen(state, getSurveyScreenIndex(state));
+
+export const getSurveyScreen = (state, screenIndex) =>
+  getScreens(state)[screenIndex];
 
 export const getScreens = state => state.assessment.screens || [];
 
@@ -35,7 +44,7 @@ export const getErrorMessageForScreen = (state, screenIndex) => {
 };
 
 const checkQuestionIsVisible = (answers, visibilityCriteria) => {
-  const { hidden } = visibilityCriteria;
+  const {hidden} = visibilityCriteria;
   return !hidden && checkAnswerPreconditionsAreMet(answers, visibilityCriteria);
 };
 
@@ -56,7 +65,8 @@ export const getSurveyScreenQuestions = (state, screenIndex) => {
       ...getQuestion(state, questionId),
       componentIndex: index,
       visibilityCriteria,
-      checkVisibility: answers => checkQuestionIsVisible(answers, visibilityCriteria),
+      checkVisibility: answers =>
+        checkQuestionIsVisible(answers, visibilityCriteria),
       validationCriteria,
     };
 
@@ -78,53 +88,70 @@ export const getValidQuestions = (state, questions, validatedScreens) => {
     curr.components.forEach(component => {
       components[component.questionId] = component.visibilityCriteria;
     });
-    return { ...prev, ...components };
+    return {...prev, ...components};
   }, {});
 
   return Object.values(questions).filter(question =>
-    checkAnswerPreconditionsAreMet(answers, visibilityCriteriaByQuestion[question.id]),
+    checkAnswerPreconditionsAreMet(
+      answers,
+      visibilityCriteriaByQuestion[question.id],
+    ),
   );
 };
 
-export const getSelectedCountryId = ({ country }) => country.selectedCountryId;
+export const getSelectedCountryId = ({country}) => country.selectedCountryId;
 
 // Whether a given survey can repeat, i.e. be done again and again within a single facility on a
 // single date. If no surveyId passed in, will assume the current survey being completed
-export const getCanSurveyRepeat = ({ assessment }, surveyId = assessment.surveyId) =>
-  assessment.surveys[surveyId] && assessment.surveys[surveyId].canRepeat;
+export const getCanSurveyRepeat = (
+  {assessment},
+  surveyId = assessment.surveyId,
+) => assessment.surveys[surveyId] && assessment.surveys[surveyId].canRepeat;
 
 // The name of a survey. If no surveyId passed in, will assume the current survey being completed
-export const getSurveyName = ({ assessment }, surveyId = assessment.surveyId) =>
+export const getSurveyName = ({assessment}, surveyId = assessment.surveyId) =>
   assessment.surveys[surveyId].name;
 
 export const getQuestionState = (state, screenIndex, componentIndex) => {
-  const component = getSurveyScreen(state, screenIndex).components[componentIndex];
+  const component = getSurveyScreen(state, screenIndex).components[
+    componentIndex
+  ];
   return {
     ...component,
     answer: getAnswerForQuestion(state, component.questionId),
   };
 };
 
-export const getQuestion = (state, questionId) => state.assessment.questions[questionId];
+export const getQuestion = (state, questionId) =>
+  state.assessment.questions[questionId];
 
 export const getAnswers = state => state.assessment.answers;
 
-export const getAnswerForQuestion = (state, questionId) => getAnswers(state)[questionId];
+export const getAnswerForQuestion = (state, questionId) =>
+  getAnswers(state)[questionId];
 
 export const getArithmeticResult = (state, arithmeticQuestionId) => {
-  const { config } = getQuestion(state, arithmeticQuestionId);
+  const {config} = getQuestion(state, arithmeticQuestionId);
 
   const {
-    arithmetic: { formula, valueTranslation = {}, defaultValues = {}, answerDisplayText = '' },
+    arithmetic: {
+      formula,
+      valueTranslation = {},
+      defaultValues = {},
+      answerDisplayText = '',
+    },
   } = config;
 
   const values = {};
-  const expressionParser = new ExpressionParser();
+
   const variables = expressionParser.getVariables(formula);
   const getArithmeticAnswer = questionId => {
     const answer = getAnswerForQuestion(state, questionId);
 
-    if (valueTranslation[questionId] && valueTranslation[questionId][answer] !== undefined) {
+    if (
+      valueTranslation[questionId] &&
+      valueTranslation[questionId][answer] !== undefined
+    ) {
       return valueTranslation[questionId][answer]; // return translated answer if there's any
     }
     // return raw answer if it's a number, else 0 (e.g. if no valueTranslation provided for the question and this specific answer when answer is non-numeric)
@@ -133,7 +160,9 @@ export const getArithmeticResult = (state, arithmeticQuestionId) => {
     }
 
     // return default answer if there's no answer
-    return defaultValues[questionId] !== undefined ? defaultValues[questionId] : 0; // No answer found, return the default answer
+    return defaultValues[questionId] !== undefined
+      ? defaultValues[questionId]
+      : 0; // No answer found, return the default answer
   };
 
   // Setting up scope values.
@@ -147,14 +176,20 @@ export const getArithmeticResult = (state, arithmeticQuestionId) => {
   const result = !isNaN(expressionParser.evaluate(formula))
     ? Math.round(expressionParser.evaluate(formula) * 1000) / 1000 // Round to 3 decimal places
     : 0;
-
+  expressionParser.clearScope();
   // Replace variables with actual values in answerDisplayText
   let translatedAnswerDisplayText = answerDisplayText;
   questionIds.forEach(questionId => {
     const answer = values[`$${questionId}`];
-    translatedAnswerDisplayText = translatedAnswerDisplayText.replace(questionId, answer);
+    translatedAnswerDisplayText = translatedAnswerDisplayText.replace(
+      questionId,
+      answer,
+    );
   });
-  translatedAnswerDisplayText = translatedAnswerDisplayText.replace('$result', result);
+  translatedAnswerDisplayText = translatedAnswerDisplayText.replace(
+    '$result',
+    result,
+  );
 
   return {
     answerDisplayText: translatedAnswerDisplayText,
@@ -163,25 +198,27 @@ export const getArithmeticResult = (state, arithmeticQuestionId) => {
 };
 
 export const getConditionResult = (state, conditionQuestionId) => {
-  const { config } = getQuestion(state, conditionQuestionId);
+  const {config} = getQuestion(state, conditionQuestionId);
   const {
-    condition: { conditions },
+    condition: {conditions},
   } = config;
-  const expressionParser = new BooleanExpressionParser();
-  const checkConditionMet = ({ formula, defaultValues = {} }) => {
+  const checkConditionMet = ({formula, defaultValues = {}}) => {
     const values = {};
-    const variables = expressionParser.getVariables(formula);
+    const variables = booleanExpressionParser.getVariables(formula);
 
     variables.forEach(questionIdVariable => {
       const questionId = questionIdVariable.replace(/^\$/, ''); // Remove the first $ prefix
       const answer = getAnswerForQuestion(state, questionId);
-      const defaultValue = defaultValues[questionId] !== undefined ? defaultValues[questionId] : 0; // 0 is the last resort
+      const defaultValue =
+        defaultValues[questionId] !== undefined ? defaultValues[questionId] : 0; // 0 is the last resort
       const value = answer !== undefined ? answer : defaultValue;
       values[questionIdVariable] = value;
     });
 
-    expressionParser.setAll(values);
-    return expressionParser.evaluate(formula);
+    booleanExpressionParser.setAll(values);
+    const result = booleanExpressionParser.evaluate(formula);
+    booleanExpressionParser.clearScope();
+    return result;
   };
 
   const result = Object.keys(conditions).find(resultValue =>

From 9dfe5e4216a13bde2c0436a45a012355bf92808f Mon Sep 17 00:00:00 2001
From: Rohan Port <rohan@beyondessential.com.au>
Date: Tue, 21 May 2024 09:07:39 +1200
Subject: [PATCH 20/26] tweak(meditrak): Bump meditrak version to 1.14.141

---
 packages/meditrak-app/android/app/build.gradle            | 4 ++--
 .../ios/TupaiaMediTrak.xcodeproj/project.pbxproj          | 8 ++++----
 packages/meditrak-app/package.json                        | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/meditrak-app/android/app/build.gradle b/packages/meditrak-app/android/app/build.gradle
index f8a28e2512..b2ae9f2396 100644
--- a/packages/meditrak-app/android/app/build.gradle
+++ b/packages/meditrak-app/android/app/build.gradle
@@ -84,8 +84,8 @@ android {
         applicationId "com.tupaiameditrak"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 140
-        versionName "1.14.140"
+        versionCode 141
+        versionName "1.14.141"
     }
     signingConfigs {
         debug {
diff --git a/packages/meditrak-app/ios/TupaiaMediTrak.xcodeproj/project.pbxproj b/packages/meditrak-app/ios/TupaiaMediTrak.xcodeproj/project.pbxproj
index d99430d3a0..09574ef2fe 100644
--- a/packages/meditrak-app/ios/TupaiaMediTrak.xcodeproj/project.pbxproj
+++ b/packages/meditrak-app/ios/TupaiaMediTrak.xcodeproj/project.pbxproj
@@ -489,7 +489,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 140;
+				CURRENT_PROJECT_VERSION = 141;
 				DEVELOPMENT_TEAM = 352QMCKRKJ;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = TupaiaMediTrak/Info.plist;
@@ -497,7 +497,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.14.140;
+				MARKETING_VERSION = 1.14.141;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -517,14 +517,14 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 140;
+				CURRENT_PROJECT_VERSION = 141;
 				DEVELOPMENT_TEAM = 352QMCKRKJ;
 				INFOPLIST_FILE = TupaiaMediTrak/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.14.140;
+				MARKETING_VERSION = 1.14.141;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
diff --git a/packages/meditrak-app/package.json b/packages/meditrak-app/package.json
index 96dc307c00..c90023dd46 100644
--- a/packages/meditrak-app/package.json
+++ b/packages/meditrak-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tupaia/meditrak-app",
-  "version": "1.14.140",
+  "version": "1.14.141",
   "private": true,
   "scripts": {
     "android": "react-native run-android",

From 49ee559b7e17b57745179982e864b4583e2e8754 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Tue, 21 May 2024 09:13:44 +1200
Subject: [PATCH 21/26] tweak(AdminPanel): Make inactive sorting icons lower
 opacity

---
 packages/admin-panel/src/table/DataFetchingTable/Cells.jsx     | 3 +++
 .../src/table/DataFetchingTable/DataFetchingTable.jsx          | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx b/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx
index dac7f2fd8e..67dfee15a3 100644
--- a/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx
+++ b/packages/admin-panel/src/table/DataFetchingTable/Cells.jsx
@@ -64,6 +64,9 @@ const HeaderCell = styled(Cell)`
   position: initial; // override this because we have 2 sticky header rows so we will apply sticky to the thead element
   background-color: ${({ theme }) => theme.palette.background.paper};
   .MuiTableSortLabel-icon {
+    opacity: 0.5;
+  }
+  .MuiTableSortLabel-active .MuiTableSortLabel-icon {
     opacity: 1;
   }
   // apply a min width to the button column to prevent it from shrinking the filter input too much
diff --git a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
index 762e9d3d65..d1fc15b1fe 100644
--- a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
+++ b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
@@ -352,6 +352,7 @@ DataFetchingTableComponent.propTypes = {
   baseFilter: PropTypes.object,
   basePath: PropTypes.string,
   resourceName: PropTypes.object,
+  defaultSorting: PropTypes.array,
 };
 
 DataFetchingTableComponent.defaultProps = {
@@ -370,6 +371,7 @@ DataFetchingTableComponent.defaultProps = {
   baseFilter: null,
   basePath: '',
   resourceName: {},
+  defaultSorting: [],
 };
 
 const mapStateToProps = (state, { columns, reduxId, ...ownProps }) => ({

From 83cb058bde30320587f2b4be5dadc4bf043922f7 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Tue, 21 May 2024 09:14:05 +1200
Subject: [PATCH 22/26] tweak(datatrakWeb): Add padding to textareas

---
 .../RequestCountryAccessSection/RequestCountryAccessForm.tsx   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessForm.tsx b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessForm.tsx
index c901cdd352..4a1cdd3e51 100644
--- a/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessForm.tsx
+++ b/packages/datatrak-web/src/views/AccountSettingsPage/RequestCountryAccessSection/RequestCountryAccessForm.tsx
@@ -82,6 +82,9 @@ const StyledFormInput = styled(FormInput).attrs({
   .MuiInputBase-input {
     box-sizing: border-box;
   }
+  .MuiOutlinedInput-inputMultiline {
+    padding: 1rem;
+  }
 `;
 
 interface RequestCountryAccessFormProps {

From de399b7f8670962872c0e0bd0120cbeb233d5b63 Mon Sep 17 00:00:00 2001
From: Rohan Port <rohan@beyondessential.com.au>
Date: Tue, 21 May 2024 12:53:29 +1200
Subject: [PATCH 23/26] tweak(adminPanel): Fix padding on textarea inputs

---
 .../src/widgets/InputField/registerInputFields.jsx   | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx b/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx
index 57e644f815..4d409f71ce 100644
--- a/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx
+++ b/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx
@@ -61,6 +61,12 @@ export const StyledCheckboxWrapper = styled.div`
   }
 `;
 
+const StyledTextField = styled(TextField)`
+  .MuiOutlinedInput-inputMultiline {
+    padding: 1rem;
+  }
+`;
+
 export const registerInputFields = () => {
   registerInputField('autocomplete', props => (
     <ReduxAutocomplete
@@ -220,7 +226,7 @@ export const registerInputFields = () => {
     );
   });
   registerInputField('textarea', props => (
-    <TextField
+    <StyledTextField
       id={props.id}
       label={props.label}
       value={props.value || ''}
@@ -239,7 +245,7 @@ export const registerInputFields = () => {
     />
   ));
   registerInputField('text', props => (
-    <TextField
+    <StyledTextField
       id={props.id}
       label={props.label}
       value={props.value === undefined || props.value === null ? '' : props.value} // we still want to show 0 value
@@ -263,7 +269,7 @@ export const registerInputFields = () => {
     />
   ));
   registerInputField('password', props => (
-    <TextField
+    <StyledTextField
       id={props.id}
       label={props.label}
       value={props.value === undefined || props.value === null ? '' : props.value} // we still want to show 0 value

From 1ea09d9e6490074e33560a4564a11db20c61ecdb Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Tue, 21 May 2024 15:09:02 +1200
Subject: [PATCH 24/26] fix(adminPanel): Add permission groups field to data
 elements

---
 packages/admin-panel/src/common.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/admin-panel/src/common.jsx b/packages/admin-panel/src/common.jsx
index 261c9ccfcd..702d01b6d9 100644
--- a/packages/admin-panel/src/common.jsx
+++ b/packages/admin-panel/src/common.jsx
@@ -151,7 +151,11 @@ export const DATA_ELEMENT_FIELDS = [
     source: 'permission_groups',
     type: 'tooltip',
     editConfig: {
-      type: 'jsonArray',
+      optionsEndpoint: 'permissionGroups',
+      optionLabelKey: 'name',
+      optionValueKey: 'name',
+      sourceKey: 'permission_groups',
+      allowMultipleValues: true,
     },
   },
 ];

From 535b6568dca29792f9722c044c5afd4870e86f02 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Wed, 22 May 2024 08:14:45 +1200
Subject: [PATCH 25/26] fix(lesmis): Fix hooks mismatch on favourites dashboard

---
 packages/lesmis/src/utils/useStartAndEndDates.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/lesmis/src/utils/useStartAndEndDates.js b/packages/lesmis/src/utils/useStartAndEndDates.js
index e82b94bbd6..1b70001577 100644
--- a/packages/lesmis/src/utils/useStartAndEndDates.js
+++ b/packages/lesmis/src/utils/useStartAndEndDates.js
@@ -15,11 +15,12 @@ export const useStartAndEndDates = periodGranularity => {
   const { useYearSelector } = selectedOption;
   const isFavouriteDashboardSelected = useIsFavouriteDashboardSelected();
 
+  const [{ startDate, endDate, year }] = useUrlSearchParams();
+
   if (isFavouriteDashboardSelected) {
     return yearToApiDates(DEFAULT_DATA_YEAR);
   }
 
-  const [{ startDate, endDate, year }] = useUrlSearchParams();
   if (startDate || endDate) {
     return { startDate, endDate };
   }

From d812a8c4f715d861ae16c7a58d95393979f69f28 Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Wed, 22 May 2024 08:18:51 +1200
Subject: [PATCH 26/26] fix(lesmis): Fix PDF export routing

---
 packages/lesmis/src/routes/PageRoutes.jsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/lesmis/src/routes/PageRoutes.jsx b/packages/lesmis/src/routes/PageRoutes.jsx
index b15238bcfe..d861ca100e 100644
--- a/packages/lesmis/src/routes/PageRoutes.jsx
+++ b/packages/lesmis/src/routes/PageRoutes.jsx
@@ -116,10 +116,8 @@ export const PageRoutes = React.memo(() => {
           </>
         }
       />
-      <Route
-        path="/pdf-export/:entityCode?"
-        element={<ExportView viewType={PDF_DOWNLOAD_VIEW} />}
-      />
+      <Route path="/pdf-export/:entityCode" element={<ExportView viewType={PDF_DOWNLOAD_VIEW} />} />
+      <Route path="/pdf-export" element={<ExportView viewType={PDF_DOWNLOAD_VIEW} />} />
       <Route
         path="/:entityCode/*"
         element={