Nowa aplikacja: Company - widok informacji o firmie

2026-03-07 18:03:23 +01:00
parent c63e7e6c9c
commit eed545736d
7 changed files with 972 additions and 8 deletions
--- a/prototype/company/index.php
+++ b/prototype/company/index.php
@@ -0,0 +1,131 @@
+<?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>