This commit is contained in:
KONE SOREL 2026-03-11 10:36:06 +00:00
parent d68f0733ce
commit bee3b88c0c
2 changed files with 212 additions and 118 deletions

View File

@ -1,70 +1,128 @@
<form id="formData">
<legend id="titre_formData"><?= _("Ajouter des données") ?></legend>
<table class="table table-responsive table-condensed">
<tbody>
<tr>
<td width="5%" align="center" class="required"><?= _("Nom et Prénoms") ?></td>
<td width="20%"><INPUT class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF" ></td>
<td width="8%" align="center" class="required">Type</td>
<td >
<select name="codeTypeApporteur" id="codeTypeApporteur" class="form-select">
<?= liste_options($typeapp,'',false) ?>
</select>
</td>
<div class="card border-0 shadow-sm border-start border-4 border-primary">
<div class="card-header bg-white py-3 border-bottom">
<h6 class="mb-0 fw-bold text-uppercase text-success small" id="titre_formData">
<i class="fas fa-user-plus me-2"></i><?= _("Ajouter un commercial") ?>
</h6>
</div>
<div class="card-body p-4">
<form id="formData" class="container-fluid p-0">
<div class="row g-3">
<div class="col-md-5">
<label class="form-label fw-bold text-muted small text-uppercase required"><?= _("Nom et Prénoms") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-user text-primary"></i></span>
<input type="text" class="form-control border-2 border-start-0 majuscule fw-bold"
id="libelle" name="libelle" required autocomplete="OFF">
</div>
</div>
<td width="5%" align="center"><?= _("Type Système") ?></td>
<td colspan="5%">
<select name="typeSysteme" id="typeSysteme" class="form-select">
<?= liste_options($ouinonoptionnelle,'0',true) ?>
</select>
</td>
</tr>
<tr>
<td width="5%" align="center"><?= _("Téléphone") ?></td>
<td width="20%"><INPUT class="form-control" TYPE="tel" id="telephone" NAME="telephone"></td>
<td width="5%" align="center">E-mail</td>
<td colspan="3"><INPUT class="form-control" TYPE="email" id="email" NAME="email"></td>
<div class="col-md-4">
<label class="form-label fw-bold text-muted small text-uppercase required"><?= _("Type") ?></label>
<select name="codeTypeApporteur" id="codeTypeApporteur" class="selectpicker form-control border-2 shadow-xs" data-live-search="true" data-container="body">
<?= liste_options($typeapp, '', false) ?>
</select>
</div>
</tr>
<tr>
<td width="5%" align="center"><?= _("Responsable") ?></td>
<td width="20%"><INPUT class="form-control majuscule" TYPE="text" id="nomResponsable" NAME="nomResponsable"></td>
<div class="col-md-3">
<label class="form-label fw-bold text-muted small text-uppercase"><?= _("Type Système") ?></label>
<select name="typeSysteme" id="typeSysteme" class="selectpicker form-control border-2 shadow-xs" data-container="body">
<?= liste_options($ouinonoptionnelle, '0', true) ?>
</select>
</div>
<td width="5%" align="center"><?= _("Mobile Payer") ?></td>
<td width="20%"><INPUT class="form-control" TYPE="number" id="mobilePaiement" NAME="mobilePaiement" value="0" title="<?= _("L'indicatif est obligatoire")?>"></td>
<td width="5%" align="center"><?= _("Déduire Commission") ?></td>
<td colspan="5%">
<select name="deduireComm" id="deduireComm" class="form-select">
<?= liste_options($ouinonoptionnelle,'1',true) ?>
</select>
</td>
</tr>
<tr>
<td width="5%" align="center" class="required"><?= _("Bureau") ?></td>
<td width="50%">
<select name="codeBureau" id="codeBureau" class="form-select" required AUTOCOMPLETE="OFF">
<?= liste_options($bureau,'',false) ?>
</select>
</td>
<td width="5%" align="center"><?= _("Adr. Postale") ?></td>
<td colspan="5%">
<INPUT class="form-control majuscule" TYPE="text" id="adressePost" NAME="adressePost">
</td>
</tr>
<tr>
<td width="5%" align="center"><?= _("Adr. Géo.") ?></td>
<td colspan="5"><INPUT class="form-control majuscule" TYPE="text" id="adresseGeo" NAME="adresseGeo" value=" "></td>
</tr>
</tbody>
</table>
</form>
<div class="col-md-4">
<label class="form-label fw-bold text-muted small text-uppercase"><?= _("Téléphone") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-phone text-muted"></i></span>
<input type="tel" class="form-control border-2 border-start-0" id="telephone" name="telephone">
</div>
</div>
<div class="col-md-8">
<label class="form-label fw-bold text-muted small text-uppercase"><?= _("E-mail") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-envelope text-muted"></i></span>
<input type="email" class="form-control border-2 border-start-0" id="email" name="email">
</div>
</div>
<div class="col-md-5">
<label class="form-label fw-bold text-muted small text-uppercase"><?= _("Responsable") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-user-tie text-muted"></i></span>
<input type="text" class="form-control border-2 border-start-0 majuscule" id="nomResponsable" name="nomResponsable">
</div>
</div>
<div class="col-md-4">
<label class="form-label fw-bold text-muted small text-uppercase required"><?= _("N° Mobile Paiement") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-mobile-alt text-success"></i></span>
<input type="number" class="form-control border-2 border-start-0 fw-bold"
id="mobilePaiement" name="mobilePaiement" value="0" title="<?= _("L'indicatif est obligatoire")?>">
</div>
</div>
<div class="col-md-3">
<label class="form-label fw-bold text-muted small text-uppercase"><?= _("Déduire Comm.") ?></label>
<select name="deduireComm" id="deduireComm" class="selectpicker form-control border-2 shadow-xs" data-container="body">
<?= liste_options($ouinonoptionnelle, '1', true) ?>
</select>
</div>
<div class="col-md-6">
<label class="form-label fw-bold text-muted small text-uppercase required"><?= _("Bureau") ?></label>
<select name="codeBureau" id="codeBureau" class="selectpicker form-control border-2 shadow-xs" data-live-search="true" data-container="body" required>
<?= liste_options($bureau, '', false) ?>
</select>
</div>
<div class="col-md-6">
<label class="form-label fw-bold text-muted small text-uppercase"><?= _("Adresse Postale") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-map-signs text-muted"></i></span>
<input type="text" class="form-control border-2 border-start-0 majuscule" id="adressePost" name="adressePost">
</div>
</div>
<div class="col-md-12">
<label class="form-label fw-bold text-muted small text-uppercase"><?= _("Adresse Géographique") ?></label>
<div class="input-group shadow-xs">
<span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-map-marker-alt text-muted"></i></span>
<input type="text" class="form-control border-2 border-start-0 majuscule" id="adresseGeo" name="adresseGeo">
</div>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
// Initialisation des SelectPickers selon le standard
$('.selectpicker').selectpicker();
// Focus différé de 200ms sur le premier champ
setTimeout(function() {
$('#libelle').focus();
}, 200);
});
</script>
<style>
.border-primary { border-color: #212e53 !important; }
.shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.form-control.border-2 { border-width: 2px !important; }
.input-group-text.border-2 { border-width: 2px !important; }
.majuscule { text-transform: uppercase; }
.required:after { content: " *"; color: #dc3545; font-weight: bold; }
/* Ajustement spécifique SelectPicker pour coller au design 2px */
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle {
border-width: 2px !important;
height: 38px;
}
</style>

View File

@ -1,53 +1,89 @@
<?php
$nbreTotal = count($commerciaux);
if($nbreTotal < 10){
$nbreTotal = '0'.$nbreTotal;
}else{
$nbreTotal = format_N($nbreTotal);
}
<?php
// Préparation simplifiée du compteur conforme au standard
$nbreTotal = count($commerciaux);
?>
<table style="margin: auto" class="table-responsive">
<tbody>
<td><input class="form-control" style="text-align: center; font-size:10pt;" type="text" id="nbreTotal" name="nbreTotal" value="<?= _("Lignes Total").": ". $nbreTotal; ?>" readonly> </td>
</tbody>
</table>
<input type="hidden" id="total" value="<?= $nbreTotal; ?>">
<table id="tableLister" class="table table-striped table-bordered table-hover table-condensed table-responsive">
<thead>
<tr>
<th class="text-center"><?= _("Centre gestion") ?></th>
<th class="text-center">Code</th>
<th class="text-center"><?= _("Nom et Prénoms") ?></th>
<th class="text-center">Type</th>
<th class="text-center"><?= _("Bureau") ?></th>
<th class="text-center"><?= _("Modifier") ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($commerciaux as $v):
$idData = $this->nettoyer($v['id']);
?>
<tr valign="top">
<td class="text-center" width="18%"><?= $this->nettoyer($v['codeSociete']);; ?>
<td class="text-center" width="10%"><?= $this->nettoyer($v['codeApporteur']) ?></td>
<td class="text-left" width="30%"><?= $this->nettoyer($v['libelle']) ?></td>
<td class="text-left" width="25%"><?= $this->nettoyer($v['typeapp']) ?></td>
<td class="text-left" width="20%"><?= $this->nettoyer($v['bureau']) ?></td>
<td class="text-center" width="10%">
<button style="width:100%" class ="form-control btn btn-primary" type="button" id="btn-editer" name="Modifier"
onclick="JAVASCRIPT:formModifTableRef(<?= $idData; ?>);" ><?= _("Modifier") ?></button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="card border-0 shadow-sm overflow-hidden">
<div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<h6 class="mb-0 fw-bold text-uppercase text-primary small">
<i class="fas fa-users me-2"></i><?= _("Liste des Commerciaux") ?>
</h6>
<span class="badge bg-primary-ghost text-primary ms-3 px-3 py-2 rounded-pill fw-bold" id="badge-total">
<?= $nbreTotal ?> <?= _("Lignes") ?>
</span>
</div>
<div id="table-buttons" class="d-flex gap-2"></div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table id="tableLister" class="table table-hover align-middle mb-0" style="width:100%">
<thead class="bg-light text-muted small text-uppercase">
<tr>
<th class="ps-4 border-0"><?= _("Centre gestion") ?></th>
<th class="border-0">Code</th>
<th class="border-0"><?= _("Nom et Prénoms") ?></th>
<th class="border-0">Type</th>
<th class="border-0"><?= _("Bureau") ?></th>
<th class="border-0 text-center pe-4"><?= _("Actions") ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($commerciaux as $v):
$idData = $this->nettoyer($v['id']);
?>
<tr>
<td class="ps-4 fw-medium text-muted small">
<?= $this->nettoyer($v['codeSociete']) ?>
</td>
<td>
<span class="badge bg-light text-dark border fw-bold px-2 py-1">
<?= $this->nettoyer($v['codeApporteur']) ?>
</span>
</td>
<td class="fw-bold text-dark">
<?= $this->nettoyer($v['libelle']) ?>
</td>
<td>
<span class="text-muted small fw-bold text-uppercase">
<i class="fas fa-id-badge me-1 opacity-50"></i><?= $this->nettoyer($v['typeapp']) ?>
</span>
</td>
<td>
<span class="text-muted small">
<i class="fas fa-map-marker-alt me-1 opacity-50"></i><?= $this->nettoyer($v['bureau']) ?>
</span>
</td>
<td class="text-center pe-4">
<button type="button"
class="btn btn-outline-primary btn-sm px-3 rounded-pill fw-bold shadow-xs"
onclick="formModifTableRef(<?= $idData; ?>);">
<i class="fas fa-edit me-1"></i> <?= _("Modifier") ?>
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Initialisation avec activation des exports Excel/PDF et compteur dynamique
initDataTableReference('#tableLister', 'Liste_Commerciaux');
});
</script>
<style>
/* Rappel des hauteurs de lignes et styles spécifiques du Master Prompt */
#tableLister tbody td {
height: 60px;
border-bottom: 1px solid #f1f4f6;
}
.bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
.shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.text-primary { color: #212e53 !important; }
</style>