1092 lines
58 KiB
TypeScript
1092 lines
58 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { SchoolData } from '../types';
|
|
import { useDialog } from '../DialogContext';
|
|
import { MessageSquare, Save, Info, Settings, Send, Clock, AlertTriangle, FileText, CheckCircle, Cake, X, Power, BookOpen, Smile, Paperclip } from 'lucide-react';
|
|
|
|
interface MessagesProps {
|
|
data: SchoolData;
|
|
updateData: (newData: Partial<SchoolData>) => void;
|
|
}
|
|
|
|
const defaultTemplates = {
|
|
boletoGerado: "Olá {nome}, sua cobrança referente a {descricao} no valor de R$ {valor} foi gerada. Vencimento: {vencimento}.",
|
|
pagamentoConfirmado: "Olá {nome}, confirmamos o pagamento de R$ {valor} referente a {descricao}. Muito obrigado!",
|
|
boletoVencido: "Olá {nome}, o boleto referente a {descricao} de R$ {valor} venceu em {vencimento}. Segue o PDF da 2ª via atualizada abaixo:",
|
|
cobrancaCancelada: "Olá {nome}, a cobrança referente a {descricao} foi cancelada.",
|
|
cobrancaAtualizada: "Olá {nome}, o boleto de {descricao} foi atualizado. Segue a nova versão:",
|
|
boletoAVencer: "Olá {nome}, lembramos que sua cobrança referente a {descricao} no valor de R$ {valor} vencerá em {vencimento}. Segue o PDF abaixo:",
|
|
felizAniversario: "Olá {nome}, a equipe da {escola} passa para te desejar um Feliz Aniversário! Muita saúde, paz e conquistas neste novo ciclo! 🎂🎈",
|
|
novaAvaliacao: "Olá {nome}, uma nova {tipo_avaliacao} ({titulo_avaliacao}) de {materia} foi publicada no portal do aluno. Acesse e realize o mais breve possível!",
|
|
automationRules: {
|
|
sendOnDueDate: true,
|
|
sendDaysAfter: '1',
|
|
repeatEveryDays: '3',
|
|
sendDaysBefore: '3',
|
|
maxPreWarnings: '2'
|
|
}
|
|
};
|
|
|
|
const Messages: React.FC<MessagesProps> = ({ data, updateData }) => {
|
|
const { showAlert, showConfirm } = useDialog();
|
|
|
|
const [dbClasses, setDbClasses] = useState<any[]>(data?.classes || []);
|
|
const [dbCourses, setDbCourses] = useState<any[]>(data?.courses || []);
|
|
|
|
|
|
React.useEffect(() => {
|
|
Promise.all([
|
|
fetch('/api/turmas').catch(() => ({ ok: false, json: async () => ({}) })),
|
|
fetch('/api/cursos').catch(() => ({ ok: false, json: async () => ({}) })),
|
|
|
|
]).then(async (responses) => {
|
|
const [resT, resC] = responses;
|
|
if (resT && resT.ok) {
|
|
const jsonT = await resT.json();
|
|
if (jsonT.turmas) setDbClasses(jsonT.turmas.map((t: any) => ({
|
|
id: t.id, name: t.nome, courseId: t.curso_id, maxStudents: Number(t.max_alunos || 0)
|
|
})));
|
|
}
|
|
if (resC && resC.ok) {
|
|
const jsonC = await resC.json();
|
|
if (jsonC.cursos) setDbCourses(jsonC.cursos.map((c: any) => ({
|
|
id: c.id, name: c.nome, monthlyFee: Number(c.mensalidade || 0), registrationFee: Number(c.taxa_matricula || 0)
|
|
})));
|
|
}
|
|
|
|
}).catch(console.error);
|
|
}, []);
|
|
|
|
const defaultVars = data.messageTemplates || defaultTemplates;
|
|
const initRules = defaultVars.automationRules || defaultTemplates.automationRules;
|
|
|
|
const [templates, setTemplates] = useState({
|
|
...defaultTemplates,
|
|
...defaultVars,
|
|
automationRules: {
|
|
...defaultTemplates.automationRules,
|
|
...initRules
|
|
}
|
|
});
|
|
|
|
const [isSendingPreventive, setIsSendingPreventive] = useState(false);
|
|
const [isSendingOverdue, setIsSendingOverdue] = useState(false);
|
|
|
|
// Estado do Agendamento Automático - Preventivo
|
|
const [scheduleEnabled, setScheduleEnabled] = useState(!!initRules.autoScheduleEnabled);
|
|
const [scheduleTime, setScheduleTime] = useState(initRules.autoScheduleTime || '09:00');
|
|
const [isSavingSchedule, setIsSavingSchedule] = useState(false);
|
|
const [cronActive, setCronActive] = useState(false);
|
|
|
|
// Estado do Agendamento Automático - Inadimplência
|
|
const [scheduleOverdueEnabled, setScheduleOverdueEnabled] = useState(!!initRules.autoScheduleOverdueEnabled);
|
|
const [scheduleOverdueTime, setScheduleOverdueTime] = useState(initRules.autoScheduleOverdueTime || '10:00');
|
|
const [isSavingScheduleOverdue, setIsSavingScheduleOverdue] = useState(false);
|
|
const [cronOverdueActive, setCronOverdueActive] = useState(false);
|
|
|
|
// Estado do Agendamento Automático - Aniversário
|
|
const [scheduleBirthdayEnabled, setScheduleBirthdayEnabled] = useState(!!initRules.autoScheduleBirthdayEnabled);
|
|
const [scheduleBirthdayTime, setScheduleBirthdayTime] = useState(initRules.autoScheduleBirthdayTime || '09:00');
|
|
const [isSavingScheduleBirthday, setIsSavingScheduleBirthday] = useState(false);
|
|
const [cronBirthdayActive, setCronBirthdayActive] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/cron/status').then(r => r.json()).then(d => {
|
|
setCronActive(d.preventive);
|
|
setCronOverdueActive(d.overdue);
|
|
setCronBirthdayActive(d.birthday);
|
|
}).catch(() => {});
|
|
}, []);
|
|
|
|
// Estados WhatsApp em Massa
|
|
const [targetType, setTargetType] = useState('todos');
|
|
const [targetId, setTargetId] = useState('');
|
|
const [messageText, setMessageText] = useState('');
|
|
const [isSendingMass, setIsSendingMass] = useState(false);
|
|
const [massDelay, setMassDelay] = useState('60');
|
|
const [massAttachment, setMassAttachment] = useState<File | null>(null);
|
|
const [isSendingBdays, setIsSendingBdays] = useState(false);
|
|
const [showMassEmojis, setShowMassEmojis] = useState(false);
|
|
const commonEmojis = ['😀', '😂', '🥰', '😎', '🎉', '👍', '🙏', '❤️', '🔥', '🚀', '✅', '❌', '⚠️', '💡', '🎓', '🏫', '📚', '📖', '✏️', '📝', '🎒', '💻', '🧠', '🤓', '🥇'];
|
|
|
|
// Modal de Edição de Modelo
|
|
const [editingTemplate, setEditingTemplate] = useState<{
|
|
key: keyof typeof defaultTemplates | 'felizAniversario' | 'novaAvaliacao',
|
|
label: string,
|
|
desc: string,
|
|
color: string,
|
|
icon: any,
|
|
vars: string[]
|
|
} | null>(null);
|
|
|
|
const normalizeLineBreaks = (text: string) => text.replace(/\r\n/g, '\n');
|
|
|
|
const birthdayStudents = (data.students || []).filter(s => {
|
|
if (!s.birthDate || s.status !== 'active') return false;
|
|
const bdayParts = s.birthDate.split('-');
|
|
const bdayDay = parseInt(bdayParts[2]);
|
|
const bdayMonth = parseInt(bdayParts[1]);
|
|
const today = new Date();
|
|
return bdayDay === today.getDate() && bdayMonth === (today.getMonth() + 1);
|
|
});
|
|
|
|
const handleSendBirthdays = async () => {
|
|
if (birthdayStudents.length === 0) return;
|
|
|
|
showConfirm(
|
|
'Enviar Felicitações',
|
|
`Deseja enviar a mensagem de aniversário para os ${birthdayStudents.length} alunos que fazem aniversário hoje?`,
|
|
async () => {
|
|
setIsSendingBdays(true);
|
|
try {
|
|
const payloadAlunos = birthdayStudents.map(s => {
|
|
const nome = s.name.split(' ')[0];
|
|
const telefone = s.phone;
|
|
return { nome, telefone };
|
|
}).filter(a => a.telefone);
|
|
|
|
if (payloadAlunos.length === 0) {
|
|
showAlert('Aviso', 'Nenhum dos aniversariantes possui telefone cadastrado.', 'warning');
|
|
return;
|
|
}
|
|
|
|
const msgTemplate = normalizeLineBreaks(templates.felizAniversario).replace(/{escola}/g, data.profile.name);
|
|
|
|
const resp = await fetch('/api/enviar-massa', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ alunos: payloadAlunos, mensagem: msgTemplate })
|
|
});
|
|
|
|
if (resp.ok) {
|
|
showAlert('Sucesso', 'O disparo das mensagens de aniversário foi iniciado!', 'success');
|
|
} else {
|
|
const resData = await resp.json();
|
|
showAlert('Erro', resData.error || 'Erro ao iniciar disparo.', 'error');
|
|
}
|
|
} catch (e) {
|
|
showAlert('Erro', 'Erro de conexão.', 'error');
|
|
} finally {
|
|
setIsSendingBdays(false);
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
const handleSave = () => {
|
|
const normalizedTemplates = {
|
|
...templates,
|
|
boletoGerado: normalizeLineBreaks(templates.boletoGerado),
|
|
pagamentoConfirmado: normalizeLineBreaks(templates.pagamentoConfirmado),
|
|
boletoVencido: normalizeLineBreaks(templates.boletoVencido),
|
|
cobrancaCancelada: normalizeLineBreaks(templates.cobrancaCancelada),
|
|
cobrancaAtualizada: normalizeLineBreaks(templates.cobrancaAtualizada),
|
|
boletoAVencer: normalizeLineBreaks(templates.boletoAVencer),
|
|
felizAniversario: normalizeLineBreaks(templates.felizAniversario),
|
|
novaAvaliacao: normalizeLineBreaks(templates.novaAvaliacao || "Olá {nome}, uma nova {tipo_avaliacao} ({titulo_avaliacao}) de {materia} foi publicada no portal do aluno. Acesse e realize o mais breve possível!")
|
|
};
|
|
updateData({ messageTemplates: normalizedTemplates });
|
|
showAlert('Sucesso', 'Configurações de mensagens salvas com sucesso!', 'success');
|
|
};
|
|
|
|
const handleDispararCobrancas = async () => {
|
|
showConfirm(
|
|
'Disparar Cobranças',
|
|
'Tem certeza que deseja processar e enviar as mensagens para TODOS os alunos com pagamentos ATRASADOS agora?',
|
|
async () => {
|
|
setIsSendingOverdue(true);
|
|
try {
|
|
const resp = await fetch('/api/disparar_cobrancas?tipo=atrasado', { method: 'POST' });
|
|
const resData = await resp.json();
|
|
if (resp.ok) {
|
|
showAlert('Sucesso', resData.message || 'Cobranças processadas e disparadas com sucesso!', 'success');
|
|
} else {
|
|
showAlert('Erro', resData.error || 'Erro ao disparar cobranças', 'error');
|
|
}
|
|
} catch (e: any) {
|
|
showAlert('Erro', 'Erro de conexão ao disparar cobranças.', 'error');
|
|
} finally {
|
|
setIsSendingOverdue(false);
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
const handleDispararPreventivos = async () => {
|
|
showConfirm(
|
|
'Lembretes Preventivos',
|
|
'Tem certeza que deseja iniciar o envio dos LEMBRETES PREVENTIVOS para os boletos próximos do vencimento agora?',
|
|
async () => {
|
|
setIsSendingPreventive(true);
|
|
try {
|
|
const resp = await fetch('/api/disparar_cobrancas?tipo=preventivo', { method: 'POST' });
|
|
const resData = await resp.json();
|
|
if (resp.ok) {
|
|
showAlert('Sucesso', resData.message || 'Lembretes disparados com sucesso!', 'success');
|
|
} else {
|
|
showAlert('Erro', resData.error || 'Erro ao disparar lembretes', 'error');
|
|
}
|
|
} catch (e: any) {
|
|
showAlert('Erro', 'Erro de conexão.', 'error');
|
|
} finally {
|
|
setIsSendingPreventive(false);
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
const handleMassSend = async () => {
|
|
if (!messageText.trim()) {
|
|
return showAlert('Aviso', 'Digite uma mensagem para enviar.', 'warning');
|
|
}
|
|
|
|
let targetStudents = [];
|
|
if (targetType === 'todos') {
|
|
targetStudents = data.students || [];
|
|
} else if (targetType === 'turma') {
|
|
if (!targetId) return showAlert('Aviso', 'Selecione uma turma.', 'warning');
|
|
targetStudents = (data.students || []).filter(s => s.classId === targetId);
|
|
} else if (targetType === 'aluno') {
|
|
if (!targetId) return showAlert('Aviso', 'Selecione um aluno.', 'warning');
|
|
targetStudents = (data.students || []).filter(s => s.id === targetId);
|
|
}
|
|
|
|
const validStudents = targetStudents.filter(a => a.phone || a.guardianPhone);
|
|
if (validStudents.length === 0) {
|
|
return showAlert('Erro', 'Nenhum aluno com telefone cadastrado foi selecionado.', 'error');
|
|
}
|
|
|
|
const payloadAlunos = validStudents.flatMap(a => {
|
|
const entries = [];
|
|
|
|
// Entrada para o Aluno
|
|
if (a.phone) {
|
|
entries.push({
|
|
nome: a.name.split(' ')[0],
|
|
telefone: a.phone,
|
|
matricula: a.enrollmentNumber || '—'
|
|
});
|
|
}
|
|
|
|
// Entrada para o Responsável (apenas se for um número diferente ou se o aluno não tiver número)
|
|
if (a.guardianPhone && a.guardianPhone !== a.phone) {
|
|
entries.push({
|
|
nome: (a.guardianName || a.name).split(' ')[0],
|
|
telefone: a.guardianPhone,
|
|
matricula: a.enrollmentNumber || '—'
|
|
});
|
|
}
|
|
|
|
return entries;
|
|
});
|
|
|
|
setIsSendingMass(true);
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('alunos', JSON.stringify(payloadAlunos));
|
|
formData.append('mensagem', normalizeLineBreaks(messageText));
|
|
formData.append('delay', String(parseInt(massDelay) || 60));
|
|
if (massAttachment) {
|
|
formData.append('attachment', massAttachment);
|
|
}
|
|
|
|
const resp = await fetch('/api/enviar-massa', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const resData = await resp.json();
|
|
|
|
if (resp.ok) {
|
|
setMessageText('');
|
|
setTargetId('');
|
|
setMassAttachment(null);
|
|
showAlert('Sucesso', 'Disparo iniciado no servidor! Você já pode fechar esta tela ou continuar usando o sistema.', 'success');
|
|
} else {
|
|
showAlert('Erro', resData.error || 'Erro ao iniciar disparo.', 'error');
|
|
}
|
|
} catch (e) {
|
|
showAlert('Erro', 'Erro de conexão.', 'error');
|
|
} finally {
|
|
setIsSendingMass(false);
|
|
}
|
|
};
|
|
|
|
const templateCards = [
|
|
{ key: 'boletoGerado', label: 'Boleto Gerado / Novo Carnê', desc: 'Enviado assim que a cobrança é criada no sistema.', color: 'blue', icon: FileText, vars: ['{nome}', '{matricula}', '{descricao}', '{valor}', '{vencimento}', '{link_boleto}', '{escola}'] },
|
|
{ key: 'pagamentoConfirmado', label: 'Pagamento Confirmado', desc: 'Enviado quando o sistema (Asaas) compensa o pagamento.', color: 'emerald', icon: CheckCircle, vars: ['{nome}', '{matricula}', '{descricao}', '{valor}', '{escola}'] },
|
|
{ key: 'boletoVencido', label: 'Boleto Vencido', desc: 'Enviado conforme automação ou disparo manual de atrasados.', color: 'red', icon: AlertTriangle, vars: ['{nome}', '{matricula}', '{descricao}', '{valor}', '{vencimento}', '{link_boleto}', '{escola}'] },
|
|
{ key: 'cobrancaCancelada', label: 'Cobrança Cancelada', desc: 'Enviado quando o boleto for cancelado no sistema.', color: 'slate', icon: AlertTriangle, vars: ['{nome}', '{matricula}', '{descricao}', '{escola}'] },
|
|
{ key: 'cobrancaAtualizada', label: 'Cobrança Atualizada', desc: 'Enviado quando houver edição/atualização da cobrança.', color: 'amber', icon: Settings, vars: ['{nome}', '{matricula}', '{descricao}', '{valor}', '{vencimento}', '{link_boleto}', '{escola}'] },
|
|
{ key: 'boletoAVencer', label: 'Boleto a Vencer', desc: 'Aviso preventivo enviado dias antes do vencimento.', color: 'indigo', icon: Clock, vars: ['{nome}', '{matricula}', '{descricao}', '{valor}', '{vencimento}', '{link_boleto}', '{escola}'] },
|
|
{ key: 'felizAniversario', label: 'Feliz Aniversário', desc: 'Mensagem carinhosa para os aniversariantes do dia.', color: 'pink', icon: Cake, vars: ['{nome}', '{escola}'] },
|
|
{ key: 'novaAvaliacao', label: 'Nova Avaliação', desc: 'Enviado ao aluno quando uma prova ou atividade é publicada.', color: 'indigo', icon: BookOpen, vars: ['{nome}', '{matricula}', '{tipo_avaliacao}', '{titulo_avaliacao}', '{materia}', '{escola}'] }
|
|
];
|
|
|
|
const insertVariable = (variable: string) => {
|
|
if (!editingTemplate) return;
|
|
const textarea = document.getElementById('template-editor') as HTMLTextAreaElement;
|
|
if (!textarea) return;
|
|
|
|
const start = textarea.selectionStart;
|
|
const end = textarea.selectionEnd;
|
|
const text = (templates[editingTemplate.key as keyof typeof templates] as string) || '';
|
|
const newText = text.substring(0, start) + variable + text.substring(end);
|
|
|
|
setTemplates(p => ({ ...p, [editingTemplate.key]: newText }));
|
|
|
|
setTimeout(() => {
|
|
textarea.focus();
|
|
textarea.setSelectionRange(start + variable.length, start + variable.length);
|
|
}, 10);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8 animate-in fade-in duration-300 pb-20">
|
|
<header className="flex justify-between items-end">
|
|
<div>
|
|
<h2 className="text-3xl font-extrabold text-slate-900 tracking-tight">Mensagens</h2>
|
|
<p className="text-slate-500 font-medium mt-1">Configure modelos e rotinas de notificação via WhatsApp.</p>
|
|
</div>
|
|
<button
|
|
onClick={handleSave}
|
|
className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2.5 rounded-xl font-bold flex items-center gap-2 shadow-lg transition-all"
|
|
>
|
|
<Save size={18} /> Salvar Tudo
|
|
</button>
|
|
</header>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
{/* Lado Esquerdo - Configurações e Disparos */}
|
|
<div className="space-y-6">
|
|
|
|
|
|
<div className="bg-emerald-50 border border-emerald-100 p-6 rounded-2xl shadow-lg">
|
|
<h3 className="font-black text-emerald-800 flex items-center gap-2 mb-4 text-sm uppercase tracking-widest">
|
|
<MessageSquare size={18} /> Disparo em Massa
|
|
</h3>
|
|
|
|
<div className="space-y-4">
|
|
<select
|
|
className="w-full px-3 py-2.5 border border-emerald-200 rounded-xl text-sm bg-white font-bold"
|
|
value={targetType}
|
|
onChange={(e) => { setTargetType(e.target.value); setTargetId(''); }}
|
|
>
|
|
<option value="todos">Todos os Alunos</option>
|
|
<option value="turma">Uma Turma</option>
|
|
<option value="aluno">Um Aluno</option>
|
|
</select>
|
|
|
|
{targetType !== 'todos' && (
|
|
<select
|
|
className="w-full px-3 py-2.5 border border-emerald-200 rounded-xl text-sm bg-white font-bold"
|
|
value={targetId}
|
|
onChange={(e) => setTargetId(e.target.value)}
|
|
>
|
|
<option value="">-- Selecione --</option>
|
|
{targetType === 'turma'
|
|
? dbClasses?.map(c => <option key={c.id} value={c.id}>{c.name}</option>)
|
|
: data.students?.map(s => <option key={s.id} value={s.id}>{s.name}</option>)
|
|
}
|
|
</select>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-[10px] font-black text-emerald-600 uppercase mb-2 ml-1">Mensagem Personalizada</label>
|
|
<div className="flex flex-wrap gap-1 mb-2 relative">
|
|
{['{nome}', '{matricula}'].map(v => (
|
|
<button
|
|
key={v}
|
|
onClick={() => {
|
|
const textarea = document.getElementById('mass-editor') as HTMLTextAreaElement;
|
|
if (!textarea) return;
|
|
const start = textarea.selectionStart;
|
|
const end = textarea.selectionEnd;
|
|
const newText = messageText.substring(0, start) + v + messageText.substring(end);
|
|
setMessageText(newText);
|
|
setTimeout(() => { textarea.focus(); textarea.setSelectionRange(start + v.length, start + v.length); }, 10);
|
|
}}
|
|
className="text-[9px] bg-emerald-100/50 text-emerald-700 px-2 py-1 rounded-md border border-emerald-200 hover:bg-emerald-600 hover:text-white transition-all shadow-sm"
|
|
>
|
|
{v}
|
|
</button>
|
|
))}
|
|
|
|
<button
|
|
onClick={() => setShowMassEmojis(!showMassEmojis)}
|
|
className="flex items-center justify-center text-[9px] bg-emerald-100/50 text-emerald-700 px-2 py-1 rounded-md border border-emerald-200 hover:bg-emerald-600 hover:text-white transition-all shadow-sm ml-auto"
|
|
title="Inserir Emoji"
|
|
>
|
|
<Smile size={12} />
|
|
</button>
|
|
|
|
{showMassEmojis && (
|
|
<div className="absolute right-0 top-8 z-10 bg-white border border-emerald-200 rounded-xl shadow-xl p-2 grid grid-cols-5 gap-1 w-48 animate-in fade-in zoom-in duration-200">
|
|
{commonEmojis.map(emoji => (
|
|
<button
|
|
key={emoji}
|
|
onClick={() => {
|
|
const textarea = document.getElementById('mass-editor') as HTMLTextAreaElement;
|
|
if (!textarea) return;
|
|
const start = textarea.selectionStart;
|
|
const end = textarea.selectionEnd;
|
|
const newText = messageText.substring(0, start) + emoji + messageText.substring(end);
|
|
setMessageText(newText);
|
|
setShowMassEmojis(false);
|
|
setTimeout(() => { textarea.focus(); textarea.setSelectionRange(start + emoji.length, start + emoji.length); }, 10);
|
|
}}
|
|
className="hover:bg-emerald-50 text-lg rounded flex items-center justify-center p-1 transition-colors"
|
|
>
|
|
{emoji}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<textarea
|
|
id="mass-editor"
|
|
rows={4}
|
|
className="w-full px-3 py-3 border border-emerald-200 rounded-xl text-sm bg-white focus:ring-emerald-500 font-medium shadow-sm"
|
|
placeholder="Escreva sua mensagem..."
|
|
value={messageText}
|
|
onChange={(e) => setMessageText(e.target.value)}
|
|
/>
|
|
|
|
<div className="mt-2 flex items-center justify-between">
|
|
<div className="flex-1">
|
|
{massAttachment ? (
|
|
<div className="flex items-center gap-2 bg-emerald-50 text-emerald-700 text-[10px] font-bold px-2 py-1.5 rounded-lg border border-emerald-100">
|
|
<span className="truncate max-w-[150px]">{massAttachment.name}</span>
|
|
<button onClick={() => setMassAttachment(null)} className="text-emerald-500 hover:text-red-500" title="Remover anexo"><X size={12} /></button>
|
|
</div>
|
|
) : (
|
|
<div className="text-[9px] text-slate-400 font-medium">Nenhum anexo</div>
|
|
)}
|
|
</div>
|
|
|
|
<label className="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-100 text-emerald-700 rounded-lg border border-emerald-200 text-[10px] font-black uppercase cursor-pointer hover:bg-emerald-600 hover:text-white transition-all shadow-sm">
|
|
<Paperclip size={12} />
|
|
<span>Anexar Arquivo</span>
|
|
<input
|
|
type="file"
|
|
className="hidden"
|
|
accept="image/*,application/pdf"
|
|
onChange={(e) => {
|
|
if (e.target.files && e.target.files[0]) {
|
|
setMassAttachment(e.target.files[0]);
|
|
}
|
|
}}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white/50 p-3 rounded-xl border border-emerald-100 mb-2">
|
|
<label className="block text-[9px] font-black text-emerald-600 uppercase tracking-widest mb-1.5 ml-1">Intervalo Mínimo (Segundos)</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
min="10" max="600"
|
|
value={massDelay}
|
|
onChange={(e) => setMassDelay(e.target.value)}
|
|
className="w-full px-3 py-2 border border-emerald-200 rounded-lg text-sm font-bold text-center focus:ring-emerald-500 focus:outline-none"
|
|
/>
|
|
<div className="text-[10px] text-emerald-400 font-bold whitespace-nowrap">seg/msg</div>
|
|
</div>
|
|
<p className="text-[8px] text-emerald-400 mt-1 font-medium leading-tight">Recomendado: 60s ou mais para evitar banimento.</p>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleMassSend}
|
|
disabled={isSendingMass || !data.evolutionConfig?.apiUrl}
|
|
className={`w-full flex items-center justify-center gap-2 py-3.5 px-4 rounded-xl font-black text-sm text-white transition-all shadow-lg active:scale-95 ${
|
|
isSendingMass || !data.evolutionConfig?.apiUrl ? 'bg-slate-400' : 'bg-emerald-600 hover:bg-emerald-700'
|
|
}`}
|
|
>
|
|
{isSendingMass ? 'Iniciando...' : 'Iniciar Disparo'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-indigo-50 border border-indigo-200 p-6 rounded-2xl shadow-lg mb-6">
|
|
<h3 className="font-black text-indigo-800 flex items-center gap-2 mb-3 text-sm uppercase tracking-widest">
|
|
<Clock size={18} /> Lembretes Preventivos
|
|
</h3>
|
|
<p className="text-[10px] text-indigo-600 font-medium mb-4">
|
|
Envia avisos para boletos que vencem em até {templates.automationRules.sendDaysBefore} dias.
|
|
</p>
|
|
<div className="space-y-3 mb-4">
|
|
<button
|
|
onClick={handleDispararPreventivos}
|
|
disabled={isSendingPreventive || !data.evolutionConfig?.apiUrl}
|
|
className={`w-full py-3.5 px-4 rounded-xl font-black text-sm text-white shadow-lg transition-all active:scale-95 ${
|
|
isSendingPreventive || !data.evolutionConfig?.apiUrl ? 'bg-slate-400' : 'bg-indigo-600 hover:bg-indigo-700'
|
|
}`}
|
|
>
|
|
{isSendingPreventive ? 'Processando...' : 'Enviar Lembretes Agora'}
|
|
</button>
|
|
|
|
<div className="flex flex-col gap-2 p-3 bg-white/50 rounded-xl border border-indigo-100">
|
|
<label className="flex items-center gap-2 cursor-pointer group">
|
|
<input
|
|
type="checkbox"
|
|
checked={!!templates.automationRules.ignoreDailyLock}
|
|
onChange={(e) => {
|
|
const newRules = { ...templates.automationRules, ignoreDailyLock: e.target.checked };
|
|
setTemplates(prev => ({ ...prev, automationRules: newRules }));
|
|
updateData({ messageTemplates: { ...templates, automationRules: newRules } });
|
|
}}
|
|
className="w-4 h-4 rounded border-indigo-300 text-indigo-600 focus:ring-indigo-500"
|
|
/>
|
|
<span className="text-[10px] font-black text-indigo-700 uppercase tracking-tight group-hover:text-indigo-900 transition-colors">
|
|
Ignorar trava de envio diário (Debug)
|
|
</span>
|
|
</label>
|
|
|
|
<button
|
|
onClick={async () => {
|
|
showConfirm('Zerar Contadores', 'Tem certeza que deseja zerar todos os contadores de avisos (preventivos e atrasos) de todos os alunos? Isso permitirá que eles recebam os avisos novamente.', async () => {
|
|
try {
|
|
const resp = await fetch('/api/admin/reset-cobrancas-counters', { method: 'POST' });
|
|
if (resp.ok) showAlert('Sucesso', 'Todos os contadores foram zerados!', 'success');
|
|
else showAlert('Erro', 'Falha ao zerar contadores.', 'error');
|
|
} catch (e) {
|
|
showAlert('Erro', 'Erro de conexão.', 'error');
|
|
}
|
|
});
|
|
}}
|
|
className="w-full py-2 px-3 bg-white border border-indigo-200 text-indigo-600 rounded-lg font-black text-[9px] uppercase tracking-widest hover:bg-indigo-50 hover:border-indigo-300 transition-all active:scale-95"
|
|
>
|
|
Zerar Contadores de Avisos
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Agendamento Automático */}
|
|
<div className="mt-5 pt-5 border-t border-indigo-200">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<label className="text-[10px] font-black text-indigo-700 uppercase tracking-widest flex items-center gap-1.5">
|
|
<Power size={13} /> Rotina Automática
|
|
</label>
|
|
<button
|
|
onClick={async () => {
|
|
const newEnabled = !scheduleEnabled;
|
|
setScheduleEnabled(newEnabled);
|
|
setIsSavingSchedule(true);
|
|
try {
|
|
const resp = await fetch('/api/cron/schedule', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ enabled: newEnabled, time: scheduleTime, tipo: 'preventivo' })
|
|
});
|
|
const d = await resp.json();
|
|
setCronActive(d.preventive);
|
|
|
|
// Persistir no estado global para não perder ao trocar de aba
|
|
const newRules = { ...templates.automationRules, autoScheduleEnabled: newEnabled, autoScheduleTime: scheduleTime };
|
|
setTemplates(prev => ({ ...prev, automationRules: newRules }));
|
|
updateData({ messageTemplates: { ...templates, automationRules: newRules } });
|
|
|
|
showAlert('Sucesso', newEnabled ? `Rotina ativada para ${scheduleTime}!` : 'Rotina automática desativada.', 'success');
|
|
} catch {
|
|
showAlert('Erro', 'Erro ao salvar agendamento.', 'error');
|
|
setScheduleEnabled(!newEnabled);
|
|
} finally {
|
|
setIsSavingSchedule(false);
|
|
}
|
|
}}
|
|
disabled={isSavingSchedule}
|
|
className={`relative w-12 h-6 rounded-full transition-all duration-300 ${
|
|
scheduleEnabled ? 'bg-indigo-600' : 'bg-slate-300'
|
|
}`}
|
|
>
|
|
<span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-md transition-transform duration-300 ${
|
|
scheduleEnabled ? 'translate-x-6' : 'translate-x-0'
|
|
}`} />
|
|
</button>
|
|
</div>
|
|
|
|
{scheduleEnabled && (
|
|
<div className="space-y-3 animate-in fade-in slide-in-from-top-2 duration-300">
|
|
<div>
|
|
<label className="block text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-1.5 ml-1">Horário do Disparo</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="time"
|
|
value={scheduleTime}
|
|
onChange={(e) => setScheduleTime(e.target.value)}
|
|
className="flex-1 px-4 py-2.5 border border-indigo-200 rounded-xl text-sm font-bold text-center bg-white focus:ring-2 focus:ring-indigo-500 focus:outline-none shadow-sm"
|
|
/>
|
|
<button
|
|
onClick={async () => {
|
|
setIsSavingSchedule(true);
|
|
try {
|
|
const resp = await fetch('/api/cron/schedule', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ enabled: true, time: scheduleTime, tipo: 'preventivo' })
|
|
});
|
|
const d = await resp.json();
|
|
setCronActive(d.preventive);
|
|
|
|
// Persistir no estado global
|
|
const newRules = { ...templates.automationRules, autoScheduleEnabled: true, autoScheduleTime: scheduleTime };
|
|
setTemplates(prev => ({ ...prev, automationRules: newRules }));
|
|
updateData({ messageTemplates: { ...templates, automationRules: newRules } });
|
|
|
|
showAlert('Sucesso', `Horário atualizado para ${scheduleTime}!`, 'success');
|
|
} catch {
|
|
showAlert('Erro', 'Erro ao atualizar horário.', 'error');
|
|
} finally {
|
|
setIsSavingSchedule(false);
|
|
}
|
|
}}
|
|
disabled={isSavingSchedule}
|
|
className="px-4 py-2.5 bg-indigo-600 text-white rounded-xl font-black text-xs hover:bg-indigo-700 transition-all active:scale-95 shadow-md"
|
|
>
|
|
{isSavingSchedule ? '...' : 'Salvar'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className={`flex items-center gap-2 text-[10px] font-bold px-3 py-2 rounded-lg ${
|
|
cronActive ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500'
|
|
}`}>
|
|
<span className={`w-2 h-2 rounded-full ${
|
|
cronActive ? 'bg-emerald-500 animate-pulse' : 'bg-slate-400'
|
|
}`} />
|
|
{cronActive ? `Ativo — Próximo disparo às ${scheduleTime}` : 'Inativo'}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-amber-50 border border-amber-200 p-6 rounded-2xl shadow-lg">
|
|
<h3 className="font-black text-amber-800 flex items-center gap-2 mb-3 text-sm uppercase tracking-widest">
|
|
<AlertTriangle size={18} /> Inadimplência
|
|
</h3>
|
|
<p className="text-[10px] text-amber-600 font-medium mb-4">
|
|
Envia cobranças para boletos com status atrasado.
|
|
</p>
|
|
<button
|
|
onClick={handleDispararCobrancas}
|
|
disabled={isSendingOverdue || !data.evolutionConfig?.apiUrl}
|
|
className={`w-full py-3.5 px-4 rounded-xl font-black text-sm text-white shadow-lg transition-all active:scale-95 ${
|
|
isSendingOverdue || !data.evolutionConfig?.apiUrl ? 'bg-slate-400' : 'bg-amber-500 hover:bg-amber-600'
|
|
}`}
|
|
>
|
|
{isSendingOverdue ? 'Processando...' : 'Disparar Cobranças Agora'}
|
|
</button>
|
|
|
|
{/* Agendamento Automático - Inadimplência */}
|
|
<div className="mt-5 pt-5 border-t border-amber-200">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<label className="text-[10px] font-black text-amber-700 uppercase tracking-widest flex items-center gap-1.5">
|
|
<Power size={13} /> Rotina Automática
|
|
</label>
|
|
<button
|
|
onClick={async () => {
|
|
const newEnabled = !scheduleOverdueEnabled;
|
|
setScheduleOverdueEnabled(newEnabled);
|
|
setIsSavingScheduleOverdue(true);
|
|
try {
|
|
const resp = await fetch('/api/cron/schedule', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ enabled: newEnabled, time: scheduleOverdueTime, tipo: 'atrasado' })
|
|
});
|
|
const d = await resp.json();
|
|
setCronOverdueActive(d.overdue);
|
|
|
|
// Persistir no estado global
|
|
const newRules = { ...templates.automationRules, autoScheduleOverdueEnabled: newEnabled, autoScheduleOverdueTime: scheduleOverdueTime };
|
|
setTemplates(prev => ({ ...prev, automationRules: newRules }));
|
|
updateData({ messageTemplates: { ...templates, automationRules: newRules } });
|
|
|
|
showAlert('Sucesso', newEnabled ? `Rotina de inadimplência ativada para ${scheduleOverdueTime}!` : 'Rotina de inadimplência desativada.', 'success');
|
|
} catch {
|
|
showAlert('Erro', 'Erro ao salvar agendamento.', 'error');
|
|
setScheduleOverdueEnabled(!newEnabled);
|
|
} finally {
|
|
setIsSavingScheduleOverdue(false);
|
|
}
|
|
}}
|
|
disabled={isSavingScheduleOverdue}
|
|
className={`relative w-12 h-6 rounded-full transition-all duration-300 ${
|
|
scheduleOverdueEnabled ? 'bg-amber-500' : 'bg-slate-300'
|
|
}`}
|
|
>
|
|
<span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-md transition-transform duration-300 ${
|
|
scheduleOverdueEnabled ? 'translate-x-6' : 'translate-x-0'
|
|
}`} />
|
|
</button>
|
|
</div>
|
|
|
|
{scheduleOverdueEnabled && (
|
|
<div className="space-y-3 animate-in fade-in slide-in-from-top-2 duration-300">
|
|
<div>
|
|
<label className="block text-[10px] font-black text-amber-500 uppercase tracking-widest mb-1.5 ml-1">Horário do Disparo</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="time"
|
|
value={scheduleOverdueTime}
|
|
onChange={(e) => setScheduleOverdueTime(e.target.value)}
|
|
className="flex-1 px-4 py-2.5 border border-amber-200 rounded-xl text-sm font-bold text-center bg-white focus:ring-2 focus:ring-amber-500 focus:outline-none shadow-sm"
|
|
/>
|
|
<button
|
|
onClick={async () => {
|
|
setIsSavingScheduleOverdue(true);
|
|
try {
|
|
const resp = await fetch('/api/cron/schedule', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ enabled: true, time: scheduleOverdueTime, tipo: 'atrasado' })
|
|
});
|
|
const d = await resp.json();
|
|
setCronOverdueActive(d.overdue);
|
|
|
|
// Persistir no estado global
|
|
const newRules = { ...templates.automationRules, autoScheduleOverdueEnabled: true, autoScheduleOverdueTime: scheduleOverdueTime };
|
|
setTemplates(prev => ({ ...prev, automationRules: newRules }));
|
|
updateData({ messageTemplates: { ...templates, automationRules: newRules } });
|
|
|
|
showAlert('Sucesso', `Horário atualizado para ${scheduleOverdueTime}!`, 'success');
|
|
} catch {
|
|
showAlert('Erro', 'Erro ao atualizar horário.', 'error');
|
|
} finally {
|
|
setIsSavingScheduleOverdue(false);
|
|
}
|
|
}}
|
|
disabled={isSavingScheduleOverdue}
|
|
className="px-4 py-2.5 bg-amber-500 text-white rounded-xl font-black text-xs hover:bg-amber-600 transition-all active:scale-95 shadow-md"
|
|
>
|
|
{isSavingScheduleOverdue ? '...' : 'Salvar'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className={`flex items-center gap-2 text-[10px] font-bold px-3 py-2 rounded-lg ${
|
|
cronOverdueActive ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500'
|
|
}`}>
|
|
<span className={`w-2 h-2 rounded-full ${
|
|
cronOverdueActive ? 'bg-emerald-500 animate-pulse' : 'bg-slate-400'
|
|
}`} />
|
|
{cronOverdueActive ? `Ativo — Próximo disparo às ${scheduleOverdueTime}` : 'Inativo'}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-pink-50 border border-pink-200 p-6 rounded-2xl shadow-lg">
|
|
<h3 className="font-black text-pink-800 flex items-center gap-2 mb-3 text-sm uppercase tracking-widest">
|
|
<Cake size={18} /> Aniversariantes
|
|
</h3>
|
|
<button
|
|
onClick={handleSendBirthdays}
|
|
disabled={isSendingBdays || birthdayStudents.length === 0 || !data.evolutionConfig?.apiUrl}
|
|
className={`w-full flex items-center justify-center gap-2 py-3.5 px-4 rounded-xl font-black text-sm text-white shadow-xl transition-all active:scale-95 mb-4 ${
|
|
isSendingBdays || birthdayStudents.length === 0 || !data.evolutionConfig?.apiUrl ? 'bg-slate-400' : 'bg-pink-500 hover:bg-pink-600'
|
|
}`}
|
|
>
|
|
{isSendingBdays ? 'Enviando...' : 'Parabenizar Todos'}
|
|
</button>
|
|
|
|
{/* Agendamento Automático - Aniversário */}
|
|
<div className="mt-4 pt-4 border-t border-pink-200">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<label className="text-[10px] font-black text-pink-700 uppercase tracking-widest flex items-center gap-1.5">
|
|
<Power size={13} /> Rotina Automática
|
|
</label>
|
|
<button
|
|
onClick={async () => {
|
|
const newEnabled = !scheduleBirthdayEnabled;
|
|
setScheduleBirthdayEnabled(newEnabled);
|
|
setIsSavingScheduleBirthday(true);
|
|
try {
|
|
const resp = await fetch('/api/cron/schedule', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ enabled: newEnabled, time: scheduleBirthdayTime, tipo: 'aniversario' })
|
|
});
|
|
const d = await resp.json();
|
|
setCronBirthdayActive(d.birthday);
|
|
|
|
// Persistir no estado global
|
|
const newRules = { ...templates.automationRules, autoScheduleBirthdayEnabled: newEnabled, autoScheduleBirthdayTime: scheduleBirthdayTime };
|
|
setTemplates(prev => ({ ...prev, automationRules: newRules }));
|
|
updateData({ messageTemplates: { ...templates, automationRules: newRules } });
|
|
|
|
showAlert('Sucesso', newEnabled ? `Rotina de aniversário ativada para ${scheduleBirthdayTime}!` : 'Rotina automática desativada.', 'success');
|
|
} catch {
|
|
showAlert('Erro', 'Erro ao salvar agendamento.', 'error');
|
|
setScheduleBirthdayEnabled(!newEnabled);
|
|
} finally {
|
|
setIsSavingScheduleBirthday(false);
|
|
}
|
|
}}
|
|
disabled={isSavingScheduleBirthday}
|
|
className={`relative w-12 h-6 rounded-full transition-all duration-300 ${
|
|
scheduleBirthdayEnabled ? 'bg-pink-600' : 'bg-slate-300'
|
|
}`}
|
|
>
|
|
<span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-md transition-transform duration-300 ${
|
|
scheduleBirthdayEnabled ? 'translate-x-6' : 'translate-x-0'
|
|
}`} />
|
|
</button>
|
|
</div>
|
|
|
|
{scheduleBirthdayEnabled && (
|
|
<div className="space-y-3 animate-in fade-in slide-in-from-top-2 duration-300 mb-4">
|
|
<div>
|
|
<label className="block text-[10px] font-black text-pink-500 uppercase tracking-widest mb-1.5 ml-1">Horário do Disparo</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="time"
|
|
value={scheduleBirthdayTime}
|
|
onChange={(e) => setScheduleBirthdayTime(e.target.value)}
|
|
className="flex-1 px-4 py-2.5 border border-pink-200 rounded-xl text-sm font-bold text-center bg-white focus:ring-2 focus:ring-pink-500 focus:outline-none shadow-sm"
|
|
/>
|
|
<button
|
|
onClick={async () => {
|
|
setIsSavingScheduleBirthday(true);
|
|
try {
|
|
const resp = await fetch('/api/cron/schedule', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ enabled: true, time: scheduleBirthdayTime, tipo: 'aniversario' })
|
|
});
|
|
const d = await resp.json();
|
|
setCronBirthdayActive(d.birthday);
|
|
|
|
// Persistir no estado global
|
|
const newRules = { ...templates.automationRules, autoScheduleBirthdayEnabled: true, autoScheduleBirthdayTime: scheduleBirthdayTime };
|
|
setTemplates(prev => ({ ...prev, automationRules: newRules }));
|
|
updateData({ messageTemplates: { ...templates, automationRules: newRules } });
|
|
|
|
showAlert('Sucesso', `Horário atualizado para ${scheduleBirthdayTime}!`, 'success');
|
|
} catch {
|
|
showAlert('Erro', 'Erro ao atualizar horário.', 'error');
|
|
} finally {
|
|
setIsSavingScheduleBirthday(false);
|
|
}
|
|
}}
|
|
disabled={isSavingScheduleBirthday}
|
|
className="px-4 py-2.5 bg-pink-600 text-white rounded-xl font-black text-xs hover:bg-pink-700 transition-all active:scale-95 shadow-md"
|
|
>
|
|
{isSavingScheduleBirthday ? '...' : 'Salvar'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className={`flex items-center gap-2 text-[10px] font-bold px-3 py-2 rounded-lg ${
|
|
cronBirthdayActive ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500'
|
|
}`}>
|
|
<span className={`w-2 h-2 rounded-full ${
|
|
cronBirthdayActive ? 'bg-emerald-500 animate-pulse' : 'bg-slate-400'
|
|
}`} />
|
|
{cronBirthdayActive ? `Ativo — Próximo disparo às ${scheduleBirthdayTime}` : 'Inativo'}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-pink-100">
|
|
<label className="block text-[10px] font-black text-pink-400 uppercase tracking-widest mb-3">Próximos do Mês</label>
|
|
<div className="space-y-2 max-h-40 overflow-y-auto pr-2 custom-scrollbar">
|
|
{(data.students || []).filter(s => {
|
|
if (!s.birthDate || s.status !== 'active') return false;
|
|
return parseInt(s.birthDate.split('-')[1]) === (new Date().getMonth() + 1);
|
|
}).sort((a,b) => parseInt(a.birthDate!.split('-')[2]) - parseInt(b.birthDate!.split('-')[2])).map(s => {
|
|
const day = s.birthDate?.split('-')[2];
|
|
return (
|
|
<div key={s.id} className="flex justify-between items-center text-[10px] font-bold text-pink-700 bg-white/40 p-2 rounded-lg border border-pink-100/50">
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-5 h-5 bg-pink-100 rounded-full flex items-center justify-center text-[9px]">{day}</span>
|
|
<span className="truncate max-w-[100px]">{s.name}</span>
|
|
</div>
|
|
<span className="opacity-60">{s.phone || 'S/ Tel'}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lado Direito - Cards de Modelos */}
|
|
<div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{templateCards.map((card) => {
|
|
const Icon = card.icon;
|
|
const colors: any = {
|
|
blue: 'bg-blue-50 text-blue-600',
|
|
emerald: 'bg-emerald-50 text-emerald-600',
|
|
red: 'bg-red-50 text-red-600',
|
|
slate: 'bg-slate-50 text-slate-600',
|
|
amber: 'bg-amber-50 text-amber-600',
|
|
pink: 'bg-pink-50 text-pink-600',
|
|
indigo: 'bg-indigo-50 text-indigo-600',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={card.key}
|
|
onClick={() => setEditingTemplate(card as any)}
|
|
className="bg-white border border-slate-200 rounded-3xl p-6 cursor-pointer transition-all hover:shadow-2xl hover:-translate-y-1 group relative overflow-hidden active:scale-95"
|
|
>
|
|
<div className={`w-12 h-12 rounded-2xl ${colors[card.color]} flex items-center justify-center mb-5 group-hover:scale-110 transition-transform shadow-sm`}>
|
|
<Icon size={24} />
|
|
</div>
|
|
<h4 className="font-black text-slate-800 text-lg mb-2">{card.label}</h4>
|
|
<p className="text-xs text-slate-500 font-medium leading-relaxed">{card.desc}</p>
|
|
<div className="mt-6 flex items-center gap-2 text-[10px] font-black text-indigo-600 uppercase tracking-widest border-t border-slate-50 pt-4">
|
|
Editar Modelo <Settings size={12} className="group-hover:rotate-45 transition-transform" />
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* MODAL DE EDIÇÃO */}
|
|
{editingTemplate && (
|
|
<div className="fixed inset-0 bg-transparent z-50 flex items-center justify-center p-4 animate-in fade-in duration-400">
|
|
<div className="bg-white rounded-[2.5rem] w-full max-w-2xl shadow-2xl relative overflow-hidden animate-slide-up duration-400 border border-slate-100">
|
|
<div className="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
|
<div>
|
|
<h3 className="text-xl font-black text-slate-800">{editingTemplate.label}</h3>
|
|
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{editingTemplate.key}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setEditingTemplate(null)}
|
|
className="p-3 bg-white text-slate-400 hover:text-red-500 rounded-2xl shadow-md transition-all hover:rotate-90 border border-slate-100"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-8 space-y-6">
|
|
<div>
|
|
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3 ml-1">Clique para inserir variável</label>
|
|
<div className="flex flex-wrap gap-2 text-[10px] font-black">
|
|
{editingTemplate.vars.map(v => (
|
|
<button
|
|
key={v}
|
|
onClick={() => insertVariable(v)}
|
|
className="px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-lg hover:bg-indigo-600 hover:text-white transition-all active:scale-95 border border-indigo-100 shadow-sm"
|
|
>
|
|
{v}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<textarea
|
|
id="template-editor"
|
|
value={(templates[editingTemplate.key as keyof typeof templates] as string) || ''}
|
|
onChange={(e) => setTemplates(p => ({ ...p, [editingTemplate.key]: e.target.value }))}
|
|
rows={['boletoAVencer', 'boletoVencido'].includes(editingTemplate.key) ? 6 : 10}
|
|
className="w-full px-6 py-5 bg-slate-50 border-2 border-slate-100 rounded-[2rem] focus:border-indigo-500 focus:bg-white focus:outline-none transition-all text-slate-700 font-medium shadow-inner resize-none"
|
|
placeholder="Escreva sua mensagem..."
|
|
/>
|
|
|
|
{editingTemplate.key === 'boletoAVencer' && (
|
|
<div className="bg-indigo-50 border border-indigo-100 rounded-2xl p-6 mt-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
|
|
<h4 className="font-black text-indigo-800 text-sm flex items-center gap-2 uppercase tracking-widest mb-4">
|
|
<Clock size={16} /> Configuração de Disparo Preventivo
|
|
</h4>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-2 ml-1">Antecedência (Dias)</label>
|
|
<div className="flex items-center bg-white border border-indigo-100 rounded-xl overflow-hidden shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 transition-all">
|
|
<input
|
|
type="number" min="1" max="30"
|
|
value={templates.automationRules.sendDaysBefore}
|
|
onChange={(e) => setTemplates(p => ({ ...p, automationRules: { ...p.automationRules, sendDaysBefore: e.target.value } }))}
|
|
className="w-full px-4 py-3 text-sm font-bold text-slate-700 focus:outline-none text-center"
|
|
/>
|
|
</div>
|
|
<p className="text-[9px] text-indigo-400 mt-1.5 ml-1 font-medium">Dias antes do vencimento para avisar.</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-2 ml-1">Repetições Max.</label>
|
|
<div className="flex items-center bg-white border border-indigo-100 rounded-xl overflow-hidden shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 transition-all">
|
|
<input
|
|
type="number" min="1" max="10"
|
|
value={templates.automationRules.maxPreWarnings}
|
|
onChange={(e) => setTemplates(p => ({ ...p, automationRules: { ...p.automationRules, maxPreWarnings: e.target.value } }))}
|
|
className="w-full px-4 py-3 text-sm font-bold text-slate-700 focus:outline-none text-center"
|
|
/>
|
|
</div>
|
|
<p className="text-[9px] text-indigo-400 mt-1.5 ml-1 font-medium">Limite de avisos recebidos pelo aluno.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{editingTemplate.key === 'boletoVencido' && (
|
|
<div className="bg-red-50 border border-red-100 rounded-2xl p-6 mt-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
|
|
<h4 className="font-black text-red-800 text-sm flex items-center gap-2 uppercase tracking-widest mb-4">
|
|
<AlertTriangle size={16} /> Configuração de Inadimplência
|
|
</h4>
|
|
|
|
<div className="space-y-4">
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={templates.automationRules.sendOnDueDate}
|
|
onChange={(e) => setTemplates(p => ({ ...p, automationRules: { ...p.automationRules, sendOnDueDate: e.target.checked } }))}
|
|
className="w-5 h-5 rounded border-slate-300 text-red-600 focus:ring-red-500"
|
|
/>
|
|
<span className="text-sm font-bold text-red-900">Aviso no dia do vencimento</span>
|
|
</label>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-[10px] font-black text-red-500 uppercase tracking-widest mb-2 ml-1">1º aviso (Dias após)</label>
|
|
<div className="flex items-center bg-white border border-red-100 rounded-xl overflow-hidden shadow-sm focus-within:ring-2 focus-within:ring-red-500 transition-all">
|
|
<input
|
|
type="number" min="1" max="30"
|
|
value={templates.automationRules.sendDaysAfter}
|
|
onChange={(e) => setTemplates(p => ({ ...p, automationRules: { ...p.automationRules, sendDaysAfter: e.target.value } }))}
|
|
className="w-full px-4 py-3 text-sm font-bold text-slate-700 focus:outline-none text-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-black text-red-500 uppercase tracking-widest mb-2 ml-1">Repetir a cada (Dias)</label>
|
|
<div className="flex items-center bg-white border border-red-100 rounded-xl overflow-hidden shadow-sm focus-within:ring-2 focus-within:ring-red-500 transition-all">
|
|
<input
|
|
type="number" min="1" max="30"
|
|
value={templates.automationRules.repeatEveryDays}
|
|
onChange={(e) => setTemplates(p => ({ ...p, automationRules: { ...p.automationRules, repeatEveryDays: e.target.value } }))}
|
|
className="w-full px-4 py-3 text-sm font-bold text-slate-700 focus:outline-none text-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-4 pt-2">
|
|
<button
|
|
onClick={() => setEditingTemplate(null)}
|
|
className="flex-1 py-4 bg-slate-100 text-slate-500 rounded-2xl font-black text-sm hover:bg-slate-200 transition-all active:scale-95"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
<button
|
|
onClick={() => { handleSave(); setEditingTemplate(null); }}
|
|
className="flex-1 py-4 bg-indigo-600 text-white rounded-2xl font-black text-sm hover:bg-indigo-700 shadow-xl shadow-indigo-100 transition-all active:scale-95"
|
|
>
|
|
Salvar Modelo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Messages;
|