@tekkare/romulus 0.1.251 → 0.1.252

package/layer/app/components/oip-drugs/heart/results/details/PriceOverview.vue

@@ -0,0 +1,1261 @@
+<!--
+  Prix d'une marque, presentation par presentation.
+
+  Le tableau precedent alignait huit colonnes sur une ligne par presentation :
+  on y lisait des nombres, pas des prix. Ici l'entete resume la marque (combien
+  de presentations tarifees, la fourchette, la derniere mise a jour, la
+  tendance) et chaque presentation devient une carte : son PFHT en grand, sa
+  derniere variation, puis le prix public et l'ecart avec le PFHT.
+-->
+<script setup lang="ts">
+import { rmTooltipTrigger } from "@tekkare/romulus/utils/chart";
+import { HEART_SOURCE_UUIDS } from "../../../../../oip-drugs/utils/sourceUuids";
+import { heartCodeLabel, heartPriceChannel } from "../../../../../oip-drugs/utils/heartStyleAndFormat";
+
+const props = defineProps<{
+  /** Les entrees de prix de la marque (une par presentation). */
+  product: any[];
+  /** Nom de la marque, pour la ligne de portee. */
+  brand?: string;
+}>();
+
+const { locale } = useI18n();
+
+const money = (value: number | null | undefined) =>
+  typeof value === "number"
+    ? `${value.toLocaleString("fr-FR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €`
+    : "-";
+
+const percent = (value: number | null | undefined) =>
+  typeof value === "number"
+    ? `${value > 0 ? "+" : ""}${value.toLocaleString("fr-FR", { maximumFractionDigits: 1 })} %`
+    : "";
+
+/** Derniere variation du PFHT, en euros (price_type_id 1 = prix fabricant). */
+function factoryVariation(entry: any): number | null {
+  const history = (entry?.changed_history || [])
+    // Le champ de l'index est `status_changed` : ecrit `status_change`, la
+    // comparaison portait sur `undefined` et laissait passer les lignes sans
+    // changement, qui masquaient la derniere vraie variation.
+    .filter((h: any) => h.price_type_id === 1 && h.status_changed !== "N")
+    .sort(
+      (a: any, b: any) =>
+        new Date(b.application_date).getTime() - new Date(a.application_date).getTime(),
+    );
+  return history[0]?.price_variation ?? null;
+}
+
+/**
+ * Le tarif applicable de chaque presentation.
+ *
+ * `reimbursement_history` n'est pas trie : prendre la premiere entree ferait
+ * remonter un ancien retrait sans prix a la place du tarif courant.
+ */
+/** La date du tarif le plus recent de la marque, pour les pieds de la carte. */
+const lastPriceDates = computed(() =>
+  (props.product || []).flatMap((entry: any) =>
+    (entry?.reimbursement_history ?? []).map((h: any) => h?.application_date),
+  ),
+);
+
+/**
+ * Date d'inscription la plus ancienne, tous circuits confondus.
+ *
+ * L'index ne remplit `commercialization_date` que sur les presentations de
+ * ville : aucun des 3 551 documents UCD ne la porte, et une marque
+ * hospitaliere comme OPDIVO n'affichait donc aucune date. Cote hopital, la
+ * mise a disposition se lit dans `homologation_history` (l'inscription au
+ * circuit : agrement collectivites, retrocession). Ce n'est pas la meme notion
+ * qu'une commercialisation : elle porte donc son propre libelle.
+ */
+function earliestListing(entry: any) {
+  const dates = (Array.isArray(entry?.homologation_history) ? entry.homologation_history : [])
+    .map((h: any) => h?.start_date)
+    .filter(Boolean)
+    .sort();
+  return dates[0] ?? null;
+}
+
+const rows = computed(() =>
+  (props.product || [])
+    .map((entry: any) => {
+      const history = Array.isArray(entry?.reimbursement_history)
+        ? [...entry.reimbursement_history].sort(
+            (a: any, b: any) =>
+              new Date(b.application_date).getTime() - new Date(a.application_date).getTime(),
+          )
+        : [];
+      const current = history[0] ?? {};
+      const factory = current.factory_price ?? null;
+      const variation = factoryVariation(entry);
+      const previous =
+        typeof factory === "number" && typeof variation === "number"
+          ? factory - variation
+          : null;
+
+      return {
+        key: `${entry?.local_drug_id ?? ""}-${entry?.label ?? ""}`,
+        // Le document complet : le tiroir y lit tout ce que la carte resume.
+        source: entry,
+        label: entry?.label ?? entry?.local_drug_id ?? "-",
+        code: entry?.local_drug_id ?? null,
+        // CIP en ville, UCD a l'hopital : le meme champ porte les deux.
+        codeLabel: heartCodeLabel(entry?.distribution_channel),
+        manufacturer: entry?.manufacturer ?? null,
+        // Ville ou hopital : seul `distribution_channel` le dit.
+        channel: heartPriceChannel(entry?.distribution_channel, locale.value),
+        // L'index ecrit "-" quand la date manque, et ne porte commercialisation
+        // ni date que sur les presentations de ville.
+        marketedOn:
+          entry?.commercialization_date && entry.commercialization_date !== "-"
+            ? entry.commercialization_date
+            : null,
+        // Repli hopital : faute de commercialisation, la date d'inscription.
+        listedOn:
+          entry?.commercialization_date && entry.commercialization_date !== "-"
+            ? null
+            : earliestListing(entry),
+        notMarketed: entry?.commercialization_status === "Non commercialisée",
+        date: current.application_date ?? null,
+        factory,
+        publicPrice: current.public_price ?? null,
+        // Taux de prise en charge, ecrit en chaine (« 0.65 ») et seulement en
+        // ville : aucune presentation UCD ne le porte, le rendu le passe.
+        reimbursementRate:
+          current.reimbursement_rate !== undefined &&
+          current.reimbursement_rate !== null &&
+          current.reimbursement_rate !== "" &&
+          !Number.isNaN(Number(current.reimbursement_rate))
+            ? Number(current.reimbursement_rate) * 100
+            : null,
+        variation,
+        previous,
+        // Le pourcentage se deduit du prix precedent : l'index ne le porte pas.
+        variationPct:
+          typeof variation === "number" && previous
+            ? (variation / previous) * 100
+            : null,
+        // Ce que la distribution ajoute au prix fabricant.
+        margin:
+          typeof current.public_price === "number" && typeof factory === "number"
+            ? current.public_price - factory
+            : null,
+        marginPct:
+          typeof current.public_price === "number" && factory
+            ? ((current.public_price - factory) / factory) * 100
+            : null,
+      };
+    })
+    .filter((row: any) => row.factory !== null || row.publicPrice !== null)
+    .sort(byDosage),
+);
+
+/**
+ * Dosage lu dans le libelle (« 150 MG/ML », « 30MG », « 0,5 G »), ramene en
+ * milligrammes. Les presentations d'une marque arrivaient dans l'ordre de
+ * l'index, 150 mg et 30 mg meles : on les range par dosage, puis ville avant
+ * hopital, puis par libelle, pour que les memes dosages se lisent ensemble.
+ */
+const DOSE_UNITS: Record<string, number> = { MCG: 0.001, µG: 0.001, UG: 0.001, MG: 1, G: 1000 };
+function dosageOf(label: string): number {
+  const match = String(label ?? "").toUpperCase().match(/(\d+(?:[.,]\d+)?)\s*(MCG|µG|UG|MG|G)\b/);
+  if (!match) return Number.POSITIVE_INFINITY;
+  return parseFloat(match[1]!.replace(",", ".")) * (DOSE_UNITS[match[2]!] ?? 1);
+}
+function byDosage(a: any, b: any): number {
+  const dose = dosageOf(a.label) - dosageOf(b.label);
+  if (dose !== 0 && !Number.isNaN(dose)) return dose;
+  const channel = String(a.channel?.key ?? "").localeCompare(String(b.channel?.key ?? ""));
+  if (channel !== 0) return -channel;
+  return String(a.label).localeCompare(String(b.label));
+}
+
+/**
+ * Historique du PFHT, presentation par presentation.
+ *
+ * `reimbursement_history` porte un tarif par date d'application : c'est deja la
+ * serie, il suffit de la remettre dans l'ordre. Un prix tient jusqu'au tarif
+ * suivant, d'où le trace en marches plutot qu'en droites : une interpolation
+ * laisserait croire a une baisse continue entre deux arretes.
+ */
+const SERIES_COLORS = ["#2017ad", "#1dacfc", "#a17def", "#fd9147", "#22c55e"];
+
+const series = computed(() =>
+  (props.product || [])
+    .map((entry: any, index: number) => {
+      const points = (Array.isArray(entry?.reimbursement_history) ? entry.reimbursement_history : [])
+        .filter((h: any) => typeof h?.factory_price === "number" && h?.application_date)
+        .map((h: any) => ({ date: new Date(h.application_date).getTime(), price: h.factory_price }))
+        .sort((a: any, b: any) => a.date - b.date);
+
+      return {
+        label: entry?.label ?? entry?.local_drug_id ?? "-",
+        color: SERIES_COLORS[index % SERIES_COLORS.length],
+        points,
+      };
+    })
+    .filter((line: any) => line.points.length > 0),
+);
+
+/**
+ * Tous les tarifs publies de la marque, une ligne par tarif.
+ *
+ * Le graphe dit la tendance, il ne donne aucun chiffre : pour lire « combien,
+ * quand, sur quelle presentation », il fallait ouvrir le tiroir d'une
+ * presentation apres l'autre et comparer de tete. Le tableau met les memes
+ * lignes que l'onglet « Historique tarifaire » du tiroir, mais pour toutes les
+ * presentations a la fois, sous le graphe qu'il detaille.
+ *
+ * L'evolution se calcule DANS une presentation : elle compare au tarif
+ * precedent de la meme presentation, jamais a la ligne du dessus, qui peut
+ * appartenir a une autre. `changed_history` n'est pas utilise ici pour la meme
+ * raison que dans le tiroir : il ne decoupe ni aux memes dates ni aux memes
+ * circuits que `reimbursement_history`, et donnerait un ecart qui ne relie
+ * aucun des deux PFHT affiches.
+ */
+/**
+ * L'index ecrit « nan » (et parfois « - ») la ou la valeur manque : ce sont
+ * des trous du fichier source remontes tels quels, pas des libelles. Ecrits
+ * dans une cellule, ils se lisent comme une donnee.
+ */
+function clean(value: unknown): string | null {
+  const text = String(value ?? "").trim();
+  if (!text || text === "-" || text.toLowerCase() === "nan") return null;
+  return text;
+}
+
+/** La meme chose, prete a etre affichee : un tiret cadratin a la place du vide. */
+function text(value: unknown): string {
+  return clean(value) ?? "-";
+}
+
+const historyRows = computed(() =>
+  (props.product || [])
+    .flatMap((entry: any) => {
+      const history = (
+        Array.isArray(entry?.reimbursement_history) ? [...entry.reimbursement_history] : []
+      ).sort(
+        (a: any, b: any) =>
+          new Date(b?.application_date).getTime() - new Date(a?.application_date).getTime(),
+      );
+
+      return history.map((row: any, index: number) => {
+        const price = typeof row?.factory_price === "number" ? row.factory_price : null;
+        const previous =
+          history
+            .slice(index + 1)
+            .find((older: any) => typeof older?.factory_price === "number")?.factory_price ?? null;
+        const variation = price !== null && previous !== null ? price - previous : null;
+
+        return {
+          key: `${entry?.local_drug_id ?? ""}-${row?.application_date ?? ""}-${index}`,
+          presentation: entry?.label ?? entry?.local_drug_id ?? "-",
+          code: entry?.local_drug_id ?? null,
+          // Le tri de la colonne porte sur cette valeur : une date ISO se
+          // compare comme du texte, une date affichee ne se compare pas.
+          date: row?.application_date ?? "",
+          factory: price,
+          variation,
+          variationPct: variation !== null && previous ? (variation / previous) * 100 : null,
+          publicPrice: typeof row?.public_price === "number" ? row.public_price : null,
+          marge: typeof row?.marge === "number" ? row.marge : null,
+          channel: text(row?.distribution_type),
+          documentarySource: text(row?.documentary_source),
+          sourceDate: clean(row?.source_date),
+        };
+      });
+    })
+    // Du plus recent au plus ancien, toutes presentations melangees : c'est
+    // l'ordre dans lequel on lit un historique.
+    .sort((a: any, b: any) => String(b.date).localeCompare(String(a.date))),
+);
+
+/**
+ * La marge de retrocession n'existe que sur les tarifs hopital. Comme dans le
+ * tiroir, la colonne disparait quand aucune ligne n'en porte.
+ */
+const hasMarge = computed(() => historyRows.value.some((row: any) => row.marge !== null));
+
+const historyColumns = computed(() => {
+  const en = locale.value === "en";
+  return [
+    {
+      key: "presentation",
+      label: en ? "Presentation" : "Présentation",
+      sortable: true,
+      rowHeader: true,
+      minWidth: "220px",
+    },
+    { key: "date", label: en ? "Applies from" : "Applicable au", sortable: true, width: "120px" },
+    { key: "factory", label: "PFHT", numeric: true, sortable: true },
+    { key: "variation", label: en ? "Change" : "Évolution", numeric: true, sortable: true },
+    { key: "publicPrice", label: en ? "Public price" : "Prix public", numeric: true, sortable: true },
+    ...(hasMarge.value
+      ? [{ key: "marge", label: en ? "Margin" : "Marge", numeric: true, sortable: true }]
+      : []),
+    { key: "channel", label: en ? "Channel" : "Circuit", sortable: true },
+    { key: "documentarySource", label: en ? "Source" : "Source" },
+  ];
+});
+
+/** Geometrie du graphe : bornes, echelles et chemins en marches.
+
+    La largeur suit celle de la carte pour qu'une unite de viewBox vaille un
+    pixel : sinon le SVG est agrandi par la mise en page et les libelles des
+    axes, ecrits en unites de viewBox, arrivent deux fois trop gros. */
+const chartWrap = ref<HTMLElement | null>(null);
+const chartW = ref(720);
+
+const CHART = computed(() => ({
+  w: chartW.value,
+  h: 240,
+  top: 16,
+  right: 16,
+  bottom: 28,
+  left: 56,
+}));
+
+let chartObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  if (!chartWrap.value) return;
+  chartObserver = new ResizeObserver(([entry]) => {
+    const width = entry?.contentRect?.width;
+    if (width) chartW.value = Math.round(width);
+  });
+  chartObserver.observe(chartWrap.value);
+});
+
+onBeforeUnmount(() => chartObserver?.disconnect());
+
+const chart = computed(() => {
+  const points = series.value.flatMap((line: any) => line.points);
+  if (points.length < 2) return null;
+
+  const dates = points.map((p: any) => p.date);
+  const prices = points.map((p: any) => p.price);
+  const minDate = Math.min(...dates);
+  // La derniere marche court jusqu'a aujourd'hui : le tarif est toujours en
+  // vigueur, la ligne ne doit pas s'arreter a sa date de prise d'effet.
+  const maxDate = Math.max(Math.max(...dates), Date.now());
+  const maxPrice = Math.max(...prices);
+  // L'echelle part de zero : tronquer la base amplifie visuellement des ecarts
+  // de quelques pour cent et fait passer une baisse de 6 % pour un effondrement.
+  const low = 0;
+  const high = maxPrice * 1.15;
+
+  const x = (date: number) =>
+    CHART.value.left +
+    ((date - minDate) / (maxDate - minDate || 1)) * (CHART.value.w - CHART.value.left - CHART.value.right);
+  const y = (price: number) =>
+    CHART.value.top + (1 - (price - low) / (high - low || 1)) * (CHART.value.h - CHART.value.top - CHART.value.bottom);
+
+  const lines = series.value.map((line: any) => {
+    const steps: string[] = [];
+    line.points.forEach((point: any, index: number) => {
+      const px = x(point.date);
+      const py = y(point.price);
+      if (index === 0) steps.push(`M ${px} ${py}`);
+      else steps.push(`H ${px}`, `V ${py}`);
+    });
+    steps.push(`H ${x(maxDate)}`);
+    return {
+      ...line,
+      path: steps.join(" "),
+      dots: line.points.map((point: any) => ({ ...point, cx: x(point.date), cy: y(point.price) })),
+    };
+  });
+
+  // Trois reperes de prix, et une annee tous les deux ans au plus dense.
+  const priceTicks = [low, (low + high) / 2, high].map((value) => ({ value, y: y(value) }));
+  const years: { label: string; x: number }[] = [];
+  const firstYear = new Date(minDate).getFullYear();
+  const lastYear = new Date(maxDate).getFullYear();
+  const stride = Math.max(1, Math.ceil((lastYear - firstYear) / 6));
+  for (let year = firstYear; year <= lastYear; year += stride) {
+    years.push({ label: String(year), x: x(new Date(`${year}-01-01`).getTime()) });
+  }
+
+  return { lines, priceTicks, years, minDate, maxDate };
+});
+
+/**
+ * Survol du graphe : on lit la date sous le curseur et, pour chaque
+ * presentation, le dernier tarif entre en vigueur avant cette date, le prix
+ * qui s'appliquait ce jour-la, pas le point le plus proche.
+ *
+ * Sous dix courbes, l'infobulle ne garde que la courbe la plus proche du
+ * curseur : le lecteur qui pose le pointeur sur un tarif veut ce tarif, pas
+ * la liste de toute la gamme. Meme regle que les graphes Romulus
+ * (`rmTooltipTrigger`). Au-dela, les courbes se serrent au point qu'on ne
+ * vise plus rien : la colonne entiere reprend la main.
+ */
+const hover = ref<{
+  x: number;
+  date: number;
+  items: { label: string; color: string; price: number }[];
+} | null>(null);
+
+function onChartMove(event: MouseEvent) {
+  const box = (event.currentTarget as SVGElement).getBoundingClientRect();
+  if (!chart.value || !box.width) return;
+
+  // Le SVG est mis a l'echelle par la mise en page : on repasse en unites de
+  // viewBox avant de convertir en date.
+  const vx = ((event.clientX - box.left) / box.width) * CHART.value.w;
+  const ratio =
+    (vx - CHART.value.left) / (CHART.value.w - CHART.value.left - CHART.value.right);
+  const clamped = Math.min(1, Math.max(0, ratio));
+  const date = chart.value.minDate + clamped * (chart.value.maxDate - chart.value.minDate);
+
+  // Les points du trace portent deja leur ordonnee : de quoi mesurer la
+  // distance verticale au curseur sans rejouer l'echelle des prix.
+  const vy = ((event.clientY - box.top) / box.height) * CHART.value.h;
+
+  const items = chart.value.lines
+    .map((line: any) => {
+      const applicable = [...line.dots]
+        .filter((dot: any) => dot.date <= date)
+        .sort((a: any, b: any) => b.date - a.date)[0];
+      return applicable
+        ? { label: line.label, color: line.color, price: applicable.price, y: applicable.cy }
+        : null;
+    })
+    .filter(Boolean) as { label: string; color: string; price: number; y: number }[];
+
+  const single =
+    items.length > 1 && rmTooltipTrigger(items.length) === "item"
+      ? [items.reduce((best, item) => (Math.abs(item.y - vy) < Math.abs(best.y - vy) ? item : best))]
+      : items;
+
+  hover.value = items.length
+    ? {
+        x: CHART.value.left + clamped * (CHART.value.w - CHART.value.left - CHART.value.right),
+        date,
+        items: single,
+      }
+    : null;
+}
+
+const priced = computed(() => rows.value.filter((row: any) => row.factory !== null));
+
+const range = computed(() => {
+  const values = priced.value.map((row: any) => row.factory as number);
+  if (!values.length) return null;
+  return { min: Math.min(...values), max: Math.max(...values) };
+});
+
+const lastUpdate = computed(() => {
+  const dates = rows.value
+    .map((row: any) => row.date)
+    .filter(Boolean)
+    .sort((a: string, b: string) => new Date(b).getTime() - new Date(a).getTime());
+  return dates[0] ?? null;
+});
+
+/** Tendance recente : le sens des dernieres variations de PFHT. */
+/** Presentation ouverte dans le tiroir de detail. */
+const drawerProduct = ref<any | null>(null);
+
+const trend = computed(() => {
+  const variations = rows.value
+    .map((row: any) => row.variation)
+    .filter((value: any) => typeof value === "number" && value !== 0);
+  if (!variations.length) return { key: "flat", label: locale.value === "en" ? "Stable" : "Stable" };
+  const total = variations.reduce((sum: number, value: number) => sum + value, 0);
+  if (total < 0) return { key: "down", label: locale.value === "en" ? "Falling" : "En baisse" };
+  if (total > 0) return { key: "up", label: locale.value === "en" ? "Rising" : "En hausse" };
+  return { key: "flat", label: "Stable" };
+});
+</script>
+
+<template>
+  <section class="pv">
+    <!-- Certaines marques n'ont aucun tarif publie : un bandeau de zeros suivi
+         de cartes vides donnait l'impression d'un chargement rate. On le dit
+         une fois, et on s'arrete la. -->
+    <template v-if="!rows.length">
+      <p class="pv_none">
+        <RmIcon name="Info" :size="16" />
+        {{
+          locale === "en"
+            ? `No published tariff for the brand ${brand ?? ""}.`
+            : `Aucun tarif publié pour la marque ${brand ?? ""}.`
+        }}
+      </p>
+      <p class="pv_source">
+        <oip-drugs-heart-elastic-source-container-elastic
+          :uuid="HEART_SOURCE_UUIDS.PRICE_TRACKER"
+          :last-label="$t('oipDrugs.heart.sources.lastPrice')"
+          :last-date="lastPriceDates"
+        />
+      </p>
+    </template>
+
+    <template v-else>
+      <p class="pv_scope">
+      <RmIcon name="Info" :size="14" />
+      {{
+        locale === "en"
+          ? `Price tracking covers every presentation (CIP) of the brand ${brand ?? ""}.`
+          : `Le suivi des prix couvre toutes les présentations (CIP) de la marque ${brand ?? ""}.`
+      }}
+    </p>
+
+    <!-- Resume de la marque : ce qu'on veut savoir avant d'entrer dans le detail. -->
+    <div class="pv_kpis">
+      <div class="pv_kpi">
+        <p class="pv_kpi_value">{{ priced.length }}</p>
+        <p class="pv_kpi_label">
+          {{ locale === "en" ? "Priced presentations" : "Présentations tarifées" }}
+        </p>
+      </div>
+
+      <div class="pv_kpi">
+        <p class="pv_kpi_value">
+          <template v-if="range">
+            {{ money(range.min) }}<span v-if="range.max !== range.min"> – {{ money(range.max) }}</span>
+          </template>
+          <template v-else>-</template>
+        </p>
+        <p class="pv_kpi_label">{{ locale === "en" ? "Ex-factory range" : "Fourchette PFHT" }}</p>
+      </div>
+
+      <div class="pv_kpi">
+        <p class="pv_kpi_value">
+          <RmDate v-if="lastUpdate" :date="lastUpdate" :lang="locale" />
+          <template v-else>-</template>
+        </p>
+        <p class="pv_kpi_label">
+          {{ locale === "en" ? "Latest tariff update" : "Dernière màj tarifaire" }}
+        </p>
+      </div>
+
+      <div class="pv_kpi">
+        <p class="pv_kpi_value pv_trend" :class="`is_${trend.key}`">
+          <RmIcon
+            :name="trend.key === 'down' ? 'TrendDown' : trend.key === 'up' ? 'TrendUp' : 'Minus'"
+            :size="16"
+          />
+          {{ trend.label }}
+        </p>
+        <p class="pv_kpi_label">{{ locale === "en" ? "Recent trend" : "Tendance récente" }}</p>
+      </div>
+    </div>
+
+    <div class="pv_panel">
+      <h3 class="pv_panel_title">
+        {{ locale === "en" ? "Price per presentation" : "Prix par présentation" }}
+      </h3>
+      <p class="pv_panel_sub">
+        {{
+          locale === "en"
+            ? "Ex-factory (PFHT) and public price of the latest applicable tariff. Change, previous price and margin are derived from these amounts."
+            : "Prix fabricant HT (PFHT) et prix public du dernier tarif applicable. Variation, prix précédent et écart sont calculés à partir de ces montants."
+        }}
+      </p>
+
+      <div class="pv_grid">
+        <article
+          v-for="row in rows"
+          :key="row.key"
+          class="pv_card"
+          @click="drawerProduct = row.source"
+        >
+          <header class="pv_card_head">
+            <div class="pv_card_titleline">
+              <h4 class="pv_card_title">{{ row.label }}</h4>
+              <RmTag v-if="row.channel" :variant="row.channel.variant">
+                {{ row.channel.label }}
+              </RmTag>
+            </div>
+            <p v-if="row.date" class="pv_card_date">
+              <RmIcon name="Calendar" :size="14" />
+              {{ locale === "en" ? "Tariff of" : "Tarif au" }}
+              <RmDate :date="row.date" :lang="locale" />
+            </p>
+          </header>
+
+          <div class="pv_card_price">
+            <p class="pv_price">
+              {{ money(row.factory) }} <span class="pv_price_unit">PFHT</span>
+            </p>
+
+            <div v-if="typeof row.variation === 'number' && row.variation !== 0" class="pv_var">
+              <p class="pv_var_value" :class="row.variation < 0 ? 'is_down' : 'is_up'">
+                <RmIcon :name="row.variation < 0 ? 'TrendDown' : 'TrendUp'" :size="14" />
+                {{ row.variation > 0 ? "+" : "" }}{{ money(row.variation) }}
+                <span v-if="row.variationPct !== null">({{ percent(row.variationPct) }})</span>
+              </p>
+              <p v-if="row.previous !== null" class="pv_var_prev">
+                {{ locale === "en" ? "vs previous tariff" : "vs tarif précédent" }}
+                ({{ money(row.previous) }})
+              </p>
+            </div>
+          </div>
+
+          <div class="pv_card_grid">
+            <div>
+              <p class="pv_field_label">
+                {{ locale === "en" ? "Public price incl. VAT" : "Prix public TTC" }}
+              </p>
+              <p class="pv_field_value">{{ money(row.publicPrice) }}</p>
+            </div>
+
+            <div v-if="row.reimbursementRate !== null">
+              <p class="pv_field_label">
+                {{ locale === "en" ? "Reimbursement rate" : "Taux de remboursement" }}
+              </p>
+              <p class="pv_field_value">
+                {{ row.reimbursementRate.toLocaleString("fr-FR", { maximumFractionDigits: 0 }) }} %
+              </p>
+            </div>
+
+            <div v-if="row.margin !== null">
+              <p class="pv_field_label">
+                {{ locale === "en" ? "Ex-factory → public" : "Écart PFHT → public" }}
+              </p>
+              <p class="pv_field_value">
+                {{ row.margin > 0 ? "+" : "" }}{{ money(row.margin) }}
+                <span v-if="row.marginPct !== null" class="pv_field_muted">
+                  ({{ percent(row.marginPct) }})
+                </span>
+              </p>
+            </div>
+
+            <div v-if="row.manufacturer">
+              <p class="pv_field_label">{{ locale === "en" ? "Manufacturer" : "Fabricant" }}</p>
+              <p class="pv_field_value">{{ row.manufacturer }}</p>
+            </div>
+
+            <div v-if="row.marketedOn">
+              <p class="pv_field_label">
+                {{ locale === "en" ? "Marketing date" : "Date de commercialisation" }}
+              </p>
+              <p class="pv_field_value">
+                <RmDate :date="row.marketedOn" :lang="locale" />
+                <span v-if="row.notMarketed" class="pv_field_muted">
+                  ({{ locale === "en" ? "no longer marketed" : "non commercialisée" }})
+                </span>
+              </p>
+            </div>
+
+            <div v-else-if="row.listedOn">
+              <p class="pv_field_label">
+                {{ locale === "en" ? "Listed since" : "Inscrit depuis" }}
+              </p>
+              <p class="pv_field_value">
+                <RmDate :date="row.listedOn" :lang="locale" />
+              </p>
+            </div>
+
+            <div v-if="row.code">
+              <p class="pv_field_label">{{ row.codeLabel }}</p>
+              <p class="pv_field_value pv_code">{{ row.code }}</p>
+            </div>
+          </div>
+        </article>
+      </div>
+
+      <p class="pv_source">
+        <oip-drugs-heart-elastic-source-container-elastic
+          :uuid="HEART_SOURCE_UUIDS.PRICE_TRACKER"
+          :last-label="$t('oipDrugs.heart.sources.lastPrice')"
+          :last-date="lastPriceDates"
+        />
+      </p>
+    </div>
+
+    <div class="pv_panel">
+      <h3 class="pv_panel_title">
+        {{ locale === "en" ? "Tariff history (ex-factory)" : "Historique tarifaire (PFHT)" }}
+      </h3>
+      <p class="pv_panel_sub">
+        {{
+          locale === "en"
+            ? "Ex-factory price over time, per presentation."
+            : "Évolution du prix fabricant HT dans le temps, par présentation."
+        }}
+      </p>
+
+      <template v-if="chart">
+        <div ref="chartWrap" class="pv_chart_wrap">
+        <svg
+          class="pv_chart"
+          :viewBox="`0 0 ${CHART.w} ${CHART.h}`"
+          role="img"
+          @mousemove="onChartMove"
+          @mouseleave="hover = null"
+        >
+          <!-- Reperes de prix : trois lignes suffisent a situer les marches. -->
+          <g class="pv_grid_lines">
+            <template v-for="tick in chart.priceTicks" :key="tick.value">
+              <line :x1="CHART.left" :x2="CHART.w - CHART.right" :y1="tick.y" :y2="tick.y" />
+              <text :x="CHART.left - 8" :y="tick.y + 4" text-anchor="end">
+                {{ Math.round(tick.value).toLocaleString("fr-FR") }} €
+              </text>
+            </template>
+          </g>
+
+          <g class="pv_axis">
+            <text
+              v-for="year in chart.years"
+              :key="year.label"
+              :x="year.x"
+              :y="CHART.h - 8"
+              text-anchor="middle"
+            >
+              {{ year.label }}
+            </text>
+          </g>
+
+          <g v-for="line in chart.lines" :key="line.label">
+            <path :d="line.path" :stroke="line.color" fill="none" stroke-width="2" />
+            <circle
+              v-for="dot in line.dots"
+              :key="dot.date"
+              :cx="dot.cx"
+              :cy="dot.cy"
+              r="3.5"
+              :fill="line.color"
+            />
+          </g>
+
+          <line
+            v-if="hover"
+            class="pv_cursor"
+            :x1="hover.x"
+            :x2="hover.x"
+            :y1="CHART.top"
+            :y2="CHART.h - CHART.bottom"
+          />
+        </svg>
+
+        <!-- Infobulle posee en pourcentage : le SVG est redimensionne par la
+             mise en page, ses unites ne sont pas des pixels d'ecran. -->
+        <div
+          v-if="hover"
+          class="pv_tip"
+          :class="{ is_left: hover.x > CHART.w * 0.6 }"
+          :style="{ left: `${(hover.x / CHART.w) * 100}%` }"
+        >
+          <p class="pv_tip_date">{{ new Date(hover.date).toLocaleDateString("fr-FR") }}</p>
+          <p v-for="item in hover.items" :key="item.label" class="pv_tip_row">
+            <span class="pv_legend_dot" :style="{ background: item.color }" />
+            <span class="pv_tip_label">{{ item.label }}</span>
+            <b>{{ money(item.price) }}</b>
+          </p>
+        </div>
+        </div>
+
+        <ul class="pv_legend">
+          <li v-for="line in chart.lines" :key="line.label">
+            <span class="pv_legend_dot" :style="{ background: line.color }" />
+            {{ line.label }}
+          </li>
+        </ul>
+      </template>
+
+      <p v-else class="pv_empty">
+        {{
+          locale === "en"
+            ? "Not enough tariff records to draw a trend for this brand."
+            : "Pas assez de tarifs successifs pour tracer une évolution sur cette marque."
+        }}
+      </p>
+
+      <!-- Le detail du graphe : les memes tarifs, en chiffres, toutes
+           presentations confondues. Le tiroir d'une presentation montre les
+           siens ; ici on compare les presentations entre elles sans l'ouvrir. -->
+      <template v-if="historyRows.length">
+        <h4 class="pv_table_title">
+          {{ locale === "en" ? "Every published tariff" : "Tous les tarifs publiés" }}
+        </h4>
+        <p class="pv_panel_sub">
+          {{
+            locale === "en"
+              ? "One row per published tariff, all presentations together. The change compares with the previous tariff of the same presentation."
+              : "Une ligne par tarif publié, toutes présentations confondues. L'évolution compare au tarif précédent de la même présentation."
+          }}
+        </p>
+
+        <RmTable
+          :columns="historyColumns"
+          :rows="historyRows"
+          :caption="locale === 'en' ? 'Tariff history, all presentations' : 'Historique tarifaire, toutes présentations'"
+          row-key="key"
+          compact
+          search="auto"
+          :search-placeholder="
+            locale === 'en'
+              ? 'Search a presentation, a channel...'
+              : 'Rechercher une présentation, un circuit...'
+          "
+          :page-size="25"
+          max-height="520px"
+          :empty-text="locale === 'en' ? 'No published tariff' : 'Aucun tarif publié'"
+        >
+          <template #presentation="{ row }">
+            <span class="pv_table_name">{{ row.presentation }}</span>
+            <span v-if="row.code" class="pv_table_code">{{ row.code }}</span>
+          </template>
+
+          <template #date="{ value }">
+            <RmDate v-if="value" :date="value" :lang="locale" />
+            <template v-else>-</template>
+          </template>
+
+          <template #factory="{ value }">{{ money(value) }}</template>
+          <template #publicPrice="{ value }">{{ money(value) }}</template>
+          <template #marge="{ value }">{{ money(value) }}</template>
+
+          <!-- Un tarif reconduit au meme prix (le cas courant) laisse la
+               cellule vide plutot que d'ecrire « 0,00 € (0 %) » sur toute la
+               hauteur du tableau : les cartes du dessus font deja ce choix. -->
+          <template #variation="{ row }">
+            <template v-if="!row.variation">-</template>
+            <span
+              v-else
+              class="pv_table_var"
+              :class="row.variation > 0 ? 'is_up' : 'is_down'"
+            >
+              {{ row.variation > 0 ? "+" : "" }}{{ money(row.variation) }}
+              <span v-if="row.variationPct !== null" class="pv_field_muted">
+                ({{ percent(row.variationPct) }})
+              </span>
+            </span>
+          </template>
+
+          <template #documentarySource="{ row }">
+            {{ row.documentarySource }}
+            <span v-if="row.sourceDate" class="pv_field_muted">
+              · <RmDate :date="row.sourceDate" :lang="locale" />
+            </span>
+          </template>
+        </RmTable>
+      </template>
+
+      <p class="pv_source">
+        <oip-drugs-heart-elastic-source-container-elastic
+          :uuid="HEART_SOURCE_UUIDS.PRICE_TRACKER"
+          :last-label="$t('oipDrugs.heart.sources.lastPrice')"
+          :last-date="lastPriceDates"
+        />
+      </p>
+      </div>
+    </template>
+
+    <!-- Tout ce que l'index sait de la presentation choisie. -->
+    <oip-drugs-heart-results-details-presentation-drawer
+      :product="drawerProduct"
+      @close="drawerProduct = null"
+    />
+  </section>
+</template>
+
+<style scoped>
+.pv {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-sizing: border-box;
+  width: 100%;
+  padding-inline: 32px;
+}
+
+.pv_scope {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--medium);
+  font-size: 13px;
+}
+
+/* Titre du tableau de detail : un cran sous le titre de panneau, pour dire
+   qu'il detaille le graphe au-dessus plutot que d'ouvrir un autre sujet. */
+.pv_table_title {
+  margin-top: 8px;
+  color: var(--dark);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* Meme code couleur que la variation des cartes : une baisse de prix se lit
+   en vert, une hausse en rouge. */
+.pv_table_var.is_down {
+  color: var(--system-success-hover);
+}
+
+.pv_table_var.is_up {
+  color: var(--system-alert-hover);
+}
+
+.pv_table_name {
+  font-weight: 500;
+}
+
+/* Le code tombe sous le libelle : deux presentations d'une meme marque ne se
+   distinguent parfois que par lui. */
+.pv_table_code {
+  display: block;
+  color: var(--medium);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Bandeau de synthese : quatre mesures, un filet degrade en tete. */
+.pv_kpis {
+  display: grid;
+  /* Quatre colonnes de meme largeur, puis deux, puis une : avec `auto-fit`, la
+     quatrieme mesure tombait seule sur une deuxieme ligne, pleine largeur, et
+     le bandeau paraissait casse. */
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border: 1px solid var(--light);
+  border-radius: 12px;
+  background: var(--white);
+  overflow: hidden;
+  box-shadow: var(--small-shadow);
+}
+
+.pv_kpis::before {
+  content: "";
+  grid-column: 1 / -1;
+  height: 3px;
+  background: linear-gradient(to right, var(--primary), color-mix(in srgb, var(--primary) 35%, var(--white)));
+}
+
+.pv_kpi {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 20px 16px;
+  border-left: 1px solid var(--light);
+  text-align: center;
+}
+
+.pv_kpi:first-of-type {
+  border-left: none;
+}
+
+@media (max-width: 1100px) {
+  .pv_kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .pv_kpi:nth-of-type(odd) {
+    border-left: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .pv_kpis {
+    grid-template-columns: 1fr;
+  }
+
+  .pv_kpi {
+    border-left: none;
+  }
+}
+
+.pv_none {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  border: 1px solid var(--light);
+  border-radius: 12px;
+  background: var(--white);
+  color: var(--dark);
+  font-size: 14px;
+}
+
+.pv_kpi_value {
+  color: var(--primary);
+  font-size: 19px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.pv_kpi_label {
+  color: var(--medium);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.pv_trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.pv_trend.is_down {
+  color: var(--system-success-hover);
+}
+
+.pv_trend.is_up {
+  color: var(--system-alert-hover);
+}
+
+.pv_trend.is_flat {
+  color: var(--dark);
+}
+
+.pv_panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 20px;
+  border: 1px solid var(--light);
+  border-radius: 12px;
+  background: var(--white);
+}
+
+.pv_panel_title {
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.pv_panel_sub {
+  color: var(--medium);
+  font-size: 14px;
+}
+
+.pv_grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 16px;
+  margin-top: 12px;
+}
+
+/* La carte ouvre le detail complet de la presentation. */
+.pv_card {
+  cursor: pointer;
+  transition: border-color 0.15s linear, box-shadow 0.15s linear;
+}
+
+.pv_card:hover {
+  border-color: color-mix(in srgb, var(--primary) 35%, var(--light));
+  box-shadow: var(--medium-shadow);
+}
+
+.pv_card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--light);
+  border-radius: 12px;
+  background: var(--demi-fond);
+}
+
+.pv_card_titleline {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+/* Le tag garde sa largeur : un libelle long ne doit pas l'ecraser. */
+.pv_card_titleline :deep(.rm-tag) {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.pv_card_title {
+  font-size: 15px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.pv_card_date {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.pv_card_price {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.pv_price {
+  color: var(--primary);
+  font-size: 26px;
+  font-weight: 800;
+}
+
+.pv_price_unit {
+  margin-left: 4px;
+  color: var(--medium);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.pv_var {
+  text-align: right;
+}
+
+.pv_var_value {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.pv_var_value.is_down {
+  color: var(--system-success-hover);
+}
+
+.pv_var_value.is_up {
+  color: var(--system-alert-hover);
+}
+
+.pv_var_prev {
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.pv_card_grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--light);
+}
+
+.pv_field_label {
+  color: var(--medium);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.pv_field_value {
+  margin-top: 2px;
+  font-size: 15px;
+}
+
+.pv_field_muted {
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.pv_code {
+  font-family: "Courier New", monospace;
+  font-size: 14px;
+}
+
+.pv_source {
+  margin-top: 12px;
+  font-size: 13px;
+}
+
+.pv_chart_wrap {
+  position: relative;
+  margin-top: 12px;
+}
+
+.pv_chart {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.pv_cursor {
+  stroke: var(--medium);
+  stroke-width: 1;
+  stroke-dasharray: 4 4;
+}
+
+.pv_tip {
+  position: absolute;
+  top: 8px;
+  z-index: 2;
+  min-width: 220px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--darkest);
+  color: var(--white);
+  font-size: 13px;
+  pointer-events: none;
+  transform: translateX(12px);
+}
+
+/* Au-dela des deux tiers du graphe, l'infobulle bascule a gauche du curseur
+   plutot que de sortir de la carte. */
+.pv_tip.is_left {
+  transform: translateX(calc(-100% - 12px));
+}
+
+.pv_tip_date {
+  margin-bottom: 6px;
+  color: var(--light);
+  font-size: 12px;
+}
+
+.pv_tip_row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+}
+
+.pv_tip_label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 220px;
+}
+
+.pv_grid_lines line {
+  stroke: var(--light);
+  stroke-width: 1;
+}
+
+.pv_grid_lines text,
+.pv_axis text {
+  fill: var(--medium);
+  font-size: 12px;
+}
+
+.pv_legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+  margin-top: 8px;
+  list-style: none;
+  color: var(--medium);
+  font-size: 12px;
+}
+
+.pv_legend li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pv_legend_dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.pv_empty {
+  margin-top: 12px;
+  color: var(--medium);
+  font-size: 14px;
+}
+</style>