Refonte design V1

backend/resources/views/admin/campaigns/form.blade.php

@@ -1,5 +1,5 @@
 @extends('layouts.app')
-@section('title', ($campaign->exists ? $campaign->name : 'Nouvelle campagne').' — Signatures CABM')
+@section('title', ($campaign->exists ? $campaign->name : 'Nouvelle campagne').' — Signatures')
 @section('content')
     @php
         $isAdmin = auth()->user()->hasRole('admin');
@@ -11,27 +11,34 @@
         $checked = collect(old('groups', $selected))->map(fn ($id) => (int) $id)->all();
         $status = $campaign->exists ? $campaign->status() : null;
     @endphp
-    <div class="row" style="margin-bottom:16px">
-        <a href="{{ route('admin.campaigns.index') }}">← Campagnes</a>
-        <h1 style="margin:0 0 0 12px">{{ $campaign->exists ? $campaign->name : 'Nouvelle campagne' }}</h1>
-        @if ($status)
-            <span class="badge {{ ['running' => 'ok', 'inactive' => 'warn'][$status] ?? '' }}">{{ \App\Models\Campaign::STATUSES[$status] }}</span>
-        @endif
-    </div>
+    <header class="page-head">
+        <div>
+            <a class="back" href="{{ route('admin.campaigns.index') }}"><x-icon name="chevron-left" :size="16" />Campagnes</a>
+            <div class="page-title">
+                <h1>{{ $campaign->exists ? $campaign->name : 'Nouvelle campagne' }}</h1>
+                @if ($status)
+                    <span class="badge {{ ['running' => 'ok', 'inactive' => 'warn', 'ended' => 'off'][$status] ?? '' }}">{{ \App\Models\Campaign::STATUSES[$status] }}</span>
+                @endif
+            </div>
+        </div>
+    </header>
 
     @if ($locked)
-        <div class="notice" role="note">Cette campagne est active : seul un administrateur peut la modifier.</div>
+        <div class="alert notice" role="note">
+            <x-icon name="info" />
+            <div>Cette campagne est active : seul un administrateur peut la modifier.</div>
+        </div>
     @endif
 
     <form method="post" enctype="multipart/form-data"
           action="{{ $campaign->exists ? route('admin.campaigns.update', $campaign) : route('admin.campaigns.store') }}">
         @csrf
         @if ($campaign->exists) @method('PUT') @endif
-        <fieldset @disabled($locked) style="border:0;margin:0;padding:0">
+        <fieldset class="bare" @disabled($locked)>
             <div class="split">
                 <div class="card">
                     <h2>Bannière</h2>
-                    <label for="name">Nom de la campagne</label>
+                    <label for="name" style="margin-top:0">Nom de la campagne</label>
                     <input type="text" id="name" name="name" maxlength="120" required value="{{ old('name', $campaign->name) }}" placeholder="ex. Collecte des encombrants — octobre">
 
                     <label for="image_path">Image</label>
@@ -46,40 +53,45 @@
                             </option>
                         @endforeach
                     </select>
-                    <label for="image_file">… ou envoyer une nouvelle image (PNG, JPEG, GIF)</label>
-                    <input type="file" id="image_file" name="image_file" accept="image/png,image/jpeg,image/gif">
-                    <p class="muted">Visez 600 px de large et moins de 100 Ko : les destinataires la téléchargent à chaque ouverture du message.</p>
-                    <img id="thumb" alt="" hidden style="max-width:100%;max-height:160px;border:1px solid var(--line);background:#fff">
+                    <label class="dropzone" data-dropzone style="margin-top:10px">
+                        <input type="file" id="image_file" name="image_file" accept="image/png,image/jpeg,image/gif" aria-label="Nouvelle image">
+                        <x-icon name="cloud-upload" :size="24" />
+                        <span data-prompt>… ou glissez une nouvelle image ici, ou <u>parcourez vos fichiers</u></span>
+                        <span class="dropzone-name" data-name hidden></span>
+                        <span class="muted">PNG, JPEG ou GIF</span>
+                    </label>
+                    <p class="hint">Visez 600 px de large et moins de 100 Ko : les destinataires la téléchargent à chaque ouverture du message.</p>
+                    <img id="thumb" class="preview-img" alt="" hidden>
 
                     <label for="alt_text">Texte alternatif</label>
                     <input type="text" id="alt_text" name="alt_text" maxlength="150" required value="{{ old('alt_text', $campaign->alt_text) }}" placeholder="ex. Collecte des encombrants : inscrivez-vous avant le 15 octobre">
-                    <p class="muted">Affiché quand le destinataire bloque les images, et lu par les lecteurs d'écran. Résumez le message de la bannière.</p>
+                    <p class="hint">Affiché quand le destinataire bloque les images, et lu par les lecteurs d'écran. Résumez le message de la bannière.</p>
 
                     <label for="link_url">Lien au clic (facultatif)</label>
                     <input type="url" id="link_url" name="link_url" maxlength="255" value="{{ old('link_url', $campaign->link_url) }}" placeholder="https://www.beziers-mediterranee.fr/…">
 
                     <label for="width">Largeur d'affichage (px, facultatif)</label>
                     <input type="number" id="width" name="width" style="width:140px" min="100" max="800" value="{{ old('width', $width) }}" placeholder="auto">
-                    <p class="muted">Vide : largeur réelle de l'image, plafonnée à 600 px.</p>
+                    <p class="hint">Vide : largeur réelle de l'image, plafonnée à 600 px.</p>
                 </div>
 
                 <div class="card">
                     <h2>Diffusion</h2>
-                    <div class="row">
-                        <div style="flex:1;min-width:200px">
-                            <label for="starts_at">Début</label>
+                    <div class="field-row">
+                        <div>
+                            <label for="starts_at" style="margin-top:0">Début</label>
                             <input type="datetime-local" id="starts_at" name="starts_at" required value="{{ old('starts_at', $local($campaign->starts_at)) }}">
                         </div>
-                        <div style="flex:1;min-width:200px">
-                            <label for="ends_at">Fin</label>
+                        <div>
+                            <label for="ends_at" style="margin-top:0">Fin</label>
                             <input type="datetime-local" id="ends_at" name="ends_at" required value="{{ old('ends_at', $local($campaign->ends_at)) }}">
                         </div>
                     </div>
-                    <p class="muted">Heure de Paris. La bannière cesse d'être insérée à la fin ; les messages déjà envoyés la conservent.</p>
+                    <p class="hint">Heure de Paris. La bannière cesse d'être insérée à la fin ; les messages déjà envoyés la conservent.</p>
 
                     <label for="priority">Priorité</label>
                     <input class="small" type="number" id="priority" name="priority" min="0" max="1000" required value="{{ old('priority', $campaign->priority ?? 10) }}">
-                    <p class="muted">Si plusieurs campagnes en cours concernent le même agent, la priorité la plus haute s'affiche.</p>
+                    <p class="hint">Si plusieurs campagnes en cours concernent le même agent, la priorité la plus haute s'affiche.</p>
 
                     <fieldset>
                         <legend>Destinataires</legend>
@@ -98,18 +110,19 @@
 
                     @if ($isAdmin)
                         <input type="hidden" name="active" value="0">
-                        <label class="check" style="margin-top:14px">
-                            <input type="checkbox" name="active" value="1" @checked(old('active', $campaign->active))>Campagne active
+                        <label class="switch" style="margin-top:16px">
+                            <input type="checkbox" name="active" value="1" @checked(old('active', $campaign->active))>
+                            <span class="switch-track"></span><strong>Campagne active</strong>
                         </label>
-                        <p class="muted">Décochée, la bannière n'est jamais insérée, même pendant la période.</p>
+                        <p class="hint">Désactivée, la bannière n'est jamais insérée, même pendant la période.</p>
                     @else
-                        <p class="muted" style="margin-top:14px">La campagne reste inactive tant qu'un administrateur ne l'a pas activée.</p>
+                        <p class="hint" style="margin-top:14px">La campagne reste inactive tant qu'un administrateur ne l'a pas activée.</p>
                     @endif
                 </div>
             </div>
 
             <div class="row">
-                <button class="btn" type="submit">{{ $campaign->exists ? 'Enregistrer' : 'Créer la campagne' }}</button>
+                <button class="btn" type="submit"><x-icon name="save" />{{ $campaign->exists ? 'Enregistrer' : 'Créer la campagne' }}</button>
                 <a class="btn secondary" href="{{ route('admin.campaigns.index') }}">Annuler</a>
             </div>
         </fieldset>
@@ -117,9 +130,9 @@
 
     @if ($campaign->exists)
         <div class="card" style="margin-top:16px">
-            <h2>Rendu enregistré</h2>
+            <h2>Bannière enregistrée</h2>
             <p class="muted">Tel qu'inséré à l'emplacement <code>{{ '{'.'{'.'{banniere}'.'}'.'}' }}</code> du template. Pour le voir dans une signature complète, ouvrez un agent dans l'onglet <a href="{{ route('admin.agents.index') }}">Agents</a>.</p>
-            @include('partials.signature-frame', ['html' => $bannerHtml, 'title' => 'Aperçu de la bannière'])
+            @include('partials.signature-frame', ['html' => $bannerHtml, 'title' => 'Aperçu de la bannière', 'class' => 'short'])
         </div>
     @endif
 @endsection
@@ -140,7 +153,7 @@
             width.placeholder = natural ? `auto (${Math.min(natural, 600)})` : 'auto';
         };
 
-        select.addEventListener('change', () => { file.value = ''; fromLibrary(); });
+        select.addEventListener('change', () => { file.value = ''; file.dispatchEvent(new Event('change')); });
         file.addEventListener('change', () => {
             if (!file.files.length) return fromLibrary();
             select.value = '';

backend/resources/views/admin/campaigns/index.blade.php

@@ -1,100 +1,117 @@
 @extends('layouts.app')
-@section('title', 'Campagnes — Signatures CABM')
+@section('title', 'Campagnes — Signatures')
 @section('content')
     @php
         $isAdmin = auth()->user()->hasRole('admin');
         $tz = config('signature.timezone');
-        $badge = ['running' => 'ok', 'scheduled' => '', 'inactive' => 'warn', 'ended' => ''];
+        $badge = ['running' => 'ok', 'scheduled' => '', 'inactive' => 'warn', 'ended' => 'off'];
         $variable = '{'.'{'.'{banniere}'.'}'.'}';
         $period = fn ($d) => $d->timezone($tz)->format('d/m/Y H:i');
     @endphp
-    <div class="row" style="margin-bottom:8px">
-        <h1 style="margin:0">Campagnes</h1>
-        <span class="spacer"></span>
-        <a class="btn" href="{{ route('admin.campaigns.create') }}">Nouvelle campagne</a>
-    </div>
-    <p class="muted">
-        Une campagne ajoute une bannière sous la signature pendant une période, pour tous les agents ou pour certains groupes AD.
-        <strong>Une seule bannière par signature</strong> : si plusieurs campagnes en cours concernent un agent, celle dont la priorité
-        est la plus haute l'emporte (à égalité : la plus ancienne). La bannière n'apparaît que dans la signature complète,
-        pas dans la signature courte des réponses, et seulement si le template contient <code>{{ $variable }}</code>.
-        @unless ($isAdmin) Vous préparez les campagnes ; un administrateur les active. @endunless
-    </p>
+    <header class="page-head">
+        <div>
+            <h1>Campagnes</h1>
+            <p class="lead">
+                Une campagne ajoute une bannière sous la signature pendant une période, pour tous les agents ou pour certains groupes AD.
+                <strong>Une seule bannière par signature</strong> : si plusieurs campagnes en cours concernent un agent, celle dont la priorité
+                est la plus haute l'emporte (à égalité : la plus ancienne). La bannière n'apparaît que dans la signature complète,
+                pas dans la signature courte des réponses.
+                @unless ($isAdmin) Vous préparez les campagnes ; un administrateur les active. @endunless
+            </p>
+        </div>
+        <div class="page-actions">
+            <a class="btn" href="{{ route('admin.campaigns.create') }}"><x-icon name="plus" />Nouvelle campagne</a>
+        </div>
+    </header>
 
     @if ($withoutBanner->isNotEmpty())
-        <div class="notice" role="note">
-            Ces templates publiés ne contiennent pas <code>{{ $variable }}</code> : leurs agents ne verront aucune bannière —
-            {{ $withoutBanner->join(', ') }}.
+        <div class="alert notice" role="note">
+            <x-icon name="triangle-alert" />
+            <div>Ces templates publiés ne contiennent pas <code>{{ $variable }}</code> : leurs agents ne verront aucune bannière.
+                <strong>{{ $withoutBanner->join(', ') }}</strong></div>
         </div>
     @endif
 
-    <div class="card" style="overflow-x:auto">
-        <table class="list">
-            <thead><tr><th style="width:130px">Bannière</th><th>Campagne</th><th>Période</th><th>Destinataires</th><th>Priorité</th><th>État</th><th></th></tr></thead>
-            <tbody>
-            @forelse ($campaigns as $c)
-                @php
-                    $status = $c->status();
-                    $locked = $c->active && ! $isAdmin;
-                @endphp
-                <tr>
-                    <td>
-                        @if (in_array($c->id, $missing, true))
-                            <span class="badge warn">image manquante</span>
-                            <div class="muted">{{ $c->image_path }}</div>
-                        @else
-                            <img src="{{ asset('img/'.$c->image_path) }}" alt="{{ $c->alt_text }}" style="max-width:120px;max-height:60px;border:1px solid var(--line);background:#fff">
-                        @endif
-                    </td>
-                    <td>
-                        <a href="{{ route('admin.campaigns.edit', $c) }}"><strong>{{ $c->name }}</strong></a>
-                        <div class="muted">
-                            @if ($c->link_url)
-                                Lien : <a href="{{ $c->link_url }}" target="_blank" rel="noopener">{{ \Illuminate\Support\Str::limit($c->link_url, 50) }}</a>
+    <div class="card card--flush">
+        <div class="table-wrap">
+            <table class="list">
+                <thead><tr><th>Bannière</th><th>Campagne</th><th>Période</th><th>Destinataires</th><th>Priorité</th><th>État</th><th class="right">{{ $isAdmin ? 'Active' : '' }}</th></tr></thead>
+                <tbody>
+                @forelse ($campaigns as $c)
+                    @php
+                        $status = $c->status();
+                        $locked = $c->active && ! $isAdmin;
+                    @endphp
+                    <tr>
+                        <td>
+                            @if (in_array($c->id, $missing, true))
+                                <span class="badge warn">image manquante</span>
+                                <div class="muted">{{ $c->image_path }}</div>
                             @else
-                                Sans lien
+                                <img class="thumb" src="{{ asset('img/'.$c->image_path) }}" alt="{{ $c->alt_text }}" loading="lazy">
                             @endif
-                        </div>
-                    </td>
-                    <td style="white-space:nowrap">{{ $period($c->starts_at) }}<br>→ {{ $period($c->ends_at) }}</td>
-                    <td style="overflow-wrap:anywhere">{{ $c->groups->isEmpty() ? 'Tous les agents' : $c->groups->pluck('display_name')->join(', ') }}</td>
-                    <td>{{ $c->priority }}</td>
-                    <td>
-                        <span class="badge {{ $badge[$status] }}">{{ \App\Models\Campaign::STATUSES[$status] }}</span>
-                        @if ($status === 'running')
+                        </td>
+                        <td>
+                            <a class="cell-title" href="{{ route('admin.campaigns.edit', $c) }}">{{ $c->name }}</a>
                             <div class="muted">
-                                @if (($reach[$c->id] ?? 0) > 0)
-                                    vue par {{ $reach[$c->id] }} agent{{ $reach[$c->id] > 1 ? 's' : '' }}
+                                @if ($c->link_url)
+                                    <a href="{{ $c->link_url }}" target="_blank" rel="noopener" title="{{ $c->link_url }}">{{ \Illuminate\Support\Str::limit(preg_replace('#^https?://(www\.)?#', '', $c->link_url), 38) }}</a>
                                 @else
-                                    aucun agent : masquée par une campagne plus prioritaire, ou groupes vides
+                                    Sans lien
                                 @endif
                             </div>
-                        @elseif ($status === 'inactive')
-                            <div class="muted">{{ $isAdmin ? 'à activer' : 'en attente d\'un administrateur' }}</div>
-                        @endif
-                    </td>
-                    <td style="text-align:right">
-                        <a class="btn secondary small" style="margin:2px 0" href="{{ route('admin.campaigns.edit', $c) }}">{{ $locked ? 'Voir' : 'Modifier' }}</a>
-                        @if ($isAdmin)
-                            @if ($status !== 'ended')
-                                <form class="inline" method="post" action="{{ route('admin.campaigns.toggle', $c) }}">
-                                    @csrf
-                                    <button class="btn secondary small" style="margin:2px 0" type="submit">{{ $c->active ? 'Désactiver' : 'Activer' }}</button>
+                        </td>
+                        <td class="nowrap">{{ $period($c->starts_at) }}<br><span class="muted">au</span> {{ $period($c->ends_at) }}</td>
+                        <td style="min-width:130px;overflow-wrap:anywhere">{{ $c->groups->isEmpty() ? 'Tous les agents' : $c->groups->pluck('display_name')->join(', ') }}</td>
+                        <td class="num">{{ $c->priority }}</td>
+                        <td>
+                            <span class="badge {{ $badge[$status] }}">{{ \App\Models\Campaign::STATUSES[$status] }}</span>
+                            @if ($status === 'running')
+                                <div class="muted">
+                                    @if (($reach[$c->id] ?? 0) > 0)
+                                        vue par {{ $reach[$c->id] }} agent{{ $reach[$c->id] > 1 ? 's' : '' }}
+                                    @else
+                                        aucun agent : masquée par une campagne plus prioritaire, ou groupes vides
+                                    @endif
+                                </div>
+                            @elseif ($status === 'inactive')
+                                <div class="muted">{{ $isAdmin ? 'à activer' : 'en attente d\'un administrateur' }}</div>
+                            @endif
+                        </td>
+                        <td class="cell-actions">
+                            <a class="btn secondary small icon-only" href="{{ route('admin.campaigns.edit', $c) }}"
+                               title="{{ $locked ? 'Voir' : 'Modifier' }}" aria-label="{{ $locked ? 'Voir' : 'Modifier' }} {{ $c->name }}">
+                                <x-icon :name="$locked ? 'eye' : 'pencil'" :size="15" />
+                            </a>
+                            @if ($isAdmin)
+                                @if ($status !== 'ended')
+                                    <form class="inline" method="post" action="{{ route('admin.campaigns.toggle', $c) }}">
+                                        @csrf
+                                        <button class="switch-btn" type="submit" role="switch" aria-checked="{{ $c->active ? 'true' : 'false' }}"
+                                                title="{{ $c->active ? 'Désactiver' : 'Activer' }}" aria-label="Campagne {{ $c->name }} active"></button>
+                                    </form>
+                                @endif
+                                <form class="inline" method="post" action="{{ route('admin.campaigns.destroy', $c) }}"
+                                      data-confirm="Supprimer la campagne « {{ $c->name }} » ? Les messages déjà envoyés conservent la bannière."
+                                      data-confirm-label="Supprimer" data-confirm-danger>
+                                    @csrf @method('DELETE')
+                                    <button class="btn danger small icon-only" type="submit" title="Supprimer" aria-label="Supprimer {{ $c->name }}"><x-icon name="trash-2" :size="15" /></button>
                                 </form>
                             @endif
-                            <form class="inline" method="post" action="{{ route('admin.campaigns.destroy', $c) }}"
-                                  onsubmit="return confirm('Supprimer cette campagne ? Les messages déjà envoyés conservent la bannière.')">
-                                @csrf @method('DELETE')
-                                <button class="btn danger small" style="margin:2px 0" type="submit">Supprimer</button>
-                            </form>
-                        @endif
-                    </td>
-                </tr>
-            @empty
-                <tr><td colspan="7" class="muted">Aucune campagne. Les signatures sont envoyées sans bannière.</td></tr>
-            @endforelse
-            </tbody>
-        </table>
-        <p class="muted">Vérifiez la bannière reçue par un agent précis dans l'onglet <a href="{{ route('admin.agents.index') }}">Agents</a>.</p>
+                        </td>
+                    </tr>
+                @empty
+                    <tr><td colspan="7">
+                        <div class="empty">
+                            <x-icon name="megaphone" :size="32" />
+                            <p><strong>Aucune campagne</strong>Les signatures partent sans bannière. Créez une campagne pour en afficher une pendant une période donnée.</p>
+                            <p><a class="btn" href="{{ route('admin.campaigns.create') }}"><x-icon name="plus" />Nouvelle campagne</a></p>
+                        </div>
+                    </td></tr>
+                @endforelse
+                </tbody>
+            </table>
+        </div>
+        <div class="card-foot muted">Vérifiez la bannière reçue par un agent précis dans l'écran <a href="{{ route('admin.agents.index') }}">Agents</a>.</div>
     </div>
 @endsection