Nowa aplikacja: Company - widok informacji o firmie
This commit is contained in:
349
prototype/invoice/app-report-customers.php
Normal file
349
prototype/invoice/app-report-customers.php
Normal file
@@ -0,0 +1,349 @@
|
||||
<?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> Ranking klientów
|
||||
</h4>
|
||||
<p class="text-muted mb-0">Zestawienie kontrahentów generujących największy przychód (Top Nabywców).</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="reportLimit">Zakres danych</label>
|
||||
<select id="reportLimit" class="form-select select2">
|
||||
<option value="10" selected>Top 10</option>
|
||||
<option value="50">Top 50</option>
|
||||
<option value="all">Wszyscy</option>
|
||||
</select>
|
||||
</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>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Wykres - zajmuje prawą stronę na dużym ekranie, bądź górę -->
|
||||
<div class="col-12">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title m-0">Wykres Top 10 Odbiorców</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="customersReportChart" style="min-height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabela -->
|
||||
<div class="col-12">
|
||||
<div class="card h-100">
|
||||
<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 table-sm align-middle">
|
||||
<thead class="table-light sticky-top">
|
||||
<tr>
|
||||
<th class="text-center" style="width: 50px;">Miejsce</th>
|
||||
<th>Kontrahent</th>
|
||||
<th class="text-center">Dokumenty</th>
|
||||
<th class="text-end">Kwota Netto</th>
|
||||
<th style="width: 120px;">Udział %</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar avatar-sm mx-auto">
|
||||
<span
|
||||
class="avatar-initial rounded-circle bg-label-warning fw-bold fs-6">1</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">TechSolutions Sp. z o.o.</span>
|
||||
<small class="text-muted">NIP: 813-345-67-89</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">24</td>
|
||||
<td class="text-end fw-bold">64 500.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 35.3%"
|
||||
aria-valuenow="35.3" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">35%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar avatar-sm mx-auto">
|
||||
<span class="avatar-initial rounded-circle bg-label-secondary fw-bold fs-6"
|
||||
style="color:#788393 !important;">2</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">Gmina Stalowa Wola</span>
|
||||
<small class="text-muted">NIP: 865-123-44-55</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">8</td>
|
||||
<td class="text-end fw-bold">42 800.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 23.4%"
|
||||
aria-valuenow="23.4" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">23%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar avatar-sm mx-auto">
|
||||
<span class="avatar-initial rounded-circle bg-label-danger fw-bold fs-6"
|
||||
style="color:#ffb400 !important; background-color: #fff2d6 !important;">3</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">Kwiaciarnia "Róża"</span>
|
||||
<small class="text-muted">NIP: 734-111-22-33</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">45</td>
|
||||
<td class="text-end fw-bold">31 200.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 17.1%"
|
||||
aria-valuenow="17.1" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">17%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><span class="text-muted fw-bold">4</span></td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">F.H.U Jan Kowalski</span>
|
||||
<small class="text-muted">NIP: 555-666-77-88</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">12</td>
|
||||
<td class="text-end fw-bold">18 500.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 10.1%"
|
||||
aria-valuenow="10.1" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">10%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><span class="text-muted fw-bold">5</span></td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">Piekarnia "Złoty Kłos"</span>
|
||||
<small class="text-muted">NIP: 123-456-78-90</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">31</td>
|
||||
<td class="text-end fw-bold">15 400.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 8.4%"
|
||||
aria-valuenow="8.4" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">8%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><span class="text-muted fw-bold">6</span></td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">Sklep Rybny "Posejdon"</span>
|
||||
<small class="text-muted">NIP: 987-654-32-10</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">4</td>
|
||||
<td class="text-end fw-bold">10 150.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 5.6%"
|
||||
aria-valuenow="5.6" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">6%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="table-light fw-bold">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="text-center">124</td>
|
||||
<td class="text-end text-primary">182 550.00 zł</td>
|
||||
<td class="text-center">100%</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Inicjalizacja Wykresu (Horizontal Bar)
|
||||
const chartEl = document.querySelector('#customersReportChart');
|
||||
if (chartEl && typeof ApexCharts !== 'undefined') {
|
||||
const chartConfig = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 480, // Trochę wyższy by pomieścić wszystkie etykiety
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false }
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
horizontal: true, // Kluczowe by wykres był poziomy
|
||||
barHeight: '50%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
textAnchor: 'start',
|
||||
style: {
|
||||
colors: ['#fff']
|
||||
},
|
||||
formatter: function (val, opt) {
|
||||
return val.toLocaleString('pl-PL') + " zł";
|
||||
},
|
||||
offsetX: 0,
|
||||
},
|
||||
series: [{
|
||||
name: 'Przychody netto',
|
||||
data: [64500, 42800, 31200, 18500, 15400, 10150]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: [
|
||||
'TechSolutions Sp.', 'Gmina Stalowa Wola',
|
||||
'Kwiaciarnia "Róża"',
|
||||
'F.H.U Jan Kowalski',
|
||||
'Piekarnia Złoty Kłos',
|
||||
'Sklep Rybny Posejdon'
|
||||
],
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return (val / 1000) + "k";
|
||||
},
|
||||
style: { colors: '#a1acb8', fontSize: '13px' }
|
||||
},
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: '#566a7f', fontSize: '13px', fontWeight: 500 }
|
||||
}
|
||||
},
|
||||
colors: ['#696cff'], // Primary color
|
||||
grid: {
|
||||
borderColor: '#e9ecef',
|
||||
strokeDashArray: 4,
|
||||
xaxis: { lines: { show: true } },
|
||||
yaxis: { lines: { show: false } },
|
||||
padding: { top: -20, bottom: -10, left: 10, right: 10 }
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val.toLocaleString('pl-PL') + " zł";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const customersChart = new ApexCharts(chartEl, chartConfig);
|
||||
customersChart.render();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -64,6 +64,53 @@ include '../../header-invoice.php';
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ranking klientó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-success">Przychody</span>
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="h5 mb-2 fw-semibold">Ranking klientów</a>
|
||||
<p class="mt-1 text-muted mb-4 flex-grow-1">
|
||||
Zbiorcze zestawienie wszystkich kontrahentów ułożonych od generujących największy przychód
|
||||
do najmniejszego.
|
||||
Pomaga szybko zidentyfikować kluczowych nabywcó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="app-report-customers.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>
|
||||
|
||||
<!-- Analiza kontrahenta -->
|
||||
<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">Historia kontrahenta</a>
|
||||
<p class="mt-1 text-muted mb-4 flex-grow-1">
|
||||
Szczegółowa analiza sprzedaży dla wybranego, pojedynczego klienta.
|
||||
Ukazuje trendy, zestawienie poszczególnych faktur i dokumentów z danym kontrahentem.
|
||||
</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>
|
||||
|
||||
<!-- Raport kwotowy kosztów -->
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-2 h-100 shadow-none border">
|
||||
|
||||
@@ -11,14 +11,7 @@ include '../../header-invoice.php';
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user