437 lines
18 KiB
Vue
437 lines
18 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
slaColor, CHANNEL_LABELS, CHANNEL_ICONS, STATUS_LABELS,
|
|
PRIORITY_LABELS, INTENT_LABELS, TIER_LABELS, QUEUE_LABELS,
|
|
type SupportChannel, type TicketStatus, type TicketPriority,
|
|
type RoutingTier, type RoutedQueue,
|
|
} from '~/data/mock-support'
|
|
|
|
usePageTitle('Incoming Support')
|
|
|
|
const { state, kpis } = useSupportTickets()
|
|
|
|
// ── View toggle ──
|
|
const viewMode = ref<'my' | 'all'>('all')
|
|
|
|
type TicketFilter = 'all' | 'active' | 'pending' | 'resolved'
|
|
const activeFilter = ref<TicketFilter>('all')
|
|
|
|
// ── Filter dropdowns ──
|
|
const statusFilter = ref('')
|
|
const channelFilter = ref('')
|
|
const tierFilter = ref('')
|
|
const queueFilter = ref('')
|
|
const priorityFilter = ref('')
|
|
const handlerFilter = ref('')
|
|
|
|
const uniqueHandlers = computed(() =>
|
|
[...new Set(state.value.tickets.map(t => t.assignedTo).filter(Boolean) as string[])].sort()
|
|
)
|
|
|
|
const filteredTickets = computed(() => {
|
|
let result = [...state.value.tickets]
|
|
|
|
if (activeFilter.value === 'active') result = result.filter(t => t.status === 'open' || t.status === 'in_progress')
|
|
if (activeFilter.value === 'pending') result = result.filter(t => t.status === 'pending_customer')
|
|
if (activeFilter.value === 'resolved') result = result.filter(t => t.status === 'resolved')
|
|
|
|
if (statusFilter.value) result = result.filter(t => t.status === statusFilter.value)
|
|
if (channelFilter.value) result = result.filter(t => t.channel === channelFilter.value)
|
|
if (tierFilter.value) result = result.filter(t => t.routingTier === tierFilter.value)
|
|
if (queueFilter.value) result = result.filter(t => t.routedQueue === queueFilter.value)
|
|
if (priorityFilter.value) result = result.filter(t => t.priority === priorityFilter.value)
|
|
if (handlerFilter.value) result = result.filter(t => t.assignedTo === handlerFilter.value)
|
|
|
|
// Sort: breached first → slaPercent desc
|
|
result.sort((a, b) => {
|
|
const aBreached = a.slaPercent >= 100 ? 0 : 1
|
|
const bBreached = b.slaPercent >= 100 ? 0 : 1
|
|
if (aBreached !== bBreached) return aBreached - bBreached
|
|
return b.slaPercent - a.slaPercent
|
|
})
|
|
|
|
return result
|
|
})
|
|
|
|
const filterCounts = computed(() => {
|
|
const all = state.value.tickets
|
|
return {
|
|
all: all.length,
|
|
active: all.filter(t => t.status === 'open' || t.status === 'in_progress').length,
|
|
pending: all.filter(t => t.status === 'pending_customer').length,
|
|
resolved: all.filter(t => t.status === 'resolved').length,
|
|
}
|
|
})
|
|
|
|
const statusMeta: Record<TicketStatus, { label: string; class: string }> = {
|
|
open: { label: 'Abierto', class: 'sp-st-open' },
|
|
in_progress: { label: 'En Proceso', class: 'sp-st-progress' },
|
|
pending_customer: { label: 'Esperando', class: 'sp-st-pending' },
|
|
resolved: { label: 'Resuelto', class: 'sp-st-resolved' },
|
|
}
|
|
|
|
const priorityMeta: Record<TicketPriority, { label: string; class: string }> = {
|
|
urgent: { label: 'Urgente', class: 'sp-pri-urgent' },
|
|
high: { label: 'Alta', class: 'sp-pri-high' },
|
|
medium: { label: 'Media', class: 'sp-pri-medium' },
|
|
low: { label: 'Baja', class: 'sp-pri-low' },
|
|
}
|
|
|
|
const tierClass = (t: RoutingTier) => {
|
|
const map: Record<string, string> = {
|
|
tier1_auto: 'sp-tier-1', tier2_rule: 'sp-tier-2', tier3_open: 'sp-tier-3',
|
|
}
|
|
return map[t] ?? ''
|
|
}
|
|
|
|
function clearFilters() {
|
|
statusFilter.value = ''
|
|
channelFilter.value = ''
|
|
tierFilter.value = ''
|
|
queueFilter.value = ''
|
|
priorityFilter.value = ''
|
|
handlerFilter.value = ''
|
|
}
|
|
|
|
const hasActiveFilters = computed(() =>
|
|
!!(statusFilter.value || channelFilter.value || tierFilter.value || queueFilter.value || priorityFilter.value || handlerFilter.value)
|
|
)
|
|
|
|
const toast = useToast()
|
|
function handleNewTicket() {
|
|
toast.add({ title: 'New ticket flow coming soon', description: 'Quick Capture or manual intake.', color: 'neutral' })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="sp-page">
|
|
<!-- Header -->
|
|
<div class="flex flex-wrap items-end justify-between gap-3">
|
|
<div class="max-w-xl">
|
|
<h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Incoming Support</h1>
|
|
<p class="mt-1 text-[13px] text-[var(--text-muted)]">
|
|
Tickets, inquiries, and customer requests — 3-tier routing with WhatsApp & email threads.
|
|
</p>
|
|
</div>
|
|
<button type="button" class="sp-action-btn-primary" @click="handleNewTicket">
|
|
<UIcon name="i-heroicons-plus" style="width: 14px; height: 14px;" />
|
|
Nuevo Ticket
|
|
</button>
|
|
</div>
|
|
|
|
<!-- KPI strip -->
|
|
<div class="sp-kpi-strip">
|
|
<div class="sp-kpi">
|
|
<p class="sp-kpi-label">Abiertos</p>
|
|
<p class="sp-kpi-value">{{ kpis.open }}</p>
|
|
</div>
|
|
<div class="sp-kpi">
|
|
<p class="sp-kpi-label">En proceso</p>
|
|
<p class="sp-kpi-value" style="color: #c27b1a;">{{ kpis.inProgress }}</p>
|
|
</div>
|
|
<div class="sp-kpi">
|
|
<p class="sp-kpi-label">SLA incumplido</p>
|
|
<p class="sp-kpi-value" :style="kpis.breached > 0 ? 'color: #c13838;' : ''">{{ kpis.breached }}</p>
|
|
</div>
|
|
<div class="sp-kpi">
|
|
<p class="sp-kpi-label">Promedio días</p>
|
|
<p class="sp-kpi-value">{{ kpis.avgDaysOpen }}d</p>
|
|
</div>
|
|
<div class="sp-kpi">
|
|
<p class="sp-kpi-label">Sin asignar</p>
|
|
<p class="sp-kpi-value" :style="kpis.unassigned > 0 ? 'color: #9333ea;' : ''">{{ kpis.unassigned }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View toggle + Filter tabs -->
|
|
<div class="sp-controls-row">
|
|
<div class="sp-view-toggle">
|
|
<button type="button" class="sp-view-btn" :class="viewMode === 'my' ? 'sp-view-on' : 'sp-view-off'" @click="viewMode = 'my'">My Tickets</button>
|
|
<button type="button" class="sp-view-btn" :class="viewMode === 'all' ? 'sp-view-on' : 'sp-view-off'" @click="viewMode = 'all'">All Tickets</button>
|
|
</div>
|
|
|
|
<div class="sp-filter-tabs">
|
|
<button
|
|
v-for="f in ([
|
|
{ id: 'all', label: 'Todos' },
|
|
{ id: 'active', label: 'Activos' },
|
|
{ id: 'pending', label: 'Pendientes' },
|
|
{ id: 'resolved', label: 'Resueltos' },
|
|
] as { id: TicketFilter; label: string }[])"
|
|
:key="f.id"
|
|
type="button"
|
|
class="sp-filter-tab"
|
|
:class="activeFilter === f.id ? 'sp-filter-on' : 'sp-filter-off'"
|
|
@click="activeFilter = f.id"
|
|
>
|
|
{{ f.label }}
|
|
<span class="sp-filter-count" :class="activeFilter === f.id ? 'sp-filter-count-on' : ''">{{ filterCounts[f.id] }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<span class="text-[11px] text-[var(--text-muted)] ml-auto">{{ filteredTickets.length }} resultados</span>
|
|
</div>
|
|
|
|
<!-- Filter dropdowns -->
|
|
<div class="sp-dropdown-row">
|
|
<select v-model="statusFilter" class="sp-dropdown">
|
|
<option value="">Estado</option>
|
|
<option value="open">Abierto</option>
|
|
<option value="in_progress">En Proceso</option>
|
|
<option value="pending_customer">Esperando Cliente</option>
|
|
<option value="resolved">Resuelto</option>
|
|
</select>
|
|
<select v-model="channelFilter" class="sp-dropdown">
|
|
<option value="">Canal</option>
|
|
<option value="whatsapp">WhatsApp</option>
|
|
<option value="email">Email</option>
|
|
<option value="phone">Teléfono</option>
|
|
<option value="walk_in">Presencial</option>
|
|
<option value="web_form">Web Form</option>
|
|
</select>
|
|
<select v-model="tierFilter" class="sp-dropdown">
|
|
<option value="">Tier</option>
|
|
<option value="tier1_auto">Tier 1 — Auto</option>
|
|
<option value="tier2_rule">Tier 2 — Regla</option>
|
|
<option value="tier3_open">Tier 3 — Abierto</option>
|
|
</select>
|
|
<select v-model="queueFilter" class="sp-dropdown">
|
|
<option value="">Cola</option>
|
|
<option value="collections">Cobros</option>
|
|
<option value="claims">Siniestros</option>
|
|
<option value="sales">Ventas</option>
|
|
<option value="renewals">Renovaciones</option>
|
|
<option value="operations">Operaciones</option>
|
|
<option value="open_pool">Pool Abierto</option>
|
|
</select>
|
|
<select v-model="priorityFilter" class="sp-dropdown">
|
|
<option value="">Prioridad</option>
|
|
<option value="urgent">Urgente</option>
|
|
<option value="high">Alta</option>
|
|
<option value="medium">Media</option>
|
|
<option value="low">Baja</option>
|
|
</select>
|
|
<select v-model="handlerFilter" class="sp-dropdown">
|
|
<option value="">Asignado</option>
|
|
<option v-for="h in uniqueHandlers" :key="h" :value="h">{{ h }}</option>
|
|
</select>
|
|
<button v-if="hasActiveFilters" class="sp-clear-btn" @click="clearFilters">
|
|
<UIcon name="i-heroicons-x-mark" class="w-3 h-3" />
|
|
Limpiar
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tickets table -->
|
|
<div class="sp-table-wrap">
|
|
<table class="sp-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 28px;"></th>
|
|
<th>Ticket</th>
|
|
<th>Asunto / Último mensaje</th>
|
|
<th>Cliente</th>
|
|
<th style="width: 36px;">Canal</th>
|
|
<th>Tier</th>
|
|
<th>Cola</th>
|
|
<th>Estado</th>
|
|
<th>Prioridad</th>
|
|
<th>Asignado</th>
|
|
<th class="text-right">Días</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="t in filteredTickets"
|
|
:key="t.id"
|
|
class="sp-row"
|
|
:class="{ 'sp-breach-row': t.slaPercent >= 100 && t.status !== 'resolved' }"
|
|
style="cursor: pointer;"
|
|
@click="navigateTo(`/support/${t.id}`)"
|
|
>
|
|
<td><span class="sp-sla-dot" :class="`sp-sla-${slaColor(t.slaPercent)}`" /></td>
|
|
<td>
|
|
<NuxtLink :to="`/support/${t.id}`" class="sp-ticket-link" @click.stop>{{ t.id }}</NuxtLink>
|
|
</td>
|
|
<td>
|
|
<p class="text-[13px] font-medium text-[var(--text-primary)] truncate" style="max-width: 260px;">{{ t.subject }}</p>
|
|
<p class="text-[11px] text-[var(--text-muted)] truncate" style="max-width: 260px;">{{ t.lastMessagePreview }}</p>
|
|
</td>
|
|
<td class="text-[13px] text-[var(--text-primary)]">{{ t.customerName || 'Unknown caller' }}</td>
|
|
<td class="text-center">
|
|
<UIcon :name="CHANNEL_ICONS[t.channel]" class="w-4 h-4" :style="t.channel === 'whatsapp' ? 'color: #25D366;' : 'color: #8a8a86;'" :title="CHANNEL_LABELS[t.channel]" />
|
|
</td>
|
|
<td>
|
|
<span class="sp-tier-badge" :class="tierClass(t.routingTier)">{{ TIER_LABELS[t.routingTier] }}</span>
|
|
</td>
|
|
<td class="text-[12px] text-[var(--text-muted)]">{{ QUEUE_LABELS[t.routedQueue] }}</td>
|
|
<td>
|
|
<span :class="statusMeta[t.status].class">{{ statusMeta[t.status].label }}</span>
|
|
</td>
|
|
<td>
|
|
<span :class="priorityMeta[t.priority].class">{{ priorityMeta[t.priority].label }}</span>
|
|
</td>
|
|
<td class="text-[12px] text-[var(--text-muted)]">{{ t.assignedTo ?? '—' }}</td>
|
|
<td class="text-right">
|
|
<span class="text-[13px] font-bold" :class="t.daysOpen > 14 ? 'text-rose-600' : t.daysOpen > 7 ? 'text-amber-600' : 'text-[var(--text-primary)]'">{{ t.daysOpen }}d</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sp-page {
|
|
max-width: 76rem;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
padding-bottom: 3rem;
|
|
}
|
|
|
|
.sp-action-btn-primary {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 8px 16px; border-radius: 8px;
|
|
background: #01696f; color: #fff;
|
|
font-size: 13px; font-weight: 500; border: none;
|
|
cursor: pointer; transition: all 150ms ease; white-space: nowrap;
|
|
}
|
|
.sp-action-btn-primary:hover { background: #015458; }
|
|
|
|
/* ── KPI strip ── */
|
|
.sp-kpi-strip {
|
|
display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
|
|
border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
|
|
background: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.03);
|
|
overflow: hidden;
|
|
}
|
|
.sp-kpi { padding: 14px 18px; background: #fff; }
|
|
.sp-kpi:first-child { border-radius: 12px 0 0 12px; }
|
|
.sp-kpi:last-child { border-radius: 0 12px 12px 0; }
|
|
.sp-kpi-label {
|
|
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: 0.04em; color: #8a8a86;
|
|
}
|
|
.sp-kpi-value {
|
|
margin-top: 4px; font-size: 22px; font-weight: 600;
|
|
color: var(--text-primary); font-variant-numeric: tabular-nums;
|
|
}
|
|
@media (max-width: 640px) { .sp-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
|
|
|
|
/* ── Controls row ── */
|
|
.sp-controls-row {
|
|
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
}
|
|
|
|
/* ── View toggle ── */
|
|
.sp-view-toggle {
|
|
display: inline-flex; gap: 1px; padding: 2px;
|
|
border-radius: 8px; background: rgba(0,0,0,0.04);
|
|
}
|
|
.sp-view-btn {
|
|
padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
|
|
border: none; cursor: pointer; transition: all 150ms ease; white-space: nowrap;
|
|
}
|
|
.sp-view-on { background: #01696f; color: white; }
|
|
.sp-view-off { background: transparent; color: #8a8a86; }
|
|
.sp-view-off:hover { color: var(--text-primary); }
|
|
|
|
/* ── Filter tabs ── */
|
|
.sp-filter-tabs {
|
|
display: inline-flex; gap: 2px; padding: 3px;
|
|
border-radius: 10px; background: rgba(0,0,0,0.04);
|
|
}
|
|
.sp-filter-tab {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
padding: 6px 12px; border-radius: 8px;
|
|
font-size: 12px; font-weight: 500; border: none;
|
|
cursor: pointer; transition: all 150ms ease; white-space: nowrap;
|
|
}
|
|
.sp-filter-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
|
.sp-filter-off { background: transparent; color: var(--text-muted); }
|
|
.sp-filter-off:hover { color: var(--text-primary); }
|
|
.sp-filter-count {
|
|
font-size: 10px; font-weight: 600; padding: 1px 5px;
|
|
border-radius: 9999px; background: rgba(0,0,0,0.06); color: var(--text-muted);
|
|
}
|
|
.sp-filter-count-on { background: rgba(1,105,111,0.1); color: #01696f; }
|
|
|
|
/* ── Dropdown filters ── */
|
|
.sp-dropdown-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
.sp-dropdown {
|
|
padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 500;
|
|
border: 1px solid rgba(0,0,0,0.08); background: #fff; color: var(--text-primary);
|
|
cursor: pointer; min-width: 100px;
|
|
}
|
|
.sp-dropdown:focus { outline: none; border-color: #01696f; }
|
|
.sp-clear-btn {
|
|
display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px;
|
|
border-radius: 8px; font-size: 11px; font-weight: 600;
|
|
background: rgba(193, 56, 56, 0.06); color: #c13838;
|
|
border: 1px solid rgba(193, 56, 56, 0.15); cursor: pointer;
|
|
}
|
|
.sp-clear-btn:hover { background: rgba(193, 56, 56, 0.12); }
|
|
|
|
/* ── Table ── */
|
|
.sp-table-wrap {
|
|
border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
|
|
background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
|
|
overflow-x: auto;
|
|
}
|
|
.sp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
.sp-table thead th {
|
|
padding: 10px 14px;
|
|
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: 0.04em; color: #8a8a86;
|
|
border-bottom: 1px solid rgba(0,0,0,0.06);
|
|
white-space: nowrap; text-align: left;
|
|
}
|
|
.sp-table tbody td {
|
|
padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.04);
|
|
vertical-align: top;
|
|
}
|
|
.sp-row { transition: background 100ms ease; }
|
|
.sp-row:hover { background: rgba(0,0,0,0.015); }
|
|
.sp-row:last-child td { border-bottom: none; }
|
|
|
|
/* ── Breach row ── */
|
|
.sp-breach-row { box-shadow: inset 3px 0 0 #c13838; }
|
|
|
|
/* ── SLA dot ── */
|
|
.sp-sla-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
|
.sp-sla-green { background: #059669; }
|
|
.sp-sla-amber { background: #c27b1a; }
|
|
.sp-sla-red { background: #c13838; }
|
|
|
|
/* ── Ticket link ── */
|
|
.sp-ticket-link {
|
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
font-size: 12px; font-weight: 600; color: #01696f;
|
|
text-decoration: none;
|
|
}
|
|
.sp-ticket-link:hover { text-decoration: underline; }
|
|
|
|
/* ── Tier badges ── */
|
|
.sp-tier-badge {
|
|
display: inline-flex; padding: 2px 7px; border-radius: 8px;
|
|
font-size: 10px; font-weight: 600; white-space: nowrap;
|
|
}
|
|
.sp-tier-1 { background: rgba(16, 185, 129, 0.08); color: #059669; }
|
|
.sp-tier-2 { background: rgba(59, 130, 246, 0.08); color: #2563eb; }
|
|
.sp-tier-3 { background: rgba(194, 123, 26, 0.08); color: #c27b1a; }
|
|
|
|
/* ── Status badges ── */
|
|
.sp-st-open { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(193,56,56,0.08); color: #c13838; white-space: nowrap; }
|
|
.sp-st-progress { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap; }
|
|
.sp-st-pending { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(147,51,234,0.08); color: #9333ea; white-space: nowrap; }
|
|
.sp-st-resolved { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(0,0,0,0.04); color: #8a8a86; white-space: nowrap; }
|
|
|
|
/* ── Priority badges ── */
|
|
.sp-pri-urgent { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9999px; background: rgba(193,56,56,0.12); color: #c13838; white-space: nowrap; }
|
|
.sp-pri-high { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap; }
|
|
.sp-pri-medium { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(0,0,0,0.05); color: #6b6b68; white-space: nowrap; }
|
|
.sp-pri-low { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(0,0,0,0.03); color: #8a8a86; white-space: nowrap; }
|
|
</style>
|