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

Open in your IDE?
  1. {% set page_title = 'Tickets | HoneyBee' %}
  2. {% include '@Application/inc/central_header.html.twig' %}
  3. {% include '@CompanyGroup/pages/admin/_sidebar.html.twig' %}
  5. <style>
  6. /* ── Design tokens ─────────────────────────────────────────────────────────── */
  7. :root {
  8.     --n-cream:     #F7F5F0;
  9.     --n-cream-2:   #F0EDE5;
  10.     --n-white:     #FFFFFF;
  11.     --n-dark:      #1A1D2E;
  12.     --n-dark-2:    #252840;
  13.     --n-amber:     #C07D2A;
  14.     --n-amber-lt:  #D4954A;
  15.     --n-amber-dim: rgba(192,125,42,.10);
  16.     --n-sage:      #3D6B52;
  17.     --n-sage-dim:  rgba(61,107,82,.09);
  18.     --n-muted:     #6B6E7F;
  19.     --n-muted-2:   #9395A5;
  20.     --n-border:    rgba(26,29,46,.07);
  21.     --n-border-md: rgba(26,29,46,.12);
  22.     --n-shadow-sm: 0 2px 12px rgba(26,29,46,.07);
  23.     --n-shadow-md: 0 8px 32px rgba(26,29,46,.09);
  24.     --n-radius:    12px;
  25.     --n-radius-sm: 8px;
  26.     --n-font:      'DM Sans', 'Poppins', system-ui, sans-serif;
  27. }
  28. *, *::before, *::after { box-sizing: border-box; }
  29. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); text-align: left; }
  31. /* ── Layout ────────────────────────────────────────────────────────────────── */
  32. .t-wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
  33. .t-page  { padding: 40px 0 80px; }
  35. /* ── Page header ───────────────────────────────────────────────────────────── */
  36. .t-page-header {
  37.     display: flex; align-items: flex-end; justify-content: space-between;
  38.     flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
  39.     padding-bottom: 24px; border-bottom: 1px solid var(--n-border-md);
  40. }
  41. .t-eyebrow {
  42.     display: inline-flex; align-items: center; gap: 8px;
  43.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  44.     color: var(--n-amber); margin-bottom: 8px;
  45. }
  46. .t-eyebrow::before { content:''; width:18px; height:1.5px; background:currentColor; border-radius:2px; }
  47. .t-page-title {
  48.     font-family: 'Montserrat', sans-serif; font-size: clamp(1.4rem,2.5vw,2rem);
  49.     font-weight: 800; color: var(--n-dark); letter-spacing: -.02em; margin: 0 0 4px;
  50. }
  51. .t-page-sub { font-size: .88rem; color: var(--n-muted); margin: 0; }
  53. /* ── Summary chips ─────────────────────────────────────────────────────────── */
  54. .t-summary-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
  55. .t-chip {
  56.     display: inline-flex; align-items: center; gap: 6px;
  57.     padding: 5px 14px; border-radius: 100px;
  58.     font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  59.     border: 1px solid transparent;
  60. }
  61. .t-chip-open     { background: rgba(192,125,42,.10); color: var(--n-amber); border-color: rgba(192,125,42,.2); }
  62. .t-chip-progress { background: rgba(26,29,46,.06);   color: var(--n-dark);  border-color: var(--n-border-md); }
  63. .t-chip-resolved { background: var(--n-sage-dim);    color: var(--n-sage);  border-color: rgba(61,107,82,.2); }
  64. .t-chip-closed   { background: rgba(26,29,46,.04);   color: var(--n-muted); border-color: var(--n-border); }
  65. .t-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  67. /* ── Filter bar ────────────────────────────────────────────────────────────── */
  68. .t-filter-bar {
  69.     background: var(--n-white); border: 1px solid var(--n-border-md);
  70.     border-radius: var(--n-radius); padding: 18px 20px; margin-bottom: 20px;
  71.     box-shadow: var(--n-shadow-sm);
  72. }
  73. .t-filter-bar .form-select,
  74. .t-filter-bar .form-control {
  75.     border-radius: var(--n-radius-sm); font-size: .875rem;
  76.     border: 1.5px solid var(--n-border-md); background: var(--n-cream);
  77.     color: var(--n-dark);
  78. }
  79. .t-filter-bar .form-select:focus,
  80. .t-filter-bar .form-control:focus {
  81.     border-color: var(--n-amber);
  82.     box-shadow: 0 0 0 3px var(--n-amber-dim);
  83. }
  84. .t-filter-bar label { font-size: .78rem; font-weight: 600; color: var(--n-muted); margin-bottom: 4px; display: block; }
  86. /* ── Ticket card ───────────────────────────────────────────────────────────── */
  87. .t-card {
  88.     background: var(--n-white); border: 1px solid var(--n-border-md);
  89.     border-radius: var(--n-radius); padding: 16px 20px;
  90.     margin-bottom: 10px; display: flex; align-items: flex-start; gap: 16px;
  91.     transition: box-shadow .2s, border-color .2s;
  92. }
  93. .t-card:hover { box-shadow: var(--n-shadow-md); border-color: rgba(192,125,42,.22); }
  94. .t-card-icon { padding-top: 3px; flex-shrink: 0; font-size: 1.1rem; }
  95. .t-card-icon.emergency { color: #c0392b; }
  96. .t-card-icon.important { color: var(--n-amber); }
  97. .t-card-icon.normal    { color: var(--n-muted-2); }
  98. .t-card-body { flex: 1; min-width: 0; }
  99. .t-card-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
  100. .t-pill {
  101.     font-family: monospace; font-size: .65rem; font-weight: 700;
  102.     letter-spacing: .06em; text-transform: uppercase;
  103.     padding: 3px 9px; border-radius: 100px; display: inline-block;
  104. }
  105. .t-pill-num      { background: var(--n-amber-dim);  color: var(--n-amber); }
  106. .t-pill-open     { background: var(--n-amber-dim);  color: var(--n-amber); }
  107. .t-pill-progress { background: rgba(26,29,46,.07);  color: var(--n-dark); }
  108. .t-pill-resolved { background: var(--n-sage-dim);   color: var(--n-sage); }
  109. .t-pill-closed   { background: rgba(26,29,46,.04);  color: var(--n-muted-2); }
  110. .t-pill-emerg    { background: rgba(192,57,43,.09); color: #c0392b; }
  111. .t-pill-import   { background: rgba(192,125,42,.10);color: var(--n-amber); }
  112. .t-pill-normal   { background: rgba(26,29,46,.05);  color: var(--n-muted); }
  113. .t-pill-system   { background: rgba(111,66,193,.09);color: #6f42c1; }
  114. .t-pill-manual   { background: var(--n-sage-dim);   color: var(--n-sage); }
  115. .t-pill-api      { background: rgba(26,29,46,.06);  color: var(--n-muted-2); }
  116. .t-count-chip {
  117.     display: inline-flex; align-items: center; gap: 4px;
  118.     font-size: .72rem; color: var(--n-amber); background: var(--n-amber-dim);
  119.     border-radius: 50px; padding: 2px 9px; font-weight: 700; font-family: monospace;
  120. }
  121. .t-card-title { font-size: .95rem; font-weight: 600; color: var(--n-dark); margin-bottom: 4px; }
  122. .t-card-meta  { font-size: .8rem; color: var(--n-muted-2); display: flex; gap: 16px; flex-wrap: wrap; }
  123. .t-card-meta .unassigned { color: #c0392b; }
  124. .t-card-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; text-align: right; }
  125. .t-card-actions a {
  126.     font-size: .78rem; font-weight: 600; color: var(--n-muted);
  127.     text-decoration: none; padding: 4px 10px; border-radius: 6px;
  128.     border: 1px solid var(--n-border-md); background: var(--n-cream);
  129.     white-space: nowrap; transition: all .15s;
  130. }
  131. .t-card-actions a:hover { border-color: var(--n-amber); color: var(--n-amber); background: var(--n-amber-dim); }
  133. /* ── Buttons ───────────────────────────────────────────────────────────────── */
  134. .t-btn-primary {
  135.     display: inline-flex; align-items: center; gap: 7px;
  136.     padding: 10px 22px; background: var(--n-dark); color: #fff;
  137.     border: none; border-radius: var(--n-radius-sm);
  138.     font-family: var(--n-font); font-size: .88rem; font-weight: 700;
  139.     cursor: pointer; text-decoration: none; transition: background .18s;
  140. }
  141. .t-btn-primary:hover { background: var(--n-amber); color: #fff; }
  142. .t-btn-ghost {
  143.     display: inline-flex; align-items: center; gap: 6px;
  144.     padding: 10px 16px; background: transparent; color: var(--n-muted);
  145.     border: 1.5px solid var(--n-border-md); border-radius: var(--n-radius-sm);
  146.     font-family: var(--n-font); font-size: .88rem; font-weight: 600;
  147.     cursor: pointer; text-decoration: none; transition: all .18s;
  148. }
  149. .t-btn-ghost:hover { border-color: var(--n-dark); color: var(--n-dark); }
  151. /* ── Empty state ───────────────────────────────────────────────────────────── */
  152. .t-empty {
  153.     text-align: center; padding: 72px 0; color: var(--n-muted-2);
  154. }
  155. .t-empty-icon { font-size: 2.4rem; margin-bottom: 16px; opacity: .4; }
  156. .t-empty p { font-size: .95rem; margin-bottom: 20px; }
  158. /* ── Pagination ────────────────────────────────────────────────────────────── */
  159. .t-pagination { display: flex; justify-content: center; gap: 4px; margin-top: 28px; flex-wrap: wrap; }
  160. .t-pagination a, .t-pagination span {
  161.     display: inline-flex; align-items: center; justify-content: center;
  162.     width: 36px; height: 36px; border-radius: var(--n-radius-sm);
  163.     font-size: .85rem; font-weight: 600; text-decoration: none;
  164.     border: 1px solid var(--n-border-md); color: var(--n-muted);
  165.     background: var(--n-white); transition: all .15s;
  166. }
  167. .t-pagination a:hover { border-color: var(--n-amber); color: var(--n-amber); }
  168. .t-pagination .active { background: var(--n-dark); color: #fff; border-color: var(--n-dark); }
  169. </style>
  171. <div class="hb-admin-layout">
  172. <div class="t-page">
  173.     <div class="t-wrap">
  175.         {# ── Page header ── #}
  176.         <div class="t-page-header">
  177.             <div>
  178.                 <div class="t-eyebrow">Support</div>
  179.                 <h1 class="t-page-title">Tickets</h1>
  180.                 <p class="t-page-sub">Manage and track all support requests across your workspace</p>
  181.             </div>
  182.             <a href="{{ path('ticket_create') }}" class="t-btn-primary">
  183.                 <i class="fa fa-plus" style="font-size:.75rem"></i> New Ticket
  184.             </a>
  185.         </div>
  187.         {# ── Summary chips ── #}
  188.         <div class="t-summary-row">
  189.             <span class="t-chip t-chip-open">
  190.                 <span class="dot"></span> Open &nbsp;<b>{{ summary.open ?? 0 }}</b>
  191.             </span>
  192.             <span class="t-chip t-chip-progress">
  193.                 <span class="dot"></span> In Progress &nbsp;<b>{{ summary.inProgress ?? 0 }}</b>
  194.             </span>
  195.             <span class="t-chip t-chip-resolved">
  196.                 <span class="dot"></span> Resolved &nbsp;<b>{{ summary.resolved ?? 0 }}</b>
  197.             </span>
  198.             <span class="t-chip t-chip-closed">
  199.                 <span class="dot"></span> Closed &nbsp;<b>{{ summary.closed ?? 0 }}</b>
  200.             </span>
  201.         </div>
  203.         {# ── Filter bar ── #}
  204.         <form method="GET" action="{{ path('ticket_list') }}" class="t-filter-bar">
  205.             <div class="row g-2 align-items-end">
  206.                 <div class="col-12 col-md-3">
  207.                     <label>Status</label>
  208.                     <select name="status" class="form-select form-select-sm">
  209.                         <option value="">All Statuses</option>
  210.                         <option value="1" {{ filters.status == 1 ? 'selected' }}>Open</option>
  211.                         <option value="2" {{ filters.status == 2 ? 'selected' }}>In Progress</option>
  212.                         <option value="3" {{ filters.status == 3 ? 'selected' }}>Resolved</option>
  213.                         <option value="4" {{ filters.status == 4 ? 'selected' }}>Closed</option>
  214.                     </select>
  215.                 </div>
  216.                 <div class="col-12 col-md-2">
  217.                     <label>Priority</label>
  218.                     <select name="priority" class="form-select form-select-sm">
  219.                         <option value="">All Priorities</option>
  220.                         <option value="1" {{ filters.priority == 1 ? 'selected' }}>Emergency</option>
  221.                         <option value="2" {{ filters.priority == 2 ? 'selected' }}>Important</option>
  222.                         <option value="3" {{ filters.priority == 3 ? 'selected' }}>Normal</option>
  223.                     </select>
  224.                 </div>
  225.                 <div class="col-12 col-md-2">
  226.                     <label>Source</label>
  227.                     <select name="source" class="form-select form-select-sm">
  228.                         <option value="">All Sources</option>
  229.                         <option value="1" {{ filters.source == 1 ? 'selected' }}>Manual</option>
  230.                         <option value="2" {{ filters.source == 2 ? 'selected' }}>System</option>
  231.                         <option value="3" {{ filters.source == 3 ? 'selected' }}>API</option>
  232.                     </select>
  233.                 </div>
  234.                 <div class="col-12 col-md-3">
  235.                     <label>Search</label>
  236.                     <input type="text" name="q" class="form-control form-control-sm"
  237.                            placeholder="Ticket number or keyword…"
  238.                            value="{{ filters.q ?? '' }}">
  239.                 </div>
  240.                 <div class="col-12 col-md-2 d-flex gap-2">
  241.                     <button type="submit" class="t-btn-primary w-100" style="padding:8px 12px;justify-content:center;">
  242.                         <i class="fa fa-filter" style="font-size:.75rem"></i> Filter
  243.                     </button>
  244.                     <a href="{{ path('ticket_list') }}" class="t-btn-ghost" style="padding:8px 12px;">
  245.                         <i class="fa fa-times" style="font-size:.75rem"></i>
  246.                     </a>
  247.                 </div>
  248.             </div>
  249.         </form>
  251.         {# ── Ticket list ── #}
  252.         {% if tickets is defined and tickets|length > 0 %}
  254.             {% for ticket in tickets %}
  255.                 {% set statusLabel = {1: 'Open', 2: 'In Progress', 3: 'Resolved', 4: 'Closed'} %}
  256.                 {% set statusPill  = {1: 't-pill-open', 2: 't-pill-progress', 3: 't-pill-resolved', 4: 't-pill-closed'} %}
  257.                 {% set priorityLabel = {1: 'Emergency', 2: 'Important', 3: 'Normal'} %}
  258.                 {% set priorityPill  = {1: 't-pill-emerg', 2: 't-pill-import', 3: 't-pill-normal'} %}
  259.                 {% set iconClass     = {1: 'emergency', 2: 'important', 3: 'normal'} %}
  261.                 <div class="t-card">
  263.                     {# Priority icon #}
  264.                     <div class="t-card-icon {{ iconClass[ticket.urgency] ?? 'normal' }}">
  265.                         {% if ticket.urgency == 1 %}
  266.                             <i class="fa fa-exclamation-circle"></i>
  267.                         {% elseif ticket.urgency == 2 %}
  268.                             <i class="fa fa-exclamation-triangle"></i>
  269.                         {% else %}
  270.                             <i class="fa fa-ticket-alt"></i>
  271.                         {% endif %}
  272.                     </div>
  274.                     {# Main body #}
  275.                     <div class="t-card-body">
  276.                         <div class="t-card-pills">
  277.                             <span class="t-pill t-pill-num">{{ ticket.ticketNumber }}</span>
  278.                             <span class="t-pill {{ statusPill[ticket.status] ?? '' }}">{{ statusLabel[ticket.status] ?? 'Unknown' }}</span>
  279.                             <span class="t-pill {{ priorityPill[ticket.urgency] ?? 't-pill-normal' }}">{{ priorityLabel[ticket.urgency] ?? '' }}</span>
  280.                             {% if ticket.systemCreated %}
  281.                                 <span class="t-pill t-pill-system"><i class="fa fa-robot fa-xs"></i> System</span>
  282.                             {% else %}
  283.                                 <span class="t-pill t-pill-manual"><i class="fa fa-user fa-xs"></i> Manual</span>
  284.                             {% endif %}
  285.                             {% if ticket.reportCount > 1 %}
  286.                                 <span class="t-count-chip">
  287.                                     <i class="fa fa-redo fa-xs"></i> {{ ticket.reportCount }}× reported
  288.                                 </span>
  289.                             {% endif %}
  290.                         </div>
  291.                         <div class="t-card-title">{{ ticket.title ?? '(No title)' }}</div>
  292.                         <div class="t-card-meta">
  293.                             <span><i class="fa fa-calendar-alt fa-xs" style="margin-right:4px"></i>{{ ticket.createdAt ? ticket.createdAt|date('d M Y') : '—' }}</span>
  294.                             {% if ticket.deadlineDate %}
  295.                                 <span><i class="fa fa-clock fa-xs" style="margin-right:4px"></i>Due: {{ ticket.deadlineDate|date('d M Y') }}</span>
  296.                             {% endif %}
  297.                             {% if ticket.assignedToUserId %}
  298.                                 <span><i class="fa fa-user-check fa-xs" style="margin-right:4px"></i>Assigned: #{{ ticket.assignedToUserId }}</span>
  299.                             {% else %}
  300.                                 <span class="unassigned"><i class="fa fa-user-times fa-xs" style="margin-right:4px"></i>Unassigned</span>
  301.                             {% endif %}
  302.                             {% if ticket.serverIdentifier %}
  303.                                 <span><i class="fa fa-server fa-xs" style="margin-right:4px"></i>{{ ticket.serverIdentifier }}</span>
  304.                             {% endif %}
  305.                         </div>
  306.                     </div>
  308.                     {# Actions #}
  309.                     <div class="t-card-actions">
  310.                         <a href="{{ path('ticket_view', {id: ticket.id}) }}">
  311.                             <i class="fa fa-eye fa-xs"></i> View
  312.                         </a>
  313.                         <a href="{{ path('ticket_edit', {id: ticket.id}) }}">
  314.                             <i class="fa fa-edit-alt fa-xs"></i> Edit
  315.                         </a>
  316.                     </div>
  318.                 </div>
  319.             {% endfor %}
  321.         {% else %}
  322.             <div class="t-empty">
  323.                 <div class="t-empty-icon"><i class="fa fa-inbox"></i></div>
  324.                 <p>No tickets found matching your filters.</p>
  325.                 <a href="{{ path('ticket_create') }}" class="t-btn-primary">
  326.                     <i class="fa fa-plus" style="font-size:.75rem"></i> Create First Ticket
  327.                 </a>
  328.             </div>
  329.         {% endif %}
  331.         {# ── Pagination ── #}
  332.         {% if totalPages is defined and totalPages > 1 %}
  333.             <div class="t-pagination">
  334.                 {% for p in 1..totalPages %}
  335.                     {% if p == currentPage %}
  336.                         <span class="active">{{ p }}</span>
  337.                     {% else %}
  338.                         <a href="{{ path('ticket_list', filters|merge({page: p})) }}">{{ p }}</a>
  339.                     {% endif %}
  340.                 {% endfor %}
  341.             </div>
  342.         {% endif %}
  344.     </div>
  345. </div>
  347. </div>{# /hb-admin-layout #}
  349. {% include '@Application/footer/central_footer.html.twig' %}