@escalated-dev/escalated 0.7.1 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +380 -357
  3. package/package.json +85 -81
  4. package/src/components/ActiveChatsPanel.vue +246 -246
  5. package/src/components/AdminDashboard.stories.js +1423 -1423
  6. package/src/components/AttachmentList.vue +65 -65
  7. package/src/components/ChatActionBar.vue +226 -226
  8. package/src/components/ChatBubble.vue +162 -162
  9. package/src/components/ChatComposer.vue +308 -308
  10. package/src/components/ChatQueue.vue +222 -222
  11. package/src/components/ChatThread.vue +197 -197
  12. package/src/components/CustomTicketActions.stories.js +71 -0
  13. package/src/components/CustomTicketActions.vue +101 -0
  14. package/src/components/EscalatedLayout.vue +619 -598
  15. package/src/components/FollowButton.vue +20 -1
  16. package/src/components/MentionDropdown.vue +154 -154
  17. package/src/components/MetricComparison.vue +89 -89
  18. package/src/components/PercentileChart.vue +67 -67
  19. package/src/components/PeriodSelector.vue +98 -98
  20. package/src/components/PresenceIndicator.vue +228 -213
  21. package/src/components/ReplyComposer.vue +336 -336
  22. package/src/components/ReplyThread.vue +153 -153
  23. package/src/components/ReportChart.vue +395 -395
  24. package/src/components/ReportExportButton.vue +108 -108
  25. package/src/components/SaveViewDialog.vue +172 -172
  26. package/src/components/SavedViewSidebar.vue +208 -208
  27. package/src/components/SkillTagManager.vue +29 -22
  28. package/src/components/SnoozeButton.vue +247 -247
  29. package/src/components/TicketFilters.vue +270 -270
  30. package/src/components/TicketList.vue +655 -655
  31. package/src/components/TicketSidebar.vue +4 -0
  32. package/src/components/TicketSplitDialog.vue +98 -98
  33. package/src/components/TicketSubjects.stories.js +63 -0
  34. package/src/components/TicketSubjects.vue +107 -0
  35. package/src/components/TwoFactorSetup.vue +1 -37
  36. package/src/components/VariableTokenInput.vue +111 -111
  37. package/src/components/WorkflowActionConfig.vue +287 -287
  38. package/src/components/WorkflowActionList.vue +350 -350
  39. package/src/components/WorkflowConditionBuilder.vue +265 -265
  40. package/src/components/WorkflowTriggerSelector.vue +125 -125
  41. package/src/components/admin/newsletters/AnalyticsTiles.stories.js +14 -0
  42. package/src/components/admin/newsletters/AnalyticsTiles.vue +55 -0
  43. package/src/components/admin/newsletters/DeliveriesTable.stories.js +28 -0
  44. package/src/components/admin/newsletters/DeliveriesTable.vue +104 -0
  45. package/src/components/admin/newsletters/DynamicFilterBuilder.stories.js +11 -0
  46. package/src/components/admin/newsletters/DynamicFilterBuilder.vue +53 -0
  47. package/src/components/admin/newsletters/ListMemberTable.stories.js +12 -0
  48. package/src/components/admin/newsletters/ListMemberTable.vue +53 -0
  49. package/src/components/admin/newsletters/MarkdownEditor.stories.js +6 -0
  50. package/src/components/admin/newsletters/MarkdownEditor.vue +53 -0
  51. package/src/components/admin/newsletters/MergeFieldDropdown.stories.js +6 -0
  52. package/src/components/admin/newsletters/MergeFieldDropdown.vue +84 -0
  53. package/src/components/admin/newsletters/PreviewIframe.stories.js +7 -0
  54. package/src/components/admin/newsletters/PreviewIframe.vue +40 -0
  55. package/src/components/admin/newsletters/SummaryTiles.stories.js +8 -0
  56. package/src/components/admin/newsletters/SummaryTiles.vue +63 -0
  57. package/src/composables/useChat.js +187 -187
  58. package/src/composables/useI18n.js +30 -8
  59. package/src/composables/useMentions.js +134 -134
  60. package/src/composables/usePermissions.js +31 -0
  61. package/src/composables/useRealtime.js +182 -182
  62. package/src/index.js +85 -84
  63. package/src/locales/README.md +13 -0
  64. package/src/locales/ar.json +727 -727
  65. package/src/locales/de.json +690 -690
  66. package/src/locales/en.json +889 -729
  67. package/src/locales/es.json +691 -691
  68. package/src/locales/fr.json +691 -691
  69. package/src/locales/index.js +16 -16
  70. package/src/locales/it.json +727 -727
  71. package/src/locales/ja.json +727 -727
  72. package/src/locales/ko.json +727 -727
  73. package/src/locales/nl.json +727 -727
  74. package/src/locales/pl.json +727 -727
  75. package/src/locales/pt-BR.json +727 -727
  76. package/src/locales/ru.json +727 -727
  77. package/src/locales/tr.json +727 -727
  78. package/src/locales/zh-CN.json +727 -727
  79. package/src/pages/Admin/Newsletters/Compose.vue +192 -0
  80. package/src/pages/Admin/Newsletters/Edit.vue +24 -0
  81. package/src/pages/Admin/Newsletters/Index.vue +141 -0
  82. package/src/pages/Admin/Newsletters/Lists/Create.vue +64 -0
  83. package/src/pages/Admin/Newsletters/Lists/Index.vue +59 -0
  84. package/src/pages/Admin/Newsletters/Lists/Show.vue +53 -0
  85. package/src/pages/Admin/Newsletters/Settings.vue +85 -0
  86. package/src/pages/Admin/Newsletters/Show.vue +140 -0
  87. package/src/pages/Admin/Newsletters/Templates/Create.vue +11 -0
  88. package/src/pages/Admin/Newsletters/Templates/Index.vue +54 -0
  89. package/src/pages/Admin/Newsletters/Templates/Show.vue +65 -0
  90. package/src/pages/Admin/Newsletters/usePreview.js +44 -0
  91. package/src/pages/Admin/Reports/AgentDetail.vue +132 -132
  92. package/src/pages/Admin/Reports/AgentRanking.vue +246 -246
  93. package/src/pages/Admin/Reports/Cohorts.vue +180 -180
  94. package/src/pages/Admin/Reports/Comparison.vue +141 -141
  95. package/src/pages/Admin/Reports/Dashboard.vue +226 -226
  96. package/src/pages/Admin/Reports/ResolutionTimes.vue +164 -164
  97. package/src/pages/Admin/Reports/ResponseTimes.vue +164 -164
  98. package/src/pages/Admin/Reports/SlaTrends.vue +183 -183
  99. package/src/pages/Admin/Settings/SsoSettings.vue +157 -4
  100. package/src/pages/Admin/Settings/TwoFactor.vue +32 -6
  101. package/src/pages/Admin/Settings.vue +1008 -1008
  102. package/src/pages/Admin/Skills/Form.vue +164 -4
  103. package/src/pages/Admin/Skills/Index.vue +14 -3
  104. package/src/pages/Admin/Tickets/Index.vue +126 -126
  105. package/src/pages/Admin/Tickets/Show.vue +254 -249
  106. package/src/pages/Admin/Users/Index.vue +145 -0
  107. package/src/pages/Admin/Workflows/Builder.vue +207 -207
  108. package/src/pages/Admin/Workflows/Index.vue +235 -235
  109. package/src/pages/Admin/Workflows/Logs.vue +286 -286
  110. package/src/pages/Agent/TicketIndex.vue +112 -112
  111. package/src/pages/Agent/TicketShow.vue +547 -494
  112. package/src/pages/Customer/Index.vue +26 -1
  113. package/src/pages/Customer/KnowledgeBase/Article.vue +129 -129
  114. package/src/plugin.js +175 -175
  115. package/src/utils/mentionHighlight.js +24 -24
  116. package/src/widget/EscalatedWidget.vue +804 -804
  117. package/src/widget/index.js +254 -254
package/src/pages/Admin/Workflows/Logs.vue CHANGED
@@ -1,286 +1,286 @@
1
- <script setup>
2
- import EscalatedLayout from '../../../components/EscalatedLayout.vue';
3
- import { ref } from 'vue';
4
-
5
- defineProps({
6
- logs: { type: Array, default: () => [] },
7
- workflows: { type: Array, default: () => [] },
8
- });
9
-
10
- const expandedLog = ref(null);
11
- const filterWorkflow = ref('');
12
- const filterDateFrom = ref('');
13
- const filterDateTo = ref('');
14
- const filterTicket = ref('');
15
-
16
- function toggleLog(id) {
17
- expandedLog.value = expandedLog.value === id ? null : id;
18
- }
19
-
20
- function statusBadgeClass(status) {
21
- switch (status) {
22
- case 'success':
23
- return 'bg-emerald-500/10 text-emerald-400';
24
- case 'failed':
25
- return 'bg-rose-500/10 text-rose-400';
26
- case 'skipped':
27
- return 'bg-gray-500/10 text-gray-400';
28
- default:
29
- return 'bg-gray-500/10 text-gray-400';
30
- }
31
- }
32
-
33
- function statusLabel(status) {
34
- switch (status) {
35
- case 'success':
36
- return 'Success';
37
- case 'failed':
38
- return 'Failed';
39
- case 'skipped':
40
- return 'Skipped';
41
- default:
42
- return status;
43
- }
44
- }
45
-
46
- function actionStatusIcon(status) {
47
- switch (status) {
48
- case 'success':
49
- return 'M4.5 12.75l6 6 9-13.5';
50
- case 'failed':
51
- return 'M6 18L18 6M6 6l12 12';
52
- case 'skipped':
53
- return 'M3 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062A1.125 1.125 0 013 16.81V8.688zM12.75 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062a1.125 1.125 0 01-1.683-.977V8.688z';
54
- default:
55
- return 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z';
56
- }
57
- }
58
- </script>
59
-
60
- <template>
61
- <EscalatedLayout title="Workflow Logs">
62
- <div class="mb-4">
63
- <h2 class="text-lg font-semibold text-[var(--esc-panel-text-secondary)]">Workflow Execution Logs</h2>
64
- <p class="text-xs text-[var(--esc-panel-text-muted)]">Track workflow executions and debug issues</p>
65
- </div>
66
-
67
- <!-- Filters -->
68
- <div
69
- class="mb-4 flex flex-wrap items-center gap-3 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4"
70
- >
71
- <div>
72
- <label class="block text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
73
- >Workflow</label
74
- >
75
- <select
76
- v-model="filterWorkflow"
77
- class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
78
- >
79
- <option value="">All Workflows</option>
80
- <option v-for="w in workflows" :key="w.id" :value="w.id">{{ w.name }}</option>
81
- </select>
82
- </div>
83
- <div>
84
- <label class="block text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
85
- >From</label
86
- >
87
- <input
88
- v-model="filterDateFrom"
89
- type="date"
90
- class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
91
- />
92
- </div>
93
- <div>
94
- <label class="block text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
95
- >To</label
96
- >
97
- <input
98
- v-model="filterDateTo"
99
- type="date"
100
- class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
101
- />
102
- </div>
103
- <div>
104
- <label class="block text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
105
- >Ticket</label
106
- >
107
- <input
108
- v-model="filterTicket"
109
- type="text"
110
- placeholder="Reference..."
111
- class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
112
- />
113
- </div>
114
- </div>
115
-
116
- <!-- Logs table -->
117
- <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
118
- <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
119
- <thead>
120
- <tr class="bg-[var(--esc-panel-hover)]">
121
- <th
122
- class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
123
- >
124
- Timestamp
125
- </th>
126
- <th
127
- class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
128
- >
129
- Workflow
130
- </th>
131
- <th
132
- class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
133
- >
134
- Ticket
135
- </th>
136
- <th
137
- class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
138
- >
139
- Event
140
- </th>
141
- <th
142
- class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
143
- >
144
- Matched
145
- </th>
146
- <th
147
- class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
148
- >
149
- Actions
150
- </th>
151
- <th
152
- class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
153
- >
154
- Duration
155
- </th>
156
- <th
157
- class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
158
- >
159
- Status
160
- </th>
161
- </tr>
162
- </thead>
163
- <tbody class="divide-y divide-[var(--esc-panel-border)]">
164
- <tr v-if="!logs?.length">
165
- <td colspan="8" class="px-4 py-12 text-center">
166
- <svg
167
- class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
168
- fill="none"
169
- stroke="currentColor"
170
- stroke-width="1.5"
171
- viewBox="0 0 24 24"
172
- >
173
- <path
174
- stroke-linecap="round"
175
- stroke-linejoin="round"
176
- d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
177
- />
178
- </svg>
179
- <p class="text-sm text-[var(--esc-panel-text-muted)]">No execution logs yet</p>
180
- <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
181
- Logs appear when workflows are triggered
182
- </p>
183
- </td>
184
- </tr>
185
- <template v-for="log in logs" :key="log.id">
186
- <tr
187
- class="cursor-pointer transition-colors hover:bg-[var(--esc-panel-hover)]"
188
- @click="toggleLog(log.id)"
189
- >
190
- <td class="px-4 py-3 text-xs text-[var(--esc-panel-text-tertiary)]">
191
- {{ log.created_at }}
192
- </td>
193
- <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
194
- {{ log.workflow_name }}
195
- </td>
196
- <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
197
- {{ log.ticket_reference }}
198
- </td>
199
- <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
200
- {{ log.event }}
201
- </td>
202
- <td class="px-4 py-3">
203
- <span
204
- class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium"
205
- :class="
206
- log.matched
207
- ? 'bg-emerald-500/10 text-emerald-400'
208
- : 'bg-gray-500/10 text-gray-400'
209
- "
210
- >
211
- {{ log.matched ? 'Yes' : 'No' }}
212
- </span>
213
- </td>
214
- <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
215
- {{ log.actions_executed || 0 }}
216
- </td>
217
- <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
218
- {{ log.duration_ms ? log.duration_ms + 'ms' : '---' }}
219
- </td>
220
- <td class="px-4 py-3">
221
- <span
222
- class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium"
223
- :class="statusBadgeClass(log.status)"
224
- >
225
- {{ statusLabel(log.status) }}
226
- </span>
227
- </td>
228
- </tr>
229
- <!-- Expanded detail row -->
230
- <tr v-if="expandedLog === log.id">
231
- <td colspan="8" class="bg-[var(--esc-panel-hover)] px-6 py-4">
232
- <h4
233
- class="mb-3 text-xs font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
234
- >
235
- Action-by-Action Execution
236
- </h4>
237
- <div v-if="log.action_details?.length" class="space-y-2">
238
- <div
239
- v-for="(detail, i) in log.action_details"
240
- :key="i"
241
- class="flex items-start gap-3 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-3"
242
- >
243
- <svg
244
- class="mt-0.5 h-4 w-4 flex-shrink-0"
245
- :class="statusBadgeClass(detail.status).split(' ')[1]"
246
- fill="none"
247
- stroke="currentColor"
248
- stroke-width="2"
249
- viewBox="0 0 24 24"
250
- >
251
- <path
252
- stroke-linecap="round"
253
- stroke-linejoin="round"
254
- :d="actionStatusIcon(detail.status)"
255
- />
256
- </svg>
257
- <div class="min-w-0 flex-1">
258
- <div class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">
259
- {{ detail.action_type }}
260
- </div>
261
- <div
262
- v-if="detail.message"
263
- class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]"
264
- >
265
- {{ detail.message }}
266
- </div>
267
- <div v-if="detail.error" class="mt-1 text-xs text-rose-400">
268
- {{ detail.error }}
269
- </div>
270
- </div>
271
- <div class="text-xs text-[var(--esc-panel-text-muted)]">
272
- {{ detail.duration_ms ? detail.duration_ms + 'ms' : '' }}
273
- </div>
274
- </div>
275
- </div>
276
- <p v-else class="text-xs text-[var(--esc-panel-text-muted)]">
277
- No detailed action logs available
278
- </p>
279
- </td>
280
- </tr>
281
- </template>
282
- </tbody>
283
- </table>
284
- </div>
285
- </EscalatedLayout>
286
- </template>
1
+ <script setup>
2
+ import EscalatedLayout from '../../../components/EscalatedLayout.vue';
3
+ import { ref } from 'vue';
4
+
5
+ defineProps({
6
+ logs: { type: Array, default: () => [] },
7
+ workflows: { type: Array, default: () => [] },
8
+ });
9
+
10
+ const expandedLog = ref(null);
11
+ const filterWorkflow = ref('');
12
+ const filterDateFrom = ref('');
13
+ const filterDateTo = ref('');
14
+ const filterTicket = ref('');
15
+
16
+ function toggleLog(id) {
17
+ expandedLog.value = expandedLog.value === id ? null : id;
18
+ }
19
+
20
+ function statusBadgeClass(status) {
21
+ switch (status) {
22
+ case 'success':
23
+ return 'bg-emerald-500/10 text-emerald-400';
24
+ case 'failed':
25
+ return 'bg-rose-500/10 text-rose-400';
26
+ case 'skipped':
27
+ return 'bg-gray-500/10 text-gray-400';
28
+ default:
29
+ return 'bg-gray-500/10 text-gray-400';
30
+ }
31
+ }
32
+
33
+ function statusLabel(status) {
34
+ switch (status) {
35
+ case 'success':
36
+ return 'Success';
37
+ case 'failed':
38
+ return 'Failed';
39
+ case 'skipped':
40
+ return 'Skipped';
41
+ default:
42
+ return status;
43
+ }
44
+ }
45
+
46
+ function actionStatusIcon(status) {
47
+ switch (status) {
48
+ case 'success':
49
+ return 'M4.5 12.75l6 6 9-13.5';
50
+ case 'failed':
51
+ return 'M6 18L18 6M6 6l12 12';
52
+ case 'skipped':
53
+ return 'M3 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062A1.125 1.125 0 013 16.81V8.688zM12.75 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062a1.125 1.125 0 01-1.683-.977V8.688z';
54
+ default:
55
+ return 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z';
56
+ }
57
+ }
58
+ </script>
59
+
60
+ <template>
61
+ <EscalatedLayout title="Workflow Logs">
62
+ <div class="mb-4">
63
+ <h2 class="text-lg font-semibold text-[var(--esc-panel-text-secondary)]">Workflow Execution Logs</h2>
64
+ <p class="text-xs text-[var(--esc-panel-text-muted)]">Track workflow executions and debug issues</p>
65
+ </div>
66
+
67
+ <!-- Filters -->
68
+ <div
69
+ class="mb-4 flex flex-wrap items-center gap-3 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4"
70
+ >
71
+ <div>
72
+ <label class="block text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
73
+ >Workflow</label
74
+ >
75
+ <select
76
+ v-model="filterWorkflow"
77
+ class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
78
+ >
79
+ <option value="">All Workflows</option>
80
+ <option v-for="w in workflows" :key="w.id" :value="w.id">{{ w.name }}</option>
81
+ </select>
82
+ </div>
83
+ <div>
84
+ <label class="block text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
85
+ >From</label
86
+ >
87
+ <input
88
+ v-model="filterDateFrom"
89
+ type="date"
90
+ class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
91
+ />
92
+ </div>
93
+ <div>
94
+ <label class="block text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
95
+ >To</label
96
+ >
97
+ <input
98
+ v-model="filterDateTo"
99
+ type="date"
100
+ class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
101
+ />
102
+ </div>
103
+ <div>
104
+ <label class="block text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
105
+ >Ticket</label
106
+ >
107
+ <input
108
+ v-model="filterTicket"
109
+ type="text"
110
+ placeholder="Reference..."
111
+ class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
112
+ />
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Logs table -->
117
+ <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
118
+ <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
119
+ <thead>
120
+ <tr class="bg-[var(--esc-panel-hover)]">
121
+ <th
122
+ class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
123
+ >
124
+ Timestamp
125
+ </th>
126
+ <th
127
+ class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
128
+ >
129
+ Workflow
130
+ </th>
131
+ <th
132
+ class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
133
+ >
134
+ Ticket
135
+ </th>
136
+ <th
137
+ class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
138
+ >
139
+ Event
140
+ </th>
141
+ <th
142
+ class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
143
+ >
144
+ Matched
145
+ </th>
146
+ <th
147
+ class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
148
+ >
149
+ Actions
150
+ </th>
151
+ <th
152
+ class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
153
+ >
154
+ Duration
155
+ </th>
156
+ <th
157
+ class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
158
+ >
159
+ Status
160
+ </th>
161
+ </tr>
162
+ </thead>
163
+ <tbody class="divide-y divide-[var(--esc-panel-border)]">
164
+ <tr v-if="!logs?.length">
165
+ <td colspan="8" class="px-4 py-12 text-center">
166
+ <svg
167
+ class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
168
+ fill="none"
169
+ stroke="currentColor"
170
+ stroke-width="1.5"
171
+ viewBox="0 0 24 24"
172
+ >
173
+ <path
174
+ stroke-linecap="round"
175
+ stroke-linejoin="round"
176
+ d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
177
+ />
178
+ </svg>
179
+ <p class="text-sm text-[var(--esc-panel-text-muted)]">No execution logs yet</p>
180
+ <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
181
+ Logs appear when workflows are triggered
182
+ </p>
183
+ </td>
184
+ </tr>
185
+ <template v-for="log in logs" :key="log.id">
186
+ <tr
187
+ class="cursor-pointer transition-colors hover:bg-[var(--esc-panel-hover)]"
188
+ @click="toggleLog(log.id)"
189
+ >
190
+ <td class="px-4 py-3 text-xs text-[var(--esc-panel-text-tertiary)]">
191
+ {{ log.created_at }}
192
+ </td>
193
+ <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
194
+ {{ log.workflow_name }}
195
+ </td>
196
+ <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
197
+ {{ log.ticket_reference }}
198
+ </td>
199
+ <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
200
+ {{ log.event }}
201
+ </td>
202
+ <td class="px-4 py-3">
203
+ <span
204
+ class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium"
205
+ :class="
206
+ log.matched
207
+ ? 'bg-emerald-500/10 text-emerald-400'
208
+ : 'bg-gray-500/10 text-gray-400'
209
+ "
210
+ >
211
+ {{ log.matched ? 'Yes' : 'No' }}
212
+ </span>
213
+ </td>
214
+ <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
215
+ {{ log.actions_executed || 0 }}
216
+ </td>
217
+ <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
218
+ {{ log.duration_ms ? log.duration_ms + 'ms' : '---' }}
219
+ </td>
220
+ <td class="px-4 py-3">
221
+ <span
222
+ class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium"
223
+ :class="statusBadgeClass(log.status)"
224
+ >
225
+ {{ statusLabel(log.status) }}
226
+ </span>
227
+ </td>
228
+ </tr>
229
+ <!-- Expanded detail row -->
230
+ <tr v-if="expandedLog === log.id">
231
+ <td colspan="8" class="bg-[var(--esc-panel-hover)] px-6 py-4">
232
+ <h4
233
+ class="mb-3 text-xs font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
234
+ >
235
+ Action-by-Action Execution
236
+ </h4>
237
+ <div v-if="log.action_details?.length" class="space-y-2">
238
+ <div
239
+ v-for="(detail, i) in log.action_details"
240
+ :key="i"
241
+ class="flex items-start gap-3 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-3"
242
+ >
243
+ <svg
244
+ class="mt-0.5 h-4 w-4 flex-shrink-0"
245
+ :class="statusBadgeClass(detail.status).split(' ')[1]"
246
+ fill="none"
247
+ stroke="currentColor"
248
+ stroke-width="2"
249
+ viewBox="0 0 24 24"
250
+ >
251
+ <path
252
+ stroke-linecap="round"
253
+ stroke-linejoin="round"
254
+ :d="actionStatusIcon(detail.status)"
255
+ />
256
+ </svg>
257
+ <div class="min-w-0 flex-1">
258
+ <div class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">
259
+ {{ detail.action_type }}
260
+ </div>
261
+ <div
262
+ v-if="detail.message"
263
+ class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]"
264
+ >
265
+ {{ detail.message }}
266
+ </div>
267
+ <div v-if="detail.error" class="mt-1 text-xs text-rose-400">
268
+ {{ detail.error }}
269
+ </div>
270
+ </div>
271
+ <div class="text-xs text-[var(--esc-panel-text-muted)]">
272
+ {{ detail.duration_ms ? detail.duration_ms + 'ms' : '' }}
273
+ </div>
274
+ </div>
275
+ </div>
276
+ <p v-else class="text-xs text-[var(--esc-panel-text-muted)]">
277
+ No detailed action logs available
278
+ </p>
279
+ </td>
280
+ </tr>
281
+ </template>
282
+ </tbody>
283
+ </table>
284
+ </div>
285
+ </EscalatedLayout>
286
+ </template>