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

21082025

master
Sarobidy22 4 months ago
parent
0ce9cb608d
commit
0dc93018da
9 changed files with 929 additions and 239 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      app/Controllers/ProductCOntroller.php
  2. 2
      app/Models/Products.php
  3. 2
      app/Views/commercial/single.php
  4. 13
      app/Views/products/create.php
  5. 13
      app/Views/products/editbackup.php
  6. 28
      app/Views/templates/footer.php
  7. 970
      app/Views/templates/header.php
  8. 44
      app/Views/templates/header_menu.php
  9. 68
      app/Views/templates/side_menubar.php

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>

970
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 */
}
.modal-body .btn {
font-size: 14px;
/* Taille de police du bouton */
padding: 5px 15px;
/* Espacement interne */
float: right;
margin-top: -7px;
}
.modal-body .btn-primary {
background-color: #007bff;
/* Couleur du bouton */
border-color: #007bff;
/* Couleur de la bordure */
}
.modal-body .btn-primary:hover {
background-color: #0056b3;
/* Couleur au survol */
border-color: #004085;
/* Bordure au survol */
}
.dropdown-menu-lg .dropdown-item {
padding: .5rem 1rem;
}
.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;
}
.navbar-expand .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
.dropdown-menu.show {
display: block;
}
.dropdown-menu-lg {
max-width: 300px;
min-width: 280px;
padding: 0;
}
.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);
}
.dropdown-menu-lg .dropdown-item {
padding: .5rem 1rem;
}
.dropdown-footer,
.dropdown-header {
display: block;
font-size: .875rem;
padding: .5rem 1rem;
text-align: center;
}
.dropdown-header {
display: block;
padding: .5rem 1rem;
margin-bottom: 0;
font-size: .875rem;
color: #6c757d;
white-space: nowrap;
}
.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;
}
.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;
}
.navbar-badge {
font-size: .6rem;
font-weight: 300;
padding: 2px 4px;
position: absolute;
right: 5px;
top: 9px;
}
.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;
}
/* Styles de base */
body {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
overflow-x: hidden;
min-height: 100vh;
background-color: #ecf0f5;
}
/* Wrapper principal */
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
}
/* Contenu principal */
.content-wrapper {
flex: 1;
overflow-y: auto;
padding-bottom: 60px;
margin-left: 230px;
padding-top: 50px;
transition: margin-left 0.3s ease;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
.logo-mini {
display: none;
}
.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 */
}
/* En mode réduit */
.sidebar-collapsed .sidebar-toggle {
left: 70px; /* Suit la sidebar réduite */
}
/* Menu */
.sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-menu > li {
position: relative;
margin: 0;
}
.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;
}
.sidebar-menu > li > a:hover {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc;
}
.sidebar-menu > li.active > a {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc;
}
.sidebar-menu i {
width: 25px;
text-align: center;
margin-right: 10px;
}
/* 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) */
}
}
</style>

44
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(() => {
@ -143,3 +148,4 @@ $('#notificationList').html(notificationHTML);
</script>
<!-- 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; ?>

Write Preview
Loading…
Cancel
Save