Compare commits
3 Commits
a0a4cd28aa
...
f2e1fa6134
| Author | SHA1 | Date | |
|---|---|---|---|
| f2e1fa6134 | |||
| eed545736d | |||
| c63e7e6c9c |
80
header-company.php
Normal file
80
header-company.php
Normal file
@@ -0,0 +1,80 @@
|
||||
<?php
|
||||
$basePath = '';
|
||||
if ($_SERVER['HTTP_HOST'] === 'localhost' || $_SERVER['HTTP_HOST'] === '127.0.0.1') {
|
||||
$basePath = '/magico-prototype';
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
|
||||
data-theme="theme-default" data-assets-path="<?= $basePath ?>/assets/"
|
||||
data-template="vertical-menu-template-no-customizer-starter">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
||||
|
||||
<title>company.magico</title>
|
||||
|
||||
<meta name="description" content="" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="<?= $basePath ?>/assets/img/favicon/favicon.ico" />
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
|
||||
rel="stylesheet" />
|
||||
|
||||
<link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/fonts/boxicons.css" />
|
||||
<!-- <link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/fonts/fontawesome.css" /> -->
|
||||
<!-- <link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/fonts/flag-icons.css" /> -->
|
||||
|
||||
<!-- Core CSS -->
|
||||
<link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/css/rtl/core.css" />
|
||||
<link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/css/rtl/theme-default.css" />
|
||||
<link rel="stylesheet" href="<?= $basePath ?>/assets/css/demo.css" />
|
||||
|
||||
<!-- Vendors CSS -->
|
||||
<link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||
|
||||
<!-- Page CSS -->
|
||||
|
||||
<!-- Helpers -->
|
||||
<script src="<?= $basePath ?>/assets/vendor/js/helpers.js"></script>
|
||||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||||
<script src="<?= $basePath ?>/assets/js/config.js"></script>
|
||||
|
||||
<?php if (!empty($enablePrototypeComments) && $enablePrototypeComments): ?>
|
||||
<link rel="stylesheet" href="<?= $basePath ?>/assets/css/comments.css">
|
||||
<?php endif; ?>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
.layout-menu-fixed .layout-menu,
|
||||
.layout-menu-fixed-offcanvas .layout-menu {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Layout wrapper -->
|
||||
<div class="layout-wrapper layout-content-navbar">
|
||||
<div class="layout-container">
|
||||
<!-- Menu -->
|
||||
|
||||
<?php include 'menu.php'; ?>
|
||||
<!-- / Menu -->
|
||||
|
||||
<!-- Layout container -->
|
||||
<div class="layout-page pt-0" style="padding-top: 0 !important;">
|
||||
|
||||
<!-- Content wrapper -->
|
||||
<div class="content-wrapper">
|
||||
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>
|
||||
291
prototype/company/app-company-info.php
Normal file
291
prototype/company/app-company-info.php
Normal file
@@ -0,0 +1,291 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<!-- Vendor CSS -->
|
||||
<link rel="stylesheet" href="../../assets/vendor/libs/select2/select2.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" />
|
||||
|
||||
<style>
|
||||
/* Obłe krawędzie dla kółka wykadrowania w Cropper JS */
|
||||
.cropper-view-box,
|
||||
.cropper-face {
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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> Informacje o firmie
|
||||
</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="card mb-4">
|
||||
<h5 class="card-header border-bottom">Profil firmy</h5>
|
||||
|
||||
<div class="card-body mt-3">
|
||||
<div class="d-flex align-items-start align-items-sm-center gap-4">
|
||||
<img src="https://ui-avatars.com/api/?name=Firma&background=e7e7ff&color=696cff&size=150"
|
||||
alt="Logo firmy" class="d-block rounded-circle" height="100" width="100" id="uploadedLogo"
|
||||
style="object-fit: cover;">
|
||||
<div class="button-wrapper">
|
||||
<label for="upload" class="btn btn-primary me-2 mb-3" tabindex="0">
|
||||
<span class="d-none d-sm-block">Wgraj nowe logo</span>
|
||||
<i class="bx bx-upload d-block d-sm-none"></i>
|
||||
<input type="file" id="upload" class="account-file-input" hidden
|
||||
accept="image/png, image/jpeg, image/jpg">
|
||||
</label>
|
||||
<button type="button" class="btn btn-label-secondary account-image-reset mb-3">
|
||||
<i class="bx bx-reset d-block d-sm-none"></i>
|
||||
<span class="d-none d-sm-block">Usuń</span>
|
||||
</button>
|
||||
<p class="text-muted mb-0">Dozwolone formaty: JPG, GIF lub PNG. Max rozmiar 800K</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-0">
|
||||
|
||||
<div class="card-body">
|
||||
<form id="formCompanyProfile" onsubmit="return false">
|
||||
<div class="row">
|
||||
<div class="mb-3 col-md-6">
|
||||
<label for="companyShortName" class="form-label">
|
||||
Krótka nazwa firmy
|
||||
<i class="bx bx-info-circle text-muted ms-1 cursor-pointer" data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Nazwa będzie widoczna tylko dla Ciebie i współpracowników. Wykorzystywana w aplikacjach magico."></i>
|
||||
</label>
|
||||
<input class="form-control" type="text" id="companyShortName" name="companyShortName"
|
||||
placeholder="Wpisz krótką nazwę..." value="" autofocus>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<h5 class="card-header border-bottom">Dane rozliczeniowe</h5>
|
||||
<div class="card-body mt-3">
|
||||
<form id="formBillingSettings" onsubmit="return false">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<label for="locationLabel" class="form-label">Kraj</label>
|
||||
<select id="locationLabel" class="form-select select2-country">
|
||||
<option value="pl" selected>Polska</option>
|
||||
<option value="us">Stany Zjednoczone</option>
|
||||
<option value="gb">Wielka Brytania</option>
|
||||
<option value="de">Niemcy</option>
|
||||
<option value="fr">Francja</option>
|
||||
<option value="it">Włochy</option>
|
||||
<option value="es">Hiszpania</option>
|
||||
<option value="ua">Ukraina</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="nipNumber" class="form-label">Numer NIP</label>
|
||||
<input type="text" name="nipNumber" id="nipNumber" placeholder="___-___-__-__"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<label for="companyFullName" class="form-label">Pełna nazwa firmy</label>
|
||||
<input type="text" name="companyFullName" id="companyFullName"
|
||||
placeholder="Wpisz pełną nazwę podmiotu..." class="form-control">
|
||||
<div class="form-text">Do użytku w rozliczeniach i fakturach</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label for="zipCode" class="form-label">Kod pocztowy</label>
|
||||
<input type="text" name="zipCode" id="zipCode" placeholder="__-___"
|
||||
class="form-control">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<label for="cityName" class="form-label">Miasto</label>
|
||||
<input type="text" name="cityName" id="cityName" placeholder="Wpisz miasto..."
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<label for="addressDetails" class="form-label">Adres</label>
|
||||
<input type="text" name="addressDetails" id="addressDetails"
|
||||
placeholder="Ulica i numer budynku/lokalu" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 mt-4">
|
||||
<div class="border-top pt-4">
|
||||
<label for="billingEmail" class="form-label">Dodatkowy adres e-mail do
|
||||
rozliczeń</label>
|
||||
<input type="email" name="billingEmail" id="billingEmail"
|
||||
placeholder="np. ksiegowosc@twojafirma.pl" class="form-control mb-2">
|
||||
|
||||
<div class="alert alert-primary d-flex align-items-baseline mb-0" role="alert">
|
||||
<span class="alert-icon align-middle me-2">
|
||||
<i class="bx bx-info-circle"></i>
|
||||
</span>
|
||||
<div>
|
||||
Dokumenty rozliczeniowe będą automatycznie wysyłane na powyższy adres
|
||||
(opcjonalnie) oraz do wszystkich użytkowników posiadających rolę
|
||||
<strong>"Właściciel"</strong> ustawioną w sekcji Zespół.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal dla Cropper.js -->
|
||||
<div class="modal fade" id="cropModal" 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">
|
||||
<h5 class="modal-title" id="cropModalLabel">Wykadruj logo (koło)</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="img-container"
|
||||
style="max-height: 400px; display: flex; justify-content: center; background-color: #f5f5f9;">
|
||||
<img id="imageToCrop" src="" alt="Obraz do wykadrowania" style="max-width: 100%; display: block;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Anuluj</button>
|
||||
<button type="button" class="btn btn-primary" id="cropButton">Zatwierdź logo</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 src="../../assets/vendor/libs/select2/select2.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// --- Inicjalizacja Tooltipów ---
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// --- Inicjalizacja Select2 ---
|
||||
function renderIcons(option) {
|
||||
if (!option.id) { return option.text; }
|
||||
var $icon = $(
|
||||
"<span class='d-flex align-items-center'><img src='https://flagcdn.com/w20/" + option.id.toLowerCase() + ".png' class='me-2' style='width: 20px; border-radius: 2px;' alt='flag' />" + option.text + "</span>"
|
||||
);
|
||||
return $icon;
|
||||
}
|
||||
|
||||
if ($('.select2-country').length) {
|
||||
$('.select2-country').select2({
|
||||
templateResult: renderIcons,
|
||||
templateSelection: renderIcons,
|
||||
escapeMarkup: function (es) { return es; }
|
||||
});
|
||||
}
|
||||
|
||||
// --- Inicjalizacja Cropper JS ---
|
||||
let cropper;
|
||||
const image = document.getElementById('imageToCrop');
|
||||
const input = document.getElementById('upload');
|
||||
const cropModalEl = document.getElementById('cropModal');
|
||||
const uploadedLogo = document.getElementById('uploadedLogo');
|
||||
let cropModal;
|
||||
|
||||
if (cropModalEl) {
|
||||
cropModal = new bootstrap.Modal(cropModalEl);
|
||||
}
|
||||
|
||||
if (input) {
|
||||
input.addEventListener('change', function (e) {
|
||||
const files = e.target.files;
|
||||
if (files && files.length > 0) {
|
||||
const file = files[0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
image.src = e.target.result;
|
||||
cropModal.show();
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
input.value = ''; // reset value to allow choosing the same file again
|
||||
});
|
||||
}
|
||||
|
||||
if (cropModalEl) {
|
||||
cropModalEl.addEventListener('shown.bs.modal', function () {
|
||||
cropper = new Cropper(image, {
|
||||
aspectRatio: 1, // kwadrat = koło po zaokrągleniu
|
||||
viewMode: 1,
|
||||
dragMode: 'move',
|
||||
autoCropArea: 0.8,
|
||||
restore: false,
|
||||
guides: false,
|
||||
center: false,
|
||||
highlight: false,
|
||||
cropBoxMovable: true,
|
||||
cropBoxResizable: true,
|
||||
toggleDragModeOnDblclick: false,
|
||||
});
|
||||
});
|
||||
|
||||
cropModalEl.addEventListener('hidden.bs.modal', function () {
|
||||
if (cropper) {
|
||||
cropper.destroy();
|
||||
cropper = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const cropBtn = document.getElementById('cropButton');
|
||||
if (cropBtn) {
|
||||
cropBtn.addEventListener('click', function () {
|
||||
if (!cropper) return;
|
||||
const canvas = cropper.getCroppedCanvas({
|
||||
width: 300,
|
||||
height: 300
|
||||
});
|
||||
uploadedLogo.src = canvas.toDataURL(); // aktualizacja logo
|
||||
cropModal.hide();
|
||||
});
|
||||
}
|
||||
|
||||
// Reset obrazka
|
||||
const resetBtn = document.querySelector('.account-image-reset');
|
||||
if (resetBtn) {
|
||||
resetBtn.addEventListener('click', () => {
|
||||
uploadedLogo.src = 'https://ui-avatars.com/api/?name=Firma&background=e7e7ff&color=696cff&size=150';
|
||||
});
|
||||
}
|
||||
});
|
||||
</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>
|
||||
296
prototype/company/index.php
Normal file
296
prototype/company/index.php
Normal file
@@ -0,0 +1,296 @@
|
||||
<?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">
|
||||
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'; ?>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
73
prototype/company/menu.php
Normal file
73
prototype/company/menu.php
Normal file
@@ -0,0 +1,73 @@
|
||||
<?php
|
||||
$currentPage = basename($_SERVER['PHP_SELF']);
|
||||
?>
|
||||
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
|
||||
<div class="app-brand demo">
|
||||
<a href="index.php" class="app-brand-link">
|
||||
<span class="app-brand-text demo menu-text fw-bold ms-2">company.magico</span>
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
|
||||
<i class="bx bx-chevron-left bx-sm align-middle"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="menu-inner-shadow"></div>
|
||||
|
||||
<ul class="menu-inner py-1">
|
||||
|
||||
<!-- Zarządzanie firmą -->
|
||||
<li class="menu-header small text-uppercase">
|
||||
<span class="menu-header-text" data-i18n="Zarządzanie firmą">Zarządzanie firmą</span>
|
||||
</li>
|
||||
|
||||
<li class="menu-item <?php echo ($currentPage == 'index.php') ? 'active' : ''; ?>">
|
||||
<a href="index.php" class="menu-link">
|
||||
<i class="menu-icon tf-icons bx bx-home-circle"></i>
|
||||
<div class="text-truncate" data-i18n="Kokpit">Kokpit</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item <?php echo ($currentPage == 'app-services.php') ? 'active' : ''; ?>">
|
||||
<a href="app-services.php" class="menu-link">
|
||||
<i class="menu-icon tf-icons bx bx-grid-alt"></i>
|
||||
<div class="text-truncate" data-i18n="Usługi i aplikacje">Usługi i aplikacje</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item <?php echo ($currentPage == 'app-billing.php') ? 'active' : ''; ?>">
|
||||
<a href="app-billing.php" class="menu-link">
|
||||
<i class="menu-icon tf-icons bx bx-receipt"></i>
|
||||
<div class="text-truncate" data-i18n="Rozliczenia">Rozliczenia</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item <?php echo ($currentPage == 'app-company-info.php') ? 'active' : ''; ?>">
|
||||
<a href="app-company-info.php" class="menu-link">
|
||||
<i class="menu-icon tf-icons bx bx-buildings"></i>
|
||||
<div class="text-truncate" data-i18n="Informacje o firmie">Informacje o firmie</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Zarządzanie zespołem -->
|
||||
<li class="menu-header small text-uppercase">
|
||||
<span class="menu-header-text" data-i18n="Zarządzanie zespołem">Zarządzanie zespołem</span>
|
||||
</li>
|
||||
|
||||
<li class="menu-item <?php echo ($currentPage == 'app-team.php') ? 'active' : ''; ?>">
|
||||
<a href="app-team.php" class="menu-link">
|
||||
<i class="menu-icon tf-icons bx bx-group"></i>
|
||||
<div class="text-truncate" data-i18n="Zespół">Zespół</div>
|
||||
</a>
|
||||
</li>
|
||||
<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 uprawnień</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item <?php echo ($currentPage == 'app-permissions.php') ? 'active' : ''; ?>">
|
||||
<a href="app-permissions.php" class="menu-link">
|
||||
<i class="menu-icon tf-icons bx bx-shield-quarter"></i>
|
||||
<div class="text-truncate" data-i18n="Uprawnienia">Uprawnienia</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</aside>
|
||||
349
prototype/invoice/app-report-customers.php
Normal file
349
prototype/invoice/app-report-customers.php
Normal file
@@ -0,0 +1,349 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<!-- Vendors CSS dla Select2 i Flatpickr -->
|
||||
<link rel="stylesheet" href="../../assets/vendor/libs/select2/select2.css" />
|
||||
<link rel="stylesheet" href="../../assets/vendor/libs/flatpickr/flatpickr.css" />
|
||||
|
||||
<!-- Nagłówek i przyciski akcji -->
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">
|
||||
<span class="text-muted fw-light">Raporty /</span> Ranking klientów
|
||||
</h4>
|
||||
<p class="text-muted mb-0">Zestawienie kontrahentów generujących największy przychód (Top Nabywców).</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-label-secondary">
|
||||
<i class="bx bx-export me-1"></i> Eksportuj CSV
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
<i class="bx bx-printer me-1"></i> Drukuj raport
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta filtrów -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<form class="row g-3">
|
||||
<div class="col-12 col-md-4">
|
||||
<label class="form-label" for="reportDateRange">Zakres dat</label>
|
||||
<div class="input-group input-group-merge">
|
||||
<span class="input-group-text"><i class="bx bx-calendar"></i></span>
|
||||
<input type="text" id="reportDateRange" class="form-control flatpickr-range"
|
||||
placeholder="Wybierz okres (od - do)" value="2026-01-01 do 2026-06-30" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<label class="form-label" for="reportLimit">Zakres danych</label>
|
||||
<select id="reportLimit" class="form-select select2">
|
||||
<option value="10" selected>Top 10</option>
|
||||
<option value="50">Top 50</option>
|
||||
<option value="all">Wszyscy</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 d-flex align-items-end">
|
||||
<button type="button" class="btn btn-primary w-100 w-md-auto">
|
||||
<i class="bx bx-refresh me-1"></i> Generuj
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Wykres - zajmuje prawą stronę na dużym ekranie, bądź górę -->
|
||||
<div class="col-12">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title m-0">Wykres Top 10 Odbiorców</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="customersReportChart" style="min-height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabela -->
|
||||
<div class="col-12">
|
||||
<div class="card h-100">
|
||||
<div class="card-header border-bottom">
|
||||
<h5 class="card-title m-0">Szczegółowe zestawienie</h5>
|
||||
</div>
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover table-sm align-middle">
|
||||
<thead class="table-light sticky-top">
|
||||
<tr>
|
||||
<th class="text-center" style="width: 50px;">Miejsce</th>
|
||||
<th>Kontrahent</th>
|
||||
<th class="text-center">Dokumenty</th>
|
||||
<th class="text-end">Kwota Netto</th>
|
||||
<th style="width: 120px;">Udział %</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar avatar-sm mx-auto">
|
||||
<span
|
||||
class="avatar-initial rounded-circle bg-label-warning fw-bold fs-6">1</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">TechSolutions Sp. z o.o.</span>
|
||||
<small class="text-muted">NIP: 813-345-67-89</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">24</td>
|
||||
<td class="text-end fw-bold">64 500.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 35.3%"
|
||||
aria-valuenow="35.3" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">35%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar avatar-sm mx-auto">
|
||||
<span class="avatar-initial rounded-circle bg-label-secondary fw-bold fs-6"
|
||||
style="color:#788393 !important;">2</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">Gmina Stalowa Wola</span>
|
||||
<small class="text-muted">NIP: 865-123-44-55</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">8</td>
|
||||
<td class="text-end fw-bold">42 800.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 23.4%"
|
||||
aria-valuenow="23.4" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">23%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar avatar-sm mx-auto">
|
||||
<span class="avatar-initial rounded-circle bg-label-danger fw-bold fs-6"
|
||||
style="color:#ffb400 !important; background-color: #fff2d6 !important;">3</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">Kwiaciarnia "Róża"</span>
|
||||
<small class="text-muted">NIP: 734-111-22-33</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">45</td>
|
||||
<td class="text-end fw-bold">31 200.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 17.1%"
|
||||
aria-valuenow="17.1" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">17%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><span class="text-muted fw-bold">4</span></td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">F.H.U Jan Kowalski</span>
|
||||
<small class="text-muted">NIP: 555-666-77-88</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">12</td>
|
||||
<td class="text-end fw-bold">18 500.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 10.1%"
|
||||
aria-valuenow="10.1" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">10%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><span class="text-muted fw-bold">5</span></td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">Piekarnia "Złoty Kłos"</span>
|
||||
<small class="text-muted">NIP: 123-456-78-90</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">31</td>
|
||||
<td class="text-end fw-bold">15 400.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 8.4%"
|
||||
aria-valuenow="8.4" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">8%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><span class="text-muted fw-bold">6</span></td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">Sklep Rybny "Posejdon"</span>
|
||||
<small class="text-muted">NIP: 987-654-32-10</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">4</td>
|
||||
<td class="text-end fw-bold">10 150.00 zł</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="progress w-100" style="height: 6px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 5.6%"
|
||||
aria-valuenow="5.6" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="fw-medium">6%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="table-light fw-bold">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="text-center">124</td>
|
||||
<td class="text-end text-primary">182 550.00 zł</td>
|
||||
<td class="text-center">100%</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<!-- Vendors JS -->
|
||||
<script src="../../assets/vendor/libs/select2/select2.js"></script>
|
||||
<script src="../../assets/vendor/libs/flatpickr/flatpickr.js"></script>
|
||||
|
||||
<!-- ApexCharts scripts and local chart init -->
|
||||
<script src="../../assets/vendor/libs/apex-charts/apexcharts.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 1. Inicjalizacja Flatpickr
|
||||
if (typeof flatpickr !== 'undefined') {
|
||||
const dateRangeEl = document.querySelector('.flatpickr-range');
|
||||
if (dateRangeEl) {
|
||||
flatpickr(dateRangeEl, {
|
||||
mode: 'range',
|
||||
dateFormat: 'Y-m-d',
|
||||
locale: 'pl'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Inicjalizacja Select2
|
||||
if (typeof $ !== 'undefined' && $('.select2').length) {
|
||||
$('.select2').select2({
|
||||
minimumResultsForSearch: Infinity
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Inicjalizacja Wykresu (Horizontal Bar)
|
||||
const chartEl = document.querySelector('#customersReportChart');
|
||||
if (chartEl && typeof ApexCharts !== 'undefined') {
|
||||
const chartConfig = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 480, // Trochę wyższy by pomieścić wszystkie etykiety
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false }
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
horizontal: true, // Kluczowe by wykres był poziomy
|
||||
barHeight: '50%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
textAnchor: 'start',
|
||||
style: {
|
||||
colors: ['#fff']
|
||||
},
|
||||
formatter: function (val, opt) {
|
||||
return val.toLocaleString('pl-PL') + " zł";
|
||||
},
|
||||
offsetX: 0,
|
||||
},
|
||||
series: [{
|
||||
name: 'Przychody netto',
|
||||
data: [64500, 42800, 31200, 18500, 15400, 10150]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: [
|
||||
'TechSolutions Sp.', 'Gmina Stalowa Wola',
|
||||
'Kwiaciarnia "Róża"',
|
||||
'F.H.U Jan Kowalski',
|
||||
'Piekarnia Złoty Kłos',
|
||||
'Sklep Rybny Posejdon'
|
||||
],
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return (val / 1000) + "k";
|
||||
},
|
||||
style: { colors: '#a1acb8', fontSize: '13px' }
|
||||
},
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: '#566a7f', fontSize: '13px', fontWeight: 500 }
|
||||
}
|
||||
},
|
||||
colors: ['#696cff'], // Primary color
|
||||
grid: {
|
||||
borderColor: '#e9ecef',
|
||||
strokeDashArray: 4,
|
||||
xaxis: { lines: { show: true } },
|
||||
yaxis: { lines: { show: false } },
|
||||
padding: { top: -20, bottom: -10, left: 10, right: 10 }
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val.toLocaleString('pl-PL') + " zł";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const customersChart = new ApexCharts(chartEl, chartConfig);
|
||||
customersChart.render();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
267
prototype/invoice/app-report-sales.php
Normal file
267
prototype/invoice/app-report-sales.php
Normal file
@@ -0,0 +1,267 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<!-- Vendors CSS dla Select2 i Flatpickr -->
|
||||
<link rel="stylesheet" href="../../assets/vendor/libs/select2/select2.css" />
|
||||
<link rel="stylesheet" href="../../assets/vendor/libs/flatpickr/flatpickr.css" />
|
||||
|
||||
<!-- Nagłówek i przyciski akcji -->
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">
|
||||
<span class="text-muted fw-light">Raporty /</span> Raport kwotowy sprzedaży
|
||||
</h4>
|
||||
<p class="text-muted mb-0">Zestawienie wygenerowanych przychodów ze sprzedaży we wskazanym okresie.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-label-secondary">
|
||||
<i class="bx bx-export me-1"></i> Eksportuj CSV
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
<i class="bx bx-printer me-1"></i> Drukuj raport
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta filtrów -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<form class="row g-3">
|
||||
<div class="col-12 col-md-4">
|
||||
<label class="form-label" for="reportDateRange">Zakres dat</label>
|
||||
<div class="input-group input-group-merge">
|
||||
<span class="input-group-text"><i class="bx bx-calendar"></i></span>
|
||||
<input type="text" id="reportDateRange" class="form-control flatpickr-range"
|
||||
placeholder="Wybierz okres (od - do)" value="2026-01-01 do 2026-06-30" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<label class="form-label" for="reportGranularity">Szczegółowość</label>
|
||||
<select id="reportGranularity" class="form-select select2">
|
||||
<option value="days">Dni</option>
|
||||
<option value="months" selected>Miesiące</option>
|
||||
<option value="years">Lata</option>
|
||||
</select>
|
||||
<small id="daysLimitInfo" class="text-muted d-none mt-1 d-block">
|
||||
<i class="bx bx-info-circle fs-6 align-middle me-1"></i>Maksymalny okres dla tej opcji wynosi 366 dni.
|
||||
</small>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 d-flex align-items-end">
|
||||
<button type="button" class="btn btn-primary w-100 w-md-auto">
|
||||
<i class="bx bx-refresh me-1"></i> Generuj
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta z wykresem -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title m-0">Przychody netto w czasie</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="salesReportChart" style="min-height: 350px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karta z tabelą danych -->
|
||||
<div class="card">
|
||||
<div class="card-header border-bottom">
|
||||
<h5 class="card-title m-0">Szczegółowe zestawienie</h5>
|
||||
</div>
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Okres (Miesiąc)</th>
|
||||
<th class="text-center">Ilość dokumentów</th>
|
||||
<th class="text-end">Suma Kwot Netto</th>
|
||||
<th class="text-end">Suma Kwot VAT</th>
|
||||
<th class="text-end">Suma Kwot Brutto</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-medium">Styczeń 2026</td>
|
||||
<td class="text-center">15</td>
|
||||
<td class="text-end">24 500.00 zł</td>
|
||||
<td class="text-end">5 635.00 zł</td>
|
||||
<td class="text-end fw-bold text-heading">30 135.00 zł</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Luty 2026</td>
|
||||
<td class="text-center">21</td>
|
||||
<td class="text-end">31 200.00 zł</td>
|
||||
<td class="text-end">7 176.00 zł</td>
|
||||
<td class="text-end fw-bold text-heading">38 376.00 zł</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Marzec 2026</td>
|
||||
<td class="text-center">18</td>
|
||||
<td class="text-end">28 450.00 zł</td>
|
||||
<td class="text-end">6 543.50 zł</td>
|
||||
<td class="text-end fw-bold text-heading">34 993.50 zł</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Kwiecień 2026</td>
|
||||
<td class="text-center">24</td>
|
||||
<td class="text-end">36 800.00 zł</td>
|
||||
<td class="text-end">8 464.00 zł</td>
|
||||
<td class="text-end fw-bold text-heading">45 264.00 zł</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Maj 2026</td>
|
||||
<td class="text-center">12</td>
|
||||
<td class="text-end">19 100.00 zł</td>
|
||||
<td class="text-end">4 393.00 zł</td>
|
||||
<td class="text-end fw-bold text-heading">23 493.00 zł</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Czerwiec 2026</td>
|
||||
<td class="text-center">30</td>
|
||||
<td class="text-end">42 500.00 zł</td>
|
||||
<td class="text-end">9 775.00 zł</td>
|
||||
<td class="text-end fw-bold text-heading">52 275.00 zł</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="table-light fw-bold">
|
||||
<tr>
|
||||
<td>Podsumowanie całkowite</td>
|
||||
<td class="text-center">120</td>
|
||||
<td class="text-end text-primary">182 550.00 zł</td>
|
||||
<td class="text-end text-primary">41 986.50 zł</td>
|
||||
<td class="text-end text-primary fs-5">224 536.50 zł</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<!-- Vendors JS -->
|
||||
<script src="../../assets/vendor/libs/select2/select2.js"></script>
|
||||
<script src="../../assets/vendor/libs/flatpickr/flatpickr.js"></script>
|
||||
|
||||
<!-- ApexCharts scripts and local chart init -->
|
||||
<script src="../../assets/vendor/libs/apex-charts/apexcharts.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 1. Inicjalizacja Flatpickr dla zakresu dat
|
||||
if (typeof flatpickr !== 'undefined') {
|
||||
const dateRangeEl = document.querySelector('.flatpickr-range');
|
||||
if (dateRangeEl) {
|
||||
flatpickr(dateRangeEl, {
|
||||
mode: 'range',
|
||||
dateFormat: 'Y-m-d',
|
||||
locale: 'pl'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Inicjalizacja Select2
|
||||
if (typeof $ !== 'undefined' && $('.select2').length) {
|
||||
$('.select2').select2({
|
||||
minimumResultsForSearch: Infinity // Ukrywamy search jeśli to tylko 3 opcje
|
||||
});
|
||||
|
||||
// Obsługa pojawiania się podpowiedzi po wybraniu z selecta
|
||||
$('#reportGranularity').on('change', function () {
|
||||
const daysInfo = document.getElementById('daysLimitInfo');
|
||||
if (this.value === 'days') {
|
||||
daysInfo.classList.remove('d-none');
|
||||
} else {
|
||||
daysInfo.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
// Triggerujemy change dla zainicjowania stanu ukrycia/pokazania podczas ładowania
|
||||
$('#reportGranularity').trigger('change');
|
||||
}
|
||||
|
||||
// 3. Inicjalizacja Wykresu
|
||||
const chartEl = document.querySelector('#salesReportChart');
|
||||
if (chartEl && typeof ApexCharts !== 'undefined') {
|
||||
const chartConfig = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar', // lub 'line' / 'area' w zależności od preferencji, bar dobrze działa do zestawień miesięcznych
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
columnWidth: '40%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Przychody netto (PLN)',
|
||||
data: [24500, 31200, 28450, 36800, 19100, 42500]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec'],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#a1acb8',
|
||||
fontSize: '13px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return val.toLocaleString('pl-PL') + " zł";
|
||||
},
|
||||
style: {
|
||||
colors: '#a1acb8',
|
||||
fontSize: '13px'
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: ['#696cff'], // Kolor primary bootstrapa z szablonu Sneat
|
||||
grid: {
|
||||
borderColor: '#e9ecef',
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: -10,
|
||||
left: 20,
|
||||
right: 20
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val.toLocaleString('pl-PL') + " zł";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const salesChart = new ApexCharts(chartEl, chartConfig);
|
||||
salesChart.render();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
164
prototype/invoice/app-reports.php
Normal file
164
prototype/invoice/app-reports.php
Normal file
@@ -0,0 +1,164 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<!-- Header with description -->
|
||||
<div class="card p-0 mb-4">
|
||||
<div class="card-body d-flex flex-column flex-md-row justify-content-between p-0">
|
||||
|
||||
<!-- Left image -->
|
||||
<div class="d-none d-md-flex app-academy-md-25 card-body py-0 pt-3 ps-5 align-items-center">
|
||||
<img src="../../assets/img/illustrations/bulb-light.png" width="90" class="img-fluid" alt="Bulb"
|
||||
data-app-light-img="illustrations/bulb-light.png" data-app-dark-img="illustrations/bulb-dark.png">
|
||||
</div>
|
||||
|
||||
<!-- Center context -->
|
||||
<div class="app-academy-md-50 card-body d-flex align-items-md-center flex-column text-md-center mb-1 py-5">
|
||||
<h4 class="card-title mb-4 px-md-12 lh-base fw-bold">
|
||||
Analizuj i wizualizuj dane finansowe<br>
|
||||
w <span class="text-primary text-nowrap">przejrzystych raportach</span>.
|
||||
</h4>
|
||||
<p class="mb-4 col-md-10 text-muted">
|
||||
Poniżej prezentujemy dostępne raporty, które pomogą Ci śledzić i analizować kondycję finansową
|
||||
Twojej firmy.
|
||||
Monitoruj przychody, koszty oraz rentowność, wybierając odpowiedni typ zestawienia, a następnie
|
||||
dostosuj
|
||||
jego parametry czasowe żeby wygenerować dokument dla pożądanego okresu.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Right image -->
|
||||
<div class="d-none d-md-flex app-academy-md-25 align-items-end justify-content-end pe-4 pb-2">
|
||||
<img src="../../assets/img/illustrations/pencil-rocket.png" alt="pencil rocket" height="150"
|
||||
class="scaleX-n1-rtl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reports Gallery -->
|
||||
<div class="card p-4">
|
||||
<div class="row">
|
||||
|
||||
<!-- Raport kwotowy sprzedaży -->
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-2 h-100 shadow-none border">
|
||||
<div class="card-body p-4 pt-2 d-flex flex-column">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<span class="badge bg-label-success">Przychody</span>
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="h5 mb-2 fw-semibold">Raport kwotowy sprzedaży</a>
|
||||
<p class="mt-1 text-muted mb-4 flex-grow-1">
|
||||
Szczegółowe zestawienie wygenerowanych przychodów ze sprzedaży we wskazanym okresie.
|
||||
Pozwala przeanalizować jakie towary i usługi przynoszą największy obrót.
|
||||
</p>
|
||||
<div class="d-flex flex-column flex-md-row gap-4 mt-auto">
|
||||
<a class="w-100 btn btn-label-primary d-flex align-items-center justify-content-center"
|
||||
href="app-report-sales.php">
|
||||
<span class="me-2">Wygeneruj</span>
|
||||
<i class="bx bx-chevron-right icon-sm lh-1 scaleX-n1-rtl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ranking klientów -->
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-2 h-100 shadow-none border">
|
||||
<div class="card-body p-4 pt-2 d-flex flex-column">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<span class="badge bg-label-success">Przychody</span>
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="h5 mb-2 fw-semibold">Ranking klientów</a>
|
||||
<p class="mt-1 text-muted mb-4 flex-grow-1">
|
||||
Zbiorcze zestawienie wszystkich kontrahentów ułożonych od generujących największy przychód
|
||||
do najmniejszego.
|
||||
Pomaga szybko zidentyfikować kluczowych nabywców.
|
||||
</p>
|
||||
<div class="d-flex flex-column flex-md-row gap-4 mt-auto">
|
||||
<a class="w-100 btn btn-label-primary d-flex align-items-center justify-content-center"
|
||||
href="app-report-customers.php">
|
||||
<span class="me-2">Wygeneruj</span>
|
||||
<i class="bx bx-chevron-right icon-sm lh-1 scaleX-n1-rtl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Analiza kontrahenta -->
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-2 h-100 shadow-none border">
|
||||
<div class="card-body p-4 pt-2 d-flex flex-column">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<span class="badge bg-label-success">Przychody</span>
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="h5 mb-2 fw-semibold">Historia kontrahenta</a>
|
||||
<p class="mt-1 text-muted mb-4 flex-grow-1">
|
||||
Szczegółowa analiza sprzedaży dla wybranego, pojedynczego klienta.
|
||||
Ukazuje trendy, zestawienie poszczególnych faktur i dokumentów z danym kontrahentem.
|
||||
</p>
|
||||
<div class="d-flex flex-column flex-md-row gap-4 mt-auto">
|
||||
<a class="w-100 btn btn-label-primary d-flex align-items-center justify-content-center"
|
||||
href="javascript:void(0);">
|
||||
<span class="me-2">Wygeneruj</span>
|
||||
<i class="bx bx-chevron-right icon-sm lh-1 scaleX-n1-rtl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Raport kwotowy kosztów -->
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-2 h-100 shadow-none border">
|
||||
<div class="card-body p-4 pt-2 d-flex flex-column">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<span class="badge bg-label-danger">Koszty i wydatki</span>
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="h5 mb-2 fw-semibold">Raport kwotowy kosztów</a>
|
||||
<p class="mt-1 text-muted mb-4 flex-grow-1">
|
||||
Analiza poniesionych wydatków i kosztów firmowych z podziałem na kategorie oraz sprzedawców,
|
||||
ułatwiająca zlokalizowanie kluczowych obszarów wydatków.
|
||||
</p>
|
||||
<div class="d-flex flex-column flex-md-row gap-4 mt-auto">
|
||||
<a class="w-100 btn btn-label-primary d-flex align-items-center justify-content-center"
|
||||
href="javascript:void(0);">
|
||||
<span class="me-2">Wygeneruj</span>
|
||||
<i class="bx bx-chevron-right icon-sm lh-1 scaleX-n1-rtl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bilans zysków i strat -->
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-2 h-100 shadow-none border">
|
||||
<div class="card-body p-4 pt-2 d-flex flex-column">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<span class="badge bg-label-info">Podsumowanie całkowite</span>
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="h5 mb-2 fw-semibold">Bilans zysków i strat</a>
|
||||
<p class="mt-1 text-muted mb-4 flex-grow-1">
|
||||
Kompleksowe zestawienie przychodów oraz kosztów. Generuje automatyczne wyliczenia podatków
|
||||
oraz ilustruje całkowitą rentowność i ogólny wynik finansowy w podanym przedziale czasowym.
|
||||
</p>
|
||||
<div class="d-flex flex-column flex-md-row gap-4 mt-auto">
|
||||
<a class="w-100 btn btn-label-primary d-flex align-items-center justify-content-center"
|
||||
href="javascript:void(0);">
|
||||
<span class="me-2">Wygeneruj</span>
|
||||
<i class="bx bx-chevron-right icon-sm lh-1 scaleX-n1-rtl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
418
prototype/invoice/index.php
Normal file
418
prototype/invoice/index.php
Normal file
@@ -0,0 +1,418 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
include '../../header-invoice.php';
|
||||
?>
|
||||
|
||||
<div class="container-fluid flex-grow-1 container-p-y">
|
||||
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h4 class="mb-1 text-body">Witaj w panelu firmy! 👋</h4>
|
||||
<p class="text-muted mb-0">Oto finansowe podsumowanie Twojego biznesu.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-5 g-4 mb-4">
|
||||
|
||||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2 pb-1">
|
||||
<div class="avatar me-2">
|
||||
<span class="avatar-initial rounded bg-label-primary"><i
|
||||
class='bx bx-trending-up fs-4'></i></span>
|
||||
</div>
|
||||
<h4 class="ms-1 mb-0 text-nowrap">24 500 zł</h4>
|
||||
</div>
|
||||
<p class="mb-1 fw-medium text-heading">Sprzedaż (Ten miesiąc)</p>
|
||||
<p class="mb-0 text-muted small">
|
||||
<span class="text-success fw-medium"><i class='bx bx-up-arrow-alt'></i> +12.4%</span> vs zeszły
|
||||
m-c
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2 pb-1">
|
||||
<div class="avatar me-2">
|
||||
<span class="avatar-initial rounded bg-label-secondary"><i
|
||||
class='bx bx-calendar fs-4'></i></span>
|
||||
</div>
|
||||
<h4 class="ms-1 mb-0 text-nowrap">21 800 zł</h4>
|
||||
</div>
|
||||
<p class="mb-1 fw-medium text-heading">Sprzedaż (Poprzedni m-c)</p>
|
||||
<p class="mb-0 text-muted small">Zamknięty okres rozliczeniowy</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2 pb-1">
|
||||
<div class="avatar me-2">
|
||||
<span class="avatar-initial rounded bg-label-success"><i
|
||||
class='bx bx-wallet fs-4'></i></span>
|
||||
</div>
|
||||
<h4 class="ms-1 mb-0 text-nowrap">15 200 zł</h4>
|
||||
</div>
|
||||
<p class="mb-1 fw-medium text-heading">Należności</p>
|
||||
<p class="mb-0 text-muted small">Niezapłacone faktury (w terminie)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card h-100 border border-danger">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2 pb-1">
|
||||
<div class="avatar me-2">
|
||||
<span class="avatar-initial rounded bg-label-danger"><i
|
||||
class='bx bx-error-circle fs-4'></i></span>
|
||||
</div>
|
||||
<h4 class="ms-1 mb-0 text-danger text-nowrap">4 350 zł</h4>
|
||||
</div>
|
||||
<p class="mb-1 fw-medium text-danger">Po terminie</p>
|
||||
<p class="mb-0 text-muted small">5 dokumentów wymaga uwagi</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2 pb-1">
|
||||
<div class="avatar me-2">
|
||||
<span class="avatar-initial rounded bg-label-warning"><i
|
||||
class='bx bx-credit-card-front fs-4'></i></span>
|
||||
</div>
|
||||
<h4 class="ms-1 mb-0 text-nowrap">8 100 zł</h4>
|
||||
</div>
|
||||
<p class="mb-1 fw-medium text-heading">Zobowiązania</p>
|
||||
<p class="mb-0 text-muted small">Twoje koszty do opłacenia</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row mb-4 g-4">
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title mb-0">Sprzedaż netto (Ostatnie 12 miesięcy)</h5>
|
||||
<div class="dropdown">
|
||||
<button class="btn p-0" type="button" data-bs-toggle="dropdown"><i
|
||||
class="bx bx-dots-vertical-rounded"></i></button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="javascript:void(0);">Pobierz jako raport</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="sales12MonthsChart" style="min-height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title mb-0">Porównanie Rok do Roku</h5>
|
||||
<select class="form-select form-select-sm w-auto">
|
||||
<option value="3" selected>Ost. 3 lata</option>
|
||||
<option value="5">Ost. 5 lat</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="salesYoYChart" style="min-height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row g-4">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header border-bottom d-flex justify-content-between align-items-center px-3 py-2">
|
||||
<h5 class="card-title mb-0 pt-1 px-2">Wymaga uwagi</h5>
|
||||
<ul class="nav nav-pills card-header-pills" role="tablist">
|
||||
<li class="nav-item">
|
||||
<button type="button" class="nav-link active btn-sm" data-bs-toggle="tab"
|
||||
data-bs-target="#tab-debtors">Dłużnicy</button>
|
||||
</li>
|
||||
<li class="nav-item ms-2">
|
||||
<button type="button" class="nav-link btn-sm" data-bs-toggle="tab"
|
||||
data-bs-target="#tab-payables">Do zapłaty</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="tab-content p-0">
|
||||
|
||||
<div class="tab-pane fade show active" id="tab-debtors">
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover table-sm align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="ps-4">Klient</th>
|
||||
<th>Nr Faktury</th>
|
||||
<th class="text-center">Dni zwłoki</th>
|
||||
<th class="text-end pe-4">Kwota</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-border-bottom-0">
|
||||
<tr>
|
||||
<td class="ps-4 fw-medium text-heading">Gmina Stalowa Wola</td>
|
||||
<td><a href="#">FV/02/2026</a></td>
|
||||
<td class="text-center"><span class="badge bg-label-danger">14 dni</span>
|
||||
</td>
|
||||
<td class="text-end pe-4 fw-bold">1 250,00 zł</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ps-4 fw-medium text-heading">TechSolutions Sp. z o.o.</td>
|
||||
<td><a href="#">FV/01/2026</a></td>
|
||||
<td class="text-center"><span class="badge bg-label-warning">5 dni</span>
|
||||
</td>
|
||||
<td class="text-end pe-4 fw-bold">3 100,00 zł</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-3 text-center border-top">
|
||||
<a href="app-invoice-list.php" class="btn btn-label-primary btn-sm">Zobacz faktury
|
||||
nierozliczone</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="tab-payables">
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover table-sm align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="ps-4">Dostawca</th>
|
||||
<th>Termin</th>
|
||||
<th class="text-end pe-4">Kwota</th>
|
||||
<th style="width: 50px;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-border-bottom-0">
|
||||
<tr>
|
||||
<td class="ps-4 fw-medium text-heading">Tauron Polska</td>
|
||||
<td><span class="text-danger fw-bold">Wczoraj</span></td>
|
||||
<td class="text-end pe-4 fw-bold">1 450,20 zł</td>
|
||||
<td><button class="btn btn-sm btn-icon btn-label-success"
|
||||
title="Oznacz jako zapłacone"><i class="bx bx-check"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ps-4 fw-medium text-heading">Orange S.A.</td>
|
||||
<td>Za 2 dni</td>
|
||||
<td class="text-end pe-4 fw-bold">150,00 zł</td>
|
||||
<td><button class="btn btn-sm btn-icon btn-label-success"
|
||||
title="Oznacz jako zapłacone"><i class="bx bx-check"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-3 text-center border-top">
|
||||
<a href="app-purchase-list.php" class="btn btn-label-primary btn-sm">Zobacz wszystkie
|
||||
koszty</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header border-bottom d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title mb-0"><i class='bx bx-cloud-download text-primary me-2'></i>Ostatnio pobrane z
|
||||
KSeF</h5>
|
||||
<button class="btn btn-sm btn-label-secondary" title="Sprawdź nowe dokumenty"><i
|
||||
class="bx bx-refresh"></i></button>
|
||||
</div>
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover table-sm align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="ps-4">Wystawca</th>
|
||||
<th>Numer KSeF</th>
|
||||
<th class="text-end">Kwota Brutto</th>
|
||||
<th class="text-end pe-4">Pobrano</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-border-bottom-0">
|
||||
<tr>
|
||||
<td class="ps-4">
|
||||
<span class="fw-medium text-heading">Orlen S.A.</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small">...3C4D5E-6F</span>
|
||||
</td>
|
||||
<td class="text-end fw-bold">350,00 zł</td>
|
||||
<td class="text-end pe-4"><span class="badge bg-label-info">15 min temu</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ps-4">
|
||||
<span class="fw-medium text-heading">PGE Obrót S.A.</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small">...A8B9C0-11</span>
|
||||
</td>
|
||||
<td class="text-end fw-bold">1 200,45 zł</td>
|
||||
<td class="text-end pe-4"><span class="badge bg-label-secondary">2 godz. temu</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ps-4">
|
||||
<span class="fw-medium text-heading">Castorama Polska</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small">...F1A2D3-44</span>
|
||||
</td>
|
||||
<td class="text-end fw-bold">840,00 zł</td>
|
||||
<td class="text-end pe-4"><span class="badge bg-label-secondary">Wczoraj</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ps-4">
|
||||
<span class="fw-medium text-heading">Poczta Polska S.A.</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small">...E5F6A7-99</span>
|
||||
</td>
|
||||
<td class="text-end fw-bold">12,50 zł</td>
|
||||
<td class="text-end pe-4"><span class="badge bg-label-secondary">Wczoraj</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer border-top text-center py-2">
|
||||
<a href="app-purchase-list.php" class="text-primary small fw-medium">Przejdź do listy faktur
|
||||
zakupowych</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="content-backdrop fade"></div>
|
||||
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
<script src="../../assets/vendor/libs/apex-charts/apexcharts.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// Konfiguracja i kolory ze stylu szablonu
|
||||
let cardColor = '#fff',
|
||||
headingColor = '#566a7f',
|
||||
axisColor = '#a1acb8',
|
||||
borderColor = '#eceef1',
|
||||
primaryColor = '#696cff',
|
||||
infoColor = '#03c3ec';
|
||||
|
||||
// 1. Wykres Słupkowy - 12 Miesięcy (Przychody)
|
||||
const sales12MonthsEl = document.querySelector('#sales12MonthsChart');
|
||||
if (sales12MonthsEl) {
|
||||
const sales12MonthsOptions = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'bar',
|
||||
toolbar: { show: false }
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
columnWidth: '40%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
colors: [primaryColor],
|
||||
dataLabels: { enabled: false },
|
||||
series: [{
|
||||
name: 'Sprzedaż Netto (zł)',
|
||||
data: [12000, 15000, 14000, 18000, 22000, 19000, 25000, 21000, 17000, 23000, 21800, 24500]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ['Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru', 'Sty', 'Lut', 'Mar'],
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: { style: { colors: axisColor } }
|
||||
},
|
||||
yaxis: {
|
||||
labels: { style: { colors: axisColor }, formatter: function (val) { return val / 1000 + "k"; } }
|
||||
},
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
padding: { top: -20, bottom: -10, left: 10, right: 10 }
|
||||
}
|
||||
};
|
||||
const sales12MonthsChart = new ApexCharts(sales12MonthsEl, sales12MonthsOptions);
|
||||
sales12MonthsChart.render();
|
||||
}
|
||||
|
||||
// 2. Wykres Liniowy - Porównanie Rok do Roku (YoY)
|
||||
const salesYoYEl = document.querySelector('#salesYoYChart');
|
||||
if (salesYoYEl) {
|
||||
const salesYoYOptions = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'line',
|
||||
toolbar: { show: false }
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'smooth'
|
||||
},
|
||||
colors: [primaryColor, infoColor, '#ffab00'], // Lata 2026, 2025, 2024
|
||||
series: [
|
||||
{ name: '2026', data: [15, 21.8, 24.5, null, null, null, null, null, null, null, null, null] },
|
||||
{ name: '2025', data: [12, 14, 18, 20, 25, 22, 28, 29, 31, 26, 33, 35] },
|
||||
{ name: '2024', data: [10, 11, 13, 14, 17, 16, 20, 21, 23, 22, 25, 28] }
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
horizontalAlign: 'start',
|
||||
labels: { colors: headingColor }
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'],
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: { style: { colors: axisColor } }
|
||||
},
|
||||
yaxis: {
|
||||
show: false // Ukrywamy oś Y by wykres był czystszy (trend jest widoczny z tooltipów)
|
||||
},
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
padding: { top: 0, bottom: -10, left: 10, right: 10 }
|
||||
}
|
||||
};
|
||||
const salesYoYChart = new ApexCharts(salesYoYEl, salesYoYOptions);
|
||||
salesYoYChart.render();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -65,6 +65,12 @@ $currentPage = basename($_SERVER['PHP_SELF']);
|
||||
<div class="text-truncate" data-i18n="Kontrahenci">Kontrahenci</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item <?php echo ($currentPage == 'app-reports.php') ? 'active' : ''; ?>">
|
||||
<a href="app-reports.php" class="menu-link">
|
||||
<i class="menu-icon tf-icons bx bx-bar-chart-alt-2"></i>
|
||||
<div class="text-truncate" data-i18n="Raporty">Raporty</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="menu-item <?php echo ($currentPage == 'sys-export.php' || $currentPage == 'sys-dictionaries.php' || $currentPage == 'sys-settings.php' || $currentPage == 'sys-logs.php') ? 'active open' : ''; ?>">
|
||||
|
||||
Reference in New Issue
Block a user