@tekkare/romulus 0.1.251 → 0.1.253

package/layer/app/components/oip-drugs/fiches/BrandFiche.vue

@@ -0,0 +1,1111 @@
+<!--
+  Fiche marque HAS (portage de pages/hubr/heart/details/[id].vue de
+  fr_drugs_app).
+
+  Ce que la page lisait dans sa route arrive en props (`brand`, `tab`, `cis`,
+  `code`, `indication`) ; l'onglet choisi part par `update:tab` au lieu
+  d'ecrire `?tab=`. L'export et le bouton Projet restent dans la page de
+  fr_drugs_app, qui les pose dans le slot `actions` (le slot recoit les donnees
+  de la fiche) ; dans le tiroir d'un projet, rien n'y est passe.
+-->
+<template>
+  <div class="oip-drugs arg_page_layout">
+    <RmPageHeader
+      :have-return="haveReturn"
+      :tabs="headerTabs"
+      :tabs-label="locale === 'en' ? 'Record sections' : 'Sections de la fiche'"
+      @tab="selectTab"
+    >
+      <template #title>
+        <span class="oip-drugs-brand__title">{{ title }}</span>
+        <slot name="title-link" />
+      </template>
+      <template v-if="$slots.actions" #actions>
+        <slot
+          name="actions"
+          :product="resultsQuery"
+          :brand-id="brandId"
+          :brand="title"
+          :tab="currentTabKey"
+          :tab-label="currentTabLabel"
+          :tabs="availableTabs"
+          :prices="resultsQueryPrice"
+          :intl-prices="resultsQueryIntlPrice"
+          :intl-records="intlRecords"
+          :ansm="resultsQueryAnsm"
+          :mitm="resultsQueryMitm"
+          :put="resultsQueryPut"
+          :les="resultsQueryLes"
+        />
+      </template>
+    </RmPageHeader>
+
+    <RmLoadingState v-if="showLoading" class="oip-drugs-brand__state" :lines="6" />
+    <RmEmptyState
+      v-else-if="showEmpty"
+      class="oip-drugs-brand__state"
+      icon="Pill"
+      :title="locale === 'en' ? 'No record for this brand' : 'Aucune fiche pour cette marque'"
+      :text="brandMatch"
+    />
+
+    <div
+      v-else-if="chosenTab === monographTabIndex && monographId"
+      class="arg_page_layout mono-bleed"
+    >
+      <OipDrugsHeartResultsDetailsMonograph :id="monographId!" :pdf="monographPdf" />
+    </div>
+    <div v-else-if="chosenTab === overviewTabIndex" class="arg_page_layout">
+      <!-- Historique complet en cartes, groupees par annee ; le detail d'un
+           avis s'ouvre dans un tiroir plutot que sous la liste. -->
+      <OipDrugsHeartResultsDetailsHasHistory
+        v-if="resultsQuery !== null"
+        :product="resultsQuery"
+        :matched-codes="brandMatches.matchedCodes.value"
+        :search-terms="searchTerms"
+        @select="drawerOpinion = $event"
+      />
+
+      <!-- Le tiroir a son propre etat : il ne s'ouvre que sur un avis choisi
+           dans la liste, jamais des l'arrivee sur l'onglet. -->
+      <OipDrugsHeartResultsDetailsOpinionDrawer
+        :opinion="drawerOpinion"
+        :checked-at="hasCheckedAt"
+        :search-terms="searchTerms"
+        @close="drawerOpinion = null"
+      />
+    </div>
+    <div v-else-if="chosenTab === alertTabIndex && alertTabIndex > 0" class="arg_page_layout">
+      <OipDrugsHeartResultsDetailsRecordList
+        :title="locale === 'en' ? 'Safety alerts' : 'Alertes de sécurité'"
+        :subtitle="locale === 'en' ? 'alerts recorded for the brand' : 'alertes recensées pour la marque'"
+        :items="alertRecords"
+        :empty-label="locale === 'en' ? 'No safety alerts for this product.' : 'Aucune alerte de sécurité pour ce produit.'"
+        @select="drawerRecord = $event"
+      />
+    </div>
+    <div v-else-if="chosenTab === priceTabIndex && priceTabIndex > 0" class="arg_page_layout">
+      <OipDrugsHeartResultsDetailsPriceOverview
+        :product="resultsQueryPrice"
+        :brand="title"
+      />
+    </div>
+    <div
+      v-else-if="chosenTab === internationalTabIndex && internationalTabIndex > 0"
+      class="arg_page_layout"
+    >
+      <OipDrugsHeartResultsDetailsInternationalOverview
+        :docs="resultsQueryIntlPrice"
+        :records="intlRecords"
+        :loading="intlLoading"
+        :brand="title"
+      />
+    </div>
+    <div v-else-if="chosenTab === ansmTabIndex && ansmTabIndex > 0" class="arg_page_layout">
+      <div v-if="resultsQueryAnsm.length > 1" class="cis-switch">
+        <span class="oip_filter_label cis-switch-label">
+          {{ locale === 'en' ? 'Specialty (CIS):' : 'Spécialité (CIS) :' }}
+        </span>
+        <button
+          v-for="(h, i) in resultsQueryAnsm"
+          :key="h._id"
+          type="button"
+          class="cis-chip"
+          :class="{ active: i === selectedAnsmIndex }"
+          @click="selectedAnsmIndex = i"
+        >
+          {{ heartStripBrandPrefix(h._source.cis_label, brandMatch) }}
+        </button>
+      </div>
+      <OipDrugsHeartAnsmCisDetail
+        v-if="selectedAnsmCis"
+        :cis="selectedAnsmCis"
+        :sku-count="resultsQueryAnsm.length"
+        :avis-count="overviewHistory.length"
+      />
+    </div>
+    <div v-else-if="chosenTab === mitmTabIndex && mitmTabIndex > 0" class="arg_page_layout">
+      <div v-if="resultsQueryMitm.length > 1" class="cis-switch">
+        <span class="oip_filter_label cis-switch-label">
+          {{ locale === 'en' ? 'Specialty (CIS):' : 'Spécialité (CIS) :' }}
+        </span>
+        <button
+          v-for="(m, i) in resultsQueryMitm"
+          :key="m._id"
+          type="button"
+          class="cis-chip"
+          :class="{ active: i === selectedMitmIndex }"
+          @click="selectedMitmIndex = i"
+        >
+          {{ heartStripBrandPrefix(m._source.cis_label, brandMatch) }}
+        </button>
+      </div>
+      <OipDrugsHeartMitmDetailsOverview
+        v-if="selectedMitmCis"
+        :cis="selectedMitmCis"
+        @select="drawerRecord = $event"
+      />
+    </div>
+    <div v-else-if="chosenTab === putTabIndex && putTabIndex > 0" class="arg_page_layout">
+      <OipDrugsHeartResultsDetailsRecordList
+        :title="locale === 'en' ? 'Temporary use protocols' : 'Protocoles d’utilisation thérapeutique'"
+        :subtitle="locale === 'en' ? 'protocols recorded for the brand' : 'protocoles recensés pour la marque'"
+        :items="putRecords"
+        :empty-label="locale === 'en' ? 'No protocol for this product.' : 'Aucun protocole pour ce produit.'"
+        @select="drawerRecord = $event"
+      />
+    </div>
+    <div v-else-if="chosenTab === lesTabIndex && lesTabIndex > 0" class="arg_page_layout">
+      <OipDrugsHeartResultsDetailsRecordList
+        :title="locale === 'en' ? 'Liste en sus indications' : 'Indications en liste en sus'"
+        :subtitle="locale === 'en' ? 'indications recorded for the brand' : 'indications recensées pour la marque'"
+        :items="lesRecords"
+        :empty-label="locale === 'en' ? 'No liste en sus indication for this product.' : 'Aucune indication en liste en sus pour ce produit.'"
+        @select="drawerLes = $event"
+      />
+    </div>
+    <div
+      v-else-if="chosenTab === contributionsTabIndex && contributionsTabIndex > 0"
+      class="arg_page_layout"
+    >
+      <OipDrugsHeartResultsDetailsRecordList
+        :title="locale === 'en' ? 'Patient contributions' : 'Contributions patients'"
+        :subtitle="locale === 'en' ? 'contributions recorded for the brand' : 'contributions recensées pour la marque'"
+        :items="contributionRecords"
+        :empty-label="locale === 'en' ? 'No patient contribution.' : 'Aucune contribution patient.'"
+        @select="drawerRecord = $event"
+      />
+    </div>
+
+    <!-- Tiroir commun aux onglets Alertes, PUT et Contributions : un seul est
+         visible a la fois, il suit l'enregistrement choisi. -->
+    <OipDrugsHeartResultsDetailsRecordDrawer
+      :record="drawerRecord"
+      :source-label="drawerRecord?.sourceLabel"
+      :checked-at="hasCheckedAt"
+      @close="drawerRecord = null"
+    />
+
+    <!-- Tiroir de l'onglet LES : le detail de l'indication, tel que le montre
+         la page indication/[id]. -->
+    <OipDrugsHeartResultsLesDrawer
+      :code="drawerLes?.code ?? null"
+      :title="drawerLes?.title"
+      :date="drawerLes?.date"
+      @close="drawerLes = null"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ES_INDEX } from "../../../oip-drugs/esIndices";
+import useOipDrugsElastic from "../../../oip-drugs/composables/useOipDrugsElastic";
+import useDirectusSources from "../../../oip-drugs/composables/useDirectusSources";
+import { useAssociationLookup } from "../../../oip-drugs/composables/useAssociationLookup";
+import useHeartIntlApprovals from "../../../oip-drugs/composables/useHeartIntlApprovals";
+import useHeartBrandMatches from "../../../oip-drugs/composables/useHeartBrandMatches";
+import { HEART_LES_INDEX } from "../../../oip-drugs/composables/useHeartLesIndication";
+import { HEART_SOURCE_UUIDS } from "../../../oip-drugs/utils/sourceUuids";
+import { HEART_INTL_PRICE_COUNTRIES } from "../../../oip-drugs/utils/heartIntlPrice";
+import { heartFixMojibake } from "../../../oip-drugs/utils/heartStyleAndFormat";
+import { heartStripBrandPrefix } from "../../../oip-drugs/utils/heartStyleAnsm";
+import { drugsAssociationPath } from "../../../oip-drugs/kinds";
+import { OIP_RESOURCE_NAV } from "../../../composables/useOipResourceNav";
+
+const props = withDefaults(
+  defineProps<{
+    /** La marque (brand_group HAS), ex `route.params.id`. */
+    brand: string;
+    /** Cle d'onglet demandee (ex `?tab=`), alias francais acceptes. */
+    tab?: string;
+    /** CIS preselectionne dans ANSM (`_id`) ou MITM (`cis_code`), ex `?cis=`. */
+    cis?: string;
+    /** Code HAS (ex `?code=`). Garde pour le contrat : rien ne le relisait. */
+    code?: string;
+    /** Indication LES a ouvrir dans son tiroir (avec `tab=les`), ex `?indication=`. */
+    indication?: string;
+    lang?: "fr" | "en";
+    /** Termes de recherche a surligner. */
+    highlight?: string[];
+    /** Fleche de retour du bandeau (page de fr_drugs_app). */
+    haveReturn?: boolean;
+  }>(),
+  {
+    tab: "",
+    cis: "",
+    code: "",
+    indication: "",
+    lang: undefined,
+    highlight: () => [],
+    haveReturn: false,
+  },
+);
+
+const emit = defineEmits<{ "update:tab": [key: string] }>();
+
+const { queryCustomElastic } = useOipDrugsElastic();
+const { locale: i18nLocale, t } = useI18n();
+const locale = computed<"fr" | "en">(() => props.lang ?? (i18nLocale.value === "en" ? "en" : "fr"));
+
+const resultsQuery = ref(null as any);
+/** `_id` ES de la marque, ce que le bouton « Projet » range. */
+const brandId = ref<string | null>(null);
+const resultsQueryAnsm = ref<Array<{ _id: string; _source: any }>>([]);
+const resultsQueryMitm = ref<Array<{ _id: string; _source: any }>>([]);
+const resultsQueryPut = ref<Array<{ _id: string; _source: any }>>([]);
+const resultsQueryLes = ref<any[]>([]);
+const indexQuery = ES_INDEX.BRAND_HAS;
+const isLoadingQuery = ref(true);
+/** Les sections secondaires (prix, ANSM, MITM...) sont-elles encore en route ? */
+const isLoadingSecondary = ref(true);
+
+// La marque telle que le lien la porte (cf. drugsBrandPath). Les liens
+// partages avant heartBrandPath ecrivaient « / » en « + » : `lanchQuery` se
+// replie sur cette ecriture si la HAS ne connait pas la marque telle quelle.
+const brandMatch = ref(String(props.brand ?? ""));
+
+const title = computed(() => resultsQuery.value?.brand_group || brandMatch.value);
+
+const hasAlerts = computed(() => {
+  return resultsQuery.value?.brand_history?.some(
+    (h: any) => h.document_type === 'alert' && h.alert_details?.length > 0
+  ) ?? false;
+});
+
+const alertHistory = computed(() => {
+  if (!resultsQuery.value?.brand_history) return [];
+  return resultsQuery.value.brand_history
+    .filter((h: any) => h.document_type === 'alert' && h.alert_details?.length > 0)
+    .sort((a: any, b: any) =>
+      new Date(b.security_end_date).getTime() - new Date(a.security_end_date).getTime()
+    );
+});
+
+const overviewHistory = computed(() => {
+  if (!resultsQuery.value?.brand_history) return [];
+  return resultsQuery.value.brand_history.filter(
+    (h: any) => h.document_type !== 'alert'
+  );
+});
+
+const hasContributions = computed(
+  () => (resultsQuery.value?.patient_contribution?.length ?? 0) > 0
+);
+
+// Monographie : si le produit dispose d'une note d'intelligence HAS, on ajoute
+// un onglet "Monographie" EN PREMIER.
+const MONOGRAPH_BRANDS = [
+  'blincyto', 'darzalex', 'dupixent', 'enhertu', 'ibrance', 'imfinzi', 'keytruda',
+  'kisqali', 'opdivo', 'ozempic', 'tecentriq', 'yescarta',
+];
+const monographId = computed(() => {
+  const bg = (resultsQuery.value?.brand_group || '').toLowerCase();
+  const brand = MONOGRAPH_BRANDS.find((b) => bg.includes(b));
+  return brand ? `${brand}-has` : null;
+});
+const hasMonograph = computed(() => monographId.value !== null);
+const monographPdf = computed(() =>
+  monographId.value ? `/reports/${monographId.value}.pdf` : null
+);
+
+// Prix France, prix internationaux et registres etrangers : declares avant la
+// liste des onglets, qui les lit.
+const resultsQueryPrice = ref<any[]>([]);
+const resultsQueryIntlPrice = ref<any[]>([]);
+const { records: intlRecords, isLoading: intlLoading, load: loadIntlApprovals } =
+  useHeartIntlApprovals();
+const intlDecisionCount = computed(() =>
+  Object.values(intlRecords.value as Record<string, any[]>).reduce((sum, list) => sum + list.length, 0),
+);
+
+// Onglets disponibles (l'ordre = l'ordre d'affichage). La MARQUE est le pivot :
+// HAS n'apparait que s'il existe un avis, ANSM que s'il existe des CIS, etc.
+const availableTabs = computed(() => {
+  const en = locale.value === 'en';
+  const tabs: { key: string; label: string }[] = [];
+  if (hasMonograph.value) tabs.push({ key: 'monograph', label: en ? 'Monograph' : 'Monographie' });
+  if (resultsQuery.value) tabs.push({ key: 'overview', label: 'HAS' });
+  if (hasContributions.value) tabs.push({ key: 'contributions', label: en ? 'Patient Contribution' : 'Contribution Patient' });
+  if (resultsQueryPrice.value.length > 0) tabs.push({ key: 'price', label: t('oipDrugs.heart.details.tabs.price') });
+  if (resultsQueryIntlPrice.value.length > 0 || intlDecisionCount.value > 0) tabs.push({ key: 'international', label: en ? 'International view' : 'Regard international' });
+  if (resultsQueryAnsm.value.length > 0) tabs.push({ key: 'ansm', label: 'ANSM' });
+  if (resultsQueryMitm.value.length > 0) tabs.push({ key: 'mitm', label: 'MITM' });
+  if (resultsQueryPut.value.length > 0) tabs.push({ key: 'put', label: 'PUT' });
+  if (resultsQueryLes.value.length > 0) tabs.push({ key: 'les', label: 'LES' });
+  // Les alertes ferment la liste : elles completent la fiche, elles ne la
+  // presentent pas.
+  if (hasAlerts.value) tabs.push({ key: 'alerts', label: en ? 'Safety Alerts' : 'Alertes' });
+  return tabs;
+});
+
+const chosenTab = ref(1);
+
+// Onglets du bandeau : RmPageHeader travaille sur des cles, la fiche garde son
+// indice a partir de 1 pour choisir le bloc rendu.
+const headerTabs = computed(() =>
+  availableTabs.value.map((tb, index) => ({
+    key: tb.key,
+    label: tb.label,
+    active: chosenTab.value === index + 1,
+  })),
+);
+
+function selectTab(key: string) {
+  const index = availableTabs.value.findIndex((tb) => tb.key === key);
+  if (index >= 0) chosenTab.value = index + 1;
+}
+
+/** Ecritures francaises acceptees dans `tab`, pour les liens partages. */
+const TAB_ALIASES: Record<string, string> = {
+  prix: 'price',
+  alertes: 'alerts',
+  monographie: 'monograph',
+  contributions_patients: 'contributions',
+  avis: 'overview',
+  has: 'overview',
+  liste_en_sus: 'les',
+  regard_international: 'international',
+  prix_internationaux: 'international',
+};
+
+const normalizeTab = (rawKey: string) => TAB_ALIASES[String(rawKey).toLowerCase()] ?? rawKey;
+
+// Les onglets sont numerotes a partir de 1 (le 1er onglet = 1) ; 0 = onglet absent.
+const tabIndexOf = (rawKey: string) => {
+  const key = normalizeTab(rawKey);
+  const i = availableTabs.value.findIndex((tb) => tb.key === key);
+  return i === -1 ? 0 : i + 1;
+};
+
+const monographTabIndex = computed(() => tabIndexOf('monograph'));
+const overviewTabIndex = computed(() => tabIndexOf('overview'));
+const contributionsTabIndex = computed(() => tabIndexOf('contributions'));
+const alertTabIndex = computed(() => tabIndexOf('alerts'));
+const priceTabIndex = computed(() => tabIndexOf('price'));
+const internationalTabIndex = computed(() => tabIndexOf('international'));
+const ansmTabIndex = computed(() => tabIndexOf('ansm'));
+const mitmTabIndex = computed(() => tabIndexOf('mitm'));
+const putTabIndex = computed(() => tabIndexOf('put'));
+const lesTabIndex = computed(() => tabIndexOf('les'));
+
+/** L'onglet ouvert, par sa cle et son libelle. */
+const currentTabKey = computed(() => availableTabs.value[chosenTab.value - 1]?.key ?? null);
+const currentTabLabel = computed(() => availableTabs.value[chosenTab.value - 1]?.label ?? "");
+
+/** Chargement : tant que la HAS n'a pas repondu, ou qu'aucun onglet n'est encore la. */
+const showLoading = computed(
+  () => isLoadingQuery.value || (isLoadingSecondary.value && availableTabs.value.length === 0),
+);
+/** Aucune section pour cette marque, une fois tout charge. */
+const showEmpty = computed(() => !showLoading.value && availableTabs.value.length === 0);
+
+// CIS selectionne dans l'onglet ANSM (selecteur de specialites de la marque).
+const selectedAnsmIndex = ref(0);
+const selectedAnsmCis = computed(
+  () => resultsQueryAnsm.value[selectedAnsmIndex.value]?._source ?? null
+);
+
+// CIS selectionne dans l'onglet MITM.
+const selectedMitmIndex = ref(0);
+const selectedMitmCis = computed(
+  () => resultsQueryMitm.value[selectedMitmIndex.value]?._source ?? null
+);
+
+/** Avis ouvert dans le tiroir de l'onglet HAS. */
+const drawerOpinion = ref<any>(null);
+
+/**
+ * Libelles et dates de source des tiroirs : Directus, comme le panneau
+ * « Sources » du rail.
+ */
+const { load: loadSourceMeta, metaByUuid, verifiedRaw } = useDirectusSources();
+loadSourceMeta(Object.values(HEART_SOURCE_UUIDS));
+const sourceName = (uuid: string) => metaByUuid(uuid, locale.value).name;
+
+/** Date de derniere verification de la source HAS, montree en pied de tiroir. */
+const hasCheckedAt = computed(() => verifiedRaw(HEART_SOURCE_UUIDS.HAS));
+
+/** Enregistrement ouvert dans le tiroir des onglets Alertes, PUT et Contributions. */
+const drawerRecord = ref<any>(null);
+
+/** Indication LES ouverte dans son tiroir (code, titre, date de la liste). */
+const drawerLes = ref<any>(null);
+
+/** Premiere valeur remplie ; a defaut de traduction on garde le francais. */
+function pickText(...values: any[]) {
+  for (const value of values) {
+    if (typeof value === "string" && value.trim()) return heartFixMojibake(value.trim());
+  }
+  return "";
+}
+
+/** Une alerte par code CIS, comme le detail d'alerte le faisait deja. */
+const alertRecords = computed(() =>
+  alertHistory.value.flatMap((entry: any, entryIndex: number) => {
+    const codes = [...new Set((entry.alert_details ?? []).map((a: any) => a.cis_code))];
+    return codes.map((code) => {
+      const details = (entry.alert_details ?? []).filter((a: any) => a.cis_code === code);
+      const first = details[0] ?? {};
+      const message = pickText(
+        locale.value === "en" ? first.display_message_en : first.display_message,
+        first.display_message,
+        first.display_message_en
+      );
+      const brands = [...new Set(details.map((a: any) => a.brand).filter(Boolean))].join(", ");
+      return {
+        // Deux alertes d'un meme avis peuvent viser le meme CIS : l'indice
+        // de l'entree garde la cle unique.
+        key: `${entry.has_code || entry.opinion_id || ""}-${entryIndex}-${code}`,
+        typeLabel: locale.value === "en" ? "Safety alert" : "Alerte de sécurité",
+        icon: "Warning",
+        date: entry.security_end_date || null,
+        ref: code ? `CIS ${code}` : null,
+        url: first.url_link || null,
+        title: message || (locale.value === "en" ? "Safety alert" : "Alerte de sécurité"),
+        excerpt: brands || null,
+        sourceLabel: sourceName(HEART_SOURCE_UUIDS.ANSM),
+        sections: [
+          { key: "message", label: "Message", body: message },
+          {
+            key: "brands",
+            label: locale.value === "en" ? "Brands concerned" : "Spécialités concernées",
+            body: brands,
+          },
+        ],
+      };
+    });
+  })
+);
+
+/** Pre-AMM ou post-AMM, accents et langue mis de cote. */
+function aapTone(label: string) {
+  const value = (label || "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+  if (value.includes("pre")) return "pre" as const;
+  if (value.includes("post")) return "post" as const;
+  return "neutral" as const;
+}
+
+/** Statut d'un P.U.T : « en cours » se lit comme une bonne nouvelle. */
+function putTone(status: string): "good" | "neutral" {
+  const value = (status || "").toLowerCase();
+  if (value.includes("en cours") || value.includes("ongoing")) return "good";
+  return "neutral";
+}
+
+const putRecords = computed(() =>
+  (resultsQueryPut.value ?? []).map((hit: any) => {
+    const put = hit._source ?? {};
+    const english = locale.value === "en";
+    const status = pickText(english ? put.status_en : put.status_fr, put.status_fr);
+    const indication = pickText(
+      english ? put.indication_en : put.indication_fr,
+      put.indication_fr
+    );
+    const objective = pickText(
+      english ? put.objective_en : put.objective_fr,
+      put.objective_fr
+    );
+    const efficacy = pickText(
+      english ? put.efficacy_precision_en : put.efficacy_precision_fr,
+      put.efficacy_precision_fr
+    );
+    const periodicity = pickText(
+      english ? put.put_periodicity_en : put.put_periodicity_fr,
+      put.put_periodicity_fr
+    );
+    const aapType = pickText(english ? put.aap_type_en : put.aap_type_fr, put.aap_type_fr);
+    const area = pickText(
+      english ? put.therapeutic_area_en : put.therapeutic_area_fr,
+      put.therapeutic_area_fr
+    );
+    const links = [...(put.tekkare_doc_links ?? []), ...(put.tekkare_pdf_links ?? [])];
+
+    return {
+      key: hit._id,
+      typeLabel: "P.U.T",
+      icon: "ClipboardText",
+      date: put.authorization_date || null,
+      badge: aapType || null,
+      badgeTone: aapTone(aapType),
+      url: links[0] || null,
+      title: pickText(put.specialty_dci) || "P.U.T",
+      excerpt: objective || indication || null,
+      status: status || null,
+      statusTone: putTone(status),
+      sourceLabel: sourceName(HEART_SOURCE_UUIDS.HAS),
+      sections: [
+        { key: "objective", label: t("oipDrugs.heart.put.card.objectives"), body: objective },
+        { key: "indication", label: t("oipDrugs.heart.put.card.indication"), body: indication },
+        { key: "efficacy", label: t("oipDrugs.heart.put.card.efficacy"), body: efficacy },
+        {
+          key: "context",
+          label: english ? "Framework" : "Cadre",
+          body: [
+            periodicity && `${t("oipDrugs.heart.put.card.periodicity")} : ${periodicity}`,
+            aapType && `${t("oipDrugs.heart.put.card.aapType")} : ${aapType}`,
+            area && `${english ? "Therapeutic area" : "Aire thérapeutique"} : ${area}`,
+          ]
+            .filter(Boolean)
+            .join("\n"),
+        },
+      ],
+    };
+  })
+);
+
+/**
+ * Indications en liste en sus de la marque : une entree par code d'indication,
+ * les lignes produit rassemblees dessous. La date est la plus recente
+ * inscription ; le tiroir montre ensuite le detail complet du code.
+ */
+const lesRecords = computed(() => {
+  const byCode = new Map<string, any[]>();
+  for (const row of resultsQueryLes.value) {
+    if (!row?.indication) continue;
+    if (!byCode.has(row.indication)) byCode.set(row.indication, []);
+    byCode.get(row.indication)!.push(row);
+  }
+  return [...byCode.entries()]
+    .map(([code, rows]) => {
+      const label: string = rows[0].indication_label_fr || "";
+      const dates = rows.map((r) => r.start_date).filter(Boolean).sort();
+      const products = [...new Set(rows.map((r) => r.french_label).filter(Boolean))];
+      // « OUI » seul ne dit rien : on garde la question qu'il resout.
+      const flagged = rows.find((r) => r.statut);
+      const status = flagged
+        ? [flagged.statut_title, flagged.statut].filter(Boolean).join(" : ")
+        : null;
+      return {
+        key: code,
+        code,
+        typeLabel: "Liste en sus",
+        icon: "ListChecks",
+        date: dates[dates.length - 1] ?? null,
+        ref: code,
+        badge: rows[0].source || null,
+        title: label ? label.charAt(0) + label.slice(1).toLowerCase() : `Indication ${code}`,
+        excerpt: products.join(", ") || null,
+        status,
+        sourceLabel: sourceName(HEART_SOURCE_UUIDS.LES),
+      };
+    })
+    .sort((a, b) => new Date(b.date || 0).getTime() - new Date(a.date || 0).getTime());
+});
+
+/** Rubriques d'une contribution, dans l'ordre de la fiche d'origine. */
+const CONTRIBUTION_FIELDS = [
+  { field: "drug_indication", label: "indication" },
+  { field: "synthesis", label: "synthesis" },
+  { field: "impact", label: "impact" },
+  { field: "method", label: "method" },
+  { field: "experience_drug", label: "experienceDrug" },
+  { field: "experience_current_treatment", label: "experienceCurrent" },
+  { field: "additional_info", label: "additional" },
+];
+
+/**
+ * La fiche de l'association qui signe chaque contribution. Le renvoi
+ * n'apparait qu'une fois l'association reconnue (cf. useAssociationLookup).
+ */
+const { load: loadAssociations, idFor: associationIdFor } = useAssociationLookup();
+
+watch(
+  () => resultsQuery.value?.patient_contribution,
+  (contributions: any[] | undefined) => {
+    if (!contributions?.length) return;
+    loadAssociations(
+      contributions.flatMap((contribution: any) => [
+        contribution?.association_label_regroup,
+        contribution?.association_label,
+      ]),
+    );
+  },
+  { immediate: true },
+);
+
+const contributionRecords = computed(() =>
+  [...(resultsQuery.value?.patient_contribution ?? [])]
+    .sort(
+      (a: any, b: any) =>
+        new Date(b.contribution_date).getTime() - new Date(a.contribution_date).getTime()
+    )
+    .map((contribution: any, index: number) => {
+      const regroup = contribution.association_label_regroup || contribution.association_label;
+      const original =
+        contribution.association_label &&
+        contribution.association_label_regroup &&
+        contribution.association_label !== contribution.association_label_regroup
+          ? contribution.association_label
+          : null;
+
+      const associationId = associationIdFor(regroup, contribution.association_label);
+
+      return {
+        key: contribution.has_code ? `${contribution.has_code}-${index}` : String(index),
+        typeLabel: locale.value === "en" ? "Patient contribution" : "Contribution patient",
+        // `to` : chemin de fr_drugs_app, suivi par useOipResourceNav dans le tiroir.
+        link: associationId
+          ? {
+              label: t("oipDrugs.heart.details.patientContrib.seeAssociation"),
+              to: drugsAssociationPath(associationId),
+              icon: "UsersThree",
+            }
+          : null,
+        // Sept rubriques : en onglets elles debordaient sur trois lignes.
+        layout: "accordion" as const,
+        icon: "Users",
+        date: contribution.contribution_date || null,
+        ref: contribution.request_nature || null,
+        url: contribution.contribution_url || null,
+        title: regroup || "-",
+        excerpt: pickText(contribution.synthesis) || original,
+        sourceLabel: sourceName(HEART_SOURCE_UUIDS.HAS),
+        sections: CONTRIBUTION_FIELDS.map((section) => ({
+          key: section.field,
+          label: t(`oipDrugs.heart.details.patientContrib.${section.label}`),
+          body: pickText(contribution[section.field]),
+        })),
+      };
+    })
+);
+
+// Pour eviter les bugs lors de la navigation : une reponse d'une marque
+// precedente (ou d'une fiche demontee) ne s'ecrit pas.
+const isMounted = ref(false);
+let generation = 0;
+const live = (gen: number) => isMounted.value && gen === generation;
+
+watch(
+  () => chosenTab.value,
+  (val) => {
+    // Changer d'onglet ferme le tiroir : sinon le detail d'une alerte reste
+    // ouvert par-dessus l'onglet suivant.
+    drawerRecord.value = null;
+    // L'onglet ouvert remonte a l'appelant (ex `?tab=` de la page).
+    const key = availableTabs.value[val - 1]?.key;
+    if (isMounted.value && key && normalizeTab(props.tab) !== key) {
+      emit("update:tab", key);
+    }
+  }
+);
+
+// L'appelant change l'onglet (retour arriere de la page, lien interne...).
+watch(
+  () => props.tab,
+  (key) => {
+    if (!key || isLoadingQuery.value) return;
+    const index = tabIndexOf(key);
+    if (index > 0 && index !== chosenTab.value) chosenTab.value = index;
+  }
+);
+
+// `and` sur tous les mots, et l'ecriture exacte remontee en tete : avec un
+// seul resultat, « KEYTRUDA » ne doit pas ramener une marque voisine.
+const customQuery = (brand: string) => ({
+  from: 0,
+  query: {
+    bool: {
+      must: [{ match: { brand_group: { query: brand, operator: "and" } } }],
+      should: [{ term: { "brand_group.keyword": brand } }],
+    },
+  },
+  size: 1,
+});
+
+const lanchQuery = async (gen: number) => {
+  if (!live(gen)) return;
+
+  isLoadingQuery.value = true;
+  // Reponse entiere (`allAnswer`) plutot que `onlyOne` : le bouton « Projet »
+  // range la fiche par son `_id`, que `onlyOne` ne rend pas.
+  const fetchBrand = (brand: string) =>
+    queryCustomElastic({
+      index: indexQuery,
+      customQuery: customQuery(brand),
+      allAnswer: true,
+    })
+      .then((r: any) => r?.hits?.hits?.[0] ?? null)
+      .catch((error) => {
+        console.error('Error fetching data:', error);
+        return null;
+      });
+
+  let hit = await fetchBrand(brandMatch.value);
+  // Repli pour les liens partages avant heartBrandPath (« / » ecrit « + »).
+  if (!hit?._source?.brand_group && brandMatch.value.includes(" + ")) {
+    const legacy = brandMatch.value.replace(" + ", " / ");
+    hit = await fetchBrand(legacy);
+    if (hit?._source?.brand_group && live(gen)) brandMatch.value = legacy;
+  }
+  // Sur erreur ES le composable rend un objet vide : sans `brand_group`, ce
+  // n'est pas une fiche, on ne l'affiche pas.
+  if (hit?._source?.brand_group && live(gen)) {
+    resultsQuery.value = hit._source;
+    brandId.value = hit._id;
+  }
+  if (live(gen)) {
+    isLoadingQuery.value = false;
+  }
+};
+
+// Les requetes secondaires lisent `brandMatch` au lancement, pas a la
+// declaration : le repli de `lanchQuery` a pu le changer entre-temps.
+const customQueryPrices = () => ({
+  from: 0,
+  _source: [],
+  query: {
+    bool: {
+      must: [{ term: { "brand.keyword": brandMatch.value } }],
+    },
+  },
+  size: 100,
+  track_total_hits: true,
+});
+
+const launchQueryPrices = async (gen: number) => {
+  if (!live(gen)) return;
+  await queryCustomElastic({
+    index: ES_INDEX.DRUG_CARDS,
+    customQuery: customQueryPrices(),
+  }).then((res) => {
+    if (res && res.results && res.results.length > 0 && live(gen)) {
+      resultsQueryPrice.value = res.results;
+    }
+  }).catch((error) => {
+    console.error('Error fetching prices:', error);
+  });
+};
+
+// Suivi mondial des prix : ce que les autres pays publient pour la marque.
+// Le prefixe rattrape les declinaisons de gamme (« KEYTRUDA QLEX »).
+const launchQueryIntlPrice = async (gen: number) => {
+  if (!live(gen)) return;
+  const res = await queryCustomElastic({
+    index: ES_INDEX.WW_PRICE_TRACKER,
+    customQuery: {
+      from: 0,
+      query: {
+        bool: {
+          should: [
+            { term: { "brand.keyword": brandMatch.value } },
+            { prefix: { "brand.keyword": `${brandMatch.value} ` } },
+          ],
+          minimum_should_match: 1,
+          // Le perimetre des pays est filtre ici, pas seulement a l'affichage.
+          filter: [
+            { terms: { "country.country_iso_2.keyword": HEART_INTL_PRICE_COUNTRIES } },
+          ],
+        },
+      },
+      size: 200,
+      track_total_hits: true,
+    } as any,
+  }).catch((error) => {
+    console.error("Error fetching international prices:", error);
+    return null;
+  });
+  if (res?.results && live(gen)) {
+    resultsQueryIntlPrice.value = res.results;
+  }
+};
+
+// ANSM (autorisation) : toutes les specialites CIS de la marque.
+const customQueryAnsm = () => ({
+  from: 0,
+  query: { bool: { must: [{ term: { "brand.keyword": brandMatch.value } }] } },
+  size: 200,
+  sort: [{ authorization_date: { order: "desc", missing: "_last" } }],
+  track_total_hits: true,
+});
+const launchQueryAnsm = async (gen: number) => {
+  if (!live(gen)) return;
+  const res = await queryCustomElastic({
+    index: ES_INDEX.CIS_ANSM,
+    customQuery: customQueryAnsm() as any,
+    allAnswer: true,
+  }).catch((error) => {
+    console.error("Error fetching ANSM:", error);
+    return null;
+  });
+  if (res?.hits?.hits && live(gen)) {
+    resultsQueryAnsm.value = res.hits.hits;
+  }
+};
+
+// MITM (liste des medicaments d'interet therapeutique majeur) de la marque.
+const customQueryMitm = () => ({
+  from: 0,
+  query: { bool: { must: [{ term: { "brand.keyword": brandMatch.value } }] } },
+  size: 200,
+  track_total_hits: true,
+});
+const launchQueryMitm = async (gen: number) => {
+  if (!live(gen)) return;
+  const res = await queryCustomElastic({
+    index: ES_INDEX.MITM_BDPM,
+    customQuery: customQueryMitm(),
+    allAnswer: true,
+  }).catch((error) => {
+    console.error("Error fetching MITM:", error);
+    return null;
+  });
+  if (res?.hits?.hits && live(gen)) {
+    // Deduplication par cis_code (plusieurs snapshots du meme CIS) : on garde
+    // le plus recent via @timestamp.
+    const byCis = new Map<string, any>();
+    for (const h of res.hits.hits) {
+      const key = h._source?.cis_code ?? h._id;
+      const existing = byCis.get(key);
+      if (
+        !existing ||
+        new Date(h._source?.["@timestamp"] || 0).getTime() >
+          new Date(existing._source?.["@timestamp"] || 0).getTime()
+      ) {
+        byCis.set(key, h);
+      }
+    }
+    resultsQueryMitm.value = [...byCis.values()];
+  }
+};
+
+// PUT (protocoles d'utilisation therapeutique / acces precoce) de la marque.
+const customQueryPut = () => ({
+  from: 0,
+  query: { bool: { must: [{ term: { "brand.keyword": brandMatch.value } }] } },
+  size: 200,
+  sort: [{ authorization_date: { order: "desc", missing: "_last" } }],
+  track_total_hits: true,
+});
+const launchQueryPut = async (gen: number) => {
+  if (!live(gen)) return;
+  const res = await queryCustomElastic({
+    index: ES_INDEX.PUT_HAS,
+    customQuery: customQueryPut() as any,
+    allAnswer: true,
+  }).catch((error) => {
+    console.error("Error fetching PUT:", error);
+    return null;
+  });
+  if (res?.hits?.hits && live(gen)) {
+    resultsQueryPut.value = res.hits.hits;
+  }
+};
+
+// LES (liste en sus) : nom exact d'abord, puis nom contenu, les libelles LES
+// pouvant porter un dosage ou un regroupement que la marque HAS n'a pas.
+const launchQueryLes = async (gen: number) => {
+  if (!live(gen)) return;
+  const run = (clause: any) =>
+    queryCustomElastic({
+      index: HEART_LES_INDEX,
+      customQuery: { from: 0, query: { bool: { must: [clause] } }, size: 200, track_total_hits: true },
+      cluster: "pubmed",
+    }).catch((error) => {
+      console.error("Error fetching LES:", error);
+      return null;
+    });
+  let res = await run({ term: { "brand.keyword": brandMatch.value } });
+  if (!res?.results?.length) res = await run({ wildcard: { "brand.keyword": `*${brandMatch.value}*` } });
+  if (res?.results && live(gen)) {
+    resultsQueryLes.value = res.results;
+  }
+};
+
+/** Ce que la recherche a matche sur cette marque, pour marquer les avis. */
+const brandMatches = useHeartBrandMatches();
+
+/** Termes surlignes : ceux du moteur pour cette marque, sinon ceux de l'appelant. */
+const searchTerms = computed<string[]>(() =>
+  brandMatches.terms.value?.length ? brandMatches.terms.value : props.highlight ?? [],
+);
+
+/**
+ * Onglet demande par la prop `tab` (ansm, alerts, price, overview...). Rend
+ * faux tant que la section n'est pas chargee : l'appelant reessaie plus tard.
+ */
+function openRequestedTab() {
+  const requestedIdx = props.tab ? tabIndexOf(props.tab) : 0;
+  if (requestedIdx === 0) return false;
+  chosenTab.value = requestedIdx;
+  // tab=les + indication=<code> : le tiroir de l'indication s'ouvre d'emblee.
+  if (normalizeTab(props.tab) === 'les' && props.indication) {
+    const record = lesRecords.value.find((r) => r.code === props.indication);
+    if (record) drawerLes.value = record;
+  }
+  return true;
+}
+
+/** Remet la fiche a zero, pour une autre marque. */
+function reset() {
+  resultsQuery.value = null;
+  brandId.value = null;
+  resultsQueryPrice.value = [];
+  resultsQueryIntlPrice.value = [];
+  resultsQueryAnsm.value = [];
+  resultsQueryMitm.value = [];
+  resultsQueryPut.value = [];
+  resultsQueryLes.value = [];
+  selectedAnsmIndex.value = 0;
+  selectedMitmIndex.value = 0;
+  drawerOpinion.value = null;
+  drawerRecord.value = null;
+  drawerLes.value = null;
+  chosenTab.value = 1;
+}
+
+async function loadAll() {
+  const gen = ++generation;
+  isLoadingSecondary.value = true;
+  await lanchQuery(gen);
+  if (!live(gen)) return;
+
+  // L'onglet se pose des que la HAS a repondu. Par defaut l'historique HAS
+  // (jamais la monographie), a defaut le premier onglet disponible.
+  const tabOpened = openRequestedTab();
+  if (!tabOpened) chosenTab.value = overviewTabIndex.value > 0 ? overviewTabIndex.value : 1;
+
+  const brand = resultsQuery.value?.brand_group || brandMatch.value;
+  await Promise.all([
+    launchQueryPrices(gen),
+    launchQueryIntlPrice(gen),
+    loadIntlApprovals(brand),
+    launchQueryAnsm(gen),
+    launchQueryMitm(gen),
+    launchQueryPut(gen),
+    launchQueryLes(gen),
+    brandMatches.load(brand, indexQuery),
+  ]);
+  if (!live(gen)) return;
+  isLoadingSecondary.value = false;
+
+  // Preselection du CIS (clic sur un dosage precis dans une carte ANSM : cis=<_id>)
+  if (props.cis) {
+    const i = resultsQueryAnsm.value.findIndex((h) => h._id === props.cis);
+    if (i !== -1) selectedAnsmIndex.value = i;
+    // MITM : la carte passe le cis_code (pas le _id du doc)
+    const j = resultsQueryMitm.value.findIndex(
+      (m) => String(m._source?.cis_code) === String(props.cis)
+    );
+    if (j !== -1) selectedMitmIndex.value = j;
+  }
+
+  // L'onglet demande dependait d'une section secondaire (prix, ANSM, LES...).
+  if (!tabOpened) openRequestedTab();
+}
+
+onMounted(() => {
+  isMounted.value = true;
+  loadAll();
+});
+
+// Une autre marque dans la meme instance (tiroir reutilise) : on recharge.
+watch(
+  () => props.brand,
+  (brand) => {
+    if (!isMounted.value) return;
+    brandMatch.value = String(brand ?? "");
+    reset();
+    loadAll();
+  }
+);
+
+// Le tiroir d'un projet fournit sa navigation : la fiche y est embarquee.
+const embedded = inject(OIP_RESOURCE_NAV, null) !== null;
+
+onBeforeUnmount(() => {
+  isMounted.value = false;
+  if (import.meta.client && !embedded) {
+    document.body.classList.remove("is-monograph-fullbleed");
+  }
+});
+
+// Onglet Monographie : on neutralise la largeur max du conteneur de page
+// (.oip_container) pour que le document occupe toute la zone de contenu.
+// Dans le tiroir d'un projet, la classe elargirait la page dessous.
+watchEffect(() => {
+  if (import.meta.client && !embedded) {
+    document.body.classList.toggle(
+      "is-monograph-fullbleed",
+      monographTabIndex.value > 0 && chosenTab.value === monographTabIndex.value
+    );
+  }
+});
+
+// Le reste (libelle d'onglet, marque, sections secondaires) sert a la page de
+// fr_drugs_app : elle declare l'export du cadre depuis son script, ou le slot
+// `actions` n'est pas lisible. Memes donnees que les props de ce slot.
+defineExpose({
+  product: resultsQuery,
+  brandId,
+  currentTabKey,
+  availableTabs,
+  currentTabLabel,
+  brand: title,
+  prices: resultsQueryPrice,
+  intlPrices: resultsQueryIntlPrice,
+  intlRecords,
+  ansm: resultsQueryAnsm,
+  mitm: resultsQueryMitm,
+  put: resultsQueryPut,
+  les: resultsQueryLes,
+});
+</script>
+
+<style scoped>
+/* Le titre suit la typo du bandeau (RmPageHeader) ; le lien du tiroir
+   (`title-link`) passe dessous. */
+.oip-drugs-brand__title {
+  display: block;
+}
+
+.oip-drugs-brand__state {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 24px 32px;
+}
+
+/* Selecteur de specialite (CIS) de la marque, dans l'onglet Autorisation. */
+.cis-switch {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: flex-start;
+  width: 100%;
+  gap: 8px;
+  margin-block: 16px;
+}
+.cis-switch-label {
+  margin-right: 4px;
+}
+.cis-chip {
+  border: 1px solid var(--light, #ececf2);
+  background: var(--white);
+  color: var(--dark);
+  border-radius: 999px;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.cis-chip:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+.cis-chip.active {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: var(--white);
+}
+</style>
+
+<style>
+/* Onglet Monographie : neutralise la largeur max + le padding du conteneur
+   de page (full-bleed). Classe posee sur <body> par la fiche, hors tiroir. */
+body.is-monograph-fullbleed .oip_container {
+  max-width: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+</style>