196 lines
8.9 KiB
TypeScript
Executable File
196 lines
8.9 KiB
TypeScript
Executable File
/**
|
|
* Settings.tsx
|
|
*
|
|
* @author Descomplicar® Crescimento Digital
|
|
* @link https://descomplicar.pt
|
|
* @copyright 2025 Descomplicar®
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import type { CrmSettings } from '../types';
|
|
|
|
interface SettingsProps {
|
|
crmSettings: CrmSettings;
|
|
onSaveCrmSettings: (settings: CrmSettings) => void;
|
|
isAutoCleanEnabled: boolean;
|
|
setAutoCleanEnabled: (enabled: boolean) => void;
|
|
apiKey: string;
|
|
onSaveApiKey: (key: string) => void;
|
|
}
|
|
|
|
const Settings: React.FC<SettingsProps> = ({
|
|
crmSettings,
|
|
onSaveCrmSettings,
|
|
isAutoCleanEnabled,
|
|
setAutoCleanEnabled,
|
|
apiKey,
|
|
onSaveApiKey
|
|
}) => {
|
|
const [currentCrmSettings, setCurrentCrmSettings] = useState<CrmSettings>(crmSettings);
|
|
const [currentApiKey, setCurrentApiKey] = useState<string>(apiKey);
|
|
const [showSuccess, setShowSuccess] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setCurrentCrmSettings(crmSettings);
|
|
}, [crmSettings]);
|
|
|
|
useEffect(() => {
|
|
setCurrentApiKey(apiKey);
|
|
}, [apiKey]);
|
|
|
|
const handleCrmChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value, type, checked } = e.target;
|
|
setCurrentCrmSettings(prev => ({
|
|
...prev,
|
|
[name]: type === 'checkbox' ? checked : value
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onSaveCrmSettings(currentCrmSettings);
|
|
onSaveApiKey(currentApiKey);
|
|
setShowSuccess(true);
|
|
setTimeout(() => setShowSuccess(false), 3000);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8 max-w-3xl mx-auto">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-slate-800 dark:text-white">Configurações</h2>
|
|
<p className="text-slate-500 dark:text-slate-400">Gerencie as integrações e preferências da aplicação.</p>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-md border border-slate-200 dark:border-slate-700">
|
|
<div className="p-6">
|
|
<h3 className="text-lg font-semibold text-slate-800 dark:text-white">Limpeza Automática (Backend)</h3>
|
|
<p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
|
|
Ative para que um processo no servidor (Cloud Run) analise seus e-mails a cada 2 horas, mesmo com o navegador fechado.
|
|
</p>
|
|
</div>
|
|
<div className="bg-slate-50 dark:bg-slate-800/50 p-6 border-t border-slate-200 dark:border-slate-700 rounded-b-xl">
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-medium text-slate-700 dark:text-slate-200">
|
|
{isAutoCleanEnabled ? 'Automação Ativada' : 'Automação Desativada'}
|
|
</span>
|
|
<button
|
|
onClick={() => setAutoCleanEnabled(!isAutoCleanEnabled)}
|
|
className={`${
|
|
isAutoCleanEnabled ? 'bg-sky-500' : 'bg-slate-300 dark:bg-slate-600'
|
|
} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 dark:ring-offset-slate-800`}
|
|
role="switch"
|
|
aria-checked={isAutoCleanEnabled}
|
|
>
|
|
<span
|
|
className={`${
|
|
isAutoCleanEnabled ? 'translate-x-5' : 'translate-x-0'
|
|
} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-slate-500 dark:text-slate-400 mt-3">
|
|
<strong>Nota:</strong> Para a automação funcionar, as chaves de API abaixo devem ser configuradas como **variáveis de ambiente** no seu serviço Cloud Run. Consulte o arquivo `README.md`.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-md border border-slate-200 dark:border-slate-700 mb-8">
|
|
<div className="p-6 space-y-6">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-800 dark:text-white">Chave da API do Google Gemini</h3>
|
|
<p className="text-slate-500 dark:text-slate-400 text-sm mt-1">Insira sua chave para habilitar a análise com IA nas verificações manuais.</p>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="apiKey" className="block text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
Sua Chave API
|
|
</label>
|
|
<input
|
|
type="password"
|
|
name="apiKey"
|
|
id="apiKey"
|
|
value={currentApiKey}
|
|
onChange={(e) => setCurrentApiKey(e.target.value)}
|
|
className="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
|
|
placeholder="Cole sua chave da API do Gemini aqui"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-md border border-slate-200 dark:border-slate-700">
|
|
<div className="p-6 space-y-6">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-800 dark:text-white">Integração com Perfex CRM</h3>
|
|
<p className="text-slate-500 dark:text-slate-400 text-sm mt-1">Conecte-se à sua instância do Perfex CRM para automatizar tarefas.</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label htmlFor="url" className="block text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
URL da API do Perfex CRM
|
|
</label>
|
|
<input
|
|
type="url"
|
|
name="url"
|
|
id="url"
|
|
value={currentCrmSettings.url}
|
|
onChange={handleCrmChange}
|
|
className="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
|
|
placeholder="https://seu-crm.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="token" className="block text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
Token da API
|
|
</label>
|
|
<input
|
|
type="password"
|
|
name="token"
|
|
id="token"
|
|
value={currentCrmSettings.token}
|
|
onChange={handleCrmChange}
|
|
className="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
|
|
placeholder="Seu token de API seguro"
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative flex items-start">
|
|
<div className="flex h-5 items-center">
|
|
<input
|
|
id="autoDeleteTickets"
|
|
name="autoDeleteTickets"
|
|
type="checkbox"
|
|
checked={currentCrmSettings.autoDeleteTickets}
|
|
onChange={handleCrmChange}
|
|
className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500"
|
|
/>
|
|
</div>
|
|
<div className="ml-3 text-sm">
|
|
<label htmlFor="autoDeleteTickets" className="font-medium text-slate-700 dark:text-slate-200">
|
|
Excluir Tickets de Spam/Notificações
|
|
</label>
|
|
<p className="text-slate-500 dark:text-slate-400">Excluir automaticamente tickets do CRM criados por e-mails de spam ou notificações.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-slate-50 dark:bg-slate-800/50 p-4 border-t border-slate-200 dark:border-slate-700 rounded-b-xl flex items-center justify-end gap-4">
|
|
{showSuccess && <p className="text-sm text-green-600 dark:text-green-400 animate-pulse">Configurações salvas com sucesso!</p>}
|
|
<button
|
|
type="submit"
|
|
className="bg-sky-500 text-white font-semibold py-2 px-5 rounded-lg hover:bg-sky-600 transition-colors"
|
|
>
|
|
Salvar Todas as Configurações
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|