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