templates/application/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Applications{% endblock %}
  5. {% block content %}
  6.     <!-- Page Header -->
  7.     <div class="d-flex align-items-center justify-content-between mb-3">
  8.         <div class="d-flex align-items-center">
  9.             <div class="bg-primary bg-opacity-10 rounded d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
  10.                 <i data-lucide="file-text" class="text-primary" style="width: 20px; height: 20px;"></i>
  11.             </div>
  12.             <div>
  13.                 <h4 class="mb-0 fw-semibold">Applications</h4>
  14.                 <span class="text-muted small">{{ applications.totalItemCount }} total applications</span>
  15.             </div>
  16.         </div>
  17.         <div class="d-flex gap-2">
  18.             <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exportApplicationModal">
  19.                 <i data-lucide="download" style="width: 14px; height: 14px;" class="me-1"></i> Export
  20.             </button>
  21.             <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exportHistoryModal">
  22.                 <i data-lucide="clock" style="width: 14px; height: 14px;" class="me-1"></i> Export History
  23.             </button>
  24.             {% if not is_granted('ROLE_READ_ONLY') %}
  25.                 <a href="{{ path('application_create') }}" class="btn btn-primary btn-sm">
  26.                     <i data-lucide="plus" style="width: 14px; height: 14px;" class="me-1"></i> New Application
  27.                 </a>
  28.             {% endif %}
  29.         </div>
  30.     </div>
  32.     <!-- Filters -->
  33.     {% include 'application/_partials/filters.html.twig' %}
  35.     <!-- Applications Table -->
  36.     <div class="card">
  37.         <div class="card-body p-0">
  38.             <div class="table-responsive">
  39.                 <table class="table table-sm table-hover mb-0">
  40.                     <thead class="bg-light">
  41.                     <tr class="small">
  42.                         <th class="border-0" style="width: 25%;">Company</th>
  43.                         <th class="border-0">MCC</th>
  44.                         <th class="border-0">Instance</th>
  45.                         <th class="border-0">Created</th>
  46.                         <th class="border-0" style="width: 28%;">Products & Status</th>
  47.                         <th class="border-0 text-center">Type</th>
  48.                     </tr>
  49.                     </thead>
  50.                     <tbody>
  51.                     {% for application in applications.items %}
  52.                         {% set firstProduct = application.product_statuses is defined and application.product_statuses|length > 0 ? application.product_statuses|first : null %}
  53.                         {% set rowUrl = application.app_token and firstProduct ? path('application_view', {token: application.app_token, product: firstProduct.product_name|default('')|lower|replace({' ': '-', '_': '-'})}) : '#' %}
  54.                         <tr style="cursor: pointer;" onclick="window.location='{{ rowUrl }}';">
  55.                             <td>
  56.                                 <div class="d-flex align-items-center text-decoration-none text-reset">
  57.                                     <div class="flex-shrink-0 me-2">
  58.                                         <div class="bg-secondary bg-opacity-10 rounded d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
  59.                                             <i data-lucide="building-2" class="text-secondary" style="width: 16px; height: 16px;"></i>
  60.                                         </div>
  61.                                     </div>
  62.                                     <div class="min-width-0">
  63.                                         <div class="fw-medium small text-truncate">{{ application.comp_legal_name|default('-') }}</div>
  64.                                         {% if application.comp_uic|default('') %}
  65.                                             <code class="small text-muted">{{ application.comp_uic }}</code>
  66.                                         {% endif %}
  67.                                     </div>
  68.                                 </div>
  69.                             </td>
  70.                             <td>
  71.                                 <span class="small">{{ application.ba_mcc|default('-') }}</span>
  72.                             </td>
  73.                             <td>
  74.                                 <span class="badge bg-light text-dark">{{ application.app_instance|instance }}</span>
  75.                             </td>
  76.                             <td>
  77.                                 <span class="small text-muted">
  78.                                     {{ application.app_created_at|date('d/m/Y H:i') }}
  79.                                 </span>
  80.                             </td>
  81.                             <td>
  82.                                 {% if application.product_statuses is defined and application.product_statuses|length > 0 %}
  83.                                     <div class="d-flex flex-wrap gap-1">
  84.                                         {% for productStatus in application.product_statuses %}
  85.                                             {% set productName = productStatus.product_name|default('') %}
  86.                                             {% set status = productStatus.status|default('') %}
  87.                                             {% set statusColor = status == 'approved' ? 'success' : (status == 'rejected' or status == 'declined' ? 'danger' : (status == 'pending' or status == 'under_review' or status == 'in_review' ? 'warning' : 'secondary')) %}
  88.                                             {% set productSlug = productName|lower|replace({' ': '-', '_': '-'}) %}
  89.                                             {% set productUrl = application.app_token ? path('application_view', {token: application.app_token, product: productSlug}) : '#' %}
  90.                                             <a href="{{ productUrl }}" class="text-decoration-none" onclick="event.stopPropagation();">
  91.                                                 <span class="badge bg-{{ statusColor }}-subtle text-{{ statusColor }}" style="font-size: 10px;">
  92.                                                     {{ productName|upper }}
  93.                                                     {% if status %}
  94.                                                         <span class="opacity-75">• {{ status|replace({'_': ' '})|title }}</span>
  95.                                                     {% endif %}
  96.                                                 </span>
  97.                                             </a>
  98.                                         {% endfor %}
  99.                                     </div>
  100.                                 {% else %}
  101.                                     <span class="text-muted small">-</span>
  102.                                 {% endif %}
  103.                             </td>
  104.                             <td class="text-center">
  105.                                 {% if application.app_channel is defined %}
  106.                                     {% if application.app_channel == 'api' %}
  107.                                         <span class="badge bg-info-subtle text-info" data-bs-toggle="tooltip" title="Submitted via API">
  108.                                             <i data-lucide="zap" style="width: 10px; height: 10px;" class="me-1"></i>Auto
  109.                                         </span>
  110.                                     {% elseif application.app_channel == 'admin' %}
  111.                                         <span class="badge bg-primary-subtle text-primary" data-bs-toggle="tooltip" title="Created manually">
  112.                                             <i data-lucide="user" style="width: 10px; height: 10px;" class="me-1"></i>Manual
  113.                                         </span>
  114.                                     {% else %}
  115.                                         <span class="badge bg-secondary-subtle text-secondary">Unknown</span>
  116.                                     {% endif %}
  117.                                 {% else %}
  118.                                     <span class="badge bg-secondary-subtle text-secondary">-</span>
  119.                                 {% endif %}
  120.                             </td>
  121.                         </tr>
  122.                     {% else %}
  123.                         <tr>
  124.                             <td colspan="7" class="text-center py-5 text-muted">
  125.                                 <i data-lucide="file-x" class="mb-2" style="width: 32px; height: 32px;"></i>
  126.                                 <p class="mb-0">No applications found</p>
  127.                                 <p class="small">Try adjusting your filters</p>
  128.                             </td>
  129.                         </tr>
  130.                     {% endfor %}
  131.                     </tbody>
  132.                 </table>
  133.             </div>
  134.         </div>
  135.         {% if applications.totalItemCount > 0 %}
  136.             <div class="card-footer py-2 bg-light">
  137.                 {{ knp_pagination_render(applications) }}
  138.             </div>
  139.         {% endif %}
  140.     </div>
  142.     {% embed 'application/modals/_export-application-modal.html.twig' %}
  143.         {% block export_modal_js %}{% endblock %}
  144.     {% endembed %}
  146.     {% embed 'export/_export-history-modal.html.twig' %}
  147.         {% block export_history_js %}{% endblock %}
  148.     {% endembed %}
  149. {% endblock %}
  152. {% block css %}
  153.     {{ parent() }}
  154.     <style>
  155.         #advancedFilters {
  156.             display: none;
  157.         }
  158.         #advancedFilters.show {
  159.             display: block;
  160.         }
  161.     </style>
  162. {% endblock %}
  164. {% block js %}
  165.     {{ parent() }}
  166.     <script>
  167.         $(document).ready(function() {
  168.             // Initialize Lucide icons
  169.             if (typeof lucide !== 'undefined') {
  170.                 lucide.createIcons();
  171.             }
  172.             
  173.             // Handle advanced filters toggle manually
  174.             var toggleBtn = document.getElementById('toggleAdvancedFilters');
  175.             var advancedFilters = document.getElementById('advancedFilters');
  176.             if (toggleBtn && advancedFilters) {
  177.                 toggleBtn.addEventListener('click', function(e) {
  178.                     e.preventDefault();
  179.                     e.stopPropagation();
  180.                     
  181.                     if (advancedFilters.classList.contains('show')) {
  182.                         advancedFilters.classList.remove('show');
  183.                         toggleBtn.setAttribute('aria-expanded', 'false');
  184.                     } else {
  185.                         advancedFilters.classList.add('show');
  186.                         toggleBtn.setAttribute('aria-expanded', 'true');
  187.                     }
  188.                 });
  189.             }
  190.             
  191.             // Initialize flatpickr for date fields
  192.             if (typeof flatpickr !== 'undefined') {
  193.                 var $fromInput = $('input[name*="createdAtFrom"]');
  194.                 var $toInput = $('input[name*="createdAtTo"]');
  196.                 if ($fromInput.length && $toInput.length) {
  197.                     var fromPicker = flatpickr($fromInput[0], {
  198.                         dateFormat: 'Y-m-d',
  199.                         altInput: true,
  200.                         altFormat: 'd/m/Y',
  201.                         allowInput: true,
  202.                         onChange: function() {
  203.                             var date = this.selectedDates[0] || null;
  204.                             toPicker.set('minDate', date);
  205.                         }
  206.                     });
  208.                     var toPicker = flatpickr($toInput[0], {
  209.                         dateFormat: 'Y-m-d',
  210.                         altInput: true,
  211.                         altFormat: 'd/m/Y',
  212.                         allowInput: true,
  213.                         onChange: function() {
  214.                             if (this.selectedDates[0] && fromPicker.selectedDates[0] && this.selectedDates[0] < fromPicker.selectedDates[0]) {
  215.                                 this.setDate(null);
  216.                                 alert('End date cannot be before start date');
  217.                             }
  218.                         }
  219.                     });
  221.                     $fromInput.on('input', function() {
  222.                         setTimeout(function() {
  223.                             var date = fromPicker.parseDate($fromInput.val(), 'Y-m-d');
  224.                             toPicker.set('minDate', date && !isNaN(date.getTime()) ? date : null);
  225.                         }, 100);
  226.                     });
  227.                 } else {
  228.                     flatpickr('.flatpickr-date', { dateFormat: 'Y-m-d', altInput: true, altFormat: 'd/m/Y', allowInput: true });
  229.                 }
  230.             }
  232.             // Initialize Bootstrap tooltips
  233.             $('[data-bs-toggle="tooltip"]').each(function() {
  234.                 new bootstrap.Tooltip(this);
  235.             });
  236.         });
  237.     </script>
  238.     
  239.     {% embed 'application/modals/_export-application-modal.html.twig' %}
  240.         {% block export_modal_html %}{% endblock %}
  241.         {% block export_modal_js %}{{ parent() }}{% endblock %}
  242.     {% endembed %}
  244.     {% embed 'export/_export-history-modal.html.twig' %}
  245.         {% block export_history_html %}{{ parent() }}{% endblock %}
  246.         {% block export_history_js %}{{ parent() }}{% endblock %}
  247.     {% endembed %}
  248. {% endblock %}