@tekkare/romulus 0.1.251 → 0.1.253

package/layer/app/oip-drugs/composables/useHeartLesIndication.ts

@@ -0,0 +1,168 @@
+import { ES_INDEX } from "../esIndices";
+import useOipDrugsElastic from "./useOipDrugsElastic";
+/**
+ * Liste en sus (LES) : lecture d'une indication.
+ *
+ * L'index LES tient une ligne par couple indication x produit. Une indication
+ * (code CPEMB13, I000711...) se lit donc en rassemblant ses lignes : la carte
+ * d'identite (libelle, produits, marques) et l'historique d'inscription de
+ * chaque produit. Ces lectures servent a la page `indication/[id]` et au tiroir
+ * LES de la fiche marque, pour que les deux montrent exactement la meme chose.
+ */
+
+/** Index de la liste en sus, sur le cluster « pubmed ». */
+export const HEART_LES_INDEX = ES_INDEX.INDICATION_SEARCH_HAS;
+
+/** Colonnes d'historique, montrees seulement si au moins un produit les renseigne. */
+const HISTORY_FIELDS = [
+  // `flag` (OUI / NON) et `tag` sont rendus en pastilles par indicationDetail.vue.
+  { field: "statut", type: "flag", name: "Status", frName: "Statut" },
+  { field: "drug_type", type: "tag", name: "Drug Type", frName: "Type" },
+  { field: "start_date", type: "date", name: "Start Date", frName: "Date Début" },
+  { field: "amm_date", type: "date", name: "AMM Date", frName: "Date AMM" },
+  { field: "end_date", type: "date", name: "End Date", frName: "Date Fin" },
+  { field: "end_motive", type: "", name: "End Motive", frName: "Motif Fin" },
+  {
+    field: "end_date_treatment",
+    type: "date",
+    name: "Treatment End Date",
+    frName: "Date Fin Traitement",
+  },
+  {
+    field: "end_date_contract",
+    type: "date",
+    name: "Contract End Date",
+    frName: "Date Fin Contrat",
+  },
+];
+
+export type LesHistoryField = (typeof HISTORY_FIELDS)[number];
+
+/** Toutes les lignes d'une indication. */
+export function useHeartLesIndicationLoader() {
+  const { queryCustomElastic } = useOipDrugsElastic();
+  const results = ref<any[] | null>(null);
+  const isLoading = ref(false);
+
+  async function load(code: string) {
+    isLoading.value = true;
+    const res = await queryCustomElastic({
+      index: HEART_LES_INDEX,
+      // `indication` est analyse : un `match` ramenait les indications
+      // voisines. La page liste agrege sur `indication.keyword`, meme champ ici.
+      customQuery: { query: { term: { "indication.keyword": code } }, size: 100 },
+      cluster: "pubmed",
+    }).catch(() => null);
+    results.value = res?.results ?? null;
+    isLoading.value = false;
+  }
+
+  return { results, isLoading, load };
+}
+
+/** Ce que la carte LES attend : l'indication et ses produits. */
+export function heartLesCardData(code: string, results: any[] | null) {
+  if (!results?.length) return null;
+  return {
+    indication: code,
+    indication_label_fr: results[0].indication_label_fr ?? "",
+    all_brand_by_ind:
+      results[0].all_brand_by_ind ??
+      results.map((r: any) => `[${r.brand} (${r.owner_regroup})]`).join(""),
+    products: results.map((r: any) => ({
+      atc5_fr: r.atc5_fr,
+      brand: r.brand,
+      owner_regroup: r.owner_regroup,
+      source: r.source,
+      start_date: r.start_date,
+    })),
+  };
+}
+
+export function heartLesAvailableFields(results: any[] | null): LesHistoryField[] {
+  if (!results) return [];
+  return HISTORY_FIELDS.filter((f) => results.find((a) => a[f.field] !== null));
+}
+
+/**
+ * En-tete de la colonne statut. Le titre de l'index (« Accès et prise en charge
+ * au titre de l'accès précoce ») tient sur six lignes dans une colonne : on le
+ * ramene a l'essentiel, la valeur OUI / NON dit le reste.
+ */
+function shortStatusTitle(title: string | null | undefined, fr: boolean) {
+  const value = title ?? "";
+  if (/acc[eè]s pr[eé]coce/i.test(value)) return fr ? "Accès précoce" : "Early access";
+  if (/liste en sus/i.test(value)) return fr ? "Liste en sus" : "Liste en sus";
+  return value;
+}
+
+/**
+ * Table d'historique : un produit par ligne, du plus recent au plus ancien.
+ *
+ * Peu de colonnes, pour tenir sans defilement horizontal : le fabricant, l'UCD
+ * et le type montent en pastilles dans la cellule du produit, et les dates de
+ * debut et de fin forment une seule periode.
+ */
+export function heartLesHistoryTable(
+  results: any[] | null,
+  locale: string,
+  companyHeader: string,
+) {
+  const fields = heartLesAvailableFields(results);
+  const has = (field: string) => fields.some((f) => f.field === field);
+  const fr = locale === "fr";
+  const statusName = has("statut")
+    ? shortStatusTitle(results?.find((a) => a.statut_title !== null)?.statut_title, fr)
+    : "";
+
+  const header: string[] = [fr ? "Produit" : "Product", "Source"];
+  const type: string[] = ["product", "source"];
+  const size: number[] = [4, 2];
+  const cell: ((row: any) => any)[] = [
+    (row) => ({
+      label: row.french_label,
+      ucd: row.ucd13_code ? row.ucd13_code : row.ucd7_code,
+      company: row.owner_regroup,
+      type: has("drug_type") ? row.drug_type : null,
+    }),
+    (row) => row.source,
+  ];
+
+  let periodDone = false;
+  for (const f of fields) {
+    // Deja dans la cellule produit.
+    if (f.field === "drug_type") continue;
+    // Debut et fin : une seule colonne « Periode ».
+    if (f.field === "start_date" || f.field === "end_date") {
+      if (periodDone) continue;
+      periodDone = true;
+      header.push(fr ? "Période" : "Period");
+      type.push("period");
+      size.push(3);
+      cell.push((row) => ({ start: row.start_date ?? null, end: row.end_date ?? null }));
+      continue;
+    }
+    header.push(f.name === "Status" ? statusName : fr ? f.frName : f.name);
+    type.push(f.type);
+    size.push(f.field === "end_motive" ? 3 : 2);
+    cell.push((row) => row[f.field]);
+  }
+
+  const data = (results ?? []).map((row: any) => ({ values: cell.map((get) => get(row)) }));
+
+  const time = (value: any) => (value ? new Date(value).getTime() || 0 : 0);
+  const periodIndex = type.indexOf("period");
+  const dateIndex = type.indexOf("date");
+  if (periodIndex >= 0) {
+    data.sort((a, b) => time(b.values[periodIndex]?.start) - time(a.values[periodIndex]?.start));
+  } else if (dateIndex >= 0) {
+    data.sort((a, b) => time(b.values[dateIndex]) - time(a.values[dateIndex]));
+  }
+
+  return {
+    header,
+    type,
+    style: { align: type.map(() => "left" as const), size },
+    data,
+  };
+}

package/layer/app/oip-drugs/composables/useHeartMatchExplain.ts

@@ -0,0 +1,231 @@
+import { heartSearchFieldGroup, heartSearchGroupByKey, heartSearchGroupLabel } from "./useHeartSearchFields";
+
+/**
+ * Pourquoi un resultat sort.
+ *
+ * L'explication vient d'Elasticsearch, pas d'une reconstitution cote client :
+ * chaque clause de recherche embarque des `inner_hits` nommes `search:<famille>`
+ * qui renvoient les avis matches et les extraits surlignes, et chaque filtre
+ * nested embarque les siens, nommes d'apres le filtre. Le moteur dit donc
+ * lui-meme OU il a trouve les termes et COMBIEN d'avis sont concernes — la ou
+ * une detection par expression reguliere ne pouvait qu'approcher son analyse
+ * (accents, pluriels, synonymes, proximite des mots).
+ */
+
+export type MatchFieldExplain = {
+  /** Cle de famille (`indication`, `essential`...). */
+  key: string;
+  label: string;
+  /** Onglet de la fiche produit qui porte ce contenu. */
+  tab: string | null;
+  /** Nombre d'avis de la marque ou la famille matche. */
+  count: number;
+  /** Extraits surlignes en `<mark>`, tels que renvoyes par le moteur, avec la date de l'avis d'ou ils viennent. */
+  fragments: { html: string; date: string | null; ref?: string | null }[];
+};
+
+export type MatchExplain = {
+  /** Familles de champs ou les termes ont ete trouves, la plus fournie d'abord. */
+  fields: MatchFieldExplain[];
+  /** Filtres retenus par ce resultat, avec le nombre d'avis concernes. */
+  filters: { name: string; label: string; count: number }[];
+  /** Identifiants des avis matches, pour marquer les cartes de la fiche. */
+  opinionIds: string[];
+  hasCodes: string[];
+};
+
+const SEARCH_PREFIX = "search:";
+
+/**
+ * Surlignage d'un champ `keyword` : faute de sous-champ analyse, le moteur
+ * traite la valeur comme un seul terme et la renvoie entierement enveloppee.
+ * L'annuaire des associations en donne l'exemple — chercher « keytruda »
+ * peignait en rose les quinze appellations de l'association d'un bloc. Un tel
+ * extrait ne montre rien : la famille garde sa pastille, l'extrait tombe.
+ */
+const WHOLE_VALUE = /^<mark>[^<]*<\/mark>$/;
+
+/**
+ * Bloc `highlight` a poser a la racine d'une requete sur un index plat.
+ * Les balises sont demandees en `<mark>`, comme pour les inner hits : c'est la
+ * balise que la feuille du hub peint en rose.
+ */
+export function heartSearchHighlight(fields: string[]): Record<string, any> | undefined {
+  if (!fields.length) return undefined;
+  return {
+    pre_tags: ["<mark>"],
+    post_tags: ["</mark>"],
+    fields: Object.fromEntries(
+      fields.map((field) => [field, { number_of_fragments: 2, fragment_size: 180 }]),
+    ),
+  };
+}
+
+/**
+ * Bloc `highlight` depose par la barre de recherche dans le magasin de
+ * requetes. Une page le passe tel quel a `queryElastic`.
+ */
+export function heartHighlightFromQueries(queries: any[]): Record<string, any> | undefined {
+  return queries.find((query: any) => query?.highlight)?.highlight;
+}
+
+/**
+ * Filtres dont les inner hits ne disent rien a l'utilisateur. `searchType` est
+ * le perimetre de l'onglet courant, pose sur toutes les requetes : sans filtre
+ * choisi, chaque carte affichait « Correspondance dans 7 indications ».
+ * `patientContribution` est l'inner hit de ce meme perimetre sur l'onglet
+ * Contributions (cf. heartSearchType) : chaque carte affichait sinon
+ * « Filtres retenus patientContribution 3 ».
+ */
+const SILENT_FILTERS = new Set(["Take", "Sort", "Type", "Search Filter", "searchType", "patientContribution"]);
+
+/**
+ * Nom technique du filtre (`filterName` pose sur `HeartElastic*Filter`) vers
+ * son libelle affichable. Sans cette table, la pastille montre le nom de
+ * variable tel quel (« oncologyIcd10 ») plutot que ce que l'utilisateur a
+ * choisi dans le panneau de filtres.
+ */
+const FILTER_LABELS: Record<string, { fr: string; en: string }> = {
+  motif: { fr: "Motif", en: "Reason" },
+  brand: { fr: "Marque", en: "Brand" },
+  molecule: { fr: "Molécule", en: "Molecule" },
+  atc: { fr: "ACT4", en: "ACT4" },
+  ATC4: { fr: "ACT4", en: "ACT4" },
+  company: { fr: "Fabricant", en: "Manufacturer" },
+  smr: { fr: "SMR", en: "SMR" },
+  asmr: { fr: "ASMR", en: "ASMR" },
+  impact: { fr: "Impact CT", en: "CT Impact" },
+  biosimilar: { fr: "Biosimilaire", en: "Biosimilar" },
+  containsRare: { fr: "Maladies Rares", en: "Rare Diseases" },
+  rare: { fr: "Maladies Rares", en: "Rare Diseases" },
+  containsOnco: { fr: "Oncologie", en: "Oncology" },
+  oncologyTerms: { fr: "Oncology Terms", en: "Oncology Terms" },
+  oncologyIcd10: { fr: "Oncology ICD-10", en: "Oncology ICD-10" },
+  periodRange: { fr: "Période", en: "Period" },
+  association: { fr: "Association", en: "Association" },
+  parliamentarySession: { fr: "Session parlementaire", en: "Parliamentary session" },
+  opinion: { fr: "Avis", en: "Opinion" },
+  status: { fr: "Statut", en: "Status" },
+  target: { fr: "Cible", en: "Target" },
+  Distributions: { fr: "Distribution", en: "Distribution" },
+};
+
+function filterLabel(name: string, locale: string): string {
+  const known = FILTER_LABELS[name];
+  return known ? (locale === "en" ? known.en : known.fr) : name;
+}
+
+function fragmentsOf(innerHit: any): { html: string; date: string | null }[] {
+  return (innerHit?.hits?.hits ?? []).flatMap((hit: any) => {
+    const date = hit?._source?.decision_date ?? null;
+    return (Object.values(hit?.highlight ?? {}).flat() as string[]).map((html) => ({ html, date }));
+  });
+}
+
+function idsOf(innerHit: any) {
+  const ids: string[] = [];
+  const codes: string[] = [];
+  for (const hit of innerHit?.hits?.hits ?? []) {
+    const source = hit?._source ?? {};
+    if (source.opinion_id) ids.push(String(source.opinion_id));
+    if (source.has_code) codes.push(String(source.has_code));
+  }
+  return { ids, codes };
+}
+
+/**
+ * Lit les inner hits d'un resultat et en tire l'explication.
+ * Retourne `null` quand le resultat ne porte aucune explication — recherche
+ * vide, ou requete lancee sans inner hits.
+ */
+export function heartExplainMatch(hit: any, locale: string): MatchExplain | null {
+  const inner = hit?.inner_hits;
+  const highlight = hit?.highlight;
+  if ((!inner || typeof inner !== "object") && (!highlight || typeof highlight !== "object")) {
+    return null;
+  }
+
+  const fields: MatchFieldExplain[] = [];
+  const filters: { name: string; label: string; count: number }[] = [];
+  const opinionIds = new Set<string>();
+  const hasCodes = new Set<string>();
+
+  for (const [name, innerHit] of Object.entries<any>(inner ?? {})) {
+    const count = innerHit?.hits?.total?.value ?? 0;
+    if (!count) continue;
+
+    if (name.startsWith(SEARCH_PREFIX)) {
+      const group = heartSearchGroupByKey(name.slice(SEARCH_PREFIX.length));
+      fields.push({
+        key: group.key,
+        label: heartSearchGroupLabel(group, locale),
+        tab: group.tab,
+        count,
+        fragments: fragmentsOf(innerHit),
+      });
+      const { ids, codes } = idsOf(innerHit);
+      ids.forEach((id) => opinionIds.add(id));
+      codes.forEach((code) => hasCodes.add(code));
+      continue;
+    }
+
+    if (!SILENT_FILTERS.has(name)) filters.push({ name, label: filterLabel(name, locale), count });
+  }
+
+  // Highlight racine : un champ par cle, regroupe en famille comme les inner
+  // hits le sont deja. Sans decompte — la ligne matchee est le resultat
+  // lui-meme.
+  const byGroup = new Map<string, MatchFieldExplain>();
+  for (const [field, fragments] of Object.entries<any>(highlight ?? {})) {
+    const list = (Array.isArray(fragments) ? fragments : []).filter(
+      (html: any) => typeof html === "string" && html,
+    );
+    if (!list.length) continue;
+    const group = heartSearchFieldGroup(field);
+    if (!byGroup.has(group.key)) {
+      byGroup.set(group.key, {
+        key: group.key,
+        label: heartSearchGroupLabel(group, locale),
+        tab: group.tab,
+        count: 0,
+        fragments: [],
+      });
+    }
+    const entry = byGroup.get(group.key)!;
+    // Une meme famille couvre les deux langues et la variante sans accents du
+    // champ : le meme passage y revient a l'identique.
+    for (const html of list) {
+      if (WHOLE_VALUE.test(html)) continue;
+      if (!entry.fragments.some((fragment) => fragment.html === html)) {
+        entry.fragments.push({ html, date: null });
+      }
+    }
+  }
+  fields.push(...byGroup.values());
+
+  if (!fields.length && !filters.length) return null;
+
+  fields.sort((a, b) => b.count - a.count || b.fragments.length - a.fragments.length);
+  filters.sort((a, b) => a.name.localeCompare(b.name));
+
+  return {
+    fields,
+    filters,
+    opinionIds: [...opinionIds],
+    hasCodes: [...hasCodes],
+  };
+}
+
+/**
+ * Termes de recherche saisis pour la liste courante, pour les rappeler dans
+ * l'explication. fr_drugs_app les relisait dans le filterStore de sa page de
+ * recherche ; le layer n'a pas ce store : la fiche les recoit en prop
+ * (`highlight`) et les passe ici. Meme peigne que l'original : liste de
+ * termes, terme seul ou clause `{ value }`.
+ */
+export function heartCurrentSearchTerms(values: unknown): string[] {
+  const list = Array.isArray(values) ? values : values ? [values] : [];
+  return list
+    .map((value: any) => (value && typeof value === "object" ? value.value : value))
+    .filter((value: any) => typeof value === "string" && value.trim());
+}

package/layer/app/oip-drugs/composables/useHeartReports.ts

@@ -0,0 +1,239 @@
+// useHeartReports, la liste des rapports cures du rail : ceux livres avec
+// le layer (public/reports) et ceux que Directus publie.
+//
+// Les artefacts Directus passent par /api/oip/reports : l'appel direct depuis le
+// navigateur emportait le token dans le bundle et echouait en CORS, l'instance
+// n'autorisant pas l'origine de l'app.
+//
+// Shares state between the sidebar and the /reports/[id] page via
+// `useState` (Nuxt's app-level singleton). Re-fetches on every consumer
+// mount when the cache is empty so a transient failure (e.g. Directus
+// permission being toggled mid-edit) doesn't leave the sidebar section
+// hidden until a full reload.
+
+export type ReportCategory = 'report' | 'monograph';
+
+export interface Report {
+  id: string;
+  title: string;
+  html: string;
+  category: ReportCategory;
+  /**
+   * Nom du composant de `oip-drugs/monographs/` qui porte le document. Quand il est
+   * la, la page de rapport rend le document dans le DOM de l'app (comme
+   * l'onglet Monographie d'une fiche marque) au lieu d'une iframe, et le HTML
+   * de `public/reports/` n'est pas charge.
+   */
+  component?: string;
+  /** PDF equivalent, quand il existe dans `public/reports/`. */
+  pdf?: string | null;
+}
+
+// Rapports servis en STATIQUE (HTML livré dans public/reports/) plutôt que
+// via Directus (utile quand l'artefact Directus a été perdu/dépublié). Ils
+// sont prioritaires sur Directus (dédup par id) et chargés même si
+// l'intégration Directus n'est pas configurée.
+interface StaticReport {
+  id: string;
+  title: string;
+  file: string; // chemin servi depuis public/, pour le repli en iframe
+  category: ReportCategory;
+  /** Composant de `oip-drugs/monographs/` a rendre a la place de l'iframe. */
+  component?: string;
+  /** PDF equivalent servi depuis public/reports/. */
+  pdf?: string;
+}
+
+const STATIC_REPORTS: StaticReport[] = [
+  {
+    id: '79381b66-fd6b-41b8-8a0f-1a0acc37d69c',
+    title: 'Avis HAS, cancer du sein 2023-2026',
+    file: '/reports/has-sein-2023.html',
+    component: 'has-sein-2023',
+    category: 'report',
+  },
+  {
+    id: 'monograph-blincyto',
+    title: 'Blincyto',
+    file: '/reports/blincyto-has.html',
+    component: 'blincyto-has',
+    pdf: '/reports/blincyto-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-darzalex',
+    title: 'Darzalex',
+    file: '/reports/darzalex-has.html',
+    component: 'darzalex-has',
+    pdf: '/reports/darzalex-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-dupixent',
+    title: 'Dupixent',
+    file: '/reports/dupixent-has.html',
+    component: 'dupixent-has',
+    pdf: '/reports/dupixent-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-enhertu',
+    title: 'Enhertu',
+    file: '/reports/enhertu-has.html',
+    component: 'enhertu-has',
+    pdf: '/reports/enhertu-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-ibrance',
+    title: 'Ibrance',
+    file: '/reports/ibrance-has.html',
+    component: 'ibrance-has',
+    pdf: '/reports/ibrance-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-imfinzi',
+    title: 'Imfinzi',
+    file: '/reports/imfinzi-has.html',
+    component: 'imfinzi-has',
+    pdf: '/reports/imfinzi-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-keytruda',
+    title: 'Keytruda',
+    file: '/reports/keytruda-has.html',
+    component: 'keytruda-has',
+    pdf: '/reports/keytruda-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-kisqali',
+    title: 'Kisqali',
+    file: '/reports/kisqali-has.html',
+    component: 'kisqali-has',
+    pdf: '/reports/kisqali-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-opdivo',
+    title: 'Opdivo',
+    file: '/reports/opdivo-has.html',
+    component: 'opdivo-has',
+    pdf: '/reports/opdivo-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-ozempic',
+    title: 'Ozempic',
+    file: '/reports/ozempic-has.html',
+    component: 'ozempic-has',
+    pdf: '/reports/ozempic-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-tecentriq',
+    title: 'Tecentriq',
+    file: '/reports/tecentriq-has.html',
+    component: 'tecentriq-has',
+    pdf: '/reports/tecentriq-has.pdf',
+    category: 'monograph',
+  },
+  {
+    id: 'monograph-yescarta',
+    title: 'Yescarta',
+    file: '/reports/yescarta-has.html',
+    component: 'yescarta-has',
+    pdf: '/reports/yescarta-has.pdf',
+    category: 'monograph',
+  },
+];
+
+async function fetchStaticReports(): Promise<Report[]> {
+  const results = await Promise.all(
+    STATIC_REPORTS.map(async (s): Promise<Report | null> => {
+      // Document porte par un composant : rien a telecharger, la page le rend
+      // depuis `oip-drugs/monographs/`. Evite treize requetes HTML au demarrage.
+      if (s.component) {
+        return {
+          id: s.id,
+          title: s.title,
+          html: '',
+          category: s.category,
+          component: s.component,
+          pdf: s.pdf ?? null,
+        };
+      }
+      try {
+        const res = await fetch(s.file);
+        if (!res.ok) {
+          console.warn(`[useHeartReports] static ${s.file} HTTP ${res.status}`);
+          return null;
+        }
+        return { id: s.id, title: s.title, html: await res.text(), category: s.category };
+      } catch (err: any) {
+        console.warn(`[useHeartReports] static ${s.file} failed:`, err?.message || err);
+        return null;
+      }
+    }),
+  );
+  return results.filter((r): r is Report => r !== null);
+}
+
+export function useHeartReports() {
+  const reports = useState<Report[]>('oip-drugs:reports', () => []);
+  const loading = useState<boolean>('oip-drugs:reports:loading', () => false);
+  // Flips to true the first time a fetch attempt completes (success or
+  // failure). The detail page uses it to decide skeleton vs. "not
+  // found": without it the user would see a flash of "not found"
+  // before the very first fetch resolves.
+  const initialized = useState<boolean>('oip-drugs:reports:initialized', () => false);
+
+  async function fetchReports(force = false) {
+    if (loading.value) return;
+    // Skip the network call when we already have a populated cache
+    // unless the caller explicitly asked for a refresh.
+    if (!force && reports.value.length > 0) {
+      initialized.value = true;
+      return;
+    }
+
+    loading.value = true;
+    try {
+      // Rapports statiques (toujours), + Directus si configuré. Les statiques
+      // sont prioritaires : leur id est retiré de la demande, l'artefact
+      // Directus du même rapport étant souvent perdu ou dépublié.
+      const statics = await fetchStaticReports();
+      const staticIds = statics.map((s) => s.id);
+      const directus = await $fetch<Report[]>('/api/oip/reports', {
+        query: { skip: staticIds.join(',') },
+      }).catch((err: any) => {
+        console.warn('[useHeartReports] /api/oip/reports failed:', err?.message || err);
+        return [] as Report[];
+      });
+
+      reports.value = [...statics, ...directus];
+    } catch (err) {
+      console.warn('[useHeartReports] fetch failed', err);
+      // Keep whatever we had, don't wipe a working cache because of a
+      // transient network blip.
+    } finally {
+      loading.value = false;
+      initialized.value = true;
+    }
+  }
+
+  function findById(id: string): Report | null {
+    if (!id) return null;
+    return reports.value.find((r) => r.id === id) || null;
+  }
+
+  return {
+    reports,
+    loaded: initialized,
+    loading,
+    fetchReports,
+    findById,
+  };
+}