@escalated-dev/escalated 0.6.0 → 0.7.0

package/src/components/SideConversationList.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { router } from '@inertiajs/vue3';
+import SideConversation from './SideConversation.vue';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+});
+
+const conversations = ref([]);
+const expanded = ref(true);
+const showNew = ref(false);
+const newSubject = ref('');
+const newChannel = ref('internal');
+const newBody = ref('');
+const creating = ref(false);
+
+onMounted(() => {
+    fetchConversations();
+});
+
+async function fetchConversations() {
+    try {
+        const response = await fetch(route('escalated.admin.tickets.side-conversations.index', props.ticketReference), {
+            headers: {
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+        });
+        if (response.ok) {
+            const data = await response.json();
+            conversations.value = data.conversations || [];
+        }
+    } catch {
+        // silently ignore
+    }
+}
+
+function createConversation() {
+    if (!newSubject.value.trim() || !newBody.value.trim() || creating.value) return;
+    creating.value = true;
+
+    router.post(
+        route('escalated.admin.tickets.side-conversations.store', props.ticketReference),
+        {
+            subject: newSubject.value,
+            channel: newChannel.value,
+            body: newBody.value,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                newSubject.value = '';
+                newBody.value = '';
+                newChannel.value = 'internal';
+                showNew.value = false;
+                fetchConversations();
+            },
+            onFinish: () => {
+                creating.value = false;
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
+        <button
+            class="flex w-full items-center justify-between text-sm font-semibold text-neutral-200"
+            @click="expanded = !expanded"
+        >
+            <span>Side Conversations ({{ conversations.length }})</span>
+            <svg
+                :class="['h-4 w-4 text-neutral-500 transition-transform', expanded && 'rotate-180']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+
+        <div v-if="expanded" class="mt-3 space-y-3">
+            <SideConversation
+                v-for="conv in conversations"
+                :key="conv.id"
+                :conversation="conv"
+                :ticket-reference="ticketReference"
+                @updated="fetchConversations"
+            />
+
+            <div v-if="!conversations.length && !showNew" class="text-xs text-neutral-500">No side conversations.</div>
+
+            <!-- New conversation form -->
+            <div v-if="showNew" class="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3 space-y-2">
+                <input
+                    v-model="newSubject"
+                    type="text"
+                    placeholder="Subject..."
+                    class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                />
+                <select
+                    v-model="newChannel"
+                    class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none"
+                >
+                    <option value="internal">Internal</option>
+                    <option value="email">Email</option>
+                </select>
+                <textarea
+                    v-model="newBody"
+                    rows="3"
+                    placeholder="Write the first message..."
+                    class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                ></textarea>
+                <div class="flex gap-2">
+                    <button
+                        :disabled="!newSubject.trim() || !newBody.trim() || creating"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-xs font-medium text-white transition-all hover:from-cyan-400 hover:to-violet-400',
+                            (!newSubject.trim() || !newBody.trim() || creating) && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="createConversation"
+                    >
+                        Create
+                    </button>
+                    <button
+                        class="rounded-lg px-3 py-1.5 text-xs text-neutral-400 hover:text-neutral-300"
+                        @click="showNew = false"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </div>
+
+            <button
+                v-if="!showNew"
+                class="w-full rounded-lg border border-dashed border-white/[0.08] py-2 text-xs text-neutral-400 transition-colors hover:border-white/[0.15] hover:text-neutral-300"
+                @click="showNew = true"
+            >
+                + New Side Conversation
+            </button>
+        </div>
+    </div>
+</template>

package/src/components/SkillTagManager.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    availableSkills: { type: Array, default: () => [] },
+    modelValue: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const showDropdown = ref(false);
+
+const selectedSkills = computed(() => {
+    return props.availableSkills.filter((s) => props.modelValue.includes(s.id));
+});
+
+const unselectedSkills = computed(() => {
+    return props.availableSkills.filter((s) => !props.modelValue.includes(s.id));
+});
+
+function addSkill(skillId) {
+    emit('update:modelValue', [...props.modelValue, skillId]);
+    showDropdown.value = false;
+}
+
+function removeSkill(skillId) {
+    emit(
+        'update:modelValue',
+        props.modelValue.filter((id) => id !== skillId),
+    );
+}
+</script>
+
+<template>
+    <div class="space-y-2">
+        <!-- Selected skill tags -->
+        <div class="flex flex-wrap gap-1.5">
+            <span
+                v-for="skill in selectedSkills"
+                :key="skill.id"
+                class="inline-flex items-center gap-1 rounded-md bg-cyan-500/15 px-2 py-1 text-xs font-medium text-cyan-300 ring-1 ring-cyan-500/20"
+            >
+                {{ skill.name }}
+                <button
+                    aria-label="Remove skill"
+                    class="ml-0.5 text-cyan-400 hover:text-cyan-200"
+                    @click="removeSkill(skill.id)"
+                >
+                    &times;
+                </button>
+            </span>
+            <span v-if="!selectedSkills.length" class="text-xs text-neutral-500">No skills assigned</span>
+        </div>
+
+        <!-- Add button / dropdown -->
+        <div class="relative">
+            <button
+                v-if="unselectedSkills.length"
+                class="rounded-lg border border-dashed border-white/[0.08] px-2 py-1 text-xs text-neutral-400 transition-colors hover:border-white/[0.15] hover:text-neutral-300"
+                @click="showDropdown = !showDropdown"
+            >
+                + Add Skill
+            </button>
+            <div
+                v-if="showDropdown && unselectedSkills.length"
+                class="absolute left-0 top-full z-10 mt-1 max-h-40 w-48 overflow-y-auto rounded-lg border border-white/[0.06] bg-neutral-900 py-1 shadow-xl"
+            >
+                <button
+                    v-for="skill in unselectedSkills"
+                    :key="skill.id"
+                    class="w-full px-3 py-1.5 text-left text-xs text-neutral-300 transition-colors hover:bg-white/[0.04]"
+                    @click="addSkill(skill.id)"
+                >
+                    {{ skill.name }}
+                </button>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/SlaComplianceChart.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    data: { type: Array, default: () => [] },
+});
+
+const maxTotal = computed(() => {
+    if (!props.data.length) return 1;
+    return Math.max(...props.data.map((d) => d.total), 1);
+});
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+        <h3 class="mb-4 text-sm font-semibold text-neutral-200">SLA Compliance by Policy</h3>
+        <div v-if="data.length" class="space-y-4">
+            <div v-for="item in data" :key="item.policy_name">
+                <div class="mb-1.5 flex items-center justify-between">
+                    <span class="text-sm font-medium text-neutral-300">{{ item.policy_name }}</span>
+                    <span class="text-xs text-neutral-500">{{ item.total }} tickets</span>
+                </div>
+                <div class="flex h-6 overflow-hidden rounded-full bg-white/[0.04]">
+                    <div
+                        class="h-full rounded-l-full bg-emerald-500/80 transition-all"
+                        :style="{ width: item.total > 0 ? `${(item.met / item.total) * 100}%` : '0%' }"
+                        :title="`Met: ${item.met}`"
+                    ></div>
+                    <div
+                        class="h-full bg-red-500/80 transition-all"
+                        :class="{ 'rounded-r-full': item.met === 0, 'rounded-r-full': true }"
+                        :style="{ width: item.total > 0 ? `${(item.breached / item.total) * 100}%` : '0%' }"
+                        :title="`Breached: ${item.breached}`"
+                    ></div>
+                </div>
+                <div class="mt-1 flex items-center gap-4 text-xs">
+                    <span class="flex items-center gap-1 text-emerald-400">
+                        <span class="inline-block h-2 w-2 rounded-full bg-emerald-500"></span>
+                        Met: {{ item.met }}
+                    </span>
+                    <span class="flex items-center gap-1 text-red-400">
+                        <span class="inline-block h-2 w-2 rounded-full bg-red-500"></span>
+                        Breached: {{ item.breached }}
+                    </span>
+                    <span v-if="item.total > 0" class="text-neutral-500">
+                        {{ Math.round((item.met / item.total) * 100) }}% compliance
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div v-else class="py-6 text-center text-sm text-neutral-500">No SLA data available</div>
+    </div>
+</template>

package/src/components/SlaTimer.stories.js

@@ -0,0 +1,35 @@
+import SlaTimer from './SlaTimer.vue';
+
+export default {
+    title: 'Components/SlaTimer',
+    component: SlaTimer,
+};
+
+const inOneHour = new Date(Date.now() + 3600000).toISOString();
+const inFiveHours = new Date(Date.now() + 18000000).toISOString();
+const inThreeDays = new Date(Date.now() + 259200000).toISOString();
+const overdue = new Date(Date.now() - 3600000).toISOString();
+
+export const Healthy = { args: { dueAt: inThreeDays, label: 'First Response' } };
+export const Warning = { args: { dueAt: inOneHour, label: 'Resolution Due' } };
+export const Comfortable = { args: { dueAt: inFiveHours, label: 'Next Reply' } };
+export const Overdue = { args: { dueAt: overdue, label: 'Resolution Due' } };
+export const Breached = { args: { dueAt: overdue, breached: true, label: 'First Response' } };
+
+export const AllStates = {
+    render: () => ({
+        components: { SlaTimer },
+        setup() {
+            return { inThreeDays, inFiveHours, inOneHour, overdue };
+        },
+        template: `
+            <div class="flex flex-wrap gap-3">
+                <SlaTimer :dueAt="inThreeDays" label="Healthy" />
+                <SlaTimer :dueAt="inFiveHours" label="Comfortable" />
+                <SlaTimer :dueAt="inOneHour" label="Warning" />
+                <SlaTimer :dueAt="overdue" label="Overdue" />
+                <SlaTimer :dueAt="overdue" :breached="true" label="Breached" />
+            </div>
+        `,
+    }),
+};

package/src/components/SlaTimer.vue

@@ -7,7 +7,10 @@ const props = defineProps({
     label: { type: String, default: 'Due' },
 });
 
-const dark = inject('esc-dark', computed(() => false));
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 
 const timeRemaining = computed(() => {
     if (!props.dueAt) return null;
@@ -32,14 +35,24 @@ const statusClass = computed(() => {
     const due = new Date(props.dueAt);
     const hoursLeft = (due - new Date()) / 3600000;
     if (hoursLeft < 2) {
-        return dark ? 'border-amber-500/20 bg-amber-500/10 text-amber-400' : 'border-yellow-300 bg-yellow-50 text-yellow-700';
+        return dark
+            ? 'border-amber-500/20 bg-amber-500/10 text-amber-400'
+            : 'border-yellow-300 bg-yellow-50 text-yellow-700';
     }
-    return dark ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400' : 'border-green-300 bg-green-50 text-green-700';
+    return dark
+        ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400'
+        : 'border-green-300 bg-green-50 text-green-700';
 });
 </script>
 
 <template>
-    <div v-if="dueAt" :class="['rounded-lg border px-3 py-2 text-sm', statusClass]">
+    <div
+        v-if="dueAt"
+        role="timer"
+        aria-live="polite"
+        aria-label="SLA timer"
+        :class="['rounded-lg border px-3 py-2 text-sm', statusClass]"
+    >
         <div class="font-medium">{{ label }}</div>
         <div class="text-xs">
             <span v-if="breached">SLA Breached</span>

package/src/components/StatsCard.stories.js

@@ -0,0 +1,24 @@
+import StatsCard from './StatsCard.vue';
+
+export default {
+    title: 'Components/StatsCard',
+    component: StatsCard,
+};
+
+export const Basic = { args: { label: 'Open Tickets', value: 142 } };
+export const WithTrend = { args: { label: 'Resolved Today', value: 38, trend: '+12% this week' } };
+export const WithColor = { args: { label: 'SLA Breaches', value: 3, trend: '-25% vs last week', color: 'red' } };
+
+export const DashboardGrid = {
+    render: () => ({
+        components: { StatsCard },
+        template: `
+            <div class="grid grid-cols-2 gap-4" style="max-width: 600px;">
+                <StatsCard label="Open Tickets" :value="142" trend="+8% this week" color="blue" />
+                <StatsCard label="Resolved Today" :value="38" trend="+12% vs yesterday" color="green" />
+                <StatsCard label="Avg Response" value="2h 14m" trend="-18% improvement" color="cyan" />
+                <StatsCard label="SLA Breaches" :value="3" trend="-25% vs last week" color="red" />
+            </div>
+        `,
+    }),
+};

package/src/components/StatsCard.vue

@@ -1,46 +1,58 @@
-<script setup>
-import { inject, computed } from 'vue';
-
-const props = defineProps({
-    label: { type: String, default: '' },
-    title: { type: String, default: '' },
-    value: { type: [Number, String], required: true },
-    trend: { type: String, default: null },
-    color: { type: String, default: 'blue' },
-});
-
-const escDark = inject('esc-dark', computed(() => false));
-const displayLabel = computed(() => props.label || props.title || '');
-
-const lightColorMap = {
-    blue: 'bg-blue-50 text-blue-700',
-    indigo: 'bg-indigo-50 text-indigo-700',
-    green: 'bg-green-50 text-green-700',
-    red: 'bg-red-50 text-red-700',
-    yellow: 'bg-yellow-50 text-yellow-700',
-    gray: 'bg-gray-50 text-gray-700',
-    cyan: 'bg-cyan-50 text-cyan-700',
-    violet: 'bg-violet-50 text-violet-700',
-    amber: 'bg-amber-50 text-amber-700',
-};
-</script>
-
-<template>
-    <!-- Dark mode -->
-    <div v-if="escDark" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-        <div class="text-[13px] font-medium text-neutral-500">{{ displayLabel }}</div>
-        <div class="mt-2 text-2xl font-bold tracking-tight text-white">{{ value }}</div>
-        <div v-if="trend" class="mt-2 inline-flex items-center rounded-full bg-white/[0.06] px-2 py-0.5 text-xs font-medium text-neutral-400">
-            {{ trend }}
-        </div>
-    </div>
-
-    <!-- Light mode -->
-    <div v-else class="rounded-lg border border-gray-200 bg-white p-4">
-        <div class="text-sm text-gray-500">{{ displayLabel }}</div>
-        <div class="mt-1 text-2xl font-bold text-gray-900">{{ value }}</div>
-        <div v-if="trend" :class="['mt-1 inline-block rounded-full px-2 py-0.5 text-xs font-medium', lightColorMap[color] || lightColorMap.blue]">
-            {{ trend }}
-        </div>
-    </div>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+
+const props = defineProps({
+    label: { type: String, default: '' },
+    title: { type: String, default: '' },
+    value: { type: [Number, String], required: true },
+    trend: { type: String, default: null },
+    color: { type: String, default: 'blue' },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const displayLabel = computed(() => props.label || props.title || '');
+
+const lightColorMap = {
+    blue: 'bg-blue-50 text-blue-700',
+    indigo: 'bg-indigo-50 text-indigo-700',
+    green: 'bg-green-50 text-green-700',
+    red: 'bg-red-50 text-red-700',
+    yellow: 'bg-yellow-50 text-yellow-700',
+    gray: 'bg-gray-50 text-gray-700',
+    cyan: 'bg-cyan-50 text-cyan-700',
+    violet: 'bg-violet-50 text-violet-700',
+    amber: 'bg-amber-50 text-amber-700',
+};
+</script>
+
+<template>
+    <!-- Dark mode -->
+    <div v-if="escDark" class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
+        <div class="text-[13px] font-medium text-[var(--esc-panel-text-muted)]">{{ displayLabel }}</div>
+        <div class="mt-2 text-2xl font-bold tracking-tight text-[var(--esc-panel-text)]">{{ value }}</div>
+        <div
+            v-if="trend"
+            class="mt-2 inline-flex items-center rounded-full bg-[var(--esc-panel-hover)] px-2 py-0.5 text-xs font-medium text-[var(--esc-panel-text-tertiary)]"
+        >
+            {{ trend }}
+        </div>
+    </div>
+
+    <!-- Light mode -->
+    <div v-else class="rounded-lg border border-gray-200 bg-white p-4">
+        <div class="text-sm text-gray-500">{{ displayLabel }}</div>
+        <div class="mt-1 text-2xl font-bold text-gray-900">{{ value }}</div>
+        <div
+            v-if="trend"
+            :class="[
+                'mt-1 inline-block rounded-full px-2 py-0.5 text-xs font-medium',
+                lightColorMap[color] || lightColorMap.blue,
+            ]"
+        >
+            {{ trend }}
+        </div>
+    </div>
+</template>

package/src/components/StatusBadge.stories.js

@@ -0,0 +1,53 @@
+import StatusBadge from './StatusBadge.vue';
+
+export default {
+    title: 'Components/StatusBadge',
+    component: StatusBadge,
+    argTypes: {
+        status: {
+            control: 'select',
+            options: [
+                'open',
+                'in_progress',
+                'waiting_on_customer',
+                'waiting_on_agent',
+                'escalated',
+                'resolved',
+                'closed',
+                'reopened',
+            ],
+        },
+    },
+};
+
+export const Open = { args: { status: 'open' } };
+export const InProgress = { args: { status: 'in_progress' } };
+export const WaitingOnCustomer = { args: { status: 'waiting_on_customer' } };
+export const Escalated = { args: { status: 'escalated' } };
+export const Resolved = { args: { status: 'resolved' } };
+export const Closed = { args: { status: 'closed' } };
+
+export const AllStatuses = {
+    render: () => ({
+        components: { StatusBadge },
+        template: `
+            <div class="flex flex-wrap items-center gap-2">
+                <StatusBadge status="open" />
+                <StatusBadge status="in_progress" />
+                <StatusBadge status="waiting_on_customer" />
+                <StatusBadge status="waiting_on_agent" />
+                <StatusBadge status="escalated" />
+                <StatusBadge status="resolved" />
+                <StatusBadge status="closed" />
+                <StatusBadge status="reopened" />
+            </div>
+        `,
+    }),
+};
+
+export const CustomStatus = {
+    args: {
+        status: 'custom_pending_review',
+        customStatus: { label: 'Pending Review', color: '#8b5cf6' },
+    },
+};

package/src/components/StatusBadge.vue

@@ -3,15 +3,25 @@ import { inject, computed } from 'vue';
 
 const props = defineProps({
     status: { type: String, required: true },
+    customStatus: { type: Object, default: null },
 });
 
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 
 const darkConfig = {
     open: { label: 'Open', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
     in_progress: { label: 'In Progress', color: 'bg-violet-500/10 text-violet-400 ring-1 ring-violet-500/20' },
-    waiting_on_customer: { label: 'Waiting on Customer', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
-    waiting_on_agent: { label: 'Waiting on Agent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
+    waiting_on_customer: {
+        label: 'Waiting on Customer',
+        color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20',
+    },
+    waiting_on_agent: {
+        label: 'Waiting on Agent',
+        color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20',
+    },
     escalated: { label: 'Escalated', color: 'bg-rose-500/10 text-rose-400 ring-1 ring-rose-500/20' },
     resolved: { label: 'Resolved', color: 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20' },
     closed: { label: 'Closed', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
@@ -33,6 +43,15 @@ const fallback = { label: props.status, color: 'bg-gray-100 text-gray-800' };
 const darkFallback = { label: props.status, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' };
 
 const config = computed(() => {
+    // When a customStatus object is provided, use its label and color directly
+    if (props.customStatus) {
+        const hex = props.customStatus.color || '#6b7280';
+        return {
+            label: props.customStatus.label || props.status,
+            color: '',
+            customColor: hex,
+        };
+    }
     const map = escDark.value ? darkConfig : lightConfig;
     const fb = escDark.value ? darkFallback : fallback;
     return map[props.status] || fb;
@@ -40,7 +59,20 @@ const config = computed(() => {
 </script>
 
 <template>
-    <span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]">
+    <span
+        role="status"
+        :aria-label="'Status: ' + config.label"
+        :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]"
+        :style="
+            config.customColor
+                ? {
+                      backgroundColor: config.customColor + '1a',
+                      color: config.customColor,
+                      boxShadow: 'inset 0 0 0 1px ' + config.customColor + '33',
+                  }
+                : {}
+        "
+    >
         {{ config.label }}
     </span>
 </template>