638 lines
24 KiB
TypeScript
638 lines
24 KiB
TypeScript
|
import React, { useState } from "react";
|
|||
|
|
import { Link } from "react-router-dom";
|
|||
|
|
import { useQuery } from "@tanstack/react-query";
|
|||
|
|
import {
|
|||
|
|
FaUsers,
|
|||
|
|
FaPlus,
|
|||
|
|
FaSearch,
|
|||
|
|
FaFilter,
|
|||
|
|
FaDownload,
|
|||
|
|
FaEdit,
|
|||
|
|
FaEye,
|
|||
|
|
FaPhone,
|
|||
|
|
FaEnvelope,
|
|||
|
|
FaCalendar,
|
|||
|
|
FaBuilding,
|
|||
|
|
FaAward,
|
|||
|
|
FaExclamationTriangle,
|
|||
|
|
FaList,
|
|||
|
|
FaTh,
|
|||
|
|
FaBriefcase,
|
|||
|
|
} from "react-icons/fa";
|
|||
|
|
import classNames from "classnames";
|
|||
|
|
import { EmployeeStatusEnum, HrEmployee } from "../../../types/hr";
|
|||
|
|
import dayjs from "dayjs";
|
|||
|
|
import { mockEmployees } from "../../../mocks/mockEmployees";
|
|||
|
|
import EmployeeViewModal from "./EmployeeViewModal";
|
|||
|
|
import Widget from "../../../components/common/Widget";
|
|||
|
|
import {
|
|||
|
|
getEmploymentTypeColor,
|
|||
|
|
getEmploymentTypeText,
|
|||
|
|
getEmployeeStatusColor,
|
|||
|
|
getEmployeeStatusIcon,
|
|||
|
|
getEmployeeStatusText,
|
|||
|
|
} from "../../../utils/erp";
|
|||
|
|
|
|||
|
|
const EmployeeList: React.FC = () => {
|
|||
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|||
|
|
const [filterStatus, setFilterStatus] = useState("all");
|
|||
|
|
const [filterDepartment, setFilterDepartment] = useState("all");
|
|||
|
|
const [showFilters, setShowFilters] = useState(false);
|
|||
|
|
const [viewMode, setViewMode] = useState<"list" | "cards">("list");
|
|||
|
|
|
|||
|
|
// Modal states
|
|||
|
|
const [isViewModalOpen, setIsViewModalOpen] = useState(false);
|
|||
|
|
const [selectedEmployee, setSelectedEmployee] = useState<HrEmployee | null>(
|
|||
|
|
null
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
data: employees,
|
|||
|
|
isLoading,
|
|||
|
|
error,
|
|||
|
|
} = useQuery({
|
|||
|
|
queryKey: ["employees", searchTerm, filterStatus, filterDepartment],
|
|||
|
|
queryFn: async () => {
|
|||
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|||
|
|
return mockEmployees.filter((employee) => {
|
|||
|
|
const matchesSearch =
|
|||
|
|
employee.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|||
|
|
employee.fullName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|||
|
|
employee.email.toLowerCase().includes(searchTerm.toLowerCase());
|
|||
|
|
const matchesStatus =
|
|||
|
|
filterStatus === "all" || employee.employeeStatus === filterStatus;
|
|||
|
|
const matchesDepartment =
|
|||
|
|
filterDepartment === "all" ||
|
|||
|
|
employee.department?.code === filterDepartment;
|
|||
|
|
return matchesSearch && matchesStatus && matchesDepartment;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Modal handlers
|
|||
|
|
const handleViewEmployee = (employee: HrEmployee) => {
|
|||
|
|
setSelectedEmployee(employee);
|
|||
|
|
setIsViewModalOpen(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCloseViewModal = () => {
|
|||
|
|
setIsViewModalOpen(false);
|
|||
|
|
setSelectedEmployee(null);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEditFromView = (employee: HrEmployee) => {
|
|||
|
|
setIsViewModalOpen(false);
|
|||
|
|
// Navigate to edit page - you can replace this with a modal if preferred
|
|||
|
|
window.location.href = `/admin/hr/employees/edit/${employee.id}`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (isLoading) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center py-12">
|
|||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|||
|
|
<span className="ml-3 text-gray-600">
|
|||
|
|
Personel listesi yükleniyor...
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (error) {
|
|||
|
|
return (
|
|||
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
<FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
|
|||
|
|
<span className="text-red-800">
|
|||
|
|
Personel listesi yüklenirken hata oluştu.
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-3 pt-2">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
|||
|
|
{/* Title & Description */}
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-lg font-bold text-gray-900">Personel Listesi</h2>
|
|||
|
|
<p className="text-sm text-gray-600">Şirket çalışanlarının listesi</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Header Actions */}
|
|||
|
|
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
|
|||
|
|
{/* View Mode Toggle */}
|
|||
|
|
<div className="flex bg-gray-100 rounded-lg p-0.5">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setViewMode("list")}
|
|||
|
|
className={`p-1.5 rounded-md transition-colors ${
|
|||
|
|
viewMode === "list"
|
|||
|
|
? "bg-white text-blue-600 shadow-sm"
|
|||
|
|
: "text-gray-600 hover:text-gray-900"
|
|||
|
|
}`}
|
|||
|
|
title="Liste Görünümü"
|
|||
|
|
>
|
|||
|
|
<FaList className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setViewMode("cards")}
|
|||
|
|
className={`p-1.5 rounded-md transition-colors ${
|
|||
|
|
viewMode === "cards"
|
|||
|
|
? "bg-white text-blue-600 shadow-sm"
|
|||
|
|
: "text-gray-600 hover:text-gray-900"
|
|||
|
|
}`}
|
|||
|
|
title="Kart Görünümü"
|
|||
|
|
>
|
|||
|
|
<FaTh className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Search Box */}
|
|||
|
|
<div className="relative">
|
|||
|
|
<FaSearch
|
|||
|
|
size={18}
|
|||
|
|
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
|
|||
|
|
/>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="Personel kodu, ad veya e-posta..."
|
|||
|
|
value={searchTerm}
|
|||
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|||
|
|
className="pl-10 pr-4 py-1 text-sm w-full sm:w-64 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Filter Button */}
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowFilters(!showFilters)}
|
|||
|
|
className={classNames(
|
|||
|
|
"flex items-center px-3 py-1.5 text-sm border rounded-lg transition-colors",
|
|||
|
|
showFilters
|
|||
|
|
? "border-blue-500 bg-blue-50 text-blue-700"
|
|||
|
|
: "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<FaFilter size={16} className="mr-2" />
|
|||
|
|
Filtreler
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
{/* Export Button */}
|
|||
|
|
<button
|
|||
|
|
onClick={() => alert("Dışa aktarma özelliği yakında eklenecek")}
|
|||
|
|
className="flex items-center px-3 py-1 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
|||
|
|
>
|
|||
|
|
<FaDownload size={16} className="mr-2" />
|
|||
|
|
Dışa Aktar
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
{/* Add New Employee */}
|
|||
|
|
<Link
|
|||
|
|
to="/admin/hr/employees/new"
|
|||
|
|
className="flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
|||
|
|
>
|
|||
|
|
<FaPlus size={16} className="mr-2" />
|
|||
|
|
Yeni Personel
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Filters Panel */}
|
|||
|
|
{showFilters && (
|
|||
|
|
<div className="bg-white border border-gray-200 rounded-lg p-3">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|||
|
|
Durum
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={filterStatus}
|
|||
|
|
onChange={(e) => setFilterStatus(e.target.value)}
|
|||
|
|
className="w-full border border-gray-300 rounded-lg px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|||
|
|
>
|
|||
|
|
<option value="all">Tümü</option>
|
|||
|
|
<option value={EmployeeStatusEnum.Active}>Aktif</option>
|
|||
|
|
<option value={EmployeeStatusEnum.Inactive}>Pasif</option>
|
|||
|
|
<option value={EmployeeStatusEnum.OnLeave}>İzinli</option>
|
|||
|
|
<option value={EmployeeStatusEnum.Suspended}>Askıda</option>
|
|||
|
|
<option value={EmployeeStatusEnum.Terminated}>
|
|||
|
|
İşten Çıkarıldı
|
|||
|
|
</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|||
|
|
Departman
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={filterDepartment}
|
|||
|
|
onChange={(e) => setFilterDepartment(e.target.value)}
|
|||
|
|
className="w-full border border-gray-300 rounded-lg px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|||
|
|
>
|
|||
|
|
<option value="all">Tümü</option>
|
|||
|
|
<option value="IT">Bilgi İşlem</option>
|
|||
|
|
<option value="PROC">Satınalma</option>
|
|||
|
|
<option value="PROD">Üretim</option>
|
|||
|
|
<option value="HR">İnsan Kaynakları</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-end">
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setFilterStatus("all");
|
|||
|
|
setFilterDepartment("all");
|
|||
|
|
setSearchTerm("");
|
|||
|
|
}}
|
|||
|
|
className="w-full px-3 py-1 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
|||
|
|
>
|
|||
|
|
Filtreleri Temizle
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Statistics Cards */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
|||
|
|
<Widget
|
|||
|
|
title="Toplam Personel"
|
|||
|
|
value={employees?.length || 0}
|
|||
|
|
color="blue"
|
|||
|
|
icon="FaUsers"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Widget
|
|||
|
|
title="Aktif Personel"
|
|||
|
|
value={
|
|||
|
|
employees?.filter(
|
|||
|
|
(e) => e.employeeStatus === EmployeeStatusEnum.Active
|
|||
|
|
).length || 0
|
|||
|
|
}
|
|||
|
|
color="green"
|
|||
|
|
icon="FaCheckCircle"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Widget
|
|||
|
|
title="İzinli Personel"
|
|||
|
|
value={
|
|||
|
|
employees?.filter(
|
|||
|
|
(e) => e.employeeStatus === EmployeeStatusEnum.OnLeave
|
|||
|
|
).length || 0
|
|||
|
|
}
|
|||
|
|
color="yellow"
|
|||
|
|
icon="FaCalendar"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Widget
|
|||
|
|
title="Yeni İşe Alınanlar"
|
|||
|
|
value={
|
|||
|
|
employees?.filter((e) =>
|
|||
|
|
dayjs(e.hireDate).isAfter(dayjs().subtract(30, "day"))
|
|||
|
|
).length || 0
|
|||
|
|
}
|
|||
|
|
color="purple"
|
|||
|
|
icon="FaArrowUp"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Employees Display */}
|
|||
|
|
{viewMode === "list" ? (
|
|||
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 text-xs">
|
|||
|
|
<div className="px-3 py-2 border-b border-gray-200">
|
|||
|
|
<h2 className="text-xl font-bold text-gray-900">
|
|||
|
|
Personel Listesi
|
|||
|
|
</h2>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="overflow-x-auto">
|
|||
|
|
<table className="w-full">
|
|||
|
|
<thead className="bg-gray-50">
|
|||
|
|
<tr>
|
|||
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|||
|
|
Personel Bilgileri
|
|||
|
|
</th>
|
|||
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|||
|
|
İletişim
|
|||
|
|
</th>
|
|||
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|||
|
|
Pozisyon / Departman
|
|||
|
|
</th>
|
|||
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|||
|
|
İstihdam Bilgileri
|
|||
|
|
</th>
|
|||
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|||
|
|
Maaş
|
|||
|
|
</th>
|
|||
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|||
|
|
Durum
|
|||
|
|
</th>
|
|||
|
|
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|||
|
|
İşlemler
|
|||
|
|
</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
|
|||
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|||
|
|
{employees?.map((employee) => (
|
|||
|
|
<tr
|
|||
|
|
key={employee.id}
|
|||
|
|
className="hover:bg-gray-50 transition-colors text-xs"
|
|||
|
|
>
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
<div className="flex-shrink-0 h-10 w-10">
|
|||
|
|
<div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
|
|||
|
|
<FaUsers className="h-5 w-5 text-blue-600" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="ml-4">
|
|||
|
|
<div className="text-xs font-medium text-gray-900">
|
|||
|
|
{employee.code}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-gray-500">
|
|||
|
|
{employee.fullName}
|
|||
|
|
</div>
|
|||
|
|
{employee.badgeNumber && (
|
|||
|
|
<div className="text-xs text-gray-400 mt-1">
|
|||
|
|
Rozet: {employee.badgeNumber}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<div className="space-y-1">
|
|||
|
|
<div className="flex items-center text-xs text-gray-900">
|
|||
|
|
<FaEnvelope size={14} className="mr-1" />
|
|||
|
|
{employee.email}
|
|||
|
|
</div>
|
|||
|
|
{employee.phone && (
|
|||
|
|
<div className="flex items-center text-xs text-gray-500">
|
|||
|
|
<FaPhone size={14} className="mr-1" />
|
|||
|
|
{employee.phone}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs font-medium text-gray-900">
|
|||
|
|
{employee.jobPosition?.name}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center text-xs text-gray-500">
|
|||
|
|
<FaBuilding size={14} className="mr-1" />
|
|||
|
|
{employee.department?.name}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-gray-400 mt-1">
|
|||
|
|
{employee.workLocation}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<div className="space-y-1">
|
|||
|
|
<div
|
|||
|
|
className={classNames(
|
|||
|
|
"text-xs font-medium",
|
|||
|
|
getEmploymentTypeColor(employee.employmentType)
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{getEmploymentTypeText(employee.employmentType)}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center text-xs text-gray-500">
|
|||
|
|
<FaCalendar size={14} className="mr-1" />
|
|||
|
|
{dayjs(employee.hireDate).format("DD.MM.YYYY")}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-gray-400">
|
|||
|
|
{dayjs().diff(employee.hireDate, "year")} yıl deneyim
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<div className="text-xs font-medium text-gray-900">
|
|||
|
|
₺{employee.baseSalary.toLocaleString()}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-gray-500">
|
|||
|
|
{employee.payrollGroup}
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<span
|
|||
|
|
className={classNames(
|
|||
|
|
"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
|
|||
|
|
getEmployeeStatusColor(employee.employeeStatus)
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{getEmployeeStatusIcon(employee.employeeStatus)}
|
|||
|
|
<span className="ml-1">
|
|||
|
|
{getEmployeeStatusText(employee.employeeStatus)}
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
</td>
|
|||
|
|
|
|||
|
|
<td className="px-3 py-2 text-right">
|
|||
|
|
<div className="flex items-center justify-end space-x-2">
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleViewEmployee(employee)}
|
|||
|
|
className="p-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
|||
|
|
title="Detayları Görüntüle"
|
|||
|
|
>
|
|||
|
|
<FaEye size={16} />
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<Link
|
|||
|
|
to={`/admin/hr/employees/edit/${employee.id}`}
|
|||
|
|
className="p-1 text-gray-600 hover:text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors"
|
|||
|
|
title="Düzenle"
|
|||
|
|
>
|
|||
|
|
<FaEdit size={16} />
|
|||
|
|
</Link>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
onClick={() =>
|
|||
|
|
alert(
|
|||
|
|
"Performans değerlendirme özelliği yakında eklenecek"
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
className="p-1 text-gray-600 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
|
|||
|
|
title="Performans Değerlendirmesi"
|
|||
|
|
>
|
|||
|
|
<FaAward size={16} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{(!employees || employees.length === 0) && (
|
|||
|
|
<div className="text-center py-12">
|
|||
|
|
<FaUsers className="mx-auto h-10 w-10 text-gray-400" />
|
|||
|
|
<h3 className="mt-2 text-xs font-medium text-gray-900">
|
|||
|
|
Personel bulunamadı
|
|||
|
|
</h3>
|
|||
|
|
<p className="mt-1 text-xs text-gray-500">
|
|||
|
|
Yeni personel ekleyerek başlayın.
|
|||
|
|
</p>
|
|||
|
|
<div className="mt-6">
|
|||
|
|
<Link
|
|||
|
|
to="/admin/hr/employees/new"
|
|||
|
|
className="inline-flex items-center px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
|||
|
|
>
|
|||
|
|
<FaPlus size={16} className="mr-2" />
|
|||
|
|
Yeni Personel Ekle
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
|||
|
|
{employees?.map((employee) => (
|
|||
|
|
<div
|
|||
|
|
key={employee.id}
|
|||
|
|
className="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow p-3"
|
|||
|
|
>
|
|||
|
|
{/* Card Header */}
|
|||
|
|
<div className="flex items-start space-x-4 mb-4">
|
|||
|
|
<div className="flex-shrink-0">
|
|||
|
|
<div className="h-12 w-12 rounded-full bg-blue-500 flex items-center justify-center">
|
|||
|
|
<span className="text-lg font-medium text-white">
|
|||
|
|
{employee.firstName.charAt(0)}
|
|||
|
|
{employee.lastName.charAt(0)}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<h3 className="text-base font-semibold text-gray-900 truncate">
|
|||
|
|
{employee.fullName}
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-sm text-gray-500">{employee.code}</p>
|
|||
|
|
<span
|
|||
|
|
className={classNames(
|
|||
|
|
"inline-flex items-center px-2 py-1 rounded-full text-xs font-medium mt-1",
|
|||
|
|
getEmployeeStatusColor(employee.employeeStatus)
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{getEmployeeStatusIcon(employee.employeeStatus)}
|
|||
|
|
<span className="ml-1">
|
|||
|
|
{getEmployeeStatusText(employee.employeeStatus)}
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Card Content */}
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<div className="flex items-center text-sm text-gray-600">
|
|||
|
|
<FaBriefcase className="w-4 h-4 mr-2 text-gray-400" />
|
|||
|
|
<span>
|
|||
|
|
{employee.jobPosition?.name || "Pozisyon belirtilmemiş"}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center text-sm text-gray-600">
|
|||
|
|
<FaBuilding className="w-4 h-4 mr-2 text-gray-400" />
|
|||
|
|
<span>
|
|||
|
|
{employee.department?.name || "Departman belirtilmemiş"}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center text-sm text-gray-600">
|
|||
|
|
<FaEnvelope className="w-4 h-4 mr-2 text-gray-400" />
|
|||
|
|
<span className="truncate">{employee.email}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{employee.phone && (
|
|||
|
|
<div className="flex items-center text-sm text-gray-600">
|
|||
|
|
<FaPhone className="w-4 h-4 mr-2 text-gray-400" />
|
|||
|
|
<span>{employee.phone}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="flex items-center text-sm text-gray-600">
|
|||
|
|
<FaCalendar className="w-4 h-4 mr-2 text-gray-400" />
|
|||
|
|
<span>
|
|||
|
|
İşe Başlama: {dayjs(employee.hireDate).format("DD.MM.YYYY")}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="text-sm text-gray-600">
|
|||
|
|
<span className="font-medium">İstihdam Türü:</span>{" "}
|
|||
|
|
{employee.employmentType}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Card Actions */}
|
|||
|
|
<div className="flex justify-end space-x-1 mt-2 pt-2 border-t border-gray-100">
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleViewEmployee(employee)}
|
|||
|
|
className="p-1 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
|
|||
|
|
title="Görüntüle"
|
|||
|
|
>
|
|||
|
|
<FaEye className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
<Link
|
|||
|
|
to={`/admin/hr/employees/edit/${employee.id}`}
|
|||
|
|
className="p-1 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
|||
|
|
title="Düzenle"
|
|||
|
|
>
|
|||
|
|
<FaEdit className="w-4 h-4" />
|
|||
|
|
</Link>
|
|||
|
|
<button
|
|||
|
|
onClick={() =>
|
|||
|
|
alert("Performans değerlendirme özelliği yakında eklenecek")
|
|||
|
|
}
|
|||
|
|
className="p-1 text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
|
|||
|
|
title="Performans"
|
|||
|
|
>
|
|||
|
|
<FaAward className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{(!employees || employees.length === 0) && (
|
|||
|
|
<div className="text-center py-12">
|
|||
|
|
<FaUsers className="mx-auto h-10 w-10 text-gray-400" />
|
|||
|
|
<h3 className="mt-2 text-xs font-medium text-gray-900">
|
|||
|
|
Personel bulunamadı
|
|||
|
|
</h3>
|
|||
|
|
<p className="mt-1 text-xs text-gray-500">
|
|||
|
|
Yeni personel ekleyerek başlayın.
|
|||
|
|
</p>
|
|||
|
|
<div className="mt-6">
|
|||
|
|
<Link
|
|||
|
|
to="/admin/hr/employees/new"
|
|||
|
|
className="inline-flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
|||
|
|
>
|
|||
|
|
<FaPlus size={16} className="mr-2" />
|
|||
|
|
Yeni Personel Ekle
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Employee View Modal */}
|
|||
|
|
<EmployeeViewModal
|
|||
|
|
isOpen={isViewModalOpen}
|
|||
|
|
onClose={handleCloseViewModal}
|
|||
|
|
employee={selectedEmployee}
|
|||
|
|
onEdit={handleEditFromView}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default EmployeeList;
|