848 lines
46 KiB
PHP
848 lines
46 KiB
PHP
<?php
|
|
|
|
declare(strict_types=1);
|
|
|
|
/** @var array $_ */
|
|
script('ul_tresorerie', 'app_v2');
|
|
style('ul_tresorerie', 'app_v2');
|
|
|
|
$currentYear = (string)($_['currentYear'] ?? date('Y'));
|
|
$canAccess = (bool)($_['canAccess'] ?? false);
|
|
$isAdmin = (bool)($_['isAdmin'] ?? false);
|
|
$userUid = (string)($_['userUid'] ?? '');
|
|
$userDisplayName = (string)($_['userDisplayName'] ?? $userUid);
|
|
$logoUrl = image_path('ul_tresorerie', 'cgt_logo.svg');
|
|
$bannerUrl = image_path('ul_tresorerie', 'banniere_ul.png');
|
|
?>
|
|
<div
|
|
id="ul-tresorerie-app"
|
|
class="ul-app-wrapper"
|
|
data-initial-year="<?php p($currentYear); ?>"
|
|
data-can-access="<?php p($canAccess ? '1' : '0'); ?>"
|
|
data-is-admin="<?php p($isAdmin ? '1' : '0'); ?>"
|
|
data-logo-url="<?php p($logoUrl); ?>"
|
|
data-banner-url="<?php p($bannerUrl); ?>"
|
|
>
|
|
<?php if (!$canAccess): ?>
|
|
<div class="ul-access-denied-wrapper">
|
|
<div class="ul-access-denied-card">
|
|
<img
|
|
src="<?php p($bannerUrl); ?>"
|
|
alt="Union Locale CGT Foix Haute-Ariège"
|
|
class="ul-access-denied-banner"
|
|
width="320"
|
|
height="68"
|
|
/>
|
|
<div class="ul-access-denied-badge">🔒 Accès restreint — Trésorerie UL CGT</div>
|
|
<h2>Vous n'avez pas encore accès à l'application UL Trésorerie</h2>
|
|
<p>
|
|
Cette application de suivi des cotisations syndicales est réservée aux trésoriers et membres habilités de
|
|
l'<strong>Union Locale CGT de Foix et de la Haute-Ariège</strong>.
|
|
</p>
|
|
<div class="ul-access-denied-userbox">
|
|
<span>Compte Nextcloud connecté :</span>
|
|
<strong><?php p($userDisplayName); ?> (<code><?php p($userUid); ?></code>)</strong>
|
|
</div>
|
|
<p class="ul-access-denied-help">
|
|
Demandez à un administrateur Nextcloud d'autoriser votre compte ou votre groupe depuis l'onglet
|
|
<strong>« Accès & Permissions »</strong> de l'application.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<?php else: ?>
|
|
<!-- Barre latérale gauche rétractable -->
|
|
<div id="app-navigation" class="ul-no-print">
|
|
<div class="ul-brand-header">
|
|
<div class="ul-brand-banner-box">
|
|
<img
|
|
src="<?php p($bannerUrl); ?>"
|
|
alt="Union Locale CGT Foix Haute-Ariège"
|
|
class="ul-brand-banner-img"
|
|
width="210"
|
|
height="46"
|
|
/>
|
|
<button
|
|
type="button"
|
|
id="btn-close-sidebar"
|
|
class="ul-sidebar-close-btn"
|
|
data-action="toggle-sidebar"
|
|
title="Fermer le volet latéral gauche"
|
|
aria-label="Fermer le volet latéral gauche"
|
|
>«</button>
|
|
</div>
|
|
<div class="ul-brand-subtitle-bar">
|
|
<span>Suivi Cotisations — Isolés / Multipros</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-nav-section-title">Vues principales</div>
|
|
<ul class="ul-nav-list">
|
|
<li>
|
|
<a href="#grid" id="nav-view-grid" class="ul-nav-item active" data-view="grid">
|
|
<span class="ul-nav-icon">📊</span>
|
|
<span class="ul-nav-label">Grille des cotisations</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#dashboard" id="nav-view-dashboard" class="ul-nav-item" data-view="dashboard">
|
|
<span class="ul-nav-icon">📈</span>
|
|
<span class="ul-nav-label">Tableau de bord</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#mailing" id="nav-view-mailing" class="ul-nav-item" data-view="mailing">
|
|
<span class="ul-nav-icon">✉️</span>
|
|
<span class="ul-nav-label">Publipostage & Courriers</span>
|
|
</a>
|
|
</li>
|
|
<?php if ($isAdmin): ?>
|
|
<li>
|
|
<a href="#permissions" id="nav-view-permissions" class="ul-nav-item" data-view="permissions">
|
|
<span class="ul-nav-icon">🔒</span>
|
|
<span class="ul-nav-label">Accès & Permissions</span>
|
|
</a>
|
|
</li>
|
|
<?php endif; ?>
|
|
</ul>
|
|
|
|
<div class="ul-nav-section-title">Filtres & Alertes (<span id="nav-year-indicator"><?php p($currentYear); ?></span>)</div>
|
|
<ul class="ul-nav-list ul-filter-list">
|
|
<li>
|
|
<a href="#filter-all" id="filter-btn-all" class="ul-filter-item active" data-filter="all">
|
|
<span class="ul-filter-label">👥 Tous les syndiqués</span>
|
|
<span id="count-all" class="ul-counter">0</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#filter-uptodate" id="filter-btn-uptodate" class="ul-filter-item" data-filter="uptodate">
|
|
<span class="ul-filter-label">🟢 Cotisations à jour</span>
|
|
<span id="count-uptodate" class="ul-counter ul-counter-green">0</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#filter-orange" id="filter-btn-orange" class="ul-filter-item" data-filter="orange">
|
|
<span class="ul-filter-label">🟠 Cotisations pas à jour (<span id="count-orange-inline">0</span>)</span>
|
|
<span id="count-orange" class="ul-counter ul-counter-orange">0</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#filter-red" id="filter-btn-red" class="ul-filter-item" data-filter="red">
|
|
<span class="ul-filter-label">🔴 Aucun versement sur l'année (<span id="count-red-inline">0</span>)</span>
|
|
<span id="count-red" class="ul-counter ul-counter-red">0</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="ul-nav-summary-card">
|
|
<div class="ul-summary-row">
|
|
<span>Année active :</span>
|
|
<strong id="summary-year"><?php p($currentYear); ?></strong>
|
|
</div>
|
|
<div class="ul-summary-row">
|
|
<span>Syndiqués actifs :</span>
|
|
<strong id="summary-active-count">0</strong>
|
|
</div>
|
|
<div class="ul-summary-row ul-summary-total">
|
|
<span>Total perçu :</span>
|
|
<strong id="summary-grand-total">0,00 €</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-nav-actions">
|
|
<button type="button" id="btn-nav-new-member" class="ul-btn ul-btn-secondary ul-btn-block">
|
|
+ Nouveau syndiqué
|
|
</button>
|
|
<button type="button" id="btn-nav-import-asp" class="ul-btn ul-btn-outline ul-btn-block">
|
|
📥 Importer fichier .asp
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zone centrale #app-content -->
|
|
<div id="app-content" class="ul-no-print">
|
|
<!-- Bannière de notification -->
|
|
<div id="ul-toast" class="ul-toast hidden" role="status" aria-live="polite"></div>
|
|
|
|
<!-- VUE 1 : GRILLE ANNUELLE DES COTISATIONS -->
|
|
<section id="view-grid" class="ul-view-section">
|
|
<header class="ul-toolbar">
|
|
<div class="ul-toolbar-left">
|
|
<button
|
|
type="button"
|
|
class="ul-btn-toggle-sidebar"
|
|
data-action="toggle-sidebar"
|
|
title="Ouvrir / Fermer le volet latéral gauche"
|
|
aria-label="Ouvrir ou fermer le volet latéral gauche"
|
|
>☰</button>
|
|
|
|
<div class="ul-year-selector" aria-label="Sélecteur d'année comptable">
|
|
<button type="button" id="btn-prev-year" class="ul-btn-icon" title="Année précédente"><</button>
|
|
<span id="label-current-year" class="ul-year-label"><?php p($currentYear); ?></span>
|
|
<button type="button" id="btn-next-year" class="ul-btn-icon" title="Année suivante">></button>
|
|
</div>
|
|
|
|
<div class="ul-search-box">
|
|
<input
|
|
type="search"
|
|
id="input-search"
|
|
class="ul-search-input"
|
|
placeholder="Rechercher nom, prénom, ville, e-mail, n° CoGétise…"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<label class="ul-checkbox-label" for="chk-show-archived">
|
|
<input type="checkbox" id="chk-show-archived" />
|
|
<span>Afficher les syndiqués archivés</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="ul-toolbar-right">
|
|
<button type="button" id="btn-new-member" class="ul-btn ul-btn-primary">
|
|
+ Nouveau syndiqué
|
|
</button>
|
|
<button type="button" id="btn-import-asp" class="ul-btn ul-btn-secondary">
|
|
📥 Importer fichier .asp
|
|
</button>
|
|
<input type="file" id="input-import-file" class="hidden" accept=".asp,.csv,.txt" />
|
|
</div>
|
|
</header>
|
|
|
|
<div class="ul-legend-bar">
|
|
<span class="ul-legend-item">
|
|
<span class="ul-legend-swatch ul-swatch-paid"></span> Case verte : cotisation réglée (clic = modifier)
|
|
</span>
|
|
<span class="ul-legend-item">
|
|
<span class="ul-legend-swatch ul-swatch-empty"></span> Case grise : non cotisé (clic = saisie pré-remplie + Entrée)
|
|
</span>
|
|
<span class="ul-legend-item">
|
|
<strong>V</strong> Virement · <strong>P</strong> Prélèvement · <strong>C</strong> Chèque · <strong>E</strong> Espèces
|
|
</span>
|
|
<span id="active-filter-indicator" class="ul-active-filter-pill hidden"></span>
|
|
</div>
|
|
|
|
<div class="ul-grid-container">
|
|
<table id="dues-table" class="ul-dues-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-sticky-left">Syndiqué (Nom, Prénom & Statut)</th>
|
|
<th class="col-month">Janv.</th>
|
|
<th class="col-month">Févr.</th>
|
|
<th class="col-month">Mars</th>
|
|
<th class="col-month">Avr.</th>
|
|
<th class="col-month">Mai</th>
|
|
<th class="col-month">Juin</th>
|
|
<th class="col-month">Juil.</th>
|
|
<th class="col-month">Août</th>
|
|
<th class="col-month">Sept.</th>
|
|
<th class="col-month">Oct.</th>
|
|
<th class="col-month">Nov.</th>
|
|
<th class="col-month">Déc.</th>
|
|
<th class="col-sticky-right">Total Annuel</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dues-tbody">
|
|
<tr>
|
|
<td colspan="14" class="ul-empty-cell">Chargement des données de trésorerie…</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot id="dues-tfoot">
|
|
<tr class="ul-tfoot-row">
|
|
<th class="col-sticky-left">Total Mensuel (<span id="tfoot-members-count">0</span> affichés)</th>
|
|
<th id="foot-month-1" class="col-month-total">0,00 €</th>
|
|
<th id="foot-month-2" class="col-month-total">0,00 €</th>
|
|
<th id="foot-month-3" class="ul-month-total col-month-total">0,00 €</th>
|
|
<th id="foot-month-4" class="col-month-total">0,00 €</th>
|
|
<th id="foot-month-5" class="col-month-total">0,00 €</th>
|
|
<th id="foot-month-6" class="col-month-total">0,00 €</th>
|
|
<th id="foot-month-7" class="col-month-total">0,00 €</th>
|
|
<th id="foot-month-8" class="col-month-total">0,00 €</th>
|
|
<th id="foot-month-9" class="col-month-total">0,00 €</th>
|
|
<th id="foot-month-10" class="col-month-total">0,00 €</th>
|
|
<th id="foot-month-11" class="col-month-total">0,00 €</th>
|
|
<th id="foot-month-12" class="col-month-total">0,00 €</th>
|
|
<th id="foot-grand-total" class="col-sticky-right col-grand-total">0,00 €</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- VUE 2 : TABLEAU DE BORD & COMPARAISON PLURIANNUELLE (1 SEUL ÉCRAN) -->
|
|
<section id="view-dashboard" class="ul-view-section hidden">
|
|
<header class="ul-toolbar ul-dashboard-toolbar">
|
|
<div class="ul-toolbar-left">
|
|
<button
|
|
type="button"
|
|
class="ul-btn-toggle-sidebar"
|
|
data-action="toggle-sidebar"
|
|
title="Ouvrir / Fermer le volet latéral gauche"
|
|
aria-label="Ouvrir ou fermer le volet latéral gauche"
|
|
>☰</button>
|
|
<img src="<?php p($logoUrl); ?>" alt="CGT" class="ul-toolbar-cgt-logo" width="28" height="36" />
|
|
<div>
|
|
<h2 class="ul-section-heading">
|
|
Tableau de bord & Évolution des Cotisations
|
|
</h2>
|
|
<span class="ul-dashboard-subtitle">Vue synthétique annuelle et comparative inter-années — UL CGT Foix Haute-Ariège</span>
|
|
</div>
|
|
</div>
|
|
<div class="ul-toolbar-right">
|
|
<div class="ul-dash-control-group">
|
|
<label class="ul-field-label-inline">Année analysée :</label>
|
|
<div class="ul-year-selector">
|
|
<button type="button" id="btn-dash-prev-year" class="ul-btn-icon" title="Année précédente"><</button>
|
|
<span id="dash-label-year" class="ul-year-label"><?php p($currentYear); ?></span>
|
|
<button type="button" id="btn-dash-next-year" class="ul-btn-icon" title="Année suivante">></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-dash-control-group">
|
|
<label for="dash-select-compare-year" class="ul-field-label-inline">Comparer avec :</label>
|
|
<select id="dash-select-compare-year" class="ul-select ul-select-sm ul-dash-compare-select"></select>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="ul-dashboard-content">
|
|
<!-- Ligne 1 : 5 Chiffres Clés (KPIs) -->
|
|
<div class="ul-kpi-grid">
|
|
<div class="ul-kpi-card ul-kpi-card-primary">
|
|
<div class="ul-kpi-top">
|
|
<span class="ul-kpi-label">Total encaissé (<span id="kpi-year-label"><?php p($currentYear); ?></span>)</span>
|
|
<span id="kpi-total-diff" class="ul-kpi-trend">0 %</span>
|
|
</div>
|
|
<div id="kpi-total-amount" class="ul-kpi-value">0,00 €</div>
|
|
<div id="kpi-total-sub" class="ul-kpi-sub">Année de comparaison : 0,00 €</div>
|
|
</div>
|
|
|
|
<div class="ul-kpi-card">
|
|
<div class="ul-kpi-top">
|
|
<span class="ul-kpi-label">Moyenne mensuelle</span>
|
|
<span class="ul-kpi-icon">📅</span>
|
|
</div>
|
|
<div id="kpi-monthly-avg" class="ul-kpi-value">0,00 €</div>
|
|
<div id="kpi-avg-due" class="ul-kpi-sub">Cotisation moy. : 0,00 € / mois</div>
|
|
</div>
|
|
|
|
<div class="ul-kpi-card">
|
|
<div class="ul-kpi-top">
|
|
<span class="ul-kpi-label">Syndiqués à jour</span>
|
|
<span class="ul-kpi-icon">🟢</span>
|
|
</div>
|
|
<div id="kpi-recovery-rate" class="ul-kpi-value">0 %</div>
|
|
<div id="kpi-recovery-sub" class="ul-kpi-sub">0 à jour sur 0 syndiqués actifs</div>
|
|
</div>
|
|
|
|
<div class="ul-kpi-card">
|
|
<div class="ul-kpi-top">
|
|
<span class="ul-kpi-label">Retards estimés</span>
|
|
<span class="ul-kpi-icon">🟠</span>
|
|
</div>
|
|
<div id="kpi-estimated-arrears" class="ul-kpi-value ul-kpi-value-orange">0,00 €</div>
|
|
<div id="kpi-arrears-sub" class="ul-kpi-sub">0 mois manquant(s) cumulé(s)</div>
|
|
</div>
|
|
|
|
<div class="ul-kpi-card">
|
|
<div class="ul-kpi-top">
|
|
<span class="ul-kpi-label">Crédit d'impôt 66 %</span>
|
|
<span class="ul-kpi-icon">🧾</span>
|
|
</div>
|
|
<div id="kpi-tax-credit" class="ul-kpi-value">0,00 €</div>
|
|
<div id="kpi-dues-count" class="ul-kpi-sub">0 mensualité(s) pointée(s)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ligne 2 : Graphiques principaux -->
|
|
<div class="ul-dash-charts-grid">
|
|
<!-- Graphique 1 : Évolution mensuelle & Cumul annuel (Année N vs Année comparée) -->
|
|
<div class="ul-card ul-dash-chart-card ul-dash-chart-main">
|
|
<div class="ul-card-header-flex">
|
|
<div>
|
|
<h3 class="ul-card-title">
|
|
Évolution mensuelle & Cumul annuel (<span id="chart-main-year-label"><?php p($currentYear); ?></span> vs <span id="chart-main-comp-label">N-1</span>)
|
|
</h3>
|
|
<span class="ul-chart-subtitle">Barres : encaissements mensuels · Courbes : cumul progressif sur l'année</span>
|
|
</div>
|
|
<div class="ul-chart-legend">
|
|
<span class="ul-chart-legend-item">
|
|
<span class="ul-legend-dot ul-dot-red"></span> <span id="legend-year-curr"><?php p($currentYear); ?></span> (Mensuel & Cumul)
|
|
</span>
|
|
<span class="ul-chart-legend-item">
|
|
<span class="ul-legend-dot ul-dot-slate"></span> <span id="legend-year-comp">N-1</span> (Mensuel & Cumul)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="dash-chart-monthly-comparison" class="ul-svg-chart-wrap"></div>
|
|
</div>
|
|
|
|
<!-- Colonne droite : Comparaison multi-années + Modes de paiement & Statuts -->
|
|
<div class="ul-dash-side-charts">
|
|
<div class="ul-card ul-dash-chart-card">
|
|
<div class="ul-card-header-flex">
|
|
<h3 class="ul-card-title">Comparaison pluriannuelle</h3>
|
|
<span class="ul-chart-subtitle">Cliquer sur une année pour la charger</span>
|
|
</div>
|
|
<div id="dash-chart-multiyear" class="ul-svg-chart-wrap ul-svg-chart-compact"></div>
|
|
</div>
|
|
|
|
<div class="ul-card ul-dash-chart-card">
|
|
<div class="ul-card-header-flex">
|
|
<h3 class="ul-card-title">Modes de règlement & État des syndiqués</h3>
|
|
</div>
|
|
<div id="dash-chart-methods-status" class="ul-methods-status-wrap"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ligne 3 : Tableau comparatif mensuel synthétique -->
|
|
<div class="ul-card ul-dash-table-card">
|
|
<div class="ul-table-responsive">
|
|
<table class="ul-dash-comp-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Comparatif Mensuel</th>
|
|
<th>Janv.</th>
|
|
<th>Févr.</th>
|
|
<th>Mars</th>
|
|
<th>Avr.</th>
|
|
<th>Mai</th>
|
|
<th>Juin</th>
|
|
<th>Juil.</th>
|
|
<th>Août</th>
|
|
<th>Sept.</th>
|
|
<th>Oct.</th>
|
|
<th>Nov.</th>
|
|
<th>Déc.</th>
|
|
<th>Total Année</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dash-comp-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- VUE 3 : OUTIL DE PUBLIPOSTAGE & COURRIERS -->
|
|
<section id="view-mailing" class="ul-view-section hidden">
|
|
<header class="ul-toolbar">
|
|
<div class="ul-toolbar-left">
|
|
<button
|
|
type="button"
|
|
class="ul-btn-toggle-sidebar"
|
|
data-action="toggle-sidebar"
|
|
title="Ouvrir / Fermer le volet latéral gauche"
|
|
aria-label="Ouvrir ou fermer le volet latéral gauche"
|
|
>☰</button>
|
|
<h2 class="ul-section-heading">
|
|
Publipostage & Courriers en série — Année <span id="mailing-year-label"><?php p($currentYear); ?></span>
|
|
</h2>
|
|
</div>
|
|
<div class="ul-toolbar-right">
|
|
<button type="button" id="btn-print-mailing" class="ul-btn ul-btn-secondary">
|
|
🖨️ Imprimer / Export PDF groupé (<span id="btn-print-count">0</span>)
|
|
</button>
|
|
<button type="button" id="btn-email-mailing" class="ul-btn ul-btn-primary">
|
|
📧 Envoyer par e-mail (<span id="btn-email-count">0</span>)
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="ul-mailing-workspace">
|
|
<!-- Colonne gauche : Modèle & Destinataires -->
|
|
<div class="ul-mailing-sidebar">
|
|
<div class="ul-card">
|
|
<label for="select-template" class="ul-field-label">1. Choisir le modèle de courrier :</label>
|
|
<select id="select-template" class="ul-select">
|
|
<option value="tax_receipt">1. Reçu fiscal / Crédit d'impôt 66 %</option>
|
|
<option value="missing_months">2. Rappel des mois manquants (Alerte Orange)</option>
|
|
<option value="annual_zero_warning">3. Rappel annuel d'absence de versement (Alerte Rouge — 0 €)</option>
|
|
</select>
|
|
<p id="mailing-auto-rule-hint" class="ul-hint-text">
|
|
Sélection automatique : syndiqués actifs ayant versé plus de 0,00 € sur l'année.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="ul-card ul-recipients-card">
|
|
<div class="ul-recipients-header">
|
|
<span class="ul-field-label">2. Destinataires sélectionnés (<strong id="mailing-selected-count">0</strong>)</span>
|
|
<div class="ul-mini-actions">
|
|
<button type="button" id="btn-mailing-check-all" class="ul-btn-link">Tout cocher</button>
|
|
<span>·</span>
|
|
<button type="button" id="btn-mailing-uncheck-all" class="ul-btn-link">Tout décocher</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-recipients-filters">
|
|
<label class="ul-checkbox-label" for="chk-mailing-no-email-only">
|
|
<input type="checkbox" id="chk-mailing-no-email-only" />
|
|
<span>Syndiqués sans adresse e-mail uniquement (courrier papier)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div id="mailing-recipients-list" class="ul-recipients-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colonne droite : Éditeur de modèle & Aperçu A4 -->
|
|
<div class="ul-mailing-main">
|
|
<div class="ul-card">
|
|
<div class="ul-card-header-flex">
|
|
<h3 class="ul-card-title">3. Personnaliser le modèle sélectionné</h3>
|
|
<div class="ul-card-actions">
|
|
<button type="button" id="btn-reset-templates" class="ul-btn ul-btn-outline ul-btn-sm">
|
|
Réinitialiser les modèles
|
|
</button>
|
|
<button type="button" id="btn-save-template" class="ul-btn ul-btn-primary ul-btn-sm">
|
|
💾 Enregistrer le modèle
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-form-row">
|
|
<div class="ul-form-group">
|
|
<label for="tpl-title" class="ul-field-label">Intitulé du modèle</label>
|
|
<input type="text" id="tpl-title" class="ul-input" />
|
|
</div>
|
|
<div class="ul-form-group">
|
|
<label for="tpl-subject" class="ul-field-label">Objet de l'e-mail / courrier</label>
|
|
<input type="text" id="tpl-subject" class="ul-input" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-variables-box">
|
|
<span class="ul-variables-title">Variables dynamiques (cliquer pour insérer au curseur) :</span>
|
|
<div id="tpl-variables-bar" class="ul-variables-pills">
|
|
<button type="button" class="ul-var-pill" data-var="{{civilite}}">{{civilite}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{nom}}">{{nom}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{prenom}}">{{prenom}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{adresse_complete}}">{{adresse_complete}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{code_responsable}}">{{code_responsable}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{annee}}">{{annee}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{date_du_jour}}">{{date_du_jour}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{total_paye}}">{{total_paye}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{credit_impot}}">{{credit_impot}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{nb_mois_payes}}">{{nb_mois_payes}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{mois_manquants_liste}}">{{mois_manquants_liste}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{nb_mois_manquants}}">{{nb_mois_manquants}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{cotisation_habituelle}}">{{cotisation_habituelle}}</button>
|
|
<button type="button" class="ul-var-pill" data-var="{{montant_estime_retard}}">{{montant_estime_retard}}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-form-group">
|
|
<label for="tpl-body" class="ul-field-label">Corps du courrier</label>
|
|
<textarea id="tpl-body" class="ul-textarea" rows="12"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-card">
|
|
<div class="ul-card-header-flex">
|
|
<h3 class="ul-card-title">4. Aperçu en direct du courrier généré</h3>
|
|
<div class="ul-preview-selector-wrap">
|
|
<label for="select-preview-member" class="ul-field-label-inline">Syndiqué prévisualisé :</label>
|
|
<select id="select-preview-member" class="ul-select ul-select-sm"></select>
|
|
</div>
|
|
</div>
|
|
<div id="mailing-live-preview" class="ul-letter-preview"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<?php if ($isAdmin): ?>
|
|
<!-- VUE 4 : GESTION DES PERMISSIONS D'ACCÈS (ADMINISTRATEURS) -->
|
|
<section id="view-permissions" class="ul-view-section hidden">
|
|
<header class="ul-toolbar">
|
|
<div class="ul-toolbar-left">
|
|
<button
|
|
type="button"
|
|
class="ul-btn-toggle-sidebar"
|
|
data-action="toggle-sidebar"
|
|
title="Ouvrir / Fermer le volet latéral gauche"
|
|
aria-label="Ouvrir ou fermer le volet latéral gauche"
|
|
>☰</button>
|
|
<h2 class="ul-section-heading">
|
|
🔒 Gestion des permissions d'accès à UL Trésorerie
|
|
</h2>
|
|
</div>
|
|
<div class="ul-toolbar-right">
|
|
<button type="button" id="btn-save-permissions" class="ul-btn ul-btn-primary">
|
|
💾 Enregistrer les permissions
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="ul-permissions-workspace">
|
|
<div class="ul-card ul-permissions-mode-card">
|
|
<h3 class="ul-card-title">1. Politique générale d'accès à l'application</h3>
|
|
<p class="ul-hint-text">
|
|
Les administrateurs Nextcloud disposent toujours d'un accès complet à l'application et à cette page de configuration.
|
|
</p>
|
|
<div class="ul-perm-mode-options">
|
|
<label class="ul-perm-mode-option" for="perm-mode-restricted">
|
|
<input type="radio" name="perm-access-mode" id="perm-mode-restricted" value="restricted" checked />
|
|
<div>
|
|
<strong>Accès restreint aux groupes et membres sélectionnés (Recommandé)</strong>
|
|
<span>Seuls les administrateurs Nextcloud, les membres des groupes cochés ci-dessous et les utilisateurs explicitement autorisés peuvent ouvrir l'application.</span>
|
|
</div>
|
|
</label>
|
|
<label class="ul-perm-mode-option" for="perm-mode-all">
|
|
<input type="radio" name="perm-access-mode" id="perm-mode-all" value="all_users" />
|
|
<div>
|
|
<strong>Tous les utilisateurs connectés à ce Nextcloud</strong>
|
|
<span>Tout compte utilisateur actif sur l'instance Nextcloud peut accéder à l'application de trésorerie.</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="perm-selectors-grid" class="ul-permissions-grid">
|
|
<!-- Colonne Groupes Nextcloud -->
|
|
<div class="ul-card ul-perm-list-card">
|
|
<div class="ul-card-header-flex">
|
|
<div>
|
|
<h3 class="ul-card-title">2. Groupes Nextcloud autorisés (<span id="perm-groups-count">0</span>)</h3>
|
|
<span class="ul-chart-subtitle">Tout membre d'un groupe coché aura accès à l'application</span>
|
|
</div>
|
|
<div class="ul-mini-actions">
|
|
<button type="button" id="btn-perm-groups-all" class="ul-btn-link">Tout cocher</button>
|
|
<span>·</span>
|
|
<button type="button" id="btn-perm-groups-none" class="ul-btn-link">Tout décocher</button>
|
|
</div>
|
|
</div>
|
|
<input
|
|
type="search"
|
|
id="input-perm-search-groups"
|
|
class="ul-input ul-perm-search"
|
|
placeholder="Filtrer les groupes Nextcloud…"
|
|
autocomplete="off"
|
|
/>
|
|
<div id="perm-groups-list" class="ul-perm-checklist"></div>
|
|
</div>
|
|
|
|
<!-- Colonne Utilisateurs Nextcloud -->
|
|
<div class="ul-card ul-perm-list-card">
|
|
<div class="ul-card-header-flex">
|
|
<div>
|
|
<h3 class="ul-card-title">3. Utilisateurs autorisés individuellement (<span id="perm-users-count">0</span>)</h3>
|
|
<span class="ul-chart-subtitle">Autoriser des comptes spécifiques même s'ils ne sont pas dans un groupe</span>
|
|
</div>
|
|
<div class="ul-mini-actions">
|
|
<button type="button" id="btn-perm-users-all" class="ul-btn-link">Tout cocher</button>
|
|
<span>·</span>
|
|
<button type="button" id="btn-perm-users-none" class="ul-btn-link">Tout décocher</button>
|
|
</div>
|
|
</div>
|
|
<input
|
|
type="search"
|
|
id="input-perm-search-users"
|
|
class="ul-input ul-perm-search"
|
|
placeholder="Rechercher un utilisateur par nom, identifiant ou e-mail…"
|
|
autocomplete="off"
|
|
/>
|
|
<div id="perm-users-list" class="ul-perm-checklist"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- MODALE 1 : SAISIE D'UNE COTISATION AU CLIC -->
|
|
<div id="due-modal" class="ul-modal-backdrop hidden ul-no-print" role="dialog" aria-modal="true" aria-labelledby="due-modal-title">
|
|
<div class="ul-modal-dialog ul-modal-sm">
|
|
<header class="ul-modal-header">
|
|
<div>
|
|
<h3 id="due-modal-title" class="ul-modal-title">Saisie de cotisation</h3>
|
|
<p id="due-modal-subtitle" class="ul-modal-subtitle"></p>
|
|
</div>
|
|
<button type="button" id="btn-close-due-modal" class="ul-modal-close" aria-label="Fermer">×</button>
|
|
</header>
|
|
|
|
<form id="due-form" class="ul-modal-body">
|
|
<input type="hidden" id="due-member-id" />
|
|
<input type="hidden" id="due-year" />
|
|
<input type="hidden" id="due-month-start" />
|
|
|
|
<div id="due-modal-prefill-hint" class="ul-prefill-banner"></div>
|
|
|
|
<div class="ul-form-row">
|
|
<div class="ul-form-group">
|
|
<label for="due-input-amount" class="ul-field-label">Montant versé (€) *</label>
|
|
<input
|
|
type="number"
|
|
id="due-input-amount"
|
|
class="ul-input ul-input-lg"
|
|
step="0.01"
|
|
min="0.01"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="ul-form-group">
|
|
<label for="due-input-method" class="ul-field-label">Mode de paiement</label>
|
|
<select id="due-input-method" class="ul-select ul-input-lg">
|
|
<option value="Virement">Virement (V)</option>
|
|
<option value="Prélèvement">Prélèvement (P)</option>
|
|
<option value="Chèque">Chèque (C)</option>
|
|
<option value="Espèces">Espèces (E)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-form-group">
|
|
<label for="due-input-month-end" class="ul-field-label">Appliquer jusqu'au mois de :</label>
|
|
<select id="due-input-month-end" class="ul-select"></select>
|
|
<span class="ul-field-help">Permet de saisir plusieurs mois consécutifs en une seule validation (ex : paiement d'un trimestre ou semestre).</span>
|
|
</div>
|
|
|
|
<div class="ul-form-group">
|
|
<label for="due-input-note" class="ul-field-label">Note facultative</label>
|
|
<input
|
|
type="text"
|
|
id="due-input-note"
|
|
class="ul-input"
|
|
maxlength="255"
|
|
placeholder="Ex : Chèque n°4512, régularisation..."
|
|
/>
|
|
</div>
|
|
|
|
<footer class="ul-modal-footer">
|
|
<button type="button" id="btn-delete-due" class="ul-btn ul-btn-danger hidden">
|
|
🗑️ Effacer ce mois
|
|
</button>
|
|
<div class="ul-modal-footer-right">
|
|
<button type="button" id="btn-cancel-due" class="ul-btn ul-btn-outline">
|
|
Annuler
|
|
</button>
|
|
<button type="submit" id="btn-submit-due" class="ul-btn ul-btn-success">
|
|
✓ Valider (Entrée)
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODALE 2 : CRÉATION / ÉDITION DE FICHE SYNDIQUÉ -->
|
|
<div id="member-modal" class="ul-modal-backdrop hidden ul-no-print" role="dialog" aria-modal="true" aria-labelledby="member-modal-title">
|
|
<div class="ul-modal-dialog ul-modal-lg">
|
|
<header class="ul-modal-header">
|
|
<h3 id="member-modal-title" class="ul-modal-title">Fiche du syndiqué</h3>
|
|
<button type="button" id="btn-close-member-modal" class="ul-modal-close" aria-label="Fermer">×</button>
|
|
</header>
|
|
|
|
<form id="member-form" class="ul-modal-body">
|
|
<input type="hidden" id="mbr-id" />
|
|
|
|
<div class="ul-form-row ul-form-row-3">
|
|
<div class="ul-form-group">
|
|
<label for="mbr-civility" class="ul-field-label">Civilité</label>
|
|
<select id="mbr-civility" class="ul-select">
|
|
<option value="M.">M.</option>
|
|
<option value="Mme">Mme</option>
|
|
<option value="">Non précisé</option>
|
|
</select>
|
|
</div>
|
|
<div class="ul-form-group">
|
|
<label for="mbr-last-name" class="ul-field-label">Nom (MAJUSCULES) *</label>
|
|
<input type="text" id="mbr-last-name" class="ul-input" required placeholder="Ex : MORGET" />
|
|
</div>
|
|
<div class="ul-form-group">
|
|
<label for="mbr-first-name" class="ul-field-label">Prénom *</label>
|
|
<input type="text" id="mbr-first-name" class="ul-input" required placeholder="Ex : FLORIAN" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-form-row ul-form-row-3">
|
|
<div class="ul-form-group">
|
|
<label for="mbr-cogitiel-id" class="ul-field-label">Code Responsable (CoGétise)</label>
|
|
<input type="text" id="mbr-cogitiel-id" class="ul-input" placeholder="Ex : 1962796" />
|
|
</div>
|
|
<div class="ul-form-group">
|
|
<label for="mbr-default-amount" class="ul-field-label">Montant mensuel de réf. (€)</label>
|
|
<input type="number" id="mbr-default-amount" class="ul-input" step="0.01" min="0" value="0.00" />
|
|
</div>
|
|
<div class="ul-form-group">
|
|
<label for="mbr-default-method" class="ul-field-label">Mode de paiement habituel</label>
|
|
<select id="mbr-default-method" class="ul-select">
|
|
<option value="Virement">Virement</option>
|
|
<option value="Prélèvement">Prélèvement</option>
|
|
<option value="Chèque">Chèque</option>
|
|
<option value="Espèces">Espèces</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-form-row ul-form-row-3">
|
|
<div class="ul-form-group">
|
|
<label for="mbr-email" class="ul-field-label">Adresse e-mail</label>
|
|
<input type="email" id="mbr-email" class="ul-input" placeholder="exemple@domaine.fr" />
|
|
</div>
|
|
<div class="ul-form-group">
|
|
<label for="mbr-phone-personal" class="ul-field-label">Téléphone personnel</label>
|
|
<input type="text" id="mbr-phone-personal" class="ul-input" placeholder="06 00 00 00 00" />
|
|
</div>
|
|
<div class="ul-form-group">
|
|
<label for="mbr-phone-pro" class="ul-field-label">Téléphone professionnel</label>
|
|
<input type="text" id="mbr-phone-pro" class="ul-input" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-form-row ul-form-row-3">
|
|
<div class="ul-form-group ul-span-2">
|
|
<label for="mbr-address" class="ul-field-label">Adresse postale complète</label>
|
|
<input type="text" id="mbr-address" class="ul-input" placeholder="Ex : 23 AVENUE DE TOULOUSE" />
|
|
</div>
|
|
<div class="ul-form-group">
|
|
<label for="mbr-postal-code" class="ul-field-label">Code postal</label>
|
|
<input type="text" id="mbr-postal-code" class="ul-input" placeholder="Ex : 09100" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-form-row ul-form-row-3">
|
|
<div class="ul-form-group">
|
|
<label for="mbr-city" class="ul-field-label">Ville</label>
|
|
<input type="text" id="mbr-city" class="ul-input" placeholder="Ex : PAMIERS" />
|
|
</div>
|
|
<div class="ul-form-group">
|
|
<label for="mbr-base-code" class="ul-field-label">Code de la base</label>
|
|
<input type="text" id="mbr-base-code" class="ul-input" value="90045110520251341" />
|
|
</div>
|
|
<div class="ul-form-group">
|
|
<label for="mbr-base-name" class="ul-field-label">Nom de la base</label>
|
|
<input type="text" id="mbr-base-name" class="ul-input" value="INDIVIDUELS UL FOIX HAUTE-ARIEGE" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ul-form-row ul-checkbox-group-row">
|
|
<label class="ul-checkbox-label" for="mbr-is-archived">
|
|
<input type="checkbox" id="mbr-is-archived" />
|
|
<span>📦 Syndiqué archivé (masqué par défaut dans la grille)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<footer class="ul-modal-footer">
|
|
<button type="button" id="btn-delete-member" class="ul-btn ul-btn-danger hidden">
|
|
🗑️ Supprimer ce syndiqué
|
|
</button>
|
|
<div class="ul-modal-footer-right">
|
|
<button type="button" id="btn-cancel-member" class="ul-btn ul-btn-outline">
|
|
Annuler
|
|
</button>
|
|
<button type="submit" id="btn-submit-member" class="ul-btn ul-btn-primary">
|
|
💾 Enregistrer la fiche
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ZONE D'IMPRESSION A4 MULTI-PAGES (visible uniquement lors de window.print()) -->
|
|
<div id="ul-print-container" class="ul-print-only" aria-hidden="true"></div>
|
|
<?php endif; ?>
|
|
</div>
|