feat: replace SVG icons with Lucide components across various Svelte components for improved consistency and maintainability

This commit is contained in:
2025-12-04 14:30:31 -03:00
parent a3d9e782af
commit 88f25dc6ab
21 changed files with 457 additions and 2921 deletions

View File

@@ -5,6 +5,26 @@
import { format } from 'date-fns';
import { ptBR } from 'date-fns/locale';
import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
import {
Bell,
CheckCircle,
XCircle,
Info,
Mail,
Send,
MessageSquare,
Calendar,
Clock,
X,
User,
FileText,
Trash2,
Edit,
MoreVertical,
Plus,
AlertTriangle,
Check
} from 'lucide-svelte';
type StatusAgendamento = 'agendado' | 'enviado' | 'cancelado';
@@ -1166,20 +1186,7 @@
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div class="flex items-center gap-4">
<div class="from-primary/15 via-info/10 to-secondary/10 rounded-2xl bg-gradient-to-br p-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-primary h-9 w-9"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
<Bell class="text-primary h-9 w-9" strokeWidth={2} />
</div>
<div>
<h1 class="text-base-content text-3xl font-bold">Notificações e Mensagens</h1>
@@ -1213,42 +1220,20 @@
class:alert-error={mensagem.tipo === 'error'}
class:alert-info={mensagem.tipo === 'info'}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 shrink-0 stroke-current"
fill="none"
viewBox="0 0 24 24"
>
{#if mensagem.tipo === 'success'}
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
{:else if mensagem.tipo === 'error'}
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
{:else}
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
{/if}
</svg>
{#if mensagem.tipo === 'success'}
<CheckCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
{:else if mensagem.tipo === 'error'}
<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
{:else}
<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
{/if}
<span class="font-medium">{mensagem.texto}</span>
<button
type="button"
class="btn btn-sm btn-circle btn-ghost"
onclick={() => (mensagem = null)}
>
<X class="h-4 w-4" strokeWidth={2} />
</button>
</div>
{/if}
@@ -1417,19 +1402,7 @@
{#if templateSelecionado}
<div class="alert alert-info mb-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-6 w-6 shrink-0 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
<div>
<div class="font-bold">{templateSelecionado.titulo}</div>
<div class="mt-1 text-sm">{templateSelecionado.corpo}</div>
@@ -1496,19 +1469,7 @@
{#if getPreviewAgendamento()}
<div class="alert alert-info mt-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-6 w-6 shrink-0 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
<span>{getPreviewAgendamento()}</span>
</div>
{/if}
@@ -1532,20 +1493,7 @@
<span class="ml-2">Enviando...</span>
{/if}
{:else}
<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 19l9 2-9-18-9 18 9-2zm0 0v-8"
/>
</svg>
<Send class="h-5 w-5" strokeWidth={2} />
{/if}
{#if processando}
<!-- Texto já está no bloco acima -->
@@ -1569,20 +1517,7 @@
</div>
{#if logsEnvio.length > 0}
<button type="button" class="btn btn-sm btn-ghost" onclick={limparLogs}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
<X class="h-4 w-4" strokeWidth={2} />
Limpar
</button>
{/if}
@@ -1630,20 +1565,7 @@
class="btn btn-sm btn-outline btn-primary"
onclick={() => abrirModalNovoTemplate()}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
<Plus class="h-4 w-4" strokeWidth={2} />
Novo Template
</button>
</div>
@@ -1687,20 +1609,7 @@
class="btn btn-xs"
aria-label="Opções do template"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
/>
</svg>
<MoreVertical class="h-4 w-4" strokeWidth={2} />
</button>
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
<ul
@@ -1722,20 +1631,7 @@
{:else}
<!-- Nenhum template disponível - mostrar botão para criar -->
<div class="py-10 text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="mx-auto mb-4 h-12 w-12 opacity-50"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
<FileText class="mx-auto mb-4 h-12 w-12 opacity-50" strokeWidth={2} />
<p class="text-base-content mb-2 font-medium">Nenhum template disponível</p>
<p class="text-base-content/60 mb-4 text-sm">
Clique no botão abaixo para criar os templates padrão do sistema.
@@ -1749,20 +1645,7 @@
<span class="loading loading-spinner loading-xs"></span>
Criando templates...
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
<Plus class="h-4 w-4" strokeWidth={2} />
Criar Templates Padrão
{/if}
</button>
@@ -1797,20 +1680,7 @@
<div class="mb-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="bg-secondary/10 rounded-lg p-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-secondary h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<Clock class="text-secondary h-6 w-6" strokeWidth={2} />
</div>
<h2 class="card-title">Histórico de Agendamentos</h2>
</div>
@@ -1843,20 +1713,7 @@
{#if agendamentosFiltrados.length === 0}
<div class="py-10 text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="mx-auto mb-4 h-12 w-12 opacity-50"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<Clock class="mx-auto mb-4 h-12 w-12 opacity-50" strokeWidth={2} />
<p class="text-base-content mb-2 font-medium">Nenhum agendamento encontrado</p>
<p class="text-base-content/60 text-sm">
Os agendamentos aparecerão aqui quando você agendar envios.
@@ -1886,36 +1743,10 @@
<td>
<div class="flex items-center gap-2">
{#if agendamento.tipo === 'email'}
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-info h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
<Mail class="text-info h-5 w-5" strokeWidth={2} />
<span class="badge badge-info badge-sm">Email</span>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-primary h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
<MessageSquare class="text-primary h-5 w-5" strokeWidth={2} />
<span class="badge badge-primary badge-sm">Chat</span>
{/if}
</div>
@@ -1981,20 +1812,7 @@
class="btn btn-sm btn-error btn-outline"
onclick={() => cancelarAgendamento(agendamento)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
<X class="h-4 w-4" strokeWidth={2} />
Cancelar
</button>
{:else}
@@ -2013,19 +1831,7 @@
<!-- Info -->
<div class="alert alert-warning mt-6">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-6 w-6 shrink-0 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
></path>
</svg>
<AlertTriangle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
<span>Para enviar emails, certifique-se de configurar o SMTP em Configurações de Email.</span>
</div>
</div>
@@ -2147,20 +1953,7 @@
<span class="loading loading-spinner loading-sm"></span>
Criando...
{:else}
<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="M5 13l4 4L19 7"
/>
</svg>
<Check class="h-5 w-5" strokeWidth={2} />
Criar Template
{/if}
</button>