Enhance employee management in useEmployees hook by adding new methods for employee updates, inactivation, and reactivation. Improved HRDashboard with updated dialog descriptions for user guidance.
This commit is contained in:
parent
817b0ec4eb
commit
23da592b41
|
|
@ -0,0 +1,251 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { useEmployees } from '../hooks/useEmployees';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export const EmployeeEditModal = ({ isOpen, onClose, employee, onUpdate }) => {
|
||||
const { updateEmployee } = useEmployees();
|
||||
const [formData, setFormData] = useState({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (employee) {
|
||||
setFormData({
|
||||
nome: employee.colaboradores || employee.nome || employee.name || '',
|
||||
cargo: employee.cargo || employee.role || '',
|
||||
email_corporativo: employee.email_corporativo || employee.email || '',
|
||||
telefone: employee.telefone || employee.phone || '',
|
||||
status_contrato: employee.status_contrato || employee.status || 'Ativo',
|
||||
base: employee.base || '',
|
||||
cpf: employee.cpf_validado || employee.cpf || '',
|
||||
rg: employee.rg || '',
|
||||
cnh: employee.cnh || '',
|
||||
validade_cnh: employee.validade_cnh || '',
|
||||
data_nascimento: employee.data_nascimento || '',
|
||||
salario: employee.salario || 0,
|
||||
responsavel_direto: employee.responsavel_direto_validado || employee.responsavel_direto || ''
|
||||
});
|
||||
}
|
||||
}, [employee]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSelectChange = (name, value) => {
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
try {
|
||||
await updateEmployee(employee.id, formData);
|
||||
onUpdate?.();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Erro ao atualizar:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!employee) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-2xl bg-white dark:bg-[#1b1b1b] border-slate-200 dark:border-white/10 rounded-[32px] overflow-hidden p-0">
|
||||
<DialogHeader className="p-8 pb-4 bg-emerald-500/5">
|
||||
<DialogTitle className="text-xl font-black text-slate-800 dark:text-white">
|
||||
Editar Colaborador
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs text-slate-500 font-bold uppercase tracking-wider">
|
||||
ID: {employee.id} | {formData.nome}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<ScrollArea className="max-h-[70vh] px-8 py-4">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* Nome Completo */}
|
||||
<div className="col-span-2 space-y-2">
|
||||
<Label htmlFor="nome" className="text-[10px] font-black uppercase text-slate-400">Nome Completo</Label>
|
||||
<Input
|
||||
id="nome"
|
||||
name="nome"
|
||||
value={formData.nome}
|
||||
onChange={handleChange}
|
||||
className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Cargo */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cargo" className="text-[10px] font-black uppercase text-slate-400">Cargo</Label>
|
||||
<Input
|
||||
id="cargo"
|
||||
name="cargo"
|
||||
value={formData.cargo}
|
||||
onChange={handleChange}
|
||||
className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-[10px] font-black uppercase text-slate-400">Status de Contrato</Label>
|
||||
<Select
|
||||
value={formData.status_contrato}
|
||||
onValueChange={(v) => handleSelectChange('status_contrato', v)}
|
||||
>
|
||||
<SelectTrigger className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
|
||||
<SelectValue placeholder="Selecione o status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Ativo">Ativo</SelectItem>
|
||||
<SelectItem value="Férias">Férias</SelectItem>
|
||||
<SelectItem value="Demitido">Demitido</SelectItem>
|
||||
<SelectItem value="DESLIGADO">Desligado</SelectItem>
|
||||
<SelectItem value="Cadastro Incompleto">Cadastro Incompleto</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Email e Telefone */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email_corporativo" className="text-[10px] font-black uppercase text-slate-400">E-mail Corporativo</Label>
|
||||
<Input
|
||||
id="email_corporativo"
|
||||
name="email_corporativo"
|
||||
value={formData.email_corporativo}
|
||||
onChange={handleChange}
|
||||
className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="telefone" className="text-[10px] font-black uppercase text-slate-400">Telefone</Label>
|
||||
<Input
|
||||
id="telefone"
|
||||
name="telefone"
|
||||
value={formData.telefone}
|
||||
onChange={handleChange}
|
||||
className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CPF e RG */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cpf" className="text-[10px] font-black uppercase text-slate-400">CPF</Label>
|
||||
<Input
|
||||
id="cpf"
|
||||
name="cpf"
|
||||
value={formData.cpf}
|
||||
onChange={handleChange}
|
||||
className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="rg" className="text-[10px] font-black uppercase text-slate-400">RG</Label>
|
||||
<Input
|
||||
id="rg"
|
||||
name="rg"
|
||||
value={formData.rg}
|
||||
onChange={handleChange}
|
||||
className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CNH e Validade */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cnh" className="text-[10px] font-black uppercase text-slate-400">CNH</Label>
|
||||
<Input
|
||||
id="cnh"
|
||||
name="cnh"
|
||||
value={formData.cnh}
|
||||
onChange={handleChange}
|
||||
className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="validade_cnh" className="text-[10px] font-black uppercase text-slate-400">Validade CNH</Label>
|
||||
<Input
|
||||
id="validade_cnh"
|
||||
name="validade_cnh"
|
||||
type="date"
|
||||
value={formData.validade_cnh}
|
||||
onChange={handleChange}
|
||||
className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Salário */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="salario" className="text-[10px] font-black uppercase text-slate-400">Salário Base</Label>
|
||||
<Input
|
||||
id="salario"
|
||||
name="salario"
|
||||
type="number"
|
||||
value={formData.salario}
|
||||
onChange={handleChange}
|
||||
className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Base */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="base" className="text-[10px] font-black uppercase text-slate-400">Base</Label>
|
||||
<Input
|
||||
id="base"
|
||||
name="base"
|
||||
value={formData.base}
|
||||
onChange={handleChange}
|
||||
className="h-11 rounded-xl bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<DialogFooter className="p-8 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/10">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={onClose}
|
||||
className="rounded-2xl h-12 px-8 font-bold text-slate-500"
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="rounded-2xl h-12 px-8 bg-emerald-600 hover:bg-emerald-700 text-white font-black uppercase tracking-widest shadow-lg shadow-emerald-500/20"
|
||||
>
|
||||
{loading ? 'Salvando...' : 'Salvar Alterações'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue