@tekkare/romulus 0.1.250 → 0.1.252

package/layer/app/components/oip-science/euct/StudyDescription.vue

@@ -0,0 +1,1075 @@
+<!--
+  Onglet « Description de l'etude » d'un essai EUCT (portage de la page
+  /euct/[id]/study-description de France Augmented Science).
+-->
+<template>
+  <div ref="root" class="oip-science">
+  <div v-if="resultsQueryEuct && !isLoadingQueryEuct">
+    <div class="oip_row gap-16">
+      <div class="chapters_col">
+        <RmChaptersNav
+          class="chapters_sticky"
+          :chapters="chaptersList"
+          :title="$t('oipScience.trial.chapters')"
+          :offset="chaptersOffset"
+          :style="{ top: `${stickyTop}px` }"
+          @select="scrollToChapter"
+        />
+      </div>
+
+      <div class="oip_widthFill">
+        <div class="oip_grid gap-16">
+          <!-- SUMMARY -->
+          <div class="oip_card oip_grid gap-24" id="summary">
+            <div class="oip_row">
+              <div class="oip_grid gap-4">
+                <div class="oip_row v-center gap-8 wrap">
+                  <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.summary') }}</h1>
+                  <span
+                    class="trial-id-badge"
+                    v-if="resultsQueryEuct.euct_number"
+                  >EUCT&nbsp;: {{ resultsQueryEuct.euct_number }}</span>
+                  <span
+                    class="trial-id-badge"
+                    v-if="resultsQueryEuct.nct_number"
+                  >NCT&nbsp;: {{ resultsQueryEuct.nct_number }}</span>
+                </div>
+                <OipScienceCommonSource :sources="['EUCT']" :lang="lang" />
+              </div>
+            </div>
+            <div class="oip_row v-center gap-8">
+              <RmTag
+                :variant="setColorStatus(resultsQueryEuct.global_status)"
+              >
+                {{ ifNoRes(resultsQueryEuct.global_status) }}
+              </RmTag>
+
+              <p
+                class="kk_text"
+                :class="setColorStatus(resultsQueryEuct.global_status)"
+              >
+                {{ ifNoRes(resultsQueryEuct.trial_phase) }}
+              </p>
+            </div>
+
+            <OipScienceCommonForm
+              :title="$t('oipScience.trial.fullTitle')"
+              :content="ifNoRes(resultsQueryEuct.full_title)"
+              :highlightQueries="highlight"
+              class="oip_body"
+            ></OipScienceCommonForm>
+
+            <OipScienceCommonForm
+              :title="$t('oipScience.trial.publicTitle')"
+              :content="ifNoRes(resultsQueryEuct.public_title)"
+              :highlightQueries="highlight"
+              class="oip_body"
+            ></OipScienceCommonForm>
+          </div>
+
+          <!-- DETAILED DESCRIPTION -->
+          <div class="oip_card oip_grid gap-24" id="trial-details">
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.trialDetails') }}</h1>
+            </div>
+
+            <OipScienceCommonForm
+              :title="$t('oipScience.trial.trialPhase')"
+              :content="ifNoRes(resultsQueryEuct.trial_phase)"
+              :highlightQueries="highlight"
+            ></OipScienceCommonForm>
+
+            <OipScienceCommonForm
+              :title="$t('oipScience.trial.trialCategory')"
+              :content="ifNoRes(resultsQueryEuct.trial_category)"
+              :highlightQueries="highlight"
+            ></OipScienceCommonForm>
+
+            <OipScienceCommonForm
+              :title="$t('oipScience.trial.trialCategoryJustification')"
+              :content="ifNoRes(resultsQueryEuct.trial_category_justification)"
+              :highlightQueries="highlight"
+            ></OipScienceCommonForm>
+
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.trialDuration') }}</h1>
+            </div>
+
+            <div class="oip_row v-bottom">
+              <OipScienceCommonTimeline
+                :title="$t('oipScience.trial.estimatedRecruitmentStartEu')"
+                :content="
+                  ifNoRes(
+                    resultsQueryEuct.estimated_recruitment_start_date_in_eu,
+                    'date'
+                  )
+                "
+              />
+              <OipScienceCommonTimeline
+                :title="$t('oipScience.trial.estimatedEndEu')"
+                :content="
+                  ifNoRes(
+                    resultsQueryEuct.estimated_trial_end_date_in_eu,
+                    'date'
+                  )
+                "
+              />
+              <OipScienceCommonTimeline
+                :title="$t('oipScience.trial.estimatedGlobalEnd')"
+                :content="
+                  ifNoRes(
+                    resultsQueryEuct.estimated_trial_global_end_date,
+                    'date'
+                  )
+                "
+              />
+            </div>
+          </div>
+
+          <!-- OIP Discovery Tags -->
+          <div class="oip_card oip_grid gap-24" id="tags">
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.oipDiscoveryTags') }}</h1>
+            </div>
+            <OipScienceCommonTableTags
+              :isVertical="true"
+              icon="Bandaids"
+              :title="$t('oipScience.trial.rareDiseases')"
+              :values="getRareDiseases"
+              :highlightQueries="highlight"
+            ></OipScienceCommonTableTags>
+          </div>
+
+          <!-- Conditions -->
+          <div class="oip_card oip_grid gap-24" id="conditions">
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.conditions') }}</h1>
+            </div>
+
+            <OipScienceCommonTableTags
+              :isVertical="true"
+              icon="FaceMask"
+              :title="$t('oipScience.trial.conditions')"
+              :values="
+                resultsQueryEuct.medical_condition?.map(
+                  (val) => val.condition_name_en
+                ) || []
+              "
+              :highlightQueries="highlight"
+            ></OipScienceCommonTableTags>
+
+            <OipScienceCommonTableTags
+              :isVertical="true"
+              icon="Clipboard"
+              :title="$t('oipScience.trial.therapeuticArea')"
+              :values="
+                resultsQueryEuct.therapeutic_area?.map((val) => val) || []
+              "
+              :highlightQueries="highlight"
+            ></OipScienceCommonTableTags>
+          </div>
+
+          <!-- Products -->
+          <div class="oip_card oip_grid gap-24" id="products">
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.products') }}</h1>
+            </div>
+
+            <OipScienceCommonTableTags
+              :isVertical="true"
+              icon="Pill"
+              :title="$t('oipScience.trial.products')"
+              :values="
+                resultsQueryEuct.products?.map((val) =>
+                  val.productDictionaryInfo?.prodName
+                    ? val.productDictionaryInfo?.prodName
+                    : val.productDictionaryInfo?.activeSubstanceName
+                ) || []
+              "
+              :highlightQueries="highlight"
+            ></OipScienceCommonTableTags>
+          </div>
+
+          <!-- Main Objective -->
+          <div class="oip_card oip_grid gap-24" id="objectives">
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.mainObjectiveTitle') }}</h1>
+            </div>
+
+            <OipScienceCommonTableTags
+              :isVertical="true"
+              :title="$t('oipScience.trial.trialsScope')"
+              :values="ifNoRes(resultsQueryEuct?.trial_scope) || []"
+              :highlightQueries="highlight"
+              class="oip_body"
+            ></OipScienceCommonTableTags>
+
+            <OipScienceCommonForm
+              :title="$t('oipScience.trial.mainObjective')"
+              :content="ifNoRes(resultsQueryEuct.main_objective_en)"
+              :highlightQueries="highlight"
+            ></OipScienceCommonForm>
+
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.secondaryObjectives') }}</h1>
+            </div>
+
+            <div
+              v-if="
+                resultsQueryEuct?.secondary_objective &&
+                resultsQueryEuct?.secondary_objective.length > 0
+              "
+              class="oip_grid gap-4"
+            >
+              <div
+                v-for="(
+                  obj, index
+                ) in resultsQueryEuct?.secondary_objective.sort(
+                  (a, b) =>
+                    (typeof a.objective_number === 'number'
+                      ? a.objective_number
+                      : 0) -
+                    (typeof b.objective_number === 'number'
+                      ? b.objective_number
+                      : 0)
+                )"
+                :key="index"
+              >
+                <!-- <span class="oip_body">
+                  {{ obj.objective_number }}. {{ obj.second_objective_en }}
+                </span> -->
+
+                <RmTextHighlight
+                  :queries="highlight"
+                  :text="obj.objective_number + '. ' + obj.second_objective_en"
+                  class="oip_body"
+                />
+              </div>
+            </div>
+            <p v-else class="oip_body">{{ ifNoRes(null) }}</p>
+          </div>
+
+          <!-- CRITERIAS-->
+          <div class="oip_card oip_grid gap-24" id="eligibility-criteria">
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.eligibilityCriteria') }}</h1>
+            </div>
+
+            <div class="grid gap-16">
+              <OipScienceCommonForm
+                :title="$t('oipScience.trial.totalEnrollmentReminder')"
+                :content="
+                  ifNoRes(
+                    resultsQueryEuct.enrollment_status
+                      ?.total_planned_enrollment,
+                    'number'
+                  ) + ' ' + $t('oipScience.trial.subjects')
+                "
+                :highlightQueries="highlight"
+              />
+              <OipScienceCommonForm
+                :title="$t('oipScience.trial.ageRange')"
+                :content="
+                  ifNoRes(resultsQueryEuct.subject_population?.age_range)
+                "
+                :highlightQueries="highlight"
+              />
+
+              <OipScienceCommonTableTags
+                :isVertical="true"
+                :title="$t('oipScience.trial.ageRangeSecondary')"
+                :values="
+                  Array.isArray(
+                    resultsQueryEuct.subject_population
+                      ?.age_range_secondary_identifier
+                  )
+                    ? resultsQueryEuct.subject_population?.age_range_secondary_identifier.map(
+                        (val) => val
+                      )
+                    : resultsQueryEuct.subject_population
+                        ?.age_range_secondary_identifier
+                    ? [
+                        resultsQueryEuct.subject_population
+                          ?.age_range_secondary_identifier,
+                      ]
+                    : []
+                "
+                :highlightQueries="highlight"
+              ></OipScienceCommonTableTags>
+
+              <OipScienceCommonTableTags
+                :isVertical="true"
+                :title="$t('oipScience.trial.genders')"
+                :values="[
+                  getSexe(
+                    resultsQueryEuct.subject_population?.has_female,
+                    resultsQueryEuct.subject_population?.has_male
+                  ),
+                ]"
+                :highlightQueries="highlight"
+              ></OipScienceCommonTableTags>
+
+              <!-- INCLUSIONS CRITERIAS -->
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.inclusionCriteria') }}</h1>
+              <div
+                v-if="
+                  resultsQueryEuct?.principal_inclusion_criteria &&
+                  resultsQueryEuct?.principal_inclusion_criteria.length > 0
+                "
+                class="oip_grid gap-4"
+              >
+                <div
+                  v-for="(
+                    obj, index
+                  ) in resultsQueryEuct?.principal_inclusion_criteria.sort(
+                    (a, b) =>
+                      (typeof a?.criteria_number === 'number'
+                        ? a.criteria_number
+                        : 0) -
+                      (typeof b?.criteria_number === 'number'
+                        ? b.criteria_number
+                        : 0)
+                  )"
+                  :key="index"
+                >
+                  <RmTextHighlight
+                    :text="obj.criteria_number + '. ' + obj.inclusion_criteria_en"
+                    class="oip_body"
+                  />
+                </div>
+              </div>
+              <p v-else class="oip_body">{{ ifNoRes(null) }}</p>
+
+              <!-- EXCLUSION CRITERIAS -->
+
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.exclusionCriteria') }}</h1>
+              <div
+                v-if="
+                  resultsQueryEuct?.principal_exclusion_criteria &&
+                  resultsQueryEuct?.principal_exclusion_criteria.length > 0
+                "
+                class="oip_grid gap-4"
+              >
+                <div
+                  v-for="(
+                    obj, index
+                  ) in resultsQueryEuct?.principal_exclusion_criteria.sort(
+                    (a, b) =>
+                      (typeof a?.criteria_number === 'number'
+                        ? a.criteria_number
+                        : 0) -
+                      (typeof b?.criteria_number === 'number'
+                        ? b.criteria_number
+                        : 0)
+                  )"
+                  :key="index"
+                >
+                  <RmTextHighlight
+                    :text="obj.criteria_number + '. ' + obj.exclusion_criteria_en"
+                    class="oip_body"
+                  />
+                </div>
+              </div>
+              <p v-else class="oip_body">{{ ifNoRes(null) }}</p>
+            </div>
+          </div>
+
+          <!-- ENROLLMENTS -->
+          <div class="oip_card oip_grid gap-24" id="enrolment">
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.enrollment') }}</h1>
+            </div>
+
+            <OipScienceCommonForm
+              :title="$t('oipScience.trial.totalGlobalEnrollment')"
+              :content="
+                ifNoRes(
+                  resultsQueryEuct.enrollment_status?.total_planned_enrollment,
+                  'number'
+                ) + ' ' + $t('oipScience.trial.subjects')
+              "
+            />
+            <div>
+              <h1 class="oip_underline">{{ $t('oipScience.trial.enrollmentInsideEurope') }}</h1>
+
+              <RmTable :columns="countriesTable.columns" :rows="countriesTable.rows">
+                <template v-for="key in countriesTable.typeKeys.Country" :key="key" #[key]="{ value }">
+                  <RmTag variant="gray" class="no-wrap">
+                    {{ getCountryEmoji(value) }}
+                  </RmTag>
+                </template>
+
+                <template v-for="key in countriesTable.typeKeys.Status" :key="key" #[key]="{ value }">
+                  <RmTag :variant="setColorStatus(value)">
+                    {{ ifNoRes(value) }}
+                  </RmTag>
+                </template>
+
+                <template v-for="key in countriesTable.typeKeys.Link" :key="key" #[key]="{ value }">
+                  <div v-if="value.rawData">
+                    <div
+                      class="kk_link_btn_underline"
+                      v-if="value.rawData.sites.length > 0"
+                      @click="sitesCountry = value.country"
+                    >
+                      {{
+                        value.rawData.sites.filter(
+                          // @ts-ignore
+                          (site) => site.country === value.country
+                        ).length +
+                        ' ' +
+                        (value.rawData.sites.filter(
+                          // @ts-ignore
+                          (site) => site.country === value.country
+                        ).length > 1
+                          ? $t('oipScience.trial.sites')
+                          : $t('oipScience.trial.site'))
+                      }}
+                    </div>
+                  </div>
+                </template>
+              </RmTable>
+              <OipScienceClinicalTrialsSitesDrawer v-model:country="sitesCountry" :trial="resultsQueryEuct" />
+            </div>
+          </div>
+
+          <!-- ENDS POINTS -->
+          <div class="oip_card oip_grid gap-24" id="end_points">
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.primaryEndPoints') }}</h1>
+            </div>
+
+            <div
+              v-if="
+                resultsQueryEuct?.primary_end_point &&
+                resultsQueryEuct?.primary_end_point.length > 0
+              "
+              class="oip_grid gap-4"
+            >
+              <div
+                v-for="(obj, index) in resultsQueryEuct?.primary_end_point.sort(
+                  (a, b) =>
+                    (typeof a.end_point_number === 'number'
+                      ? a.end_point_number
+                      : 0) -
+                    (typeof b.end_point_number === 'number'
+                      ? b.end_point_number
+                      : 0)
+                )"
+                :key="index"
+              >
+                <RmTextHighlight
+                  :text="obj.end_point_number + '. ' + obj.primary_end_point_en"
+                  class="oip_body"
+                />
+              </div>
+            </div>
+            <p v-else class="oip_body">{{ ifNoRes(null) }}</p>
+
+            <div class="oip_grid gap-4">
+              <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.secondaryEndPoints') }}</h1>
+            </div>
+
+            <div
+              v-if="
+                resultsQueryEuct?.secondary_end_point &&
+                resultsQueryEuct?.secondary_end_point.length > 0
+              "
+              class="oip_grid gap-4"
+            >
+              <div
+                v-for="(
+                  obj, index
+                ) in resultsQueryEuct?.secondary_end_point.sort(
+                  (a, b) =>
+                    (typeof a.end_point_number === 'number'
+                      ? a.end_point_number
+                      : 0) -
+                    (typeof b.end_point_number === 'number'
+                      ? b.end_point_number
+                      : 0)
+                )"
+                :key="index"
+              >
+                <RmTextHighlight
+                  :text="obj.end_point_number + '. ' + obj.secondary_end_point_en"
+                  class="oip_body"
+                />
+              </div>
+            </div>
+            <p v-else class="oip_body">{{ ifNoRes(null) }}</p>
+          </div>
+
+          <!-- ALL DATES — every date field the EUCT index exposes for
+               this trial, split in two tables: trial-level (root) and
+               per Member State (countries[]). Field names use the raw
+               index keys so the table doubles as documentation. -->
+          <div class="oip_card oip_grid gap-16" id="all-dates">
+            <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.allDatesTitle') }}</h1>
+
+            <!-- Table 1 — Niveau essai -->
+            <div class="all-dates-section">
+              <h2 class="all-dates-h2">{{ $t('oipScience.trial.trialLevelRoot') }}</h2>
+              <div class="all-dates-wrap">
+                <table class="all-dates-table">
+                  <thead>
+                    <tr>
+                      <th style="width: 34%">{{ $t('oipScience.trial.field') }}</th>
+                      <th style="width: 18%">{{ $t('oipScience.trial.dateForThisTrial') }}</th>
+                      <th>{{ $t('oipScience.trial.whatItRepresents') }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="row in trialLevelDates" :key="row.field">
+                      <td><code class="ad-field-code">{{ row.field }}</code></td>
+                      <td>
+                        <span :class="['ad-value', !row.value && 'ad-na']">
+                          {{ row.value ? ifNoRes(row.value, 'date') : '-' }}
+                        </span>
+                      </td>
+                      <td>{{ row.desc }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <!-- Table 2 — Niveau État membre -->
+            <div class="all-dates-section">
+              <h2 class="all-dates-h2">{{ $t('oipScience.trial.memberStateLevel') }} (<code>countries[]</code>)</h2>
+              <div class="all-dates-wrap">
+                <table class="all-dates-table">
+                  <thead>
+                    <tr>
+                      <th style="width: 34%">{{ $t('oipScience.trial.field') }}</th>
+                      <th style="width: 30%">{{ $t('oipScience.trial.datesPerMemberState') }}</th>
+                      <th>{{ $t('oipScience.trial.whatItRepresents') }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="row in countryLevelDates" :key="row.field">
+                      <td><code class="ad-field-code">{{ row.field }}</code></td>
+                      <td>
+                        <ul v-if="row.values.length" class="ad-ms-list">
+                          <li v-for="r in row.values" :key="r.country">
+                            <span class="ad-flag">{{ countryFlag(r.country) }}</span>
+                            <span class="ad-country">{{ r.country }}</span>
+                            <span :class="['ad-value', !r.date && 'ad-na']">{{ r.date ? ifNoRes(r.date, 'date') : '-' }}</span>
+                          </li>
+                        </ul>
+                        <span v-else class="ad-value ad-na">-</span>
+                      </td>
+                      <td>{{ row.desc }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <!-- Link -->
+          <div class="oip_card oip_grid gap-24" id="links">
+            <h1 class="kk_title_medium_2">{{ $t('oipScience.trial.links') }}</h1>
+
+            <div class="oip_grid gap-4">
+              <div class="oip_row v-center gap-4">
+                <RmIcon name="Link" :size="12" color="var(--cool-grey)" />
+                <h1 class="oip_underline">
+                  {{ $t('oipScience.trial.linkTo') }} <b>{{ resultsQueryEuct.euct_number }}</b>
+                </h1>
+              </div>
+
+              <a
+                class="kk_link_btn_underline"
+                :href="
+                  'https://euclinicaltrials.eu/search-for-clinical-trials/?lang=en&EUCT=' +
+                  resultsQueryEuct.euct_number
+                "
+                target="_blank"
+              >
+                <span>
+                  https://euclinicaltrials.eu/search-for-clinical-trials/?lang=en&EUCT=<b
+                    >{{ resultsQueryEuct.euct_number }}</b
+                  >
+                </span>
+              </a>
+            </div>
+
+            <div class="oip_grid gap-4" v-if="resultsQueryEuct.nct_number">
+              <div class="oip_row v-center gap-4">
+                <RmIcon name="Link" :size="12" color="var(--cool-grey)" />
+                <h1 class="oip_underline">
+                  {{ $t('oipScience.trial.linkTo') }} <b>{{ resultsQueryEuct.nct_number }}</b>
+                </h1>
+              </div>
+
+              <a
+                class="kk_link_btn_underline"
+                :href="
+                  'https://clinicaltrials.gov/ct2/show/' +
+                  resultsQueryEuct.nct_number
+                "
+                target="_blank"
+              >
+                <span>
+                  https://clinicaltrials.gov/ct2/show/<b>
+                    {{ resultsQueryEuct.nct_number }}
+                  </b>
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <RmLoadingState v-if="!loaded || isLoadingQueryEuct" :lines="3" :chart-height="240" />
+  <RmEmptyState
+    v-else-if="!resultsQueryEuct"
+    :title="$t('oipScience.common.noDataTitle')"
+    :text="$t('oipScience.common.noDataText')"
+  />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useEuct from '../../../oip-science/composables/useEuct';
+import { getCountryEmoji, getSexe, ifNoRes, removeDuplicate, setColorStatus } from '../../../oip-science/utils/styleAndFormat';
+import { valueTable } from '../../../oip-science/utils/valueTable';
+
+const props = withDefaults(
+  defineProps<{
+    /** Numero EUCT de l'essai. */
+    id: string;
+    /** Termes de la recherche en cours, surlignes dans la fiche. */
+    highlight?: string[];
+    lang?: 'fr' | 'en';
+  }>(),
+  { highlight: () => [], lang: 'fr' },
+);
+
+// Le sommaire defile le conteneur de la fiche (cadre ou tiroir de projet).
+const root = ref<HTMLElement | null>(null);
+const { chaptersOffset, stickyTop, scrollToChapter } = useOipChapterScroll(root);
+const chaptersList = computed(() => [
+          {
+            label: t('oipScience.trial.summary'),
+            value: 'summary',
+          },
+
+          {
+            label: t('oipScience.trial.trialDetails'),
+            value: 'trial-details',
+          },
+          {
+            label: t('oipScience.trial.oipDiscoveryTags'),
+            value: 'tags',
+          },
+          {
+            label: t('oipScience.trial.conditions'),
+            value: 'conditions',
+          },
+          {
+            label: t('oipScience.trial.products'),
+            value: 'products',
+          },
+          {
+            label: t('oipScience.trial.objectives'),
+            value: 'objectives',
+          },
+
+          {
+            label: t('oipScience.trial.eligibilityCriteria'),
+            value: 'eligibility-criteria',
+          },
+
+          {
+            label: t('oipScience.trial.enrollment'),
+            value: 'enrolment',
+          },
+          {
+            label: t('oipScience.trial.endPoints'),
+            value: 'end_points',
+          },
+          {
+            label: t('oipScience.trial.allDatesTitle'),
+            value: 'all-dates',
+          },
+          {
+            label: t('oipScience.trial.links'),
+            value: 'links',
+          }]);
+const { t } = useI18n();
+const { findEuctById, resultsQueryEuct, isLoadingQueryEuct } = useEuct();
+
+// Some EUCT date fields ship as 'DD/MM/YYYY' strings
+// (`trial_end_or_early_termination`) rather than ISO, and empty
+// strings should be treated as missing. Normalize to ISO yyyy-mm-dd
+// so `ifNoRes(value, 'date')` (which calls `new Date(value)`) parses
+// them correctly.
+const normEuctDate = (v: any): string | null => {
+  if (v == null) return null;
+  const s = String(v).trim();
+  if (!s) return null;
+  const dmy = s.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  if (dmy) return `${dmy[3]}-${dmy[2]}-${dmy[1]}`;
+  return s;
+};
+
+// CTIS notifies Start of Trial / End of Recruitment / End of Trial
+// PER MEMBER STATE. We surface every MS the trial touches so the
+// reader sees the full timeline rather than a single aggregated
+// value. Helpers below feed the per-MS rows of the All Dates table.
+// Returns one entry per Member State the trial declares, even if it
+// hasn't reported the requested date yet — the missing row falls back
+// to '—' in the template, which matches the user's expectation that
+// every country gets a line.
+const perCountryDate = (field: string) => {
+  const cs = (resultsQueryEuct.value as any)?.countries;
+  if (!Array.isArray(cs)) return [] as Array<{ country: string; date: string | null }>;
+  return cs
+    .map((c: any) => ({
+      country: c?.country_name || '',
+      date: normEuctDate(c?.[field]),
+    }))
+    .filter((row) => row.country);
+};
+
+// All Dates — table 1 (trial-level, root fields) is driven by this list
+// so adding/removing a row is a one-line change. Order follows the
+// index mapping screenshot. The two `_y` fields are declared in the
+// EUCT mapping but never populated; we keep them visible for
+// completeness and mark them as such in the description column.
+const trialLevelDates = computed(() => {
+  const r = (resultsQueryEuct.value || {}) as any;
+  return [
+    {
+      field: 'decision_date',
+      value: normEuctDate(r.decision_date),
+      desc: t('oipScience.trial.euDecisionDateDesc'),
+    },
+    {
+      field: 'first_submitted_date',
+      value: normEuctDate(r.first_submitted_date),
+      desc: t('oipScience.trial.euFirstSubmittedDesc'),
+    },
+    {
+      field: 'last_update_date',
+      value: normEuctDate(r.last_update_date),
+      desc: t('oipScience.trial.euLastUpdateDesc'),
+    },
+    {
+      field: 'start_date',
+      value: normEuctDate(r.start_date),
+      desc: t('oipScience.trial.euStartDateDesc'),
+    },
+    {
+      field: 'end_date',
+      value: normEuctDate(r.end_date),
+      desc: t('oipScience.trial.euEndDateDesc'),
+    },
+    {
+      field: 'global_end_date',
+      value: normEuctDate(r.global_end_date),
+      desc: t('oipScience.trial.euGlobalEndDateDesc'),
+    },
+    {
+      field: 'estimated_recruitment_start_date_in_eu',
+      value: normEuctDate(r.estimated_recruitment_start_date_in_eu),
+      desc: t('oipScience.trial.euEstRecruitmentStartDesc'),
+    },
+    {
+      field: 'estimated_trial_end_date_in_eu',
+      value: normEuctDate(r.estimated_trial_end_date_in_eu),
+      desc: t('oipScience.trial.euEstEndEuDesc'),
+    },
+    {
+      field: 'estimated_trial_end_date_in_eu_y',
+      value: normEuctDate(r.estimated_trial_end_date_in_eu_y),
+      desc: t('oipScience.trial.euEstEndEuYDesc'),
+    },
+    {
+      field: 'estimated_trial_global_end_date',
+      value: normEuctDate(r.estimated_trial_global_end_date),
+      desc: t('oipScience.trial.euEstGlobalEndDesc'),
+    },
+    {
+      field: 'estimated_trial_global_end_date_y',
+      value: normEuctDate(r.estimated_trial_global_end_date_y),
+      desc: t('oipScience.trial.euEstGlobalEndYDesc'),
+    },
+  ];
+});
+
+// All Dates — table 2 (per Member State). Each row covers one CTIS
+// date that lives inside `countries[]`. `perCountryDate(field)`
+// returns one entry per MS the trial declares; the template falls
+// back to '—' for countries that haven't reported the field yet.
+const countryLevelDates = computed(() => [
+  {
+    field: 'trial_decision_date',
+    values: perCountryDate('trial_decision_date'),
+    desc: t('oipScience.trial.msDecisionDateDesc'),
+  },
+  {
+    field: 'trial_start_date',
+    values: perCountryDate('trial_start_date'),
+    desc: t('oipScience.trial.msStartDateDesc'),
+  },
+  {
+    field: 'trial_last_update',
+    values: perCountryDate('trial_last_update'),
+    desc: t('oipScience.trial.msLastUpdateDesc'),
+  },
+  {
+    field: 'trial_restart',
+    values: perCountryDate('trial_restart'),
+    desc: t('oipScience.trial.msRestartDesc'),
+  },
+  {
+    field: 'trial_temporary_halt',
+    values: perCountryDate('trial_temporary_halt'),
+    desc: t('oipScience.trial.msTemporaryHaltDesc'),
+  },
+  {
+    field: 'recruitment_start',
+    values: perCountryDate('recruitment_start'),
+    desc: t('oipScience.trial.msRecruitmentStartDesc'),
+  },
+  {
+    field: 'recruitment_end',
+    values: perCountryDate('recruitment_end'),
+    desc: t('oipScience.trial.msRecruitmentEndDesc'),
+  },
+  {
+    field: 'recruitment_restart',
+    values: perCountryDate('recruitment_restart'),
+    desc: t('oipScience.trial.msRecruitmentRestartDesc'),
+  },
+]);
+
+// Inline EU/EEA flag lookup so we control exactly what lands in the
+// dedicated flag column. The shared `getCountryEmoji` helper returns
+// 'emoji  Country Name' (double-space joined) — even with a split
+// that produced the country name printed twice in production, so we
+// bypass it here.
+const COUNTRY_FLAG: Record<string, string> = {
+  Austria: '🇦🇹', Belgium: '🇧🇪', Bulgaria: '🇧🇬', Croatia: '🇭🇷',
+  Cyprus: '🇨🇾', Czechia: '🇨🇿', Denmark: '🇩🇰', Estonia: '🇪🇪',
+  Finland: '🇫🇮', France: '🇫🇷', Germany: '🇩🇪', Greece: '🇬🇷',
+  Hungary: '🇭🇺', Iceland: '🇮🇸', Ireland: '🇮🇪', Italy: '🇮🇹',
+  Latvia: '🇱🇻', Liechtenstein: '🇱🇮', Lithuania: '🇱🇹', Luxembourg: '🇱🇺',
+  Malta: '🇲🇹', Netherlands: '🇳🇱', Norway: '🇳🇴', Poland: '🇵🇱',
+  Portugal: '🇵🇹', Romania: '🇷🇴', Slovakia: '🇸🇰', Slovenia: '🇸🇮',
+  Spain: '🇪🇸', Sweden: '🇸🇪',
+};
+const countryFlag = (country: string) => COUNTRY_FLAG[country] || '';
+
+const sitesCountry = ref<string | null>(null);
+// :::::::::::::::::::::::::::::
+// :::::::::::::::::::::::::::::
+// Le composable part a `false` : sans ce drapeau, l'etat vide sortirait avant la requete.
+const loaded = ref(false);
+
+// QUERY
+async function load() {
+  if (!props.id) return;
+  await findEuctById({ id: props.id.toString() });
+  loaded.value = true;
+}
+
+onMounted(load);
+watch(() => props.id, load);
+// :::::::::::::::::::::::::::::
+// BRANCHES ET INTERVENTIONS
+const getColumnType = computed(() => {
+  return ['Country', '', 'Status', 'Link'];
+});
+
+const getHeader = computed(() => {
+  return [t('oipScience.trial.country'), t('oipScience.trial.subjectsCount'), t('oipScience.trial.status'), t('oipScience.trial.sitesCount')];
+
+});
+
+const getContent = computed(() => {
+  if (
+    resultsQueryEuct.value &&
+    resultsQueryEuct.value?.countries &&
+    resultsQueryEuct.value?.countries?.length > 0
+  ) {
+    return resultsQueryEuct.value.countries.map((item: any) => ({
+      values: [
+        item.country_name,
+        item.planned_number_of_subjects,
+        item.trial_current_status,
+        { country: item.country_name, rawData: resultsQueryEuct.value as any },
+      ],
+    }));
+  } else {
+    return [];
+  }
+});
+
+const countriesTable = computed(() =>
+  valueTable(getHeader.value, getContent.value, getColumnType.value, {
+    align: ["left", "right", "left", "right"],
+  }),
+);
+
+const getRareDiseases = computed(() => {
+  return removeDuplicate(
+    (resultsQueryEuct.value &&
+      resultsQueryEuct.value.rare_diseases &&
+      resultsQueryEuct.value.rare_diseases.map(
+        (res: any) => res.concat_disease_name_orpha_code
+      )) ??
+      []
+  );
+});
+
+const getGenomicsSymbols = computed(() => {
+  if (
+    resultsQueryEuct.value &&
+    resultsQueryEuct.value.genomics &&
+    resultsQueryEuct.value.genomics.length > 0  ) {
+    return resultsQueryEuct.value.genomics.map((g: any) => g.symbol);
+  }
+
+  return [];
+});
+
+</script>
+
+<style scoped>
+.trial-id-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 6px;
+  background: var(--bg-surface-2);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  letter-spacing: 0.2px;
+}
+
+/* All Dates section — reference tables inside the trial detail page */
+.all-dates-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.all-dates-section + .all-dates-section {
+  margin-top: 8px;
+}
+.all-dates-h2 {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin: 0;
+}
+.all-dates-h2 code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  text-transform: none;
+  background: var(--bg-surface-2);
+  color: var(--text-secondary);
+  padding: 1px 6px;
+  border-radius: 4px;
+  letter-spacing: 0;
+}
+.ad-field-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--primary);
+  background: var(--bg-surface-2);
+  padding: 2px 6px;
+  border-radius: 4px;
+  word-break: break-all;
+}
+.all-dates-wrap {
+  overflow-x: auto;
+}
+.all-dates-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.all-dates-table thead th {
+  background: var(--bg-surface-2);
+  color: var(--text-primary);
+  font-weight: 600;
+  text-align: left;
+  padding: 10px 12px;
+  border-bottom: 2px solid var(--border-default);
+  font-size: 12px;
+  letter-spacing: 0.02em;
+}
+.all-dates-table tbody td {
+  padding: 12px;
+  border-bottom: 1px solid var(--border-default);
+  vertical-align: top;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+.all-dates-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+.ad-field {
+  font-weight: 600;
+  color: var(--primary);
+}
+.ad-ms-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ad-ms-list li {
+  display: grid;
+  grid-template-columns: 22px 140px 1fr;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 12.5px;
+}
+.ad-ms-list .ad-value {
+  white-space: nowrap;
+}
+.ad-flag {
+  font-size: 14px;
+  line-height: 1;
+  text-align: center;
+}
+.ad-country {
+  color: var(--text-secondary);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ad-value {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 13px;
+}
+.ad-na {
+  color: var(--text-muted);
+  font-weight: 500;
+  font-style: italic;
+  font-size: 12px;
+}
+
+/* Le sommaire colle sous l'en-tete de fiche (cf. useOipChapterScroll). */
+.chapters_col {
+  flex: 0 0 auto;
+}
+.chapters_sticky {
+  position: sticky;
+}
+</style>