272 lines
10 KiB
TypeScript
272 lines
10 KiB
TypeScript
import React from "react";
|
||
import {
|
||
FaTimes,
|
||
FaBuilding,
|
||
FaUser,
|
||
FaDollarSign,
|
||
FaUsers,
|
||
FaCalendar,
|
||
FaEdit,
|
||
} from "react-icons/fa";
|
||
import { HrDepartment } from "../../../types/hr";
|
||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
||
|
||
interface DepartmentViewModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
department: HrDepartment | null;
|
||
onEdit?: (department: HrDepartment) => void;
|
||
}
|
||
|
||
const DepartmentViewModal: React.FC<DepartmentViewModalProps> = ({
|
||
isOpen,
|
||
onClose,
|
||
department,
|
||
onEdit,
|
||
}) => {
|
||
const employeeCount = mockEmployees.filter(
|
||
(emp) => emp.departmantId === department?.id
|
||
).length;
|
||
const departmentEmployees = mockEmployees.filter(
|
||
(emp) => emp.departmantId === department?.id
|
||
);
|
||
|
||
return (
|
||
isOpen &&
|
||
department && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-lg p-4 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-base font-bold text-gray-900">
|
||
Departman Detayları
|
||
</h2>
|
||
<div className="flex items-center gap-2">
|
||
{onEdit && (
|
||
<button
|
||
onClick={() => onEdit(department)}
|
||
className="flex items-center gap-1 px-2 py-1 text-xs text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors"
|
||
>
|
||
<FaEdit className="w-4 h-4" />
|
||
Düzenle
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={onClose}
|
||
className="p-2 text-gray-400 hover:text-gray-600"
|
||
>
|
||
<FaTimes className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
{/* Temel Bilgiler */}
|
||
<div className="bg-gray-50 rounded-lg p-3">
|
||
<h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
||
<FaBuilding className="w-5 h-5" />
|
||
Temel Bilgiler
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Departman Kodu
|
||
</label>
|
||
<p className="text-sm font-semibold text-gray-900">
|
||
{department.code}
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Departman Adı
|
||
</label>
|
||
<p className="text-sm font-semibold text-gray-900">
|
||
{department.name}
|
||
</p>
|
||
</div>
|
||
{department.description && (
|
||
<div className="md:col-span-2">
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Açıklama
|
||
</label>
|
||
<p className="text-sm text-gray-900 mt-1">
|
||
{department.description}
|
||
</p>
|
||
</div>
|
||
)}
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Durum
|
||
</label>
|
||
<span
|
||
className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
|
||
department.isActive
|
||
? "bg-green-100 text-green-800"
|
||
: "bg-red-100 text-red-800"
|
||
}`}
|
||
>
|
||
{department.isActive ? "Aktif" : "Pasif"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Hiyerarşi ve İlişkiler */}
|
||
<div className="bg-blue-50 rounded-lg p-3">
|
||
<h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
||
<FaUser className="w-5 h-5" />
|
||
Hiyerarşi ve İlişkiler
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Üst Departman
|
||
</label>
|
||
<p className="text-gray-900 mt-1">
|
||
{department.parentDepartment?.name || "Ana Departman"}
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Departman Yöneticisi
|
||
</label>
|
||
<p className="text-gray-900 mt-1">
|
||
{department.manager?.fullName || "Atanmamış"}
|
||
</p>
|
||
{department.manager && (
|
||
<p className="text-sm text-gray-500">
|
||
{department.manager.code}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Maliyet Merkezi
|
||
</label>
|
||
<p className="text-gray-900 mt-1">
|
||
{department.costCenter?.name || "Atanmamış"}
|
||
</p>
|
||
{department.costCenter && (
|
||
<p className="text-sm text-gray-500">
|
||
{department.costCenter.code}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Finansal Bilgiler */}
|
||
<div className="bg-green-50 rounded-lg p-3">
|
||
<h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
||
<FaDollarSign className="w-5 h-5" />
|
||
Finansal Bilgiler
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Departman Bütçesi
|
||
</label>
|
||
<p className="text-sm font-semibold text-gray-900">
|
||
{department.budget
|
||
? `₺${department.budget.toLocaleString()}`
|
||
: "Belirtilmemiş"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Personel Bilgileri */}
|
||
<div className="bg-purple-50 rounded-lg p-3">
|
||
<h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
||
<FaUsers className="w-5 h-5" />
|
||
Personel Bilgileri
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Toplam Personel Sayısı
|
||
</label>
|
||
<p className="text-lg font-bold text-gray-900">
|
||
{employeeCount}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{departmentEmployees.length > 0 && (
|
||
<div className="mt-3">
|
||
<label className="block text-sm font-medium text-gray-600 mb-2">
|
||
Departman Personeli
|
||
</label>
|
||
<div className="max-h-32 overflow-y-auto">
|
||
<div className="space-y-1">
|
||
{departmentEmployees.map((employee) => (
|
||
<div
|
||
key={employee.id}
|
||
className="flex items-center justify-between p-1.5 bg-white rounded border"
|
||
>
|
||
<div>
|
||
<p className="font-medium text-gray-900">
|
||
{employee.fullName}
|
||
</p>
|
||
<p className="text-sm text-gray-500">
|
||
{employee.code}
|
||
</p>
|
||
</div>
|
||
<div className="text-sm text-gray-600">
|
||
{employee.jobPosition?.name ||
|
||
"Pozisyon belirtilmemiş"}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Sistem Bilgileri */}
|
||
<div className="bg-gray-50 rounded-lg p-3">
|
||
<h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
||
<FaCalendar className="w-5 h-5" />
|
||
Sistem Bilgileri
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Oluşturulma Tarihi
|
||
</label>
|
||
<p className="text-gray-900">
|
||
{new Date(department.creationTime).toLocaleDateString(
|
||
"tr-TR"
|
||
)}
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Son Güncelleme
|
||
</label>
|
||
<p className="text-gray-900">
|
||
{new Date(
|
||
department.lastModificationTime
|
||
).toLocaleDateString("tr-TR")}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Close Button */}
|
||
<div className="flex justify-end pt-3 border-t mt-3">
|
||
<button
|
||
onClick={onClose}
|
||
className="px-3 py-1 text-sm text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors"
|
||
>
|
||
Kapat
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
);
|
||
};
|
||
|
||
export default DepartmentViewModal;
|