@tekkare/romulus 0.1.241 → 0.1.243

package/layer/app/components/auth/SplitLayout.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="auth-split">
+    <!-- Left brand panel (generic OIP Healthcare — reusable across apps) -->
+    <aside class="brand-panel">
+      <div class="blob b1"></div>
+      <div class="blob b2"></div>
+      <div class="blob b3"></div>
+
+      <div class="brand-logo">
+        <img src="https://rcd-media.com/skills/Tekkare_Baseline_White.svg" alt="Tekkare" />
+      </div>
+
+      <div class="brand-copy">
+        <span class="brand-eyebrow">OIP Healthcare<sup>®</sup></span>
+        <h1 v-if="fr">Des données de santé, <em>enfin exploitables</em>.</h1>
+        <h1 v-else>Health data, <em>finally usable</em>.</h1>
+        <p>{{ fr ? "Une vue à 360 degrés des systèmes de santé dans le monde, construite entièrement sur des données ouvertes officielles." : "A 360 degree view of health systems worldwide, built entirely on official open data." }}</p>
+        <div class="brand-points">
+          <div class="brand-point"><i class="ph ph-database"></i> {{ fr ? "Données ouvertes officielles, normalisées et prêtes à l'emploi" : "Official open data, normalized and ready to use" }}</div>
+          <div class="brand-point"><i class="ph ph-squares-four"></i> {{ fr ? "Des applications spécialisées dans chaque domaine de la santé" : "Specialized apps across every health domain" }}</div>
+          <div class="brand-point"><i class="ph ph-shield-check"></i> {{ fr ? "Uniquement des données ouvertes, conformes au RGPD par conception" : "Open data only, GDPR compliant by design" }}</div>
+        </div>
+      </div>
+
+      <div class="brand-foot">
+        <strong>TEKKARE®</strong><br />
+        Inspired by Healthcare
+      </div>
+    </aside>
+
+    <!-- Right form panel — host app drops its content here -->
+    <main class="form-panel">
+      <div class="form-panel-inner">
+        <slot />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { locale } = useI18n();
+const fr = computed(() => locale.value === "fr");
+</script>
+
+<style scoped>
+.auth-split {
+  --tkr-primary: var(--primary);
+  --tkr-secondary: #b485ff;
+  --tkr-darkest: #1e293b;
+  --tkr-dark: #525670;
+  --tkr-medium: #878ca6;
+  --tkr-light: #dbdef0;
+  --tkr-lightest: #f5f5f9;
+  --tkr-bg: #f9f9fa;
+  --tkr-grad: linear-gradient(135deg, #4dccf7 0%, #a06bf5 50%, #ff5cf0 100%);
+  --tkr-grad-btn: linear-gradient(135deg, var(--primary), var(--primary-hover));
+  --tkr-error: #e53535;
+
+  display: grid;
+  grid-template-columns: 1.05fr 1fr;
+  min-height: 100vh;
+  color: var(--tkr-darkest);
+  font-family: "Figtree", "Avenir", Arial, sans-serif;
+}
+
+/* ── Brand panel ── */
+.brand-panel {
+  position: relative;
+  background: #16115c;
+  color: #fff;
+  padding: 56px 64px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.brand-panel .blob {
+  position: absolute;
+  z-index: 0;
+  border-radius: 50%;
+  filter: blur(66px);
+  will-change: transform;
+}
+
+.brand-panel .blob.b1 {
+  width: 420px;
+  height: 420px;
+  background: #4dccf7;
+  top: -120px;
+  right: -80px;
+  opacity: 0.46;
+  animation: brandDrift 30s ease-in-out infinite;
+}
+
+.brand-panel .blob.b2 {
+  width: 360px;
+  height: 360px;
+  background: #a06bf5;
+  bottom: -100px;
+  left: -60px;
+  opacity: 0.45;
+  animation: brandDrift 34s ease-in-out infinite;
+  animation-delay: -11s;
+}
+
+.brand-panel .blob.b3 {
+  width: 300px;
+  height: 300px;
+  background: #ff5cf0;
+  top: 38%;
+  right: 18%;
+  opacity: 0.3;
+  animation: brandDrift 38s ease-in-out infinite;
+  animation-delay: -22s;
+}
+
+@keyframes brandDrift {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(-26px, 32px);
+  }
+}
+
+.brand-panel > *:not(.blob) {
+  position: relative;
+  z-index: 1;
+}
+
+.brand-logo img {
+  height: 34px;
+}
+
+.brand-copy {
+  max-width: 440px;
+}
+
+.brand-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  margin-bottom: 26px;
+  backdrop-filter: blur(4px);
+}
+
+.brand-eyebrow sup {
+  font-size: 0.7em;
+  vertical-align: super;
+  line-height: 0;
+  margin-left: 1px;
+}
+
+.brand-copy h1 {
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 1.16;
+  margin: 0 0 18px;
+}
+
+.brand-copy h1 em {
+  font-family: "Caudex", Georgia, serif;
+  font-weight: 700;
+  font-style: normal;
+  background: var(--tkr-grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.brand-copy p {
+  font-size: 15px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0;
+}
+
+.brand-points {
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
+  margin-top: 32px;
+}
+
+.brand-point {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.brand-point i {
+  font-size: 18px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.brand-foot {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 1.6;
+}
+
+/* ── Form panel (host content via slot) ── */
+.form-panel {
+  display: flex;
+  padding: 48px 32px;
+  background: var(--tkr-bg);
+  overflow-y: auto;
+}
+
+.form-panel-inner {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.brand-panel *:focus-visible {
+  outline: 2px solid var(--tkr-secondary);
+  outline-offset: 2px;
+}
+
+/* ── Responsive ── */
+@media (max-width: 880px) {
+  .auth-split {
+    grid-template-columns: 1fr;
+  }
+
+  .brand-panel {
+    display: none;
+  }
+
+  .form-panel {
+    padding: 40px 24px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .brand-panel .blob {
+    animation: none;
+  }
+}
+</style>

package/layer/app/components/layout/firstVisitVideo.vue

@@ -0,0 +1,165 @@
+<template>
+  <aside v-if="visible && video?.src" class="first-visit-video" aria-label="Tutoriel vidéo">
+    <div class="first-visit-video__head">
+      <div class="first-visit-video__heading">
+        <RmIcon name="PlayCircle" :size="18" />
+        <strong>{{ lang === "en" ? "Getting started" : "Bien démarrer" }}</strong>
+      </div>
+      <button
+        type="button"
+        class="first-visit-video__close"
+        :aria-label="lang === 'en' ? 'Close' : 'Fermer'"
+        @click="dismiss"
+      >
+        <RmIcon name="X" :size="16" />
+      </button>
+    </div>
+
+    <video
+      class="first-visit-video__player"
+      :src="video.src"
+      autoplay
+      controls
+      muted
+      playsinline
+      preload="metadata"
+    ></video>
+
+    <div class="first-visit-video__footer">
+      <span>{{ video.title }}</span>
+      <button type="button" class="first-visit-video__dismiss" @click="dismiss">
+        {{ lang === "en" ? "Got it" : "J’ai compris" }}
+      </button>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+interface TutorialVideo {
+  id: number;
+  title: string;
+  description: string;
+  src: string;
+}
+
+const props = defineProps<{
+  video: TutorialVideo | null;
+  lang: "fr" | "en";
+}>();
+
+const STORAGE_KEY = "oip-first-visit-video-seen";
+const visible = ref(false);
+
+function hasSeenVideo() {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function dismiss() {
+  visible.value = false;
+  try {
+    localStorage.setItem(STORAGE_KEY, "1");
+  } catch {
+    // Le navigateur peut refuser le stockage, la fenêtre reste fermée pour la session.
+  }
+}
+
+watch(
+  () => props.video?.src,
+  (src) => {
+    if (src && !hasSeenVideo()) visible.value = true;
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+.first-visit-video {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 1100;
+  width: min(460px, calc(100vw - 32px));
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xl);
+  background: var(--bg-surface);
+  box-shadow: 0 18px 48px rgb(15 23 42 / 24%);
+}
+
+.first-visit-video__head,
+.first-visit-video__footer {
+  align-items: center;
+  display: flex;
+  gap: var(--space-8);
+  justify-content: space-between;
+  padding: var(--space-12) var(--space-16);
+}
+
+.first-visit-video__head {
+  color: var(--color-secondary);
+}
+
+.first-visit-video__heading {
+  align-items: center;
+  display: flex;
+  gap: var(--space-8);
+}
+
+.first-visit-video__close {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: var(--space-4);
+}
+
+.first-visit-video__close:hover {
+  color: var(--text-primary);
+}
+
+.first-visit-video__player {
+  background: var(--bg-surface-3);
+  display: block;
+  max-height: 290px;
+  width: 100%;
+}
+
+.first-visit-video__footer {
+  color: var(--text-secondary);
+  font-size: var(--font-12);
+}
+
+.first-visit-video__footer > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.first-visit-video__dismiss {
+  background: transparent;
+  border: 0;
+  color: var(--color-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  font: inherit;
+  font-weight: var(--weight-semibold);
+}
+
+.first-visit-video__dismiss:hover {
+  color: var(--color-primary);
+}
+
+@media (max-width: 600px) {
+  .first-visit-video {
+    bottom: 16px;
+    right: 16px;
+  }
+}
+</style>

package/layer/app/components/panels/OipPanelDocuments.vue

@@ -0,0 +1,220 @@
+<!--
+  Panneau « Documents » du rail, servi par le layer OIP (tuile Documents).
+
+  Les documents de reference du portail OIP 7 (licences de reutilisation,
+  rapports CEPS et Assurance Maladie, nomenclatures PMSI…), restreints a ceux
+  qui parlent des donnees de cette app. La selection, l'ordre et les libelles
+  des categories viennent de app.config.oip.panels.Documents ; la route
+  (`endpoint`) fait le tri, le panneau ne fait que rendre.
+
+  Une trentaine de lignes ne se parcourt pas d'un coup d'oeil : elles sont
+  regroupees par theme dans des sections repliables, chacune avec le nombre de
+  documents qu'elle porte. La premiere section est ouverte, les autres non.
+
+  Un PDF s'ouvre en apercu dans un tiroir, sans quitter la page : c'est fait
+  pour jeter un oeil, pas pour lire. Les autres formats (tableur, CSV) n'ont
+  pas d'apercu dans un navigateur et partent dans un onglet.
+
+  Lecture seule : les documents s'ajoutent dans Directus, pas ici.
+-->
+<script setup lang="ts">
+interface DocumentRow {
+  id: number;
+  category: string;
+  title: string;
+  src: string;
+  downloadSrc: string;
+  mime: string | null;
+}
+
+const props = defineProps<{
+  /** Partie de l'app qui ouvre le panneau, passee par OipShell (`appKey`). */
+  appKey?: string;
+  superAdmin?: boolean;
+  /** Remplace `appKey` pour le filtre des documents. Vide : toute la liste. */
+  app?: string;
+}>();
+
+const options = useAppConfig().oip.panels.Documents;
+const app = computed(() => props.app ?? props.appKey ?? "");
+
+const { locale } = useI18n();
+
+// Une seule requete pour toute la session : la liste ne bouge pas d'une
+// ouverture du panneau a l'autre. `lazy` evite un `await` de premier niveau,
+// qui rendrait ce composant asynchrone et ferait resuspendre la page a chaque
+// ouverture de la tuile.
+const { data, pending, error } = useAsyncData<DocumentRow[]>(
+  `oip-documents-${app.value || "all"}`,
+  () => $fetch<DocumentRow[]>(options.endpoint, { query: { app: app.value || undefined } }),
+  { server: false, lazy: true },
+);
+
+/** Libelles des categories (app.config), dans l'ordre ou le serveur les renvoie. */
+const CATEGORIES = options.categories as Record<string, { fr: string; en: string }>;
+
+const search = ref("");
+
+const shown = computed(() => {
+  const query = search.value.trim().toLowerCase();
+  const rows = data.value ?? [];
+  if (!query) return rows;
+  return rows.filter((row) => row.title.toLowerCase().includes(query));
+});
+
+/** Les documents groupes par categorie, l'ordre du serveur conserve. */
+const groups = computed(() => {
+  const out: { key: string; label: string; rows: DocumentRow[] }[] = [];
+  for (const row of shown.value) {
+    const label = CATEGORIES[row.category]?.[locale.value === "en" ? "en" : "fr"] ?? row.category;
+    const last = out[out.length - 1];
+    if (last?.key === row.category) last.rows.push(row);
+    else out.push({ key: row.category, label, rows: [row] });
+  }
+  return out;
+});
+
+/**
+ * Sections ouvertes. La premiere l'est au chargement, et une recherche ouvre
+ * tout : replier ce qui vient de repondre a la recherche n'aurait pas de sens.
+ */
+const opened = ref<Record<string, boolean>>({});
+const isOpen = (key: string, index: number) =>
+  opened.value[key] ?? (!!search.value.trim() || index === 0);
+const setOpen = (key: string, value: boolean) => {
+  opened.value[key] = value;
+};
+
+/** Seuls les PDF s'affichent dans un cadre ; le reste se telechargerait. */
+const previewable = (row: DocumentRow) => !!row.mime?.includes("pdf");
+
+const preview = ref<DocumentRow | null>(null);
+const previewOpen = computed({
+  get: () => !!preview.value,
+  set: (value: boolean) => {
+    if (!value) preview.value = null;
+  },
+});
+
+function openDocument(row: DocumentRow) {
+  if (previewable(row)) preview.value = row;
+  else window.open(row.src, "_blank", "noopener");
+}
+</script>
+
+<template>
+  <div class="documents">
+    <p class="documents_intro">
+      {{
+        locale === "en"
+          ? "Reference documents behind the data of this app: licences, reports and coding manuals."
+          : "Les documents de référence derrière les données de cette app : licences, rapports et nomenclatures."
+      }}
+    </p>
+
+    <input
+      v-model="search"
+      class="documents_search"
+      type="search"
+      :placeholder="locale === 'en' ? 'Search a document' : 'Rechercher un document'"
+    >
+
+    <p v-if="pending && !data?.length" class="documents_note">
+      {{ locale === "en" ? "Loading…" : "Chargement…" }}
+    </p>
+
+    <p v-else-if="error" class="documents_note">
+      {{
+        locale === "en"
+          ? "Documents could not be loaded."
+          : "Les documents n'ont pas pu être chargés."
+      }}
+    </p>
+
+    <template v-else-if="groups.length">
+      <RmCollapse
+        v-for="(group, index) in groups"
+        :key="group.key"
+        :title="group.label"
+        :count="group.rows.length"
+        :model-value="isOpen(group.key, index)"
+        @update:model-value="setOpen(group.key, $event)"
+      >
+        <ul class="documents_list">
+          <li v-for="row in group.rows" :key="row.id">
+            <RmFileRow
+              :name="row.title"
+              :format="row.mime ?? ''"
+              :action="previewable(row) ? 'preview' : 'open'"
+              @select="openDocument(row)"
+            />
+          </li>
+        </ul>
+      </RmCollapse>
+    </template>
+
+    <p v-else-if="search.trim()" class="documents_note">
+      {{ locale === "en" ? "No document matches that search." : "Aucun document ne correspond." }}
+    </p>
+
+    <p v-else class="documents_note">
+      {{ locale === "en" ? "No document available." : "Aucun document disponible." }}
+    </p>
+
+    <!-- L'apercu : le PDF tel quel, dans la visionneuse du navigateur. Le
+         tiroir garde les deux sorties (onglet, telechargement) sous la main,
+         parce qu'un document qu'on lit vraiment se lit en plein ecran. Le
+         dessin vit dans `OipDocumentPreview`, partage avec les ecrans qui ouvrent
+         leurs propres PDF. -->
+    <OipDocumentPreview
+      v-model="previewOpen"
+      :src="preview?.src ?? null"
+      :title="preview?.title"
+      :download-src="preview?.downloadSrc ?? null"
+    />
+  </div>
+</template>
+
+<style scoped>
+.documents {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-self: stretch;
+  width: 100%;
+}
+
+.documents_intro,
+.documents_note {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-12);
+  line-height: 1.5;
+}
+
+.documents_search {
+  padding: 8px 10px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-13);
+  outline: none;
+}
+
+.documents_search:focus {
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.1);
+}
+
+.documents_list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+</style>