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

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>