@tekkare/romulus 0.1.250 → 0.1.252

package/layer/app/components/oip-drugs/heart/france/BrandGroupCard.vue

@@ -0,0 +1,450 @@
+<!--
+  Une marque du suivi des prix, ses presentations dans un tableau.
+
+  L'en-tete donne la marque, son laboratoire, le nombre de presentations et la
+  date du dernier mouvement de prix ; le tableau qui suit detaille chaque
+  presentation (son code CIP, son PFHT, l'evolution depuis le tarif precedent,
+  la date de prise d'effet et le taux de remboursement). Le prix public s'en
+  deduit (marges de distribution et TVA) : il vit dans la fiche produit.
+-->
+<script setup lang="ts">
+import type { EsIndexName } from "../../../../oip-drugs/esIndices";
+import { ES_INDEX } from "../../../../oip-drugs/esIndices";
+import { HEART_SOURCE_UUIDS } from "../../../../oip-drugs/utils/sourceUuids";
+import { drugsBrandPath } from "../../../../oip-drugs/kinds";
+import { valueTable } from "../../../../utils/valueTable";
+
+const props = withDefaults(
+  defineProps<{
+    /** Un groupe renvoye par `useHeartGroupedPrice`. */
+    group: any;
+    /** Termes de la recherche, surlignes dans le nom de marque. */
+    searchQueries?: any[];
+    /** Taux de change du jour, passes a l'export de la marque. */
+    rates?: any[] | null;
+    indexQuery?: EsIndexName;
+    /** Rendu serre de la fiche projet : l'en-tete seul, sans le tableau. */
+    dense?: boolean;
+  }>(),
+  { searchQueries: () => [], rates: null, indexQuery: ES_INDEX.DRUG_CARDS, dense: false },
+);
+
+const { locale } = useI18n();
+const nav = useOipResourceNav();
+const { projectButton } = useOipResourceHooks();
+
+/**
+ * Tarif courant d'une presentation, et celui qui le precede.
+ *
+ * `reimbursement_history` n'est pas trie : prendre la premiere entree ferait
+ * passer un vieux tarif pour le tarif en vigueur.
+ *
+ * Il empile aussi un tarif par circuit de distribution (retrocession, T2A,
+ * ville) a la meme date : comparer la premiere entree a la deuxieme comparait
+ * deux circuits entre eux et annoncait 0 % la ou le prix avait bouge. Le tarif
+ * precedent est donc celui du meme circuit, a une date anterieure, sauf quand
+ * le tarif courant arrive sans circuit, voir `isKnownChannel`.
+ */
+function tariffs(product: any) {
+  const history = Array.isArray(product?.reimbursement_history)
+    ? [...product.reimbursement_history].sort(
+        (a: any, b: any) =>
+          new Date(b.application_date).getTime() - new Date(a.application_date).getTime(),
+      )
+    : [];
+  const current = history[0] ?? {};
+  const sameChannel = isKnownChannel(current.distribution_type)
+    ? history.filter((entry: any) => entry.distribution_type === current.distribution_type)
+    : history;
+  const previous =
+    sameChannel.find(
+      (entry: any) =>
+        entry.application_date !== current.application_date && entry.factory_price != null,
+    ) ?? null;
+  return { current, previous };
+}
+
+/**
+ * Un circuit de distribution nomme. La source livre ses derniers tarifs sans
+ * circuit (« Non renseigne ») alors que l'historique en porte un (TAA,
+ * Retrocession) : exiger le meme circuit ne trouvait alors aucun tarif
+ * precedent et toute la colonne Evolution tombait a NA. Faute de circuit
+ * connu, on compare au tarif precedent quel qu'il soit.
+ */
+const UNKNOWN_CHANNELS = new Set(["", "nan", "na", "non renseigne", "unknown"]);
+
+function isKnownChannel(value: any) {
+  if (!value) return false;
+  const normalized = String(value)
+    .trim()
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "");
+  return !UNKNOWN_CHANNELS.has(normalized);
+}
+
+/** Variation en pourcentage d'un prix par rapport au precedent. */
+function variation(now: number | null | undefined, before: number | null | undefined) {
+  if (now === null || now === undefined || !before) return null;
+  return ((Number(now) - Number(before)) / Number(before)) * 100;
+}
+
+function money(value: number | null | undefined) {
+  if (value === null || value === undefined) return "NA";
+  return new Intl.NumberFormat(locale.value === "en" ? "en-US" : "fr-FR", {
+    style: "currency",
+    currency: "EUR",
+    maximumFractionDigits: 2,
+  }).format(Number(value));
+}
+
+function shortDate(raw: string | null | undefined) {
+  if (!raw) return "NA";
+  const date = new Date(raw);
+  if (Number.isNaN(date.getTime())) return "NA";
+  return date.toLocaleDateString(locale.value === "en" ? "en-GB" : "fr-FR", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+}
+
+const heads = computed(() =>
+  locale.value === "en"
+    ? ["Presentation", "Ex-factory", "Change", "Effective date", "Reimb."]
+    : ["Présentation", "PFHT", "Évolution", "Prise d'effet", "Rembours."],
+);
+
+const rows = computed(() =>
+  (props.group?.products ?? []).map((product: any) => {
+    const { current, previous } = tariffs(product);
+    // Un prix inchange depuis toujours n'a pas d'evolution a montrer, mais il
+    // garde sa date de prise d'effet.
+    const change = variation(current?.factory_price, previous?.factory_price);
+    return {
+      values: [
+        {
+          cip: product.local_drug_id ?? null,
+          label: product.presentation_label || product.label || "NA",
+        },
+        money(current?.factory_price ?? null),
+        { change },
+        shortDate(current?.application_date),
+        current.reimbursement_rate != null
+          ? `${Math.round(current.reimbursement_rate * 100)} %`
+          : "NA",
+      ],
+    };
+  }),
+);
+
+/**
+ * Une variation se lit avec son sens : la fleche le porte, la couleur ne fait
+ * que la redoubler. Ni rouge ni vert — une hausse de prix n'est bonne ni
+ * mauvaise en soi, ca depend de qui lit.
+ */
+function formatChange(change: number) {
+  const rounded = Math.abs(change) >= 10 ? change.toFixed(0) : change.toFixed(1);
+  const arrow = change > 0 ? "↑" : change < 0 ? "↓" : "=";
+  return `${arrow} ${change > 0 ? "+" : ""}${rounded} %`;
+}
+
+/**
+ * Fiche ouverte au clic sur la carte : la fiche produit du hub, sur son onglet
+ * Prix. La carte porte une marque, la fiche aussi (l'ancienne page de detail
+ * tarifaire, elle, s'adressait a une seule presentation).
+ */
+const detailsPath = computed(() => {
+  const path = drugsBrandPath(props.group?.brand);
+  return path ? `${path}?tab=price` : null;
+});
+
+/**
+ * Toute la carte mene a la fiche, sauf ce qui a sa propre action : la
+ * pagination du tableau, un lien, un bouton.
+ */
+function openDetails(event: MouseEvent) {
+  const target = event.target as HTMLElement | null;
+  if (target?.closest("a, button, .rcd-pagination, .rcd-pagination-navigate")) return;
+  if (!detailsPath.value) return;
+  if (event.metaKey || event.ctrlKey || event.shiftKey) {
+    window.open(nav.appHref("fr_drugs_app", detailsPath.value), "_blank", "noopener");
+    return;
+  }
+  nav.openApp("fr_drugs_app", detailsPath.value);
+}
+
+const countLabel = computed(() => {
+  const count = props.group?.count ?? 0;
+  if (locale.value === "en") return `${count} presentation${count > 1 ? "s" : ""}`;
+  return `${count} présentation${count > 1 ? "s" : ""}`;
+});
+
+// Le tableau des presentations etait ecrit pour `arg-table` : des libelles de
+// tete et des lignes `{ values: [...] }`. La conversion en colonnes de RmTable
+// est mecanique, cf. `valueTable`. Il ne se trie pas : la carte montre les
+// presentations les plus recemment mises a jour, dans cet ordre.
+const presTable = computed(() => {
+  const converted = valueTable(heads.value, rows.value, [
+    "presentation",
+    "",
+    "change",
+    "date",
+    "",
+  ]);
+  return {
+    ...converted,
+    columns: converted.columns.map((column) => ({ ...column, sortable: false })),
+  };
+});
+</script>
+
+<template>
+  <!-- `rm-card` n'est pas un style : c'est ce par quoi le menu d'actions
+       (la roue crantee) reconnait la carte qui le porte. -->
+  <article class="oip-drugs bg_card rm-card" @click="openDetails">
+    <header class="bg_head">
+      <span class="bg_identity">
+        <span class="bg_brand">
+          <OipDrugsHeartTextHighlight
+            :text="group.brand"
+            :queries="searchQueries ?? []"
+          />
+        </span>
+        <span class="bg_meta">
+          <template v-if="group.molecules?.length">{{ group.molecules.join(" · ") }}</template>
+          <template v-if="group.manufacturers?.length">
+            · {{ group.manufacturers.join(" · ") }}
+          </template>
+        </span>
+      </span>
+
+      <span class="bg_facts">
+        <span class="bg_count">{{ countLabel }}</span>
+        <span class="bg_date">
+          <template v-if="group.last_price_update">
+            {{ locale === "en" ? "Latest change" : "Dernier changement" }} :
+            {{ shortDate(group.last_price_update) }}
+          </template>
+          <template v-else>
+            {{ locale === "en" ? "No price change" : "Aucun changement de prix" }}
+          </template>
+        </span>
+      </span>
+
+      <!-- Le tableau ci-dessous ne montre que les 25 presentations les plus
+           recentes, sans leur historique : l'export, lui, porte la marque
+           entiere. Il se demande par la roue crantee, au meme endroit que sur
+           les cartes d'avis HAS. -->
+      <!-- Le projet range la marque entiere : toutes ses presentations, pas
+           seulement celles du tableau (cf. `ids`, useHeartGroupedPrice). -->
+      <!-- Emplacement libre pour un appelant (la fiche projet y pose son
+           bouton « Commenter ») avant le bouton projet : vide partout ailleurs. -->
+      <slot name="hubr-actions" />
+      <component
+        :is="projectButton"
+        v-if="projectButton"
+        :resource-id="group.ids ?? (group.products ?? []).map((product: any) => product.id)"
+        type="FrDrugPrice"
+        :label="group.brand"
+        compact
+      />
+    </header>
+
+    <div v-if="!dense" class="bg_body">
+      <RmTable
+        flat
+        :columns="presTable.columns"
+        :rows="presTable.rows"
+        :page-size="5"
+      >
+        <!-- Le CIP identifie la presentation : il la coiffe plutot que de
+             prendre une colonne pour lui seul. -->
+        <template v-for="key in presTable.typeKeys.presentation" :key="key" #[key]="{ value }">
+          <span class="pres">
+            <RmTag v-if="value.cip" variant="gray">{{ value.cip }}</RmTag>
+            <span class="pres_label">{{ value.label }}</span>
+          </span>
+        </template>
+
+        <template v-for="key in presTable.typeKeys.change" :key="key" #[key]="{ value }">
+          <span
+            v-if="value.change !== null"
+            class="pc_change"
+            :class="value.change > 0 ? 'is_up' : value.change < 0 ? 'is_down' : 'is_flat'"
+          >
+            {{ formatChange(value.change) }}
+          </span>
+          <!-- Pas d'evolution : un seul tarif connu, rien a comparer. -->
+          <span v-else class="pc_none">NA</span>
+        </template>
+
+        <!-- « 15 mars 2024 » tient sur une ligne : coupe en deux, la date se
+             lit comme deux valeurs. -->
+        <template v-for="key in presTable.typeKeys.date" :key="key" #[key]="{ value }">
+          <span class="pc_date">{{ value }}</span>
+        </template>
+      </RmTable>
+
+      <p v-if="group.count > group.products.length" class="bg_note">
+        {{
+          locale === "en"
+            ? `Showing the ${group.products.length} most recently updated presentations out of ${group.count}.`
+            : `Les ${group.products.length} présentations les plus récemment mises à jour, sur ${group.count}.`
+        }}
+      </p>
+    </div>
+
+    <!-- Meme pied que les cartes d'avis HAS : la source, et la date du dernier
+         tarif publie pour la marque. -->
+    <div v-if="!dense" class="bg_footer">
+      <OipDrugsHeartElasticSourceContainerElastic
+        :uuid="HEART_SOURCE_UUIDS.PRICE_TRACKER"
+        :last-label="$t('oipDrugs.heart.sources.lastPrice')"
+        :last-date="group?.last_price_update"
+      />
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.bg_card {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  background: var(--bg-surface);
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.15s linear, box-shadow 0.15s linear;
+}
+
+.bg_card:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border-default));
+  box-shadow: var(--shadow-md);
+}
+
+/* `border-box` obligatoire : le reset de l'app remet `box-sizing` a
+   `content-box`, et `width: 100%` + 32px de gouttiere poussait la colonne de
+   droite (nombre de presentations, date) hors de la carte, ou le
+   `overflow: hidden` la coupait. */
+.bg_head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 14px 16px;
+}
+
+.bg_identity {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.bg_brand {
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.bg_meta {
+  color: var(--text-muted);
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bg_facts {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.bg_count {
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+  color: var(--color-primary);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.bg_date {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+/* Le tableau va d'un bord a l'autre : ses lignes zebrees s'arretaient a
+   16px des cotes, ce qui dessinait une seconde carte a l'interieur de la
+   carte. Le retrait revient sur ce qui n'est pas le tableau, et `flat` ote
+   le cadre que RmTable pose de lui-meme. */
+.bg_body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 0 16px;
+  border-top: 1px solid var(--border-default);
+}
+
+.pres {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.pres_label {
+  font-weight: 600;
+}
+
+.pc_change {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+/* Bleu pour la hausse, violet pour la baisse : deux teintes froides, aucune
+   ne dit si le mouvement est une bonne nouvelle. */
+.pc_change.is_up {
+  color: var(--color-info);
+}
+
+.pc_change.is_down {
+  color: var(--color-secondary);
+}
+
+.pc_change.is_flat {
+  color: var(--text-muted);
+}
+
+.pc_none {
+  color: var(--text-muted);
+}
+
+.pc_date {
+  white-space: nowrap;
+}
+
+.bg_note {
+  padding: 0 16px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.bg_footer {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-default);
+  background: var(--bg-surface-2);
+  font-size: 13px;
+}
+</style>

package/layer/app/components/oip-drugs/heart/mitm/Card.vue

@@ -0,0 +1,199 @@
+<!--
+  Carte d'un medicament d'interet therapeutique majeur (MITM).
+
+  Meme modele que les cartes de marque et LES (RmResultCard) : un produit
+  (CIS), ses presentations, son dernier SMR/ASMR. Le detail vit dans la fiche,
+  ouverte au clic sur la carte entiere.
+-->
+<template>
+  <RmResultCard
+    class="oip-drugs"
+    :clickable="!inDetails"
+    :count="presentationCount"
+    :count-label="countLabel"
+    :more-label="inDetails ? '' : locale === 'fr' ? 'Voir le détail' : 'See details'"
+    :lang="dateLang"
+    :link="detailsHref"
+    @click="!inDetails && openDrugsCard(nav, $event, detailsPath)"
+  >
+    <template #title>
+      <OipDrugsHeartTextHighlight :text="result.brand || result.cis_label" :queries="highlight" />
+    </template>
+    <template v-if="subtitle" #subtitle>
+      <OipDrugsHeartTextHighlight :text="subtitle" :queries="highlight" />
+    </template>
+
+    <template #actions>
+      <!-- Emplacement libre pour un appelant (la fiche projet y pose son
+           bouton « Commenter ») avant le bouton projet : vide partout ailleurs. -->
+      <slot name="hubr-actions" />
+      <component
+        :is="projectButton"
+        v-if="projectButton"
+        :resource-id="result._id"
+        type="FrMitm"
+        :label="result.brand || result.cis_label"
+        compact
+      />
+    </template>
+
+    <template #meta>
+      <span v-if="lastSmr" class="rm-rcard__label">
+        {{ locale === "fr" ? "Dernier SMR" : "Last SMR" }} ·
+        <RmDate :date="formatHasDate(lastSmr.has_date)" :lang="dateLang" />
+      </span>
+      <span class="rm-rcard__ref">CIS {{ result.cis_code }}</span>
+      <RmTag variant="violet">
+        {{ locale === "fr" ? "Sur la liste ANSM" : "On the ANSM list" }}
+      </RmTag>
+    </template>
+
+    <p class="rm-rcard__lead" :class="{ 'rm-rcard__clamp': !inDetails }">
+      <OipDrugsHeartTextHighlight :text="result.cis_label" :queries="highlight" />
+    </p>
+
+    <p v-if="lastSmr || lastAsmr" class="rm-rcard__text">
+      <template v-if="lastSmr">SMR {{ lastSmr.value }}</template>
+      <template v-if="lastSmr && lastAsmr"> · </template>
+      <template v-if="lastAsmr">ASMR {{ lastAsmr.value }}</template>
+    </p>
+
+    <!-- Rangees choisies dans « Personnaliser ». -->
+    <OipDrugsHeartResultsPrefRows scope="mitm" :values="prefValues" />
+
+    <!-- Ce que le moteur a reellement matche sur cette ligne. -->
+    <OipDrugsHeartResultsMatchExplain :hit="{ highlight: result.highlight }" />
+
+    <template #footer>
+      <OipDrugsHeartElasticSourceContainerElastic
+        :uuid="HEART_SOURCE_UUIDS.MITM"
+        :last-label="$t('oipDrugs.heart.sources.lastOpinion')"
+        :last-date="lastOpinionDate"
+      />
+    </template>
+  </RmResultCard>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import { HEART_SOURCE_UUIDS } from "../../../../oip-drugs/utils/sourceUuids";
+import { drugsBrandPath } from "../../../../oip-drugs/kinds";
+import { openDrugsCard } from "../../../../oip-drugs/utils/s-openCard";
+
+const props = defineProps({
+  result: {
+    required: true,
+    type: Object,
+  },
+  inDetails: {
+    type: Boolean,
+    default: false,
+  },
+  /** Termes de la recherche, surlignes dans la carte (ex-filterStore). */
+  highlight: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { locale } = useI18n();
+const nav = useOipResourceNav();
+const { projectButton } = useOipResourceHooks();
+
+const dateLang = computed(() => (locale.value === "en" ? "en" : "fr"));
+
+const detailsPath = computed(() => {
+  const path = drugsBrandPath(props.result.brand);
+  return path ? `${path}?tab=mitm&cis=${encodeURIComponent(props.result.cis_code ?? "")}` : "";
+});
+const detailsHref = computed(() => (detailsPath.value ? nav.appHref("fr_drugs_app", detailsPath.value) : undefined));
+
+/** « MOLECULE (ATC5) · FABRICANT », comme le sous-titre de la carte de marque. */
+const subtitle = computed(() =>
+  [
+    locale.value === "fr"
+      ? props.result.atc5_french_code_label
+      : props.result.atc5_english_code_label,
+    props.result.owner_regroup,
+  ]
+    .filter(Boolean)
+    .join(" · ")
+);
+
+/** Les presentations (CIP) rattachees au CIS. */
+const presentationCount = computed(() =>
+  Array.isArray(props.result.price) ? props.result.price.length : 0
+);
+
+const countLabel = computed(() => {
+  const n = presentationCount.value;
+  if (locale.value === "en") return n > 1 ? "presentations" : "presentation";
+  return n > 1 ? "présentations" : "présentation";
+});
+
+/** Premier SMR / ASMR renseigne : les tableaux portent souvent une ligne vide. */
+const lastSmr = computed(
+  () => (props.result.last_smr ?? []).find((s: any) => s?.value) ?? null
+);
+const lastAsmr = computed(
+  () => (props.result.last_asmr ?? []).find((s: any) => s?.value) ?? null
+);
+
+/**
+ * Ce que la carte peut montrer en plus, si « Personnaliser » le demande.
+ *
+ * `molecule` ne porte pas les molecules du produit mais les autres CIS de la
+ * meme molecule : la rangee annonce donc des marques, pas des principes actifs.
+ */
+const prefValues = computed(() => {
+  const en = locale.value === "en";
+  const smrEntries = (props.result.smr ?? []).filter((s: any) => s?.value);
+  const asmrEntries = (props.result.asmr ?? []).filter((s: any) => s?.value);
+  const prices = (props.result.price ?? []).filter((p: any) => p?.public_price);
+  const rates = [...new Set(prices.map((p: any) => p.reimbursement_rate).filter((r: any) => r != null))] as number[];
+  const amounts = prices.map((p: any) => p.public_price as number).sort((a: number, b: number) => a - b);
+  const money = (value: number) =>
+    value.toLocaleString(en ? "en-US" : "fr-FR", { style: "currency", currency: "EUR" });
+
+  return {
+    hasReason: [
+      ...new Set([props.result.last_smr?.[0]?.has_reason, props.result.last_asmr?.[0]?.has_reason].filter(Boolean)),
+    ] as string[],
+    hasCode: [
+      ...new Set([props.result.last_smr?.[0]?.has_code, props.result.last_asmr?.[0]?.has_code].filter(Boolean)),
+    ] as string[],
+    opinionCount: [
+      smrEntries.length ? `${smrEntries.length} SMR` : null,
+      asmrEntries.length ? `${asmrEntries.length} ASMR` : null,
+    ].filter(Boolean) as string[],
+    atc4: [en ? props.result.atc4_english_code_label : props.result.atc4_french_code_label].filter(Boolean) as string[],
+    sameMolecule: [
+      ...new Set(
+        (props.result.molecule ?? [])
+          .map((m: any) => m?.brand)
+          .filter((brand: string) => brand && brand !== props.result.brand)
+      ),
+    ] as string[],
+    prices: [
+      amounts.length
+        ? `${en ? "Public price" : "Prix public"} ${money(amounts[0])}${amounts.length > 1 && amounts[amounts.length - 1] !== amounts[0] ? ` ${en ? "to" : "à"} ${money(amounts[amounts.length - 1])}` : ""}`
+        : null,
+      ...rates
+        .sort((a, b) => b - a)
+        .map((rate) => `${en ? "Reimbursed" : "Remboursement"} ${Math.round(rate * 100)} %`),
+    ].filter(Boolean) as string[],
+  };
+});
+
+/** Le dernier avis HAS porte par la carte (SMR ou ASMR), en date ISO. */
+const lastOpinionDate = computed(() =>
+  [lastSmr.value?.has_date, lastAsmr.value?.has_date]
+    .filter(Boolean)
+    .map((value: string) => formatHasDate(value)),
+);
+
+function formatHasDate(dateStr: string) {
+  if (!dateStr || dateStr.length !== 8) return dateStr;
+  return `${dateStr.substring(0, 4)}-${dateStr.substring(4, 6)}-${dateStr.substring(6, 8)}`;
+}
+</script>

package/layer/app/components/oip-drugs/heart/mitm/Source.vue

@@ -0,0 +1,23 @@
+<!--
+  Pied de source des blocs MITM (portage de heart/mitm/source de fr_drugs_app) :
+  la fiche Directus de la liste MITM, avec la date du dernier mouvement de ce
+  que l'appelant affiche quand il la connait.
+-->
+<template>
+  <OipDrugsHeartElasticSourceContainerElastic
+    class="oip-drugs"
+    :uuid="HEART_SOURCE_UUIDS.MITM"
+    tone="primary"
+    :last-label="lastLabel"
+    :last-date="lastDate"
+  />
+</template>
+
+<script setup lang="ts">
+import { HEART_SOURCE_UUIDS } from "../../../../oip-drugs/utils/sourceUuids";
+
+defineProps<{
+  lastLabel?: string;
+  lastDate?: string | number | null | Array<string | number | null | undefined>;
+}>();
+</script>