src/CompanyGroupBundle/Resources/views/pages/tickets/view_ticket.html.twig line 1

Open in your IDE?
  1. {% set page_title = (ticket.ticketNumber ?? 'Ticket') ~ ' | HoneyBee' %}
  2. {% include '@Application/inc/central_header.html.twig' %}
  3. {% include '@CompanyGroup/pages/admin/_sidebar.html.twig' %}
  5. <style>
  6.     .ticket-view-section { padding: 2rem 0 4rem; }
  8.     /* Breadcrumb */
  9.     .breadcrumb-bar { font-size: 0.82rem; color: #888; margin-bottom: 1.5rem; }
  10.     .breadcrumb-bar a { color: #1d5b9e; text-decoration: none; }
  11.     .breadcrumb-bar a:hover { text-decoration: underline; }
  13.     /* Header card */
  14.     .ticket-header-card {
  15.         background: #fff;
  16.         border: 1px solid #e3eaf3;
  17.         border-radius: 14px;
  18.         padding: 1.5rem 1.75rem;
  19.         margin-bottom: 1.5rem;
  20.     }
  21.     .tk-number {
  22.         font-size: 0.8rem; font-weight: 700;
  23.         color: #1d5b9e; background: #e8f0fb;
  24.         border-radius: 6px; padding: 3px 10px;
  25.         display: inline-block; margin-bottom: 0.6rem;
  26.     }
  27.     .tk-title {
  28.         font-size: 1.4rem; font-weight: 700; color: #1a1a2e; margin-bottom: 0.5rem;
  29.     }
  31.     /* Badges */
  32.     .badge-pill { font-size: 0.72rem; font-weight: 600; border-radius: 50px; padding: 3px 10px; display: inline-block; }
  33.     .badge-status-1  { background: #e3f0ff; color: #1d5b9e; }
  34.     .badge-status-2  { background: #fff3cd; color: #856404; }
  35.     .badge-status-3  { background: #d1f7e7; color: #1a7a4a; }
  36.     .badge-status-4  { background: #e9ecef; color: #6c757d; }
  37.     .badge-priority-1 { background: #fde8e8; color: #c0392b; }
  38.     .badge-priority-2 { background: #fff3cd; color: #856404; }
  39.     .badge-priority-3 { background: #e9ecef; color: #555; }
  40.     .badge-source-system { background: #f0e6ff; color: #6f42c1; }
  41.     .badge-source-manual { background: #e3f0ff; color: #1d5b9e; }
  43.     /* Info grid */
  44.     .info-grid {
  45.         display: grid;
  46.         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  47.         gap: 1rem;
  48.         margin-top: 1.25rem;
  49.     }
  50.     .info-item label {
  51.         font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  52.         letter-spacing: 0.06em; color: #aaa; display: block; margin-bottom: 3px;
  53.     }
  54.     .info-item span { font-size: 0.9rem; color: #333; font-weight: 500; }
  56.     /* Detail card */
  57.     .detail-card {
  58.         background: #fff;
  59.         border: 1px solid #e3eaf3;
  60.         border-radius: 14px;
  61.         padding: 1.5rem 1.75rem;
  62.         margin-bottom: 1.5rem;
  63.     }
  64.     .detail-card h5 {
  65.         font-size: 0.88rem; font-weight: 700; text-transform: uppercase;
  66.         letter-spacing: 0.05em; color: #1d5b9e; margin-bottom: 1rem;
  67.         padding-bottom: 0.5rem; border-bottom: 1px solid #e3eaf3;
  68.     }
  69.     .description-body {
  70.         font-size: 0.92rem; color: #444; line-height: 1.7;
  71.         white-space: pre-wrap;
  72.     }
  74.     /* System tracking card */
  75.     .system-card {
  76.         background: #fcfaff;
  77.         border: 1px solid #e0d4f7;
  78.         border-radius: 14px;
  79.         padding: 1.5rem 1.75rem;
  80.         margin-bottom: 1.5rem;
  81.     }
  82.     .system-card h5 {
  83.         font-size: 0.88rem; font-weight: 700; text-transform: uppercase;
  84.         letter-spacing: 0.05em; color: #6f42c1; margin-bottom: 1rem;
  85.         padding-bottom: 0.5rem; border-bottom: 1px solid #e0d4f7;
  86.     }
  87.     .hash-code {
  88.         font-family: monospace; font-size: 0.8rem;
  89.         background: #f4eeff; color: #6f42c1;
  90.         border-radius: 6px; padding: 4px 10px;
  91.         word-break: break-all;
  92.     }
  93.     .payload-pre {
  94.         background: #1a1a2e; color: #a8d8a8;
  95.         border-radius: 8px; padding: 1rem;
  96.         font-size: 0.78rem; overflow-x: auto;
  97.         max-height: 300px; font-family: monospace;
  98.     }
  100.     /* Timeline */
  101.     .timeline { position: relative; padding-left: 1.75rem; margin-top: 0.5rem; }
  102.     .timeline::before {
  103.         content: ''; position: absolute;
  104.         left: 7px; top: 0; bottom: 0;
  105.         width: 2px; background: #e3eaf3;
  106.     }
  107.     .tl-item { position: relative; margin-bottom: 1.25rem; }
  108.     .tl-dot {
  109.         position: absolute; left: -1.75rem; top: 3px;
  110.         width: 14px; height: 14px; border-radius: 50%;
  111.         background: #1d5b9e; border: 2px solid #fff;
  112.         box-shadow: 0 0 0 2px #1d5b9e;
  113.     }
  114.     .tl-dot.error { background: #c0392b; box-shadow: 0 0 0 2px #c0392b; }
  115.     .tl-time { font-size: 0.75rem; color: #aaa; margin-bottom: 2px; }
  116.     .tl-server { font-size: 0.75rem; color: #888; }
  117.     .tl-message { font-size: 0.875rem; color: #333; font-weight: 500; }
  118.     .tl-code {
  119.         display: inline-block; font-size: 0.72rem; font-weight: 600;
  120.         background: #fde8e8; color: #c0392b;
  121.         border-radius: 4px; padding: 1px 7px; margin-top: 3px;
  122.     }
  123.     .tl-payload-toggle {
  124.         font-size: 0.75rem; color: #1d5b9e;
  125.         cursor: pointer; text-decoration: underline;
  126.         margin-top: 4px; display: inline-block;
  127.     }
  128.     .tl-payload {
  129.         display: none; background: #1a1a2e; color: #a8d8a8;
  130.         border-radius: 6px; padding: 0.75rem; font-size: 0.75rem;
  131.         font-family: monospace; margin-top: 6px; overflow-x: auto;
  132.     }
  134.     /* Action bar */
  135.     .action-bar {
  136.         background: #fff; border: 1px solid #e3eaf3;
  137.         border-radius: 12px; padding: 1rem 1.5rem;
  138.         margin-bottom: 1.5rem;
  139.         display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
  140.     }
  141.     .btn-hb {
  142.         border-radius: 50px; font-size: 0.82rem; font-weight: 600;
  143.         padding: 0.4rem 1.1rem; border: none; cursor: pointer;
  144.         text-decoration: none; display: inline-block;
  145.     }
  146.     .btn-hb-primary { background: #1d5b9e; color: #fff; }
  147.     .btn-hb-primary:hover { background: #174f8a; color: #fff; }
  148.     .btn-hb-success { background: #1a7a4a; color: #fff; }
  149.     .btn-hb-success:hover { background: #155d39; color: #fff; }
  150.     .btn-hb-danger  { background: #c0392b; color: #fff; }
  151.     .btn-hb-danger:hover  { background: #a93226; color: #fff; }
  152.     .btn-hb-outline { background: transparent; color: #1d5b9e; border: 1.5px solid #1d5b9e; }
  153.     .btn-hb-outline:hover { background: #e8f0fb; }
  154.     .count-chip {
  155.         display: inline-flex; align-items: center; gap: 4px;
  156.         font-size: 0.78rem; color: #c0392b; background: #fde8e8;
  157.         border-radius: 50px; padding: 3px 10px; font-weight: 600;
  158.     }
  159. </style>
  161. <div class="hb-admin-layout">
  162. <section class="ticket-view-section">
  163.     <div class="container">
  165.         {# ── Breadcrumb ── #}
  166.         <div class="breadcrumb-bar">
  167.             <a href="{{ path('ticket_list') }}"><i class="fa fa-ticket-alt fa-xs me-1"></i>Tickets</a>
  168.             &nbsp;/&nbsp;
  169.             <span>{{ ticket.ticketNumber ?? 'View' }}</span>
  170.         </div>
  172.         {# ── Action bar ── #}
  173.         <div class="action-bar">
  174.             <a href="{{ path('ticket_edit', {id: ticket.id}) }}" class="btn-hb btn-hb-outline">
  175.                 <i class="fa fa-edit-alt me-1"></i>Edit
  176.             </a>
  177.             {% if ticket.status == 1 or ticket.status == 2 %}
  178.                 <a href="{{ path('ticket_resolve', {id: ticket.id}) }}" class="btn-hb btn-hb-success">
  179.                     <i class="fa fa-check-circle me-1"></i>Mark Resolved
  180.                 </a>
  181.                 <a href="{{ path('ticket_close', {id: ticket.id}) }}" class="btn-hb btn-hb-danger">
  182.                     <i class="fa fa-times-circle me-1"></i>Close
  183.                 </a>
  184.             {% endif %}
  185.             {% if ticket.status == 1 %}
  186.                 <a href="{{ path('ticket_assign', {id: ticket.id}) }}" class="btn-hb btn-hb-primary">
  187.                     <i class="fa fa-user-check me-1"></i>Assign
  188.                 </a>
  189.             {% endif %}
  190.             <a href="{{ path('ticket_list') }}" class="btn-hb btn-hb-outline ms-auto">
  191.                 <i class="fa fa-arrow-left me-1"></i>Back to List
  192.             </a>
  193.         </div>
  195.         {# ── Header card ── #}
  196.         <div class="ticket-header-card">
  197.             <div class="tk-number">{{ ticket.ticketNumber }}</div>
  198.             <div class="tk-title">{{ ticket.title ?? '(No title)' }}</div>
  199.             <div class="d-flex gap-2 flex-wrap align-items-center">
  201.                 {% set statusLabel = {1: 'Open', 2: 'In Progress', 3: 'Resolved', 4: 'Closed'} %}
  202.                 {% set priorityLabel = {1: '🔴 Emergency', 2: '🟡 Important', 3: '🟢 Normal'} %}
  204.                 <span class="badge-pill badge-status-{{ ticket.status ?? 1 }}">
  205.                     {{ statusLabel[ticket.status] ?? 'Unknown' }}
  206.                 </span>
  207.                 <span class="badge-pill badge-priority-{{ ticket.urgency ?? 3 }}">
  208.                     {{ priorityLabel[ticket.urgency] ?? 'Normal' }}
  209.                 </span>
  210.                 {% if ticket.systemCreated %}
  211.                     <span class="badge-pill badge-source-system">
  212.                         <i class="fa fa-robot fa-xs me-1"></i>System Generated
  213.                     </span>
  214.                 {% else %}
  215.                     <span class="badge-pill badge-source-manual">
  216.                         <i class="fa fa-user fa-xs me-1"></i>Manual
  217.                     </span>
  218.                 {% endif %}
  219.                 {% if ticket.reportCount > 1 %}
  220.                     <span class="count-chip">
  221.                         <i class="fa fa-redo fa-xs"></i>
  222.                         Reported {{ ticket.reportCount }} times
  223.                     </span>
  224.                 {% endif %}
  225.             </div>
  227.             <div class="info-grid">
  228.                 <div class="info-item">
  229.                     <label>Created</label>
  230.                     <span>{{ ticket.createdAt ? ticket.createdAt|date('d M Y, H:i') : '—' }}</span>
  231.                 </div>
  232.                 <div class="info-item">
  233.                     <label>First Reported</label>
  234.                     <span>{{ ticket.firstReportedAt ? ticket.firstReportedAt|date('d M Y, H:i') : '—' }}</span>
  235.                 </div>
  236.                 <div class="info-item">
  237.                     <label>Last Reported</label>
  238.                     <span>{{ ticket.lastReportedAt ? ticket.lastReportedAt|date('d M Y, H:i') : '—' }}</span>
  239.                 </div>
  240.                 {% if ticket.deadlineDate %}
  241.                 <div class="info-item">
  242.                     <label>Deadline</label>
  243.                     <span>{{ ticket.deadlineDate|date('d M Y') }}</span>
  244.                 </div>
  245.                 {% endif %}
  246.                 {% if ticket.resolvedAt %}
  247.                 <div class="info-item">
  248.                     <label>Resolved At</label>
  249.                     <span style="color:#1a7a4a">{{ ticket.resolvedAt|date('d M Y, H:i') }}</span>
  250.                 </div>
  251.                 {% endif %}
  252.                 {% if ticket.closedAt %}
  253.                 <div class="info-item">
  254.                     <label>Closed At</label>
  255.                     <span style="color:#6c757d">{{ ticket.closedAt|date('d M Y, H:i') }}</span>
  256.                 </div>
  257.                 {% endif %}
  258.                 <div class="info-item">
  259.                     <label>Reported By</label>
  260.                     <span>{{ ticket.name ?? ('User #' ~ (ticket.userId ?? '—')) }}</span>
  261.                 </div>
  262.                 <div class="info-item">
  263.                     <label>Assigned To</label>
  264.                     <span>{{ ticket.assignedToUserId ? 'User #' ~ ticket.assignedToUserId : '—' }}</span>
  265.                 </div>
  266.                 {% if ticket.serverIdentifier %}
  267.                 <div class="info-item">
  268.                     <label>Server</label>
  269.                     <span><i class="fa fa-server fa-xs me-1"></i>{{ ticket.serverIdentifier }}</span>
  270.                 </div>
  271.                 {% endif %}
  272.             </div>
  273.         </div>
  275.         <div class="row">
  276.             <div class="col-lg-8">
  278.                 {# ── Description ── #}
  279.                 <div class="detail-card">
  280.                     <h5><i class="fa fa-align-left me-2"></i>Description</h5>
  281.                     <div class="description-body">
  282.                         {{ ticket.ticketBody ?? 'No description provided.' }}
  283.                     </div>
  284.                 </div>
  286.                 {# ── Internal note ── #}
  287.                 {% if ticket.note %}
  288.                 <div class="detail-card">
  289.                     <h5><i class="fa fa-sticky-note me-2"></i>Internal Note</h5>
  290.                     <div class="description-body">{{ ticket.note }}</div>
  291.                 </div>
  292.                 {% endif %}
  294.                 {# ── System payload (last) ── #}
  295.                 {% if ticket.lastPayloadJson %}
  296.                 <div class="system-card">
  297.                     <h5><i class="fa fa-code me-2"></i>Last System Payload</h5>
  298.                     <pre class="payload-pre">{{ ticket.lastPayloadJson }}</pre>
  299.                 </div>
  300.                 {% endif %}
  302.                 {# ── Occurrence timeline ── #}
  303.                 {% if reports is defined and reports|length > 0 %}
  304.                 <div class="detail-card">
  305.                     <h5>
  306.                         <i class="fa fa-history me-2"></i>Occurrence Log
  307.                         <span class="count-chip ms-2">{{ reports|length }} entries</span>
  308.                     </h5>
  309.                     <div class="timeline">
  310.                         {% for report in reports %}
  311.                             <div class="tl-item">
  312.                                 <div class="tl-dot {{ report.errorCode ? 'error' }}"></div>
  313.                                 <div class="tl-time">
  314.                                     <i class="fa fa-clock fa-xs me-1"></i>
  315.                                     {{ report.reportedAt ? report.reportedAt|date('d M Y, H:i:s') : '—' }}
  316.                                 </div>
  317.                                 {% if report.serverIdentifier %}
  318.                                     <div class="tl-server">
  319.                                         <i class="fa fa-server fa-xs me-1"></i>{{ report.serverIdentifier }}
  320.                                     </div>
  321.                                 {% endif %}
  322.                                 <div class="tl-message">{{ report.message ?? '(No message)' }}</div>
  323.                                 {% if report.errorCode %}
  324.                                     <span class="tl-code">{{ report.errorCode }}</span>
  325.                                 {% endif %}
  326.                                 {% if report.payloadJson %}
  327.                                     <span class="tl-payload-toggle"
  328.                                           onclick="togglePayload(this)">
  329.                                         <i class="fa fa-code fa-xs me-1"></i>Show payload
  330.                                     </span>
  331.                                     <pre class="tl-payload">{{ report.payloadJson }}</pre>
  332.                                 {% endif %}
  333.                             </div>
  334.                         {% endfor %}
  335.                     </div>
  336.                 </div>
  337.                 {% endif %}
  339.             </div>
  341.             <div class="col-lg-4">
  343.                 {# ── System tracking card ── #}
  344.                 {% if ticket.problemHash %}
  345.                 <div class="system-card">
  346.                     <h5><i class="fa fa-fingerprint me-2"></i>Problem Hash</h5>
  347.                     <div class="hash-code">{{ ticket.problemHash }}</div>
  348.                     <div class="mt-2" style="font-size:0.78rem;color:#888">
  349.                         Used for deduplication — tickets with the same hash
  350.                         reported within 1 hour are merged into this record.
  351.                     </div>
  352.                 </div>
  353.                 {% endif %}
  355.                 {# ── Contact info ── #}
  356.                 {% if ticket.email or ticket.phone or ticket.name %}
  357.                 <div class="detail-card">
  358.                     <h5><i class="fa fa-address-card me-2"></i>Reporter Contact</h5>
  359.                     {% if ticket.name %}
  360.                         <div class="info-item mb-2">
  361.                             <label>Name</label>
  362.                             <span>{{ ticket.name }}</span>
  363.                         </div>
  364.                     {% endif %}
  365.                     {% if ticket.email %}
  366.                         <div class="info-item mb-2">
  367.                             <label>Email</label>
  368.                             <span><a href="mailto:{{ ticket.email }}">{{ ticket.email }}</a></span>
  369.                         </div>
  370.                     {% endif %}
  371.                     {% if ticket.phone %}
  372.                         <div class="info-item mb-2">
  373.                             <label>Phone</label>
  374.                             <span>{{ ticket.phone }}</span>
  375.                         </div>
  376.                     {% endif %}
  377.                     {% if ticket.preferredContactMethod %}
  378.                         <div class="info-item">
  379.                             <label>Preferred Contact</label>
  380.                             <span>{{ ticket.preferredContactMethod == 1 ? 'Email' : 'Phone' }}</span>
  381.                         </div>
  382.                     {% endif %}
  383.                 </div>
  384.                 {% endif %}
  386.                 {# ── Feedback ── #}
  387.                 {% if ticket.feedback %}
  388.                 <div class="detail-card">
  389.                     <h5><i class="fa fa-comment me-2"></i>Feedback</h5>
  390.                     <div style="font-size:0.9rem; color:#444;">{{ ticket.feedback }}</div>
  391.                 </div>
  392.                 {% endif %}
  394.             </div>
  395.         </div>
  397.     </div>
  398. </section>
  400. <script>
  401.     function togglePayload(el) {
  402.         var pre = el.nextElementSibling;
  403.         if (pre.style.display === 'block') {
  404.             pre.style.display = 'none';
  405.             el.textContent = '⌄ Show payload';
  406.         } else {
  407.             pre.style.display = 'block';
  408.             el.innerHTML = '<i class="fa fa-code fa-xs me-1"></i>Hide payload';
  409.         }
  410.     }
  411. </script>
  413. </div>{# /hb-admin-layout #}
  415. {% include '@Application/footer/central_footer.html.twig' %}