SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: remove outdated avatar and chat update documentation files; streamline project structure for improved maintainability

Browse Source
This commit is contained in:
deyvisonwanderley
2025-10-30 09:25:53 -03:00
parent ef20d599eb
commit 21b41121db
24 changed files with 829 additions and 4573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
apps/web/src/lib/components/Sidebar.svelte
View File

@@ -163,9 +163,25 @@
</label>
</div>
<div class="flex-1 flex items-center gap-4 lg:gap-6">
<!-- Logo MODERNO do Governo -->
<div class="avatar">
<div class="w-16 lg:w-20 rounded-lg shadow-md bg-white p-2">
<img src={logo} alt="Logo do Governo de PE" class="w-full h-full object-contain" />
<div
class="w-16 lg:w-20 rounded-2xl shadow-xl p-2 relative overflow-hidden group transition-all duration-300 hover:scale-105"
style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid rgba(102, 126, 234, 0.1);"
>
<!-- Efeito de brilho no hover -->
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<!-- Logo -->
<img
src={logo}
alt="Logo do Governo de PE"
class="w-full h-full object-contain relative z-10 transition-transform duration-300 group-hover:scale-105"
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));"
/>
<!-- Brilho sutil no canto -->
<div class="absolute top-0 right-0 w-8 h-8 bg-gradient-to-br from-white/40 to-transparent rounded-bl-full opacity-70"></div>
</div>
</div>
<div class="flex flex-col">
@@ -185,26 +201,33 @@
<span class="text-xs text-base-content/60">{authStore.usuario?.role.nome}</span>
</div>
<div class="dropdown dropdown-end">
<!-- Botão de Perfil ULTRA MODERNO -->
<button
type="button"
tabindex="0"
class="btn btn-primary btn-circle btn-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden group transition-all duration-300 hover:scale-105"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
aria-label="Menu do usuário"
>
<!-- Efeito de brilho no hover -->
<div class="absolute inset-0 bg-gradient-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<!-- Anel de pulso sutil -->
<div class="absolute inset-0 rounded-2xl" style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></div>
<!-- Ícone de usuário moderno -->
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2.5"
fill="currentColor"
class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
<path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
</svg>
<!-- Badge de status online -->
<div class="absolute top-1 right-1 w-3 h-3 bg-success rounded-full border-2 border-white shadow-lg" style="animation: pulse-dot 2s ease-in-out infinite;"></div>
</button>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow-xl bg-base-100 rounded-box w-52 mt-4 border border-primary/20">
<li class="menu-title">
@@ -550,3 +573,29 @@
<ChatWidget />
{/if}
<style>
/* Animação de pulso sutil para o anel do botão de perfil */
@keyframes pulse-ring-subtle {
0%, 100% {
opacity: 0.1;
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(1.05);
}
}
/* Animação de pulso para o badge de status online */
@keyframes pulse-dot {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
}
</style>

41
apps/web/src/lib/components/chat/ChatList.svelte
View File

@@ -17,11 +17,20 @@
let searchQuery = $state("");
// Debug: monitorar carregamento de dados
$effect(() => {
console.log("📊 [ChatList] Usuários carregados:", usuarios?.data?.length || 0);
console.log("👤 [ChatList] Meu perfil:", meuPerfil?.data?.nome || "Carregando...");
console.log("📋 [ChatList] Lista completa:", usuarios?.data);
});
const usuariosFiltrados = $derived.by(() => {
if (!usuarios?.data || !Array.isArray(usuarios.data) || !meuPerfil?.data) return [];
const meuId = meuPerfil.data._id;
// Filtrar o próprio usuário da lista
let listaFiltrada = usuarios.data.filter((u: any) => u._id !== meuPerfil.data._id);
let listaFiltrada = usuarios.data.filter((u: any) => u._id !== meuId);
// Aplicar busca por nome/email/matrícula
if (searchQuery.trim()) {
@@ -56,18 +65,41 @@
}
}
let processando = $state(false);
async function handleClickUsuario(usuario: any) {
if (processando) {
console.log("⏳ Já está processando uma ação, aguarde...");
return;
}
try {
processando = true;
console.log("🔄 Clicou no usuário:", usuario.nome, "ID:", usuario._id);
// Criar ou buscar conversa individual com este usuário
console.log("📞 Chamando mutation criarOuBuscarConversaIndividual...");
const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
outroUsuarioId: usuario._id,
});
console.log("✅ Conversa criada/encontrada. ID:", conversaId);
// Abrir a conversa
console.log("📂 Abrindo conversa...");
abrirConversa(conversaId as any);
console.log("✅ Conversa aberta com sucesso!");
} catch (error) {
console.error("Erro ao abrir conversa:", error);
alert("Erro ao abrir conversa");
console.error("❌ Erro ao abrir conversa:", error);
console.error("Detalhes do erro:", {
message: error instanceof Error ? error.message : String(error),
stack: error instanceof Error ? error.stack : undefined,
usuario: usuario,
});
alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
} finally {
processando = false;
}
}
@@ -123,8 +155,9 @@
{#each usuariosFiltrados as usuario (usuario._id)}
<button
type="button"
class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3"
class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando ? 'opacity-50 cursor-wait' : 'cursor-pointer'}"
onclick={() => handleClickUsuario(usuario)}
disabled={processando}
>
<!-- Avatar -->
<div class="relative flex-shrink-0">

343
apps/web/src/lib/components/chat/ChatWidget.svelte
View File

@@ -19,23 +19,24 @@
let isMinimized = $state(false);
let activeConversation = $state<string | null>(null);
// Posição do widget (arrastável)
let position = $state({ x: 0, y: 0 });
let isDragging = $state(false);
let dragStart = $state({ x: 0, y: 0 });
let isAnimating = $state(false);
// Sincronizar com stores
$effect(() => {
isOpen = $chatAberto;
console.log("ChatWidget - isOpen:", isOpen);
});
$effect(() => {
isMinimized = $chatMinimizado;
console.log("ChatWidget - isMinimized:", isMinimized);
});
$effect(() => {
activeConversation = $conversaAtiva;
});
// Debug inicial
console.log("ChatWidget montado - isOpen:", isOpen, "isMinimized:", isMinimized);
function handleToggle() {
if (isOpen && !isMinimized) {
@@ -56,125 +57,279 @@
function handleMaximize() {
maximizarChat();
}
// Funcionalidade de arrastar
function handleMouseDown(e: MouseEvent) {
if (e.button !== 0) return; // Apenas botão esquerdo
isDragging = true;
dragStart = {
x: e.clientX - position.x,
y: e.clientY - position.y,
};
document.body.classList.add('dragging');
e.preventDefault();
}
function handleMouseMove(e: MouseEvent) {
if (!isDragging) return;
const newX = e.clientX - dragStart.x;
const newY = e.clientY - dragStart.y;
// Dimensões do widget
const widgetWidth = isOpen && !isMinimized ? 440 : 72;
const widgetHeight = isOpen && !isMinimized ? 680 : 72;
// Limites da tela com margem de segurança
const minX = -(widgetWidth - 100); // Permitir até 100px visíveis
const maxX = window.innerWidth - 100; // Manter 100px dentro da tela
const minY = -(widgetHeight - 100);
const maxY = window.innerHeight - 100;
position = {
x: Math.max(minX, Math.min(newX, maxX)),
y: Math.max(minY, Math.min(newY, maxY)),
};
}
function handleMouseUp() {
if (isDragging) {
isDragging = false;
document.body.classList.remove('dragging');
// Garantir que está dentro dos limites ao soltar
ajustarPosicao();
}
}
function ajustarPosicao() {
isAnimating = true;
// Dimensões do widget
const widgetWidth = isOpen && !isMinimized ? 440 : 72;
const widgetHeight = isOpen && !isMinimized ? 680 : 72;
// Verificar se está fora dos limites
let newX = position.x;
let newY = position.y;
// Ajustar X
if (newX < -(widgetWidth - 100)) {
newX = -(widgetWidth - 100);
} else if (newX > window.innerWidth - 100) {
newX = window.innerWidth - 100;
}
// Ajustar Y
if (newY < -(widgetHeight - 100)) {
newY = -(widgetHeight - 100);
} else if (newY > window.innerHeight - 100) {
newY = window.innerHeight - 100;
}
position = { x: newX, y: newY };
setTimeout(() => {
isAnimating = false;
}, 300);
}
// Event listeners globais
if (typeof window !== 'undefined') {
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
}
</script>
<!-- Botão flutuante (quando fechado ou minimizado) -->
<!-- Botão flutuante MODERNO E ARRASTÁVEL -->
{#if !isOpen || isMinimized}
<button
type="button"
class="fixed btn btn-circle btn-lg shadow-2xl hover:shadow-primary/40 hover:scale-110 transition-all duration-500 group relative border-0 bg-gradient-to-br from-primary via-primary to-primary/80"
style="z-index: 99999 !important; width: 4.5rem; height: 4.5rem; bottom: 1.5rem !important; right: 1.5rem !important; position: fixed !important;"
class="fixed group relative border-0 backdrop-blur-xl"
style="
z-index: 99999 !important;
width: 4.5rem;
height: 4.5rem;
bottom: {position.y === 0 ? '1.5rem' : `${window.innerHeight - position.y - 72}px`};
right: {position.x === 0 ? '1.5rem' : `${window.innerWidth - position.x - 72}px`};
position: fixed !important;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
box-shadow:
0 20px 60px -10px rgba(102, 126, 234, 0.5),
0 10px 30px -5px rgba(118, 75, 162, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
border-radius: 50%;
cursor: {isDragging ? 'grabbing' : 'grab'};
transform: {isDragging ? 'scale(1.05)' : 'scale(1)'};
transition: {isAnimating ? 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'transform 0.2s, box-shadow 0.3s'};
"
onclick={handleToggle}
onmousedown={handleMouseDown}
aria-label="Abrir chat"
>
<!-- Anel pulsante interno -->
<div class="absolute inset-0 rounded-full bg-white/10 group-hover:scale-95 transition-transform duration-500"></div>
<!-- Anel de brilho rotativo -->
<div class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"
style="background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); animation: rotate 3s linear infinite;">
</div>
<!-- Ícone de chat premium -->
<!-- Ondas de pulso -->
<div class="absolute inset-0 rounded-full" style="animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></div>
<!-- Ícone de chat moderno com efeito 3D -->
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
fill="none"
stroke="currentColor"
class="w-9 h-9 relative z-10 text-white group-hover:scale-110 transition-all duration-500"
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-7 h-7 relative z-10 text-white group-hover:scale-110 transition-all duration-500"
style="filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
/>
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
<circle cx="9" cy="10" r="1" fill="currentColor"/>
<circle cx="12" cy="10" r="1" fill="currentColor"/>
<circle cx="15" cy="10" r="1" fill="currentColor"/>
</svg>
<!-- Badge premium com animação -->
{#if count && count > 0}
<!-- Badge ULTRA PREMIUM com gradiente e brilho -->
{#if count?.data && count.data > 0}
<span
class="absolute -top-1.5 -right-1.5 flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-red-500 via-error to-red-600 text-white text-xs font-black shadow-2xl ring-4 ring-white z-20"
style="animation: badge-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
class="absolute -top-1 -right-1 flex h-8 w-8 items-center justify-center rounded-full text-white text-xs font-black z-20"
style="
background: linear-gradient(135deg, #ff416c, #ff4b2b);
box-shadow:
0 8px 24px -4px rgba(255, 65, 108, 0.6),
0 4px 12px -2px rgba(255, 75, 43, 0.4),
0 0 0 3px rgba(255, 255, 255, 0.3),
0 0 0 5px rgba(255, 65, 108, 0.2);
animation: badge-bounce 2s ease-in-out infinite;
"
>
{count > 9 ? "9+" : count}
{count.data > 9 ? "9+" : count.data}
</span>
{/if}
<!-- Indicador de arrastável -->
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 flex gap-1 opacity-50 group-hover:opacity-100 transition-opacity">
<div class="w-1 h-1 rounded-full bg-white"></div>
<div class="w-1 h-1 rounded-full bg-white"></div>
<div class="w-1 h-1 rounded-full bg-white"></div>
</div>
</button>
{/if}
<!-- Janela do Chat -->
<!-- Janela do Chat ULTRA MODERNA E ARRASTÁVEL -->
{#if isOpen && !isMinimized}
<div
class="fixed flex flex-col bg-base-100 rounded-2xl shadow-2xl border border-base-300 overflow-hidden
w-[400px] h-[600px] max-w-[calc(100vw-3rem)] max-h-[calc(100vh-3rem)]
md:w-[400px] md:h-[600px]
sm:w-full sm:h-full sm:bottom-0 sm:right-0 sm:rounded-none sm:max-w-full sm:max-h-full"
style="z-index: 99999 !important; animation: slideIn 0.3s ease-out; bottom: 1.5rem !important; right: 1.5rem !important; position: fixed !important;"
class="fixed flex flex-col overflow-hidden backdrop-blur-2xl"
style="
z-index: 99999 !important;
bottom: {position.y === 0 ? '1.5rem' : `${window.innerHeight - position.y - 680}px`};
right: {position.x === 0 ? '1.5rem' : `${window.innerWidth - position.x - 440}px`};
width: 440px;
height: 680px;
max-width: calc(100vw - 3rem);
max-height: calc(100vh - 3rem);
position: fixed !important;
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(249,250,251,0.98) 100%);
border-radius: 24px;
box-shadow:
0 32px 64px -12px rgba(0, 0, 0, 0.15),
0 16px 32px -8px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
animation: slideInScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: {isAnimating ? 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'none'};
"
>
<!-- Header Premium -->
<!-- Header ULTRA PREMIUM com gradiente glassmorphism -->
<div
class="flex items-center justify-between px-5 py-4 bg-gradient-to-r from-primary via-primary to-primary/90 text-white border-b border-white/10 shadow-lg"
class="flex items-center justify-between px-6 py-5 text-white relative overflow-hidden"
style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
box-shadow: 0 8px 32px -4px rgba(102, 126, 234, 0.3);
cursor: {isDragging ? 'grabbing' : 'grab'};
"
onmousedown={handleMouseDown}
role="button"
tabindex="0"
aria-label="Arrastar janela do chat"
>
<h2 class="text-lg font-bold flex items-center gap-3">
<!-- Ícone premium do chat -->
<div class="relative">
<div class="absolute inset-0 bg-white/20 rounded-lg blur-md"></div>
<!-- Efeitos de fundo animados -->
<div class="absolute inset-0 opacity-30" style="background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.3) 0%, transparent 50%);"></div>
<div class="absolute inset-0 opacity-20" style="background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); animation: shimmer 3s infinite;"></div>
<!-- Título com ícone moderno 3D -->
<h2 class="text-xl font-bold flex items-center gap-3 relative z-10">
<!-- Ícone de chat com efeito glassmorphism -->
<div class="relative flex items-center justify-center w-10 h-10 rounded-xl" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.2) inset;">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
fill="none"
stroke="currentColor"
class="w-7 h-7 relative z-10"
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5"
style="filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
/>
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
<line x1="9" y1="10" x2="15" y2="10"/>
<line x1="9" y1="14" x2="13" y2="14"/>
</svg>
</div>
<span class="tracking-wide" style="text-shadow: 0 2px 4px rgba(0,0,0,0.2);">Mensagens</span>
<span class="tracking-wide font-extrabold" style="text-shadow: 0 2px 8px rgba(0,0,0,0.3); letter-spacing: 0.02em;">Mensagens</span>
</h2>
<div class="flex items-center gap-1">
<!-- Botão minimizar premium -->
<!-- Botões de controle modernos -->
<div class="flex items-center gap-2 relative z-10">
<!-- Botão minimizar MODERNO -->
<button
type="button"
class="btn btn-ghost btn-sm btn-circle hover:bg-white/20 transition-all duration-300 group"
class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden"
style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
onclick={handleMinimize}
aria-label="Minimizar"
>
<div class="absolute inset-0 bg-white/0 group-hover:bg-white/20 transition-colors duration-300"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
fill="none"
stroke="currentColor"
class="w-5 h-5 group-hover:scale-110 transition-transform"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5 relative z-10 group-hover:scale-110 transition-transform duration-300"
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
<!-- Botão fechar premium -->
<!-- Botão fechar MODERNO -->
<button
type="button"
class="btn btn-ghost btn-sm btn-circle hover:bg-error/20 hover:text-error-content transition-all duration-300 group"
class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden"
style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
onclick={handleClose}
aria-label="Fechar"
>
<div class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/30 transition-colors duration-300"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
fill="none"
stroke="currentColor"
class="w-5 h-5 group-hover:scale-110 group-hover:rotate-90 transition-all duration-300"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5 relative z-10 group-hover:scale-110 group-hover:rotate-90 transition-all duration-300"
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
/>
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
@@ -192,26 +347,68 @@
{/if}
<style>
@keyframes badge-pulse {
/* Animação do badge com bounce suave */
@keyframes badge-bounce {
0%, 100% {
transform: scale(1);
opacity: 1;
transform: scale(1) translateY(0);
}
50% {
transform: scale(1.15);
opacity: 0.9;
transform: scale(1.08) translateY(-2px);
}
}
@keyframes slideIn {
from {
/* Animação de entrada da janela com escala e bounce */
@keyframes slideInScale {
0% {
opacity: 0;
transform: translateY(20px) scale(0.95);
transform: translateY(30px) scale(0.9);
}
to {
60% {
transform: translateY(-5px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Ondas de pulso para o botão flutuante */
@keyframes pulse-ring {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.5);
}
50% {
box-shadow: 0 0 0 15px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
/* Rotação para anel de brilho */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Efeito shimmer para o header */
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Suavizar transições */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>

54
apps/web/src/lib/components/chat/ChatWindow.svelte
View File

@@ -6,6 +6,7 @@
import MessageList from "./MessageList.svelte";
import MessageInput from "./MessageInput.svelte";
import UserStatusBadge from "./UserStatusBadge.svelte";
import UserAvatar from "./UserAvatar.svelte";
import ScheduleMessageModal from "./ScheduleMessageModal.svelte";
interface Props {
@@ -19,8 +20,17 @@
const conversas = useQuery(api.chat.listarConversas, {});
const conversa = $derived(() => {
if (!conversas) return null;
return conversas.find((c: any) => c._id === conversaId);
console.log("🔍 [ChatWindow] Buscando conversa ID:", conversaId);
console.log("📋 [ChatWindow] Conversas disponíveis:", conversas?.data);
if (!conversas?.data || !Array.isArray(conversas.data)) {
console.log("⚠️ [ChatWindow] conversas.data não é um array ou está vazio");
return null;
}
const encontrada = conversas.data.find((c: any) => c._id === conversaId);
console.log("✅ [ChatWindow] Conversa encontrada:", encontrada);
return encontrada;
});
function getNomeConversa(): string {
@@ -89,11 +99,20 @@
<!-- Avatar e Info -->
<div class="relative flex-shrink-0">
<div
class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-xl"
>
{getAvatarConversa()}
</div>
{#if conversa() && conversa()?.tipo === "individual" && conversa()?.outroUsuario}
<UserAvatar
avatar={conversa()?.outroUsuario?.avatar}
fotoPerfilUrl={conversa()?.outroUsuario?.fotoPerfilUrl}
nome={conversa()?.outroUsuario?.nome || "Usuário"}
size="md"
/>
{:else}
<div
class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-xl"
>
{getAvatarConversa()}
</div>
{/if}
{#if getStatusConversa()}
<div class="absolute bottom-0 right-0">
<UserStatusBadge status={getStatusConversa()} size="sm" />
@@ -122,27 +141,28 @@
<!-- Botões de ação -->
<div class="flex items-center gap-1">
<!-- Botão Agendar -->
<!-- Botão Agendar MODERNO -->
<button
type="button"
class="btn btn-ghost btn-sm btn-circle"
class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
style="background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2);"
onclick={() => (showScheduleModal = true)}
aria-label="Agendar mensagem"
title="Agendar mensagem"
>
<div class="absolute inset-0 bg-purple-500/0 group-hover:bg-purple-500/10 transition-colors duration-300"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
fill="none"
stroke="currentColor"
class="w-5 h-5"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5 text-purple-500 relative z-10 group-hover:scale-110 transition-transform"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</button>
</div>

130
apps/web/src/lib/components/chat/MessageInput.svelte
View File

@@ -17,6 +17,24 @@
let enviando = $state(false);
let uploadingFile = $state(false);
let digitacaoTimeout: ReturnType<typeof setTimeout> | null = null;
let showEmojiPicker = $state(false);
// Emojis mais usados
const emojis = [
"😀", "😃", "😄", "😁", "😅", "😂", "🤣", "😊", "😇", "🙂",
"🙃", "😉", "😌", "😍", "🥰", "😘", "😗", "😙", "😚", "😋",
"😛", "😝", "😜", "🤪", "🤨", "🧐", "🤓", "😎", "🥳", "😏",
"👍", "👎", "👏", "🙌", "🤝", "🙏", "💪", "✨", "🎉", "🎊",
"❤️", "💙", "💚", "💛", "🧡", "💜", "🖤", "🤍", "💯", "🔥",
];
function adicionarEmoji(emoji: string) {
mensagem += emoji;
showEmojiPicker = false;
if (textarea) {
textarea.focus();
}
}
// Auto-resize do textarea
function handleInput() {
@@ -40,19 +58,28 @@
const texto = mensagem.trim();
if (!texto || enviando) return;
console.log("📤 [MessageInput] Enviando mensagem:", {
conversaId,
conteudo: texto,
tipo: "texto",
});
try {
enviando = true;
await client.mutation(api.chat.enviarMensagem, {
const result = await client.mutation(api.chat.enviarMensagem, {
conversaId,
conteudo: texto,
tipo: "texto",
});
console.log("✅ [MessageInput] Mensagem enviada com sucesso! ID:", result);
mensagem = "";
if (textarea) {
textarea.style.height = "auto";
}
} catch (error) {
console.error("Erro ao enviar mensagem:", error);
console.error("❌ [MessageInput] Erro ao enviar mensagem:", error);
alert("Erro ao enviar mensagem");
} finally {
enviando = false;
@@ -128,8 +155,12 @@
<div class="p-4">
<div class="flex items-end gap-2">
<!-- Botão de anexar arquivo -->
<label class="btn btn-ghost btn-sm btn-circle flex-shrink-0">
<!-- Botão de anexar arquivo MODERNO -->
<label
class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden cursor-pointer flex-shrink-0"
style="background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.2);"
title="Anexar arquivo"
>
<input
type="file"
class="hidden"
@@ -137,26 +168,76 @@
disabled={uploadingFile || enviando}
accept="*/*"
/>
<div class="absolute inset-0 bg-primary/0 group-hover:bg-primary/10 transition-colors duration-300"></div>
{#if uploadingFile}
<span class="loading loading-spinner loading-xs"></span>
<span class="loading loading-spinner loading-sm relative z-10"></span>
{:else}
<!-- Ícone de clipe moderno -->
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
fill="none"
stroke="currentColor"
class="w-5 h-5"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5 text-primary relative z-10 group-hover:scale-110 transition-transform"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"
/>
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
</svg>
{/if}
</label>
<!-- Botão de EMOJI MODERNO -->
<div class="relative flex-shrink-0">
<button
type="button"
class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden"
style="background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.2);"
onclick={() => (showEmojiPicker = !showEmojiPicker)}
disabled={enviando || uploadingFile}
aria-label="Adicionar emoji"
title="Adicionar emoji"
>
<div class="absolute inset-0 bg-warning/0 group-hover:bg-warning/10 transition-colors duration-300"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5 text-warning relative z-10 group-hover:scale-110 transition-transform"
>
<circle cx="12" cy="12" r="10"/>
<path d="M8 14s1.5 2 4 2 4-2 4-2"/>
<line x1="9" y1="9" x2="9.01" y2="9"/>
<line x1="15" y1="9" x2="15.01" y2="9"/>
</svg>
</button>
<!-- Picker de Emojis -->
{#if showEmojiPicker}
<div
class="absolute bottom-full left-0 mb-2 p-3 bg-base-100 rounded-xl shadow-2xl border border-base-300 z-50"
style="width: 280px; max-height: 200px; overflow-y-auto;"
>
<div class="grid grid-cols-10 gap-1">
{#each emojis as emoji}
<button
type="button"
class="text-2xl hover:scale-125 transition-transform cursor-pointer p-1 hover:bg-base-200 rounded"
onclick={() => adicionarEmoji(emoji)}
>
{emoji}
</button>
{/each}
</div>
</div>
{/if}
</div>
<!-- Textarea -->
<div class="flex-1 relative">
<textarea
@@ -171,30 +252,27 @@
></textarea>
</div>
<!-- Botão de enviar -->
<!-- Botão de enviar MODERNO -->
<button
type="button"
class="btn btn-primary btn-circle flex-shrink-0"
class="flex items-center justify-center w-12 h-12 rounded-xl transition-all duration-300 group relative overflow-hidden flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
onclick={handleEnviar}
disabled={!mensagem.trim() || enviando || uploadingFile}
aria-label="Enviar"
>
<div class="absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors duration-300"></div>
{#if enviando}
<span class="loading loading-spinner loading-sm"></span>
<span class="loading loading-spinner loading-sm relative z-10 text-white"></span>
{:else}
<!-- Ícone de avião de papel moderno -->
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
fill="currentColor"
class="w-5 h-5 text-white relative z-10 group-hover:scale-110 group-hover:translate-x-1 transition-all"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
/>
<path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z"/>
</svg>
{/if}
</button>
@@ -202,7 +280,7 @@
<!-- Informação sobre atalhos -->
<p class="text-xs text-base-content/50 mt-2 text-center">
Pressione Enter para enviar, Shift+Enter para quebrar linha
💡 Enter para enviar • Shift+Enter para quebrar linha • 😊 Clique no emoji
</p>
</div>

27
apps/web/src/lib/components/chat/MessageList.svelte
View File

@@ -19,9 +19,18 @@
let messagesContainer: HTMLDivElement;
let shouldScrollToBottom = true;
// DEBUG: Log quando mensagens mudam
$effect(() => {
console.log("💬 [MessageList] Mensagens atualizadas:", {
conversaId,
count: mensagens?.data?.length || 0,
mensagens: mensagens?.data,
});
});
// Auto-scroll para a última mensagem
$effect(() => {
if (mensagens && shouldScrollToBottom && messagesContainer) {
if (mensagens?.data && shouldScrollToBottom && messagesContainer) {
tick().then(() => {
messagesContainer.scrollTop = messagesContainer.scrollHeight;
});
@@ -30,8 +39,8 @@
// Marcar como lida quando mensagens carregam
$effect(() => {
if (mensagens && mensagens.length > 0) {
const ultimaMensagem = mensagens[mensagens.length - 1];
if (mensagens?.data && mensagens.data.length > 0) {
const ultimaMensagem = mensagens.data[mensagens.data.length - 1];
client.mutation(api.chat.marcarComoLida, {
conversaId,
mensagemId: ultimaMensagem._id as any,
@@ -98,8 +107,8 @@
bind:this={messagesContainer}
onscroll={handleScroll}
>
{#if mensagens && mensagens.length > 0}
{@const gruposPorDia = agruparMensagensPorDia(mensagens)}
{#if mensagens?.data && mensagens.data.length > 0}
{@const gruposPorDia = agruparMensagensPorDia(mensagens.data)}
{#each Object.entries(gruposPorDia) as [dia, mensagensDia]}
<!-- Separador de dia -->
<div class="flex items-center justify-center my-4">
@@ -110,7 +119,7 @@
<!-- Mensagens do dia -->
{#each mensagensDia as mensagem (mensagem._id)}
{@const isMinha = mensagem.remetente?._id === mensagens[0]?.remetente?._id}
{@const isMinha = mensagem.remetente?._id === mensagens.data[0]?.remetente?._id}
<div class={`flex mb-4 ${isMinha ? "justify-end" : "justify-start"}`}>
<div class={`max-w-[75%] ${isMinha ? "items-end" : "items-start"}`}>
<!-- Nome do remetente (apenas se não for minha) -->
@@ -203,7 +212,7 @@
{/each}
<!-- Indicador de digitação -->
{#if digitando && digitando.length > 0}
{#if digitando?.data && digitando.data.length > 0}
<div class="flex items-center gap-2 mb-4">
<div class="flex items-center gap-1">
<div class="w-2 h-2 rounded-full bg-base-content/50 animate-bounce"></div>
@@ -217,13 +226,13 @@
></div>
</div>
<p class="text-xs text-base-content/60">
{digitando.map((u: any) => u.nome).join(", ")} {digitando.length === 1
{digitando.data.map((u: any) => u.nome).join(", ")} {digitando.data.length === 1
? "está digitando"
: "estão digitando"}...
</p>
</div>
{/if}
{:else if !mensagens}
{:else if !mensagens?.data}
<!-- Loading -->
<div class="flex items-center justify-center h-full">
<span class="loading loading-spinner loading-lg"></span>

62
apps/web/src/lib/components/chat/NotificationBell.svelte
View File

@@ -107,44 +107,72 @@
transform: scale(1.1);
}
}
@keyframes pulse-ring-subtle {
0%, 100% {
opacity: 0.1;
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(1.05);
}
}
@keyframes bell-ring {
0%, 100% {
transform: rotate(0deg);
}
10%, 30% {
transform: rotate(-10deg);
}
20%, 40% {
transform: rotate(10deg);
}
50% {
transform: rotate(0deg);
}
}
</style>
<div class="dropdown dropdown-end notification-bell">
<!-- Botão de Notificação ULTRA MODERNO (igual ao perfil) -->
<button
type="button"
tabindex="0"
class="btn btn-ghost btn-circle relative hover:bg-gradient-to-br hover:from-primary/10 hover:to-primary/5 transition-all duration-500 group"
class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden group transition-all duration-300 hover:scale-105"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
onclick={toggleDropdown}
aria-label="Notificações"
>
<!-- Glow effect -->
<!-- Efeito de brilho no hover -->
<div class="absolute inset-0 bg-gradient-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<!-- Anel de pulso sutil -->
<div class="absolute inset-0 rounded-2xl" style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></div>
<!-- Glow effect quando tem notificações -->
{#if count && count > 0}
<div class="absolute inset-0 rounded-full bg-error/20 blur-xl animate-pulse"></div>
<div class="absolute inset-0 rounded-2xl bg-error/30 blur-lg animate-pulse"></div>
{/if}
<!-- Ícone do sino premium -->
<!-- Ícone do sino PREENCHIDO moderno -->
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
stroke="currentColor"
class="w-7 h-7 relative z-10 transition-all duration-500 group-hover:scale-110 group-hover:-rotate-12 {count && count > 0 ? 'text-error drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]' : 'text-primary'}"
style="filter: {count && count > 0 ? 'drop-shadow(0 0 4px rgba(239,68,68,0.4))' : 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))'}"
fill="currentColor"
class="w-7 h-7 text-white relative z-10 transition-all duration-300 group-hover:scale-110"
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); animation: {count && count > 0 ? 'bell-ring 2s ease-in-out infinite' : 'none'};"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
/>
<path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd" />
</svg>
<!-- Badge premium com gradiente -->
<!-- Badge premium MODERNO com gradiente -->
{#if count + (notificacoesFerias?.length || 0) > 0}
{@const totalCount = count + (notificacoesFerias?.length || 0)}
<span
class="absolute -top-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-br from-red-500 via-error to-red-600 text-white text-[10px] font-black shadow-xl ring-2 ring-white z-20"
style="animation: badge-bounce 2s ease-in-out infinite;"
class="absolute -top-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full text-white text-[10px] font-black shadow-xl ring-2 ring-white z-20"
style="background: linear-gradient(135deg, #ff416c, #ff4b2b); box-shadow: 0 8px 24px -4px rgba(255, 65, 108, 0.6), 0 4px 12px -2px rgba(255, 75, 43, 0.4); animation: badge-bounce 2s ease-in-out infinite;"
>
{totalCount > 9 ? "9+" : totalCount}
</span>

159
apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
View File

@@ -19,6 +19,11 @@
let data = $state("");
let hora = $state("");
let loading = $state(false);
// Rastrear mudanças nas mensagens agendadas
$effect(() => {
console.log("📅 [ScheduleModal] Mensagens agendadas atualizadas:", mensagensAgendadas?.data);
});
// Definir data/hora mínima (agora)
const now = new Date();
@@ -61,7 +66,11 @@
mensagem = "";
data = "";
hora = "";
alert("Mensagem agendada com sucesso!");
// Dar tempo para o Convex processar e recarregar a lista
setTimeout(() => {
alert("Mensagem agendada com sucesso!");
}, 500);
} catch (error) {
console.error("Erro ao agendar mensagem:", error);
alert("Erro ao agendar mensagem");
@@ -90,29 +99,67 @@
}
</script>
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50" onclick={onClose}>
<div
class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50"
onclick={onClose}
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
onkeydown={(e) => e.key === 'Escape' && onClose()}
tabindex="-1"
>
<div
class="bg-base-100 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col m-4"
onclick={(e) => e.stopPropagation()}
role="document"
>
<!-- Header -->
<div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
<h2 class="text-xl font-semibold">Agendar Mensagem</h2>
<!-- Header ULTRA MODERNO -->
<div class="flex items-center justify-between px-6 py-5 relative overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);">
<!-- Efeitos de fundo -->
<div class="absolute inset-0 opacity-20" style="background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); animation: shimmer 3s infinite;"></div>
<h2 id="modal-title" class="text-xl font-bold flex items-center gap-3 text-white relative z-10">
<!-- Ícone moderno de relógio -->
<div class="relative flex items-center justify-center w-10 h-10 rounded-xl" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5"
>
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</div>
<span style="text-shadow: 0 2px 8px rgba(0,0,0,0.3);">Agendar Mensagem</span>
</h2>
<!-- Botão fechar moderno -->
<button
type="button"
class="btn btn-ghost btn-sm btn-circle"
class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden z-10"
style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
onclick={onClose}
aria-label="Fechar"
>
<div class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/30 transition-colors duration-300"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
fill="none"
stroke="currentColor"
class="w-5 h-5"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5 text-white relative z-10 group-hover:scale-110 group-hover:rotate-90 transition-all duration-300"
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
@@ -125,10 +172,11 @@
<h3 class="card-title text-lg">Nova Mensagem Agendada</h3>
<div class="form-control">
<label class="label">
<label class="label" for="mensagem-input">
<span class="label-text">Mensagem</span>
</label>
<textarea
id="mensagem-input"
class="textarea textarea-bordered h-24"
placeholder="Digite a mensagem..."
bind:value={mensagem}
@@ -141,10 +189,11 @@
<div class="grid md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<label class="label" for="data-input">
<span class="label-text">Data</span>
</label>
<input
id="data-input"
type="date"
class="input input-bordered"
bind:value={data}
@@ -153,10 +202,11 @@
</div>
<div class="form-control">
<label class="label">
<label class="label" for="hora-input">
<span class="label-text">Hora</span>
</label>
<input
id="hora-input"
type="time"
class="input input-bordered"
bind:value={hora}
@@ -186,32 +236,38 @@
{/if}
<div class="card-actions justify-end">
<!-- Botão AGENDAR ultra moderno -->
<button
type="button"
class="btn btn-primary"
class="relative px-6 py-3 rounded-xl font-bold text-white overflow-hidden transition-all duration-300 group disabled:opacity-50 disabled:cursor-not-allowed"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
onclick={handleAgendar}
disabled={loading || !mensagem.trim() || !data || !hora}
>
{#if loading}
<span class="loading loading-spinner"></span>
Agendando...
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
>
<path
<!-- Efeito de brilho no hover -->
<div class="absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors duration-300"></div>
<div class="relative z-10 flex items-center gap-2">
{#if loading}
<span class="loading loading-spinner loading-sm"></span>
<span>Agendando...</span>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
Agendar
{/if}
class="w-5 h-5 group-hover:scale-110 transition-transform"
>
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
<span class="group-hover:scale-105 transition-transform">Agendar</span>
{/if}
</div>
</button>
</div>
</div>
@@ -222,9 +278,9 @@
<div class="card-body">
<h3 class="card-title text-lg">Mensagens Agendadas</h3>
{#if mensagensAgendadas && mensagensAgendadas.length > 0}
{#if mensagensAgendadas?.data && mensagensAgendadas.data.length > 0}
<div class="space-y-3">
{#each mensagensAgendadas as msg (msg._id)}
{#each mensagensAgendadas.data as msg (msg._id)}
<div class="flex items-start gap-3 p-3 bg-base-100 rounded-lg">
<div class="flex-shrink-0 mt-1">
<svg
@@ -252,31 +308,35 @@
</p>
</div>
<!-- Botão cancelar moderno -->
<button
type="button"
class="btn btn-ghost btn-sm btn-circle text-error"
class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
onclick={() => handleCancelar(msg._id)}
aria-label="Cancelar"
>
<div class="absolute inset-0 bg-error/0 group-hover:bg-error/20 transition-colors duration-300"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
fill="none"
stroke="currentColor"
class="w-5 h-5"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5 text-error relative z-10 group-hover:scale-110 transition-transform"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
<polyline points="3 6 5 6 21 6"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
<line x1="10" y1="11" x2="10" y2="17"/>
<line x1="14" y1="11" x2="14" y2="17"/>
</svg>
</button>
</div>
{/each}
</div>
{:else if !mensagensAgendadas}
{:else if !mensagensAgendadas?.data}
<div class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-lg"></span>
</div>
@@ -305,3 +365,14 @@
</div>
</div>
<style>
/* Efeito shimmer para o header */
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
</style>

49
apps/web/src/lib/components/chat/UserStatusBadge.svelte
View File

@@ -7,31 +7,57 @@
let { status = "offline", size = "md" }: Props = $props();
const sizeClasses = {
sm: "w-2 h-2",
md: "w-3 h-3",
lg: "w-4 h-4",
sm: "w-3 h-3",
md: "w-4 h-4",
lg: "w-5 h-5",
};
const statusConfig = {
online: {
color: "bg-success",
label: "Online",
borderColor: "border-success",
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
<circle cx="12" cy="12" r="10" fill="#10b981"/>
<path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`,
label: "🟢 Online",
},
offline: {
color: "bg-base-300",
label: "Offline",
borderColor: "border-base-300",
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
<circle cx="12" cy="12" r="10" fill="#9ca3af"/>
<path d="M8 8l8 8M16 8l-8 8" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>`,
label: "⚫ Offline",
},
ausente: {
color: "bg-warning",
label: "Ausente",
borderColor: "border-warning",
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
<circle cx="12" cy="12" r="10" fill="#f59e0b"/>
<circle cx="12" cy="6" r="1.5" fill="white"/>
<path d="M12 10v4" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>`,
label: "🟡 Ausente",
},
externo: {
color: "bg-info",
label: "Externo",
borderColor: "border-info",
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
<circle cx="12" cy="12" r="10" fill="#3b82f6"/>
<path d="M8 12h8M12 8v8" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>`,
label: "🔵 Externo",
},
em_reuniao: {
color: "bg-error",
label: "Em Reunião",
borderColor: "border-error",
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
<circle cx="12" cy="12" r="10" fill="#ef4444"/>
<rect x="8" y="8" width="8" height="8" fill="white" rx="1"/>
</svg>`,
label: "🔴 Em Reunião",
},
};
@@ -39,8 +65,11 @@
</script>
<div
class={`${sizeClasses[size]} ${config.color} rounded-full`}
class={`${sizeClasses[size]} rounded-full relative flex items-center justify-center`}
style="box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 2px solid white;"
title={config.label}
aria-label={config.label}
></div>
>
{@html config.icon}
</div>

56
apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte
View File

@@ -51,34 +51,6 @@
},
],
},
{
categoria: "Gestão de Símbolos",
descricao: "Gerencie cargos comissionados e funções gratificadas",
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>`,
gradient: "from-green-500/10 to-green-600/20",
accentColor: "text-green-600",
bgIcon: "bg-green-500/20",
opcoes: [
{
nome: "Cadastrar Símbolo",
descricao: "Adicionar novo cargo ou função",
href: "/recursos-humanos/simbolos/cadastro",
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>`,
},
{
nome: "Listar Símbolos",
descricao: "Visualizar e editar símbolos",
href: "/recursos-humanos/simbolos",
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
</svg>`,
},
],
},
{
categoria: "Gestão de Férias e Licenças",
descricao: "Controle de férias, atestados e licenças",
@@ -107,6 +79,34 @@
},
],
},
{
categoria: "Gestão de Símbolos",
descricao: "Gerencie cargos comissionados e funções gratificadas",
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>`,
gradient: "from-green-500/10 to-green-600/20",
accentColor: "text-green-600",
bgIcon: "bg-green-500/20",
opcoes: [
{
nome: "Cadastrar Símbolo",
descricao: "Adicionar novo cargo ou função",
href: "/recursos-humanos/simbolos/cadastro",
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>`,
},
{
nome: "Listar Símbolos",
descricao: "Visualizar e editar símbolos",
href: "/recursos-humanos/simbolos",
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
</svg>`,
},
],
},
];
</script>