@escalated-dev/escalated 0.5.0 → 0.6.0

package/README.md

@@ -125,6 +125,16 @@ app.use(EscalatedPlugin, { layout: AppLayout })
 
 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.
 
+## 📸 Screenshots
+
+<p align="center">
+  <img src="docs/assets/escalated_admin_1.png" alt="Escalated Admin Screenshot 1" width="800" />
+</p>
+
+<p align="center">
+  <img src="docs/assets/escalated_admin_2.png" alt="Escalated Admin Screenshot 2" width="800" />
+</p>
+
 ### Pages
 
 **Customer Portal** — Self-service ticket management

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",
@@ -21,24 +21,26 @@
   "exports": {
     "./components/*": "./src/components/*",
     "./pages/*": "./src/pages/*",
+    "./locales": "./src/locales/index.js",
+    "./locales/*": "./src/locales/*",
     ".": "./src/index.js"
   },
   "files": [
     "src"
   ],
   "peerDependencies": {
-    "vue": "^3.3.0",
-    "@inertiajs/vue3": "^1.0.0 || ^2.0.0"
+    "@inertiajs/vue3": "^1.0.0 || ^2.0.0",
+    "vue": "^3.3.0"
   },
   "scripts": {
     "test": "vitest run"
   },
   "devDependencies": {
-    "vue": "^3.5.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"
+    "vitest": "^2.0.0",
+    "vue": "^3.5.0"
   }
 }

package/src/components/ActivityTimeline.vue

@@ -1,66 +1,66 @@
-<script setup>
-import { computed, inject } from 'vue';
-
-defineProps({
-    activities: { type: Array, required: true },
-});
-
-const dark = inject('esc-dark', computed(() => false));
-
-const typeLabels = {
-    status_changed: 'changed status',
-    assigned: 'assigned ticket',
-    unassigned: 'unassigned ticket',
-    priority_changed: 'changed priority',
-    tag_added: 'added tag',
-    tag_removed: 'removed tag',
-    escalated: 'escalated ticket',
-    sla_breached: 'SLA breached',
-    replied: 'replied',
-    note_added: 'added note',
-    department_changed: 'changed department',
-    reopened: 'reopened ticket',
-    resolved: 'resolved ticket',
-    closed: 'closed ticket',
-};
-
-function formatDate(date) {
-    return new Date(date).toLocaleString();
-}
-
-function describeActivity(activity) {
-    const label = typeLabels[activity.type] || activity.type;
-    const who = activity.causer?.name || 'System';
-    const props = activity.properties || {};
-
-    if (activity.type === 'status_changed' && props.to) {
-        return `${who} ${label} to ${props.to}`;
-    }
-    if (activity.type === 'assigned' && props.agent_name) {
-        return `${who} assigned to ${props.agent_name}`;
-    }
-    if (activity.type === 'priority_changed' && props.to) {
-        return `${who} ${label} to ${props.to}`;
-    }
-    if ((activity.type === 'tag_added' || activity.type === 'tag_removed') && props.tag) {
-        return `${who} ${label} "${props.tag}"`;
-    }
-    if (activity.type === 'department_changed' && props.department) {
-        return `${who} ${label} to ${props.department}`;
-    }
-    return `${who} ${label}`;
-}
-</script>
-
-<template>
-    <div class="space-y-3">
-        <div v-for="activity in activities" :key="activity.id" class="flex gap-3 text-sm">
-            <div :class="['mt-1 h-2 w-2 flex-shrink-0 rounded-full', dark ? 'bg-neutral-600' : 'bg-gray-400']"></div>
-            <div class="flex-1">
-                <p :class="dark ? 'text-neutral-300' : 'text-gray-700'">{{ describeActivity(activity) }}</p>
-                <p :class="['text-xs', dark ? 'text-neutral-600' : 'text-gray-400']">{{ formatDate(activity.created_at) }}</p>
-            </div>
-        </div>
-        <div v-if="!activities?.length" :class="['py-4 text-center text-sm', dark ? 'text-neutral-600' : 'text-gray-500']">No activity yet.</div>
-    </div>
-</template>
+<script setup>
+import { computed, inject } from 'vue';
+
+defineProps({
+    activities: { type: Array, required: true },
+});
+
+const dark = inject('esc-dark', computed(() => false));
+
+const typeLabels = {
+    status_changed: 'changed status',
+    assigned: 'assigned ticket',
+    unassigned: 'unassigned ticket',
+    priority_changed: 'changed priority',
+    tag_added: 'added tag',
+    tag_removed: 'removed tag',
+    escalated: 'escalated ticket',
+    sla_breached: 'SLA breached',
+    replied: 'replied',
+    note_added: 'added note',
+    department_changed: 'changed department',
+    reopened: 'reopened ticket',
+    resolved: 'resolved ticket',
+    closed: 'closed ticket',
+};
+
+function formatDate(date) {
+    return new Date(date).toLocaleString();
+}
+
+function describeActivity(activity) {
+    const label = typeLabels[activity.type] || activity.type;
+    const who = activity.causer?.name || 'System';
+    const props = activity.properties || {};
+
+    if (activity.type === 'status_changed' && props.to) {
+        return `${who} ${label} to ${props.to}`;
+    }
+    if (activity.type === 'assigned' && props.agent_name) {
+        return `${who} assigned to ${props.agent_name}`;
+    }
+    if (activity.type === 'priority_changed' && props.to) {
+        return `${who} ${label} to ${props.to}`;
+    }
+    if ((activity.type === 'tag_added' || activity.type === 'tag_removed') && props.tag) {
+        return `${who} ${label} "${props.tag}"`;
+    }
+    if (activity.type === 'department_changed' && props.department) {
+        return `${who} ${label} to ${props.department}`;
+    }
+    return `${who} ${label}`;
+}
+</script>
+
+<template>
+    <div class="space-y-3">
+        <div v-for="activity in activities" :key="activity.id" class="flex gap-3 text-sm">
+            <div :class="['mt-1 h-2 w-2 flex-shrink-0 rounded-full', dark ? 'bg-neutral-600' : 'bg-gray-400']"></div>
+            <div class="flex-1">
+                <p :class="dark ? 'text-neutral-300' : 'text-gray-700'">{{ describeActivity(activity) }}</p>
+                <p :class="['text-xs', dark ? 'text-neutral-600' : 'text-gray-400']">{{ formatDate(activity.created_at) }}</p>
+            </div>
+        </div>
+        <div v-if="!activities?.length" :class="['py-4 text-center text-sm', dark ? 'text-neutral-600' : 'text-gray-500']">No activity yet.</div>
+    </div>
+</template>

package/src/components/AssigneeSelect.vue

@@ -1,23 +1,23 @@
-<script setup>
-import { computed, inject } from 'vue';
-
-defineProps({
-    agents: { type: Array, required: true },
-    modelValue: { type: [Number, String], default: null },
-});
-
-const emit = defineEmits(['update:modelValue']);
-const dark = inject('esc-dark', computed(() => false));
-</script>
-
-<template>
-    <div>
-        <label :class="['mb-1 block text-xs font-medium', dark ? 'text-neutral-500' : 'text-gray-600']">Assigned To</label>
-        <select :value="modelValue" @change="emit('update:modelValue', $event.target.value || null)"
-                :class="['w-full rounded-md border px-2 py-1.5 text-sm focus:outline-none',
-                         dark ? 'border-white/10 bg-neutral-950 text-neutral-200 focus:border-white/20 focus:ring-1 focus:ring-white/10' : 'border-gray-300 focus:border-blue-500']">
-            <option value="">Unassigned</option>
-            <option v-for="agent in agents" :key="agent.id" :value="agent.id">{{ agent.name }}</option>
-        </select>
-    </div>
-</template>
+<script setup>
+import { computed, inject } from 'vue';
+
+defineProps({
+    agents: { type: Array, required: true },
+    modelValue: { type: [Number, String], default: null },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const dark = inject('esc-dark', computed(() => false));
+</script>
+
+<template>
+    <div>
+        <label :class="['mb-1 block text-xs font-medium', dark ? 'text-neutral-500' : 'text-gray-600']">Assigned To</label>
+        <select :value="modelValue" @change="emit('update:modelValue', $event.target.value || null)"
+                :class="['w-full rounded-md border px-2 py-1.5 text-sm focus:outline-none',
+                         dark ? 'border-white/10 bg-neutral-950 text-neutral-200 focus:border-white/20 focus:ring-1 focus:ring-white/10' : 'border-gray-300 focus:border-blue-500']">
+            <option value="">Unassigned</option>
+            <option v-for="agent in agents" :key="agent.id" :value="agent.id">{{ agent.name }}</option>
+        </select>
+    </div>
+</template>

package/src/components/FileDropzone.vue

@@ -1,41 +1,41 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-
-const emit = defineEmits(['files']);
-const dark = inject('esc-dark', computed(() => false));
-
-const dragging = ref(false);
-const fileInput = ref(null);
-
-function onDrop(e) {
-    dragging.value = false;
-    if (e.dataTransfer?.files?.length) {
-        emit('files', Array.from(e.dataTransfer.files));
-    }
-}
-
-function onFileSelect(e) {
-    if (e.target.files?.length) {
-        emit('files', Array.from(e.target.files));
-        e.target.value = '';
-    }
-}
-
-function browse() {
-    fileInput.value?.click();
-}
-</script>
-
-<template>
-    <div @dragover.prevent="dragging = true" @dragleave="dragging = false" @drop.prevent="onDrop"
-         :class="['cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
-                  dark
-                      ? (dragging ? 'border-white/20 bg-white/[0.04]' : 'border-white/[0.08] hover:border-white/[0.12]')
-                      : (dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400')]"
-         @click="browse">
-        <p :class="dark ? 'text-neutral-500' : 'text-gray-500'">
-            Drop files here or <span :class="['font-medium', dark ? 'text-white' : 'text-blue-600']">browse</span>
-        </p>
-        <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelect" />
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const emit = defineEmits(['files']);
+const dark = inject('esc-dark', computed(() => false));
+
+const dragging = ref(false);
+const fileInput = ref(null);
+
+function onDrop(e) {
+    dragging.value = false;
+    if (e.dataTransfer?.files?.length) {
+        emit('files', Array.from(e.dataTransfer.files));
+    }
+}
+
+function onFileSelect(e) {
+    if (e.target.files?.length) {
+        emit('files', Array.from(e.target.files));
+        e.target.value = '';
+    }
+}
+
+function browse() {
+    fileInput.value?.click();
+}
+</script>
+
+<template>
+    <div @dragover.prevent="dragging = true" @dragleave="dragging = false" @drop.prevent="onDrop"
+         :class="['cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
+                  dark
+                      ? (dragging ? 'border-white/20 bg-white/[0.04]' : 'border-white/[0.08] hover:border-white/[0.12]')
+                      : (dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400')]"
+         @click="browse">
+        <p :class="dark ? 'text-neutral-500' : 'text-gray-500'">
+            Drop files here or <span :class="['font-medium', dark ? 'text-white' : 'text-blue-600']">browse</span>
+        </p>
+        <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelect" />
+    </div>
+</template>

package/src/components/PinnedNotes.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref, computed, inject } from 'vue';
 import { router } from '@inertiajs/vue3';
+import { sanitizeHtml } from '../utils/sanitizeHtml';
+import { useI18n } from '../composables/useI18n';
 
 const props = defineProps({
     notes: { type: Array, default: () => [] },
@@ -9,6 +11,7 @@ const props = defineProps({
 });
 
 const escDark = inject('esc-dark', computed(() => false));
+const { t } = useI18n();
 const processingId = ref(null);
 
 function unpinNote(note) {
@@ -49,7 +52,7 @@ function formatDate(dateStr) {
             </svg>
             <span :class="['text-xs font-semibold uppercase tracking-wider',
                            escDark ? 'text-amber-400' : 'text-amber-700']">
-                Pinned Notes
+                {{ t('pinned_notes.title') }}
             </span>
         </div>
 
@@ -61,7 +64,7 @@ function formatDate(dateStr) {
                               ? 'border-amber-500/10 bg-amber-500/[0.04]'
                               : 'border-amber-200 bg-white']">
                 <!-- Note body -->
-                <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-neutral-200' : 'text-gray-800']" v-html="note.body"></div>
+                <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-neutral-200' : 'text-gray-800']" v-html="sanitizeHtml(note.body)"></div>
 
                 <!-- Meta row -->
                 <div class="mt-2 flex items-center justify-between">
@@ -78,7 +81,7 @@ function formatDate(dateStr) {
                                          ? 'text-amber-400 hover:bg-amber-500/10 hover:text-amber-300'
                                          : 'text-amber-600 hover:bg-amber-100 hover:text-amber-700',
                                      processingId === note.id && 'opacity-50 cursor-not-allowed']">
-                        Unpin
+                        {{ t('pinned_notes.unpin') }}
                     </button>
                 </div>
             </div>

package/src/components/PriorityBadge.vue

@@ -1,39 +1,39 @@
-<script setup>
-import { inject, computed } from 'vue';
-
-const props = defineProps({
-    priority: { type: String, required: true },
-});
-
-const escDark = inject('esc-dark', computed(() => false));
-
-const darkConfig = {
-    low: { label: 'Low', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
-    medium: { label: 'Medium', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
-    high: { label: 'High', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
-    urgent: { label: 'Urgent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
-    critical: { label: 'Critical', color: 'bg-rose-500/10 text-rose-300 ring-1 ring-rose-500/20' },
-};
-
-const lightConfig = {
-    low: { label: 'Low', color: 'bg-gray-100 text-gray-800' },
-    medium: { label: 'Medium', color: 'bg-blue-100 text-blue-800' },
-    high: { label: 'High', color: 'bg-yellow-100 text-yellow-800' },
-    urgent: { label: 'Urgent', color: 'bg-orange-100 text-orange-800' },
-    critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
-};
-
-const config = computed(() => {
-    const map = escDark.value ? darkConfig : lightConfig;
-    const fallback = escDark.value
-        ? { label: props.priority, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' }
-        : { label: props.priority, color: 'bg-gray-100 text-gray-800' };
-    return map[props.priority] || fallback;
-});
-</script>
-
-<template>
-    <span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]">
-        {{ config.label }}
-    </span>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+
+const props = defineProps({
+    priority: { type: String, required: true },
+});
+
+const escDark = inject('esc-dark', computed(() => false));
+
+const darkConfig = {
+    low: { label: 'Low', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
+    medium: { label: 'Medium', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
+    high: { label: 'High', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
+    urgent: { label: 'Urgent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
+    critical: { label: 'Critical', color: 'bg-rose-500/10 text-rose-300 ring-1 ring-rose-500/20' },
+};
+
+const lightConfig = {
+    low: { label: 'Low', color: 'bg-gray-100 text-gray-800' },
+    medium: { label: 'Medium', color: 'bg-blue-100 text-blue-800' },
+    high: { label: 'High', color: 'bg-yellow-100 text-yellow-800' },
+    urgent: { label: 'Urgent', color: 'bg-orange-100 text-orange-800' },
+    critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
+};
+
+const config = computed(() => {
+    const map = escDark.value ? darkConfig : lightConfig;
+    const fallback = escDark.value
+        ? { label: props.priority, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' }
+        : { label: props.priority, color: 'bg-gray-100 text-gray-800' };
+    return map[props.priority] || fallback;
+});
+</script>
+
+<template>
+    <span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]">
+        {{ config.label }}
+    </span>
+</template>