@escalated-dev/escalated 0.4.0 → 0.5.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 (13) hide show
  1. package/README.md +35 -1
  2. package/package.json +9 -2
  3. package/src/components/EscalatedLayout.vue +35 -11
  4. package/src/components/PluginSlot.vue +62 -0
  5. package/src/composables/usePluginExtensions.js +67 -0
  6. package/src/defineEscalatedPlugin.js +50 -0
  7. package/src/index.js +5 -0
  8. package/src/pages/Admin/ApiTokens/Index.vue +217 -0
  9. package/src/pages/Admin/Plugins/Index.vue +197 -0
  10. package/src/pages/Admin/Plugins.vue +129 -0
  11. package/src/pages/Admin/Tickets/Show.vue +12 -1
  12. package/src/pages/Agent/Dashboard.vue +31 -1
  13. package/src/pages/Agent/TicketShow.vue +12 -1
package/README.md CHANGED
@@ -18,6 +18,7 @@ Pick your framework:
18
18
  | **Laravel** | [escalated-dev/escalated-laravel](https://github.com/escalated-dev/escalated-laravel) | `composer require escalated-dev/escalated-laravel` |
19
19
  | **Rails** | [escalated-dev/escalated-rails](https://github.com/escalated-dev/escalated-rails) | `gem "escalated"` |
20
20
  | **Django** | [escalated-dev/escalated-django](https://github.com/escalated-dev/escalated-django) | `pip install escalated-django` |
21
+ | **AdonisJS** | [escalated-dev/escalated-adonis](https://github.com/escalated-dev/escalated-adonis) | `npm install @escalated-dev/escalated-adonis` |
21
22
 
22
23
  Each backend repo has full setup instructions — install command, migrations, config, and frontend integration.
23
24
 
@@ -112,9 +113,17 @@ import BaseLayout from '@/layouts/BaseLayout.vue'
112
113
  app.use(EscalatedPlugin, { layout: BaseLayout })
113
114
  ```
114
115
 
116
+ **AdonisJS** (Inertia + Vue 3):
117
+ ```js
118
+ import { EscalatedPlugin } from '@escalated-dev/escalated'
119
+ import AppLayout from '@/layouts/AppLayout.vue'
120
+
121
+ app.use(EscalatedPlugin, { layout: AppLayout })
122
+ ```
123
+
115
124
  ## What's in This Repo
116
125
 
117
- All the Vue 3 + Inertia.js components that power the Escalated UI. These are identical across Laravel, Rails, and Django — the backend framework renders them via Inertia.
126
+ All the Vue 3 + Inertia.js components that power the Escalated UI. These are identical across Laravel, Rails, Django, and AdonisJS — the backend framework renders them via Inertia.
118
127
 
119
128
  ### Pages
120
129
 
@@ -157,6 +166,20 @@ Reusable building blocks used across the pages above.
157
166
  | `AttachmentList` | File attachment display with download links |
158
167
  | `StatsCard` | Metric card with label, value, and trend |
159
168
  | `EscalatedLayout` | Top-level layout with navigation (supports host layout injection) |
169
+ | `BulkActionBar` | Toolbar for batch operations on selected tickets |
170
+ | `QuickFilters` | One-click filter chips (My Tickets, Unassigned, Urgent, SLA Breaching) |
171
+ | `MacroDropdown` | Dropdown to apply multi-step macros to a ticket |
172
+ | `FollowButton` | Toggle button to follow/unfollow a ticket |
173
+ | `SatisfactionRating` | 1-5 star CSAT rating input with optional comment |
174
+ | `KeyboardShortcutHelp` | Modal overlay showing all available keyboard shortcuts |
175
+ | `PinnedNotes` | Display pinned internal notes at the top of the thread |
176
+ | `PresenceIndicator` | Real-time indicator showing who is viewing a ticket |
177
+
178
+ ### Composables
179
+
180
+ | Composable | Description |
181
+ |------------|-------------|
182
+ | `useKeyboardShortcuts` | Registers and manages keyboard shortcuts for ticket actions |
160
183
 
161
184
  ### Plugin
162
185
 
@@ -185,6 +208,17 @@ import CustomerIndex from '@escalated-dev/escalated/pages/Customer/Index.vue'
185
208
 
186
209
  Peer dependencies: `vue` ^3.3.0, `@inertiajs/vue3` ^1.0.0 || ^2.0.0
187
210
 
211
+ ## Ecosystem
212
+
213
+ This is the shared frontend for the Escalated support ticket system. Backend packages available for every major framework:
214
+
215
+ - **[Escalated for Laravel](https://github.com/escalated-dev/escalated-laravel)** — Laravel Composer package
216
+ - **[Escalated for Rails](https://github.com/escalated-dev/escalated-rails)** — Ruby on Rails engine
217
+ - **[Escalated for Django](https://github.com/escalated-dev/escalated-django)** — Django reusable app
218
+ - **[Escalated for AdonisJS](https://github.com/escalated-dev/escalated-adonis)** — AdonisJS v6 package
219
+ - **[Escalated for Filament](https://github.com/escalated-dev/escalated-filament)** — Filament v3 admin panel plugin
220
+ - **[Shared Frontend](https://github.com/escalated-dev/escalated)** — Vue 3 + Inertia.js UI components (you are here)
221
+
188
222
  ## License
189
223
 
190
224
  MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@escalated-dev/escalated",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
5
5
  "author": "Escalated Dev <hello@escalated.dev>",
6
6
  "license": "MIT",
@@ -30,8 +30,15 @@
30
30
  "vue": "^3.3.0",
31
31
  "@inertiajs/vue3": "^1.0.0 || ^2.0.0"
32
32
  },
33
+ "scripts": {
34
+ "test": "vitest run"
35
+ },
33
36
  "devDependencies": {
34
37
  "vue": "^3.5.0",
35
- "@inertiajs/vue3": "^2.0.0"
38
+ "@inertiajs/vue3": "^2.0.0",
39
+ "@vitejs/plugin-vue": "^5.0.0",
40
+ "@vue/test-utils": "^2.4.0",
41
+ "happy-dom": "^15.0.0",
42
+ "vitest": "^2.0.0"
36
43
  }
37
44
  }
package/src/components/EscalatedLayout.vue CHANGED
@@ -1,6 +1,7 @@
1
1
  <script setup>
2
2
  import { computed, inject, provide } from 'vue';
3
3
  import { usePage, Link } from '@inertiajs/vue3';
4
+ import { usePluginExtensions } from '../composables/usePluginExtensions';
4
5
 
5
6
  const props = defineProps({
6
7
  title: { type: String, default: 'Support' },
@@ -23,17 +24,36 @@ const isDark = computed(() => isAdminSection.value || isAgentSection.value);
23
24
 
24
25
  provide('esc-dark', isDark);
25
26
 
26
- const adminLinks = computed(() => [
27
- { href: `${prefix.value}/admin/reports`, label: 'Reports', icon: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z' },
28
- { href: `${prefix.value}/admin/tickets`, label: 'Tickets', icon: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z' },
29
- { href: `${prefix.value}/admin/departments`, label: 'Departments', icon: 'M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z' },
30
- { href: `${prefix.value}/admin/sla-policies`, label: 'SLA Policies', icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' },
31
- { href: `${prefix.value}/admin/escalation-rules`, label: 'Escalation Rules', icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12' },
32
- { href: `${prefix.value}/admin/tags`, label: 'Tags', icon: 'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z M6 6h.008v.008H6V6z' },
33
- { href: `${prefix.value}/admin/canned-responses`, label: 'Canned Responses', icon: 'M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z' },
34
- { href: `${prefix.value}/admin/macros`, label: 'Macros', icon: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' },
35
- { href: `${prefix.value}/admin/settings`, label: 'Settings', icon: 'M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.204-.107-.397.165-.71.505-.781.93l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894zM15 12a3 3 0 11-6 0 3 3 0 016 0z' },
36
- ]);
27
+ const { menuItems: pluginMenuItems } = usePluginExtensions();
28
+
29
+ const adminLinks = computed(() => {
30
+ const p = prefix.value;
31
+ const coreLinks = [
32
+ { href: `${p}/admin/reports`, label: 'Reports', icon: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z', position: 10 },
33
+ { href: `${p}/admin/tickets`, label: 'Tickets', icon: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z', position: 20 },
34
+ { href: `${p}/admin/departments`, label: 'Departments', icon: 'M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z', position: 30 },
35
+ { href: `${p}/admin/sla-policies`, label: 'SLA Policies', icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z', position: 40 },
36
+ { href: `${p}/admin/escalation-rules`, label: 'Escalation Rules', icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12', position: 50 },
37
+ { href: `${p}/admin/tags`, label: 'Tags', icon: 'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z M6 6h.008v.008H6V6z', position: 60 },
38
+ { href: `${p}/admin/canned-responses`, label: 'Canned Responses', icon: 'M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z', position: 70 },
39
+ { href: `${p}/admin/macros`, label: 'Macros', icon: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z', position: 80 },
40
+ { href: `${p}/admin/api-tokens`, label: 'API Tokens', icon: 'M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z', position: 90 },
41
+ { href: `${p}/admin/plugins`, label: 'Plugins', icon: 'M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z', position: 95 },
42
+ { href: `${p}/admin/settings`, label: 'Settings', icon: 'M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.204-.107-.397.165-.71.505-.781.93l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894zM15 12a3 3 0 11-6 0 3 3 0 016 0z', position: 100 },
43
+ ];
44
+
45
+ // Merge core admin links with plugin-provided menu items
46
+ const pluginLinks = pluginMenuItems.value.map(item => ({
47
+ href: item.route,
48
+ label: item.label,
49
+ icon: item.icon,
50
+ position: item.position || 100,
51
+ badge: item.badge || null,
52
+ submenu: item.submenu || [],
53
+ }));
54
+
55
+ return [...coreLinks, ...pluginLinks].sort((a, b) => (a.position || 100) - (b.position || 100));
56
+ });
37
57
 
38
58
  const agentLinks = computed(() => [
39
59
  { href: `${prefix.value}/agent`, label: 'Dashboard', icon: 'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25' },
@@ -80,6 +100,10 @@ function isActive(href) {
80
100
  <path stroke-linecap="round" stroke-linejoin="round" :d="link.icon" />
81
101
  </svg>
82
102
  {{ link.label }}
103
+ <span v-if="link.badge"
104
+ class="ml-auto inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-cyan-500/20 px-1.5 text-[10px] font-semibold text-cyan-400">
105
+ {{ link.badge }}
106
+ </span>
83
107
  </Link>
84
108
  </nav>
85
109
 
package/src/components/PluginSlot.vue ADDED
@@ -0,0 +1,62 @@
1
+ <script setup>
2
+ import { defineAsyncComponent, h } from 'vue';
3
+
4
+ const props = defineProps({
5
+ slot: {
6
+ type: String,
7
+ required: true,
8
+ },
9
+ components: {
10
+ type: Array,
11
+ default: () => [],
12
+ },
13
+ });
14
+
15
+ // Error fallback component rendered when a plugin component fails to load
16
+ const ErrorFallback = {
17
+ props: ['error', 'plugin', 'component'],
18
+ render() {
19
+ return h('div', {
20
+ class: 'rounded-lg border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-xs text-rose-400',
21
+ }, `Plugin "${this.plugin}" failed to load component "${this.component}"`);
22
+ },
23
+ };
24
+
25
+ // Loading placeholder component
26
+ const LoadingFallback = {
27
+ render() {
28
+ return h('div', {
29
+ class: 'animate-pulse rounded-lg bg-white/[0.03] px-3 py-2',
30
+ }, [
31
+ h('div', { class: 'h-4 w-24 rounded bg-white/[0.06]' }),
32
+ ]);
33
+ },
34
+ };
35
+
36
+ // Load plugin components dynamically from host app's plugins directory
37
+ const loadPluginComponent = (plugin, component) => {
38
+ return defineAsyncComponent({
39
+ loader: () => import(`../../../../plugins/escalated/${plugin}/resources/js/Components/${component}.vue`),
40
+ loadingComponent: LoadingFallback,
41
+ errorComponent: {
42
+ props: ['error'],
43
+ render() {
44
+ return h(ErrorFallback, { error: this.error, plugin, component });
45
+ },
46
+ },
47
+ delay: 100,
48
+ timeout: 10000,
49
+ });
50
+ };
51
+ </script>
52
+
53
+ <template>
54
+ <template v-if="components?.length > 0">
55
+ <component
56
+ v-for="(pluginComp, index) in components"
57
+ :key="`${slot}-${pluginComp.plugin}-${pluginComp.component}-${index}`"
58
+ :is="loadPluginComponent(pluginComp.plugin, pluginComp.component)"
59
+ v-bind="pluginComp.data || {}"
60
+ />
61
+ </template>
62
+ </template>
package/src/composables/usePluginExtensions.js ADDED
@@ -0,0 +1,67 @@
1
+ import { computed } from 'vue';
2
+ import { usePage } from '@inertiajs/vue3';
3
+
4
+ /**
5
+ * Composable for reading plugin extensions from Inertia shared props.
6
+ *
7
+ * The Laravel backend (escalated-laravel) shares plugin UI extensions via
8
+ * `$page.props.escalated.plugins`, which contains:
9
+ * - menuItems: Array of navigation items injected by plugins
10
+ * - dashboardWidgets: Array of widget definitions for the agent dashboard
11
+ * - pageComponents: Object mapping slot names to arrays of component definitions
12
+ *
13
+ * @returns {Object} Plugin extension data and helper functions
14
+ */
15
+ export function usePluginExtensions() {
16
+ const page = usePage();
17
+
18
+ const pluginData = computed(() => page.props?.escalated?.plugins || {});
19
+
20
+ /**
21
+ * Menu items injected by plugins, sorted by position.
22
+ * Each item: { label, route, icon, position, permission, badge, submenu }
23
+ */
24
+ const menuItems = computed(() => {
25
+ const items = pluginData.value.menuItems || [];
26
+ return [...items].sort((a, b) => (a.position || 100) - (b.position || 100));
27
+ });
28
+
29
+ /**
30
+ * Dashboard widgets injected by plugins, sorted by position.
31
+ * Each widget: { id, title, component, plugin, data, position, width }
32
+ */
33
+ const dashboardWidgets = computed(() => {
34
+ const widgets = pluginData.value.dashboardWidgets || [];
35
+ return [...widgets].sort((a, b) => (a.position || 100) - (b.position || 100));
36
+ });
37
+
38
+ /**
39
+ * Get plugin components for a specific page slot, sorted by position.
40
+ *
41
+ * @param {string} pageName - The page name (e.g. 'dashboard', 'ticket.show')
42
+ * @param {string} slotName - The slot name (e.g. 'header', 'sidebar', 'footer')
43
+ * @returns {Array} Sorted array of component definitions for the given slot
44
+ */
45
+ function getPageComponents(pageName, slotName) {
46
+ const key = `${pageName}.${slotName}`;
47
+ const components = pluginData.value.pageComponents || {};
48
+ return [...(components[key] || [])].sort((a, b) => (a.position || 100) - (b.position || 100));
49
+ }
50
+
51
+ /**
52
+ * Check whether any plugins have registered extensions.
53
+ */
54
+ const hasPlugins = computed(() => {
55
+ return menuItems.value.length > 0
56
+ || dashboardWidgets.value.length > 0
57
+ || Object.keys(pluginData.value.pageComponents || {}).length > 0;
58
+ });
59
+
60
+ return {
61
+ pluginData,
62
+ menuItems,
63
+ dashboardWidgets,
64
+ getPageComponents,
65
+ hasPlugins,
66
+ };
67
+ }
package/src/defineEscalatedPlugin.js ADDED
@@ -0,0 +1,50 @@
1
+ /**
2
+ * Helper for plugin authors to define an Escalated plugin.
3
+ *
4
+ * Returns a Vue plugin object that registers components globally when installed.
5
+ *
6
+ * Usage in a plugin's main entry file:
7
+ *
8
+ * import { defineEscalatedPlugin } from '@escalated-dev/escalated'
9
+ * import SalesWidget from './Components/SalesWidget.vue'
10
+ * import CustomSidebar from './Components/CustomSidebar.vue'
11
+ *
12
+ * export default defineEscalatedPlugin({
13
+ * name: 'my-plugin',
14
+ * components: {
15
+ * SalesWidget,
16
+ * CustomSidebar,
17
+ * },
18
+ * setup(app) {
19
+ * // Optional: run custom setup logic when the plugin is installed
20
+ * },
21
+ * })
22
+ *
23
+ * @param {Object} options
24
+ * @param {string} options.name - Plugin identifier
25
+ * @param {Object} [options.components] - Map of component name to component definition
26
+ * @param {Function} [options.setup] - Optional setup callback receiving the Vue app instance
27
+ * @returns {Object} A Vue plugin object with an install() method
28
+ */
29
+ export function defineEscalatedPlugin(options = {}) {
30
+ return {
31
+ install(app) {
32
+ // Register all provided components globally
33
+ if (options.components) {
34
+ Object.entries(options.components).forEach(([name, component]) => {
35
+ app.component(name, component);
36
+ });
37
+ }
38
+
39
+ // Run optional setup callback
40
+ if (typeof options.setup === 'function') {
41
+ options.setup(app);
42
+ }
43
+
44
+ // Provide the plugin name for debugging
45
+ if (options.name) {
46
+ app.provide(`escalated-plugin:${options.name}`, true);
47
+ }
48
+ },
49
+ };
50
+ }
package/src/index.js CHANGED
@@ -12,6 +12,7 @@ export { default as FollowButton } from './components/FollowButton.vue'
12
12
  export { default as KeyboardShortcutHelp } from './components/KeyboardShortcutHelp.vue'
13
13
  export { default as MacroDropdown } from './components/MacroDropdown.vue'
14
14
  export { default as PinnedNotes } from './components/PinnedNotes.vue'
15
+ export { default as PluginSlot } from './components/PluginSlot.vue'
15
16
  export { default as PresenceIndicator } from './components/PresenceIndicator.vue'
16
17
  export { default as PriorityBadge } from './components/PriorityBadge.vue'
17
18
  export { default as QuickFilters } from './components/QuickFilters.vue'
@@ -28,3 +29,7 @@ export { default as TicketSidebar } from './components/TicketSidebar.vue'
28
29
 
29
30
  // Composables
30
31
  export { useKeyboardShortcuts } from './composables/useKeyboardShortcuts'
32
+ export { usePluginExtensions } from './composables/usePluginExtensions'
33
+
34
+ // Plugin authoring helper
35
+ export { defineEscalatedPlugin } from './defineEscalatedPlugin'
package/src/pages/Admin/ApiTokens/Index.vue ADDED
@@ -0,0 +1,217 @@
1
+ <script setup>
2
+ import { ref, computed, inject } from 'vue';
3
+ import { useForm, usePage } from '@inertiajs/vue3';
4
+ import EscalatedLayout from '../../../components/EscalatedLayout.vue';
5
+
6
+ const props = defineProps({
7
+ tokens: Array,
8
+ users: Array,
9
+ api_enabled: Boolean,
10
+ });
11
+
12
+ const dark = inject('esc-dark', computed(() => true));
13
+ const page = usePage();
14
+ const prefix = computed(() => {
15
+ const p = page.props.escalated?.prefix || 'support';
16
+ return p.startsWith('/') ? p : `/${p}`;
17
+ });
18
+
19
+ const showCreate = ref(false);
20
+ const copiedToken = ref(null);
21
+
22
+ const form = useForm({
23
+ name: '',
24
+ user_id: '',
25
+ abilities: ['agent'],
26
+ expires_in_days: null,
27
+ });
28
+
29
+ function createToken() {
30
+ form.post(`${prefix.value}/admin/api-tokens`, {
31
+ preserveScroll: true,
32
+ onSuccess: (page) => {
33
+ const flash = page.props.flash || {};
34
+ if (flash.plain_text_token) {
35
+ copiedToken.value = flash.plain_text_token;
36
+ }
37
+ form.reset();
38
+ showCreate.value = false;
39
+ },
40
+ });
41
+ }
42
+
43
+ function revokeToken(id) {
44
+ if (!confirm('Are you sure you want to revoke this token? This cannot be undone.')) return;
45
+ useForm({}).delete(`${prefix.value}/admin/api-tokens/${id}`, { preserveScroll: true });
46
+ }
47
+
48
+ function copyToken() {
49
+ if (copiedToken.value) {
50
+ navigator.clipboard.writeText(copiedToken.value);
51
+ }
52
+ }
53
+
54
+ function dismissToken() {
55
+ copiedToken.value = null;
56
+ }
57
+
58
+ function toggleAbility(ability) {
59
+ const idx = form.abilities.indexOf(ability);
60
+ if (idx >= 0) {
61
+ form.abilities.splice(idx, 1);
62
+ } else {
63
+ form.abilities.push(ability);
64
+ }
65
+ }
66
+
67
+ function formatDate(iso) {
68
+ if (!iso) return '—';
69
+ return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
70
+ }
71
+ </script>
72
+
73
+ <template>
74
+ <EscalatedLayout title="API Tokens">
75
+ <div class="space-y-6">
76
+ <!-- Header -->
77
+ <div class="flex items-center justify-between">
78
+ <div>
79
+ <h2 :class="dark ? 'text-white' : 'text-gray-900'" class="text-lg font-semibold">API Tokens</h2>
80
+ <p :class="dark ? 'text-neutral-500' : 'text-gray-500'" class="mt-1 text-sm">Manage API tokens for desktop apps and external integrations.</p>
81
+ </div>
82
+ <button @click="showCreate = true"
83
+ :class="dark ? 'bg-white text-black hover:bg-neutral-200' : 'bg-gray-900 text-white hover:bg-gray-800'"
84
+ class="rounded-lg px-4 py-2 text-sm font-medium transition-colors">
85
+ Create Token
86
+ </button>
87
+ </div>
88
+
89
+ <!-- Not enabled warning -->
90
+ <div v-if="!api_enabled"
91
+ :class="dark ? 'border-amber-500/30 bg-amber-500/10 text-amber-300' : 'border-amber-300 bg-amber-50 text-amber-800'"
92
+ class="rounded-lg border p-4 text-sm">
93
+ The REST API is currently disabled. Set <code class="font-mono">ESCALATED_API_ENABLED=true</code> in your .env to enable it.
94
+ </div>
95
+
96
+ <!-- Copied token modal -->
97
+ <div v-if="copiedToken"
98
+ :class="dark ? 'border-emerald-500/30 bg-emerald-500/10' : 'border-emerald-300 bg-emerald-50'"
99
+ class="rounded-lg border p-4">
100
+ <p :class="dark ? 'text-emerald-300' : 'text-emerald-800'" class="text-sm font-medium">Token created! Copy it now — it won't be shown again.</p>
101
+ <div class="mt-2 flex items-center gap-2">
102
+ <code :class="dark ? 'bg-black text-emerald-400' : 'bg-white text-emerald-700'"
103
+ class="flex-1 rounded border px-3 py-2 text-xs font-mono break-all"
104
+ :style="dark ? 'border-color: rgba(255,255,255,0.1)' : ''">{{ copiedToken }}</code>
105
+ <button @click="copyToken"
106
+ :class="dark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
107
+ class="rounded-lg px-3 py-2 text-sm font-medium transition-colors">Copy</button>
108
+ <button @click="dismissToken"
109
+ :class="dark ? 'text-neutral-500 hover:text-white' : 'text-gray-400 hover:text-gray-600'"
110
+ class="px-2 py-2 text-sm transition-colors">Dismiss</button>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Create form -->
115
+ <div v-if="showCreate"
116
+ :class="dark ? 'border-white/[0.06] bg-neutral-950' : 'border-gray-200 bg-white'"
117
+ class="rounded-lg border p-5 space-y-4">
118
+ <h3 :class="dark ? 'text-white' : 'text-gray-900'" class="text-sm font-semibold">New API Token</h3>
119
+
120
+ <div class="grid grid-cols-2 gap-4">
121
+ <div>
122
+ <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">Token Name</label>
123
+ <input v-model="form.name" type="text" placeholder="e.g. Desktop App - Work Laptop"
124
+ :class="dark ? 'border-white/[0.08] bg-white/[0.04] text-white' : 'border-gray-300 bg-white text-gray-900'"
125
+ class="w-full rounded-lg border px-3 py-2 text-sm" />
126
+ </div>
127
+ <div>
128
+ <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">User</label>
129
+ <select v-model="form.user_id"
130
+ :class="dark ? 'border-white/[0.08] bg-white/[0.04] text-white' : 'border-gray-300 bg-white text-gray-900'"
131
+ class="w-full rounded-lg border px-3 py-2 text-sm">
132
+ <option value="">Select user...</option>
133
+ <option v-for="u in users" :key="u.id" :value="u.id">{{ u.name }} ({{ u.email }})</option>
134
+ </select>
135
+ </div>
136
+ </div>
137
+
138
+ <div>
139
+ <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">Abilities</label>
140
+ <div class="flex items-center gap-3">
141
+ <label v-for="ability in ['agent', 'admin']" :key="ability"
142
+ :class="dark ? 'text-neutral-300' : 'text-gray-700'"
143
+ class="flex items-center gap-1.5 text-sm cursor-pointer">
144
+ <input type="checkbox" :checked="form.abilities.includes(ability)" @change="toggleAbility(ability)"
145
+ class="rounded border-neutral-600" />
146
+ {{ ability }}
147
+ </label>
148
+ </div>
149
+ </div>
150
+
151
+ <div>
152
+ <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">Expires In (days)</label>
153
+ <input v-model.number="form.expires_in_days" type="number" min="1" max="365" placeholder="Leave empty for no expiration"
154
+ :class="dark ? 'border-white/[0.08] bg-white/[0.04] text-white' : 'border-gray-300 bg-white text-gray-900'"
155
+ class="w-48 rounded-lg border px-3 py-2 text-sm" />
156
+ </div>
157
+
158
+ <div class="flex items-center gap-3 pt-2">
159
+ <button @click="createToken" :disabled="form.processing || !form.name || !form.user_id"
160
+ :class="dark ? 'bg-white text-black hover:bg-neutral-200 disabled:bg-neutral-700 disabled:text-neutral-500' : 'bg-gray-900 text-white hover:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500'"
161
+ class="rounded-lg px-4 py-2 text-sm font-medium transition-colors">
162
+ {{ form.processing ? 'Creating...' : 'Create Token' }}
163
+ </button>
164
+ <button @click="showCreate = false"
165
+ :class="dark ? 'text-neutral-500 hover:text-white' : 'text-gray-500 hover:text-gray-900'"
166
+ class="text-sm transition-colors">Cancel</button>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Tokens table -->
171
+ <div :class="dark ? 'border-white/[0.06]' : 'border-gray-200'" class="overflow-hidden rounded-lg border">
172
+ <table class="w-full text-sm">
173
+ <thead :class="dark ? 'bg-white/[0.03] text-neutral-500' : 'bg-gray-50 text-gray-500'">
174
+ <tr>
175
+ <th class="px-4 py-3 text-left text-xs font-medium uppercase">Name</th>
176
+ <th class="px-4 py-3 text-left text-xs font-medium uppercase">User</th>
177
+ <th class="px-4 py-3 text-left text-xs font-medium uppercase">Abilities</th>
178
+ <th class="px-4 py-3 text-left text-xs font-medium uppercase">Last Used</th>
179
+ <th class="px-4 py-3 text-left text-xs font-medium uppercase">Expires</th>
180
+ <th class="px-4 py-3 text-right text-xs font-medium uppercase">Actions</th>
181
+ </tr>
182
+ </thead>
183
+ <tbody :class="dark ? 'divide-white/[0.04]' : 'divide-gray-100'" class="divide-y">
184
+ <tr v-for="token in tokens" :key="token.id"
185
+ :class="[dark ? 'hover:bg-white/[0.02]' : 'hover:bg-gray-50', token.is_expired ? 'opacity-50' : '']">
186
+ <td :class="dark ? 'text-white' : 'text-gray-900'" class="px-4 py-3 font-medium">{{ token.name }}</td>
187
+ <td :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="px-4 py-3">{{ token.user_name }}</td>
188
+ <td class="px-4 py-3">
189
+ <span v-for="a in (token.abilities || [])" :key="a"
190
+ :class="dark ? 'bg-white/[0.06] text-neutral-300' : 'bg-gray-100 text-gray-700'"
191
+ class="mr-1 rounded px-1.5 py-0.5 text-xs">{{ a }}</span>
192
+ </td>
193
+ <td :class="dark ? 'text-neutral-500' : 'text-gray-500'" class="px-4 py-3 text-xs">
194
+ <template v-if="token.last_used_at">{{ formatDate(token.last_used_at) }}</template>
195
+ <template v-else>Never</template>
196
+ </td>
197
+ <td :class="dark ? 'text-neutral-500' : 'text-gray-500'" class="px-4 py-3 text-xs">
198
+ <span v-if="token.is_expired" class="text-rose-400">Expired</span>
199
+ <template v-else-if="token.expires_at">{{ formatDate(token.expires_at) }}</template>
200
+ <template v-else>Never</template>
201
+ </td>
202
+ <td class="px-4 py-3 text-right">
203
+ <button @click="revokeToken(token.id)"
204
+ class="text-xs text-rose-400 hover:text-rose-300 transition-colors">Revoke</button>
205
+ </td>
206
+ </tr>
207
+ <tr v-if="!tokens.length">
208
+ <td colspan="6" :class="dark ? 'text-neutral-500' : 'text-gray-400'" class="px-4 py-8 text-center text-sm">
209
+ No API tokens created yet.
210
+ </td>
211
+ </tr>
212
+ </tbody>
213
+ </table>
214
+ </div>
215
+ </div>
216
+ </EscalatedLayout>
217
+ </template>
package/src/pages/Admin/Plugins/Index.vue ADDED
@@ -0,0 +1,197 @@
1
+ <script setup>
2
+ import EscalatedLayout from '../../../components/EscalatedLayout.vue';
3
+ import { router } from '@inertiajs/vue3';
4
+ import { ref, computed } from 'vue';
5
+
6
+ const props = defineProps({
7
+ plugins: { type: Array, default: () => [] },
8
+ });
9
+
10
+ const confirmingDelete = ref(null);
11
+ const uploading = ref(false);
12
+ const fileInput = ref(null);
13
+
14
+ const activePlugins = computed(() => props.plugins.filter(p => p.active));
15
+ const inactivePlugins = computed(() => props.plugins.filter(p => !p.active));
16
+
17
+ function togglePlugin(plugin) {
18
+ router.post(route('escalated.admin.plugins.toggle', plugin.id), {}, {
19
+ preserveScroll: true,
20
+ });
21
+ }
22
+
23
+ function confirmDelete(plugin) {
24
+ confirmingDelete.value = plugin.id;
25
+ }
26
+
27
+ function cancelDelete() {
28
+ confirmingDelete.value = null;
29
+ }
30
+
31
+ function deletePlugin(plugin) {
32
+ router.delete(route('escalated.admin.plugins.destroy', plugin.id), {
33
+ preserveScroll: true,
34
+ onSuccess: () => { confirmingDelete.value = null; },
35
+ });
36
+ }
37
+
38
+ function triggerUpload() {
39
+ fileInput.value?.click();
40
+ }
41
+
42
+ function handleUpload(event) {
43
+ const file = event.target.files?.[0];
44
+ if (!file) return;
45
+
46
+ uploading.value = true;
47
+ router.post(route('escalated.admin.plugins.upload'), { file }, {
48
+ forceFormData: true,
49
+ preserveScroll: true,
50
+ onFinish: () => {
51
+ uploading.value = false;
52
+ if (fileInput.value) fileInput.value.value = '';
53
+ },
54
+ });
55
+ }
56
+
57
+ function statusColor(plugin) {
58
+ if (plugin.active) return 'bg-emerald-500';
59
+ return 'bg-neutral-600';
60
+ }
61
+
62
+ function statusLabel(plugin) {
63
+ return plugin.active ? 'Active' : 'Inactive';
64
+ }
65
+ </script>
66
+
67
+ <template>
68
+ <EscalatedLayout title="Plugins">
69
+ <!-- Header -->
70
+ <div class="mb-6 flex items-center justify-between">
71
+ <div>
72
+ <p class="text-sm text-neutral-400">
73
+ {{ activePlugins.length }} active, {{ inactivePlugins.length }} inactive
74
+ </p>
75
+ </div>
76
+ <div>
77
+ <input ref="fileInput" type="file" accept=".zip" class="hidden" @change="handleUpload" />
78
+ <button @click="triggerUpload" :disabled="uploading"
79
+ class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400 disabled:opacity-50">
80
+ <span v-if="uploading" class="flex items-center gap-2">
81
+ <svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
82
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
83
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
84
+ </svg>
85
+ Uploading...
86
+ </span>
87
+ <span v-else class="flex items-center gap-2">
88
+ <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
89
+ <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
90
+ </svg>
91
+ Upload Plugin
92
+ </span>
93
+ </button>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Empty state -->
98
+ <div v-if="!plugins?.length" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 px-6 py-16 text-center">
99
+ <svg class="mx-auto mb-4 h-12 w-12 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
100
+ <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z" />
101
+ </svg>
102
+ <h3 class="text-sm font-medium text-neutral-300">No plugins installed</h3>
103
+ <p class="mt-1 text-xs text-neutral-500">Upload a plugin ZIP to extend Escalated with custom functionality.</p>
104
+ </div>
105
+
106
+ <!-- Plugin cards -->
107
+ <div v-else class="space-y-3">
108
+ <div v-for="plugin in plugins" :key="plugin.id"
109
+ class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5 transition-colors hover:bg-neutral-900/80">
110
+ <div class="flex items-start justify-between gap-4">
111
+ <!-- Plugin info -->
112
+ <div class="min-w-0 flex-1">
113
+ <div class="flex items-center gap-3">
114
+ <h3 class="text-sm font-semibold text-white">{{ plugin.name }}</h3>
115
+ <span :class="['inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-semibold',
116
+ plugin.active
117
+ ? 'bg-emerald-500/10 text-emerald-400'
118
+ : 'bg-neutral-500/10 text-neutral-500']">
119
+ <span :class="['h-1.5 w-1.5 rounded-full', statusColor(plugin)]"></span>
120
+ {{ statusLabel(plugin) }}
121
+ </span>
122
+ <span v-if="plugin.version" class="text-[11px] text-neutral-600">v{{ plugin.version }}</span>
123
+ </div>
124
+ <p v-if="plugin.description" class="mt-1 text-sm text-neutral-400">{{ plugin.description }}</p>
125
+ <div class="mt-2 flex flex-wrap items-center gap-4 text-xs text-neutral-600">
126
+ <span v-if="plugin.author" class="flex items-center gap-1">
127
+ <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
128
+ <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
129
+ </svg>
130
+ {{ plugin.author }}
131
+ </span>
132
+ <span v-if="plugin.homepage" class="flex items-center gap-1">
133
+ <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
134
+ <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
135
+ </svg>
136
+ <a :href="plugin.homepage" target="_blank" rel="noopener" class="hover:text-neutral-400">{{ plugin.homepage }}</a>
137
+ </span>
138
+ <span v-if="plugin.installed_at" class="flex items-center gap-1">
139
+ <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
140
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
141
+ </svg>
142
+ Installed {{ plugin.installed_at }}
143
+ </span>
144
+ </div>
145
+
146
+ <!-- Provided extensions summary -->
147
+ <div v-if="plugin.provides" class="mt-3 flex flex-wrap gap-2">
148
+ <span v-if="plugin.provides.menu_items"
149
+ class="rounded bg-white/[0.04] px-2 py-0.5 text-[10px] text-neutral-500">
150
+ {{ plugin.provides.menu_items }} menu item{{ plugin.provides.menu_items !== 1 ? 's' : '' }}
151
+ </span>
152
+ <span v-if="plugin.provides.widgets"
153
+ class="rounded bg-white/[0.04] px-2 py-0.5 text-[10px] text-neutral-500">
154
+ {{ plugin.provides.widgets }} widget{{ plugin.provides.widgets !== 1 ? 's' : '' }}
155
+ </span>
156
+ <span v-if="plugin.provides.page_components"
157
+ class="rounded bg-white/[0.04] px-2 py-0.5 text-[10px] text-neutral-500">
158
+ {{ plugin.provides.page_components }} page component{{ plugin.provides.page_components !== 1 ? 's' : '' }}
159
+ </span>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Actions -->
164
+ <div class="flex shrink-0 items-center gap-2">
165
+ <!-- Toggle active/inactive -->
166
+ <button @click="togglePlugin(plugin)"
167
+ :class="['relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
168
+ plugin.active ? 'bg-emerald-500' : 'bg-neutral-700']"
169
+ :title="plugin.active ? 'Deactivate' : 'Activate'">
170
+ <span :class="['pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition-transform',
171
+ plugin.active ? 'translate-x-5' : 'translate-x-0']" />
172
+ </button>
173
+
174
+ <!-- Delete -->
175
+ <template v-if="confirmingDelete === plugin.id">
176
+ <button @click="deletePlugin(plugin)"
177
+ class="rounded-lg bg-rose-500/20 px-3 py-1.5 text-xs font-medium text-rose-400 transition-colors hover:bg-rose-500/30">
178
+ Confirm
179
+ </button>
180
+ <button @click="cancelDelete"
181
+ class="rounded-lg border border-white/10 px-3 py-1.5 text-xs font-medium text-neutral-400 transition-colors hover:bg-white/[0.04]">
182
+ Cancel
183
+ </button>
184
+ </template>
185
+ <button v-else @click="confirmDelete(plugin)"
186
+ class="rounded-lg border border-white/[0.06] p-1.5 text-neutral-600 transition-colors hover:border-rose-500/20 hover:bg-rose-500/5 hover:text-rose-400"
187
+ title="Delete plugin">
188
+ <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
189
+ <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
190
+ </svg>
191
+ </button>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </EscalatedLayout>
197
+ </template>
package/src/pages/Admin/Plugins.vue ADDED
@@ -0,0 +1,129 @@
1
+ <script setup>
2
+ import EscalatedLayout from '../../components/EscalatedLayout.vue';
3
+ import { useForm, usePage, router } from '@inertiajs/vue3';
4
+ import { computed } from 'vue';
5
+
6
+ const props = defineProps({ plugins: Array });
7
+ const page = usePage();
8
+
9
+ const flash = computed(() => ({
10
+ success: page.props.flash?.success,
11
+ error: page.props.flash?.error,
12
+ }));
13
+
14
+ const uploadForm = useForm({
15
+ plugin: null,
16
+ });
17
+
18
+ function onFileChange(e) {
19
+ uploadForm.plugin = e.target.files[0];
20
+ }
21
+
22
+ function submitUpload() {
23
+ uploadForm.post(route('escalated.admin.plugins.upload'), {
24
+ forceFormData: true,
25
+ onSuccess: () => {
26
+ uploadForm.reset();
27
+ },
28
+ });
29
+ }
30
+
31
+ function activate(slug) {
32
+ router.post(route('escalated.admin.plugins.activate', slug));
33
+ }
34
+
35
+ function deactivate(slug) {
36
+ router.post(route('escalated.admin.plugins.deactivate', slug));
37
+ }
38
+
39
+ function deletePlugin(slug) {
40
+ if (confirm('Are you sure you want to delete this plugin? This cannot be undone.')) {
41
+ router.delete(route('escalated.admin.plugins.destroy', slug));
42
+ }
43
+ }
44
+ </script>
45
+
46
+ <template>
47
+ <EscalatedLayout title="Plugins">
48
+ <div class="mx-auto max-w-4xl space-y-6">
49
+ <!-- Flash messages -->
50
+ <div v-if="flash.success" class="rounded-lg border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-400">
51
+ {{ flash.success }}
52
+ </div>
53
+ <div v-if="flash.error" class="rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
54
+ {{ flash.error }}
55
+ </div>
56
+
57
+ <!-- Upload Plugin -->
58
+ <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
59
+ <h3 class="mb-4 text-sm font-semibold text-white">Upload Plugin</h3>
60
+ <form @submit.prevent="submitUpload" class="flex items-end gap-4">
61
+ <div class="flex-1">
62
+ <label class="block text-sm font-medium text-neutral-200">Plugin ZIP File</label>
63
+ <input type="file" accept=".zip" @change="onFileChange"
64
+ class="mt-2 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 file:mr-3 file:rounded file:border-0 file:bg-white/10 file:px-3 file:py-1 file:text-sm file:text-neutral-300 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
65
+ <p v-if="uploadForm.errors.plugin" class="mt-1 text-xs text-red-400">{{ uploadForm.errors.plugin }}</p>
66
+ </div>
67
+ <button type="submit" :disabled="uploadForm.processing || !uploadForm.plugin"
68
+ class="shrink-0 rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-5 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400 disabled:opacity-50">
69
+ {{ uploadForm.processing ? 'Uploading...' : 'Upload' }}
70
+ </button>
71
+ </form>
72
+ </div>
73
+
74
+ <!-- Plugin List -->
75
+ <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
76
+ <h3 class="mb-5 text-sm font-semibold text-white">Installed Plugins</h3>
77
+
78
+ <div v-if="!plugins || plugins.length === 0" class="py-8 text-center text-sm text-neutral-500">
79
+ No plugins installed yet.
80
+ </div>
81
+
82
+ <div v-else class="divide-y divide-white/[0.06]">
83
+ <div v-for="plugin in plugins" :key="plugin.slug" class="flex items-start justify-between gap-4 py-4 first:pt-0 last:pb-0">
84
+ <!-- Plugin info -->
85
+ <div class="min-w-0 flex-1">
86
+ <div class="flex items-center gap-2.5">
87
+ <span class="text-sm font-medium text-white">{{ plugin.name }}</span>
88
+ <span class="rounded bg-white/[0.06] px-1.5 py-0.5 text-[10px] font-medium text-neutral-500">
89
+ v{{ plugin.version }}
90
+ </span>
91
+ <span :class="[
92
+ 'rounded px-1.5 py-0.5 text-[10px] font-medium',
93
+ plugin.source === 'composer'
94
+ ? 'bg-violet-500/10 text-violet-400'
95
+ : 'bg-cyan-500/10 text-cyan-400'
96
+ ]">
97
+ {{ plugin.source }}
98
+ </span>
99
+ </div>
100
+ <p v-if="plugin.description" class="mt-1 text-xs text-neutral-500">{{ plugin.description }}</p>
101
+ <p class="mt-1 text-xs text-neutral-600">by {{ plugin.author }}</p>
102
+ </div>
103
+
104
+ <!-- Actions -->
105
+ <div class="flex shrink-0 items-center gap-2">
106
+ <!-- Active status toggle -->
107
+ <button v-if="plugin.is_active" @click="deactivate(plugin.slug)"
108
+ class="rounded-lg border border-emerald-500/20 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-400 transition-colors hover:bg-emerald-500/20">
109
+ Active
110
+ </button>
111
+ <button v-else @click="activate(plugin.slug)"
112
+ class="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-neutral-500 transition-colors hover:bg-white/[0.08] hover:text-neutral-300">
113
+ Inactive
114
+ </button>
115
+
116
+ <!-- Delete (local only) -->
117
+ <button v-if="plugin.source === 'local'" @click="deletePlugin(plugin.slug)"
118
+ class="rounded-lg border border-white/10 bg-white/[0.04] p-1.5 text-neutral-600 transition-colors hover:border-red-500/20 hover:bg-red-500/10 hover:text-red-400">
119
+ <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
120
+ <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
121
+ </svg>
122
+ </button>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </EscalatedLayout>
129
+ </template>
package/src/pages/Admin/Tickets/Show.vue CHANGED
@@ -11,7 +11,9 @@ import FollowButton from '../../../components/FollowButton.vue';
11
11
  import PresenceIndicator from '../../../components/PresenceIndicator.vue';
12
12
  import PinnedNotes from '../../../components/PinnedNotes.vue';
13
13
  import KeyboardShortcutHelp from '../../../components/KeyboardShortcutHelp.vue';
14
+ import PluginSlot from '../../../components/PluginSlot.vue';
14
15
  import { useKeyboardShortcuts } from '../../../composables/useKeyboardShortcuts';
16
+ import { usePluginExtensions } from '../../../composables/usePluginExtensions';
15
17
  import { router, useForm, usePage } from '@inertiajs/vue3';
16
18
  import { ref } from 'vue';
17
19
 
@@ -56,6 +58,8 @@ function toggleFollow() {
56
58
  router.post(route('escalated.admin.tickets.follow', props.ticket.reference), {}, { preserveScroll: true });
57
59
  }
58
60
 
61
+ const { getPageComponents } = usePluginExtensions();
62
+
59
63
  // Keyboard shortcuts
60
64
  useKeyboardShortcuts({
61
65
  'r': () => { activeTab.value = 'reply'; replyComposerRef.value?.$el?.querySelector('textarea')?.focus(); },
@@ -69,6 +73,9 @@ useKeyboardShortcuts({
69
73
 
70
74
  <template>
71
75
  <EscalatedLayout :title="ticket.subject">
76
+ <!-- Plugin: ticket show header slot -->
77
+ <PluginSlot slot="ticket.show.header" :components="getPageComponents('ticket.show', 'header')" />
78
+
72
79
  <div class="mb-5 flex flex-wrap items-center gap-3">
73
80
  <span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
74
81
  <StatusBadge :status="ticket.status" />
@@ -101,6 +108,8 @@ useKeyboardShortcuts({
101
108
  <option value="urgent">Urgent</option>
102
109
  <option value="critical">Critical</option>
103
110
  </select>
111
+ <!-- Plugin: ticket show actions slot -->
112
+ <PluginSlot slot="ticket.show.actions" :components="getPageComponents('ticket.show', 'actions')" />
104
113
  </div>
105
114
  </div>
106
115
  <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
@@ -136,8 +145,10 @@ useKeyboardShortcuts({
136
145
  :ticket-reference="ticket.reference" route-prefix="escalated.admin" pinnable />
137
146
  </div>
138
147
  </div>
139
- <div>
148
+ <div class="space-y-6">
140
149
  <TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />
150
+ <!-- Plugin: ticket show sidebar slot -->
151
+ <PluginSlot slot="ticket.show.sidebar" :components="getPageComponents('ticket.show', 'sidebar')" />
141
152
  </div>
142
153
  </div>
143
154
  <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="detail" />
package/src/pages/Agent/Dashboard.vue CHANGED
@@ -1,10 +1,12 @@
1
1
  <script setup>
2
- import { computed } from 'vue';
2
+ import { computed, defineAsyncComponent } from 'vue';
3
3
  import { Link } from '@inertiajs/vue3';
4
4
  import EscalatedLayout from '../../components/EscalatedLayout.vue';
5
5
  import StatsCard from '../../components/StatsCard.vue';
6
6
  import StatusBadge from '../../components/StatusBadge.vue';
7
7
  import PriorityBadge from '../../components/PriorityBadge.vue';
8
+ import PluginSlot from '../../components/PluginSlot.vue';
9
+ import { usePluginExtensions } from '../../composables/usePluginExtensions';
8
10
 
9
11
  const props = defineProps({
10
12
  stats: Object,
@@ -43,10 +45,22 @@ function truncate(str, len = 50) {
43
45
  const hasSlaBreaching = computed(() => needsAttention.value?.sla_breaching?.length > 0);
44
46
  const hasUnassignedUrgent = computed(() => needsAttention.value?.unassigned_urgent?.length > 0);
45
47
  const needsAttention = computed(() => props.needsAttention);
48
+
49
+ const { dashboardWidgets, getPageComponents } = usePluginExtensions();
50
+
51
+ // Load a plugin widget component dynamically
52
+ const loadWidgetComponent = (plugin, component) => {
53
+ return defineAsyncComponent(() =>
54
+ import(`../../../../../plugins/escalated/${plugin}/resources/js/Components/${component}.vue`)
55
+ );
56
+ };
46
57
  </script>
47
58
 
48
59
  <template>
49
60
  <EscalatedLayout title="Agent Dashboard">
61
+ <!-- Plugin: dashboard header slot -->
62
+ <PluginSlot slot="dashboard.header" :components="getPageComponents('dashboard', 'header')" />
63
+
50
64
  <!-- Stats row -->
51
65
  <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-5">
52
66
  <StatsCard label="Open Tickets" :value="stats.open" color="cyan" />
@@ -152,5 +166,21 @@ const needsAttention = computed(() => props.needsAttention);
152
166
  </div>
153
167
  </div>
154
168
  </div>
169
+
170
+ <!-- Plugin dashboard widgets -->
171
+ <div v-if="dashboardWidgets.length" class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
172
+ <div v-for="widget in dashboardWidgets" :key="widget.id"
173
+ :class="['rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5',
174
+ widget.width === 'full' ? 'md:col-span-2' : '']">
175
+ <h3 v-if="widget.title" class="mb-3 text-sm font-semibold text-neutral-200">{{ widget.title }}</h3>
176
+ <component
177
+ :is="loadWidgetComponent(widget.plugin, widget.component)"
178
+ v-bind="widget.data || {}"
179
+ />
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Plugin: dashboard footer slot -->
184
+ <PluginSlot slot="dashboard.footer" :components="getPageComponents('dashboard', 'footer')" />
155
185
  </EscalatedLayout>
156
186
  </template>
package/src/pages/Agent/TicketShow.vue CHANGED
@@ -11,7 +11,9 @@ import FollowButton from '../../components/FollowButton.vue';
11
11
  import PresenceIndicator from '../../components/PresenceIndicator.vue';
12
12
  import PinnedNotes from '../../components/PinnedNotes.vue';
13
13
  import KeyboardShortcutHelp from '../../components/KeyboardShortcutHelp.vue';
14
+ import PluginSlot from '../../components/PluginSlot.vue';
14
15
  import { useKeyboardShortcuts } from '../../composables/useKeyboardShortcuts';
16
+ import { usePluginExtensions } from '../../composables/usePluginExtensions';
15
17
  import { router, useForm, usePage } from '@inertiajs/vue3';
16
18
  import { ref } from 'vue';
17
19
 
@@ -55,6 +57,8 @@ function toggleFollow() {
55
57
  router.post(route('escalated.agent.tickets.follow', props.ticket.reference), {}, { preserveScroll: true });
56
58
  }
57
59
 
60
+ const { getPageComponents } = usePluginExtensions();
61
+
58
62
  // Keyboard shortcuts
59
63
  useKeyboardShortcuts({
60
64
  'r': () => { activeTab.value = 'reply'; replyComposerRef.value?.$el?.querySelector('textarea')?.focus(); },
@@ -68,6 +72,9 @@ useKeyboardShortcuts({
68
72
 
69
73
  <template>
70
74
  <EscalatedLayout :title="ticket.subject">
75
+ <!-- Plugin: ticket show header slot -->
76
+ <PluginSlot slot="ticket.show.header" :components="getPageComponents('ticket.show', 'header')" />
77
+
71
78
  <div class="mb-5 flex flex-wrap items-center gap-3">
72
79
  <span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
73
80
  <StatusBadge :status="ticket.status" />
@@ -100,6 +107,8 @@ useKeyboardShortcuts({
100
107
  <option value="urgent">Urgent</option>
101
108
  <option value="critical">Critical</option>
102
109
  </select>
110
+ <!-- Plugin: ticket show actions slot -->
111
+ <PluginSlot slot="ticket.show.actions" :components="getPageComponents('ticket.show', 'actions')" />
103
112
  </div>
104
113
  </div>
105
114
  <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
@@ -135,8 +144,10 @@ useKeyboardShortcuts({
135
144
  :ticket-reference="ticket.reference" route-prefix="escalated.agent" pinnable />
136
145
  </div>
137
146
  </div>
138
- <div>
147
+ <div class="space-y-6">
139
148
  <TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />
149
+ <!-- Plugin: ticket show sidebar slot -->
150
+ <PluginSlot slot="ticket.show.sidebar" :components="getPageComponents('ticket.show', 'sidebar')" />
140
151
  </div>
141
152
  </div>
142
153
  <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="detail" />