From f1fd1fe1015c57a9f30ec2f84ef5b774162d5a83 Mon Sep 17 00:00:00 2001
From: jps <jps@esi-informatique.com>
Date: Thu, 15 Jan 2026 16:31:39 +0100
Subject: [PATCH] changement setup

---
 templates/admin/dashboard.php | 207 ++++++++++++++--------------------
 1 file changed, 85 insertions(+), 122 deletions(-)

diff --git a/templates/admin/dashboard.php b/templates/admin/dashboard.php
index 0bcc420..90f3ee1 100644
--- a/templates/admin/dashboard.php
+++ b/templates/admin/dashboard.php
@@ -22,148 +22,111 @@ $settings_status = \ESI_PEPPOL\controllers\PEPPOL_Plugin::check_settings_status(
         ); ?>
     </p>
 
-    <!-- Setup guidé -->
+    <!-- Setup guidé - Timeline -->
     <div class="esi-peppol-setup-guide">
-        <h2 class="esi-peppol-setup-title"><?php esc_html_e('Configuration du connecteur', 'esi_peppol'); ?></h2>
+        <h2 style="margin-bottom: 30px;"><?php esc_html_e('Configuration du connecteur', 'esi_peppol'); ?></h2>
         
         <!-- Étape 1: Numéro TVA boutique -->
-        <div class="esi-peppol-setup-step <?php echo $settings_status['vat_number']['completed'] ? 'completed' : 'pending'; ?>">
-            <div class="esi-peppol-step-header">
-                <div class="esi-peppol-step-number">
-                    <?php if ($settings_status['vat_number']['completed']) : ?>
-                        <span class="esi-peppol-check-icon">✓</span>
-                    <?php else : ?>
-                        <span>1</span>
-                    <?php endif; ?>
-                </div>
-                <div class="esi-peppol-step-content">
-                    <h3 class="esi-peppol-step-title"><?php echo esc_html($settings_status['vat_number']['label']); ?></h3>
-                    <p class="esi-peppol-step-description"><?php echo esc_html($settings_status['vat_number']['description']); ?></p>
-                    <?php if ($settings_status['vat_number']['completed']) : ?>
-                        <div class="esi-peppol-step-value">
-                            <strong><?php esc_html_e('Valeur configurée :', 'esi_peppol'); ?></strong>
-                            <code><?php echo esc_html($settings_status['vat_number']['value']); ?></code>
-                        </div>
-                    <?php else : ?>
-                        <a href="<?php echo esc_url($settings_status['vat_number']['action_url']); ?>" class="button button-primary">
-                            <?php echo esc_html($settings_status['vat_number']['action_label']); ?>
-                        </a>
-                    <?php endif; ?>
-                </div>
+        <div class="step <?php echo $settings_status['vat_number']['completed'] ? 'is-done' : ''; ?>" 
+             data-step="<?php echo $settings_status['vat_number']['completed'] ? '✓' : '1'; ?>">
+            <div class="step-card">
+                <h3><?php echo esc_html($settings_status['vat_number']['label']); ?></h3>
+                <p><?php echo esc_html($settings_status['vat_number']['description']); ?></p>
+                <?php if ($settings_status['vat_number']['completed']) : ?>
+                    <div class="step-value">
+                        <strong><?php esc_html_e('Valeur configurée :', 'esi_peppol'); ?></strong>
+                        <code><?php echo esc_html($settings_status['vat_number']['value']); ?></code>
+                    </div>
+                <?php else : ?>
+                    <a href="<?php echo esc_url($settings_status['vat_number']['action_url']); ?>" class="button button-primary">
+                        <?php echo esc_html($settings_status['vat_number']['action_label']); ?>
+                    </a>
+                <?php endif; ?>
             </div>
         </div>
 
         <!-- Étape 2: Champ TVA client -->
-        <div class="esi-peppol-setup-step <?php echo $settings_status['vat_field']['completed'] ? 'completed' : 'pending'; ?>">
-            <div class="esi-peppol-step-header">
-                <div class="esi-peppol-step-number">
-                    <?php if ($settings_status['vat_field']['completed']) : ?>
-                        <span class="esi-peppol-check-icon">✓</span>
-                    <?php else : ?>
-                        <span>2</span>
-                    <?php endif; ?>
-                </div>
-                <div class="esi-peppol-step-content">
-                    <h3 class="esi-peppol-step-title"><?php echo esc_html($settings_status['vat_field']['label']); ?></h3>
-                    <p class="esi-peppol-step-description"><?php echo esc_html($settings_status['vat_field']['description']); ?></p>
-                    <?php if ($settings_status['vat_field']['completed']) : ?>
-                        <div class="esi-peppol-step-value">
-                            <strong><?php esc_html_e('Champ détecté :', 'esi_peppol'); ?></strong>
-                            <code><?php echo esc_html($settings_status['vat_field']['value']); ?></code>
-                        </div>
-                    <?php else : ?>
-                        <a href="<?php echo esc_url($settings_status['vat_field']['action_url']); ?>" class="button button-primary">
-                            <?php echo esc_html($settings_status['vat_field']['action_label']); ?>
-                        </a>
-                    <?php endif; ?>
-                </div>
+        <div class="step <?php echo $settings_status['vat_field']['completed'] ? 'is-done' : ''; ?>" 
+             data-step="<?php echo $settings_status['vat_field']['completed'] ? '✓' : '2'; ?>">
+            <div class="step-card">
+                <h3><?php echo esc_html($settings_status['vat_field']['label']); ?></h3>
+                <p><?php echo esc_html($settings_status['vat_field']['description']); ?></p>
+                <?php if ($settings_status['vat_field']['completed']) : ?>
+                    <div class="step-value">
+                        <strong><?php esc_html_e('Champ détecté :', 'esi_peppol'); ?></strong>
+                        <code><?php echo esc_html($settings_status['vat_field']['value']); ?></code>
+                    </div>
+                <?php else : ?>
+                    <a href="<?php echo esc_url($settings_status['vat_field']['action_url']); ?>" class="button button-primary">
+                        <?php echo esc_html($settings_status['vat_field']['action_label']); ?>
+                    </a>
+                <?php endif; ?>
             </div>
         </div>
 
         <!-- Étape 3: Identifiants API -->
-        <div class="esi-peppol-setup-step <?php echo $settings_status['api_credentials']['completed'] ? 'completed' : 'pending'; ?>">
-            <div class="esi-peppol-step-header">
-                <div class="esi-peppol-step-number">
-                    <?php if ($settings_status['api_credentials']['completed']) : ?>
-                        <span class="esi-peppol-check-icon">✓</span>
-                    <?php else : ?>
-                        <span>3</span>
-                    <?php endif; ?>
-                </div>
-                <div class="esi-peppol-step-content">
-                    <h3 class="esi-peppol-step-title"><?php echo esc_html($settings_status['api_credentials']['label']); ?></h3>
-                    <p class="esi-peppol-step-description"><?php echo esc_html($settings_status['api_credentials']['description']); ?></p>
-                    <?php if ($settings_status['api_credentials']['completed']) : ?>
-                        <div class="esi-peppol-step-value">
-                            <strong><?php esc_html_e('Clé API configurée :', 'esi_peppol'); ?></strong>
-                            <code><?php echo esc_html($settings_status['api_credentials']['value']); ?></code>
-                        </div>
-                    <?php else : ?>
-                        <a href="<?php echo esc_url($settings_status['api_credentials']['action_url']); ?>" class="button button-primary">
-                            <?php echo esc_html($settings_status['api_credentials']['action_label']); ?>
-                        </a>
-                    <?php endif; ?>
-                </div>
+        <div class="step <?php echo $settings_status['api_credentials']['completed'] ? 'is-done' : ''; ?>" 
+             data-step="<?php echo $settings_status['api_credentials']['completed'] ? '✓' : '3'; ?>">
+            <div class="step-card">
+                <h3><?php echo esc_html($settings_status['api_credentials']['label']); ?></h3>
+                <p><?php echo esc_html($settings_status['api_credentials']['description']); ?></p>
+                <?php if ($settings_status['api_credentials']['completed']) : ?>
+                    <div class="step-value">
+                        <strong><?php esc_html_e('Clé API configurée :', 'esi_peppol'); ?></strong>
+                        <code><?php echo esc_html($settings_status['api_credentials']['value']); ?></code>
+                    </div>
+                <?php else : ?>
+                    <a href="<?php echo esc_url($settings_status['api_credentials']['action_url']); ?>" class="button button-primary">
+                        <?php echo esc_html($settings_status['api_credentials']['action_label']); ?>
+                    </a>
+                <?php endif; ?>
             </div>
         </div>
 
         <!-- Étape 4: Webhook -->
-        <div class="esi-peppol-setup-step esi-peppol-step-no-check">
-            <div class="esi-peppol-step-header">
-                <div class="esi-peppol-step-number">
-                    <span>4</span>
-                </div>
-                <div class="esi-peppol-step-content">
-                    <h3 class="esi-peppol-step-title"><?php echo esc_html($settings_status['webhook']['label']); ?></h3>
-                    <p class="esi-peppol-step-description"><?php echo esc_html($settings_status['webhook']['description']); ?></p>
-                    <div class="esi-peppol-webhook-display">
-                        <code class="esi-peppol-webhook-url"><?php echo esc_html($settings_status['webhook']['value']); ?></code>
-                        <button type="button" class="button button-small esi-peppol-copy-webhook-url" data-copy-text="<?php echo esc_attr($settings_status['webhook']['value']); ?>">
-                            <?php esc_html_e('Copier', 'esi_peppol'); ?>
-                        </button>
-                    </div>
-                    <p class="esi-peppol-step-note">
-                        <?php
-                        printf(
-                            wp_kses_post(
-                                /* translators: %s: URL de la documentation */
-                                __('Configurez cette URL dans votre profil d\'entreprise sur <a href="%s" target="_blank" rel="noopener noreferrer">https://peppol.esi-web.be/</a>', 'esi_peppol')
-                            ),
-                            esc_url('https://peppol.esi-web.be/')
-                        );
-                        ?>
-                    </p>
+        <div class="step" data-step="4">
+            <div class="step-card">
+                <h3><?php echo esc_html($settings_status['webhook']['label']); ?></h3>
+                <p><?php echo esc_html($settings_status['webhook']['description']); ?></p>
+                <div class="esi-peppol-webhook-display">
+                    <code class="esi-peppol-webhook-url"><?php echo esc_html($settings_status['webhook']['value']); ?></code>
+                    <button type="button" class="button button-small esi-peppol-copy-webhook-url" data-copy-text="<?php echo esc_attr($settings_status['webhook']['value']); ?>">
+                        <?php esc_html_e('Copier', 'esi_peppol'); ?>
+                    </button>
                 </div>
+                <p class="step-note">
+                    <?php
+                    printf(
+                        wp_kses_post(
+                            /* translators: %s: URL de la documentation */
+                            __('Configurez cette URL dans votre profil d\'entreprise sur <a href="%s" target="_blank" rel="noopener noreferrer">https://peppol.esi-web.be/</a>', 'esi_peppol')
+                        ),
+                        esc_url('https://peppol.esi-web.be/')
+                    );
+                    ?>
+                </p>
             </div>
         </div>
 
         <!-- Étape 5: Email (optionnel) -->
-        <div class="esi-peppol-setup-step esi-peppol-step-optional <?php echo $settings_status['email']['completed'] ? 'completed' : 'pending'; ?>">
-            <div class="esi-peppol-step-header">
-                <div class="esi-peppol-step-number">
-                    <?php if ($settings_status['email']['completed']) : ?>
-                        <span class="esi-peppol-check-icon">✓</span>
-                    <?php else : ?>
-                        <span>5</span>
-                    <?php endif; ?>
-                </div>
-                <div class="esi-peppol-step-content">
-                    <h3 class="esi-peppol-step-title">
-                        <?php echo esc_html($settings_status['email']['label']); ?>
-                        <span class="esi-peppol-optional-badge"><?php esc_html_e('Optionnel', 'esi_peppol'); ?></span>
-                    </h3>
-                    <p class="esi-peppol-step-description"><?php echo esc_html($settings_status['email']['description']); ?></p>
-                    <?php if ($settings_status['email']['completed']) : ?>
-                        <div class="esi-peppol-step-value">
-                            <strong><?php esc_html_e('Email configuré :', 'esi_peppol'); ?></strong>
-                            <code><?php echo esc_html($settings_status['email']['value']); ?></code>
-                        </div>
-                    <?php else : ?>
-                        <a href="<?php echo esc_url($settings_status['email']['action_url']); ?>" class="button button-secondary">
-                            <?php echo esc_html($settings_status['email']['action_label']); ?>
-                        </a>
-                    <?php endif; ?>
-                </div>
+        <div class="step <?php echo $settings_status['email']['completed'] ? 'is-done' : ''; ?>" 
+             data-step="<?php echo $settings_status['email']['completed'] ? '✓' : '5'; ?>">
+            <div class="step-card">
+                <h3>
+                    <?php echo esc_html($settings_status['email']['label']); ?>
+                    <span style="font-size: 12px; font-weight: normal; opacity: 0.8;">(<?php esc_html_e('Optionnel', 'esi_peppol'); ?>)</span>
+                </h3>
+                <p><?php echo esc_html($settings_status['email']['description']); ?></p>
+                <?php if ($settings_status['email']['completed']) : ?>
+                    <div class="step-value">
+                        <strong><?php esc_html_e('Email configuré :', 'esi_peppol'); ?></strong>
+                        <code><?php echo esc_html($settings_status['email']['value']); ?></code>
+                    </div>
+                <?php else : ?>
+                    <a href="<?php echo esc_url($settings_status['email']['action_url']); ?>" class="button button-secondary">
+                        <?php echo esc_html($settings_status['email']['action_label']); ?>
+                    </a>
+                <?php endif; ?>
             </div>
         </div>
     </div>