Repository: ourjapanlife/findadoc-web
Pull request #1139: feat: add functionality for moderator to create a facility
Author: login: ljbroersen
Labels: name: enhancement
description: New feature or request
name: moderation panel
Created: 2025-04-20T14:53:25Z | Merged: 2025-05-19T16:09:10Z

✅ Resolves #1043 
- [x] PR title follows [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) specifications
- [x] PR assignee has been selected
- [x] PR label has been selected
- [x] @NabbeunNabi has been selected for preliminary review

## 🔧 What changed

- On the left navbar for the moderation panel dashboard, choose "Facilities" in the dropdown menu. Then there is a button on the topbar to add a new facility.
- When clicking on the button, you will be directed to a blank facility form without an ID (ID section is also removed from the topbar).
- The top navbar also changes when clicking on the "Add Facility" button, and you will have the choice between "Create" (creating the new facility entry if the requirements are met) and "Exit" (going back to /moderation without saving).
- NameEn, NameJp, Latitude/Longitude cannot be left empty as of now. Everything else the form will accept. Input forms are the same as for `modEditFacilitySection.vue`. You will not be able to save the entry if the requirements are not met, and you will get an error (toast).
- You can also add Healthcare Professionals from our database while creating a new facility entry.
- When successfully saving the new facility entry, you will be send back to the "Facilities" tab where you started. At the same time, the overview of the available facilities in the database is updated and the newly created facility will be on top of the list.

- Relevant tests have been added in Cypress.

## 🧪 Testing instructions
You have to go to the Moderation Panel. There, choose "Facilities" from the left navbar. After the screen changes, there is a button on the topbar that says "Add Facility". If you click on it, you will be send to a blank form to input the data of the facility you want to create. 
- To test, you need to at least input NameEn, NameJp and Latitude/Longitude for the entry to be successfully created. 
- For the sake of thoroughly testing the creation of the new facility entry, please also add a healthcare professional.

- After the creation of the new facility entry, please click on the entry in the "Facilities" overview to check if the information has been saved correctly.
- You can also go to the healthcare professional added to check if the facility appears in the list of related facilities. Or try to add the newly created facility to a healthcare professional to check if it appears in the drop down list.

## 📸 Screenshots

-   ### Before
![mod_facility_overview_BEFORE](https://github.com/user-attachments/assets/7993d7c3-7e3b-4687-98ac-f473ff5ec703)

-   ### After
![mod_facility_overview](https://github.com/user-attachments/assets/2239f3ce-6078-4cf2-83d2-f84f2c5678de)
![mod_facility_add_facility](https://github.com/user-attachments/assets/c63b8a87-1118-49dc-91f6-3430fb672cc5)
![mod_facility_overview_succesful_creation](https://github.com/user-attachments/assets/5fc2850e-6475-470c-ae6d-41885f93ca56)
![healtcare_professional_successfully_add_new_facility](https://github.com/user-attachments/assets/5ecce816-7338-4626-a202-886c6c262cfa)



Linked issue #1043: Add functionality for moderator to create a facility
# Problem
At the moment the moderators only create facilities based on data provided in a submission but cannot use the `ModEditFacilitySection.vue` to add a completely new facility based on them contacting a facility or attending a conference. We want this functionality.

# Success
A moderator in the panel can click create facility, get a blank form, and create a completely new facility within the `ModEditFacilitySection.vue`. Tests are added in cypress to test this functionality.

### Requirements

- [ ] Add to the top nav for the dashboard to create a facility when the facility tab is chosen and direct them to a blank form with no `id`.
- [ ] Current the buttons say Update, Update & Exit, or Delete in English. In the case of creating a facility there can be a button that creates the new facility with a modal that confirms the creation with relevant text.
- [ ] A page is added that isn't `edit-facility` to `create-facility` with no `id`. (Same section can be used since even though you are not Editing a Facility the same sections are necessary. You can rename the component and change it where necessary throughout the app to make it EditOrCreate
- [ ] Tests are added in cypress



Diff:
diff --git a/components/ModCreateFacilityOrProfessionalTopbar.vue b/components/ModCreateFacilityOrProfessionalTopbar.vue
index 30c2f8698..72ea86c2a 100644
--- a/components/ModCreateFacilityOrProfessionalTopbar.vue
+++ b/components/ModCreateFacilityOrProfessionalTopbar.vue
@@ -66,6 +66,7 @@ const router = useRouter()
 
 // Initialize the stores in use
 const healthcareProfessionalsStore = useHealthcareProfessionalsStore()
+const facilitiesStore = useFacilitiesStore()
 const moderationScreenStore = useModerationScreenStore()
 const modalStore = useModalStore()
 const moderationSubmissionsStore = useModerationSubmissionsStore()
@@ -89,6 +90,23 @@ const createFacilityOrHealthcareProfessional = async () => {
         healthcareProfessionalsStore.resetCreateHealthcareProfessionalFields()
         return response
     }
+
+    if (moderationScreenStore.createFacilityScreenIsActive()) {
+        const response = await facilitiesStore.createFacility()
+
+        if (response.errors?.length) {
+            handleServerErrorMessaging(response.errors, toast, t)
+            return response
+        }
+
+        toast.success(t('modCreateFacilityOrHPTopbar.facilityCreatedSuccessfully'))
+        router.push('/moderation')
+        moderationSubmissionsStore.setSelectedModerationListViewChosen(
+            SelectedModerationListView.Facilities
+        )
+        facilitiesStore.resetCreateFacilityFields()
+        return response
+    }
 }
 
 const navigateBackToDashboardWithoutCreation = async () => {
diff --git a/components/ModCreateFacilitySection.vue b/components/ModCreateFacilitySection.vue
new file mode 100644
index 000000000..b150e2c0c
--- /dev/null
+++ b/components/ModCreateFacilitySection.vue
@@ -0,0 +1,351 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="prefecture-select-en"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="prefecture-japan-en"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanEn"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityEn"
+                        data-testid="mod-facility-section-cityEn"
+                        :label="$t('modFacilitySection.labelFacilityCityEn')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityEn')"
+                        :required="true"
+                        :input-validation-check="validateCityEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityEn')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1En"
+                        data-testid="mod-facility-section-addressLine1En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1En')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2En"
+                        data-testid="mod-facility-section-addressLine2En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2En')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureJa') }}
+                        </label>
+                        <select
+                            id="prefecture-select-ja"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureJa"
+                            data-testid="mod-facility-section-prefectureJa"
+                            name="prefecture-japan-ja"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanJa"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityJa"
+                        data-testid="mod-facility-section-cityJa"
+                        :label="$t('modFacilitySection.labelFacilityCityJa')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityJa')"
+                        :required="true"
+                        :input-validation-check="validateCityJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityJa')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1Ja"
+                        data-testid="mod-facility-section-addressLine1Ja"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1Ja')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1Ja')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1Ja')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2Ja"
+                        data-testid="mod-facility-section-addressLine2Ja"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2Ja')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2Ja')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2Ja')"
+                    />
+                </div>
+                <div
+                    class="google-maps-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.googleMapsInformation') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.googleMapsUrl"
+                        data-testid="mod-facility-section-google-maps"
+                        :label="$t('modFacilitySection.labelFacilityGoogleMapsUrl')"
+                        type="url"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityGoogleMapsUrl')"
+                        :required="true"
+                        :input-validation-check="validateGoogleMapsUrlInput"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityGoogleMapsUrl')"
+                        :autofill="facilityStore.facilitySectionFields.googlemapsURL"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.mapLatitude"
+                        data-testid="mod-facility-section-mapLatitude"
+                        :label="$t('modFacilitySection.labelFacilityMapLatitude')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityMapLatitude')"
+                        :required="true"
+                        :input-validation-check="validateFloat"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityMapLatitude')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.mapLongitude"
+                        data-testid="mod-facility-section-mapLongitude"
+                        :label="$t('modFacilitySection.labelFacilityMapLongitude')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityMapLongitude')"
+                        :required="true"
+                        :input-validation-check="validateFloat"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityMapLongitude')"
+                    />
+                </div>
+                <div class="flex flex-col">
+                    <span
+                        v-if="moderationScreenStore.createFacilityScreenIsActive()"
+                        class="mb-1 text-primary-text text-2xl font-bold font-sans leading-normal"
+                    >
+                        {{ $t('modFacilitySection.addHealthcareProfessional') }}
+                    </span>
+                    <ModSearchBar
+                        v-model="healthcareProfessionalsToAddToFacility"
+                        data-testid="mod-facility-section-doctor-search"
+                        :place-holder-text="$t('modFacilitySection.placeholderTextHealthcareProfessionalSearchbar')"
+                        :no-match-text="$t('modFacilitySection.noHealthcareProfessionalFound')"
+                        :fields-to-display-callback="healthcareProfessionalsToDisplayCallback"
+                        @search-input-change="handleHealthcareProfessionalsInputChange"
+                    />
+                    <span
+                        v-show="!healthcareProfessionalsToAddToFacility.length"
+                        class="font-semibold my-3"
+                    >- {{ $t('modFacilitySection.noHPSelected') }}
+                    </span>
+                    <div
+                        v-for="(healthcareProfessional, index) in healthcareProfessionalsToAddToFacility"
+                        :key="`${healthcareProfessional.id}-${index}`"
+                    >
+                        <ModDashboardHealthProfessionalCard
+                            :data-testid="`healthcare-professional-card-${index}`"
+                            :healthcare-professional="healthcareProfessional"
+                            :healthcare-professionals-related-to-facility="healthcareProfessionalsRelatedToFacility"
+                            :show-trash-can="false"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { type Ref, ref, onBeforeMount, nextTick } from 'vue'
+import { useModerationScreenStore, ModerationScreen } from '~/stores/moderationScreenStore'
+import { useFacilitiesStore } from '~/stores/facilitiesStore'
+import { useHealthcareProfessionalsStore } from '~/stores/healthcareProfessionalsStore'
+import { useLoadingStore } from '~/stores/loadingStore'
+import {
+    validateAddressLineEn,
+    validateAddressLineJa,
+    validateNameEn,
+    validateNameJa,
+    validatePhoneNumber,
+    validateCityEn,
+    validateEmail,
+    validateFloat,
+    validatePostalCode,
+    validateWebsite,
+    validateCityJa
+} from '~/utils/formValidations'
+import type { HealthcareProfessional } from '~/typedefs/gqlTypes'
+
+const loadingStore = useLoadingStore()
+loadingStore.setIsLoading(true)
+
+const moderationScreenStore = useModerationScreenStore()
+const facilityStore = useFacilitiesStore()
+const healthcareProfessionalsStore = useHealthcareProfessionalsStore()
+
+const isFacilitySectionInitialized: Ref<boolean> = ref(false)
+const healthcareProfessionalsRelatedToFacility: Ref<string[]>
+= ref([])
+
+// This keeps track of the existing healthcare professionals we are adding to the new facility
+const healthcareProfessionalsToAddToFacility: Ref<HealthcareProfessional[]> = ref([])
+
+const handleHealthcareProfessionalsInputChange = (filteredItems: Ref<HealthcareProfessional[]>, inputValue: string) => {
+    const input = inputValue.toLowerCase().trim()
+    filteredItems.value = healthcareProfessionalsStore.healthcareProfessionalsData.filter(
+        (healthcareProfessional: HealthcareProfessional) => {
+            const idMatches = healthcareProfessional.id.toLowerCase().startsWith(input)
+            const nameMatches = healthcareProfessional.names.some(name => {
+                const firstNameMatch = name.firstName.toLowerCase().includes(input)
+                const middleNameMatch = name.middleName?.toLowerCase().includes(input)
+                const lastNameMatch = name.lastName.toLowerCase().includes(input)
+                return firstNameMatch || middleNameMatch || lastNameMatch
+            })
+            return idMatches || nameMatches
+        }
+    )
+}
+const healthcareProfessionalsToDisplayCallback = (healthcareProfessional: HealthcareProfessional) =>
+    [healthcareProfessional.names[0].firstName + ' ' + healthcareProfessional.names[0].lastName]
+
+const listPrefectureJapanEn: Ref<string[]> = ref([
+    'Hokkaido', 'Aomori', 'Iwate', 'Miyagi', 'Akita',
+    'Yamagata', 'Fukushima', 'Ibaraki', 'Tochigi', 'Gumma', 'Saitama', 'Chiba', 'Tokyo', 'Kanagawa',
+    'Niigata', 'Toyama', 'Ishikawa', 'Fukui', 'Yamanashi', 'Nagano', 'Gifu', 'Shizuoka', 'Aichi',
+    'Mie', 'Shiga', 'Kyoto', 'Osaka', 'Hyogo', 'Nara', 'Wakayama', 'Tottori', 'Shimane', 'Okayama',
+    'Hiroshima', 'Yamaguchi', 'Tokushima', 'Kagawa', 'Ehime', 'Kochi', 'Fukuoka', 'Saga',
+    'Nagasaki', 'Kumamoto', 'Oita', 'Miyazaki', 'Kagoshima', 'Okinawa'])
+
+const listPrefectureJapanJa: Ref<string[]> = ref([
+    '北海道', '青森県', '岩手県', '宮城県', '秋田県',
+    '山形県', '福島県', '茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県', '新潟県', '富山県',
+    '石川県', '福井県', '山梨県', '長野県', '岐阜県', '静岡県', '愛知県', '三重県', '滋賀県', '京都府', '大阪府',
+    '兵庫県', '奈良県', '和歌山県', '鳥取県', '島根県', '岡山県', '広島県', '山口県', '徳島県', '香川県', '愛媛県',
+    '高知県', '福岡県', '佐賀県', '長崎県', '熊本県', '大分県', '宮崎県', '鹿児島県', '沖縄県'])
+
+onBeforeMount(async () => {
+    isFacilitySectionInitialized.value = false
+
+    // Wait for the route to be fully resolved
+    await nextTick()
+
+    // Set the active screen and ensure the UI state is consistent
+    moderationScreenStore.setActiveScreen(ModerationScreen.CreateFacility)
+
+    // Ensure UI updates are reflected with the autofill values
+    await nextTick()
+    isFacilitySectionInitialized.value = true
+    loadingStore.setIsLoading(false)
+
+    // Ensure UI updates are reflected
+    await nextTick()
+})
+
+// This makes sure a chosen healthcare professional gets added to the facility if the facility entry is created
+watch(healthcareProfessionalsToAddToFacility.value, newValue => {
+    if (newValue) {
+        facilityStore.createFacilityFields.healthcareProfessionalIds
+        = healthcareProfessionalsToAddToFacility.value.map(healthcareProfessional => healthcareProfessional.id)
+    }
+}, { deep: true })
+</script>
diff --git a/components/ModDashboardHealthProfessionalCard.vue b/components/ModDashboardHealthProfessionalCard.vue
index 681eb3329..4a05f6fdb 100644
--- a/components/ModDashboardHealthProfessionalCard.vue
+++ b/components/ModDashboardHealthProfessionalCard.vue
@@ -121,6 +121,7 @@
                     v-if="healthcareProfessional && !isHealthcareProfessionalReadyForRemoval(healthcareProfessional.id)
                         && moderationScreenStore.editSubmissionScreenIsActive()
                         || moderationScreenStore.editFacilityScreenIsActive()
+                        || moderationScreenStore.createFacilityScreenIsActive()
                         && !isHealthcareProfessionalReadyForRemoval(healthcareProfessional?.id)"
                     id="remove-related-healthcare-professional-to-facility"
                     class="flex w-8 items-center justify-center
diff --git a/components/ModDashboardTopbar.vue b/components/ModDashboardTopbar.vue
index 9ad279b90..7bff3725c 100644
--- a/components/ModDashboardTopbar.vue
+++ b/components/ModDashboardTopbar.vue
@@ -15,6 +15,15 @@
             >
                 {{ $t('modDashboardTopbar.addHealthcareProfessional') }}
             </NuxtLink>
+            <NuxtLink
+                v-if="isFacility"
+                to="/moderation/create-facility"
+                data-testid="add-facility-button"
+                class="flex justify-center items-center rounded-full bg-secondary-bg border-primary p-1 border-2 w-40
+                font-semibold text-sm mr-2 overflow-hidden text-center hover:bg-currentColor"
+            >
+                {{ $t('modDashboardTopbar.addFacility') }}
+            </NuxtLink>
             <div class="justify-start items-start flex">
                 <input
                     type="text"
@@ -75,4 +84,6 @@ const updateTextForSubmissionDashboard = (selectedTab: SelectedSubmissionListVie
 
 const isHealthcareProfessionals = computed(() => moderationSubmissionsStore.selectedModerationListViewChosen
   === SelectedModerationListView.HealthcareProfessionals)
+const isFacility = computed(() => moderationSubmissionsStore.selectedModerationListViewChosen
+  === SelectedModerationListView.Facilities)
 </script>
diff --git a/components/ModHealthcareProfessionalSearchbar.vue b/components/ModHealthcareProfessionalSearchbar.vue
index b00a95120..c0f039f89 100644
--- a/components/ModHealthcareProfessionalSearchbar.vue
+++ b/components/ModHealthcareProfessionalSearchbar.vue
@@ -85,7 +85,8 @@ const searchValue: Ref<string> = ref('')
 const healthcareProfessionalByIdOrName: Ref<HealthcareProfessional[] | []> = ref([])
 
 const addHealthcareProfessional = (id: string) => {
-    if (moderationScreenStore.editFacilityScreenIsActive()) {
+    if (moderationScreenStore.editFacilityScreenIsActive()
+      || moderationScreenStore.createFacilityScreenIsActive()) {
         //Check if the healthcareProfessional has already been added
         const foundProfessionalAlreadyPartOfFacility
         = facilitiesStore.facilitySectionFields.healthProfessionalsRelations
diff --git a/components/ModLeftNavbar.vue b/components/ModLeftNavbar.vue
index ff5d3620a..2c68d760f 100644
--- a/components/ModLeftNavbar.vue
+++ b/components/ModLeftNavbar.vue
@@ -21,6 +21,11 @@
                 NAVBAR CREATE FACILITY PLACEHOLDER
             </p>
         </div>
+        <div v-if="moderationScreenStore.createFacilityScreenIsActive()">
+            <p class="text-xl font-bold">
+                NAVBAR CREATE FACILITY PLACEHOLDER
+            </p>
+        </div>
     </div>
 </template>
 
diff --git a/components/ModMainContent.vue b/components/ModMainContent.vue
index f20cb1e84..9223a56cf 100644
--- a/components/ModMainContent.vue
+++ b/components/ModMainContent.vue
@@ -9,6 +9,16 @@
         >
             <ModEditSubmissionForm />
         </div>
+        <div
+            v-if="moderationScreenStore.createFacilityScreenIsActive()"
+            class="h-full overflow-y-auto"
+        >
+            <form
+                class="p-4 h-full overflow-y-auto"
+            >
+                <ModCreateFacilitySection />
+            </form>
+        </div>
         <div
             v-if="moderationScreenStore.editFacilityScreenIsActive()"
             class="h-full overflow-y-auto"
@@ -72,6 +82,11 @@ const setActiveScreenBasedOnRoute = async () => {
         healthcareProfessionalStore.selectedHealthcareProfessionalId = ''
         return
     }
+    if (
+        routePathForModerationScreen.value.includes('create-facility')) {
+        moderationScreenStore.setActiveScreen(ModerationScreen.CreateFacility)
+        return
+    }
 
     switch (pathSnippet) {
         case 'edit-submission':
diff --git a/components/ModTopbar.vue b/components/ModTopbar.vue
index 6b00ad82c..58d8c3f1d 100644
--- a/components/ModTopbar.vue
+++ b/components/ModTopbar.vue
@@ -26,6 +26,12 @@
         >
             <ModCreateFacilityOrProfessionalTopbar />
         </div>
+        <div
+            v-if="moderationScreenStore.createFacilityScreenIsActive()"
+            class="h-[76px] w-full"
+        >
+            <ModCreateFacilityOrProfessionalTopbar />
+        </div>
     </div>
 </template>
 
diff --git a/i18n/locales/cn.json b/i18n/locales/cn.json
index e8539cb11..6e3b9955e 100644
--- a/i18n/locales/cn.json
+++ b/i18n/locales/cn.json
@@ -120,6 +120,14 @@
     "unauthorizedline2": "如果您想成为审核员或有任何疑问，请联系我们。",
     "unauthorizedline3": "这里"
   },
+  "modCreateFacilityOrHPTopbar": {
+    "confirmExit": "Exit without saving",
+    "create": "Create",
+    "exit": "Exit",
+    "facilityCreatedSuccessfully": "Facility created successfully.",
+    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
+    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
+},
   "modDashboardLeftNav": {
     "facilities": "机构",
     "healthcareProfessionals": "医师",
@@ -312,6 +320,7 @@
     "healthcareProfessionalFacilities": "Healthcare Professional Facilities"
   },
   "modDashboardTopbar": {
+    "addFacility": "Add Facility",
     "placeholderText": "Enter name or ID to search",
     "approved": "Approved",
     "rejected": "Rejected",
@@ -405,13 +414,6 @@
     "editName": "Edit",
     "saveName": "Save"
   },
-  "modCreateFacilityOrHPTopbar": {
-    "confirmExit": "Exit without saving",
-    "create": "Create",
-    "exit": "Exit",
-    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
-    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
-  },
   "modDashboardHealthcareProfessionalCard": {
     "spokenLanguages": "Spoken languages",
     "lastName": "Last name",
@@ -419,4 +421,4 @@
     "middleName": "Middle name",
     "nameLocale": "Name locale"
   }
-}
\ No newline at end of file
+}
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index a4f6ecc84..22bbbf0a8 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -120,6 +120,14 @@
     "unauthorizedline2": "Wenn Sie Moderator werden möchten oder Fragen haben, kontaktieren Sie uns bitte ",
     "unauthorizedline3": "hier"
   },
+  "modCreateFacilityOrHPTopbar": {
+    "confirmExit": "Verlassen ohne zu Speichern",
+    "create": "Erstellen",
+    "exit": "Verlassen",
+    "facilityCreatedSuccessfully": "Einrichtung erfolgreich erstellt.",
+    "heathcareProfessionalCreatedSuccessfully": "Gesundheitsfachkraft erfolgreich erstellt.",
+    "unsavedChangesMessage": "Die Seite wird verlassen, ohne das Ihr Eintrag gespeichert wird. Alle nicht gespeicherten Daten gehen verloren."
+},
   "modDashboardLeftNav": {
     "facilities": "Einrichtungen",
     "healthcareProfessionals": "Gesundheitsfachkräfte",
@@ -312,6 +320,7 @@
     "healthcareProfessionalFacilities": "Healthcare Professional Facilities"
   },
   "modDashboardTopbar": {
+    "addFacility": "Einrichtung hinzufügen",
     "placeholderText": "Enter name or ID to search",
     "approved": "Approved",
     "rejected": "Rejected",
@@ -405,13 +414,6 @@
     "editName": "Edit",
     "saveName": "Save"
   },
-  "modCreateFacilityOrHPTopbar": {
-    "confirmExit": "Exit without saving",
-    "create": "Create",
-    "exit": "Exit",
-    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
-    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
-  },
   "modDashboardHealthcareProfessionalCard": {
     "spokenLanguages": "Spoken languages",
     "lastName": "Last name",
@@ -419,4 +421,4 @@
     "middleName": "Middle name",
     "nameLocale": "Name locale"
   }
-}
\ No newline at end of file
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index aae5b3be6..c86c1bf88 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -130,6 +130,7 @@
         "confirmExit": "Exit without saving",
         "create": "Create",
         "exit": "Exit",
+        "facilityCreatedSuccessfully": "Facility created successfully.",
         "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
         "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
     },
@@ -154,6 +155,7 @@
     },
     "modDashboardTopbar": {
         "addHealthcareProfessional": "Add Healthcare Professional",
+        "addFacility": "Add facility",
         "placeholderText": "Enter name or ID to search",
         "approved": "Approved",
         "rejected": "Rejected",
@@ -410,4 +412,4 @@
         "middleName": "Middle name",
         "nameLocale": "Name locale"
     }
-}
\ No newline at end of file
+}
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index ddd757a7e..4ebce123a 100644
--- a/i18n/locales/fr.json
+++ b/i18n/locales/fr.json
@@ -106,6 +106,14 @@
     "login": "Log in",
     "logout": "Log out"
   },
+  "modCreateFacilityOrHPTopbar": {
+    "confirmExit": "Exit without saving",
+    "create": "Create",
+    "exit": "Exit",
+    "facilityCreatedSuccessfully": "Facility created successfully.",
+    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
+    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
+},
   "modDashboardLeftNav": {
     "facilities": "Établissements",
     "healthcareProfessionals": "Professionnels de la santé",
@@ -274,6 +282,7 @@
     "healthcareProfessionalFacilities": "Healthcare Professional Facilities"
   },
   "modDashboardTopbar": {
+    "addFacility": "Add Facility",
     "placeholderText": "Enter name or ID to search",
     "approved": "Approved",
     "rejected": "Rejected",
@@ -409,13 +418,6 @@
     "editName": "Edit",
     "saveName": "Save"
   },
-  "modCreateFacilityOrHPTopbar": {
-    "confirmExit": "Exit without saving",
-    "create": "Create",
-    "exit": "Exit",
-    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
-    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
-  },
   "modDashboardHealthcareProfessionalCard": {
     "spokenLanguages": "Spoken languages",
     "lastName": "Last name",
@@ -423,4 +425,4 @@
     "middleName": "Middle name",
     "nameLocale": "Name locale"
   }
-}
\ No newline at end of file
+}
diff --git a/i18n/locales/it.json b/i18n/locales/it.json
index 15124170d..fccef37c1 100644
--- a/i18n/locales/it.json
+++ b/i18n/locales/it.json
@@ -126,6 +126,14 @@
     "unauthorizedline2": "Se desideri diventare un moderatore o hai domande, contattaci",
     "unauthorizedline3": "qui"
   },
+  "modCreateFacilityOrHPTopbar": {
+    "confirmExit": "Exit without saving",
+    "create": "Create",
+    "exit": "Exit",
+    "facilityCreatedSuccessfully": "Facility created successfully.",
+    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
+    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
+},
   "modDashboardLeftNav": {
     "facilities": "Strutture",
     "healthcareProfessionals": "Professionisti sanitari",
@@ -146,6 +154,7 @@
     "healthcareProfessionalFacilities": "Strutture collegate ai medici"
   },
   "modDashboardTopbar": {
+    "addFacility": "Add Facility",
     "placeholderText": "Inserisci nome o ID per la ricerca",
     "approved": "Approvato",
     "rejected": "Rifiutato",
@@ -396,13 +405,6 @@
     "noDegreesWereFound": "No degrees were found",
     "noLocalesWereFound": "No locales were found"
   },
-  "modCreateFacilityOrHPTopbar": {
-    "confirmExit": "Exit without saving",
-    "create": "Create",
-    "exit": "Exit",
-    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
-    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
-  },
   "modDashboardHealthcareProfessionalCard": {
     "spokenLanguages": "Spoken languages",
     "lastName": "Last name",
@@ -410,4 +412,4 @@
     "middleName": "Middle name",
     "nameLocale": "Name locale"
   }
-}
\ No newline at end of file
+}
diff --git a/i18n/locales/ja.json b/i18n/locales/ja.json
index c7233306d..1bdba39cd 100644
--- a/i18n/locales/ja.json
+++ b/i18n/locales/ja.json
@@ -120,6 +120,14 @@
     "unauthorizedline2": "モデレーターになりたい場合やご質問がある場合は、お問い合わせください",
     "unauthorizedline3": "こちらからお問い合わせ"
   },
+  "modCreateFacilityOrHPTopbar": {
+    "confirmExit": "Exit without saving",
+    "create": "Create",
+    "exit": "Exit",
+    "facilityCreatedSuccessfully": "Facility created successfully.",
+    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
+    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
+},
   "modDashboardLeftNav": {
     "facilities": "Facilities",
     "healthcareProfessionals": "Healthcare Professionals",
@@ -313,6 +321,7 @@
     "healthcareProfessionalFacilities": "Healthcare Professional Facilities"
   },
   "modDashboardTopbar": {
+    "addFacility": "Add Facility",
     "placeholderText": "Enter name or ID to search",
     "approved": "Approved",
     "rejected": "Rejected",
@@ -406,13 +415,6 @@
     "editName": "Edit",
     "saveName": "Save"
   },
-  "modCreateFacilityOrHPTopbar": {
-    "confirmExit": "Exit without saving",
-    "create": "Create",
-    "exit": "Exit",
-    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
-    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
-  },
   "modDashboardHealthcareProfessionalCard": {
     "spokenLanguages": "Spoken languages",
     "lastName": "Last name",
@@ -420,4 +422,4 @@
     "middleName": "Middle name",
     "nameLocale": "Name locale"
   }
-}
\ No newline at end of file
+}
diff --git a/i18n/locales/pt.json b/i18n/locales/pt.json
index 139f4c62f..c0d06d515 100644
--- a/i18n/locales/pt.json
+++ b/i18n/locales/pt.json
@@ -106,6 +106,14 @@
     "login": "Log in",
     "logout": "Log out"
   },
+  "modCreateFacilityOrHPTopbar": {
+    "confirmExit": "Exit without saving",
+    "create": "Create",
+    "exit": "Exit",
+    "facilityCreatedSuccessfully": "Facility created successfully.",
+    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
+    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
+},
   "modDashboardLeftNav": {
     "facilities": "Instalações",
     "healthcareProfessionals": "Profissionais de saúde",
@@ -312,6 +320,7 @@
     "healthcareProfessionalFacilities": "Healthcare Professional Facilities"
   },
   "modDashboardTopbar": {
+    "addFacility": "Add Facility",
     "placeholderText": "Enter name or ID to search",
     "approved": "Approved",
     "rejected": "Rejected",
@@ -405,13 +414,6 @@
     "editName": "Edit",
     "saveName": "Save"
   },
-  "modCreateFacilityOrHPTopbar": {
-    "confirmExit": "Exit without saving",
-    "create": "Create",
-    "exit": "Exit",
-    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
-    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
-  },
   "modDashboardHealthcareProfessionalCard": {
     "spokenLanguages": "Spoken languages",
     "lastName": "Last name",
@@ -419,4 +421,4 @@
     "middleName": "Middle name",
     "nameLocale": "Name locale"
   }
-}
\ No newline at end of file
+}
diff --git a/i18n/locales/ru.json b/i18n/locales/ru.json
index 97faa5a19..18184ab2e 100644
--- a/i18n/locales/ru.json
+++ b/i18n/locales/ru.json
@@ -106,6 +106,14 @@
     "login": "Log in",
     "logout": "Log out"
   },
+  "modCreateFacilityOrHPTopbar": {
+    "confirmExit": "Exit without saving",
+    "create": "Create",
+    "exit": "Exit",
+    "facilityCreatedSuccessfully": "Facility created successfully.",
+    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
+    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
+},
   "modDashboardLeftNav": {
     "facilities": "Услуги",
     "healthcareProfessionals": " Медицинские специалисты ",
@@ -312,6 +320,7 @@
     "healthcareProfessionalFacilities": "Healthcare Professional Facilities"
   },
   "modDashboardTopbar": {
+    "addFacility": "Add Facility",
     "placeholderText": "Enter name or ID to search",
     "approved": "Approved",
     "rejected": "Rejected",
@@ -405,13 +414,6 @@
     "editName": "Edit",
     "saveName": "Save"
   },
-  "modCreateFacilityOrHPTopbar": {
-    "confirmExit": "Exit without saving",
-    "create": "Create",
-    "exit": "Exit",
-    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
-    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
-  },
   "modDashboardHealthcareProfessionalCard": {
     "spokenLanguages": "Spoken languages",
     "lastName": "Last name",
@@ -419,4 +421,4 @@
     "middleName": "Middle name",
     "nameLocale": "Name locale"
   }
-}
\ No newline at end of file
+}
diff --git a/i18n/locales/tl.json b/i18n/locales/tl.json
index 90da532f7..b3f58657a 100644
--- a/i18n/locales/tl.json
+++ b/i18n/locales/tl.json
@@ -120,6 +120,14 @@
     "unauthorizedline2": "Kung nais mong maging isang tagapamagitan o may mga katanungan, mangyaring makipag-ugnayan sa amin.",
     "unauthorizedline3": "dito"
   },
+  "modCreateFacilityOrHPTopbar": {
+    "confirmExit": "Exit without saving",
+    "create": "Create",
+    "exit": "Exit",
+    "facilityCreatedSuccessfully": "Facility created successfully.",
+    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
+    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
+},
   "modDashboardLeftNav": {
     "facilities": "Pasilidad",
     "healthcareProfessionals": "Mga Propesyonal sa Pangangalagang Pangkalusugan",
@@ -140,6 +148,7 @@
     "healthcareProfessionalFacilities": "Healthcare Professional Related Facilities"
   },
   "modDashboardTopbar": {
+    "addFacility": "Add Facility",
     "placeholderText": "Maglagay ng pangalan o ID upang mahanap",
     "approved": "Aprubado",
     "rejected": "Hindi na-aprubahan",
@@ -396,13 +405,6 @@
     "editName": "Edit",
     "saveName": "Save"
   },
-  "modCreateFacilityOrHPTopbar": {
-    "confirmExit": "Exit without saving",
-    "create": "Create",
-    "exit": "Exit",
-    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
-    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
-  },
   "modDashboardHealthcareProfessionalCard": {
     "spokenLanguages": "Spoken languages",
     "lastName": "Last name",
@@ -410,4 +412,4 @@
     "middleName": "Middle name",
     "nameLocale": "Name locale"
   }
-}
\ No newline at end of file
+}
diff --git a/i18n/locales/vi.json b/i18n/locales/vi.json
index b0244c626..877310a7b 100644
--- a/i18n/locales/vi.json
+++ b/i18n/locales/vi.json
@@ -120,6 +120,14 @@
     "unauthorizedline2": "Nếu bạn muốn trở thành quản trị viên hoặc có bất kỳ câu hỏi nào, vui lòng liên hệ với chúng tôi.",
     "unauthorizedline3": "Ở đây"
   },
+  "modCreateFacilityOrHPTopbar": {
+    "confirmExit": "Exit without saving",
+    "create": "Create",
+    "exit": "Exit",
+    "facilityCreatedSuccessfully": "Facility created successfully.",
+    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
+    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
+},
   "modDashboardLeftNav": {
     "facilities": "Cơ sở vật chất",
     "healthcareProfessionals": "Chuyên gia y tế",
@@ -140,6 +148,7 @@
     "healthcareProfessionalFacilities": "Healthcare Professional Related Facilities"
   },
   "modDashboardTopbar": {
+    "addFacility": "Add Facility",
     "placeholderText": "Nhập tên hoặc mã ID để tìm kiếm",
     "approved": "Đã được phê duyệt",
     "rejected": "Đã bị từ chối",
@@ -396,13 +405,6 @@
     "editName": "Edit",
     "saveName": "Save"
   },
-  "modCreateFacilityOrHPTopbar": {
-    "confirmExit": "Exit without saving",
-    "create": "Create",
-    "exit": "Exit",
-    "heathcareProfessionalCreatedSuccessfully": "Healthcare professional created successfully.",
-    "unsavedChangesMessage": "This will exit without saving your entry. All unsaved data will be lost."
-  },
   "modDashboardHealthcareProfessionalCard": {
     "spokenLanguages": "Spoken languages",
     "lastName": "Last name",
@@ -410,4 +412,4 @@
     "middleName": "Middle name",
     "nameLocale": "Name locale"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/moderation/create-facility/index.vue b/pages/moderation/create-facility/index.vue
new file mode 100644
index 000000000..ea4ef5c4c
--- /dev/null
+++ b/pages/moderation/create-facility/index.vue
@@ -0,0 +1,3 @@
+<template>
+    <NuxtPage />
+</template>
diff --git a/stores/facilitiesStore.ts b/stores/facilitiesStore.ts
index cc0136c5c..908a0b1b1 100644
--- a/stores/facilitiesStore.ts
+++ b/stores/facilitiesStore.ts
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
 import { ref, type Ref, reactive } from 'vue'
 import { gql } from 'graphql-request'
-import type { DeleteResult,
-    Facility,
+import type { DeleteResult, Facility,
     HealthcareProfessional,
     Mutation,
+    MutationCreateFacilityArgs,
     MutationDeleteFacilityArgs,
     MutationUpdateFacilityArgs,
     Query,
@@ -44,6 +44,31 @@ export const useFacilitiesStore = defineStore(
             healthProfessionalsRelations: [] as Relationship[]
         })
 
+        const createFacilityFields = reactive({
+            nameEn: '',
+            nameJa: '',
+            contact: {
+                address: {
+                    postalCode: '',
+                    prefectureEn: '',
+                    cityEn: '',
+                    addressLine1En: '',
+                    addressLine2En: '',
+                    prefectureJa: '',
+                    cityJa: '',
+                    addressLine1Ja: '',
+                    addressLine2Ja: ''
+                },
+                email: '' as string | undefined,
+                googleMapsUrl: '',
+                phone: '',
+                website: '' as string | undefined
+            },
+            mapLatitude: '',
+            mapLongitude: '',
+            healthcareProfessionalIds: [] as string[]
+        })
+
         const healthProfessionalsRelationsForDisplay: Ref<HealthcareProfessional[]> = ref([])
 
         function setSelectedFacilityData(facilityId: string) {
@@ -104,6 +129,48 @@ export const useFacilitiesStore = defineStore(
             facilityData.value = facilityResults
         }
 
+        async function createFacility():
+        Promise<ServerResponse<Facility>> {
+            const CreateFacilityInput: MutationCreateFacilityArgs = {
+                input: {
+                    nameEn: createFacilityFields.nameEn,
+                    nameJa: createFacilityFields.nameJa,
+                    contact: {
+                        address: {
+                            addressLine1En: createFacilityFields.contact.address.addressLine1En,
+                            addressLine1Ja: createFacilityFields.contact.address.addressLine1Ja,
+                            addressLine2En: createFacilityFields.contact.address.addressLine2En,
+                            addressLine2Ja: createFacilityFields.contact.address.addressLine2Ja,
+                            cityEn: createFacilityFields.contact.address.cityEn,
+                            cityJa: createFacilityFields.contact.address.cityJa,
+                            postalCode: createFacilityFields.contact.address.postalCode,
+                            prefectureEn: createFacilityFields.contact.address.prefectureEn,
+                            prefectureJa: createFacilityFields.contact.address.prefectureJa
+                        },
+                        email: createFacilityFields.contact.email,
+                        phone: createFacilityFields.contact.phone,
+                        website: createFacilityFields.contact.website,
+                        googleMapsUrl: createFacilityFields.contact.googleMapsUrl
+                    },
+                    mapLatitude: parseFloat(createFacilityFields.mapLatitude),
+                    mapLongitude: parseFloat(createFacilityFields.mapLongitude),
+                    healthcareProfessionalIds: createFacilityFields.healthcareProfessionalIds
+                }
+            }
+            const serverResponse = await graphQLClientRequestWithRetry<Mutation['createFacility']>(
+                gqlClient.request.bind(gqlClient),
+                createFacilityGqlMutation,
+                CreateFacilityInput
+            )
+
+            if (!serverResponse.errors?.length) {
+                selectedFacilityData.value = serverResponse.data!
+                initializeFacilitySectionValues(serverResponse.data!)
+            }
+
+            return serverResponse
+        }
+
         async function updateFacility():
         Promise<ServerResponse<Facility>> {
             const updateFacilityInput: MutationUpdateFacilityArgs = {
@@ -152,6 +219,31 @@ export const useFacilitiesStore = defineStore(
             return serverResponse
         }
 
+        function resetCreateFacilityFields() {
+            createFacilityFields.nameEn = ''
+            createFacilityFields.nameJa = ''
+            createFacilityFields.contact = {
+                address: {
+                    addressLine1En: '',
+                    addressLine1Ja: '',
+                    addressLine2En: '',
+                    addressLine2Ja: '',
+                    postalCode: '',
+                    prefectureEn: '',
+                    prefectureJa: '',
+                    cityEn: '',
+                    cityJa: ''
+                },
+                email: '',
+                googleMapsUrl: '',
+                phone: '',
+                website: ''
+            }
+            createFacilityFields.mapLatitude = ''
+            createFacilityFields.mapLongitude = ''
+            createFacilityFields.healthcareProfessionalIds = []
+        }
+
         async function deleteFacility(facilityId: MutationDeleteFacilityArgs):
         Promise<ServerResponse<DeleteResult>> {
             const serverResponse = await graphQLClientRequestWithRetry<Mutation['deleteFacility']>(
@@ -165,6 +257,8 @@ export const useFacilitiesStore = defineStore(
 
         return {
             getFacilities,
+            createFacility,
+            createFacilityFields,
             facilityData,
             updateFacility,
             facilitySectionFields,
@@ -174,7 +268,8 @@ export const useFacilitiesStore = defineStore(
             setSelectedFacilityData,
             initializeFacilitySectionValues,
             healthProfessionalsRelationsForDisplay,
-            resetFacilitySectionFields
+            resetFacilitySectionFields,
+            resetCreateFacilityFields
         }
     }
 )
@@ -270,3 +365,34 @@ mutation Mutation($id: ID!) {
   }
 }
 `
+const createFacilityGqlMutation = gql`
+mutation Mutation($input: CreateFacilityInput!) {
+  createFacility(input: $input) {
+    id
+    nameEn
+    nameJa
+    contact {
+      googleMapsUrl
+      email
+      phone
+      website
+      address {
+        postalCode
+        prefectureEn
+        cityEn
+        addressLine1En
+        addressLine2En
+        prefectureJa
+        cityJa
+        addressLine1Ja
+        addressLine2Ja
+      }
+    }
+    mapLatitude
+    mapLongitude
+    healthcareProfessionalIds
+    createdDate
+    updatedDate
+  }
+}
+`
diff --git a/stores/moderationScreenStore.ts b/stores/moderationScreenStore.ts
index f78cccbc8..30390fc3f 100644
--- a/stores/moderationScreenStore.ts
+++ b/stores/moderationScreenStore.ts
@@ -5,6 +5,7 @@ export enum ModerationScreen {
     CreateHealthcareProfessional = 'CREATE_HEALTHCARE_PROFESSIONAL',
     Dashboard = 'DASHBOARD',
     EditSubmission = 'EDIT_SUBMISSION',
+    CreateFacility = 'CREATE_FACILITY',
     EditHealthcareProfessional = 'EDIT_HEALTHCARE_PROFESSIONAL',
     EditFacility = 'EDIT_FACILITY'
 }
@@ -43,6 +44,10 @@ export const useModerationScreenStore = defineStore(
             return activeScreen.value === ModerationScreen.Dashboard
         }
 
+        function createFacilityScreenIsActive() {
+            return activeScreen.value === ModerationScreen.CreateFacility
+        }
+
         function editSubmissionScreenIsActive() {
             return activeScreen.value === ModerationScreen.EditSubmission
         }
@@ -61,6 +66,7 @@ export const useModerationScreenStore = defineStore(
             setActiveScreen,
             createHealthcareProfessionalScreenIsActive,
             dashboardScreenIsActive,
+            createFacilityScreenIsActive,
             editSubmissionScreenIsActive,
             editHealthcareProfessionalScreenIsActive,
             editFacilityScreenIsActive
diff --git a/test/cypress/e2e/moderationCreateFacility.cy.ts b/test/cypress/e2e/moderationCreateFacility.cy.ts
new file mode 100644
index 000000000..a9123e1ba
--- /dev/null
+++ b/test/cypress/e2e/moderationCreateFacility.cy.ts
@@ -0,0 +1,195 @@
+import type { StateTree } from 'pinia'
+import enUS from '../../../i18n/locales/en.json'
+import fakeFacilityResult from '../../fake_data/moderation_dashboard/fakeModFacilityData.json'
+import fakeHealthcareProfessionalResult from '../../fake_data/moderation_dashboard/fakeModHealthcareProfessionalData.json'
+import { aliasQuery } from '../utils'
+
+let facilitiesStore: StateTree
+
+before(() => {
+    cy.login()
+})
+
+describe('Moderation create facility form', () => {
+    context('Landscape mode', () => {
+        before(() => {
+            cy.intercept('POST', '**/', req => {
+                aliasQuery(req, 'query Facilities', fakeFacilityResult)
+            })
+
+            cy.visit('/moderation')
+
+            cy.wait('@query Facilities')
+
+            cy.get('[data-testid="submission-type-select"]').select('FACILITIES')
+            cy.get('[data-testid="add-facility-button"]').click()
+
+            /* This will set the facilities stores or any other stores you need to access for testings.
+                This NEEDS to be in the describe and not the login before*/
+            cy.window().then(win => {
+                facilitiesStore = win.$pinia.state.value.facilitiesStore
+            })
+        })
+
+        beforeEach(() => {
+            cy.viewport('macbook-16')
+        })
+
+        it('contains the following buttons and text in the topbar', () => {
+            cy.get('[data-testid="mod-create-facility-hp-topbar-create"]').should('exist')
+                .contains(enUS.modCreateFacilityOrHPTopbar.create)
+            cy.get('[data-testid="mod-create-facility-hp-topbar-exit"]').should('exist')
+                .contains(enUS.modCreateFacilityOrHPTopbar.exit)
+        })
+
+        it('contains the following input fields', () => {
+            cy.get('[data-testid="mod-facility-section-nameEn"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-nameJa"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-phone"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-email"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-website"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-postalCode"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-cityEn"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-addressLine1En"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-addressLine2En"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-cityJa"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-addressLine1Ja"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-addressLine2Ja"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-google-maps"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-mapLatitude"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-mapLongitude"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-doctor-search"]').should('exist')
+        })
+
+        it('should contain the following select field', () => {
+            cy.get('[data-testid="mod-facility-section-prefectureEn"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-prefectureJa"]').should('exist')
+        })
+
+        it('should be able to type in all input fields and update the store values', () => {
+            cy.get('[data-testid="mod-facility-section-nameEn"]').find('input').clear().type('Hospital')
+            cy.get('[data-testid="mod-facility-section-nameJa"]').find('input').clear().type('立川中央病院')
+            cy.get('[data-testid="mod-facility-section-phone"]').find('input').clear().type('08080939393')
+            cy.get('[data-testid="mod-facility-section-email"]').find('input').clear().type('example@mail.com')
+            cy.get('[data-testid="mod-facility-section-website"]').find('input').clear().type('http://example.com')
+            cy.get('[data-testid="mod-facility-section-postalCode"]').find('input').clear().type('180-0000')
+            cy.get('[data-testid="mod-facility-section-cityEn"]').find('input').clear().type('Shibuya')
+            cy.get('[data-testid="mod-facility-section-addressLine1En"]').find('input').clear().type('some address line 1')
+            cy.get('[data-testid="mod-facility-section-addressLine2En"]').find('input').clear().type('some address line 2')
+            cy.get('[data-testid="mod-facility-section-cityJa"]').find('input').clear().type('渋谷区')
+            cy.get('[data-testid="mod-facility-section-addressLine1Ja"]').find('input').clear().type('道の駅')
+            cy.get('[data-testid="mod-facility-section-addressLine2Ja"]').find('input').clear().type('道の')
+            // The typing is split into three due to our linting rules of length
+            cy.get('[data-testid="mod-facility-section-google-maps"]')
+                .find('input').clear()
+                .type('www.google.com/maps/place/82+Yamatech%C5%8D,+Naka+Ward,+Yokohama,+Kanagawa+231-0862,')
+                .type('+Japan/@35.437123,139.651471,16z/data=!4m6!3m5!1s0x60185d201648e7c1:0x8f37d37bb381e29!8m2!3d35')
+                .type('.4371228!4d139.6514712!16s%2Fg%2F11clpxxvx5?hl=en-US&entry=ttu')
+            cy.get('[data-testid="mod-facility-section-doctor-search"]').find('input').clear().type('Aya Yumino')
+        })
+
+        it('should have updated the store values', () => {
+            expect(facilitiesStore.createFacilityFields.nameEn).to.equal('Hospital')
+            expect(facilitiesStore.createFacilityFields.nameJa).to.equal('立川中央病院')
+            expect(facilitiesStore.createFacilityFields.contact.phone).to.equal('08080939393')
+            expect(facilitiesStore.createFacilityFields.contact.email).to.equal('example@mail.com')
+            expect(facilitiesStore.createFacilityFields.contact.website).to.equal('http://example.com')
+            expect(facilitiesStore.createFacilityFields.contact.address.postalCode).to.equal('180-0000')
+            expect(facilitiesStore.createFacilityFields.contact.address.cityEn).to.equal('Shibuya')
+            expect(facilitiesStore.createFacilityFields.contact.address.addressLine1En).to.equal('some address line 1')
+            expect(facilitiesStore.createFacilityFields.contact.address.addressLine2En).to.equal('some address line 2')
+            expect(facilitiesStore.createFacilityFields.contact.address.cityJa).to.equal('渋谷区')
+            expect(facilitiesStore.createFacilityFields.contact.address.addressLine1Ja).to.equal('道の駅')
+            expect(facilitiesStore.createFacilityFields.contact.address.addressLine2Ja).to.equal('道の')
+        })
+
+        it('should be able to select a field', () => {
+            cy.get('[data-testid="mod-facility-section-prefectureEn"]').select('Hokkaido')
+            cy.get('[data-testid="mod-facility-section-prefectureJa"]').select('北海道')
+        })
+
+        it('should be able to add a professional that matches by id', () => {
+            cy.window().then(win => {
+                win.$pinia.state.value.healthcareProfessionalsStore.healthcareProfessionalsData
+            = fakeHealthcareProfessionalResult.data.healthcareProfessionals
+            })
+            cy.get('[data-testid="mod-facility-section-doctor-search"]').find('input').clear().type('UTF8YaYa')
+            cy.get('[data-testid="mod-search-bar-search-result"]').click()
+            cy.get('[data-testid="healthcare-professional-card-0"]').should('exist')
+        })
+
+        it('should be able to add a professional that matches by name', () => {
+            cy.get('[data-testid="mod-facility-section-doctor-search"]').find('input').clear().type('Bert')
+            cy.get('[data-testid="mod-search-bar-search-result"]').click()
+            cy.get('[data-testid="healthcare-professional-card-1"]').should('exist')
+        })
+
+        it('should be able to remove just one professional that was added out of 2 added', () => {
+            cy.get('[data-testid="mod-facility-section-doctor-search"]').find('input').clear().type('Bert')
+            cy.get('[data-testid="mod-search-bar-search-result"]').click()
+            cy.get('[data-testid="healthcare-professional-card-0"]').should('exist')
+            cy.get('[data-testid="healthcare-professional-card-1"]').should('not.exist')
+        })
+
+        it('should display message for no healthcareprofessional found', () => {
+            cy.get('[data-testid="mod-facility-section-doctor-search"]').find('input').clear().type('aaa'.repeat(50))
+            cy.get('[data-testid="mod-search-bar-search-no-match"]').should('exist')
+            cy.get('[data-testid="mod-search-bar-search-no-match"]')
+                .contains(enUS.modFacilitySection.noHealthcareProfessionalFound)
+        })
+
+        it('should be display error messages', () => {
+            cy.get('[data-testid="mod-facility-section-nameEn"]').find('input').clear().type('立川中央病院').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-nameEn"]').find('p')
+                .should('exist')
+                .contains('Invalid English Name')
+
+            cy.get('[data-testid="mod-facility-section-nameJa"]')
+                .find('input').clear().type('Tachikawa Hospital').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-nameJa"]')
+                .find('p').should('exist').contains('Invalid Japanese Name')
+
+            cy.get('[data-testid="mod-facility-section-phone"]').find('input').clear().type('Hello').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-phone"]')
+                .find('p').should('exist').contains('Invalid Phone Number')
+
+            cy.get('[data-testid="mod-facility-section-email"]').find('input').clear().type('example').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-email"]')
+                .find('p').should('exist').contains('Invalid Email Address')
+
+            cy.get('[data-testid="mod-facility-section-website"]').find('input').clear().type('example').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-website"]')
+                .find('p').should('exist').contains('Invalid Website URL')
+
+            cy.get('[data-testid="mod-facility-section-postalCode"]').find('input').clear().type('180-0').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-postalCode"]')
+                .find('p').should('exist').contains('Invalid Postal Code')
+
+            cy.get('[data-testid="mod-facility-section-cityEn"]').find('input').clear().type('渋谷区').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-cityEn"]')
+                .find('p').should('exist').contains('Invalid English City Name')
+
+            cy.get('[data-testid="mod-facility-section-addressLine1En"]').find('input').clear().type('道の駅').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-addressLine1En"]')
+                .find('p').should('exist').contains('Invalid English Address')
+
+            cy.get('[data-testid="mod-facility-section-addressLine2En"]').find('input').clear().type('道の駅').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-addressLine2En"]')
+                .find('p').should('exist').contains('Invalid English Address')
+
+            cy.get('[data-testid=mod-facility-section-cityJa]').find('input').clear().type('Shibuya').realPress('Tab')
+            cy.get('[data-testid=mod-facility-section-cityJa]')
+                .find('p').should('exist').contains('Invalid Japanese City Name')
+
+            cy.get('[data-testid="mod-facility-section-mapLatitude"]')
+                .find('input').clear().type('Not Number Latitude').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-mapLatitude"]')
+                .find('p').should('exist').contains('Invalid Latitude')
+
+            cy.get('[data-testid="mod-facility-section-mapLongitude"]')
+                .find('input').clear().type('Not Number Longitude').realPress('Tab')
+            cy.get('[data-testid="mod-facility-section-mapLongitude"]')
+                .find('p').should('exist').contains('Invalid Longitude')
+        })
+    })
+})


Reviews:
user: login: NabbeunNabi
body: @ljbroersen This needs rebasing and merge conflict resolution. I see some of the older code in here 🙇 
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-15T07:49:05Z
user: login: theyokohamalife
body: Looking really good! I ran it locally and everything seemed to work fine. I left a few suggestions and questions.
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T13:02:51Z
user: login: ljbroersen
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T13:59:14Z
user: login: ljbroersen
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T13:59:44Z
user: login: ljbroersen
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T14:37:11Z
user: login: NabbeunNabi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T14:39:38Z
user: login: ljbroersen
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T15:00:23Z
user: login: theyokohamalife
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-17T03:54:02Z
user: login: theyokohamalife
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-17T04:04:05Z
user: login: ljbroersen
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-17T05:57:07Z
user: login: ermish
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-17T16:01:42Z
user: login: theyokohamalife
body: LGTM ✨ 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-19T10:53:13Z
user: login: NabbeunNabi
body: @ljbroersen This looks good! Just need to resolve those conflicts
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-19T11:31:10Z
user: login: NabbeunNabi
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-19T15:59:53Z
user: login: NabbeunNabi
body: great! this is very based. rebased
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-19T16:04:47Z

Review comments:
diff_hunk: @@ -21,6 +21,11 @@
                 NAVBAR CREATE FACILITY PLACEHOLDER
             </p>
         </div>
+        <div v-if="moderationScreenStore.createFacilityScreenIsActive()">
+            <p class="text-xl font-bold">
+                NAVBAR CREATE FACILITY
path: components/ModLeftNavbar.vue
user: login: theyokohamalife
body: ```suggestion
                NAVBAR CREATE FACILITY PLACEHOLDER
```
created_at: 2025-05-16T12:20:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
path: components/ModCreateFacilitySection.vue
user: login: theyokohamalife
body: Sorry this is something I missed in other PRs, but I'm wondering what the best practices are for the name attribute on select elements. Perhaps this should be `name="prefecture-japan"`? [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select). @ermish any insight?
created_at: 2025-05-16T12:40:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanEn"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityEn"
+                        data-testid="mod-facility-section-cityEn"
+                        :label="$t('modFacilitySection.labelFacilityCityEn')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityEn')"
+                        :required="true"
+                        :input-validation-check="validateCityEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityEn')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1En"
+                        data-testid="mod-facility-section-addressLine1En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1En')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2En"
+                        data-testid="mod-facility-section-addressLine2En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2En')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureJa') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureJa"
+                            data-testid="mod-facility-section-prefectureJa"
+                            name="Prefecture Japan"
path: components/ModCreateFacilitySection.vue
user: login: theyokohamalife
body: ♻️ 
created_at: 2025-05-16T12:42:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanEn"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityEn"
+                        data-testid="mod-facility-section-cityEn"
+                        :label="$t('modFacilitySection.labelFacilityCityEn')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityEn')"
+                        :required="true"
+                        :input-validation-check="validateCityEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityEn')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1En"
+                        data-testid="mod-facility-section-addressLine1En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1En')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2En"
+                        data-testid="mod-facility-section-addressLine2En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2En')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureJa') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureJa"
+                            data-testid="mod-facility-section-prefectureJa"
+                            name="Prefecture Japan"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanJa"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityJa"
+                        data-testid="mod-facility-section-cityJa"
+                        :label="$t('modFacilitySection.labelFacilityCityJa')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityJa')"
+                        :required="true"
+                        :input-validation-check="validateCityJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityJa')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1Ja"
+                        data-testid="mod-facility-section-addressLine1Ja"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1Ja')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1Ja')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1Ja')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2Ja"
+                        data-testid="mod-facility-section-addressLine2Ja"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2Ja')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2Ja')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2Ja')"
+                    />
+                </div>
+                <div
+                    class="google-maps-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.googleMapsInformation') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.googleMapsUrl"
+                        data-testid="mod-facility-section-google-maps"
+                        :label="$t('modFacilitySection.labelFacilityGoogleMapsUrl')"
+                        type="url"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityGoogleMapsUrl')"
+                        :required="true"
+                        :input-validation-check="validateWebsite"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityGoogleMapsUrl')"
+                        :autofill="facilityStore.facilitySectionFields.googlemapsURL"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.mapLatitude"
+                        data-testid="mod-facility-section-mapLatitude"
+                        :label="$t('modFacilitySection.labelFacilityMapLatitude')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityMapLatitude')"
+                        :required="true"
+                        :input-validation-check="validateFloat"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityMapLatitude')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.mapLongitude"
+                        data-testid="mod-facility-section-mapLongitude"
+                        :label="$t('modFacilitySection.labelFacilityMapLongitude')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityMapLongitude')"
+                        :required="true"
+                        :input-validation-check="validateFloat"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityMapLongitude')"
+                    />
+                </div>
+                <div class="flex flex-col">
+                    <span
+                        v-if="moderationScreenStore.createFacilityScreenIsActive()"
+                        class="mb-1 text-primary-text text-2xl font-bold font-sans leading-normal"
+                    >
+                        {{ $t('modFacilitySection.addHealthcareProfessional') }}
+                    </span>
+                    <ModSearchBar
+                        v-model="healthcareProfessionalsToAddToFacility"
+                        data-testid="mod-facility-section-doctor-search"
+                        :place-holder-text="$t('modFacilitySection.placeholderTextHealthcareProfessionalSearchbar')"
+                        :no-match-text="$t('modFacilitySection.noHealthcareProfessionalFound')"
+                        :fields-to-display-callback="healthcareProfessionalsToDisplayCallback"
+                        @search-input-change="handleHealthcareProfessionalsInputChange"
+                    />
+                    <span
+                        v-show="!healthcareProfessionalsToAddToFacility.length"
+                        class="font-semibold my-3"
+                    >- {{ $t('modFacilitySection.noHPSelected') }}
+                    </span>
+                    <div
+                        v-for="(healthcareProfessional, index) in healthcareProfessionalsToAddToFacility"
+                        :key="`${healthcareProfessional.id}-${index}`"
+                    >
+                        <ModDashboardHealthProfessionalCard
+                            :data-testid="`healthcare-professional-card-${index}`"
+                            :healthcare-professional="healthcareProfessional"
+                            :healthcare-professionals-related-to-facility="healthcareProfessionalsRelatedToFacility"
+                            :show-trash-can="false"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { type Ref, ref, onBeforeMount, nextTick } from 'vue'
+import { useModerationScreenStore, ModerationScreen } from '~/stores/moderationScreenStore'
+import { useFacilitiesStore } from '~/stores/facilitiesStore'
+import { useHealthcareProfessionalsStore } from '~/stores/healthcareProfessionalsStore'
+import { useLoadingStore } from '~/stores/loadingStore'
+import { useI18n } from '#imports'
+import {
+    validateAddressLineEn,
+    validateAddressLineJa,
+    validateNameEn,
+    validateNameJa,
+    validatePhoneNumber,
+    validateCityEn,
+    validateEmail,
+    validateFloat,
+    validatePostalCode,
+    validateWebsite,
+    validateCityJa
+} from '~/utils/formValidations'
+import type { HealthcareProfessional } from '~/typedefs/gqlTypes'
+
+useI18n()
+
+const loadingStore = useLoadingStore()
+loadingStore.setIsLoading(true)
+
+const moderationScreenStore = useModerationScreenStore()
+const facilityStore = useFacilitiesStore()
+const healthcareProfessionalsStore = useHealthcareProfessionalsStore()
+
+const isFacilitySectionInitialized: Ref<boolean> = ref(false)
+const healthcareProfessionalsRelatedToFacility: Ref<string[]>
+= ref([])
+
+// This keeps track of the existing healthcare professionals we are adding to the new facility
+const healthcareProfessionalsToAddToFacility: Ref<HealthcareProfessional[]> = ref([])
+
+const handleHealthcareProfessionalsInputChange = (filteredItems: Ref<HealthcareProfessional[]>, inputValue: string) => {
+    const input = inputValue.toLowerCase().trim()
+    filteredItems.value = healthcareProfessionalsStore.healthcareProfessionalsData.filter(
+        (healthcareProfessional: HealthcareProfessional) => {
+            const idMatches = healthcareProfessional.id.toLowerCase().startsWith(input)
+            const nameMatches = healthcareProfessional.names.some(name => {
+                const firstNameMatch = name.firstName.toLowerCase().includes(input)
+                const middleNameMatch = name.middleName?.toLowerCase().includes(input)
+                const lastNameMatch = name.lastName.toLowerCase().includes(input)
+                return firstNameMatch || middleNameMatch || lastNameMatch
+            })
+            return idMatches || nameMatches
+        }
+    )
+}
+const healthcareProfessionalsToDisplayCallback = (healthcareProfessional: HealthcareProfessional) =>
+    [healthcareProfessional.names[0].firstName + ' ' + healthcareProfessional.names[0].lastName]
+
+const listPrefectureJapanEn: Ref<string[]> = ref([
+    'Hokkaido', 'Aomori', 'Iwate', 'Miyagi', 'Akita',
+    'Yamagata', 'Fukushima', 'Ibaraki', 'Tochigi', 'Gumma', 'Saitama', 'Chiba', 'Tokyo', 'Kanagawa',
+    'Niigata', 'Toyama', 'Ishikawa', 'Fukui', 'Yamanashi', 'Nagano', 'Gifu', 'Shizuoka', 'Aichi',
+    'Mie', 'Shiga', 'Kyoto', 'Osaka', 'Hyogo', 'Nara', 'Wakayama', 'Tottori', 'Shimane', 'Okayama',
+    'Hiroshima', 'Yamaguchi', 'Tokushima', 'Kagawa', 'Ehime', 'Kochi', 'Fukuoka', 'Saga',
+    'Nagasaki', 'Kumamoto', 'Oita', 'Miyazaki', 'Kagoshima', 'Okinawa'])
+
+const listPrefectureJapanJa: Ref<string[]> = ref([
+    '北海道', '青森県', '岩手県', '宮城県', '秋田県',
+    '山形県', '福島県', '茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県', '新潟県', '富山県',
+    '石川県', '福井県', '山梨県', '長野県', '岐阜県', '静岡県', '愛知県', '三重県', '滋賀県', '京都府', '大阪府',
+    '兵庫県', '奈良県', '和歌山県', '鳥取県', '島根県', '岡山県', '広島県', '山口県', '徳島県', '香川県', '愛媛県',
+    '高知県', '福岡県', '佐賀県', '長崎県', '熊本県', '大分県', '宮崎県', '鹿児島県', '沖縄県'])
path: components/ModCreateFacilitySection.vue
user: login: theyokohamalife
body: TODO: I think we should probably abstract this list of prefectures and refactor all of the components that have them to point to the file the list is moved to. It doesn't have to be done in this PR, but a follow-up one would be helpful. 🙏🏾 
created_at: 2025-05-16T12:47:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -9,6 +9,16 @@
         >
             <ModEditSubmissionForm />
         </div>
+        <div
+            v-if="moderationScreenStore.createFacilityScreenIsActive()"
+            class="h-full overflow-hidden"
path: components/ModMainContent.vue
user: login: theyokohamalife
body: We may want this to also be overflow-y-auto due to a bug we noticed yesterday while testing the admin panel. @NabbeunNabi recently updated the other ones in PR #1197 
created_at: 2025-05-16T12:52:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -154,6 +155,7 @@
     },
     "modDashboardTopbar": {
         "addHealthcareProfessional": "Add Healthcare Professional",
+        "addFacility": "Add Facility",
path: i18n/locales/en.json
user: login: theyokohamalife
body: Non-blocking: This is something we just started discussing today, but I think we'll be moving forward with using sentence casing. Existing labels will be refactored with the moderation panel redesign that's in the works.

```suggestion
        "addFacility": "Add facility",
```
created_at: 2025-05-16T12:55:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanEn"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityEn"
+                        data-testid="mod-facility-section-cityEn"
+                        :label="$t('modFacilitySection.labelFacilityCityEn')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityEn')"
+                        :required="true"
+                        :input-validation-check="validateCityEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityEn')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1En"
+                        data-testid="mod-facility-section-addressLine1En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1En')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2En"
+                        data-testid="mod-facility-section-addressLine2En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2En')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureJa') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureJa"
+                            data-testid="mod-facility-section-prefectureJa"
+                            name="Prefecture Japan"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanJa"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityJa"
+                        data-testid="mod-facility-section-cityJa"
+                        :label="$t('modFacilitySection.labelFacilityCityJa')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityJa')"
+                        :required="true"
+                        :input-validation-check="validateCityJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityJa')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1Ja"
+                        data-testid="mod-facility-section-addressLine1Ja"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1Ja')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1Ja')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1Ja')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2Ja"
+                        data-testid="mod-facility-section-addressLine2Ja"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2Ja')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2Ja')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2Ja')"
+                    />
+                </div>
+                <div
+                    class="google-maps-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.googleMapsInformation') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.googleMapsUrl"
+                        data-testid="mod-facility-section-google-maps"
+                        :label="$t('modFacilitySection.labelFacilityGoogleMapsUrl')"
+                        type="url"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityGoogleMapsUrl')"
+                        :required="true"
+                        :input-validation-check="validateWebsite"
path: components/ModCreateFacilitySection.vue
user: login: theyokohamalife
body: We changed the validation for Google Maps in PR #1204
created_at: 2025-05-16T13:02:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanEn"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityEn"
+                        data-testid="mod-facility-section-cityEn"
+                        :label="$t('modFacilitySection.labelFacilityCityEn')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityEn')"
+                        :required="true"
+                        :input-validation-check="validateCityEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityEn')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1En"
+                        data-testid="mod-facility-section-addressLine1En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1En')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2En"
+                        data-testid="mod-facility-section-addressLine2En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2En')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureJa') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureJa"
+                            data-testid="mod-facility-section-prefectureJa"
+                            name="Prefecture Japan"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanJa"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityJa"
+                        data-testid="mod-facility-section-cityJa"
+                        :label="$t('modFacilitySection.labelFacilityCityJa')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityJa')"
+                        :required="true"
+                        :input-validation-check="validateCityJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityJa')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1Ja"
+                        data-testid="mod-facility-section-addressLine1Ja"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1Ja')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1Ja')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1Ja')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2Ja"
+                        data-testid="mod-facility-section-addressLine2Ja"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2Ja')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2Ja')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2Ja')"
+                    />
+                </div>
+                <div
+                    class="google-maps-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.googleMapsInformation') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.googleMapsUrl"
+                        data-testid="mod-facility-section-google-maps"
+                        :label="$t('modFacilitySection.labelFacilityGoogleMapsUrl')"
+                        type="url"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityGoogleMapsUrl')"
+                        :required="true"
+                        :input-validation-check="validateWebsite"
path: components/ModCreateFacilitySection.vue
user: login: ljbroersen
body: Also needs to be changed in `ModEditFacilitySection.vue`
created_at: 2025-05-16T13:59:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanEn"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityEn"
+                        data-testid="mod-facility-section-cityEn"
+                        :label="$t('modFacilitySection.labelFacilityCityEn')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityEn')"
+                        :required="true"
+                        :input-validation-check="validateCityEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityEn')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1En"
+                        data-testid="mod-facility-section-addressLine1En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1En')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2En"
+                        data-testid="mod-facility-section-addressLine2En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2En')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureJa') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureJa"
+                            data-testid="mod-facility-section-prefectureJa"
+                            name="Prefecture Japan"
path: components/ModCreateFacilitySection.vue
user: login: ljbroersen
body: Also needs to be changed in `ModEditFacilitySection.vue`
created_at: 2025-05-16T13:59:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
path: components/ModCreateFacilitySection.vue
user: login: ljbroersen
body: As of what I can find in other files, we're right now using a mixture of "Prefecture Japan" (uppercase with spaces), "degrees" (lowercase one word) and "name_locales" (lowecase with underscore) 
created_at: 2025-05-16T14:37:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
path: components/ModCreateFacilitySection.vue
user: login: NabbeunNabi
body: I am not @ermish but I am always in favor of consistency. So once decided if we have a ticket that updates them throughout.

And also adds the linting if possible
created_at: 2025-05-16T14:39:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanEn"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityEn"
+                        data-testid="mod-facility-section-cityEn"
+                        :label="$t('modFacilitySection.labelFacilityCityEn')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityEn')"
+                        :required="true"
+                        :input-validation-check="validateCityEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityEn')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1En"
+                        data-testid="mod-facility-section-addressLine1En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1En')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2En"
+                        data-testid="mod-facility-section-addressLine2En"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2En')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2En')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineEn"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2En')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureJa') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureJa"
+                            data-testid="mod-facility-section-prefectureJa"
+                            name="Prefecture Japan"
+                            class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
+                        >
+                            <option
+                                v-for="(prefecture, index) in listPrefectureJapanJa"
+                                :key="index"
+                            >
+                                {{ prefecture }}
+                            </option>
+                        </select>
+                    </div>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.cityJa"
+                        data-testid="mod-facility-section-cityJa"
+                        :label="$t('modFacilitySection.labelFacilityCityJa')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityCityJa')"
+                        :required="true"
+                        :input-validation-check="validateCityJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityCityJa')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine1Ja"
+                        data-testid="mod-facility-section-addressLine1Ja"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine1Ja')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine1Ja')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine1Ja')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.addressLine2Ja"
+                        data-testid="mod-facility-section-addressLine2Ja"
+                        :label="$t('modFacilitySection.labelFacilityAddressLine2Ja')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityAddressLine2Ja')"
+                        :required="true"
+                        :input-validation-check="validateAddressLineJa"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityAddressLine2Ja')"
+                    />
+                </div>
+                <div
+                    class="google-maps-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.googleMapsInformation') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.googleMapsUrl"
+                        data-testid="mod-facility-section-google-maps"
+                        :label="$t('modFacilitySection.labelFacilityGoogleMapsUrl')"
+                        type="url"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityGoogleMapsUrl')"
+                        :required="true"
+                        :input-validation-check="validateWebsite"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityGoogleMapsUrl')"
+                        :autofill="facilityStore.facilitySectionFields.googlemapsURL"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.mapLatitude"
+                        data-testid="mod-facility-section-mapLatitude"
+                        :label="$t('modFacilitySection.labelFacilityMapLatitude')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityMapLatitude')"
+                        :required="true"
+                        :input-validation-check="validateFloat"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityMapLatitude')"
+                    />
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.mapLongitude"
+                        data-testid="mod-facility-section-mapLongitude"
+                        :label="$t('modFacilitySection.labelFacilityMapLongitude')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityMapLongitude')"
+                        :required="true"
+                        :input-validation-check="validateFloat"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityMapLongitude')"
+                    />
+                </div>
+                <div class="flex flex-col">
+                    <span
+                        v-if="moderationScreenStore.createFacilityScreenIsActive()"
+                        class="mb-1 text-primary-text text-2xl font-bold font-sans leading-normal"
+                    >
+                        {{ $t('modFacilitySection.addHealthcareProfessional') }}
+                    </span>
+                    <ModSearchBar
+                        v-model="healthcareProfessionalsToAddToFacility"
+                        data-testid="mod-facility-section-doctor-search"
+                        :place-holder-text="$t('modFacilitySection.placeholderTextHealthcareProfessionalSearchbar')"
+                        :no-match-text="$t('modFacilitySection.noHealthcareProfessionalFound')"
+                        :fields-to-display-callback="healthcareProfessionalsToDisplayCallback"
+                        @search-input-change="handleHealthcareProfessionalsInputChange"
+                    />
+                    <span
+                        v-show="!healthcareProfessionalsToAddToFacility.length"
+                        class="font-semibold my-3"
+                    >- {{ $t('modFacilitySection.noHPSelected') }}
+                    </span>
+                    <div
+                        v-for="(healthcareProfessional, index) in healthcareProfessionalsToAddToFacility"
+                        :key="`${healthcareProfessional.id}-${index}`"
+                    >
+                        <ModDashboardHealthProfessionalCard
+                            :data-testid="`healthcare-professional-card-${index}`"
+                            :healthcare-professional="healthcareProfessional"
+                            :healthcare-professionals-related-to-facility="healthcareProfessionalsRelatedToFacility"
+                            :show-trash-can="false"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { type Ref, ref, onBeforeMount, nextTick } from 'vue'
+import { useModerationScreenStore, ModerationScreen } from '~/stores/moderationScreenStore'
+import { useFacilitiesStore } from '~/stores/facilitiesStore'
+import { useHealthcareProfessionalsStore } from '~/stores/healthcareProfessionalsStore'
+import { useLoadingStore } from '~/stores/loadingStore'
+import { useI18n } from '#imports'
+import {
+    validateAddressLineEn,
+    validateAddressLineJa,
+    validateNameEn,
+    validateNameJa,
+    validatePhoneNumber,
+    validateCityEn,
+    validateEmail,
+    validateFloat,
+    validatePostalCode,
+    validateWebsite,
+    validateCityJa
+} from '~/utils/formValidations'
+import type { HealthcareProfessional } from '~/typedefs/gqlTypes'
+
+useI18n()
+
+const loadingStore = useLoadingStore()
+loadingStore.setIsLoading(true)
+
+const moderationScreenStore = useModerationScreenStore()
+const facilityStore = useFacilitiesStore()
+const healthcareProfessionalsStore = useHealthcareProfessionalsStore()
+
+const isFacilitySectionInitialized: Ref<boolean> = ref(false)
+const healthcareProfessionalsRelatedToFacility: Ref<string[]>
+= ref([])
+
+// This keeps track of the existing healthcare professionals we are adding to the new facility
+const healthcareProfessionalsToAddToFacility: Ref<HealthcareProfessional[]> = ref([])
+
+const handleHealthcareProfessionalsInputChange = (filteredItems: Ref<HealthcareProfessional[]>, inputValue: string) => {
+    const input = inputValue.toLowerCase().trim()
+    filteredItems.value = healthcareProfessionalsStore.healthcareProfessionalsData.filter(
+        (healthcareProfessional: HealthcareProfessional) => {
+            const idMatches = healthcareProfessional.id.toLowerCase().startsWith(input)
+            const nameMatches = healthcareProfessional.names.some(name => {
+                const firstNameMatch = name.firstName.toLowerCase().includes(input)
+                const middleNameMatch = name.middleName?.toLowerCase().includes(input)
+                const lastNameMatch = name.lastName.toLowerCase().includes(input)
+                return firstNameMatch || middleNameMatch || lastNameMatch
+            })
+            return idMatches || nameMatches
+        }
+    )
+}
+const healthcareProfessionalsToDisplayCallback = (healthcareProfessional: HealthcareProfessional) =>
+    [healthcareProfessional.names[0].firstName + ' ' + healthcareProfessional.names[0].lastName]
+
+const listPrefectureJapanEn: Ref<string[]> = ref([
+    'Hokkaido', 'Aomori', 'Iwate', 'Miyagi', 'Akita',
+    'Yamagata', 'Fukushima', 'Ibaraki', 'Tochigi', 'Gumma', 'Saitama', 'Chiba', 'Tokyo', 'Kanagawa',
+    'Niigata', 'Toyama', 'Ishikawa', 'Fukui', 'Yamanashi', 'Nagano', 'Gifu', 'Shizuoka', 'Aichi',
+    'Mie', 'Shiga', 'Kyoto', 'Osaka', 'Hyogo', 'Nara', 'Wakayama', 'Tottori', 'Shimane', 'Okayama',
+    'Hiroshima', 'Yamaguchi', 'Tokushima', 'Kagawa', 'Ehime', 'Kochi', 'Fukuoka', 'Saga',
+    'Nagasaki', 'Kumamoto', 'Oita', 'Miyazaki', 'Kagoshima', 'Okinawa'])
+
+const listPrefectureJapanJa: Ref<string[]> = ref([
+    '北海道', '青森県', '岩手県', '宮城県', '秋田県',
+    '山形県', '福島県', '茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県', '新潟県', '富山県',
+    '石川県', '福井県', '山梨県', '長野県', '岐阜県', '静岡県', '愛知県', '三重県', '滋賀県', '京都府', '大阪府',
+    '兵庫県', '奈良県', '和歌山県', '鳥取県', '島根県', '岡山県', '広島県', '山口県', '徳島県', '香川県', '愛媛県',
+    '高知県', '福岡県', '佐賀県', '長崎県', '熊本県', '大分県', '宮崎県', '鹿児島県', '沖縄県'])
path: components/ModCreateFacilitySection.vue
user: login: ljbroersen
body: I created an issue for it! [#1208](https://github.com/ourjapanlife/findadoc-web/issues/1208)
created_at: 2025-05-16T15:00:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
path: components/ModCreateFacilitySection.vue
user: login: theyokohamalife
body: I also just noticed that the `id="1"` which is something we should avoid, because it's too generic. We want to make sure that ids are unique, and using a numerical value like that could cause problems. What do you think about changing the id to something like `id="prefecture-select-en"`?
created_at: 2025-05-17T03:54:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,195 @@
+import type { StateTree } from 'pinia'
+import enUS from '../../../i18n/locales/en.json'
+import fakeFacilityResult from '../../fake_data/moderation_dashboard/fakeModFacilityData.json'
+import fakeHealthcareProfessionalResult from '../../fake_data/moderation_dashboard/fakeModHealthcareProfessionalData.json'
+import { aliasQuery } from '../utils'
+
+let facilitiesStore: StateTree
+
+before(() => {
+    cy.login()
+})
+
+describe('Moderation create facility form', () => {
+    context('Landscape mode', () => {
+        before(() => {
+            cy.intercept('POST', '**/', req => {
+                aliasQuery(req, 'query Facilities', fakeFacilityResult)
+            })
+
+            cy.visit('/moderation')
+
+            cy.wait('@query Facilities')
+
+            cy.get('[data-testid="submission-type-select"]').select('FACILITIES')
+            cy.get('[data-testid="add-facility-button"]').click()
+
+            /* This will set the facilities stores or any other stores you need to access for testings.
+                This NEEDS to be in the describe and not the login before*/
+            cy.window().then(win => {
+                facilitiesStore = win.$pinia.state.value.facilitiesStore
+            })
+        })
+
+        beforeEach(() => {
+            cy.viewport('macbook-16')
+        })
+
+        it('contains the following buttons and text in the topbar', () => {
+            cy.get('[data-testid="mod-create-facility-hp-topbar-create"]').should('exist')
+                .contains(enUS.modCreateFacilityOrHPTopbar.create)
+            cy.get('[data-testid="mod-create-facility-hp-topbar-exit"]').should('exist')
+                .contains(enUS.modCreateFacilityOrHPTopbar.exit)
+        })
+
+        it('contains the following input fields', () => {
+            cy.get('[data-testid="mod-facility-section-nameEn"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-nameJa"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-phone"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-email"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-website"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-postalCode"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-cityEn"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-addressLine1En"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-addressLine2En"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-cityJa"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-addressLine1Ja"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-addressLine2Ja"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-google-maps"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-mapLatitude"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-mapLongitude"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-doctor-search"]').should('exist')
+        })
+
+        it('should contain the following select field', () => {
+            cy.get('[data-testid="mod-facility-section-prefectureEn"]').should('exist')
+            cy.get('[data-testid="mod-facility-section-prefectureJa"]').should('exist')
+        })
+
+        it('should be able to type in all input fields and update the store values', () => {
+            cy.get('[data-testid="mod-facility-section-nameEn"]').find('input').clear().type('Hospital')
+            cy.get('[data-testid="mod-facility-section-nameJa"]').find('input').clear().type('立川中央病院')
+            cy.get('[data-testid="mod-facility-section-phone"]').find('input').clear().type('08080939393')
+            cy.get('[data-testid="mod-facility-section-email"]').find('input').clear().type('example@mail.com')
+            cy.get('[data-testid="mod-facility-section-website"]').find('input').clear().type('http://example.com')
+            cy.get('[data-testid="mod-facility-section-postalCode"]').find('input').clear().type('180-0000')
+            cy.get('[data-testid="mod-facility-section-cityEn"]').find('input').clear().type('Shibuya')
+            cy.get('[data-testid="mod-facility-section-addressLine1En"]').find('input').clear().type('some address line 1')
+            cy.get('[data-testid="mod-facility-section-addressLine2En"]').find('input').clear().type('some address line 2')
+            cy.get('[data-testid="mod-facility-section-cityJa"]').find('input').clear().type('渋谷区')
+            cy.get('[data-testid="mod-facility-section-addressLine1Ja"]').find('input').clear().type('道の駅')
+            cy.get('[data-testid="mod-facility-section-addressLine2Ja"]').find('input').clear().type('道の')
+            //The typing is split into three due to our linting rules of length
path: test/cypress/e2e/moderationCreateFacility.cy.ts
user: login: theyokohamalife
body: ```suggestion
            // The typing is split into three due to our linting rules of length
```
created_at: 2025-05-17T04:04:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
path: components/ModCreateFacilitySection.vue
user: login: ljbroersen
body: @theyokohamalife I changed it to `name="prefecture-japan-en"` and `id="prefecture-select-en"`. The same goes for the Japanese list a little bit further down. I can create a ticket for the "name" issue if you want me to?
created_at: 2025-05-17T05:57:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,354 @@
+<template>
+    <Loader />
+    <div v-if="isFacilitySectionInitialized">
+        <div class="mod-facility-section">
+            <h2 class="mb-3.5 text-start text-primary-text text-2xl font-bold font-sans leading-normal">
+                {{ $t('modFacilitySection.facilityHeading') }}
+            </h2>
+            <div class="input-fields flex flex-col my-4">
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameEn"
+                    data-testid="mod-facility-section-nameEn"
+                    :label="$t('modFacilitySection.labelFacilityNameEn')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameEn')"
+                    :required="true"
+                    :input-validation-check="validateNameEn"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameEn')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.nameJa"
+                    data-testid="mod-facility-section-nameJa"
+                    :label="$t('modFacilitySection.labelFacilityNameJa')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityNameJa')"
+                    :required="true"
+                    :input-validation-check="validateNameJa"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityNameJa')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.phone"
+                    data-testid="mod-facility-section-phone"
+                    :label="$t('modFacilitySection.labelFacilityPhoneNumber')"
+                    type="text"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityPhoneNumber')"
+                    :required="true"
+                    :input-validation-check="validatePhoneNumber"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPhoneNumber')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.email"
+                    data-testid="mod-facility-section-email"
+                    :label="$t('modFacilitySection.labelFacilityEmail')"
+                    type="email"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityEmail')"
+                    :required="false"
+                    :input-validation-check="validateEmail"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityEmail')"
+                />
+                <ModInputField
+                    v-model="facilityStore.createFacilityFields.contact.website"
+                    data-testid="mod-facility-section-website"
+                    :label="$t('modFacilitySection.labelFacilityWebsite')"
+                    type="url"
+                    :placeholder="$t('modFacilitySection.placeholderTextFacilityWebsite')"
+                    :required="false"
+                    :input-validation-check="validateWebsite"
+                    :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityWebsite')"
+                />
+
+                <div
+                    class="mod-facility-address-section"
+                >
+                    <span class="mb-3.5 text-center text-primary-text text-2xl font-bold font-sans leading-normal">
+                        {{ $t('modFacilitySection.addresses') }}
+                    </span>
+                    <ModInputField
+                        v-model="facilityStore.createFacilityFields.contact.address.postalCode"
+                        data-testid="mod-facility-section-postalCode"
+                        :label="$t('modFacilitySection.labelFacilityPostalCode')"
+                        type="text"
+                        :placeholder="$t('modFacilitySection.placeholderTextFacilityPostalCode')"
+                        :required="true"
+                        :input-validation-check="validatePostalCode"
+                        :invalid-input-error-message="$t('modFacilitySection.inputErrorMessageFacilityPostalCode')"
+                    />
+                    <div class="flex flex-col mt-4">
+                        <label
+                            for="Prefecture Japan"
+                            class="mb-2 text-primary-text text-sm font-bold font-sans"
+                        >
+                            {{ $t('modFacilitySection.labelFacilityPrefectureEn') }}
+                        </label>
+                        <select
+                            id="1"
+                            v-model="facilityStore.createFacilityFields.contact.address.prefectureEn"
+                            data-testid="mod-facility-section-prefectureEn"
+                            name="Prefecture Japan"
path: components/ModCreateFacilitySection.vue
user: login: ermish
body: just saw this, updated names look good  and a future ticket would be perfect @ljbroersen !

Best practices:
hyphens are usually the best practice I've seen. 
+1 to @NabbeunNabi 's point for consistency
+1 for @theyokohamalife 's point on better unique names (which looks like is already done 💯 )

created_at: 2025-05-17T16:01:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -75,4 +84,6 @@ const updateTextForSubmissionDashboard = (selectedTab: SelectedSubmissionListVie
 
 const isHealthcareProfessionals = computed(() => moderationSubmissionsStore.selectedModerationListViewChosen
   === SelectedModerationListView.HealthcareProfessionals)
+const isFacility = computed(() => moderationSubmissionsStore.selectedModerationListViewChosen
+  === SelectedModerationListView.Facilities)
path: components/ModDashboardTopbar.vue
user: login: NabbeunNabi
body: This should have the function in the moderationScreenStore that is `isCreateFacilityScreenActive` being used
created_at: 2025-05-19T15:59:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -26,6 +26,12 @@
         >
             <ModCreateFacilityOrProfessionalTopbar />
         </div>
+        <div
+            v-else-if="moderationScreenStore.createFacilityScreenIsActive()"
path: components/ModTopbar.vue
user: login: NabbeunNabi
body: should just be v-if
created_at: 2025-05-19T15:59:41Z
author_association: CONTRIBUTOR

PR comments:
user: login: netlify[bot]
created_at: 2025-04-20T14:53:45Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *findadoc* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | b0e3d5051d80e901380e4df3a9cea8c831a07e87 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/projects/findadoc/deploys/682b56743c7d26000889dcfa |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-1139--findadoc.netlify.app](https://deploy-preview-1139--findadoc.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTExMzktLWZpbmRhZG9jLm5ldGxpZnkuYXBwIn0.dw4EHGZTp-WqsGHpNMjEv_in2GYXm222VIBeExxnKr8)<br /><br />_Use your smartphone camera to open QR code link._</details> |
|<span aria-hidden="true">![Lighthouse](https://app.netlify.com/public/external-usage/git-comments/lighthouse-sm.png)</span><br />Lighthouse | 1 paths audited<br />**Performance**: 63 (🔴 down 1 from production)<br />**Accessibility**: 98 (no change from production)<br />**Best Practices**: 92 (no change from production)<br />**SEO**: 82 (no change from production)<br />**PWA**: -<br />[View the detailed breakdown and full score reports](https://app.netlify.com/projects/findadoc/deploys/682b56743c7d26000889dcfa) |
---
<!-- [findadoc Preview](https://deploy-preview-1139--findadoc.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify project configuration](https://app.netlify.com/projects/findadoc/configuration/notifications#deploy-notifications)._
author_association: NONE
user: login: ljbroersen
created_at: 2025-05-13T13:53:40Z
body: Merge conflicts have been resolved and feature has been tested with the new auth implementation.
author_association: CONTRIBUTOR
user: login: NabbeunNabi
created_at: 2025-05-15T07:48:07Z
body: @ljbroersen I think this needs a rebase to clean up some of these commits. Let me know if you need help doing this
author_association: CONTRIBUTOR
user: login: ljbroersen
created_at: 2025-05-16T05:35:39Z
body: I am so sorry, this has become a commit mess. I had to redo the rebasing several times because things kept changing and Git kept stopping halfway and refused to do anything without me pushing and pulling from/to this branch. Which made it an even bigger mess. However. Tests are passing and the branch should be completely up to date with the changes made to the main branch. Functionality has also been tested and works accordingly.
author_association: CONTRIBUTOR
user: login: theyokohamalife
created_at: 2025-05-19T10:53:49Z
body: @NabbeunNabi will also need to approve this in order for it to be merged since he requested changes.
author_association: CONTRIBUTOR
user: login: NabbeunNabi
created_at: 2025-05-19T13:21:11Z
body: @all-contributors please add @ljbroersen for code
author_association: CONTRIBUTOR
user: login: theyokohamalife
created_at: 2025-05-19T13:41:50Z
body: @all-contributors please add @ljbroersen for code
author_association: CONTRIBUTOR
user: login: allcontributors[bot]
created_at: 2025-05-19T13:42:00Z
body: @theyokohamalife 

I've put up [a pull request](https://github.com/ourjapanlife/findadoc-web/pull/1235) to add @ljbroersen! :tada:
author_association: CONTRIBUTOR