This commit is contained in:
KONE SOREL 2026-03-14 13:47:52 +00:00
parent 2fed775d4e
commit ac742dbf13

View File

@ -1,65 +1,91 @@
<div class="page-content">
<div class="header-section mb-4">
<div class="d-flex align-items-center bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
<div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
<i class="fas fa-tags fs-4"></i>
<div class="page-content animate__animated animate__fadeIn">
<div class="header-section mb-3">
<div class="d-flex align-items-center bg-white p-2 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
<div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;">
<i class="fas fa-tags fs-5"></i>
</div>
<div>
<h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Types de Porteur de Risque") ?></h4>
<p class="text-muted small mb-0"><?= _("Configuration des catégories d'entités garantes") ?></p>
<h5 id="titre-page" class="mb-0 fw-bold text-uppercase small"><?= _("Gestion des Types de Garant") ?></h5>
<p class="text-muted mb-0" style="font-size: 0.75rem;"><?= _("Configuration des catégories de porteurs de risque") ?></p>
</div>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<div class="card border-0 shadow-sm">
<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
<div id="table-buttons"></div> <div class="d-flex align-items-center gap-3">
<span class="badge bg-primary-ghost text-primary rounded-pill px-3 py-2 fw-bold" id="badge-total">
0 <?= _("Lignes") ?>
</span>
<button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm fw-bold btn-sm" onclick="addgctypegarant();">
<i class="fas fa-plus-circle me-2"></i><?= _("Nouveau Type") ?>
</button>
</div>
<button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm fw-bold" onclick="addgctypegarant();">
<i class="fas fa-plus-circle me-2"></i><?= _("Nouveau Type") ?>
</button>
</div>
</div>
<div id="div_lister_table">
<div class="text-center p-5 bg-white rounded shadow-sm border border-dashed">
<div class="spinner-border text-primary mb-3" role="status"></div>
<p class="text-muted fw-bold"><?= _("Chargement de la liste...") ?></p>
<div class="table-responsive p-2">
<table id="tableLister" class="table table-hover align-middle mb-0" style="font-size: 9pt;">
<thead class="bg-light">
<tr>
<th class="text-center py-3" width="5%">#</th>
<th class="text-center py-3" width="15%"><?= _("Code") ?></th>
<th class="py-3" width="60%"><?= _("Libellé") ?></th>
<th class="text-center py-3" width="20%"><?= _("Actions") ?></th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
foreach ($typesgarant as $v):
$idData = $this->nettoyer($v['id']);
?>
<tr>
<td class="text-center text-muted fw-bold"><?= ++$i; ?></td>
<td class="text-center">
<code class="fw-bold text-primary bg-light px-2 py-1 rounded"><?= $this->nettoyer($v['codeTypeGarant']); ?></code>
</td>
<td class="fw-bold text-dark text-uppercase"><?= $this->nettoyer($v['libelle']); ?></td>
<td class="text-center">
<button class="btn btn-outline-primary btn-sm rounded-pill px-3 shadow-xs"
type="button"
onclick="editgctypegarant(<?= $idData; ?>);">
<i class="fas fa-edit me-1"></i> <?= _("Modifier") ?>
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<div id="div_add_typegarant" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content border-0 shadow-lg" id="content_add_typegarant">
</div>
</div>
<div id="div_add_typegarant" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" id="content_add_typegarant"></div>
</div>
<div id="div_edit_typegarant" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content border-0 shadow-lg" id="content_edit_typegarant">
</div>
</div>
<div id="div_edit_typegarant" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" id="content_edit_typegarant"></div>
</div>
<style>
.bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
.border-dashed { border-style: dashed !important; border-width: 2px; }
/* Animation pour les modales */
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
transform: scale(0.95);
}
.modal.show .modal-dialog {
transform: scale(1);
}
</style>
<script>
$(document).ready(function() {
// Chargement initial de la liste
if (typeof actualiser_liste_type_garant === 'function') {
actualiser_liste_type_garant();
}
// Initialisation de la table avec votre nouvelle fonction
// On passe false pour garder le tri venant de la base de données
initDataTableReference('#tableLister', 'Liste_Types_Garant', false);
});
</script>
</script>
<style>
.bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
#tableLister thead th {
border-bottom: 2px solid #f1f4f6;
color: #6c757d;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#tableLister tbody tr:hover {
background-color: rgba(33, 46, 83, 0.02) !important;
}
</style>