templates/home/index.html.twig line 1

Open in your IDE?
  1. {# templates/home/index.html.twig #}
  2. {% extends 'common/base.html.twig' %}
  4. {# 1. VARIABLES DE ESTADO GLOBALES #}
  5. {% set isRestricted = app.user and app.user.team|upper|trim == 'LEGENDS VIEW' %}
  6. {% set accessType = accessType|default((branding_current is not null) ? branding_current.accessType : 'venues') %}
  7. {% set primaryColor = (branding_current is not null) ? branding_current.primaryColor : '#bdbf09' %}
  9. {% block pageid %}home-page{% endblock %}
  11. {% block pageheadercontent %}
  12.     <div class="page-title">
  13.         <h4 class="text-mint_cream">
  14.             <i class="icon-home position-left"></i>
  15.             <span class="text-semibold">Dashboard</span> -
  16.             {% if accessType == 'venues' %} VENUES {% elseif accessType == 'catering' %} CATERING {% else %} AV {% endif %}
  17.         </h4>
  18.     </div>
  19. {% endblock %}
  21. {% block stylesheets %}
  22.     {{ parent() }}
  23.     <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
  24.     <style>
  25.         :root {
  26.             --dash-primary: {{ primaryColor }};
  27.         }
  29.         {#/* Ajustes para que la hora no se corte */#}
  30.         {#.fc-daygrid-event {#}
  31.         {#    white-space: nowrap !important; /* Evita que el texto salte de línea */#}
  32.         {#    overflow: visible !important;   /* Permite que el contenido respire */#}
  33.         {#}#}
  35.         {#.fc-event-time {#}
  36.         {#    flex-shrink: 0 !important;      /* Impide que el título "apriete" a la hora */#}
  37.         {#    margin-right: 5px !important;   /* Espacio sutil entre hora y sala */#}
  38.         {#    font-weight: 700 !important;    /* Mejora la legibilidad */#}
  39.         {#}#}
  41.         /* Permite que el texto respete los saltos de línea \n */
  42.         .fc-event-title {
  43.             white-space: pre-wrap !important;
  44.             font-weight: 500 !important;
  45.             line-height: 1.2 !important; /* Junta un poco el texto para que no ocupe tanto alto */
  46.         }
  48.         .fc-daygrid-event {
  49.             white-space: normal !important;
  50.         }
  52.         {#/* Opcional: Aumentar ligeramente la altura de los eventos para que se vean mejor en Bootstrap 3 */#}
  53.         {#.fc-v-event .fc-event-main {#}
  54.         {#    padding: 2px 4px !important;#}
  55.         {#}#}
  56.     </style>
  57. {% endblock %}
  59. {% block content %}
  60.     <div id="appLoader" class="app-loader is-visible">
  61.         <div class="app-loader__box">
  62.             {% set loaderLogo = 'assets/images/platform/logo.png' %}
  63.             {% if accessType == 'venues' %}{% set loaderLogo = 'assets/images/platform/logo_ManteVenues.png' %}
  64.             {% elseif accessType == 'catering' %}{% set loaderLogo = 'assets/images/platform/Logo_ManteCatering.png' %}
  65.             {% elseif accessType == 'av' %}{% set loaderLogo = 'assets/images/platform/logo_ManteAv.png' %}
  66.             {% endif %}
  67.             <img src="{{ asset(loaderLogo) }}" width="300" alt="Cargando...">
  68.             <h4 class="text-white" style="margin-top: 25px; font-weight: 300;">Preparando tu espacio de trabajo...</h4>
  69.         </div>
  70.     </div>
  72.     <div class="row">
  73.         <div class="col-md-9">
  74.             <div class="panel panel-default" style="border-radius: 8px; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
  75.                 <div class="panel-body">
  76.                     <div class="calendar-wrapper">
  77.                         <div id="calendarLoader"><div class="spinner"></div></div>
  78.                         <div id="calendar"></div>
  79.                     </div>
  80.                 </div>
  81.             </div>
  82.         </div>
  84.         {% set kpiClass = (accessType == 'venues') ? 'col-xs-4' : 'col-xs-6' %}
  86.         <div class="col-md-3">
  87.             {# 1. KPIs SUPERIORES #}
  88.             <div class="row">
  89.                 <div class="{{ kpiClass }}">
  90.                     <div class="kpi-card bg-dash-1">
  91.                         <i class="icon-calendar52 kpi-icon"></i>
  92.                         <div class="kpi-data">
  93.                             <span class="kpi-number">{{ upcomingReservations|length }}</span>
  94.                         </div>
  95.                         <span class="kpi-desc text-center">Reservas</span>
  96.                     </div>
  97.                 </div>
  99.                 {% if accessType == 'venues' %}
  100.                     <div class="{{ kpiClass }}">
  101.                         <div class="kpi-card bg-dash-2">
  102.                             <i class="icon-users4 kpi-icon"></i>
  103.                             <div class="kpi-data">
  104.                                 <span class="kpi-number">{{ upcomingVisits|length }}</span>
  105.                             </div>
  106.                             <span class="kpi-desc text-center">Visitas</span>
  107.                         </div>
  108.                     </div>
  109.                 {% endif %}
  111.                 <div class="{{ kpiClass }}">
  112.                     <div class="kpi-card bg-dash-3">
  113.                         <i class="icon-alarm kpi-icon"></i>
  114.                         <div class="kpi-data">
  115.                             <span class="kpi-number">{{ notifications|length }}</span>
  116.                         </div>
  117.                         <span class="kpi-desc text-center">Notificaciones</span>
  118.                     </div>
  119.                 </div>
  120.             </div>
  122.             {# 1.5 PANEL DE ALERTAS (Solo en Venues) #}
  123.             {% if accessType == 'venues' %}
  124.                 <div class="panel panel-flat" style="border-radius: 8px; margin-bottom: 20px; border-left: 4px solid {% if userAlertsCount > 0 %}#F44336{% else %}#4CAF50{% endif %};">
  125.                     <div class="panel-heading" style="padding-bottom: 10px;">
  126.                         <h6 class="panel-title text-semibold {% if userAlertsCount > 0 %}text-danger{% else %}text-success{% endif %}">
  127.                             {% if userAlertsCount > 0 %}
  128.                                 <i class="icon-warning22 position-left"></i> Alertas de expedientes afectados
  129.                             {% else %}
  130.                                 <i class="icon-checkmark-circle position-left"></i> Todo al día
  131.                             {% endif %}
  132.                         </h6>
  133.                     </div>
  134.                     <div class="panel-body text-center" style="padding-top: 5px; padding-bottom: 20px;">
  136.                         {% if userAlertsCount > 0 %}
  137.                             <p class="text-muted" style="margin-bottom: 15px; font-size: 13px;">
  138.                                 Tienes <strong style="font-size: 16px; color: #F44336;">{{ userAlertsCount }}</strong> {% if userAlertsCount == 1 %}expediente{% else %}expedientes{% endif %} con salas que han perdido disponibilidad.
  139.                             </p>
  140.                             <a href="/venues/availability/" class="btn btn-block text-semibold" style="border-radius: 6px; background-color: #F44336; color: #ffffff; border: 1px solid #d32f2f;">
  141.                                 Resolver mis {{ userAlertsCount }} alertas <i class="icon-arrow-right14 position-right" style="color: #ffffff;"></i>
  142.                             </a>
  143.                         {% else %}
  144.                             <p class="text-muted" style="margin-bottom: 15px; font-size: 13px;">
  145.                                 Sin alertas. No tienes ningún expediente afectado en este momento.
  146.                             </p>
  147.                             <a href="/venues/availability/" class="btn btn-default btn-block text-semibold" style="border-radius: 6px; color: #666;">
  148.                                 Ver alertas de compañeros <i class="icon-arrow-right14 position-right"></i>
  149.                             </a>
  150.                         {% endif %}
  152.                     </div>
  153.                 </div>
  154.             {% endif %}
  156.             {# 2. PANEL DE VISITAS (Solo en Venues) #}
  157.             {% if accessType == 'venues' %}
  158.                 <div class="panel panel-flat" style="border-radius: 8px; margin-bottom: 20px;">
  159.                     <div class="panel-heading">
  160.                         <h6 class="panel-title text-semibold">
  161.                             <i class="icon-users4 position-left"></i> Visitas para hoy
  162.                         </h6>
  163.                     </div>
  164.                     <div class="panel-body scrollable-panel" style="padding: 0; max-height: 300px; overflow-y: auto;">
  165.                         <table class="table table-hover">
  166.                             <tbody>
  167.                             {% for v in upcomingVisits %}
  168.                                 <tr class="{{ isRestricted ? 'is-restricted-row' : '' }}">
  169.                                     <td style="padding: 12px 15px;"
  170.                                             {% if not isRestricted %}
  171.                                         class="js-event-link"
  172.                                         data-url="{{ r.url|default('#')|e('html_attr') }}"
  173.                                             {% endif %}>
  174.                                         <div class="text-semibold" style="color: #32aaf0">
  175.                                             {{ v.dateStart|date('d/m H:i') }}
  176.                                         </div>
  177.                                         <div class="text-muted">{{ v.title }}</div>
  178.                                         <div class="text-muted" style="font-size: 11px;">
  179.                                             <i class="icon-location3" style="font-size: 10px;"></i> {{ v.room|default('General') }}
  180.                                         </div>
  181.                                     </td>
  182.                                 </tr>
  183.                             {% else %}
  184.                                 <tr><td class="text-center text-muted p-20">Sin visitas</td></tr>
  185.                             {% endfor %}
  186.                             </tbody>
  187.                         </table>
  188.                     </div>
  189.                 </div>
  190.             {% endif %}
  192.             {# 3. PANEL DE ACTIVIDAD / RESERVAS #}
  193.             <div class="panel panel-flat" style="border-radius: 8px;">
  194.                 <div class="panel-heading">
  195.                     <h6 class="panel-title text-semibold">
  196.                         <i class="icon-list position-left"></i> Actividad de hoy
  197.                     </h6>
  198.                 </div>
  199.                 <div class="panel-body scrollable-panel" style="padding: 0; max-height: 400px; overflow-y: auto;">
  200.                     <table class="table table-hover">
  201.                         <tbody>
  202.                         {% set listData = upcomingReservations|default([]) %}
  203.                         {% for r in listData %}
  204.                             <tr>
  205.                                 <td style="padding: 12px 15px;"
  206.                                         {% if not isRestricted %}
  207.                                     class="js-event-link"
  208.                                     data-url="{{ r.url|default('#')|e('html_attr') }}"
  209.                                         {% elseif r.status in ['Invoiced', 'Facturado'] and r.invoiceUrl %}
  210.                                     class="js-event-link"
  211.                                     data-url="{{ r.invoiceUrl|e('html_attr') }}"
  212.                                         {% else %}
  213.                                     class="js-event-link"
  214.                                     data-url="{{ r.showUrl|default('#')|e('html_attr') }}"
  215.                                         {% endif %}>
  216.                                     <div class="text-semibold" style="color: var(--dash-primary)">
  217.                                         {{ r.dateStart|date('d/m H:i') }}
  218.                                     </div>
  219.                                     <div class="text-bold">{{ r.title }}</div>
  220.                                     <div class="text-muted" style="font-size: 11px;">
  221.                                         <i class="icon-office" style="font-size: 10px;"></i> {{ r.room|default('General') }}
  222.                                     </div>
  223.                                 </td>
  224.                             </tr>
  225.                         {% else %}
  226.                             <tr><td class="text-center text-muted p-20">Sin actividad</td></tr>
  227.                         {% endfor %}
  228.                         </tbody>
  229.                     </table>
  230.                 </div>
  231.             </div>
  232.         </div>
  233.     </div>
  235.     {# Modal de Notificaciones #}
  236.     {% set hasNotifications = notifications is defined and notifications|length > 0 %}
  237.     <div id="notificationsModal" class="modal fade" tabindex="-1" aria-labelledby="notificationsModalLabel">
  238.         <div class="modal-dialog"  role="document">
  239.             <div class="modal-content">
  240.                 <div class="modal-header">
  241.                     <button type="button" class="close" data-dismiss="modal">&times;</button>
  242.                     <h5 class="modal-title">Notificaciones</h5>
  243.                 </div>
  244.                 {% if hasNotifications %}
  245.                         <ul class="list-group" id="notificationsList">
  246.                             {% for n in notifications %}
  247.                                 <li class="list-group-item" data-id="{{ n.id }}">
  248.                                     <div class="clearfix">
  249.                                         <div class="pull-left">
  250.                                             <div>
  251.                                                 <strong>{{ (n.category|lower|capitalize)|trans({}) }}</strong>
  252.                                             </div>
  253.                                             <div>{{ n.text }}</div>
  254.                                             {% if n.linkUrl %}
  255.                                                 <div class="m-t-5">
  256.                                                     <a href="{{ path('reservations_venues_edit_simple', {'id': n.linkUrl}) }}" class="btn btn-link btn-xs" target="_blank" rel="noopener">
  257.                                                         {{ n.linkLabel|default('Abrir') }}
  258.                                                     </a>
  259.                                                 </div>
  260.                                             {% endif %}
  261.                                         </div>
  262.                                         <div class="pull-right">
  263.                                             <button type="button" class="btn btn-default btn-xs js-mark-seen" data-url="{{ path('me_notifications_mark_seen', {'id': n.id}) }}">
  264.                                                 Marcar como vista
  265.                                             </button>
  266.                                         </div>
  267.                                     </div>
  268.                                 </li>
  269.                             {% endfor %}
  270.                         </ul>
  271.                     {% else %}
  272.                         <p class="text-muted">No hay notificaciones pendientes.</p>
  273.                     {% endif %}
  274.                 </div>
  275.         </div>
  276.     </div>
  277.     {# Disparador oculto por si queremos abrir sin jQuery (fallback simple) #}
  278.     <button type="button" id="openNotifModalTrigger" class="hidden" data-toggle="modal" data-target="#notificationsModal"></button>
  279.     {# Añade esto justo antes del bloque de scripts #}
  280.     <div id="debug-access" data-type="{{ accessType }}" style="display:none;"></div>
  281. {% endblock %}
  283. {% block javascripts %}
  284.     {{ parent() }}
  285.     <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
  286.     <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js"></script>
  288.     <script>
  289.         document.addEventListener('DOMContentLoaded', function() {
  290.             const isRestricted = {{ isRestricted ? 'true' : 'false' }};
  291.             const appLoader = document.getElementById('appLoader');
  292.             const calendarLoader = document.getElementById('calendarLoader');
  293.             const calendarEl = document.getElementById('calendar');
  295.             let eventSources = [];
  297.             {% if accessType == 'venues' or isRestricted %}
  298.             eventSources.push({ url: '{{ path("calendar_global_reservations") }}', color: '{{ primaryColor }}' });
  299.             eventSources.push({ url: '{{ path("calendar_global_visits") }}', color: '#32aaf0' });
  301.             {% elseif accessType == 'catering' %}
  302.             // 1. Eventos específicos de Higo & Trigo (Forzamos Rojo)
  303.             eventSources.push({
  304.                 url: '{{ path("calendar_ht_events") }}',
  305.                 color: '#FAAFC3',
  306.                 textColor: '#ffffff'
  307.             });
  309.             // 2. Traemos también las Reservas/Montajes de Venues
  310.             eventSources.push({
  311.                 url: '{{ path("calendar_catering_reservations") }}',
  312.                 color: '{{ primaryColor }}'
  313.             });
  315.             // 3. NUEVO: Pruebas de menú (Menu Testings)
  316.             eventSources.push({
  317.                 url: '{{ path("calendar_catering_menu_testings") }}',
  318.                 color: '#ccad11',
  319.                 textColor: '#ffffff'
  320.             });
  321.             {% elseif accessType == 'av' %}
  322.             eventSources.push({ url: '{{ path("calendar_av_events") }}', color: '#F8A437' });
  323.             {% endif %}
  325.             const calendar = new FullCalendar.Calendar(calendarEl, {
  326.                 initialView: 'dayGridMonth',
  327.                 locale: 'es',
  328.                 height: 'auto',
  329.                 contentHeight: 'auto',
  330.                 headerToolbar: {
  331.                     left: 'prev,next today',
  332.                     center: 'title',
  333.                     right: 'dayGridMonth,timeGridWeek'
  334.                 },
  335.                 eventTimeFormat: {
  336.                     hour: '2-digit',
  337.                     minute: '2-digit',
  338.                     hour12: false
  339.                 },
  341.                 // ORDENACIÓN: Prioridad absoluta al campo orderPriority sobre la hora
  342.                 eventOrder: "orderPriority,start",
  344.                 eventSources: eventSources,
  346.                 eventDataTransform: function(eventData) {
  347.                     // Elevamos la prioridad a la raíz para que eventOrder la detecte
  348.                     if (eventData.extendedProps && eventData.extendedProps.orderPriority !== undefined) {
  349.                         eventData.orderPriority = eventData.extendedProps.orderPriority;
  350.                     } else {
  351.                         eventData.orderPriority = 99;
  352.                     }
  354.                     if (eventData.url) {
  355.                         eventData.extendedProps = eventData.extendedProps || {};
  356.                         eventData.extendedProps.hiddenUrl = eventData.url;
  357.                         delete eventData.url;
  358.                     }
  359.                     return eventData;
  360.                 },
  362.                 // UNIFICADO: Una sola declaración de eventDidMount
  363.                 eventDidMount: function(info) {
  364.                     if (isRestricted) {
  365.                         const status = info.event.extendedProps.status;
  366.                         if (status !== 'Invoiced' && status !== 'Facturado') {
  367.                             // info.el.classList.add('is-restricted-event'); // Quitamos la clase que lo ocultaba visualmente o lo bloqueaba
  368.                             info.el.style.cursor = 'pointer';
  369.                         } else {
  370.                             info.el.style.cursor = 'pointer';
  371.                         }
  372.                     }
  374.                     // Forzar visualización de la hora
  375.                     if (info.event.start) {
  376.                         const timeEl = info.el.querySelector('.fc-event-time');
  377.                         if (timeEl) timeEl.style.fontWeight = 'bold';
  378.                     }
  380.                     // Atributos para resaltado de grupos
  381.                     const groupId = info.event.extendedProps.groupId;
  382.                     if (groupId) {
  383.                         info.el.setAttribute('data-group-id', groupId);
  384.                     }
  386.                     // Tooltip con Bootstrap 3
  387.                     if (info.event.extendedProps.tooltipHtml) {
  388.                         $(info.el).tooltip({
  389.                             title: info.event.extendedProps.tooltipHtml,
  390.                             html: true,
  391.                             container: 'body',
  392.                             trigger: 'hover'
  393.                         });
  394.                     }
  395.                 },
  397.                 eventClick: function(info) {
  398.                     info.jsEvent.preventDefault();
  399.                     
  400.                     if (isRestricted) {
  401.                         const status = info.event.extendedProps.status;
  402.                         const invoiceUrl = info.event.extendedProps.invoiceUrl;
  403.                         const showUrl = info.event.extendedProps.showUrl;
  404.                         
  405.                         // Si es Legends y está facturada, permitimos ver la factura
  406.                         if ((status === 'Invoiced' || status === 'Facturado') && invoiceUrl) {
  407.                             window.open(invoiceUrl, '_blank', 'noopener');
  408.                         } else if (showUrl) {
  409.                             // Si no, permitimos ver el detalle (Show)
  410.                             window.open(showUrl, '_blank', 'noopener');
  411.                         }
  412.                         return false;
  413.                     }
  415.                     const url = info.event.extendedProps.hiddenUrl;
  416.                     if (url) window.open(url, '_blank', 'noopener');
  417.                 },
  419.                 loading: function(isLoading) {
  420.                     if (!isLoading) {
  421.                         if (calendarLoader) calendarLoader.style.display = 'none';
  422.                         if (appLoader) appLoader.classList.remove('is-visible');
  423.                     }
  424.                 },
  426.                 eventMouseEnter: function(info) {
  427.                     info.el.style.zIndex = 10000;
  428.                     const groupId = info.event.extendedProps.groupId;
  429.                     if (groupId) {
  430.                         const events = document.querySelectorAll('.fc-event[data-group-id="' + groupId + '"]');
  431.                         if (events.length > 1) {
  432.                             document.querySelectorAll('.fc-event').forEach(el => el.classList.add('evento-difuminado'));
  433.                             events.forEach(el => {
  434.                                 el.classList.remove('evento-difuminado');
  435.                                 el.classList.add('evento-resaltado');
  436.                             });
  437.                         }
  438.                     }
  439.                 },
  441.                 eventMouseLeave: function(info) {
  442.                     info.el.style.zIndex = '';
  443.                     document.querySelectorAll('.fc-event').forEach(el => {
  444.                         el.classList.remove('evento-difuminado', 'evento-resaltado');
  445.                     });
  446.                 }
  447.             });
  449.             calendar.render();
  451.             document.querySelectorAll('.js-event-link').forEach(function(el) {
  452.                 el.addEventListener('click', function() {
  453.                     const url = this.getAttribute('data-url');
  454.                     if (url) window.open(url, '_blank', 'noopener');
  455.                 });
  456.             });
  458.             // --- NUEVO CÓDIGO AQUÍ: Listener para los botones "Marcar como vista" ---
  459.             document.querySelectorAll('.js-mark-seen').forEach(function(btn) {
  460.                 btn.addEventListener('click', function(e) {
  461.                     e.preventDefault();
  463.                     const url = this.getAttribute('data-url');
  464.                     const listItem = this.closest('li.list-group-item');
  465.                     const button = this;
  467.                     // Deshabilitamos el botón temporalmente
  468.                     button.disabled = true;
  469.                     button.textContent = 'Marcando...';
  471.                     // Hacemos la petición AJAX
  472.                     fetch(url, {
  473.                         method: 'POST', // Asegúrate de que tu ruta en Symfony soporta POST
  474.                         headers: {
  475.                             'X-Requested-With': 'XMLHttpRequest'
  476.                         }
  477.                     })
  478.                             .then(response => {
  479.                                 if (response.ok) {
  480.                                     // Animación de salida y borrado
  481.                                     if (listItem) {
  482.                                         listItem.style.transition = 'opacity 0.3s';
  483.                                         listItem.style.opacity = '0';
  484.                                         setTimeout(() => {
  485.                                             listItem.remove();
  487.                                             // Comprobar si quedan notificaciones
  488.                                             const remaining = document.querySelectorAll('#notificationsList .list-group-item');
  489.                                             if (remaining.length === 0) {
  490.                                                 $('#notificationsModal').modal('hide');
  491.                                             }
  492.                                         }, 300);
  493.                                     }
  494.                                 } else {
  495.                                     console.error('Error al marcar como vista');
  496.                                     button.disabled = false;
  497.                                     button.textContent = 'Marcar como vista';
  498.                                 }
  499.                             })
  500.                             .catch(error => {
  501.                                 console.error('Error:', error);
  502.                                 button.disabled = false;
  503.                                 button.textContent = 'Marcar como vista';
  504.                             });
  505.                 });
  506.             });
  507.             // --- FIN DEL NUEVO CÓDIGO ---
  509.             {% if notifications|length > 0 %}
  510.             if (typeof jQuery !== 'undefined' && jQuery.fn.modal) {
  511.                 jQuery('#notificationsModal').modal('show');
  512.             }
  513.             {% endif %}
  514.         });
  515.         console.log("Access Type detectado:", document.getElementById('debug-access').dataset.type);
  516.     </script>
  517. {% endblock %}