@tekkare/romulus 0.1.251 → 0.1.252

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

@@ -0,0 +1,461 @@
+<!--
+  Un pays du regard international : ses prix publies, puis ses decisions.
+
+  La carte reprend la lecture de l'onglet Prix France : le prix d'abord, en
+  cartes de presentation, puis la liste des decisions en tableau. Elle ne
+  calcule rien : la page lui donne des lignes de prix deja converties et des
+  decisions deja normalisees, elle les met en page et signale ce qu'on ouvre.
+-->
+<script setup lang="ts">
+import type { HeartIntlPriceRow } from "../../../../../oip-drugs/utils/heartIntlPrice";
+import type { HeartIntlRecord } from "../../../../../oip-drugs/composables/useHeartIntlApprovals";
+
+const props = defineProps<{
+  /** Code ISO du pays (ou « EU » pour l'Union europeenne). */
+  iso: string;
+  /** Nom du pays, dans la langue lue. */
+  label: string;
+  /** L'agence dont viennent les decisions : EMA, G-BA, AIFA... */
+  agency: string;
+  /** Les presentations tarifees du pays. Vide pour l'Union europeenne. */
+  prices: HeartIntlPriceRow[];
+  /** Les decisions du registre, deja normalisees. */
+  records: HeartIntlRecord[];
+  /** Fiche Directus du referentiel de prix du pays. */
+  priceSource?: string | null;
+  /** Fiche Directus du registre d'autorisation du pays. */
+  approvalSource?: string | null;
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: "select-price", row: HeartIntlPriceRow): void;
+  (event: "select-record", record: HeartIntlRecord): void;
+}>();
+
+const { locale } = useI18n();
+const en = computed(() => locale.value === "en");
+
+const money = (value: number | null | undefined, currency = "EUR") =>
+  typeof value === "number"
+    ? `${Math.round(value).toLocaleString("fr-FR")} ${currency === "EUR" ? "€" : currency}`
+    : "-";
+
+const percent = (value: number | null | undefined) =>
+  typeof value === "number"
+    ? `${value > 0 ? "+" : ""}${value.toLocaleString("fr-FR", { maximumFractionDigits: 1 })} %`
+    : "";
+
+/** La derniere date connue du pays, prix et decisions confondus. */
+const lastUpdate = computed(() => {
+  const dates = [
+    ...props.prices.map((row) => row.date),
+    ...props.records.map((record) => record.date),
+  ]
+    .filter(Boolean)
+    .sort((a: any, b: any) => new Date(b).getTime() - new Date(a).getTime());
+  return dates[0] ?? null;
+});
+
+/** Tous les registres ne rendent pas un verdict : l'AIFA classe, le G-BA juge. */
+const hasOutcome = computed(() => props.records.some((record) => record.status));
+
+/** La date du dernier tarif du pays, citee par sa source. */
+const lastPriceDates = computed(() => props.prices.map((row) => row.date));
+
+const columns = computed(() => [
+  { key: "date", label: "Date", minWidth: "110px", rowHeader: true },
+  { key: "typeLabel", label: en.value ? "Type" : "Nature", minWidth: "150px" },
+  { key: "title", label: en.value ? "Subject" : "Objet", minWidth: "260px" },
+  ...(hasOutcome.value
+    ? [{ key: "status", label: en.value ? "Outcome" : "Résultat", minWidth: "130px" }]
+    : []),
+]);
+
+/** La teinte de l'etiquette de resultat. Romulus n'a pas de rouge : rose. */
+const tone = (record: HeartIntlRecord) =>
+  record.statusTone === "good" ? "green" : record.statusTone === "bad" ? "rose" : "gray";
+</script>
+
+<template>
+  <article class="ic">
+    <header class="ic_head">
+      <RmFlag :code="iso" :height="18" :title="label" />
+      <h3 class="ic_country">{{ label }}</h3>
+      <RmTag variant="gray">{{ agency }}</RmTag>
+      <span class="ic_counts">
+        <template v-if="prices.length">
+          {{ prices.length }}
+          {{ en ? (prices.length > 1 ? "presentations" : "presentation") : "présentation" + (prices.length > 1 ? "s" : "") }}
+        </template>
+        <template v-if="prices.length && records.length"> · </template>
+        <template v-if="records.length">
+          {{ records.length }}
+          {{ en ? (records.length > 1 ? "decisions" : "decision") : "décision" + (records.length > 1 ? "s" : "") }}
+        </template>
+      </span>
+      <span v-if="lastUpdate" class="ic_last">
+        <RmIcon name="Calendar" :size="14" />
+        <RmDate :date="lastUpdate" :lang="en ? 'en' : 'fr'" compact />
+      </span>
+    </header>
+
+    <!-- Bandeau prix : une carte par presentation tarifee, le prix en grand. -->
+    <section v-if="prices.length" class="ic_band">
+      <p class="ic_band_title">
+        {{ en ? "Published prices" : "Prix publiés" }}
+        <span class="ic_band_sub">
+          {{
+            en
+              ? "latest applicable price, converted to euros"
+              : "dernier prix applicable, converti en euros"
+          }}
+        </span>
+      </p>
+
+      <!-- Une marque peut porter vingt presentations dans un pays : le bandeau
+           defile horizontalement plutot que d'empiler des rangees ou de cacher
+           le reste derriere un bouton. -->
+      <div
+        class="ic_scroller"
+        tabindex="0"
+        role="group"
+        :aria-label="en ? `Published prices in ${label}` : `Prix publiés en ${label}`"
+      >
+        <button
+          v-for="row in prices"
+          :key="row.key"
+          type="button"
+          class="ic_price_card"
+          @click="emit('select-price', row)"
+        >
+          <span class="ic_price_head">
+            <span class="ic_price_name">{{ row.product }}</span>
+            <RmTag v-if="row.category" variant="gray">{{ row.category }}</RmTag>
+          </span>
+
+          <span v-if="row.date" class="ic_price_date">
+            <RmIcon name="Calendar" :size="13" />
+            {{ en ? "Price of" : "Tarif au" }}
+            <RmDate :date="row.date" :lang="en ? 'en' : 'fr'" compact />
+          </span>
+
+          <span class="ic_price_value">
+            {{ money(row.priceEur) }}
+            <span class="ic_price_type">{{ row.typeLabel }}</span>
+          </span>
+
+          <span class="ic_price_fields">
+            <span class="ic_field">
+              <span class="ic_field_label">{{ en ? "Local price" : "Prix local" }}</span>
+              <span class="ic_field_value">{{ money(row.priceLocal, row.currency) }}</span>
+            </span>
+            <span v-if="row.variation" class="ic_field">
+              <span class="ic_field_label">{{ en ? "Last change" : "Dernière variation" }}</span>
+              <span class="ic_field_value" :class="row.variation < 0 ? 'is_down' : 'is_up'">
+                <RmIcon :name="row.variation < 0 ? 'TrendDown' : 'TrendUp'" :size="13" />
+                {{ money(row.variation, row.currency) }}
+                <template v-if="row.variationPct !== null">({{ percent(row.variationPct) }})</template>
+              </span>
+            </span>
+            <span v-if="row.manufacturer" class="ic_field">
+              <span class="ic_field_label">{{ en ? "Manufacturer" : "Fabricant" }}</span>
+              <span class="ic_field_value">{{ row.manufacturer }}</span>
+            </span>
+            <span v-if="row.localId" class="ic_field">
+              <span class="ic_field_label">{{ en ? "Local code" : "Code local" }}</span>
+              <span class="ic_field_value ic_mono">{{ row.localId }}</span>
+            </span>
+          </span>
+        </button>
+      </div>
+
+    </section>
+
+    <!-- Decisions du registre : indications, avis, autorisations. -->
+    <section class="ic_records">
+      <p class="ic_band_title">
+        {{ en ? "Indications and decisions" : "Indications et décisions" }}
+        <span class="ic_band_sub">{{ agency }}</span>
+      </p>
+
+      <RmTable
+        v-if="records.length"
+        :columns="columns"
+        :rows="records"
+        row-key="key"
+        compact
+        flat
+        :page-size="5"
+        max-height="auto"
+        :caption="`${label} · ${agency}`"
+        :empty-text="en ? 'No decision' : 'Aucune décision'"
+        @row-click="(row: any) => emit('select-record', row as HeartIntlRecord)"
+      >
+        <template #date="{ row }">
+          <RmDate v-if="row.date" :date="row.date" :lang="en ? 'en' : 'fr'" compact />
+          <span v-else>-</span>
+        </template>
+
+        <template #typeLabel="{ row }">
+          <span class="ic_type">
+            <RmIcon :name="row.icon" :size="14" />
+            {{ row.typeLabel }}
+          </span>
+          <span v-if="row.badge" class="ic_ref">{{ row.badge }}</span>
+        </template>
+
+        <template #title="{ row }">
+          <span class="ic_record_title">{{ row.title }}</span>
+          <span v-if="row.excerpt" class="ic_record_excerpt">{{ row.excerpt }}</span>
+        </template>
+
+        <template #status="{ row }">
+          <RmTag v-if="row.status" :variant="tone(row as HeartIntlRecord)">{{ row.status }}</RmTag>
+          <span v-else>-</span>
+        </template>
+      </RmTable>
+
+      <p v-else-if="loading" class="ic_empty">
+        {{ en ? "Loading decisions…" : "Chargement des décisions…" }}
+      </p>
+      <p v-else class="ic_empty">
+        {{ en ? `No decision published by ${agency}.` : `Aucune décision publiée par ${agency}.` }}
+      </p>
+    </section>
+
+    <!-- Sources du pays, en pied de carte comme sur les autres pages. -->
+    <footer v-if="priceSource || approvalSource" class="ic_sources">
+      <oip-drugs-heart-elastic-source-container-elastic
+        v-if="priceSource"
+        :uuid="priceSource"
+        prefer-nickname
+        :kind="approvalSource ? (en ? 'Price source' : 'Source prix') : undefined"
+        :last-label="$t('oipDrugs.heart.sources.lastPrice')"
+        :last-date="lastPriceDates"
+      />
+      <oip-drugs-heart-elastic-source-container-elastic
+        v-if="approvalSource"
+        :uuid="approvalSource"
+        prefer-nickname
+        :kind="en ? 'Approvals source' : 'Source décisions'"
+      />
+    </footer>
+  </article>
+</template>
+
+<style scoped>
+.ic {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  background: var(--white);
+  border: 1px solid var(--light, #ececf2);
+  border-radius: 14px;
+  padding: 20px;
+}
+
+.ic_head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--light, #ececf2);
+}
+
+.ic_country {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--darkest);
+}
+
+.ic_counts,
+.ic_last {
+  font-size: 12px;
+  color: var(--medium);
+}
+
+.ic_last {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.ic_band_title {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--darkest);
+  margin-bottom: 10px;
+}
+
+.ic_band_sub {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--medium);
+}
+
+.ic_scroller {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  padding-bottom: 6px;
+  scroll-snap-type: x proximity;
+  scrollbar-width: thin;
+}
+
+.ic_scroller:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.ic_price_card {
+  flex: 0 0 260px;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: left;
+  font-family: inherit;
+  background: var(--lightest, #f7f7fb);
+  border: 1px solid var(--light, #ececf2);
+  border-radius: 12px;
+  padding: 14px;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.ic_price_card:hover {
+  border-color: var(--primary);
+  box-shadow: 0 2px 10px rgb(0 0 0 / 6%);
+}
+
+.ic_price_head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.ic_price_name {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--darkest);
+  line-height: 1.3;
+}
+
+.ic_price_date {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--medium);
+}
+
+.ic_price_value {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-family: var(--font-serif, inherit);
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--primary);
+}
+
+.ic_price_type {
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--medium);
+}
+
+.ic_price_fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 12px;
+  padding-top: 8px;
+  border-top: 1px solid var(--light, #ececf2);
+}
+
+.ic_field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.ic_field_label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--medium);
+}
+
+.ic_field_value {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--darkest);
+  overflow-wrap: anywhere;
+}
+
+.ic_field_value.is_down {
+  color: var(--success, #1a7f5a);
+}
+
+.ic_field_value.is_up {
+  color: var(--danger, #c0392b);
+}
+
+.ic_mono {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+
+.ic_type {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.ic_ref {
+  display: block;
+  font-size: 10px;
+  color: var(--medium);
+  white-space: nowrap;
+}
+
+.ic_record_title {
+  display: block;
+  font-weight: 600;
+  color: var(--darkest);
+}
+
+.ic_record_excerpt {
+  display: block;
+  font-size: 11px;
+  color: var(--medium);
+}
+
+.ic_empty {
+  font-size: 12px;
+  color: var(--medium);
+}
+
+.ic_sources {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 12px;
+  border-top: 1px solid var(--light, #ececf2);
+}
+</style>

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

@@ -0,0 +1,200 @@
+<!--
+  Regard international sur une marque : une carte par pays.
+
+  Chaque carte porte ce que le pays publie sur le produit : ses prix d'abord
+  (suivi mondial `ope__ww_price_tracker__tekkare`, converti en euros), puis ses
+  decisions (AIFA, AEMPS, G-BA, MHRA, EMA, FDA). Ouvrir une presentation ou une
+  decision ouvre le meme tiroir que les autres onglets de la fiche.
+
+  Deux precautions valent pour toute la lecture :
+
+  - Les conditionnements ne sont pas harmonises d'un pays a l'autre (un flacon
+    ici, deux la, 50 mg ailleurs) : on compare des presentations, jamais des
+    pays entre eux.
+  - Chaque pays publie ses propres types de prix. Le prix montre suit un ordre
+    fixe (fabricant, grossiste, public...) pour porter la meme notion partout
+    ou elle existe.
+-->
+<script setup lang="ts">
+import * as currencyModule from "../../../../../oip-drugs/composables/useCurrency";
+import { HEART_INTL_PRICE_CURRENCY, heartIntlPriceRows } from "../../../../../oip-drugs/utils/heartIntlPrice";
+import type { HeartIntlPriceRow } from "../../../../../oip-drugs/utils/heartIntlPrice";
+import type { HeartIntlRecord } from "../../../../../oip-drugs/composables/useHeartIntlApprovals";
+import { HEART_INTL_COUNTRIES } from "../../../../../oip-drugs/composables/useHeartIntlApprovals";
+import { heartFormatDate } from "../../../../../oip-drugs/utils/heartStyleAndFormat";
+
+const props = defineProps<{
+  /** Les documents du suivi mondial des prix pour la marque. */
+  docs: any[];
+  /** Les decisions des registres etrangers, par code pays. */
+  records: Record<string, HeartIntlRecord[]>;
+  /** Nom de la marque, pour la ligne de portee. */
+  brand?: string;
+  /** Les registres sont encore en vol. */
+  loading?: boolean;
+}>();
+
+const { locale } = useI18n();
+const en = computed(() => locale.value === "en");
+
+// Ex-CurrencyStore (lot P) : le composable charge lui-meme les taux, avec
+// la meme API (`getCurrency(code)`). Export nomme ou par defaut, selon le
+// portage du socle.
+const useCurrency = ((currencyModule as any).useCurrency ?? (currencyModule as any).default) as () => any;
+const currencyStore = useCurrency();
+
+/** Taux de la devise locale vers l'euro, charge par useCurrency. */
+function eurRate(iso: string) {
+  const code = HEART_INTL_PRICE_CURRENCY[iso];
+  if (!code || code === "EUR") return 1;
+  return currencyStore.getCurrency(code)?.eur_rate ?? null;
+}
+
+const priceRows = computed(() => heartIntlPriceRows(props.docs ?? [], eurRate));
+
+const pricesByCountry = computed(() => {
+  const groups: Record<string, HeartIntlPriceRow[]> = {};
+  for (const row of priceRows.value) {
+    (groups[row.iso] ??= []).push(row);
+  }
+  return groups;
+});
+
+/** Une carte par pays qui a quelque chose a dire. */
+const countries = computed(() =>
+  HEART_INTL_COUNTRIES.map((country) => ({
+    iso: country.iso,
+    key: country.key,
+    agency: country.agency,
+    label: en.value ? country.en : country.fr,
+    prices: pricesByCountry.value[country.key] ?? [],
+    records: props.records?.[country.key] ?? [],
+    priceSource: country.priceSource,
+    approvalSource: country.approvalSource,
+  })).filter((country) => country.prices.length > 0 || country.records.length > 0),
+);
+
+const decisionCount = computed(() =>
+  countries.value.reduce((sum, country) => sum + country.records.length, 0),
+);
+
+const lastUpdate = computed(() => {
+  const dates = [
+    ...priceRows.value.map((row) => row.date),
+    ...countries.value.flatMap((country) => country.records.map((record) => record.date)),
+  ]
+    .filter(Boolean)
+    .sort((a: any, b: any) => new Date(b).getTime() - new Date(a).getTime());
+  return dates[0] ?? null;
+});
+
+const kpis = computed(() => [
+  {
+    icon: "GlobeHemisphereWest",
+    value: countries.value.length,
+    legend: en.value ? "Countries covered" : "Pays couverts",
+  },
+  {
+    icon: "Package",
+    value: priceRows.value.length,
+    legend: en.value ? "Priced presentations" : "Présentations tarifées",
+  },
+  {
+    icon: "Stamp",
+    value: decisionCount.value,
+    legend: en.value ? "Decisions" : "Décisions",
+  },
+  {
+    icon: "Calendar",
+    value: lastUpdate.value ? heartFormatDate(lastUpdate.value) : "-",
+    legend: en.value ? "Latest update" : "Dernière mise à jour",
+  },
+]);
+
+/** La decision ouverte dans le tiroir des enregistrements. */
+const drawerRecord = ref<HeartIntlRecord | null>(null);
+
+function openRecord(record: HeartIntlRecord) {
+  drawerRecord.value = record;
+}
+
+/** La presentation ouverte dans le tiroir des prix. */
+const drawerPrice = ref<HeartIntlPriceRow | null>(null);
+
+/** Son pays, nomme comme la carte le nomme. */
+const drawerPriceCountry = computed(
+  () => countries.value.find((country) => country.key === drawerPrice.value?.iso)?.label,
+);
+
+</script>
+
+<template>
+  <section class="io">
+    <RmKpiBar :kpis="kpis" :loading="loading && countries.length === 0" />
+
+    <oip-drugs-heart-results-details-international-country-card
+      v-for="country in countries"
+      :key="country.key"
+      :iso="country.iso"
+      :label="country.label"
+      :agency="country.agency"
+      :prices="country.prices"
+      :records="country.records"
+      :price-source="country.priceSource"
+      :approval-source="country.approvalSource"
+      :loading="loading"
+      @select-price="drawerPrice = $event"
+      @select-record="openRecord"
+    />
+
+    <p v-if="!countries.length && !loading" class="io_none">
+      <RmIcon name="Info" :size="16" />
+      {{
+        en
+          ? `Nothing published abroad for ${brand ?? ""} in the countries covered.`
+          : `Rien de publié à l'étranger pour ${brand ?? ""} dans les pays couverts.`
+      }}
+    </p>
+
+    <!-- Une decision s'ouvre dans le tiroir commun aux autres onglets. -->
+    <oip-drugs-heart-results-details-record-drawer
+      :record="drawerRecord"
+      :source-label="drawerRecord?.sourceLabel"
+      @close="drawerRecord = null"
+    />
+
+    <!-- Une presentation a son propre tiroir : elle porte un historique de
+         prix, que les rubriques de texte du tiroir commun ne rendaient pas. -->
+    <oip-drugs-heart-results-details-international-price-drawer
+      :row="drawerPrice"
+      :country-label="drawerPriceCountry"
+      @close="drawerPrice = null"
+    />
+  </section>
+</template>
+
+<style scoped>
+.io {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.io_none {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--dark);
+}
+
+.io_none {
+  padding: 24px 0;
+}
+
+
+
+
+
+</style>