@escalated-dev/escalated 0.5.0 → 0.7.0

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

@@ -1,49 +1,62 @@
-<script setup>
-import { computed, inject } from 'vue';
-
-const props = defineProps({
-    dueAt: { type: String, default: null },
-    breached: { type: Boolean, default: false },
-    label: { type: String, default: 'Due' },
-});
-
-const dark = inject('esc-dark', computed(() => false));
-
-const timeRemaining = computed(() => {
-    if (!props.dueAt) return null;
-    const now = new Date();
-    const due = new Date(props.dueAt);
-    const diff = due - now;
-    if (diff <= 0) return { text: 'Overdue', overdue: true };
-
-    const hours = Math.floor(diff / 3600000);
-    const minutes = Math.floor((diff % 3600000) / 60000);
-    if (hours > 24) {
-        const days = Math.floor(hours / 24);
-        return { text: `${days}d ${hours % 24}h`, overdue: false };
-    }
-    return { text: `${hours}h ${minutes}m`, overdue: false };
-});
-
-const statusClass = computed(() => {
-    if (props.breached || timeRemaining.value?.overdue) {
-        return dark ? 'border-rose-500/20 bg-rose-500/10 text-rose-400' : 'border-red-300 bg-red-50 text-red-700';
-    }
-    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-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 class="font-medium">{{ label }}</div>
-        <div class="text-xs">
-            <span v-if="breached">SLA Breached</span>
-            <span v-else>{{ timeRemaining?.text }}</span>
-        </div>
-    </div>
-</template>
+<script setup>
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+    dueAt: { type: String, default: null },
+    breached: { type: Boolean, default: false },
+    label: { type: String, default: 'Due' },
+});
+
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const timeRemaining = computed(() => {
+    if (!props.dueAt) return null;
+    const now = new Date();
+    const due = new Date(props.dueAt);
+    const diff = due - now;
+    if (diff <= 0) return { text: 'Overdue', overdue: true };
+
+    const hours = Math.floor(diff / 3600000);
+    const minutes = Math.floor((diff % 3600000) / 60000);
+    if (hours > 24) {
+        const days = Math.floor(hours / 24);
+        return { text: `${days}d ${hours % 24}h`, overdue: false };
+    }
+    return { text: `${hours}h ${minutes}m`, overdue: false };
+});
+
+const statusClass = computed(() => {
+    if (props.breached || timeRemaining.value?.overdue) {
+        return dark ? 'border-rose-500/20 bg-rose-500/10 text-rose-400' : 'border-red-300 bg-red-50 text-red-700';
+    }
+    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-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"
+        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>
+            <span v-else>{{ timeRemaining?.text }}</span>
+        </div>
+    </div>
+</template>

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

@@ -1,46 +1,78 @@
-<script setup>
-import { inject, computed } from 'vue';
-
-const props = defineProps({
-    status: { type: String, required: true },
-});
-
-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' },
-    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' },
-    reopened: { label: 'Reopened', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
-};
-
-const lightConfig = {
-    open: { label: 'Open', color: 'bg-blue-100 text-blue-800' },
-    in_progress: { label: 'In Progress', color: 'bg-purple-100 text-purple-800' },
-    waiting_on_customer: { label: 'Waiting on Customer', color: 'bg-yellow-100 text-yellow-800' },
-    waiting_on_agent: { label: 'Waiting on Agent', color: 'bg-orange-100 text-orange-800' },
-    escalated: { label: 'Escalated', color: 'bg-red-100 text-red-800' },
-    resolved: { label: 'Resolved', color: 'bg-green-100 text-green-800' },
-    closed: { label: 'Closed', color: 'bg-gray-100 text-gray-800' },
-    reopened: { label: 'Reopened', color: 'bg-blue-100 text-blue-800' },
-};
-
-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(() => {
-    const map = escDark.value ? darkConfig : lightConfig;
-    const fb = escDark.value ? darkFallback : fallback;
-    return map[props.status] || fb;
-});
-</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({
+    status: { type: String, required: true },
+    customStatus: { type: Object, default: null },
+});
+
+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',
+    },
+    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' },
+    reopened: { label: 'Reopened', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
+};
+
+const lightConfig = {
+    open: { label: 'Open', color: 'bg-blue-100 text-blue-800' },
+    in_progress: { label: 'In Progress', color: 'bg-purple-100 text-purple-800' },
+    waiting_on_customer: { label: 'Waiting on Customer', color: 'bg-yellow-100 text-yellow-800' },
+    waiting_on_agent: { label: 'Waiting on Agent', color: 'bg-orange-100 text-orange-800' },
+    escalated: { label: 'Escalated', color: 'bg-red-100 text-red-800' },
+    resolved: { label: 'Resolved', color: 'bg-green-100 text-green-800' },
+    closed: { label: 'Closed', color: 'bg-gray-100 text-gray-800' },
+    reopened: { label: 'Reopened', color: 'bg-blue-100 text-blue-800' },
+};
+
+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;
+});
+</script>
+
+<template>
+    <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>