@escalated-dev/escalated 0.3.5 → 0.5.0

package/README.md

@@ -18,6 +18,7 @@ Pick your framework:
 | **Laravel** | [escalated-dev/escalated-laravel](https://github.com/escalated-dev/escalated-laravel) | `composer require escalated-dev/escalated-laravel` |
 | **Rails** | [escalated-dev/escalated-rails](https://github.com/escalated-dev/escalated-rails) | `gem "escalated"` |
 | **Django** | [escalated-dev/escalated-django](https://github.com/escalated-dev/escalated-django) | `pip install escalated-django` |
+| **AdonisJS** | [escalated-dev/escalated-adonis](https://github.com/escalated-dev/escalated-adonis) | `npm install @escalated-dev/escalated-adonis` |
 
 Each backend repo has full setup instructions — install command, migrations, config, and frontend integration.
 
@@ -112,9 +113,17 @@ import BaseLayout from '@/layouts/BaseLayout.vue'
 app.use(EscalatedPlugin, { layout: BaseLayout })
 ```
 
+**AdonisJS** (Inertia + Vue 3):
+```js
+import { EscalatedPlugin } from '@escalated-dev/escalated'
+import AppLayout from '@/layouts/AppLayout.vue'
+
+app.use(EscalatedPlugin, { layout: AppLayout })
+```
+
 ## What's in This Repo
 
-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.
+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.
 
 ### Pages
 
@@ -157,6 +166,20 @@ Reusable building blocks used across the pages above.
 | `AttachmentList` | File attachment display with download links |
 | `StatsCard` | Metric card with label, value, and trend |
 | `EscalatedLayout` | Top-level layout with navigation (supports host layout injection) |
+| `BulkActionBar` | Toolbar for batch operations on selected tickets |
+| `QuickFilters` | One-click filter chips (My Tickets, Unassigned, Urgent, SLA Breaching) |
+| `MacroDropdown` | Dropdown to apply multi-step macros to a ticket |
+| `FollowButton` | Toggle button to follow/unfollow a ticket |
+| `SatisfactionRating` | 1-5 star CSAT rating input with optional comment |
+| `KeyboardShortcutHelp` | Modal overlay showing all available keyboard shortcuts |
+| `PinnedNotes` | Display pinned internal notes at the top of the thread |
+| `PresenceIndicator` | Real-time indicator showing who is viewing a ticket |
+
+### Composables
+
+| Composable | Description |
+|------------|-------------|
+| `useKeyboardShortcuts` | Registers and manages keyboard shortcuts for ticket actions |
 
 ### Plugin
 
@@ -185,6 +208,17 @@ import CustomerIndex from '@escalated-dev/escalated/pages/Customer/Index.vue'
 
 Peer dependencies: `vue` ^3.3.0, `@inertiajs/vue3` ^1.0.0 || ^2.0.0
 
+## Ecosystem
+
+This is the shared frontend for the Escalated support ticket system. Backend packages available for every major framework:
+
+- **[Escalated for Laravel](https://github.com/escalated-dev/escalated-laravel)** — Laravel Composer package
+- **[Escalated for Rails](https://github.com/escalated-dev/escalated-rails)** — Ruby on Rails engine
+- **[Escalated for Django](https://github.com/escalated-dev/escalated-django)** — Django reusable app
+- **[Escalated for AdonisJS](https://github.com/escalated-dev/escalated-adonis)** — AdonisJS v6 package
+- **[Escalated for Filament](https://github.com/escalated-dev/escalated-filament)** — Filament v3 admin panel plugin
+- **[Shared Frontend](https://github.com/escalated-dev/escalated)** — Vue 3 + Inertia.js UI components (you are here)
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.3.5",
+  "version": "0.5.0",
   "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",
@@ -30,8 +30,15 @@
     "vue": "^3.3.0",
     "@inertiajs/vue3": "^1.0.0 || ^2.0.0"
   },
+  "scripts": {
+    "test": "vitest run"
+  },
   "devDependencies": {
     "vue": "^3.5.0",
-    "@inertiajs/vue3": "^2.0.0"
+    "@inertiajs/vue3": "^2.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "happy-dom": "^15.0.0",
+    "vitest": "^2.0.0"
   }
 }

package/src/components/BulkActionBar.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    selectedIds: { type: Array, required: true },
+    bulkRoute: { type: String, required: true },
+    agents: { type: Array, default: () => [] },
+    departments: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['clear']);
+const escDark = inject('esc-dark', computed(() => false));
+const processing = ref(false);
+
+function performAction(action, value) {
+    if (!props.selectedIds.length || processing.value) return;
+    processing.value = true;
+    router.post(props.bulkRoute, {
+        ticket_ids: props.selectedIds,
+        action,
+        value,
+    }, {
+        preserveScroll: true,
+        onSuccess: () => emit('clear'),
+        onFinish: () => { processing.value = false; },
+    });
+}
+
+const statusOptions = [
+    { value: 'in_progress', label: 'In Progress' },
+    { value: 'waiting_on_customer', label: 'Waiting on Customer' },
+    { value: 'resolved', label: 'Resolved' },
+    { value: 'closed', label: 'Closed' },
+];
+
+const priorityOptions = [
+    { value: 'low', label: 'Low' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'high', label: 'High' },
+    { value: 'urgent', label: 'Urgent' },
+    { value: 'critical', label: 'Critical' },
+];
+
+const selectClass = computed(() => escDark.value
+    ? 'rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10'
+    : 'rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none'
+);
+</script>
+
+<template>
+    <Transition enter-active-class="transition-all duration-200 ease-out" enter-from-class="translate-y-full opacity-0" enter-to-class="translate-y-0 opacity-100"
+                leave-active-class="transition-all duration-150 ease-in" leave-from-class="translate-y-0 opacity-100" leave-to-class="translate-y-full opacity-0">
+        <div v-if="selectedIds.length > 0"
+             :class="['fixed bottom-0 left-0 right-0 z-50 border-t px-6 py-3',
+                       escDark ? 'border-white/[0.06] bg-neutral-950/95 backdrop-blur-xl' : 'border-gray-200 bg-white/95 backdrop-blur-xl shadow-lg']">
+            <div class="mx-auto flex max-w-7xl items-center gap-4">
+                <span :class="['text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">
+                    {{ selectedIds.length }} ticket{{ selectedIds.length !== 1 ? 's' : '' }} selected
+                </span>
+
+                <select @change="performAction('status', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                    <option value="">Status...</option>
+                    <option v-for="o in statusOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+                </select>
+
+                <select @change="performAction('priority', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                    <option value="">Priority...</option>
+                    <option v-for="o in priorityOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+                </select>
+
+                <select v-if="agents.length" @change="performAction('assign', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                    <option value="">Assign to...</option>
+                    <option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
+                </select>
+
+                <select v-if="departments.length" @change="performAction('department', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                    <option value="">Department...</option>
+                    <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
+                </select>
+
+                <button @click="performAction('delete', null)"
+                        :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                                 escDark ? 'bg-rose-500/15 text-rose-400 ring-1 ring-rose-500/20 hover:bg-rose-500/25' : 'bg-red-50 text-red-600 ring-1 ring-red-200 hover:bg-red-100']"
+                        :disabled="processing">
+                    Delete
+                </button>
+
+                <button @click="emit('clear')"
+                        :class="['ml-auto rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                                 escDark ? 'text-neutral-400 hover:bg-white/[0.04] hover:text-neutral-200' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700']">
+                    Deselect All
+                </button>
+            </div>
+        </div>
+    </Transition>
+</template>