ebene/production
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

valider gabarit

Browse Source
This commit is contained in:
KONE SOREL 2026-02-02 17:41:50 +00:00
parent 5538f3b182
commit 9f4722285a
6 changed files with 1690 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

890
Bootstrap_new/css/style_moderne.css
View File

@ -1,102 +1,826 @@
/* --- Structure Globale --- */
/* ==========================================================================
STYLE MODERNE - PORTAL GESTIONNAIRE
Couleur thème: #0088cf
Couleur fond: #f6f9ff
========================================================================== */
:root {
--primary-color: #0088cf;
--sidebar-bg: #2c3e50;
--main-bg: #f6f9ff;
--primary-color: #0088cf;
--primary-dark: #0066a6;
--primary-light: #4da6e0;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #17a2b8;
--light-color: #f8f9fa;
--dark-color: #343a40;
--body-bg: #f6f9ff;
--sidebar-bg: #ffffff;
--header-bg: #ffffff;
--card-bg: #ffffff;
--border-color: #e0e6ef;
--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--border-radius: 0.375rem;
--border-radius-lg: 0.5rem;
--transition: all 0.3s ease;
}
/* ==========================================================================
RESET & BASE
========================================================================== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background-color: var(--main-bg);
font-family: 'Open Sans', sans-serif;
font-family: 'Segoe UI', 'Open Sans', sans-serif;
background-color: var(--body-bg);
color: #333;
font-size: 0.875rem;
line-height: 1.5;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#main {
transition: all 0.3s;
min-height: calc(100vh - 60px);
/* ==========================================================================
HEADER
========================================================================== */
.header {
background: var(--header-bg) !important;
box-shadow: var(--shadow-sm);
border-bottom: 1px solid var(--border-color);
height: 60px;
padding: 0 1.5rem;
z-index: 1030;
position: fixed;
top: 0;
left: 0;
right: 0;
}
/* --- Fil d'Ariane & Onglets --- */
.breadcrumb-container .breadcrumb {
border: none;
.logo {
font-weight: 700;
font-size: 1.25rem;
color: var(--primary-color);
text-decoration: none;
display: flex;
align-items: center;
}
.sub-nav-link {
text-decoration: none;
color: #6c757d;
font-size: 0.85rem;
font-weight: 600;
border-bottom: 3px solid transparent;
transition: all 0.2s;
.logo img {
height: 32px;
margin-right: 0.75rem;
}
.sub-nav-link:hover, .active-tab {
color: var(--primary-color) !important;
border-bottom: 3px solid var(--primary-color) !important;
background: rgba(0, 136, 207, 0.05);
.logo span {
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* --- Chatbot & Contexte (Droite) --- */
.chatbot-trigger {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--primary-color);
color: white;
border: none;
z-index: 1060;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
/* ==========================================================================
NOTIFICATIONS
========================================================================== */
.badge-number {
position: absolute;
top: -5px;
right: -5px;
min-width: 18px;
height: 18px;
font-size: 0.65rem;
padding: 0.15rem 0.35rem;
border-radius: 50%;
background: var(--danger-color) !important;
border: 2px solid white;
}
.pulse {
position: absolute;
width: 100%; height: 100%;
border-radius: 50%;
background: var(--primary-color);
opacity: 0.6;
animation: pulse-animation 2s infinite;
z-index: -1;
}
/* ==========================================================================
SIDEBAR
========================================================================== */
@keyframes pulse-animation {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.6); opacity: 0; }
}
.context-sidebar {
position: fixed;
top: 60px;
right: -350px;
width: 320px;
height: calc(100vh - 60px);
background: #f8faff;
z-index: 1050;
transition: all 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
display: flex;
flex-direction: column;
border-left: 1px solid #e0e6ed;
}
.context-sidebar.active { right: 0; }
.section-label {
font-size: 10px;
font-weight: 800;
color: #8e9db5;
text-transform: uppercase;
margin-bottom: 5px;
display: block;
}
/* --- Sidebar Gauche --- */
.sidebar {
width: 250px;
background-color: var(--sidebar-bg);
min-height: 100vh;
background: var(--sidebar-bg);
box-shadow: var(--shadow-md);
width: 260px;
transition: var(--transition);
z-index: 1020;
position: fixed;
top: 60px;
left: 0;
bottom: 0;
overflow-y: auto;
}
.toggle-sidebar .sidebar { margin-left: -250px; }
.sidebar-nav {
padding: 1rem 0;
}
.nav-item {
margin-bottom: 0.25rem;
}
.nav-link {
color: #495057;
padding: 0.75rem 1.5rem;
border-radius: 0;
border-left: 3px solid transparent;
transition: var(--transition);
font-weight: 500;
display: block;
text-decoration: none;
}
.nav-link:hover {
background-color: rgba(0, 136, 207, 0.05);
color: var(--primary-color);
border-left-color: var(--primary-color);
}
.nav-link.active-main,
.nav-link.active-submenu {
background-color: rgba(0, 136, 207, 0.1);
color: var(--primary-color);
border-left-color: var(--primary-color);
font-weight: 600;
}
.nav-link i {
width: 20px;
text-align: center;
margin-right: 0.75rem;
color: var(--primary-color);
}
.nav-content {
background-color: rgba(0, 136, 207, 0.03);
padding: 0.5rem 0;
border-left: 2px solid var(--border-color);
display: none;
}
.nav-content.show {
display: block;
}
.nav-content a {
padding-left: 3.5rem !important;
font-size: 0.8125rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* ==========================================================================
MAIN CONTENT
========================================================================== */
.main {
padding: 1.5rem;
margin-left: 260px;
margin-top: 60px;
transition: var(--transition);
min-height: calc(100vh - 60px);
flex: 1;
}
/* ==========================================================================
BREADCRUMB
========================================================================== */
.breadcrumb {
background: white;
border-radius: var(--border-radius);
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
display: flex;
flex-wrap: wrap;
list-style: none;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
content: ">";
color: var(--secondary-color);
padding: 0 0.5rem;
font-weight: normal;
}
.breadcrumb-item a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}
.breadcrumb-item a:hover {
color: var(--primary-dark);
text-decoration: underline;
}
.breadcrumb-item.active {
color: var(--primary-color);
font-weight: 600;
}
/* ==========================================================================
SECONDARY NAVIGATION (TABS)
========================================================================== */
.nav-link-sub {
transition: all 0.3s ease;
border-right: 1px solid var(--border-color);
padding: 1rem 1.5rem;
display: block;
text-decoration: none;
color: #495057;
font-weight: 500;
min-width: 150px;
white-space: nowrap;
text-align: center;
}
.nav-link-sub:hover {
background-color: rgba(0, 136, 207, 0.05);
transform: translateY(-2px);
}
.nav-link-sub.active {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white !important;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0, 136, 207, 0.2);
}
.nav-link-sub:last-child {
border-right: none;
}
/* ==========================================================================
TABLES
========================================================================== */
.table-modern {
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
width: 100%;
margin-bottom: 1rem;
border-collapse: collapse;
}
.table-modern thead th {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
border: none;
padding: 0.75rem 1rem;
font-weight: 600;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: left;
}
.table-modern tbody tr {
transition: var(--transition);
border-bottom: 1px solid var(--border-color);
}
.table-modern tbody tr:last-child {
border-bottom: none;
}
.table-modern tbody tr:hover {
background-color: rgba(0, 136, 207, 0.05);
transform: translateY(-1px);
}
.table-modern tbody td {
padding: 0.75rem 1rem;
border-top: 1px solid var(--border-color);
vertical-align: middle;
}
/* ==========================================================================
CARDS
========================================================================== */
.card-modern {
border: none;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
transition: var(--transition);
background: var(--card-bg);
overflow: hidden;
margin-bottom: 1.5rem;
}
.card-modern:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card-modern .card-header {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
border: none;
padding: 1rem 1.25rem;
font-weight: 600;
}
.card-modern .card-body {
padding: 1.25rem;
}
/* ==========================================================================
BUTTONS
========================================================================== */
.btn-modern {
border-radius: var(--border-radius);
padding: 0.5rem 1.25rem;
font-weight: 500;
transition: var(--transition);
border: none;
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
}
.btn-primary-modern {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
}
.btn-primary-modern:hover {
background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* ==========================================================================
FORMS
========================================================================== */
.form-control-modern {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.5rem 0.75rem;
transition: var(--transition);
font-size: 0.875rem;
width: 100%;
background-color: white;
}
.form-control-modern:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(0, 136, 207, 0.25);
outline: none;
}
/* ==========================================================================
CONTEXT BAR (BARRE LATERALE D)
========================================================================== */
#barre_laterale_d {
background: white;
width: 300px;
border-left: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
padding: 1.5rem;
overflow-y: auto;
position: fixed;
right: 0;
top: 60px;
height: calc(100vh - 60px);
z-index: 1010;
transition: transform 0.3s ease;
transform: translateX(100%); /* Ajouté pour l'animation */
}
#barre_laterale_d.active {
transform: translateX(0); /* Ajouté pour l'animation */
}
#barre_laterale_d .card {
border: none;
box-shadow: var(--shadow-sm);
border-radius: var(--border-radius);
margin-bottom: 1rem;
}
/* Bouton toggle pour la barre de contexte */
.btn-context-toggle {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
border-radius: 20px 0 0 20px;
padding: 12px 8px;
transition: right 0.3s ease;
background: var(--primary-color);
color: white;
border: none;
cursor: pointer;
}
.btn-context-toggle:hover {
right: 5px;
background: var(--primary-dark);
}
/* Quand la barre est active, cacher le bouton toggle */
#barre_laterale_d.active ~ .btn-context-toggle {
display: none;
}
/* ==========================================================================
MODALS
========================================================================== */
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
}
/* ==========================================================================
ANIMATIONS
========================================================================== */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.3s ease-out;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
}
}
/* ==========================================================================
SCROLLBAR
========================================================================== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* ==========================================================================
STATUS INDICATORS
========================================================================== */
.status-active {
color: var(--success-color);
background-color: rgba(40, 167, 69, 0.1);
padding: 0.25rem 0.5rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 500;
display: inline-block;
}
.status-inactive {
color: var(--secondary-color);
background-color: rgba(108, 117, 125, 0.1);
padding: 0.25rem 0.5rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 500;
display: inline-block;
}
.status-warning {
color: var(--warning-color);
background-color: rgba(255, 193, 7, 0.1);
padding: 0.25rem 0.5rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 500;
display: inline-block;
}
/* ==========================================================================
LOADERS & OVERLAYS
========================================================================== */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(3px);
}
.loader-modern {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.is-loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--primary-color);
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
.badge-notification {
animation: pulse 2s infinite;
}
/* ==========================================================================
ICONS
========================================================================== */
.icon-circle {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: white;
margin-right: 1rem;
}
/* ==========================================================================
RESPONSIVE DESIGN
========================================================================== */
@media (max-width: 1199px) {
.main {
margin-left: 0;
padding: 1rem;
}
.sidebar {
transform: translateX(-100%);
}
.sidebar.show {
transform: translateX(0);
}
.toggle-sidebar .sidebar {
transform: translateX(0);
}
.toggle-sidebar .main {
margin-left: 260px;
}
}
@media (max-width: 768px) {
.header {
padding: 0 1rem;
}
.main {
padding: 1rem;
}
.breadcrumb {
font-size: 0.8rem;
padding: 0.5rem;
}
.table-modern {
font-size: 0.8rem;
}
#barre_laterale_d {
width: 280px;
}
.nav-link-sub {
min-width: 120px;
padding: 0.75rem 1rem;
font-size: 0.8rem;
}
}
@media (max-width: 576px) {
.logo span {
display: none;
}
.nav-link-sub {
min-width: 100px;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
}
#barre_laterale_d {
width: 100%;
}
}
/* ==========================================================================
UTILITY CLASSES
========================================================================== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.d-none {
display: none !important;
}
.d-flex {
display: flex !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-grow-1 {
flex-grow: 1 !important;
}
.min-vh-100 {
min-height: 100vh !important;
}
.mt-4 {
margin-top: 1.5rem !important;
}
.mb-4 {
margin-bottom: 1.5rem !important;
}
.p-0 {
padding: 0 !important;
}
.p-3 {
padding: 1rem !important;
}
.px-2 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.shadow-sm {
box-shadow: var(--shadow-sm) !important;
}
.rounded-pill {
border-radius: 50rem !important;
}
.bg-white {
background-color: white !important;
}
.bg-light {
background-color: var(--light-color) !important;
}
.text-primary {
color: var(--primary-color) !important;
}
.text-muted {
color: var(--secondary-color) !important;
}
.fw-bold {
font-weight: 700 !important;
}
.fw-medium {
font-weight: 500 !important;
}
.small {
font-size: 0.875rem !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.align-items-center {
align-items: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.overflow-auto {
overflow: auto !important;
}
.animate__animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animate__fadeIn {
animation-name: fadeIn;
}
.animate__fadeInDown {
animation-name: fadeInDown;
}
.animate__bounceIn {
animation-name: bounceIn;
}

317
Vue/contexte.php
View File

@ -1,49 +1,278 @@
<button class="chatbot-trigger shadow-lg" id="showSideNav">
<div class="pulse"></div>
<i class="fa-solid fa-id-card"></i>
<span class="badge rounded-pill bg-danger badge-msg-count" id="badge_notif_msg" style="display:none">0</span>
<!-- ======= Context Bar ======= -->
<input type="hidden" id="numeroClient_C" name="numeroClient_C" value="<?= $this->nettoyer($_SESSION['numeroClient_C']) ?>">
<input type="hidden" id="codeGcAssureur_C" name="codeGcAssureur_C" value="<?= $this->nettoyer($_SESSION['codeGcAssureur_C']) ?>">
<!-- Toggle button -->
<button class="btn btn-primary btn-context-toggle shadow-lg"
id="showSideNav"
title="<?= _("Afficher le contexte") ?>"
style="position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1000; border-radius: 20px 0 0 20px; padding: 12px 8px;">
<i class="fas fa-chevron-left me-1"></i>
<i class="fas fa-info-circle"></i>
</button>
<div id="barre_laterale_d" class="context-sidebar shadow-lg">
<div class="context-header d-flex align-items-center justify-content-between p-3 border-bottom bg-white">
<span class="fw-bold text-primary small"><i class="fa fa-cog fa-spin me-2"></i>CONTEXTE</span>
<button class="btn-close-context border-0 bg-transparent" id="hideSideNav"><i class="fa-solid fa-angle-double-right fs-4"></i></button>
</div>
<div class="context-body p-3 overflow-auto">
<label class="section-label"><?= _("Garant & Souscripteur") ?></label>
<div class="card border-0 shadow-sm p-2 mb-3">
<button class="btn btn-sm btn-light text-start mb-1" onclick="javascript:afficher_garant('<?=$this->nettoyer($_SESSION['codeGcAssureur_C']);?>');">
<i class="fas fa-user-shield me-2"></i><?= $_SESSION['nomGcAssureur_C'] ?>
</button>
<button class="btn btn-sm btn-light text-start" onclick="javascript:afficher_client_id();">
<i class="fas fa-user-tie me-2"></i><?= $this->nettoyer($_SESSION['nomClient_C']) ?>
</button>
<!-- Context Panel -->
<div id="barre_laterale_d" class="context-panel shadow-lg">
<div class="context-header bg-primary text-white py-3 px-4 d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<i class="fas fa-cog fa-spin me-2"></i>
<h6 class="mb-0 fw-bold"><?= _("Contexte d'utilisation") ?></h6>
</div>
<label class="section-label"><?= _("Contrat") ?></label>
<button class="btn btn-primary btn-sm w-100 mb-3" onclick="javascript:afficher_police_id();">
<i class="fa fa-file-text me-2"></i><?= $this->nettoyer($_SESSION['numeroPolice_C']) ?>
<button class="btn btn-sm btn-light" id="hideSideNav" title="<?= _("Cacher le contexte") ?>">
<i class="fas fa-times"></i>
</button>
<label class="section-label"><?= _("Bénéficiaire") ?></label>
<div class="card border-0 shadow-sm p-3 text-center mb-3">
<?php if ($_SESSION['faceRegistered_C']=="1" && $_SESSION['idBeneficiaire_C'] > "0"): ?>
<img src="data:image/jpg;base64,<?=$imgData?>" class="rounded-circle mx-auto mb-2 border" style="width: 70px; height: 70px; object-fit: cover;" data-bs-toggle="modal" data-bs-target="#pop_photo">
<?php endif; ?>
<div class="fw-bold small"><?= $this->nettoyer($_SESSION['beneficiaire_C']) ?></div>
<div class="text-muted small mb-2">ID: <?= $this->nettoyer($_SESSION['numeroBeneficiaire_C']) ?></div>
<button class="btn btn-info btn-sm w-100 text-white" onclick="javascript:afficher_beneficiaire_id();">Profil complet</button>
</div>
<button class="btn btn-outline-primary btn-sm w-100 mb-2" onclick="javascript:gerer_messagerie();">
<?= _("Messages") ?> <i class="fa fa-comments ms-1"></i>
</button>
<div class="text-center mt-3">
<a href="javascript:change_password();" class="text-decoration-none">
<img src="Bootstrap_new/images/pwd.png" style="width:25px;" class="mb-1"><br>
<span class="small text-muted">Sécurité</span>
</a>
</div>
</div>
</div>
<div class="context-body p-3" style="max-height: calc(100vh - 180px); overflow-y: auto;">
<!-- Garant -->
<div class="context-card card border-0 shadow-sm mb-3">
<div class="card-header bg-light py-2 px-3">
<h6 class="mb-0">
<i class="fas fa-user-shield me-2 text-primary"></i>
<?= _("Garant") ?>
</h6>
</div>
<div class="card-body p-3">
<div class="d-flex align-items-center mb-2">
<div class="badge bg-primary bg-opacity-10 text-primary rounded-pill me-2 py-1 px-2">
<?= $this->nettoyer($_SESSION['codeGcAssureur_C']) ?>
</div>
<a href="javascript:afficher_garant('<?= $this->nettoyer($_SESSION['codeGcAssureur_C']) ?>');"
class="ms-auto small text-primary text-decoration-none">
<i class="fas fa-external-link-alt"></i>
</a>
</div>
<button class="btn btn-outline-primary btn-sm w-100 text-start py-2"
onclick="javascript:afficher_garant('<?= $this->nettoyer($_SESSION['codeGcAssureur_C']) ?>');"
title="<?= _("Afficher le Garant") ?>">
<div class="d-flex align-items-center">
<i class="fas fa-building me-2"></i>
<span class="text-truncate"><?= $_SESSION['nomGcAssureur_C'] ?? '' ?></span>
</div>
</button>
</div>
</div>
<!-- Souscripteur -->
<div class="context-card card border-0 shadow-sm mb-3">
<div class="card-header bg-light py-2 px-3">
<h6 class="mb-0">
<i class="fas fa-user-tie me-2 text-primary"></i>
<?= _("Souscripteur") ?>
</h6>
</div>
<div class="card-body p-3">
<div class="d-flex align-items-center mb-2">
<div class="badge bg-primary bg-opacity-10 text-primary rounded-pill me-2 py-1 px-2">
<?= $this->nettoyer($_SESSION['numeroClient_C']) ?>
</div>
<a href="javascript:afficher_client_id();"
class="ms-auto small text-primary text-decoration-none">
<i class="fas fa-external-link-alt"></i>
</a>
</div>
<button class="btn btn-outline-primary btn-sm w-100 text-start py-2"
onclick="javascript:afficher_client_id();">
<div class="d-flex align-items-center">
<i class="fas fa-user me-2"></i>
<span class="text-truncate"><?= $this->nettoyer($_SESSION['nomClient_C']) ?></span>
</div>
</button>
</div>
</div>
<!-- Police en cours -->
<div class="context-card card border-0 shadow-sm mb-3">
<div class="card-body p-3">
<button class="btn btn-primary btn-sm w-100 text-start py-2 mb-2"
onclick="javascript:afficher_police_id();"
title="<?= _("Couverture") . ": " . dateLang($_SESSION['dateEffet_C'], $_SESSION['lang']) . ' - ' . dateLang($_SESSION['dateEcheance_C'], $_SESSION['lang']) ?>">
<div class="d-flex align-items-center">
<i class="fas fa-file-contract me-2"></i>
<div class="flex-grow-1">
<div class="fw-bold small"><?= _("Police en cours") ?></div>
<div class="x-small"><?= $this->nettoyer($_SESSION['numeroPolice_C']) ?></div>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</button>
<!-- Statistiques -->
<div class="stats-container bg-light rounded p-2 mb-3">
<div class="row text-center g-2">
<div class="col-4">
<div class="bg-white rounded p-2">
<div class="fw-bold text-primary"><?= format_N($_SESSION['ndAdh_C']) ?></div>
<div class="x-small text-muted"><?= _("Fam.") ?></div>
</div>
</div>
<div class="col-4">
<div class="bg-white rounded p-2">
<div class="fw-bold text-success"><?= format_N($_SESSION['ndDep_C']) ?></div>
<div class="x-small text-muted"><?= _("Dép.") ?></div>
</div>
</div>
<div class="col-4">
<div class="bg-white rounded p-2">
<div class="fw-bold text-info"><?= format_N($_SESSION['ndActif_C']) ?></div>
<div class="x-small text-muted"><?= _("Bén.") ?></div>
</div>
</div>
</div>
</div>
<!-- Famille en cours -->
<button class="btn btn-outline-primary btn-sm w-100 text-start py-2 mb-2"
onclick="javascript:afficher_adherent_id();"
title="<?= _("Voir les membres de famille") ?>">
<div class="d-flex align-items-center">
<i class="fas fa-users me-2"></i>
<div class="flex-grow-1">
<div class="fw-bold small"><?= _("Famille") ?> <?= $this->nettoyer($_SESSION['numeroAdherent_C']) ?></div>
<div class="x-small text-truncate"><?= substr($this->nettoyer($_SESSION['adherent_C']), 0, 25) ?></div>
</div>
</div>
</button>
<!-- Bénéficiaire en cours -->
<button class="btn btn-outline-primary btn-sm w-100 text-start py-2"
onclick="javascript:afficher_beneficiaire_id();"
title="<?= _("Couverture") . ": " . dateLang($_SESSION['dateEntreeBeneficiaire_C'], $_SESSION['lang']) . ' - ' . dateLang($_SESSION['dateEcheancePolice_C'], $_SESSION['lang']) ?>">
<div class="d-flex align-items-center">
<i class="fas fa-user me-2"></i>
<div class="flex-grow-1">
<div class="fw-bold small"><?= _("Bénéficiaire") ?> <?= $this->nettoyer($_SESSION['numeroBeneficiaire_C']) ?></div>
<div class="x-small text-truncate"><?= substr($this->nettoyer($_SESSION['beneficiaire_C']), 0, 25) ?></div>
</div>
</div>
</button>
</div>
</div>
<!-- Photo du bénéficiaire -->
<?php if ($_SESSION['faceRegistered_C'] == "1" && $_SESSION['idBeneficiaire_C'] > "0"): ?>
<div class="context-card card border-0 shadow-sm mb-3">
<div class="card-body p-3 text-center">
<div class="photo-wrapper mb-2">
<img src="data:image/jpg;base64,<?= $imgData ?>"
class="img-fluid rounded-circle shadow-sm border border-3 border-primary"
style="width: 120px; height: 120px; object-fit: cover; cursor: pointer;"
data-bs-toggle="modal"
data-bs-target="#pop_photo"
alt="<?= _("Photo du bénéficiaire") ?>"
title="<?= _("Cliquer pour agrandir") ?>">
</div>
<div class="small text-muted"><?= _("Photo du bénéficiaire") ?></div>
</div>
</div>
<?php endif; ?>
<!-- Dernières polices ouvertes -->
<div class="context-card card border-0 shadow-sm mb-3">
<div class="card-header bg-light py-2 px-3">
<h6 class="mb-0">
<i class="fas fa-history me-2 text-primary"></i>
<?= _("Dernières polices") ?>
</h6>
</div>
<div class="card-body p-3">
<div class="list-group list-group-flush">
<?php foreach ($_SESSION['contextPolice'] as $index => $contextPolice): ?>
<?php if ($index < 5): ?>
<a href="javascript:selectionner_police(<?= $contextPolice['idPolice'] ?>,'<?= $contextPolice['numeroPolice'] ?>');afficher_police_id();"
class="list-group-item list-group-item-action border-0 py-2 px-0">
<div class="d-flex align-items-center">
<div class="badge bg-primary bg-opacity-10 text-primary rounded-circle me-2 d-flex align-items-center justify-content-center"
style="width: 24px; height: 24px; font-size: 0.7rem;">
<?= $index + 1 ?>
</div>
<div class="flex-grow-1">
<div class="small fw-medium"><?= htmlspecialchars($contextPolice['libellePolice']) ?></div>
<div class="x-small text-muted"><?= $contextPolice['numeroPolice'] ?></div>
</div>
<i class="fas fa-chevron-right text-muted"></i>
</div>
</a>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
</div>
<!-- Actions rapides -->
<div class="context-card card border-0 shadow-sm mb-3">
<div class="card-body p-3">
<div class="row g-2">
<div class="col-6">
<button class="btn btn-outline-primary btn-sm w-100 py-2"
onclick="javascript:gerer_messagerie();">
<i class="fas fa-comments me-1"></i>
<span class="d-none d-md-inline"><?= _("Messages") ?></span>
</button>
</div>
<div class="col-6">
<button class="btn btn-outline-primary btn-sm w-100 py-2"
onclick="javascript:change_password();">
<i class="fas fa-key me-1"></i>
<span class="d-none d-md-inline"><?= est_anglophone() ? 'Password' : 'MDP' ?></span>
</button>
</div>
</div>
</div>
</div>
<!-- Mode cotation -->
<?php if ($_SESSION['modeDevis'] == "1"): ?>
<div class="context-card card border-0 shadow-sm mb-3 border-warning">
<div class="card-header bg-warning bg-opacity-10 py-2 px-3">
<h6 class="mb-0 text-warning">
<i class="fas fa-file-invoice me-2"></i>
<?= _("GESTION DES COTATIONS") ?>
</h6>
</div>
<div class="card-body p-3">
<!-- Prospect -->
<button class="btn btn-outline-warning btn-sm w-100 text-start py-2 mb-2"
onclick="javascript:afficher_client_d_id();">
<div class="d-flex align-items-center">
<i class="fas fa-user-clock me-2"></i>
<div class="flex-grow-1">
<div class="fw-bold small"><?= _("Prospect") ?></div>
<div class="x-small"><?= $this->nettoyer($_SESSION['numeroClient_d_C']) ?></div>
</div>
</div>
</button>
<div class="small text-muted mb-3 text-truncate">
<?= substr($this->nettoyer($_SESSION['nomClient_d_C']), 0, 30) ?>
</div>
<!-- Police devis -->
<button class="btn btn-warning btn-sm w-100 text-start py-2"
onclick="javascript:afficher_police_d_id_init();">
<div class="d-flex align-items-center">
<i class="fas fa-file-invoice-dollar me-2"></i>
<div class="flex-grow-1">
<div class="fw-bold small"><?= _("Devis") ?></div>
<div class="x-small"><?= $this->nettoyer($_SESSION['numeroPolice_d_C']) ?></div>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</button>
</div>
</div>
<?php endif; ?>
</div>
<div class="context-footer bg-light py-2 px-3 border-top">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">© <?= date('Y') ?> INTER SANTÉ</small>
<div id="nbMessagesNonLus" class="badge bg-danger rounded-pill">
<i class="fas fa-envelope me-1"></i>
<span id="msgNonLus">0</span>
</div>
</div>
<input type="hidden" id="timer" name="timer" value="0">
</div>
</div>
<!-- End Context Bar -->

340
Vue/gabarit.php
View File

@ -1,136 +1,187 @@
<?php
require_once 'gabarit_queries.php';
$gabary = new Gabary();
$_SESSION['firstLevelMenu']='';
$current_url = $_SERVER['REQUEST_URI'];
$elements = explode("/", $current_url);
$activeLink = $elements[1];
$fullPath = $gabary->get_full_path($activeLink);
$fullPath = explode("\ ", $fullPath);
$activeLevel1 = $activeLink;
$activeLevel2 = sizeof($fullPath)>1?$fullPath[1]:'';
$activeLevel3 =sizeof($fullPath)>2?$fullPath[2]:'';
$activeLevel4 = sizeof($fullPath)>3?$fullPath[3]:'';
$activeLevel5 = sizeof($fullPath)>4?$fullPath[4]:'';
$_SESSION['firstLevelMenu']=$activeLink;
const MAX_COMPANY_NAME_LENGTH = 20;
require_once 'gabarit_queries.php';
$gabary = new Gabary();
$companyDisplayName = htmlspecialchars($_SESSION['nomSociete'], ENT_QUOTES);
$modeDev = $_SESSION['modeDev_C'];
$imgData = $_SESSION['photoAssureCrypte'];
// Active menu tracking
$_SESSION['firstLevelMenu'] = '';
$current_url = $_SERVER['REQUEST_URI'];
$elements = explode("/", $current_url);
$activeLink = $elements[1];
$fullPath = $gabary->get_full_path($activeLink);
$fullPath = explode("\ ", $fullPath);
$activeLevel1 = $activeLink;
$activeLevel2 = sizeof($fullPath) > 1 ? $fullPath[1] : '';
$activeLevel3 = sizeof($fullPath) > 2 ? $fullPath[2] : '';
$activeLevel4 = sizeof($fullPath) > 3 ? $fullPath[3] : '';
$activeLevel5 = sizeof($fullPath) > 4 ? $fullPath[4] : '';
$_SESSION['firstLevelMenu'] = $activeLink;
const MAX_COMPANY_NAME_LENGTH = 20;
$companyDisplayName = htmlspecialchars($_SESSION['nomSociete'], ENT_QUOTES);
$modeDev = $_SESSION['modeDev_C'];
$imgData = $_SESSION['photoAssureCrypte'];
// Get breadcrumb info
$infovue = $gabary->getInfosVue($_SESSION['vue']);
$descriptionVue = est_anglophone() ? $infovue['DescriptionEng'] : $infovue['Description'];
$titreRetour = est_anglophone() ? $infovue['titreRetourEng'] : $infovue['titreRetour'];
$retourVue = $infovue['lienRetour'];
?>
<!doctype html>
<html lang="fr">
<!DOCTYPE html>
<html lang="<?= est_anglophone() ? 'en' : 'fr' ?>" class="h-100">
<?php require_once 'head.php'; ?>
<body class="d-flex flex-column min-vh-100">
<body class="d-flex flex-column min-vh-100 bg-light">
<!-- Header -->
<?php include 'header.php'; ?>
<!-- Main Container -->
<div class="d-flex flex-grow-1" style="margin-top: 60px;">
<!-- Sidebar -->
<?php include 'sidebar.php'; ?>
<!-- Main Content -->
<main id="main" class="main flex-grow-1 p-0">
<input class="sr-only" type="text" id="vue" value="<?= $_SESSION['vue'] ?? "" ?>">
<input class="sr-only" type="text" id="racineWeb" value="<?= $racineWeb ?>">
<input class="sr-only" type="text" id="dureeSession" value="<?= $_SESSION['dureeSession'] ?>">
<div class="container-fluid p-3">
<?php
$infovue = $gabary->getInfosVue($_SESSION['vue']);
$descriptionVue = est_anglophone() ? $infovue['DescriptionEng'] : $infovue['Description'];
$titreRetour = est_anglophone() ? $infovue['titreRetourEng'] : $infovue['titreRetour'];
$retourVue = $infovue['lienRetour'];
?>
<!-- Hidden session variables -->
<input type="hidden" id="vue" value="<?= $_SESSION['vue'] ?? '' ?>">
<input type="hidden" id="racineWeb" value="<?= $racineWeb ?>">
<input type="hidden" id="dureeSession" value="<?= $_SESSION['dureeSession'] ?>">
<input type="hidden" id="nomSociete" value="<?= htmlspecialchars($_SESSION['nomSociete']) ?>">
<input type="hidden" id="modeDev" value="<?= $modeDev ?>">
<div class="container-fluid p-3 animate__animated animate__fadeIn">
<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-4 px-2">
<ol class="breadcrumb bg-white shadow-sm rounded-pill py-2 px-4 border-0">
<li class="breadcrumb-item">
<a href="<?= $retourVue; ?>" class="text-decoration-none text-muted small">
<i class="fa fa-chevron-left me-1"></i> <?= $titreRetour ?>
<a href="<?= $retourVue; ?>"
class="text-decoration-none text-muted small d-flex align-items-center">
<i class="fas fa-arrow-left me-2"></i>
<?= $titreRetour ?>
</a>
</li>
<li class="breadcrumb-item active text-primary fw-bold small text-uppercase" aria-current="page">
<li class="breadcrumb-item active text-primary fw-bold small text-uppercase"
aria-current="page">
<i class="fas fa-angle-right me-2 text-muted"></i>
<?= $descriptionVue ?>
</li>
</ol>
</nav>
<?php if (sizeof($menusvue) > 0): ?>
<!-- Secondary Navigation -->
<?php if (isset($menusvue) && sizeof($menusvue) > 0): ?>
<div class="tabs-container mb-4 px-2">
<div class="card border-0 shadow-sm rounded-3">
<div class="d-flex overflow-auto nav-scroller">
<div class="card border-0 shadow-sm rounded-3 overflow-hidden">
<div class="d-flex overflow-auto">
<?php foreach ($menusvue as $menu):
$activeClass = (basename($_SERVER['REQUEST_URI']) == basename($menu['lienMenu'])) ? 'active-tab' : '';
$isActive = (basename($_SERVER['REQUEST_URI']) == basename($menu['lienMenu']));
$activeClass = $isActive ? 'active bg-primary text-white' : 'text-dark';
?>
<a class="sub-nav-link p-3 <?= $activeClass ?>" href="<?= $menu['lienMenu']; ?>">
<a class="nav-link-sub p-3 <?= $activeClass ?>"
href="<?= $menu['lienMenu']; ?>"
style="min-width: 150px; white-space: nowrap; border-right: 1px solid #e9ecef;">
<?php if (!empty($menu['icone'])): ?>
<i class="<?= $menu['icone'] ?> me-2"></i>
<?php endif; ?>
<?= $menu['libeleMenu'] ?>
<?php if ($isActive): ?>
<span class="badge bg-white text-primary ms-2 rounded-pill">
<i class="fas fa-check"></i>
</span>
<?php endif; ?>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endif; ?>
<!-- Main Content Area -->
<section class="section main-dashboard px-2">
<div id="contenu" class="animate__animated animate__fadeIn">
<div id="div_test_gabarit"></div>
<?= $contenu ?>
</div>
</section>
</div>
</div>
</main>
<!-- Context Panel -->
<?php include 'contexte.php'; ?>
</div>
<!-- ======= Modals ======= -->
<!-- Unread Messages Modal -->
<div class="modal fade animate__animated animate__fadeInDown" id="popmessagerie" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content border-0 shadow-lg">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title fw-bold">
<i class="fa fa-envelope-open-text me-2"></i> <?= _("Messages non lus") ?>
<i class="fas fa-envelope-open-text me-2"></i>
<?= _("Messages non lus") ?>
<span id="modalMsgCount" class="badge bg-white text-primary ms-2"></span>
</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<div id="div_messagerie" class="min-vh-25">
<div class="modal-body p-0">
<div id="div_messagerie" class="p-4" style="max-height: 400px; overflow-y: auto;">
<div class="text-center py-5 text-muted">
<i class="fas fa-envelope-open fa-3x mb-3"></i>
<p class="mb-0"><?= _("Aucun message non lu") ?></p>
</div>
</div>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal"><?= _("Fermer") ?></button>
<div class="modal-footer border-top">
<button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">
<?= _("Fermer") ?>
</button>
<button type="button" class="btn btn-primary rounded-pill px-4" onclick="javascript:gerer_messagerie();">
<i class="fas fa-cog me-2"></i>
<?= _("Gérer les messages") ?>
</button>
</div>
</div>
</div>
</div>
<!-- New Message Alert Modal -->
<div class="modal fade animate__animated animate__bounceIn" id="popderniermessagerie" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content border-0 shadow-lg">
<div class="modal-header border-0 pb-0">
<h5 class="modal-title fw-bold text-danger">
<i class="fa fa-bell me-2"></i> <?= _("Nouveau Message") ?>
<i class="fas fa-bell me-2"></i>
<?= _("Nouveau Message") ?>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="div_dernier_messagerie" class="alert alert-info border-0 shadow-sm">
</div>
<div class="modal-body p-4">
<div id="div_dernier_messagerie" class="alert alert-info border-0 shadow-sm rounded-3">
<!-- Content loaded dynamically -->
</div>
</div>
<div class="modal-footer border-0">
<button id="btn_close_pop_dernier_messagerie" type="button" class="btn btn-danger w-100 rounded-pill" data-bs-dismiss="modal"><?= _("Fermer") ?></button>
<button id="btn_close_pop_dernier_messagerie" type="button"
class="btn btn-danger w-100 rounded-pill py-2" data-bs-dismiss="modal">
<i class="fas fa-times me-2"></i>
<?= _("Fermer") ?>
</button>
</div>
</div>
</div>
</div>
<!-- Photo Modal -->
<div class="modal fade" id="pop_photo" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-transparent border-0">
@ -138,63 +189,188 @@
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center p-0">
<img src="data:image/jpg;base64,<?=$imgData?>" class="img-fluid rounded shadow-lg border border-5 border-white" style="max-height: 80vh;">
<h4 class="text-white mt-3 fw-bold"><?= $_SESSION['nomBeneficiaire_C'] ?></h4>
<?php if (!empty($imgData) && $_SESSION['faceRegistered_C'] == "1"): ?>
<img src="data:image/jpg;base64,<?= $imgData ?>"
class="img-fluid rounded shadow-lg border border-5 border-white"
style="max-height: 80vh; object-fit: contain;"
alt="<?= _("Photo du bénéficiaire") ?>">
<h4 class="text-white mt-3 fw-bold"><?= $_SESSION['nomBeneficiaire_C'] ?? '' ?></h4>
<?php else: ?>
<div class="bg-white rounded shadow-lg p-5">
<i class="fas fa-user-slash fa-4x text-muted"></i>
<h4 class="mt-3 text-muted"><?= _("Photo non disponible") ?></h4>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<!-- Hidden Trigger Buttons -->
<button id="btn_pop_messagerie" type="button" class="d-none" data-bs-toggle="modal" data-bs-target="#popmessagerie"></button>
<button id="btn_pop_dernier_messagerie" type="button" class="d-none" data-bs-toggle="modal" data-bs-target="#popderniermessagerie"></button>
<!-- ======= Scripts ======= -->
<!-- Core Libraries -->
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/jquery-ui.js"></script>
<script src="Bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="Bootstrap_new/datatables/datatable.min.js"></script>
<!-- Charts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- PDF Generation -->
<script src="Js/html2pdf.js"></script>
<!-- Select2 -->
<script src="Bootstrap_new/js/select2.min.js"></script>
<!-- Timer -->
<script src="Bootstrap/js/timer.jquery.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Toastr -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!-- Datepicker by language -->
<?php if (est_anglophone()) : ?>
<script src="Js/datepicker-eng.js"></script>
<?php else: ?>
<script src="Js/datepicker-fr.js"></script>
<?php endif; ?>
<!-- Core Functions -->
<script src="Js/fonctions.js?ver=<?= date('Y.m.d.H') ?>"></script>
<script src="<?= $_SESSION['dossierSociete'] . '/Js/societe.js' ?>"></script>
<!-- Animation Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.js"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/your-kit-code.js" crossorigin="anonymous"></script>
<script src="Js/fonctions.js?ver=2025.11.29.09"></script>
<script src="<?= $_SESSION['dossierSociete'].'/Js/societe.js' ?>"></script>
<!-- Script d'initialisation amélioré -->
<script type="text/javascript">
$(document).ready(function() {
// Initialisation des tooltips Bootstrap
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Gestion du sidebar
$('.toggle-sidebar-btn').on('click', function() {
$('body').toggleClass('toggle-sidebar');
$('#sidebar').toggleClass('collapsed');
$('.main').toggleClass('expanded');
});
// Gestion de la barre de contexte
$("#showSideNav").click(function() {
$("#barre_laterale_d").addClass("active");
$(this).fadeOut(200);
// Animation smooth
$('body').css('transition', 'margin-right 0.3s ease');
$('body').css('margin-right', '300px');
});
$("#hideSideNav").click(function() {
$("#barre_laterale_d").removeClass("active");
$("#showSideNav").fadeIn(200);
$('body').css('margin-right', '0');
});
// Synchronisation du badge de notifications
function syncBadge() {
var count = $("#msgNonLus").val();
if(count > 0) { $("#badge_notif_msg").text(count).show(); }
else { $("#badge_notif_msg").hide(); }
var count = parseInt($("#msgNonLus").val()) || 0;
var badge = $("#badge_notif_msg");
if(count > 0) {
badge.text(count).show();
// Animation si nouveau message
if(count > parseInt(badge.data('last-count') || 0)) {
badge.addClass('animate__animated animate__pulse animate__fast');
setTimeout(() => {
badge.removeClass('animate__animated animate__pulse animate__fast');
}, 1000);
}
badge.data('last-count', count);
} else {
badge.hide();
}
}
// Vérifier toutes les 2 secondes
setInterval(syncBadge, 2000);
syncBadge(); // Première exécution
// Rafraîchir le gabarit
raffraichier_gabarit();
// Timer pour le rafraîchissement des messages
$('#timer').timer({
duration: '60s',
callback: function() { raffraichier_messagerie(); },
callback: function() {
raffraichier_messagerie();
syncBadge();
},
repeat: true
});
// Toastr configuration
toastr.options = {
"closeButton": true,
"progressBar": true,
"positionClass": "toast-top-right",
"timeOut": "5000",
"extendedTimeOut": "1000"
};
// Auto-focus sur les champs de recherche
if ($('input[autofocus]').length) {
setTimeout(function() {
$('input[autofocus]').focus().select();
}, 100);
}
// Prévenir la perte de données non sauvegardées
$(window).on('beforeunload', function() {
if ($('.unsaved-changes').length > 0) {
return "Vous avez des modifications non sauvegardées. Voulez-vous vraiment quitter ?";
}
});
});
// Fonction pour marquer les changements non sauvegardés
function markUnsaved() {
$('form').addClass('unsaved-changes');
}
// Démarrer l'auto-sauvegarde si besoin
function startAutosave(selector, interval = 30000) {
setInterval(function() {
if ($(selector).hasClass('unsaved-changes')) {
$(selector).submit();
}
}, interval);
}
</script>
<!-- AJAX Container -->
<div id="div_ajaxgabarit" class="d-none"></div>
<!-- Global Loading Overlay -->
<div id="globalLoading" class="position-fixed top-0 start-0 w-100 h-100 bg-white bg-opacity-75 d-flex justify-content-center align-items-center" style="z-index: 9999; display: none !important;">
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden"><?= _("Chargement...") ?></span>
</div>
</div>
</body>
</html>

93
Vue/head.php
View File

@ -1,30 +1,73 @@
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="INTER SANTÉ - Gestionnaire de santé">
<meta name="author" content="INTER SANTÉ">
<base href="<?= $racineWeb ?>">
<!-- Favicon -->
<link rel="icon" href="Bootstrap_new/images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="Bootstrap_new/images/apple-touch-icon.png">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Vendor CSS -->
<link href="Bootstrap/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="Bootstrap/vendor/quill/quill.snow.css" rel="stylesheet">
<link href="Bootstrap_new/css/datatables.min.css" rel="stylesheet">
<link href="Bootstrap_new/css/select2.min.css" rel="stylesheet">
<!-- SweetAlert2 -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.min.css" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Styles personnalisés -->
<link href="Bootstrap_new/css/style_moderne.css?ver=<?= date('Y.m.d.H') ?>" rel="stylesheet">
<base href="<?= $racineWeb ?>" >
<!-- Animate.css pour les animations -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- Favicons -->
<link rel="icon" href="Bootstrap_new/images/favicon.ico"/>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<title><?= $_SESSION['vue'] ?></title>
<!-- Google Fonts -->
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="Bootstrap/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="Bootstrap/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="Bootstrap_new/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="Bootstrap_new/datatables/datatable.min.css" crossorigin="anonymous">
<link href="Bootstrap_new/css/style_moderne.css?ver=2026.02.02.02" rel="stylesheet">
<!-- Libraries -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<!-- Toastr -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<title><?= htmlspecialchars($_SESSION['vue']) ?> - INTER SANTÉ</title>
<!-- Scripts de prévention de clic droit en mode production -->
<script type="text/javascript">
var modeDev = <?= json_encode($modeDev) ?>;
if (modeDev != "1") {
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
toastr.warning('<?= _("Le clic droit est désactivé en mode production") ?>');
});
// Prévention des raccourcis clavier
document.addEventListener('keydown', function(e) {
// Ctrl+U (afficher le code source)
if (e.ctrlKey && e.keyCode === 85) {
e.preventDefault();
toastr.warning('<?= _("Cette fonctionnalité est désactivée") ?>');
}
// F12 (outils de développement)
if (e.keyCode === 123) {
e.preventDefault();
toastr.warning('<?= _("Les outils de développement sont désactivés") ?>');
}
});
}
</script>
</head>

217
Vue/header.php
View File

@ -1,36 +1,189 @@
<?php
$styleHeader = "";
$labelTest = "";
if($_SESSION['bdTests_C'] == "1"){
<body class="bg-light">
<?php
$style = "";
$test = "";
$colorTests = "";
$flag = est_anglophone() ? 'england.png' : 'france.png';
$alt = est_anglophone() ? 'English' : 'Français';
$lib = est_anglophone() ? 'En' : 'Fr';
if ($_SESSION['bdTests_C'] == "1") {
$colorTests = $_SESSION['colorTests'];
$styleHeader = "border-bottom: 4px solid $colorTests;";
$labelTest = '<span class="badge bg-danger ms-2">'. _("MODE TEST") .'</span>';
$style = "background: linear-gradient(90deg, $colorTests, lighten($colorTests, 10%)) !important;";
$test = "MODE TEST";
}
$flag = (est_anglophone()) ? 'england.png' : 'france.png';
?>
<header id="header" class="header fixed-top d-flex align-items-center bg-white shadow-sm" style="<?= $style ?>">
<div class="d-flex align-items-center justify-content-between px-3">
<a class="logo d-flex align-items-center text-decoration-none">
<img src="Bootstrap_new/images/new/favicon.png" alt="Logo" style="max-height: 35px;"/>
<span class="d-none d-lg-block ms-2 fw-bold text-primary">INTER SANTE</span>
</a>
<i class="bi bi-list toggle-sidebar-btn fs-3 ms-4 cursor-pointer" style="cursor:pointer"></i>
</div>
<nav class="header-nav ms-auto px-3">
<ul class="d-flex align-items-center list-unstyled mb-0">
<li class="nav-item dropdown pe-3">
<a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width: 35px; height: 35px;">
<?php echo $_SESSION['userInitials_C']; ?>
</div>
?>
<!-- ======= Header ======= -->
<header id="header" class="header fixed-top d-flex align-items-center shadow-sm" style="<?= $style ?>">
<div class="container-fluid d-flex align-items-center justify-content-between">
<!-- Logo et bouton menu -->
<div class="d-flex align-items-center">
<a class="logo d-flex align-items-center text-decoration-none me-4">
<img src="Bootstrap_new/images/new/favicon.png" alt="Logo INTER SANTÉ" class="img-fluid">
<span class="d-none d-lg-block fw-bold fs-5">INTER SANTÉ</span>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<li class="dropdown-header"><h6><?= $_SESSION['utilisateur_C']; ?></h6></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item d-flex align-items-center" href="javascript:change_password();"><i class="bi bi-gear"></i><span>Paramètres</span></a></li>
<button class="toggle-sidebar-btn btn btn-link text-dark d-lg-none">
<i class="fas fa-bars fs-5"></i>
</button>
</div>
<!-- Navigation droite -->
<nav class="header-nav ms-auto">
<ul class="d-flex align-items-center list-unstyled mb-0">
<!-- Mode Test -->
<?php if ($test): ?>
<li class="nav-item me-3">
<a class="nav-link p-2 badge bg-warning text-dark fw-bold"
href="javascript:void(0);"
data-bs-toggle="tooltip"
title="<?= _("Mode test activé") ?>">
<i class="fas fa-vial me-1"></i> <?= $test ?>
</a>
</li>
<?php endif; ?>
<!-- Notifications -->
<li class="nav-item dropdown me-3">
<a class="nav-link position-relative p-2"
href="#"
data-bs-toggle="dropdown"
aria-expanded="false"
data-bs-toggle="tooltip"
title="<?= _("Notifications") ?>">
<i class="fas fa-bell fs-5 text-secondary"></i>
<span id="span_notification"
class="badge bg-danger badge-number">0</span>
</a>
<div class="dropdown-menu dropdown-menu-end border-0 shadow-lg p-0" style="width: 320px;">
<div class="dropdown-header bg-primary text-white py-3 px-4 rounded-top">
<h6 class="mb-0">
<i class="fas fa-bell me-2"></i>
<?= _("Notifications") ?>
<span id="notification-count" class="badge bg-light text-dark ms-2">0</span>
</h6>
</div>
<div class="dropdown-body p-0" style="max-height: 300px; overflow-y: auto;">
<div id="notification-list" class="list-group list-group-flush">
<div class="text-center py-4 text-muted">
<i class="fas fa-bell-slash fa-2x mb-2"></i>
<p class="mb-0"><?= _("Aucune notification") ?></p>
</div>
</div>
</div>
<div class="dropdown-footer bg-light py-2 px-3 text-center border-top">
<a href="javascript:pop_messagerie();" class="btn btn-sm btn-outline-primary">
<i class="fas fa-envelope me-1"></i> <?= _("Voir toutes les notifications") ?>
</a>
</div>
</div>
</li>
<!-- Société -->
<li class="nav-item me-3">
<a class="nav-link p-2 d-flex align-items-center"
href="javascript:infos_entite();"
data-bs-toggle="tooltip"
title="<?= _("Gestionnaire d'assurance santé") ?>">
<div class="me-2">
<img src="<?= $_SESSION['lienLogo'] ?>"
alt="<?= htmlspecialchars($companyDisplayName) ?>"
class="img-fluid rounded"
style="max-height: 36px;">
</div>
<div class="d-none d-md-block">
<span class="fw-bold text-dark"><?= $companyDisplayName ?></span>
</div>
</a>
</li>
<!-- Langue -->
<li class="nav-item dropdown me-3">
<a class="nav-link p-2 d-flex align-items-center"
href="#"
data-bs-toggle="dropdown"
data-bs-toggle="tooltip"
title="<?= _("Changer la langue") ?>">
<img src="Bootstrap_new/images/<?= $flag ?>"
alt="<?= $alt ?>"
width="24"
class="rounded-circle border">
<span class="d-none d-md-block ms-2 fw-medium"><?= $lib ?></span>
<i class="fas fa-chevron-down ms-1 small"></i>
</a>
<div class="dropdown-menu dropdown-menu-end border-0 shadow-sm">
<a class="dropdown-item d-flex align-items-center py-2"
href="javascript:changer_langue();">
<i class="fas fa-exchange-alt me-2 text-primary"></i>
<span><?= _("Changer de langue") ?></span>
</a>
</div>
</li>
<!-- Aide -->
<li class="nav-item me-3">
<a class="nav-link p-2"
href="Guideutilisation/"
data-bs-toggle="tooltip"
title="<?= _("Guide d'utilisation") ?>">
<i class="fas fa-question-circle fs-5 text-primary"></i>
</a>
</li>
<!-- Profil utilisateur -->
<li class="nav-item dropdown">
<a class="nav-link p-2 d-flex align-items-center"
href="#"
data-bs-toggle="dropdown"
data-bs-toggle="tooltip"
title="<?= _("Profil utilisateur") ?>">
<div class="initials-circle bg-primary text-white d-flex align-items-center justify-content-center me-2"
style="width: 36px; height: 36px; border-radius: 50%; font-weight: 600;">
<?= $_SESSION['userInitials_C'] ?>
</div>
<div class="d-none d-lg-block">
<div class="fw-medium text-dark small"><?= $_SESSION['utilisateur_C'] ?></div>
<div class="text-muted x-small"><?= $_SESSION['profil_C'] ?? '' ?></div>
</div>
<i class="fas fa-chevron-down ms-2 small"></i>
</a>
<div class="dropdown-menu dropdown-menu-end border-0 shadow-lg" style="min-width: 220px;">
<div class="dropdown-header bg-light py-3 px-4">
<div class="d-flex align-items-center">
<div class="initials-circle bg-primary text-white d-flex align-items-center justify-content-center me-3"
style="width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; font-weight: 600;">
<?= $_SESSION['userInitials_C'] ?>
</div>
<div>
<div class="fw-bold"><?= $_SESSION['utilisateur_C'] ?></div>
<div class="text-muted small"><?= $_SESSION['profil_C'] ?? '' ?></div>
</div>
</div>
</div>
<div class="dropdown-divider"></div>
<a class="dropdown-item d-flex align-items-center py-2"
href="javascript:change_password();">
<i class="fas fa-user-circle me-3 text-primary"></i>
<span><?= $_SESSION['utilisateur_C'] ?></span>
</a>
<a class="dropdown-item d-flex align-items-center py-2"
href="javascript:void(0);">
<i class="fas fa-cog me-3 text-primary"></i>
<span><?= _("Paramètres") ?></span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item d-flex align-items-center py-2 text-danger"
href="javascript:deconnexion();">
<i class="fas fa-sign-out-alt me-3"></i>
<span><?= _("Déconnexion") ?></span>
</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</nav>
</div>
</header>
<!-- End Header -->

127
Vue/sidebar.php
View File

@ -1,29 +1,100 @@
<aside id="sidebar" class="sidebar shadow-sm">
<ul class="sidebar-nav p-2" id="sidebar-nav">
<?php foreach ($menus as $key0 => $menuParent):
$menuChildren = $gabary->get_menus_by_parent_code($menuParent['vue']);
$hasChild = (sizeof($menuChildren) > 0);
?>
<li class="nav-item mb-1">
<a class="nav-link <?= $hasChild ? 'collapsed' : '' ?> d-flex align-items-center text-white"
<?= $hasChild ? 'data-bs-target="#menu'.$key0.'" data-bs-toggle="collapse"' : '' ?>
href="<?= $hasChild ? '#' : $menuParent['lienMenu'] ?>">
<i class="<?= $menuParent['icone']; ?> me-2"></i>
<span><?= $menuParent['libeleMenu'] ?></span>
<?php if($hasChild): ?><i class="bi bi-chevron-down ms-auto small"></i><?php endif; ?>
</a>
<?php if($hasChild): ?>
<ul id="menu<?= $key0 ?>" class="nav-content collapse list-unstyled ps-4 py-1" data-bs-parent="#sidebar-nav">
<?php foreach ($menuChildren as $menuChild): ?>
<li>
<a href="<?= $menuChild['lienMenu']; ?>" class="text-white-50 text-decoration-none small d-block py-1">
<i class="bi bi-circle me-2" style="font-size: 8px;"></i><?= $menuChild['libeleMenu']; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<!-- ======= Sidebar ======= -->
<aside id="sidebar" class="sidebar shadow-lg">
<div class="sidebar-header py-3 px-4 border-bottom">
<div class="d-flex align-items-center">
<div class="avatar-sm bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3">
<i class="fas fa-user-md text-primary"></i>
</div>
<div>
<h6 class="mb-0 fw-bold"><?= _("Navigation") ?></h6>
<small class="text-muted"><?= _("Portail Gestionnaire") ?></small>
</div>
</div>
</div>
<div class="sidebar-body">
<ul class="sidebar-nav list-unstyled" id="sidebar-nav">
<?php foreach ($menus as $key0 => $menuParent): ?>
<?php $menuChildrenLevelOne = $gabary->get_menus_by_parent_code($menuParent['vue']); ?>
<?php if (sizeof($menuChildrenLevelOne) > 0): ?>
<!-- Menu avec sous-menus -->
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center justify-content-between py-3 px-4
<?= strtolower($menuParent['libeleMenu']) == strtolower($activeLevel1) ? 'active-main' : '' ?>"
data-bs-toggle="collapse"
href="#menu-<?= $menuParent['codeMenu'] . $key0 ?>"
role="button"
aria-expanded="<?= strtolower($menuParent['libeleMenu']) == strtolower($activeLevel1) ? 'true' : 'false' ?>"
aria-controls="menu-<?= $menuParent['codeMenu'] . $key0 ?>">
<div class="d-flex align-items-center">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 36px; height: 36px;">
<i class="<?= $menuParent['icone'] ?> text-primary"></i>
</div>
<span class="fw-medium"><?= $menuParent['libeleMenu'] ?></span>
</div>
<i class="fas fa-chevron-down transition-transform
<?= strtolower($menuParent['libeleMenu']) == strtolower($activeLevel1) ? 'rotate-180' : '' ?>"></i>
</a>
<div class="collapse <?= strtolower($menuParent['libeleMenu']) == strtolower($activeLevel1) ? 'show' : '' ?>"
id="menu-<?= $menuParent['codeMenu'] . $key0 ?>">
<ul class="list-unstyled ps-4 py-2 bg-light rounded">
<?php foreach ($menuChildrenLevelOne as $key1 => $menuChild): ?>
<?php
$link_clean = explode('/', $menuChild['lienMenu'])[0];
$activeLink = $_SESSION['firstLevelMenu'];
?>
<li class="mb-1">
<a class="nav-link-sub d-flex align-items-center py-2 px-3 rounded
<?= $link_clean == $activeLink ? 'active-submenu bg-primary text-white' : 'text-dark' ?>"
href="<?= $menuChild['lienMenu'] ?>">
<i class="fas fa-circle me-2" style="font-size: 0.5rem;"></i>
<span><?= $menuChild['libeleMenu'] ?></span>
<?php if ($link_clean == $activeLink): ?>
<i class="fas fa-arrow-right ms-auto"></i>
<?php endif; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
</li>
<?php else: ?>
<!-- Menu sans sous-menus -->
<li class="nav-item mb-1">
<a class="nav-link d-flex align-items-center py-3 px-4
<?= strtolower($menuParent['libeleMenu']) == strtolower($activeLevel1) ? 'active-main' : '' ?>"
href="<?= $menuParent['lienMenu'] ?>">
<div class="d-flex align-items-center">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 36px; height: 36px;">
<i class="<?= $menuParent['icone'] ?> text-primary"></i>
</div>
<span class="fw-medium"><?= $menuParent['libeleMenu'] ?></span>
</div>
<?php if (strtolower($menuParent['libeleMenu']) == strtolower($activeLevel1)): ?>
<i class="fas fa-arrow-right ms-auto text-primary"></i>
<?php endif; ?>
</a>
</li>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</aside>
<?php endforeach; ?>
</ul>
</div>
<div class="sidebar-footer p-4 border-top bg-light">
<div class="d-grid">
<button class="btn btn-outline-primary d-flex align-items-center justify-content-center py-2"
onclick="javascript:window.open('Guideutilisation/', '_blank');">
<i class="fas fa-question-circle me-2"></i>
<?= _("Aide & Support") ?>
</button>
</div>
<div class="mt-3 text-center">
<small class="text-muted">v<?= $_SESSION['version_C'] ?? '1.0.0' ?></small>
</div>
</div>
</aside>
<!-- End Sidebar -->