131 lines
4.9 KiB
PHP
131 lines
4.9 KiB
PHP
<?php
|
|
$enablePrototypeComments = true;
|
|
include '../../header-invoice.php';
|
|
?>
|
|
|
|
<div class="container-fluid flex-grow-1 container-p-y">
|
|
|
|
<div
|
|
class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
|
|
<div class="d-flex flex-column justify-content-center">
|
|
<h4 class="mb-1 text-body">Witaj w panelu firmy! 👋</h4>
|
|
<p class="text-muted mb-0">Oto finansowe podsumowanie Twojego biznesu.</p>
|
|
</div>
|
|
<div class="d-flex align-content-center flex-wrap gap-2">
|
|
<a href="app-invoice-add.php" class="btn btn-primary">
|
|
<i class="bx bx-plus me-1"></i> Utwórz nową firmę
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div class="content-backdrop fade"></div>
|
|
|
|
<?php include '../../footer.php'; ?>
|
|
|
|
<script src="../../assets/vendor/libs/apex-charts/apexcharts.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
// Konfiguracja i kolory ze stylu szablonu
|
|
let cardColor = '#fff',
|
|
headingColor = '#566a7f',
|
|
axisColor = '#a1acb8',
|
|
borderColor = '#eceef1',
|
|
primaryColor = '#696cff',
|
|
infoColor = '#03c3ec';
|
|
|
|
// 1. Wykres Słupkowy - 12 Miesięcy (Przychody)
|
|
const sales12MonthsEl = document.querySelector('#sales12MonthsChart');
|
|
if (sales12MonthsEl) {
|
|
const sales12MonthsOptions = {
|
|
chart: {
|
|
height: 300,
|
|
type: 'bar',
|
|
toolbar: { show: false }
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 4,
|
|
columnWidth: '40%',
|
|
startingShape: 'rounded',
|
|
endingShape: 'rounded'
|
|
}
|
|
},
|
|
colors: [primaryColor],
|
|
dataLabels: { enabled: false },
|
|
series: [{
|
|
name: 'Sprzedaż Netto (zł)',
|
|
data: [12000, 15000, 14000, 18000, 22000, 19000, 25000, 21000, 17000, 23000, 21800, 24500]
|
|
}],
|
|
xaxis: {
|
|
categories: ['Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru', 'Sty', 'Lut', 'Mar'],
|
|
axisBorder: { show: false },
|
|
axisTicks: { show: false },
|
|
labels: { style: { colors: axisColor } }
|
|
},
|
|
yaxis: {
|
|
labels: { style: { colors: axisColor }, formatter: function (val) { return val / 1000 + "k"; } }
|
|
},
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
padding: { top: -20, bottom: -10, left: 10, right: 10 }
|
|
}
|
|
};
|
|
const sales12MonthsChart = new ApexCharts(sales12MonthsEl, sales12MonthsOptions);
|
|
sales12MonthsChart.render();
|
|
}
|
|
|
|
// 2. Wykres Liniowy - Porównanie Rok do Roku (YoY)
|
|
const salesYoYEl = document.querySelector('#salesYoYChart');
|
|
if (salesYoYEl) {
|
|
const salesYoYOptions = {
|
|
chart: {
|
|
height: 300,
|
|
type: 'line',
|
|
toolbar: { show: false }
|
|
},
|
|
stroke: {
|
|
width: [2, 2, 2],
|
|
curve: 'smooth'
|
|
},
|
|
colors: [primaryColor, infoColor, '#ffab00'], // Lata 2026, 2025, 2024
|
|
series: [
|
|
{ name: '2026', data: [15, 21.8, 24.5, null, null, null, null, null, null, null, null, null] },
|
|
{ name: '2025', data: [12, 14, 18, 20, 25, 22, 28, 29, 31, 26, 33, 35] },
|
|
{ name: '2024', data: [10, 11, 13, 14, 17, 16, 20, 21, 23, 22, 25, 28] }
|
|
],
|
|
legend: {
|
|
show: true,
|
|
position: 'top',
|
|
horizontalAlign: 'start',
|
|
labels: { colors: headingColor }
|
|
},
|
|
xaxis: {
|
|
categories: ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'],
|
|
axisBorder: { show: false },
|
|
axisTicks: { show: false },
|
|
labels: { style: { colors: axisColor } }
|
|
},
|
|
yaxis: {
|
|
show: false // Ukrywamy oś Y by wykres był czystszy (trend jest widoczny z tooltipów)
|
|
},
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
padding: { top: 0, bottom: -10, left: 10, right: 10 }
|
|
}
|
|
};
|
|
const salesYoYChart = new ApexCharts(salesYoYEl, salesYoYOptions);
|
|
salesYoYChart.render();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|