@escalated-dev/escalated 0.6.0 → 0.7.1

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,46 @@
+<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

@@ -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/SnoozeButton.vue

@@ -0,0 +1,247 @@
+<script setup>
+import { inject, computed, ref } from 'vue';
+import { router, useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    ticket: { type: Object, required: true },
+    routePrefix: { type: String, default: 'escalated.admin' },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const showMenu = ref(false);
+const showCustom = ref(false);
+const customDatetime = ref('');
+
+const snoozeForm = useForm({ snoozed_until: '' });
+
+function snoozeUntil(datetime) {
+    snoozeForm.snoozed_until = datetime;
+    snoozeForm.post(route(`${props.routePrefix}.tickets.snooze`, props.ticket.reference), {
+        preserveScroll: true,
+        onSuccess: () => {
+            showMenu.value = false;
+            showCustom.value = false;
+        },
+    });
+}
+
+function snoozePreset(hours) {
+    const dt = new Date(Date.now() + hours * 3600 * 1000);
+    snoozeUntil(dt.toISOString());
+}
+
+function snoozeTomorrow9am() {
+    const dt = new Date();
+    dt.setDate(dt.getDate() + 1);
+    dt.setHours(9, 0, 0, 0);
+    snoozeUntil(dt.toISOString());
+}
+
+function snoozeNextMonday9am() {
+    const dt = new Date();
+    const day = dt.getDay();
+    const daysUntilMonday = day === 0 ? 1 : 8 - day;
+    dt.setDate(dt.getDate() + daysUntilMonday);
+    dt.setHours(9, 0, 0, 0);
+    snoozeUntil(dt.toISOString());
+}
+
+function snoozeCustom() {
+    if (customDatetime.value) {
+        snoozeUntil(new Date(customDatetime.value).toISOString());
+    }
+}
+
+function unsnooze() {
+    router.post(route(`${props.routePrefix}.tickets.unsnooze`, props.ticket.reference), {}, { preserveScroll: true });
+}
+
+function formatSnoozedUntil(dateStr) {
+    if (!dateStr) return '';
+    const dt = new Date(dateStr);
+    return dt.toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+}
+
+// Close menu on outside click
+function onClickOutside(e) {
+    if (!e.target.closest('[data-snooze-menu]')) {
+        showMenu.value = false;
+        showCustom.value = false;
+    }
+}
+
+import { watch } from 'vue';
+watch(showMenu, (val) => {
+    if (val) {
+        document.addEventListener('click', onClickOutside, true);
+    } else {
+        document.removeEventListener('click', onClickOutside, true);
+    }
+});
+</script>
+
+<template>
+    <!-- Snoozed banner -->
+    <div
+        v-if="ticket.is_snoozed || (ticket.snoozed_until && new Date(ticket.snoozed_until) > new Date())"
+        :class="[
+            'flex items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium',
+            escDark
+                ? 'border border-amber-500/20 bg-amber-500/10 text-amber-300'
+                : 'border border-amber-200 bg-amber-50 text-amber-800',
+        ]"
+    >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="currentColor">
+            <path
+                fill-rule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.828a1 1 0 101.415-1.414L11 9.586V6z"
+                clip-rule="evenodd"
+            />
+        </svg>
+        <span>Snoozed until {{ formatSnoozedUntil(ticket.snoozed_until) }}</span>
+        <button
+            :class="[
+                'ml-auto rounded-md px-3 py-1 text-xs font-semibold transition-colors',
+                escDark
+                    ? 'bg-amber-500/20 text-amber-300 hover:bg-amber-500/30'
+                    : 'bg-amber-200 text-amber-900 hover:bg-amber-300',
+            ]"
+            @click="unsnooze"
+        >
+            Unsnooze
+        </button>
+    </div>
+
+    <!-- Snooze button with dropdown -->
+    <div
+        v-if="!ticket.is_snoozed && !(ticket.snoozed_until && new Date(ticket.snoozed_until) > new Date())"
+        class="relative"
+        data-snooze-menu
+    >
+        <button
+            :class="[
+                'inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                escDark
+                    ? 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-surface)]'
+                    : 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
+            ]"
+            @click.stop="showMenu = !showMenu"
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                <path
+                    fill-rule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.828a1 1 0 101.415-1.414L11 9.586V6z"
+                    clip-rule="evenodd"
+                />
+            </svg>
+            Snooze
+        </button>
+        <div
+            v-if="showMenu"
+            :class="[
+                'absolute right-0 top-full z-50 mt-1 w-56 rounded-lg border py-1 shadow-xl',
+                escDark ? 'border-white/[0.08] bg-neutral-800' : 'border-gray-200 bg-white',
+            ]"
+        >
+            <button
+                v-if="!showCustom"
+                :class="[
+                    'flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors',
+                    escDark ? 'text-neutral-300 hover:bg-white/[0.06]' : 'text-gray-700 hover:bg-gray-50',
+                ]"
+                @click="snoozePreset(1)"
+            >
+                1 hour
+            </button>
+            <button
+                v-if="!showCustom"
+                :class="[
+                    'flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors',
+                    escDark ? 'text-neutral-300 hover:bg-white/[0.06]' : 'text-gray-700 hover:bg-gray-50',
+                ]"
+                @click="snoozePreset(4)"
+            >
+                4 hours
+            </button>
+            <button
+                v-if="!showCustom"
+                :class="[
+                    'flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors',
+                    escDark ? 'text-neutral-300 hover:bg-white/[0.06]' : 'text-gray-700 hover:bg-gray-50',
+                ]"
+                @click="snoozeTomorrow9am"
+            >
+                Tomorrow 9am
+            </button>
+            <button
+                v-if="!showCustom"
+                :class="[
+                    'flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors',
+                    escDark ? 'text-neutral-300 hover:bg-white/[0.06]' : 'text-gray-700 hover:bg-gray-50',
+                ]"
+                @click="snoozeNextMonday9am"
+            >
+                Next Monday 9am
+            </button>
+            <div
+                v-if="!showCustom"
+                :class="['my-1 border-t', escDark ? 'border-white/[0.06]' : 'border-gray-100']"
+            ></div>
+            <button
+                v-if="!showCustom"
+                :class="[
+                    'flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors',
+                    escDark ? 'text-neutral-300 hover:bg-white/[0.06]' : 'text-gray-700 hover:bg-gray-50',
+                ]"
+                @click.stop="showCustom = true"
+            >
+                Custom date/time...
+            </button>
+            <div v-if="showCustom" class="px-3 py-2 space-y-2">
+                <input
+                    v-model="customDatetime"
+                    type="datetime-local"
+                    :class="[
+                        'w-full rounded-md border px-2 py-1.5 text-sm',
+                        escDark
+                            ? 'border-white/10 bg-neutral-900 text-neutral-200'
+                            : 'border-gray-300 bg-white text-gray-900',
+                    ]"
+                />
+                <div class="flex gap-2">
+                    <button
+                        :class="[
+                            'flex-1 rounded-md px-2 py-1 text-xs font-medium transition-colors',
+                            escDark
+                                ? 'bg-white/[0.06] text-neutral-300 hover:bg-white/[0.1]'
+                                : 'bg-gray-100 text-gray-600 hover:bg-gray-200',
+                        ]"
+                        @click.stop="showCustom = false"
+                    >
+                        Back
+                    </button>
+                    <button
+                        :class="[
+                            'flex-1 rounded-md px-2 py-1 text-xs font-medium text-white transition-colors',
+                            escDark ? 'bg-cyan-600 hover:bg-cyan-500' : 'bg-indigo-600 hover:bg-indigo-500',
+                        ]"
+                        :disabled="!customDatetime"
+                        @click="snoozeCustom"
+                    >
+                        Snooze
+                    </button>
+                </div>
+            </div>
+        </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

@@ -9,7 +9,10 @@ const props = defineProps({
     color: { type: String, default: 'blue' },
 });
 
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 const displayLabel = computed(() => props.label || props.title || '');
 
 const lightColorMap = {
@@ -27,10 +30,13 @@ const lightColorMap = {
 
 <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">
+    <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>
@@ -39,7 +45,13 @@ const lightColorMap = {
     <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]">
+        <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>

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' },
+    },
+};