first commit
This commit is contained in:
rodrigo committed
commit
c9fb67e751
423 files changed
+53287
No files matched your search
@@ -0,0 +1,211 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery } from 'react-query';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import api from '../../services/api';
|
||||
import { format, parseISO } from 'date-fns';
|
||||
import { ptBR } from 'date-fns/locale';
|
||||
|
||||
// Função auxiliar para formatar data com validação
|
||||
const formatDate = (date: string | Date | null | undefined, formatStr: string): string => {
|
||||
if (!date) return 'Data não disponível';
|
||||
try {
|
||||
const dateObj = typeof date === 'string' ? parseISO(date) : date;
|
||||
return format(dateObj, formatStr, { locale: ptBR });
|
||||
} catch (error) {
|
||||
console.error('Erro ao formatar data:', error);
|
||||
return 'Data inválida';
|
||||
}
|
||||
};
|
||||
|
||||
export function AtendimentoDetalhes() {
|
||||
const { id } = useParams();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [cancelModalOpen, setCancelModalOpen] = useState(false);
|
||||
const [justificativa, setJustificativa] = useState('');
|
||||
const [isCancelling, setIsCancelling] = useState(false);
|
||||
|
||||
const { data: atendimento, refetch } = useQuery(['atendimento', id], async () => {
|
||||
const response = await api.get(`/atendimentos/${id}`);
|
||||
return response.data;
|
||||
});
|
||||
|
||||
const handleCancelar = async () => {
|
||||
if (!justificativa.trim()) {
|
||||
alert('A justificativa é obrigatória');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsCancelling(true);
|
||||
await api.patch(`/atendimentos/${id}/status`, {
|
||||
status: 'CANCELADO',
|
||||
justificativa
|
||||
});
|
||||
await refetch();
|
||||
setCancelModalOpen(false);
|
||||
} catch (error) {
|
||||
console.error('Erro ao cancelar atendimento:', error);
|
||||
alert('Erro ao cancelar atendimento');
|
||||
} finally {
|
||||
setIsCancelling(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!atendimento) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto p-6 space-y-6">
|
||||
{/* Cabeçalho */}
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">{atendimento.titulo}</h1>
|
||||
<p className="text-blue-100">Protocolo: {atendimento.protocolo}</p>
|
||||
</div>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${
|
||||
atendimento.tipo === 'INICIAL' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800'
|
||||
}`}>
|
||||
{atendimento.tipo}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Informações do Atendimento */}
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-500">Cliente</h3>
|
||||
<p className="mt-1 text-sm text-gray-900">{atendimento.cliente.nome}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-500">Data do Atendimento</h3>
|
||||
<p className="mt-1 text-sm text-gray-900">
|
||||
{formatDate(atendimento.dataAtendimento, "PPpp")}
|
||||
</p>
|
||||
</div>
|
||||
{atendimento.processo && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-500">Processo Vinculado</h3>
|
||||
<Link
|
||||
to={`/processos/${atendimento.processo.id}`}
|
||||
className="mt-1 text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
{atendimento.processo.numero}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-500">Responsável</h3>
|
||||
<p className="mt-1 text-sm text-gray-900">{atendimento.usuario.nome}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo do Atendimento */}
|
||||
<div className="prose max-w-none">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Conteúdo</h3>
|
||||
<div
|
||||
className="bg-gray-50 rounded-lg p-6"
|
||||
dangerouslySetInnerHTML={{ __html: atendimento.conteudo }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Anexos */}
|
||||
{atendimento.anexos?.length > 0 && (
|
||||
<div className="mt-8">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Anexos</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{atendimento.anexos.map((anexo: any) => (
|
||||
<div key={anexo.id} className="flex items-center p-4 bg-gray-50 rounded-lg">
|
||||
<svg className="w-6 h-6 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
|
||||
</svg>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{anexo.nome}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{formatDate(anexo.dataCriacao, "PP")}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.open(anexo.url, '_blank', 'noopener,noreferrer');
|
||||
}}
|
||||
className="ml-4 text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
Visualizar
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Adicionar botão de cancelar próximo ao cabeçalho */}
|
||||
{atendimento.status !== 'CANCELADO' && (
|
||||
<button
|
||||
onClick={() => setCancelModalOpen(true)}
|
||||
className="bg-red-100 text-red-600 px-4 py-2 rounded-lg hover:bg-red-200"
|
||||
>
|
||||
Cancelar Atendimento
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Modal de Cancelamento */}
|
||||
{cancelModalOpen && (
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-lg max-w-md w-full p-6">
|
||||
<h3 className="text-lg font-medium mb-4">Cancelar Atendimento</h3>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
Esta ação não pode ser desfeita. O atendimento será marcado como cancelado, mas manterá seu protocolo e histórico.
|
||||
</p>
|
||||
<textarea
|
||||
value={justificativa}
|
||||
onChange={(e) => setJustificativa(e.target.value)}
|
||||
placeholder="Insira a justificativa do cancelamento"
|
||||
className="w-full p-2 border rounded-lg mb-4"
|
||||
rows={4}
|
||||
required
|
||||
/>
|
||||
<div className="flex justify-end space-x-4">
|
||||
<button
|
||||
onClick={() => setCancelModalOpen(false)}
|
||||
className="px-4 py-2 text-gray-600 hover:text-gray-800"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancelar}
|
||||
disabled={isCancelling || !justificativa.trim()}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
|
||||
>
|
||||
{isCancelling ? 'Cancelando...' : 'Confirmar Cancelamento'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Exibir informação de cancelamento se aplicável */}
|
||||
{atendimento.status === 'CANCELADO' && (
|
||||
<div className="mt-4 p-4 bg-red-50 border-l-4 border-red-500 rounded-r-lg">
|
||||
<h4 className="text-red-800 font-medium">Atendimento Cancelado</h4>
|
||||
<p className="text-red-600 mt-1">{atendimento.justificativaCancelamento}</p>
|
||||
<p className="text-sm text-red-500 mt-1">
|
||||
Cancelado em: {formatDate(atendimento.dataAtualizacao, "PPpp")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user