Company - wszystkie moduły - wersja robocza

prototype/company/app-services-detail.php

@@ -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>