From 21c9b37ae095d65892922e646ac4a08e4361b271 Mon Sep 17 00:00:00 2001 From: "fefe.clochette" Date: Wed, 2 Sep 2026 19:13:51 +0200 Subject: [PATCH] color select --- dark-mode.css | 309 +++--- global.css | 482 +++++++++ includes/lang/ca.php | 105 ++ includes/lang/en.php | 105 ++ includes/lang/fr.php | 105 ++ mockup_epargne.html | 334 +++++++ modules/budget/budget.css | 989 +++++++++++++++++-- modules/budget/includes/api/save-savings.php | 6 +- modules/budget/views/epargne.php | 368 +++---- modules/budget/views/suivi.php | 295 +++--- settings.php | 361 +++++-- 11 files changed, 2838 insertions(+), 621 deletions(-) create mode 100644 mockup_epargne.html diff --git a/dark-mode.css b/dark-mode.css index 2a2fdc4..39fb6b3 100644 --- a/dark-mode.css +++ b/dark-mode.css @@ -1,127 +1,210 @@ /* ════════════════════════════════════════════════════════════════════ - dark-mode.css — Dark mode overrides (all modules) + dark-mode.css — Dark mode overrides (Cleaned & Optimized) Chargé en dernier dans le head pour garantir la cascade. ════════════════════════════════════════════════════════════════════ */ -/* ─── HOME PAGE ─────────────────────────────────────────────────────────────── */ +/* ─── FONDS & CONTENEURS PRINCIPAUX ────────────────────────────────── */ +[data-theme="dark"] .pf-card, +[data-theme="dark"] .pf-modal-content, +[data-theme="dark"] .budget-tabs-container, +[data-theme="dark"] .fc-header-row, +[data-theme="dark"] .fc-month-nav-row, +[data-theme="dark"] .fc-month-calendar-wrapper, +[data-theme="dark"] .fc-month-balances, +[data-theme="dark"] .hol-idea-card, +[data-theme="dark"] .pf-holidays__titlebar, +[data-theme="dark"] .hol-filters-row, +[data-theme="dark"] .cl-titlebar, +[data-theme="dark"] .pf-child-section, +[data-theme="dark"] .pf-child-totals-bar, +[data-theme="dark"] .pf-gift-card-compact, +[data-theme="dark"] .epargne-grid-table, +[data-theme="dark"] .sticky-col { + background: var(--bg-panel) !important; + border-color: var(--border-light) !important; + color: var(--text-main) !important; +} + +[data-theme="dark"] .owner-tabs, +[data-theme="dark"] .fc-view-controls, +[data-theme="dark"] .fc-day--other-month, +[data-theme="dark"] .fc-minimal-balance-card, +[data-theme="dark"] .pf-summary-pill, +[data-theme="dark"] .pf-filter-bar { + background: var(--bg-page) !important; + border-color: var(--border-light) !important; + color: var(--text-muted) !important; +} + +/* ─── TYPOGRAPHIE GLOBALE ──────────────────────────────────────────── */ +[data-theme="dark"] h1, +[data-theme="dark"] h2, +[data-theme="dark"] h3, +[data-theme="dark"] .pf-modal-title, +[data-theme="dark"] .pf-card-title, +[data-theme="dark"] .hol-main-title, +[data-theme="dark"] .pf-gift-title, +[data-theme="dark"] .budget-view h2, +[data-theme="dark"] .view-header h2, +[data-theme="dark"] .month-header-container { + color: var(--text-main) !important; +} + +[data-theme="dark"] .pf-card-desc, +[data-theme="dark"] .tab-item { + color: var(--text-muted); +} + +/* ─── INPUTS & SÉLECTEURS ──────────────────────────────────────────── */ +[data-theme="dark"] .pf-input, +[data-theme="dark"] .pf-filter-select, +[data-theme="dark"] .hol-year-select, +[data-theme="dark"] .budget-view input, +[data-theme="dark"] .budget-view select, +[data-theme="dark"] .budget-view textarea, +[data-theme="dark"] .hol-idea-card input, +[data-theme="dark"] .hol-idea-card textarea, +[data-theme="dark"] .hol-idea-card select { + background: #1c2128 !important; + border-color: var(--border-light) !important; + color: var(--text-main) !important; +} + +[data-theme="dark"] .pf-input::placeholder { + color: #484f58 !important; +} + +/* ─── BOUTONS & ÉTATS ACTIFS ───────────────────────────────────────── */ +[data-theme="dark"] .pf-btn.btn-secondary, +[data-theme="dark"] .fc-nav-button, +[data-theme="dark"] .fc-view-button, +[data-theme="dark"] .hol-map-toggle, +[data-theme="dark"] .cl-view-btn, +[data-theme="dark"] .pf-btn-icon-text, +[data-theme="dark"] .owner-tab { + background: var(--bg-panel) !important; + color: var(--text-muted) !important; + border-color: var(--border-light) !important; +} + +[data-theme="dark"] .pf-btn.btn-secondary:hover, +[data-theme="dark"] .fc-nav-button:hover, +[data-theme="dark"] .hol-map-toggle:hover, +[data-theme="dark"] .pf-btn-icon-text:hover { + background: rgba(255, 255, 255, 0.06) !important; + color: var(--text-main) !important; +} + +[data-theme="dark"] .tab-item.active, +[data-theme="dark"] .fc-view-button--active, +[data-theme="dark"] .cl-view-btn.is-active { + background: rgba(59, 130, 246, 0.15) !important; + color: var(--primary) !important; + border-color: rgba(59, 130, 246, 0.3) !important; +} + +[data-theme="dark"] .owner-tab.active { + background: var(--primary) !important; + color: #fff !important; +} + +/* ─── TABLES ───────────────────────────────────────────────────────── */ +[data-theme="dark"] .pf-table, +[data-theme="dark"] .fc-month-table, +[data-theme="dark"] #planningTable-wrapper { + background: var(--bg-panel) !important; + color: var(--text-main); + border-color: var(--border-light) !important; +} + +[data-theme="dark"] .pf-table thead th, +[data-theme="dark"] .fc-month-table th, +[data-theme="dark"] #planningTable thead th, +[data-theme="dark"] th.sticky-col, +[data-theme="dark"] .pf-child-header { + background: #1c2128 !important; + color: var(--text-muted) !important; + border-color: var(--border-light) !important; +} + +[data-theme="dark"] .pf-table tbody td, +[data-theme="dark"] .fc-month-table td, +[data-theme="dark"] #planningTable tbody td { + border-color: rgba(48, 54, 61, 0.5) !important; +} + +[data-theme="dark"] .pf-table tbody tr:hover td, +[data-theme="dark"] .fc-month-table td:hover:not(.fc-day--other-month) { + background: rgba(255, 255, 255, 0.04) !important; +} + +[data-theme="dark"] .pf-table tfoot td { + background: #1c2128 !important; + border-color: rgba(48, 54, 61, 0.5) !important; +} + +/* ─── MODULES SPÉCIFIQUES ──────────────────────────────────────────── */ + +/* Accueil */ [data-theme="dark"] body[data-page="home"] .pf-module-card { - background: rgba(22,27,34,.92) !important; - border: 1px solid var(--border-light) !important; - box-shadow: 0 4px 15px rgba(0,0,0,.4) !important; + background: rgba(22, 27, 34, 0.92) !important; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] body[data-page="home"] .pf-module-card:hover { border-color: var(--primary) !important; } -[data-theme="dark"] body[data-page="home"] .pf-card-title { color: var(--text-main); } -[data-theme="dark"] body[data-page="home"] .pf-card-desc { color: var(--text-muted); } -[data-theme="dark"] body[data-page="home"] .pf-card-cta { color: var(--primary); } -/* ─── SHARED / GLOBAL PATTERNS ──────────────────────────────────────────────── */ -[data-theme="dark"] .pf-card { background: var(--bg-panel) !important; border-color: var(--border-light) !important; color: var(--text-main) !important; } -[data-theme="dark"] .pf-table { background: var(--bg-panel); color: var(--text-main); } -[data-theme="dark"] .pf-table thead th { background: #1c2128 !important; color: var(--text-muted) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-table tbody td { background: var(--bg-panel); color: var(--text-main); border-color: rgba(48,54,61,.5); } -[data-theme="dark"] .pf-table tbody tr:hover td { background: rgba(255,255,255,.03); } -[data-theme="dark"] .pf-table tfoot, -[data-theme="dark"] .pf-table tfoot td { background: #1c2128; color: var(--text-main); border-color: rgba(48,54,61,.5); } -[data-theme="dark"] .pf-modal-content { background: var(--bg-panel) !important; border: 1px solid var(--border-light) !important; color: var(--text-main) !important; } -[data-theme="dark"] .pf-modal-title { color: var(--text-main) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-input, -[data-theme="dark"] .pf-filter-select, -[data-theme="dark"] .hol-year-select { background: #1c2128 !important; border-color: var(--border-light) !important; color: var(--text-main) !important; } -[data-theme="dark"] .pf-input::placeholder { color: #484f58 !important; } -[data-theme="dark"] .pf-btn.btn-secondary { background: var(--bg-panel) !important; color: var(--text-muted) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-btn.btn-secondary:hover { background: rgba(255,255,255,.06) !important; color: var(--text-main) !important; } +/* Épargne & Grilles */ +[data-theme="dark"] .eg-header-row { + background: #111827 !important; + border-color: #30363d !important; + color: #e6edf3 !important; +} +[data-theme="dark"] .eg-row:nth-child(even) { + background: rgba(255, 255, 255, 0.02); +} +[data-theme="dark"] .eg-row:hover { + background: rgba(255, 255, 255, 0.05); +} -/* ─── BUDGET MODULE ─────────────────────────────────────────────────────────── */ -[data-theme="dark"] .budget-view { color: var(--text-main); } -[data-theme="dark"] .budget-view h2, -[data-theme="dark"] .view-header h2 { color: var(--text-main) !important; } -[data-theme="dark"] .budget-tabs-container { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .tab-item { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); } -[data-theme="dark"] .tab-item:hover { background: rgba(255,255,255,.06); color: var(--text-main); } -[data-theme="dark"] .tab-item.active { background: rgba(59,130,246,.15) !important; color: var(--primary) !important; border-color: rgba(59,130,246,.3) !important; } -[data-theme="dark"] .owner-tabs { background: var(--bg-page); border-color: var(--border-light); } -[data-theme="dark"] .owner-tab { background: var(--bg-panel) !important; color: var(--text-muted) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .owner-tab.active { background: var(--primary) !important; color: #fff !important; } -[data-theme="dark"] .month-header-container { color: var(--text-main); } -/* sticky col: uses var(--bg-panel) already but th.sticky-col uses hardcoded #f8fafc */ -[data-theme="dark"] th.sticky-col { background: #1c2128 !important; color: var(--text-muted) !important; } -[data-theme="dark"] .sticky-col { background: var(--bg-panel) !important; color: var(--text-main) !important; } -[data-theme="dark"] .month-actions .btn-icon-small { background: #1c2128 !important; border-color: var(--border-light) !important; color: var(--text-main) !important; } -[data-theme="dark"] .month-actions .btn-icon-small:hover { background: rgba(255,255,255,.06) !important; } -[data-theme="dark"] .savings-table .row-extres td { background: rgba(245,158,11,.08) !important; } -[data-theme="dark"] .nens-title.theme-pol { background: rgba(30,58,138,.2) !important; color: #93c5fd !important; border-color: #3b82f6 !important; } -[data-theme="dark"] .nens-title.theme-pep { background: rgba(20,83,45,.2) !important; color: #86efac !important; border-color: #22c55e !important; } -[data-theme="dark"] .nens-table.theme-pol thead th { background: rgba(30,58,138,.15) !important; color: #93c5fd !important; } -[data-theme="dark"] .nens-table.theme-pep thead th { background: rgba(20,83,45,.15) !important; color: #86efac !important; } -/* Specific input/selects in budget */ -[data-theme="dark"] .budget-view input, -[data-theme="dark"] .budget-view select, -[data-theme="dark"] .budget-view textarea { background: #1c2128 !important; border-color: var(--border-light) !important; color: var(--text-main) !important; } -/* sum selected highlight */ -[data-theme="dark"] .sum-selected { background: rgba(59,130,246,.1) !important; } +/* Éléments colorés spécifiques */ +[data-theme="dark"] .savings-table .row-extres td, +[data-theme="dark"] .eg-extres-row { + background: rgba(245, 158, 11, 0.08) !important; +} -/* ─── FAMILY CALENDAR MODULE ────────────────────────────────────────────────── */ -[data-theme="dark"] .pf-family-calendar { color: var(--text-main); } -[data-theme="dark"] .fc-header-row { background: var(--bg-panel); border-color: var(--border-light); } -[data-theme="dark"] .fc-view-controls { background: var(--bg-page) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .fc-view-button { background: var(--bg-panel) !important; color: var(--text-muted) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .fc-view-button--active { background: rgba(59,130,246,.15) !important; color: var(--primary) !important; border-color: rgba(59,130,246,.3) !important; } -[data-theme="dark"] .fc-month-nav-row { background: var(--bg-panel); border-color: var(--border-light); } -[data-theme="dark"] .fc-month-nav-row h3 { color: var(--text-main) !important; } -[data-theme="dark"] .fc-nav-button { background: var(--bg-panel) !important; color: var(--text-muted) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .fc-nav-button:hover { background: rgba(255,255,255,.06) !important; } -/* Calendar table — lots of !important in source */ -[data-theme="dark"] .fc-month-table { border-color: var(--border-light) !important; } -[data-theme="dark"] .fc-month-table th { background: #1c2128 !important; color: var(--text-muted) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .fc-month-table td { background: var(--bg-panel) !important; border-color: rgba(48,54,61,.5) !important; } -[data-theme="dark"] .fc-month-table td:hover:not(.fc-day--other-month) { background: rgba(255,255,255,.04) !important; } -[data-theme="dark"] .fc-day--other-month { background: var(--bg-page) !important; color: var(--text-muted) !important; } -[data-theme="dark"] .fc-month-calendar-wrapper, -[data-theme="dark"] .fc-month-balances { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .fc-minimal-balance-card { background: var(--bg-page) !important; border-color: var(--border-light) !important; color: var(--text-main) !important; } -[data-theme="dark"] .fc-min-chip { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .fc-burn-alert { background: rgba(239,68,68,.1) !important; color: #f87171 !important; } -/* Planning table (vue planning) */ -[data-theme="dark"] #planningTable-wrapper { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] #planningTable thead th { background: #1c2128 !important; color: var(--text-muted) !important; } -[data-theme="dark"] #planningTable tbody td { border-color: rgba(48,54,61,.5) !important; } -[data-theme="dark"] #planningTable tbody td.col-sticky-mois, -[data-theme="dark"] #planningTable tbody td.col-sticky-sem { background: var(--bg-panel) !important; } -[data-theme="dark"] .col-month { background: var(--bg-panel) !important; color: var(--text-main) !important; } -[data-theme="dark"] .fc-week-nav-controls { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-btn-icon-text { background: var(--bg-panel) !important; color: var(--text-muted) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-btn-icon-text:hover { background: rgba(255,255,255,.06) !important; } +[data-theme="dark"] .nens-title.theme-pol { + background: rgba(30, 58, 138, 0.2) !important; + color: #93c5fd !important; + border-color: #3b82f6 !important; +} +[data-theme="dark"] .nens-table.theme-pol thead th { + background: rgba(30, 58, 138, 0.15) !important; + color: #93c5fd !important; +} -/* ─── HOLIDAYS MODULE ───────────────────────────────────────────────────────── */ -[data-theme="dark"] .pf-holidays { color: var(--text-main); } -[data-theme="dark"] .pf-holidays__titlebar { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .hol-main-title { color: var(--text-main) !important; } -[data-theme="dark"] .hol-idea-card { background: var(--bg-panel) !important; border-color: var(--border-light) !important; color: var(--text-main) !important; box-shadow: var(--shadow) !important; } -[data-theme="dark"] .hol-idea-card:hover { border-color: var(--primary) !important; } -[data-theme="dark"] .hol-idea-card input, -[data-theme="dark"] .hol-idea-card textarea, -[data-theme="dark"] .hol-idea-card select { background: #1c2128 !important; border-color: var(--border-light) !important; color: var(--text-main) !important; } -[data-theme="dark"] .hol-filters-row { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .hol-map-toggle { background: var(--bg-panel) !important; color: var(--text-muted) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .hol-map-toggle:hover { background: rgba(255,255,255,.06) !important; } -[data-theme="dark"] .hol-add-btn { background: var(--primary) !important; color: #fff !important; } +[data-theme="dark"] .nens-title.theme-pep { + background: rgba(20, 83, 45, 0.2) !important; + color: #86efac !important; + border-color: #22c55e !important; +} +[data-theme="dark"] .nens-table.theme-pep thead th { + background: rgba(20, 83, 45, 0.15) !important; + color: #86efac !important; +} -/* ─── GIFT-LIST MODULE ──────────────────────────────────────────────────────── */ -[data-theme="dark"] .pf-gift-list { color: var(--text-main); } -[data-theme="dark"] .pf-gift-list h1 { color: var(--text-main) !important; } -[data-theme="dark"] .cl-titlebar { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .cl-view-btn { background: var(--bg-panel) !important; color: var(--text-muted) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .cl-view-btn.is-active { background: rgba(59,130,246,.15) !important; color: var(--primary) !important; border-color: rgba(59,130,246,.3) !important; } -[data-theme="dark"] .pf-filter-bar { background: var(--bg-page) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-filter-select { background: #1c2128 !important; color: var(--text-main) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-child-section { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-child-header { background: #1c2128 !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-child-header h3 { color: var(--text-main) !important; } -[data-theme="dark"] .pf-child-totals-bar { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-summary-pill { background: var(--bg-page) !important; border-color: var(--border-light) !important; color: var(--text-main) !important; } -[data-theme="dark"] .pf-gift-card-compact { background: var(--bg-panel) !important; border-color: var(--border-light) !important; } -[data-theme="dark"] .pf-gift-card-compact:hover { border-color: var(--primary) !important; } -[data-theme="dark"] .pf-gift-title { color: var(--text-main) !important; } -[data-theme="dark"] .pf-gift-footer { border-color: var(--border-light) !important; } +[data-theme="dark"] .sum-selected { + background: rgba(59, 130, 246, 0.1) !important; +} +[data-theme="dark"] .fc-burn-alert { + background: rgba(239, 68, 68, 0.1) !important; + color: #f87171 !important; +} +[data-theme="dark"] .month-actions .btn-icon-small { + background: #1c2128 !important; + border-color: var(--border-light) !important; + color: var(--text-main) !important; +} +[data-theme="dark"] .month-actions .btn-icon-small:hover { + background: rgba(255, 255, 255, 0.06) !important; +} diff --git a/global.css b/global.css index 7b95568..04a43dd 100644 --- a/global.css +++ b/global.css @@ -445,6 +445,81 @@ body.pf-home .pf-mobile-close-btn { font-size: 0.95rem; color: var(--text-main); } +/* --- PALETTES DE COULEURS CUSTOM --- */ +.pf-color-dropdown { + position: relative; + display: inline-block; +} +.pf-color-trigger { + width: 24px; + height: 24px; + border-radius: 50%; + border: 1px solid var(--border-light); + cursor: pointer; + padding: 0; + transition: transform 0.2s; +} +.pf-color-trigger:hover { + transform: scale(1.1); +} +.pf-color-menu { + display: none; + position: absolute; + right: 0; + top: 100%; + margin-top: 8px; + background: var(--bg-panel); + border: 1px solid var(--border-light); + border-radius: 12px; + padding: 12px; + box-shadow: var(--shadow-lg); + z-index: 100; + width: 180px; + gap: 8px; + flex-wrap: wrap; +} +.pf-color-menu.is-open { + display: flex; + animation: pfModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1); +} +.pf-color-swatch { + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + cursor: pointer; + transition: transform 0.2s; +} +.pf-color-swatch:hover { + transform: scale(1.15); +} + +/* Palette Radio (Pour le formulaire d'ajout) */ +.pf-radio-swatch { + width: 24px; + height: 24px; + border-radius: 50%; + cursor: pointer; + display: inline-block; + transition: + transform 0.2s, + box-shadow 0.2s; + border: 2px solid transparent; +} +.pf-radio-swatch:hover { + transform: scale(1.1); +} +.pf-radio-swatch:has(input[type="radio"]:checked) { + transform: scale(1.1); + box-shadow: + 0 0 0 2px var(--bg-panel), + 0 0 0 4px var(--text-main); +} +[data-theme="dark"] .pf-radio-swatch:has(input[type="radio"]:checked) { + box-shadow: + 0 0 0 2px var(--bg-panel), + 0 0 0 4px var(--text-main); +} /* Encadré pointillé (code d’invitation, etc.) */ .pf-dashed-panel { @@ -1326,3 +1401,410 @@ details[open].pf-accordion > .pf-accordion-summary::after { 90deg ); /* 90deg rend mieux sur une roue crantée qu'un 45deg ! */ } + +/* ========================================================================== + UTILITAIRES GLOBAUX (Remplacement des styles en ligne) + ========================================================================== */ +.pf-mt-xs { + margin-top: 0.35rem; +} +.pf-mt-md { + margin-top: 1rem; +} +.pf-mt-2 { + margin-top: 2rem; +} +.pf-mb-md { + margin-bottom: 1rem; +} +.pf-m-0 { + margin: 0; +} +.pf-py-8-16 { + padding: 8px 16px; +} +.pf-input-sm { + max-width: 120px; +} +.pf-flex-0 { + flex: 0; +} +.pf-flex-1-5 { + flex: 1.5; +} +.pf-flex-2 { + flex: 2; +} +.pf-min-w-120 { + min-width: 120px; +} +.pf-label-sm { + font-size: 0.8rem; + margin-bottom: 4px; +} +.pf-flex-gap-12-center { + display: flex; + gap: 12px; + align-items: center; +} + +/* Composants Spécifiques Paramètres */ +.pf-empty-dashed { + padding: 10px; + text-align: center; + border: 1px dashed var(--border-light); + border-radius: 8px; +} +.pf-border-left-dynamic { + border-left: 4px solid var(--owner-color, var(--primary)); +} +.pf-attached-form { + display: flex; + gap: 8px; + background: var(--bg-soft); + padding: 12px; + border-radius: 8px; + border: 1px dashed var(--border-light); + align-items: flex-end; + flex-wrap: wrap; +} +.pf-input-color-sm { + width: 28px !important; + height: 28px !important; +} +/* --- SÉLECTEUR DE COULEUR (PALETTE) --- */ +.pf-color-palette { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 6px; +} + +.pf-color-swatch { + width: 32px; + height: 32px; + border-radius: 50%; + border: 2px solid transparent; + cursor: pointer; + transition: + transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), + box-shadow 0.2s; + padding: 0; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.pf-color-swatch:hover { + transform: scale(1.15); +} + +.pf-color-swatch.selected { + transform: scale(1.15); + border-color: var(--bg-panel); + box-shadow: 0 0 0 3px var(--text-main); /* Un anneau extérieur pour marquer la sélection */ +} + +/* Variante Dark Mode */ +[data-theme="dark"] .pf-color-swatch.selected { + border-color: var(--bg-panel); + box-shadow: 0 0 0 3px var(--text-main); +} + +/* --- PALETTE DE COULEURS CUSTOM (HouseHub) --- */ +.pf-palette-container { + display: flex; + flex-wrap: wrap; + gap: 8px; +} +.pf-palette-sm { + gap: 6px; +} +.pf-color-swatch { + position: relative; + width: 32px; + height: 32px; + border-radius: 50%; + cursor: pointer; + display: inline-block; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + transition: + transform 0.2s, + box-shadow 0.2s; +} +.pf-color-swatch:hover { + transform: scale(1.1); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); +} +.pf-color-swatch-sm { + width: 24px; + height: 24px; +} +.pf-color-swatch input[type="radio"] { + position: absolute; + opacity: 0; + width: 0; + height: 0; +} +.pf-color-swatch:has(input[type="radio"]:checked) { + box-shadow: + 0 0 0 2px var(--bg-panel), + 0 0 0 4px var(--primary); + transform: scale(1.1); +} +[data-theme="dark"] .pf-color-swatch:has(input[type="radio"]:checked) { + box-shadow: + 0 0 0 2px var(--bg-panel), + 0 0 0 4px var(--primary); +} + +/* --- PROFILS RATTACHÉS (Settings) --- */ +.pf-attached-card { + display: flex; + flex-direction: column; + gap: 12px; + align-items: stretch; + padding: 14px; + background: var(--bg-panel); + border: 1px solid var(--border-light); + border-radius: 8px; +} +.pf-attached-header { + display: flex; + justify-content: space-between; + align-items: center; +} +.pf-attached-name { + font-size: 1.1rem; + font-weight: 700; +} +.pf-attached-color-form { + display: flex; + align-items: center; + gap: 10px; + background: var(--bg-page); + padding: 8px 12px; + border-radius: 8px; +} +.pf-attached-add-form { + display: flex; + flex-direction: column; + gap: 12px; + background: var(--bg-soft); + padding: 16px; + border-radius: 8px; + border: 1px dashed var(--border-light); +} +.pf-attached-add-row { + display: flex; + gap: 12px; + align-items: flex-end; + flex-wrap: wrap; +} +.pf-attached-add-col { + margin-bottom: 0; + flex: 1; + min-width: 150px; +} +.pf-attached-btn-add { + align-self: flex-end; + margin-top: 4px; +} + +/* --- UTILS --- */ +.pf-mt-lg { + margin-top: 2rem; +} +.pf-mb-lg { + margin-bottom: 1.5rem; +} +.pf-mb-md { + margin-bottom: 1rem; +} +.pf-m-0 { + margin: 0; +} +.pf-label-sm { + font-size: 0.8rem; + margin-bottom: 4px; +} +.pf-empty-box { + padding: 10px; + text-align: center; + border: 1px dashed var(--border-light); + border-radius: 8px; +} + +/* Couleurs Prédéfinies */ +.pf-color-red { + background-color: #ef4444; +} +.pf-color-orange { + background-color: #f97316; +} +.pf-color-amber { + background-color: #f59e0b; +} +.pf-color-lime { + background-color: #84cc16; +} +.pf-color-green { + background-color: #22c55e; +} +.pf-color-teal { + background-color: #14b8a6; +} +.pf-color-cyan { + background-color: #06b6d4; +} +.pf-color-sky { + background-color: #0ea5e9; +} +.pf-color-blue { + background-color: #3b82f6; +} +.pf-color-indigo { + background-color: #6366f1; +} +.pf-color-violet { + background-color: #8b5cf6; +} +.pf-color-fuchsia { + background-color: #d946ef; +} +.pf-color-rose { + background-color: #f43f5e; +} +.pf-color-slate { + background-color: #64748b; +} + +/* Popover Palette (Profils rattachés) */ +.pf-palette-dropdown { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; +} +.pf-palette-popover { + display: none; + position: absolute; + right: 0; + top: 120%; + background: var(--bg-panel); + border: 1px solid var(--border-light); + border-radius: 12px; + padding: 12px; + box-shadow: var(--shadow-lg); + width: 200px; + gap: 8px; + flex-wrap: wrap; + z-index: 100; +} +.pf-palette-dropdown.is-open .pf-palette-popover { + display: flex; + animation: pfModalPop 0.2s ease-out; +} +.pf-profile-header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} +.pf-profile-actions { + display: flex; + align-items: center; + gap: 12px; +} +.pf-m-0 { + margin: 0; +} +.pf-empty-dashed { + padding: 10px; + text-align: center; + border: 1px dashed var(--border-light); + border-radius: 8px; + color: var(--text-muted); +} + +/* --- UTILITAIRES & PROFILS RATTACHÉS (SETTINGS) --- */ +.pf-mt-lg { + margin-top: 2rem; +} +.pf-mb-md { + margin-bottom: 1rem; +} +.pf-mb-lg { + margin-bottom: 1.5rem; +} +.pf-mb-0 { + margin-bottom: 0; +} +.pf-m-0 { + margin: 0; +} + +.pf-profile-color-note { + display: block; + margin-top: 8px; +} + +.pf-attached-card { + border-left: 4px solid var(--owner-color, #3b82f6); +} + +.pf-attached-actions { + display: flex; + align-items: center; + gap: 12px; +} + +.pf-color-picker-sm { + width: 24px !important; + height: 24px !important; + min-width: 24px !important; +} + +.pf-btn-delete-sm { + font-size: 1.2rem; + padding: 4px; +} + +.pf-empty-dashed { + padding: 10px; + text-align: center; + border: 1px dashed var(--border-light); + border-radius: 8px; +} + +.pf-attached-form { + display: flex; + gap: 8px; + background: var(--bg-soft); + padding: 12px; + border-radius: 8px; + border: 1px dashed var(--border-light); + align-items: flex-end; + flex-wrap: wrap; +} + +.pf-flex-2 { + flex: 2; + min-width: 120px; +} +.pf-flex-1-5 { + flex: 1.5; + min-width: 120px; +} +.pf-col-center { + display: flex; + flex-direction: column; + align-items: center; +} + +.pf-label-sm { + font-size: 0.8rem; + margin-bottom: 4px; +} + +.pf-btn-pad-sm { + padding: 8px 16px; +} diff --git a/includes/lang/ca.php b/includes/lang/ca.php index e26524d..6800ac7 100644 --- a/includes/lang/ca.php +++ b/includes/lang/ca.php @@ -170,6 +170,109 @@ return [ 'set_care_modes' => 'Modalitats de cura habituals', 'set_add_care_mode' => 'Afegir una modalitat', 'btn_save' => 'Desar', + 'settings_profile_added' => 'Perfil de %s afegit amb èxit.', + 'settings_err_name_required' => 'El nom és obligatori.', + 'settings_attached_profiles_title' => 'Perfils adjunts', + 'settings_attached_profiles_desc' => 'Membres de la llar (Nens, mainaderes, familiars) sense accés directe.', + 'settings_no_attached_profiles' => 'Cap perfil adjunt.', + 'label_firstname' => 'Nom', + 'placeholder_firstname_ex' => 'Ex: Pol, Carole...', + 'label_role' => 'Rol', + 'role_child_icon' => '👶 Nen/a', + 'role_helper_icon' => '💼 Ajudant', + 'role_relative_icon' => '👵 Familiar', + 'role_unknown' => 'Desconegut', + 'label_color' => 'Color', + 'confirm_delete_profile' => 'Voleu eliminar definitivament aquest perfil?', + 'change_color' => 'Canviar el color', + 'color_updated' => 'Color actualitzat!', + 'set_success_color_profile' => 'Color del perfil actualitzat.', + 'set_success_color_update' => 'Color actualitzat!', + 'set_desc_profile_color' => 'Aquest color s\'utilitzarà per a les teves graelles de pressupost, calendaris i indicadors personals.', + 'placeholder_apple_id' => 'nom@icloud.com', + 'placeholder_apple_pwd' => 'xxxx-xxxx-xxxx-xxxx', + + // --- SETTINGS --- + 'error_csrf' => 'Sessió invàlida (CSRF). Si us plau, recarrega la pàgina.', + 'set_err_min_module' => 'Has de mantenir almenys un mòdul actiu.', + 'set_success_modules' => 'Mòduls actualitzats amb èxit.', + 'set_success_lang' => 'Idioma actualitzat.', + 'set_err_empty_name' => 'El nom no pot estar buit.', + 'set_success_profile' => 'Perfil actualitzat amb èxit.', + 'set_err_wrong_pwd' => 'Contrasenya actual incorrecta.', + 'set_err_pwd_length' => 'La nova contrasenya ha de tenir almenys 6 caràcters.', + 'set_err_pwd_match' => 'Les contrasenyes no coincideixen.', + 'set_success_pwd' => 'Contrasenya canviada amb èxit.', + 'set_success_family' => 'Nom de l\'espai actualitzat.', + 'set_success_invite' => 'Nou codi d\'invitació generat.', + 'set_err_bg_format' => 'Format no compatible (jpg, png, webp).', + 'set_success_bg' => 'Imatge d\'inici actualitzada.', + 'set_err_upload' => 'Error durant la càrrega.', + 'set_success_bg_reset' => 'Imatge d\'inici restablerta.', + 'set_err_db_unavailable' => 'Base de dades familiar no disponible.', + 'set_err_ios_missing' => 'Si us plau, proporciona un ID d\'iCloud, contrasenya d\'aplicació i URL CalDAV.', + 'set_success_ios' => 'Connexió de calendari iOS desada.', + 'set_success_ios_auto' => ' URL del calendari detectada automàticament.', + 'set_err_ios_save' => 'No es pot desar la connexió iOS: ', + 'set_err_ios_none' => 'Cap connexió iOS configurada.', + 'set_success_ios_test' => 'Connexió iCloud CalDAV vàlida (HTTP %s).', + 'set_err_ios_test' => 'La prova de connexió ha fallat (HTTP %s). Revisa les teves credencials.', + 'set_err_ios_test_fail' => 'Prova de connexió no disponible: ', + 'set_success_ios_del' => 'Connexió iOS eliminada.', + 'set_success_profile_add' => 'Perfil de %s afegit amb èxit.', + 'set_err_name_required' => 'El nom és obligatori.', + 'set_success_profile_del' => 'Perfil suprimit.', + 'set_title_page' => '⚙️ Configuració', + 'set_title_lang' => '🌐 Idioma', + 'set_title_modules' => '🧩 Mòduls Actius', + 'set_desc_modules' => 'Tria els mòduls visibles a la navegació (compartits amb tots els membres de l\'espai).', + 'set_title_ios' => '📱 Integració de Calendari iOS (CalDAV)', + 'set_desc_ios' => 'Configura aquí el teu calendari iCloud per sincronitzar els esdeveniments creats a HouseHub.', + 'set_label_apple_id' => 'ID d\'Apple (correu iCloud)', + 'set_label_apple_pwd' => 'Contrasenya d\'aplicació d\'Apple', + 'set_label_apple_url' => 'URL del calendari CalDAV', + 'set_btn_test_ios' => 'Prova la connexió', + 'set_btn_disconnect_ios' => 'Desconnecta', + 'set_title_bg' => '🖼️ Imatge d\'Inici', + 'set_desc_bg' => 'Foto de fons mostrada a la pàgina d\'inici (compartida amb tots els membres).', + 'set_badge_custom_bg' => 'Imatge personalitzada', + 'set_label_new_bg' => 'Nova imatge (jpg, png, webp — màx 10 MB)', + 'set_btn_reset_bg' => '🔄 Restableix la imatge per defecte', + 'set_confirm_reset_bg' => 'Tornar a la imatge per defecte?', + 'set_title_profile' => '👤 El meu Perfil', + 'set_label_username' => 'Nom d\'usuari', + 'set_label_display_name' => 'Nom / Àlies mostrat', + 'set_label_profile_color' => 'Color temàtic del meu perfil', + 'set_desc_profile_color' => 'Aquest color s\'utilitzarà per a les teves graelles de pressupost, calendaris i indicadors personals.', + 'set_title_pwd' => '🔒 Canviar Contrasenya', + 'set_label_cur_pwd' => 'Contrasenya actual', + 'set_label_new_pwd' => 'Nova contrasenya', + 'set_label_confirm_pwd' => 'Confirma', + 'set_btn_edit' => 'Modifica', + 'set_title_family' => '🏠 El meu Espai Familiar', + 'set_label_family_name' => 'Nom de l\'espai', + 'set_desc_invite' => 'Codi d\'invitació — comparteix-lo per convidar algú', + 'set_title_copy' => 'Fes clic per copiar', + 'set_msg_copied' => '✓ Copiat!', + 'set_btn_new_code' => '🔄 Nou codi', + 'set_confirm_new_code' => 'Regenerar codi? L\'antic serà invalidat.', + 'set_desc_register_link' => 'Enllaç de registre:', + 'set_title_members' => 'Membres', + 'set_badge_admin' => 'Admin', + 'set_title_attached' => '🧸 Perfils Adjunts', + 'set_desc_attached' => 'Membres gestionats per la llar (Nens, Mainaderes, Familiars) sense accés directe.', + 'role_unknown' => 'Desconegut', + 'role_child' => '👶 Nen/a', + 'role_helper' => '💼 Ajudant', + 'role_relative' => '👵 Familiar', + 'set_confirm_del_profile' => 'Eliminar definitivament aquest perfil?', + 'set_empty_attached' => 'Cap perfil adjunt.', + 'set_label_firstname' => 'Nom', + 'set_label_role' => 'Rol', + 'set_label_color' => 'Color', + 'set_link_admin' => '→ Tauler d\'Administració', + 'set_success_color' => 'Color actualitzat!', + 'error_network' => 'Error de xarxa', // ========================================== // FAMILY CALENDAR @@ -736,6 +839,8 @@ return [ 'bud_prev_monthly_target' => 'Import objectiu / Mensualitat (€)', 'bud_prev_transfer_dest' => 'Destinació de la transferència', 'bud_prev_none' => 'Cap destinació (Despesa estàndard)', + 'bud_sav_new_line' => 'New line', +'bud_sav_prompt_new_line' => 'Name of the new savings line:', // --- BUDGET : EPARGNE --- 'bud_sav_add_month' => 'Introduir un mes', diff --git a/includes/lang/en.php b/includes/lang/en.php index 99ca0e8..4426fc1 100644 --- a/includes/lang/en.php +++ b/includes/lang/en.php @@ -75,6 +75,88 @@ return [ 'login_subtitle' => 'Please sign in to continue', 'login_remember_me' => 'Remember me', + // --- SETTINGS --- + 'error_csrf' => 'Invalid session (CSRF). Please reload the page.', + 'set_err_min_module' => 'You must keep at least one active module.', + 'set_success_modules' => 'Modules successfully updated.', + 'set_success_lang' => 'Language updated.', + 'set_err_empty_name' => 'First name cannot be empty.', + 'set_success_profile' => 'Profile updated successfully.', + 'set_err_wrong_pwd' => 'Incorrect current password.', + 'set_err_pwd_length' => 'New password must be at least 6 characters long.', + 'set_err_pwd_match' => 'Passwords do not match.', + 'set_success_pwd' => 'Password successfully changed.', + 'set_success_family' => 'Space name updated.', + 'set_success_invite' => 'New invitation code generated.', + 'set_err_bg_format' => 'Unsupported format (jpg, png, webp).', + 'set_success_bg' => 'Home image updated.', + 'set_err_upload' => 'Error during upload.', + 'set_success_bg_reset' => 'Home image reset.', + 'set_err_db_unavailable' => 'Family database unavailable.', + 'set_err_ios_missing' => 'Please provide an iCloud ID, app password, and CalDAV URL.', + 'set_success_ios' => 'iOS calendar connection saved.', + 'set_success_ios_auto' => ' Calendar URL automatically detected.', + 'set_err_ios_save' => 'Cannot save iOS connection: ', + 'set_err_ios_none' => 'No iOS connection configured.', + 'set_success_ios_test' => 'Valid iCloud CalDAV connection (HTTP %s).', + 'set_err_ios_test' => 'Connection test failed (HTTP %s). Check your credentials.', + 'set_err_ios_test_fail' => 'Connection test unavailable: ', + 'set_success_ios_del' => 'iOS connection removed.', + 'set_success_profile_add' => 'Profile for %s successfully added.', + 'set_err_name_required' => 'First name is required.', + 'set_success_profile_del' => 'Profile deleted.', + 'set_title_page' => '⚙️ Settings', + 'set_title_lang' => '🌐 Language', + 'set_title_modules' => '🧩 Active Modules', + 'set_desc_modules' => 'Choose the modules visible in the navigation (shared with all space members).', + 'set_title_ios' => '📱 iOS Calendar Integration (CalDAV)', + 'set_desc_ios' => 'Configure your iCloud calendar here to sync events created in HouseHub.', + 'set_label_apple_id' => 'Apple ID (iCloud email)', + 'set_label_apple_pwd' => 'Apple app password', + 'set_label_apple_url' => 'CalDAV calendar URL', + 'set_btn_test_ios' => 'Test connection', + 'set_btn_disconnect_ios' => 'Disconnect', + 'set_title_bg' => '🖼️ Home Image', + 'set_desc_bg' => 'Background photo displayed on the homepage (shared with all members).', + 'set_badge_custom_bg' => 'Custom image', + 'set_label_new_bg' => 'New image (jpg, png, webp — max 10 MB)', + 'set_btn_reset_bg' => '🔄 Reset to default image', + 'set_confirm_reset_bg' => 'Revert to default image?', + 'set_title_profile' => '👤 My Profile', + 'set_label_username' => 'Username', + 'set_label_display_name' => 'First name / Display name', + 'set_label_profile_color' => 'My profile theme color', + 'set_desc_profile_color' => 'This color will be used for your budget grids, calendars, and personal indicators.', + 'set_title_pwd' => '🔒 Change Password', + 'set_label_cur_pwd' => 'Current password', + 'set_label_new_pwd' => 'New password', + 'set_label_confirm_pwd' => 'Confirm', + 'set_btn_edit' => 'Edit', + 'set_title_family' => '🏠 My Family Space', + 'set_label_family_name' => 'Space name', + 'set_desc_invite' => 'Invitation code — share it to invite someone', + 'set_title_copy' => 'Click to copy', + 'set_msg_copied' => '✓ Copied!', + 'set_btn_new_code' => '🔄 New code', + 'set_confirm_new_code' => 'Regenerate code? The old one will be invalidated.', + 'set_desc_register_link' => 'Registration link:', + 'set_title_members' => 'Members', + 'set_badge_admin' => 'Admin', + 'set_title_attached' => '🧸 Attached Profiles', + 'set_desc_attached' => 'Members managed by the household (Children, Nannies, Relatives) without direct access.', + 'role_unknown' => 'Unknown', + 'role_child' => '👶 Child', + 'role_helper' => '💼 Helper', + 'role_relative' => '👵 Relative', + 'set_confirm_del_profile' => 'Permanently delete this profile?', + 'set_empty_attached' => 'No attached profiles.', + 'set_label_firstname' => 'First name', + 'set_label_role' => 'Role', + 'set_label_color' => 'Color', + 'set_link_admin' => '→ Administration Panel', + 'set_success_color' => 'Color updated!', + 'error_network' => 'Network error', + // ========================================== // HOME / INDEX // ========================================== @@ -171,6 +253,27 @@ return [ 'set_care_modes' => 'Common childcare arrangements', 'set_add_care_mode' => 'Ajouter un modeAdd a mode', 'btn_save' => 'Save', + 'settings_profile_added' => 'Profile of %s added successfully.', + 'settings_err_name_required' => 'First name is required.', + 'settings_attached_profiles_title' => 'Attached Profiles', + 'settings_attached_profiles_desc' => 'Household members (Children, Nannies, Relatives) without direct access.', + 'settings_no_attached_profiles' => 'No attached profiles.', + 'label_firstname' => 'First Name', + 'placeholder_firstname_ex' => 'e.g., Pol, Carole...', + 'label_role' => 'Role', + 'role_child_icon' => '👶 Child', + 'role_helper_icon' => '💼 Helper', + 'role_relative_icon' => '👵 Relative', + 'role_unknown' => 'Unknown', + 'label_color' => 'Color', + 'confirm_delete_profile' => 'Permanently delete this profile?', + 'change_color' => 'Change color', + 'color_updated' => 'Color updated!', + 'set_success_color_profile' => 'Profile color updated.', + 'set_success_color_update' => 'Color updated!', + 'set_desc_profile_color' => 'This color will be used for your budget grids, calendars, and personal indicators.', + 'placeholder_apple_id' => 'name@icloud.com', + 'placeholder_apple_pwd' => 'xxxx-xxxx-xxxx-xxxx', // ========================================== // FAMILY CALENDAR @@ -768,6 +871,8 @@ return [ 'bud_sav_sum_mode_title' => 'Toggle calculator', 'bud_sav_selection' => 'Selection:', 'bud_sav_ph_name' => 'Account name', + 'bud_sav_new_line' => 'New line', +'bud_sav_prompt_new_line' => 'Name of the new savings line:', // JS & Errors 'bud_sav_confirm_delete_month' => 'Are you sure you want to delete all data of %m for %o?', diff --git a/includes/lang/fr.php b/includes/lang/fr.php index 424f81f..51e9339 100644 --- a/includes/lang/fr.php +++ b/includes/lang/fr.php @@ -172,6 +172,109 @@ return [ 'set_care_modes' => 'Modes de garde usuels', 'set_add_care_mode' => 'Ajouter un mode', 'btn_save_config' => 'Enregistrer', + 'settings_profile_added' => 'Profil de %s ajouté avec succès.', + 'settings_err_name_required' => 'Le prénom est obligatoire.', + 'settings_attached_profiles_title' => 'Profils rattachés', + 'settings_attached_profiles_desc' => 'Membres gérés par le foyer (Enfants, Nounous, Proches) n\'ayant pas d\'accès direct.', + 'settings_no_attached_profiles' => 'Aucun profil rattaché.', + 'label_firstname' => 'Prénom', + 'placeholder_firstname_ex' => 'Ex: Pol, Carole...', + 'label_role' => 'Rôle', + 'role_child_icon' => '👶 Enfant', + 'role_helper_icon' => '💼 Intervenant', + 'role_relative_icon' => '👵 Proche', + 'role_unknown' => 'Inconnu', + 'label_color' => 'Couleur', + 'confirm_delete_profile' => 'Supprimer définitivement ce profil ?', + 'change_color' => 'Changer la couleur', + 'color_updated' => 'Couleur mise à jour !', + 'set_success_color_profile' => 'Couleur du profil mise à jour.', + 'set_success_color_update' => 'Couleur mise à jour !', + 'set_desc_profile_color' => 'Cette couleur sera utilisée pour vos grilles de budget, calendriers et indicateurs personnels.', + 'placeholder_apple_id' => 'nom@icloud.com', + 'placeholder_apple_pwd' => 'xxxx-xxxx-xxxx-xxxx', + + // Fichier : includes/lang/fr.php +'error_csrf' => 'Session invalide (CSRF). Rechargez la page.', +'set_err_min_module' => 'Vous devez garder au moins un module actif.', +'set_success_modules' => 'Modules mis à jour avec succès.', +'set_success_lang' => 'Langue mise à jour.', +'set_err_empty_name' => 'Le prénom ne peut pas être vide.', +'set_success_profile' => 'Profil mis à jour avec succès.', +'set_err_wrong_pwd' => 'Mot de passe actuel incorrect.', +'set_err_pwd_length' => 'Le nouveau mot de passe doit faire au moins 6 caractères.', +'set_err_pwd_match' => 'Les mots de passe ne correspondent pas.', +'set_success_pwd' => 'Mot de passe modifié avec succès.', +'set_success_family' => 'Nom de l\'espace mis à jour.', +'set_success_invite' => 'Nouveau code d\'invitation généré.', +'set_err_bg_format' => 'Format non supporté (jpg, png, webp).', +'set_success_bg' => 'Image d\'accueil mise à jour.', +'set_err_upload' => 'Erreur lors de l\'upload.', +'set_success_bg_reset' => 'Image d\'accueil réinitialisée.', +'set_err_db_unavailable' => 'Base famille indisponible.', +'set_err_ios_missing' => 'Merci de renseigner identifiant iCloud, mot de passe d\'app et URL CalDAV.', +'set_success_ios' => 'Connexion calendrier iOS enregistrée.', +'set_success_ios_auto' => ' URL du calendrier détectée automatiquement.', +'set_err_ios_save' => 'Impossible d\'enregistrer la connexion iOS : ', +'set_err_ios_none' => 'Aucune connexion iOS configurée.', +'set_success_ios_test' => 'Connexion iCloud CalDAV valide (HTTP %s).', +'set_err_ios_test' => 'Test connexion échoué (HTTP %s). Vérifiez vos identifiants.', +'set_err_ios_test_fail' => 'Test connexion impossible : ', +'set_success_ios_del' => 'Connexion iOS supprimée.', +'set_success_profile_add' => 'Profil de %s ajouté avec succès.', +'set_err_name_required' => 'Le prénom est obligatoire.', +'set_success_profile_del' => 'Profil supprimé.', +'set_title_page' => '⚙️ Paramètres', +'set_title_lang' => '🌐 Langue / Language', +'set_title_modules' => '🧩 Modules actifs', +'set_desc_modules' => 'Choisissez les modules visibles dans la navigation (partagé avec tous les membres de l\'espace).', +'set_title_ios' => '📱 Intégration Calendrier iOS (CalDAV)', +'set_desc_ios' => 'Configurez ici votre calendrier iCloud pour synchroniser les événements créés dans HouseHub.', +'set_label_apple_id' => 'Identifiant Apple (email iCloud)', +'set_label_apple_pwd' => 'Mot de passe d\'app Apple', +'set_label_apple_url' => 'URL du calendrier CalDAV', +'set_btn_test_ios' => 'Tester la connexion', +'set_btn_disconnect_ios' => 'Déconnecter', +'set_title_bg' => '🖼️ Image d\'accueil', +'set_desc_bg' => 'Photo de fond affichée sur la page d\'accueil (partagée avec tous les membres).', +'set_badge_custom_bg' => 'Image personnalisée', +'set_label_new_bg' => 'Nouvelle image (jpg, png, webp — max 10 Mo)', +'set_btn_reset_bg' => '🔄 Remettre l\'image par défaut', +'set_confirm_reset_bg' => 'Revenir à l\'image par défaut ?', +'set_title_profile' => '👤 Mon profil', +'set_label_username' => 'Nom d\'utilisateur', +'set_label_display_name' => 'Prénom / Pseudo affiché', +'set_label_profile_color' => 'Couleur thématique de mon profil', +'set_desc_profile_color' => 'Cette couleur sera utilisée pour vos grilles de budget, calendriers et indicateurs personnels.', +'set_title_pwd' => '🔒 Changer le mot de passe', +'set_label_cur_pwd' => 'Mot de passe actuel', +'set_label_new_pwd' => 'Nouveau mot de passe', +'set_label_confirm_pwd' => 'Confirmer', +'set_btn_edit' => 'Modifier', +'set_title_family' => '🏠 Mon espace familial', +'set_label_family_name' => 'Nom de l\'espace', +'set_desc_invite' => 'Code d\'invitation — partagez-le pour inviter quelqu\'un', +'set_title_copy' => 'Cliquer pour copier', +'set_msg_copied' => '✓ Copié !', +'set_btn_new_code' => '🔄 Nouveau code', +'set_confirm_new_code' => 'Regénérer le code ? L\'ancien sera invalidé.', +'set_desc_register_link' => 'Lien d\'inscription :', +'set_title_members' => 'Membres', +'set_badge_admin' => 'Admin', +'set_title_attached' => '🧸 Profils rattachés', +'set_desc_attached' => 'Membres gérés par le foyer (Enfants, Nounous, Proches) n\'ayant pas d\'accès direct.', +'role_unknown' => 'Inconnu', +'role_child' => '👶 Enfant', +'role_helper' => '💼 Intervenant', +'role_relative' => '👵 Proche', +'set_confirm_del_profile' => 'Supprimer définitivement ce profil ?', +'set_empty_attached' => 'Aucun profil rattaché.', +'set_label_firstname' => 'Prénom', +'set_label_role' => 'Rôle', +'set_label_color' => 'Couleur', +'set_link_admin' => '→ Panneau d\'administration', +'set_success_color' => 'Couleur mise à jour !', +'error_network' => 'Erreur réseau', // ========================================== // FAMILY CALENDAR @@ -789,6 +892,8 @@ return [ 'bud_sav_sum_mode_title' => 'Activer/Désactiver la calculatrice', 'bud_sav_selection' => 'Sélection :', 'bud_sav_ph_name' => 'Nom du compte', + 'bud_sav_new_line' => 'Nouvelle ligne', +'bud_sav_prompt_new_line' => 'Nom de la nouvelle ligne d\'épargne :', // --- BUDGET : PREVISION --- diff --git a/mockup_epargne.html b/mockup_epargne.html new file mode 100644 index 0000000..815a3ba --- /dev/null +++ b/mockup_epargne.html @@ -0,0 +1,334 @@ + + + + + + Mockup Épargne HouseHub + + + +
+ + + +
+ + +
+
+
Poste / Mois
+
Août 2026
+
Juillet 2026
+
Juin 2026
+
+
+
+ TOTAL BANQUE +
+
+ + € +
+
+ + € +
+
+ + € +
+
+
+
Ecole P&P
+
+ +
+
+ +
+
+ +
+
+
+
Extra casa
+
+ +
+
+ +
+
+ +
+
+
+
Vacances
+
+ +
+
+ +
+
+ +
+
+
+
+ NON ALLOUÉ +
+
+ 1230 € +
+
+ 660 € +
+
+ 699 € +
+
+
+ + + + diff --git a/modules/budget/budget.css b/modules/budget/budget.css index 33fcb4e..cc9c797 100644 --- a/modules/budget/budget.css +++ b/modules/budget/budget.css @@ -2,12 +2,6 @@ /* --- 1. VARIABLES & BASE --- */ .budget-view { - font-family: - "Segoe UI", - system-ui, - -apple-system, - sans-serif; - color: var(--text-main); animation: fadeIn 0.4s ease-out; } @keyframes fadeIn { @@ -37,34 +31,20 @@ letter-spacing: -0.025em; } -/* Thèmes des tableaux */ -.nens-title.theme-pol { - color: #1e3a8a !important; - background: #eaf2ff !important; - border-left: 4px solid #1e3a8a !important; +/* Titre dynamique (Épargne enfants) */ +.nens-title { + margin: 0; + font-size: 1.2rem; + color: var(--owner-color, var(--primary)); + background: color-mix( + in srgb, + var(--owner-color, var(--primary)) 12%, + transparent + ); + border-left: 4px solid var(--owner-color, var(--primary)); border-radius: 0 8px 8px 0; padding: 8px 12px; -} -.nens-table.theme-pol thead th { - background: #f5f9ff !important; - color: #1e3a8a !important; -} -.nens-table.theme-pol { - border-top: 2px solid #bcd3ff !important; -} -.nens-title.theme-pep { - color: #14532d !important; - background: #eaf7ea !important; - border-left: 4px solid #14532d !important; - border-radius: 0 8px 8px 0; - padding: 8px 12px; -} -.nens-table.theme-pep thead th { - background: #f6fdf6 !important; - color: #14532d !important; -} -.nens-table.theme-pep { - border-top: 2px solid #b9e3b9 !important; + display: inline-block; } /* --- 2. NAVIGATION TABS (Pills) --- */ @@ -127,17 +107,10 @@ } /* --- 3. BOUTONS SPÉCIFIQUES & ACTIONS --- */ -.pf-btn { - border-radius: 50px; -} + .btn-icon { background: transparent; border: none; - cursor: pointer; - padding: 6px; - border-radius: var(--radius); - transition: background 0.2s; - font-size: 1.1rem; } .btn-icon:hover { background: #e2e8f0; @@ -201,12 +174,14 @@ left: 0 !important; background: var(--bg-panel) !important; z-index: 20 !important; - border-right: 1px solid var(--bg-page); + border-right: 1px solid var(--border-light); min-width: 150px; + background-clip: padding-box; } th.sticky-col { z-index: 30 !important; background: #f8fafc !important; + background-clip: padding-box; } .cell-amount { @@ -1546,30 +1521,6 @@ body.sum-mode-active .sum-target { } } -/* Le bouton engrenage devient un simple conteneur fixe */ -.btn-header-settings { - position: relative; - background: none; - border: none; - font-size: 1.5rem; - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 5px; - text-decoration: none; - color: inherit; -} - -/* C'est uniquement l'icône à l'intérieur qui tourne ! */ -.gear-icon-anim { - display: inline-block; - transition: transform 0.4s ease-in-out; -} -.btn-header-settings:hover .gear-icon-anim { - transform: rotate(90deg); -} - .alert-dot { display: flex; align-items: center; @@ -1716,10 +1667,6 @@ body.sum-mode-active .sum-target { margin: 0 !important; font-size: 0.85rem !important; } - .prev-salary-table, - .prev-alloc-table, - .pf-table, - .savings-table, .recap-wrapper { display: block !important; width: 100% !important; @@ -1916,3 +1863,907 @@ body.sum-mode-active .sum-target { gap: 12px; } } + +/* ========================================================================== + GRILLE ÉPARGNE (Style Zébré + Inputs originaux + No Spinners) + ========================================================================== */ +.epargne-grid-table { + display: flex; + flex-direction: column; + width: 100%; + min-width: max-content; + background: var(--bg-panel); + border-radius: var(--radius); + box-shadow: var(--shadow); + border: 1px solid var(--border-light); + overflow: hidden; +} + +/* En-tête Sombre & Contrasté */ +.eg-header-row { + display: grid; + grid-template-columns: 180px repeat(var(--cols), minmax(115px, 1fr)); + background: #1e293b; + border-bottom: 2px solid #334155; + color: #ffffff; + text-transform: uppercase; + font-size: 0.8rem; + font-weight: 700; + transition: background 0.2s; +} +.eg-header-row .eg-sticky { + background: #1e293b; + border-right: 2px solid #334155; +} + +/* Lignes classiques & Zébrées */ +.eg-row { + display: grid; + grid-template-columns: 180px repeat(var(--cols), minmax(115px, 1fr)); + border-bottom: 1px solid var(--border-light); + transition: background 0.2s; +} +.eg-row:last-child { + border-bottom: none; +} +.eg-row:nth-child(even) { + background: #f8fafc; +} +.eg-row:nth-child(even) .eg-sticky { + background: #f8fafc; +} +.eg-row:hover, +.eg-row:nth-child(even):hover { + background: #f1f5f9; +} +.eg-row:hover .eg-sticky, +.eg-row:nth-child(even):hover .eg-sticky { + background: #f1f5f9; +} + +/* Cellules */ +.eg-cell { + padding: 8px 10px; + display: flex; + align-items: center; + justify-content: center; + border-right: 1px dashed #e2e8f0; + font-size: 0.95rem; +} +.eg-cell:last-child { + border-right: none; +} +.eg-header-row .eg-cell { + border-right: 1px solid #334155; +} + +/* Colonne figée */ +.eg-sticky { + position: sticky; + left: 0; + z-index: 10; + justify-content: flex-start; + border-right: 2px solid var(--border-light); + background-clip: padding-box; + background: var(--bg-panel); + font-weight: 600; +} + +/* Lignes spéciales (Total & Extras) */ +.eg-total-row { + background: #f0f9ff !important; + border-bottom: 2px solid #bae6fd; + color: #0369a1; +} +.eg-total-row .eg-sticky { + background: #f0f9ff !important; + border-right: 2px solid #bae6fd; +} +.eg-extres-row { + background: #fffbeb !important; + border-top: 2px solid #fde68a; + border-bottom: none; + color: #b45309; +} +.eg-extres-row .eg-sticky { + background: #fffbeb !important; + border-right: 2px solid #fde68a; +} + +/* 🎨 Tes Inputs originaux SANS les flèches (spinners) */ +.eg-input { + width: 75px; + background: transparent; + border: 1px solid transparent; + text-align: center; + padding: 4px; + font-size: 0.95rem; + color: inherit; + border-radius: 6px; + transition: all 0.2s; +} +.eg-input:hover { + background: rgba(0, 0, 0, 0.04); + border-color: #cbd5e1; +} + +/* ========================================================================== + UTILITAIRES & COMPOSANTS EPARGNE (Remplacement des styles en ligne) + ========================================================================== */ +.epargne-header-bar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; +} +.pf-mt-40 { + margin-top: 40px; +} +.pf-card-epargne { + background: var(--bg-panel); + border-radius: 16px; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-light); +} +.pf-empty-dashed { + padding: 30px; + text-align: center; + color: var(--text-muted); + border: 1px dashed var(--border-light); + border-radius: 8px; + margin: 20px; +} + +.month-header-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + width: 100%; +} +.month-header-title { + display: flex; + flex-direction: column; + text-align: center; +} +.text-inherit { + color: inherit; +} +.month-cycle-start { + font-size: 0.75rem; + font-weight: normal; + opacity: 0.8; +} +.month-actions { + justify-content: center; + width: 100%; + display: flex; + gap: 4px; +} + +.btn-danger-soft { + color: var(--danger); + border-color: var(--alert-error-border); + background: var(--alert-error-bg); +} +.btn-danger-soft:hover { + background: var(--danger); + color: white; + border-color: var(--danger); +} + +.eg-cell-content { + display: flex; + align-items: center; + justify-content: center; + gap: 2px; +} +.eg-input-total { + font-weight: bold; + color: var(--owner-color, var(--primary)); + width: 70px; +} +.eg-currency-symbol { + color: var(--owner-color, var(--primary)); + font-weight: bold; + font-size: 0.9rem; +} + +/* Modale Épargne */ +.modal-epargne { + max-width: 600px; + width: 95%; +} +.pf-form-row { + display: flex; + gap: 15px; + margin-bottom: 20px; + flex-wrap: wrap; +} +.pf-input-total { + font-weight: bold; + color: var(--primary); +} + +.ventilation-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; +} +.ventilation-cols { + display: flex; + gap: 10px; + padding: 0 5px 5px 5px; + font-size: 0.8rem; + color: var(--text-muted); + font-weight: 600; +} +.ventilation-list { + max-height: 350px; + overflow-y: auto; + padding-right: 5px; + display: flex; + flex-direction: column; + gap: 10px; +} + +/* Lignes de ventilation dynamiques */ +.ventilation-line { + display: flex; + gap: 10px; + align-items: center; + background: var(--bg-page); + padding: 8px; + border-radius: 8px; + border: 1px solid var(--border-light); +} +.vl-col-name { + flex: 2; +} +.vl-col-base { + width: 100px; +} +.vl-col-adj { + width: 90px; +} +.vl-col-final { + width: 100px; +} +.vl-col-btn { + width: 28px; +} + +.pf-input-sm { + padding: 6px; + font-size: 0.9rem; +} +.bg-white { + background: var(--bg-panel); +} +.vl-input-adj { + color: var(--warning); + font-weight: bold; +} +.vl-input-final { + font-weight: bold; + background: #e0f2fe; + border-color: #bae6fd; + color: #0369a1; +} +.btn-remove-line { + width: 28px; + height: 28px; + border: none; + background: var(--alert-error-bg); + color: var(--danger); + border-radius: 4px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + transition: 0.2s; +} +.btn-remove-line:hover { + background: var(--alert-error-border); +} + +/* ========================================================================== + GRILLE ÉPARGNE (Dynamique Multi-Tenant & Zébrée) + ========================================================================== */ +.epargne-grid-table { + display: flex; + flex-direction: column; + width: 100%; + min-width: max-content; + background: var(--bg-panel); + border-radius: var(--radius); + box-shadow: var(--shadow); + border: 1px solid var(--border-light); + overflow: hidden; +} + +/* En-tête Moderne & Lumineux (Basé sur la couleur du propriétaire) */ +.eg-header-row { + display: grid; + grid-template-columns: 180px repeat(var(--cols), minmax(115px, 1fr)); + background: var(--bg-subtle); + border-bottom: 1px solid var(--border-strong); + border-top: 4px solid var(--owner-color, var(--primary)); /* Ligne d'accent dynamique */ + color: var(--text-muted); + text-transform: uppercase; + font-size: 0.8rem; + font-weight: 700; + transition: background 0.2s; +} +.eg-header-row .eg-sticky { + background: var(--bg-subtle); + border-right: 1px solid var(--border-strong); +} + +/* Lignes classiques & Zébrées */ +.eg-row { + display: grid; + grid-template-columns: 180px repeat(var(--cols), minmax(115px, 1fr)); + border-bottom: 1px solid var(--border-light); + transition: background 0.2s; +} +.eg-row:last-child { + border-bottom: none; +} +.eg-row:nth-child(even) { + background: #f8fafc; +} +.eg-row:nth-child(even) .eg-sticky { + background: #f8fafc; +} +.eg-row:hover, +.eg-row:nth-child(even):hover { + background: #f1f5f9; +} +.eg-row:hover .eg-sticky, +.eg-row:nth-child(even):hover .eg-sticky { + background: #f1f5f9; +} + +/* Cellules */ +.eg-cell { + padding: 8px 10px; + display: flex; + align-items: center; + justify-content: center; + border-right: 1px dashed #e2e8f0; + font-size: 0.95rem; +} +.eg-cell:last-child { + border-right: none; +} +.eg-header-row .eg-cell { + border-right: 1px solid var(--border-strong); +} + +/* Colonne figée */ +.eg-sticky { + position: sticky; + left: 0; + z-index: 10; + justify-content: flex-start; + border-right: 2px solid var(--border-light); + background-clip: padding-box; + background: var(--bg-panel); + font-weight: 600; +} + +/* Lignes spéciales 100% Dynamiques ! */ +.eg-total-row { + background: color-mix( + in srgb, + var(--owner-color, var(--primary)) 8%, + transparent + ) !important; + border-bottom: 2px solid + color-mix(in srgb, var(--owner-color, var(--primary)) 30%, transparent); + color: color-mix(in srgb, var(--owner-color, var(--primary)) 90%, black); +} +.eg-total-row .eg-sticky { + background: color-mix( + in srgb, + var(--owner-color, var(--primary)) 8%, + transparent + ) !important; + border-right: 2px solid + color-mix(in srgb, var(--owner-color, var(--primary)) 30%, transparent); +} +.eg-extres-row { + background: #fffbeb !important; + border-top: 2px solid #fde68a; + border-bottom: none; + color: #b45309; +} +.eg-extres-row .eg-sticky { + background: #fffbeb !important; + border-right: 2px solid #fde68a; +} + +/* 🎨 Inputs originaux SANS les flèches (spinners) */ +.eg-input { + width: 75px; + background: transparent; + border: 1px solid transparent; + text-align: center; + padding: 4px; + font-size: 0.95rem; + color: inherit; + border-radius: 6px; + transition: all 0.2s; + -moz-appearance: textfield !important; + appearance: textfield !important; +} +.eg-input::-webkit-outer-spin-button, +.eg-input::-webkit-inner-spin-button { + -webkit-appearance: none !important; + margin: 0 !important; +} +.eg-input:hover { + background: rgba(0, 0, 0, 0.04); + border-color: #cbd5e1; +} +.eg-input:focus { + background: var(--bg-panel); + border-color: var(--primary); + outline: none; + box-shadow: 0 0 0 3px var(--focus-ring); +} + +/* ========================================================================== + UTILITAIRES & COMPOSANTS EPARGNE + ========================================================================== */ +.epargne-header-bar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; +} +.pf-mt-40 { + margin-top: 40px; +} +.pf-card-epargne { + background: var(--bg-panel); + border-radius: 16px; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-light); +} +.pf-empty-dashed { + padding: 30px; + text-align: center; + color: var(--text-muted); + border: 1px dashed var(--border-light); + border-radius: 8px; + margin: 20px; +} +.pf-btn-sm { + padding: 6px 12px !important; + font-size: 0.85rem !important; + height: auto !important; + width: auto !important; +} + +.month-header-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + width: 100%; +} +.month-header-title { + display: flex; + flex-direction: column; + text-align: center; +} +.text-inherit { + color: inherit; +} +.month-cycle-start { + font-size: 0.75rem; + font-weight: normal; + opacity: 0.8; +} +.month-actions { + justify-content: center; + width: 100%; + display: flex; + gap: 4px; +} + +.btn-danger-soft { + color: var(--danger); + border-color: var(--alert-error-border); + background: var(--alert-error-bg); +} +.btn-danger-soft:hover { + background: var(--danger); + color: white; + border-color: var(--danger); +} + +.eg-cell-content { + display: flex; + align-items: center; + justify-content: center; + gap: 2px; +} +.eg-input-total { + font-weight: bold; + color: var(--owner-color, var(--primary)); + width: 70px; +} +.eg-currency-symbol { + color: var(--owner-color, var(--primary)); + font-weight: bold; + font-size: 0.9rem; +} + +/* Modale Épargne & Ventilation */ +.modal-epargne { + max-width: 600px; + width: 95%; +} +.pf-form-row { + display: flex; + gap: 15px; + margin-bottom: 20px; + flex-wrap: wrap; +} +.pf-input-total { + font-weight: bold; + color: var(--primary); +} + +.ventilation-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; +} +.ventilation-cols { + display: flex; + gap: 10px; + padding: 0 5px 5px 5px; + font-size: 0.8rem; + color: var(--text-muted); + font-weight: 600; +} +.ventilation-list { + max-height: 350px; + overflow-y: auto; + padding-right: 5px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.ventilation-line { + display: flex; + gap: 10px; + align-items: center; + background: var(--bg-page); + padding: 8px; + border-radius: 8px; + border: 1px solid var(--border-light); +} +.vl-col-name { + flex: 2; +} +.vl-col-base { + width: 100px; +} +.vl-col-adj { + width: 90px; +} +.vl-col-final { + width: 100px; +} +.vl-col-btn { + width: 28px; +} + +.pf-input-sm { + padding: 6px; + font-size: 0.9rem; +} +.bg-white { + background: var(--bg-panel); +} +.vl-input-adj { + color: var(--warning); + font-weight: bold; +} +.vl-input-final { + font-weight: bold; + background: #e0f2fe; + border-color: #bae6fd; + color: #0369a1; +} +.btn-remove-line { + width: 28px; + height: 28px; + border: none; + background: var(--alert-error-bg); + color: var(--danger); + border-radius: 4px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + transition: 0.2s; +} +.btn-remove-line:hover { + background: var(--alert-error-border); +} + +/* --- 15. SUIVI MENSUEL (REFACTORING STRICT) --- */ +.bud-summary-card { + background: var(--bg-panel); + padding: 20px; + border-radius: 16px; + box-shadow: var(--shadow-sm); + margin-bottom: 24px; + border: 1px solid var(--border-light); + position: relative; +} +.bud-closed-banner { + position: absolute; + top: 0; + left: 0; + right: 0; + background: var(--bg-subtle); + padding: 5px; + text-align: center; + font-size: 0.8rem; + font-weight: bold; + color: var(--text-muted); + border-radius: 16px 16px 0 0; + border-bottom: 1px solid var(--border-light); +} +.bud-header-group { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 20px; +} +.bud-header-title-wrapper { + display: flex; + align-items: center; + gap: 15px; +} +.bud-header-title { + margin: 0; + font-size: 1.3rem; + color: var(--text-main); + text-transform: capitalize; +} +.bud-toolbar { + display: flex; + gap: 10px; + flex-wrap: wrap; + align-items: center; +} +.bud-btn-lock { + background: linear-gradient(135deg, #10b981, #059669); + padding: 6px 12px; + height: auto; + width: auto; + font-size: 0.85rem; + border: none; + color: white; +} +.bud-kpi-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 15px; + margin-bottom: 25px; +} +.bud-kpi-card { + padding: 15px; + background: var(--bg-page); + border-radius: 12px; + position: relative; + border: 1px solid var(--border-light); +} +.bud-kpi-card--danger { + background: var(--bg-danger-soft); + border-color: var(--border-danger-soft); +} +.bud-kpi-label { + font-size: 0.85rem; + color: var(--text-muted); + margin-bottom: 4px; +} +.bud-kpi-label--danger { + color: var(--danger); + display: flex; + justify-content: space-between; + align-items: center; +} +.bud-kpi-value { + font-size: 1.4rem; + font-weight: 700; + color: var(--text-main); +} +.bud-kpi-value--danger { + color: var(--danger); +} +.bud-kpi-edit-btn { + position: absolute; + top: 12px; + right: 12px; + background: var(--bg-panel); + border: 1px solid var(--border-strong); + border-radius: 6px; + padding: 4px 8px; + cursor: pointer; + font-size: 0.8rem; + color: var(--text-muted); + transition: background 0.2s; +} +.bud-kpi-edit-btn:hover { + background: var(--bg-subtle); +} +.bud-pending-toggle { + background: none; + border: none; + cursor: pointer; + font-size: 1rem; + padding: 0; + filter: grayscale(1); + opacity: 0.7; + transition: opacity 0.2s; +} +.bud-pending-toggle:hover { + opacity: 1; +} +.bud-pending-list { + margin-top: 12px; + padding-top: 12px; + border-top: 1px dashed var(--border-danger-soft); + font-size: 0.8rem; + color: var(--danger); +} +.bud-pending-item { + display: flex; + justify-content: space-between; + margin-bottom: 6px; +} +.bud-scale-wrapper { + margin-top: 65px; + margin-bottom: 75px; + position: relative; + font-family: inherit; +} +.bud-scale-track { + position: relative; + height: 24px; + background: var(--border-light); + border-radius: 12px; + width: 100%; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); +} +.bud-scale-zero { + position: absolute; + left: 0; + height: 100%; + background: var(--bg-danger-soft); + border-radius: 12px 0 0 12px; +} +.bud-scale-bar { + position: absolute; + height: 100%; + background: repeating-linear-gradient( + 45deg, + var(--warning), + var(--warning) 10px, + #f59e0b 10px, + #f59e0b 20px + ); + transition: width 0.5s ease-out; +} +.bud-scale-bar--danger { + background: repeating-linear-gradient( + 45deg, + var(--danger), + var(--danger) 10px, + #dc2626 10px, + #dc2626 20px + ); + border-radius: 12px 0 0 12px; + opacity: 0.95; +} +.bud-scale-marker { + position: absolute; + width: 2px; + z-index: 10; +} +.bud-scale-marker--zero { + background: var(--text-muted); + top: -5px; + height: 35px; +} +.bud-scale-marker--actual { + background: var(--text-main); + top: -15px; + height: 40px; + width: 3px; + z-index: 15; +} +.bud-scale-marker--theo { + top: 24px; + height: 30px; + width: 3px; + z-index: 12; +} +.bud-scale-marker--max { + background: var(--border-strong); +} + +.bud-scale-label { + position: absolute; + font-size: 0.85rem; + font-weight: 800; + white-space: nowrap; +} +.bud-scale-label--zero { + color: var(--text-muted); + top: 32px; + transform: translateX(-50%); +} +.bud-scale-label--actual { + color: var(--text-main); + top: -35px; + transform: translateX(-50%); + font-size: 0.8rem; +} +.bud-scale-label--theo { + top: 54px; + transform: translateX(-50%); +} +.bud-scale-label--max { + color: var(--text-muted); + cursor: help; +} + +.bud-categories-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 24px; +} +.bud-expense-table { + width: 100%; + border-collapse: collapse; + font-size: 0.85rem; +} +.bud-expense-row { + border-bottom: 1px solid var(--bg-page); +} +.bud-expense-date { + padding: 10px 15px; + color: var(--text-muted); +} +.bud-expense-label { + padding: 10px 5px; + font-weight: 500; +} +.bud-expense-amount { + padding: 10px 15px; + text-align: right; + font-weight: 600; +} +.bud-expense-actions { + width: 70px; + padding-right: 10px; + text-align: right; + white-space: nowrap; +} diff --git a/modules/budget/includes/api/save-savings.php b/modules/budget/includes/api/save-savings.php index 8dfcc4f..3f4f10e 100644 --- a/modules/budget/includes/api/save-savings.php +++ b/modules/budget/includes/api/save-savings.php @@ -20,14 +20,14 @@ if ($action === 'update_single_entry') { $cat = $_POST['category'] ?? ''; $owner = $_POST['owner'] ?? ''; $amount = (float)($_POST['amount'] ?? 0); + $forceInsert = !empty($_POST['force_insert']); try { - if ($amount == 0 && $cat !== 'TOTAL_BANQUE') { - // Si on met à 0 une ligne (autre que le total), on supprime l'entrée pour garder la base propre + // On supprime la ligne si elle est à 0, SAUF si on demande explicitement son initialisation (force_insert) + if ($amount == 0 && $cat !== 'TOTAL_BANQUE' && !$forceInsert) { $stmt = $pdo->prepare("DELETE FROM pf_savings WHERE month_date=? AND owner=? AND category=?"); $stmt->execute([$month, $owner, $cat]); } else { - // Sinon on insère ou on met à jour $stmt = $pdo->prepare("INSERT INTO pf_savings (month_date, owner, category, amount) VALUES (?, ?, ?, ?) ON DUPLICATE KEY UPDATE amount = VALUES(amount)"); $stmt->execute([$month, $owner, $cat, $amount]); } diff --git a/modules/budget/views/epargne.php b/modules/budget/views/epargne.php index d6a04b6..8f84971 100644 --- a/modules/budget/views/epargne.php +++ b/modules/budget/views/epargne.php @@ -2,24 +2,24 @@ // modules/budget/views/epargne.php // --- 🧠 CONFIGURATION AGNOSTIQUE DES MEMBRES (MULTI-TENANT) --- -$stmtPeople = $pdo->query("SELECT name, role FROM pf_people ORDER BY id ASC"); +$stmtPeople = $pdo->query("SELECT name, role, color FROM pf_people ORDER BY id ASC"); $familyParents = []; $familyKids = []; +$personColors = []; while ($row = $stmtPeople->fetch(PDO::FETCH_ASSOC)) { $role = strtolower(trim($row['role'] ?? '')); + $personColors[$row['name']] = $row['color'] ?? '#3b82f6'; if ($role === 'parent') { $familyParents[] = $row['name']; } elseif ($role === 'nounou' || $role === 'helper') { - // On ignore la nounou dans l'épargne continue; } else { $familyKids[] = $row['name']; } } -// Sécurité anti-page blanche si la BDD est mal configurée if (empty($familyParents)) $familyParents = ['Parent 1', 'Parent 2']; $requestedOwner = $_GET['owner'] ?? (!empty($familyKids) ? 'KIDS' : ($familyParents[0] ?? 'KIDS')); @@ -46,10 +46,9 @@ function getMonthName($dateString) {
- - + @@ -81,181 +80,174 @@ function getMonthName($dateString) { $months = array_slice($months, 0, 7); sort($allCategories); - $ownerTextClass = 'txt-global'; - // 🔄 CORRECTION ICI : Création d'un nom "safe" sans espace pour les classes CSS $safeOwnerCls = htmlspecialchars(str_replace(' ', '_', $currentOwner), ENT_QUOTES); + $ownerColor = $personColors[$currentOwner] ?? '#1e293b'; ?> -
-
- -

+
+
+ +

-
+
+ + + -
-
+
-
+

- - - - - - - - - - - - - - - - - - - - - - - - + + + - - - - - - - -
-
-
- - " . sprintf(tr('bud_sav_from_date'), $cStart) . ""; - } - ?> -
-
- - -
+
+ +
+
+ +
+
+
+ + " . sprintf(tr('bud_sav_from_date'), $cStart) . ""; + } + ?>
-
-
- - € +
+ +
-
-
- -
-
- € -
+
+
+ +
+
+ + € +
+
+ +
+ + +
+
+ +
+ +
+ +
+ + +
+
+ +
+ € +
+ +
+
-
-
-

- +
+
+

+
-
+ -
-
+
+
-
+
- +
-
+
-
+
-

- +

+
- +
-
-
-
-
-
-
+
+
+
+
+
+
-
-
+
-
- - +
+ +
@@ -272,7 +264,6 @@ function getMonthName($dateString) {
\ No newline at end of file