C4M/motorbike
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

21082025

Browse Source
This commit is contained in:
Sarobidy22 2025-08-21 09:28:18 +03:00
parent 0ce9cb608d
commit 0dc93018da
9 changed files with 910 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/Controllers/ProductCOntroller.php
View File

@ -136,7 +136,7 @@ class ProductCOntroller extends AdminController
$value['image'],
convertString($value['sku']),
$value['name'],
$value['price'],
$value['prix_vente'],
$store_name,
$availability, // <-- ici la disponibilité ajoutée
$buttons
@ -161,15 +161,16 @@ class ProductCOntroller extends AdminController
// Validate form inputs
$validation = \Config\Services::validation();
$validation->setRules([
'nom_de_produit' => 'required',
'marque' => 'required',
'numero_de_moteur' => 'required',
'prix' => 'required|numeric',
'nom_de_produit' => 'required',
'marque' => 'required',
'type' => 'required',
'numero_de_moteur' => 'required',
'prix' => 'required|numeric',
'price_vente' => 'required|numeric',
'puissance' => 'required',
'store' => 'required',
'availability' => 'required',
'price_min' => 'required|numeric',
'store' => 'required',
'availability' => 'required',
'price_min' => 'required|numeric',
]);
if ($this->request->getMethod() === 'post' && $validation->withRequest($this->request)->run()) {
@ -201,6 +202,7 @@ class ProductCOntroller extends AdminController
'info' => $this->request->getPost('info'),
'infoManque' => $this->request->getPost('infoManque'),
'product_sold' => $product_sold,
'type'=> $this->request->getPost('type')
];
$store_id1 = (int)$this->request->getPost('store');
// Insert data into the database
@ -297,6 +299,7 @@ class ProductCOntroller extends AdminController
'infoManquekit' => $this->request->getPost('infoManquekit'),
'info' => $this->request->getPost('info'),
'infoManque' => $this->request->getPost('infoManque'),
'type'=> $this->request->getPost('type'),
];
// Check if a product image is uploaded
if ($this->request->getFile('product_image')->isValid()) {
@ -401,13 +404,14 @@ class ProductCOntroller extends AdminController
'châssis' => 'chasis',
'puissance' => 'puissance',
'clé' => 'cler',
'prix d\'achat' => 'prix_vente',
'prix ar' => 'price',
'prix d\'achat' => 'price',
'prix ar' => 'prix_vente',
'catégories' => 'categorie_id',
'magasin' => 'store_id',
'disponibilité' => 'availability',
'état' => 'etats',
'pièce manquant' => 'infoManque'
'pièce manquant' => 'infoManque',
'type' => 'type',
];
$ProductsModel = new Products();

2
app/Models/Products.php
View File

@ -12,7 +12,7 @@ class Products extends Model
*/
protected $table = 'products';
protected $primaryKey = 'id';
protected $allowedFields = ['name', 'sku', 'price', 'product_sold', 'qty', 'image', 'description', 'numero_de_moteur', 'marque', 'chasis', 'store_id', 'availability', 'is_piece', 'prix_vente', 'date_arivage', 'puissance', 'cler', 'categorie_id', 'etats', 'infoManquekit', 'info', 'infoManque'];
protected $allowedFields = ['name', 'sku', 'price', 'product_sold', 'qty', 'image', 'description', 'numero_de_moteur', 'marque', 'chasis', 'store_id', 'availability', 'is_piece', 'prix_vente', 'date_arivage', 'puissance', 'cler', 'categorie_id', 'etats','type', 'infoManquekit', 'info', 'infoManque'];
/**
* get the brand data

2
app/Views/commercial/single.php
View File

@ -47,6 +47,8 @@
}
?>
</p>
<p class="text-secondary"><b>Type :</b>
<br> <?= $products['type'] ?></p></br>
<!-- Buttons -->
<div class="d-flex mt-4">

13
app/Views/products/create.php
View File

@ -98,7 +98,7 @@
</div>
<div class="form-group">
<label for="chassis">Chassis</label>
<label for="chassis">Châssis</label>
<input type="text" class="form-control" id="chassis" name="chasis" value="<?= old('chasis') ?>" placeholder="Chassis" autocomplete="off" required/>
</div>
@ -204,6 +204,17 @@
</select>
</div>
<div class="form-group">
<label for="store">Type</label>
<select class="form-control" id="type" name="type" required>
<option value="" >Veuillez choisir</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div class="form-group" id="boxsuplementairekit"></div>
<div class="form-group">

13
app/Views/products/editbackup.php
View File

@ -86,7 +86,7 @@
</div>
<div class="form-group">
<label for="chassis">Chassis</label>
<label for="chassis">Châssis</label>
<input type="text" class="form-control" id="chassis" name="chasis" placeholder="Chassis" autocomplete="off" value="<?php echo $product_data['chasis']; ?>" />
</div>
@ -197,6 +197,17 @@
</select>
</div>
<div class="form-group">
<label for="store">type</label>
<select class="form-control" id="type" name="type">
<option value="A" <?php if ($product_data['type'] == "A") echo "selected"; ?>>A</option>
<option value="B" <?php if ($product_data['type'] == "B") echo "selected"; ?>>B</option>
<option value="C" <?php if ($product_data['type'] == "C") echo "selected"; ?>>C</option>
<option value="D" <?php if ($product_data['type'] == "D") echo "selected"; ?>>D</option>
</select>
</div>
<div class="form-group" id="boxsuplementairekit"></div>
<div class="form-group">

28
app/Views/templates/footer.php
View File

@ -11,6 +11,34 @@
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- <a href="#" class="sidebar-toggle" onclick="toggleSidebar()" role="button"> -->
<script>
function toggleSidebar() {
document.body.classList.toggle('sidebar-collapsed');
}
document.addEventListener('DOMContentLoaded', function() {
const treeviews = document.querySelectorAll('.sidebar-menu .treeview');
treeviews.forEach(item => {
// Quand la souris entre dans un menu
item.addEventListener('mouseenter', function () {
if (document.body.classList.contains('sidebar-collapsed')) {
this.classList.add('menu-open');
}
});
// Quand la souris sort du menu
item.addEventListener('mouseleave', function () {
if (document.body.classList.contains('sidebar-collapsed')) {
this.classList.remove('menu-open');
}
});
});
});
</script>
</body>
</html>

932
app/Views/templates/header.php
View File

@ -54,7 +54,6 @@
<!-- jQuery 3 -->
<script src="<?php echo base_url('assets/bower_components/jquery/dist/jquery.min.js') ?>"></script>
<!-- jQuery UI 1.11.4 -->
<script src="<?php echo base_url('assets/bower_components/jquery-ui/jquery-ui.min.js') ?>"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
@ -95,7 +94,7 @@
<script src="<?php echo base_url('assets/dist/js/demo.js') ?>"></script>
<script src="<?php echo base_url('assets/plugins/fileinput/fileinput.min.js') ?>"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/js/all.min.js"></script> -->
<!-- icheck -->
<!-- jQuery UI 1.11.4 -->
<script src="<?php echo base_url('assets/plugins/iCheck/icheck.min.js') ?>"></script>
<!-- DataTables -->
@ -103,179 +102,806 @@
<script
src="<?php echo base_url('assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') ?>"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<style>
.modal-body .list-group-item {
margin-bottom: 10px;
/* Espacement entre les items */
padding: 10px 15px;
/* Augmentation de l'espace autour */
border-radius: 5px;
/* Coins arrondis */
background-color: #f9f9f9;
/* Couleur d'arrière-plan douce */
border: 1px solid #ddd;
/* Ajout d'une bordure subtile */
}
/* Styles de base */
body {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
overflow-x: hidden;
min-height: 100vh;
background-color: #ecf0f5;
}
.modal-body .btn {
font-size: 14px;
/* Taille de police du bouton */
padding: 5px 15px;
/* Espacement interne */
float: right;
margin-top: -7px;
}
/* Wrapper principal */
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
}
.modal-body .btn-primary {
background-color: #007bff;
/* Couleur du bouton */
border-color: #007bff;
/* Couleur de la bordure */
}
/* Contenu principal */
.content-wrapper {
flex: 1;
overflow-y: auto;
padding-bottom: 60px;
margin-left: 230px;
padding-top: 50px;
transition: margin-left 0.3s ease;
}
.modal-body .btn-primary:hover {
background-color: #0056b3;
/* Couleur au survol */
border-color: #004085;
/* Bordure au survol */
}
/* Footer fixe - Même taille et position que le content-wrapper */
.main-footer {
position: fixed;
bottom: 0;
left: 230px; /* collé à la sidebar */
margin-left: 2px; /* petit espace de 2px */
right: 0;
z-index: 1000;
background-color: #ecf0f5;
padding: 10px 15px;
border-top: 1px solid #d2d6de;
display: flex;
align-items: center;
justify-content: space-between;
transition: left 0.3s ease, margin-left 0.3s ease;
}
.dropdown-menu-lg .dropdown-item {
padding: .5rem 1rem;
}
/* Sidebar */
.main-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow-y: auto;
z-index: 810;
width: 230px;
background-color: #222d32;
transition: width 0.3s ease;
}
.dropdown-item {
display: block;
width: 100%;
padding: .25rem 1rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
/* Header */
.main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: #3c8dbc;
height: 50px;
transition: margin-left 0.3s ease;
}
.navbar-expand .navbar-nav .dropdown-menu {
position: absolute;
}
/* Logo */
.logo {
display: block;
padding: 15px;
text-align: center;
background-color: #367fa9;
color: white;
font-size: 18px;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
transition: padding 0.3s ease;
}
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
.logo-mini {
display: none;
}
.dropdown-menu.show {
display: block;
}
.logo-lg {
display: inline;
}
/* Bouton sidebar-toggle uniquement dans le header */
/* Position du bouton sidebar-toggle */
.sidebar-toggle {
position: fixed; /* Aligné avec ton header (ajuste si besoin) */
left: 230px; /* Collé à la sidebar en mode normal */
z-index: 2000; /* Au-dessus de tout */
background: #3c8dbc;
color: #fff;
padding: 8px 12px;
border-radius: 3px;
cursor: pointer;
transition: left 0.3s ease; /* Animation fluide */
}
.dropdown-menu-lg {
max-width: 300px;
min-width: 280px;
padding: 0;
}
/* En mode réduit */
.sidebar-collapsed .sidebar-toggle {
left: 70px; /* Suit la sidebar réduite */
}
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown-menu {
position: absolute;
top: 100%;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: .25rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
}
/* Menu */
.sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
}
.dropdown-menu-lg .dropdown-item {
padding: .5rem 1rem;
}
.sidebar-menu > li {
position: relative;
margin: 0;
}
.dropdown-footer,
.dropdown-header {
display: block;
font-size: .875rem;
padding: .5rem 1rem;
text-align: center;
}
.sidebar-menu > li > a {
padding: 12px 15px;
display: block;
color: #b8c7ce;
text-decoration: none;
border-left: 3px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.dropdown-header {
display: block;
padding: .5rem 1rem;
margin-bottom: 0;
font-size: .875rem;
color: #6c757d;
white-space: nowrap;
}
.sidebar-menu > li > a:hover {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc;
}
.dropdown-item {
display: block;
width: 100%;
padding: .25rem 1rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.sidebar-menu > li.active > a {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc;
}
.badge {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.sidebar-menu i {
width: 25px;
text-align: center;
margin-right: 10px;
}
.navbar-badge {
font-size: .6rem;
font-weight: 300;
padding: 2px 4px;
position: absolute;
right: 5px;
top: 9px;
}
/* Sous-menu */
.treeview-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
background: #2c3b41;
}
.treeview-menu > li {
margin: 0;
}
.treeview-menu > li > a {
padding: 10px 15px 10px 45px;
display: block;
font-size: 14px;
color: #8aa4af;
text-decoration: none;
transition: all 0.3s ease;
}
.treeview-menu > li > a:hover {
color: #fff;
background: #1e282c;
}
/* Flèche */
.pull-right-container {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.fa-angle-left {
transition: transform 0.3s ease;
}
/* Affichage normal des sous-menus */
.treeview.menu-open > .treeview-menu {
display: block;
}
.treeview.menu-open > a > .pull-right-container > .fa-angle-left {
transform: rotate(-90deg);
}
/* Notifications */
.navbar-badge {
font-size: 1.4rem;
font-weight: 300;
padding: 2px 4px;
position: absolute;
right: 5px;
top: 9px;
}
.badge-warning {
color: #1f2d3d;
background-color: #ffc107;
}
/* Dropdown */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
min-width: 280px;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: .25rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
}
.dropdown-menu.show {
display: block;
}
/* === MODE REDUIT === */
.sidebar-collapsed .main-sidebar {
width: 70px;
overflow-y: auto;
overflow-x: visible;
/* Scrollbar à gauche en mode réduit */
direction: rtl;
}
.sidebar-collapsed .main-sidebar .sidebar-menu {
direction: ltr; /* Rétablir la direction normale pour le contenu */
}
.sidebar-collapsed .content-wrapper {
margin-left: 70px;
}
.sidebar-collapsed .main-header {
width: 100%;
margin-left: 0;
}
/* Footer en mode sidebar réduite - Même taille que le content-wrapper réduit */
.sidebar-collapsed .main-footer {
left: 70px; /* Même position que le content-wrapper en mode réduit */
margin-left: 2px;
}
/* LOGO CENTRÉ EN MODE RÉDUIT - AMÉLIORATION */
.sidebar-collapsed .logo {
padding: 15px 5px; /* Padding réduit horizontalement */
text-align: center; /* Centrage du texte */
display: flex; /* Utilisation de flexbox pour un meilleur centrage */
align-items: center; /* Centrage vertical */
justify-content: center; /* Centrage horizontal */
width: 70px; /* Largeur fixe correspondant à la sidebar réduite */
box-sizing: border-box; /* Inclure le padding dans la largeur */
}
.sidebar-collapsed .logo-mini {
display: inline-block; /* Affichage du logo mini */
text-align: center;
width: 100%;
}
.sidebar-collapsed .logo-lg {
display: none; /* Masquer le logo long */
}
.sidebar-collapsed .sidebar-menu > li > a > span {
display: none;
}
.sidebar-collapsed .sidebar-menu > li > a .pull-right-container {
display: none;
}
/* Icônes centrées - AMÉLIORATION */
.sidebar-collapsed .sidebar-menu > li > a {
text-align: center;
padding: 12px 0;
position: relative;
display: flex; /* Utilisation de flexbox */
align-items: center; /* Centrage vertical */
justify-content: center; /* Centrage horizontal */
width: 70px; /* Largeur fixe */
box-sizing: border-box;
}
.sidebar-collapsed .sidebar-menu i {
margin-right: 0;
display: block;
font-size: 18px;
width: auto; /* Largeur automatique pour les icônes */
text-align: center;
}
/* Tooltip pour afficher le texte du menu principal au survol */
.sidebar-collapsed .sidebar-menu > li > a::before {
content: attr(data-tooltip);
position: absolute;
left: 70px;
top: 50%;
transform: translateY(-50%);
background: #2c3b41;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 9998;
font-size: 14px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
border-left: 3px solid #3c8dbc;
pointer-events: none;
}
.sidebar-collapsed .sidebar-menu > li:hover > a::before {
opacity: 1;
visibility: visible;
left: 75px;
}
/* Flèche pour le tooltip */
.sidebar-collapsed .sidebar-menu > li > a::after {
content: "";
position: absolute;
left: 70px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 5px 0;
border-color: transparent #2c3b41 transparent transparent;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 9999;
}
.sidebar-collapsed .sidebar-menu > li:hover > a::after {
opacity: 1;
visibility: visible;
}
/* Masquer les tooltips pour les éléments avec sous-menu */
.sidebar-collapsed .sidebar-menu > li.treeview > a::before,
.sidebar-collapsed .sidebar-menu > li.treeview > a::after {
display: none;
}
/* Améliorations pour les sous-menus en mode réduit */
.sidebar-collapsed .sidebar-menu > li {
position: relative;
}
/* Sous-menus affichés au hover en mode réduit - POSITIONNÉS DANS LE CONTENT-WRAPPER */
.sidebar-collapsed .treeview-menu {
position: fixed; /* Position fixe par rapport à la fenêtre */
left: 80px; /* 70px (sidebar) + 10px de marge */
top: 0; /* Sera ajusté par JavaScript pour aligner avec l'élément parent */
width: 180px; /* Taille réduite (était 200px) */
max-width: calc(100vw - 100px); /* Éviter les débordements */
z-index: 9999;
box-shadow: 0 4px 15px rgba(0,0,0,0.25);
border-radius: 4px; /* Border-radius plus petit */
border-left: 2px solid #3c8dbc; /* Bordure plus fine */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
display: block !important;
background: #fff; /* Fond blanc pour se démarquer du content-wrapper */
border: 1px solid #d2d6de;
pointer-events: none;
transform: translateX(-20px) scale(0.95);
transform-origin: left center;
margin-top: 50px; /* Prendre en compte la hauteur du header fixe */
}
/* Style spécial pour les sous-menus dans le content-wrapper */
.sidebar-collapsed .treeview-menu {
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
backdrop-filter: blur(8px); /* Blur réduit */
border: 1px solid rgba(210, 214, 222, 0.8);
}
/* RENDRE LES SOUS-MENUS CLIQUABLES - TOUJOURS ACTIFS */
.sidebar-collapsed .treeview:hover .treeview-menu {
pointer-events: auto !important; /* Force l'activation des clics */
opacity: 1;
visibility: visible;
transform: translateX(0) scale(1);
}
/* Maintenir l'affichage ET les clics du sous-menu quand on le survole directement */
.sidebar-collapsed .treeview-menu:hover {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important; /* Garantir la cliquabilité */
transform: translateX(0) scale(1) !important;
}
/* Maintenir l'affichage quand on survole les liens à l'intérieur */
.sidebar-collapsed .treeview-menu > li > a:hover {
pointer-events: auto !important;
}
/* Zone de transition invisible élargie pour maintenir l'affichage */
.sidebar-collapsed .treeview::after {
content: "";
position: absolute;
top: -5px; /* Zone étendue vers le haut */
right: -30px; /* Zone très élargie vers la droite */
bottom: -5px; /* Zone étendue vers le bas */
width: 40px; /* Zone large pour atteindre facilement le content-wrapper */
background: transparent;
z-index: 9998;
pointer-events: none;
}
.sidebar-collapsed .treeview:hover::after {
pointer-events: auto;
}
/* Zone de maintien au-dessus du sous-menu */
.sidebar-collapsed .treeview-menu::before {
content: "";
position: absolute;
top: -10px;
left: -30px;
right: -10px;
height: 15px;
background: transparent;
z-index: 9999;
pointer-events: auto; /* Permettre l'interaction */
}
/* Style des liens dans les sous-menus pour le content-wrapper - TAILLE RÉDUITE */
.sidebar-collapsed .treeview-menu > li > a {
padding: 8px 12px; /* Padding réduit (était 10px 15px) */
color: #495057; /* Couleur sombre pour contraster avec le fond blanc */
white-space: nowrap;
border-bottom: 1px solid rgba(210, 214, 222, 0.4);
transition: all 0.3s ease;
font-size: 12px; /* Taille de police réduite (était 13px) */
font-weight: 500;
display: block;
position: relative;
cursor: pointer; /* Curseur pointer pour indiquer la cliquabilité */
text-decoration: none; /* Supprimer le soulignement */
}
/* S'assurer que les liens sont cliquables */
.sidebar-collapsed .treeview-menu > li > a {
pointer-events: auto !important;
z-index: 10000; /* Z-index élevé pour garantir la cliquabilité */
}
.sidebar-collapsed .treeview-menu > li:last-child > a {
border-bottom: none;
border-radius: 0 0 4px 4px; /* Border-radius réduit */
}
.sidebar-collapsed .treeview-menu > li:first-child > a {
border-radius: 4px 4px 0 0; /* Border-radius réduit */
}
.sidebar-collapsed .treeview-menu > li > a:hover {
background: linear-gradient(135deg, #3c8dbc 0%, #367fa9 100%);
color: #fff;
padding-left: 15px; /* Padding réduit pour le hover (était 20px) */
transform: translateX(2px); /* Translation plus petite */
box-shadow: inset 0 0 10px rgba(255,255,255,0.1); /* Ombre réduite */
}
/* Icônes dans les sous-menus - TAILLE RÉDUITE */
.sidebar-collapsed .treeview-menu > li > a i {
margin-right: 6px; /* Marge réduite (était 8px) */
width: 14px; /* Largeur réduite (était 16px) */
text-align: center;
font-size: 11px; /* Taille d'icône réduite (était 12px) */
opacity: 0.7;
transition: all 0.3s ease;
}
.sidebar-collapsed .treeview-menu > li > a:hover i {
opacity: 1;
transform: scale(1.05); /* Réduction de l'effet de zoom */
}
/* En-tête du sous-menu avec le titre du parent - TAILLE RÉDUITE */
.sidebar-collapsed .treeview-menu::after {
content: attr(data-parent-title);
display: block;
padding: 6px 12px 5px 12px; /* Padding réduit (était 8px 15px 6px 15px) */
background: linear-gradient(135deg, #3c8dbc 0%, #367fa9 100%);
color: #fff;
font-size: 10px; /* Taille de police réduite (était 11px) */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2px; /* Espacement réduit */
border-radius: 4px 4px 0 0; /* Border-radius réduit */
border-bottom: 1px solid rgba(255,255,255,0.2); /* Bordure plus fine */
margin-bottom: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
/* Ajuster l'espacement du premier élément pour l'en-tête */
.sidebar-collapsed .treeview-menu > li:first-child {
margin-top: 22px; /* Espace pour l'en-tête réduite (était 25px) */
}
/* Flèche pointant vers la sidebar - TAILLE RÉDUITE */
.sidebar-collapsed .treeview-menu::before {
content: "";
position: absolute;
left: -5px; /* Position ajustée (était -6px) */
top: 12px; /* Position ajustée (était 15px) */
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 5px 0; /* Taille réduite (était 6px) */
border-color: transparent #3c8dbc transparent transparent;
filter: drop-shadow(-1px 0 1px rgba(0,0,0,0.2)); /* Ombre réduite */
}
/* Indicateur visuel pour les menus avec sous-menus en mode réduit */
.sidebar-collapsed .sidebar-menu > li.treeview > a::after {
content: "▶";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 9px; /* Taille réduite (était 10px) */
color: #8aa4af;
transition: all 0.3s ease;
display: block !important; /* Forcer l'affichage de la flèche */
}
.sidebar-collapsed .sidebar-menu > li.treeview:hover > a::after {
color: #3c8dbc; /* Couleur plus visible au hover */
right: 6px;
transform: translateY(-50%) scale(1.2) rotate(90deg); /* Rotation de la flèche */
}
/* Amélioration de l'indicateur de sous-menu */
.sidebar-collapsed .sidebar-menu > li.treeview > a {
position: relative;
}
/* Ajout d'un petit point pour indiquer la présence d'un sous-menu */
.sidebar-collapsed .sidebar-menu > li.treeview > a::before {
content: "●";
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
font-size: 5px; /* Taille réduite (était 6px) */
color: #3c8dbc;
opacity: 0.7;
transition: all 0.3s ease;
}
.sidebar-collapsed .sidebar-menu > li.treeview:hover > a::before {
opacity: 1;
color: #fff;
transform: translateX(-50%) scale(1.3); /* Effet réduit */
}
/* Tooltip spécial pour les menus avec sous-menus - MASQUÉ EN MODE RÉDUIT */
.sidebar-collapsed .sidebar-menu > li.treeview > a.tooltip-disabled::before {
display: none !important; /* Masquer le tooltip pour les menus avec sous-menus */
}
/* Amélioration du survol des éléments principaux en mode réduit */
.sidebar-collapsed .sidebar-menu > li > a:hover {
background-color: #1e282c;
border-left-color: #3c8dbc;
transform: scale(1.03); /* Léger agrandissement au hover (était 1.05) */
}
/* Effet spécial pour les menus avec sous-menus */
.sidebar-collapsed .sidebar-menu > li.treeview > a:hover {
background-color: #1e282c;
border-left-color: #3c8dbc;
transform: scale(1.03); /* Effet réduit */
box-shadow: 1px 0 8px rgba(60, 141, 188, 0.3); /* Ombre pour indiquer l'ouverture */
}
/* Animation d'ouverture du sous-menu dans le content-wrapper */
.sidebar-collapsed .treeview:hover .treeview-menu {
animation: slideInFromSidebar 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Durée réduite */
}
@keyframes slideInFromSidebar {
0% {
opacity: 0;
transform: translateX(-20px) scale(0.95); /* Distance réduite */
filter: blur(2px); /* Effet de flou réduit */
}
60% {
opacity: 0.8;
transform: translateX(3px) scale(1.01); /* Distance réduite */
filter: blur(0.5px); /* Effet de flou réduit */
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
filter: blur(0);
}
}
/* Positionnement dynamique basé sur la position de l'élément parent */
.sidebar-collapsed .sidebar-menu > li.treeview {
position: relative;
}
/* Ajustement automatique de la position verticale */
.sidebar-collapsed .sidebar-menu > li:nth-child(1) .treeview-menu { top: 50px; } /* 0px + header */
.sidebar-collapsed .sidebar-menu > li:nth-child(2) .treeview-menu { top: 94px; } /* ~44px par item */
.sidebar-collapsed .sidebar-menu > li:nth-child(3) .treeview-menu { top: 138px; }
.sidebar-collapsed .sidebar-menu > li:nth-child(4) .treeview-menu { top: 182px; }
.sidebar-collapsed .sidebar-menu > li:nth-child(5) .treeview-menu { top: 226px; }
.sidebar-collapsed .sidebar-menu > li:nth-child(6) .treeview-menu { top: 270px; }
.sidebar-collapsed .sidebar-menu > li:nth-child(7) .treeview-menu { top: 314px; }
.sidebar-collapsed .sidebar-menu > li:nth-child(8) .treeview-menu { top: 358px; }
/* Adaptation responsive du sous-menu dans le content-wrapper - TAILLES RÉDUITES */
@media (max-width: 992px) {
.sidebar-collapsed .treeview-menu {
width: 150px; /* Largeur réduite pour tablettes (était 170px) */
left: 75px;
}
}
@media (max-width: 768px) {
.sidebar-collapsed .treeview-menu {
width: 130px; /* Largeur réduite pour mobile (était 150px) */
left: 10px;
right: auto;
max-width: calc(100vw - 20px);
}
/* Réduire encore plus les éléments sur mobile */
.sidebar-collapsed .treeview-menu > li > a {
padding: 6px 10px; /* Padding réduit (était 8px 12px) */
font-size: 11px; /* Taille réduite (était 12px) */
}
.sidebar-collapsed .treeview-menu > li > a i {
margin-right: 5px; /* Marge réduite (était 6px) */
width: 12px; /* Largeur réduite (était 14px) */
font-size: 10px; /* Taille réduite (était 11px) */
}
}
/* Scrollbar standard pour mode normal */
.main-sidebar::-webkit-scrollbar {
width: 8px;
}
.main-sidebar::-webkit-scrollbar-track {
background: #1a2226;
}
.main-sidebar::-webkit-scrollbar-thumb {
background: #3c8dbc;
border-radius: 4px;
}
.main-sidebar::-webkit-scrollbar-thumb:hover {
background: #367fa9;
}
/* Scrollbar très fine pour le mode réduit - POSITIONNÉE À GAUCHE */
.sidebar-collapsed .main-sidebar::-webkit-scrollbar {
width: 4px; /* Scrollbar très fine */
}
.sidebar-collapsed .main-sidebar::-webkit-scrollbar-track {
background: rgba(26, 34, 38, 0.8);
border-radius: 0;
}
.sidebar-collapsed .main-sidebar::-webkit-scrollbar-thumb {
background: rgba(60, 141, 188, 0.7);
border-radius: 2px;
transition: all 0.3s ease;
}
.sidebar-collapsed .main-sidebar::-webkit-scrollbar-thumb:hover {
background: rgba(54, 127, 169, 0.9);
}
/* Pour Firefox - Scrollbar fine en mode réduit */
.sidebar-collapsed .main-sidebar {
scrollbar-width: thin;
scrollbar-color: rgba(60, 141, 188, 0.7) rgba(26, 34, 38, 0.8);
}
/* Amélioration de la zone de scroll pour une meilleure UX */
.sidebar-collapsed .main-sidebar {
padding-left: 2px; /* Petit espace pour la scrollbar à gauche */
padding-right: 0;
}
/* Indicateur de scroll en mode réduit - À GAUCHE */
.sidebar-collapsed .main-sidebar::before {
content: "";
position: absolute;
top: 0;
left: 0; /* Indicateur positionné à gauche */
width: 1px;
height: 100%;
background: linear-gradient(to bottom,
rgba(60, 141, 188, 0.3) 0%,
rgba(60, 141, 188, 0.1) 50%,
rgba(60, 141, 188, 0.3) 100%);
pointer-events: none;
z-index: 1;
}
/* Animation douce pour le scroll */
.sidebar-collapsed .main-sidebar {
scroll-behavior: smooth;
}
/* Responsive */
@media (max-width: 768px) {
.main-sidebar {
margin-left: -230px;
}
.content-wrapper {
margin-left: 0;
}
.main-header {
width: 100%;
margin-left: 0;
}
/* Footer en mode mobile - Même taille que le content-wrapper */
.main-footer {
left: 0; /* Même position que le content-wrapper sur mobile */
}
.sidebar-mobile-open .main-sidebar {
margin-left: 0;
}
.sidebar-mobile-open .content-wrapper {
margin-left: 0;
}
.sidebar-mobile-open .main-footer {
left: 0; /* Footer suit le content-wrapper */
}
.sidebar-collapsed .treeview-menu {
left: 70px;
width: 150px; /* Largeur réduite (était 180px) */
}
}
.badge-warning {
color: #1f2d3d;
background-color: #ffc107;
}
.badge {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
</style>

46
app/Views/templates/header_menu.php
View File

@ -7,26 +7,31 @@
<span class="logo-lg"><b>MotorBike</b></span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<div style="display: flex;align-items: center;justify-content: space-between;">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<li class="nav-item dropdown" style="padding-right: 15px;position: relative;list-style: none;">
<i class="fa fa-bell" id="notificationIcon" style="font-size: 15px;cursor: pointer;color:white;" data-toggle="dropdown"></i>
<!-- <span id="notificationCount" style="position: absolute;top: -10px;background-color: red;border-radius: 100px;width: 18px;height: 18px;text-align: center;left: 10px;display: none;"></span> -->
<span id="notificationCount" class="badge badge-warning navbar-badge">15</span>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right" style="width: 400px;padding: 5%;max-height: 500px;overflow: auto;margin-right: 5px;">
<span class="dropdown-header" id="notificationHeader">0 Notifications</span>
<div class="dropdown-divider"></div>
<div id="notificationList"></div>
<div class="dropdown-divider"></div>
</div>
</li>
</div>
</nav>
<nav class="navbar navbar-static-top" style="position: relative; height: 50px; background: #3c8dbc;">
<!-- Sidebar toggle button -->
<a href="#" class="sidebar-toggle" onclick="toggleSidebar()">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Notifications à droite -->
<ul class="navbar-nav" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none;">
<li class="nav-item dropdown" style="position: relative;">
<i class="fa fa-bell" id="notificationIcon" style="font-size: 20px; cursor: pointer; color:white;" data-toggle="dropdown"></i>
<span id="notificationCount" class="badge badge-warning navbar-badge"></span>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"
style="width: 400px; padding: 5%; max-height: 500px; overflow: auto; margin-right: 5px;">
<span class="dropdown-header" id="notificationHeader">0 Notifications</span>
<div class="dropdown-divider"></div>
<div id="notificationList"></div>
<div class="dropdown-divider"></div>
</div>
</li>
</ul>
</nav>
</header>
<script>
$(document).ready(function() {
const checkElement = setInterval(() => {
@ -142,4 +147,5 @@ $('#notificationList').html(notificationHTML);
fetchNotifications();
</script>
<!-- Left side column. contains the logo and sidebar -->
<!-- Left side column. contains the logo and sidebar -->

68
app/Views/templates/side_menubar.php
View File

@ -7,6 +7,7 @@
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" data-widget="tree">
<li id="dashboardMainMenu">
<a href="<?php echo base_url('/') ?>">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
@ -86,7 +87,7 @@
</span>
</a>
<ul class="treeview-menu">
<li><a href="<?php echo base_url('/ventes') ?>"><i class="fa fa-circle"></i> liste des produits disponibles</a></li>
<li><a href="<?php echo base_url('/ventes') ?>"><i class="fa fa-circle"></i> Produits Disponibles</a></li>
<?php if (in_array('createOrder', $user_permission) || in_array('updateOrder', $user_permission) || in_array('viewOrder', $user_permission) || in_array('deleteOrder', $user_permission)): ?>
<li><a href="<?php echo base_url('orders') ?>"><i class="fa fa-circle"></i> Commandes</a></li>
@ -134,38 +135,6 @@
</li>
<?php endif; ?>
<?php if (in_array('createSortieCaisse', $user_permission) || in_array('updateSortieCaisse', $user_permission) || in_array('viewSortieCaisse', $user_permission)): ?>
<li id="sortie_caisse_menu">
<a href="<?php echo base_url('sortieCaisse/') ?>">
<i class="fa fa-arrow-circle-down"></i> <span>Décaissement</span>
</a>
</li>
<?php endif; ?>
<?php if (in_array('validateRemise', $user_permission) || in_array('refusedRemise', $user_permission) || in_array('viewRemise', $user_permission)): ?>
<li id="remise_menu">
<a href="<?php echo base_url('remise/') ?>">
<i class="fa fa-percent"></i> <span>Remise</span>
</a>
</li>
<?php endif; ?>
<!-- <//?php if (in_array('viewPerformance', $user_permission)): ?>
<li id="performance_menu">
<a href="<//?php echo base_url('performance/') ?>">
<i class="fa fa-user-tie"></i> <span>Performance</span>
</a>
</li>
<//?php endif; ?> -->
<!-- <?php if (in_array('createAttribute', $user_permission) || in_array('updateAttribute', $user_permission) || in_array('viewAttribute', $user_permission) || in_array('deleteAttribute', $user_permission)): ?>
<li id="attributeNav">
<a href="<?php echo base_url('attributes/') ?>">
<i class="fa fa-file"></i> <span>Attribut</span>
</a>
</li>
<?php endif; ?> -->
<?php if (in_array('createProduct', $user_permission) || in_array('updateProduct', $user_permission) || in_array('viewProduct', $user_permission) || in_array('deleteProduct', $user_permission)): ?>
<li class="treeview" id="mainProductNav">
<a href="#">
@ -234,10 +203,43 @@
</li>
<?php endif; ?> -->
<?php if (in_array('createSortieCaisse', $user_permission) || in_array('updateSortieCaisse', $user_permission) || in_array('viewSortieCaisse', $user_permission)): ?>
<li id="sortie_caisse_menu">
<a href="<?php echo base_url('sortieCaisse/') ?>">
<i class="fa fa-arrow-circle-down"></i> <span>Décaissement</span>
</a>
</li>
<?php endif; ?>
<?php if (in_array('validateRemise', $user_permission) || in_array('refusedRemise', $user_permission) || in_array('viewRemise', $user_permission)): ?>
<li id="remise_menu">
<a href="<?php echo base_url('remise/') ?>">
<i class="fa fa-percent"></i> <span>Remise</span>
</a>
</li>
<?php endif; ?>
<!-- <//?php if (in_array('viewPerformance', $user_permission)): ?>
<li id="performance_menu">
<a href="<//?php echo base_url('performance/') ?>">
<i class="fa fa-user-tie"></i> <span>Performance</span>
</a>
</li>
<//?php endif; ?> -->
<!-- <?php if (in_array('createAttribute', $user_permission) || in_array('updateAttribute', $user_permission) || in_array('viewAttribute', $user_permission) || in_array('deleteAttribute', $user_permission)): ?>
<li id="attributeNav">
<a href="<?php echo base_url('attributes/') ?>">
<i class="fa fa-file"></i> <span>Attribut</span>
</a>
</li>
<?php endif; ?> -->
<?php if (in_array('viewReports', $user_permission)): ?>
<li id="reportNav">
<a href="<?php echo base_url('reports/') ?>">
<i class="glyphicon glyphicon-stats"></i> <span>Rapports</span>
<span class="tooltip">Rapports</span>
</a>
</li>
<?php endif; ?>