418 lines
20 KiB
PHP
418 lines
20 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>
|
|
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-5 g-4 mb-4">
|
|
|
|
<div class="col">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2 pb-1">
|
|
<div class="avatar me-2">
|
|
<span class="avatar-initial rounded bg-label-primary"><i
|
|
class='bx bx-trending-up fs-4'></i></span>
|
|
</div>
|
|
<h4 class="ms-1 mb-0 text-nowrap">24 500 zł</h4>
|
|
</div>
|
|
<p class="mb-1 fw-medium text-heading">Sprzedaż (Ten miesiąc)</p>
|
|
<p class="mb-0 text-muted small">
|
|
<span class="text-success fw-medium"><i class='bx bx-up-arrow-alt'></i> +12.4%</span> vs zeszły
|
|
m-c
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2 pb-1">
|
|
<div class="avatar me-2">
|
|
<span class="avatar-initial rounded bg-label-secondary"><i
|
|
class='bx bx-calendar fs-4'></i></span>
|
|
</div>
|
|
<h4 class="ms-1 mb-0 text-nowrap">21 800 zł</h4>
|
|
</div>
|
|
<p class="mb-1 fw-medium text-heading">Sprzedaż (Poprzedni m-c)</p>
|
|
<p class="mb-0 text-muted small">Zamknięty okres rozliczeniowy</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2 pb-1">
|
|
<div class="avatar me-2">
|
|
<span class="avatar-initial rounded bg-label-success"><i
|
|
class='bx bx-wallet fs-4'></i></span>
|
|
</div>
|
|
<h4 class="ms-1 mb-0 text-nowrap">15 200 zł</h4>
|
|
</div>
|
|
<p class="mb-1 fw-medium text-heading">Należności</p>
|
|
<p class="mb-0 text-muted small">Niezapłacone faktury (w terminie)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="card h-100 border border-danger">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2 pb-1">
|
|
<div class="avatar me-2">
|
|
<span class="avatar-initial rounded bg-label-danger"><i
|
|
class='bx bx-error-circle fs-4'></i></span>
|
|
</div>
|
|
<h4 class="ms-1 mb-0 text-danger text-nowrap">4 350 zł</h4>
|
|
</div>
|
|
<p class="mb-1 fw-medium text-danger">Po terminie</p>
|
|
<p class="mb-0 text-muted small">5 dokumentów wymaga uwagi</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2 pb-1">
|
|
<div class="avatar me-2">
|
|
<span class="avatar-initial rounded bg-label-warning"><i
|
|
class='bx bx-credit-card-front fs-4'></i></span>
|
|
</div>
|
|
<h4 class="ms-1 mb-0 text-nowrap">8 100 zł</h4>
|
|
</div>
|
|
<p class="mb-1 fw-medium text-heading">Zobowiązania</p>
|
|
<p class="mb-0 text-muted small">Twoje koszty do opłacenia</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row mb-4 g-4">
|
|
|
|
<div class="col-lg-8">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">Sprzedaż netto (Ostatnie 12 miesięcy)</h5>
|
|
<div class="dropdown">
|
|
<button class="btn p-0" type="button" data-bs-toggle="dropdown"><i
|
|
class="bx bx-dots-vertical-rounded"></i></button>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a class="dropdown-item" href="javascript:void(0);">Pobierz jako raport</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="sales12MonthsChart" style="min-height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">Porównanie Rok do Roku</h5>
|
|
<select class="form-select form-select-sm w-auto">
|
|
<option value="3" selected>Ost. 3 lata</option>
|
|
<option value="5">Ost. 5 lat</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="salesYoYChart" style="min-height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row g-4">
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header border-bottom d-flex justify-content-between align-items-center px-3 py-2">
|
|
<h5 class="card-title mb-0 pt-1 px-2">Wymaga uwagi</h5>
|
|
<ul class="nav nav-pills card-header-pills" role="tablist">
|
|
<li class="nav-item">
|
|
<button type="button" class="nav-link active btn-sm" data-bs-toggle="tab"
|
|
data-bs-target="#tab-debtors">Dłużnicy</button>
|
|
</li>
|
|
<li class="nav-item ms-2">
|
|
<button type="button" class="nav-link btn-sm" data-bs-toggle="tab"
|
|
data-bs-target="#tab-payables">Do zapłaty</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="tab-content p-0">
|
|
|
|
<div class="tab-pane fade show active" id="tab-debtors">
|
|
<div class="table-responsive text-nowrap">
|
|
<table class="table table-hover table-sm align-middle mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="ps-4">Klient</th>
|
|
<th>Nr Faktury</th>
|
|
<th class="text-center">Dni zwłoki</th>
|
|
<th class="text-end pe-4">Kwota</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-border-bottom-0">
|
|
<tr>
|
|
<td class="ps-4 fw-medium text-heading">Gmina Stalowa Wola</td>
|
|
<td><a href="#">FV/02/2026</a></td>
|
|
<td class="text-center"><span class="badge bg-label-danger">14 dni</span>
|
|
</td>
|
|
<td class="text-end pe-4 fw-bold">1 250,00 zł</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-4 fw-medium text-heading">TechSolutions Sp. z o.o.</td>
|
|
<td><a href="#">FV/01/2026</a></td>
|
|
<td class="text-center"><span class="badge bg-label-warning">5 dni</span>
|
|
</td>
|
|
<td class="text-end pe-4 fw-bold">3 100,00 zł</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-3 text-center border-top">
|
|
<a href="app-invoice-list.php" class="btn btn-label-primary btn-sm">Zobacz faktury
|
|
nierozliczone</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="tab-payables">
|
|
<div class="table-responsive text-nowrap">
|
|
<table class="table table-hover table-sm align-middle mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="ps-4">Dostawca</th>
|
|
<th>Termin</th>
|
|
<th class="text-end pe-4">Kwota</th>
|
|
<th style="width: 50px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-border-bottom-0">
|
|
<tr>
|
|
<td class="ps-4 fw-medium text-heading">Tauron Polska</td>
|
|
<td><span class="text-danger fw-bold">Wczoraj</span></td>
|
|
<td class="text-end pe-4 fw-bold">1 450,20 zł</td>
|
|
<td><button class="btn btn-sm btn-icon btn-label-success"
|
|
title="Oznacz jako zapłacone"><i class="bx bx-check"></i></button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-4 fw-medium text-heading">Orange S.A.</td>
|
|
<td>Za 2 dni</td>
|
|
<td class="text-end pe-4 fw-bold">150,00 zł</td>
|
|
<td><button class="btn btn-sm btn-icon btn-label-success"
|
|
title="Oznacz jako zapłacone"><i class="bx bx-check"></i></button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-3 text-center border-top">
|
|
<a href="app-purchase-list.php" class="btn btn-label-primary btn-sm">Zobacz wszystkie
|
|
koszty</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header border-bottom d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0"><i class='bx bx-cloud-download text-primary me-2'></i>Ostatnio pobrane z
|
|
KSeF</h5>
|
|
<button class="btn btn-sm btn-label-secondary" title="Sprawdź nowe dokumenty"><i
|
|
class="bx bx-refresh"></i></button>
|
|
</div>
|
|
<div class="table-responsive text-nowrap">
|
|
<table class="table table-hover table-sm align-middle mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="ps-4">Wystawca</th>
|
|
<th>Numer KSeF</th>
|
|
<th class="text-end">Kwota Brutto</th>
|
|
<th class="text-end pe-4">Pobrano</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-border-bottom-0">
|
|
<tr>
|
|
<td class="ps-4">
|
|
<span class="fw-medium text-heading">Orlen S.A.</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-muted small">...3C4D5E-6F</span>
|
|
</td>
|
|
<td class="text-end fw-bold">350,00 zł</td>
|
|
<td class="text-end pe-4"><span class="badge bg-label-info">15 min temu</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-4">
|
|
<span class="fw-medium text-heading">PGE Obrót S.A.</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-muted small">...A8B9C0-11</span>
|
|
</td>
|
|
<td class="text-end fw-bold">1 200,45 zł</td>
|
|
<td class="text-end pe-4"><span class="badge bg-label-secondary">2 godz. temu</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-4">
|
|
<span class="fw-medium text-heading">Castorama Polska</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-muted small">...F1A2D3-44</span>
|
|
</td>
|
|
<td class="text-end fw-bold">840,00 zł</td>
|
|
<td class="text-end pe-4"><span class="badge bg-label-secondary">Wczoraj</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-4">
|
|
<span class="fw-medium text-heading">Poczta Polska S.A.</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-muted small">...E5F6A7-99</span>
|
|
</td>
|
|
<td class="text-end fw-bold">12,50 zł</td>
|
|
<td class="text-end pe-4"><span class="badge bg-label-secondary">Wczoraj</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="card-footer border-top text-center py-2">
|
|
<a href="app-purchase-list.php" class="text-primary small fw-medium">Przejdź do listy faktur
|
|
zakupowych</a>
|
|
</div>
|
|
</div>
|
|
</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>
|