new özellik
This commit is contained in:
@@ -1,39 +1,68 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
UsersIcon,
|
||||
TrashIcon,
|
||||
PencilSquareIcon,
|
||||
PlusIcon,
|
||||
MagnifyingGlassIcon
|
||||
MagnifyingGlassIcon,
|
||||
UserPlusIcon,
|
||||
KeyIcon,
|
||||
PhoneIcon,
|
||||
EnvelopeIcon,
|
||||
CalendarDaysIcon,
|
||||
IdentificationIcon,
|
||||
BuildingOffice2Icon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { deleteEmployee } from '@/app/employees/actions';
|
||||
import EmployeeModal from '@/components/employees/EmployeeModal';
|
||||
import UserCreationModal from '@/components/employees/UserCreationModal';
|
||||
|
||||
interface EmployeeTableProps {
|
||||
initialEmployees: any[];
|
||||
companies: any[];
|
||||
roles: any[];
|
||||
departments: any[];
|
||||
sections: any[];
|
||||
employmentTypes: any[];
|
||||
jobTitles: any[];
|
||||
}
|
||||
|
||||
export default function EmployeeTable({ initialEmployees, companies, roles }: EmployeeTableProps) {
|
||||
export default function EmployeeTable({
|
||||
initialEmployees,
|
||||
companies,
|
||||
roles,
|
||||
departments,
|
||||
sections,
|
||||
employmentTypes,
|
||||
jobTitles
|
||||
}: EmployeeTableProps) {
|
||||
const [employees, setEmployees] = useState(initialEmployees);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('all');
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isUserModalOpen, setIsUserModalOpen] = useState(false);
|
||||
const [editingEmployee, setEditingEmployee] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setEmployees(initialEmployees);
|
||||
}, [initialEmployees]);
|
||||
|
||||
const filteredEmployees = employees.filter(emp => {
|
||||
const userData = Array.isArray(emp.users) ? emp.users[0] : emp.users;
|
||||
const fullName = `${userData?.first_name || ''} ${userData?.last_name || ''}`.toLowerCase();
|
||||
const email = (userData?.email || '').toLowerCase();
|
||||
const matchesSearch = fullName.includes(searchTerm.toLowerCase()) || email.includes(searchTerm.toLowerCase());
|
||||
const fullName = `${emp.first_name || ''} ${emp.last_name || ''}`.toLowerCase();
|
||||
const email = (emp.email || '').toLowerCase();
|
||||
const tcNo = (emp.tc_no || '').toLowerCase();
|
||||
const matchesSearch = fullName.includes(searchTerm.toLowerCase()) ||
|
||||
email.includes(searchTerm.toLowerCase()) ||
|
||||
tcNo.includes(searchTerm.toLowerCase());
|
||||
const matchesStatus = statusFilter === 'all' || emp.status === statusFilter;
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
|
||||
const handleEdit = (emp: any) => {
|
||||
const employeesWithoutUser = employees.filter(emp => !emp.user_id && emp.email);
|
||||
|
||||
const openEditModal = (emp: any) => {
|
||||
setEditingEmployee(emp);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
@@ -52,13 +81,18 @@ export default function EmployeeTable({ initialEmployees, companies, roles }: Em
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string | null) => {
|
||||
if (!dateString) return '-';
|
||||
return new Date(dateString).toLocaleDateString('tr-TR');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header with Add Button */}
|
||||
<div className="sm:flex sm:items-center justify-between gap-4">
|
||||
<div className="sm:flex-auto">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-1.5 h-10 bg-indigo-500 rounded-full" />
|
||||
<div className="w-1.5 h-10 bg-[#173363] rounded-full" />
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Personeller</h1>
|
||||
<p className="text-sm font-medium text-slate-500 dark:text-slate-400 mt-1">
|
||||
@@ -67,127 +101,201 @@ export default function EmployeeTable({ initialEmployees, companies, roles }: Em
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="group flex items-center gap-2 bg-[#173363] hover:bg-[#CE0515] text-white px-8 py-3.5 rounded-full font-black shadow-lg shadow-blue-900/20 transition-all duration-500 active:scale-95"
|
||||
>
|
||||
<PlusIcon className="w-5 h-5 transition-transform group-hover:rotate-90" />
|
||||
YENİ PERSONEL
|
||||
</button>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => setIsUserModalOpen(true)}
|
||||
className="group flex items-center gap-2 bg-slate-100 dark:bg-zinc-800 hover:bg-[#173363] text-[#173363] dark:text-slate-300 hover:text-white px-8 py-3.5 rounded-full font-black transition-all duration-500 active:scale-95 text-xs tracking-widest"
|
||||
>
|
||||
<UserPlusIcon className="w-5 h-5 transition-transform group-hover:scale-110" />
|
||||
KULLANICI TANIMLA
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="group flex items-center gap-2 bg-[#173363] hover:bg-[#CE0515] text-white px-8 py-3.5 rounded-full font-black shadow-lg shadow-blue-900/20 transition-all duration-500 active:scale-95 text-xs tracking-widest"
|
||||
>
|
||||
<PlusIcon className="w-5 h-5 transition-transform group-hover:rotate-90" />
|
||||
YENİ PERSONEL
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter & Search Bar */}
|
||||
<div className="flex flex-col md:flex-row gap-4 items-center justify-between bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
|
||||
<div className="flex flex-col md:flex-row gap-4 items-center justify-between bg-white dark:bg-zinc-900 p-6 rounded-[2rem] border border-slate-100 dark:border-zinc-800 shadow-sm">
|
||||
<div className="relative w-full md:w-96 group">
|
||||
<MagnifyingGlassIcon className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 group-focus-within:text-[#CE0515] transition-colors" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="İsim veya e-posta ile ara..."
|
||||
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-medium focus:ring-2 focus:ring-[#CE0515] transition-all outline-none placeholder:text-slate-400"
|
||||
placeholder="İsim, TC veya e-posta ile ara..."
|
||||
className="w-full pl-12 pr-4 py-3 bg-slate-50 dark:bg-zinc-800 border-none rounded-2xl text-sm font-medium focus:ring-2 focus:ring-[#CE0515] transition-all outline-none placeholder:text-slate-400 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2 w-full md:w-auto p-1.5 bg-slate-50 rounded-full border border-slate-100">
|
||||
<div className="flex gap-2 w-full md:w-auto p-1.5 bg-slate-50 dark:bg-zinc-800 rounded-full border border-slate-100 dark:border-zinc-700">
|
||||
<button
|
||||
onClick={() => setStatusFilter('all')}
|
||||
className={`flex-1 md:flex-none px-8 py-2.5 rounded-full text-xs font-black uppercase tracking-wider transition-all duration-500 ${statusFilter === 'all' ? 'bg-[#173363] text-white shadow-md' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
className={`flex-1 md:flex-none px-8 py-2.5 rounded-full text-xs font-black uppercase tracking-wider transition-all duration-500 ${statusFilter === 'all' ? 'bg-[#173363] text-white shadow-md' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300'}`}
|
||||
>
|
||||
Tümü
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStatusFilter('active')}
|
||||
className={`flex-1 md:flex-none px-8 py-2.5 rounded-full text-xs font-black uppercase tracking-wider transition-all duration-500 ${statusFilter === 'active' ? 'bg-emerald-600 text-white shadow-md' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
className={`flex-1 md:flex-none px-8 py-2.5 rounded-full text-xs font-black uppercase tracking-wider transition-all duration-500 ${statusFilter === 'active' ? 'bg-emerald-600 text-white shadow-md' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300'}`}
|
||||
>
|
||||
Aktif
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStatusFilter('inactive')}
|
||||
className={`flex-1 md:flex-none px-8 py-2.5 rounded-full text-xs font-black uppercase tracking-wider transition-all duration-500 ${statusFilter === 'inactive' ? 'bg-[#CE0515] text-white shadow-md' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
className={`flex-1 md:flex-none px-8 py-2.5 rounded-full text-xs font-black uppercase tracking-wider transition-all duration-500 ${statusFilter === 'inactive' ? 'bg-[#CE0515] text-white shadow-md' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300'}`}
|
||||
>
|
||||
Pasif
|
||||
Ayrılan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Section */}
|
||||
<div className="bg-white shadow-sm border border-slate-100 rounded-[2.5rem] overflow-hidden">
|
||||
<div className="bg-white dark:bg-zinc-900 shadow-sm border border-slate-100 dark:border-zinc-800 rounded-[2.5rem] overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-slate-50">
|
||||
<thead className="bg-slate-50/50">
|
||||
<table className="min-w-full divide-y divide-slate-50 dark:divide-zinc-800">
|
||||
<thead className="bg-slate-50/50 dark:bg-zinc-800/50">
|
||||
<tr>
|
||||
<th className="py-6 pl-8 pr-3 text-left text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Personel</th>
|
||||
<th className="px-3 py-6 text-left text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Şirket / Rol</th>
|
||||
<th className="px-3 py-6 text-left text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Departman / Ünvan</th>
|
||||
<th className="px-3 py-6 text-left text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Kurumsal</th>
|
||||
<th className="px-3 py-6 text-left text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Bölüm / Görev</th>
|
||||
<th className="px-3 py-6 text-left text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">İletişim</th>
|
||||
<th className="px-3 py-6 text-left text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Tarihler</th>
|
||||
<th className="px-3 py-6 text-left text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Durum</th>
|
||||
<th className="relative py-6 pl-3 pr-8 text-right">
|
||||
<span className="sr-only">İşlemler</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-50">
|
||||
{filteredEmployees.map((emp) => {
|
||||
const userData = Array.isArray(emp.users) ? emp.users[0] : emp.users;
|
||||
const companyData = Array.isArray(emp.companies) ? emp.companies[0] : emp.companies;
|
||||
const roleData = Array.isArray(emp.roles) ? emp.roles[0] : emp.roles;
|
||||
<tbody className="divide-y divide-slate-50 dark:divide-zinc-800">
|
||||
{filteredEmployees.map((emp) => (
|
||||
<tr key={emp.id} className="group hover:bg-slate-50/50 dark:hover:bg-zinc-800/20 transition-all duration-500">
|
||||
{/* Personel */}
|
||||
<td className="whitespace-nowrap py-6 pl-8 pr-3">
|
||||
<div className="flex items-center gap-4">
|
||||
{emp.photo_url ? (
|
||||
<img src={emp.photo_url} alt="" className="w-14 h-14 rounded-2xl object-cover shadow-lg shadow-blue-900/10 group-hover:scale-110 transition-transform duration-500" />
|
||||
) : (
|
||||
<div className="w-14 h-14 rounded-2xl bg-[#173363] flex items-center justify-center text-white font-black text-base shadow-lg shadow-blue-900/10 group-hover:bg-[#CE0515] transition-colors duration-500">
|
||||
{emp.first_name?.[0]}{emp.last_name?.[0]}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-black text-[#173363] dark:text-white group-hover:text-black dark:group-hover:text-white transition-colors">
|
||||
{emp.first_name} {emp.last_name}
|
||||
</p>
|
||||
<div className="flex items-center gap-1.5 mt-1 text-slate-400">
|
||||
<IdentificationIcon className="w-3.5 h-3.5" />
|
||||
<p className="text-[10px] font-black tracking-widest">{emp.tc_no || '--'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
return (
|
||||
<tr key={emp.id} className="group hover:bg-slate-50/50 transition-all duration-500">
|
||||
<td className="whitespace-nowrap py-6 pl-8 pr-3">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[#173363] flex items-center justify-center text-white font-black text-sm shadow-lg shadow-blue-900/10 group-hover:bg-[#CE0515] transition-colors duration-500">
|
||||
{userData?.first_name?.[0]}{userData?.last_name?.[0]}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-black text-[#173363] group-hover:text-black transition-colors">
|
||||
{userData?.first_name} {userData?.last_name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 font-bold">{userData?.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-6">
|
||||
<p className="text-sm font-black text-[#173363]">{companyData?.name}</p>
|
||||
<p className="text-[10px] text-[#CE0515] font-black uppercase tracking-widest mt-1">{roleData?.description}</p>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-6">
|
||||
<p className="text-sm font-black text-slate-700">{emp.department || '-'}</p>
|
||||
<p className="text-xs text-slate-400 font-bold mt-1">{emp.title || '-'}</p>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-6">
|
||||
<span className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.15em] border ${
|
||||
emp.status === 'active'
|
||||
? 'bg-emerald-50 text-emerald-700 border-emerald-100 shadow-sm shadow-emerald-100'
|
||||
: 'bg-slate-50 text-slate-500 border-slate-100'
|
||||
}`}>
|
||||
<span className={`w-2 h-2 rounded-full animate-pulse ${emp.status === 'active' ? 'bg-emerald-500' : 'bg-slate-400'}`} />
|
||||
{emp.status === 'active' ? 'Aktif' : 'Pasif'}
|
||||
{/* Kurumsal */}
|
||||
<td className="whitespace-nowrap px-3 py-6">
|
||||
<p className="text-sm font-black text-slate-700 dark:text-white">{emp.companies?.name}</p>
|
||||
<div className="flex flex-col gap-1 mt-1.5">
|
||||
<span className="inline-flex items-center text-[10px] text-[#CE0515] font-black uppercase tracking-widest bg-red-50 dark:bg-red-900/20 px-2 py-0.5 rounded-md w-fit">
|
||||
{emp.roles?.description}
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-6 pl-3 pr-8 text-right">
|
||||
<div className="flex items-center justify-end gap-3 translate-x-4 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-500">
|
||||
<button
|
||||
onClick={() => handleEdit(emp)}
|
||||
className="p-3 rounded-2xl text-slate-400 hover:text-white hover:bg-[#173363] hover:shadow-lg hover:shadow-blue-900/20 transition-all duration-300"
|
||||
title="Düzenle"
|
||||
>
|
||||
<PencilSquareIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(emp.id)}
|
||||
className="p-3 rounded-2xl text-slate-400 hover:text-white hover:bg-[#CE0515] hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"
|
||||
title="Sil"
|
||||
>
|
||||
<TrashIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<span className="text-[10px] text-slate-400 font-bold">
|
||||
{emp.employment_types?.name || '-'}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Bölüm / Görev */}
|
||||
<td className="whitespace-nowrap px-3 py-6">
|
||||
<div className="flex items-start gap-2">
|
||||
<BuildingOffice2Icon className="w-4 h-4 text-slate-300 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-black text-slate-700 dark:text-slate-300">{emp.departments?.name || '-'}</p>
|
||||
<p className="text-[10px] text-slate-400 font-bold mt-1">
|
||||
{emp.sections?.name ? `${emp.sections.name} / ` : ''}{emp.job_titles?.name || '-'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* İletişim */}
|
||||
<td className="whitespace-nowrap px-3 py-6">
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2 text-slate-500 dark:text-slate-400">
|
||||
<EnvelopeIcon className="w-3.5 h-3.5" />
|
||||
<p className="text-[11px] font-bold">{emp.email || '-'}</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
<div className="flex items-center gap-2 text-slate-500 dark:text-slate-400">
|
||||
<PhoneIcon className="w-3.5 h-3.5" />
|
||||
<p className="text-[11px] font-bold">{emp.phone1 || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Tarihler */}
|
||||
<td className="whitespace-nowrap px-3 py-6">
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2 text-slate-400">
|
||||
<CalendarDaysIcon className="w-3.5 h-3.5 text-emerald-500" />
|
||||
<p className="text-[10px] font-black">{formatDate(emp.start_date)}</p>
|
||||
</div>
|
||||
{emp.leave_date && (
|
||||
<div className="flex items-center gap-2 text-slate-400">
|
||||
<CalendarDaysIcon className="w-3.5 h-3.5 text-rose-500" />
|
||||
<p className="text-[10px] font-black">{formatDate(emp.leave_date)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Durum */}
|
||||
<td className="whitespace-nowrap px-3 py-6">
|
||||
<span className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.15em] border ${
|
||||
emp.status === 'active'
|
||||
? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 border-emerald-100 dark:border-emerald-900/30'
|
||||
: 'bg-slate-50 dark:bg-zinc-800 text-slate-500 dark:text-slate-400 border-slate-100 dark:border-zinc-700'
|
||||
}`}>
|
||||
<span className={`w-2 h-2 rounded-full ${emp.status === 'active' ? 'bg-emerald-500 animate-pulse' : 'bg-slate-400'}`} />
|
||||
{emp.status === 'active' ? 'Aktif' : 'Ayrılan'}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* İşlemler */}
|
||||
<td className="whitespace-nowrap py-6 pl-3 pr-8 text-right">
|
||||
<div className="flex items-center justify-end gap-3 translate-x-4 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-500">
|
||||
{!emp.user_id && emp.email && (
|
||||
<button
|
||||
onClick={() => setIsUserModalOpen(true)}
|
||||
className="p-3 rounded-2xl text-emerald-600 hover:text-white hover:bg-emerald-600 hover:shadow-lg hover:shadow-emerald-900/20 transition-all duration-300"
|
||||
title="Sistem Girişi Tanımla"
|
||||
>
|
||||
<KeyIcon className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => openEditModal(emp)}
|
||||
className="p-3 rounded-2xl text-slate-400 hover:text-white hover:bg-[#173363] hover:shadow-lg hover:shadow-blue-900/20 transition-all duration-300"
|
||||
title="Düzenle"
|
||||
>
|
||||
<PencilSquareIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(emp.id)}
|
||||
className="p-3 rounded-2xl text-slate-400 hover:text-white hover:bg-[#CE0515] hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"
|
||||
title="Sil"
|
||||
>
|
||||
<TrashIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{filteredEmployees.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="py-20 text-center">
|
||||
<td colSpan={7} className="py-20 text-center">
|
||||
<UsersIcon className="mx-auto h-16 w-16 text-slate-200 dark:text-zinc-800 mb-4" />
|
||||
<p className="text-slate-500 dark:text-slate-400 font-bold">Herhangi bir personel kaydı bulunamadı.</p>
|
||||
</td>
|
||||
@@ -198,14 +306,24 @@ export default function EmployeeTable({ initialEmployees, companies, roles }: Em
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{/* Modals */}
|
||||
<EmployeeModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
companies={companies}
|
||||
roles={roles}
|
||||
departments={departments}
|
||||
sections={sections}
|
||||
employmentTypes={employmentTypes}
|
||||
jobTitles={jobTitles}
|
||||
editingEmployee={editingEmployee}
|
||||
/>
|
||||
|
||||
<UserCreationModal
|
||||
isOpen={isUserModalOpen}
|
||||
onClose={() => setIsUserModalOpen(false)}
|
||||
employeesWithoutUser={employeesWithoutUser}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user