@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/SkillTagManager.vue

@@ -1,79 +1,83 @@
-<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>
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    items: { type: Array, default: () => [] },
+    modelValue: { type: Array, default: () => [] },
+    addLabel: { type: String, default: 'Add Item' },
+    emptyLabel: { type: String, default: 'No items selected' },
+    itemLabelKey: { type: String, default: 'name' },
+    itemValueKey: { type: String, default: 'id' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const showDropdown = ref(false);
+
+const selectedItems = computed(() => {
+    return props.items.filter((item) => props.modelValue.includes(item[props.itemValueKey]));
+});
+
+const unselectedItems = computed(() => {
+    return props.items.filter((item) => !props.modelValue.includes(item[props.itemValueKey]));
+});
+
+function addItem(value) {
+    emit('update:modelValue', [...props.modelValue, value]);
+    showDropdown.value = false;
+}
+
+function removeItem(value) {
+    emit(
+        'update:modelValue',
+        props.modelValue.filter((id) => id !== value),
+    );
+}
+</script>
+
+<template>
+    <div class="space-y-2">
+        <!-- Selected skill tags -->
+        <div class="flex flex-wrap gap-1.5">
+            <span
+                v-for="item in selectedItems"
+                :key="item[itemValueKey]"
+                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"
+            >
+                {{ item[itemLabelKey] }}
+                <button
+                    :aria-label="`Remove ${item[itemLabelKey]}`"
+                    class="ml-0.5 text-cyan-400 hover:text-cyan-200"
+                    @click="removeItem(item[itemValueKey])"
+                >
+                    &times;
+                </button>
+            </span>
+            <span v-if="!selectedItems.length" class="text-xs text-neutral-500">{{ emptyLabel }}</span>
+        </div>
+
+        <!-- Add button / dropdown -->
+        <div class="relative">
+            <button
+                v-if="unselectedItems.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"
+            >
+                + {{ addLabel }}
+            </button>
+            <div
+                v-if="showDropdown && unselectedItems.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="item in unselectedItems"
+                    :key="item[itemValueKey]"
+                    class="w-full px-3 py-1.5 text-left text-xs text-neutral-300 transition-colors hover:bg-white/[0.04]"
+                    @click="addItem(item[itemValueKey])"
+                >
+                    {{ item[itemLabelKey] }}
+                </button>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/SlaComplianceChart.vue

@@ -1,53 +1,46 @@
-<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>
+<script setup>
+defineProps({
+    data: { type: Array, default: () => [] },
+});
+</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

@@ -1,35 +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>
-        `,
-    }),
-};
+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,62 +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"
-        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>
+<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>