804a566095
- Backend: Migrations para tabelas 'escalas' e 'logistica' (transporte) - Backend: Handlers e Services completos para gestão de escalas e logística - Backend: Suporte a auth vinculado a perfil profissional - Frontend: Nova página de Detalhes Operacionais (/agenda/:id) - Frontend: Componente EventScheduler com verificação robusta de conflitos - Frontend: Componente EventLogistics para gestão de motoristas e caronas - Frontend: Modal de Detalhes de Profissional unificado (Admin + Self-view) - Frontend: Dashboard com modal de gestão de equipe e filtros avançados - Fix: Correção crítica de timezone (UTC) em horários de agendamento - Fix: Tratamento de URLs no campo de local do evento - Fix: Filtros de profissional com carro na logística
307 lines
19 KiB
TypeScript
307 lines
19 KiB
TypeScript
import React from 'react';
|
|
import { Professional } from '../types';
|
|
import { Button } from './Button';
|
|
import {
|
|
X, Mail, Phone, MapPin, Building, Star, Camera, DollarSign, Award,
|
|
User, Car, CreditCard, AlertTriangle, Calendar, Clock, Edit2
|
|
} from 'lucide-react';
|
|
import { getAgendas } from '../services/apiService';
|
|
|
|
interface ProfessionalDetailsModalProps {
|
|
professional: Professional;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onEdit?: () => void;
|
|
}
|
|
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
import { UserRole } from '../types';
|
|
|
|
// ... (imports remain)
|
|
|
|
export const ProfessionalDetailsModal: React.FC<ProfessionalDetailsModalProps> = ({
|
|
professional,
|
|
isOpen,
|
|
onClose,
|
|
onEdit
|
|
}) => {
|
|
const { user, token } = useAuth();
|
|
const [assignedEvents, setAssignedEvents] = React.useState<any[]>([]);
|
|
const [loadingEvents, setLoadingEvents] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (isOpen && user && token && (user.role === UserRole.SUPERADMIN || user.role === UserRole.BUSINESS_OWNER || user.id === professional.usuarioId)) {
|
|
fetchAssignments();
|
|
}
|
|
}, [isOpen, user, token, professional.id]);
|
|
|
|
const fetchAssignments = async () => {
|
|
setLoadingEvents(true);
|
|
const res = await getAgendas(token!);
|
|
if (res.data) {
|
|
// Filter events where professional is assigned
|
|
const filtered = res.data.filter((evt: any) =>
|
|
evt.assigned_professionals?.some((ap: any) => ap.professional_id === professional.id)
|
|
);
|
|
// Sort by date desc
|
|
filtered.sort((a: any, b: any) => new Date(b.data_evento).getTime() - new Date(a.data_evento).getTime());
|
|
setAssignedEvents(filtered);
|
|
}
|
|
setLoadingEvents(false);
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const canViewDetails =
|
|
user?.role === UserRole.SUPERADMIN ||
|
|
user?.role === UserRole.BUSINESS_OWNER ||
|
|
(user?.id && professional.usuarioId && user.id === professional.usuarioId);
|
|
|
|
// Also check legacy/fallback logic if needed, but primary is role or ownership
|
|
const isAdminOrOwner = canViewDetails; // Keeping variable name for now or refactoring below -> refactoring below to use canViewDetails for clarity is better but to minimize diff noise we can keep it or rename it. Let's rename it to avoid confusion.
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-fadeIn">
|
|
<div className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto flex flex-col relative animate-slideIn">
|
|
{/* Header... (remains same) */}
|
|
<div className="h-32 bg-gradient-to-r from-brand-purple to-brand-purple/80 relative shrink-0">
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 text-white hover:bg-white/20 p-2 rounded-full transition-colors"
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="px-8 pb-8 -mt-16 flex flex-col items-center sm:items-start relative z-10">
|
|
{/* Avatar... (remains same) */}
|
|
<div
|
|
className="w-32 h-32 rounded-full border-4 border-white bg-white shadow-lg mb-4 bg-gray-200"
|
|
style={{
|
|
backgroundImage: `url(${professional.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(professional.name || professional.nome)}&background=random`})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center'
|
|
}}
|
|
/>
|
|
|
|
<div className="text-center sm:text-left w-full">
|
|
<h2 className="text-2xl font-serif font-bold text-brand-black">{professional.name || professional.nome}</h2>
|
|
<div className="flex flex-wrap justify-center sm:justify-start gap-2 mt-2">
|
|
<span className="px-3 py-1 bg-brand-gold/10 text-brand-black rounded-full text-sm font-medium border border-brand-gold/20 flex items-center gap-2">
|
|
<User size={14} />
|
|
{professional.role || "Profissional"}
|
|
</span>
|
|
{/* Performance Rating - Only for Admins */}
|
|
{isAdminOrOwner && professional.media !== undefined && professional.media !== null && (
|
|
<span className="px-3 py-1 bg-yellow-50 text-yellow-700 rounded-full text-sm font-medium border border-yellow-200 flex items-center gap-1">
|
|
<Star size={14} className="fill-yellow-500 text-yellow-500" />
|
|
{typeof professional.media === 'number' ? professional.media.toFixed(1) : parseFloat(String(professional.media)).toFixed(1)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
|
|
{/* Dados Pessoais - Protected */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-bold text-gray-900 flex items-center gap-2 mb-4 border-b pb-2">
|
|
<User size={20} className="text-brand-gold" />
|
|
Dados Pessoais
|
|
</h3>
|
|
|
|
{isAdminOrOwner ? (
|
|
<div className="space-y-4 text-sm">
|
|
{professional.email && (
|
|
<div className="flex items-start gap-3 text-gray-600">
|
|
<Mail size={18} className="mt-1 shrink-0 text-gray-400" />
|
|
<span className="break-all">{professional.email}</span>
|
|
</div>
|
|
)}
|
|
{professional.whatsapp && (
|
|
<div className="flex items-start gap-3 text-gray-600">
|
|
<Phone size={18} className="mt-1 shrink-0 text-gray-400" />
|
|
<span>{professional.whatsapp}</span>
|
|
</div>
|
|
)}
|
|
{(professional.cidade || professional.uf) && (
|
|
<div className="flex items-start gap-3 text-gray-600">
|
|
<MapPin size={18} className="mt-1 shrink-0 text-gray-400" />
|
|
<span>{professional.cidade}{professional.cidade && professional.uf ? ", " : ""}{professional.uf}</span>
|
|
</div>
|
|
)}
|
|
{professional.endereco && (
|
|
<div className="flex items-start gap-3 text-gray-600">
|
|
<Building size={18} className="mt-1 shrink-0 text-gray-400" />
|
|
<span className="text-sm">{professional.endereco}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="p-4 bg-gray-50 rounded-lg border border-gray-100 text-center">
|
|
<AlertTriangle className="w-8 h-8 text-gray-400 mx-auto mb-2" />
|
|
<p className="text-gray-500 text-sm">Informações de contato restritas.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Equipamentos - Public */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-bold text-gray-900 flex items-center gap-2 mb-4 border-b pb-2">
|
|
<Camera size={20} className="text-brand-gold" />
|
|
Equipamentos
|
|
</h3>
|
|
|
|
<div className="bg-gray-50 rounded-lg p-4 text-sm text-gray-700 whitespace-pre-wrap leading-relaxed border border-gray-100">
|
|
{professional.equipamentos || "Nenhum equipamento listado."}
|
|
</div>
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{professional.carro_disponivel && (
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
<Car size={12} className="mr-1" /> Carro Próprio
|
|
</span>
|
|
)}
|
|
{professional.tem_estudio && (
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
|
|
<Building size={12} className="mr-1" /> Estúdio ({professional.qtd_estudio})
|
|
</span>
|
|
)}
|
|
{professional.extra_por_equipamento && (
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
<CreditCard size={12} className="mr-1" /> Extra p/ Equip.
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Dados Financeiros & Performance - Protected */}
|
|
{isAdminOrOwner && (
|
|
<>
|
|
<div className="w-full mt-8">
|
|
<h3 className="text-lg font-bold text-gray-900 flex items-center gap-2 mb-4 border-b pb-2">
|
|
<DollarSign size={20} className="text-brand-gold" />
|
|
Dados Financeiros
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm w-full">
|
|
<div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
|
|
<span className="block text-gray-500 text-xs uppercase tracking-wider font-semibold mb-1">CPF/CNPJ Titular</span>
|
|
<span className="font-medium text-gray-900">{professional.cpf_cnpj_titular || "-"}</span>
|
|
</div>
|
|
<div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
|
|
<span className="block text-gray-500 text-xs uppercase tracking-wider font-semibold mb-1">Chave Pix</span>
|
|
<span className="font-medium text-gray-900">{professional.conta_pix || "-"}</span>
|
|
</div>
|
|
<div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
|
|
<span className="block text-gray-500 text-xs uppercase tracking-wider font-semibold mb-1">Banco / Agência</span>
|
|
<span className="font-medium text-gray-900">
|
|
{professional.banco || "-"}{professional.agencia ? ` / ${professional.agencia}` : ""}
|
|
</span>
|
|
</div>
|
|
<div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
|
|
<span className="block text-gray-500 text-xs uppercase tracking-wider font-semibold mb-1">Tabela Free</span>
|
|
<span className="font-medium text-gray-900">R$ {professional.tabela_free || "0,00"}</span>
|
|
</div>
|
|
<div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
|
|
<span className="block text-gray-500 text-xs uppercase tracking-wider font-semibold mb-1">Tipo de Cartão</span>
|
|
<span className="font-medium text-gray-900">{professional.tipo_cartao || "-"}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Performance / Observations - Protected */}
|
|
{isAdminOrOwner && (
|
|
<div className="w-full mt-8 bg-brand-gold/5 rounded-xl p-6 border border-brand-gold/10">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-2 bg-white rounded-full text-brand-gold shadow-sm">
|
|
<Star size={24} className="text-brand-gold fill-brand-gold" />
|
|
</div>
|
|
<div className="w-full">
|
|
<h4 className="text-lg font-bold text-gray-900 mb-4">Performance & Avaliação</h4>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
|
<div className="text-center bg-white p-2 rounded shadow-sm">
|
|
<div className="text-xs text-gray-500 mb-1">Técnica</div>
|
|
<div className="font-bold text-lg text-gray-800">{professional.qual_tec || 0}</div>
|
|
</div>
|
|
<div className="text-center bg-white p-2 rounded shadow-sm">
|
|
<div className="text-xs text-gray-500 mb-1">Simpatia</div>
|
|
<div className="font-bold text-lg text-gray-800">{professional.educacao_simpatia || 0}</div>
|
|
</div>
|
|
<div className="text-center bg-white p-2 rounded shadow-sm">
|
|
<div className="text-xs text-gray-500 mb-1">Desempenho</div>
|
|
<div className="font-bold text-lg text-gray-800">{professional.desempenho_evento || 0}</div>
|
|
</div>
|
|
<div className="text-center bg-white p-2 rounded shadow-sm">
|
|
<div className="text-xs text-gray-500 mb-1">Horário</div>
|
|
<div className="font-bold text-lg text-gray-800">{professional.disp_horario || 0}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-gray-600 text-sm leading-relaxed mb-2">
|
|
Média Geral: <strong>{professional.media ? (typeof professional.media === 'number' ? professional.media.toFixed(1) : parseFloat(String(professional.media)).toFixed(1)) : "N/A"}</strong>
|
|
</p>
|
|
{professional.observacao && (
|
|
<div className="mt-3 text-sm text-gray-500 italic border-t border-brand-gold/10 pt-2">
|
|
"{professional.observacao}"
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Assignments - Protected */}
|
|
{canViewDetails && (
|
|
<div className="w-full mt-8">
|
|
<h3 className="text-lg font-bold text-gray-900 flex items-center gap-2 mb-4 border-b pb-2">
|
|
<Calendar size={20} className="text-brand-gold" />
|
|
Eventos Atribuídos
|
|
</h3>
|
|
{loadingEvents ? (
|
|
<p className="text-sm text-gray-500">Carregando agenda...</p>
|
|
) : assignedEvents.length === 0 ? (
|
|
<p className="text-sm text-gray-500 italic">Nenhum evento atribuído.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{assignedEvents.map((evt: any) => (
|
|
<div key={evt.id} className="bg-white border rounded-lg p-3 flex justify-between items-center shadow-sm">
|
|
<div>
|
|
<p className="font-bold text-gray-800 text-sm">{evt.empresa_nome || "Empresa"} - {evt.tipo_evento_nome || "Evento"}</p>
|
|
<div className="flex gap-3 text-xs text-gray-500 mt-1">
|
|
<span className="flex items-center gap-1"><Calendar size={12} /> {new Date(evt.data_evento).toLocaleDateString()}</span>
|
|
<span className="flex items-center gap-1"><Clock size={12} /> {evt.horario}</span>
|
|
{evt.local_evento && <span className="flex items-center gap-1"><MapPin size={12} /> {evt.local_evento}</span>}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className={`text-xs px-2 py-1 rounded-full ${evt.status === 'Confirmado' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
|
|
{evt.status || "Agendado"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="w-full mt-8 flex justify-end gap-3">
|
|
<Button variant="outline" onClick={onClose}>
|
|
Fechar
|
|
</Button>
|
|
{onEdit && (
|
|
<Button onClick={onEdit}>
|
|
<Edit2 size={16} className="mr-2" />
|
|
Editar Dados
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|