You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
448 lines
11 KiB
448 lines
11 KiB
<!-- Content Wrapper. Contains page content -->
|
|
<div class="content-wrapper">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<h1>Rapports</h1>
|
|
<ol class="breadcrumb">
|
|
<li><a href="#"><i class="fa fa-dashboard"></i> Accueil</a></li>
|
|
<li class="active">Rapports</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="row">
|
|
<div class="col-md-12 col-xs-12">
|
|
<form class="form-inline" action="<?php echo base_url('reports/'); ?>" method="POST">
|
|
<div class="form-group">
|
|
<label for="select_year">Année</label>
|
|
<select class="form-control" name="select_year" id="select_year">
|
|
<?php foreach ($report_years as $value): ?>
|
|
<option value="<?php echo $value; ?>" <?php echo ($value == $selected_year) ? 'selected' : ''; ?>>
|
|
<?php echo $value; ?>
|
|
</option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-default">Envoyer</button>
|
|
<a href="detail/stock" class="btn btn-sm btn-success">Détails</a>
|
|
</form>
|
|
</div>
|
|
|
|
<br><br>
|
|
|
|
<div class="col-md-12 col-xs-12">
|
|
<?php if (session()->getFlashdata('success')): ?>
|
|
<div class="alert alert-success alert-dismissible">
|
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
<?php echo session()->getFlashdata('success'); ?>
|
|
</div>
|
|
<?php elseif (session()->getFlashdata('error')): ?>
|
|
<div class="alert alert-danger alert-dismissible">
|
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
<?php echo session()->getFlashdata('error'); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="box">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Ventes totales</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<canvas id="barChart" style="height:250px"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="box">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Modes de Paiement </h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<canvas id="paymentChart" style="height:250px"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="box">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Produit vendus Aujourd'hui / Stock </h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<canvas id="productChart" style="height:250px"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="box">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Point de ventes </h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<canvas id="storeChart" style="height:250px"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
</div>
|
|
|
|
|
|
<div class="box">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Total des commandes payées - Données du rapport</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<table id="datatables" class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Année - Mois</th>
|
|
<th>Montant</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($results as $k => $v): ?>
|
|
<tr>
|
|
<td><?php echo $k; ?></td>
|
|
<td><?php echo $company_currency . ' ' . number_format($v, 0, '.', ' '); ?></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th>Montant total</th>
|
|
<th><?php echo number_format(array_sum($results), 0, '', ' '); ?></th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$("#reportNav").addClass('active');
|
|
});
|
|
|
|
var report_data = <?php echo json_encode(array_values($results)); ?>;
|
|
console.log(report_data);
|
|
$(function() {
|
|
var ctxBar = document.getElementById('barChart').getContext('2d');
|
|
new Chart(ctxBar, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
|
|
datasets: [{
|
|
label: 'Ventes',
|
|
backgroundColor: '#00a65a',
|
|
data: report_data
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
suggestedMax: Math.max(...report_data) + 10
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var ctx = document.getElementById('paymentChart').getContext('2d');
|
|
|
|
var paymentChart = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: <?= $labels ?>,
|
|
datasets: [{
|
|
label: 'Pourcentage de Transactions',
|
|
data: <?= $totals ?>, // Ne pas ajouter % ici
|
|
backgroundColor: ['#3498db', '#2ecc71', '#B88A2F'],
|
|
borderColor: ['#2980b9', '#27ae60', '#f39c12'],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(tooltipItem) {
|
|
// Ajouter le % dans l'affichage du tooltip
|
|
return tooltipItem.raw.toLocaleString('fr-FR') + ' Ar';
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
labels: {
|
|
generateLabels: function(chart) {
|
|
// Ajouter le % dans les labels de la légende
|
|
return chart.data.labels.map(function(label, i) {
|
|
return {
|
|
text: label + ' (' + chart.data.datasets[0].data[i].toLocaleString('fr-FR') + ' AR)',
|
|
fillStyle: chart.data.datasets[0].backgroundColor[i]
|
|
};
|
|
});
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var ctx = document.getElementById('productChart').getContext('2d');
|
|
|
|
var paymentChart = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: <?= $labels_product ?>,
|
|
datasets: [{
|
|
label: 'Pourcentage de Transactions',
|
|
data: <?= $totals_product ?>, // Ne pas ajouter % ici
|
|
backgroundColor: ['#3498db', '#2ecc71', '#B88A2F'],
|
|
borderColor: ['#2980b9', '#27ae60', '#f39c12'],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(tooltipItem) {
|
|
// Ajouter le % dans l'affichage du tooltip
|
|
return tooltipItem.raw.toFixed(0) + ' Produit';
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
labels: {
|
|
generateLabels: function(chart) {
|
|
// Ajouter le % dans les labels de la légende
|
|
return chart.data.labels.map(function(label, i) {
|
|
return {
|
|
text: label + ' (' + chart.data.datasets[0].data[i].toFixed(0) + ' Produit)',
|
|
fillStyle: chart.data.datasets[0].backgroundColor[i]
|
|
};
|
|
});
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
var ctx = document.getElementById('storeChart').getContext('2d');
|
|
|
|
var paymentChart = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: <?= $labelStore ?>,
|
|
datasets: [{
|
|
label: 'Pourcentage de Transactions',
|
|
data: <?= $totalPerStore ?>,
|
|
backgroundColor: ['#3498db', '#2ecc71', '#B88A2F'],
|
|
borderColor: ['#2980b9', '#27ae60', '#f39c12'],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(tooltipItem) {
|
|
return tooltipItem.raw.toFixed(2) + '%';
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
generateLabels: function(chart) {
|
|
return chart.data.labels.map(function(label, i) {
|
|
return {
|
|
text: `${label} (${chart.data.datasets[0].data[i].toFixed(2)}%)`,
|
|
fillStyle: chart.data.datasets[0].backgroundColor[i]
|
|
};
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
/* --- Style global --- */
|
|
body {
|
|
background: #f4f6f9;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
h1, h3 {
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
/* --- En-tête --- */
|
|
.content-header {
|
|
background: linear-gradient(135deg, #3498db, #2ecc71);
|
|
color: white;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.content-header h1 {
|
|
margin: 0;
|
|
font-size: 26px;
|
|
}
|
|
|
|
.breadcrumb {
|
|
background: transparent;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.breadcrumb li a {
|
|
color: #ecf0f1;
|
|
}
|
|
|
|
/* --- Formulaire --- */
|
|
.form-inline {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.form-inline .form-control,
|
|
.form-inline button,
|
|
.form-inline a {
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.btn-default {
|
|
background-color: #2980b9;
|
|
color: white;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-default:hover {
|
|
background-color: #1f618d;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background-color: #27ae60;
|
|
}
|
|
|
|
/* --- Boîtes de statistiques --- */
|
|
.box {
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 6px 15px rgba(0,0,0,0.08);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.box:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.box-header {
|
|
border-bottom: 2px solid #f1f1f1;
|
|
padding: 15px 20px;
|
|
background: #fafafa;
|
|
border-radius: 15px 15px 0 0;
|
|
}
|
|
|
|
.box-title {
|
|
font-size: 18px;
|
|
color: #34495e;
|
|
}
|
|
|
|
.box-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* --- Table --- */
|
|
table {
|
|
background: white;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
th {
|
|
background: #3498db;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
td {
|
|
text-align: center;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* --- Alertes --- */
|
|
.alert {
|
|
border-radius: 10px;
|
|
animation: fadeIn 0.6s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {opacity: 0; transform: translateY(-10px);}
|
|
to {opacity: 1; transform: translateY(0);}
|
|
}
|
|
|
|
/* --- Charts --- */
|
|
canvas {
|
|
width: 100% !important;
|
|
height: 300px !important;
|
|
}
|
|
|
|
/* --- Responsive --- */
|
|
@media (max-width: 768px) {
|
|
.box {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
|