@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/components/TicketMergeDialog.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+});
+
+const emit = defineEmits(['close']);
+
+const searchTerm = ref('');
+const results = ref([]);
+const loading = ref(false);
+const selectedTicket = ref(null);
+const merging = ref(false);
+let debounceTimer = null;
+
+watch(searchTerm, (val) => {
+    window.clearTimeout(debounceTimer);
+    selectedTicket.value = null;
+    if (!val || val.length < 2) {
+        results.value = [];
+        return;
+    }
+    debounceTimer = window.setTimeout(() => searchTickets(val), 300);
+});
+
+async function searchTickets(term) {
+    loading.value = true;
+    try {
+        const response = await fetch(route('escalated.admin.tickets.merge-search', { q: term }), {
+            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();
+            results.value = (data.tickets || []).filter((t) => t.reference !== props.ticketReference);
+        }
+    } catch {
+        // silently ignore
+    } finally {
+        loading.value = false;
+    }
+}
+
+function selectTicket(ticket) {
+    selectedTicket.value = ticket;
+}
+
+function confirmMerge() {
+    if (!selectedTicket.value || merging.value) return;
+    merging.value = true;
+
+    router.post(
+        route('escalated.admin.tickets.merge', props.ticketReference),
+        {
+            target_reference: selectedTicket.value.reference,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                emit('close');
+            },
+            onFinish: () => {
+                merging.value = false;
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <Teleport to="body">
+        <div
+            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+            @click.self="emit('close')"
+        >
+            <div class="w-full max-w-lg rounded-xl border border-white/[0.06] bg-neutral-900 p-6 shadow-2xl">
+                <div class="mb-4 flex items-center justify-between">
+                    <h3 class="text-lg font-semibold text-neutral-200">Merge Ticket</h3>
+                    <button class="text-neutral-500 hover:text-neutral-300" @click="emit('close')">
+                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                <p class="mb-4 text-sm text-neutral-400">
+                    Search for a ticket to merge
+                    <span class="font-mono text-neutral-300">{{ ticketReference }}</span> into. All replies will be
+                    moved to the target ticket and this ticket will be closed.
+                </p>
+
+                <input
+                    v-model="searchTerm"
+                    type="text"
+                    placeholder="Search by reference or 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"
+                />
+
+                <div v-if="loading" class="mt-3 text-center text-sm text-neutral-500">Searching...</div>
+
+                <div v-else-if="results.length" class="mt-3 max-h-48 space-y-1 overflow-y-auto">
+                    <button
+                        v-for="ticket in results"
+                        :key="ticket.id"
+                        :class="[
+                            'w-full rounded-lg px-3 py-2 text-left text-sm transition-colors',
+                            selectedTicket?.id === ticket.id
+                                ? 'bg-cyan-500/15 ring-1 ring-cyan-500/20 text-neutral-200'
+                                : 'text-neutral-300 hover:bg-white/[0.04]',
+                        ]"
+                        @click="selectTicket(ticket)"
+                    >
+                        <span class="font-mono text-xs text-neutral-400">{{ ticket.reference }}</span>
+                        <span class="ml-2">{{ ticket.subject }}</span>
+                    </button>
+                </div>
+
+                <div v-else-if="searchTerm.length >= 2 && !loading" class="mt-3 text-center text-sm text-neutral-500">
+                    No matching tickets found.
+                </div>
+
+                <!-- Selected ticket preview -->
+                <div v-if="selectedTicket" class="mt-4 rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+                    <p class="text-xs font-semibold uppercase tracking-wider text-neutral-500">Merge into</p>
+                    <p class="mt-1 text-sm text-neutral-200">
+                        <span class="font-mono text-neutral-400">{{ selectedTicket.reference }}</span>
+                        &mdash; {{ selectedTicket.subject }}
+                    </p>
+                </div>
+
+                <div class="mt-5 flex justify-end gap-3">
+                    <button
+                        class="rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/[0.06]"
+                        @click="emit('close')"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        :disabled="!selectedTicket || merging"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400',
+                            (!selectedTicket || merging) && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="confirmMerge"
+                    >
+                        {{ merging ? 'Merging...' : 'Confirm Merge' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>

package/src/components/TicketSidebar.vue

@@ -1,99 +1,167 @@
-<script setup>
-import { inject, computed } from 'vue';
-import StatusBadge from './StatusBadge.vue';
-import PriorityBadge from './PriorityBadge.vue';
-import SlaTimer from './SlaTimer.vue';
-import AssigneeSelect from './AssigneeSelect.vue';
-import TagSelect from './TagSelect.vue';
-import ActivityTimeline from './ActivityTimeline.vue';
-
-defineProps({
-    ticket: { type: Object, required: true },
-    agents: { type: Array, default: () => [] },
-    tags: { type: Array, default: () => [] },
-    activities: { type: Array, default: () => [] },
-    editable: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['assign', 'tags', 'priority', 'department', 'status']);
-const escDark = inject('esc-dark', computed(() => false));
-
-const cardClass = computed(() => escDark.value
-    ? 'rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4'
-    : 'rounded-lg border border-gray-200 bg-white p-4'
-);
-
-function renderStars(rating) {
-    return Array.from({ length: 5 }, (_, i) => i < rating ? 'filled' : 'empty');
-}
-</script>
-
-<template>
-    <aside class="space-y-4">
-        <div :class="cardClass">
-            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Details</h3>
-            <dl class="space-y-2 text-sm">
-                <div class="flex justify-between">
-                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Status</dt>
-                    <dd><StatusBadge :status="ticket.status" /></dd>
-                </div>
-                <div class="flex justify-between">
-                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Priority</dt>
-                    <dd><PriorityBadge :priority="ticket.priority" /></dd>
-                </div>
-                <div class="flex justify-between">
-                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Reference</dt>
-                    <dd :class="['font-mono text-xs', escDark ? 'text-white' : '']">{{ ticket.reference }}</dd>
-                </div>
-                <div v-if="ticket.department" class="flex justify-between">
-                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Department</dt>
-                    <dd :class="escDark ? 'text-neutral-300' : ''">{{ ticket.department.name }}</dd>
-                </div>
-                <div class="flex justify-between">
-                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Created</dt>
-                    <dd :class="escDark ? 'text-neutral-300' : ''">{{ new Date(ticket.created_at).toLocaleDateString() }}</dd>
-                </div>
-            </dl>
-        </div>
-
-        <!-- Satisfaction Rating (read-only) -->
-        <div v-if="ticket.satisfaction_rating" :class="cardClass">
-            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Customer Satisfaction</h3>
-            <div class="flex items-center gap-1">
-                <svg v-for="(star, i) in renderStars(ticket.satisfaction_rating.rating)" :key="i"
-                     class="h-5 w-5" :class="star === 'filled' ? 'text-amber-400' : (escDark ? 'text-neutral-700' : 'text-gray-300')"
-                     fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                </svg>
-                <span :class="['ml-2 text-sm font-medium', escDark ? 'text-neutral-300' : 'text-gray-700']">
-                    {{ ticket.satisfaction_rating.rating }}/5
-                </span>
-            </div>
-            <p v-if="ticket.satisfaction_rating.comment" :class="['mt-2 text-xs italic', escDark ? 'text-neutral-500' : 'text-gray-500']">
-                "{{ ticket.satisfaction_rating.comment }}"
-            </p>
-        </div>
-
-        <div v-if="ticket.first_response_due_at || ticket.resolution_due_at" class="space-y-2">
-            <SlaTimer v-if="ticket.first_response_due_at" :due-at="ticket.first_response_due_at"
-                      :breached="ticket.sla_first_response_breached" label="First Response" />
-            <SlaTimer v-if="ticket.resolution_due_at" :due-at="ticket.resolution_due_at"
-                      :breached="ticket.sla_resolution_breached" label="Resolution" />
-        </div>
-
-        <div v-if="editable && agents.length" :class="cardClass">
-            <AssigneeSelect :agents="agents" :model-value="ticket.assigned_to"
-                            @update:model-value="emit('assign', $event)" />
-        </div>
-
-        <div v-if="editable && tags.length" :class="cardClass">
-            <TagSelect :tags="tags" :model-value="(ticket.tags || []).map(t => t.id)"
-                       @update:model-value="emit('tags', $event)" />
-        </div>
-
-        <div v-if="activities.length" :class="cardClass">
-            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Activity</h3>
-            <ActivityTimeline :activities="activities" />
-        </div>
-    </aside>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+import StatusBadge from './StatusBadge.vue';
+import PriorityBadge from './PriorityBadge.vue';
+import SlaTimer from './SlaTimer.vue';
+import AssigneeSelect from './AssigneeSelect.vue';
+import TagSelect from './TagSelect.vue';
+import TicketTypeSelector from './TicketTypeSelector.vue';
+import ActivityTimeline from './ActivityTimeline.vue';
+
+defineProps({
+    ticket: { type: Object, required: true },
+    agents: { type: Array, default: () => [] },
+    tags: { type: Array, default: () => [] },
+    activities: { type: Array, default: () => [] },
+    editable: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['assign', 'tags', 'priority', 'department', 'status', 'ticket-type']);
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const cardClass = computed(() =>
+    escDark.value
+        ? 'rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4'
+        : 'rounded-lg border border-gray-200 bg-white p-4',
+);
+
+function renderStars(rating) {
+    return Array.from({ length: 5 }, (_, i) => (i < rating ? 'filled' : 'empty'));
+}
+</script>
+
+<template>
+    <aside class="space-y-4">
+        <div :class="cardClass">
+            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900']">
+                Details
+            </h3>
+            <dl class="space-y-2 text-sm">
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'">Status</dt>
+                    <dd><StatusBadge :status="ticket.status" /></dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'">Priority</dt>
+                    <dd><PriorityBadge :priority="ticket.priority" /></dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'">Reference</dt>
+                    <dd :class="['font-mono text-xs', escDark ? 'text-[var(--esc-panel-text)]' : '']">
+                        {{ ticket.reference }}
+                    </dd>
+                </div>
+                <div v-if="ticket.department" class="flex justify-between">
+                    <dt :class="escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'">Department</dt>
+                    <dd :class="escDark ? 'text-[var(--esc-panel-text-secondary)]' : ''">
+                        {{ ticket.department.name }}
+                    </dd>
+                </div>
+                <div class="flex items-center justify-between">
+                    <dt :class="escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'">Type</dt>
+                    <dd v-if="editable">
+                        <TicketTypeSelector
+                            :model-value="ticket.ticket_type || 'question'"
+                            @update:model-value="emit('ticket-type', $event)"
+                        />
+                    </dd>
+                    <dd v-else :class="escDark ? 'text-[var(--esc-panel-text-secondary)]' : ''">
+                        {{
+                            ticket.ticket_type
+                                ? ticket.ticket_type.charAt(0).toUpperCase() + ticket.ticket_type.slice(1)
+                                : '—'
+                        }}
+                    </dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'">Created</dt>
+                    <dd :class="escDark ? 'text-[var(--esc-panel-text-secondary)]' : ''">
+                        {{ new Date(ticket.created_at).toLocaleDateString() }}
+                    </dd>
+                </div>
+            </dl>
+        </div>
+
+        <!-- Satisfaction Rating (read-only) -->
+        <div v-if="ticket.satisfaction_rating" :class="cardClass">
+            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900']">
+                Customer Satisfaction
+            </h3>
+            <div class="flex items-center gap-1">
+                <svg
+                    v-for="(star, i) in renderStars(ticket.satisfaction_rating.rating)"
+                    :key="i"
+                    class="h-5 w-5"
+                    :class="
+                        star === 'filled'
+                            ? 'text-amber-400'
+                            : escDark
+                              ? 'text-[var(--esc-panel-text-muted)]'
+                              : 'text-gray-300'
+                    "
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                >
+                    <path
+                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                    />
+                </svg>
+                <span
+                    :class="[
+                        'ml-2 text-sm font-medium',
+                        escDark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-700',
+                    ]"
+                >
+                    {{ ticket.satisfaction_rating.rating }}/5
+                </span>
+            </div>
+            <p
+                v-if="ticket.satisfaction_rating.comment"
+                :class="['mt-2 text-xs italic', escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500']"
+            >
+                "{{ ticket.satisfaction_rating.comment }}"
+            </p>
+        </div>
+
+        <div v-if="ticket.first_response_due_at || ticket.resolution_due_at" class="space-y-2">
+            <SlaTimer
+                v-if="ticket.first_response_due_at"
+                :due-at="ticket.first_response_due_at"
+                :breached="ticket.sla_first_response_breached"
+                label="First Response"
+            />
+            <SlaTimer
+                v-if="ticket.resolution_due_at"
+                :due-at="ticket.resolution_due_at"
+                :breached="ticket.sla_resolution_breached"
+                label="Resolution"
+            />
+        </div>
+
+        <div v-if="editable && agents.length" :class="cardClass">
+            <AssigneeSelect
+                :agents="agents"
+                :model-value="ticket.assigned_to"
+                @update:model-value="emit('assign', $event)"
+            />
+        </div>
+
+        <div v-if="editable && tags.length" :class="cardClass">
+            <TagSelect
+                :tags="tags"
+                :model-value="(ticket.tags || []).map((t) => t.id)"
+                @update:model-value="emit('tags', $event)"
+            />
+        </div>
+
+        <div v-if="activities.length" :class="cardClass">
+            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900']">
+                Activity
+            </h3>
+            <ActivityTimeline :activities="activities" />
+        </div>
+    </aside>
+</template>

package/src/components/TicketSplitDialog.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+    replyId: { type: [Number, String], required: true },
+    replyAuthor: { type: String, default: '' },
+    replyExcerpt: { type: String, default: '' },
+});
+
+const emit = defineEmits(['close']);
+
+const subject = ref('');
+const splitting = ref(false);
+
+function confirmSplit() {
+    if (splitting.value) return;
+    splitting.value = true;
+
+    const payload = { reply_id: props.replyId };
+    if (subject.value.trim()) {
+        payload.subject = subject.value.trim();
+    }
+
+    router.post(route('escalated.admin.tickets.split', props.ticketReference), payload, {
+        onFinish: () => {
+            splitting.value = false;
+        },
+        onError: () => {
+            splitting.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <Teleport to="body">
+        <div
+            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+            @click.self="emit('close')"
+        >
+            <div class="w-full max-w-lg rounded-xl border border-white/[0.06] bg-neutral-900 p-6 shadow-2xl">
+                <div class="mb-4 flex items-center justify-between">
+                    <h3 class="text-lg font-semibold text-neutral-200">Split to New Ticket</h3>
+                    <button class="text-neutral-500 hover:text-neutral-300" @click="emit('close')">
+                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                <p class="mb-4 text-sm text-neutral-400">
+                    This will create a new ticket from the selected reply
+                    <span v-if="replyAuthor" class="text-neutral-300">by {{ replyAuthor }}</span
+                    >. The new ticket will be linked to
+                    <span class="font-mono text-neutral-300">{{ ticketReference }}</span
+                    >.
+                </p>
+
+                <!-- Reply excerpt preview -->
+                <div v-if="replyExcerpt" class="mb-4 rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+                    <p class="text-xs font-semibold uppercase tracking-wider text-neutral-500">Reply content</p>
+                    <p class="mt-1 line-clamp-3 text-sm text-neutral-300">{{ replyExcerpt }}</p>
+                </div>
+
+                <label class="mb-1 block text-sm font-medium text-neutral-400">
+                    Subject <span class="text-neutral-600">(optional override)</span>
+                </label>
+                <input
+                    v-model="subject"
+                    type="text"
+                    placeholder="Leave empty to auto-generate from source ticket"
+                    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"
+                />
+
+                <div class="mt-5 flex justify-end gap-3">
+                    <button
+                        class="rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/[0.06]"
+                        @click="emit('close')"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        :disabled="splitting"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400',
+                            splitting && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="confirmSplit"
+                    >
+                        {{ splitting ? 'Splitting...' : 'Split to New Ticket' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>

package/src/components/TicketTypeSelector.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { TICKET_TYPES } from '../utils/constants';
+
+defineProps({
+    modelValue: { type: String, default: 'question' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const types = TICKET_TYPES;
+</script>
+
+<template>
+    <select
+        :value="modelValue"
+        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 focus:ring-1 focus:ring-white/10"
+        @change="emit('update:modelValue', $event.target.value)"
+    >
+        <option v-for="t in types" :key="t.value" :value="t.value">{{ t.label }}</option>
+    </select>
+</template>

package/src/components/TotpInput.stories.js

@@ -0,0 +1,9 @@
+import TotpInput from './TotpInput.vue';
+
+export default {
+    title: 'Components/TotpInput',
+    component: TotpInput,
+};
+
+export const Empty = { args: { modelValue: '' } };
+export const PartiallyFilled = { args: { modelValue: '123' } };

package/src/components/TotpInput.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue', 'complete']);
+
+const digits = ref(Array(6).fill(''));
+const inputs = ref([]);
+
+function setRef(el, index) {
+    if (el) inputs.value[index] = el;
+}
+
+function handleInput(index, event) {
+    const val = event.target.value.replace(/\D/g, '');
+    digits.value[index] = val.slice(-1);
+
+    const code = digits.value.join('');
+    emit('update:modelValue', code);
+
+    if (val && index < 5) {
+        nextTick(() => inputs.value[index + 1]?.focus());
+    }
+
+    if (code.length === 6 && !code.includes('')) {
+        emit('complete', code);
+    }
+}
+
+function handleKeydown(index, event) {
+    if (event.key === 'Backspace' && !digits.value[index] && index > 0) {
+        nextTick(() => inputs.value[index - 1]?.focus());
+    }
+}
+
+function handlePaste(event) {
+    event.preventDefault();
+    const pasted = (event.clipboardData?.getData('text') || '').replace(/\D/g, '').slice(0, 6);
+    for (let i = 0; i < 6; i++) {
+        digits.value[i] = pasted[i] || '';
+    }
+    const code = digits.value.join('');
+    emit('update:modelValue', code);
+
+    if (code.length === 6) {
+        emit('complete', code);
+    } else {
+        nextTick(() => inputs.value[Math.min(pasted.length, 5)]?.focus());
+    }
+}
+
+watch(
+    () => props.modelValue,
+    (val) => {
+        if (!val) {
+            digits.value = Array(6).fill('');
+        }
+    },
+);
+</script>
+
+<template>
+    <div class="flex gap-2">
+        <input
+            v-for="(_, index) in 6"
+            :key="index"
+            :ref="(el) => setRef(el, index)"
+            :value="digits[index]"
+            type="text"
+            inputmode="numeric"
+            maxlength="1"
+            class="h-12 w-10 rounded-lg border border-white/10 bg-neutral-950 text-center text-lg font-semibold text-neutral-200 focus:border-cyan-500/50 focus:outline-none focus:ring-1 focus:ring-cyan-500/30"
+            @input="handleInput(index, $event)"
+            @keydown="handleKeydown(index, $event)"
+            @paste="handlePaste"
+        />
+    </div>
+</template>