182 lines
7 KiB
TypeScript
182 lines
7 KiB
TypeScript
import React, { useState } from 'react'
|
||
import {
|
||
FaUser,
|
||
FaEnvelope,
|
||
FaPhone,
|
||
FaCalendar,
|
||
FaCertificate,
|
||
FaEdit,
|
||
FaEye,
|
||
FaTrash,
|
||
FaPlus,
|
||
} from 'react-icons/fa'
|
||
import { EmployeeDto, EmployeeStatusEnum } from '../../../types/hr'
|
||
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||
import { getEmployeeStatusColor, getEmployeeStatusText } from '../../../utils/erp'
|
||
import { Container } from '@/components/shared'
|
||
|
||
const EmployeeCards: React.FC = () => {
|
||
const [employees] = useState<EmployeeDto[]>(mockEmployees)
|
||
const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
|
||
const [selectedStatus, setSelectedStatus] = useState<string>('all')
|
||
|
||
const handleEdit = (employee: EmployeeDto) => {
|
||
console.log('Edit employee:', employee)
|
||
// Implement edit functionality
|
||
}
|
||
|
||
const handleView = (employee: EmployeeDto) => {
|
||
console.log('View employee:', employee)
|
||
// Implement view functionality
|
||
}
|
||
|
||
const handleDelete = (id: string) => {
|
||
console.log('Delete employee:', id)
|
||
// Implement delete functionality
|
||
}
|
||
|
||
const handleAdd = () => {
|
||
console.log('Add new employee')
|
||
// Implement add functionality
|
||
}
|
||
|
||
const filteredEmployees = employees.filter((employee) => {
|
||
if (selectedDepartment !== 'all' && employee.department?.id !== selectedDepartment) {
|
||
return false
|
||
}
|
||
if (selectedStatus !== 'all' && employee.employeeStatus !== selectedStatus) {
|
||
return false
|
||
}
|
||
return true
|
||
})
|
||
|
||
return (
|
||
<Container>
|
||
<div className="space-y-2">
|
||
{/* Header with Add Button */}
|
||
<div className="flex justify-between items-center">
|
||
<h2 className="text-xl font-bold text-gray-900">Personel Kartları</h2>
|
||
<button
|
||
onClick={handleAdd}
|
||
className="px-2 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2"
|
||
>
|
||
<FaPlus className="w-4 h-4" />
|
||
Yeni Personel
|
||
</button>
|
||
</div>
|
||
|
||
{/* Filters */}
|
||
<div className="flex gap-3 mb-4">
|
||
<select
|
||
value={selectedDepartment}
|
||
onChange={(e) => setSelectedDepartment(e.target.value)}
|
||
className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
<option value="all">Tüm Departmanlar</option>
|
||
{/* Department options would be populated from departments list */}
|
||
</select>
|
||
|
||
<select
|
||
value={selectedStatus}
|
||
onChange={(e) => setSelectedStatus(e.target.value)}
|
||
className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
<option value="all">Tüm Durumlar</option>
|
||
{Object.values(EmployeeStatusEnum).map((status) => (
|
||
<option key={status} value={status}>
|
||
{getEmployeeStatusText(status)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Employee Cards Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||
{filteredEmployees.map((employee) => (
|
||
<div
|
||
key={employee.id}
|
||
className="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow border"
|
||
>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
||
<FaUser className="w-6 h-6 text-blue-600" />
|
||
</div>
|
||
<span
|
||
className={`px-2 py-1 text-xs font-medium rounded-full ${getEmployeeStatusColor(
|
||
employee.employeeStatus,
|
||
)}`}
|
||
>
|
||
{getEmployeeStatusText(employee.employeeStatus)}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Employee Info */}
|
||
<div className="space-y-1 mb-3">
|
||
<h3 className="font-semibold text-sm text-gray-900">{employee.fullName}</h3>
|
||
<p className="text-xs text-gray-600">{employee.jobPosition?.name}</p>
|
||
<p className="text-sm text-gray-500">{employee.department?.name}</p>
|
||
</div>
|
||
|
||
{/* Contact Info */}
|
||
<div className="space-y-1.5 mb-3">
|
||
<div className="flex items-center text-xs text-gray-600">
|
||
<FaEnvelope className="w-4 h-4 mr-2" />
|
||
<span className="truncate">{employee.email}</span>
|
||
</div>
|
||
{employee.phone && (
|
||
<div className="flex items-center text-xs text-gray-600">
|
||
<FaPhone className="w-4 h-4 mr-2" />
|
||
<span>{employee.phone}</span>
|
||
</div>
|
||
)}
|
||
<div className="flex items-center text-xs text-gray-600">
|
||
<FaCalendar className="w-4 h-4 mr-2" />
|
||
<span>{new Date(employee.hireDate).toLocaleDateString('tr-TR')}</span>
|
||
</div>
|
||
<div className="flex items-center text-xs text-gray-600">
|
||
<FaCertificate className="w-4 h-4 mr-2" />
|
||
<span>{employee.code}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="flex gap-2 pt-3 border-t">
|
||
<button
|
||
onClick={() => handleView(employee)}
|
||
className="flex-1 px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors flex items-center justify-center gap-1"
|
||
>
|
||
<FaEye className="w-4 h-4" />
|
||
Görüntüle
|
||
</button>
|
||
<button
|
||
onClick={() => handleEdit(employee)}
|
||
className="flex-1 px-2 py-1 text-xs bg-green-50 text-green-600 rounded-md hover:bg-green-100 transition-colors flex items-center justify-center gap-1"
|
||
>
|
||
<FaEdit className="w-4 h-4" />
|
||
Düzenle
|
||
</button>
|
||
<button
|
||
onClick={() => handleDelete(employee.id)}
|
||
className="px-2 py-1 text-xs bg-red-50 text-red-600 rounded-md hover:bg-red-100 transition-colors flex items-center justify-center"
|
||
>
|
||
<FaTrash className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{filteredEmployees.length === 0 && (
|
||
<div className="text-center py-12">
|
||
<FaUser className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||
<h3 className="text-base font-medium text-gray-900 mb-2">Personel bulunamadı</h3>
|
||
<p className="text-gray-500">Seçilen kriterlere uygun personel bulunmamaktadır.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export default EmployeeCards
|