hide planning hebdo

family-calendar.php

@@ -110,6 +110,7 @@ require __DIR__ . '/header.php';
           <div id="fc-month-calendar" class="fc-month-calendar"></div>
           <div id="fc-month-selectionMenu" class="fc-selection-menu" style="display:none;"></div>
         </div>
+        <div id="fc-month-balances" class="fc-month-balances"></div>
       </div>
     </section>
 

modules/family-calendar/family-calendar.css

@@ -1060,3 +1060,135 @@ td.col-day {
     right: 1px !important;
   }
 }
+
+/* =========================================================
+   10. DÉCOMPTE DES CONGÉS (VUE MENSUELLE)
+   ========================================================= */
+.fc-month-balances {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px dashed var(--border-color);
+}
+.fc-balance-person {
+  background: white;
+  border-radius: 8px;
+  padding: 10px;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+.fc-balance-name {
+  font-weight: 800;
+  font-size: 0.85rem;
+  margin-bottom: 8px;
+  text-align: center;
+  text-transform: uppercase;
+}
+.fc-balance-name.alex {
+  color: var(--text-alex);
+}
+.fc-balance-name.laia {
+  color: var(--text-laia);
+}
+
+.fc-balance-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  text-align: center;
+}
+.fc-balance-col {
+  display: flex;
+  flex-direction: column;
+  background: #f8fafc;
+  border-radius: 6px;
+  padding: 6px 4px;
+  border: 1px solid #e2e8f0;
+}
+.fc-balance-type {
+  font-size: 0.7rem;
+  font-weight: 800;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+.fc-balance-numbers {
+  font-size: 0.75rem;
+  font-family: monospace;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fc-bal-val {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.fc-bal-val.start {
+  color: #64748b;
+}
+.fc-bal-val.used {
+  color: #ef4444;
+}
+.fc-bal-val.end {
+  color: #10b981;
+  font-weight: bold;
+  border-top: 1px solid #cbd5e1;
+  margin-top: 3px;
+  padding-top: 3px;
+}
+
+/* =========================================================
+   11. REFONTE MOBILE EXTRÊME (max-width: 768px)
+   ========================================================= */
+@media (max-width: 768px) {
+  /* 1. On DÉTRUIT visuellement le planning hebdo sur mobile ! */
+  .fc-week-header,
+  #planningTable-wrapper {
+    display: none !important;
+  }
+
+  /* 2. On compresse le calendrier mensuel pour qu'il rentre dans l'écran */
+  .fc-month-table td {
+    height: 48px !important; /* Hauteur très réduite */
+    padding: 2px !important;
+    font-size: 0.75rem;
+  }
+  .fc-month-table th {
+    padding: 4px !important;
+    font-size: 0.7rem;
+  }
+
+  /* On miniaturise les pastilles d'événements */
+  .fc-day--centre::after {
+    font-size: 8px !important;
+    top: 1px;
+    right: 1px;
+  }
+  .fc-day--avis::after {
+    width: 8px !important;
+    height: 8px !important;
+    top: 1px;
+    right: 1px;
+  }
+  .fc-pep-sick-emoji {
+    font-size: 8px !important;
+    bottom: 1px;
+    right: 1px;
+  }
+
+  /* On réduit la marge de la box du mois */
+  .fc-month-calendar-wrapper {
+    padding: 15px !important;
+    margin-bottom: 15px !important;
+  }
+
+  /* 3. Les soldes s'empilent sur mobile */
+  .fc-month-balances {
+    grid-template-columns: 1fr;
+    gap: 10px;
+    padding-top: 10px;
+    margin-top: 10px;
+  }
+}

modules/family-calendar/family-calendar.js

@@ -690,7 +690,7 @@ document.addEventListener("DOMContentLoaded", () => {
       const y = this.currentMonth.getFullYear();
       const m = this.currentMonth.getMonth();
 
-      const lang = window.I18N_LANG || "fr-FR"; // Assure-toi d'avoir cette variable ou utilise une déduction
+      const lang = window.I18N_LANG || "fr-FR";
       const titleEl = document.querySelector("#fc-current-month-year");
       if (titleEl) {
         if (this.viewMode === "year") {
@@ -715,13 +715,15 @@ document.addEventListener("DOMContentLoaded", () => {
 
       if (this.viewMode === "year") {
         this.renderYearView();
-        return;
+      } else if (this.viewMode === "2months") {
-      }
-      if (this.viewMode === "2months") {
         this.renderTwoMonthsView();
-        return;
+      } else {
+        this.monthCalendar.innerHTML = this.generateMonthHTML(y, m);
       }
-      this.monthCalendar.innerHTML = this.generateMonthHTML(y, m);
+
+      this.renderMonthBalances();
+
+      this.syncSummaryWithMonth();
     }
 
     renderTwoMonthsView() {
@@ -746,6 +748,73 @@ document.addEventListener("DOMContentLoaded", () => {
       this.monthCalendar.innerHTML = html;
     }
 
+    // Affiche le décompte des congés (Début, Utilisé, Reste) sous le calendrier
+    renderMonthBalances() {
+      const container = document.getElementById("fc-month-balances");
+      if (!container) return;
+
+      // On n'affiche les soldes que si on regarde 1 seul mois pour éviter la confusion
+      if (this.viewMode !== "1month") {
+        container.innerHTML = "";
+        container.style.display = "none";
+        return;
+      }
+
+      container.style.display = "grid";
+      const ym = `${this.currentMonth.getFullYear()}-${String(this.currentMonth.getMonth() + 1).padStart(2, "0")}`;
+      let html = "";
+
+      [FAMILY.ALEX, FAMILY.LAIA].forEach((person) => {
+        html += `<div class="fc-balance-person">
+                  <div class="fc-balance-name ${person.prefix}">${person.prefix}</div>
+                  <div class="fc-balance-grid">`;
+
+        ["CP", "JRA", "JA"].forEach((type) => {
+          // Utilisation des données pré-calculées par calculateMonthlyBalances()
+          const info = this.monthlyLeaveBalances[person.id]?.[type]?.[ym];
+          const start = info ? info.availableAtMonthStart : 0;
+          const used = info ? info.usedInMonth : 0;
+          const end = Math.max(0, start - used);
+
+          const fmt = (n) =>
+            n > 0 ? (Number.isInteger(n) ? n : n.toFixed(1)) : "0";
+
+          html += `<div class="fc-balance-col">
+                      <span class="fc-balance-type">${type}</span>
+                      <div class="fc-balance-numbers">
+                          <div class="fc-bal-val start"><span title="Début de mois">▶</span><span>${fmt(start)}</span></div>
+                          <div class="fc-bal-val used"><span title="Posé ce mois">➖</span><span>${fmt(used)}</span></div>
+                          <div class="fc-bal-val end"><span title="Solde fin de mois">⏸</span><span>${fmt(end)}</span></div>
+                      </div>
+                   </div>`;
+        });
+
+        html += ` </div></div>`;
+      });
+
+      container.innerHTML = html;
+    }
+
+    // Force le menu déroulant du récapitulatif à se caler sur le mois affiché
+    syncSummaryWithMonth() {
+      const typeSelect = document.getElementById("summType");
+      const valueSelect = document.getElementById("summValue");
+
+      if (typeSelect && valueSelect && this.viewMode === "1month") {
+        const ym = `${this.currentMonth.getFullYear()}-${String(this.currentMonth.getMonth() + 1).padStart(2, "0")}`;
+
+        // Si on passe d'année à mois, on doit forcer le peuplement du select
+        if (typeSelect.value !== "month") {
+          typeSelect.value = "month";
+          typeSelect.dispatchEvent(new Event("change")); // Déclenche populateValues()
+        }
+
+        // On sélectionne le mois actuel
+        valueSelect.value = ym;
+        this.updateGlobalSummary();
+      }
+    }
+
     generateMonthHTML(year, month) {
       let html = `<table class="fc-month-table"><thead><tr>`;
       ["L", "M", "M", "J", "V"].forEach((d) => (html += `<th>${d}</th>`));