@tekkare/romulus 0.1.251 → 0.1.252

package/layer/app/components/oip-science/establishments/Informations.vue

@@ -0,0 +1,263 @@
+<!--
+  Onglet Informations de la fiche etablissement (porte de la page
+  establishments/[id]/informations de France Augmented Science). Dans FAS
+  l'en-tete chargeait le document (useState('current-establishment')) :
+  l'onglet le relit lui-meme. Les cartes KPI ouvrent les onglets de la fiche
+  par la navigation du layer.
+-->
+<template>
+  <div class="oip-science oip_grid gap-16">
+    <!-- Address + KPIs -->
+    <div v-if="!isLoading && establishment" class="oip_grid gap-24 info-card-section">
+      <div class="grid gap-4">
+        <h1 class="oip_title_table kk_title_medium_2">{{ $t('oipScience.common.informations') }}</h1>
+        <OipScienceCommonSource :sources="['FINESS']" :lang="lang" />
+      </div>
+
+      <!-- Google Map -->
+      <div v-if="hasCoordinates" class="map-container">
+        <iframe
+          :src="`https://maps.google.com/maps?q=${establishment.latitude},${establishment.longitude}&z=14&output=embed`"
+          width="100%"
+          height="300"
+          style="border: 0; border-radius: 8px;"
+          allowfullscreen
+          loading="lazy"
+        />
+      </div>
+
+      <!-- Info text (two columns) -->
+      <div class="info-card">
+        <div class="info-row" v-if="streetLine || cityLine">
+          <RmIcon name="MapPin" color="var(--primary)" :size="18" />
+          <p class="info-text-bold">
+            <template v-if="streetLine">{{ streetLine }}, </template>{{ cityLine }}
+          </p>
+        </div>
+        <div class="info-row" v-if="establishment?.hco_et_dpt_label || establishment?.hco_et_region_label">
+          <RmIcon name="MapTrifold" color="var(--cool-grey)" :size="18" />
+          <p class="info-text">
+            <template v-if="establishment?.hco_et_dpt_label">
+              {{ establishment.hco_et_dpt_label }}<template v-if="establishment?.hco_et_dpt_code"> ({{ establishment.hco_et_dpt_code }})</template>
+            </template>
+            <template v-if="establishment?.hco_et_dpt_label && establishment?.hco_et_region_label">, </template>
+            <template v-if="establishment?.hco_et_region_label">{{ establishment.hco_et_region_label }}</template>
+          </p>
+        </div>
+        <div class="info-row" v-if="establishment?.hco_ej_label">
+          <RmIcon name="Buildings" color="var(--cool-grey)" :size="18" />
+          <p class="info-text">
+            {{ $t('oipScience.common.legalEntity') }} : <strong>{{ establishment.hco_ej_label }}</strong>
+            <template v-if="establishment?.hco_ej_code"> ({{ establishment.hco_ej_code }})</template>
+          </p>
+        </div>
+        <div class="info-row" v-if="establishment?.hco_et_tekkare_category">
+          <RmIcon name="Tag" color="var(--cool-grey)" :size="18" />
+          <p class="info-text">{{ $t('oipScience.common.category') }} : <strong>{{ establishment.hco_et_tekkare_category }}</strong></p>
+        </div>
+        <div class="info-row" v-if="establishment?.hco_et_sector">
+          <RmIcon name="Briefcase" color="var(--cool-grey)" :size="18" />
+          <p class="info-text">{{ $t('oipScience.common.sector') }} : <strong>{{ establishment.hco_et_sector }}</strong></p>
+        </div>
+        <div class="info-row" v-if="establishment?.iris_code">
+          <RmIcon name="MapPinArea" color="var(--cool-grey)" :size="18" />
+          <p class="info-text">IRIS : <strong>{{ establishment.iris_code }}</strong></p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Summary KPIs: NCT / EUCT / Authors / Investigators / AAP -->
+    <div v-if="!isLoading && establishment" class="kpi-summary-section">
+      <a :href="nav.href('Establishment', id, 'clinical-trials')" class="kpi-summary-card" @click="openTab($event, 'clinical-trials')">
+        <span class="kpi-summary-number">{{ formatNumber(establishment?.nct_trial_count || 0) }}</span>
+        <span class="kpi-summary-label">🇺🇸 NCT</span>
+        <span v-if="(establishment?.nct_ongoing_count || 0) > 0" class="kpi-summary-ongoing">
+          {{ formatNumber(establishment.nct_ongoing_count) }} {{ $t('oipScience.kpi.ongoing') }}
+        </span>
+      </a>
+      <a :href="nav.href('Establishment', id, 'clinical-trials')" class="kpi-summary-card" @click="openTab($event, 'clinical-trials')">
+        <span class="kpi-summary-number">{{ formatNumber(establishment?.euct_trial_count || 0) }}</span>
+        <span class="kpi-summary-label">🇪🇺 EUCT</span>
+        <span v-if="(establishment?.euct_ongoing_count || 0) > 0" class="kpi-summary-ongoing">
+          {{ formatNumber(establishment.euct_ongoing_count) }} {{ $t('oipScience.kpi.ongoing') }}
+        </span>
+      </a>
+      <a :href="nav.href('Establishment', id, 'hcps')" class="kpi-summary-card" @click="openTab($event, 'hcps')">
+        <span class="kpi-summary-number">{{ formatNumber(kpi.authors) }}</span>
+        <span class="kpi-summary-label">📝 {{ $t('oipScience.ui.authors') }}</span>
+      </a>
+      <a :href="nav.href('Establishment', id, 'hcps')" class="kpi-summary-card" @click="openTab($event, 'hcps')">
+        <span class="kpi-summary-number">{{ formatNumber(kpi.investigators) }}</span>
+        <span class="kpi-summary-label">🩺 {{ $t('oipScience.common.investigators') }}</span>
+      </a>
+      <a :href="nav.href('Establishment', id, 'public-finance')" class="kpi-summary-card" @click="openTab($event, 'public-finance')">
+        <span class="kpi-summary-number">{{ formatNumber(kpi.aap) }}</span>
+        <span class="kpi-summary-label">📋 AAP</span>
+      </a>
+    </div>
+
+    <RmLoadingState v-if="isLoading" :lines="3" :chart-height="240" />
+    <RmEmptyState
+      v-if="!isLoading && !establishment"
+      :title="$t('oipScience.common.noDataTitle')"
+      :text="$t('oipScience.common.noDataText')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import indexConfig from '../../../oip-science/indexConfig.json';
+import useOipElastic from '../../../oip-science/composables/useOipElastic';
+import { formatNumber } from '../../../oip-science/utils/styleAndFormat';
+
+const props = withDefaults(defineProps<{ id: string; highlight?: string[]; lang?: 'fr' | 'en' }>(), {
+  highlight: () => [],
+  lang: undefined,
+});
+
+const nav = useOipResourceNav();
+const { queryOneElastic } = useOipElastic();
+
+const isLoading = ref(true);
+const establishment = ref<any>(null);
+
+async function load(urlId: string) {
+  isLoading.value = true;
+  establishment.value = null;
+  try {
+    establishment.value = await queryOneElastic({
+      index: indexConfig.establishments.index,
+      cluster: indexConfig.establishments.cluster,
+      path: 'hco_et_code',
+      id: urlId,
+    });
+  } catch (e) {
+    console.error(e);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(() => props.id, (id) => { if (id) load(id); }, { immediate: true });
+
+// Ctrl/Cmd-clic : le lien garde son href, sinon la fiche ouvre l'onglet.
+function openTab(event: MouseEvent, tab: string) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1) return;
+  event.preventDefault();
+  nav.open('Establishment', props.id, tab);
+}
+
+const streetLine = computed(() => {
+  const e = establishment.value;
+  if (!e) return '';
+  return [e.hco_et_street_number, e.hco_et_street_type, e.hco_et_street_label]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+});
+
+const cityLine = computed(() => {
+  const e = establishment.value;
+  if (!e) return '';
+  return [e.hco_et_zip_code, e.hco_et_city].filter(Boolean).join(' ').trim();
+});
+
+const hasCoordinates = computed(() => {
+  const e = establishment.value;
+  return typeof e?.latitude === 'number' && typeof e?.longitude === 'number';
+});
+
+// All KPIs come from native counters on the HCO directory doc itself
+const kpi = computed(() => ({
+  authors: establishment.value?.pubmed_hcp_count || 0,
+  investigators: establishment.value?.nct_euct_hcp_count || 0,
+  aap: establishment.value?.aap_trial_count || 0,
+}));
+</script>
+
+<style scoped>
+.info-card-section {
+  background: var(--bg-surface);
+  border-radius: 12px;
+  padding: 24px;
+}
+.map-container {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* Info text in two columns */
+.info-card {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 32px;
+  row-gap: 14px;
+  padding: 16px 8px;
+}
+.info-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.info-text-bold {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.info-text {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+@media (max-width: 768px) {
+  .info-card {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Summary KPIs (below the info card) */
+.kpi-summary-section {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+}
+.kpi-summary-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 16px 12px;
+  background: var(--bg-surface);
+  border-radius: 12px;
+  text-decoration: none;
+  color: inherit;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.kpi-summary-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+}
+.kpi-summary-number {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+.kpi-summary-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+.kpi-summary-ongoing {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--color-success);
+  font-weight: 600;
+  white-space: nowrap;
+}
+@media (max-width: 768px) {
+  .kpi-summary-section {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>

package/layer/app/components/oip-science/establishments/LinkedList.vue

@@ -0,0 +1,153 @@
+<!--
+  Liste d'etablissements lies a une fiche (sites d'un essai, lieux d'exercice
+  d'un professionnel, etablissements rapproches). Un etablissement reconnu
+  dans l'annuaire FINESS a la carte de la page /establishments ; les autres
+  (etrangers, non reconnus) gardent le meme gabarit, sans lien. (Portage de
+  components/establishments/LinkedList.vue de France Augmented Science.)
+-->
+<template>
+  <div class="oip-science">
+    <div v-if="!loading && !isLoadingDocs" class="oip_grid gap-16">
+      <RmSearchBar
+        v-model="searchText"
+        :placeholder="$t('oipScience.common.searchTrialLocations')"
+        :have-advanced="false"
+      />
+
+      <RmResultsLine icon="Hospital" :items="[{ count: filtered.length, label: $t('oipScience.resultKpis.establishments', filtered.length) }]" />
+      <div class="oip_grid gap-8">
+        <template v-for="(location, index) in visible" :key="index">
+          <OipScienceEstablishmentsCards
+            v-if="location.finess && establishmentDocs.get(location.finess)"
+            :data="establishmentDocs.get(location.finess)"
+          >
+            <template #extra>
+              <OipScienceCommonScoreBadge :score="location.score" />
+            </template>
+          </OipScienceEstablishmentsCards>
+
+          <RmResultCard v-else :actions="false">
+            <template #title>{{ ifNoRes(location.name) }}</template>
+            <template #subtitle>
+              {{ $t('oipScience.common.city') }}: {{ ifNoRes(location.city) }}
+            </template>
+            <template #meta>
+              <RmTag v-if="location.country" variant="gray" class="no-wrap">
+                {{ getCountryEmoji(location.country) }}
+              </RmTag>
+            </template>
+            <template #footer>
+              <OipScienceCommonSource :sources="sources" />
+            </template>
+          </RmResultCard>
+        </template>
+      </div>
+
+      <RmEmptyState v-if="!filtered.length" :title="$t('oipScience.common.noMatchingResult')" />
+      <RmButton
+        v-if="visible.length < filtered.length"
+        variant="secondary"
+        class="load_more"
+        @click="displayCount += PAGE_SIZE"
+      >{{ $t('oipScience.common.loadMore') }}</RmButton>
+    </div>
+    <RmLoadingState v-else :lines="3" :chart-height="240" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import indexConfig from '../../../oip-science/indexConfig.json';
+import useOipElastic from '../../../oip-science/composables/useOipElastic';
+import useAuthorMatching from '../../../oip-science/composables/useAuthorMatching';
+import { getCountryEmoji, ifNoRes } from '../../../oip-science/utils/styleAndFormat';
+
+export type LinkedLocation = {
+  name: string | null;
+  city?: string | null;
+  country?: string | null;
+  finess?: string | null;
+  score?: number | null;
+};
+
+const props = withDefaults(
+  defineProps<{
+    locations: LinkedLocation[];
+    title: string;
+    sources: string[];
+    indexLastUpdate: string;
+    loading?: boolean;
+  }>(),
+  { loading: false },
+);
+
+const { normalize } = useAuthorMatching();
+const { queryCustomElastic } = useOipElastic();
+
+// Fiches annuaire des etablissements reconnus, en une seule requete.
+const establishmentDocs = ref<Map<string, any>>(new Map());
+const isLoadingDocs = ref(false);
+
+async function loadEstablishmentDocs(codes: (string | null | undefined)[]) {
+  const ids = [...new Set(codes.filter((x): x is string => !!x))].filter(
+    (id) => !establishmentDocs.value.has(id),
+  );
+  if (!ids.length) return;
+  isLoadingDocs.value = true;
+  try {
+    const res = await queryCustomElastic({
+      index: indexConfig.establishments.index,
+      cluster: indexConfig.establishments.cluster,
+      customQuery: {
+        size: ids.length,
+        query: {
+          bool: {
+            should: [
+              { terms: { hco_et_code: ids } },
+              { terms: { 'hco_et_code.keyword': ids } },
+            ],
+            minimum_should_match: 1,
+          },
+        },
+      },
+    });
+    const map = new Map(establishmentDocs.value);
+    for (const doc of res?.results || []) {
+      if (doc?.hco_et_code) map.set(String(doc.hco_et_code), doc);
+    }
+    establishmentDocs.value = map;
+  } finally {
+    isLoadingDocs.value = false;
+  }
+}
+
+watch(
+  () => props.locations.map((l) => l.finess),
+  (codes) => loadEstablishmentDocs(codes),
+  { immediate: true },
+);
+
+const searchText = ref('');
+const PAGE_SIZE = 20;
+const displayCount = ref(PAGE_SIZE);
+
+const filtered = computed(() => {
+  const q = normalize(searchText.value);
+  if (!q) return props.locations;
+  return props.locations.filter((l) =>
+    normalize([l.name, l.city, l.country, l.finess].filter(Boolean).join(' ')).includes(q),
+  );
+});
+
+const visible = computed(() => filtered.value.slice(0, displayCount.value));
+
+watch(searchText, () => {
+  displayCount.value = PAGE_SIZE;
+});
+</script>
+
+<style scoped>
+.load_more {
+  align-self: center;
+  justify-self: center;
+}
+</style>

package/layer/app/components/oip-science/establishments/MatchedLabels.vue

@@ -0,0 +1,194 @@
+<!--
+  Onglet Labels matches de la fiche etablissement (porte de la page
+  establishments/[id]/matched-labels de France Augmented Science). Dans FAS l'en-tete
+  chargeait le document (useState('current-establishment')) : l'onglet le relit lui-meme.
+  Le menu d'export de la carte (payload useGenerateExcel) est retire.
+-->
+<template>
+  <div class="oip-science">
+    <RmLoadingState v-if="isLoading" :lines="3" :chart-height="240" />
+    <RmTableCard v-if="!isLoading && establishment" :lang="lang">
+      <template #header>
+        <div>
+          <h3 class="rm-table-card__title">{{ $t('oipScience.common.matchedLabels') }}</h3>
+          <p class="rm-table-card__context">{{ uniqueRows.length }} {{ $t('oipScience.common.results') }}</p>
+          <OipScienceCommonSource :sources="['CT.gov', 'EUCT']" :lang="lang" />
+        </div>
+        <div class="match-stats">
+            <div class="match-stat">
+              <p class="match-stat-label">{{ $t('oipScience.common.matchedLabels') }}</p>
+              <p class="match-stat-value">{{ uniqueRows.length }}</p>
+            </div>
+            <div class="match-stat">
+              <p class="match-stat-label">Score moyen</p>
+              <p class="match-stat-value">
+                <span
+                  class="match-stat-pill"
+                  :class="avgScorePct >= 80 ? 'high' : 'low'"
+                >{{ avgScorePct }}%</span>
+              </p>
+          </div>
+        </div>
+      </template>
+      <RmTable :columns="table.columns" :rows="table.rows" search>
+        <template v-for="key in table.typeKeys.Source" :key="key" #[key]="{ value }">
+          <RmTag class="no-wrap" :variant="value === 'NCT' ? 'blue' : 'purple'">
+            {{ value === 'NCT' ? '🇺🇸 NCT' : '🇪🇺 EUCT' }}
+          </RmTag>
+        </template>
+        <template v-for="key in table.typeKeys.Score" :key="key" #[key]="{ value }">
+          <span
+            v-if="typeof value === 'number'"
+            class="score-badge"
+            :class="value >= 0.8 ? 'score-high' : 'score-low'"
+            :data-tooltip="$t('oipScience.common.matchingScoreTooltip')"
+          >{{ Math.round(value * 100) }}%</span>
+          <span v-else>-</span>
+        </template>
+      </RmTable>
+    </RmTableCard>
+    <RmEmptyState
+      v-if="!isLoading && establishment && uniqueRows.length === 0"
+      :title="$t('oipScience.common.noDataTitle')"
+      :text="$t('oipScience.common.noDataText')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import indexConfig from '../../../oip-science/indexConfig.json';
+import useOipElastic from '../../../oip-science/composables/useOipElastic';
+import { valueTable } from '../../../oip-science/utils/valueTable';
+import { formatMatchMethod } from '../../../oip-science/utils/matchMethod';
+
+const props = withDefaults(defineProps<{ id: string; highlight?: string[]; lang?: 'fr' | 'en' }>(), {
+  highlight: () => [],
+  lang: undefined,
+});
+
+const { t } = useI18n();
+const { queryOneElastic } = useOipElastic();
+
+const isLoading = ref(true);
+const establishment = ref<any>(null);
+
+async function load(urlId: string) {
+  isLoading.value = true;
+  establishment.value = null;
+  try {
+    establishment.value = await queryOneElastic({
+      index: indexConfig.establishments.index,
+      cluster: indexConfig.establishments.cluster,
+      path: 'hco_et_code',
+      id: urlId,
+    });
+  } catch (e) {
+    console.error(e);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(() => props.id, (id) => { if (id) load(id); }, { immediate: true });
+
+type Source = 'NCT' | 'EUCT';
+type Row = { name: string; source: Source; match_method: string | null; score: number };
+
+// Dedupe by (name, source). Keep highest score per unique pair.
+const uniqueRows = computed<Row[]>(() => {
+  const e = establishment.value;
+  if (!e) return [];
+  const byKey = new Map<string, Row>();
+  const collect = (entries: any[] | null | undefined, source: Source) => {
+    if (!Array.isArray(entries)) return;
+    for (const m of entries) {
+      if (!m?.name || typeof m?.score !== 'number') continue;
+      const key = `${source}|${m.name}`;
+      const existing = byKey.get(key);
+      if (!existing || (m.score ?? 0) > (existing.score ?? 0)) {
+        byKey.set(key, {
+          name: m.name,
+          source,
+          match_method: m.match_method ?? null,
+          score: m.score,
+        });
+      }
+    }
+  };
+  collect(e.nct_name, 'NCT');
+  collect(e.euct_name, 'EUCT');
+  return [...byKey.values()].sort((a, b) => (b.score ?? 0) - (a.score ?? 0));
+});
+
+const avgScorePct = computed(() => {
+  if (uniqueRows.value.length === 0) return 0;
+  const sum = uniqueRows.value.reduce((acc, r) => acc + (r.score || 0), 0);
+  return Math.round((sum / uniqueRows.value.length) * 100);
+});
+
+const getContent = computed(() =>
+  uniqueRows.value.map((r) => ({
+    values: [r.name, r.source, formatMatchMethod(r.match_method), r.score],
+  })),
+);
+
+const table = computed(() =>
+  valueTable(
+    [t('oipScience.common.name'), 'Source', t('oipScience.common.matchType'), t('oipScience.common.confidenceScore')],
+    getContent.value,
+    ['', 'Source', '', 'Score'],
+    { align: ['left', 'left', 'left', 'right'] },
+  ),
+);
+</script>
+
+<style scoped>
+.match-stats {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+.match-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+.match-stat-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.match-stat-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+.match-stat-pill {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+}
+.match-stat-pill.high {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+.match-stat-pill.low {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+}
+.score-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: help;
+}
+.score-high { background: var(--color-success-bg); color: var(--color-success); }
+.score-low { background: var(--color-warning-bg); color: var(--color-warning); }
+</style>

package/layer/app/components/oip-science/establishments/PublicFinance.vue

@@ -0,0 +1,62 @@
+<!--
+  Onglet Financements publics de la fiche etablissement (porte de la page
+  establishments/[id]/public-finance de France Augmented Science).
+-->
+<template>
+  <div class="oip-science oip_grid gap-24">
+    <div v-if="!isLoading && projects.length > 0" class="oip_grid gap-24">
+      <RmResultsLine icon="Coins" :items="[{ count: projects.length, label: $t('oipScience.resultKpis.projects', projects.length) }]" />
+      <div v-for="(item, index) in projects" :key="index">
+        <OipScienceAppelAProjetCards :data="item" :highlight="highlight" />
+      </div>
+    </div>
+    <RmLoadingState v-if="isLoading" :lines="3" :chart-height="240" />
+    <RmEmptyState
+      v-if="!isLoading && projects.length === 0"
+      :title="$t('oipScience.common.noDataTitle')"
+      :text="$t('oipScience.common.noDataText')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import indexConfig from '../../../oip-science/indexConfig.json';
+import useOipElastic from '../../../oip-science/composables/useOipElastic';
+
+const props = withDefaults(defineProps<{ id: string; highlight?: string[]; lang?: 'fr' | 'en' }>(), {
+  highlight: () => [],
+  lang: undefined,
+});
+
+const { queryElastic } = useOipElastic();
+
+const isLoading = ref(true);
+const projects = ref<any[]>([]);
+
+async function load(urlId: string) {
+  isLoading.value = true;
+  projects.value = [];
+  try {
+    const res = await queryElastic({
+      index: indexConfig.phrc.index,
+      take: 1000,
+      cluster: indexConfig.phrc.cluster,
+      customQuery: [
+        {
+          values: {
+            term: { hco_et_code: urlId },
+          },
+        },
+      ],
+    });
+
+    projects.value = res?.results || [];
+  } catch (e) {
+    console.error(e);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(() => props.id, (id) => { if (id) load(id); }, { immediate: true });
+</script>