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

Open in your IDE?
  1. {% set page_title = 'New Ticket | 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. .tc-wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
  33. .tc-page { padding: 40px 0 80px; }
  35. /* ── Breadcrumb ────────────────────────────────────────────────────────────── */
  36. .tc-breadcrumb {
  37.     font-size: .8rem; color: var(--n-muted-2); margin-bottom: 20px;
  38.     display: flex; align-items: center; gap: 6px;
  39. }
  40. .tc-breadcrumb a { color: var(--n-muted); text-decoration: none; font-weight: 500; }
  41. .tc-breadcrumb a:hover { color: var(--n-amber); }
  42. .tc-breadcrumb .sep { color: var(--n-border-md); }
  43. .tc-breadcrumb .current { color: var(--n-dark); font-weight: 600; }
  45. /* ── Page header ───────────────────────────────────────────────────────────── */
  46. .tc-page-title {
  47.     font-family: 'Montserrat', sans-serif; font-size: clamp(1.4rem,2.5vw,1.9rem);
  48.     font-weight: 800; color: var(--n-dark); letter-spacing: -.02em; margin: 0 0 5px;
  49. }
  50. .tc-page-sub { font-size: .88rem; color: var(--n-muted); margin: 0 0 28px; }
  51. .required-star { color: #c0392b; }
  53. /* ── Form card ─────────────────────────────────────────────────────────────── */
  54. .tc-card {
  55.     background: var(--n-white); border: 1px solid var(--n-border-md);
  56.     border-radius: var(--n-radius); padding: 28px 28px 24px;
  57.     margin-bottom: 16px; box-shadow: var(--n-shadow-sm);
  58. }
  59. .tc-card-title {
  60.     font-family: monospace; font-size: .72rem; font-weight: 700;
  61.     letter-spacing: .1em; text-transform: uppercase; color: var(--n-amber);
  62.     margin-bottom: 20px; padding-bottom: 12px;
  63.     border-bottom: 1px solid var(--n-border); display: flex;
  64.     align-items: center; justify-content: space-between; gap: 8px;
  65. }
  66. .tc-card-title i { margin-right: 6px; }
  68. /* ── Form elements ─────────────────────────────────────────────────────────── */
  69. .tc-label {
  70.     display: block; font-size: .8rem; font-weight: 600;
  71.     color: var(--n-muted); margin-bottom: 5px;
  72. }
  73. .tc-input,
  74. .tc-select,
  75. .tc-textarea {
  76.     width: 100%; border-radius: var(--n-radius-sm);
  77.     border: 1.5px solid var(--n-border-md); background: var(--n-cream);
  78.     color: var(--n-dark); font-family: var(--n-font); font-size: .9rem;
  79.     padding: 9px 13px; transition: border-color .15s, box-shadow .15s;
  80.     appearance: none;
  81. }
  82. .tc-textarea { resize: vertical; min-height: 130px; }
  83. .tc-input:focus, .tc-select:focus, .tc-textarea:focus {
  84.     outline: none; border-color: var(--n-amber);
  85.     box-shadow: 0 0 0 3px var(--n-amber-dim);
  86. }
  87. .tc-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6E7F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; }
  88. .tc-char-count { font-size: .73rem; color: var(--n-muted-2); text-align: right; margin-top: 4px; font-family: monospace; }
  89. .tc-hint { font-size: .75rem; color: var(--n-muted-2); margin-top: 4px; }
  91. /* ── Priority grid ─────────────────────────────────────────────────────────── */
  92. .tc-priority-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
  93. .tc-prio-input { display: none; }
  94. .tc-prio-label {
  95.     display: flex; flex-direction: column; align-items: center; justify-content: center;
  96.     gap: 4px; border: 1.5px solid var(--n-border-md); border-radius: var(--n-radius);
  97.     padding: 16px 8px; cursor: pointer; text-align: center; background: var(--n-cream);
  98.     transition: border-color .15s, background .15s;
  99. }
  100. .tc-prio-label:hover { border-color: var(--n-amber-lt); background: var(--n-amber-dim); }
  101. .tc-prio-input:checked + .tc-prio-label { border-color: var(--n-amber); background: var(--n-amber-dim); }
  102. .tc-prio-input[value="1"]:checked + .tc-prio-label { border-color: #c0392b; background: rgba(192,57,43,.07); }
  103. .tc-prio-input[value="2"]:checked + .tc-prio-label { border-color: var(--n-amber-lt); background: var(--n-amber-dim); }
  104. .tc-prio-icon { font-size: 1.4rem; }
  105. .tc-prio-name { font-size: .8rem; font-weight: 700; color: var(--n-dark); }
  106. .tc-prio-desc { font-size: .7rem; color: var(--n-muted-2); }
  108. /* ── Source toggle ─────────────────────────────────────────────────────────── */
  109. .tc-source-toggle {
  110.     display: flex; border: 1.5px solid var(--n-border-md);
  111.     border-radius: var(--n-radius-sm); overflow: hidden;
  112. }
  113. .tc-source-toggle input { display: none; }
  114. .tc-source-toggle label {
  115.     flex: 1; text-align: center; padding: 9px 8px;
  116.     font-size: .82rem; font-weight: 600; cursor: pointer;
  117.     color: var(--n-muted); background: var(--n-cream); transition: all .15s;
  118.     border-right: 1.5px solid var(--n-border-md);
  119. }
  120. .tc-source-toggle label:last-of-type { border-right: none; }
  121. .tc-source-toggle input:checked + label { background: var(--n-dark); color: #fff; }
  123. /* ── Advanced section (collapsible) ───────────────────────────────────────── */
  124. .tc-adv-toggle {
  125.     font-size: .78rem; font-weight: 700; color: var(--n-muted);
  126.     cursor: pointer; display: flex; align-items: center; gap: 5px;
  127.     font-family: monospace; text-transform: uppercase; letter-spacing: .08em;
  128. }
  129. .tc-adv-toggle:hover { color: var(--n-amber); }
  130. .tc-adv-badge {
  131.     background: rgba(111,66,193,.09); color: #6f42c1;
  132.     font-size: .65rem; font-weight: 700; padding: 2px 8px;
  133.     border-radius: 100px; font-family: monospace; letter-spacing: .06em;
  134. }
  135. .tc-adv-body { display: none; margin-top: 16px; }
  136. .tc-adv-body.open { display: block; }
  137. .tc-mono { font-family: monospace !important; font-size: .83rem !important; }
  139. /* ── Action bar ────────────────────────────────────────────────────────────── */
  140. .tc-action-bar {
  141.     display: flex; align-items: center; gap: 12px;
  142.     padding-top: 8px;
  143. }
  144. .tc-btn-submit {
  145.     display: inline-flex; align-items: center; gap: 8px;
  146.     padding: 12px 28px; background: var(--n-dark); color: #fff;
  147.     border: none; border-radius: var(--n-radius-sm);
  148.     font-family: var(--n-font); font-size: .92rem; font-weight: 700;
  149.     cursor: pointer; transition: background .18s, transform .15s; text-decoration: none;
  150. }
  151. .tc-btn-submit:hover { background: var(--n-amber); color: #fff; transform: translateY(-1px); }
  152. .tc-btn-cancel {
  153.     display: inline-flex; align-items: center; gap: 6px;
  154.     padding: 12px 20px; background: transparent; color: var(--n-muted);
  155.     border: 1.5px solid var(--n-border-md); border-radius: var(--n-radius-sm);
  156.     font-family: var(--n-font); font-size: .9rem; font-weight: 600;
  157.     cursor: pointer; text-decoration: none; transition: all .18s;
  158. }
  159. .tc-btn-cancel:hover { border-color: var(--n-dark); color: var(--n-dark); }
  160. </style>
  162. <div class="hb-admin-layout">
  163. <div class="tc-page">
  164.     <div class="tc-wrap">
  166.         {# ── Breadcrumb ── #}
  167.         <div class="tc-breadcrumb">
  168.             <a href="{{ path('ticket_list') }}"><i class="fa fa-ticket-alt fa-xs"></i> Tickets</a>
  169.             <span class="sep">/</span>
  170.             <span class="current">New Ticket</span>
  171.         </div>
  173.         <h1 class="tc-page-title">Create New Ticket</h1>
  174.         <p class="tc-page-sub">Fields marked <span class="required-star">*</span> are required.</p>
  176.         <form method="POST"
  177.               action="{{ path('ticket_create_submit') }}"
  178.               enctype="multipart/form-data"
  179.               id="createTicketForm">
  181.             <div class="row g-4">
  183.                 {# ── LEFT column ── #}
  184.                 <div class="col-lg-8">
  186.                     {# Core details #}
  187.                     <div class="tc-card">
  188.                         <div class="tc-card-title">
  189.                             <span><i class="fa fa-info-circle"></i>Ticket Details</span>
  190.                         </div>
  192.                         <div class="mb-3">
  193.                             <label class="tc-label">Title <span class="required-star">*</span></label>
  194.                             <input type="text" name="title" class="tc-input"
  195.                                    placeholder="Brief summary of the issue…"
  196.                                    value="{{ formData.title ?? '' }}"
  197.                                    maxlength="255" required>
  198.                         </div>
  200.                         <div class="mb-3">
  201.                             <label class="tc-label">Description <span class="required-star">*</span></label>
  202.                             <textarea name="description" class="tc-textarea" rows="6"
  203.                                       id="descriptionField"
  204.                                       placeholder="Describe the issue in detail…"
  205.                                       maxlength="5000"
  206.                                       required>{{ formData.description ?? '' }}</textarea>
  207.                             <div class="tc-char-count" id="charCount">0 / 5000</div>
  208.                         </div>
  210.                         <div class="mb-3">
  211.                             <label class="tc-label">Internal Note</label>
  212.                             <textarea name="note" class="tc-textarea" rows="3"
  213.                                       placeholder="Internal notes (not visible to the reporter)…">{{ formData.note ?? '' }}</textarea>
  214.                         </div>
  216.                         <div class="mb-0">
  217.                             <label class="tc-label">Attachments</label>
  218.                             <input type="file" name="attachments[]" class="tc-input"
  219.                                    multiple accept=".jpg,.jpeg,.png,.pdf,.txt,.log,.zip">
  220.                             <div class="tc-hint">JPG, PNG, PDF, TXT, LOG, ZIP — max 10 MB per file</div>
  221.                         </div>
  222.                     </div>
  224.                     {# Classification #}
  225.                     <div class="tc-card">
  226.                         <div class="tc-card-title">
  227.                             <span><i class="fa fa-sliders-h"></i>Classification</span>
  228.                         </div>
  230.                         <div class="mb-4">
  231.                             <label class="tc-label">Ticket Type</label>
  232.                             <select name="ticketType" class="tc-select">
  233.                                 <option value="">— Select type —</option>
  234.                                 <option value="1" {{ formData.ticketType == 1 ? 'selected' }}>Service Ticket</option>
  235.                                 <option value="2" {{ formData.ticketType == 2 ? 'selected' }}>To-Do</option>
  236.                                 <option value="3" {{ formData.ticketType == 3 ? 'selected' }}>To-Do Reply</option>
  237.                                 <option value="4" {{ formData.ticketType == 4 ? 'selected' }}>Query</option>
  238.                                 <option value="5" {{ formData.ticketType == 5 ? 'selected' }}>Development</option>
  239.                                 <option value="6" {{ formData.ticketType == 6 ? 'selected' }}>Supplier</option>
  240.                                 <option value="7" {{ formData.ticketType == 7 ? 'selected' }}>Client</option>
  241.                             </select>
  242.                         </div>
  244.                         <div class="mb-4">
  245.                             <label class="tc-label">Priority <span class="required-star">*</span></label>
  246.                             <div class="tc-priority-grid">
  247.                                 <div>
  248.                                     <input type="radio" name="priority" value="1" id="prio1" class="tc-prio-input"
  249.                                            {{ (formData.priority ?? 3) == 1 ? 'checked' }}>
  250.                                     <label for="prio1" class="tc-prio-label">
  251.                                         <span class="tc-prio-icon">🔴</span>
  252.                                         <span class="tc-prio-name">Emergency</span>
  253.                                         <span class="tc-prio-desc">Needs immediate action</span>
  254.                                     </label>
  255.                                 </div>
  256.                                 <div>
  257.                                     <input type="radio" name="priority" value="2" id="prio2" class="tc-prio-input"
  258.                                            {{ (formData.priority ?? 3) == 2 ? 'checked' }}>
  259.                                     <label for="prio2" class="tc-prio-label">
  260.                                         <span class="tc-prio-icon">🟡</span>
  261.                                         <span class="tc-prio-name">Important</span>
  262.                                         <span class="tc-prio-desc">Should be addressed soon</span>
  263.                                     </label>
  264.                                 </div>
  265.                                 <div>
  266.                                     <input type="radio" name="priority" value="3" id="prio3" class="tc-prio-input"
  267.                                            {{ (formData.priority ?? 3) == 3 ? 'checked' }}>
  268.                                     <label for="prio3" class="tc-prio-label">
  269.                                         <span class="tc-prio-icon">🟢</span>
  270.                                         <span class="tc-prio-name">Normal</span>
  271.                                         <span class="tc-prio-desc">Routine issue</span>
  272.                                     </label>
  273.                                 </div>
  274.                             </div>
  275.                         </div>
  277.                         <div class="mb-0">
  278.                             <label class="tc-label">Source</label>
  279.                             <div class="tc-source-toggle">
  280.                                 <input type="radio" name="source" value="1" id="src1"
  281.                                        {{ (formData.source ?? 1) == 1 ? 'checked' }}>
  282.                                 <label for="src1"><i class="fa fa-user fa-xs"></i> Manual</label>
  284.                                 <input type="radio" name="source" value="2" id="src2"
  285.                                        {{ (formData.source ?? 1) == 2 ? 'checked' }}>
  286.                                 <label for="src2"><i class="fa fa-robot fa-xs"></i> System</label>
  288.                                 <input type="radio" name="source" value="3" id="src3"
  289.                                        {{ (formData.source ?? 1) == 3 ? 'checked' }}>
  290.                                 <label for="src3"><i class="fa fa-code fa-xs"></i> API</label>
  291.                             </div>
  292.                         </div>
  293.                     </div>
  295.                     {# System Tracking — collapsible #}
  296.                     <div class="tc-card">
  297.                         <div class="tc-card-title">
  298.                             <span><i class="fa fa-fingerprint"></i>System Tracking</span>
  299.                             <div style="display:flex;align-items:center;gap:10px;">
  300.                                 <span class="tc-adv-badge">Advanced</span>
  301.                                 <span class="tc-adv-toggle" onclick="toggleSystemFields(this)" id="sysToggleBtn">
  302.                                     <i class="fa fa-chevron-down fa-xs"></i> Expand
  303.                                 </span>
  304.                             </div>
  305.                         </div>
  306.                         <div class="tc-adv-body" id="systemFieldsBlock">
  307.                             <div class="mb-3">
  308.                                 <label class="tc-label">Problem Hash</label>
  309.                                 <input type="text" name="problemHash" class="tc-input tc-mono"
  310.                                        placeholder="SHA256 — leave blank to auto-compute"
  311.                                        value="{{ formData.problemHash ?? '' }}">
  312.                                 <div class="tc-hint">SHA256 of (errorCode + fileLocation + exceptionClass + appId). Do not include timestamps or user IDs.</div>
  313.                             </div>
  314.                             <div class="row g-3 mb-3">
  315.                                 <div class="col-md-6">
  316.                                     <label class="tc-label">Error Code</label>
  317.                                     <input type="text" name="errorCode" class="tc-input"
  318.                                            placeholder="e.g. 500, DB_CONN_FAIL"
  319.                                            value="{{ formData.errorCode ?? '' }}">
  320.                                 </div>
  321.                                 <div class="col-md-6">
  322.                                     <label class="tc-label">Server Identifier</label>
  323.                                     <input type="text" name="serverIdentifier" class="tc-input"
  324.                                            placeholder="e.g. app-server-01"
  325.                                            value="{{ formData.serverIdentifier ?? '' }}">
  326.                                 </div>
  327.                             </div>
  328.                             <div class="mb-0">
  329.                                 <label class="tc-label">Payload JSON</label>
  330.                                 <textarea name="lastPayloadJson" class="tc-textarea tc-mono" rows="5"
  331.                                           placeholder='{"exception":"RuntimeException","file":"src/...","line":42,...}'>{{ formData.lastPayloadJson ?? '' }}</textarea>
  332.                             </div>
  333.                         </div>
  334.                     </div>
  336.                 </div>
  338.                 {# ── RIGHT column ── #}
  339.                 <div class="col-lg-4">
  341.                     {# Assignment #}
  342.                     <div class="tc-card">
  343.                         <div class="tc-card-title">
  344.                             <span><i class="fa fa-user-check"></i>Assignment</span>
  345.                         </div>
  346.                         <div class="mb-3">
  347.                             <label class="tc-label">Assign To (User ID)</label>
  348.                             <input type="number" name="assignedToUserId" class="tc-input"
  349.                                    placeholder="User ID…"
  350.                                    value="{{ formData.assignedToUserId ?? '' }}">
  351.                         </div>
  352.                         <div class="mb-3">
  353.                             <label class="tc-label">Deadline</label>
  354.                             <input type="date" name="deadlineDate" class="tc-input"
  355.                                    value="{{ formData.deadlineDate ?? '' }}">
  356.                         </div>
  357.                         <div class="mb-0">
  358.                             <label class="tc-label">Tagged User IDs</label>
  359.                             <input type="text" name="taggedUserIds" class="tc-input"
  360.                                    placeholder="Comma-separated, e.g. 12, 45, 78"
  361.                                    value="{{ formData.taggedUserIds ?? '' }}">
  362.                         </div>
  363.                     </div>
  365.                     {# Reporter contact #}
  366.                     <div class="tc-card">
  367.                         <div class="tc-card-title">
  368.                             <span><i class="fa fa-address-card"></i>Reporter Contact</span>
  369.                         </div>
  370.                         <div class="mb-3">
  371.                             <label class="tc-label">Name</label>
  372.                             <input type="text" name="name" class="tc-input"
  373.                                    placeholder="Reporter's name…"
  374.                                    value="{{ formData.name ?? '' }}">
  375.                         </div>
  376.                         <div class="mb-3">
  377.                             <label class="tc-label">Email</label>
  378.                             <input type="email" name="email" class="tc-input"
  379.                                    placeholder="reporter@example.com"
  380.                                    value="{{ formData.email ?? '' }}">
  381.                         </div>
  382.                         <div class="mb-3">
  383.                             <label class="tc-label">Phone</label>
  384.                             <input type="text" name="phone" class="tc-input"
  385.                                    placeholder="+49 …"
  386.                                    value="{{ formData.phone ?? '' }}">
  387.                         </div>
  388.                         <div class="mb-0">
  389.                             <label class="tc-label">Preferred Contact</label>
  390.                             <select name="preferredContactMethod" class="tc-select">
  391.                                 <option value="">— No preference —</option>
  392.                                 <option value="1" {{ formData.preferredContactMethod == 1 ? 'selected' }}>Email</option>
  393.                                 <option value="2" {{ formData.preferredContactMethod == 2 ? 'selected' }}>Phone</option>
  394.                             </select>
  395.                         </div>
  396.                     </div>
  398.                     {# Context #}
  399.                     <div class="tc-card">
  400.                         <div class="tc-card-title">
  401.                             <span><i class="fa fa-sitemap"></i>Context</span>
  402.                         </div>
  403.                         <div class="mb-3">
  404.                             <label class="tc-label">Company ID</label>
  405.                             <input type="number" name="companyId" class="tc-input"
  406.                                    value="{{ formData.companyId ?? '' }}">
  407.                         </div>
  408.                         <div class="mb-3">
  409.                             <label class="tc-label">App ID</label>
  410.                             <input type="number" name="appId" class="tc-input"
  411.                                    value="{{ formData.appId ?? '' }}">
  412.                         </div>
  413.                         <div class="mb-0">
  414.                             <label class="tc-label">Branch ID</label>
  415.                             <input type="number" name="branchId" class="tc-input"
  416.                                    value="{{ formData.branchId ?? '' }}">
  417.                         </div>
  418.                     </div>
  420.                 </div>
  421.             </div>
  423.             {# ── Submit bar ── #}
  424.             <div class="tc-action-bar">
  425.                 <button type="submit" class="tc-btn-submit">
  426.                     <i class="fa fa-paper-plane" style="font-size:.8rem"></i> Create Ticket
  427.                 </button>
  428.                 <a href="{{ path('ticket_list') }}" class="tc-btn-cancel">
  429.                     Cancel
  430.                 </a>
  431.             </div>
  433.         </form>
  434.     </div>
  435. </div>
  437. <script>
  438.     // Character counter
  439.     var descField = document.getElementById('descriptionField');
  440.     var charCount = document.getElementById('charCount');
  441.     if (descField) {
  442.         descField.addEventListener('input', function () {
  443.             charCount.textContent = this.value.length + ' / 5000';
  444.         });
  445.     }
  447.     // System fields toggle
  448.     function toggleSystemFields(el) {
  449.         var block = document.getElementById('systemFieldsBlock');
  450.         var isOpen = block.classList.contains('open');
  451.         if (isOpen) {
  452.             block.classList.remove('open');
  453.             el.innerHTML = '<i class="fa fa-chevron-down fa-xs"></i> Expand';
  454.         } else {
  455.             block.classList.add('open');
  456.             el.innerHTML = '<i class="fa fa-chevron-up fa-xs"></i> Collapse';
  457.         }
  458.     }
  460.     // Auto-expand if values are pre-filled
  461.     (function () {
  462.         var fields = ['[name="problemHash"]', '[name="serverIdentifier"]', '[name="lastPayloadJson"]'];
  463.         for (var i = 0; i < fields.length; i++) {
  464.             var el = document.querySelector(fields[i]);
  465.             if (el && el.value.trim() !== '') {
  466.                 var block = document.getElementById('systemFieldsBlock');
  467.                 block.classList.add('open');
  468.                 var btn = document.getElementById('sysToggleBtn');
  469.                 if (btn) btn.innerHTML = '<i class="fa fa-chevron-up fa-xs"></i> Collapse';
  470.                 break;
  471.             }
  472.         }
  473.     })();
  474. </script>
  476. </div>{# /hb-admin-layout #}
  478. {% include '@Application/footer/central_footer.html.twig' %}