VPS 4 Deploy Agent
5ec6bd6354
continuous-integration/webhook Falha no deploy de clube67_newwhats.local (VPS 4)
378 lines
23 KiB
TypeScript
378 lines
23 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { Filter, Plus, TrendingUp, Clock, TrendingDown, CheckCircle, Download, Trash2, X, DollarSign, Loader2 } from 'lucide-react';
|
|
import { HybridBackend } from '../services/backend.ts';
|
|
import { FinanceiroItem, Paciente } from '../types.ts';
|
|
import { useToast } from '../contexts/ToastContext.tsx';
|
|
|
|
// --- Reusable Debounce Hook ---
|
|
function useDebounce(value: string, delay: number) {
|
|
const [debouncedValue, setDebouncedValue] = useState(value);
|
|
useEffect(() => {
|
|
const handler = setTimeout(() => setDebouncedValue(value), delay);
|
|
return () => clearTimeout(handler);
|
|
}, [value, delay]);
|
|
return debouncedValue;
|
|
}
|
|
|
|
// ----------- NOVO LANÇAMENTO MODAL -----------
|
|
const NovoLancamentoModal: React.FC<{
|
|
onClose: () => void;
|
|
onSaved: () => void;
|
|
}> = ({ onClose, onSaved }) => {
|
|
const toast = useToast();
|
|
const [selectedPatient, setSelectedPatient] = useState<Paciente | null>(null);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [isSearchFocused, setIsSearchFocused] = useState(false);
|
|
const debouncedSearchTerm = useDebounce(searchTerm, 400);
|
|
|
|
const [searchResults, setSearchResults] = useState<Paciente[]>([]);
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!debouncedSearchTerm) { setSearchResults([]); return; }
|
|
setIsSearching(true);
|
|
HybridBackend.getPacientes(debouncedSearchTerm).then(results => {
|
|
setSearchResults(results);
|
|
setIsSearching(false);
|
|
});
|
|
}, [debouncedSearchTerm]);
|
|
|
|
const handlePatientSelect = (patient: Paciente) => {
|
|
setSelectedPatient(patient);
|
|
setSearchTerm('');
|
|
setIsSearchFocused(false);
|
|
};
|
|
|
|
const [form, setForm] = useState({
|
|
id: crypto.randomUUID(),
|
|
descricao: '',
|
|
valor: '',
|
|
dataVencimento: new Date().toISOString().split('T')[0],
|
|
status: 'Pendente' as 'Pago' | 'Pendente' | 'Atrasado',
|
|
formaPagamento: 'Pix' as 'Boleto' | 'Pix' | 'Cartão' | 'Dinheiro',
|
|
});
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [onClose]);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!selectedPatient || !form.descricao || !form.valor) {
|
|
toast.error('PREENCHA TODOS OS CAMPOS OBRIGATÓRIOS.');
|
|
return;
|
|
}
|
|
try {
|
|
await HybridBackend.saveFinanceiro({
|
|
...form,
|
|
pacienteNome: selectedPatient.nome,
|
|
valor: parseFloat(form.valor),
|
|
});
|
|
toast.success('LANÇAMENTO SALVO COM SUCESSO!');
|
|
onSaved();
|
|
onClose();
|
|
} catch {
|
|
toast.error('ERRO AO SALVAR LANÇAMENTO.');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm p-2 lg:p-0">
|
|
<form onSubmit={handleSubmit} className="bg-white rounded-xl shadow-2xl w-full max-w-md lg:max-w-3xl lg:w-[70vw] animate-in fade-in zoom-in-50 duration-200 flex flex-col overflow-hidden">
|
|
{/* HEADER */}
|
|
<div className="px-5 py-4 border-b border-gray-200 flex justify-between items-center flex-shrink-0 bg-gradient-to-r from-green-50 to-white">
|
|
<h2 className="text-lg font-bold text-gray-800 flex items-center gap-2">
|
|
<DollarSign size={22} className="text-green-600" /> NOVO LANÇAMENTO
|
|
</h2>
|
|
<button type="button" onClick={onClose} className="text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg p-1.5 transition-colors"><X size={22} /></button>
|
|
</div>
|
|
|
|
{/* BODY */}
|
|
<div className="flex-1 overflow-y-auto p-5 lg:p-8">
|
|
{/* PACIENTE SEARCH */}
|
|
<div className="mb-6">
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider">PACIENTE *</label>
|
|
{!selectedPatient ? (
|
|
<div className="relative mt-2">
|
|
<input
|
|
type="text"
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value.toUpperCase())}
|
|
onFocus={() => setIsSearchFocused(true)}
|
|
onBlur={() => setTimeout(() => setIsSearchFocused(false), 200)}
|
|
placeholder="DIGITE O NOME OU CPF..."
|
|
className="w-full lg:w-1/2 bg-gray-100 p-3 lg:p-4 rounded-lg font-bold text-gray-800 uppercase focus:border-blue-500 outline-none border-2 border-transparent focus:border-2 text-sm lg:text-base"
|
|
/>
|
|
{isSearchFocused && debouncedSearchTerm && (
|
|
<ul className="absolute z-10 w-full lg:w-1/2 bg-white border border-gray-300 rounded-lg mt-1 max-h-48 overflow-y-auto shadow-lg">
|
|
{isSearching && <li className="p-3 text-sm text-gray-500">BUSCANDO...</li>}
|
|
{searchResults.map(p => (
|
|
<li key={p.id} onMouseDown={() => handlePatientSelect(p)} className="p-3 hover:bg-gray-100 cursor-pointer uppercase font-semibold text-sm">
|
|
{p.nome} ({p.cpf})
|
|
</li>
|
|
))}
|
|
{!isSearching && searchResults.length === 0 && <li className="p-3 text-sm text-gray-500">NENHUM PACIENTE ENCONTRADO.</li>}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="w-full lg:w-1/2 bg-green-50 border border-green-200 p-3 lg:p-4 rounded-lg mt-2 flex justify-between items-center">
|
|
<span className="font-bold text-green-800 uppercase text-sm lg:text-base">{selectedPatient.nome}</span>
|
|
<button type="button" onClick={() => setSelectedPatient(null)} className="text-xs font-bold bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1.5 rounded-md transition-colors">ALTERAR</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-5 space-y-5 lg:space-y-0">
|
|
{/* DESCRIÇÃO */}
|
|
<div className="lg:col-span-2">
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider">DESCRIÇÃO *</label>
|
|
<input type="text" required value={form.descricao}
|
|
onChange={e => setForm(f => ({ ...f, descricao: e.target.value.toUpperCase() }))}
|
|
className="w-full mt-2 border border-gray-300 rounded-lg p-2.5 lg:p-3 uppercase-input text-sm" placeholder="EX: CONSULTA AVALIAÇÃO, LIMPEZA..." />
|
|
</div>
|
|
{/* VALOR */}
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider">VALOR (R$) *</label>
|
|
<input type="number" step="0.01" required value={form.valor}
|
|
onChange={e => setForm(f => ({ ...f, valor: e.target.value }))}
|
|
className="w-full mt-2 border border-gray-300 rounded-lg p-2.5 lg:p-3 text-sm" placeholder="0,00" />
|
|
</div>
|
|
{/* VENCIMENTO */}
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider">DATA VENCIMENTO</label>
|
|
<input type="date" value={form.dataVencimento}
|
|
onChange={e => setForm(f => ({ ...f, dataVencimento: e.target.value }))}
|
|
className="w-full mt-2 border border-gray-300 rounded-lg p-2.5 lg:p-3 text-sm" />
|
|
</div>
|
|
{/* STATUS */}
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider">STATUS</label>
|
|
<select value={form.status}
|
|
onChange={e => setForm(f => ({ ...f, status: e.target.value as any }))}
|
|
className="w-full mt-2 border border-gray-300 rounded-lg p-2.5 lg:p-3 bg-white text-sm uppercase-select">
|
|
<option value="Pendente">PENDENTE</option>
|
|
<option value="Pago">PAGO</option>
|
|
<option value="Atrasado">ATRASADO</option>
|
|
</select>
|
|
</div>
|
|
{/* FORMA DE PAGAMENTO */}
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider">FORMA DE PAGAMENTO</label>
|
|
<select value={form.formaPagamento}
|
|
onChange={e => setForm(f => ({ ...f, formaPagamento: e.target.value as any }))}
|
|
className="w-full mt-2 border border-gray-300 rounded-lg p-2.5 lg:p-3 bg-white text-sm uppercase-select">
|
|
<option value="Pix">PIX</option>
|
|
<option value="Boleto">BOLETO</option>
|
|
<option value="Cartão">CARTÃO</option>
|
|
<option value="Dinheiro">DINHEIRO</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* FOOTER */}
|
|
<div className="px-5 py-4 bg-gray-50 border-t border-gray-200 flex justify-end gap-3 flex-shrink-0">
|
|
<button type="button" onClick={onClose} className="px-6 py-2.5 bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold rounded-lg text-sm uppercase transition-colors">CANCELAR</button>
|
|
<button type="submit" className="px-8 py-2.5 bg-green-600 hover:bg-green-700 text-white font-bold rounded-lg shadow-sm text-sm uppercase flex items-center gap-2 transition-colors">
|
|
<Plus size={16} /> SALVAR
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ----------- MAIN VIEW -----------
|
|
import { PageHeader } from '../components/PageHeader.tsx';
|
|
|
|
export const FinanceiroView: React.FC = () => {
|
|
const [transacoes, setTransacoes] = useState<FinanceiroItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [filtroStatus, setFiltroStatus] = useState<'TODOS' | 'Pago' | 'Pendente' | 'Atrasado'>('TODOS');
|
|
const [showFiltro, setShowFiltro] = useState(false);
|
|
const [isNovoOpen, setIsNovoOpen] = useState(false);
|
|
const toast = useToast();
|
|
|
|
const fetchData = useCallback(() => {
|
|
setLoading(true);
|
|
HybridBackend.getFinanceiro().then((data) => {
|
|
setTransacoes(data);
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => { fetchData(); }, [fetchData]);
|
|
|
|
const transacoesFiltradas = filtroStatus === 'TODOS' ? transacoes : transacoes.filter(t => t.status === filtroStatus);
|
|
|
|
const totalRecebido = transacoes.filter(t => t.status === 'Pago').reduce((acc, t) => acc + Number(t.valor), 0);
|
|
const totalPendente = transacoes.filter(t => t.status === 'Pendente').reduce((acc, t) => acc + Number(t.valor), 0);
|
|
const totalAtrasado = transacoes.filter(t => t.status === 'Atrasado').reduce((acc, t) => acc + Number(t.valor), 0);
|
|
|
|
const handleConfirmarPagamento = async (item: FinanceiroItem) => {
|
|
if (!window.confirm(`CONFIRMAR PAGAMENTO DE R$ ${Number(item.valor).toFixed(2)} DE ${item.pacienteNome}?`)) return;
|
|
try {
|
|
await HybridBackend.updateFinanceiro({ ...item, status: 'Pago' });
|
|
toast.success(`PAGAMENTO DE ${item.pacienteNome} CONFIRMADO!`);
|
|
fetchData();
|
|
} catch {
|
|
toast.error('ERRO AO CONFIRMAR PAGAMENTO.');
|
|
}
|
|
};
|
|
|
|
const handleExcluir = async (item: FinanceiroItem) => {
|
|
if (!window.confirm(`TEM CERTEZA QUE DESEJA EXCLUIR O LANÇAMENTO DE ${item.pacienteNome}? ESTA AÇÃO NÃO PODE SER DESFEITA.`)) return;
|
|
try {
|
|
await HybridBackend.deleteFinanceiro(item.id);
|
|
toast.success('LANÇAMENTO EXCLUÍDO!');
|
|
fetchData();
|
|
} catch {
|
|
toast.error('ERRO AO EXCLUIR LANÇAMENTO.');
|
|
}
|
|
};
|
|
|
|
const handleDownload = (item: FinanceiroItem) => {
|
|
toast.success(`RECIBO DE ${item.pacienteNome} GERADO COM SUCESSO!`);
|
|
};
|
|
|
|
const filtroLabel = filtroStatus === 'TODOS' ? 'FILTRAR' : filtroStatus.toUpperCase();
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader title="FINANCEIRO & FATURAMENTO">
|
|
<div className="flex gap-2 relative">
|
|
{/* FILTRAR */}
|
|
<div className="relative">
|
|
<button onClick={() => setShowFiltro(!showFiltro)}
|
|
className={`border px-3 py-2 rounded-lg flex items-center gap-2 font-bold text-xs uppercase transition-colors ${filtroStatus !== 'TODOS' ? 'bg-blue-50 border-blue-300 text-blue-700' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
|
|
}`}>
|
|
<Filter size={18} /> {filtroLabel}
|
|
</button>
|
|
{showFiltro && (
|
|
<div className="absolute right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl z-20 min-w-[160px] overflow-hidden">
|
|
{(['TODOS', 'Pago', 'Pendente', 'Atrasado'] as const).map(status => (
|
|
<button key={status} onClick={() => { setFiltroStatus(status); setShowFiltro(false); }}
|
|
className={`w-full text-left px-4 py-2.5 text-sm font-bold uppercase hover:bg-gray-50 transition-colors flex items-center justify-between ${filtroStatus === status ? 'text-blue-700 bg-blue-50' : 'text-gray-700'
|
|
}`}>
|
|
{status.toUpperCase()}
|
|
{filtroStatus === status && <div className="w-2 h-2 rounded-full bg-blue-600"></div>}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* NOVO LANÇAMENTO */}
|
|
<button onClick={() => setIsNovoOpen(true)}
|
|
className="bg-green-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-green-700 font-bold text-xs uppercase shadow-sm transition-colors">
|
|
<Plus size={18} /> NOVO LANÇAMENTO
|
|
</button>
|
|
</div>
|
|
</PageHeader>
|
|
|
|
{/* DASHBOARD CARDS */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs text-gray-500 font-bold mb-1 uppercase">RECEBIDO (MÊS)</p>
|
|
<h3 className="text-2xl font-bold text-green-600">R$ {totalRecebido.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</h3>
|
|
</div>
|
|
<div className="bg-green-100 p-3 rounded-full text-green-600"><TrendingUp size={24} /></div>
|
|
</div>
|
|
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs text-gray-500 font-bold mb-1 uppercase">A RECEBER / PENDENTE</p>
|
|
<h3 className="text-2xl font-bold text-yellow-600">R$ {totalPendente.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</h3>
|
|
</div>
|
|
<div className="bg-yellow-100 p-3 rounded-full text-yellow-600"><Clock size={24} /></div>
|
|
</div>
|
|
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs text-gray-500 font-bold mb-1 uppercase">EM ATRASO</p>
|
|
<h3 className="text-2xl font-bold text-red-600">R$ {totalAtrasado.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</h3>
|
|
</div>
|
|
<div className="bg-red-100 p-3 rounded-full text-red-600"><TrendingDown size={24} /></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* LISTA DE TRANSAÇÕES */}
|
|
<div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
|
|
<div className="p-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
|
|
<h3 className="font-bold text-gray-800 uppercase">
|
|
LANÇAMENTOS {filtroStatus !== 'TODOS' && <span className="text-blue-600 text-sm">({filtroStatus.toUpperCase()})</span>}
|
|
</h3>
|
|
<span className="text-xs text-gray-400 font-bold uppercase">{transacoesFiltradas.length} REGISTRO(S)</span>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm text-left">
|
|
<thead className="bg-gray-50 text-gray-500 uppercase text-xs font-bold">
|
|
<tr>
|
|
<th className="px-6 py-3">PACIENTE</th>
|
|
<th className="px-6 py-3">DESCRIÇÃO</th>
|
|
<th className="px-6 py-3">VENCIMENTO</th>
|
|
<th className="px-6 py-3">VALOR</th>
|
|
<th className="px-6 py-3">STATUS</th>
|
|
<th className="px-6 py-3 text-right">AÇÕES</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100">
|
|
{loading ? (
|
|
<tr><td colSpan={6} className="p-6 text-center text-gray-500 uppercase font-bold">
|
|
<div className="flex items-center justify-center gap-2"><Loader2 className="animate-spin" size={18} /> CARREGANDO...</div>
|
|
</td></tr>
|
|
) : transacoesFiltradas.length === 0 ? (
|
|
<tr><td colSpan={6} className="p-10 text-center text-gray-400 uppercase font-bold text-sm">
|
|
NENHUM LANÇAMENTO ENCONTRADO {filtroStatus !== 'TODOS' && `COM STATUS "${filtroStatus.toUpperCase()}"`}.
|
|
</td></tr>
|
|
) : transacoesFiltradas.map(t => (
|
|
<tr key={t.id} className="hover:bg-gray-50 transition-colors">
|
|
<td className="px-6 py-4 font-bold text-gray-900 uppercase">{t.pacienteNome}</td>
|
|
<td className="px-6 py-4 text-gray-600 font-medium uppercase">
|
|
{t.descricao}
|
|
<span className="text-[10px] text-gray-400 block font-bold">{t.formaPagamento?.toUpperCase()}</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-gray-600 font-medium">{new Date(t.dataVencimento).toLocaleDateString('pt-BR')}</td>
|
|
<td className="px-6 py-4 font-bold text-gray-800">R$ {Number(t.valor).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</td>
|
|
<td className="px-6 py-4">
|
|
<span className={`px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
|
|
${t.status === 'Pago' ? 'bg-green-100 text-green-700' :
|
|
t.status === 'Atrasado' ? 'bg-red-100 text-red-700' :
|
|
'bg-yellow-100 text-yellow-700'}`}>
|
|
{t.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<div className="flex justify-end gap-1">
|
|
{t.status !== 'Pago' && (
|
|
<button onClick={() => handleConfirmarPagamento(t)} title="CONFIRMAR PAGAMENTO"
|
|
className="p-1.5 text-green-600 hover:bg-green-50 rounded-lg transition-colors">
|
|
<CheckCircle size={18} />
|
|
</button>
|
|
)}
|
|
<button onClick={() => handleDownload(t)} title="GERAR RECIBO"
|
|
className="p-1.5 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
|
|
<Download size={18} />
|
|
</button>
|
|
<button onClick={() => handleExcluir(t)} title="EXCLUIR"
|
|
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors">
|
|
<Trash2 size={18} />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CLOSE FILTRO DROPDOWN when clicking outside */}
|
|
{showFiltro && <div className="fixed inset-0 z-10" onClick={() => setShowFiltro(false)} />}
|
|
|
|
{/* NOVO LANÇAMENTO MODAL */}
|
|
{isNovoOpen && <NovoLancamentoModal onClose={() => setIsNovoOpen(false)} onSaved={fetchData} />}
|
|
</div>
|
|
);
|
|
}; |