|
|
@@ -1,391 +1,518 @@
|
|
|
<script>
|
|
|
- import { Search, Download, Eye, X, MessageCircle } from 'lucide-svelte';
|
|
|
- import { mockInteractions } from '$lib/core/models/mock-data.js';
|
|
|
-
|
|
|
- let searchQuery = $state('');
|
|
|
- let selectedInteraction = $state(null);
|
|
|
- let isChatModalOpen = $state(false);
|
|
|
-
|
|
|
- // Filters state
|
|
|
- let activeFilter = $state('all'); // all, my_clients, new, unfinished
|
|
|
-
|
|
|
- const conversationTemplates = [
|
|
|
- [
|
|
|
- {
|
|
|
- isAgent: false,
|
|
|
- text: 'Oi, queria saber se esse look chega na loja física ou é só on-line?'
|
|
|
- },
|
|
|
- {
|
|
|
- isAgent: true,
|
|
|
- text: 'Oi {client}! Aqui é {agent}. Posso te mandar combinações com o que chegou hoje?'
|
|
|
- },
|
|
|
- {
|
|
|
- isAgent: false,
|
|
|
- text: 'Quero sim! Tive dúvida porque o tecido parece quente, o que você acha?'
|
|
|
- },
|
|
|
- {
|
|
|
- isAgent: true,
|
|
|
- text: 'Ele é leve, perfeito para eventos. Posso reservar dois tamanhos pra você testar?'
|
|
|
- }
|
|
|
- ],
|
|
|
- [
|
|
|
- {
|
|
|
- isAgent: false,
|
|
|
- text: 'Boa tarde! O prazo de entrega está mantido? Preciso para um evento.'
|
|
|
- },
|
|
|
- {
|
|
|
- isAgent: true,
|
|
|
- text: 'Está sim! Consigo acompanhar junto com a logística e te aviso qualquer mudança.'
|
|
|
- },
|
|
|
- {
|
|
|
- isAgent: false,
|
|
|
- text: 'Perfeito, fiquei tranquila. Pode confirmar se a cor é igual da foto?'
|
|
|
- },
|
|
|
- {
|
|
|
- isAgent: true,
|
|
|
- text: 'É idêntica! Vou te mandar mais fotos com detalhes da costura.'
|
|
|
- }
|
|
|
- ],
|
|
|
- [
|
|
|
- {
|
|
|
- isAgent: false,
|
|
|
- text: 'Oi, recebi o link mas não consegui finalizar o pagamento.'
|
|
|
- },
|
|
|
- {
|
|
|
- isAgent: true,
|
|
|
- text: 'Sem problemas, {client}. Gereiem um novo link com cashback extra, vale tentar novamente?'
|
|
|
- },
|
|
|
- {
|
|
|
- isAgent: false,
|
|
|
- text: 'Agora foi! Consegue separar junto com uma calça flare 38?'
|
|
|
- },
|
|
|
- {
|
|
|
- isAgent: true,
|
|
|
- text: 'Já separei e mando atualizações de retirada. Obrigada por confiar!'
|
|
|
- }
|
|
|
- ]
|
|
|
- ];
|
|
|
-
|
|
|
- function applyFilter(interaction) {
|
|
|
- const normalizedQuery = searchQuery.trim();
|
|
|
- if (normalizedQuery && !interaction.client.includes(normalizedQuery)) return false;
|
|
|
-
|
|
|
- if (activeFilter === 'my_clients') {
|
|
|
- return interaction.agent !== '-';
|
|
|
- }
|
|
|
-
|
|
|
- if (activeFilter === 'new') {
|
|
|
- return interaction.sentiment === 'CONTENTAMENTO' || interaction.score > 0.4;
|
|
|
- }
|
|
|
-
|
|
|
- if (activeFilter === 'unfinished') {
|
|
|
- return interaction.sentiment === 'FRUSTRAÇÃO' || interaction.score < 0;
|
|
|
- }
|
|
|
-
|
|
|
- return true;
|
|
|
- }
|
|
|
-
|
|
|
- const filteredInteractions = $derived(mockInteractions.filter(applyFilter));
|
|
|
-
|
|
|
- function buildConversation(interaction, idx) {
|
|
|
- const template = conversationTemplates[idx % conversationTemplates.length];
|
|
|
- const agentName = interaction.agent === '-' ? 'Time Nettown' : interaction.agent;
|
|
|
- return template.map((message, msgIdx) => ({
|
|
|
- ...message,
|
|
|
- id: `${interaction.client}-${msgIdx}`,
|
|
|
- text: message.text
|
|
|
- .replace('{client}', interaction.client.slice(-4))
|
|
|
- .replace('{agent}', agentName),
|
|
|
- time: interaction.datetime.split(',')[1]?.trim() ?? '00:00'
|
|
|
- }));
|
|
|
- }
|
|
|
-
|
|
|
- const conversationThreads = $derived(
|
|
|
- filteredInteractions.map((interaction, idx) => ({
|
|
|
- ...interaction,
|
|
|
- thread: buildConversation(interaction, idx)
|
|
|
- }))
|
|
|
- );
|
|
|
-
|
|
|
- function getSentimentColor(sentiment) {
|
|
|
- switch (sentiment) {
|
|
|
- case 'CONTENTAMENTO': return 'text-emerald-600 bg-emerald-50 border-emerald-200 dark:text-emerald-400 dark:bg-emerald-400/10 dark:border-emerald-400/20';
|
|
|
- case 'FRUSTRAÇÃO': return 'text-red-600 bg-red-50 border-red-200 dark:text-red-400 dark:bg-red-400/10 dark:border-red-400/20';
|
|
|
- case 'NEUTRO': return 'text-slate-600 bg-slate-100 border-slate-200 dark:text-slate-400 dark:bg-slate-400/10 dark:border-slate-400/20';
|
|
|
- default: return 'text-slate-600 bg-slate-100 border-slate-200 dark:text-slate-400 dark:bg-slate-800 dark:border-slate-700';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function openChat(interaction) {
|
|
|
- selectedInteraction = interaction;
|
|
|
- isChatModalOpen = true;
|
|
|
- }
|
|
|
-
|
|
|
- function closeChat() {
|
|
|
- isChatModalOpen = false;
|
|
|
- setTimeout(() => {
|
|
|
- selectedInteraction = null;
|
|
|
- }, 300);
|
|
|
- }
|
|
|
+ import { Search, Download, Eye, X, MessageCircle } from 'lucide-svelte';
|
|
|
+ import { mockInteractions } from '$lib/core/models/mock-data.js';
|
|
|
+
|
|
|
+ let searchQuery = $state('');
|
|
|
+ let selectedInteraction = $state(null);
|
|
|
+ let isChatModalOpen = $state(false);
|
|
|
+
|
|
|
+ // Filters state
|
|
|
+ let activeFilter = $state('all'); // all, my_clients, new, unfinished
|
|
|
+
|
|
|
+ const conversationTemplates = [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ isAgent: false,
|
|
|
+ text: 'Oi, queria saber se esse look chega na loja física ou é só on-line?'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isAgent: true,
|
|
|
+ text: 'Oi {client}! Aqui é {agent}. Posso te mandar combinações com o que chegou hoje?'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isAgent: false,
|
|
|
+ text: 'Quero sim! Tive dúvida porque o tecido parece quente, o que você acha?'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isAgent: true,
|
|
|
+ text: 'Ele é leve, perfeito para eventos. Posso reservar dois tamanhos pra você testar?'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ isAgent: false,
|
|
|
+ text: 'Boa tarde! O prazo de entrega está mantido? Preciso para um evento.'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isAgent: true,
|
|
|
+ text: 'Está sim! Consigo acompanhar junto com a logística e te aviso qualquer mudança.'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isAgent: false,
|
|
|
+ text: 'Perfeito, fiquei tranquila. Pode confirmar se a cor é igual da foto?'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isAgent: true,
|
|
|
+ text: 'É idêntica! Vou te mandar mais fotos com detalhes da costura.'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ isAgent: false,
|
|
|
+ text: 'Oi, recebi o link mas não consegui finalizar o pagamento.'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isAgent: true,
|
|
|
+ text: 'Sem problemas, {client}. Gereiem um novo link com cashback extra, vale tentar novamente?'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isAgent: false,
|
|
|
+ text: 'Agora foi! Consegue separar junto com uma calça flare 38?'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isAgent: true,
|
|
|
+ text: 'Já separei e mando atualizações de retirada. Obrigada por confiar!'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ ];
|
|
|
+
|
|
|
+ function applyFilter(interaction) {
|
|
|
+ const normalizedQuery = searchQuery.trim();
|
|
|
+ if (normalizedQuery && !interaction.client.includes(normalizedQuery)) return false;
|
|
|
+
|
|
|
+ if (activeFilter === 'my_clients') {
|
|
|
+ return interaction.agent !== '-';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (activeFilter === 'new') {
|
|
|
+ return interaction.sentiment === 'CONTENTAMENTO' || interaction.score > 0.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (activeFilter === 'unfinished') {
|
|
|
+ return interaction.sentiment === 'FRUSTRAÇÃO' || interaction.score < 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ const filteredInteractions = $derived(mockInteractions.filter(applyFilter));
|
|
|
+
|
|
|
+ function buildConversation(interaction, idx) {
|
|
|
+ const template = conversationTemplates[idx % conversationTemplates.length];
|
|
|
+ const agentName = interaction.agent === '-' ? 'Time Nettown' : interaction.agent;
|
|
|
+ return template.map((message, msgIdx) => ({
|
|
|
+ ...message,
|
|
|
+ id: `${interaction.client}-${msgIdx}`,
|
|
|
+ text: message.text
|
|
|
+ .replace('{client}', interaction.client.slice(-4))
|
|
|
+ .replace('{agent}', agentName),
|
|
|
+ time: interaction.datetime.split(',')[1]?.trim() ?? '00:00'
|
|
|
+ }));
|
|
|
+ }
|
|
|
+
|
|
|
+ const conversationThreads = $derived(
|
|
|
+ filteredInteractions.map((interaction, idx) => ({
|
|
|
+ ...interaction,
|
|
|
+ thread: buildConversation(interaction, idx)
|
|
|
+ }))
|
|
|
+ );
|
|
|
+
|
|
|
+ function getSentimentColor(sentiment) {
|
|
|
+ switch (sentiment) {
|
|
|
+ case 'CONTENTAMENTO':
|
|
|
+ return 'text-emerald-600 bg-emerald-50 border-emerald-200 dark:text-emerald-400 dark:bg-emerald-400/10 dark:border-emerald-400/20';
|
|
|
+ case 'FRUSTRAÇÃO':
|
|
|
+ return 'text-red-600 bg-red-50 border-red-200 dark:text-red-400 dark:bg-red-400/10 dark:border-red-400/20';
|
|
|
+ case 'NEUTRO':
|
|
|
+ return 'text-slate-600 bg-slate-100 border-slate-200 dark:text-slate-400 dark:bg-slate-400/10 dark:border-slate-400/20';
|
|
|
+ default:
|
|
|
+ return 'text-slate-600 bg-slate-100 border-slate-200 dark:text-slate-400 dark:bg-slate-800 dark:border-slate-700';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function openChat(interaction) {
|
|
|
+ selectedInteraction = interaction;
|
|
|
+ isChatModalOpen = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeChat() {
|
|
|
+ isChatModalOpen = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ selectedInteraction = null;
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<svelte:head>
|
|
|
- <title>Interações Analisadas - Nettown Analytics</title>
|
|
|
+ <title>Interações Analisadas - Nettown Analytics</title>
|
|
|
</svelte:head>
|
|
|
|
|
|
-<div class="space-y-6 max-w-[1600px] mx-auto transition-colors duration-200">
|
|
|
- <!-- Header/Filters -->
|
|
|
- <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
|
|
|
- <h1 class="text-2xl font-bold text-slate-900 dark:text-white transition-colors">Últimas Interações Analisadas</h1>
|
|
|
-
|
|
|
- <div class="flex flex-wrap items-center gap-3">
|
|
|
- <button
|
|
|
- class="px-4 py-2 rounded-lg text-sm font-medium transition-colors border {activeFilter === 'my_clients' ? 'bg-indigo-50 dark:bg-indigo-500/20 text-indigo-700 dark:text-indigo-400 border-indigo-200 dark:border-indigo-500/30 shadow-inner' : 'bg-white dark:bg-[#1e293b] text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-500 shadow-sm dark:shadow-none'}"
|
|
|
- onclick={() => activeFilter = activeFilter === 'my_clients' ? 'all' : 'my_clients'}
|
|
|
- >
|
|
|
- Meus Clientes
|
|
|
- </button>
|
|
|
- <button
|
|
|
- class="px-4 py-2 rounded-lg text-sm font-medium transition-colors border {activeFilter === 'new' ? 'bg-emerald-50 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/30 shadow-inner' : 'bg-white dark:bg-[#1e293b] text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-500 shadow-sm dark:shadow-none'}"
|
|
|
- onclick={() => activeFilter = activeFilter === 'new' ? 'all' : 'new'}
|
|
|
- >
|
|
|
- Relatório Pessoas Novas
|
|
|
- </button>
|
|
|
- <button
|
|
|
- class="px-4 py-2 rounded-lg text-sm font-medium transition-colors border {activeFilter === 'unfinished' ? 'bg-amber-50 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-500/30 shadow-inner' : 'bg-white dark:bg-[#1e293b] text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-500 shadow-sm dark:shadow-none'}"
|
|
|
- onclick={() => activeFilter = activeFilter === 'unfinished' ? 'all' : 'unfinished'}
|
|
|
- >
|
|
|
- Conversas Inacabadas
|
|
|
- </button>
|
|
|
-
|
|
|
- <button class="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-500 text-white transition-colors shadow-sm dark:shadow-none ml-auto sm:ml-0">
|
|
|
+<div class="mx-auto max-w-[1600px] space-y-6 transition-colors duration-200">
|
|
|
+ <!-- Header/Filters -->
|
|
|
+ <div class="mb-8 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
|
|
|
+ <h1 class="text-2xl font-bold text-slate-900 transition-colors dark:text-white">
|
|
|
+ Últimas Interações Analisadas
|
|
|
+ </h1>
|
|
|
+
|
|
|
+ <div class="flex flex-wrap items-center gap-3">
|
|
|
+ <button
|
|
|
+ class="rounded-lg border px-4 py-2 text-sm font-medium transition-colors {activeFilter ===
|
|
|
+ 'my_clients'
|
|
|
+ ? 'border-indigo-200 bg-indigo-50 text-indigo-700 shadow-inner dark:border-indigo-500/30 dark:bg-indigo-500/20 dark:text-indigo-400'
|
|
|
+ : 'border-slate-200 bg-white text-slate-700 shadow-sm hover:border-slate-300 dark:border-slate-700 dark:bg-[#1e293b] dark:text-slate-300 dark:shadow-none dark:hover:border-slate-500'}"
|
|
|
+ onclick={() => (activeFilter = activeFilter === 'my_clients' ? 'all' : 'my_clients')}
|
|
|
+ >
|
|
|
+ Meus Clientes
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="rounded-lg border px-4 py-2 text-sm font-medium transition-colors {activeFilter ===
|
|
|
+ 'new'
|
|
|
+ ? 'border-emerald-200 bg-emerald-50 text-emerald-700 shadow-inner dark:border-emerald-500/30 dark:bg-emerald-500/20 dark:text-emerald-400'
|
|
|
+ : 'border-slate-200 bg-white text-slate-700 shadow-sm hover:border-slate-300 dark:border-slate-700 dark:bg-[#1e293b] dark:text-slate-300 dark:shadow-none dark:hover:border-slate-500'}"
|
|
|
+ onclick={() => (activeFilter = activeFilter === 'new' ? 'all' : 'new')}
|
|
|
+ >
|
|
|
+ Relatório Pessoas Novas
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="rounded-lg border px-4 py-2 text-sm font-medium transition-colors {activeFilter ===
|
|
|
+ 'unfinished'
|
|
|
+ ? 'border-amber-200 bg-amber-50 text-amber-700 shadow-inner dark:border-amber-500/30 dark:bg-amber-500/20 dark:text-amber-400'
|
|
|
+ : 'border-slate-200 bg-white text-slate-700 shadow-sm hover:border-slate-300 dark:border-slate-700 dark:bg-[#1e293b] dark:text-slate-300 dark:shadow-none dark:hover:border-slate-500'}"
|
|
|
+ onclick={() => (activeFilter = activeFilter === 'unfinished' ? 'all' : 'unfinished')}
|
|
|
+ >
|
|
|
+ Conversas Inacabadas
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <!-- <button class="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-500 text-white transition-colors shadow-sm dark:shadow-none ml-auto sm:ml-0">
|
|
|
<Download size={16} />
|
|
|
Download
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Table Container -->
|
|
|
- <div class="bg-white dark:bg-[#1e293b] rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden flex flex-col transition-colors duration-200">
|
|
|
- <div class="p-4 border-b border-slate-200 dark:border-slate-800 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between bg-slate-50 dark:bg-[#1e293b]">
|
|
|
- <div class="relative">
|
|
|
- <Search size={16} class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 dark:text-slate-500" />
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- bind:value={searchQuery}
|
|
|
- placeholder="Buscar cliente..."
|
|
|
- class="w-64 pl-9 pr-4 py-2 bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-lg text-sm text-slate-900 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all shadow-sm dark:shadow-none"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="text-sm text-slate-500 dark:text-slate-400 font-medium">
|
|
|
- Exibindo {conversationThreads.length} conversas
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="overflow-x-auto custom-scrollbar">
|
|
|
- <table class="w-full text-left border-collapse">
|
|
|
- <thead>
|
|
|
- <tr class="bg-slate-100/50 dark:bg-slate-900/50 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider border-b border-slate-200 dark:border-slate-800 transition-colors duration-200">
|
|
|
- <th class="p-4">Cliente</th>
|
|
|
- <th class="p-4">Agente</th>
|
|
|
- <th class="p-4">Sentimento Geral</th>
|
|
|
- <th class="p-4">Score</th>
|
|
|
- <th class="p-4">Aspectos Detectados</th>
|
|
|
- <th class="p-4">Subaspectos Detectados</th>
|
|
|
- <th class="p-4">Data e Hora</th>
|
|
|
- <th class="p-4 text-right">Análise Avançada</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody class="divide-y divide-slate-100 dark:divide-slate-800/50 transition-colors duration-200">
|
|
|
- {#each conversationThreads as item}
|
|
|
- <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors group">
|
|
|
- <td class="p-4">
|
|
|
- <span class="font-bold text-slate-900 dark:text-white">{item.client}</span>
|
|
|
- </td>
|
|
|
- <td class="p-4 text-slate-600 dark:text-slate-300 font-medium">{item.agent === '-' ? 'Time Nettown' : item.agent}</td>
|
|
|
- <td class="p-4">
|
|
|
- <span class="px-2.5 py-1 rounded-md text-xs font-bold border {getSentimentColor(item.sentiment)} transition-colors duration-200">
|
|
|
- {item.sentiment}
|
|
|
- </span>
|
|
|
- </td>
|
|
|
- <td class="p-4 text-slate-700 dark:text-slate-300 font-bold">{item.score}</td>
|
|
|
- <td class="p-4 text-slate-600 dark:text-slate-300 font-medium">{item.aspect}</td>
|
|
|
- <td class="p-4 text-slate-500 dark:text-slate-400">{item.subaspect}</td>
|
|
|
- <td class="p-4 text-slate-500 dark:text-slate-400 text-sm font-medium">{item.datetime}</td>
|
|
|
- <td class="p-4 text-right">
|
|
|
- <button
|
|
|
- onclick={() => openChat(item)}
|
|
|
- class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-indigo-50 hover:bg-indigo-100 dark:bg-indigo-500/10 dark:hover:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-500/20 rounded-md text-sm font-semibold transition-colors shadow-sm dark:shadow-none"
|
|
|
- >
|
|
|
- <Eye size={14} />
|
|
|
- Ver Chat
|
|
|
- </button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- {/each}
|
|
|
-
|
|
|
- {#if conversationThreads.length === 0}
|
|
|
- <tr>
|
|
|
- <td colspan="8" class="p-8 text-center text-slate-500 font-medium">
|
|
|
- Nenhuma interação encontrada.
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- {/if}
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="p-4 border-t border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-[#1e293b] flex items-center justify-center gap-4 transition-colors duration-200">
|
|
|
- <button class="text-sm font-medium text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 disabled:opacity-50" disabled>Anterior</button>
|
|
|
- <span class="text-sm font-bold text-slate-900 dark:text-white">Página 1</span>
|
|
|
- <button class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300">Próxima</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Chat Modal -->
|
|
|
- {#if isChatModalOpen}
|
|
|
- <div class="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6 transition-colors duration-200" role="dialog" aria-modal="true">
|
|
|
- <!-- Backdrop -->
|
|
|
- <div
|
|
|
- class="absolute inset-0 bg-slate-900/60 dark:bg-slate-950/80 backdrop-blur-sm transition-opacity"
|
|
|
- onclick={closeChat}
|
|
|
- onkeydown={(e) => e.key === 'Escape' && closeChat()}
|
|
|
- tabindex="0"
|
|
|
- role="button"
|
|
|
- aria-label="Close modal"
|
|
|
- ></div>
|
|
|
-
|
|
|
- <!-- Modal Content -->
|
|
|
- <div class="relative bg-white dark:bg-[#0f172a] rounded-2xl border border-slate-200 dark:border-slate-800 shadow-2xl w-full max-w-6xl max-h-[90vh] flex flex-col md:flex-row overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
|
|
- <!-- Chat Area -->
|
|
|
- <div class="flex-1 flex flex-col border-r border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-[#0b1120] min-h-[50vh] md:min-h-[600px] transition-colors duration-200">
|
|
|
- <!-- Chat Header -->
|
|
|
- <div class="h-16 px-6 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between bg-white dark:bg-[#1e293b] transition-colors duration-200">
|
|
|
- <div class="flex items-center gap-3">
|
|
|
- <div class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-500 dark:text-slate-400">
|
|
|
- <MessageCircle size={20} />
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="font-bold text-slate-900 dark:text-white">{selectedInteraction?.client}</div>
|
|
|
- <div class="text-xs font-medium text-slate-500 dark:text-slate-400">WhatsApp</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <button
|
|
|
- onclick={closeChat}
|
|
|
- class="md:hidden p-2 text-slate-400 hover:text-slate-700 dark:hover:text-white rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
|
|
|
- >
|
|
|
- <X size={20} />
|
|
|
- </button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Chat Messages -->
|
|
|
- <div class="flex-1 overflow-y-auto p-6 space-y-6 custom-scrollbar">
|
|
|
- <div class="flex justify-center">
|
|
|
- <span class="px-3 py-1 rounded-full bg-white dark:bg-slate-800 text-xs font-bold text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-700 shadow-sm dark:shadow-none">
|
|
|
- ONTEM
|
|
|
- </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- {#each selectedInteraction?.thread ?? [] as msg}
|
|
|
- <div class="flex flex-col {msg.isAgent ? 'items-end' : 'items-start'}">
|
|
|
- <div class="max-w-[80%] {msg.isAgent ? 'bg-indigo-600 text-white rounded-2xl rounded-tr-sm shadow-md shadow-indigo-600/20' : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-transparent rounded-2xl rounded-tl-sm shadow-sm'} p-3.5">
|
|
|
- {#if msg.isAgent}
|
|
|
- <div class="text-[10px] font-bold text-indigo-200 mb-1">Ativadora</div>
|
|
|
- {/if}
|
|
|
- <p class="text-sm leading-relaxed whitespace-pre-wrap">{msg.text}</p>
|
|
|
- <div class="text-[10px] text-right mt-1.5 {msg.isAgent ? 'opacity-70' : 'text-slate-400 font-medium'}">{msg.time}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {/each}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Analysis Area -->
|
|
|
- <div class="w-full md:w-[400px] flex flex-col bg-white dark:bg-[#1e293b] shrink-0 transition-colors duration-200">
|
|
|
- <div class="h-16 px-6 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between">
|
|
|
- <h2 class="font-bold text-slate-900 dark:text-white text-lg">Relatório</h2>
|
|
|
- <button
|
|
|
- onclick={closeChat}
|
|
|
- class="hidden md:flex px-3 py-1.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-md text-sm font-bold transition-colors"
|
|
|
- >
|
|
|
- Fechar
|
|
|
- </button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flex-1 overflow-y-auto p-6 space-y-8 custom-scrollbar">
|
|
|
- <!-- Mini chart placeholder -->
|
|
|
- <div class="h-32 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 relative p-4 flex items-end overflow-hidden shadow-inner">
|
|
|
- <!-- Decorative chart lines matching the UI -->
|
|
|
- <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none">
|
|
|
- <path d="M0,20 L40,100 L200,100 L300,100 L350,60" fill="none" stroke="#38bdf8" stroke-width="2" vector-effect="non-scaling-stroke" />
|
|
|
- <path d="M0,60 L40,100 L200,100 L300,100 L350,40" fill="none" stroke="#10b981" stroke-width="2" vector-effect="non-scaling-stroke" />
|
|
|
- <!-- Dots -->
|
|
|
- <circle cx="0" cy="20" r="3" fill="#38bdf8" />
|
|
|
- <circle cx="40" cy="100" r="3" fill="#38bdf8" />
|
|
|
- <circle cx="120" cy="100" r="3" fill="#38bdf8" />
|
|
|
- <circle cx="200" cy="100" r="3" fill="#38bdf8" />
|
|
|
- <circle cx="300" cy="100" r="3" fill="#38bdf8" />
|
|
|
- <circle cx="350" cy="60" r="3" fill="#38bdf8" />
|
|
|
- </svg>
|
|
|
- <div class="w-full flex justify-between text-[10px] font-medium text-slate-400 dark:text-slate-500 absolute bottom-2 left-0 px-4">
|
|
|
- <span>22:58</span>
|
|
|
- <span>23:00</span>
|
|
|
- <span>23:02</span>
|
|
|
- <span>23:04</span>
|
|
|
- <span>23:06</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="grid grid-cols-2 gap-y-6 gap-x-4">
|
|
|
- <div>
|
|
|
- <div class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1">MÉDIA RESPOSTA</div>
|
|
|
- <div class="text-lg font-extrabold text-slate-900 dark:text-white">04:03</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1">DURAÇÃO TOTAL</div>
|
|
|
- <div class="text-lg font-extrabold text-slate-900 dark:text-white">08:28</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1">MÉDIA AGENTE</div>
|
|
|
- <div class="text-lg font-extrabold text-slate-900 dark:text-white">00:00</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1">MÉDIA CLIENTE</div>
|
|
|
- <div class="text-lg font-extrabold text-slate-900 dark:text-white">08:05</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="space-y-4">
|
|
|
- <div>
|
|
|
- <div class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1">ASPECTO PRINCIPAL</div>
|
|
|
- <div class="text-base font-semibold text-indigo-600 dark:text-indigo-400">{selectedInteraction?.aspect || 'Atendimento'}</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1">SUBASPECTO</div>
|
|
|
- <div class="text-base font-semibold text-slate-700 dark:text-slate-200">{selectedInteraction?.subaspect || 'Informativo'}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="grid grid-cols-2 gap-4 pt-4 border-t border-slate-200 dark:border-slate-800">
|
|
|
- <div>
|
|
|
- <div class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1">ÚLTIMA MENSAGEM</div>
|
|
|
- <div class="text-sm font-semibold text-slate-900 dark:text-white">Cliente</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1">CONSECUTIVAS</div>
|
|
|
- <div class="text-sm font-semibold text-slate-900 dark:text-white">Não</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="text-center pt-4">
|
|
|
- <button class="text-sm font-bold text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 transition-colors">
|
|
|
- Detalhes Extraídos
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-{/if}
|
|
|
+ </button> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Table Container -->
|
|
|
+ <div
|
|
|
+ class="flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-colors duration-200 dark:border-slate-800 dark:bg-[#1e293b]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="flex flex-col gap-3 border-b border-slate-200 bg-slate-50 p-4 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800 dark:bg-[#1e293b]"
|
|
|
+ >
|
|
|
+ <div class="relative">
|
|
|
+ <Search
|
|
|
+ size={16}
|
|
|
+ class="absolute top-1/2 left-3 -translate-y-1/2 text-slate-400 dark:text-slate-500"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ bind:value={searchQuery}
|
|
|
+ placeholder="Buscar cliente..."
|
|
|
+ class="w-64 rounded-lg border border-slate-300 bg-white py-2 pr-4 pl-9 text-sm text-slate-900 placeholder-slate-400 shadow-sm transition-all focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:placeholder-slate-500 dark:shadow-none"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="text-sm font-medium text-slate-500 dark:text-slate-400">
|
|
|
+ Exibindo {conversationThreads.length} conversas
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="custom-scrollbar overflow-x-auto">
|
|
|
+ <table class="w-full border-collapse text-left">
|
|
|
+ <thead>
|
|
|
+ <tr
|
|
|
+ class="border-b border-slate-200 bg-slate-100/50 text-xs font-semibold tracking-wider text-slate-500 uppercase transition-colors duration-200 dark:border-slate-800 dark:bg-slate-900/50 dark:text-slate-400"
|
|
|
+ >
|
|
|
+ <th class="p-4">Cliente</th>
|
|
|
+ <th class="p-4">Agente</th>
|
|
|
+ <th class="p-4">Sentimento Geral</th>
|
|
|
+ <th class="p-4">Score</th>
|
|
|
+ <th class="p-4">Aspectos Detectados</th>
|
|
|
+ <th class="p-4">Subaspectos Detectados</th>
|
|
|
+ <th class="p-4">Data e Hora</th>
|
|
|
+ <th class="p-4 text-right">Análise Avançada</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody
|
|
|
+ class="divide-y divide-slate-100 transition-colors duration-200 dark:divide-slate-800/50"
|
|
|
+ >
|
|
|
+ {#each conversationThreads as item}
|
|
|
+ <tr class="group transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/30">
|
|
|
+ <td class="p-4">
|
|
|
+ <span class="font-bold text-slate-900 dark:text-white">{item.client}</span>
|
|
|
+ </td>
|
|
|
+ <td class="p-4 font-medium text-slate-600 dark:text-slate-300"
|
|
|
+ >{item.agent === '-' ? 'Time Nettown' : item.agent}</td
|
|
|
+ >
|
|
|
+ <td class="p-4">
|
|
|
+ <span
|
|
|
+ class="rounded-md border px-2.5 py-1 text-xs font-bold {getSentimentColor(
|
|
|
+ item.sentiment
|
|
|
+ )} transition-colors duration-200"
|
|
|
+ >
|
|
|
+ {item.sentiment}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ <td class="p-4 font-bold text-slate-700 dark:text-slate-300">{item.score}</td>
|
|
|
+ <td class="p-4 font-medium text-slate-600 dark:text-slate-300">{item.aspect}</td>
|
|
|
+ <td class="p-4 text-slate-500 dark:text-slate-400">{item.subaspect}</td>
|
|
|
+ <td class="p-4 text-sm font-medium text-slate-500 dark:text-slate-400"
|
|
|
+ >{item.datetime}</td
|
|
|
+ >
|
|
|
+ <td class="p-4 text-right">
|
|
|
+ <button
|
|
|
+ onclick={() => openChat(item)}
|
|
|
+ class="inline-flex items-center gap-1.5 rounded-md border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-sm font-semibold text-indigo-600 shadow-sm transition-colors hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-400 dark:shadow-none dark:hover:bg-indigo-500/20"
|
|
|
+ >
|
|
|
+ <Eye size={14} />
|
|
|
+ Ver Chat
|
|
|
+ </button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ {/each}
|
|
|
+
|
|
|
+ {#if conversationThreads.length === 0}
|
|
|
+ <tr>
|
|
|
+ <td colspan="8" class="p-8 text-center font-medium text-slate-500">
|
|
|
+ Nenhuma interação encontrada.
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ {/if}
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="flex items-center justify-center gap-4 border-t border-slate-200 bg-slate-50 p-4 transition-colors duration-200 dark:border-slate-800 dark:bg-[#1e293b]"
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ class="text-sm font-medium text-slate-400 hover:text-slate-600 disabled:opacity-50 dark:text-slate-500 dark:hover:text-slate-300"
|
|
|
+ disabled>Anterior</button
|
|
|
+ >
|
|
|
+ <span class="text-sm font-bold text-slate-900 dark:text-white">Página 1</span>
|
|
|
+ <button
|
|
|
+ class="text-sm font-medium text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
|
+ >Próxima</button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Chat Modal -->
|
|
|
+ {#if isChatModalOpen}
|
|
|
+ <div
|
|
|
+ class="fixed inset-0 z-[100] flex items-center justify-center p-4 transition-colors duration-200 sm:p-6"
|
|
|
+ role="dialog"
|
|
|
+ aria-modal="true"
|
|
|
+ >
|
|
|
+ <!-- Backdrop -->
|
|
|
+ <div
|
|
|
+ class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity dark:bg-slate-950/80"
|
|
|
+ onclick={closeChat}
|
|
|
+ onkeydown={(e) => e.key === 'Escape' && closeChat()}
|
|
|
+ tabindex="0"
|
|
|
+ role="button"
|
|
|
+ aria-label="Close modal"
|
|
|
+ ></div>
|
|
|
+
|
|
|
+ <!-- Modal Content -->
|
|
|
+ <div
|
|
|
+ class="animate-in fade-in zoom-in-95 relative flex max-h-[90vh] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl duration-200 md:flex-row dark:border-slate-800 dark:bg-[#0f172a]"
|
|
|
+ >
|
|
|
+ <!-- Chat Area -->
|
|
|
+ <div
|
|
|
+ class="flex min-h-[50vh] flex-1 flex-col border-r border-slate-200 bg-slate-50 transition-colors duration-200 md:min-h-[600px] dark:border-slate-800 dark:bg-[#0b1120]"
|
|
|
+ >
|
|
|
+ <!-- Chat Header -->
|
|
|
+ <div
|
|
|
+ class="flex h-16 items-center justify-between border-b border-slate-200 bg-white px-6 transition-colors duration-200 dark:border-slate-800 dark:bg-[#1e293b]"
|
|
|
+ >
|
|
|
+ <div class="flex items-center gap-3">
|
|
|
+ <div
|
|
|
+ class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-400"
|
|
|
+ >
|
|
|
+ <MessageCircle size={20} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="font-bold text-slate-900 dark:text-white">
|
|
|
+ {selectedInteraction?.client}
|
|
|
+ </div>
|
|
|
+ <div class="text-xs font-medium text-slate-500 dark:text-slate-400">WhatsApp</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ onclick={closeChat}
|
|
|
+ class="rounded-lg p-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700 md:hidden dark:hover:bg-slate-800 dark:hover:text-white"
|
|
|
+ >
|
|
|
+ <X size={20} />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Chat Messages -->
|
|
|
+ <div class="custom-scrollbar flex-1 space-y-6 overflow-y-auto p-6">
|
|
|
+ <div class="flex justify-center">
|
|
|
+ <span
|
|
|
+ class="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-bold text-slate-500 shadow-sm dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:shadow-none"
|
|
|
+ >
|
|
|
+ ONTEM
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {#each selectedInteraction?.thread ?? [] as msg}
|
|
|
+ <div class="flex flex-col {msg.isAgent ? 'items-end' : 'items-start'}">
|
|
|
+ <div
|
|
|
+ class="max-w-[80%] {msg.isAgent
|
|
|
+ ? 'rounded-2xl rounded-tr-sm bg-indigo-600 text-white shadow-md shadow-indigo-600/20'
|
|
|
+ : 'rounded-2xl rounded-tl-sm border border-slate-200 bg-white text-slate-700 shadow-sm dark:border-transparent dark:bg-slate-800 dark:text-slate-200'} p-3.5"
|
|
|
+ >
|
|
|
+ {#if msg.isAgent}
|
|
|
+ <div class="mb-1 text-[10px] font-bold text-indigo-200">Ativadora</div>
|
|
|
+ {/if}
|
|
|
+ <p class="text-sm leading-relaxed whitespace-pre-wrap">{msg.text}</p>
|
|
|
+ <div
|
|
|
+ class="mt-1.5 text-right text-[10px] {msg.isAgent
|
|
|
+ ? 'opacity-70'
|
|
|
+ : 'font-medium text-slate-400'}"
|
|
|
+ >
|
|
|
+ {msg.time}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Analysis Area -->
|
|
|
+ <div
|
|
|
+ class="flex w-full shrink-0 flex-col bg-white transition-colors duration-200 md:w-[400px] dark:bg-[#1e293b]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="flex h-16 items-center justify-between border-b border-slate-200 px-6 dark:border-slate-800"
|
|
|
+ >
|
|
|
+ <h2 class="text-lg font-bold text-slate-900 dark:text-white">Relatório</h2>
|
|
|
+ <button
|
|
|
+ onclick={closeChat}
|
|
|
+ class="hidden rounded-md bg-slate-100 px-3 py-1.5 text-sm font-bold text-slate-700 transition-colors hover:bg-slate-200 md:flex dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
|
|
|
+ >
|
|
|
+ Fechar
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="custom-scrollbar flex-1 space-y-8 overflow-y-auto p-6">
|
|
|
+ <!-- Mini chart placeholder -->
|
|
|
+ <div
|
|
|
+ class="relative flex h-32 items-end overflow-hidden rounded-lg border border-slate-200 bg-slate-50 p-4 shadow-inner dark:border-slate-800 dark:bg-slate-900"
|
|
|
+ >
|
|
|
+ <!-- Decorative chart lines matching the UI -->
|
|
|
+ <svg class="absolute inset-0 h-full w-full" preserveAspectRatio="none">
|
|
|
+ <path
|
|
|
+ d="M0,20 L40,100 L200,100 L300,100 L350,60"
|
|
|
+ fill="none"
|
|
|
+ stroke="#38bdf8"
|
|
|
+ stroke-width="2"
|
|
|
+ vector-effect="non-scaling-stroke"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ d="M0,60 L40,100 L200,100 L300,100 L350,40"
|
|
|
+ fill="none"
|
|
|
+ stroke="#10b981"
|
|
|
+ stroke-width="2"
|
|
|
+ vector-effect="non-scaling-stroke"
|
|
|
+ />
|
|
|
+ <!-- Dots -->
|
|
|
+ <circle cx="0" cy="20" r="3" fill="#38bdf8" />
|
|
|
+ <circle cx="40" cy="100" r="3" fill="#38bdf8" />
|
|
|
+ <circle cx="120" cy="100" r="3" fill="#38bdf8" />
|
|
|
+ <circle cx="200" cy="100" r="3" fill="#38bdf8" />
|
|
|
+ <circle cx="300" cy="100" r="3" fill="#38bdf8" />
|
|
|
+ <circle cx="350" cy="60" r="3" fill="#38bdf8" />
|
|
|
+ </svg>
|
|
|
+ <div
|
|
|
+ class="absolute bottom-2 left-0 flex w-full justify-between px-4 text-[10px] font-medium text-slate-400 dark:text-slate-500"
|
|
|
+ >
|
|
|
+ <span>22:58</span>
|
|
|
+ <span>23:00</span>
|
|
|
+ <span>23:02</span>
|
|
|
+ <span>23:04</span>
|
|
|
+ <span>23:06</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid grid-cols-2 gap-x-4 gap-y-6">
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="mb-1 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400"
|
|
|
+ >
|
|
|
+ MÉDIA RESPOSTA
|
|
|
+ </div>
|
|
|
+ <div class="text-lg font-extrabold text-slate-900 dark:text-white">04:03</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="mb-1 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400"
|
|
|
+ >
|
|
|
+ DURAÇÃO TOTAL
|
|
|
+ </div>
|
|
|
+ <div class="text-lg font-extrabold text-slate-900 dark:text-white">08:28</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="mb-1 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400"
|
|
|
+ >
|
|
|
+ MÉDIA AGENTE
|
|
|
+ </div>
|
|
|
+ <div class="text-lg font-extrabold text-slate-900 dark:text-white">00:00</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="mb-1 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400"
|
|
|
+ >
|
|
|
+ MÉDIA CLIENTE
|
|
|
+ </div>
|
|
|
+ <div class="text-lg font-extrabold text-slate-900 dark:text-white">08:05</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="space-y-4">
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="mb-1 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400"
|
|
|
+ >
|
|
|
+ ASPECTO PRINCIPAL
|
|
|
+ </div>
|
|
|
+ <div class="text-base font-semibold text-indigo-600 dark:text-indigo-400">
|
|
|
+ {selectedInteraction?.aspect || 'Atendimento'}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="mb-1 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400"
|
|
|
+ >
|
|
|
+ SUBASPECTO
|
|
|
+ </div>
|
|
|
+ <div class="text-base font-semibold text-slate-700 dark:text-slate-200">
|
|
|
+ {selectedInteraction?.subaspect || 'Informativo'}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="grid grid-cols-2 gap-4 border-t border-slate-200 pt-4 dark:border-slate-800"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="mb-1 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400"
|
|
|
+ >
|
|
|
+ ÚLTIMA MENSAGEM
|
|
|
+ </div>
|
|
|
+ <div class="text-sm font-semibold text-slate-900 dark:text-white">Cliente</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="mb-1 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400"
|
|
|
+ >
|
|
|
+ CONSECUTIVAS
|
|
|
+ </div>
|
|
|
+ <div class="text-sm font-semibold text-slate-900 dark:text-white">Não</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="pt-4 text-center">
|
|
|
+ <button
|
|
|
+ class="text-sm font-bold text-indigo-600 transition-colors hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
|
+ >
|
|
|
+ Detalhes Extraídos
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
</div>
|
gdias