@tekkare/romulus 0.1.243 → 0.1.245

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

@@ -0,0 +1,447 @@
+<!--
+  Le volet « Statistiques » du rail : l'audience PostHog de l'écran ouvert et
+  de toute l'app, aujourd'hui et sur 7, 30 et 90 jours.
+
+  Personnes, sessions et vues de page, puis les pages les plus vues et les
+  utilisateurs les plus actifs sur la période choisie (dix par dix). Les comptes @tekkare.com sont écartés par défaut :
+  sans eux, l'équipe qui recette l'app gonflerait chaque chiffre.
+
+  Réservé aux superadmins, comme les métadonnées : la tuile n'est posée par le
+  cadre que pour eux, et la route serveur revalide le droit.
+-->
+<template>
+  <div class="toolbar_tab_container stats_panel">
+    <div class="stats_controls">
+      <div class="stats_switches">
+        <RmSegmented
+          v-model="scope"
+          :options="scopeOptions"
+          size="sm"
+          variant="soft"
+          :aria-label="isFr ? 'Périmètre' : 'Scope'"
+        />
+        <RmSegmented
+          v-model="period"
+          :options="periodOptions"
+          size="sm"
+          variant="soft"
+          class="stats_periods"
+          :aria-label="isFr ? 'Période' : 'Period'"
+        />
+      </div>
+      <label class="stats_internal">
+        <RmToggle v-model="internal" :label="isFr ? 'Inclure Tekkare' : 'Include Tekkare'" />
+        <span>{{ isFr ? "Inclure les comptes Tekkare" : "Include Tekkare accounts" }}</span>
+      </label>
+    </div>
+
+    <div v-if="pending && !data" class="stats_loading">
+      <RmSkeleton v-for="i in 3" :key="i" width="100%" :height="88" radius="8px" />
+    </div>
+
+    <p v-else-if="error" class="stats_error">
+      {{ isFr ? "Statistiques illisibles : " : "Could not read statistics: " }}{{ errorMessage }}
+    </p>
+
+    <template v-else-if="data">
+      <section class="stats_section">
+        <p v-if="scope === 'page'" class="stats_section_title">
+          {{ isFr ? "Cette page" : "This page" }}
+          <span v-if="labelOf(data.path) !== data.path" class="stats_path_label">{{ labelOf(data.path) }}</span>
+          <code class="stats_path">{{ data.path }}</code>
+        </p>
+        <p v-else class="stats_section_title">{{ isFr ? "Toute l'app" : "Whole app" }}</p>
+        <div class="stats_kpis">
+          <RmKpi v-for="k in kpis(data[scope][period])" :key="k.label" :label="k.label" :value="k.value" />
+        </div>
+      </section>
+
+      <section class="stats_section">
+        <p class="stats_section_title">{{ isFr ? "Utilisateurs les plus actifs" : "Most active users" }}</p>
+        <p v-if="usersError" class="stats_error">{{ usersError }}</p>
+        <p v-else-if="!usersLoading && !users.length" class="stats_empty">
+          {{ isFr ? "Aucun utilisateur sur la période." : "No users in this period." }}
+        </p>
+        <table v-if="users.length" class="stats_table">
+          <thead>
+            <tr>
+              <th class="stats_rank">#</th>
+              <th>{{ isFr ? "Utilisateur" : "User" }}</th>
+              <th>Workspace</th>
+              <th class="stats_num">{{ isFr ? "Pages vues" : "Page views" }}</th>
+              <th class="stats_num">{{ isFr ? "Visites" : "Visits" }}</th>
+              <th class="stats_num">
+                <RmTooltip :text="screensHint" dir="bottom" max-width="300px" full>
+                  <span class="stats_hint">{{ isFr ? "Écrans" : "Screens" }}</span>
+                </RmTooltip>
+              </th>
+              <th class="stats_num">{{ isFr ? "Dernière vue" : "Last seen" }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(u, i) in users" :key="u.email || i">
+              <td class="stats_rank">{{ i + 1 }}</td>
+              <td>
+                <div class="stats_user">
+                  <span v-if="u.name" class="stats_user_name">{{ u.name }}</span>
+                  <span class="stats_user_email">{{ u.email || (isFr ? "anonyme" : "anonymous") }}</span>
+                </div>
+              </td>
+              <td class="stats_workspace">{{ u.workspace }}</td>
+              <td class="stats_num">{{ rmNumber(u.pageviews) }}</td>
+              <td class="stats_num">{{ rmNumber(u.sessions) }}</td>
+              <td class="stats_num">{{ rmNumber(u.pages) }}</td>
+              <td class="stats_num">{{ seen(u.lastSeen) }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-if="usersLoading" class="stats_loading">
+          <RmSkeleton v-for="i in 3" :key="i" width="100%" :height="28" radius="6px" />
+        </div>
+        <RmButton
+          v-else-if="usersHasMore"
+          variant="secondary"
+          size="sm"
+          class="stats_more"
+          @click="loadUsers()"
+        >
+          {{ isFr ? "Charger plus" : "Load more" }}
+        </RmButton>
+      </section>
+
+      <!-- Le classement des pages n'a de sens qu'a l'echelle de l'app. -->
+      <section v-if="scope === 'app'" class="stats_section">
+        <p class="stats_section_title">{{ isFr ? "Pages les plus vues" : "Most viewed pages" }}</p>
+        <p v-if="!topPages.length" class="stats_empty">
+          {{ isFr ? "Aucune vue sur la période." : "No views in this period." }}
+        </p>
+        <table v-else class="stats_table">
+          <thead>
+            <tr>
+              <th>{{ isFr ? "Page" : "Page" }}</th>
+              <th class="stats_num">{{ isFr ? "Pages vues" : "Page views" }}</th>
+              <th class="stats_num">{{ isFr ? "Utilisateurs" : "Users" }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="p in topPages" :key="p.path" :class="{ 'stats_row--current': p.path === data.path }">
+              <td>
+                <NuxtLink :to="p.path" class="stats_page">
+                  <span class="stats_page_label">{{ labelOf(p.path) }}</span>
+                  <span v-if="labelOf(p.path) !== p.path" class="stats_page_path">{{ p.path }}</span>
+                </NuxtLink>
+              </td>
+              <td class="stats_num">{{ rmNumber(p.pageviews[period]) }}</td>
+              <td class="stats_num">{{ rmNumber(p.users[period]) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <p class="stats_note">
+        {{ isFr ? "Source : PostHog, production" : "Source: PostHog, production" }} ({{ data.hosts.join(", ") }})
+      </p>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { rmNumber } from "@tekkare/romulus/utils/format";
+import type { OipStats, OipStatsMetrics, OipStatsPeriod, OipStatsUser, OipStatsUsers } from "../../types/stats";
+
+const props = defineProps<{
+  // Passees par OipShell a tous les panneaux ; les chiffres sont ceux de l'app.
+  appKey?: string;
+  superAdmin?: boolean;
+  /**
+   * Titre lisible d'un chemin (celui de la navigation), donne par l'app dans
+   * `panelProps.Statistics` : les lecteurs du panneau ne lisent pas les URL.
+   * Absent ou sans reponse, le chemin s'affiche tel quel.
+   */
+  pageLabel?: (path: string) => string | undefined;
+}>();
+
+const labelOf = (path: string) => props.pageLabel?.(path) || path;
+
+const { locale } = useI18n();
+const route = useRoute();
+const isFr = computed(() => locale.value !== "en");
+
+const period = ref<OipStatsPeriod>("30d");
+const internal = ref(false);
+
+const periodOptions = computed(() => [
+  { value: "today", label: isFr.value ? "Aujourd'hui" : "Today" },
+  { value: "7d", label: isFr.value ? "7 jours" : "7 days" },
+  { value: "30d", label: isFr.value ? "30 jours" : "30 days" },
+  { value: "90d", label: isFr.value ? "90 jours" : "90 days" },
+]);
+
+// Une requete rend les quatre periodes : changer de periode ne refetch pas.
+const panelConfig = useAppConfig().oip.panels.Statistics;
+const { data, pending, error } = useFetch<OipStats>(panelConfig.endpoint, {
+  key: "oip-rail-statistics",
+  query: computed(() => ({ path: route.path, internal: internal.value ? "1" : "0" })),
+});
+
+const errorMessage = computed(
+  () => (error.value as any)?.data?.message || error.value?.message || ""
+);
+
+function kpis(m: OipStatsMetrics) {
+  return [
+    { label: isFr.value ? "Utilisateurs" : "Users", value: rmNumber(m.users) },
+    { label: isFr.value ? "Visites" : "Visits", value: rmNumber(m.sessions) },
+    { label: isFr.value ? "Pages vues" : "Page views", value: rmNumber(m.pageviews) },
+  ];
+}
+
+// Perimetre de tout le panneau : l'ecran ouvert (par defaut) ou toute l'app.
+const scope = ref<"app" | "page">("page");
+
+// Classement des utilisateurs : dix par dix, remis a zero quand le
+// perimetre change (periode, ecran, comptes Tekkare).
+const USERS_PAGE = 10;
+const scopeOptions = computed(() => [
+  { value: "page", label: isFr.value ? "Cette page" : "This page" },
+  { value: "app", label: isFr.value ? "Toute l'app" : "Whole app" },
+]);
+const users = ref<OipStatsUser[]>([]);
+const usersHasMore = ref(false);
+const usersLoading = ref(false);
+const usersError = ref("");
+let usersRequest = 0;
+
+async function loadUsers(reset = false) {
+  const request = ++usersRequest;
+  if (reset) users.value = [];
+  usersLoading.value = true;
+  usersError.value = "";
+  try {
+    // Deduite de `endpoint` quand l'app ne la donne pas : une config d'app
+    // (ou un cache) d'avant cette cle enverrait sinon `$fetch(undefined)`.
+    const usersEndpoint = panelConfig.usersEndpoint ?? `${panelConfig.endpoint}/users`;
+    const res = await $fetch<OipStatsUsers>(usersEndpoint, {
+      query: {
+        period: period.value,
+        scope: scope.value,
+        path: route.path,
+        internal: internal.value ? "1" : "0",
+        offset: users.value.length,
+        limit: USERS_PAGE,
+      },
+    });
+    if (request !== usersRequest) return;
+    // Une reponse sans liste (page HTML d'un serveur qui ne connait pas la
+    // route, par exemple) : on montre ce qui est arrive plutot que planter.
+    if (!Array.isArray(res?.users)) {
+      throw new Error(`${isFr.value ? "Réponse inattendue" : "Unexpected response"} : ${String(typeof res === "string" ? res : JSON.stringify(res)).slice(0, 160)}`);
+    }
+    users.value = [...users.value, ...res.users];
+    usersHasMore.value = res.hasMore;
+  } catch (err: any) {
+    if (request !== usersRequest) return;
+    usersError.value = err?.data?.message || err?.message || "";
+  } finally {
+    if (request === usersRequest) usersLoading.value = false;
+  }
+}
+watch([period, scope, internal, () => route.path], () => loadUsers(true), { immediate: true });
+
+const screensHint = computed(() =>
+  isFr.value
+    ? "Nombre de pages différentes ouvertes sur la période, langue et paramètres d'URL ignorés. 310 pages vues sur 22 écrans : 310 affichages répartis sur 22 pages. Chaque fiche (une marque, un produit) compte pour un écran."
+    : "Number of distinct pages opened in the period, ignoring language and URL parameters. 310 page views over 22 screens: 310 displays spread across 22 pages. Each detail page (a brand, a product) counts as one screen."
+);
+
+const seen = (iso: string) =>
+  iso ? new Date(iso).toLocaleDateString(isFr.value ? "fr-FR" : "en-GB", { day: "2-digit", month: "short" }) : "";
+
+const topPages = computed(() =>
+  (data.value?.topPages ?? [])
+    .filter((p) => p.pageviews[period.value] > 0)
+    .sort((a, b) => b.pageviews[period.value] - a.pageviews[period.value])
+    .slice(0, 10)
+);
+</script>
+
+<style scoped>
+.stats_panel {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.stats_controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.stats_internal {
+  align-items: center;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  font-size: 13px;
+  gap: 8px;
+}
+
+.stats_loading {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.stats_section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.stats_section_title {
+  align-items: center;
+  color: var(--text-secondary);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  font-weight: 600;
+  gap: 8px;
+  letter-spacing: 0.04em;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.stats_path {
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+  word-break: break-all;
+}
+
+.stats_switches {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.stats_periods {
+  flex: 1;
+  min-width: 280px;
+}
+
+.stats_rank {
+  color: var(--text-secondary);
+  width: 28px;
+}
+
+.stats_user {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.stats_user_name {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.stats_user_email {
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.stats_workspace {
+  overflow-wrap: anywhere;
+}
+
+.stats_hint {
+  cursor: help;
+  text-decoration: underline dotted;
+  text-underline-offset: 3px;
+}
+
+.stats_more {
+  align-self: center;
+}
+
+.stats_kpis {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.stats_table {
+  border-collapse: collapse;
+  font-size: 13px;
+  width: 100%;
+}
+
+.stats_table th {
+  border-bottom: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-weight: 600;
+  padding: 6px 4px;
+  text-align: left;
+}
+
+.stats_table td {
+  border-bottom: 1px solid var(--border-default);
+  padding: 6px 4px;
+  vertical-align: middle;
+}
+
+.stats_num {
+  text-align: right !important;
+  white-space: nowrap;
+}
+
+.stats_page {
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  overflow-wrap: anywhere;
+  text-decoration: none;
+}
+
+.stats_page:hover .stats_page_label {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.stats_page_path {
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.stats_path_label {
+  color: var(--text-primary);
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.stats_row--current td {
+  background: var(--bg-surface-hover, var(--bg-surface));
+  font-weight: 600;
+}
+
+.stats_empty,
+.stats_note {
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-style: italic;
+  margin: 0;
+}
+
+.stats_error {
+  color: var(--color-danger, #d64545);
+  font-size: 13px;
+  margin: 0;
+}
+</style>

package/layer/app/composables/useAdminAccess.ts

@@ -0,0 +1,86 @@
+import { useOipApi } from "#oip-app/api";
+/**
+ * useAdminAccess - a-t-on le droit de publier un template, et pour qui.
+ *
+ * Deux choses distinctes, souvent confondues :
+ * - `isPlatformAdmin`, porte par `/me/summary`, vaut pour toute adresse
+ *   @tekkare.com : il ouvre les produits, pas l'administration ;
+ * - `isSuperAdmin`, rendu par `/superadmin/me`, est attribue a la main. C'est
+ *   lui qui garde la console d'OIP 7, donc aussi `/superadmin/workspaces`.
+ *
+ * Publier un template met une vue devant des espaces clients : c'est le
+ * second portillon, le meme que la console. Rien n'est demande au chargement
+ * de la page : `ensureLoaded()` n'est appele qu'a l'ouverture du dialogue de
+ * partage, sans quoi tout le monde paierait un aller-retour pour une option
+ * que presque personne ne voit.
+ *
+ * Meme forme que le composable homonyme d'OIP 7 : un `useState` partage, une
+ * seule requete par session.
+ */
+export interface AdminWorkspace {
+  workspaceId: string;
+  name: string;
+  tier: string;
+}
+
+export const useAdminAccess = () => {
+  const isSuperAdmin = useState<boolean>("admin:isSuperAdmin", () => false);
+  const loaded = useState<boolean>("admin:loaded", () => false);
+  const workspaces = useState<AdminWorkspace[]>("admin:workspaces", () => []);
+  const workspacesLoaded = useState<boolean>("admin:workspacesLoaded", () => false);
+  const elysiaApi = useOipApi();
+  const { status } = useAuth();
+
+  async function ensureLoaded(): Promise<boolean> {
+    if (loaded.value) return isSuperAdmin.value;
+    if (status.value !== "authenticated") return false;
+    try {
+      const me = await elysiaApi.admin.me();
+      isSuperAdmin.value = !!me?.isSuperAdmin;
+    } catch {
+      isSuperAdmin.value = false;
+    } finally {
+      loaded.value = true;
+    }
+    return isSuperAdmin.value;
+  }
+
+  /**
+   * Tous les espaces, pour le selecteur de cibles d'un template.
+   *
+   * La route est paginee et rend bien plus que des noms (licences, membres,
+   * comptes) : on la deroule une fois, on ne garde que le nom, et on ecarte
+   * les espaces personnels — offrir un template a l'espace prive de
+   * quelqu'un n'a pas de sens. La recherche se fait ensuite dans le
+   * selecteur, sur la liste en memoire, comme pour les membres.
+   */
+  async function ensureWorkspaces(): Promise<AdminWorkspace[]> {
+    if (workspacesLoaded.value) return workspaces.value;
+    if (!(await ensureLoaded())) return [];
+
+    try {
+      const first = await elysiaApi.admin.workspaces({ page: 1, limit: 100 });
+      const pages = first?.pagination?.totalPages ?? 1;
+      const rest = await Promise.all(
+        Array.from({ length: Math.max(0, pages - 1) }, (_, i) =>
+          elysiaApi.admin.workspaces({ page: i + 2, limit: 100 }),
+        ),
+      );
+
+      workspaces.value = [first, ...rest]
+        .flatMap((res) => res?.workspaces ?? [])
+        .filter((ws) => !ws.isPersonal)
+        .map((ws) => ({ workspaceId: ws.workspaceId, name: ws.name, tier: ws.tier }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    } catch (err) {
+      console.error("[useAdminAccess] Impossible de lister les espaces:", err);
+      workspaces.value = [];
+    } finally {
+      workspacesLoaded.value = true;
+    }
+
+    return workspaces.value;
+  }
+
+  return { isSuperAdmin, workspaces, ensureLoaded, ensureWorkspaces };
+};

package/layer/app/composables/useAlertBrandSync.ts

@@ -0,0 +1,85 @@
+/**
+ * useAlertBrandSync - proposer a une alerte de marque de suivre sa vue.
+ *
+ * Une alerte de vue est repointee toute seule quand la vue bouge : l'API
+ * compare les criteres et la page lui remet sa requete (cf.
+ * `alertRefreshPayload`). Une alerte de MARQUE, elle, ne peut pas l'etre :
+ * elle ne lit ni les filtres de la vue ni son index, elle porte sa propre
+ * liste de marques, figee a la creation.
+ *
+ * Sur les pages de ventes c'est le seul genre d'alerte possible, et la vue y
+ * est justement une selection de produits : elargir la vue sans toucher a
+ * l'alerte laisse une veille qui ne couvre plus ce que l'ecran montre, sans
+ * que rien ne le dise.
+ *
+ * D'ou cette demande, posee au moment ou la vue est enregistree. Demander, et
+ * non suivre en silence : une alerte de marque qui suivrait sa vue d'
+ * elle-meme deviendrait une alerte de vue deguisee, alors que les deux ne se
+ * remettent pas a jour de la meme facon et ne survivent pas aux memes
+ * changements.
+ */
+import type { Alert } from "#oip-app/api";
+
+export interface AlertBrandSyncRequest {
+  alert: Alert;
+  /** Marques que porte desormais la vue. */
+  brands: string[];
+  /** Celles que l'alerte suit encore. */
+  current: string[];
+}
+
+const pending = shallowRef<AlertBrandSyncRequest | null>(null);
+const syncing = ref(false);
+
+export function useAlertBrandSync() {
+  const alerts = useAlerts();
+
+  /**
+   * Regarde si la vue enregistree porte une alerte de marque a decaler.
+   *
+   * Rien n'est demande quand les listes sont deja identiques, ni quand la vue
+   * n'a plus de marques du tout : une vue videe ne veut pas dire « ne
+   * surveille plus rien », et l'API refuserait une alerte sans marque.
+   *
+   * Une seule alerte a la fois : deux demandes empilees feraient deux modales
+   * l'une derriere l'autre, et le cas ne s'est jamais presente.
+   */
+  function ask(pulseId: string, brands: string[]) {
+    if (brands.length === 0) return;
+
+    const alert = alerts.alerts.value.find(
+      (entry) => entry.kind === "product" && entry.pulseId === pulseId,
+    );
+    if (!alert) return;
+
+    const current = alert.brands ?? [];
+    const same =
+      current.length === brands.length &&
+      [...current].sort().join("|") === [...brands].sort().join("|");
+    if (same) return;
+
+    pending.value = { alert, brands, current };
+  }
+
+  function dismiss() {
+    pending.value = null;
+  }
+
+  /** Reporte les marques de la vue sur l'alerte. L'API la reseme. */
+  async function confirm() {
+    const request = pending.value;
+    if (!request) return;
+    syncing.value = true;
+    try {
+      await alerts.update(request.alert.id, { brands: request.brands });
+      // L'alerte repart en `seeding` cote worker : la carte doit le dire.
+      await alerts.load(true);
+      alerts.followSeeding();
+      pending.value = null;
+    } finally {
+      syncing.value = false;
+    }
+  }
+
+  return { pending: computed(() => pending.value), syncing, ask, dismiss, confirm };
+}