From 23da592b41cf527106064631bbb1d1471c207b98 Mon Sep 17 00:00:00 2001
From: "daivid.alves" <daivid.alves@itguys.com.br>
Date: Mon, 19 Jan 2026 15:55:57 -0300
Subject: [PATCH] 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.

---
 .../rh/components/EmployeeEditModal.jsx       | 251 ++++++++++++++++++
 1 file changed, 251 insertions(+)
 create mode 100644 src/features/rh/components/EmployeeEditModal.jsx

diff --git a/src/features/rh/components/EmployeeEditModal.jsx b/src/features/rh/components/EmployeeEditModal.jsx
new file mode 100644
index 0000000..ac3ad87
--- /dev/null
+++ b/src/features/rh/components/EmployeeEditModal.jsx
@@ -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>
+    );
+};