327 lines
16 KiB
TypeScript
327 lines
16 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import {
|
||
UsersIcon,
|
||
TrashIcon,
|
||
PencilSquareIcon,
|
||
PlusIcon,
|
||
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,
|
||
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 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 employeesWithoutUser = employees.filter(emp => !emp.user_id && emp.email);
|
||
|
||
const openEditModal = (emp: any) => {
|
||
setEditingEmployee(emp);
|
||
setIsModalOpen(true);
|
||
};
|
||
|
||
const handleAdd = () => {
|
||
setEditingEmployee(null);
|
||
setIsModalOpen(true);
|
||
};
|
||
|
||
const handleDelete = async (id: string) => {
|
||
if (confirm('Bu personeli silmek istediğinize emin misiniz?')) {
|
||
const result = await deleteEmployee(id);
|
||
if (result.error) {
|
||
alert(result.error);
|
||
}
|
||
}
|
||
};
|
||
|
||
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="flex flex-col sm:flex-row sm:items-center justify-between gap-6">
|
||
<div className="sm:flex-auto">
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-1.5 h-10 bg-[#173363] rounded-full" />
|
||
<div>
|
||
<h1 className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Personeller</h1>
|
||
<p className="text-xs sm:text-sm font-medium text-slate-500 dark:text-slate-400 mt-1">
|
||
Şirketinizdeki tüm personel kayıtlarını yönetin
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col xs:flex-row gap-3">
|
||
<button
|
||
onClick={() => setIsUserModalOpen(true)}
|
||
className="group flex items-center justify-center gap-2 bg-slate-100 dark:bg-zinc-800 hover:bg-[#173363] text-[#173363] dark:text-slate-300 hover:text-white px-6 py-3.5 rounded-full font-black transition-all duration-500 active:scale-95 text-[10px] tracking-widest"
|
||
>
|
||
<UserPlusIcon className="w-4 h-4" />
|
||
KULLANICI TANIMLA
|
||
</button>
|
||
<button
|
||
onClick={handleAdd}
|
||
className="group flex items-center justify-center gap-2 bg-[#173363] hover:bg-[#CE0515] text-white px-6 py-3.5 rounded-full font-black shadow-lg shadow-blue-900/20 transition-all duration-500 active:scale-95 text-[10px] tracking-widest"
|
||
>
|
||
<PlusIcon className="w-4 h-4" />
|
||
YENİ PERSONEL
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filter & Search Bar */}
|
||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between bg-white dark:bg-zinc-900 p-4 sm:p-6 rounded-3xl sm:rounded-[2rem] border border-slate-100 dark:border-zinc-800 shadow-sm">
|
||
<div className="relative w-full lg: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, TC veya e-posta..."
|
||
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 lg:w-auto p-1.5 bg-slate-50 dark:bg-zinc-800 rounded-full border border-slate-100 dark:border-zinc-700 overflow-x-auto no-scrollbar">
|
||
<button
|
||
onClick={() => setStatusFilter('all')}
|
||
className={`flex-1 lg:flex-none whitespace-nowrap px-6 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 lg:flex-none whitespace-nowrap px-6 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 lg:flex-none whitespace-nowrap px-6 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'}`}
|
||
>
|
||
Ayrılan
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Table Section */}
|
||
<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 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">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 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>
|
||
|
||
{/* 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>
|
||
<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>
|
||
<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-2 lg:gap-3 lg:translate-x-4 lg:opacity-0 lg:group-hover:translate-x-0 lg:group-hover:opacity-100 transition-all duration-500">
|
||
{!emp.user_id && emp.email && (
|
||
<button
|
||
onClick={() => setIsUserModalOpen(true)}
|
||
className="p-2 sm:p-3 rounded-xl sm:rounded-2xl text-emerald-600 hover:text-white hover:bg-emerald-600 transition-all"
|
||
>
|
||
<KeyIcon className="w-5 h-5" />
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => openEditModal(emp)}
|
||
className="p-2 sm:p-3 rounded-xl sm:rounded-2xl text-slate-400 hover:text-white hover:bg-[#173363] transition-all"
|
||
>
|
||
<PencilSquareIcon className="w-5 h-5" />
|
||
</button>
|
||
<button
|
||
onClick={() => handleDelete(emp.id)}
|
||
className="p-2 sm:p-3 rounded-xl sm:rounded-2xl text-slate-400 hover:text-white hover:bg-[#CE0515] transition-all"
|
||
>
|
||
<TrashIcon className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{filteredEmployees.length === 0 && (
|
||
<tr>
|
||
<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>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 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>
|
||
);
|
||
}
|