templates/base.html.twig line 1

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <meta charset="UTF-8">
  7.     <title>Global Commissions :: {% block title %}!{% endblock %}</title>
  8.     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
  9.     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
  10.     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.2/css/fixedHeader.dataTables.min.css">
  11.     <style>
  12.         /* Custom styles for table */
  13.         .dataTables_wrapper {
  14.             width: 100%;
  15.             margin: 0 auto;
  16.         }
  17.     </style>
  19.     {% block stylesheets %}
  20.         {{ encore_entry_link_tags('app') }}
  21.     {% endblock %}
  23.     <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js" defer></script>
  24. </head>
  25. <body {% if app.user and app.user.employeeStatus and app.user.employeeStatus.value == 'LEAVE_OF_ABSENCE' and (app.user.leaveOfAbsenceStartDate is null or app.user.leaveOfAbsenceEndDate is null) %}data-show-absence-popup="true"{% endif %}>
  26. <div class="max-w-screen-3xl  mx-auto">
  28. {% include('layout/header.html.twig') %}
  29. {% set flashMessages = [] %}
  31. {% for type, messages in app.flashes(['success', 'danger', 'warning']) %}
  32.     {% for message in messages %}
  33.         {% set flashMessages = flashMessages|merge([{type, message}]) %}
  34.     {% endfor %}
  35. {% endfor %}
  37. {% if flashMessages|length > 0 %}
  38.     <div class="max-w-screen-xl w-full mx-auto flex-shrink mt-6">
  39.         {% for flashItem in flashMessages %}
  40.             <div class="alert-{{ flashItem.type }}" >
  41.                 {{ flashItem.message }}
  42.             </div>
  43.         {% endfor %}
  44.     </div>
  45. {% endif %}
  46.     <div class="flex flex-col  justify-between min-h-screen">
  47.         <div class="p-8">
  48.             {% block body %}{% endblock %}
  49.         </div>
  50.     </div>
  51. {% include('/layout/footer.html.twig') %}
  52. </div>
  54. {% if app.user and app.user.employeeStatus and app.user.employeeStatus.value == 'LEAVE_OF_ABSENCE' and (app.user.leaveOfAbsenceStartDate is null or app.user.leaveOfAbsenceEndDate is null) %}
  55. <!-- Leave of Absence Modal -->
  56. <div id="leaveOfAbsenceModal" tabindex="-1" aria-hidden="true" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50">
  57.     <div class="relative p-4 w-full max-w-md max-h-full">
  58.         <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
  59.             <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
  60.                 <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
  61.                     Leave of Absence Dates Required
  62.                 </h3>
  63.             </div>
  64.             <div class="p-4 md:p-5">
  65.                 <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
  66.                     Your account is set to Leave of Absence status. Please enter your leave dates to continue.
  67.                 </p>
  68.                 <form id="leaveOfAbsenceForm">
  69.                     <div class="mb-4">
  70.                         <label for="leaveStartDate" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Start Date</label>
  71.                         <input type="date" id="leaveStartDate" name="startDate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required>
  72.                     </div>
  73.                     <div class="mb-4">
  74.                         <label for="leaveEndDate" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">End Date</label>
  75.                         <input type="date" id="leaveEndDate" name="endDate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required>
  76.                     </div>
  77.                     <div id="leaveFormError" class="hidden mb-4 text-sm text-red-600 dark:text-red-500"></div>
  78.                     <button type="submit" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
  79.                         Save Dates
  80.                     </button>
  81.                 </form>
  82.             </div>
  83.         </div>
  84.     </div>
  85. </div>
  86. <script>
  87. document.addEventListener('DOMContentLoaded', function() {
  88.     var modal = document.getElementById('leaveOfAbsenceModal');
  89.     var form = document.getElementById('leaveOfAbsenceForm');
  90.     var errorDiv = document.getElementById('leaveFormError');
  92.     if (modal && form) {
  93.         form.addEventListener('submit', function(e) {
  94.             e.preventDefault();
  96.             var startDate = document.getElementById('leaveStartDate').value;
  97.             var endDate = document.getElementById('leaveEndDate').value;
  99.             errorDiv.classList.add('hidden');
  101.             fetch('/api/leave-of-absence', {
  102.                 method: 'POST',
  103.                 headers: {
  104.                     'Content-Type': 'application/json',
  105.                 },
  106.                 body: JSON.stringify({
  107.                     startDate: startDate,
  108.                     endDate: endDate
  109.                 })
  110.             })
  111.             .then(function(response) {
  112.                 return response.json();
  113.             })
  114.             .then(function(data) {
  115.                 if (data.success) {
  116.                     modal.style.display = 'none';
  117.                     window.location.reload();
  118.                 } else {
  119.                     errorDiv.textContent = data.message;
  120.                     errorDiv.classList.remove('hidden');
  121.                 }
  122.             })
  123.             .catch(function(error) {
  124.                 errorDiv.textContent = 'An error occurred. Please try again.';
  125.                 errorDiv.classList.remove('hidden');
  126.             });
  127.         });
  128.     }
  129. });
  130. </script>
  131. {% endif %}
  133. {% block javascripts %}
  134.     {{ encore_entry_script_tags('app') }}
  135. {% endblock %}
  136. <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
  137. <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
  138. <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedheader/3.2.2/js/dataTables.fixedHeader.min.js"></script>
  140. <script>
  141.     $(document).ready(function() {
  142.         var table = $('#commissionTable').DataTable({
  143.             fixedHeader: true,
  144.             paging: false,
  145.             scrollY: '500px',
  146.             scrollCollapse: true,
  147.             info: false,
  148.             searching: false
  149.         });
  150.     });
  151. </script>
  152. </body>
  153. </html>