|
|
@@ -3,6 +3,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
import LayoutSistema from "../../layout/LayoutSistema.vue";
|
|
|
import BaseBadge from "../../components/base/BaseBadge.vue";
|
|
|
+import BaseButton from "../../components/base/BaseButton.vue";
|
|
|
import {
|
|
|
avaliarAtendimentosPendentes,
|
|
|
estatisticasAvaliacoes,
|
|
|
@@ -191,14 +192,9 @@ onBeforeUnmount(() => {
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <button
|
|
|
- type="button"
|
|
|
- class="rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white shadow-sm hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
|
|
|
- :disabled="avaliandoLote"
|
|
|
- @click="avaliarPendentes"
|
|
|
- >
|
|
|
+ <BaseButton :loading="avaliandoLote" @click="avaliarPendentes">
|
|
|
{{ avaliandoLote ? "Avaliando..." : `Avaliar pendentes${stats?.pendentes ? ` (${stats.pendentes})` : ""}` }}
|
|
|
- </button>
|
|
|
+ </BaseButton>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="progresso" class="mt-5">
|
|
|
@@ -282,14 +278,14 @@ onBeforeUnmount(() => {
|
|
|
v-model="filtroBusca"
|
|
|
type="search"
|
|
|
placeholder="Protocolo, cliente, atendente ou data (dd/mm/aaaa)"
|
|
|
- class="w-full rounded-lg border border-gray-300 bg-transparent py-1.5 pl-9 pr-8 text-sm text-gray-700 placeholder:text-gray-400 dark:border-gray-600 dark:text-gray-200 dark:placeholder:text-gray-500"
|
|
|
+ class="w-full rounded-lg border border-gray-200 bg-background py-1.5 pl-9 pr-8 text-sm text-gray-700 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-700 dark:text-gray-200 dark:placeholder:text-gray-500"
|
|
|
@input="onBuscaInput"
|
|
|
@keyup.enter="onBuscaEnter"
|
|
|
/>
|
|
|
<button
|
|
|
v-if="filtroBusca"
|
|
|
type="button"
|
|
|
- class="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
|
|
|
+ class="absolute right-2 top-1/2 -translate-y-1/2 rounded bg-transparent p-0.5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
|
|
|
title="Limpar busca"
|
|
|
@click="filtroBusca = ''; onBuscaEnter();"
|
|
|
>
|
|
|
@@ -300,7 +296,7 @@ onBeforeUnmount(() => {
|
|
|
</div>
|
|
|
<select
|
|
|
v-model="filtroResolvido"
|
|
|
- class="rounded-lg border border-gray-300 bg-transparent px-3 py-1.5 text-sm text-gray-700 dark:border-gray-600 dark:bg-transparent dark:text-gray-200 [&>option]:dark:bg-gray-800"
|
|
|
+ class="rounded-lg border border-gray-200 bg-background px-3 py-1.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-700 dark:text-gray-200 [&>option]:dark:bg-gray-800"
|
|
|
@change="aplicarFiltros"
|
|
|
>
|
|
|
<option value="">Resolução: todas</option>
|
|
|
@@ -311,7 +307,7 @@ onBeforeUnmount(() => {
|
|
|
</select>
|
|
|
<select
|
|
|
v-model="filtroSentimento"
|
|
|
- class="rounded-lg border border-gray-300 bg-transparent px-3 py-1.5 text-sm text-gray-700 dark:border-gray-600 dark:bg-transparent dark:text-gray-200 [&>option]:dark:bg-gray-800"
|
|
|
+ class="rounded-lg border border-gray-200 bg-background px-3 py-1.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-700 dark:text-gray-200 [&>option]:dark:bg-gray-800"
|
|
|
@change="aplicarFiltros"
|
|
|
>
|
|
|
<option value="">Sentimento: todos</option>
|
|
|
@@ -334,7 +330,7 @@ onBeforeUnmount(() => {
|
|
|
<li v-for="a in avaliacoes" :id="`avaliacao-${a.AtendimentoId}`" :key="a.AtendimentoId">
|
|
|
<button
|
|
|
type="button"
|
|
|
- class="flex w-full flex-wrap items-center gap-2 px-4 py-3 text-left hover:bg-black/[0.03] dark:hover:bg-white/[0.04]"
|
|
|
+ class="flex w-full flex-wrap items-center gap-2 bg-transparent px-4 py-3 text-left hover:bg-black/[0.03] dark:hover:bg-white/[0.04]"
|
|
|
@click="alternarExpandido(a.AtendimentoId)"
|
|
|
>
|
|
|
<div class="min-w-0 flex-1">
|
|
|
@@ -378,16 +374,12 @@ onBeforeUnmount(() => {
|
|
|
<template v-else>agendada, mas o atendente não informou o horário</template>
|
|
|
</div>
|
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
|
- <button
|
|
|
- type="button"
|
|
|
- class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-black/[0.03] dark:border-gray-600 dark:text-gray-200 dark:hover:bg-white/[0.04]"
|
|
|
- @click="verConversa(a.AtendimentoId)"
|
|
|
- >
|
|
|
+ <BaseButton variant="secondary" size="sm" @click="verConversa(a.AtendimentoId)">
|
|
|
Ver conversa completa
|
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
|
|
</svg>
|
|
|
- </button>
|
|
|
+ </BaseButton>
|
|
|
<div class="text-xs text-gray-400 dark:text-gray-500">
|
|
|
Avaliado por {{ a.Modelo }} em {{ formatData(a.UpdatedAt) }} · {{ a.TotalMensagens }} mensagens
|
|
|
</div>
|
|
|
@@ -400,23 +392,23 @@ onBeforeUnmount(() => {
|
|
|
v-if="totalPaginas > 1"
|
|
|
class="flex items-center justify-between border-t border-gray-200 px-4 py-3 text-sm dark:border-gray-700"
|
|
|
>
|
|
|
- <button
|
|
|
- type="button"
|
|
|
- class="rounded-lg border border-gray-300 px-3 py-1.5 text-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-gray-200"
|
|
|
+ <BaseButton
|
|
|
+ variant="secondary"
|
|
|
+ size="sm"
|
|
|
:disabled="page <= 1 || carregando"
|
|
|
@click="irParaPagina(page - 1)"
|
|
|
>
|
|
|
Anterior
|
|
|
- </button>
|
|
|
+ </BaseButton>
|
|
|
<span class="text-gray-500 dark:text-gray-400">Página {{ page }} de {{ totalPaginas }}</span>
|
|
|
- <button
|
|
|
- type="button"
|
|
|
- class="rounded-lg border border-gray-300 px-3 py-1.5 text-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-gray-200"
|
|
|
+ <BaseButton
|
|
|
+ variant="secondary"
|
|
|
+ size="sm"
|
|
|
:disabled="page >= totalPaginas || carregando"
|
|
|
@click="irParaPagina(page + 1)"
|
|
|
>
|
|
|
Próxima
|
|
|
- </button>
|
|
|
+ </BaseButton>
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|