BartekGit/magico.prototype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Invocie: Widok raportów i przykład pierwszego raportu.

Browse Source
This commit is contained in:
Bartek
2026-03-07 13:17:08 +01:00
parent a0a4cd28aa
commit c63e7e6c9c
4 changed files with 815 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
prototype/invoice/app-report-sales.php Normal file
View File

@@ -0,0 +1,267 @@
<?php
$enablePrototypeComments = true;
include '../../header-invoice.php';
?>
<div class="container-xxl flex-grow-1 container-p-y">
<!-- Vendors CSS dla Select2 i Flatpickr -->
<link rel="stylesheet" href="../../assets/vendor/libs/select2/select2.css" />
<link rel="stylesheet" href="../../assets/vendor/libs/flatpickr/flatpickr.css" />
<!-- Nagłówek i przyciski akcji -->
<div
class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
<div>
<h4 class="fw-bold mb-1">
<span class="text-muted fw-light">Raporty /</span> Raport kwotowy sprzedaży
</h4>
<p class="text-muted mb-0">Zestawienie wygenerowanych przychodów ze sprzedaży we wskazanym okresie.</p>
</div>
<div class="d-flex gap-2">
<button class="btn btn-label-secondary">
<i class="bx bx-export me-1"></i> Eksportuj CSV
</button>
<button class="btn btn-primary">
<i class="bx bx-printer me-1"></i> Drukuj raport
</button>
</div>
</div>
<!-- Karta filtrów -->
<div class="card mb-4">
<div class="card-body">
<form class="row g-3">
<div class="col-12 col-md-4">
<label class="form-label" for="reportDateRange">Zakres dat</label>
<div class="input-group input-group-merge">
<span class="input-group-text"><i class="bx bx-calendar"></i></span>
<input type="text" id="reportDateRange" class="form-control flatpickr-range"
placeholder="Wybierz okres (od - do)" value="2026-01-01 do 2026-06-30" />
</div>
</div>
<div class="col-12 col-md-4">
<label class="form-label" for="reportGranularity">Szczegółowość</label>
<select id="reportGranularity" class="form-select select2">
<option value="days">Dni</option>
<option value="months" selected>Miesiące</option>
<option value="years">Lata</option>
</select>
<small id="daysLimitInfo" class="text-muted d-none mt-1 d-block">
<i class="bx bx-info-circle fs-6 align-middle me-1"></i>Maksymalny okres dla tej opcji wynosi 366 dni.
</small>
</div>
<div class="col-12 col-md-4 d-flex align-items-end">
<button type="button" class="btn btn-primary w-100 w-md-auto">
<i class="bx bx-refresh me-1"></i> Generuj
</button>
</div>
</form>
</div>
</div>
<!-- Karta z wykresem -->
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="card-title m-0">Przychody netto w czasie</h5>
</div>
<div class="card-body">
<div id="salesReportChart" style="min-height: 350px;"></div>
</div>
</div>
<!-- Karta z tabelą danych -->
<div class="card">
<div class="card-header border-bottom">
<h5 class="card-title m-0">Szczegółowe zestawienie</h5>
</div>
<div class="table-responsive text-nowrap">
<table class="table table-hover">
<thead class="table-light">
<tr>
<th>Okres (Miesiąc)</th>
<th class="text-center">Ilość dokumentów</th>
<th class="text-end">Suma Kwot Netto</th>
<th class="text-end">Suma Kwot VAT</th>
<th class="text-end">Suma Kwot Brutto</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fw-medium">Styczeń 2026</td>
<td class="text-center">15</td>
<td class="text-end">24 500.00 zł</td>
<td class="text-end">5 635.00 zł</td>
<td class="text-end fw-bold text-heading">30 135.00 zł</td>
</tr>
<tr>
<td class="fw-medium">Luty 2026</td>
<td class="text-center">21</td>
<td class="text-end">31 200.00 zł</td>
<td class="text-end">7 176.00 zł</td>
<td class="text-end fw-bold text-heading">38 376.00 zł</td>
</tr>
<tr>
<td class="fw-medium">Marzec 2026</td>
<td class="text-center">18</td>
<td class="text-end">28 450.00 zł</td>
<td class="text-end">6 543.50 zł</td>
<td class="text-end fw-bold text-heading">34 993.50 zł</td>
</tr>
<tr>
<td class="fw-medium">Kwiecień 2026</td>
<td class="text-center">24</td>
<td class="text-end">36 800.00 zł</td>
<td class="text-end">8 464.00 zł</td>
<td class="text-end fw-bold text-heading">45 264.00 zł</td>
</tr>
<tr>
<td class="fw-medium">Maj 2026</td>
<td class="text-center">12</td>
<td class="text-end">19 100.00 zł</td>
<td class="text-end">4 393.00 zł</td>
<td class="text-end fw-bold text-heading">23 493.00 zł</td>
</tr>
<tr>
<td class="fw-medium">Czerwiec 2026</td>
<td class="text-center">30</td>
<td class="text-end">42 500.00 zł</td>
<td class="text-end">9 775.00 zł</td>
<td class="text-end fw-bold text-heading">52 275.00 zł</td>
</tr>
</tbody>
<tfoot class="table-light fw-bold">
<tr>
<td>Podsumowanie całkowite</td>
<td class="text-center">120</td>
<td class="text-end text-primary">182 550.00 zł</td>
<td class="text-end text-primary">41 986.50 zł</td>
<td class="text-end text-primary fs-5">224 536.50 zł</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<?php include '../../footer.php'; ?>
<!-- Vendors JS -->
<script src="../../assets/vendor/libs/select2/select2.js"></script>
<script src="../../assets/vendor/libs/flatpickr/flatpickr.js"></script>
<!-- ApexCharts scripts and local chart init -->
<script src="../../assets/vendor/libs/apex-charts/apexcharts.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 1. Inicjalizacja Flatpickr dla zakresu dat
if (typeof flatpickr !== 'undefined') {
const dateRangeEl = document.querySelector('.flatpickr-range');
if (dateRangeEl) {
flatpickr(dateRangeEl, {
mode: 'range',
dateFormat: 'Y-m-d',
locale: 'pl'
});
}
}
// 2. Inicjalizacja Select2
if (typeof $ !== 'undefined' && $('.select2').length) {
$('.select2').select2({
minimumResultsForSearch: Infinity // Ukrywamy search jeśli to tylko 3 opcje
});
// Obsługa pojawiania się podpowiedzi po wybraniu z selecta
$('#reportGranularity').on('change', function () {
const daysInfo = document.getElementById('daysLimitInfo');
if (this.value === 'days') {
daysInfo.classList.remove('d-none');
} else {
daysInfo.classList.add('d-none');
}
});
// Triggerujemy change dla zainicjowania stanu ukrycia/pokazania podczas ładowania
$('#reportGranularity').trigger('change');
}
// 3. Inicjalizacja Wykresu
const chartEl = document.querySelector('#salesReportChart');
if (chartEl && typeof ApexCharts !== 'undefined') {
const chartConfig = {
chart: {
height: 350,
type: 'bar', // lub 'line' / 'area' w zależności od preferencji, bar dobrze działa do zestawień miesięcznych
parentHeightOffset: 0,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
borderRadius: 4,
columnWidth: '40%',
startingShape: 'rounded',
endingShape: 'rounded'
}
},
dataLabels: {
enabled: false
},
series: [{
name: 'Przychody netto (PLN)',
data: [24500, 31200, 28450, 36800, 19100, 42500]
}],
xaxis: {
categories: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec'],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: '#a1acb8',
fontSize: '13px'
}
}
},
yaxis: {
labels: {
formatter: function (val) {
return val.toLocaleString('pl-PL') + " zł";
},
style: {
colors: '#a1acb8',
fontSize: '13px'
}
}
},
colors: ['#696cff'], // Kolor primary bootstrapa z szablonu Sneat
grid: {
borderColor: '#e9ecef',
strokeDashArray: 4,
padding: {
top: -20,
bottom: -10,
left: 20,
right: 20
}
},
tooltip: {
y: {
formatter: function (val) {
return val.toLocaleString('pl-PL') + " zł";
}
}
}
};
const salesChart = new ApexCharts(chartEl, chartConfig);
salesChart.render();
}
});
</script>

117
prototype/invoice/app-reports.php Normal file
View File

@@ -0,0 +1,117 @@
<?php
$enablePrototypeComments = true;
include '../../header-invoice.php';
?>
<div class="container-xxl flex-grow-1 container-p-y">
<!-- Header with description -->
<div class="card p-0 mb-4">
<div class="card-body d-flex flex-column flex-md-row justify-content-between p-0">
<!-- Left image -->
<div class="d-none d-md-flex app-academy-md-25 card-body py-0 pt-3 ps-5 align-items-center">
<img src="../../assets/img/illustrations/bulb-light.png" width="90" class="img-fluid" alt="Bulb"
data-app-light-img="illustrations/bulb-light.png" data-app-dark-img="illustrations/bulb-dark.png">
</div>
<!-- Center context -->
<div class="app-academy-md-50 card-body d-flex align-items-md-center flex-column text-md-center mb-1 py-5">
<h4 class="card-title mb-4 px-md-12 lh-base fw-bold">
Analizuj i wizualizuj dane finansowe<br>
w <span class="text-primary text-nowrap">przejrzystych raportach</span>.
</h4>
<p class="mb-4 col-md-10 text-muted">
Poniżej prezentujemy dostępne raporty, które pomogą Ci śledzić i analizować kondycję finansową
Twojej firmy.
Monitoruj przychody, koszty oraz rentowność, wybierając odpowiedni typ zestawienia, a następnie
dostosuj
jego parametry czasowe żeby wygenerować dokument dla pożądanego okresu.
</p>
</div>
<!-- Right image -->
<div class="d-none d-md-flex app-academy-md-25 align-items-end justify-content-end pe-4 pb-2">
<img src="../../assets/img/illustrations/pencil-rocket.png" alt="pencil rocket" height="150"
class="scaleX-n1-rtl">
</div>
</div>
</div>
<!-- Reports Gallery -->
<div class="card p-4">
<div class="row">
<!-- Raport kwotowy sprzedaży -->
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card p-2 h-100 shadow-none border">
<div class="card-body p-4 pt-2 d-flex flex-column">
<div class="d-flex justify-content-between align-items-center mb-4">
<span class="badge bg-label-success">Przychody</span>
</div>
<a href="javascript:void(0);" class="h5 mb-2 fw-semibold">Raport kwotowy sprzedaży</a>
<p class="mt-1 text-muted mb-4 flex-grow-1">
Szczegółowe zestawienie wygenerowanych przychodów ze sprzedaży we wskazanym okresie.
Pozwala przeanalizować jakie towary i usługi przynoszą największy obrót.
</p>
<div class="d-flex flex-column flex-md-row gap-4 mt-auto">
<a class="w-100 btn btn-label-primary d-flex align-items-center justify-content-center"
href="app-report-sales.php">
<span class="me-2">Wygeneruj</span>
<i class="bx bx-chevron-right icon-sm lh-1 scaleX-n1-rtl"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Raport kwotowy kosztów -->
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card p-2 h-100 shadow-none border">
<div class="card-body p-4 pt-2 d-flex flex-column">
<div class="d-flex justify-content-between align-items-center mb-4">
<span class="badge bg-label-danger">Koszty i wydatki</span>
</div>
<a href="javascript:void(0);" class="h5 mb-2 fw-semibold">Raport kwotowy kosztów</a>
<p class="mt-1 text-muted mb-4 flex-grow-1">
Analiza poniesionych wydatków i kosztów firmowych z podziałem na kategorie oraz sprzedawców,
ułatwiająca zlokalizowanie kluczowych obszarów wydatków.
</p>
<div class="d-flex flex-column flex-md-row gap-4 mt-auto">
<a class="w-100 btn btn-label-primary d-flex align-items-center justify-content-center"
href="javascript:void(0);">
<span class="me-2">Wygeneruj</span>
<i class="bx bx-chevron-right icon-sm lh-1 scaleX-n1-rtl"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Bilans zysków i strat -->
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card p-2 h-100 shadow-none border">
<div class="card-body p-4 pt-2 d-flex flex-column">
<div class="d-flex justify-content-between align-items-center mb-4">
<span class="badge bg-label-info">Podsumowanie całkowite</span>
</div>
<a href="javascript:void(0);" class="h5 mb-2 fw-semibold">Bilans zysków i strat</a>
<p class="mt-1 text-muted mb-4 flex-grow-1">
Kompleksowe zestawienie przychodów oraz kosztów. Generuje automatyczne wyliczenia podatków
oraz ilustruje całkowitą rentowność i ogólny wynik finansowy w podanym przedziale czasowym.
</p>
<div class="d-flex flex-column flex-md-row gap-4 mt-auto">
<a class="w-100 btn btn-label-primary d-flex align-items-center justify-content-center"
href="javascript:void(0);">
<span class="me-2">Wygeneruj</span>
<i class="bx bx-chevron-right icon-sm lh-1 scaleX-n1-rtl"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include '../../footer.php'; ?>

425
prototype/invoice/index.php Normal file
View File

@@ -0,0 +1,425 @@
<?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-purchase-add.php" class="btn btn-label-secondary">
<i class="bx bx-plus me-1"></i> Dodaj koszt
</a>
<a href="app-invoice-add.php" class="btn btn-primary">
<i class="bx bx-plus me-1"></i> Wystaw fakturę
</a>
</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>

6
prototype/invoice/menu.php
View File

@@ -65,6 +65,12 @@ $currentPage = basename($_SERVER['PHP_SELF']);
<div class="text-truncate" data-i18n="Kontrahenci">Kontrahenci</div>
</a>
</li>
<li class="menu-item <?php echo ($currentPage == 'app-reports.php') ? 'active' : ''; ?>">
<a href="app-reports.php" class="menu-link">
<i class="menu-icon tf-icons bx bx-bar-chart-alt-2"></i>
<div class="text-truncate" data-i18n="Raporty">Raporty</div>
</a>
</li>
<li
class="menu-item <?php echo ($currentPage == 'sys-export.php' || $currentPage == 'sys-dictionaries.php' || $currentPage == 'sys-settings.php' || $currentPage == 'sys-logs.php') ? 'active open' : ''; ?>">