511 lines
21 KiB
TypeScript
511 lines
21 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Employee, EmployeeCategory } from '../types';
|
|
import { Plus, Edit2, Trash2, X, Search, Users, Briefcase, Calendar, Phone, Mail, FileText, Settings2 } from 'lucide-react';
|
|
import { useDialog } from '../DialogContext';
|
|
|
|
const Employees: React.FC = () => {
|
|
const { showAlert, showConfirm } = useDialog();
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
|
|
const [isClosing, setIsClosing] = useState(false);
|
|
const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
|
|
const [editingCategory, setEditingCategory] = useState<EmployeeCategory | null>(null);
|
|
|
|
const [formData, setFormData] = useState<Omit<Employee, 'id'>>({
|
|
name: '',
|
|
cpf: '',
|
|
phone: '',
|
|
email: '',
|
|
admissionDate: new Date().toISOString().split('T')[0],
|
|
categoryId: ''
|
|
});
|
|
|
|
const [categoryFormData, setCategoryFormData] = useState({ name: '' });
|
|
|
|
const [employees, setEmployees] = useState<Employee[]>([]);
|
|
const [categories, setCategories] = useState<EmployeeCategory[]>([]);
|
|
const [isLoadingData, setIsLoadingData] = useState(true);
|
|
|
|
const loadData = async () => {
|
|
try {
|
|
setIsLoadingData(true);
|
|
const [empRes, catRes] = await Promise.all([
|
|
fetch('/api/funcionarios'),
|
|
fetch('/api/categorias_funcionarios')
|
|
]);
|
|
const empData = await empRes.json();
|
|
const catData = await catRes.json();
|
|
|
|
// Mapeamento caso a API retorne os nomes das colunas diferentes do TS
|
|
const mappedEmployees = (empData.funcionarios || []).map((e: any) => ({
|
|
id: e.id,
|
|
name: e.name || e.nome,
|
|
cpf: e.cpf,
|
|
email: e.email,
|
|
phone: e.phone || e.telefone,
|
|
admissionDate: e.hireDate || (e.data_admissao ? e.data_admissao.substring(0, 10) : ''),
|
|
categoryId: e.categoryId || e.categoria_id
|
|
}));
|
|
|
|
const mappedCategories = (catData.categorias || []).map((c: any) => ({
|
|
id: c.id,
|
|
name: c.name || c.nome
|
|
}));
|
|
|
|
setEmployees(mappedEmployees);
|
|
setCategories(mappedCategories);
|
|
} catch (err) {
|
|
console.error('Erro ao buscar funcionários/categorias:', err);
|
|
showAlert('Erro', 'Não foi possível carregar a lista do servidor.', 'error');
|
|
} finally {
|
|
setIsLoadingData(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
const filteredEmployees = employees.filter(emp =>
|
|
(emp.name || '').toLowerCase().includes((searchTerm || '').toLowerCase()) ||
|
|
(emp.cpf || '').includes(searchTerm || '') ||
|
|
(emp.email || '').toLowerCase().includes((searchTerm || '').toLowerCase())
|
|
);
|
|
|
|
const closeModal = () => {
|
|
setIsClosing(true);
|
|
setTimeout(() => {
|
|
setIsModalOpen(false);
|
|
setIsClosing(false);
|
|
setEditingEmployee(null);
|
|
setFormData({
|
|
name: '',
|
|
cpf: '',
|
|
phone: '',
|
|
email: '',
|
|
admissionDate: new Date().toISOString().split('T')[0],
|
|
categoryId: ''
|
|
});
|
|
}, 400);
|
|
};
|
|
|
|
const closeCategoryModal = () => {
|
|
setIsCategoryModalOpen(false);
|
|
setEditingCategory(null);
|
|
setCategoryFormData({ name: '' });
|
|
};
|
|
|
|
const handleEdit = (emp: Employee) => {
|
|
setEditingEmployee(emp);
|
|
setFormData({
|
|
name: emp.name,
|
|
cpf: emp.cpf,
|
|
phone: emp.phone,
|
|
email: emp.email,
|
|
admissionDate: emp.admissionDate,
|
|
categoryId: emp.categoryId
|
|
});
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleDelete = (emp: Employee) => {
|
|
showConfirm(
|
|
'Remover Funcionário',
|
|
`Tem certeza que deseja remover ${emp.name}?`,
|
|
async () => {
|
|
try {
|
|
const res = await fetch(`/api/funcionarios/${emp.id}`, { method: 'DELETE' });
|
|
if (!res.ok) throw new Error('Falha ao excluir');
|
|
await loadData();
|
|
showAlert('Sucesso', 'Funcionário removido com sucesso.', 'success');
|
|
} catch (error) {
|
|
showAlert('Erro', 'Ocorreu um erro ao excluir o funcionário.', 'error');
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!formData.categoryId) {
|
|
showAlert('Atenção', 'Selecione uma categoria para o funcionário.', 'warning');
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
nome: formData.name,
|
|
cpf: formData.cpf,
|
|
email: formData.email,
|
|
telefone: formData.phone,
|
|
data_admissao: formData.admissionDate,
|
|
categoria_id: formData.categoryId
|
|
};
|
|
|
|
try {
|
|
if (editingEmployee) {
|
|
const res = await fetch(`/api/funcionarios/${editingEmployee.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
if (!res.ok) throw new Error('Failed to update');
|
|
showAlert('Sucesso', 'Funcionário atualizado com sucesso.', 'success');
|
|
} else {
|
|
const res = await fetch('/api/funcionarios', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ...payload, id: crypto.randomUUID() })
|
|
});
|
|
if (!res.ok) throw new Error('Failed to create');
|
|
showAlert('Sucesso', 'Funcionário cadastrado com sucesso.', 'success');
|
|
}
|
|
await loadData();
|
|
closeModal();
|
|
} catch (err) {
|
|
showAlert('Erro', 'Ocorreu um problema de comunicação com a API.', 'error');
|
|
}
|
|
};
|
|
|
|
const handleCategorySubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!categoryFormData.name.trim()) return;
|
|
|
|
try {
|
|
if (editingCategory) {
|
|
const res = await fetch(`/api/categorias_funcionarios/${editingCategory.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ nome: categoryFormData.name })
|
|
});
|
|
if (!res.ok) throw new Error('Failed to update');
|
|
} else {
|
|
const res = await fetch('/api/categorias_funcionarios', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id: crypto.randomUUID(), nome: categoryFormData.name })
|
|
});
|
|
if (!res.ok) throw new Error('Failed to create');
|
|
}
|
|
await loadData();
|
|
setCategoryFormData({ name: '' });
|
|
setEditingCategory(null);
|
|
} catch (err) {
|
|
showAlert('Erro', 'Ocorreu um erro ao salvar categoria.', 'error');
|
|
}
|
|
};
|
|
|
|
const handleDeleteCategory = (cat: EmployeeCategory) => {
|
|
const hasEmployees = employees.some(emp => emp.categoryId === cat.id);
|
|
if (hasEmployees) {
|
|
showAlert('Atenção', 'Não é possível excluir uma categoria que possui funcionários vinculados.', 'warning');
|
|
return;
|
|
}
|
|
|
|
showConfirm(
|
|
'Remover Categoria',
|
|
`Deseja remover a categoria "${cat.name}"?`,
|
|
async () => {
|
|
try {
|
|
const res = await fetch(`/api/categorias_funcionarios/${cat.id}`, { method: 'DELETE' });
|
|
if (!res.ok) throw new Error('Failed to delete');
|
|
await loadData();
|
|
} catch (err) {
|
|
showAlert('Erro', 'Ocorreu um erro ao excluir a categoria.', 'error');
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
const inputClass = "w-full px-4 py-3 bg-white text-black border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all shadow-sm";
|
|
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in duration-300">
|
|
{/* Header */}
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
<div>
|
|
<h2 className="text-3xl font-extrabold text-slate-900 tracking-tight">Funcionários <span className="text-sm font-normal text-green-600 bg-green-50 px-2 py-1 rounded-md ml-2 border border-green-200">PostgreSQL</span></h2>
|
|
<p className="text-slate-500">Gerencie sua equipe e categorias profissionais.</p>
|
|
</div>
|
|
<div className="flex gap-2 w-full md:w-auto">
|
|
<button
|
|
onClick={() => setIsCategoryModalOpen(true)}
|
|
className="flex-1 md:flex-none bg-white text-slate-700 px-6 py-3 rounded-xl flex items-center justify-center gap-2 hover:bg-slate-50 transition-all shadow-sm border border-slate-200 font-bold"
|
|
>
|
|
<Settings2 size={20} /> Categorias
|
|
</button>
|
|
<button
|
|
onClick={() => setIsModalOpen(true)}
|
|
className="flex-1 md:flex-none bg-indigo-600 text-white px-6 py-3 rounded-xl flex items-center justify-center gap-2 hover:bg-indigo-700 transition-all shadow-lg font-bold"
|
|
>
|
|
<Plus size={20} /> Novo Funcionário
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search and Stats */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
<div className="lg:col-span-3 relative group">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors" size={20} />
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar por nome, CPF ou e-mail..."
|
|
className="w-full pl-12 pr-4 py-4 bg-white border border-slate-200 rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all"
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600">
|
|
<Users size={24} />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Equipe</p>
|
|
<p className="text-2xl font-black text-slate-900">{employees.length}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Employees Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
{filteredEmployees.map(emp => {
|
|
const category = categories.find(c => c.id === emp.categoryId);
|
|
return (
|
|
<div key={emp.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all group overflow-hidden">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div className="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center text-slate-500 group-hover:bg-indigo-50 group-hover:text-indigo-600 transition-colors">
|
|
<Users size={24} />
|
|
</div>
|
|
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button
|
|
onClick={() => handleEdit(emp)}
|
|
className="p-2 text-slate-400 hover:text-indigo-600 rounded-lg hover:bg-indigo-50 transition-all"
|
|
>
|
|
<Edit2 size={18} />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(emp)}
|
|
className="p-2 text-slate-400 hover:text-red-600 rounded-lg hover:bg-red-50 transition-all"
|
|
>
|
|
<Trash2 size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-black text-slate-900 mb-1">{emp.name}</h3>
|
|
<span className="inline-block px-2 py-1 bg-indigo-50 text-indigo-600 text-[10px] font-black uppercase rounded-md mb-4">
|
|
{category?.name || 'Sem Categoria'}
|
|
</span>
|
|
|
|
<div className="space-y-2 text-sm text-slate-600">
|
|
<div className="flex items-center gap-2">
|
|
<FileText size={14} className="text-slate-400" />
|
|
<span>CPF: {emp.cpf}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Phone size={14} className="text-slate-400" />
|
|
<span>{emp.phone}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Mail size={14} className="text-slate-400" />
|
|
<span className="truncate">{emp.email}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Calendar size={14} className="text-slate-400" />
|
|
<span>Admissão: {new Date(emp.admissionDate).toLocaleDateString('pt-BR')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{!isLoadingData && employees.length === 0 && (
|
|
<div className="bg-white border-2 border-dashed border-slate-200 rounded-3xl p-12 text-center">
|
|
<div className="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 text-slate-300">
|
|
<Users size={40} />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-slate-900 mb-2">Nenhum funcionário cadastrado</h3>
|
|
<p className="text-slate-500 mb-6">Comece adicionando os membros da sua equipe.</p>
|
|
<button
|
|
onClick={() => setIsModalOpen(true)}
|
|
className="bg-indigo-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-indigo-700 transition-all shadow-lg"
|
|
>
|
|
Cadastrar Primeiro Funcionário
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Employee Modal */}
|
|
{isModalOpen && (
|
|
<div className={`fixed inset-0 bg-transparent flex items-center justify-center p-4 z-50 overflow-y-auto transition-opacity duration-400 ${isClosing ? 'opacity-0' : 'opacity-100 animate-in fade-in'}`}>
|
|
<div className={`bg-white rounded-xl w-full max-w-2xl shadow-2xl my-auto transition-all duration-400 relative overflow-hidden ${isClosing ? 'animate-slide-down-fade-out' : 'animate-slide-up'}`}>
|
|
<div className="bg-indigo-600 h-1.5 w-full absolute top-0 left-0 z-10"></div>
|
|
|
|
<div className="p-6 border-b border-slate-100 flex justify-between items-center bg-indigo-50/30">
|
|
<div>
|
|
<h3 className="text-xl font-black text-slate-800 tracking-tight">
|
|
{editingEmployee ? 'Editar Funcionário' : 'Novo Funcionário'}
|
|
</h3>
|
|
<p className="text-xs text-slate-500">Preencha os dados profissionais.</p>
|
|
</div>
|
|
<button onClick={closeModal} className="p-2 bg-white text-slate-400 hover:text-red-500 rounded-lg shadow-sm transition-all hover:rotate-90">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="md:col-span-2">
|
|
<label className="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">Nome Completo</label>
|
|
<input
|
|
required
|
|
className={inputClass}
|
|
value={formData.name}
|
|
onChange={e => setFormData({ ...formData, name: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">CPF</label>
|
|
<input
|
|
required
|
|
className={inputClass}
|
|
placeholder="000.000.000-00"
|
|
value={formData.cpf}
|
|
onChange={e => {
|
|
const val = e.target.value.replace(/\D/g, '').replace(/(\d{3})(\d)/, '$1.$2').replace(/(\d{3})(\d)/, '$1.$2').replace(/(\d{3})(\d{1,2})/, '$1-$2').slice(0, 14);
|
|
setFormData({ ...formData, cpf: val });
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">Categoria</label>
|
|
<select
|
|
required
|
|
className={inputClass}
|
|
value={formData.categoryId}
|
|
onChange={e => setFormData({ ...formData, categoryId: e.target.value })}
|
|
>
|
|
<option value="">Selecione...</option>
|
|
{categories.map(cat => (
|
|
<option key={cat.id} value={cat.id}>{cat.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">Telefone</label>
|
|
<input
|
|
required
|
|
className={inputClass}
|
|
placeholder="(00) 00000-0000"
|
|
value={formData.phone}
|
|
onChange={e => {
|
|
const val = e.target.value.replace(/\D/g, '').replace(/(\d{2})(\d)/, '($1) $2').replace(/(\d{5})(\d)/, '$1-$2').slice(0, 15);
|
|
setFormData({ ...formData, phone: val });
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">E-mail</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
className={inputClass}
|
|
value={formData.email}
|
|
onChange={e => setFormData({ ...formData, email: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">Data de Admissão</label>
|
|
<input
|
|
type="date"
|
|
required
|
|
className={inputClass}
|
|
value={formData.admissionDate}
|
|
onChange={e => setFormData({ ...formData, admissionDate: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2 pt-4 flex gap-3">
|
|
<button type="button" onClick={closeModal} className="flex-1 py-3 border border-slate-200 rounded-xl text-slate-600 hover:bg-slate-50 font-bold text-sm">
|
|
Cancelar
|
|
</button>
|
|
<button type="submit" className="flex-1 py-3 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 shadow-lg font-bold text-sm">
|
|
{editingEmployee ? 'Atualizar' : 'Cadastrar'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Categories Modal */}
|
|
{isCategoryModalOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-transparent animate-in fade-in duration-200">
|
|
<div className="bg-white rounded-2xl w-full max-w-md shadow-2xl relative overflow-hidden animate-slide-up">
|
|
<div className="bg-indigo-600 h-1.5 w-full absolute top-0 left-0"></div>
|
|
|
|
<div className="p-6 border-b border-slate-100 flex justify-between items-center">
|
|
<h3 className="text-xl font-black text-slate-800 tracking-tight">Gerenciar Categorias</h3>
|
|
<button onClick={closeCategoryModal} className="p-2 text-slate-400 hover:text-red-500 transition-all">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-6">
|
|
<form onSubmit={handleCategorySubmit} className="flex gap-2">
|
|
<input
|
|
placeholder="Nova categoria (ex: Professor)"
|
|
className={`${inputClass} flex-1`}
|
|
value={categoryFormData.name}
|
|
onChange={e => setCategoryFormData({ name: e.target.value })}
|
|
/>
|
|
<button type="submit" className="bg-indigo-600 text-white p-3 rounded-xl hover:bg-indigo-700 transition-all shadow-md">
|
|
<Plus size={20} />
|
|
</button>
|
|
</form>
|
|
|
|
<div className="space-y-2 max-h-60 overflow-y-auto pr-2">
|
|
{categories.map(cat => (
|
|
<div key={cat.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-xl group">
|
|
<span className="font-bold text-slate-700">{cat.name}</span>
|
|
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button
|
|
onClick={() => {
|
|
setEditingCategory(cat);
|
|
setCategoryFormData({ name: cat.name });
|
|
}}
|
|
className="p-1.5 text-slate-400 hover:text-indigo-600 rounded-lg hover:bg-white transition-all"
|
|
>
|
|
<Edit2 size={16} />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteCategory(cat)}
|
|
className="p-1.5 text-slate-400 hover:text-red-600 rounded-lg hover:bg-white transition-all"
|
|
>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{categories.length === 0 && (
|
|
<p className="text-center text-slate-400 text-sm py-4 italic">Nenhuma categoria cadastrada.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Employees;
|