@tekkare/romulus 0.1.35 → 0.1.37

package/dist/runtime/components/ExportPanel.vue

@@ -0,0 +1,744 @@
+<!--
+  RmExportPanel - le panneau d'export d'une page, en quatre etapes.
+
+  L'export est la sortie de chaque ecran OIP, et jusqu'ici chaque page avait
+  son bouton : un XLSX, une colonne fixe, un nom de fichier different. Ce
+  panneau remplace ce bouton par une question posee dans l'ordre : quel
+  format, quelles donnees, quelle presentation, on lance.
+
+  Le panneau ne connait pas les formats par leur nom. Chaque format porte
+  trois drapeaux (`tabular`, `visual`, `paged`) et chaque section une nature
+  (`table`, `visual`, `meta`) : c'est leur croisement qui decide de ce qui est
+  propose. Un PNG n'a donc ni colonnes ni mise en page sans qu'aucune ligne du
+  composant ne parle de PNG, et un format ajoute plus tard herite du bon
+  comportement en posant ses drapeaux.
+
+  Le composant ne genere rien : il emet une configuration. Les fichiers sont
+  rendus par `useRmExport`, et c'est l'app qui fournit le contenu — elle seule
+  sait ce que sa page affiche.
+-->
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import type {
+  RmExportConfig,
+  RmExportFormat,
+  RmExportLayout,
+  RmExportOption,
+  RmExportRange,
+  RmExportRecent,
+  RmExportSection,
+  RmExportTemplate,
+} from '../utils/export'
+import {
+  RM_EXPORT_EXTENSIONS,
+  RM_EXPORT_FORMATS,
+  RM_EXPORT_LAYOUTS,
+  RM_EXPORT_OPTIONS,
+  RM_EXPORT_SECTIONS,
+  rmExportDuration,
+  rmExportSize,
+  rmExportSizeKb,
+} from '../utils/export'
+
+const props = withDefaults(
+  defineProps<{
+    /** Nom de fichier propose, sans extension. */
+    fileName: string
+    formats?: RmExportFormat[]
+    sections?: RmExportSection[]
+    ranges?: RmExportRange[]
+    /** Colonnes disponibles, dans l'ordre du tableau de la page. */
+    columns?: string[]
+    options?: RmExportOption[]
+    layouts?: RmExportLayout[]
+    /** Modeles pre-remplis. Vide : le panneau ouvre directement le wizard. */
+    templates?: RmExportTemplate[]
+    recent?: RmExportRecent[]
+    /**
+     * La programmation recurrente suppose un service qui execute l'export
+     * sans le navigateur. Tant qu'il n'existe pas, l'etape reste visible mais
+     * inerte : cacher la promesse serait pire que l'annoncer.
+     */
+    scheduling?: boolean
+    busy?: boolean
+    /** Message d'erreur du dernier export. */
+    error?: string
+    /** Message de confirmation (lien copie, fichier pret). */
+    notice?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    formats: () => RM_EXPORT_FORMATS,
+    sections: () => RM_EXPORT_SECTIONS,
+    ranges: () => [],
+    columns: () => [],
+    options: () => RM_EXPORT_OPTIONS,
+    layouts: () => RM_EXPORT_LAYOUTS,
+    templates: () => [],
+    recent: () => [],
+    scheduling: false,
+    busy: false,
+    error: '',
+    notice: '',
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{ export: [config: RmExportConfig] }>()
+
+const LABELS = {
+  fr: {
+    tabExport: 'Exporter',
+    tabMine: 'Mes exports',
+    lead: 'Démarrez avec un modèle pré-configuré, ou personnalisez chaque paramètre via le wizard 4 étapes.',
+    entryTitle: 'Comment voulez-vous commencer ?',
+    entryHint: 'Les modèles pré-remplissent toutes les étapes, vous arrivez directement à la revue finale et pouvez ajuster avant de lancer.',
+    custom: 'Export personnalisé',
+    customMeta: 'Configurer chaque paramètre via le wizard 4 étapes',
+    backToEntry: 'Choisir un autre modèle',
+    template: 'Modèle',
+    steps: ['Format', 'Données', 'Personnaliser', 'Exporter'],
+    step1: 'Choisissez le format de votre export. Le contenu disponible (graphiques, tableau, sections) varie selon le format.',
+    step2: 'Quelles données inclure dans l\'export ?',
+    step3: 'Nom du fichier, mise en page, options avancées.',
+    step4: 'Vérifiez votre configuration et lancez l\'export.',
+    range: 'Plage de données',
+    sectionsLabel: 'Sections à inclure',
+    columnsLabel: 'Colonnes du tableau',
+    fileNameLabel: 'Nom du fichier',
+    fileNameHint: 'Extension ajoutée automatiquement selon le format.',
+    layoutLabel: 'Mise en page',
+    optionsLabel: 'Options',
+    scheduleLabel: 'Type d\'export',
+    once: 'Une seule fois',
+    recurring: 'Récurrent',
+    schedulingSoon: 'La programmation récurrente et l\'envoi par email arrivent avec le service d\'exports. Pour l\'instant, un export part depuis ce navigateur.',
+    frequency: 'Fréquence',
+    daily: 'Quotidien',
+    weekly: 'Hebdomadaire',
+    monthly: 'Mensuel',
+    email: 'Envoyer par email à chaque export',
+    recap: 'Récapitulatif',
+    recapFormat: 'Format',
+    recapFile: 'Nom du fichier',
+    recapData: 'Données',
+    recapSections: 'Sections',
+    recapColumns: 'Colonnes',
+    recapLayout: 'Mise en page',
+    recapSchedule: 'Programmation',
+    recapSize: 'Taille estimée',
+    recapDuration: 'Durée estimée',
+    rows: 'lignes',
+    of: 'sur',
+    prev: 'Retour',
+    next: 'Suivant',
+    launch: 'Lancer l\'export',
+    running: 'Export en cours...',
+    progress: 'Étape',
+    recentTitle: 'Exports récents',
+    recentEmpty: 'Aucun export lancé depuis ce navigateur.',
+    recentHint: 'Historique local à ce navigateur : les exports ne sont pas conservés sur nos serveurs.',
+    permalinkHint: 'Le lien reprend la vue courante, filtres compris. Rien à configurer.',
+    nothing: 'Aucun contenu disponible pour ce format sur cette page.',
+  },
+  en: {
+    tabExport: 'Export',
+    tabMine: 'My exports',
+    lead: 'Start from a preset, or set every parameter through the 4-step wizard.',
+    entryTitle: 'How do you want to start?',
+    entryHint: 'Presets fill in every step, you land on the final review and can adjust before running.',
+    custom: 'Custom export',
+    customMeta: 'Set every parameter through the 4-step wizard',
+    backToEntry: 'Pick another preset',
+    template: 'Preset',
+    steps: ['Format', 'Data', 'Customize', 'Export'],
+    step1: 'Pick your export format. Available content (charts, table, sections) depends on the format.',
+    step2: 'Which data should the export contain?',
+    step3: 'File name, layout, advanced options.',
+    step4: 'Check your setup and run the export.',
+    range: 'Data range',
+    sectionsLabel: 'Sections to include',
+    columnsLabel: 'Table columns',
+    fileNameLabel: 'File name',
+    fileNameHint: 'Extension added automatically, based on the format.',
+    layoutLabel: 'Layout',
+    optionsLabel: 'Options',
+    scheduleLabel: 'Export type',
+    once: 'Once',
+    recurring: 'Recurring',
+    schedulingSoon: 'Recurring exports and email delivery ship with the export service. For now, an export runs from this browser.',
+    frequency: 'Frequency',
+    daily: 'Daily',
+    weekly: 'Weekly',
+    monthly: 'Monthly',
+    email: 'Email me every export',
+    recap: 'Summary',
+    recapFormat: 'Format',
+    recapFile: 'File name',
+    recapData: 'Data',
+    recapSections: 'Sections',
+    recapColumns: 'Columns',
+    recapLayout: 'Layout',
+    recapSchedule: 'Schedule',
+    recapSize: 'Estimated size',
+    recapDuration: 'Estimated time',
+    rows: 'rows',
+    of: 'of',
+    prev: 'Back',
+    next: 'Next',
+    launch: 'Run export',
+    running: 'Exporting...',
+    progress: 'Step',
+    recentTitle: 'Recent exports',
+    recentEmpty: 'No export run from this browser yet.',
+    recentHint: 'History is local to this browser: exports are not kept on our servers.',
+    permalinkHint: 'The link points at the current view, filters included. Nothing to configure.',
+    nothing: 'No content available for this format on this page.',
+  },
+} as const
+
+const t = computed(() => LABELS[props.lang] ?? LABELS.fr)
+
+/** Premier format utilisable : un catalogue peut ouvrir sur un format grise. */
+const firstFormat = computed(() => props.formats.find(format => !format.disabled) ?? props.formats[0])
+
+const config = reactive<RmExportConfig>({
+  format: firstFormat.value?.key ?? 'xlsx',
+  range: props.ranges[0]?.key ?? 'filtered',
+  sections: props.sections.filter(section => section.on).map(section => section.key),
+  columns: [...props.columns],
+  options: props.options.filter(option => option.on).map(option => option.key),
+  fileName: props.fileName,
+  layout: props.layouts[0]?.key ?? 'a4-portrait',
+  schedule: 'once',
+  frequency: 'monthly',
+  email: false,
+})
+
+// Le nom de fichier propose depend de la page et du scope : il change sous le
+// panneau quand l'utilisateur filtre. On suit la proposition tant qu'il n'a
+// pas ecrit son propre nom.
+const renamed = ref(false)
+watch(
+  () => props.fileName,
+  (next) => {
+    if (!renamed.value) config.fileName = next
+  },
+)
+
+// Les colonnes ne sont connues qu'une fois la page chargee : la selection
+// suit, sinon un export lance tot sort avec toutes les colonnes alors que le
+// panneau en montre cinq.
+watch(
+  () => props.columns,
+  (next) => {
+    config.columns = config.columns.filter(column => next.includes(column))
+    if (!config.columns.length) config.columns = [...next]
+  },
+)
+
+const step = ref(1)
+const mode = ref<'entry' | 'wizard'>(props.templates.length ? 'entry' : 'wizard')
+const templateKey = ref<string | null>(null)
+
+const format = computed(
+  () => props.formats.find(item => item.key === config.format) ?? firstFormat.value,
+)
+
+/** Une section n'a de sens que si le format sait la rendre. */
+function enabled(section: RmExportSection) {
+  if (!format.value) return false
+  if (section.kind === 'table') return !!format.value.tabular
+  if (section.kind === 'visual') return !!format.value.visual
+  return !!format.value.paged
+}
+
+const showColumns = computed(() => !!format.value?.tabular && props.columns.length > 0)
+const showLayout = computed(() => !!format.value?.paged && props.layouts.length > 0)
+const showRange = computed(() => !!format.value?.tabular && props.ranges.length > 0)
+const isPermalink = computed(() => !format.value?.tabular && !format.value?.visual)
+
+/** Sections cochees, une fois retirees celles que le format ne rend pas. */
+const activeSections = computed(() =>
+  props.sections.filter(section => enabled(section) && config.sections.includes(section.key)),
+)
+
+const availableSections = computed(() => props.sections.filter(section => enabled(section)))
+
+const range = computed(
+  () => props.ranges.find(item => item.key === config.range) ?? props.ranges[0],
+)
+
+const rows = computed(() => (showRange.value ? range.value?.rows ?? 0 : 0))
+
+const sizeKb = computed(() =>
+  rmExportSizeKb({
+    format: config.format,
+    rows: rows.value,
+    columns: config.columns.length,
+    totalColumns: props.columns.length,
+    sections: activeSections.value.length,
+    includesTable: activeSections.value.some(section => section.kind === 'table'),
+    zip: config.options.includes('zip'),
+  }),
+)
+
+const fullFileName = computed(() => {
+  if (isPermalink.value) return '—'
+  const extension = RM_EXPORT_EXTENSIONS[config.format] ?? config.format
+  return `${config.fileName || 'export'}.${extension}`
+})
+
+const scheduleLabel = computed(() => {
+  if (config.schedule === 'once') return t.value.once
+  const names: Record<string, string> = {
+    daily: t.value.daily,
+    weekly: t.value.weekly,
+    monthly: t.value.monthly,
+  }
+  return `${t.value.recurring}, ${(names[config.frequency] ?? '').toLowerCase()}`
+})
+
+/** Le format ne rend rien de ce que la page declare : le lancer serait vide. */
+const emptyForFormat = computed(
+  () => !isPermalink.value && availableSections.value.length === 0,
+)
+
+const formatMeta = computed(() => (format.value?.disabled ? format.value.disabledHint ?? '' : ''))
+
+function pickFormat(item: RmExportFormat) {
+  if (item.disabled) return
+  config.format = item.key
+  // Une section que le nouveau format ne rend pas reste cochee dans l'etat
+  // mais ne compte plus : c'est ce qui permet de revenir a PDF sans avoir
+  // perdu ses choix.
+  props.sections.forEach((section) => {
+    if (enabled(section) && section.on && !config.sections.includes(section.key)) {
+      config.sections.push(section.key)
+    }
+  })
+}
+
+function toggle(list: string[], key: string) {
+  const index = list.indexOf(key)
+  if (index === -1) list.push(key)
+  else list.splice(index, 1)
+}
+
+function applyTemplate(template: RmExportTemplate | null) {
+  if (!template) {
+    templateKey.value = null
+    mode.value = 'wizard'
+    step.value = 1
+    return
+  }
+  Object.assign(config, template.config)
+  if (template.config.fileName) renamed.value = true
+  templateKey.value = template.key
+  mode.value = 'wizard'
+  step.value = 4
+}
+
+function goto(next: number) {
+  step.value = Math.min(4, Math.max(1, next))
+}
+
+function launch() {
+  emit('export', { ...config, sections: activeSections.value.map(section => section.key) })
+}
+
+const recentDate = (at: string | Date) =>
+  new Date(at).toLocaleDateString(props.lang === 'en' ? 'en-US' : 'fr-FR', {
+    day: 'numeric',
+    month: 'long',
+  })
+</script>
+
+<template>
+  <div class="rm-export">
+    <div class="rm-export__tabs" role="tablist">
+      <button class="rm-export__tab rm-export__tab--active" type="button" role="tab">
+        <RmIcon name="PlusCircle" :size="16" /> {{ t.tabExport }}
+      </button>
+      <button
+        class="rm-export__tab"
+        type="button"
+        role="tab"
+        disabled
+        :title="t.schedulingSoon"
+      >
+        <RmIcon name="ClockClockwise" :size="16" /> {{ t.tabMine }}
+      </button>
+    </div>
+
+    <p class="rm-export__lead">{{ t.lead }}</p>
+
+    <!-- Entree : modeles pre-remplis, ou le wizard a la main -->
+    <div v-if="mode === 'entry'" class="rm-export__entry">
+      <p class="rm-export__eyebrow">{{ t.entryTitle }}</p>
+      <div class="rm-export__templates">
+        <button
+          v-for="template in templates"
+          :key="template.key"
+          class="rm-export__template"
+          type="button"
+          @click="applyTemplate(template)"
+        >
+          <RmIcon :name="template.icon" :size="26" weight="fill" :color="template.color" />
+          <span class="rm-export__template-body">
+            <span class="rm-export__template-name">{{ template.name }}</span>
+            <span class="rm-export__template-meta">{{ template.meta }}</span>
+          </span>
+        </button>
+        <button
+          class="rm-export__template rm-export__template--custom"
+          type="button"
+          @click="applyTemplate(null)"
+        >
+          <RmIcon name="PlusCircle" :size="26" />
+          <span class="rm-export__template-body">
+            <span class="rm-export__template-name">{{ t.custom }}</span>
+            <span class="rm-export__template-meta">{{ t.customMeta }}</span>
+          </span>
+        </button>
+      </div>
+      <p class="rm-export__hint">{{ t.entryHint }}</p>
+    </div>
+
+    <!-- Wizard -->
+    <div v-else class="rm-export__wizard">
+      <div v-if="templates.length" class="rm-export__wizard-head">
+        <button class="rm-export__back" type="button" @click="mode = 'entry'">
+          <RmIcon name="ArrowLeft" :size="14" /> {{ t.backToEntry }}
+        </button>
+        <RmBadge v-if="templateKey" variant="info">
+          {{ t.template }} : {{ templates.find(item => item.key === templateKey)?.name }}
+        </RmBadge>
+      </div>
+
+      <div class="rm-export__stepper" role="tablist">
+        <template v-for="(label, index) in t.steps" :key="label">
+          <div v-if="index" class="rm-export__step-divider" />
+          <button
+            class="rm-export__step"
+            :class="{
+              'rm-export__step--active': step === index + 1,
+              'rm-export__step--done': step > index + 1,
+            }"
+            type="button"
+            role="tab"
+            :aria-selected="step === index + 1"
+            @click="goto(index + 1)"
+          >
+            <span class="rm-export__step-num">{{ index + 1 }}</span>
+            <span class="rm-export__step-label">{{ label }}</span>
+          </button>
+        </template>
+      </div>
+
+      <!-- Etape 1 : format -->
+      <div v-if="step === 1" class="rm-export__panel">
+        <p class="rm-export__desc">{{ t.step1 }}</p>
+        <div class="rm-export__formats" role="radiogroup">
+          <label
+            v-for="item in formats"
+            :key="item.key"
+            class="rm-export__format"
+            :class="{
+              'rm-export__format--active': config.format === item.key,
+              'rm-export__format--off': item.disabled,
+            }"
+            :title="item.disabled ? item.disabledHint : undefined"
+          >
+            <input
+              type="radio"
+              name="rm-export-format"
+              :value="item.key"
+              :checked="config.format === item.key"
+              :disabled="item.disabled"
+              @change="pickFormat(item)"
+            >
+            <RmIcon :name="item.icon" :size="24" weight="fill" :color="item.color" />
+            <span class="rm-export__format-text">
+              <span class="rm-export__format-name">{{ item.label }}</span>
+              <span class="rm-export__format-desc">{{ item.desc }}</span>
+              <span v-if="item.disabled && item.disabledHint" class="rm-export__format-meta">
+                {{ item.disabledHint }}
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+
+      <!-- Etape 2 : donnees -->
+      <div v-else-if="step === 2" class="rm-export__panel">
+        <p class="rm-export__desc">{{ isPermalink ? t.permalinkHint : t.step2 }}</p>
+
+        <div v-if="showRange" class="rm-export__row">
+          <span class="rm-export__label">{{ t.range }}</span>
+          <RmSegmented
+            v-model="config.range"
+            block
+            size="sm"
+            :options="ranges.map(item => ({ value: item.key, label: item.label }))"
+            :aria-label="t.range"
+          />
+        </div>
+
+        <div v-if="availableSections.length" class="rm-export__row">
+          <span class="rm-export__label">{{ t.sectionsLabel }}</span>
+          <div class="rm-export__checks">
+            <label
+              v-for="section in sections"
+              :key="section.key"
+              class="rm-export__check"
+              :class="{ 'rm-export__check--off': !enabled(section) }"
+            >
+              <input
+                type="checkbox"
+                :checked="config.sections.includes(section.key) && enabled(section)"
+                :disabled="!enabled(section)"
+                @change="toggle(config.sections, section.key)"
+              >
+              {{ section.label }}
+            </label>
+          </div>
+        </div>
+
+        <div v-if="showColumns" class="rm-export__row">
+          <span class="rm-export__label">
+            {{ t.columnsLabel }} ({{ config.columns.length }} {{ t.of }} {{ columns.length }})
+          </span>
+          <div class="rm-export__chips">
+            <button
+              v-for="column in columns"
+              :key="column"
+              class="rm-export__chip"
+              :class="config.columns.includes(column) ? 'rm-export__chip--on' : 'rm-export__chip--off'"
+              type="button"
+              @click="toggle(config.columns, column)"
+            >
+              {{ config.columns.includes(column) ? column : `+ ${column}` }}
+              <RmIcon v-if="config.columns.includes(column)" name="X" :size="11" />
+            </button>
+          </div>
+        </div>
+
+        <p v-if="emptyForFormat" class="rm-export__hint">{{ t.nothing }}</p>
+      </div>
+
+      <!-- Etape 3 : personnaliser -->
+      <div v-else-if="step === 3" class="rm-export__panel">
+        <p class="rm-export__desc">{{ isPermalink ? t.permalinkHint : t.step3 }}</p>
+
+        <div v-if="!isPermalink" class="rm-export__row">
+          <label class="rm-export__label" for="rm-export-file">{{ t.fileNameLabel }}</label>
+          <input
+            id="rm-export-file"
+            v-model="config.fileName"
+            class="rm-export__input"
+            type="text"
+            @input="renamed = true"
+          >
+          <span class="rm-export__hint">{{ t.fileNameHint }}</span>
+        </div>
+
+        <div v-if="showLayout" class="rm-export__row">
+          <span class="rm-export__label">{{ t.layoutLabel }}</span>
+          <RmSegmented
+            v-model="config.layout"
+            block
+            size="sm"
+            :options="layouts.map(item => ({ value: item.key, label: item.label }))"
+            :aria-label="t.layoutLabel"
+          />
+        </div>
+
+        <div v-if="options.length" class="rm-export__row">
+          <span class="rm-export__label">{{ t.optionsLabel }}</span>
+          <div class="rm-export__checks">
+            <label
+              v-for="option in options"
+              :key="option.key"
+              class="rm-export__check"
+              :class="{ 'rm-export__check--off': option.disabled }"
+            >
+              <input
+                type="checkbox"
+                :checked="config.options.includes(option.key)"
+                :disabled="option.disabled"
+                @change="toggle(config.options, option.key)"
+              >
+              {{ option.label }}
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- Etape 4 : exporter -->
+      <div v-else class="rm-export__panel">
+        <p class="rm-export__desc">{{ t.step4 }}</p>
+
+        <div class="rm-export__row">
+          <span class="rm-export__label">{{ t.scheduleLabel }}</span>
+          <RmSegmented
+            v-model="config.schedule"
+            block
+            size="sm"
+            :options="[
+              { value: 'once', label: t.once, icon: 'download-simple' },
+              { value: 'recurring', label: t.recurring, icon: 'clock-clockwise', disabled: !scheduling },
+            ]"
+            :aria-label="t.scheduleLabel"
+          />
+          <span v-if="!scheduling" class="rm-export__hint">{{ t.schedulingSoon }}</span>
+
+          <div v-if="scheduling && config.schedule === 'recurring'" class="rm-export__sub">
+            <span class="rm-export__label">{{ t.frequency }}</span>
+            <RmSegmented
+              v-model="config.frequency"
+              block
+              size="sm"
+              :options="[
+                { value: 'daily', label: t.daily },
+                { value: 'weekly', label: t.weekly },
+                { value: 'monthly', label: t.monthly },
+              ]"
+              :aria-label="t.frequency"
+            />
+            <label class="rm-export__check">
+              <input v-model="config.email" type="checkbox"> {{ t.email }}
+            </label>
+          </div>
+        </div>
+
+        <div class="rm-export__recap">
+          <p class="rm-export__eyebrow">{{ t.recap }}</p>
+          <div class="rm-export__recap-row">
+            <RmIcon name="FileText" :size="16" />
+            <div>
+              <div class="rm-export__recap-k">{{ t.recapFormat }}</div>
+              <div class="rm-export__recap-v">{{ format?.label }}</div>
+            </div>
+          </div>
+          <div class="rm-export__recap-row">
+            <RmIcon name="Textbox" :size="16" />
+            <div>
+              <div class="rm-export__recap-k">{{ t.recapFile }}</div>
+              <div class="rm-export__recap-v">{{ fullFileName }}</div>
+            </div>
+          </div>
+          <div v-if="showRange" class="rm-export__recap-row">
+            <RmIcon name="Database" :size="16" />
+            <div>
+              <div class="rm-export__recap-k">{{ t.recapData }}</div>
+              <div class="rm-export__recap-v">
+                {{ rows.toLocaleString(lang === 'en' ? 'en-US' : 'fr-FR') }} {{ t.rows }}, {{ range?.label }}
+              </div>
+            </div>
+          </div>
+          <div v-if="availableSections.length" class="rm-export__recap-row">
+            <RmIcon name="CardsThree" :size="16" />
+            <div>
+              <div class="rm-export__recap-k">{{ t.recapSections }}</div>
+              <div class="rm-export__recap-v">
+                {{ activeSections.length }} {{ t.of }} {{ availableSections.length }}
+              </div>
+            </div>
+          </div>
+          <div v-if="showColumns" class="rm-export__recap-row">
+            <RmIcon name="Columns" :size="16" />
+            <div>
+              <div class="rm-export__recap-k">{{ t.recapColumns }}</div>
+              <div class="rm-export__recap-v">
+                {{ config.columns.length }} {{ t.of }} {{ columns.length }}
+              </div>
+            </div>
+          </div>
+          <div v-if="showLayout" class="rm-export__recap-row">
+            <RmIcon name="Layout" :size="16" />
+            <div>
+              <div class="rm-export__recap-k">{{ t.recapLayout }}</div>
+              <div class="rm-export__recap-v">
+                {{ layouts.find(item => item.key === config.layout)?.label }}
+              </div>
+            </div>
+          </div>
+          <div class="rm-export__recap-row">
+            <RmIcon name="Clock" :size="16" />
+            <div>
+              <div class="rm-export__recap-k">{{ t.recapSchedule }}</div>
+              <div class="rm-export__recap-v">{{ scheduleLabel }}</div>
+            </div>
+          </div>
+          <div v-if="!isPermalink" class="rm-export__recap-row">
+            <RmIcon name="HardDrives" :size="16" />
+            <div>
+              <div class="rm-export__recap-k">{{ t.recapSize }}</div>
+              <div class="rm-export__recap-v">{{ rmExportSize(sizeKb) }}</div>
+            </div>
+          </div>
+          <div v-if="!isPermalink" class="rm-export__recap-row">
+            <RmIcon name="Timer" :size="16" />
+            <div>
+              <div class="rm-export__recap-k">{{ t.recapDuration }}</div>
+              <div class="rm-export__recap-v">{{ rmExportDuration(sizeKb, rows) }}</div>
+            </div>
+          </div>
+        </div>
+
+        <p v-if="formatMeta" class="rm-export__hint">{{ formatMeta }}</p>
+        <p v-if="notice" class="rm-export__notice">{{ notice }}</p>
+        <p v-if="error" class="rm-export__error">{{ error }}</p>
+      </div>
+
+      <div class="rm-export__footer">
+        <RmButton variant="secondary" size="sm" :disabled="step === 1" prefix-icon="ArrowLeft" @click="goto(step - 1)">
+          {{ t.prev }}
+        </RmButton>
+        <span class="rm-export__progress">{{ t.progress }} <b>{{ step }}</b> {{ t.of }} 4</span>
+        <RmButton
+          v-if="step < 4"
+          variant="primary-fill"
+          size="sm"
+          suffix-icon="ArrowRight"
+          @click="goto(step + 1)"
+        >
+          {{ t.next }}
+        </RmButton>
+        <RmButton
+          v-else
+          variant="primary-fill"
+          size="sm"
+          prefix-icon="DownloadSimple"
+          :disabled="busy || emptyForFormat"
+          @click="launch"
+        >
+          {{ busy ? t.running : t.launch }}
+        </RmButton>
+      </div>
+    </div>
+
+    <!-- Exports recents -->
+    <div class="rm-export__history">
+      <p class="rm-export__eyebrow">
+        <RmIcon name="DownloadSimple" :size="14" /> {{ t.recentTitle }}
+      </p>
+      <p v-if="!recent.length" class="rm-export__hint">{{ t.recentEmpty }}</p>
+      <div v-for="(item, index) in recent" :key="`${item.name}-${index}`" class="rm-export__history-row">
+        <RmIcon name="File" :size="16" />
+        <span class="rm-export__history-name">{{ item.name }}</span>
+        <span class="rm-export__history-meta">
+          <template v-if="item.rows">{{ item.rows.toLocaleString(lang === 'en' ? 'en-US' : 'fr-FR') }} {{ t.rows }} · </template>
+          <template v-if="item.size">{{ item.size }} · </template>
+          {{ recentDate(item.at) }}
+        </span>
+      </div>
+      <p v-if="recent.length" class="rm-export__hint">{{ t.recentHint }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-export{display:flex;flex-direction:column}.rm-export__tabs{border-bottom:1px solid var(--border-default);display:flex;margin-bottom:var(--space-16)}.rm-export__tab{align-items:center;background:none;border:none;border-bottom:3px solid transparent;color:var(--text-muted);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-14);font-weight:600;gap:var(--space-6);padding:var(--space-12) var(--space-16)}.rm-export__tab--active{border-bottom-color:var(--color-primary);color:var(--color-secondary)}.rm-export__tab:disabled{cursor:not-allowed;opacity:.5}.rm-export__desc,.rm-export__lead{color:var(--text-secondary);font-size:12.5px;line-height:1.55;margin:0 0 var(--space-16)}.rm-export__eyebrow{align-items:center;color:var(--text-muted);display:flex;font-size:10.5px;font-weight:700;gap:var(--space-6);letter-spacing:.1em;margin:0 0 var(--space-8);text-transform:uppercase}.rm-export__hint{color:var(--text-muted);display:block;font-size:11.5px;line-height:1.45;margin:var(--space-8) 0 0}.rm-export__notice{color:var(--color-success)}.rm-export__error,.rm-export__notice{font-size:12px;margin:var(--space-8) 0 0}.rm-export__error{color:var(--color-danger)}.rm-export__templates{display:grid;gap:var(--space-8)}.rm-export__template{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);cursor:pointer;display:flex;font-family:inherit;gap:var(--space-12);padding:var(--space-12) var(--space-16);text-align:left;transition:border-color var(--duration-fast),background var(--duration-fast),transform var(--duration-fast)}.rm-export__template:hover{background:var(--bg-hover);border-color:var(--color-secondary);transform:translateY(-1px)}.rm-export__template--custom{background:transparent;border-style:dashed}.rm-export__template-body{display:flex;flex-direction:column;min-width:0}.rm-export__template-name{color:var(--text-primary);font-size:13.5px;font-weight:700;line-height:1.2}.rm-export__template-meta{color:var(--text-muted);font-size:11px;line-height:1.35;margin-top:3px}.rm-export__wizard{background:var(--bg-surface-2);border:1px solid var(--border-default);border-radius:var(--radius-2xl);padding:var(--space-16) var(--space-20)}.rm-export__wizard-head{align-items:center;border-bottom:1px solid var(--border-soft);display:flex;gap:var(--space-12);margin-bottom:var(--space-16);padding-bottom:var(--space-12)}.rm-export__back{align-items:center;background:none;border:none;color:var(--color-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:12px;font-weight:600;gap:var(--space-4);padding:0}.rm-export__back:hover{text-decoration:underline;text-underline-offset:3px}.rm-export__stepper{align-items:center;display:flex;gap:var(--space-4);margin-bottom:var(--space-20)}.rm-export__step{background:none;border:none;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;gap:var(--space-6);padding:var(--space-4) var(--space-8)}.rm-export__step,.rm-export__step-num{align-items:center;display:inline-flex}.rm-export__step-num{background:var(--bg-surface-3);border:1.5px solid var(--border-default);border-radius:50%;color:var(--text-muted);font-size:12px;font-weight:700;height:22px;justify-content:center;transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast);width:22px}.rm-export__step-label{color:var(--text-muted);font-size:12px;font-weight:600}.rm-export__step:hover .rm-export__step-label{color:var(--text-primary)}.rm-export__step--active .rm-export__step-num{background:var(--color-primary);border-color:var(--color-primary);box-shadow:var(--shadow-focus);color:#fff}.rm-export__step--active .rm-export__step-label{color:var(--color-secondary)}.rm-export__step--done .rm-export__step-num{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff}.rm-export__step--done .rm-export__step-label{color:var(--text-secondary)}.rm-export__step-divider{background:var(--border-default);border-radius:var(--radius-pill);flex:1;height:1.5px}.rm-export__panel{animation:rm-export-in var(--duration-base) var(--ease-out)}@keyframes rm-export-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.rm-export__formats{display:grid;gap:var(--space-8)}.rm-export__format{align-items:flex-start;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-xl);cursor:pointer;display:flex;gap:var(--space-12);padding:var(--space-12) var(--space-16);transition:border-color var(--duration-fast),background var(--duration-fast),transform var(--duration-fast)}.rm-export__format:hover{border-color:var(--color-secondary);transform:translateY(-1px)}.rm-export__format--active{background:var(--bg-hover);border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.rm-export__format--active .rm-export__format-name{color:var(--color-primary)}.rm-export__format--off{cursor:not-allowed;opacity:.55}.rm-export__format--off:hover{border-color:var(--border-default);transform:none}.rm-export__format input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:50%;cursor:inherit;flex-shrink:0;height:18px;margin:1px 0 0;position:relative;width:18px}.rm-export__format input[type=radio]:checked{border-color:var(--color-primary)}.rm-export__format input[type=radio]:checked:after{background:var(--color-primary);border-radius:50%;content:"";inset:3px;position:absolute}.rm-export__format-text{display:flex;flex-direction:column;min-width:0}.rm-export__format-name{color:var(--text-primary);font-size:14px;font-weight:700;line-height:1.2}.rm-export__format-desc{color:var(--text-muted);font-size:11.5px;line-height:1.45;margin-top:3px}.rm-export__format-meta{border-top:1px solid var(--border-soft);color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;margin-top:var(--space-8);padding-top:var(--space-8);text-transform:uppercase}.rm-export__row{margin-bottom:var(--space-20)}.rm-export__row:last-child{margin-bottom:0}.rm-export__label{color:var(--text-secondary);display:block;font-size:11px;font-weight:700;letter-spacing:.06em;margin-bottom:var(--space-8);text-transform:uppercase}.rm-export__sub{margin-top:var(--space-12)}.rm-export__input{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;font-size:13px;padding:var(--space-8) var(--space-12);width:100%}.rm-export__input:focus{border-color:var(--color-primary);box-shadow:var(--shadow-focus);outline:none}.rm-export__checks{display:grid;gap:var(--space-6)}.rm-export__check{align-items:center;color:var(--text-primary);cursor:pointer;display:flex;font-size:12.5px;gap:var(--space-8)}.rm-export__check--off{cursor:not-allowed;opacity:.5}.rm-export__check input[type=checkbox]{accent-color:var(--color-primary);cursor:inherit;height:15px;width:15px}.rm-export__chips{display:flex;flex-wrap:wrap;gap:var(--space-6)}.rm-export__chip{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:11.5px;font-weight:600;gap:var(--space-4);padding:3px var(--space-8)}.rm-export__chip--on{background:var(--bg-hover);border-color:var(--color-primary);color:var(--color-primary)}.rm-export__chip--off{background:var(--bg-surface);color:var(--text-muted)}.rm-export__chip--off:hover{border-color:var(--color-secondary);color:var(--color-secondary)}.rm-export__recap{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);margin-top:var(--space-16);padding:var(--space-16)}.rm-export__recap-row{align-items:flex-start;border-bottom:1px solid var(--border-soft);color:var(--color-secondary);display:flex;gap:var(--space-12);padding:var(--space-8) 0}.rm-export__recap-row:last-child{border-bottom:none}.rm-export__recap-row>div{flex:1;min-width:0}.rm-export__recap-k{color:var(--text-muted);font-size:10.5px;font-weight:700;letter-spacing:.08em;margin-bottom:2px;text-transform:uppercase}.rm-export__recap-v{color:var(--text-primary);font-size:13px;font-weight:600;word-break:break-word}.rm-export__footer{align-items:center;border-top:1px solid var(--border-default);display:flex;gap:var(--space-8);margin-top:var(--space-20);padding-top:var(--space-16)}.rm-export__progress{color:var(--text-muted);flex:1;font-size:12px;text-align:center}.rm-export__progress b{color:var(--text-primary)}.rm-export__history{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);margin-top:var(--space-24);padding:var(--space-16)}.rm-export__history-row{align-items:center;color:var(--color-primary);display:flex;gap:var(--space-8);padding:var(--space-6) 0}.rm-export__history-name{color:var(--text-primary);flex:1;font-size:12.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-export__history-meta{color:var(--text-muted);flex-shrink:0;font-size:11px}
+</style>