226 lines
8.1 KiB
TypeScript
226 lines
8.1 KiB
TypeScript
import React from "react";
|
||
import {
|
||
FaTimes,
|
||
FaBriefcase,
|
||
FaBuilding,
|
||
FaUsers,
|
||
FaDollarSign,
|
||
FaClock,
|
||
} from "react-icons/fa";
|
||
import { JobPositionDto } from "../../../types/hr";
|
||
import { getJobLevelColor, getJobLevelText } from "../../../utils/erp";
|
||
|
||
interface JobPositionViewModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
position: JobPositionDto | null | undefined;
|
||
}
|
||
|
||
const JobPositionViewModal: React.FC<JobPositionViewModalProps> = ({
|
||
isOpen,
|
||
onClose,
|
||
position,
|
||
}) => {
|
||
if (!isOpen || !position) return null;
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
||
<div className="flex items-center justify-between p-3 border-b">
|
||
<div className="flex items-center gap-3">
|
||
<FaBriefcase className="w-6 h-6 text-blue-600" />
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-gray-900">
|
||
{position.name}
|
||
</h2>
|
||
<p className="text-gray-600">{position.code}</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="p-1 hover:bg-gray-100 rounded-full"
|
||
>
|
||
<FaTimes className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-3 space-y-3">
|
||
{/* Status and Level */}
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<span
|
||
className={`px-2 py-1 text-xs font-medium rounded-full ${getJobLevelColor(
|
||
position.level
|
||
)}`}
|
||
>
|
||
{getJobLevelText(position.level)}
|
||
</span>
|
||
<span
|
||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||
position.isActive
|
||
? "bg-green-100 text-green-800"
|
||
: "bg-red-100 text-red-800"
|
||
}`}
|
||
>
|
||
{position.isActive ? "Aktif" : "Pasif"}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Basic Information */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="space-y-4">
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
||
Temel Bilgiler
|
||
</h3>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex items-center gap-3">
|
||
<FaBuilding className="w-4 h-4 text-gray-500" />
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-500">
|
||
Departman
|
||
</p>
|
||
<p className="text-gray-900">
|
||
{position.department?.name || "Belirtilmemiş"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<FaUsers className="w-4 h-4 text-gray-500" />
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-500">
|
||
Mevcut Personel
|
||
</p>
|
||
<p className="text-gray-900">
|
||
{position.employees?.length || 0} kişi
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-500">
|
||
Maaş Aralığı
|
||
</p>
|
||
<p className="text-gray-900">
|
||
{position.minSalary.toLocaleString()} -{" "}
|
||
{position.maxSalary.toLocaleString()}{" "}
|
||
{position.currency}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<FaClock className="w-4 h-4 text-gray-500" />
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-500">
|
||
Oluşturulma Tarihi
|
||
</p>
|
||
<p className="text-gray-900">
|
||
{position.creationTime.toLocaleDateString("tr-TR")}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
||
Açıklama
|
||
</h3>
|
||
<p className="text-gray-700 leading-relaxed">
|
||
{position.description || "Açıklama bulunmuyor."}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Skills */}
|
||
{position.requiredSkills && position.requiredSkills.length > 0 && (
|
||
<div className="text-sm">
|
||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
||
Gerekli Yetenekler
|
||
</h3>
|
||
<div className="flex flex-wrap gap-2">
|
||
{position.requiredSkills.map((skill, index) => (
|
||
<span
|
||
key={index}
|
||
className="px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded-full"
|
||
>
|
||
{skill}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Responsibilities */}
|
||
{position.responsibilities &&
|
||
position.responsibilities.length > 0 && (
|
||
<div className="text-sm">
|
||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
||
Sorumluluklar
|
||
</h3>
|
||
<div className="space-y-2">
|
||
{position.responsibilities.map((responsibility, index) => (
|
||
<div key={index} className="flex items-start gap-2">
|
||
<div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0" />
|
||
<p className="text-gray-700">{responsibility}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Qualifications */}
|
||
{position.qualifications && position.qualifications.length > 0 && (
|
||
<div className="text-sm">
|
||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
||
Nitelikler
|
||
</h3>
|
||
<div className="space-y-2">
|
||
{position.qualifications.map((qualification, index) => (
|
||
<div key={index} className="flex items-start gap-2">
|
||
<div className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0" />
|
||
<p className="text-gray-700">{qualification}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Employees in this position */}
|
||
{position.employees && position.employees.length > 0 && (
|
||
<div className="text-sm">
|
||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
||
Bu Pozisyondaki Personeller
|
||
</h3>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
|
||
{position.employees.map((employee, index) => (
|
||
<div key={index} className="p-1.5 bg-gray-50 rounded-md">
|
||
<p className="font-medium text-gray-900">
|
||
{employee.fullName}
|
||
</p>
|
||
<p className="text-sm text-gray-500">{employee.email}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="p-3 border-t bg-gray-50">
|
||
<button
|
||
onClick={onClose}
|
||
className="w-full sm:w-auto px-3 py-1.5 text-xs bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
|
||
>
|
||
Kapat
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default JobPositionViewModal;
|