@tekkare/romulus 0.1.250 → 0.1.252

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

@@ -0,0 +1,738 @@
+<!--
+  Tout ce que l'index tarifaire sait d'une presentation.
+
+  L'onglet Prix ne montre par presentation que le tarif en vigueur : c'est ce
+  qu'on veut lire d'un coup d'oeil, mais l'ancienne page de detail donnait bien
+  davantage : l'historique des tarifs, celui des changements, les periodes
+  d'homologation, l'exploitant successif, la majoration outre-mer. Tout cela
+  revient ici, en onglets, sans quitter la fiche produit.
+-->
+<script setup lang="ts">
+import { heartCodeLabel, heartPriceChannel } from "../../../../../oip-drugs/utils/heartStyleAndFormat";
+
+const props = defineProps<{
+  /** La presentation (_source de l'index tarifaire), ou null quand ferme. */
+  product: any | null;
+  checkedAt?: string | null;
+}>();
+
+const emit = defineEmits<{ (event: "close"): void }>();
+
+const { locale } = useI18n();
+
+const isEn = computed(() => locale.value === "en");
+
+function money(value: number | null | undefined) {
+  if (value === null || value === undefined) return "-";
+  return new Intl.NumberFormat(isEn.value ? "en-US" : "fr-FR", {
+    style: "currency",
+    currency: "EUR",
+    maximumFractionDigits: 2,
+  }).format(Number(value));
+}
+
+function date(raw: string | null | undefined) {
+  if (!raw) return "-";
+  const value = new Date(raw);
+  if (Number.isNaN(value.getTime())) return String(raw);
+  return value.toLocaleDateString(isEn.value ? "en-GB" : "fr-FR", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+}
+
+function percent(value: number | null | undefined) {
+  if (value === null || value === undefined) return "-";
+  return `${Math.round(Number(value) * 100)} %`;
+}
+
+/** Entrees d'un historique, de la plus recente a la plus ancienne. */
+function sorted(list: any[] | null | undefined, field: string) {
+  return Array.isArray(list)
+    ? [...list].sort((a, b) => new Date(b?.[field]).getTime() - new Date(a?.[field]).getTime())
+    : [];
+}
+
+const tariffs = computed(() => sorted(props.product?.reimbursement_history, "application_date"));
+const homologations = computed(() => sorted(props.product?.homologation_history, "start_date"));
+const manufacturers = computed(() => sorted(props.product?.manufacturer_history, "start_date"));
+const overseas = computed(() => sorted(props.product?.pacific_area_fr_increase, "application_date"));
+
+/**
+ * L'historique tarifaire, chaque ligne portant son evolution de PFHT.
+ *
+ * L'ecart se lit sur la colonne d'a cote : c'est la difference avec le PFHT de
+ * la ligne suivante qui en porte un, celle du tarif precedent. `changed_history`
+ * donnerait parfois un montant qui ne correspond a aucun des deux PFHT
+ * affiches : il ne decoupe ni aux memes dates ni aux memes circuits.
+ */
+const tariffRows = computed(() =>
+  tariffs.value.map((row: any, index: number) => {
+    const price = typeof row?.factory_price === "number" ? row.factory_price : null;
+    const previous =
+      tariffs.value
+        .slice(index + 1)
+        .find((older: any) => typeof older?.factory_price === "number")?.factory_price ?? null;
+    const variation = price !== null && previous !== null ? price - previous : null;
+
+    return {
+      row,
+      variation,
+      variationPct: variation !== null && previous ? (variation / previous) * 100 : null,
+    };
+  }),
+);
+
+/**
+ * Les periodes de taux de remboursement, de la plus recente a la plus ancienne.
+ *
+ * Le taux est ecrit sur chaque tarif (« 0.65 », en chaine), ville seulement :
+ * une ligne par tarif repeterait 65 % dix fois. On ne garde que les tarifs ou
+ * le taux change par rapport au precedent, chacun ouvrant une periode.
+ */
+const reimbursementRows = computed(() => {
+  const ascending = [...tariffs.value]
+    .reverse()
+    .filter((row: any) => row?.reimbursement_rate !== null && row?.reimbursement_rate !== undefined && row?.reimbursement_rate !== "");
+  const periods: any[] = [];
+  for (const row of ascending) {
+    const rate = Number(row.reimbursement_rate);
+    if (Number.isNaN(rate)) continue;
+    const previous = periods.length ? periods[periods.length - 1].rate : null;
+    if (previous === rate) continue;
+    // Evolution en points de taux par rapport a la periode precedente.
+    periods.push({ rate, row, variation: previous === null ? null : (rate - previous) * 100 });
+  }
+  return periods.reverse();
+});
+
+/**
+ * Circuit et source ne sont remplis que sur les tarifs hopital : en ville les
+ * deux colonnes ne porteraient que des tirets, on les enleve.
+ */
+const hasChannel = computed(() => tariffs.value.some((row: any) => row?.distribution_type));
+const hasSource = computed(() =>
+  tariffs.value.some((row: any) => row?.documentary_source || row?.source_date),
+);
+
+/**
+ * La marge de retrocession n'existe que sur les tarifs hopital : une colonne
+ * vide sur toute la hauteur du tableau ne dit rien, on l'enleve.
+ */
+const hasMarge = computed(() =>
+  tariffs.value.some((row: any) => row?.marge !== null && row?.marge !== undefined),
+);
+
+/** « +1,4 % », pour accompagner l'ecart en euros. */
+function signedPercent(value: number | null) {
+  if (value === null) return "";
+  const formatted = value.toLocaleString(isEn.value ? "en-US" : "fr-FR", {
+    maximumFractionDigits: 1,
+  });
+  return `${value > 0 ? "+" : ""}${formatted} %`;
+}
+
+/** Circuit de distribution, en clair : c'est lui qui dit ville ou hopital. */
+const channel = computed(() =>
+  heartPriceChannel(props.product?.distribution_channel, locale.value),
+);
+
+/** CIP en ville, UCD a l'hopital : `local_drug_id` porte les deux. */
+const codeLabel = computed(() => heartCodeLabel(props.product?.distribution_channel));
+
+/**
+ * Regimes de prise en charge coches sur la presentation.
+ *
+ * `is_outpatient` et `is_inpatient` ne sont jamais vrais hors UCD(Hospital) :
+ * ce sont l'homologation en retrocession et la T2A, pas les circuits ville et
+ * hopital. Les nommer ainsi mettait un tag "Ville" sur des produits purement
+ * hospitaliers et n'en mettait aucun sur les produits de ville.
+ */
+/** Inscription la plus ancienne, quand la commercialisation n'est pas renseignee. */
+const listedOn = computed(() => {
+  const history = props.product?.homologation_history;
+  const dates = (Array.isArray(history) ? history : [])
+    .map((entry: any) => entry?.start_date)
+    .filter(Boolean)
+    .sort();
+  return dates[0] ?? null;
+});
+
+const channels = computed(() => {
+  const product = props.product ?? {};
+  return [
+    {
+      key: "is_outpatient",
+      label: isEn.value ? "Retrocession (registration)" : "Rétrocession (homologation)",
+    },
+    { key: "is_inpatient", label: "T2A" },
+    {
+      key: "is_retrocession",
+      label: isEn.value ? "Retrocession (channel)" : "Rétrocession (circuit)",
+    },
+    { key: "is_sus", label: isEn.value ? "SUS list" : "Liste en sus" },
+    { key: "is_taa_mco", label: "T2A MCO" },
+    { key: "is_taa_ssr", label: "T2A SSR" },
+    { key: "is_community", label: isEn.value ? "Community" : "Collectivités" },
+    { key: "is_social_insured", label: isEn.value ? "Social insurance" : "Assurés sociaux" },
+    { key: "is_generic_reference", label: isEn.value ? "Generic reference" : "Référent générique" },
+  ].filter((entry) => product[entry.key]);
+});
+
+/** Onglets : seuls ceux qui ont de la matiere sont proposes. */
+const tabs = computed(() =>
+  [
+    { key: "identity", label: isEn.value ? "Identity" : "Identité", filled: true },
+    {
+      key: "tariffs",
+      label: isEn.value ? "Tariff history" : "Historique tarifaire",
+      filled: tariffs.value.length > 0,
+    },
+    {
+      key: "homologation",
+      label: isEn.value ? "Homologation" : "Homologation",
+      filled: homologations.value.length > 0 || manufacturers.value.length > 0,
+    },
+    {
+      key: "overseas",
+      label: isEn.value ? "Overseas uplift" : "Majoration outre-mer",
+      filled: overseas.value.length > 0,
+    },
+  ].filter((tab) => tab.filled),
+);
+
+const active = ref(0);
+
+// Une autre presentation s'ouvre : elle n'a pas forcement les memes onglets.
+watch(() => props.product, () => (active.value = 0));
+
+const activeKey = computed(() => tabs.value[active.value]?.key ?? "identity");
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape") emit("close");
+}
+
+onMounted(() => document.addEventListener("keydown", onKeydown));
+onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="drawer">
+      <div v-if="product" class="pd oip-drugs" @click.self="emit('close')">
+        <aside class="pd_panel">
+          <header class="pd_head">
+            <p class="pd_type">
+              <RmIcon name="Pill" :size="16" />
+              {{ isEn ? "Presentation" : "Présentation" }}
+            </p>
+            <button
+              type="button"
+              class="pd_close"
+              :aria-label="isEn ? 'Close' : 'Fermer'"
+              @click="emit('close')"
+            >
+              <RmIcon name="X" :size="16" />
+            </button>
+          </header>
+
+          <div class="pd_body">
+            <h2 class="pd_title">{{ product.label }}</h2>
+            <p class="pd_sub">
+              <span v-if="product.local_drug_id">{{ codeLabel }} {{ product.local_drug_id }}</span>
+              <span v-if="product.manufacturer"> · {{ product.manufacturer }}</span>
+            </p>
+
+            <div v-if="tabs.length > 1" class="pd_tabs">
+              <button
+                v-for="(tab, index) in tabs"
+                :key="tab.key"
+                type="button"
+                class="pd_tab"
+                :class="{ is_active: index === active }"
+                @click="active = index"
+              >
+                {{ tab.label }}
+              </button>
+            </div>
+
+            <!-- Identite -->
+            <dl v-if="activeKey === 'identity'" class="pd_grid">
+              <div v-if="product.cis_label">
+                <dt>{{ isEn ? "Specialty" : "Spécialité" }}</dt>
+                <dd>{{ product.cis_label }}</dd>
+              </div>
+              <div v-if="product.presentation_label">
+                <dt>{{ isEn ? "Presentation" : "Présentation" }}</dt>
+                <dd>{{ product.presentation_label }}</dd>
+              </div>
+              <div v-if="product.brand">
+                <dt>{{ isEn ? "Brand" : "Marque" }}</dt>
+                <dd>{{ product.brand }}</dd>
+              </div>
+              <div v-if="product.molecule">
+                <dt>{{ isEn ? "Molecule" : "Molécule" }}</dt>
+                <dd>{{ product.molecule }}</dd>
+              </div>
+              <div v-if="product.atc5 || product.atc4">
+                <dt>ATC</dt>
+                <dd>{{ [product.atc5, product.atc4].filter(Boolean).join(" · ") }}</dd>
+              </div>
+              <div v-if="channel">
+                <dt>{{ isEn ? "Channel" : "Circuit" }}</dt>
+                <dd><RmTag :variant="channel.variant">{{ channel.label }}</RmTag></dd>
+              </div>
+              <div v-if="product.status_generic">
+                <dt>{{ isEn ? "Generic status" : "Statut générique" }}</dt>
+                <dd>{{ product.status_generic }}</dd>
+              </div>
+              <div v-if="product.commercialization_status">
+                <dt>{{ isEn ? "Marketing" : "Commercialisation" }}</dt>
+                <dd>
+                  {{ product.commercialization_status }}
+                  <template v-if="product.commercialization_date">
+                    · {{ date(product.commercialization_date) }}
+                  </template>
+                </dd>
+              </div>
+              <!-- Cote hopital, l'index ne porte pas de commercialisation : la
+                   mise a disposition se lit sur l'inscription au circuit. -->
+              <div v-else-if="listedOn">
+                <dt>{{ isEn ? "Listed since" : "Inscrit depuis" }}</dt>
+                <dd>{{ date(listedOn) }}</dd>
+              </div>
+              <div v-if="product.last_price_update">
+                <dt>{{ isEn ? "Latest price change" : "Dernier changement de prix" }}</dt>
+                <dd>{{ date(product.last_price_update) }}</dd>
+              </div>
+              <div v-if="channels.length" class="pd_grid_wide">
+                <dt>{{ isEn ? "Coverage" : "Prise en charge" }}</dt>
+                <dd class="pd_chips">
+                  <span v-for="regime in channels" :key="regime.key" class="pd_chip">
+                    {{ regime.label }}
+                  </span>
+                </dd>
+              </div>
+            </dl>
+
+            <!-- Historique tarifaire, evolution du PFHT comprise -->
+            <!-- Sept colonnes tiennent tout juste dans le tiroir : elles
+                 defilent horizontalement plutot que d'en deborder. -->
+            <template v-else-if="activeKey === 'tariffs'">
+            <div class="pd_scroll">
+              <table class="pd_table">
+                <thead>
+                  <tr>
+                    <th>{{ isEn ? "Applies from" : "Applicable au" }}</th>
+                    <th>PFHT</th>
+                    <th>{{ isEn ? "Change" : "Évolution" }}</th>
+                    <th>{{ isEn ? "Public price" : "Prix public" }}</th>
+                    <th v-if="hasMarge">{{ isEn ? "Margin" : "Marge" }}</th>
+                    <th v-if="hasChannel">{{ isEn ? "Channel" : "Circuit" }}</th>
+                    <th v-if="hasSource">{{ isEn ? "Source" : "Source" }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(item, index) in tariffRows" :key="index">
+                    <td>{{ date(item.row.application_date) }}</td>
+                    <td>{{ money(item.row.factory_price) }}</td>
+                    <td
+                      :class="
+                        item.variation && item.variation > 0
+                          ? 'is_up'
+                          : item.variation && item.variation < 0
+                          ? 'is_down'
+                          : ''
+                      "
+                    >
+                      <template v-if="item.variation === null">-</template>
+                      <template v-else>
+                        {{ item.variation > 0 ? "+" : "" }}{{ money(item.variation) }}
+                        <span v-if="item.variationPct !== null" class="pd_muted">
+                          ({{ signedPercent(item.variationPct) }})
+                        </span>
+                      </template>
+                    </td>
+                    <td>{{ money(item.row.public_price) }}</td>
+                    <!-- La marge de retrocession est un forfait en euros par
+                         ligne de dispensation (28 € jusqu'en 2008, 26 € en 2009,
+                         22 € depuis 2010), pas un taux : l'ecart PFHT vers prix
+                         public vaut 2,1 %, c'est la TVA. -->
+                    <td v-if="hasMarge">{{ money(item.row.marge) }}</td>
+                    <td v-if="hasChannel">{{ item.row.distribution_type || "-" }}</td>
+                    <td v-if="hasSource">
+                      {{ item.row.documentary_source || "-" }}
+                      <template v-if="item.row.source_date">
+                        · {{ date(item.row.source_date) }}
+                      </template>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <!-- Remboursement : une ligne par periode de taux (ville seulement) -->
+            <h3 v-if="reimbursementRows.length" class="pd_section">
+              {{ isEn ? "Reimbursement" : "Remboursement" }}
+            </h3>
+            <table v-if="reimbursementRows.length" class="pd_table">
+              <thead>
+                <tr>
+                  <th>{{ isEn ? "Applies from" : "Applicable au" }}</th>
+                  <th>{{ isEn ? "Rate" : "Taux" }}</th>
+                  <th>{{ isEn ? "Change" : "Évolution" }}</th>
+                  <th v-if="hasChannel">{{ isEn ? "Channel" : "Circuit" }}</th>
+                  <th v-if="hasSource">{{ isEn ? "Source" : "Source" }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, index) in reimbursementRows" :key="index">
+                  <td>{{ date(item.row.application_date) }}</td>
+                  <td>{{ percent(item.rate) }}</td>
+                  <td
+                    :class="
+                      item.variation && item.variation > 0
+                        ? 'is_up'
+                        : item.variation && item.variation < 0
+                        ? 'is_down'
+                        : ''
+                    "
+                  >
+                    <template v-if="item.variation === null">-</template>
+                    <template v-else>
+                      {{ item.variation > 0 ? "+" : "" }}{{ Math.round(item.variation) }} pts
+                    </template>
+                  </td>
+                  <td v-if="hasChannel">{{ item.row.distribution_type || "-" }}</td>
+                  <td v-if="hasSource">
+                    {{ item.row.documentary_source || "-" }}
+                    <template v-if="item.row.source_date">
+                      · {{ date(item.row.source_date) }}
+                    </template>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            </template>
+
+            <!-- Homologation et exploitant -->
+            <template v-else-if="activeKey === 'homologation'">
+              <h3 v-if="homologations.length" class="pd_section">
+                {{ isEn ? "Homologation periods" : "Périodes d'homologation" }}
+              </h3>
+              <table v-if="homologations.length" class="pd_table">
+                <thead>
+                  <tr>
+                    <th>{{ isEn ? "From" : "Début" }}</th>
+                    <th>{{ isEn ? "To" : "Fin" }}</th>
+                    <th>{{ isEn ? "Channel" : "Circuit" }}</th>
+                    <th>{{ isEn ? "Source" : "Source" }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, index) in homologations" :key="index">
+                    <td>{{ date(row.start_date) }}</td>
+                    <td>
+                      {{ row.end_date ? date(row.end_date) : isEn ? "Ongoing" : "En cours" }}
+                      <template v-if="row.end_motif && row.end_motif !== '-'">
+                        · {{ row.end_motif }}
+                      </template>
+                    </td>
+                    <td>{{ row.distribution_type || "-" }}</td>
+                    <td>{{ row.documentary_source || "-" }}</td>
+                  </tr>
+                </tbody>
+              </table>
+
+              <h3 v-if="manufacturers.length" class="pd_section">
+                {{ isEn ? "Marketing authorisation holder" : "Exploitant" }}
+              </h3>
+              <table v-if="manufacturers.length" class="pd_table">
+                <thead>
+                  <tr>
+                    <th>{{ isEn ? "Holder" : "Exploitant" }}</th>
+                    <th>{{ isEn ? "From" : "Début" }}</th>
+                    <th>{{ isEn ? "To" : "Fin" }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, index) in manufacturers" :key="index">
+                    <td>{{ row.manufacturer || "-" }}</td>
+                    <td>{{ date(row.start_date) }}</td>
+                    <td>
+                      {{ row.end_date ? date(row.end_date) : isEn ? "Ongoing" : "En cours" }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </template>
+
+            <!-- Majoration outre-mer -->
+            <table v-else-if="activeKey === 'overseas'" class="pd_table">
+              <thead>
+                <tr>
+                  <th>{{ isEn ? "Applies from" : "Applicable au" }}</th>
+                  <th>Guadeloupe</th>
+                  <th>Guyane</th>
+                  <th>Martinique</th>
+                  <th>Réunion</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(row, index) in overseas" :key="index">
+                  <td>{{ date(row.application_date) }}</td>
+                  <td>{{ row.guadeloupe ?? "-" }}</td>
+                  <td>{{ row.guyane ?? "-" }}</td>
+                  <td>{{ row.martinique ?? "-" }}</td>
+                  <td>{{ row.reunion ?? "-" }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <footer class="pd_foot">
+            <span>Source : <b>{{ isEn ? "Health Insurance" : "Assurance Maladie" }}</b></span>
+            <span v-if="checkedAt || product.last_source_update">
+              ·
+              {{ isEn ? "Last updated" : "Dernière mise à jour le" }}
+              {{ date(checkedAt || product.last_source_update) }}
+            </span>
+          </footer>
+        </aside>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+/* Le voile epouse le cadre de la coque, comme les autres tiroirs du hub. */
+.pd {
+  position: fixed;
+  inset: var(--rm-shell-inset, 8px);
+  border-radius: var(--rm-shell-radius, 12px);
+  overflow: hidden;
+  z-index: 300;
+  display: flex;
+  justify-content: flex-end;
+  background: rgba(30, 41, 59, 0.35);
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+
+.pd_panel {
+  display: flex;
+  flex-direction: column;
+  width: min(860px, 100%);
+  height: 100%;
+  background: var(--white);
+  box-shadow: var(--overlay-shadow);
+}
+
+.pd_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--light);
+}
+
+.pd_type {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--primary);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.pd_close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--light);
+  border-radius: 8px;
+  background: var(--white);
+  color: var(--dark);
+  cursor: pointer;
+}
+
+.pd_close:hover {
+  background: var(--lightest);
+}
+
+.pd_body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+}
+
+.pd_title,
+.pd_sub,
+.pd_tabs {
+  flex: 0 0 auto;
+}
+
+.pd_title {
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.pd_sub {
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.pd_tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  border-bottom: 1px solid var(--light);
+}
+
+.pd_tab {
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--medium);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.pd_tab.is_active {
+  border-bottom-color: var(--primary);
+  background: color-mix(in srgb, var(--primary) 6%, transparent);
+  color: var(--primary);
+}
+
+.pd_grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
+  margin: 0;
+}
+
+.pd_grid_wide {
+  grid-column: 1 / -1;
+}
+
+.pd_grid dt {
+  color: var(--medium);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.pd_grid dd {
+  margin: 2px 0 0;
+  color: var(--dark);
+  font-size: 14px;
+}
+
+.pd_chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.pd_chip {
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 8%, transparent);
+  color: var(--primary);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.pd_section {
+  margin-top: 8px;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.pd_table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.pd_table th {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--light);
+  color: var(--medium);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.pd_table td {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--lightest);
+  color: var(--dark);
+  vertical-align: top;
+}
+
+.pd_scroll {
+  overflow-x: auto;
+}
+
+.pd_muted {
+  color: var(--medium);
+  font-weight: 400;
+}
+
+.pd_table .is_up {
+  color: var(--system-alert-hover);
+  font-weight: 700;
+}
+
+.pd_table .is_down {
+  color: var(--system-success-hover);
+  font-weight: 700;
+}
+
+.pd_foot {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--light);
+  background: var(--demi-fond);
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.drawer-enter-active .pd_panel,
+.drawer-leave-active .pd_panel {
+  transition: transform 0.2s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+
+.drawer-enter-from .pd_panel,
+.drawer-leave-to .pd_panel {
+  transform: translateX(24px);
+}
+</style>