Company - wszystkie moduły - wersja robocza
This commit is contained in:
257
prototype/company/app-billing.php
Normal file
257
prototype/company/app-billing.php
Normal file
@@ -0,0 +1,257 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
<h4 class="fw-bold py-3 mb-4">
|
||||
<span class="text-muted fw-light">Zarządzanie firmą /</span> Rozliczenia
|
||||
</h4>
|
||||
|
||||
<!-- Karta: Rozliczenia (Podsumowanie) -->
|
||||
<div class="card mb-4">
|
||||
<h5 class="card-header border-bottom">Rozliczenia</h5>
|
||||
<div class="card-body pt-5 pb-5">
|
||||
|
||||
<!-- Wycentrowany Alert z tłem ze screena -->
|
||||
<div class="d-flex justify-content-center mb-5">
|
||||
<div class="p-3 rounded text-white d-inline-flex align-items-center shadow-sm"
|
||||
style="background-color: #f04e76; font-weight: 500; width: 100%; max-width: 800px;">
|
||||
<i class='bx bxs-error-alt me-2 fs-5'></i>
|
||||
Dokonaj płatności aby zachować subskrypcję. Usługi pozostaną aktywne do 2026-03-31.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Parametry -->
|
||||
<div class="d-flex flex-column flex-md-row justify-content-center gap-5">
|
||||
<div class="text-start">
|
||||
<small class="text-muted text-uppercase fw-semibold" style="letter-spacing: 0.5px;">Aktualny okres
|
||||
rozliczeniowy:</small>
|
||||
<h5 class="mt-2 mb-0 fw-bold text-dark">2026-03-01 - 2026-03-31</h5>
|
||||
</div>
|
||||
|
||||
<div class="text-start">
|
||||
<small class="text-muted text-uppercase fw-semibold" style="letter-spacing: 0.5px;">Szacowane
|
||||
rozliczenie</small>
|
||||
<h3 class="mt-1 mb-1 fw-bold" style="color: #696cff;">425 zł</h3>
|
||||
<small class="text-muted">Następna płatność:: 2026-04-01</small>
|
||||
</div>
|
||||
|
||||
<div class="text-start">
|
||||
<small class="text-muted text-uppercase fw-semibold" style="letter-spacing: 0.5px;">Ilość miejsca na
|
||||
dysku</small>
|
||||
<h3 class="mt-1 mb-0 fw-bold" style="color: #696cff;">0.04 GB</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta: Historia płatności -->
|
||||
<div class="card">
|
||||
<h5 class="card-header border-bottom">Historia płatności</h5>
|
||||
<div class="table-responsive text-nowrap pb-2">
|
||||
<table class="table table-hover">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="fw-bold">Nr dokumentu</th>
|
||||
<th class="fw-bold">Status</th>
|
||||
<th class="fw-bold">Kwota (netto)</th>
|
||||
<th class="fw-bold">Data wystawienia</th>
|
||||
<th class="fw-bold">Faktura VAT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-border-bottom-0">
|
||||
|
||||
<!-- Wiersz 1 -->
|
||||
<tr>
|
||||
<td><a href="#" class="fw-bold text-primary">5/05/2025</a></td>
|
||||
<td><span class="badge bg-label-warning px-2 py-1" style="font-size: 0.75rem;">Opóźniona</span>
|
||||
</td>
|
||||
<td class="fw-semibold">365 zł</td>
|
||||
<td class="text-dark">2025-06-01</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap disabled"
|
||||
style="background-color: #f8f9fa;"><i class="bx bx-cloud-download me-1"></i> Faktura
|
||||
VAT</button>
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap"><i
|
||||
class="bx bx-cloud-download me-1"></i> Faktura proforma</button>
|
||||
|
||||
<span class="text-muted mx-2">|</span>
|
||||
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap" data-bs-toggle="modal"
|
||||
data-bs-target="#billingDetailsModal">
|
||||
<i class="bx bx-list-ul me-1"></i> Szczegóły
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap"
|
||||
style="background-color: #f8f9fa;">
|
||||
<i class="bx bx-credit-card me-1"></i> company.payonline
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Wiersz 2 -->
|
||||
<tr>
|
||||
<td><a href="#" class="fw-bold text-primary">5/02/2025</a></td>
|
||||
<td><span class="badge bg-label-warning px-2 py-1" style="font-size: 0.75rem;">Opóźniona</span>
|
||||
</td>
|
||||
<td class="fw-semibold">345 zł</td>
|
||||
<td class="text-dark">2025-03-10</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap disabled"
|
||||
style="background-color: #f8f9fa;"><i class="bx bx-cloud-download me-1"></i> Faktura
|
||||
VAT</button>
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap"><i
|
||||
class="bx bx-cloud-download me-1"></i> Faktura proforma</button>
|
||||
|
||||
<span class="text-muted mx-2">|</span>
|
||||
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap" data-bs-toggle="modal"
|
||||
data-bs-target="#billingDetailsModal">
|
||||
<i class="bx bx-list-ul me-1"></i> Szczegóły
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap"
|
||||
style="background-color: #f8f9fa;">
|
||||
<i class="bx bx-credit-card me-1"></i> company.payonline
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Wiersz 3 - Przykładowy opłacony dodany dla logiki -->
|
||||
<tr>
|
||||
<td><a href="#" class="fw-bold text-muted">2/01/2025</a></td>
|
||||
<td><span class="badge bg-label-success px-2 py-1" style="font-size: 0.75rem;">Opłacona</span>
|
||||
</td>
|
||||
<td class="fw-semibold">345 zł</td>
|
||||
<td class="text-dark">2025-01-05</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap"><i
|
||||
class="bx bx-cloud-download me-1"></i> Faktura VAT</button>
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap disabled"
|
||||
style="background-color: #f8f9fa;"><i class="bx bx-cloud-download me-1"></i> Faktura
|
||||
proforma</button>
|
||||
|
||||
<span class="text-muted mx-2">|</span>
|
||||
|
||||
<button class="btn btn-sm btn-outline-secondary text-nowrap" data-bs-toggle="modal"
|
||||
data-bs-target="#billingDetailsModal">
|
||||
<i class="bx bx-list-ul me-1"></i> Szczegóły
|
||||
</button>
|
||||
<!-- Brak przycisku opłać, bo jest opłacona -->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal Szczegóły Rozliczenia -->
|
||||
<div class="modal fade" id="billingDetailsModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-bottom pb-3">
|
||||
<h5 class="modal-title fw-bold" id="exampleModalLabel1">Szczegóły rozliczenia dla dokumentu: <span
|
||||
class="text-primary">5/05/2025</span></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body py-4 bg-lighter">
|
||||
|
||||
<div class="card shadow-none border">
|
||||
<div class="card-body p-0">
|
||||
<ul class="list-group list-group-flush mb-0">
|
||||
<!-- Pozycja 1 -->
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start py-3">
|
||||
<div>
|
||||
<h6 class="mb-1 fw-bold text-dark">Opłata podstawowa (Abonament Baza)</h6>
|
||||
<small class="text-muted mt-0 d-block">Utrzymanie rdzenia systemu. Nielimitowana
|
||||
ilość przestrzeni i kont właścicielskich.</small>
|
||||
</div>
|
||||
<span class="fw-bold text-dark fs-6 mt-1">199.00 zł</span>
|
||||
</li>
|
||||
|
||||
<!-- Pozycja 2 -->
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start py-3">
|
||||
<div>
|
||||
<h6 class="mb-1 fw-bold text-dark">Aplikacja: helpdesk.magico</h6>
|
||||
<small class="text-muted mt-0 d-block">Liczba przypisanych kont pracowników w danym
|
||||
cyklu: <strong>4 stanowiska</strong><br>Opłata: 4 x 30.00 zł</small>
|
||||
</div>
|
||||
<span class="fw-bold text-dark fs-6 mt-1">120.00 zł</span>
|
||||
</li>
|
||||
|
||||
<!-- Pozycja 3 -->
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start py-3">
|
||||
<div>
|
||||
<h6 class="mb-1 fw-bold text-dark">Bramka komunikacji SMS (Powiadomienia)</h6>
|
||||
<small class="text-muted mt-0 d-block">Wysłane wiadomości autoryzacyjne i systemowe:
|
||||
<strong>247 SMS</strong><br>Koszt jednostkowy API: 0.15 zł</small>
|
||||
</div>
|
||||
<span class="fw-bold text-dark fs-6 mt-1">37.05 zł</span>
|
||||
</li>
|
||||
|
||||
<!-- Pozycja 4 -->
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start py-3">
|
||||
<div>
|
||||
<h6 class="mb-1 fw-bold text-dark">Aplikacja: invoice.magico</h6>
|
||||
<small class="text-muted mt-0 d-block">Moduł wbudowany bezpłatnie jako fundament
|
||||
profilu.</small>
|
||||
</div>
|
||||
<span class="fw-bold text-dark fs-6 mt-1 text-success">0.00 zł</span>
|
||||
</li>
|
||||
|
||||
<!-- Suma Rozliczenia -->
|
||||
<li
|
||||
class="list-group-item d-flex justify-content-between align-items-center py-4 bg-label-primary bg-opacity-10 border-top-2">
|
||||
<div>
|
||||
<h5 class="mb-0 fw-bold text-primary">Kwota netto dokumentu</h5>
|
||||
<small class="text-primary text-opacity-75">Suma zliczona przed nałożeniem podatku
|
||||
VAT (23%)</small>
|
||||
</div>
|
||||
<span class="fw-bold text-primary fs-3">356.05 zł</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-secondary mb-0 mt-4 d-flex align-items-center overflow-hidden">
|
||||
<i class="bx bx-info-circle fs-3 me-3 text-secondary"></i>
|
||||
<small class="lh-sm">Koszt aplikacji stanowiskowych wyliczany jest na podstawie największej liczby
|
||||
kont pracowników z uprawnieniami w trakcie całego ubiegłego cyku rozliczeniowego.</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-footer border-top pt-3">
|
||||
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Zamknij podgląd</button>
|
||||
<button type="button" class="btn btn-primary"><i class="bx bx-credit-card me-2"></i> Przejdź do
|
||||
opłacenia faktury</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-backdrop fade"></div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// ...
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
304
prototype/company/app-group-edit.php
Normal file
304
prototype/company/app-group-edit.php
Normal file
@@ -0,0 +1,304 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
<h4 class="fw-bold py-3 mb-4">
|
||||
<span class="text-muted fw-light">Zarządzanie zespołem / <a href="app-groups.php"
|
||||
class="text-muted text-decoration-none">Grupy</a> /</span> Edycja grupy
|
||||
</h4>
|
||||
|
||||
<div class="row">
|
||||
<!-- Formularz informacji ogólnych -->
|
||||
<div class="col-md-12 col-lg-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<h5 class="card-header border-bottom">Informacje ogólne</h5>
|
||||
<div class="card-body mt-4">
|
||||
<form id="formGroupEdit" onsubmit="return false">
|
||||
<div class="mb-3">
|
||||
<label for="groupName" class="form-label">Nazwa grupy <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="groupName" value="Kadra Kierownicza" autofocus>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="groupDescription" class="form-label">Opis / Notatka dla użytkowników</label>
|
||||
<textarea class="form-control" id="groupDescription"
|
||||
rows="4">Pełny wgląd w raporty finansowe, listę pracowników oraz obieg dokumentów.</textarea>
|
||||
<div class="form-text">Zwięzły opis pomoże innym administratorom zrozumieć przeznaczenie tej
|
||||
grupy.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label d-block">Status grupy</label>
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">Aktywna</label>
|
||||
</div>
|
||||
<div class="form-text">Wyłączenie grupy tymczasowo odbierze dostęp do jej zasobów wszystkim
|
||||
uprawnionym użytkownikom, ale nie usunie z niej członków.</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Przypisywanie użytkowników -->
|
||||
<div class="col-md-12 col-lg-8 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header border-bottom d-flex justify-content-between align-items-center">
|
||||
<h5 class="m-0">Przypisani członkowie zespołu (3)</h5>
|
||||
<div class="input-group input-group-merge" style="max-width: 250px;">
|
||||
<span class="input-group-text"><i class="bx bx-search"></i></span>
|
||||
<input type="text" id="searchUser" class="form-control form-control-sm"
|
||||
placeholder="Szukaj osoby...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive text-nowrap" style="max-height: 500px; overflow-y: auto;">
|
||||
<table class="table table-hover">
|
||||
<thead class="table-light sticky-top">
|
||||
<tr>
|
||||
<th style="width: 50px;" class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<input class="form-check-input m-0" type="checkbox" id="selectAll"
|
||||
style="cursor: pointer;">
|
||||
</div>
|
||||
</th>
|
||||
<th>Użytkownik</th>
|
||||
<th>Rola w firmie</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-border-bottom-0">
|
||||
|
||||
<!-- Aktywny przypisany właściciel -->
|
||||
<tr class="table-primary">
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<input class="form-check-input m-0" type="checkbox" checked
|
||||
style="cursor: pointer;">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar avatar-sm me-3">
|
||||
<img src="https://ui-avatars.com/api/?name=Bartłomiej+Banaczyk&background=e7e7ff&color=696cff"
|
||||
alt="Avatar" class="rounded-circle">
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold text-primary">Bartłomiej Banaczyk (Ty)</h6>
|
||||
<small class="text-muted">banaczyk@magico.pl</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-label-warning"><i class="bx bx-crown me-1"></i>
|
||||
Właściciel</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Aktywny przypisany 1 -->
|
||||
<tr class="table-primary">
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<input class="form-check-input m-0" type="checkbox" checked
|
||||
style="cursor: pointer;">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar avatar-sm me-3">
|
||||
<img src="https://ui-avatars.com/api/?name=Jan+Kowalski&background=e7e7ff&color=696cff"
|
||||
alt="Avatar" class="rounded-circle">
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold text-primary">Jan Kowalski</h6>
|
||||
<small class="text-muted">jan.kowalski@firma.pl</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="text-muted small">Menadżer</span></td>
|
||||
</tr>
|
||||
|
||||
<!-- Aktywny przypisany 2 -->
|
||||
<tr class="table-primary">
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<input class="form-check-input m-0" type="checkbox" checked
|
||||
style="cursor: pointer;">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar avatar-sm me-3">
|
||||
<img src="https://ui-avatars.com/api/?name=Anna+Nowak&background=ffe7e7&color=ff6969"
|
||||
alt="Avatar" class="rounded-circle">
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold text-primary">Anna Nowak</h6>
|
||||
<small class="text-muted">anna.nowak@firma.pl</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="text-muted small">Menadżer</span></td>
|
||||
</tr>
|
||||
|
||||
<!-- Nieprzypisany 1 -->
|
||||
<tr>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<input class="form-check-input m-0" type="checkbox" style="cursor: pointer;">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar avatar-sm me-3">
|
||||
<img src="https://ui-avatars.com/api/?name=Katarzyna+Lewandowska&background=e7f0ff&color=69a6ff"
|
||||
alt="Avatar" class="rounded-circle">
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold text-body">Katarzyna Lewandowska</h6>
|
||||
<small class="text-muted">k.lewandowska@firma.pl</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="text-muted small">Pracownik</span></td>
|
||||
</tr>
|
||||
|
||||
<!-- Nieprzypisany 2 -->
|
||||
<tr>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<input class="form-check-input m-0" type="checkbox" style="cursor: pointer;">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar avatar-sm me-3">
|
||||
<img src="https://ui-avatars.com/api/?name=Piotr+Wiśniewski&background=e7ffe7&color=69ff69"
|
||||
alt="Avatar" class="rounded-circle">
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold text-body">Piotr Wiśniewski</h6>
|
||||
<small class="text-muted">p.wisniewski@firma.pl</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="text-muted small">Pracownik</span></td>
|
||||
</tr>
|
||||
|
||||
<!-- Nieprzypisany 3 w trakcie rejestracji -->
|
||||
<tr>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<input class="form-check-input m-0" type="checkbox" style="cursor: pointer;">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-start align-items-center opacity-50">
|
||||
<div class="avatar avatar-sm me-3">
|
||||
<span class="avatar-initial rounded-circle bg-label-secondary"><i
|
||||
class="bx bx-time-five"></i></span>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold text-muted">Zuzanna Szymańska</h6>
|
||||
<small class="text-muted">zuzanna@firma.pl</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-label-secondary">Oczekuje na rejestrację</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" class="footer" style="background: #e7e7ff; position: sticky; bottom: 0px; right: 0px; z-index: 1000;">
|
||||
<footer class="content-footer footer border-top">
|
||||
<div class="container-xxl d-flex py-3 justify-content-center">
|
||||
<a href="app-groups.php" class="btn btn-label-secondary btn-lg me-3">Anuluj</a>
|
||||
<button class="btn btn-primary btn-lg px-5">Zapisz ustawienia grupy</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="content-backdrop fade"></div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Logika zaznaczania / odznaczania wszystkich checkboxów
|
||||
const selectAllCheckbox = document.getElementById('selectAll');
|
||||
const userCheckboxes = document.querySelectorAll('tbody .form-check-input');
|
||||
|
||||
// Klikanie w dowolne miejsce wiersza zaznacza/odznacza checkboxa
|
||||
const tbodyRows = document.querySelectorAll('tbody tr');
|
||||
tbodyRows.forEach(row => {
|
||||
row.style.cursor = 'pointer'; // Kursor łapki na całym wierszu
|
||||
row.addEventListener('click', function (e) {
|
||||
// Pomijamy sytuację, gdy kliknięto bezpośrednio w checkbox (żeby nie wywoływać podwójnego toggle)
|
||||
if (e.target.tagName !== 'INPUT') {
|
||||
const checkbox = this.querySelector('.form-check-input');
|
||||
if (checkbox) {
|
||||
checkbox.checked = !checkbox.checked;
|
||||
// Ręczne wymuszenie eventu 'change' by reszta skryptów (np. zmiana koloru) prawidłowo zareagowała
|
||||
checkbox.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (selectAllCheckbox) {
|
||||
selectAllCheckbox.addEventListener('change', function () {
|
||||
const isChecked = this.checked;
|
||||
userCheckboxes.forEach(checkbox => {
|
||||
checkbox.checked = isChecked;
|
||||
updateRowHighlight(checkbox);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
userCheckboxes.forEach(checkbox => {
|
||||
checkbox.addEventListener('change', function () {
|
||||
updateRowHighlight(this);
|
||||
// Aktualizuj stan selectAll
|
||||
const allChecked = Array.from(userCheckboxes).every(cb => cb.checked);
|
||||
if (selectAllCheckbox) selectAllCheckbox.checked = allChecked;
|
||||
|
||||
const someChecked = Array.from(userCheckboxes).some(cb => cb.checked);
|
||||
if (selectAllCheckbox) selectAllCheckbox.indeterminate = someChecked && !allChecked;
|
||||
});
|
||||
});
|
||||
|
||||
function updateRowHighlight(checkbox) {
|
||||
const tr = checkbox.closest('tr');
|
||||
const h6 = tr.querySelector('h6');
|
||||
if (checkbox.checked) {
|
||||
tr.classList.add('table-primary');
|
||||
if (h6) {
|
||||
h6.classList.remove('text-body');
|
||||
h6.classList.add('text-primary');
|
||||
}
|
||||
} else {
|
||||
tr.classList.remove('table-primary');
|
||||
if (h6) {
|
||||
h6.classList.remove('text-primary');
|
||||
h6.classList.add('text-body');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
339
prototype/company/app-groups.php
Normal file
339
prototype/company/app-groups.php
Normal file
@@ -0,0 +1,339 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
<h4 class="fw-bold py-3 mb-4 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-muted fw-light">Zarządzanie zespołem /</span> Grupy
|
||||
</div>
|
||||
<a href="app-group-edit.php" class="btn btn-primary">
|
||||
<i class="bx bx-plus me-1"></i> Utwórz grupę
|
||||
</a>
|
||||
</h4>
|
||||
|
||||
<!-- Filters/Search Card -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="row gx-3 gy-2 align-items-center">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" for="searchGroup">Wyszukaj grupę</label>
|
||||
<div class="input-group input-group-merge">
|
||||
<span class="input-group-text"><i class="bx bx-search"></i></span>
|
||||
<input type="text" id="searchGroup" class="form-control" placeholder="Wpisz nazwę...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label" for="filterStatus">Status</label>
|
||||
<select id="filterStatus" class="form-select">
|
||||
<option value="">Wszystkie</option>
|
||||
<option value="active">Aktywne</option>
|
||||
<option value="inactive">Nieaktywne</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-5 d-flex align-items-end justify-content-md-end mt-md-0 mt-3">
|
||||
<button class="btn btn-label-secondary"><i class="bx bx-reset me-1"></i> Wyczyść filtry</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Groups Table -->
|
||||
<div class="card">
|
||||
<h5 class="card-header border-bottom">Lista grup dostępu</h5>
|
||||
<div class="table-responsive text-nowrap pb-2">
|
||||
<table class="table table-hover">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 250px;">Nazwa grupy</th>
|
||||
<th>Opis</th>
|
||||
<th style="width: 150px;">Członkowie</th>
|
||||
<th class="text-center" style="width: 100px;">Status</th>
|
||||
<th class="text-end" style="width: 120px;">Akcje</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-border-bottom-0">
|
||||
|
||||
<!-- Wiersz 1: Kadra Kierownicza -->
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar avatar-sm me-3 bg-label-primary rounded p-1 flex-shrink-0 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-briefcase fs-4"></i>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold"><a href="app-group-edit.php"
|
||||
class="text-body text-truncate">Kadra Kierownicza</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small text-truncate d-block" style="max-width: 300px;">
|
||||
Pełny wgląd w raporty finansowe, listę pracowników oraz obieg dokumentów.
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center avatar-group">
|
||||
<div class="avatar avatar-sm" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Jan Kowalski">
|
||||
<img src="https://ui-avatars.com/api/?name=Jan+Kowalski&background=e7e7ff&color=696cff"
|
||||
alt="Avatar" class="rounded-circle pull-up">
|
||||
</div>
|
||||
<div class="avatar avatar-sm" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Anna Nowak">
|
||||
<img src="https://ui-avatars.com/api/?name=Anna+Nowak&background=ffe7e7&color=ff6969"
|
||||
alt="Avatar" class="rounded-circle pull-up">
|
||||
</div>
|
||||
<div class="avatar avatar-sm" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Piotr Wiśniewski">
|
||||
<img src="https://ui-avatars.com/api/?name=Piotr+Wiśniewski&background=e7ffe7&color=69ff69"
|
||||
alt="Avatar" class="rounded-circle pull-up">
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-label-success">Aktywna</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<div class="d-flex justify-content-end align-items-center">
|
||||
<div class="btn-group" role="group">
|
||||
<a href="app-group-edit.php" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bx bx-edit-alt me-1 d-none d-sm-inline-block"></i> Edytuj
|
||||
</a>
|
||||
<div class="btn-group">
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary btn-sm dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<div class="dropdown-menu dropdown-menu-end mt-1">
|
||||
<a href="javascript:void(0);" class="dropdown-item"><i
|
||||
class="bx bx-copy me-2"></i> Duplikuj</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="javascript:void(0);" class="dropdown-item text-danger"><i
|
||||
class="bx bx-trash me-2"></i> Usuń</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Wiersz 2: Dział Marketingu -->
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar avatar-sm me-3 bg-label-info rounded p-1 flex-shrink-0 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-broadcast fs-4"></i>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold"><a href="app-group-edit.php"
|
||||
class="text-body text-truncate">Dział Marketingu</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small text-truncate d-block" style="max-width: 300px;">
|
||||
Dostęp do lejków sprzedażowych, mailingów i zarządzania ofertami.
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center avatar-group">
|
||||
<div class="avatar avatar-sm" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Katarzyna Lewandowska">
|
||||
<img src="https://ui-avatars.com/api/?name=Katarzyna+Lewandowska&background=e7f0ff&color=69a6ff"
|
||||
alt="Avatar" class="rounded-circle pull-up">
|
||||
</div>
|
||||
<div class="avatar avatar-sm" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Michał Zieliński">
|
||||
<img src="https://ui-avatars.com/api/?name=Michał+Zieliński&background=fff4e7&color=ffb869"
|
||||
alt="Avatar" class="rounded-circle pull-up">
|
||||
</div>
|
||||
<div class="avatar avatar-sm" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Zuzanna Szymańska">
|
||||
<span class="avatar-initial rounded-circle bg-label-warning pull-up">ZS</span>
|
||||
</div>
|
||||
<div class="avatar avatar-sm" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Tomasz Dąbrowski">
|
||||
<img src="https://ui-avatars.com/api/?name=Tomasz+Dąbrowski&background=e7ebff&color=697fff"
|
||||
alt="Avatar" class="rounded-circle pull-up">
|
||||
</div>
|
||||
<div class="avatar avatar-sm">
|
||||
<span class="avatar-initial rounded-circle bg-lighter text-body pull-up"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="5 kolejnych osób">+5</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-label-success">Aktywna</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<div class="d-flex justify-content-end align-items-center">
|
||||
<div class="btn-group" role="group">
|
||||
<a href="app-group-edit.php" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bx bx-edit-alt me-1 d-none d-sm-inline-block"></i> Edytuj
|
||||
</a>
|
||||
<div class="btn-group">
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary btn-sm dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<div class="dropdown-menu dropdown-menu-end mt-1">
|
||||
<a href="javascript:void(0);" class="dropdown-item"><i
|
||||
class="bx bx-copy me-2"></i> Duplikuj</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="javascript:void(0);" class="dropdown-item text-danger"><i
|
||||
class="bx bx-trash me-2"></i> Usuń</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Wiersz 3: Dział Obsługi Klienta -->
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar avatar-sm me-3 bg-label-success rounded p-1 flex-shrink-0 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-support fs-4"></i>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold"><a href="app-group-edit.php"
|
||||
class="text-body text-truncate">Dział Obsługi Klienta</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small text-truncate d-block" style="max-width: 300px;">
|
||||
Dostęp do ticketów, korespondencji i podstawowych danych konrahentów.
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center avatar-group">
|
||||
<div class="avatar avatar-sm" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Magdalena Kaczmarek">
|
||||
<img src="https://ui-avatars.com/api/?name=Magdalena+Kaczmarek&background=f4ffe7&color=b8ff69"
|
||||
alt="Avatar" class="rounded-circle pull-up">
|
||||
</div>
|
||||
<div class="avatar avatar-sm" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Kamil Piotrowski">
|
||||
<span class="avatar-initial rounded-circle bg-label-dark pull-up">KP</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-label-success">Aktywna</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<div class="d-flex justify-content-end align-items-center">
|
||||
<div class="btn-group" role="group">
|
||||
<a href="app-group-edit.php" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bx bx-edit-alt me-1 d-none d-sm-inline-block"></i> Edytuj
|
||||
</a>
|
||||
<div class="btn-group">
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary btn-sm dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<div class="dropdown-menu dropdown-menu-end mt-1">
|
||||
<a href="javascript:void(0);" class="dropdown-item"><i
|
||||
class="bx bx-copy me-2"></i> Duplikuj</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="javascript:void(0);" class="dropdown-item text-danger"><i
|
||||
class="bx bx-trash me-2"></i> Usuń</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Wiersz 4: Zewnętrzna Księgowość (Przykład nieaktywnej) -->
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar avatar-sm me-3 bg-label-secondary rounded p-1 flex-shrink-0 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-calculator fs-4"></i>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold text-muted"><a href="app-group-edit.php"
|
||||
class="text-muted text-truncate">Zewnętrzna Księgowość</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small text-truncate d-block" style="max-width: 300px;">
|
||||
Tymczasowy dostęp audytowy – tylko odczyt sekcji finansowej.
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-label-secondary">Brak przypisań</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-label-secondary">Nieaktywna</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<div class="d-flex justify-content-end align-items-center">
|
||||
<div class="btn-group" role="group">
|
||||
<a href="app-group-edit.php" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bx bx-edit-alt me-1 d-none d-sm-inline-block"></i> Edytuj
|
||||
</a>
|
||||
<div class="btn-group">
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary btn-sm dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<div class="dropdown-menu dropdown-menu-end mt-1">
|
||||
<a href="javascript:void(0);" class="dropdown-item"><i
|
||||
class="bx bx-copy me-2"></i> Duplikuj</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="javascript:void(0);" class="dropdown-item text-danger"><i
|
||||
class="bx bx-trash me-2"></i> Usuń</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="card-footer d-flex justify-content-center border-top">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
<li class="page-item prev disabled"><a class="page-link" href="javascript:void(0);"><i
|
||||
class="tf-icon bx bx-chevron-left"></i></a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item next disabled"><a class="page-link" href="javascript:void(0);"><i
|
||||
class="tf-icon bx bx-chevron-right"></i></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content-backdrop fade"></div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Inicjalizacja Tooltipów dla awatarów
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
425
prototype/company/app-permissions-acl.php
Normal file
425
prototype/company/app-permissions-acl.php
Normal file
@@ -0,0 +1,425 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
<h4 class="fw-bold py-3 mb-4">
|
||||
<span class="text-muted fw-light">Zarządzanie zespołem / <a href="app-permissions.php"
|
||||
class="text-muted text-decoration-none">Uprawnienia</a> /</span> invoice.magico (ACL)
|
||||
</h4>
|
||||
|
||||
<!-- Nagłówek kontekstu -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body d-flex flex-column flex-md-row align-items-md-center justify-content-between">
|
||||
<div class="d-flex align-items-center mb-3 mb-md-0">
|
||||
<div
|
||||
class="avatar avatar-lg bg-label-primary rounded p-2 me-3 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-receipt fs-2"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="mb-1 fw-bold">invoice.magico</h5>
|
||||
<p class="text-muted small mb-0">Zarządzaj macierzą uprawnień systemowych (ACL) dla modułu
|
||||
księgowego. Każda kolumna to Grupa a każdy wiersz to konkretna funkcja dostępna w aplikacji.
|
||||
Właściciel posiada niemodyfikowalny, pełny dostęp.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-md-4">
|
||||
<button class="btn btn-outline-secondary" onclick="window.location.href='app-groups.php'">
|
||||
<i class="bx bx-group me-1"></i> Zarządzaj grupami
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabela Macierzy (ACL Matrix) -->
|
||||
<div class="card">
|
||||
<div
|
||||
class="card-header border-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center">
|
||||
<h5 class="m-0 mb-3 mb-md-0">Macierz uprawnień</h5>
|
||||
<div class="d-flex flex-wrap gap-2 flex-grow-1 ms-md-4 justify-content-end">
|
||||
<div class="dropdown flex-grow-1" style="max-width: 250px;">
|
||||
<button
|
||||
class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
|
||||
type="button" id="columnFilterDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside"
|
||||
aria-expanded="false">
|
||||
<span><i class="bx bx-filter-alt me-1"></i> Wybierz grupy</span>
|
||||
</button>
|
||||
<div class="dropdown-menu p-3" aria-labelledby="columnFilterDropdown" style="min-width: 250px;">
|
||||
<h6 class="dropdown-header px-0 text-uppercase fw-bold pt-0">Wyświetlane kolumny (max 5)</h6>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input column-toggle" type="checkbox" value="1" id="col_1" checked>
|
||||
<label class="form-check-label" for="col_1">Właściciel </label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input column-toggle" type="checkbox" value="2" id="col_2" checked>
|
||||
<label class="form-check-label" for="col_2">Kadra Kierownicza</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input column-toggle" type="checkbox" value="3" id="col_3" checked>
|
||||
<label class="form-check-label" for="col_3">Dział Marketingu</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input column-toggle" type="checkbox" value="4" id="col_4" checked>
|
||||
<label class="form-check-label" for="col_4">Dział Obsługi Klienta</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group input-group-merge" style="max-width: 250px;">
|
||||
<span class="input-group-text"><i class="bx bx-search"></i></span>
|
||||
<input type="text" class="form-control form-control-sm" placeholder="Szukaj uprawnienia...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive text-nowrap pb-2">
|
||||
<!-- Dodana klasa acl-table dla łatwiejszego stylowania przez JS -->
|
||||
<table class="table table-hover table-bordered mb-0 acl-table">
|
||||
<thead class="table-light align-middle sticky-top" style="z-index: 10;">
|
||||
<tr>
|
||||
<th style="min-width: 250px;">Moduł i Nazwa Uprawnienia</th>
|
||||
<th class="text-center" style="width: 150px;">
|
||||
<i class="bx bx-crown text-warning fs-5 mb-1 d-block"></i>
|
||||
Właściciel <br>
|
||||
<span class="badge bg-label-secondary mt-1">N/D</span>
|
||||
</th>
|
||||
<th class="text-center" style="width: 150px;">
|
||||
<i class="bx bx-briefcase text-primary fs-5 mb-1 d-block"></i>
|
||||
Kadra Kierownicza
|
||||
</th>
|
||||
<th class="text-center" style="width: 150px;">
|
||||
<i class="bx bx-broadcast text-info fs-5 mb-1 d-block"></i>
|
||||
Dział Marketingu
|
||||
</th>
|
||||
<th class="text-center" style="width: 150px;">
|
||||
<i class="bx bx-support text-success fs-5 mb-1 d-block"></i>
|
||||
Dział Obsługi Klienta
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-border-bottom-0">
|
||||
|
||||
<!-- SEKCJA: GŁÓWNE -->
|
||||
<tr class="table-secondary border-top-2 border-bottom-2">
|
||||
<td colspan="5" class="fw-bold fs-6 text-uppercase tracking-wider">
|
||||
<i class="bx bx-power-off me-2 text-muted"></i> Dostęp do modułu
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="global-access-row">
|
||||
<td>
|
||||
<h6 class="mb-0 text-body">Dostęp do aplikacji</h6>
|
||||
<small class="text-muted">Główny włącznik modułu dla tej grupy. Wyłączenie blokuje poniższe
|
||||
opcje.</small>
|
||||
</td>
|
||||
<td class="text-center align-middle bg-label-secondary"><i
|
||||
class="bx bx-check text-muted fs-4"></i></td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0 global-access-checkbox" type="checkbox" checked
|
||||
style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0 global-access-checkbox" type="checkbox"
|
||||
style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0 global-access-checkbox" type="checkbox" checked
|
||||
style="cursor: pointer;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- SEKCJA: FAKTURY -->
|
||||
<tr class="table-secondary border-top-2 border-bottom-2">
|
||||
<td colspan="5" class="fw-bold fs-6 text-uppercase tracking-wider">
|
||||
<i class="bx bx-file me-2 text-muted"></i> Dokumenty Sprzedaży (Faktury)
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="mb-0 text-body">Odczyt plików i listy faktur</h6>
|
||||
<small class="text-muted">Pozwala m.in przeglądać ekran głównego listingu.</small>
|
||||
</td>
|
||||
<td class="text-center align-middle bg-label-secondary"><i
|
||||
class="bx bx-check text-muted fs-4"></i></td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" checked style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" checked style="cursor: pointer;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="mb-0 text-body">Wystawianie nowych</h6>
|
||||
<small class="text-muted">Ręczne kreowanie faktur przez formularz.</small>
|
||||
</td>
|
||||
<td class="text-center align-middle bg-label-secondary"><i
|
||||
class="bx bx-check text-muted fs-4"></i></td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" checked style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="mb-0 text-body">Trwałe usunięcie (Delete)</h6>
|
||||
<small class="text-muted">Prawo do kasacji dokumentów z bazy danych.</small>
|
||||
</td>
|
||||
<td class="text-center align-middle bg-label-secondary"><i
|
||||
class="bx bx-check text-muted fs-4"></i></td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- SEKCJA: BAZA KONTRAHENTÓW -->
|
||||
<tr class="table-secondary border-top-2 border-bottom-2">
|
||||
<td colspan="5" class="fw-bold fs-6 text-uppercase tracking-wider">
|
||||
<i class="bx bx-buildings me-2 text-muted"></i> Baza Kontrahentów (CRM)
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="mb-0 text-body">Przeglądanie kontrahentów</h6>
|
||||
<small class="text-muted">Podstawowy dostęp do modułu z listą firm.</small>
|
||||
</td>
|
||||
<td class="text-center align-middle bg-label-secondary"><i
|
||||
class="bx bx-check text-muted fs-4"></i></td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" checked style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" checked style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" checked style="cursor: pointer;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="mb-0 text-body">Dodawanie i Edycja</h6>
|
||||
<small class="text-muted">Aktualizowanie adresów i nr NIP klientów.</small>
|
||||
</td>
|
||||
<td class="text-center align-middle bg-label-secondary"><i
|
||||
class="bx bx-check text-muted fs-4"></i></td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" checked style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" checked style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- SEKCJA: USTAWIENIA KSIĘGOWE -->
|
||||
<tr class="table-secondary border-top-2 border-bottom-2">
|
||||
<td colspan="5" class="fw-bold fs-6 text-uppercase tracking-wider text-danger">
|
||||
<i class="bx bx-cog me-2 text-danger"></i> Krytyczne (Ustawienia Główne)
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="mb-0 text-body">Edycja numeracji i rejestrów</h6>
|
||||
<small class="text-muted">Pozwala edytować schematy np: FV/2026/XX.</small>
|
||||
</td>
|
||||
<td class="text-center align-middle bg-label-secondary"><i
|
||||
class="bx bx-check text-muted fs-4"></i></td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="mb-0 text-body">Eksport pliku JPK_V7</h6>
|
||||
<small class="text-muted">Przesyłanie danych do Urzędu Skarbowego.</small>
|
||||
</td>
|
||||
<td class="text-center align-middle bg-label-secondary"><i
|
||||
class="bx bx-check text-muted fs-4"></i></td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" checked style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
<div class="d-flex justify-content-center align-items-center"><input
|
||||
class="form-check-input m-0" type="checkbox" style="cursor: pointer;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Save Footer -->
|
||||
<div id="footer" class="footer" style="background: #e7e7ff; position: sticky; bottom: 0px; right: 0px; z-index: 1000;">
|
||||
<footer class="content-footer footer border-top">
|
||||
<div class="container-xxl d-flex py-3 justify-content-center">
|
||||
<a href="app-permissions.php" class="btn btn-label-secondary btn-lg me-3">Anuluj</a>
|
||||
<button class="btn btn-primary btn-lg px-5">Zapisz</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="content-backdrop fade"></div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Podobnie jak z członkami grup, uczyńmy całe komórki klikalnymi!
|
||||
const aclTds = document.querySelectorAll('.acl-table tbody tr td.text-center');
|
||||
|
||||
aclTds.forEach(td => {
|
||||
// Pomijamy komórki szare/zablokowane (Oznaczyliśmy Właściciela jako bg-label-secondary)
|
||||
if (!td.classList.contains('bg-label-secondary')) {
|
||||
td.style.cursor = 'pointer';
|
||||
td.addEventListener('click', function (e) {
|
||||
if (e.target.tagName !== 'INPUT') {
|
||||
const checkbox = this.querySelector('.form-check-input');
|
||||
// Zmieniamy tylko jeśli checkbox nie jest zablokowany (disabled)
|
||||
if (checkbox && !checkbox.disabled) {
|
||||
checkbox.checked = !checkbox.checked;
|
||||
checkbox.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Sprawdzanie czy w komórce jest Główny Włącznik, aby odciąć resztę w dół
|
||||
const accessCheckbox = td.querySelector('.form-check-input.global-access-checkbox');
|
||||
if (accessCheckbox) {
|
||||
accessCheckbox.addEventListener('change', function () {
|
||||
toggleColumnAccess(td.cellIndex, this.checked);
|
||||
});
|
||||
|
||||
// Wymuś stan po wczytaniu strony, jeśli aplikacja jest odznaczona (np. marketing)
|
||||
if (!accessCheckbox.checked) {
|
||||
toggleColumnAccess(td.cellIndex, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Funkcja blokowania/odblokowania całej kolumny
|
||||
function toggleColumnAccess(colIndex, isEnabled) {
|
||||
const allRows = document.querySelectorAll('.acl-table tbody tr');
|
||||
allRows.forEach(row => {
|
||||
// Pomijamy szare wiersze podziału oraz sam wiersz głównego włącznika
|
||||
if (!row.classList.contains('table-secondary') && !row.classList.contains('global-access-row') && row.cells.length > colIndex) {
|
||||
const cell = row.cells[colIndex];
|
||||
const checkbox = cell.querySelector('.form-check-input');
|
||||
|
||||
if (checkbox && !cell.classList.contains('bg-label-secondary')) {
|
||||
if (!isEnabled) {
|
||||
checkbox.checked = false;
|
||||
checkbox.disabled = true;
|
||||
cell.style.opacity = '0.4';
|
||||
cell.style.pointerEvents = 'none'; // cała komórka staje się nieklikalna
|
||||
} else {
|
||||
checkbox.disabled = false;
|
||||
cell.style.opacity = '1';
|
||||
cell.style.pointerEvents = 'auto'; // przywraca klikalność
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Logika wyświetlania/ukrywania kolumn grupowych
|
||||
const maxColumns = 5; // Mamy w sumie 1(nazwa) + 4 (grupy). Limit 5 grup oznacza max 6 kolumn tabeli. Zostawiłem zmienną na przyszłość.
|
||||
const columnToggles = document.querySelectorAll('.column-toggle:not(:disabled)');
|
||||
|
||||
columnToggles.forEach(toggle => {
|
||||
toggle.addEventListener('change', function () {
|
||||
const checkedCount = document.querySelectorAll('.column-toggle:checked').length;
|
||||
|
||||
// Zabezpieczenie limitu 5 (wliczając właściciela)
|
||||
if (this.checked && checkedCount > 5) {
|
||||
this.checked = false;
|
||||
alert('Możesz wybrać maksymalnie 5 grup do jednoczesnego wyświetlania.');
|
||||
return;
|
||||
}
|
||||
|
||||
const colIndex = parseInt(this.value);
|
||||
const isVisible = this.checked;
|
||||
|
||||
// Ukrywamy nagłówek
|
||||
const theadRow = document.querySelector('.acl-table thead tr');
|
||||
if (theadRow && theadRow.cells[colIndex]) {
|
||||
theadRow.cells[colIndex].style.display = isVisible ? '' : 'none';
|
||||
}
|
||||
|
||||
// Ukrywamy komórki w ciele tabeli
|
||||
const tbodyRows = document.querySelectorAll('.acl-table tbody tr');
|
||||
tbodyRows.forEach(row => {
|
||||
// Wiersze sekcji (szare) mają colspan=5, trzeba go dynamicznie zaktualizować
|
||||
if (row.classList.contains('table-secondary')) {
|
||||
const th = row.querySelector('td');
|
||||
// Liczymy widoczne kolumny (nagłówek)
|
||||
const visibleCols = document.querySelectorAll('.acl-table thead th:not([style*="display: none"])').length;
|
||||
if (th) th.setAttribute('colspan', visibleCols || 2);
|
||||
} else if (row.cells[colIndex]) {
|
||||
row.cells[colIndex].style.display = isVisible ? '' : 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
192
prototype/company/app-permissions.php
Normal file
192
prototype/company/app-permissions.php
Normal file
@@ -0,0 +1,192 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
<h4 class="fw-bold py-3 mb-4">
|
||||
<span class="text-muted fw-light">Zarządzanie zespołem /</span> Uprawnienia
|
||||
</h4>
|
||||
|
||||
<div class="card mb-4 bg-label-primary shadow-none border border-primary">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-start align-items-sm-center gap-3">
|
||||
<div
|
||||
class="avatar avatar-md p-1 bg-white rounded flex-shrink-0 shadow-sm d-flex justify-content-center align-items-center">
|
||||
<i class="bx bx-shield-quarter text-primary fs-3"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-dark mb-1 fw-bold">Uprawnienia w ekosystemie magico</h5>
|
||||
<p class="mb-0 text-dark small">
|
||||
Poniżej widzisz wszystkie aktywne aplikacje Twojej firmy. Ze względu na budowę systemu, każda z
|
||||
aplikacji
|
||||
operuje własnym, unikalnym zestawem uprawnień szczegółowych (Matrix ACL). Wybierz aplikację z
|
||||
listy, aby zarządzać szczegółowym poziomem dostępu poszczególnych <a href="app-groups.php"
|
||||
class="fw-bold">Grup</a> do jej poszczególnych modułów.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Układ 4 kart z Aplikacjami -->
|
||||
<div class="row g-4 mb-4">
|
||||
|
||||
<!-- Karta 1: invoice.magico -->
|
||||
<div class="col-md-6 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div
|
||||
class="avatar avatar-sm bg-label-primary rounded p-2 me-3 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-receipt fs-4"></i>
|
||||
</div>
|
||||
<h5 class="mb-0 fw-bold">invoice.magico</h5>
|
||||
<span class="badge bg-label-success ms-auto">Aktywna</span>
|
||||
</div>
|
||||
|
||||
<p class="text-muted small mb-4">
|
||||
Moduł obsługi księgowej i wystawiania dokumentów sprzedaży. Zarządzanie fakturami VAT,
|
||||
proformami oraz bazą kontrahentów.
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<h6 class="text-muted fw-normal small text-uppercase mb-2">Grupy posiadające dostęp (dowolny):
|
||||
</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<span class="badge bg-label-secondary">Właściciel</span>
|
||||
<span class="badge bg-label-secondary">Kadra Kierownicza</span>
|
||||
<span class="badge bg-label-secondary">Dział Obsługi Klienta</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-top bg-transparent text-end">
|
||||
<a href="app-permissions-acl.php" class="btn btn-primary w-100">
|
||||
Zarządzaj uprawnieniami ACL <i class="bx bx-right-arrow-alt ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta 2: sync.magico -->
|
||||
<div class="col-md-6 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div
|
||||
class="avatar avatar-sm bg-label-info rounded p-2 me-3 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-refresh fs-4"></i>
|
||||
</div>
|
||||
<h5 class="mb-0 fw-bold">sync.magico</h5>
|
||||
<span class="badge bg-label-success ms-auto">Aktywna</span>
|
||||
</div>
|
||||
|
||||
<p class="text-muted small mb-4">
|
||||
Centrum integracji e-commerce. Kontrola wymiany danych produktowych i magazynowych z
|
||||
zewnętrznymi platformami (BaseLinker, Allegro).
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<h6 class="text-muted fw-normal small text-uppercase mb-2">Grupy posiadające dostęp (dowolny):
|
||||
</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<span class="badge bg-label-secondary">Właściciel</span>
|
||||
<span class="badge bg-label-secondary">Kadra Kierownicza</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-top bg-transparent text-end">
|
||||
<a href="#" class="btn btn-outline-primary w-100">
|
||||
Zarządzaj uprawnieniami ACL <i class="bx bx-right-arrow-alt ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta 3: helpdesk.magico -->
|
||||
<div class="col-md-6 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div
|
||||
class="avatar avatar-sm bg-label-warning rounded p-2 me-3 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-support fs-4"></i>
|
||||
</div>
|
||||
<h5 class="mb-0 fw-bold">helpdesk.magico</h5>
|
||||
<span class="badge bg-label-success ms-auto">Aktywna</span>
|
||||
</div>
|
||||
|
||||
<p class="text-muted small mb-4">
|
||||
System zarządzania zgłoszeniami i wsparcia klienta. Śledzenie statusu ticketów, komunikacja oraz
|
||||
baza wiedzy (BOK).
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<h6 class="text-muted fw-normal small text-uppercase mb-2">Grupy posiadające dostęp (dowolny):
|
||||
</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<span class="badge bg-label-secondary">Właściciel</span>
|
||||
<span class="badge bg-label-secondary">Dział Obsługi Klienta</span>
|
||||
<span class="badge bg-label-secondary">Menadżer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-top bg-transparent text-end">
|
||||
<a href="#" class="btn btn-outline-primary w-100">
|
||||
Zarządzaj uprawnieniami ACL <i class="bx bx-right-arrow-alt ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta 4: employee.magico -->
|
||||
<div class="col-md-6 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div
|
||||
class="avatar avatar-sm bg-label-success rounded p-2 me-3 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-group fs-4"></i>
|
||||
</div>
|
||||
<h5 class="mb-0 fw-bold">employee.magico</h5>
|
||||
<span class="badge bg-label-secondary ms-auto">Nieaktywna</span>
|
||||
</div>
|
||||
|
||||
<p class="text-muted small mb-4">
|
||||
Dedykowany portal pracowniczy (HR). Zarządzanie urlopami, wnioskami pracowniczymi, ewidencją
|
||||
czasu pracy oraz komunikacją wewnętrzną firmy.
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<h6 class="text-muted fw-normal small text-uppercase mb-2">Grupy posiadające dostęp (dowolny):
|
||||
</h6>
|
||||
<p class="text-muted small fst-italic mb-0">Ta usługa nie jest włączona w Twoim pakiecie,
|
||||
uprawnienia są uśpione.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-top bg-transparent text-end">
|
||||
<button class="btn btn-outline-secondary w-100" disabled>
|
||||
Aplikacja jest nieaktywna
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-backdrop fade"></div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// ...
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
214
prototype/company/app-services-detail.php
Normal file
214
prototype/company/app-services-detail.php
Normal file
@@ -0,0 +1,214 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
|
||||
// Pobieranie przekazanej aplikacji, tu symulujemy, że otwieramy "employee.magico" jako system nieaktywny
|
||||
$appId = isset($_GET['id']) ? $_GET['id'] : 'employee';
|
||||
|
||||
// Symulowana baza dla demonstracji widoku
|
||||
$appData = [
|
||||
'title' => 'employee.magico',
|
||||
'badge' => 'Nieaktywna',
|
||||
'badgeClass' => 'bg-label-secondary',
|
||||
'icon' => 'bx-group',
|
||||
'desc' => 'Kompleksowy portal HR (Self-Service) dla pracowników Twojej firmy.',
|
||||
'isActive' => false
|
||||
];
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
<h4 class="fw-bold py-3 mb-4">
|
||||
<span class="text-muted fw-light">Zarządzanie firmą / <a href="app-services.php"
|
||||
class="text-muted text-decoration-none">Usługi i aplikacje</a> /</span>
|
||||
<?php echo $appData['title']; ?>
|
||||
</h4>
|
||||
|
||||
<!-- Nagłówek i status (Hero Banner) -->
|
||||
<div class="card mb-4 border-0 shadow-sm" style="background: linear-gradient(to right, #ffffff, #f8f9fa);">
|
||||
<div class="card-body p-5">
|
||||
<div class="row align-items-center text-center text-md-start">
|
||||
<div class="col-md-8 mb-4 mb-md-0">
|
||||
<div class="d-flex flex-column flex-md-row align-items-center mb-3">
|
||||
<div
|
||||
class="avatar avatar-xl bg-label-secondary rounded p-3 me-md-4 mb-3 mb-md-0 d-flex align-items-center justify-content-center">
|
||||
<i class="bx <?php echo $appData['icon']; ?> mb-0" style="font-size: 2.5rem;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex align-items-center justify-content-center justify-content-md-start mb-1">
|
||||
<h2 class="mb-0 fw-bold me-3 text-dark">
|
||||
<?php echo $appData['title']; ?>
|
||||
</h2>
|
||||
<span class="badge <?php echo $appData['badgeClass']; ?> px-3 py-2 fs-6">
|
||||
<?php echo $appData['badge']; ?>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-muted fs-5 mb-0">
|
||||
<?php echo $appData['desc']; ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Przycisk Aktywacji -->
|
||||
<div class="col-md-4 text-md-end">
|
||||
<?php if (!$appData['isActive']): ?>
|
||||
<div class="border rounded p-4 text-center bg-white shadow-sm">
|
||||
<p class="mb-3 fw-semibold text-body">Aplikacja pozostaje uśpiona. Aby z niej korzystać,
|
||||
wymagana jest aktywacja licencji.</p>
|
||||
<button type="button" class="btn btn-primary btn-lg w-100" data-bs-toggle="modal"
|
||||
data-bs-target="#activationModal">
|
||||
<i class="bx bx-power-off me-2"></i> Aktywuj moduł
|
||||
</button>
|
||||
<small class="text-muted d-block mt-2">Bez żadnych umów długoterminowych. Płatność doliczana do
|
||||
faktury cyklicznej.</small>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<!-- Widok dla aktywnej np invoice.magico -->
|
||||
<button class="btn btn-outline-danger btn-lg">
|
||||
<i class="bx bx-power-off me-2"></i> Wyłącz moduł
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prezentacja (Marketing / Zrzuty ekranu) -->
|
||||
<div class="row mb-5">
|
||||
<div class="col-12 text-center mb-4">
|
||||
<h3 class="fw-bold mb-2">Zapomnij o papierowych wnioskach urlopowych</h3>
|
||||
<p class="text-muted fs-5">Zautomatyzuj procesy kadrowe. Zyskaj jedno, spójne środowisko dla swojego
|
||||
zespołu.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100 shadow-none bg-transparent">
|
||||
<img class="card-img-top rounded-3 shadow-sm border"
|
||||
src="https://placehold.co/800x500/ebeef0/696cff?text=Ekran+Wniosk%C3%B3w+Pracowniczych&font=roboto"
|
||||
alt="Wnioski Urlopowe Screenshot">
|
||||
<div class="card-body px-0">
|
||||
<h5 class="card-title fw-bold"><i class="bx bx-check-circle text-primary me-2"></i>Samoobsługa
|
||||
pracownika (Self-Service)</h5>
|
||||
<p class="card-text text-muted">Pracownicy samodzielnie zgłaszają wnioski urlopowe, delegacje oraz
|
||||
odbiory nadgodzin z poziomu swojego konta. Przełożeni jednym kliknięciem akceptują prośby w
|
||||
systemie.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100 shadow-none bg-transparent">
|
||||
<img class="card-img-top rounded-3 shadow-sm border"
|
||||
src="https://placehold.co/800x500/ebeef0/696cff?text=Ewidencja+Czasu+Pracy+(ECP)&font=roboto"
|
||||
alt="Ewidencja Czasu Pracy Screenshot">
|
||||
<div class="card-body px-0">
|
||||
<h5 class="card-title fw-bold"><i class="bx bx-pie-chart-alt text-primary me-2"></i>Ewidencja i
|
||||
Rozliczanie (ECP)</h5>
|
||||
<p class="card-text text-muted">Rejestruj wejścia, wyjścia i przerwy za pomocą elektronicznych kart
|
||||
(tzw. "odbijanie karty"). Raportowanie bezpośrednio na poczet rozliczeń kadrowo-płacowych.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cennik -->
|
||||
<div class="card mb-4 bg-label-secondary bg-opacity-10 border-0">
|
||||
<div class="card-body p-4 p-md-5">
|
||||
<div class="text-center mb-4">
|
||||
<h4 class="fw-bold"><i class="bx bx-wallet me-2 text-primary"></i>Przejrzysty model cenowy</h4>
|
||||
<p class="text-muted">Płacisz tylko wtedy, kiedy faktycznie potrzebujesz tej usługi dla swojego zespołu.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-5">
|
||||
<div class="card shadow-sm border-primary border">
|
||||
<div class="card-body text-center p-5">
|
||||
<span class="badge bg-label-primary px-3 py-2 fs-6 mb-4 rounded-pill">Model Per Seat
|
||||
(Zależny od załogi)</span>
|
||||
<h1 class="display-3 fw-bold text-dark mb-1">10 <span
|
||||
class="fs-4 fw-normal text-muted">PLN</span></h1>
|
||||
<p class="text-muted fw-semibold mb-4">Miesięcznie, <span
|
||||
class="text-primary text-decoration-underline">za każdego przypisanego
|
||||
pracownika</span></p>
|
||||
|
||||
<ul class="list-unstyled text-start mb-0">
|
||||
<li class="mb-3 d-flex"><i class="bx bx-check text-primary me-2 fs-5 mt-1"></i>
|
||||
<span>Możliwość przypisania konkretnych działów. Brak opłaty za uśpione
|
||||
konta.</span></li>
|
||||
<li class="mb-3 d-flex"><i class="bx bx-check text-primary me-2 fs-5 mt-1"></i>
|
||||
<span>Pełny dostęp do aplikacji mobilnej.</span></li>
|
||||
<li class="mb-3 d-flex"><i class="bx bx-check text-primary me-2 fs-5 mt-1"></i>
|
||||
<span>Zintegrowana wysyłka powiadomień na e-mail i push.</span></li>
|
||||
<li class="d-flex"><i class="bx bx-check text-primary me-2 fs-5 mt-1"></i> <span>Moduł
|
||||
kadrowy dla zewnętrznej księgowości (gratis).</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal Potwierdzający Aktywację -->
|
||||
<div class="modal fade" id="activationModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-bottom pb-3">
|
||||
<h5 class="modal-title fw-bold" id="exampleModalLabel1">Potwierdzenie aktywacji modułu</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body py-4">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div
|
||||
class="avatar avatar-md bg-label-warning rounded p-2 me-3 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-error text-warning fs-3"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0 fw-bold">Uwaga o zmianie abonamentu</h6>
|
||||
<small class="text-muted">Aktywacja usług dodatkowych wpływa na wysokość opłat
|
||||
subskrypcyjnych.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Czy na pewno chcesz aktywować wybraną usługę <strong>
|
||||
<?php echo $appData['title']; ?>
|
||||
</strong> na koncie firmy?</p>
|
||||
|
||||
<div class="alert alert-secondary p-3 mb-0">
|
||||
<p class="mb-1 fw-bold"><i class="bx bx-info-circle me-1"></i> Informacje rozliczeniowe:</p>
|
||||
<ul class="mb-0 ps-3 small">
|
||||
<li>Koszty usługi to 10 PLN miesięcznie za każdego użytkownika podpiętego testowo pod tę
|
||||
strukturę.</li>
|
||||
<li>Kwota zostanie automatycznie doliczona do najbliższej zbiorczej faktury abonamentowej (cykl
|
||||
30-dniowy).</li>
|
||||
<li>Aplikację możesz w każdej chwili ponownie wyłączyć powracając do tego widoku.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer border-top pt-3">
|
||||
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Zrezygnuj</button>
|
||||
<button type="button" class="btn btn-primary"
|
||||
onclick="alert('Moduł został aktywowany! Symulacja zakończenia procesu.'); bootstrap.Modal.getInstance(document.getElementById('activationModal')).hide();">Akceptuję,
|
||||
zaktualizuj usługi</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-backdrop fade"></div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// ...
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
218
prototype/company/app-services.php
Normal file
218
prototype/company/app-services.php
Normal file
@@ -0,0 +1,218 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
<h4 class="fw-bold py-3 mb-4">
|
||||
<span class="text-muted fw-light">Zarządzanie firmą /</span> Usługi i aplikacje
|
||||
</h4>
|
||||
|
||||
<div class="card mb-4 bg-label-primary shadow-none border border-primary">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-start align-items-sm-center gap-3">
|
||||
<div
|
||||
class="avatar avatar-md p-1 bg-white rounded flex-shrink-0 shadow-sm d-flex justify-content-center align-items-center">
|
||||
<i class="bx bx-grid-alt text-primary fs-3"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-dark mb-1 fw-bold">Twój ekosystem magico</h5>
|
||||
<p class="mb-0 text-dark small">
|
||||
Poniżej znajduje się lista wszystkich modułów i aplikacji dostępnych w ramach naszego systemu.
|
||||
Widzisz tutaj zarówno aplikacje, z których aktualnie korzystasz, jak i te, które możesz w każdej
|
||||
chwili aktywować.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Układ 3 kart (col-md-4) z Aplikacjami -->
|
||||
<div class="row g-4 mb-4">
|
||||
|
||||
<!-- Karta 1: invoice.magico -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar avatar-sm bg-label-primary rounded p-2 me-3 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-receipt fs-4"></i>
|
||||
</div>
|
||||
<h5 class="mb-0 fw-bold">invoice.magico</h5>
|
||||
</div>
|
||||
<span class="badge bg-label-success">Aktywna</span>
|
||||
</div>
|
||||
|
||||
<p class="text-muted small mb-4 flex-grow-1">
|
||||
Moduł obsługi księgowej i wystawiania dokumentów sprzedaży. Zarządzanie fakturami VAT,
|
||||
proformami oraz bazą kontrahentów.
|
||||
</p>
|
||||
|
||||
<div class="d-flex flex-column gap-2 mt-auto">
|
||||
<div class="d-flex align-items-center text-muted small mb-2">
|
||||
<i class="bx bx-check text-success me-2"></i> KSeF Ready
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-muted small mb-3">
|
||||
<i class="bx bx-check text-success me-2"></i> Automatyzacja faktur
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-top bg-transparent pt-3 pb-3">
|
||||
<a href="app-services-detail.php?id=invoice" class="btn btn-outline-primary w-100">
|
||||
Zarządzaj aplikacją <i class="bx bx-right-arrow-alt ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta 2: sync.magico -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar avatar-sm bg-label-info rounded p-2 me-3 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-refresh fs-4"></i>
|
||||
</div>
|
||||
<h5 class="mb-0 fw-bold">sync.magico</h5>
|
||||
</div>
|
||||
<span class="badge bg-label-success">Aktywna</span>
|
||||
</div>
|
||||
|
||||
<p class="text-muted small mb-4 flex-grow-1">
|
||||
Centrum integracji e-commerce. Kontrola wymiany danych produktowych i magazynowych z
|
||||
zewnętrznymi platformami.
|
||||
</p>
|
||||
|
||||
<div class="d-flex flex-column gap-2 mt-auto">
|
||||
<div class="d-flex align-items-center text-muted small mb-2">
|
||||
<i class="bx bx-check text-success me-2"></i> Integracja z BaseLinker
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-muted small mb-3">
|
||||
<i class="bx bx-check text-success me-2"></i> Dwukierunkowa synch.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-top bg-transparent pt-3 pb-3">
|
||||
<a href="app-services-detail.php?id=sync" class="btn btn-outline-primary w-100">
|
||||
Zarządzaj aplikacją <i class="bx bx-right-arrow-alt ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta 3: helpdesk.magico -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar avatar-sm bg-label-warning rounded p-2 me-3 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-support fs-4"></i>
|
||||
</div>
|
||||
<h5 class="mb-0 fw-bold">helpdesk.magico</h5>
|
||||
</div>
|
||||
<span class="badge bg-label-success">Aktywna</span>
|
||||
</div>
|
||||
|
||||
<p class="text-muted small mb-4 flex-grow-1">
|
||||
System zarządzania zgłoszeniami i wsparcia klienta. Śledzenie statusu ticketów, system ticketowy
|
||||
oraz centrum BOK.
|
||||
</p>
|
||||
|
||||
<div class="d-flex flex-column gap-2 mt-auto">
|
||||
<div class="d-flex align-items-center text-muted small mb-2">
|
||||
<i class="bx bx-check text-success me-2"></i> Skrzynki e-mail (IMAP)
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-muted small mb-3">
|
||||
<i class="bx bx-check text-success me-2"></i> Szablony odpowiedzi
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-top bg-transparent pt-3 pb-3">
|
||||
<a href="app-services-detail.php?id=helpdesk" class="btn btn-outline-primary w-100">
|
||||
Zarządzaj aplikacją <i class="bx bx-right-arrow-alt ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta 4: employee.magico -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100 border border-secondary shadow-none">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<div class="d-flex align-items-center opacity-75">
|
||||
<div
|
||||
class="avatar avatar-sm bg-label-secondary rounded p-2 me-3 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-group fs-4"></i>
|
||||
</div>
|
||||
<h5 class="mb-0 fw-bold text-muted">employee.magico</h5>
|
||||
</div>
|
||||
<span class="badge bg-label-secondary">Nieaktywna</span>
|
||||
</div>
|
||||
|
||||
<p class="text-muted small mb-4 flex-grow-1">
|
||||
Dedykowany portal pracowniczy (HR). Zarządzanie urlopami, wnioskami pracowniczymi oraz ewidencją
|
||||
czasu pracy.
|
||||
</p>
|
||||
|
||||
<div class="d-flex flex-column gap-2 mt-auto">
|
||||
<div class="d-flex align-items-center text-muted small mb-2 opacity-50">
|
||||
<i class="bx bx-check me-2"></i> Portal pracownika (Self-Service)
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-muted small mb-3 opacity-50">
|
||||
<i class="bx bx-check me-2"></i> Obieg wniosków urlopowych
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Przycisk z akcentem na włączenie -->
|
||||
<div class="card-footer border-top bg-secondary bg-opacity-10 pt-3 pb-3">
|
||||
<a href="app-services-detail.php?id=employee" class="btn btn-primary w-100">
|
||||
Dowiedz się więcej <i class="bx bx-right-arrow-alt ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta 5: pos.magico (zwiastun nowej aplikacji) -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100 border border-dashed border-secondary shadow-none bg-lighter">
|
||||
<div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
|
||||
<div
|
||||
class="avatar avatar-md bg-label-secondary rounded p-2 mb-3 mt-4 d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-store-alt fs-2 text-muted"></i>
|
||||
</div>
|
||||
<h5 class="mb-1 fw-bold text-muted">pos.magico</h5>
|
||||
<span class="badge bg-label-dark mb-3">Wkrótce (Q3 2026)</span>
|
||||
|
||||
<p class="text-muted small mb-4">
|
||||
System kasowy (Point of Sale) dla sklepów stacjonarnych. Integracja z terminalami płatniczymi i
|
||||
drukarkami fiskalnymi.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-backdrop fade"></div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// ...
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
242
prototype/company/app-team.php
Normal file
242
prototype/company/app-team.php
Normal file
@@ -0,0 +1,242 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
<h4 class="fw-bold py-3 mb-4">
|
||||
<span class="text-muted fw-light">Zarządzanie zespołem /</span> Twój zespół
|
||||
</h4>
|
||||
|
||||
<div class="card mb-4 bg-label-primary shadow-none border border-primary">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-start align-items-sm-center gap-3">
|
||||
<div
|
||||
class="avatar avatar-md p-1 bg-white rounded flex-shrink-0 shadow-sm d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-info-circle text-primary fs-3"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-dark mb-1 fw-bold">Jak działa dodawanie pracowników i role?</h5>
|
||||
<p class="mb-2 text-dark small">
|
||||
System magico korzysta z centralnego konta <strong>id.magico</strong>. Wpisz e-mail poniżej, a
|
||||
my sprawdzimy, czy pracownik ma już konto. Jeśli tak – dodamy go do Twojej firmy. Jeśli nie –
|
||||
wyślemy mu link do założenia konta.
|
||||
</p>
|
||||
|
||||
<div class="row mt-3 text-dark">
|
||||
<div class="col-md-4 mb-2">
|
||||
<strong class="d-block mb-1"><i class="bx bx-crown text-warning me-1"></i>
|
||||
Właściciel</strong>
|
||||
<span class="small opacity-75">Otrzymuje faktury, zarządza zespołem i ma pełne prawo
|
||||
aktywacji/dezaktywacji wszystkich aplikacji.</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-2">
|
||||
<strong class="d-block mb-1"><i class="bx bx-briefcase text-info me-1"></i>
|
||||
Menadżer</strong>
|
||||
<span class="small opacity-75">Zarządza zespołem i widzi panel, ale nie ma dostępu do
|
||||
rozliczeń ani nie może kupować aplikacji.</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-2">
|
||||
<strong class="d-block mb-1"><i class="bx bx-user text-secondary me-1"></i>
|
||||
Pracownik</strong>
|
||||
<span class="small opacity-75">Domyślnie brak dostępu do tego panelu. Uprawnienia nadajesz w
|
||||
zakładce "Uprawnienia".</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-1">Zaproś nowego członka zespołu</h5>
|
||||
<p class="text-muted small mb-3">Wprowadź adres e-mail osoby, którą chcesz dodać do Twojej firmy.</p>
|
||||
|
||||
<form onsubmit="return false;" class="d-flex mb-3">
|
||||
<div class="input-group input-group-merge shadow-sm" style="max-width: 500px;">
|
||||
<span class="input-group-text bg-white border-end-0"><i
|
||||
class="bx bx-envelope text-muted"></i></span>
|
||||
<input type="email" class="form-control border-start-0 ps-0" placeholder="np. jan.kowalski@firma.pl"
|
||||
required>
|
||||
<button type="button" class="btn btn-primary px-4" data-bs-toggle="modal"
|
||||
data-bs-target="#userSearchModal">
|
||||
Sprawdź <i class="bx bx-right-arrow-alt ms-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5 class="card-header border-bottom d-flex justify-content-between align-items-center">
|
||||
Członkowie zespołu
|
||||
</h5>
|
||||
|
||||
<div class="table-responsive text-nowrap pb-2">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Użytkownik</th>
|
||||
<th>Rola w firmie</th>
|
||||
<th>Status</th>
|
||||
<th class="text-end">Akcje</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-border-bottom-0">
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar avatar-sm me-3">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">BB</span>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold">
|
||||
Bartłomiej Banaczyk
|
||||
<i class="bx bxs-badge-check text-primary ms-1" data-bs-toggle="tooltip"
|
||||
title="Zweryfikowane konto id.magico"></i>
|
||||
</h6>
|
||||
<small class="text-muted">banaczyk@magico.pl</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 250px;">
|
||||
<select class="form-select">
|
||||
<option value="owner" selected>Właściciel</option>
|
||||
<option value="manager">Menadżer</option>
|
||||
<option value="user">Pracownik</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-label-success">Aktywny</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<button type="button" class="btn btn-sm btn-icon btn-text-secondary rounded-circle"
|
||||
disabled>
|
||||
<i class="bx bx-trash fs-5 opacity-50"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar avatar-sm me-3">
|
||||
<span class="avatar-initial rounded-circle bg-label-secondary"><i
|
||||
class="bx bx-user"></i></span>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold text-muted">
|
||||
Piotr Mierzwa
|
||||
</h6>
|
||||
<small class="text-muted">piotr@magico.pl</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 250px;">
|
||||
<span class="text-muted small"><i class="bx bx-time-five me-1"></i>Oczekuje na
|
||||
rejestrację</span>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-label-warning px-2 py-1">
|
||||
<i class="bx bx-mail-send me-1"></i> Ponów zaproszenie
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<button type="button" class="btn btn-sm btn-icon btn-text-danger rounded-circle"
|
||||
data-bs-toggle="tooltip" title="Usuń z firmy">
|
||||
<i class="bx bx-trash fs-5"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar avatar-sm me-3">
|
||||
<img src="https://ui-avatars.com/api/?name=Tech+Magico&background=e7e7ff&color=696cff"
|
||||
alt="Avatar" class="rounded-circle">
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 fw-semibold">
|
||||
Tech Magico
|
||||
<i class="bx bxs-badge-check text-primary ms-1" data-bs-toggle="tooltip"
|
||||
title="Zweryfikowane konto id.magico"></i>
|
||||
</h6>
|
||||
<small class="text-muted">tech@magico.pl</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 250px;">
|
||||
<select class="form-select">
|
||||
<option value="owner">Właściciel</option>
|
||||
<option value="manager">Menadżer</option>
|
||||
<option value="user" selected>Pracownik</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-label-success">Aktywny</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<button type="button" class="btn btn-sm btn-icon btn-text-danger rounded-circle"
|
||||
data-bs-toggle="tooltip" title="Usuń z firmy">
|
||||
<i class="bx bx-trash fs-5"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="userSearchModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-bottom pb-3">
|
||||
<h5 class="modal-title">Dodawanie pracownika</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-4 text-center">
|
||||
|
||||
<div
|
||||
class="avatar avatar-md mx-auto mb-3 bg-label-success rounded-circle d-flex align-items-center justify-content-center">
|
||||
<i class="bx bx-user-check fs-2"></i>
|
||||
</div>
|
||||
<h5>Mamy go!</h5>
|
||||
<p class="text-muted mb-4">Użytkownik <strong>jan.kowalski@firma.pl</strong> posiada już konto w
|
||||
centralnym systemie magico.</p>
|
||||
<button class="btn btn-primary w-100" data-bs-dismiss="modal">
|
||||
<i class="bx bx-plus me-2"></i> Dodaj do mojej firmy
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" class="footer" style="background: #e7e7ff; position: sticky; bottom: 0px; right: 0px;">
|
||||
<footer class="content-footer footer">
|
||||
<div class="container-xxl d-flex py-3 justify-content-center">
|
||||
<button class="btn btn-primary btn-lg">Zapisz</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="content-backdrop fade"></div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Tu znajdą się skrypty odpowiedzialne za logikę widoku zespołu, np. obsługa tabeli
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -59,7 +59,7 @@ $currentPage = basename($_SERVER['PHP_SELF']);
|
||||
<li class="menu-item <?php echo ($currentPage == 'app-groups.php') ? 'active' : ''; ?>">
|
||||
<a href="app-groups.php" class="menu-link">
|
||||
<i class="menu-icon tf-icons bx bx-sitemap"></i>
|
||||
<div class="text-truncate" data-i18n="Grupy">Grupy</div>
|
||||
<div class="text-truncate" data-i18n="Grupy">Grupy uprawnień</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item <?php echo ($currentPage == 'app-permissions.php') ? 'active' : ''; ?>">
|
||||
|
||||
Reference in New Issue
Block a user