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

Company - wszystkie moduły - wersja robocza

Browse Source
This commit is contained in:
Bartek
2026-03-07 19:14:17 +01:00
parent eed545736d
commit f2e1fa6134
10 changed files with 2469 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
prototype/company/index.php
View File

@@ -3,129 +3,294 @@ $enablePrototypeComments = true;
include '../../header-invoice.php';
?>
<div class="container-fluid flex-grow-1 container-p-y">
<div class="container-xxl 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>
<h4 class="fw-bold py-3 mb-4">
Zarządzanie firmą <span class="text-muted fw-light">/ Kokpit</span>
</h4>
<!-- Baner Informacyjny -->
<div class="row mb-4">
<div class="col-12">
<div class="card bg-primary text-white text-center text-md-start"
style="background: linear-gradient(135deg, #696cff 0%, #a481ff 100%);">
<div
class="card-body d-flex flex-column flex-md-row justify-content-between align-items-center py-4 px-5">
<div class="mb-3 mb-md-0 d-flex gap-4 align-items-center">
<div
class="avatar avatar-lg bg-white rounded flex-shrink-0 d-flex align-items-center justify-content-center shadow-sm">
<i class="bx bx-buildings text-primary fs-2"></i>
</div>
<div>
<h5 class="text-white fw-bold mb-1">Centrum Dowodzenia Twojej Firmy</h5>
<p class="mb-0 text-white-50" style="max-width: 600px;">
Aplikacja <strong>company.magico</strong> to miejsce, w którym kontrolujesz cały swój
ekosystem. Od konfiguracji uprawnień i zapraszania współpracowników, po zarządzanie
rozliczeniami, modułami i danymi fakturowymi firmy.
</p>
</div>
</div>
<div>
<a href="app-company-info.php" class="btn btn-white text-primary shadow-sm fw-bold">
<i class="bx bx-cog me-2"></i> Konfiguracja danych
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 1. Sekcja KPI (Karty informacyjne) -->
<div class="row g-4 mb-4">
<!-- Aktywne aplikacje -->
<div class="col-sm-6 col-xl-3">
<div class="card h-100 shadow-sm border-0">
<div class="card-body">
<div class="d-flex align-items-start justify-content-between">
<div class="content-left">
<span class="text-muted text-uppercase small fw-bold" style="letter-spacing: 0.5px;">Aktywne
moduły</span>
<div class="d-flex align-items-end mt-2">
<h3 class="mb-0 me-2 text-dark">3 <span class="fs-6 fw-normal text-muted">/ 5</span>
</h3>
</div>
<small class="text-success"><i class="bx bx-check-circle"></i> Ekosystem działa
poprawnie</small>
</div>
<span class="badge bg-label-primary rounded p-2">
<i class="bx bx-grid-alt fs-4"></i>
</span>
</div>
</div>
</div>
</div>
<!-- Wielkość zespołu -->
<div class="col-sm-6 col-xl-3">
<div class="card h-100 shadow-sm border-0">
<div class="card-body">
<div class="d-flex align-items-start justify-content-between">
<div class="content-left">
<span class="text-muted text-uppercase small fw-bold" style="letter-spacing: 0.5px;">Twój
zespół</span>
<div class="d-flex align-items-end mt-2">
<h3 class="mb-0 me-2 text-dark">14</h3>
</div>
<small class="text-warning"><i class="bx bx-time"></i> 2 zaproszenia w toku</small>
</div>
<span class="badge bg-label-info rounded p-2">
<i class="bx bx-group fs-4"></i>
</span>
</div>
</div>
</div>
</div>
<!-- Najbliższa płatność -->
<div class="col-sm-6 col-xl-3">
<div class="card h-100 shadow-sm border-0 border-start border-danger border-3">
<div class="card-body">
<div class="d-flex align-items-start justify-content-between">
<div class="content-left">
<span class="text-muted text-uppercase small fw-bold"
style="letter-spacing: 0.5px;">Najbliższa płatność</span>
<div class="d-flex align-items-end mt-2">
<h3 class="mb-0 me-2 text-danger">365 zł</h3>
</div>
<small class="text-danger fw-semibold"><i class="bx bx-error-circle"></i> Płatność
opóźniona</small>
</div>
<span class="badge bg-label-danger rounded p-2">
<i class="bx bx-credit-card fs-4"></i>
</span>
</div>
</div>
</div>
</div>
<!-- Zużycie przestrzeni -->
<div class="col-sm-6 col-xl-3">
<div class="card h-100 shadow-sm border-0">
<div class="card-body">
<div class="d-flex align-items-start justify-content-between">
<div class="content-left">
<span class="text-muted text-uppercase small fw-bold"
style="letter-spacing: 0.5px;">Składnica plików</span>
<div class="d-flex align-items-end mt-2">
<h3 class="mb-0 me-2 text-dark">0.04 <span class="fs-6 fw-normal text-muted">GB</span>
</h3>
</div>
<small class="text-muted"><i class="bx bx-data"></i> Wykorzystano 1% z limitu</small>
</div>
<span class="badge bg-label-success rounded p-2">
<i class="bx bx-hdd fs-4"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Główny układ dwukolumnowy -->
<div class="row">
<!-- Lewa kolumna: Dziennik Aktywności (Timeline) -->
<div class="col-xl-8 mb-4 col-md-12">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center mb-3 border-bottom">
<h5 class="card-title m-0 me-2"><i class="bx bx-list-ol text-primary me-2"></i>Dziennik aktywności w
środowisku</h5>
<div class="dropdown">
<button class="btn p-0" type="button" id="timelineDropdown" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="bx bx-dots-vertical-rounded"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="timelineDropdown">
<a class="dropdown-item" href="javascript:void(0);">Cała historia</a>
<a class="dropdown-item" href="javascript:void(0);">Pobierz raport (.csv)</a>
</div>
</div>
</div>
<div class="card-body pt-4 mb-2 pb-0">
<ul class="timeline pb-0 mb-0">
<!-- Element 1 -->
<li class="timeline-item timeline-item-transparent border-primary">
<span class="timeline-indicator border-0 shadow-none bg-white">
<span class="timeline-point timeline-point-primary position-static m-0"></span>
</span>
<div class="timeline-event">
<div class="timeline-header">
<h6 class="mb-0">Zaktualizowano uprawnienia grupy</h6>
<small class="text-body-secondary">Dzisiaj, 14:30</small>
</div>
<p class="mt-3">Zmieniono reguły dostępu dla grupy <span
class="fw-semibold text-dark">"Kadra kierownicza"</span> w ramach aplikacji
<span class="badge bg-label-primary ms-1">invoice.magico</span>.
</p>
<div class="d-flex align-items-center mt-3">
<div class="avatar avatar-xs me-2">
<img src="../../assets/img/avatars/1.png" alt="Avatar" class="rounded-circle">
</div>
<span class="text-dark small fw-semibold">Jan Kowalski (Administrator)</span>
</div>
</div>
</li>
<!-- Element 2 -->
<li class="timeline-item timeline-item-transparent border-primary">
<span class="timeline-indicator border-0 shadow-none bg-white">
<span class="timeline-point timeline-point-primary position-static m-0"></span>
</span>
<div class="timeline-event">
<div class="timeline-header">
<h6 class="mb-0">Nowy członek zespołu</h6>
<small class="text-body-secondary">Wczoraj, 09:15</small>
</div>
<p class="mt-3 mb-3">Anna Nowak zaakceptowała Twoje zaproszenie e-mail i założyła
konto w portalu pracowniczym.</p>
</div>
</li>
<!-- Element 3 -->
<li class="timeline-item timeline-item-transparent border-primary">
<span class="timeline-indicator border-0 shadow-none bg-white">
<span class="timeline-point timeline-point-primary position-static m-0"></span>
</span>
<div class="timeline-event">
<div class="timeline-header">
<h6 class="mb-0">Moduł helpdesk aktywny</h6>
<small class="text-body-secondary">Poniedziałek, 12:00</small>
</div>
<p class="mt-3 mb-3">Rozpoczęto naliczanie opłat za nową aplikację <span
class="badge bg-label-warning ms-1">helpdesk.magico</span>. Dostęp przyznano dla
4 stanowisk.</p>
</div>
</li>
<!-- Element 4 -->
<li class="timeline-item timeline-item-transparent border-transparent pb-0">
<span class="timeline-indicator border-0 shadow-none bg-white">
<span class="timeline-point timeline-point-primary position-static m-0"></span>
</span>
<div class="timeline-event pb-0">
<div class="timeline-header">
<h6 class="mb-0">Wygenerowano nową fakturę VAT</h6>
<small class="text-body-secondary">01.03.2026, 06:05</small>
</div>
<p class="mt-3 mb-0">System przygotował rozliczenie dokumentem <span
class="fw-semibold text-primary">5/05/2025</span> za kolejny okres cykliczny.
</p>
</div>
</li>
</ul>
</div>
<div class="card-footer border-top bg-transparent text-center">
<a href="javascript:void(0)" class="text-primary btn-link">Załaduj starsze wydarzenia <i
class="bx bx-chevron-down"></i></a>
</div>
</div>
</div>
<!-- Prawa kolumna: Skróty i Nowości -->
<div class="col-xl-4 col-md-12">
<!-- Szybkie akcje -->
<div class="card mb-4">
<div class="card-header border-bottom">
<h6 class="m-0 text-uppercase fw-bold text-muted" style="letter-spacing: 0.5px;">Szybkie akcje</h6>
</div>
<div class="card-body pt-3 pb-3">
<div class="d-grid gap-2">
<a href="app-team.php"
class="btn btn-outline-secondary d-flex justify-content-between align-items-center text-start">
<span><i class="bx bx-user-plus me-2 text-primary"></i> Zaproś pracownika</span>
<i class="bx bx-chevron-right text-muted"></i>
</a>
<a href="app-billing.php"
class="btn btn-outline-secondary d-flex justify-content-between align-items-center text-start">
<span><i class="bx bx-credit-card mx-0 me-2 text-primary"></i> Twoje płatności i
faktury</span>
<i class="bx bx-chevron-right text-muted"></i>
</a>
<a href="app-services.php"
class="btn btn-outline-secondary d-flex justify-content-between align-items-center text-start">
<span><i class="bx bx-grid-alt me-2 text-primary"></i> Przeglądaj aplikacje</span>
<i class="bx bx-chevron-right text-muted"></i>
</a>
</div>
</div>
</div>
<!-- Magico News / Baner informacyjny -->
<div class="card bg-primary text-white text-center rounded shadow-sm border-0"
style="background: linear-gradient(135deg, #696cff 0%, #a481ff 100%);">
<div class="card-body py-5">
<div class="badge bg-white text-primary mb-3 rounded-pill px-3 py-2 fw-bold shadow-sm">magico
roadmap 2026</div>
<h5 class="text-white fw-bold mt-2 mb-3">Integracja KSeF gotowa do uruchomienia</h5>
<p class="text-white-50 mb-4 px-2">Zabezpiecz procesy fakturowania w swojej firmie przed nowymi
regulacjami państwowymi jednym przyciskiem.</p>
<a href="#" class="btn btn-white text-primary shadow-sm"><i class="bx bx-book-open me-2"></i>
Przeczytaj instrukcję</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>