rodrigo/advx
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lint errors

Browse Source 
Signed-off-by: Rodrigo Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
rodrigo committed 2025-04-12 20:32:39 -03:00
1 parent 9742d62ba2
commit 5acec6b71e
196 files changed
+10885 -6655
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/atendimentos/AtendimentoDetalhes.tsx
+86 -44
View File
@@ -1,19 +1,22 @@
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';
import { format, parseISO, ptBR } from "date-fns";
import { useState } from "react";
import { useQuery } from "react-query";
import { useParams, Link } from "react-router-dom";
import api from "../../services/api";
// 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';
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;
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';
console.error("Erro ao formatar data:", error);
return "Data inválida";
}
};
@@ -21,31 +24,34 @@ export function AtendimentoDetalhes() {
const { id } = useParams();
const [loading, setLoading] = useState(false);
const [cancelModalOpen, setCancelModalOpen] = useState(false);
const [justificativa, setJustificativa] = useState('');
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 { 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');
alert("A justificativa é obrigatória");
return;
}
try {
setIsCancelling(true);
await api.patch(`/atendimentos/${id}/status`, {
status: 'CANCELADO',
justificativa
status: "CANCELADO",
justificativa,
});
await refetch();
setCancelModalOpen(false);
} catch (error) {
console.error('Erro ao cancelar atendimento:', error);
alert('Erro ao cancelar atendimento');
console.error("Erro ao cancelar atendimento:", error);
alert("Erro ao cancelar atendimento");
} finally {
setIsCancelling(false);
}
@@ -66,12 +72,20 @@ export function AtendimentoDetalhes() {
<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>
<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'
}`}>
<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>
@@ -82,18 +96,24 @@ export function AtendimentoDetalhes() {
<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>
<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>
<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
<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"
>
@@ -103,16 +123,18 @@ export function AtendimentoDetalhes() {
)}
<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>
<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
<div
className="bg-gray-50 rounded-lg p-6"
dangerouslySetInnerHTML={{ __html: atendimento.conteudo }}
dangerouslySetInnerHTML={{ __html: atendimento.conteudo }}
/>
</div>
@@ -122,9 +144,22 @@ export function AtendimentoDetalhes() {
<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" />
<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">
@@ -137,7 +172,7 @@ export function AtendimentoDetalhes() {
<button
onClick={(e) => {
e.preventDefault();
window.open(anexo.url, '_blank', 'noopener,noreferrer');
window.open(anexo.url, "_blank", "noopener,noreferrer");
}}
className="ml-4 text-blue-600 hover:text-blue-800"
>
@@ -150,7 +185,7 @@ export function AtendimentoDetalhes() {
)}
{/* Adicionar botão de cancelar próximo ao cabeçalho */}
{atendimento.status !== 'CANCELADO' && (
{atendimento.status !== "CANCELADO" && (
<button
onClick={() => setCancelModalOpen(true)}
className="bg-red-100 text-red-600 px-4 py-2 rounded-lg hover:bg-red-200"
@@ -163,9 +198,12 @@ export function AtendimentoDetalhes() {
{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>
<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.
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}
@@ -187,7 +225,7 @@ export function AtendimentoDetalhes() {
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'}
{isCancelling ? "Cancelando..." : "Confirmar Cancelamento"}
</button>
</div>
</div>
@@ -195,10 +233,14 @@ export function AtendimentoDetalhes() {
)}
{/* Exibir informação de cancelamento se aplicável */}
{atendimento.status === 'CANCELADO' && (
{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>
<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>