IK Management Container
This commit is contained in:
Sedat Öztürk
parent
4e5322ba0c
commit
0cb87b8295
16 changed files with 5683 additions and 7071 deletions
|
|
@ -1,64 +1,55 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import { FaAward, FaPlus, FaEdit, FaTrash, FaUsers } from "react-icons/fa";
|
import { FaAward, FaPlus, FaEdit, FaTrash, FaUsers } from 'react-icons/fa'
|
||||||
import { HrBadge, HrEmployeeBadge } from "../../../types/hr";
|
import { HrBadge, HrEmployeeBadge } from '../../../types/hr'
|
||||||
import DataTable, { Column } from "../../../components/common/DataTable";
|
import DataTable, { Column } from '../../../components/common/DataTable'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
import { mockBadges } from "../../../mocks/mockBadges";
|
import { mockBadges } from '../../../mocks/mockBadges'
|
||||||
import BadgeEditModal from "./BadgeEditModal";
|
import BadgeEditModal from './BadgeEditModal'
|
||||||
import BadgeAssignmentModal, {
|
import BadgeAssignmentModal, { BadgeAssignmentFormData } from './BadgeAssignmentModal'
|
||||||
BadgeAssignmentFormData,
|
import Widget from '../../../components/common/Widget'
|
||||||
} from "./BadgeAssignmentModal";
|
import { getIconComponent } from '../../../utils/erp'
|
||||||
import Widget from "../../../components/common/Widget";
|
import { Container } from '@/components/shared'
|
||||||
import { getIconComponent } from "../../../utils/erp";
|
|
||||||
|
|
||||||
const BadgeManagement: React.FC = () => {
|
const BadgeManagement: React.FC = () => {
|
||||||
const [activeTab, setActiveTab] = useState<"badges" | "assignments">(
|
const [activeTab, setActiveTab] = useState<'badges' | 'assignments'>('badges')
|
||||||
"badges"
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
);
|
const [searchAssignTerm, setSearchAssignTerm] = useState('')
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
|
||||||
const [searchAssignTerm, setSearchAssignTerm] = useState("");
|
|
||||||
|
|
||||||
// Modal states
|
// Modal states
|
||||||
const [isBadgeModalOpen, setIsBadgeModalOpen] = useState(false);
|
const [isBadgeModalOpen, setIsBadgeModalOpen] = useState(false)
|
||||||
const [isAssignmentModalOpen, setIsAssignmentModalOpen] = useState(false);
|
const [isAssignmentModalOpen, setIsAssignmentModalOpen] = useState(false)
|
||||||
const [editingBadge, setEditingBadge] = useState<HrBadge | null>(null);
|
const [editingBadge, setEditingBadge] = useState<HrBadge | null>(null)
|
||||||
|
|
||||||
// Mock data - In real app, this would come from API
|
// Mock data - In real app, this would come from API
|
||||||
const [badges, setBadges] = useState(mockBadges);
|
const [badges, setBadges] = useState(mockBadges)
|
||||||
const [employeeBadges, setEmployeeBadges] = useState<HrEmployeeBadge[]>([]);
|
const [employeeBadges, setEmployeeBadges] = useState<HrEmployeeBadge[]>([])
|
||||||
|
|
||||||
// Handlers
|
// Handlers
|
||||||
const handleAddBadge = () => {
|
const handleAddBadge = () => {
|
||||||
setEditingBadge(null);
|
setEditingBadge(null)
|
||||||
setIsBadgeModalOpen(true);
|
setIsBadgeModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEditBadge = (badge: HrBadge) => {
|
const handleEditBadge = (badge: HrBadge) => {
|
||||||
setEditingBadge(badge);
|
setEditingBadge(badge)
|
||||||
setIsBadgeModalOpen(true);
|
setIsBadgeModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDeleteBadge = (id: string) => {
|
const handleDeleteBadge = (id: string) => {
|
||||||
if (window.confirm("Bu rozeti silmek istediğinizden emin misiniz?")) {
|
if (window.confirm('Bu rozeti silmek istediğinizden emin misiniz?')) {
|
||||||
setBadges(badges.filter((badge) => badge.id !== id));
|
setBadges(badges.filter((badge) => badge.id !== id))
|
||||||
alert("Rozet başarıyla silindi!");
|
alert('Rozet başarıyla silindi!')
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleRevokeBadge = (employeeBadgeId: string) => {
|
const handleRevokeBadge = (employeeBadgeId: string) => {
|
||||||
if (
|
if (window.confirm('Bu rozet atamasını iptal etmek istediğinizden emin misiniz?')) {
|
||||||
window.confirm(
|
|
||||||
"Bu rozet atamasını iptal etmek istediğinizden emin misiniz?"
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
setEmployeeBadges((prev) =>
|
setEmployeeBadges((prev) =>
|
||||||
prev.map((eb) =>
|
prev.map((eb) => (eb.id === employeeBadgeId ? { ...eb, isActive: false } : eb)),
|
||||||
eb.id === employeeBadgeId ? { ...eb, isActive: false } : eb
|
)
|
||||||
)
|
alert('Rozet ataması iptal edildi!')
|
||||||
);
|
|
||||||
alert("Rozet ataması iptal edildi!");
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleBadgeSubmit = (badgeData: HrBadge) => {
|
const handleBadgeSubmit = (badgeData: HrBadge) => {
|
||||||
if (editingBadge) {
|
if (editingBadge) {
|
||||||
|
|
@ -71,29 +62,27 @@ const BadgeManagement: React.FC = () => {
|
||||||
...badgeData,
|
...badgeData,
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
}
|
}
|
||||||
: badge
|
: badge,
|
||||||
)
|
),
|
||||||
);
|
)
|
||||||
alert("Rozet başarıyla güncellendi!");
|
alert('Rozet başarıyla güncellendi!')
|
||||||
} else {
|
} else {
|
||||||
// Create new badge
|
// Create new badge
|
||||||
const newBadge: HrBadge = {
|
const newBadge: HrBadge = {
|
||||||
...badgeData,
|
...badgeData,
|
||||||
creationTime: new Date(),
|
creationTime: new Date(),
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
};
|
}
|
||||||
setBadges((prev) => [...prev, newBadge]);
|
setBadges((prev) => [...prev, newBadge])
|
||||||
alert("Yeni rozet başarıyla oluşturuldu!");
|
alert('Yeni rozet başarıyla oluşturuldu!')
|
||||||
}
|
}
|
||||||
setIsBadgeModalOpen(false);
|
setIsBadgeModalOpen(false)
|
||||||
setEditingBadge(null);
|
setEditingBadge(null)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleAssignmentSubmit = (assignmentData: BadgeAssignmentFormData) => {
|
const handleAssignmentSubmit = (assignmentData: BadgeAssignmentFormData) => {
|
||||||
const employee = mockEmployees.find(
|
const employee = mockEmployees.find((emp) => emp.id === assignmentData.employeeId)
|
||||||
(emp) => emp.id === assignmentData.employeeId
|
const badge = badges.find((b) => b.id === assignmentData.badgeId)
|
||||||
);
|
|
||||||
const badge = badges.find((b) => b.id === assignmentData.badgeId);
|
|
||||||
|
|
||||||
if (employee && badge) {
|
if (employee && badge) {
|
||||||
const newAssignment: HrEmployeeBadge = {
|
const newAssignment: HrEmployeeBadge = {
|
||||||
|
|
@ -103,42 +92,40 @@ const BadgeManagement: React.FC = () => {
|
||||||
badgeId: assignmentData.badgeId,
|
badgeId: assignmentData.badgeId,
|
||||||
badge: badge,
|
badge: badge,
|
||||||
earnedDate: new Date(assignmentData.earnedDate),
|
earnedDate: new Date(assignmentData.earnedDate),
|
||||||
expiryDate: assignmentData.expiryDate
|
expiryDate: assignmentData.expiryDate ? new Date(assignmentData.expiryDate) : undefined,
|
||||||
? new Date(assignmentData.expiryDate)
|
|
||||||
: undefined,
|
|
||||||
reason: assignmentData.reason,
|
reason: assignmentData.reason,
|
||||||
notes: assignmentData.notes,
|
notes: assignmentData.notes,
|
||||||
isActive: true,
|
isActive: true,
|
||||||
creationTime: new Date(),
|
creationTime: new Date(),
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
};
|
}
|
||||||
|
|
||||||
setEmployeeBadges((prev) => [...prev, newAssignment]);
|
setEmployeeBadges((prev) => [...prev, newAssignment])
|
||||||
alert("Rozet başarıyla atandı!");
|
alert('Rozet başarıyla atandı!')
|
||||||
}
|
}
|
||||||
setIsAssignmentModalOpen(false);
|
setIsAssignmentModalOpen(false)
|
||||||
};
|
}
|
||||||
|
|
||||||
const openAssignmentModal = () => {
|
const openAssignmentModal = () => {
|
||||||
setIsAssignmentModalOpen(true);
|
setIsAssignmentModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const filteredBadges = badges.filter(
|
const filteredBadges = badges.filter(
|
||||||
(badge) =>
|
(badge) =>
|
||||||
badge.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
badge.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
badge.description.toLowerCase().includes(searchTerm.toLowerCase())
|
badge.description.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||||
);
|
)
|
||||||
|
|
||||||
const filteredEmployeeBadges = employeeBadges.filter((eb) =>
|
const filteredEmployeeBadges = employeeBadges.filter((eb) =>
|
||||||
eb.employee?.fullName.toLowerCase().includes(searchAssignTerm.toLowerCase())
|
eb.employee?.fullName.toLowerCase().includes(searchAssignTerm.toLowerCase()),
|
||||||
);
|
)
|
||||||
|
|
||||||
const badgeColumns: Column<HrBadge>[] = [
|
const badgeColumns: Column<HrBadge>[] = [
|
||||||
{
|
{
|
||||||
key: "icon",
|
key: 'icon',
|
||||||
header: "Simge",
|
header: 'Simge',
|
||||||
render: (badge: HrBadge) => {
|
render: (badge: HrBadge) => {
|
||||||
const IconComponent = getIconComponent(badge.icon);
|
const IconComponent = getIconComponent(badge.icon)
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`w-7 h-7 rounded-full flex items-center justify-center`}
|
className={`w-7 h-7 rounded-full flex items-center justify-center`}
|
||||||
|
|
@ -146,64 +133,56 @@ const BadgeManagement: React.FC = () => {
|
||||||
>
|
>
|
||||||
<IconComponent className="w-3.5 h-3.5 text-white" />
|
<IconComponent className="w-3.5 h-3.5 text-white" />
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "name",
|
key: 'name',
|
||||||
header: "Rozet Adı",
|
header: 'Rozet Adı',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (badge: HrBadge) => (
|
render: (badge: HrBadge) => (
|
||||||
<div>
|
<div>
|
||||||
<div className="font-medium text-gray-900">{badge.name}</div>
|
<div className="font-medium text-gray-900">{badge.name}</div>
|
||||||
<div className="text-sm text-gray-500 truncate max-w-xs">
|
<div className="text-sm text-gray-500 truncate max-w-xs">{badge.description}</div>
|
||||||
{badge.description}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "criteria",
|
key: 'criteria',
|
||||||
header: "Kazanma Kriteri",
|
header: 'Kazanma Kriteri',
|
||||||
render: (badge: HrBadge) => (
|
render: (badge: HrBadge) => (
|
||||||
<div className="text-sm text-gray-600 max-w-xs truncate">
|
<div className="text-sm text-gray-600 max-w-xs truncate">{badge.criteria}</div>
|
||||||
{badge.criteria}
|
|
||||||
</div>
|
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "assignedCount",
|
key: 'assignedCount',
|
||||||
header: "Atanan Sayısı",
|
header: 'Atanan Sayısı',
|
||||||
render: (badge: HrBadge) => {
|
render: (badge: HrBadge) => {
|
||||||
const count = employeeBadges.filter(
|
const count = employeeBadges.filter((eb) => eb.badgeId === badge.id && eb.isActive).length
|
||||||
(eb) => eb.badgeId === badge.id && eb.isActive
|
|
||||||
).length;
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaUsers className="w-4 h-4 text-gray-500" />
|
<FaUsers className="w-4 h-4 text-gray-500" />
|
||||||
<span>{count}</span>
|
<span>{count}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "status",
|
key: 'status',
|
||||||
header: "Durum",
|
header: 'Durum',
|
||||||
render: (badge: HrBadge) => (
|
render: (badge: HrBadge) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
||||||
badge.isActive
|
badge.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{badge.isActive ? "Aktif" : "Pasif"}
|
{badge.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actions",
|
key: 'actions',
|
||||||
header: "İşlemler",
|
header: 'İşlemler',
|
||||||
render: (badge: HrBadge) => (
|
render: (badge: HrBadge) => (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -223,30 +202,24 @@ const BadgeManagement: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
const assignmentColumns: Column<HrEmployeeBadge>[] = [
|
const assignmentColumns: Column<HrEmployeeBadge>[] = [
|
||||||
{
|
{
|
||||||
key: "employee",
|
key: 'employee',
|
||||||
header: "Personel",
|
header: 'Personel',
|
||||||
render: (assignment: HrEmployeeBadge) => (
|
render: (assignment: HrEmployeeBadge) => (
|
||||||
<div>
|
<div>
|
||||||
<div className="font-medium text-gray-900">
|
<div className="font-medium text-gray-900">{assignment.employee?.fullName}</div>
|
||||||
{assignment.employee?.fullName}
|
<div className="text-sm text-gray-500">{assignment.employee?.code}</div>
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-500">
|
|
||||||
{assignment.employee?.code}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "badge",
|
key: 'badge',
|
||||||
header: "Rozet",
|
header: 'Rozet',
|
||||||
render: (assignment: HrEmployeeBadge) => {
|
render: (assignment: HrEmployeeBadge) => {
|
||||||
const IconComponent = getIconComponent(
|
const IconComponent = getIconComponent(assignment.badge?.icon || 'award')
|
||||||
assignment.badge?.icon || "award"
|
|
||||||
);
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div
|
<div
|
||||||
|
|
@ -257,51 +230,46 @@ const BadgeManagement: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
<span>{assignment.badge?.name}</span>
|
<span>{assignment.badge?.name}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "earnedDate",
|
key: 'earnedDate',
|
||||||
header: "Kazanıldığı Tarih",
|
header: 'Kazanıldığı Tarih',
|
||||||
render: (assignment: HrEmployeeBadge) =>
|
render: (assignment: HrEmployeeBadge) =>
|
||||||
new Date(assignment.earnedDate).toLocaleDateString("tr-TR"),
|
new Date(assignment.earnedDate).toLocaleDateString('tr-TR'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "expiryDate",
|
key: 'expiryDate',
|
||||||
header: "Geçerlilik Süresi",
|
header: 'Geçerlilik Süresi',
|
||||||
render: (assignment: HrEmployeeBadge) =>
|
render: (assignment: HrEmployeeBadge) =>
|
||||||
assignment.expiryDate
|
assignment.expiryDate
|
||||||
? new Date(assignment.expiryDate).toLocaleDateString("tr-TR")
|
? new Date(assignment.expiryDate).toLocaleDateString('tr-TR')
|
||||||
: "Süresiz",
|
: 'Süresiz',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "status",
|
key: 'status',
|
||||||
header: "Durum",
|
header: 'Durum',
|
||||||
render: (assignment: HrEmployeeBadge) => {
|
render: (assignment: HrEmployeeBadge) => {
|
||||||
const isExpired =
|
const isExpired = assignment.expiryDate && new Date(assignment.expiryDate) < new Date()
|
||||||
assignment.expiryDate && new Date(assignment.expiryDate) < new Date();
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
||||||
!assignment.isActive
|
!assignment.isActive
|
||||||
? "bg-red-100 text-red-800"
|
? 'bg-red-100 text-red-800'
|
||||||
: isExpired
|
: isExpired
|
||||||
? "bg-yellow-100 text-yellow-800"
|
? 'bg-yellow-100 text-yellow-800'
|
||||||
: "bg-green-100 text-green-800"
|
: 'bg-green-100 text-green-800'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{!assignment.isActive
|
{!assignment.isActive ? 'İptal Edildi' : isExpired ? 'Süresi Dolmuş' : 'Aktif'}
|
||||||
? "İptal Edildi"
|
|
||||||
: isExpired
|
|
||||||
? "Süresi Dolmuş"
|
|
||||||
: "Aktif"}
|
|
||||||
</span>
|
</span>
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actions",
|
key: 'actions',
|
||||||
header: "İşlemler",
|
header: 'İşlemler',
|
||||||
render: (assignment: HrEmployeeBadge) => (
|
render: (assignment: HrEmployeeBadge) => (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
{assignment.isActive && (
|
{assignment.isActive && (
|
||||||
|
|
@ -316,156 +284,145 @@ const BadgeManagement: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-2">
|
||||||
<div className="flex items-center justify-between mb-2">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex items-center justify-between mb-2">
|
||||||
<h2 className="text-lg font-bold text-gray-900">Rozet Yönetimi</h2>
|
<div>
|
||||||
<p className="text-sm text-gray-600">
|
<h2 className="text-lg font-bold text-gray-900">Rozet Yönetimi</h2>
|
||||||
Personel başarı rozetleri ve ödüllendirme sistemi
|
<p className="text-sm text-gray-600">
|
||||||
</p>
|
Personel başarı rozetleri ve ödüllendirme sistemi
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Cards */}
|
{/* Stats Cards */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||||
<Widget
|
<Widget title="Toplam Rozet" value={badges.length} color="blue" icon="FaAward" />
|
||||||
title="Toplam Rozet"
|
|
||||||
value={badges.length}
|
|
||||||
color="blue"
|
|
||||||
icon="FaAward"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Aktif Rozet"
|
title="Aktif Rozet"
|
||||||
value={badges.filter((b) => b.isActive).length}
|
value={badges.filter((b) => b.isActive).length}
|
||||||
color="yellow"
|
color="yellow"
|
||||||
icon="FaTrophy"
|
icon="FaTrophy"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Atama"
|
title="Toplam Atama"
|
||||||
value={filteredEmployeeBadges.length}
|
value={filteredEmployeeBadges.length}
|
||||||
color="green"
|
color="green"
|
||||||
icon="FaUsers"
|
icon="FaUsers"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Rozetli Personel"
|
title="Rozetli Personel"
|
||||||
value={
|
value={new Set(filteredEmployeeBadges.map((ab) => ab.employeeId)).size}
|
||||||
new Set(filteredEmployeeBadges.map((ab) => ab.employeeId)).size
|
color="purple"
|
||||||
}
|
icon="FaStar"
|
||||||
color="purple"
|
/>
|
||||||
icon="FaStar"
|
</div>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tabs */}
|
|
||||||
<div className="border-b border-gray-200">
|
|
||||||
<nav className="-mb-px flex space-x-8">
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab("badges")}
|
|
||||||
className={`py-2 px-1 border-b-2 font-medium text-sm ${
|
|
||||||
activeTab === "badges"
|
|
||||||
? "border-blue-500 text-blue-600"
|
|
||||||
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Rozetler
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab("assignments")}
|
|
||||||
className={`py-2 px-1 border-b-2 font-medium text-sm ${
|
|
||||||
activeTab === "assignments"
|
|
||||||
? "border-blue-500 text-blue-600"
|
|
||||||
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Rozet Atamaları
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tab Content */}
|
|
||||||
{activeTab === "badges" && (
|
|
||||||
<div className="space-y-3 pt-2">
|
|
||||||
{/* Search */}
|
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Rozet adı veya açıklama ara..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
/>
|
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="border-b border-gray-200">
|
||||||
|
<nav className="-mb-px flex space-x-8">
|
||||||
<button
|
<button
|
||||||
onClick={handleAddBadge}
|
onClick={() => setActiveTab('badges')}
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
className={`py-2 px-1 border-b-2 font-medium text-sm ${
|
||||||
|
activeTab === 'badges'
|
||||||
|
? 'border-blue-500 text-blue-600'
|
||||||
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<FaPlus className="w-4 h-4" />
|
Rozetler
|
||||||
<span className="whitespace-nowrap">Yeni Rozet</span>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
<button
|
||||||
|
onClick={() => setActiveTab('assignments')}
|
||||||
{/* Badges Table */}
|
className={`py-2 px-1 border-b-2 font-medium text-sm ${
|
||||||
<div className="bg-white rounded-lg shadow-sm border">
|
activeTab === 'assignments'
|
||||||
<DataTable data={filteredBadges} columns={badgeColumns} />
|
? 'border-blue-500 text-blue-600'
|
||||||
</div>
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Rozet Atamaları
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "assignments" && (
|
{/* Tab Content */}
|
||||||
<div className="space-y-3 pt-2">
|
{activeTab === 'badges' && (
|
||||||
<div className="bg-white p-3 rounded-lg shadow-sm border">
|
<div className="space-y-3 pt-2">
|
||||||
|
{/* Search */}
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Rozet adı veya açıklama ara..."
|
placeholder="Rozet adı veya açıklama ara..."
|
||||||
value={searchAssignTerm}
|
value={searchTerm}
|
||||||
onChange={(e) => setSearchAssignTerm(e.target.value)}
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className="px-3 py-1 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
|
onClick={handleAddBadge}
|
||||||
onClick={openAssignmentModal}
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
>
|
>
|
||||||
<span className="whitespace-nowrap">Rozet Ata</span>
|
<FaPlus className="w-4 h-4" />
|
||||||
|
<span className="whitespace-nowrap">Yeni Rozet</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Assignments Table */}
|
{/* Badges Table */}
|
||||||
<div className="bg-white rounded-lg shadow-sm border">
|
<div className="bg-white rounded-lg shadow-sm border">
|
||||||
<DataTable
|
<DataTable data={filteredBadges} columns={badgeColumns} />
|
||||||
data={filteredEmployeeBadges}
|
</div>
|
||||||
columns={assignmentColumns}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
{(activeTab === "badges" ? filteredBadges : filteredEmployeeBadges)
|
{activeTab === 'assignments' && (
|
||||||
.length === 0 && (
|
<div className="space-y-3 pt-2">
|
||||||
<div className="text-center py-12">
|
<div className="bg-white p-3 rounded-lg shadow-sm border">
|
||||||
<FaAward className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
<input
|
||||||
{activeTab === "badges"
|
type="text"
|
||||||
? "Rozet bulunamadı"
|
placeholder="Rozet adı veya açıklama ara..."
|
||||||
: "Rozet ataması bulunamadı"}
|
value={searchAssignTerm}
|
||||||
</h3>
|
onChange={(e) => setSearchAssignTerm(e.target.value)}
|
||||||
<p className="text-gray-500">
|
className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
{activeTab === "badges"
|
/>
|
||||||
? "Henüz rozet tanımlanmamış."
|
|
||||||
: "Henüz rozet ataması yapılmamış."}
|
<button
|
||||||
</p>
|
className="px-3 py-1 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
|
||||||
</div>
|
onClick={openAssignmentModal}
|
||||||
)}
|
>
|
||||||
|
<span className="whitespace-nowrap">Rozet Ata</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Assignments Table */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border">
|
||||||
|
<DataTable data={filteredEmployeeBadges} columns={assignmentColumns} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(activeTab === 'badges' ? filteredBadges : filteredEmployeeBadges).length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<FaAward className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||||||
|
<h3 className="text-base font-medium text-gray-900 mb-2">
|
||||||
|
{activeTab === 'badges' ? 'Rozet bulunamadı' : 'Rozet ataması bulunamadı'}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
{activeTab === 'badges'
|
||||||
|
? 'Henüz rozet tanımlanmamış.'
|
||||||
|
: 'Henüz rozet ataması yapılmamış.'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Badge Edit Modal */}
|
{/* Badge Edit Modal */}
|
||||||
<BadgeEditModal
|
<BadgeEditModal
|
||||||
|
|
@ -473,7 +430,7 @@ const BadgeManagement: React.FC = () => {
|
||||||
onClose={() => setIsBadgeModalOpen(false)}
|
onClose={() => setIsBadgeModalOpen(false)}
|
||||||
badge={editingBadge}
|
badge={editingBadge}
|
||||||
onSubmit={handleBadgeSubmit}
|
onSubmit={handleBadgeSubmit}
|
||||||
mode={editingBadge ? "edit" : "create"}
|
mode={editingBadge ? 'edit' : 'create'}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Badge Assignment Modal */}
|
{/* Badge Assignment Modal */}
|
||||||
|
|
@ -482,8 +439,8 @@ const BadgeManagement: React.FC = () => {
|
||||||
onClose={() => setIsAssignmentModalOpen(false)}
|
onClose={() => setIsAssignmentModalOpen(false)}
|
||||||
onSubmit={handleAssignmentSubmit}
|
onSubmit={handleAssignmentSubmit}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default BadgeManagement;
|
export default BadgeManagement
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
FaPlus,
|
FaPlus,
|
||||||
FaEdit,
|
FaEdit,
|
||||||
|
|
@ -9,64 +9,54 @@ import {
|
||||||
FaEye,
|
FaEye,
|
||||||
FaList,
|
FaList,
|
||||||
FaTh,
|
FaTh,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { HrCostCenter, CostCenterType } from "../../../types/hr";
|
import { HrCostCenter, CostCenterType } from '../../../types/hr'
|
||||||
import DataTable, { Column } from "../../../components/common/DataTable";
|
import DataTable, { Column } from '../../../components/common/DataTable'
|
||||||
import { mockCostCenters } from "../../../mocks/mockCostCenters";
|
import { mockCostCenters } from '../../../mocks/mockCostCenters'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
import CostCenterFormModal from "./CostCenterFormModal";
|
import CostCenterFormModal from './CostCenterFormModal'
|
||||||
import CostCenterViewModal from "./CostCenterViewModal";
|
import CostCenterViewModal from './CostCenterViewModal'
|
||||||
import Widget from "../../../components/common/Widget";
|
import Widget from '../../../components/common/Widget'
|
||||||
import {
|
import { getCostCenterTypeColor, getCostCenterTypeText } from '../../../utils/erp'
|
||||||
getCostCenterTypeColor,
|
import { Container } from '@/components/shared'
|
||||||
getCostCenterTypeText,
|
|
||||||
} from "../../../utils/erp";
|
|
||||||
|
|
||||||
const CostCenterManagement: React.FC = () => {
|
const CostCenterManagement: React.FC = () => {
|
||||||
const [costCenters, setCostCenters] =
|
const [costCenters, setCostCenters] = useState<HrCostCenter[]>(mockCostCenters)
|
||||||
useState<HrCostCenter[]>(mockCostCenters);
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [selectedType, setSelectedType] = useState<string>('all')
|
||||||
const [selectedType, setSelectedType] = useState<string>("all");
|
const [viewMode, setViewMode] = useState<'list' | 'cards'>('list')
|
||||||
const [viewMode, setViewMode] = useState<"list" | "cards">("list");
|
const [isFormModalOpen, setIsFormModalOpen] = useState(false)
|
||||||
const [isFormModalOpen, setIsFormModalOpen] = useState(false);
|
const [isViewModalOpen, setIsViewModalOpen] = useState(false)
|
||||||
const [isViewModalOpen, setIsViewModalOpen] = useState(false);
|
const [selectedCostCenter, setSelectedCostCenter] = useState<HrCostCenter | null>(null)
|
||||||
const [selectedCostCenter, setSelectedCostCenter] =
|
const [editingCostCenter, setEditingCostCenter] = useState<HrCostCenter | undefined>(undefined)
|
||||||
useState<HrCostCenter | null>(null);
|
|
||||||
const [editingCostCenter, setEditingCostCenter] = useState<
|
|
||||||
HrCostCenter | undefined
|
|
||||||
>(undefined);
|
|
||||||
|
|
||||||
// Cost center bağlantılarını kur
|
// Cost center bağlantılarını kur
|
||||||
mockCostCenters.forEach((cc) => {
|
mockCostCenters.forEach((cc) => {
|
||||||
if (cc.responsibleEmployeeId) {
|
if (cc.responsibleEmployeeId) {
|
||||||
cc.responsibleEmployee = mockEmployees.find(
|
cc.responsibleEmployee = mockEmployees.find((emp) => emp.id === cc.responsibleEmployeeId)
|
||||||
(emp) => emp.id === cc.responsibleEmployeeId
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
setEditingCostCenter(undefined);
|
setEditingCostCenter(undefined)
|
||||||
setIsFormModalOpen(true);
|
setIsFormModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEdit = (costCenter: HrCostCenter) => {
|
const handleEdit = (costCenter: HrCostCenter) => {
|
||||||
setEditingCostCenter(costCenter);
|
setEditingCostCenter(costCenter)
|
||||||
setIsFormModalOpen(true);
|
setIsFormModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleView = (costCenter: HrCostCenter) => {
|
const handleView = (costCenter: HrCostCenter) => {
|
||||||
setSelectedCostCenter(costCenter);
|
setSelectedCostCenter(costCenter)
|
||||||
setIsViewModalOpen(true);
|
setIsViewModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDelete = (id: string) => {
|
const handleDelete = (id: string) => {
|
||||||
if (
|
if (window.confirm('Bu maliyet merkezini silmek istediğinizden emin misiniz?')) {
|
||||||
window.confirm("Bu maliyet merkezini silmek istediğinizden emin misiniz?")
|
setCostCenters(costCenters.filter((cc) => cc.id !== id))
|
||||||
) {
|
|
||||||
setCostCenters(costCenters.filter((cc) => cc.id !== id));
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSave = (costCenterData: Partial<HrCostCenter>) => {
|
const handleSave = (costCenterData: Partial<HrCostCenter>) => {
|
||||||
if (editingCostCenter) {
|
if (editingCostCenter) {
|
||||||
|
|
@ -79,9 +69,9 @@ const CostCenterManagement: React.FC = () => {
|
||||||
...costCenterData,
|
...costCenterData,
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
}
|
}
|
||||||
: cc
|
: cc,
|
||||||
)
|
),
|
||||||
);
|
)
|
||||||
} else {
|
} else {
|
||||||
// Add new
|
// Add new
|
||||||
const newCostCenter: HrCostCenter = {
|
const newCostCenter: HrCostCenter = {
|
||||||
|
|
@ -90,12 +80,12 @@ const CostCenterManagement: React.FC = () => {
|
||||||
subCostCenters: [],
|
subCostCenters: [],
|
||||||
creationTime: new Date(),
|
creationTime: new Date(),
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
} as HrCostCenter;
|
} as HrCostCenter
|
||||||
setCostCenters([...costCenters, newCostCenter]);
|
setCostCenters([...costCenters, newCostCenter])
|
||||||
}
|
}
|
||||||
setIsFormModalOpen(false);
|
setIsFormModalOpen(false)
|
||||||
setEditingCostCenter(undefined);
|
setEditingCostCenter(undefined)
|
||||||
};
|
}
|
||||||
|
|
||||||
const filteredCostCenters = costCenters.filter((costCenter) => {
|
const filteredCostCenters = costCenters.filter((costCenter) => {
|
||||||
if (
|
if (
|
||||||
|
|
@ -103,37 +93,37 @@ const CostCenterManagement: React.FC = () => {
|
||||||
!costCenter.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
!costCenter.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
||||||
!costCenter.code.toLowerCase().includes(searchTerm.toLowerCase())
|
!costCenter.code.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
) {
|
) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
if (selectedType !== "all" && costCenter.costCenterType !== selectedType) {
|
if (selectedType !== 'all' && costCenter.costCenterType !== selectedType) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
return true;
|
return true
|
||||||
});
|
})
|
||||||
|
|
||||||
const getVariancePercentage = (budgeted: number, actual: number): number => {
|
const getVariancePercentage = (budgeted: number, actual: number): number => {
|
||||||
if (budgeted === 0) return 0;
|
if (budgeted === 0) return 0
|
||||||
return ((actual - budgeted) / budgeted) * 100;
|
return ((actual - budgeted) / budgeted) * 100
|
||||||
};
|
}
|
||||||
|
|
||||||
const columns: Column<HrCostCenter>[] = [
|
const columns: Column<HrCostCenter>[] = [
|
||||||
{
|
{
|
||||||
key: "code",
|
key: 'code',
|
||||||
header: "Maliyet Merkezi Kodu",
|
header: 'Maliyet Merkezi Kodu',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "name",
|
key: 'name',
|
||||||
header: "Maliyet Merkezi Adı",
|
header: 'Maliyet Merkezi Adı',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "costCenterType",
|
key: 'costCenterType',
|
||||||
header: "Tip",
|
header: 'Tip',
|
||||||
render: (costCenter: HrCostCenter) => (
|
render: (costCenter: HrCostCenter) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-0.5 text-xs font-medium rounded-full ${getCostCenterTypeColor(
|
className={`px-2 py-0.5 text-xs font-medium rounded-full ${getCostCenterTypeColor(
|
||||||
costCenter.costCenterType
|
costCenter.costCenterType,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
{getCostCenterTypeText(costCenter.costCenterType)}
|
{getCostCenterTypeText(costCenter.costCenterType)}
|
||||||
|
|
@ -141,14 +131,13 @@ const CostCenterManagement: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "responsibleEmployee",
|
key: 'responsibleEmployee',
|
||||||
header: "Sorumlu",
|
header: 'Sorumlu',
|
||||||
render: (costCenter: HrCostCenter) =>
|
render: (costCenter: HrCostCenter) => costCenter.responsibleEmployee?.fullName || '-',
|
||||||
costCenter.responsibleEmployee?.fullName || "-",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "budgetedAmount",
|
key: 'budgetedAmount',
|
||||||
header: "Bütçe",
|
header: 'Bütçe',
|
||||||
render: (costCenter: HrCostCenter) => (
|
render: (costCenter: HrCostCenter) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
||||||
|
|
@ -157,8 +146,8 @@ const CostCenterManagement: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actualAmount",
|
key: 'actualAmount',
|
||||||
header: "Gerçekleşen",
|
header: 'Gerçekleşen',
|
||||||
render: (costCenter: HrCostCenter) => (
|
render: (costCenter: HrCostCenter) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
||||||
|
|
@ -167,47 +156,38 @@ const CostCenterManagement: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "variance",
|
key: 'variance',
|
||||||
header: "Fark (%)",
|
header: 'Fark (%)',
|
||||||
render: (costCenter: HrCostCenter) => {
|
render: (costCenter: HrCostCenter) => {
|
||||||
const variance = getVariancePercentage(
|
const variance = getVariancePercentage(costCenter.budgetedAmount, costCenter.actualAmount)
|
||||||
costCenter.budgetedAmount,
|
const isPositive = variance > 0
|
||||||
costCenter.actualAmount
|
|
||||||
);
|
|
||||||
const isPositive = variance > 0;
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaPercentage className="w-4 h-4 text-gray-500" />
|
<FaPercentage className="w-4 h-4 text-gray-500" />
|
||||||
<span
|
<span className={`font-medium ${isPositive ? 'text-red-600' : 'text-green-600'}`}>
|
||||||
className={`font-medium ${
|
{isPositive ? '+' : ''}
|
||||||
isPositive ? "text-red-600" : "text-green-600"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{isPositive ? "+" : ""}
|
|
||||||
{variance.toFixed(1)}%
|
{variance.toFixed(1)}%
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "status",
|
key: 'status',
|
||||||
header: "Durum",
|
header: 'Durum',
|
||||||
render: (costCenter: HrCostCenter) => (
|
render: (costCenter: HrCostCenter) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
||||||
costCenter.isActive
|
costCenter.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{costCenter.isActive ? "Aktif" : "Pasif"}
|
{costCenter.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actions",
|
key: 'actions',
|
||||||
header: "İşlemler",
|
header: 'İşlemler',
|
||||||
render: (costCenter: HrCostCenter) => (
|
render: (costCenter: HrCostCenter) => (
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1">
|
||||||
<button
|
<button
|
||||||
|
|
@ -234,23 +214,17 @@ const CostCenterManagement: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
const totalBudget = costCenters.reduce(
|
const totalBudget = costCenters.reduce((sum, cc) => sum + cc.budgetedAmount, 0)
|
||||||
(sum, cc) => sum + cc.budgetedAmount,
|
const totalActual = costCenters.reduce((sum, cc) => sum + cc.actualAmount, 0)
|
||||||
0
|
const totalVariance = getVariancePercentage(totalBudget, totalActual)
|
||||||
);
|
|
||||||
const totalActual = costCenters.reduce((sum, cc) => sum + cc.actualAmount, 0);
|
|
||||||
const totalVariance = getVariancePercentage(totalBudget, totalActual);
|
|
||||||
|
|
||||||
const renderCards = () => (
|
const renderCards = () => (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||||
{filteredCostCenters.map((costCenter) => {
|
{filteredCostCenters.map((costCenter) => {
|
||||||
const variance = getVariancePercentage(
|
const variance = getVariancePercentage(costCenter.budgetedAmount, costCenter.actualAmount)
|
||||||
costCenter.budgetedAmount,
|
const isPositive = variance > 0
|
||||||
costCenter.actualAmount
|
|
||||||
);
|
|
||||||
const isPositive = variance > 0;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
@ -260,14 +234,12 @@ const CostCenterManagement: React.FC = () => {
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
<div className="flex items-start justify-between mb-4">
|
<div className="flex items-start justify-between mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">
|
<h3 className="text-lg font-semibold text-gray-900 mb-1">{costCenter.name}</h3>
|
||||||
{costCenter.name}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600">{costCenter.code}</p>
|
<p className="text-sm text-gray-600">{costCenter.code}</p>
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-0.5 text-xs font-medium rounded-full ${getCostCenterTypeColor(
|
className={`px-2 py-0.5 text-xs font-medium rounded-full ${getCostCenterTypeColor(
|
||||||
costCenter.costCenterType
|
costCenter.costCenterType,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
{getCostCenterTypeText(costCenter.costCenterType)}
|
{getCostCenterTypeText(costCenter.costCenterType)}
|
||||||
|
|
@ -275,32 +247,22 @@ const CostCenterManagement: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{costCenter.description && (
|
{costCenter.description && (
|
||||||
<p className="text-sm text-gray-600 mb-4 line-clamp-2">
|
<p className="text-sm text-gray-600 mb-4 line-clamp-2">{costCenter.description}</p>
|
||||||
{costCenter.description}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="space-y-3 mb-4">
|
<div className="space-y-3 mb-4">
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-sm text-gray-600">Bütçe:</span>
|
<span className="text-sm text-gray-600">Bütçe:</span>
|
||||||
<span className="font-medium">
|
<span className="font-medium">₺{costCenter.budgetedAmount.toLocaleString()}</span>
|
||||||
₺{costCenter.budgetedAmount.toLocaleString()}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-sm text-gray-600">Gerçekleşen:</span>
|
<span className="text-sm text-gray-600">Gerçekleşen:</span>
|
||||||
<span className="font-medium">
|
<span className="font-medium">₺{costCenter.actualAmount.toLocaleString()}</span>
|
||||||
₺{costCenter.actualAmount.toLocaleString()}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-sm text-gray-600">Fark:</span>
|
<span className="text-sm text-gray-600">Fark:</span>
|
||||||
<span
|
<span className={`font-medium ${isPositive ? 'text-red-600' : 'text-green-600'}`}>
|
||||||
className={`font-medium ${
|
{isPositive ? '+' : ''}
|
||||||
isPositive ? "text-red-600" : "text-green-600"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{isPositive ? "+" : ""}
|
|
||||||
{variance.toFixed(1)}%
|
{variance.toFixed(1)}%
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -318,12 +280,10 @@ const CostCenterManagement: React.FC = () => {
|
||||||
<div className="flex items-center justify-between pt-4 border-t">
|
<div className="flex items-center justify-between pt-4 border-t">
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
||||||
costCenter.isActive
|
costCenter.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{costCenter.isActive ? "Aktif" : "Pasif"}
|
{costCenter.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1">
|
||||||
|
|
@ -352,162 +312,156 @@ const CostCenterManagement: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-2">
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||||
<h2 className="text-xl font-bold text-gray-900">
|
<div>
|
||||||
Maliyet Merkezi Yönetimi
|
<h2 className="text-xl font-bold text-gray-900">Maliyet Merkezi Yönetimi</h2>
|
||||||
</h2>
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
Maliyet merkezlerini ve bütçe takibini yönetin
|
||||||
Maliyet merkezlerini ve bütçe takibini yönetin
|
</p>
|
||||||
</p>
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleAdd}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
<FaPlus className="w-4 h-4" />
|
||||||
|
Yeni Maliyet Merkezi
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
onClick={handleAdd}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaPlus className="w-4 h-4" />
|
|
||||||
Yeni Maliyet Merkezi
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Cards */}
|
{/* Stats Cards */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Maliyet Merkezi"
|
title="Toplam Maliyet Merkezi"
|
||||||
value={costCenters.length}
|
value={costCenters.length}
|
||||||
color="blue"
|
color="blue"
|
||||||
icon="FaChartPie"
|
icon="FaChartPie"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Bütçe"
|
title="Toplam Bütçe"
|
||||||
value={`₺${totalBudget.toLocaleString()}`}
|
value={`₺${totalBudget.toLocaleString()}`}
|
||||||
color="green"
|
color="green"
|
||||||
icon="FaDollarSign"
|
icon="FaDollarSign"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Gerçekleşen"
|
title="Toplam Gerçekleşen"
|
||||||
value={`₺${totalActual.toLocaleString()}`}
|
value={`₺${totalActual.toLocaleString()}`}
|
||||||
color="orange"
|
color="orange"
|
||||||
icon="FaDollarSign"
|
icon="FaDollarSign"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Fark"
|
title="Toplam Fark"
|
||||||
value={`${totalVariance > 0 ? "+" : ""}${totalVariance.toFixed(1)}%`}
|
value={`${totalVariance > 0 ? '+' : ''}${totalVariance.toFixed(1)}%`}
|
||||||
color={totalVariance > 0 ? "red" : "green"}
|
color={totalVariance > 0 ? 'red' : 'green'}
|
||||||
icon="FaPercentage"
|
icon="FaPercentage"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Filters and View Mode */}
|
{/* Filters and View Mode */}
|
||||||
<div className="flex flex-col sm:flex-row gap-4 items-stretch sm:items-center justify-between">
|
<div className="flex flex-col sm:flex-row gap-4 items-stretch sm:items-center justify-between">
|
||||||
<div className="flex flex-col sm:flex-row gap-4 items-stretch sm:items-center flex-1">
|
<div className="flex flex-col sm:flex-row gap-4 items-stretch sm:items-center flex-1">
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Maliyet merkezi adı veya kodu ara..."
|
placeholder="Maliyet merkezi adı veya kodu ara..."
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={selectedType}
|
||||||
|
onChange={(e) => setSelectedType(e.target.value)}
|
||||||
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-0 sm:min-w-[200px]"
|
||||||
|
>
|
||||||
|
<option value="all">Tüm Tipler</option>
|
||||||
|
{Object.values(CostCenterType).map((type) => (
|
||||||
|
<option key={type} value={type}>
|
||||||
|
{getCostCenterTypeText(type)}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<select
|
{/* View Mode Toggle */}
|
||||||
value={selectedType}
|
<div className="flex items-center gap-2 bg-gray-100 rounded-lg p-1">
|
||||||
onChange={(e) => setSelectedType(e.target.value)}
|
<button
|
||||||
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-0 sm:min-w-[200px]"
|
onClick={() => setViewMode('list')}
|
||||||
>
|
className={`p-1.5 rounded-md text-sm transition-colors ${
|
||||||
<option value="all">Tüm Tipler</option>
|
viewMode === 'list'
|
||||||
{Object.values(CostCenterType).map((type) => (
|
? 'bg-white text-blue-600 shadow-sm'
|
||||||
<option key={type} value={type}>
|
: 'text-gray-600 hover:text-gray-900'
|
||||||
{getCostCenterTypeText(type)}
|
}`}
|
||||||
</option>
|
title="Liste Görünümü"
|
||||||
))}
|
>
|
||||||
</select>
|
<FaList className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setViewMode('cards')}
|
||||||
|
className={`p-1.5 rounded-md text-sm 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* View Mode Toggle */}
|
{/* Content */}
|
||||||
<div className="flex items-center gap-2 bg-gray-100 rounded-lg p-1">
|
{viewMode === 'list' ? (
|
||||||
<button
|
<div className="bg-white rounded-lg shadow-sm border">
|
||||||
onClick={() => setViewMode("list")}
|
<DataTable data={filteredCostCenters} columns={columns} />
|
||||||
className={`p-1.5 rounded-md text-sm transition-colors ${
|
</div>
|
||||||
viewMode === "list"
|
) : (
|
||||||
? "bg-white text-blue-600 shadow-sm"
|
renderCards()
|
||||||
: "text-gray-600 hover:text-gray-900"
|
)}
|
||||||
}`}
|
|
||||||
title="Liste Görünümü"
|
{filteredCostCenters.length === 0 && (
|
||||||
>
|
<div className="text-center py-12">
|
||||||
<FaList className="w-4 h-4" />
|
<FaChartPie className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||||||
</button>
|
<h3 className="text-base font-medium text-gray-900 mb-2">Maliyet merkezi bulunamadı</h3>
|
||||||
<button
|
<p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
|
||||||
onClick={() => setViewMode("cards")}
|
</div>
|
||||||
className={`p-1.5 rounded-md text-sm 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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
{viewMode === "list" ? (
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border">
|
|
||||||
<DataTable data={filteredCostCenters} columns={columns} />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
renderCards()
|
|
||||||
)}
|
|
||||||
|
|
||||||
{filteredCostCenters.length === 0 && (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<FaChartPie className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
|
||||||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
|
||||||
Maliyet merkezi bulunamadı
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-500">
|
|
||||||
Arama kriterlerinizi değiştirmeyi deneyin.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Modals */}
|
{/* Modals */}
|
||||||
<CostCenterFormModal
|
<CostCenterFormModal
|
||||||
isOpen={isFormModalOpen}
|
isOpen={isFormModalOpen}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setIsFormModalOpen(false);
|
setIsFormModalOpen(false)
|
||||||
setEditingCostCenter(undefined);
|
setEditingCostCenter(undefined)
|
||||||
}}
|
}}
|
||||||
onSave={handleSave}
|
onSave={handleSave}
|
||||||
costCenter={editingCostCenter}
|
costCenter={editingCostCenter}
|
||||||
title={
|
title={editingCostCenter ? 'Maliyet Merkezi Düzenle' : 'Yeni Maliyet Merkezi'}
|
||||||
editingCostCenter ? "Maliyet Merkezi Düzenle" : "Yeni Maliyet Merkezi"
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<CostCenterViewModal
|
<CostCenterViewModal
|
||||||
isOpen={isViewModalOpen}
|
isOpen={isViewModalOpen}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setIsViewModalOpen(false);
|
setIsViewModalOpen(false)
|
||||||
setSelectedCostCenter(null);
|
setSelectedCostCenter(null)
|
||||||
}}
|
}}
|
||||||
costCenter={selectedCostCenter}
|
costCenter={selectedCostCenter}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default CostCenterManagement;
|
export default CostCenterManagement
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,13 +1,5 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import {
|
import { FaEye, FaEdit, FaPlus, FaTimes, FaSave, FaTrash, FaQuestionCircle } from 'react-icons/fa'
|
||||||
FaEye,
|
|
||||||
FaEdit,
|
|
||||||
FaPlus,
|
|
||||||
FaTimes,
|
|
||||||
FaSave,
|
|
||||||
FaTrash,
|
|
||||||
FaQuestionCircle,
|
|
||||||
} from "react-icons/fa";
|
|
||||||
import {
|
import {
|
||||||
HrEvaluation360Template,
|
HrEvaluation360Template,
|
||||||
HrQuestionGroup,
|
HrQuestionGroup,
|
||||||
|
|
@ -15,77 +7,73 @@ import {
|
||||||
QuestionTypeEnum,
|
QuestionTypeEnum,
|
||||||
HrQuestionOption,
|
HrQuestionOption,
|
||||||
AssessorTypeEnum,
|
AssessorTypeEnum,
|
||||||
} from "../../../types/hr";
|
} from '../../../types/hr'
|
||||||
import DataTable, { Column } from "../../../components/common/DataTable";
|
import DataTable, { Column } from '../../../components/common/DataTable'
|
||||||
import { mockEvaluation360Templates } from "../../../mocks/mockEvaluation360Templates";
|
import { mockEvaluation360Templates } from '../../../mocks/mockEvaluation360Templates'
|
||||||
import Widget from "../../../components/common/Widget";
|
import Widget from '../../../components/common/Widget'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
const Degree360Templates: React.FC = () => {
|
const Degree360Templates: React.FC = () => {
|
||||||
const [templateSearchTerm, setTemplateSearchTerm] = useState("");
|
const [templateSearchTerm, setTemplateSearchTerm] = useState('')
|
||||||
|
|
||||||
// Modal states
|
// Modal states
|
||||||
const [showTemplateModal, setShowTemplateModal] = useState(false);
|
const [showTemplateModal, setShowTemplateModal] = useState(false)
|
||||||
const [showQuestionModal, setShowQuestionModal] = useState(false);
|
const [showQuestionModal, setShowQuestionModal] = useState(false)
|
||||||
const [showQuestionItemModal, setShowQuestionItemModal] = useState(false);
|
const [showQuestionItemModal, setShowQuestionItemModal] = useState(false)
|
||||||
const [selectedTemplate, setSelectedTemplate] =
|
const [selectedTemplate, setSelectedTemplate] = useState<HrEvaluation360Template | null>(null)
|
||||||
useState<HrEvaluation360Template | null>(null);
|
const [selectedQuestionGroup, setSelectedQuestionGroup] = useState<HrQuestionGroup | null>(null)
|
||||||
const [selectedQuestionGroup, setSelectedQuestionGroup] =
|
const [selectedQuestion, setSelectedQuestion] = useState<HrEvaluationQuestion | null>(null)
|
||||||
useState<HrQuestionGroup | null>(null);
|
const [isEditMode, setIsEditMode] = useState(false)
|
||||||
const [selectedQuestion, setSelectedQuestion] =
|
|
||||||
useState<HrEvaluationQuestion | null>(null);
|
|
||||||
const [isEditMode, setIsEditMode] = useState(false);
|
|
||||||
|
|
||||||
// Form states
|
// Form states
|
||||||
const [templateForm, setTemplateForm] = useState({
|
const [templateForm, setTemplateForm] = useState({
|
||||||
name: "",
|
name: '',
|
||||||
description: "",
|
description: '',
|
||||||
isActive: true,
|
isActive: true,
|
||||||
assessorTypes: [] as AssessorTypeEnum[],
|
assessorTypes: [] as AssessorTypeEnum[],
|
||||||
});
|
})
|
||||||
|
|
||||||
const [questionGroupForm, setQuestionGroupForm] = useState({
|
const [questionGroupForm, setQuestionGroupForm] = useState({
|
||||||
groupName: "",
|
groupName: '',
|
||||||
description: "",
|
description: '',
|
||||||
weight: 0,
|
weight: 0,
|
||||||
order: 0,
|
order: 0,
|
||||||
});
|
})
|
||||||
|
|
||||||
const [questionForm, setQuestionForm] = useState({
|
const [questionForm, setQuestionForm] = useState({
|
||||||
questionText: "",
|
questionText: '',
|
||||||
questionType: QuestionTypeEnum.Rating,
|
questionType: QuestionTypeEnum.Rating,
|
||||||
isRequired: true,
|
isRequired: true,
|
||||||
order: 0,
|
order: 0,
|
||||||
weight: 0,
|
weight: 0,
|
||||||
options: [] as HrQuestionOption[],
|
options: [] as HrQuestionOption[],
|
||||||
});
|
})
|
||||||
|
|
||||||
// Filter templates
|
// Filter templates
|
||||||
const filteredTemplates = mockEvaluation360Templates.filter((template) => {
|
const filteredTemplates = mockEvaluation360Templates.filter((template) => {
|
||||||
const searchLower = templateSearchTerm.toLowerCase();
|
const searchLower = templateSearchTerm.toLowerCase()
|
||||||
return (
|
return (
|
||||||
template.name.toLowerCase().includes(searchLower) ||
|
template.name.toLowerCase().includes(searchLower) ||
|
||||||
template.description.toLowerCase().includes(searchLower)
|
template.description.toLowerCase().includes(searchLower)
|
||||||
);
|
)
|
||||||
});
|
})
|
||||||
|
|
||||||
// Statistics
|
// Statistics
|
||||||
const totalTemplates = mockEvaluation360Templates.length;
|
const totalTemplates = mockEvaluation360Templates.length
|
||||||
const activeTemplates = mockEvaluation360Templates.filter(
|
const activeTemplates = mockEvaluation360Templates.filter((t) => t.isActive).length
|
||||||
(t) => t.isActive
|
|
||||||
).length;
|
|
||||||
|
|
||||||
// Event handlers
|
// Event handlers
|
||||||
const handleNewTemplate = () => {
|
const handleNewTemplate = () => {
|
||||||
setTemplateForm({
|
setTemplateForm({
|
||||||
name: "",
|
name: '',
|
||||||
description: "",
|
description: '',
|
||||||
isActive: true,
|
isActive: true,
|
||||||
assessorTypes: [],
|
assessorTypes: [],
|
||||||
});
|
})
|
||||||
setSelectedTemplate(null);
|
setSelectedTemplate(null)
|
||||||
setIsEditMode(false);
|
setIsEditMode(false)
|
||||||
setShowTemplateModal(true);
|
setShowTemplateModal(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEditTemplate = (template: HrEvaluation360Template) => {
|
const handleEditTemplate = (template: HrEvaluation360Template) => {
|
||||||
setTemplateForm({
|
setTemplateForm({
|
||||||
|
|
@ -93,11 +81,11 @@ const Degree360Templates: React.FC = () => {
|
||||||
description: template.description,
|
description: template.description,
|
||||||
isActive: template.isActive,
|
isActive: template.isActive,
|
||||||
assessorTypes: template.assessorTypes || [],
|
assessorTypes: template.assessorTypes || [],
|
||||||
});
|
})
|
||||||
setSelectedTemplate(template);
|
setSelectedTemplate(template)
|
||||||
setIsEditMode(true);
|
setIsEditMode(true)
|
||||||
setShowTemplateModal(true);
|
setShowTemplateModal(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleViewTemplate = (template: HrEvaluation360Template) => {
|
const handleViewTemplate = (template: HrEvaluation360Template) => {
|
||||||
setTemplateForm({
|
setTemplateForm({
|
||||||
|
|
@ -105,72 +93,65 @@ const Degree360Templates: React.FC = () => {
|
||||||
description: template.description,
|
description: template.description,
|
||||||
isActive: template.isActive,
|
isActive: template.isActive,
|
||||||
assessorTypes: template.assessorTypes || [],
|
assessorTypes: template.assessorTypes || [],
|
||||||
});
|
})
|
||||||
setSelectedTemplate(template);
|
setSelectedTemplate(template)
|
||||||
setShowTemplateModal(true);
|
setShowTemplateModal(true)
|
||||||
setIsEditMode(false);
|
setIsEditMode(false)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSaveTemplate = () => {
|
const handleSaveTemplate = () => {
|
||||||
console.log("Saving template:", templateForm);
|
console.log('Saving template:', templateForm)
|
||||||
setShowTemplateModal(false);
|
setShowTemplateModal(false)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDeleteTemplate = (template: HrEvaluation360Template) => {
|
const handleDeleteTemplate = (template: HrEvaluation360Template) => {
|
||||||
if (
|
if (confirm(`"${template.name}" şablonunu silmek istediğinizden emin misiniz?`)) {
|
||||||
confirm(
|
console.log('Deleting template:', template.id)
|
||||||
`"${template.name}" şablonunu silmek istediğinizden emin misiniz?`
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
console.log("Deleting template:", template.id);
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleAddQuestionGroup = () => {
|
const handleAddQuestionGroup = () => {
|
||||||
setQuestionGroupForm({
|
setQuestionGroupForm({
|
||||||
groupName: "",
|
groupName: '',
|
||||||
description: "",
|
description: '',
|
||||||
weight: 0,
|
weight: 0,
|
||||||
order: 0,
|
order: 0,
|
||||||
});
|
})
|
||||||
setSelectedQuestionGroup(null);
|
setSelectedQuestionGroup(null)
|
||||||
setShowQuestionModal(true);
|
setShowQuestionModal(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEditQuestionGroup = (group: HrQuestionGroup) => {
|
const handleEditQuestionGroup = (group: HrQuestionGroup) => {
|
||||||
setQuestionGroupForm({
|
setQuestionGroupForm({
|
||||||
groupName: group.groupName,
|
groupName: group.groupName,
|
||||||
description: group.description || "",
|
description: group.description || '',
|
||||||
weight: group.weight,
|
weight: group.weight,
|
||||||
order: group.order,
|
order: group.order,
|
||||||
});
|
})
|
||||||
setSelectedQuestionGroup(group);
|
setSelectedQuestionGroup(group)
|
||||||
setShowQuestionModal(true);
|
setShowQuestionModal(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSaveQuestionGroup = () => {
|
const handleSaveQuestionGroup = () => {
|
||||||
console.log("Saving question group:", questionGroupForm);
|
console.log('Saving question group:', questionGroupForm)
|
||||||
setShowQuestionModal(false);
|
setShowQuestionModal(false)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleAddQuestion = (group: HrQuestionGroup) => {
|
const handleAddQuestion = (group: HrQuestionGroup) => {
|
||||||
setQuestionForm({
|
setQuestionForm({
|
||||||
questionText: "",
|
questionText: '',
|
||||||
questionType: QuestionTypeEnum.Rating,
|
questionType: QuestionTypeEnum.Rating,
|
||||||
isRequired: true,
|
isRequired: true,
|
||||||
order: 0,
|
order: 0,
|
||||||
weight: 0,
|
weight: 0,
|
||||||
options: [],
|
options: [],
|
||||||
});
|
})
|
||||||
setSelectedQuestion(null);
|
setSelectedQuestion(null)
|
||||||
setSelectedQuestionGroup(group);
|
setSelectedQuestionGroup(group)
|
||||||
setShowQuestionItemModal(true);
|
setShowQuestionItemModal(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEditQuestion = (
|
const handleEditQuestion = (question: HrEvaluationQuestion, group: HrQuestionGroup) => {
|
||||||
question: HrEvaluationQuestion,
|
|
||||||
group: HrQuestionGroup
|
|
||||||
) => {
|
|
||||||
setQuestionForm({
|
setQuestionForm({
|
||||||
questionText: question.questionText,
|
questionText: question.questionText,
|
||||||
questionType: question.questionType,
|
questionType: question.questionType,
|
||||||
|
|
@ -178,22 +159,22 @@ const Degree360Templates: React.FC = () => {
|
||||||
order: question.order,
|
order: question.order,
|
||||||
weight: question.weight,
|
weight: question.weight,
|
||||||
options: question.options || [],
|
options: question.options || [],
|
||||||
});
|
})
|
||||||
setSelectedQuestion(question);
|
setSelectedQuestion(question)
|
||||||
setSelectedQuestionGroup(group);
|
setSelectedQuestionGroup(group)
|
||||||
setShowQuestionItemModal(true);
|
setShowQuestionItemModal(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSaveQuestion = () => {
|
const handleSaveQuestion = () => {
|
||||||
console.log("Saving question:", questionForm);
|
console.log('Saving question:', questionForm)
|
||||||
setShowQuestionItemModal(false);
|
setShowQuestionItemModal(false)
|
||||||
};
|
}
|
||||||
|
|
||||||
// Table columns
|
// Table columns
|
||||||
const templateColumns: Column<HrEvaluation360Template>[] = [
|
const templateColumns: Column<HrEvaluation360Template>[] = [
|
||||||
{
|
{
|
||||||
key: "name",
|
key: 'name',
|
||||||
header: "Şablon Adı",
|
header: 'Şablon Adı',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (template) => (
|
render: (template) => (
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -203,30 +184,28 @@ const Degree360Templates: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "questionGroups",
|
key: 'questionGroups',
|
||||||
header: "Soru Grupları",
|
header: 'Soru Grupları',
|
||||||
render: (template) => (
|
render: (template) => (
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">{template.questionGroups?.length || 0} grup</span>
|
||||||
{template.questionGroups?.length || 0} grup
|
|
||||||
</span>
|
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "assessorTypes",
|
key: 'assessorTypes',
|
||||||
header: "Değerlendirecekler",
|
header: 'Değerlendirecekler',
|
||||||
render: (template) => {
|
render: (template) => {
|
||||||
const assessorLabels = {
|
const assessorLabels = {
|
||||||
[AssessorTypeEnum.Self]: "Kendi",
|
[AssessorTypeEnum.Self]: 'Kendi',
|
||||||
[AssessorTypeEnum.Manager]: "Yönetici",
|
[AssessorTypeEnum.Manager]: 'Yönetici',
|
||||||
[AssessorTypeEnum.Peer]: "Meslektaş",
|
[AssessorTypeEnum.Peer]: 'Meslektaş',
|
||||||
[AssessorTypeEnum.Subordinate]: "Ast",
|
[AssessorTypeEnum.Subordinate]: 'Ast',
|
||||||
[AssessorTypeEnum.Customer]: "Müşteri",
|
[AssessorTypeEnum.Customer]: 'Müşteri',
|
||||||
[AssessorTypeEnum.OtherDepartment]: "Diğer Departman",
|
[AssessorTypeEnum.OtherDepartment]: 'Diğer Departman',
|
||||||
[AssessorTypeEnum.HRUpperManagement]: "İK/Üst Yönetim",
|
[AssessorTypeEnum.HRUpperManagement]: 'İK/Üst Yönetim',
|
||||||
[AssessorTypeEnum.External]: "Dış Paydaş",
|
[AssessorTypeEnum.External]: 'Dış Paydaş',
|
||||||
};
|
}
|
||||||
|
|
||||||
const assessorTypes = template.assessorTypes || [];
|
const assessorTypes = template.assessorTypes || []
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-wrap gap-1">
|
<div className="flex flex-wrap gap-1">
|
||||||
{assessorTypes.map((type) => (
|
{assessorTypes.map((type) => (
|
||||||
|
|
@ -241,27 +220,25 @@ const Degree360Templates: React.FC = () => {
|
||||||
<span className="text-sm text-gray-400">Belirtilmemiş</span>
|
<span className="text-sm text-gray-400">Belirtilmemiş</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "isActive",
|
key: 'isActive',
|
||||||
header: "Durum",
|
header: 'Durum',
|
||||||
render: (template) => (
|
render: (template) => (
|
||||||
<span
|
<span
|
||||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
||||||
template.isActive
|
template.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{template.isActive ? "Aktif" : "Pasif"}
|
{template.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actions",
|
key: 'actions',
|
||||||
header: "İşlemler",
|
header: 'İşlemler',
|
||||||
render: (template) => (
|
render: (template) => (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -288,66 +265,66 @@ const Degree360Templates: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 mt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-2">
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||||
<h2 className="text-xl font-bold text-gray-900">360° Şablonlar</h2>
|
<div>
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
<h2 className="text-xl font-bold text-gray-900">360° Şablonlar</h2>
|
||||||
360 derece değerlendirme şablonlarını yönetin
|
<p className="text-gray-600 mt-1">360 derece değerlendirme şablonlarını yönetin</p>
|
||||||
</p>
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleNewTemplate}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 bg-purple-600 text-white rounded-md hover:bg-purple-700 ml-4 text-sm"
|
||||||
|
>
|
||||||
|
<FaPlus className="w-4 h-4" />
|
||||||
|
Yeni Şablon
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
{/* Statistics */}
|
||||||
onClick={handleNewTemplate}
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
className="flex items-center gap-2 px-3 py-1.5 bg-purple-600 text-white rounded-md hover:bg-purple-700 ml-4 text-sm"
|
<Widget
|
||||||
>
|
title="Toplam Şablon"
|
||||||
<FaPlus className="w-4 h-4" />
|
value={totalTemplates}
|
||||||
Yeni Şablon
|
color="purple"
|
||||||
</button>
|
icon="FaClipboardList"
|
||||||
</div>
|
/>
|
||||||
|
|
||||||
{/* Statistics */}
|
<Widget
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
title="Aktif Şablon"
|
||||||
<Widget
|
value={activeTemplates}
|
||||||
title="Toplam Şablon"
|
color="green"
|
||||||
value={totalTemplates}
|
icon="FaClipboardList"
|
||||||
color="purple"
|
/>
|
||||||
icon="FaClipboardList"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Aktif Şablon"
|
title="Pasif Şablon"
|
||||||
value={activeTemplates}
|
value={totalTemplates - activeTemplates}
|
||||||
color="green"
|
color="red"
|
||||||
icon="FaClipboardList"
|
icon="FaClipboardList"
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="Pasif Şablon"
|
|
||||||
value={totalTemplates - activeTemplates}
|
|
||||||
color="red"
|
|
||||||
icon="FaClipboardList"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white p-4 rounded-lg border">
|
|
||||||
<div className="flex-1">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Şablon adı veya açıklama ile ara..."
|
|
||||||
value={templateSearchTerm}
|
|
||||||
onChange={(e) => setTemplateSearchTerm(e.target.value)}
|
|
||||||
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Templates Table */}
|
<div className="bg-white p-4 rounded-lg border">
|
||||||
<DataTable data={filteredTemplates} columns={templateColumns} />
|
<div className="flex-1">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Şablon adı veya açıklama ile ara..."
|
||||||
|
value={templateSearchTerm}
|
||||||
|
onChange={(e) => setTemplateSearchTerm(e.target.value)}
|
||||||
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Templates Table */}
|
||||||
|
<DataTable data={filteredTemplates} columns={templateColumns} />
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Template Modal */}
|
{/* Template Modal */}
|
||||||
{showTemplateModal && (
|
{showTemplateModal && (
|
||||||
|
|
@ -355,11 +332,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
<div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
|
<div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||||
<div className="flex justify-between items-center mb-4">
|
<div className="flex justify-between items-center mb-4">
|
||||||
<h2 className="text-lg font-bold">
|
<h2 className="text-lg font-bold">
|
||||||
{isEditMode
|
{isEditMode ? 'Şablon Düzenle' : selectedTemplate ? 'Şablon Detayı' : 'Yeni Şablon'}
|
||||||
? "Şablon Düzenle"
|
|
||||||
: selectedTemplate
|
|
||||||
? "Şablon Detayı"
|
|
||||||
: "Yeni Şablon"}
|
|
||||||
</h2>
|
</h2>
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowTemplateModal(false)}
|
onClick={() => setShowTemplateModal(false)}
|
||||||
|
|
@ -373,29 +346,23 @@ const Degree360Templates: React.FC = () => {
|
||||||
{/* Basic Information */}
|
{/* Basic Information */}
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Şablon Adı</label>
|
||||||
Şablon Adı
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={templateForm.name}
|
value={templateForm.name}
|
||||||
onChange={(e) =>
|
onChange={(e) => setTemplateForm({ ...templateForm, name: e.target.value })}
|
||||||
setTemplateForm({ ...templateForm, name: e.target.value })
|
|
||||||
}
|
|
||||||
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
||||||
disabled={!isEditMode && !!selectedTemplate}
|
disabled={!isEditMode && !!selectedTemplate}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Durum</label>
|
||||||
Durum
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={templateForm.isActive ? "active" : "inactive"}
|
value={templateForm.isActive ? 'active' : 'inactive'}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setTemplateForm({
|
setTemplateForm({
|
||||||
...templateForm,
|
...templateForm,
|
||||||
isActive: e.target.value === "active",
|
isActive: e.target.value === 'active',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
||||||
|
|
@ -408,9 +375,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
|
||||||
Açıklama
|
|
||||||
</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
value={templateForm.description}
|
value={templateForm.description}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
|
|
@ -433,15 +398,15 @@ const Degree360Templates: React.FC = () => {
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
{Object.values(AssessorTypeEnum).map((type) => {
|
{Object.values(AssessorTypeEnum).map((type) => {
|
||||||
const labels = {
|
const labels = {
|
||||||
[AssessorTypeEnum.Self]: "Kendi",
|
[AssessorTypeEnum.Self]: 'Kendi',
|
||||||
[AssessorTypeEnum.Manager]: "Yönetici",
|
[AssessorTypeEnum.Manager]: 'Yönetici',
|
||||||
[AssessorTypeEnum.Peer]: "Meslektaş",
|
[AssessorTypeEnum.Peer]: 'Meslektaş',
|
||||||
[AssessorTypeEnum.Subordinate]: "Ast",
|
[AssessorTypeEnum.Subordinate]: 'Ast',
|
||||||
[AssessorTypeEnum.Customer]: "Müşteri",
|
[AssessorTypeEnum.Customer]: 'Müşteri',
|
||||||
[AssessorTypeEnum.OtherDepartment]: "Diğer Departman",
|
[AssessorTypeEnum.OtherDepartment]: 'Diğer Departman',
|
||||||
[AssessorTypeEnum.HRUpperManagement]: "İK/Üst Yönetim",
|
[AssessorTypeEnum.HRUpperManagement]: 'İK/Üst Yönetim',
|
||||||
[AssessorTypeEnum.External]: "Dış Paydaş",
|
[AssessorTypeEnum.External]: 'Dış Paydaş',
|
||||||
};
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<label key={type} className="flex items-center space-x-2">
|
<label key={type} className="flex items-center space-x-2">
|
||||||
|
|
@ -452,29 +417,21 @@ const Degree360Templates: React.FC = () => {
|
||||||
if (e.target.checked) {
|
if (e.target.checked) {
|
||||||
setTemplateForm({
|
setTemplateForm({
|
||||||
...templateForm,
|
...templateForm,
|
||||||
assessorTypes: [
|
assessorTypes: [...templateForm.assessorTypes, type],
|
||||||
...templateForm.assessorTypes,
|
})
|
||||||
type,
|
|
||||||
],
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
setTemplateForm({
|
setTemplateForm({
|
||||||
...templateForm,
|
...templateForm,
|
||||||
assessorTypes:
|
assessorTypes: templateForm.assessorTypes.filter((t) => t !== type),
|
||||||
templateForm.assessorTypes.filter(
|
})
|
||||||
(t) => t !== type
|
|
||||||
),
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
||||||
disabled={!isEditMode && !!selectedTemplate}
|
disabled={!isEditMode && !!selectedTemplate}
|
||||||
/>
|
/>
|
||||||
<span className="text-sm text-gray-700">
|
<span className="text-sm text-gray-700">{labels[type] || type}</span>
|
||||||
{labels[type] || type}
|
|
||||||
</span>
|
|
||||||
</label>
|
</label>
|
||||||
);
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -496,93 +453,72 @@ const Degree360Templates: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{selectedTemplate.questionGroups?.map(
|
{selectedTemplate.questionGroups?.map((group, groupIndex) => (
|
||||||
(group, groupIndex) => (
|
<div key={groupIndex} className="bg-gray-50 p-3 rounded-lg">
|
||||||
<div
|
<div className="flex justify-between items-start mb-3">
|
||||||
key={groupIndex}
|
<div>
|
||||||
className="bg-gray-50 p-3 rounded-lg"
|
<h4 className="font-medium">{group.groupName}</h4>
|
||||||
>
|
<p className="text-sm text-gray-600">{group.description}</p>
|
||||||
<div className="flex justify-between items-start mb-3">
|
<p className="text-sm text-gray-600">Ağırlık: {group.weight}%</p>
|
||||||
<div>
|
|
||||||
<h4 className="font-medium">{group.groupName}</h4>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
{group.description}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Ağırlık: {group.weight}%
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{isEditMode && (
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => handleEditQuestionGroup(group)}
|
|
||||||
className="text-blue-600 hover:text-blue-900"
|
|
||||||
>
|
|
||||||
<FaEdit className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleAddQuestion(group)}
|
|
||||||
className="text-green-600 hover:text-green-900"
|
|
||||||
>
|
|
||||||
<FaQuestionCircle className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
{isEditMode && (
|
||||||
{/* Questions */}
|
<div className="flex gap-2">
|
||||||
<div className="space-y-2">
|
<button
|
||||||
{group.questions?.map((question, questionIndex) => (
|
onClick={() => handleEditQuestionGroup(group)}
|
||||||
<div
|
className="text-blue-600 hover:text-blue-900"
|
||||||
key={questionIndex}
|
|
||||||
className="bg-white p-2 rounded border"
|
|
||||||
>
|
>
|
||||||
<div className="flex justify-between items-start">
|
<FaEdit className="w-4 h-4" />
|
||||||
<div className="flex-1">
|
</button>
|
||||||
<p className="text-sm">
|
<button
|
||||||
{question.questionText}
|
onClick={() => handleAddQuestion(group)}
|
||||||
</p>
|
className="text-green-600 hover:text-green-900"
|
||||||
<div className="flex gap-4 mt-1">
|
>
|
||||||
<span className="text-xs text-gray-500">
|
<FaQuestionCircle className="w-4 h-4" />
|
||||||
Tip:{" "}
|
</button>
|
||||||
{question.questionType ===
|
</div>
|
||||||
QuestionTypeEnum.Rating
|
)}
|
||||||
? "Puanlama"
|
|
||||||
: question.questionType ===
|
|
||||||
QuestionTypeEnum.MultipleChoice
|
|
||||||
? "Çoktan Seçmeli"
|
|
||||||
: question.questionType ===
|
|
||||||
QuestionTypeEnum.Text
|
|
||||||
? "Metin"
|
|
||||||
: "Evet/Hayır"}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
Ağırlık: {question.weight}%
|
|
||||||
</span>
|
|
||||||
{question.isRequired && (
|
|
||||||
<span className="text-xs text-red-500">
|
|
||||||
Zorunlu
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{isEditMode && (
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
handleEditQuestion(question, group)
|
|
||||||
}
|
|
||||||
className="text-blue-600 hover:text-blue-900"
|
|
||||||
>
|
|
||||||
<FaEdit className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
)}
|
{/* Questions */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
{group.questions?.map((question, questionIndex) => (
|
||||||
|
<div key={questionIndex} className="bg-white p-2 rounded border">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-sm">{question.questionText}</p>
|
||||||
|
<div className="flex gap-4 mt-1">
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
Tip:{' '}
|
||||||
|
{question.questionType === QuestionTypeEnum.Rating
|
||||||
|
? 'Puanlama'
|
||||||
|
: question.questionType === QuestionTypeEnum.MultipleChoice
|
||||||
|
? 'Çoktan Seçmeli'
|
||||||
|
: question.questionType === QuestionTypeEnum.Text
|
||||||
|
? 'Metin'
|
||||||
|
: 'Evet/Hayır'}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
Ağırlık: {question.weight}%
|
||||||
|
</span>
|
||||||
|
{question.isRequired && (
|
||||||
|
<span className="text-xs text-red-500">Zorunlu</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{isEditMode && (
|
||||||
|
<button
|
||||||
|
onClick={() => handleEditQuestion(question, group)}
|
||||||
|
className="text-blue-600 hover:text-blue-900"
|
||||||
|
>
|
||||||
|
<FaEdit className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -593,7 +529,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
onClick={() => setShowTemplateModal(false)}
|
onClick={() => setShowTemplateModal(false)}
|
||||||
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
|
||||||
>
|
>
|
||||||
{selectedTemplate && !isEditMode ? "Kapat" : "İptal"}
|
{selectedTemplate && !isEditMode ? 'Kapat' : 'İptal'}
|
||||||
</button>
|
</button>
|
||||||
{(isEditMode || !selectedTemplate) && (
|
{(isEditMode || !selectedTemplate) && (
|
||||||
<button
|
<button
|
||||||
|
|
@ -615,9 +551,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||||
<div className="flex justify-between items-center mb-4">
|
<div className="flex justify-between items-center mb-4">
|
||||||
<h2 className="text-lg font-bold">
|
<h2 className="text-lg font-bold">
|
||||||
{selectedQuestionGroup
|
{selectedQuestionGroup ? 'Soru Grubu Düzenle' : 'Yeni Soru Grubu'}
|
||||||
? "Soru Grubu Düzenle"
|
|
||||||
: "Yeni Soru Grubu"}
|
|
||||||
</h2>
|
</h2>
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowQuestionModal(false)}
|
onClick={() => setShowQuestionModal(false)}
|
||||||
|
|
@ -629,9 +563,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Grup Adı</label>
|
||||||
Grup Adı
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={questionGroupForm.groupName}
|
value={questionGroupForm.groupName}
|
||||||
|
|
@ -646,9 +578,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
|
||||||
Açıklama
|
|
||||||
</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
value={questionGroupForm.description}
|
value={questionGroupForm.description}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
|
|
@ -682,9 +612,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Sıra</label>
|
||||||
Sıra
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
|
|
@ -726,7 +654,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||||
<div className="flex justify-between items-center mb-4">
|
<div className="flex justify-between items-center mb-4">
|
||||||
<h2 className="text-lg font-bold">
|
<h2 className="text-lg font-bold">
|
||||||
{selectedQuestion ? "Soru Düzenle" : "Yeni Soru"}
|
{selectedQuestion ? 'Soru Düzenle' : 'Yeni Soru'}
|
||||||
</h2>
|
</h2>
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowQuestionItemModal(false)}
|
onClick={() => setShowQuestionItemModal(false)}
|
||||||
|
|
@ -738,9 +666,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Soru Metni</label>
|
||||||
Soru Metni
|
|
||||||
</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
value={questionForm.questionText}
|
value={questionForm.questionText}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
|
|
@ -755,9 +681,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Soru Tipi</label>
|
||||||
Soru Tipi
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={questionForm.questionType}
|
value={questionForm.questionType}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
|
|
@ -769,9 +693,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
||||||
>
|
>
|
||||||
<option value={QuestionTypeEnum.Rating}>Puanlama</option>
|
<option value={QuestionTypeEnum.Rating}>Puanlama</option>
|
||||||
<option value={QuestionTypeEnum.MultipleChoice}>
|
<option value={QuestionTypeEnum.MultipleChoice}>Çoktan Seçmeli</option>
|
||||||
Çoktan Seçmeli
|
|
||||||
</option>
|
|
||||||
<option value={QuestionTypeEnum.Text}>Metin</option>
|
<option value={QuestionTypeEnum.Text}>Metin</option>
|
||||||
<option value={QuestionTypeEnum.YesNo}>Evet/Hayır</option>
|
<option value={QuestionTypeEnum.YesNo}>Evet/Hayır</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
@ -797,9 +719,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Sıra</label>
|
||||||
Sıra
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
|
|
@ -828,10 +748,7 @@ const Degree360Templates: React.FC = () => {
|
||||||
}
|
}
|
||||||
className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
|
className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
|
||||||
/>
|
/>
|
||||||
<label
|
<label htmlFor="isRequired" className="ml-2 block text-sm text-gray-700">
|
||||||
htmlFor="isRequired"
|
|
||||||
className="ml-2 block text-sm text-gray-700"
|
|
||||||
>
|
|
||||||
Zorunlu soru
|
Zorunlu soru
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -855,8 +772,8 @@ const Degree360Templates: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default Degree360Templates;
|
export default Degree360Templates
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
FaPlus,
|
FaPlus,
|
||||||
FaEdit,
|
FaEdit,
|
||||||
|
|
@ -9,53 +9,51 @@ import {
|
||||||
FaEye,
|
FaEye,
|
||||||
FaList,
|
FaList,
|
||||||
FaTh,
|
FaTh,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { HrDepartment } from "../../../types/hr";
|
import { HrDepartment } from '../../../types/hr'
|
||||||
import DataTable, { Column } from "../../../components/common/DataTable";
|
import DataTable, { Column } from '../../../components/common/DataTable'
|
||||||
import { mockDepartments } from "../../../mocks/mockDepartments";
|
import { mockDepartments } from '../../../mocks/mockDepartments'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
import { mockCostCenters } from "../../../mocks/mockCostCenters";
|
import { mockCostCenters } from '../../../mocks/mockCostCenters'
|
||||||
import DepartmentFormModal from "./DepartmentFormModal";
|
import DepartmentFormModal from './DepartmentFormModal'
|
||||||
import DepartmentViewModal from "./DepartmentViewModal";
|
import DepartmentViewModal from './DepartmentViewModal'
|
||||||
import Widget from "../../../components/common/Widget";
|
import Widget from '../../../components/common/Widget'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
const DepartmentManagement: React.FC = () => {
|
const DepartmentManagement: React.FC = () => {
|
||||||
const [departments, setDepartments] =
|
const [departments, setDepartments] = useState<HrDepartment[]>(mockDepartments)
|
||||||
useState<HrDepartment[]>(mockDepartments);
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [selectedParent, setSelectedParent] = useState<string>('all')
|
||||||
const [selectedParent, setSelectedParent] = useState<string>("all");
|
const [viewMode, setViewMode] = useState<'list' | 'cards'>('list')
|
||||||
const [viewMode, setViewMode] = useState<"list" | "cards">("list");
|
|
||||||
|
|
||||||
// Modal states
|
// Modal states
|
||||||
const [isFormModalOpen, setIsFormModalOpen] = useState(false);
|
const [isFormModalOpen, setIsFormModalOpen] = useState(false)
|
||||||
const [isViewModalOpen, setIsViewModalOpen] = useState(false);
|
const [isViewModalOpen, setIsViewModalOpen] = useState(false)
|
||||||
const [selectedDepartment, setSelectedDepartment] = useState<
|
const [selectedDepartment, setSelectedDepartment] = useState<HrDepartment | undefined>()
|
||||||
HrDepartment | undefined
|
const [modalTitle, setModalTitle] = useState('')
|
||||||
>();
|
|
||||||
const [modalTitle, setModalTitle] = useState("");
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
setSelectedDepartment(undefined);
|
setSelectedDepartment(undefined)
|
||||||
setModalTitle("Yeni Departman");
|
setModalTitle('Yeni Departman')
|
||||||
setIsFormModalOpen(true);
|
setIsFormModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEdit = (department: HrDepartment) => {
|
const handleEdit = (department: HrDepartment) => {
|
||||||
setSelectedDepartment(department);
|
setSelectedDepartment(department)
|
||||||
setModalTitle("Departman Düzenle");
|
setModalTitle('Departman Düzenle')
|
||||||
setIsFormModalOpen(true);
|
setIsFormModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleView = (department: HrDepartment) => {
|
const handleView = (department: HrDepartment) => {
|
||||||
setSelectedDepartment(department);
|
setSelectedDepartment(department)
|
||||||
setIsViewModalOpen(true);
|
setIsViewModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDelete = (id: string) => {
|
const handleDelete = (id: string) => {
|
||||||
if (confirm("Bu departmanı silmek istediğinizden emin misiniz?")) {
|
if (confirm('Bu departmanı silmek istediğinizden emin misiniz?')) {
|
||||||
setDepartments((prev) => prev.filter((dept) => dept.id !== id));
|
setDepartments((prev) => prev.filter((dept) => dept.id !== id))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSave = (departmentData: Partial<HrDepartment>) => {
|
const handleSave = (departmentData: Partial<HrDepartment>) => {
|
||||||
if (selectedDepartment) {
|
if (selectedDepartment) {
|
||||||
|
|
@ -64,9 +62,9 @@ const DepartmentManagement: React.FC = () => {
|
||||||
prev.map((dept) =>
|
prev.map((dept) =>
|
||||||
dept.id === selectedDepartment.id
|
dept.id === selectedDepartment.id
|
||||||
? { ...dept, ...departmentData, lastModificationTime: new Date() }
|
? { ...dept, ...departmentData, lastModificationTime: new Date() }
|
||||||
: dept
|
: dept,
|
||||||
)
|
),
|
||||||
);
|
)
|
||||||
} else {
|
} else {
|
||||||
// Add new department
|
// Add new department
|
||||||
const newDepartment: HrDepartment = {
|
const newDepartment: HrDepartment = {
|
||||||
|
|
@ -75,37 +73,35 @@ const DepartmentManagement: React.FC = () => {
|
||||||
subDepartments: [],
|
subDepartments: [],
|
||||||
creationTime: new Date(),
|
creationTime: new Date(),
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
} as HrDepartment;
|
} as HrDepartment
|
||||||
setDepartments((prev) => [...prev, newDepartment]);
|
setDepartments((prev) => [...prev, newDepartment])
|
||||||
}
|
}
|
||||||
setIsFormModalOpen(false);
|
setIsFormModalOpen(false)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleCloseFormModal = () => {
|
const handleCloseFormModal = () => {
|
||||||
setIsFormModalOpen(false);
|
setIsFormModalOpen(false)
|
||||||
setSelectedDepartment(undefined);
|
setSelectedDepartment(undefined)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleCloseViewModal = () => {
|
const handleCloseViewModal = () => {
|
||||||
setIsViewModalOpen(false);
|
setIsViewModalOpen(false)
|
||||||
setSelectedDepartment(undefined);
|
setSelectedDepartment(undefined)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEditFromView = (department: HrDepartment) => {
|
const handleEditFromView = (department: HrDepartment) => {
|
||||||
setIsViewModalOpen(false);
|
setIsViewModalOpen(false)
|
||||||
handleEdit(department);
|
handleEdit(department)
|
||||||
};
|
}
|
||||||
|
|
||||||
mockDepartments.forEach((dept) => {
|
mockDepartments.forEach((dept) => {
|
||||||
if (dept.managerId) {
|
if (dept.managerId) {
|
||||||
dept.manager = mockEmployees.find((emp) => emp.id === dept.managerId);
|
dept.manager = mockEmployees.find((emp) => emp.id === dept.managerId)
|
||||||
}
|
}
|
||||||
if (dept.costCenterId) {
|
if (dept.costCenterId) {
|
||||||
dept.costCenter = mockCostCenters.find(
|
dept.costCenter = mockCostCenters.find((cc) => cc.id === dept.costCenterId)
|
||||||
(cc) => cc.id === dept.costCenterId
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
const filteredDepartments = departments.filter((department) => {
|
const filteredDepartments = departments.filter((department) => {
|
||||||
if (
|
if (
|
||||||
|
|
@ -113,96 +109,81 @@ const DepartmentManagement: React.FC = () => {
|
||||||
!department.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
!department.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
||||||
!department.code.toLowerCase().includes(searchTerm.toLowerCase())
|
!department.code.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
) {
|
) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
if (
|
if (selectedParent !== 'all' && department.parentDepartmentId !== selectedParent) {
|
||||||
selectedParent !== "all" &&
|
return false
|
||||||
department.parentDepartmentId !== selectedParent
|
|
||||||
) {
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
return true;
|
return true
|
||||||
});
|
})
|
||||||
|
|
||||||
const columns: Column<HrDepartment>[] = [
|
const columns: Column<HrDepartment>[] = [
|
||||||
{
|
{
|
||||||
key: "code",
|
key: 'code',
|
||||||
header: "Departman Kodu",
|
header: 'Departman Kodu',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "name",
|
key: 'name',
|
||||||
header: "Departman Adı",
|
header: 'Departman Adı',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "parentDepartment",
|
key: 'parentDepartment',
|
||||||
header: "Üst Departman",
|
header: 'Üst Departman',
|
||||||
render: (department: HrDepartment) =>
|
render: (department: HrDepartment) => department.parentDepartment?.name || '-',
|
||||||
department.parentDepartment?.name || "-",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "manager",
|
key: 'manager',
|
||||||
header: "Yönetici",
|
header: 'Yönetici',
|
||||||
render: (department: HrDepartment) => department.manager?.fullName || "-",
|
render: (department: HrDepartment) => department.manager?.fullName || '-',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "employeeCount",
|
key: 'employeeCount',
|
||||||
header: "Personel Sayısı",
|
header: 'Personel Sayısı',
|
||||||
render: (department: HrDepartment) => (
|
render: (department: HrDepartment) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaUsers className="w-4 h-4 text-gray-500" />
|
<FaUsers className="w-4 h-4 text-gray-500" />
|
||||||
<span>
|
<span>{mockEmployees.filter((a) => a.departmantId == department.id).length || 0}</span>
|
||||||
{mockEmployees.filter((a) => a.departmantId == department.id)
|
|
||||||
.length || 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "costCenter",
|
key: 'costCenter',
|
||||||
header: "Maliyet Merkezi",
|
header: 'Maliyet Merkezi',
|
||||||
render: (department: HrDepartment) => (
|
render: (department: HrDepartment) => (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<span className="font-medium">
|
<span className="font-medium">{department.costCenter?.code || '-'}</span>
|
||||||
{department.costCenter?.code || "-"}
|
<span className="text-xs text-gray-500">{department.costCenter?.name || '-'}</span>
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{department.costCenter?.name || "-"}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "budget",
|
key: 'budget',
|
||||||
header: "Bütçe",
|
header: 'Bütçe',
|
||||||
render: (department: HrDepartment) => (
|
render: (department: HrDepartment) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
||||||
<span>
|
<span>{department.budget ? `₺${department.budget.toLocaleString()}` : '-'}</span>
|
||||||
{department.budget ? `₺${department.budget.toLocaleString()}` : "-"}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "status",
|
key: 'status',
|
||||||
header: "Durum",
|
header: 'Durum',
|
||||||
render: (department: HrDepartment) => (
|
render: (department: HrDepartment) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
department.isActive
|
department.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{department.isActive ? "Aktif" : "Pasif"}
|
{department.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actions",
|
key: 'actions',
|
||||||
header: "İşlemler",
|
header: 'İşlemler',
|
||||||
render: (department: HrDepartment) => (
|
render: (department: HrDepartment) => (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -229,246 +210,234 @@ const DepartmentManagement: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-2">
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||||
<h2 className="text-lg font-bold text-gray-900">
|
<div>
|
||||||
Departman Yönetimi
|
<h2 className="text-lg font-bold text-gray-900">Departman Yönetimi</h2>
|
||||||
</h2>
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
Organizasyon yapısını ve departmanları yönetin
|
||||||
Organizasyon yapısını ve departmanları yönetin
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex items-center gap-3">
|
{/* View Mode Toggle */}
|
||||||
{/* View Mode Toggle */}
|
<div className="flex bg-gray-100 rounded-lg p-0.5">
|
||||||
<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>
|
||||||
<button
|
<button
|
||||||
onClick={() => setViewMode("list")}
|
onClick={handleAdd}
|
||||||
className={`p-1.5 rounded-md transition-colors ${
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 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" />
|
<FaPlus className="w-4 h-4" />
|
||||||
</button>
|
Yeni Departman
|
||||||
<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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
onClick={handleAdd}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaPlus className="w-4 h-4" />
|
|
||||||
Yeni Departman
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Cards */}
|
{/* Stats Cards */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Departman"
|
title="Toplam Departman"
|
||||||
value={departments.length}
|
value={departments.length}
|
||||||
color="blue"
|
color="blue"
|
||||||
icon="FaBuilding"
|
icon="FaBuilding"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Personel"
|
title="Toplam Personel"
|
||||||
value={mockEmployees.length}
|
value={mockEmployees.length}
|
||||||
color="green"
|
color="green"
|
||||||
icon="FaUsers"
|
icon="FaUsers"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Ana Departmanlar"
|
title="Ana Departmanlar"
|
||||||
value={departments.filter((d) => !d.parentDepartmentId).length}
|
value={departments.filter((d) => !d.parentDepartmentId).length}
|
||||||
color="purple"
|
color="purple"
|
||||||
icon="FaBuilding"
|
icon="FaBuilding"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Bütçe"
|
title="Toplam Bütçe"
|
||||||
value={`₺${departments
|
value={`₺${departments
|
||||||
.reduce((total, dept) => total + (dept.budget || 0), 0)
|
.reduce((total, dept) => total + (dept.budget || 0), 0)
|
||||||
.toLocaleString()}`}
|
.toLocaleString()}`}
|
||||||
color="orange"
|
color="orange"
|
||||||
icon="FaDollarSign"
|
icon="FaDollarSign"
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filters */}
|
|
||||||
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
|
|
||||||
<div className="flex-1">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Departman adı veya kodu ara..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<select
|
{/* Filters */}
|
||||||
value={selectedParent}
|
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
|
||||||
onChange={(e) => setSelectedParent(e.target.value)}
|
<div className="flex-1">
|
||||||
className="px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-0 sm:min-w-[200px]"
|
<input
|
||||||
>
|
type="text"
|
||||||
<option value="all">Tüm Departmanlar</option>
|
placeholder="Departman adı veya kodu ara..."
|
||||||
{departments
|
value={searchTerm}
|
||||||
.filter((d) => !d.parentDepartmentId)
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
.map((dept) => (
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
<option key={dept.id} value={dept.id}>
|
/>
|
||||||
{dept.name} Alt Departmanları
|
</div>
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Data Display */}
|
<select
|
||||||
{viewMode === "list" ? (
|
value={selectedParent}
|
||||||
<div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
|
onChange={(e) => setSelectedParent(e.target.value)}
|
||||||
<DataTable data={filteredDepartments} columns={columns} />
|
className="px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-0 sm:min-w-[200px]"
|
||||||
|
>
|
||||||
|
<option value="all">Tüm Departmanlar</option>
|
||||||
|
{departments
|
||||||
|
.filter((d) => !d.parentDepartmentId)
|
||||||
|
.map((dept) => (
|
||||||
|
<option key={dept.id} value={dept.id}>
|
||||||
|
{dept.name} Alt Departmanları
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
{/* Data Display */}
|
||||||
{filteredDepartments.map((department) => (
|
{viewMode === 'list' ? (
|
||||||
<div
|
<div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
|
||||||
key={department.id}
|
<DataTable data={filteredDepartments} columns={columns} />
|
||||||
className="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow p-3"
|
</div>
|
||||||
>
|
) : (
|
||||||
{/* Card Header */}
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||||
<div className="flex items-start justify-between mb-4">
|
{filteredDepartments.map((department) => (
|
||||||
<div className="flex items-center space-x-3">
|
<div
|
||||||
<div
|
key={department.id}
|
||||||
className={`w-12 h-12 rounded-lg flex items-center justify-center ${
|
className="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow p-3"
|
||||||
|
>
|
||||||
|
{/* Card Header */}
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div
|
||||||
|
className={`w-12 h-12 rounded-lg flex items-center justify-center ${
|
||||||
|
department.isActive
|
||||||
|
? 'bg-blue-100 text-blue-600'
|
||||||
|
: 'bg-gray-100 text-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FaBuilding className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-sm text-gray-900 truncate">
|
||||||
|
{department.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600">{department.code}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
department.isActive
|
department.isActive
|
||||||
? "bg-blue-100 text-blue-600"
|
? 'bg-green-100 text-green-800'
|
||||||
: "bg-gray-100 text-gray-500"
|
: 'bg-red-100 text-red-800'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<FaBuilding className="w-6 h-6" />
|
{department.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-sm text-gray-900 truncate">
|
|
||||||
{department.name}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600">{department.code}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
className={`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>
|
|
||||||
|
|
||||||
{/* Card Content */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
{department.parentDepartment && (
|
|
||||||
<div className="flex items-center text-xs text-gray-600">
|
|
||||||
<FaBuilding className="w-4 h-4 mr-2 text-gray-400" />
|
|
||||||
<span>Üst: {department.parentDepartment.name}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{department.manager && (
|
|
||||||
<div className="flex items-center text-xs text-gray-600">
|
|
||||||
<FaUsers className="w-4 h-4 mr-2 text-gray-400" />
|
|
||||||
<span>Yönetici: {department.manager.fullName}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-center text-xs text-gray-600">
|
|
||||||
<FaUsers className="w-4 h-4 mr-2 text-gray-400" />
|
|
||||||
<span>
|
|
||||||
{
|
|
||||||
mockEmployees.filter(
|
|
||||||
(emp) => emp.departmantId === department.id
|
|
||||||
).length
|
|
||||||
}{" "}
|
|
||||||
Personel
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{department.budget && (
|
{/* Card Content */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
{department.parentDepartment && (
|
||||||
|
<div className="flex items-center text-xs text-gray-600">
|
||||||
|
<FaBuilding className="w-4 h-4 mr-2 text-gray-400" />
|
||||||
|
<span>Üst: {department.parentDepartment.name}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{department.manager && (
|
||||||
|
<div className="flex items-center text-xs text-gray-600">
|
||||||
|
<FaUsers className="w-4 h-4 mr-2 text-gray-400" />
|
||||||
|
<span>Yönetici: {department.manager.fullName}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="flex items-center text-xs text-gray-600">
|
<div className="flex items-center text-xs text-gray-600">
|
||||||
<FaDollarSign className="w-4 h-4 mr-2 text-gray-400" />
|
<FaUsers className="w-4 h-4 mr-2 text-gray-400" />
|
||||||
<span>₺{department.budget.toLocaleString()}</span>
|
<span>
|
||||||
|
{mockEmployees.filter((emp) => emp.departmantId === department.id).length}{' '}
|
||||||
|
Personel
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{department.costCenter && (
|
{department.budget && (
|
||||||
<div className="text-xs text-gray-600">
|
<div className="flex items-center text-xs text-gray-600">
|
||||||
<div className="font-medium">
|
<FaDollarSign className="w-4 h-4 mr-2 text-gray-400" />
|
||||||
{department.costCenter.code}
|
<span>₺{department.budget.toLocaleString()}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-gray-500">
|
)}
|
||||||
{department.costCenter.name}
|
|
||||||
|
{department.costCenter && (
|
||||||
|
<div className="text-xs text-gray-600">
|
||||||
|
<div className="font-medium">{department.costCenter.code}</div>
|
||||||
|
<div className="text-xs text-gray-500">{department.costCenter.name}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Card Actions */}
|
{/* Card Actions */}
|
||||||
<div className="flex justify-end space-x-1 mt-3 pt-3 border-t border-gray-100">
|
<div className="flex justify-end space-x-1 mt-3 pt-3 border-t border-gray-100">
|
||||||
<button
|
<button
|
||||||
onClick={() => handleView(department)}
|
onClick={() => handleView(department)}
|
||||||
className="p-1.5 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
|
className="p-1.5 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
|
||||||
title="Görüntüle"
|
title="Görüntüle"
|
||||||
>
|
>
|
||||||
<FaEye className="w-4 h-4" />
|
<FaEye className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleEdit(department)}
|
onClick={() => handleEdit(department)}
|
||||||
className="p-1.5 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
className="p-1.5 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
||||||
title="Düzenle"
|
title="Düzenle"
|
||||||
>
|
>
|
||||||
<FaEdit className="w-4 h-4" />
|
<FaEdit className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleDelete(department.id)}
|
onClick={() => handleDelete(department.id)}
|
||||||
className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||||
title="Sil"
|
title="Sil"
|
||||||
>
|
>
|
||||||
<FaTrash className="w-4 h-4" />
|
<FaTrash className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
{filteredDepartments.length === 0 && (
|
{filteredDepartments.length === 0 && (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
<FaBuilding className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
<FaBuilding className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
||||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
<h3 className="text-lg font-medium text-gray-900 mb-2">Departman bulunamadı</h3>
|
||||||
Departman bulunamadı
|
<p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
|
||||||
</h3>
|
</div>
|
||||||
<p className="text-gray-500">
|
)}
|
||||||
Arama kriterlerinizi değiştirmeyi deneyin.
|
</div>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Modals */}
|
{/* Modals */}
|
||||||
<DepartmentFormModal
|
<DepartmentFormModal
|
||||||
|
|
@ -485,8 +454,8 @@ const DepartmentManagement: React.FC = () => {
|
||||||
department={selectedDepartment || null}
|
department={selectedDepartment || null}
|
||||||
onEdit={handleEditFromView}
|
onEdit={handleEditFromView}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default DepartmentManagement;
|
export default DepartmentManagement
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
FaUser,
|
FaUser,
|
||||||
FaEnvelope,
|
FaEnvelope,
|
||||||
|
|
@ -9,194 +9,174 @@ import {
|
||||||
FaEye,
|
FaEye,
|
||||||
FaTrash,
|
FaTrash,
|
||||||
FaPlus,
|
FaPlus,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { HrEmployee, EmployeeStatusEnum } from "../../../types/hr";
|
import { HrEmployee, EmployeeStatusEnum } from '../../../types/hr'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
import {
|
import { getEmployeeStatusColor, getEmployeeStatusText } from '../../../utils/erp'
|
||||||
getEmployeeStatusColor,
|
import { Container } from '@/components/shared'
|
||||||
getEmployeeStatusText,
|
|
||||||
} from "../../../utils/erp";
|
|
||||||
|
|
||||||
const EmployeeCards: React.FC = () => {
|
const EmployeeCards: React.FC = () => {
|
||||||
const [employees] = useState<HrEmployee[]>(mockEmployees);
|
const [employees] = useState<HrEmployee[]>(mockEmployees)
|
||||||
const [selectedDepartment, setSelectedDepartment] = useState<string>("all");
|
const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
|
||||||
const [selectedStatus, setSelectedStatus] = useState<string>("all");
|
const [selectedStatus, setSelectedStatus] = useState<string>('all')
|
||||||
|
|
||||||
const handleEdit = (employee: HrEmployee) => {
|
const handleEdit = (employee: HrEmployee) => {
|
||||||
console.log("Edit employee:", employee);
|
console.log('Edit employee:', employee)
|
||||||
// Implement edit functionality
|
// Implement edit functionality
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleView = (employee: HrEmployee) => {
|
const handleView = (employee: HrEmployee) => {
|
||||||
console.log("View employee:", employee);
|
console.log('View employee:', employee)
|
||||||
// Implement view functionality
|
// Implement view functionality
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDelete = (id: string) => {
|
const handleDelete = (id: string) => {
|
||||||
console.log("Delete employee:", id);
|
console.log('Delete employee:', id)
|
||||||
// Implement delete functionality
|
// Implement delete functionality
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
console.log("Add new employee");
|
console.log('Add new employee')
|
||||||
// Implement add functionality
|
// Implement add functionality
|
||||||
};
|
}
|
||||||
|
|
||||||
const filteredEmployees = employees.filter((employee) => {
|
const filteredEmployees = employees.filter((employee) => {
|
||||||
if (
|
if (selectedDepartment !== 'all' && employee.department?.id !== selectedDepartment) {
|
||||||
selectedDepartment !== "all" &&
|
return false
|
||||||
employee.department?.id !== selectedDepartment
|
|
||||||
) {
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
if (
|
if (selectedStatus !== 'all' && employee.employeeStatus !== selectedStatus) {
|
||||||
selectedStatus !== "all" &&
|
return false
|
||||||
employee.employeeStatus !== selectedStatus
|
|
||||||
) {
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
return true;
|
return true
|
||||||
});
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 pt-2">
|
<Container>
|
||||||
{/* Header with Add Button */}
|
<div className="space-y-2">
|
||||||
<div className="flex justify-between items-center">
|
{/* Header with Add Button */}
|
||||||
<h2 className="text-xl font-bold text-gray-900">Personel Kartları</h2>
|
<div className="flex justify-between items-center">
|
||||||
<button
|
<h2 className="text-xl font-bold text-gray-900">Personel Kartları</h2>
|
||||||
onClick={handleAdd}
|
<button
|
||||||
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"
|
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>
|
|
||||||
<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ılmış
|
|
||||||
</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 */}
|
<FaPlus className="w-4 h-4" />
|
||||||
<div className="flex items-center justify-between mb-3">
|
Yeni Personel
|
||||||
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
</button>
|
||||||
<FaUser className="w-6 h-6 text-blue-600" />
|
</div>
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${getEmployeeStatusColor(
|
|
||||||
employee.employeeStatus
|
|
||||||
)}`}
|
|
||||||
>
|
|
||||||
{getEmployeeStatusText(employee.employeeStatus)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Employee Info */}
|
{/* Filters */}
|
||||||
<div className="space-y-1 mb-3">
|
<div className="flex gap-3 mb-4">
|
||||||
<h3 className="font-semibold text-sm text-gray-900">
|
<select
|
||||||
{employee.fullName}
|
value={selectedDepartment}
|
||||||
</h3>
|
onChange={(e) => setSelectedDepartment(e.target.value)}
|
||||||
<p className="text-xs text-gray-600">
|
className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
{employee.jobPosition?.name}
|
>
|
||||||
</p>
|
<option value="all">Tüm Departmanlar</option>
|
||||||
<p className="text-sm text-gray-500">
|
{/* Department options would be populated from departments list */}
|
||||||
{employee.department?.name}
|
</select>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact Info */}
|
<select
|
||||||
<div className="space-y-1.5 mb-3">
|
value={selectedStatus}
|
||||||
<div className="flex items-center text-xs text-gray-600">
|
onChange={(e) => setSelectedStatus(e.target.value)}
|
||||||
<FaEnvelope className="w-4 h-4 mr-2" />
|
className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
<span className="truncate">{employee.email}</span>
|
>
|
||||||
</div>
|
<option value="all">Tüm Durumlar</option>
|
||||||
{employee.phone && (
|
<option value={EmployeeStatusEnum.Active}>Aktif</option>
|
||||||
<div className="flex items-center text-xs text-gray-600">
|
<option value={EmployeeStatusEnum.Inactive}>Pasif</option>
|
||||||
<FaPhone className="w-4 h-4 mr-2" />
|
<option value={EmployeeStatusEnum.OnLeave}>İzinli</option>
|
||||||
<span>{employee.phone}</span>
|
<option value={EmployeeStatusEnum.Suspended}>Askıda</option>
|
||||||
|
<option value={EmployeeStatusEnum.Terminated}>İşten Çıkarılmış</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>
|
</div>
|
||||||
)}
|
<span
|
||||||
<div className="flex items-center text-xs text-gray-600">
|
className={`px-2 py-1 text-xs font-medium rounded-full ${getEmployeeStatusColor(
|
||||||
<FaCalendar className="w-4 h-4 mr-2" />
|
employee.employeeStatus,
|
||||||
<span>
|
)}`}
|
||||||
{new Date(employee.hireDate).toLocaleDateString("tr-TR")}
|
>
|
||||||
|
{getEmployeeStatusText(employee.employeeStatus)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center text-xs text-gray-600">
|
|
||||||
<FaCertificate className="w-4 h-4 mr-2" />
|
{/* Employee Info */}
|
||||||
<span>{employee.code}</span>
|
<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>
|
</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>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EmployeeCards;
|
{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
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,77 +1,497 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React from "react";
|
||||||
import { useParams, useNavigate } from "react-router-dom";
|
import {
|
||||||
|
FaTimes,
|
||||||
|
FaUser,
|
||||||
|
FaIdCard,
|
||||||
|
FaEnvelope,
|
||||||
|
FaPhone,
|
||||||
|
FaCalendar,
|
||||||
|
FaBuilding,
|
||||||
|
FaBriefcase,
|
||||||
|
FaDollarSign,
|
||||||
|
FaMapMarkerAlt,
|
||||||
|
FaUserShield,
|
||||||
|
FaHeartbeat,
|
||||||
|
FaEdit,
|
||||||
|
FaClock,
|
||||||
|
FaBirthdayCake,
|
||||||
|
FaGraduationCap,
|
||||||
|
FaAward,
|
||||||
|
FaHistory,
|
||||||
|
} from "react-icons/fa";
|
||||||
import { HrEmployee } from "../../../types/hr";
|
import { HrEmployee } from "../../../types/hr";
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import {
|
||||||
import EmployeeViewModal from "./EmployeeViewModal";
|
getEmployeeStatusColor,
|
||||||
import LoadingSpinner from "../../../components/common/LoadingSpinner";
|
getEmployeeStatusIcon,
|
||||||
|
getEmployeeStatusText,
|
||||||
|
} from "../../../utils/erp";
|
||||||
|
|
||||||
const EmployeeView: React.FC = () => {
|
interface EmployeeViewModalProps {
|
||||||
const { id } = useParams<{ id: string }>();
|
isOpen: boolean;
|
||||||
const navigate = useNavigate();
|
onClose: () => void;
|
||||||
const [employee, setEmployee] = useState<HrEmployee | null>(null);
|
employee: HrEmployee | null;
|
||||||
const [loading, setLoading] = useState(true);
|
onEdit?: (employee: HrEmployee) => void;
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
const EmployeeViewModal: React.FC<EmployeeViewModalProps> = ({
|
||||||
const loadEmployee = async () => {
|
isOpen,
|
||||||
setLoading(true);
|
onClose,
|
||||||
// Simulate API call
|
employee,
|
||||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
onEdit,
|
||||||
|
}) => {
|
||||||
|
if (!isOpen || !employee) return null;
|
||||||
|
|
||||||
const foundEmployee = mockEmployees.find((emp) => emp.id === id);
|
const formatDate = (date: Date | string): string => {
|
||||||
setEmployee(foundEmployee || null);
|
return new Date(date).toLocaleDateString("tr-TR");
|
||||||
setLoading(false);
|
};
|
||||||
};
|
|
||||||
|
|
||||||
if (id) {
|
const calculateWorkDuration = (hireDate: Date): string => {
|
||||||
loadEmployee();
|
const now = new Date();
|
||||||
|
const hire = new Date(hireDate);
|
||||||
|
const diffTime = Math.abs(now.getTime() - hire.getTime());
|
||||||
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||||
|
const years = Math.floor(diffDays / 365);
|
||||||
|
const months = Math.floor((diffDays % 365) / 30);
|
||||||
|
|
||||||
|
if (years > 0) {
|
||||||
|
return `${years} yıl ${months} ay`;
|
||||||
}
|
}
|
||||||
}, [id]);
|
return `${months} ay`;
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
navigate("/admin/hr/employees");
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEdit = (employee: HrEmployee) => {
|
|
||||||
navigate(`/admin/hr/employees/edit/${employee.id}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center">
|
|
||||||
<LoadingSpinner />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!employee) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center">
|
|
||||||
<div className="text-center">
|
|
||||||
<h2 className="text-xl font-bold text-gray-900 mb-1">
|
|
||||||
Personel Bulunamadı
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 mb-3">
|
|
||||||
Aradığınız personel kaydı bulunamadı.
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onClick={handleClose}
|
|
||||||
className="px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
|
|
||||||
>
|
|
||||||
Personel Listesine Dön
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EmployeeViewModal
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||||
isOpen={true}
|
<div className="bg-white rounded-lg shadow-2xl w-full max-w-4xl max-h-[95vh] overflow-hidden flex flex-col">
|
||||||
onClose={handleClose}
|
{/* Header */}
|
||||||
employee={employee}
|
<div className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-3 flex-shrink-0">
|
||||||
onEdit={handleEdit}
|
<div className="flex items-center justify-between">
|
||||||
/>
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
|
||||||
|
<FaUser className="w-5 h-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-bold">{employee.fullName}</h2>
|
||||||
|
<p className="text-blue-100 text-sm">
|
||||||
|
{employee.jobPosition?.name || "Pozisyon Belirtilmemiş"}
|
||||||
|
</p>
|
||||||
|
<p className="text-blue-200 text-xs">{employee.code}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div
|
||||||
|
className={`px-2 py-0.5 rounded-full border flex items-center space-x-1.5 text-xs ${getEmployeeStatusColor(
|
||||||
|
employee.employeeStatus
|
||||||
|
)} bg-opacity-90`}
|
||||||
|
>
|
||||||
|
{getEmployeeStatusIcon(employee.employeeStatus)}
|
||||||
|
<span className="font-medium text-xs">
|
||||||
|
{getEmployeeStatusText(employee.employeeStatus)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{onEdit && (
|
||||||
|
<button
|
||||||
|
onClick={() => onEdit(employee)}
|
||||||
|
className="bg-white bg-opacity-20 hover:bg-opacity-30 text-white px-2 py-1 text-xs rounded-md flex items-center space-x-1.5 transition-all"
|
||||||
|
>
|
||||||
|
<FaEdit className="w-3 h-3" />
|
||||||
|
<span>Düzenle</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-white hover:bg-white hover:bg-opacity-20 p-1 rounded-lg transition-all"
|
||||||
|
>
|
||||||
|
<FaTimes className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-3 overflow-y-auto flex-grow">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
|
||||||
|
{/* Left Column - Personal Info */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
{/* Kişisel Bilgiler */}
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
||||||
|
<FaIdCard className="w-4 h-4 text-blue-600 mr-2" />
|
||||||
|
Kişisel Bilgiler
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaBirthdayCake className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Doğum Tarihi</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{formatDate(employee.birthDate)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaUser className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Cinsiyet</p>
|
||||||
|
<p className="font-medium text-sm">{employee.gender}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaHeartbeat className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Medeni Durum</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.maritalStatus}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaIdCard className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">TC Kimlik No</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.nationalId}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* İletişim Bilgileri */}
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
||||||
|
<FaPhone className="w-4 h-4 text-green-600 mr-2" />
|
||||||
|
İletişim Bilgileri
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaEnvelope className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">E-posta</p>
|
||||||
|
<p className="font-medium text-sm text-blue-600">
|
||||||
|
{employee.email}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{employee.phone && (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaPhone className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">İş Telefonu</p>
|
||||||
|
<p className="font-medium text-sm">{employee.phone}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{employee.personalPhone && (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaPhone className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Kişisel Telefon</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.personalPhone}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{employee.address && (
|
||||||
|
<div className="flex items-start space-x-2">
|
||||||
|
<FaMapMarkerAlt className="w-3 h-3 text-gray-500 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Adres</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.address.street}
|
||||||
|
<br />
|
||||||
|
{employee.address.city}, {employee.address.state}
|
||||||
|
<br />
|
||||||
|
{employee.address.postalCode},{" "}
|
||||||
|
{employee.address.country}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Acil Durum İletişim */}
|
||||||
|
{employee.emergencyContact && (
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
||||||
|
<FaUserShield className="w-4 h-4 text-red-600 mr-2" />
|
||||||
|
Acil Durum İletişim
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">İsim</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.emergencyContact.name}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Telefon</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.emergencyContact.phone}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Yakınlık</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.emergencyContact.relationship}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Middle Column - Work Info */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
{/* İş Bilgileri */}
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
||||||
|
<FaBriefcase className="w-4 h-4 text-purple-600 mr-2" />
|
||||||
|
İş Bilgileri
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaBuilding className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Departman</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.department?.name || "Belirtilmemiş"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaGraduationCap className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Pozisyon</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.jobPosition?.name || "Belirtilmemiş"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaCalendar className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">
|
||||||
|
İşe Başlama Tarihi
|
||||||
|
</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{formatDate(employee.hireDate)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaHistory className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Çalışma Süresi</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{calculateWorkDuration(employee.hireDate)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaBriefcase className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Çalışma Türü</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.employmentType}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{employee.workLocation && (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaMapMarkerAlt className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">
|
||||||
|
Çalışma Lokasyonu
|
||||||
|
</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.workLocation}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{employee.badgeNumber && (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FaIdCard className="w-3 h-3 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Rozet Numarası</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.badgeNumber}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Yönetici Bilgileri */}
|
||||||
|
{employee.manager && (
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
||||||
|
<FaUserShield className="w-4 h-4 text-indigo-600 mr-2" />
|
||||||
|
Yönetici
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
|
||||||
|
<FaUser className="w-5 h-5 text-indigo-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-sm text-gray-900">
|
||||||
|
{employee.manager.fullName}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-600">
|
||||||
|
{employee.manager.jobPosition?.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-600">
|
||||||
|
{employee.manager.email}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Performans ve Eğitimler */}
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
||||||
|
<FaAward className="w-4 h-4 text-amber-600 mr-2" />
|
||||||
|
Performans & Gelişim
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="text-center p-1.5 bg-white rounded-md">
|
||||||
|
<p className="text-xl font-bold text-amber-600">
|
||||||
|
{employee.evaluations?.length || 0}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-600">Değerlendirme</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-1.5 bg-white rounded-md">
|
||||||
|
<p className="text-xl font-bold text-emerald-600">
|
||||||
|
{employee.trainings?.length || 0}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-600">Eğitim</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column - Financial & Additional Info */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
{/* Maaş Bilgileri */}
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
||||||
|
<FaDollarSign className="w-4 h-4 text-emerald-600 mr-2" />
|
||||||
|
Maaş Bilgileri
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Temel Maaş</p>
|
||||||
|
<p className="text-xl font-bold text-emerald-600">
|
||||||
|
{employee.baseSalary?.toLocaleString()}{" "}
|
||||||
|
{employee.currency || "TRY"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{employee.payrollGroup && (
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Bordro Grubu</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.payrollGroup}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Banka Bilgileri */}
|
||||||
|
{employee.bankAccount && (
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
||||||
|
<FaDollarSign className="w-4 h-4 text-slate-600 mr-2" />
|
||||||
|
Banka Bilgileri
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Banka Adı</p>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{employee.bankAccount.bankName}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">Hesap Numarası</p>
|
||||||
|
<p className="font-mono text-xs">
|
||||||
|
{employee.bankAccount.accountNumber}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600">IBAN</p>
|
||||||
|
<p className="font-mono text-xs">
|
||||||
|
{employee.bankAccount.iban}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* İzin Durumu */}
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
||||||
|
<FaCalendar className="w-4 h-4 text-sky-600 mr-2" />
|
||||||
|
İzin Durumu
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 gap-2">
|
||||||
|
<div className="bg-white p-1.5 rounded-md flex justify-between items-center">
|
||||||
|
<span className="text-xs text-gray-600">Toplam İzin</span>
|
||||||
|
<span className="font-bold text-sm text-sky-600">
|
||||||
|
{employee.leaves?.length || 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-1.5 rounded-md flex justify-between items-center">
|
||||||
|
<span className="text-xs text-gray-600">Kalan İzin</span>
|
||||||
|
<span className="font-bold text-sm text-emerald-600">
|
||||||
|
15 gün
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sistem Bilgileri */}
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
||||||
|
<FaClock className="w-4 h-4 text-gray-600 mr-2" />
|
||||||
|
Sistem Bilgileri
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-2 text-xs">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-600">Oluşturulma Tarihi</p>
|
||||||
|
<p className="font-medium text-gray-800">
|
||||||
|
{formatDate(employee.creationTime)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-600">Son Güncelleme</p>
|
||||||
|
<p className="font-medium text-gray-800">
|
||||||
|
{formatDate(employee.lastModificationTime)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="bg-gray-50 px-3 py-2 border-t flex-shrink-0">
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-3 py-1 text-sm bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors"
|
||||||
|
>
|
||||||
|
Kapat
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default EmployeeView;
|
export default EmployeeViewModal;
|
||||||
|
|
|
||||||
|
|
@ -1,497 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import {
|
|
||||||
FaTimes,
|
|
||||||
FaUser,
|
|
||||||
FaIdCard,
|
|
||||||
FaEnvelope,
|
|
||||||
FaPhone,
|
|
||||||
FaCalendar,
|
|
||||||
FaBuilding,
|
|
||||||
FaBriefcase,
|
|
||||||
FaDollarSign,
|
|
||||||
FaMapMarkerAlt,
|
|
||||||
FaUserShield,
|
|
||||||
FaHeartbeat,
|
|
||||||
FaEdit,
|
|
||||||
FaClock,
|
|
||||||
FaBirthdayCake,
|
|
||||||
FaGraduationCap,
|
|
||||||
FaAward,
|
|
||||||
FaHistory,
|
|
||||||
} from "react-icons/fa";
|
|
||||||
import { HrEmployee } from "../../../types/hr";
|
|
||||||
import {
|
|
||||||
getEmployeeStatusColor,
|
|
||||||
getEmployeeStatusIcon,
|
|
||||||
getEmployeeStatusText,
|
|
||||||
} from "../../../utils/erp";
|
|
||||||
|
|
||||||
interface EmployeeViewModalProps {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
employee: HrEmployee | null;
|
|
||||||
onEdit?: (employee: HrEmployee) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const EmployeeViewModal: React.FC<EmployeeViewModalProps> = ({
|
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
employee,
|
|
||||||
onEdit,
|
|
||||||
}) => {
|
|
||||||
if (!isOpen || !employee) return null;
|
|
||||||
|
|
||||||
const formatDate = (date: Date | string): string => {
|
|
||||||
return new Date(date).toLocaleDateString("tr-TR");
|
|
||||||
};
|
|
||||||
|
|
||||||
const calculateWorkDuration = (hireDate: Date): string => {
|
|
||||||
const now = new Date();
|
|
||||||
const hire = new Date(hireDate);
|
|
||||||
const diffTime = Math.abs(now.getTime() - hire.getTime());
|
|
||||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
||||||
const years = Math.floor(diffDays / 365);
|
|
||||||
const months = Math.floor((diffDays % 365) / 30);
|
|
||||||
|
|
||||||
if (years > 0) {
|
|
||||||
return `${years} yıl ${months} ay`;
|
|
||||||
}
|
|
||||||
return `${months} ay`;
|
|
||||||
};
|
|
||||||
|
|
||||||
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-2xl w-full max-w-4xl max-h-[95vh] overflow-hidden flex flex-col">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-3 flex-shrink-0">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<div className="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
|
|
||||||
<FaUser className="w-5 h-5 text-white" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-lg font-bold">{employee.fullName}</h2>
|
|
||||||
<p className="text-blue-100 text-sm">
|
|
||||||
{employee.jobPosition?.name || "Pozisyon Belirtilmemiş"}
|
|
||||||
</p>
|
|
||||||
<p className="text-blue-200 text-xs">{employee.code}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div
|
|
||||||
className={`px-2 py-0.5 rounded-full border flex items-center space-x-1.5 text-xs ${getEmployeeStatusColor(
|
|
||||||
employee.employeeStatus
|
|
||||||
)} bg-opacity-90`}
|
|
||||||
>
|
|
||||||
{getEmployeeStatusIcon(employee.employeeStatus)}
|
|
||||||
<span className="font-medium text-xs">
|
|
||||||
{getEmployeeStatusText(employee.employeeStatus)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{onEdit && (
|
|
||||||
<button
|
|
||||||
onClick={() => onEdit(employee)}
|
|
||||||
className="bg-white bg-opacity-20 hover:bg-opacity-30 text-white px-2 py-1 text-xs rounded-md flex items-center space-x-1.5 transition-all"
|
|
||||||
>
|
|
||||||
<FaEdit className="w-3 h-3" />
|
|
||||||
<span>Düzenle</span>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="text-white hover:bg-white hover:bg-opacity-20 p-1 rounded-lg transition-all"
|
|
||||||
>
|
|
||||||
<FaTimes className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="p-3 overflow-y-auto flex-grow">
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
|
|
||||||
{/* Left Column - Personal Info */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
{/* Kişisel Bilgiler */}
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
|
||||||
<FaIdCard className="w-4 h-4 text-blue-600 mr-2" />
|
|
||||||
Kişisel Bilgiler
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaBirthdayCake className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Doğum Tarihi</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{formatDate(employee.birthDate)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaUser className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Cinsiyet</p>
|
|
||||||
<p className="font-medium text-sm">{employee.gender}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaHeartbeat className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Medeni Durum</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.maritalStatus}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaIdCard className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">TC Kimlik No</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.nationalId}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* İletişim Bilgileri */}
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
|
||||||
<FaPhone className="w-4 h-4 text-green-600 mr-2" />
|
|
||||||
İletişim Bilgileri
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaEnvelope className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">E-posta</p>
|
|
||||||
<p className="font-medium text-sm text-blue-600">
|
|
||||||
{employee.email}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{employee.phone && (
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaPhone className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">İş Telefonu</p>
|
|
||||||
<p className="font-medium text-sm">{employee.phone}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{employee.personalPhone && (
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaPhone className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Kişisel Telefon</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.personalPhone}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{employee.address && (
|
|
||||||
<div className="flex items-start space-x-2">
|
|
||||||
<FaMapMarkerAlt className="w-3 h-3 text-gray-500 mt-0.5" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Adres</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.address.street}
|
|
||||||
<br />
|
|
||||||
{employee.address.city}, {employee.address.state}
|
|
||||||
<br />
|
|
||||||
{employee.address.postalCode},{" "}
|
|
||||||
{employee.address.country}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Acil Durum İletişim */}
|
|
||||||
{employee.emergencyContact && (
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
|
||||||
<FaUserShield className="w-4 h-4 text-red-600 mr-2" />
|
|
||||||
Acil Durum İletişim
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">İsim</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.emergencyContact.name}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Telefon</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.emergencyContact.phone}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Yakınlık</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.emergencyContact.relationship}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Middle Column - Work Info */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
{/* İş Bilgileri */}
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
|
||||||
<FaBriefcase className="w-4 h-4 text-purple-600 mr-2" />
|
|
||||||
İş Bilgileri
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaBuilding className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Departman</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.department?.name || "Belirtilmemiş"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaGraduationCap className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Pozisyon</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.jobPosition?.name || "Belirtilmemiş"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaCalendar className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">
|
|
||||||
İşe Başlama Tarihi
|
|
||||||
</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{formatDate(employee.hireDate)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaHistory className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Çalışma Süresi</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{calculateWorkDuration(employee.hireDate)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaBriefcase className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Çalışma Türü</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.employmentType}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{employee.workLocation && (
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaMapMarkerAlt className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">
|
|
||||||
Çalışma Lokasyonu
|
|
||||||
</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.workLocation}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{employee.badgeNumber && (
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FaIdCard className="w-3 h-3 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Rozet Numarası</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.badgeNumber}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Yönetici Bilgileri */}
|
|
||||||
{employee.manager && (
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
|
||||||
<FaUserShield className="w-4 h-4 text-indigo-600 mr-2" />
|
|
||||||
Yönetici
|
|
||||||
</h3>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
|
|
||||||
<FaUser className="w-5 h-5 text-indigo-600" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-sm text-gray-900">
|
|
||||||
{employee.manager.fullName}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-600">
|
|
||||||
{employee.manager.jobPosition?.name}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
{employee.manager.email}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Performans ve Eğitimler */}
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
|
||||||
<FaAward className="w-4 h-4 text-amber-600 mr-2" />
|
|
||||||
Performans & Gelişim
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
<div className="text-center p-1.5 bg-white rounded-md">
|
|
||||||
<p className="text-xl font-bold text-amber-600">
|
|
||||||
{employee.evaluations?.length || 0}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-600">Değerlendirme</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center p-1.5 bg-white rounded-md">
|
|
||||||
<p className="text-xl font-bold text-emerald-600">
|
|
||||||
{employee.trainings?.length || 0}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-600">Eğitim</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Column - Financial & Additional Info */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
{/* Maaş Bilgileri */}
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
|
||||||
<FaDollarSign className="w-4 h-4 text-emerald-600 mr-2" />
|
|
||||||
Maaş Bilgileri
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Temel Maaş</p>
|
|
||||||
<p className="text-xl font-bold text-emerald-600">
|
|
||||||
{employee.baseSalary?.toLocaleString()}{" "}
|
|
||||||
{employee.currency || "TRY"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{employee.payrollGroup && (
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Bordro Grubu</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.payrollGroup}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Banka Bilgileri */}
|
|
||||||
{employee.bankAccount && (
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
|
||||||
<FaDollarSign className="w-4 h-4 text-slate-600 mr-2" />
|
|
||||||
Banka Bilgileri
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Banka Adı</p>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{employee.bankAccount.bankName}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">Hesap Numarası</p>
|
|
||||||
<p className="font-mono text-xs">
|
|
||||||
{employee.bankAccount.accountNumber}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-gray-600">IBAN</p>
|
|
||||||
<p className="font-mono text-xs">
|
|
||||||
{employee.bankAccount.iban}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* İzin Durumu */}
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
|
||||||
<FaCalendar className="w-4 h-4 text-sky-600 mr-2" />
|
|
||||||
İzin Durumu
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-1 gap-2">
|
|
||||||
<div className="bg-white p-1.5 rounded-md flex justify-between items-center">
|
|
||||||
<span className="text-xs text-gray-600">Toplam İzin</span>
|
|
||||||
<span className="font-bold text-sm text-sky-600">
|
|
||||||
{employee.leaves?.length || 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white p-1.5 rounded-md flex justify-between items-center">
|
|
||||||
<span className="text-xs text-gray-600">Kalan İzin</span>
|
|
||||||
<span className="font-bold text-sm text-emerald-600">
|
|
||||||
15 gün
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Sistem Bilgileri */}
|
|
||||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 flex items-center">
|
|
||||||
<FaClock className="w-4 h-4 text-gray-600 mr-2" />
|
|
||||||
Sistem Bilgileri
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2 text-xs">
|
|
||||||
<div>
|
|
||||||
<p className="text-gray-600">Oluşturulma Tarihi</p>
|
|
||||||
<p className="font-medium text-gray-800">
|
|
||||||
{formatDate(employee.creationTime)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-gray-600">Son Güncelleme</p>
|
|
||||||
<p className="font-medium text-gray-800">
|
|
||||||
{formatDate(employee.lastModificationTime)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="bg-gray-50 px-3 py-2 border-t flex-shrink-0">
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="px-3 py-1 text-sm bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors"
|
|
||||||
>
|
|
||||||
Kapat
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EmployeeViewModal;
|
|
||||||
|
|
@ -1,324 +1,305 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import { FaPlus, FaEdit, FaEye, FaTh, FaList, FaSearch } from "react-icons/fa";
|
import { FaPlus, FaEdit, FaEye, FaTh, FaList, FaSearch } from 'react-icons/fa'
|
||||||
import { EmploymentTypeEnum } from "../../../types/hr";
|
import { EmploymentTypeEnum } from '../../../types/hr'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
import { mockEmployeeTypes } from "../../../mocks/mockEmployeeTypes";
|
import { mockEmployeeTypes } from '../../../mocks/mockEmployeeTypes'
|
||||||
import Widget from "../../../components/common/Widget";
|
import Widget from '../../../components/common/Widget'
|
||||||
import {
|
import { getEmploymentTypeColor, getEmploymentTypeText } from '../../../utils/erp'
|
||||||
getEmploymentTypeColor,
|
import { Container } from '@/components/shared'
|
||||||
getEmploymentTypeText,
|
|
||||||
} from "../../../utils/erp";
|
|
||||||
|
|
||||||
const EmploymentTypes: React.FC = () => {
|
const EmploymentTypes: React.FC = () => {
|
||||||
const [viewMode, setViewMode] = useState<"card" | "list">("list");
|
const [viewMode, setViewMode] = useState<'card' | 'list'>('list')
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [selectedEmploymentType, setSelectedEmploymentType] =
|
const [selectedEmploymentType, setSelectedEmploymentType] = useState<EmploymentTypeEnum | null>(
|
||||||
useState<EmploymentTypeEnum | null>(null);
|
null,
|
||||||
const [showModal, setShowModal] = useState(false);
|
)
|
||||||
const [modalMode, setModalMode] = useState<"new" | "edit" | "view">("view");
|
const [showModal, setShowModal] = useState(false)
|
||||||
|
const [modalMode, setModalMode] = useState<'new' | 'edit' | 'view'>('view')
|
||||||
|
|
||||||
const handleNewEmploymentType = () => {
|
const handleNewEmploymentType = () => {
|
||||||
setModalMode("new");
|
setModalMode('new')
|
||||||
setSelectedEmploymentType(null);
|
setSelectedEmploymentType(null)
|
||||||
setShowModal(true);
|
setShowModal(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEditEmploymentType = (type: EmploymentTypeEnum) => {
|
const handleEditEmploymentType = (type: EmploymentTypeEnum) => {
|
||||||
setModalMode("edit");
|
setModalMode('edit')
|
||||||
setSelectedEmploymentType(type);
|
setSelectedEmploymentType(type)
|
||||||
setShowModal(true);
|
setShowModal(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleViewEmploymentType = (type: EmploymentTypeEnum) => {
|
const handleViewEmploymentType = (type: EmploymentTypeEnum) => {
|
||||||
setModalMode("view");
|
setModalMode('view')
|
||||||
setSelectedEmploymentType(type);
|
setSelectedEmploymentType(type)
|
||||||
setShowModal(true);
|
setShowModal(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
// Filter employee types based on search term
|
// Filter employee types based on search term
|
||||||
const filteredEmployeeTypes = mockEmployeeTypes.filter((employeeType) =>
|
const filteredEmployeeTypes = mockEmployeeTypes.filter((employeeType) =>
|
||||||
getEmploymentTypeText(employeeType.name as EmploymentTypeEnum)
|
getEmploymentTypeText(employeeType.name as EmploymentTypeEnum)
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.includes(searchTerm.toLowerCase())
|
.includes(searchTerm.toLowerCase()),
|
||||||
);
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-2">
|
||||||
<div className="flex flex-col gap-4">
|
{/* Header */}
|
||||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<div>
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||||
<h2 className="text-xl font-bold text-gray-900">
|
<div>
|
||||||
İstihdam Türleri
|
<h2 className="text-xl font-bold text-gray-900">İstihdam Türleri</h2>
|
||||||
</h2>
|
<p className="text-gray-600 mt-1">Personel istihdam türleri ve dağılımı</p>
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
|
||||||
Personel istihdam türleri ve dağılımı
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* New Button - Visible on larger screens */}
|
|
||||||
<div className="hidden sm:flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={handleNewEmploymentType}
|
|
||||||
className="flex items-center gap-2 bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaPlus className="w-4 h-4" />
|
|
||||||
<span>Yeni</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Search and Controls */}
|
|
||||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
|
||||||
{/* Search */}
|
|
||||||
<div className="relative flex-1">
|
|
||||||
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="İstihdam türü ara..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
className="pl-10 pr-4 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Controls */}
|
|
||||||
<div className="flex justify-between sm:justify-end items-center gap-3">
|
|
||||||
{/* View Toggle */}
|
|
||||||
<div className="flex bg-gray-100 rounded-lg p-1">
|
|
||||||
<button
|
|
||||||
onClick={() => setViewMode("card")}
|
|
||||||
className={`p-2 rounded ${
|
|
||||||
viewMode === "card"
|
|
||||||
? "bg-white shadow text-blue-600"
|
|
||||||
: "text-gray-600 hover:text-gray-800"
|
|
||||||
}`}
|
|
||||||
title="Kart Görünümü"
|
|
||||||
>
|
|
||||||
<FaTh className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setViewMode("list")}
|
|
||||||
className={`p-2 rounded ${
|
|
||||||
viewMode === "list"
|
|
||||||
? "bg-white shadow text-blue-600"
|
|
||||||
: "text-gray-600 hover:text-gray-800"
|
|
||||||
}`}
|
|
||||||
title="Liste Görünümü"
|
|
||||||
>
|
|
||||||
<FaList className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* New Button - Visible on mobile */}
|
{/* New Button - Visible on larger screens */}
|
||||||
<div className="sm:hidden">
|
<div className="hidden sm:flex gap-2">
|
||||||
<button
|
<button
|
||||||
onClick={handleNewEmploymentType}
|
onClick={handleNewEmploymentType}
|
||||||
className="flex items-center gap-2 bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 transition-colors"
|
className="flex items-center gap-2 bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 transition-colors"
|
||||||
>
|
>
|
||||||
<FaPlus className="w-4 h-4" />
|
<FaPlus className="w-4 h-4" />
|
||||||
<span className="text-sm">Yeni</span>
|
<span>Yeni</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Overview Stats */}
|
{/* Search and Controls */}
|
||||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
||||||
<Widget
|
{/* Search */}
|
||||||
title="Toplam Personel"
|
<div className="relative flex-1">
|
||||||
value={mockEmployees.length}
|
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||||
color="blue"
|
<input
|
||||||
icon="FaUsers"
|
type="text"
|
||||||
/>
|
placeholder="İstihdam türü ara..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="pl-10 pr-4 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Widget
|
{/* Controls */}
|
||||||
title="Tam Zamanlı"
|
<div className="flex justify-between sm:justify-end items-center gap-3">
|
||||||
value={
|
{/* View Toggle */}
|
||||||
mockEmployees.filter(
|
<div className="flex bg-gray-100 rounded-lg p-1">
|
||||||
(a) => a.employmentType === EmploymentTypeEnum.FullTime
|
<button
|
||||||
).length || 0
|
onClick={() => setViewMode('card')}
|
||||||
}
|
className={`p-2 rounded ${
|
||||||
color="green"
|
viewMode === 'card'
|
||||||
icon="FaClock"
|
? 'bg-white shadow text-blue-600'
|
||||||
/>
|
: 'text-gray-600 hover:text-gray-800'
|
||||||
|
}`}
|
||||||
<Widget
|
title="Kart Görünümü"
|
||||||
title="Sözleşmeli"
|
|
||||||
value={
|
|
||||||
mockEmployees.filter(
|
|
||||||
(a) => a.employmentType === EmploymentTypeEnum.Contract
|
|
||||||
).length || 0
|
|
||||||
}
|
|
||||||
color="orange"
|
|
||||||
icon="FaFileAlt"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="İstihdam Türü"
|
|
||||||
value={mockEmployeeTypes.length}
|
|
||||||
color="purple"
|
|
||||||
icon="FaChartBar"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Employment Type Distribution */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border">
|
|
||||||
{viewMode === "card" ? (
|
|
||||||
// Card View
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
|
||||||
{filteredEmployeeTypes.map((a) => {
|
|
||||||
const type = a.name as EmploymentTypeEnum; // veya a’dan türet
|
|
||||||
const count = a.count || 0;
|
|
||||||
const total = mockEmployees.length;
|
|
||||||
const percentage = total > 0 ? (count / total) * 100 : 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={a.id}
|
|
||||||
className="border rounded-lg p-3 hover:shadow-md transition-shadow"
|
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between mb-2">
|
<FaTh className="w-4 h-4" />
|
||||||
<div className="flex items-center gap-3">
|
</button>
|
||||||
<div
|
<button
|
||||||
className={`w-4 h-4 rounded-full ${getEmploymentTypeColor(
|
onClick={() => setViewMode('list')}
|
||||||
type
|
className={`p-2 rounded ${
|
||||||
)}`}
|
viewMode === 'list'
|
||||||
/>
|
? 'bg-white shadow text-blue-600'
|
||||||
<h4 className="font-medium text-gray-900 text-sm">
|
: 'text-gray-600 hover:text-gray-800'
|
||||||
{getEmploymentTypeText(type)}
|
}`}
|
||||||
</h4>
|
title="Liste Görünümü"
|
||||||
</div>
|
>
|
||||||
<span className="text-xs text-gray-500">
|
<FaList className="w-4 h-4" />
|
||||||
{percentage.toFixed(1)}%
|
</button>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
{/* New Button - Visible on mobile */}
|
||||||
<div className="flex justify-between">
|
<div className="sm:hidden">
|
||||||
<span className="text-xs text-gray-600">
|
<button
|
||||||
Personel Sayısı
|
onClick={handleNewEmploymentType}
|
||||||
</span>
|
className="flex items-center gap-2 bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 transition-colors"
|
||||||
<span className="text-xs font-medium">{count}</span>
|
>
|
||||||
</div>
|
<FaPlus className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Yeni</span>
|
||||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
</button>
|
||||||
<div
|
</div>
|
||||||
className={`h-2 rounded-full ${getEmploymentTypeColor(
|
</div>
|
||||||
type
|
|
||||||
)}`}
|
|
||||||
style={{ width: `${percentage}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Action Buttons */}
|
|
||||||
<div className="flex gap-2 mt-2 pt-2 border-t">
|
|
||||||
<button
|
|
||||||
onClick={() => handleViewEmploymentType(type)}
|
|
||||||
className="flex items-center gap-1 px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors"
|
|
||||||
title="Görüntüle"
|
|
||||||
>
|
|
||||||
<FaEye className="w-3 h-3" />
|
|
||||||
<span className="hidden sm:inline">Görüntüle</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleEditEmploymentType(type)}
|
|
||||||
className="flex items-center gap-1 px-2 py-1 text-xs bg-yellow-50 text-yellow-600 rounded-md hover:bg-yellow-100 transition-colors"
|
|
||||||
title="Düzenle"
|
|
||||||
>
|
|
||||||
<FaEdit className="w-3 h-3" />
|
|
||||||
<span className="hidden sm:inline">Düzenle</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
</div>
|
||||||
// List View
|
|
||||||
<div className="overflow-x-auto">
|
{/* Overview Stats */}
|
||||||
<table className="min-w-full divide-y divide-gray-200">
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
<thead className="bg-gray-50">
|
<Widget
|
||||||
<tr className="text-sm">
|
title="Toplam Personel"
|
||||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
value={mockEmployees.length}
|
||||||
İstihdam Türü
|
color="blue"
|
||||||
</th>
|
icon="FaUsers"
|
||||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
/>
|
||||||
Personel Sayısı
|
|
||||||
</th>
|
<Widget
|
||||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
title="Tam Zamanlı"
|
||||||
Yüzde
|
value={
|
||||||
</th>
|
mockEmployees.filter((a) => a.employmentType === EmploymentTypeEnum.FullTime)
|
||||||
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
.length || 0
|
||||||
İşlemler
|
}
|
||||||
</th>
|
color="green"
|
||||||
</tr>
|
icon="FaClock"
|
||||||
</thead>
|
/>
|
||||||
<tbody className="bg-white divide-y divide-gray-200">
|
|
||||||
{filteredEmployeeTypes.map((a) => {
|
<Widget
|
||||||
const type = a.name as EmploymentTypeEnum;
|
title="Sözleşmeli"
|
||||||
const count = a.count || 0;
|
value={
|
||||||
const total = mockEmployees.length;
|
mockEmployees.filter((a) => a.employmentType === EmploymentTypeEnum.Contract)
|
||||||
const percentage = total > 0 ? (count / total) * 100 : 0;
|
.length || 0
|
||||||
return (
|
}
|
||||||
<tr key={type} className="hover:bg-gray-50">
|
color="orange"
|
||||||
<td className="px-3 py-2 whitespace-nowrap">
|
icon="FaFileAlt"
|
||||||
<div className="flex items-center">
|
/>
|
||||||
<div
|
|
||||||
className={`w-4 h-4 rounded-full mr-3 ${getEmploymentTypeColor(
|
<Widget
|
||||||
type
|
title="İstihdam Türü"
|
||||||
)}`}
|
value={mockEmployeeTypes.length}
|
||||||
/>
|
color="purple"
|
||||||
<div className="text-sm font-medium text-gray-900">
|
icon="FaChartBar"
|
||||||
{getEmploymentTypeText(type)}
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</td>
|
{/* Employment Type Distribution */}
|
||||||
<td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
|
<div className="bg-white rounded-lg shadow-sm border">
|
||||||
{count}
|
{viewMode === 'card' ? (
|
||||||
</td>
|
// Card View
|
||||||
<td className="px-3 py-2 whitespace-nowrap">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||||||
<div className="flex items-center">
|
{filteredEmployeeTypes.map((a) => {
|
||||||
<div className="w-16 bg-gray-200 rounded-full h-2 mr-2">
|
const type = a.name as EmploymentTypeEnum // veya a’dan türet
|
||||||
|
const count = a.count || 0
|
||||||
|
const total = mockEmployees.length
|
||||||
|
const percentage = total > 0 ? (count / total) * 100 : 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={a.id}
|
||||||
|
className="border rounded-lg p-3 hover:shadow-md transition-shadow"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className={`w-4 h-4 rounded-full ${getEmploymentTypeColor(type)}`} />
|
||||||
|
<h4 className="font-medium text-gray-900 text-sm">
|
||||||
|
{getEmploymentTypeText(type)}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-gray-500">{percentage.toFixed(1)}%</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-xs text-gray-600">Personel Sayısı</span>
|
||||||
|
<span className="text-xs font-medium">{count}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||||
|
<div
|
||||||
|
className={`h-2 rounded-full ${getEmploymentTypeColor(type)}`}
|
||||||
|
style={{ width: `${percentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex gap-2 mt-2 pt-2 border-t">
|
||||||
|
<button
|
||||||
|
onClick={() => handleViewEmploymentType(type)}
|
||||||
|
className="flex items-center gap-1 px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors"
|
||||||
|
title="Görüntüle"
|
||||||
|
>
|
||||||
|
<FaEye className="w-3 h-3" />
|
||||||
|
<span className="hidden sm:inline">Görüntüle</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleEditEmploymentType(type)}
|
||||||
|
className="flex items-center gap-1 px-2 py-1 text-xs bg-yellow-50 text-yellow-600 rounded-md hover:bg-yellow-100 transition-colors"
|
||||||
|
title="Düzenle"
|
||||||
|
>
|
||||||
|
<FaEdit className="w-3 h-3" />
|
||||||
|
<span className="hidden sm:inline">Düzenle</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
// List View
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr className="text-sm">
|
||||||
|
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
İstihdam Türü
|
||||||
|
</th>
|
||||||
|
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Personel Sayısı
|
||||||
|
</th>
|
||||||
|
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Yüzde
|
||||||
|
</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">
|
||||||
|
{filteredEmployeeTypes.map((a) => {
|
||||||
|
const type = a.name as EmploymentTypeEnum
|
||||||
|
const count = a.count || 0
|
||||||
|
const total = mockEmployees.length
|
||||||
|
const percentage = total > 0 ? (count / total) * 100 : 0
|
||||||
|
return (
|
||||||
|
<tr key={type} className="hover:bg-gray-50">
|
||||||
|
<td className="px-3 py-2 whitespace-nowrap">
|
||||||
|
<div className="flex items-center">
|
||||||
<div
|
<div
|
||||||
className={`h-2 rounded-full ${getEmploymentTypeColor(
|
className={`w-4 h-4 rounded-full mr-3 ${getEmploymentTypeColor(
|
||||||
type
|
type,
|
||||||
)}`}
|
)}`}
|
||||||
style={{ width: `${percentage}%` }}
|
|
||||||
/>
|
/>
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{getEmploymentTypeText(type)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm text-gray-900">
|
</td>
|
||||||
{percentage.toFixed(1)}%
|
<td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
|
||||||
</span>
|
{count}
|
||||||
</div>
|
</td>
|
||||||
</td>
|
<td className="px-3 py-2 whitespace-nowrap">
|
||||||
<td className="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
|
<div className="flex items-center">
|
||||||
<div className="flex justify-end gap-2">
|
<div className="w-16 bg-gray-200 rounded-full h-2 mr-2">
|
||||||
<button
|
<div
|
||||||
onClick={() => handleViewEmploymentType(type)}
|
className={`h-2 rounded-full ${getEmploymentTypeColor(type)}`}
|
||||||
className="text-blue-600 hover:text-blue-900 p-1"
|
style={{ width: `${percentage}%` }}
|
||||||
title="Görüntüle"
|
/>
|
||||||
>
|
</div>
|
||||||
<FaEye className="w-4 h-4" />
|
<span className="text-sm text-gray-900">{percentage.toFixed(1)}%</span>
|
||||||
</button>
|
</div>
|
||||||
<button
|
</td>
|
||||||
onClick={() => handleEditEmploymentType(type)}
|
<td className="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
|
||||||
className="text-yellow-600 hover:text-yellow-900 p-1"
|
<div className="flex justify-end gap-2">
|
||||||
title="Düzenle"
|
<button
|
||||||
>
|
onClick={() => handleViewEmploymentType(type)}
|
||||||
<FaEdit className="w-4 h-4" />
|
className="text-blue-600 hover:text-blue-900 p-1"
|
||||||
</button>
|
title="Görüntüle"
|
||||||
</div>
|
>
|
||||||
</td>
|
<FaEye className="w-4 h-4" />
|
||||||
</tr>
|
</button>
|
||||||
);
|
<button
|
||||||
})}
|
onClick={() => handleEditEmploymentType(type)}
|
||||||
</tbody>
|
className="text-yellow-600 hover:text-yellow-900 p-1"
|
||||||
</table>
|
title="Düzenle"
|
||||||
</div>
|
>
|
||||||
)}
|
<FaEdit className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Modal */}
|
{/* Modal */}
|
||||||
|
|
@ -327,9 +308,9 @@ const EmploymentTypes: React.FC = () => {
|
||||||
<div className="bg-white rounded-lg p-4 w-full max-w-md max-h-[90vh] overflow-y-auto">
|
<div className="bg-white rounded-lg p-4 w-full max-w-md max-h-[90vh] overflow-y-auto">
|
||||||
<div className="flex justify-between items-center mb-4">
|
<div className="flex justify-between items-center mb-4">
|
||||||
<h3 className="text-base font-semibold">
|
<h3 className="text-base font-semibold">
|
||||||
{modalMode === "new" && "Yeni İstihdam Türü"}
|
{modalMode === 'new' && 'Yeni İstihdam Türü'}
|
||||||
{modalMode === "edit" && "İstihdam Türünü Düzenle"}
|
{modalMode === 'edit' && 'İstihdam Türünü Düzenle'}
|
||||||
{modalMode === "view" && "İstihdam Türü Detayları"}
|
{modalMode === 'view' && 'İstihdam Türü Detayları'}
|
||||||
</h3>
|
</h3>
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowModal(false)}
|
onClick={() => setShowModal(false)}
|
||||||
|
|
@ -340,7 +321,7 @@ const EmploymentTypes: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{modalMode === "new" && (
|
{modalMode === 'new' && (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
|
@ -353,9 +334,7 @@ const EmploymentTypes: React.FC = () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
|
||||||
Açıklama
|
|
||||||
</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
rows={3}
|
rows={3}
|
||||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
|
@ -365,7 +344,7 @@ const EmploymentTypes: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{modalMode === "edit" && selectedEmploymentType && (
|
{modalMode === 'edit' && selectedEmploymentType && (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
|
@ -373,16 +352,12 @@ const EmploymentTypes: React.FC = () => {
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
defaultValue={getEmploymentTypeText(
|
defaultValue={getEmploymentTypeText(selectedEmploymentType)}
|
||||||
selectedEmploymentType
|
|
||||||
)}
|
|
||||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
|
||||||
Açıklama
|
|
||||||
</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
rows={3}
|
rows={3}
|
||||||
defaultValue="Bu istihdam türüne ait açıklama..."
|
defaultValue="Bu istihdam türüne ait açıklama..."
|
||||||
|
|
@ -392,7 +367,7 @@ const EmploymentTypes: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{modalMode === "view" && selectedEmploymentType && (
|
{modalMode === 'view' && selectedEmploymentType && (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-gray-600">İstihdam Türü:</p>
|
<p className="text-sm text-gray-600">İstihdam Türü:</p>
|
||||||
|
|
@ -401,15 +376,12 @@ const EmploymentTypes: React.FC = () => {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-gray-600">
|
<p className="text-sm text-gray-600">Toplam Personel Sayısı:</p>
|
||||||
Toplam Personel Sayısı:
|
|
||||||
</p>
|
|
||||||
<p className="font-medium">
|
<p className="font-medium">
|
||||||
{
|
{
|
||||||
mockEmployees.filter(
|
mockEmployees.filter((emp) => emp.employmentType === selectedEmploymentType)
|
||||||
(emp) => emp.employmentType === selectedEmploymentType
|
.length
|
||||||
).length
|
}{' '}
|
||||||
}{" "}
|
|
||||||
kişi
|
kişi
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -418,7 +390,7 @@ const EmploymentTypes: React.FC = () => {
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div
|
<div
|
||||||
className={`w-4 h-4 rounded-full ${getEmploymentTypeColor(
|
className={`w-4 h-4 rounded-full ${getEmploymentTypeColor(
|
||||||
selectedEmploymentType
|
selectedEmploymentType,
|
||||||
)}`}
|
)}`}
|
||||||
/>
|
/>
|
||||||
<span className="text-sm">
|
<span className="text-sm">
|
||||||
|
|
@ -427,14 +399,10 @@ const EmploymentTypes: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-gray-600 mb-2">
|
<p className="text-sm text-gray-600 mb-2">Bu istihdam türündeki personeller:</p>
|
||||||
Bu istihdam türündeki personeller:
|
|
||||||
</p>
|
|
||||||
<div className="max-h-32 overflow-y-auto bg-gray-50 rounded p-2">
|
<div className="max-h-32 overflow-y-auto bg-gray-50 rounded p-2">
|
||||||
{mockEmployees
|
{mockEmployees
|
||||||
.filter(
|
.filter((emp) => emp.employmentType === selectedEmploymentType)
|
||||||
(emp) => emp.employmentType === selectedEmploymentType
|
|
||||||
)
|
|
||||||
.slice(0, 10)
|
.slice(0, 10)
|
||||||
.map((emp) => (
|
.map((emp) => (
|
||||||
<div
|
<div
|
||||||
|
|
@ -444,15 +412,13 @@ const EmploymentTypes: React.FC = () => {
|
||||||
{emp.fullName} - {emp.department?.name}
|
{emp.fullName} - {emp.department?.name}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
{mockEmployees.filter(
|
{mockEmployees.filter((emp) => emp.employmentType === selectedEmploymentType)
|
||||||
(emp) => emp.employmentType === selectedEmploymentType
|
.length > 10 && (
|
||||||
).length > 10 && (
|
|
||||||
<div className="text-xs text-gray-500 pt-2">
|
<div className="text-xs text-gray-500 pt-2">
|
||||||
+
|
+
|
||||||
{mockEmployees.filter(
|
{mockEmployees.filter(
|
||||||
(emp) =>
|
(emp) => emp.employmentType === selectedEmploymentType,
|
||||||
emp.employmentType === selectedEmploymentType
|
).length - 10}{' '}
|
||||||
).length - 10}{" "}
|
|
||||||
kişi daha...
|
kişi daha...
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -467,22 +433,22 @@ const EmploymentTypes: React.FC = () => {
|
||||||
onClick={() => setShowModal(false)}
|
onClick={() => setShowModal(false)}
|
||||||
className="px-3 py-1.5 text-sm text-gray-600 border rounded-md hover:bg-gray-50 order-2 sm:order-1"
|
className="px-3 py-1.5 text-sm text-gray-600 border rounded-md hover:bg-gray-50 order-2 sm:order-1"
|
||||||
>
|
>
|
||||||
{modalMode === "view" ? "Kapat" : "İptal"}
|
{modalMode === 'view' ? 'Kapat' : 'İptal'}
|
||||||
</button>
|
</button>
|
||||||
{modalMode !== "view" && (
|
{modalMode !== 'view' && (
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowModal(false)}
|
onClick={() => setShowModal(false)}
|
||||||
className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 order-1 sm:order-2"
|
className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 order-1 sm:order-2"
|
||||||
>
|
>
|
||||||
{modalMode === "new" ? "Oluştur" : "Güncelle"}
|
{modalMode === 'new' ? 'Oluştur' : 'Güncelle'}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default EmploymentTypes;
|
export default EmploymentTypes
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
FaBriefcase,
|
FaBriefcase,
|
||||||
FaPlus,
|
FaPlus,
|
||||||
|
|
@ -10,51 +10,50 @@ import {
|
||||||
FaEye,
|
FaEye,
|
||||||
FaTh,
|
FaTh,
|
||||||
FaList,
|
FaList,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { HrJobPosition, JobLevelEnum } from "../../../types/hr";
|
import { HrJobPosition, JobLevelEnum } from '../../../types/hr'
|
||||||
import DataTable, { Column } from "../../../components/common/DataTable";
|
import DataTable, { Column } from '../../../components/common/DataTable'
|
||||||
import { mockJobPositions } from "../../../mocks/mockJobPositions";
|
import { mockJobPositions } from '../../../mocks/mockJobPositions'
|
||||||
import JobPositionFormModal from "./JobPositionFormModal";
|
import JobPositionFormModal from './JobPositionFormModal'
|
||||||
import JobPositionViewModal from "./JobPositionViewModal";
|
import JobPositionViewModal from './JobPositionViewModal'
|
||||||
import { getJobLevelColor, getJobLevelText } from "../../../utils/erp";
|
import { getJobLevelColor, getJobLevelText } from '../../../utils/erp'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
const JobPositions: React.FC = () => {
|
const JobPositions: React.FC = () => {
|
||||||
const [positions, setPositions] = useState<HrJobPosition[]>(mockJobPositions);
|
const [positions, setPositions] = useState<HrJobPosition[]>(mockJobPositions)
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [selectedLevel, setSelectedLevel] = useState<string>("all");
|
const [selectedLevel, setSelectedLevel] = useState<string>('all')
|
||||||
const [selectedDepartment, setSelectedDepartment] = useState<string>("all");
|
const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
|
||||||
const [viewMode, setViewMode] = useState<"list" | "card">("list");
|
const [viewMode, setViewMode] = useState<'list' | 'card'>('list')
|
||||||
|
|
||||||
// Modal states
|
// Modal states
|
||||||
const [isFormModalOpen, setIsFormModalOpen] = useState(false);
|
const [isFormModalOpen, setIsFormModalOpen] = useState(false)
|
||||||
const [isViewModalOpen, setIsViewModalOpen] = useState(false);
|
const [isViewModalOpen, setIsViewModalOpen] = useState(false)
|
||||||
const [selectedPosition, setSelectedPosition] = useState<
|
const [selectedPosition, setSelectedPosition] = useState<HrJobPosition | undefined>(undefined)
|
||||||
HrJobPosition | undefined
|
const [modalTitle, setModalTitle] = useState('')
|
||||||
>(undefined);
|
|
||||||
const [modalTitle, setModalTitle] = useState("");
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
setSelectedPosition(undefined);
|
setSelectedPosition(undefined)
|
||||||
setModalTitle("Yeni İş Pozisyonu");
|
setModalTitle('Yeni İş Pozisyonu')
|
||||||
setIsFormModalOpen(true);
|
setIsFormModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEdit = (position: HrJobPosition) => {
|
const handleEdit = (position: HrJobPosition) => {
|
||||||
setSelectedPosition(position);
|
setSelectedPosition(position)
|
||||||
setModalTitle("İş Pozisyonu Düzenle");
|
setModalTitle('İş Pozisyonu Düzenle')
|
||||||
setIsFormModalOpen(true);
|
setIsFormModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleView = (position: HrJobPosition) => {
|
const handleView = (position: HrJobPosition) => {
|
||||||
setSelectedPosition(position);
|
setSelectedPosition(position)
|
||||||
setIsViewModalOpen(true);
|
setIsViewModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDelete = (id: string) => {
|
const handleDelete = (id: string) => {
|
||||||
if (window.confirm("Bu pozisyonu silmek istediğinizden emin misiniz?")) {
|
if (window.confirm('Bu pozisyonu silmek istediğinizden emin misiniz?')) {
|
||||||
setPositions(positions.filter((p) => p.id !== id));
|
setPositions(positions.filter((p) => p.id !== id))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSavePosition = (positionData: Partial<HrJobPosition>) => {
|
const handleSavePosition = (positionData: Partial<HrJobPosition>) => {
|
||||||
if (selectedPosition) {
|
if (selectedPosition) {
|
||||||
|
|
@ -63,12 +62,8 @@ const JobPositions: React.FC = () => {
|
||||||
...selectedPosition,
|
...selectedPosition,
|
||||||
...positionData,
|
...positionData,
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
};
|
}
|
||||||
setPositions(
|
setPositions(positions.map((p) => (p.id === selectedPosition.id ? updatedPosition : p)))
|
||||||
positions.map((p) =>
|
|
||||||
p.id === selectedPosition.id ? updatedPosition : p
|
|
||||||
)
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
// Add new position
|
// Add new position
|
||||||
const newPosition: HrJobPosition = {
|
const newPosition: HrJobPosition = {
|
||||||
|
|
@ -77,21 +72,21 @@ const JobPositions: React.FC = () => {
|
||||||
employees: [],
|
employees: [],
|
||||||
creationTime: new Date(),
|
creationTime: new Date(),
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
} as HrJobPosition;
|
} as HrJobPosition
|
||||||
setPositions([...positions, newPosition]);
|
setPositions([...positions, newPosition])
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const closeFormModal = () => {
|
const closeFormModal = () => {
|
||||||
setIsFormModalOpen(false);
|
setIsFormModalOpen(false)
|
||||||
setSelectedPosition(undefined);
|
setSelectedPosition(undefined)
|
||||||
setModalTitle("");
|
setModalTitle('')
|
||||||
};
|
}
|
||||||
|
|
||||||
const closeViewModal = () => {
|
const closeViewModal = () => {
|
||||||
setIsViewModalOpen(false);
|
setIsViewModalOpen(false)
|
||||||
setSelectedPosition(undefined);
|
setSelectedPosition(undefined)
|
||||||
};
|
}
|
||||||
|
|
||||||
const filteredPositions = positions.filter((position) => {
|
const filteredPositions = positions.filter((position) => {
|
||||||
if (
|
if (
|
||||||
|
|
@ -99,34 +94,27 @@ const JobPositions: React.FC = () => {
|
||||||
!position.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
!position.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
||||||
!position.code.toLowerCase().includes(searchTerm.toLowerCase())
|
!position.code.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
) {
|
) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
if (selectedLevel !== "all" && position.level !== selectedLevel) {
|
if (selectedLevel !== 'all' && position.level !== selectedLevel) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
if (
|
if (selectedDepartment !== 'all' && position.department?.id !== selectedDepartment) {
|
||||||
selectedDepartment !== "all" &&
|
return false
|
||||||
position.department?.id !== selectedDepartment
|
|
||||||
) {
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
return true;
|
return true
|
||||||
});
|
})
|
||||||
|
|
||||||
// Card component for individual position
|
// Card component for individual position
|
||||||
const PositionCard: React.FC<{ position: HrJobPosition }> = ({
|
const PositionCard: React.FC<{ position: HrJobPosition }> = ({ position }) => (
|
||||||
position,
|
|
||||||
}) => (
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow p-4">
|
<div className="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow p-4">
|
||||||
<div className="flex items-start justify-between mb-4">
|
<div className="flex items-start justify-between mb-4">
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="flex items-center gap-2 mb-2">
|
<div className="flex items-center gap-2 mb-2">
|
||||||
<h3 className="text-base font-semibold text-gray-900">
|
<h3 className="text-base font-semibold text-gray-900">{position.name}</h3>
|
||||||
{position.name}
|
|
||||||
</h3>
|
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${getJobLevelColor(
|
className={`px-2 py-1 text-xs font-medium rounded-full ${getJobLevelColor(
|
||||||
position.level
|
position.level,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
{getJobLevelText(position.level)}
|
{getJobLevelText(position.level)}
|
||||||
|
|
@ -136,9 +124,9 @@ const JobPositions: React.FC = () => {
|
||||||
<p
|
<p
|
||||||
className="text-sm text-gray-700 overflow-hidden"
|
className="text-sm text-gray-700 overflow-hidden"
|
||||||
style={{
|
style={{
|
||||||
display: "-webkit-box",
|
display: '-webkit-box',
|
||||||
WebkitLineClamp: 2,
|
WebkitLineClamp: 2,
|
||||||
WebkitBoxOrient: "vertical",
|
WebkitBoxOrient: 'vertical',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{position.description}
|
{position.description}
|
||||||
|
|
@ -146,19 +134,17 @@ const JobPositions: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
position.isActive
|
position.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{position.isActive ? "Aktif" : "Pasif"}
|
{position.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2 mb-3">
|
<div className="space-y-2 mb-3">
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
<FaBuilding className="w-4 h-4" />
|
<FaBuilding className="w-4 h-4" />
|
||||||
<span>{position.department?.name || "Departman belirtilmemiş"}</span>
|
<span>{position.department?.name || 'Departman belirtilmemiş'}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
|
|
@ -169,22 +155,16 @@ const JobPositions: React.FC = () => {
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
<FaDollarSign className="w-4 h-4" />
|
<FaDollarSign className="w-4 h-4" />
|
||||||
<span>
|
<span>
|
||||||
₺{position.minSalary.toLocaleString()} - ₺
|
₺{position.minSalary.toLocaleString()} - ₺{position.maxSalary.toLocaleString()}
|
||||||
{position.maxSalary.toLocaleString()}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<p className="text-xs font-medium text-gray-500 mb-2">
|
<p className="text-xs font-medium text-gray-500 mb-2">Gerekli Yetenekler</p>
|
||||||
Gerekli Yetenekler
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-wrap gap-1">
|
<div className="flex flex-wrap gap-1">
|
||||||
{position.requiredSkills?.slice(0, 4).map((skill, index) => (
|
{position.requiredSkills?.slice(0, 4).map((skill, index) => (
|
||||||
<span
|
<span key={index} className="px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded">
|
||||||
key={index}
|
|
||||||
className="px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded"
|
|
||||||
>
|
|
||||||
{skill}
|
{skill}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
|
|
@ -219,44 +199,42 @@ const JobPositions: React.FC = () => {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
|
|
||||||
const columns: Column<HrJobPosition>[] = [
|
const columns: Column<HrJobPosition>[] = [
|
||||||
{
|
{
|
||||||
key: "code",
|
key: 'code',
|
||||||
header: "Pozisyon Kodu",
|
header: 'Pozisyon Kodu',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "title",
|
key: 'title',
|
||||||
header: "Pozisyon Adı",
|
header: 'Pozisyon Adı',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (position: HrJobPosition) => (
|
render: (position: HrJobPosition) => (
|
||||||
<div>
|
<div>
|
||||||
<div className="font-medium text-gray-900">{position.name}</div>
|
<div className="font-medium text-gray-900">{position.name}</div>
|
||||||
<div className="text-sm text-gray-500 truncate max-w-xs">
|
<div className="text-sm text-gray-500 truncate max-w-xs">{position.description}</div>
|
||||||
{position.description}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "department",
|
key: 'department',
|
||||||
header: "Departman",
|
header: 'Departman',
|
||||||
render: (position: HrJobPosition) => (
|
render: (position: HrJobPosition) => (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaBuilding className="w-4 h-4 text-gray-500" />
|
<FaBuilding className="w-4 h-4 text-gray-500" />
|
||||||
<span>{position.department?.name || "-"}</span>
|
<span>{position.department?.name || '-'}</span>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "level",
|
key: 'level',
|
||||||
header: "Seviye",
|
header: 'Seviye',
|
||||||
render: (position: HrJobPosition) => (
|
render: (position: HrJobPosition) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${getJobLevelColor(
|
className={`px-2 py-1 text-xs font-medium rounded-full ${getJobLevelColor(
|
||||||
position.level
|
position.level,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
{getJobLevelText(position.level)}
|
{getJobLevelText(position.level)}
|
||||||
|
|
@ -264,8 +242,8 @@ const JobPositions: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "employeeCount",
|
key: 'employeeCount',
|
||||||
header: "Personel Sayısı",
|
header: 'Personel Sayısı',
|
||||||
render: (position: HrJobPosition) => (
|
render: (position: HrJobPosition) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaUsers className="w-4 h-4 text-gray-500" />
|
<FaUsers className="w-4 h-4 text-gray-500" />
|
||||||
|
|
@ -274,30 +252,25 @@ const JobPositions: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "salary",
|
key: 'salary',
|
||||||
header: "Maaş Aralığı",
|
header: 'Maaş Aralığı',
|
||||||
render: (position: HrJobPosition) => (
|
render: (position: HrJobPosition) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
||||||
<div className="text-sm">
|
<div className="text-sm">
|
||||||
<div>₺{position.minSalary.toLocaleString()}</div>
|
<div>₺{position.minSalary.toLocaleString()}</div>
|
||||||
<div className="text-gray-500">
|
<div className="text-gray-500">₺{position.maxSalary.toLocaleString()}</div>
|
||||||
₺{position.maxSalary.toLocaleString()}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "skills",
|
key: 'skills',
|
||||||
header: "Gerekli Yetenekler",
|
header: 'Gerekli Yetenekler',
|
||||||
render: (position: HrJobPosition) => (
|
render: (position: HrJobPosition) => (
|
||||||
<div className="flex flex-wrap gap-1 max-w-xs">
|
<div className="flex flex-wrap gap-1 max-w-xs">
|
||||||
{position.requiredSkills?.slice(0, 3).map((skill, index) => (
|
{position.requiredSkills?.slice(0, 3).map((skill, index) => (
|
||||||
<span
|
<span key={index} className="px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded">
|
||||||
key={index}
|
|
||||||
className="px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded"
|
|
||||||
>
|
|
||||||
{skill}
|
{skill}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
|
|
@ -310,23 +283,21 @@ const JobPositions: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "status",
|
key: 'status',
|
||||||
header: "Durum",
|
header: 'Durum',
|
||||||
render: (position: HrJobPosition) => (
|
render: (position: HrJobPosition) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
position.isActive
|
position.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{position.isActive ? "Aktif" : "Pasif"}
|
{position.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actions",
|
key: 'actions',
|
||||||
header: "İşlemler",
|
header: 'İşlemler',
|
||||||
render: (position: HrJobPosition) => (
|
render: (position: HrJobPosition) => (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -353,196 +324,173 @@ const JobPositions: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
// Get unique departments for filter
|
// Get unique departments for filter
|
||||||
const departments = [
|
const departments = [...new Set(positions.map((p) => p.department).filter(Boolean))]
|
||||||
...new Set(positions.map((p) => p.department).filter(Boolean)),
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-2">
|
||||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||||
<h2 className="text-xl font-bold text-gray-900">İş Pozisyonları</h2>
|
<div>
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
<h2 className="text-xl font-bold text-gray-900">İş Pozisyonları</h2>
|
||||||
Şirket pozisyonları ve iş tanımları yönetimi
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
</p>
|
Şirket pozisyonları ve iş tanımları yönetimi
|
||||||
</div>
|
</p>
|
||||||
<div className="flex items-center gap-3">
|
</div>
|
||||||
{/* View Toggle */}
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex bg-gray-100 rounded-lg p-0.5">
|
{/* View Toggle */}
|
||||||
|
<div className="flex bg-gray-100 rounded-lg p-0.5">
|
||||||
|
<button
|
||||||
|
onClick={() => setViewMode('list')}
|
||||||
|
className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
||||||
|
viewMode === 'list'
|
||||||
|
? 'bg-white text-gray-900 shadow-sm'
|
||||||
|
: 'text-gray-500 hover:text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FaList className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setViewMode('card')}
|
||||||
|
className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
||||||
|
viewMode === 'card'
|
||||||
|
? 'bg-white text-gray-900 shadow-sm'
|
||||||
|
: 'text-gray-500 hover:text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FaTh className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setViewMode("list")}
|
onClick={handleAdd}
|
||||||
className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
viewMode === "list"
|
|
||||||
? "bg-white text-gray-900 shadow-sm"
|
|
||||||
: "text-gray-500 hover:text-gray-700"
|
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<FaList className="w-4 h-4" />
|
<FaPlus className="w-4 h-4" />
|
||||||
</button>
|
<span className="hidden sm:inline">Yeni Pozisyon</span>
|
||||||
<button
|
<span className="sm:hidden">Yeni</span>
|
||||||
onClick={() => setViewMode("card")}
|
|
||||||
className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
|
||||||
viewMode === "card"
|
|
||||||
? "bg-white text-gray-900 shadow-sm"
|
|
||||||
: "text-gray-500 hover:text-gray-700"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FaTh className="w-4 h-4" />
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={handleAdd}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaPlus className="w-4 h-4" />
|
|
||||||
<span className="hidden sm:inline">Yeni Pozisyon</span>
|
|
||||||
<span className="sm:hidden">Yeni</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Cards */}
|
{/* Stats Cards */}
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<FaBriefcase className="w-6 h-6 text-blue-600" />
|
<FaBriefcase className="w-6 h-6 text-blue-600" />
|
||||||
<div className="ml-3">
|
<div className="ml-3">
|
||||||
<p className="text-xs font-medium text-gray-600">
|
<p className="text-xs font-medium text-gray-600">Toplam Pozisyon</p>
|
||||||
Toplam Pozisyon
|
<p className="text-xl font-bold text-gray-900">{positions.length}</p>
|
||||||
</p>
|
</div>
|
||||||
<p className="text-xl font-bold text-gray-900">
|
</div>
|
||||||
{positions.length}
|
</div>
|
||||||
</p>
|
|
||||||
|
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<FaUsers className="w-6 h-6 text-green-600" />
|
||||||
|
<div className="ml-3">
|
||||||
|
<p className="text-xs font-medium text-gray-600">Dolu Pozisyonlar</p>
|
||||||
|
<p className="text-xl font-bold text-gray-900">
|
||||||
|
{positions.filter((p) => p.employees && p.employees.length > 0).length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<FaBriefcase className="w-6 h-6 text-orange-600" />
|
||||||
|
<div className="ml-3">
|
||||||
|
<p className="text-xs font-medium text-gray-600">Boş Pozisyonlar</p>
|
||||||
|
<p className="text-xl font-bold text-gray-900">
|
||||||
|
{positions.filter((p) => !p.employees || p.employees.length === 0).length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<FaBuilding className="w-6 h-6 text-purple-600" />
|
||||||
|
<div className="ml-3">
|
||||||
|
<p className="text-xs font-medium text-gray-600">Departman Sayısı</p>
|
||||||
|
<p className="text-xl font-bold text-gray-900">{departments.length}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
{/* Filters */}
|
||||||
<div className="flex items-center">
|
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
|
||||||
<FaUsers className="w-6 h-6 text-green-600" />
|
<div className="flex-1">
|
||||||
<div className="ml-3">
|
<input
|
||||||
<p className="text-xs font-medium text-gray-600">
|
type="text"
|
||||||
Dolu Pozisyonlar
|
placeholder="Pozisyon adı veya kodu ara..."
|
||||||
</p>
|
value={searchTerm}
|
||||||
<p className="text-xl font-bold text-gray-900">
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
{
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
positions.filter((p) => p.employees && p.employees.length > 0)
|
/>
|
||||||
.length
|
</div>
|
||||||
}
|
|
||||||
</p>
|
<div className="flex flex-col sm:flex-row gap-3">
|
||||||
</div>
|
<select
|
||||||
|
value={selectedLevel}
|
||||||
|
onChange={(e) => setSelectedLevel(e.target.value)}
|
||||||
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-0 sm:min-w-[160px]"
|
||||||
|
>
|
||||||
|
<option value="all">Tüm Seviyeler</option>
|
||||||
|
<option value={JobLevelEnum.Entry}>Giriş Seviyesi</option>
|
||||||
|
<option value={JobLevelEnum.Junior}>Junior</option>
|
||||||
|
<option value={JobLevelEnum.Mid}>Orta Seviye</option>
|
||||||
|
<option value={JobLevelEnum.Senior}>Senior</option>
|
||||||
|
<option value={JobLevelEnum.Lead}>Lider</option>
|
||||||
|
<option value={JobLevelEnum.Manager}>Yönetici</option>
|
||||||
|
<option value={JobLevelEnum.Director}>Direktör</option>
|
||||||
|
<option value={JobLevelEnum.Executive}>Üst Düzey Yönetici</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={selectedDepartment}
|
||||||
|
onChange={(e) => setSelectedDepartment(e.target.value)}
|
||||||
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-0 sm:min-w-[160px]"
|
||||||
|
>
|
||||||
|
<option value="all">Tüm Departmanlar</option>
|
||||||
|
{departments.map((dept) => (
|
||||||
|
<option key={dept?.id} value={dept?.id}>
|
||||||
|
{dept?.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
{/* Content - List or Card View */}
|
||||||
<div className="flex items-center">
|
{viewMode === 'list' ? (
|
||||||
<FaBriefcase className="w-6 h-6 text-orange-600" />
|
<div className="bg-white rounded-lg shadow-sm border overflow-hidden">
|
||||||
<div className="ml-3">
|
<div className="overflow-x-auto">
|
||||||
<p className="text-xs font-medium text-gray-600">
|
<DataTable data={filteredPositions} columns={columns} />
|
||||||
Boş Pozisyonlar
|
|
||||||
</p>
|
|
||||||
<p className="text-xl font-bold text-gray-900">
|
|
||||||
{
|
|
||||||
positions.filter(
|
|
||||||
(p) => !p.employees || p.employees.length === 0
|
|
||||||
).length
|
|
||||||
}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||||
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
{filteredPositions.map((position) => (
|
||||||
<div className="flex items-center">
|
<PositionCard key={position.id} position={position} />
|
||||||
<FaBuilding className="w-6 h-6 text-purple-600" />
|
|
||||||
<div className="ml-3">
|
|
||||||
<p className="text-xs font-medium text-gray-600">
|
|
||||||
Departman Sayısı
|
|
||||||
</p>
|
|
||||||
<p className="text-xl font-bold text-gray-900">
|
|
||||||
{departments.length}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filters */}
|
|
||||||
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
|
|
||||||
<div className="flex-1">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Pozisyon adı veya kodu ara..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-3">
|
|
||||||
<select
|
|
||||||
value={selectedLevel}
|
|
||||||
onChange={(e) => setSelectedLevel(e.target.value)}
|
|
||||||
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-0 sm:min-w-[160px]"
|
|
||||||
>
|
|
||||||
<option value="all">Tüm Seviyeler</option>
|
|
||||||
<option value={JobLevelEnum.Entry}>Giriş Seviyesi</option>
|
|
||||||
<option value={JobLevelEnum.Junior}>Junior</option>
|
|
||||||
<option value={JobLevelEnum.Mid}>Orta Seviye</option>
|
|
||||||
<option value={JobLevelEnum.Senior}>Senior</option>
|
|
||||||
<option value={JobLevelEnum.Lead}>Lider</option>
|
|
||||||
<option value={JobLevelEnum.Manager}>Yönetici</option>
|
|
||||||
<option value={JobLevelEnum.Director}>Direktör</option>
|
|
||||||
<option value={JobLevelEnum.Executive}>Üst Düzey Yönetici</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<select
|
|
||||||
value={selectedDepartment}
|
|
||||||
onChange={(e) => setSelectedDepartment(e.target.value)}
|
|
||||||
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-0 sm:min-w-[160px]"
|
|
||||||
>
|
|
||||||
<option value="all">Tüm Departmanlar</option>
|
|
||||||
{departments.map((dept) => (
|
|
||||||
<option key={dept?.id} value={dept?.id}>
|
|
||||||
{dept?.name}
|
|
||||||
</option>
|
|
||||||
))}
|
))}
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content - List or Card View */}
|
|
||||||
{viewMode === "list" ? (
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border overflow-hidden">
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<DataTable data={filteredPositions} columns={columns} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
||||||
{filteredPositions.map((position) => (
|
|
||||||
<PositionCard key={position.id} position={position} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Empty State */}
|
{/* Empty State */}
|
||||||
{filteredPositions.length === 0 && (
|
{filteredPositions.length === 0 && (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
<FaBriefcase className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
<FaBriefcase className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||||||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
<h3 className="text-base font-medium text-gray-900 mb-2">Pozisyon bulunamadı</h3>
|
||||||
Pozisyon bulunamadı
|
<p className="text-sm text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
|
||||||
</h3>
|
</div>
|
||||||
<p className="text-sm text-gray-500">
|
)}
|
||||||
Arama kriterlerinizi değiştirmeyi deneyin.
|
</div>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Modals */}
|
{/* Modals */}
|
||||||
<JobPositionFormModal
|
<JobPositionFormModal
|
||||||
|
|
@ -558,8 +506,8 @@ const JobPositions: React.FC = () => {
|
||||||
onClose={closeViewModal}
|
onClose={closeViewModal}
|
||||||
position={selectedPosition}
|
position={selectedPosition}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default JobPositions;
|
export default JobPositions
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState, useEffect, useMemo } from "react";
|
import React, { useState, useEffect, useMemo } from 'react'
|
||||||
import {
|
import {
|
||||||
FaUser,
|
FaUser,
|
||||||
FaUsers,
|
FaUsers,
|
||||||
|
|
@ -14,54 +14,49 @@ import {
|
||||||
FaPhone,
|
FaPhone,
|
||||||
FaMapMarkerAlt,
|
FaMapMarkerAlt,
|
||||||
FaBriefcase,
|
FaBriefcase,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { HrEmployee, HrOrganizationChart as OrgChart } from "../../../types/hr";
|
import { HrEmployee, HrOrganizationChart as OrgChart } from '../../../types/hr'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
import { mockDepartments } from "../../../mocks/mockDepartments";
|
import { mockDepartments } from '../../../mocks/mockDepartments'
|
||||||
import Widget from "../../../components/common/Widget";
|
import Widget from '../../../components/common/Widget'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
// Dinamik organizasyon verisi oluşturma fonksiyonu
|
// Dinamik organizasyon verisi oluşturma fonksiyonu
|
||||||
const generateOrganizationData = (): OrgChart[] => {
|
const generateOrganizationData = (): OrgChart[] => {
|
||||||
const orgData: OrgChart[] = [];
|
const orgData: OrgChart[] = []
|
||||||
|
|
||||||
// Çalışanları işle
|
// Çalışanları işle
|
||||||
mockEmployees.forEach((employee) => {
|
mockEmployees.forEach((employee) => {
|
||||||
const department = mockDepartments.find(
|
const department = mockDepartments.find((d) => d.id === employee.departmantId)
|
||||||
(d) => d.id === employee.departmantId
|
|
||||||
);
|
|
||||||
|
|
||||||
let level = 3; // Varsayılan seviye (normal çalışan)
|
let level = 3 // Varsayılan seviye (normal çalışan)
|
||||||
let parentId: string | undefined = undefined;
|
let parentId: string | undefined = undefined
|
||||||
|
|
||||||
// Eğer bu çalışan bir departman yöneticisiyse
|
// Eğer bu çalışan bir departman yöneticisiyse
|
||||||
if (department && department.managerId === employee.id) {
|
if (department && department.managerId === employee.id) {
|
||||||
if (!department.parentDepartmentId) {
|
if (!department.parentDepartmentId) {
|
||||||
// Ana departman yöneticisi (CEO/Genel Müdür)
|
// Ana departman yöneticisi (CEO/Genel Müdür)
|
||||||
level = 0;
|
level = 0
|
||||||
} else {
|
} else {
|
||||||
// Alt departman yöneticisi
|
// Alt departman yöneticisi
|
||||||
level = 1;
|
level = 1
|
||||||
// Üst departmanın yöneticisini parent olarak bul
|
// Üst departmanın yöneticisini parent olarak bul
|
||||||
const parentDept = mockDepartments.find(
|
const parentDept = mockDepartments.find((d) => d.id === department.parentDepartmentId)
|
||||||
(d) => d.id === department.parentDepartmentId
|
|
||||||
);
|
|
||||||
if (parentDept && parentDept.managerId) {
|
if (parentDept && parentDept.managerId) {
|
||||||
parentId = parentDept.managerId;
|
parentId = parentDept.managerId
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// Normal çalışan - departman yöneticisine bağlı
|
// Normal çalışan - departman yöneticisine bağlı
|
||||||
if (department && department.managerId) {
|
if (department && department.managerId) {
|
||||||
parentId = department.managerId;
|
parentId = department.managerId
|
||||||
|
|
||||||
// Departman yöneticisinin seviyesine göre belirleme
|
// Departman yöneticisinin seviyesine göre belirleme
|
||||||
const managerDept = mockDepartments.find(
|
const managerDept = mockDepartments.find((d) => d.managerId === department.managerId)
|
||||||
(d) => d.managerId === department.managerId
|
|
||||||
);
|
|
||||||
if (managerDept && !managerDept.parentDepartmentId) {
|
if (managerDept && !managerDept.parentDepartmentId) {
|
||||||
level = 2; // CEO'ya direkt bağlı
|
level = 2 // CEO'ya direkt bağlı
|
||||||
} else {
|
} else {
|
||||||
level = 3; // Orta kademe yöneticiye bağlı
|
level = 3 // Orta kademe yöneticiye bağlı
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -72,46 +67,44 @@ const generateOrganizationData = (): OrgChart[] => {
|
||||||
employee: employee,
|
employee: employee,
|
||||||
parentId: parentId,
|
parentId: parentId,
|
||||||
level: level,
|
level: level,
|
||||||
position: employee.jobPosition?.name || "Belirsiz",
|
position: employee.jobPosition?.name || 'Belirsiz',
|
||||||
isActive: employee.isActive,
|
isActive: employee.isActive,
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
return orgData.sort((a, b) => a.level - b.level);
|
return orgData.sort((a, b) => a.level - b.level)
|
||||||
};
|
}
|
||||||
|
|
||||||
interface TreeNode {
|
interface TreeNode {
|
||||||
employee: HrEmployee;
|
employee: HrEmployee
|
||||||
children: TreeNode[];
|
children: TreeNode[]
|
||||||
level: number;
|
level: number
|
||||||
}
|
}
|
||||||
|
|
||||||
const OrganizationChart: React.FC = () => {
|
const OrganizationChart: React.FC = () => {
|
||||||
const [employees] = useState<HrEmployee[]>(mockEmployees);
|
const [employees] = useState<HrEmployee[]>(mockEmployees)
|
||||||
const [organizationData] = useState<OrgChart[]>(generateOrganizationData());
|
const [organizationData] = useState<OrgChart[]>(generateOrganizationData())
|
||||||
const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
|
const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set())
|
||||||
const [orgTree, setOrgTree] = useState<TreeNode[]>([]);
|
const [orgTree, setOrgTree] = useState<TreeNode[]>([])
|
||||||
const [viewMode, setViewMode] = useState<"tree" | "cards">("tree");
|
const [viewMode, setViewMode] = useState<'tree' | 'cards'>('tree')
|
||||||
const [selectedEmployee, setSelectedEmployee] = useState<HrEmployee | null>(
|
const [selectedEmployee, setSelectedEmployee] = useState<HrEmployee | null>(null)
|
||||||
null
|
const [showModal, setShowModal] = useState(false)
|
||||||
);
|
const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
|
||||||
const [showModal, setShowModal] = useState(false);
|
|
||||||
const [selectedDepartment, setSelectedDepartment] = useState<string>("all");
|
|
||||||
|
|
||||||
const handleViewEmployee = (employee: HrEmployee) => {
|
const handleViewEmployee = (employee: HrEmployee) => {
|
||||||
setSelectedEmployee(employee);
|
setSelectedEmployee(employee)
|
||||||
setShowModal(true);
|
setShowModal(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleCloseModal = () => {
|
const handleCloseModal = () => {
|
||||||
setShowModal(false);
|
setShowModal(false)
|
||||||
setSelectedEmployee(null);
|
setSelectedEmployee(null)
|
||||||
};
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Build organization tree structure
|
// Build organization tree structure
|
||||||
const buildTree = (): TreeNode[] => {
|
const buildTree = (): TreeNode[] => {
|
||||||
const nodeMap = new Map<string, TreeNode>();
|
const nodeMap = new Map<string, TreeNode>()
|
||||||
|
|
||||||
// First, create all nodes
|
// First, create all nodes
|
||||||
employees.forEach((employee) => {
|
employees.forEach((employee) => {
|
||||||
|
|
@ -119,82 +112,79 @@ const OrganizationChart: React.FC = () => {
|
||||||
employee,
|
employee,
|
||||||
children: [],
|
children: [],
|
||||||
level: 0,
|
level: 0,
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
// Then, build the tree structure
|
// Then, build the tree structure
|
||||||
const rootNodes: TreeNode[] = [];
|
const rootNodes: TreeNode[] = []
|
||||||
|
|
||||||
organizationData.forEach((orgData) => {
|
organizationData.forEach((orgData) => {
|
||||||
const node = nodeMap.get(orgData.employeeId);
|
const node = nodeMap.get(orgData.employeeId)
|
||||||
if (node) {
|
if (node) {
|
||||||
node.level = orgData.level;
|
node.level = orgData.level
|
||||||
|
|
||||||
if (orgData.parentId) {
|
if (orgData.parentId) {
|
||||||
const parentNode = nodeMap.get(orgData.parentId);
|
const parentNode = nodeMap.get(orgData.parentId)
|
||||||
if (parentNode) {
|
if (parentNode) {
|
||||||
parentNode.children.push(node);
|
parentNode.children.push(node)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
rootNodes.push(node);
|
rootNodes.push(node)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
return rootNodes;
|
return rootNodes
|
||||||
};
|
}
|
||||||
|
|
||||||
setOrgTree(buildTree());
|
setOrgTree(buildTree())
|
||||||
// Auto-expand first level
|
// Auto-expand first level
|
||||||
const firstLevelIds = organizationData
|
const firstLevelIds = organizationData
|
||||||
.filter((org) => org.level <= 1)
|
.filter((org) => org.level <= 1)
|
||||||
.map((org) => org.employeeId);
|
.map((org) => org.employeeId)
|
||||||
setExpandedNodes(new Set(firstLevelIds));
|
setExpandedNodes(new Set(firstLevelIds))
|
||||||
}, [employees, organizationData]);
|
}, [employees, organizationData])
|
||||||
|
|
||||||
// Filtered data for views
|
// Filtered data for views
|
||||||
const filteredOrgTree = useMemo(() => {
|
const filteredOrgTree = useMemo(() => {
|
||||||
if (selectedDepartment === "all") {
|
if (selectedDepartment === 'all') {
|
||||||
return orgTree;
|
return orgTree
|
||||||
}
|
}
|
||||||
|
|
||||||
const filterTree = (nodes: TreeNode[]): TreeNode[] => {
|
const filterTree = (nodes: TreeNode[]): TreeNode[] => {
|
||||||
const result: TreeNode[] = [];
|
const result: TreeNode[] = []
|
||||||
for (const node of nodes) {
|
for (const node of nodes) {
|
||||||
const filteredChildren = filterTree(node.children);
|
const filteredChildren = filterTree(node.children)
|
||||||
if (
|
if (node.employee.departmantId === selectedDepartment || filteredChildren.length > 0) {
|
||||||
node.employee.departmantId === selectedDepartment ||
|
result.push({ ...node, children: filteredChildren })
|
||||||
filteredChildren.length > 0
|
|
||||||
) {
|
|
||||||
result.push({ ...node, children: filteredChildren });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return result;
|
return result
|
||||||
};
|
}
|
||||||
|
|
||||||
return filterTree(orgTree);
|
return filterTree(orgTree)
|
||||||
}, [orgTree, selectedDepartment]);
|
}, [orgTree, selectedDepartment])
|
||||||
|
|
||||||
const filteredEmployees = useMemo(() => {
|
const filteredEmployees = useMemo(() => {
|
||||||
if (selectedDepartment === "all") {
|
if (selectedDepartment === 'all') {
|
||||||
return employees;
|
return employees
|
||||||
}
|
}
|
||||||
return employees.filter((emp) => emp.departmantId === selectedDepartment);
|
return employees.filter((emp) => emp.departmantId === selectedDepartment)
|
||||||
}, [employees, selectedDepartment]);
|
}, [employees, selectedDepartment])
|
||||||
|
|
||||||
const toggleNode = (nodeId: string) => {
|
const toggleNode = (nodeId: string) => {
|
||||||
const newExpanded = new Set(expandedNodes);
|
const newExpanded = new Set(expandedNodes)
|
||||||
if (newExpanded.has(nodeId)) {
|
if (newExpanded.has(nodeId)) {
|
||||||
newExpanded.delete(nodeId);
|
newExpanded.delete(nodeId)
|
||||||
} else {
|
} else {
|
||||||
newExpanded.add(nodeId);
|
newExpanded.add(nodeId)
|
||||||
}
|
}
|
||||||
setExpandedNodes(newExpanded);
|
setExpandedNodes(newExpanded)
|
||||||
};
|
}
|
||||||
|
|
||||||
const renderTreeNode = (node: TreeNode): React.ReactNode => {
|
const renderTreeNode = (node: TreeNode): React.ReactNode => {
|
||||||
const isExpanded = expandedNodes.has(node.employee.id);
|
const isExpanded = expandedNodes.has(node.employee.id)
|
||||||
const hasChildren = node.children.length > 0;
|
const hasChildren = node.children.length > 0
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={node.employee.id} className="relative">
|
<div key={node.employee.id} className="relative">
|
||||||
|
|
@ -205,7 +195,7 @@ const OrganizationChart: React.FC = () => {
|
||||||
style={{
|
style={{
|
||||||
left: `${node.level * 1.25 - 0.7}rem`,
|
left: `${node.level * 1.25 - 0.7}rem`,
|
||||||
top: 0,
|
top: 0,
|
||||||
height: "100%",
|
height: '100%',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
@ -217,7 +207,7 @@ const OrganizationChart: React.FC = () => {
|
||||||
{node.level > 0 && (
|
{node.level > 0 && (
|
||||||
<span
|
<span
|
||||||
className="absolute border-t border-gray-300 w-3"
|
className="absolute border-t border-gray-300 w-3"
|
||||||
style={{ left: `${node.level * 1.25 - 0.7}rem`, top: "1.1rem" }}
|
style={{ left: `${node.level * 1.25 - 0.7}rem`, top: '1.1rem' }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
@ -228,11 +218,7 @@ const OrganizationChart: React.FC = () => {
|
||||||
onClick={() => toggleNode(node.employee.id)}
|
onClick={() => toggleNode(node.employee.id)}
|
||||||
className="p-1 text-gray-500 hover:text-gray-800 rounded-full hover:bg-gray-200"
|
className="p-1 text-gray-500 hover:text-gray-800 rounded-full hover:bg-gray-200"
|
||||||
>
|
>
|
||||||
{isExpanded ? (
|
{isExpanded ? <FaChevronDown size={10} /> : <FaChevronRight size={10} />}
|
||||||
<FaChevronDown size={10} />
|
|
||||||
) : (
|
|
||||||
<FaChevronRight size={10} />
|
|
||||||
)}
|
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -248,9 +234,7 @@ const OrganizationChart: React.FC = () => {
|
||||||
<p className="text-xs text-gray-600 truncate">
|
<p className="text-xs text-gray-600 truncate">
|
||||||
{node.employee.jobPosition?.name}
|
{node.employee.jobPosition?.name}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-gray-500 truncate">
|
<p className="text-xs text-gray-500 truncate">{node.employee.department?.name}</p>
|
||||||
{node.employee.department?.name}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -279,22 +263,23 @@ const OrganizationChart: React.FC = () => {
|
||||||
<div>{node.children.map((child) => renderTreeNode(child))}</div>
|
<div>{node.children.map((child) => renderTreeNode(child))}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
const renderCardView = () => {
|
const renderCardView = () => {
|
||||||
const groupedByLevel = filteredEmployees.reduce((acc, employee) => {
|
const groupedByLevel = filteredEmployees.reduce(
|
||||||
const orgData = organizationData.find(
|
(acc, employee) => {
|
||||||
(org) => org.employeeId === employee.id
|
const orgData = organizationData.find((org) => org.employeeId === employee.id)
|
||||||
);
|
const level = orgData?.level || 0
|
||||||
const level = orgData?.level || 0;
|
|
||||||
|
|
||||||
if (!acc[level]) {
|
if (!acc[level]) {
|
||||||
acc[level] = [];
|
acc[level] = []
|
||||||
}
|
}
|
||||||
acc[level].push(employee);
|
acc[level].push(employee)
|
||||||
return acc;
|
return acc
|
||||||
}, {} as Record<number, HrEmployee[]>);
|
},
|
||||||
|
{} as Record<number, HrEmployee[]>,
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
|
|
@ -304,13 +289,13 @@ const OrganizationChart: React.FC = () => {
|
||||||
<div key={level}>
|
<div key={level}>
|
||||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||||
<FaBuilding className="w-5 h-5" />
|
<FaBuilding className="w-5 h-5" />
|
||||||
{level === "0"
|
{level === '0'
|
||||||
? "Üst Yönetim"
|
? 'Üst Yönetim'
|
||||||
: level === "1"
|
: level === '1'
|
||||||
? "Orta Kademe Yönetim"
|
? 'Orta Kademe Yönetim'
|
||||||
: level === "2"
|
: level === '2'
|
||||||
? "Alt Kademe Yönetim"
|
? 'Alt Kademe Yönetim'
|
||||||
: `${parseInt(level) + 1}. Seviye`}
|
: `${parseInt(level) + 1}. Seviye`}
|
||||||
<span className="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
|
<span className="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
|
||||||
{levelEmployees.length} kişi
|
{levelEmployees.length} kişi
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -325,20 +310,20 @@ const OrganizationChart: React.FC = () => {
|
||||||
<div className="flex items-center mb-3">
|
<div className="flex items-center mb-3">
|
||||||
<div
|
<div
|
||||||
className={`w-8 h-8 rounded-full flex items-center justify-center mr-2 ${
|
className={`w-8 h-8 rounded-full flex items-center justify-center mr-2 ${
|
||||||
level === "0"
|
level === '0'
|
||||||
? "bg-blue-100"
|
? 'bg-blue-100'
|
||||||
: level === "1"
|
: level === '1'
|
||||||
? "bg-green-100"
|
? 'bg-green-100'
|
||||||
: "bg-gray-100"
|
: 'bg-gray-100'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<FaUser
|
<FaUser
|
||||||
className={`w-4 h-4 ${
|
className={`w-4 h-4 ${
|
||||||
level === "0"
|
level === '0'
|
||||||
? "text-blue-600"
|
? 'text-blue-600'
|
||||||
: level === "1"
|
: level === '1'
|
||||||
? "text-green-600"
|
? 'text-green-600'
|
||||||
: "text-gray-600"
|
: 'text-gray-600'
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -350,9 +335,7 @@ const OrganizationChart: React.FC = () => {
|
||||||
>
|
>
|
||||||
{employee.fullName}
|
{employee.fullName}
|
||||||
</h4>
|
</h4>
|
||||||
<p className="text-sm text-gray-600 truncate">
|
<p className="text-sm text-gray-600 truncate">{employee.code}</p>
|
||||||
{employee.code}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -360,9 +343,7 @@ const OrganizationChart: React.FC = () => {
|
||||||
<p className="text-xs text-gray-800 font-medium truncate">
|
<p className="text-xs text-gray-800 font-medium truncate">
|
||||||
{employee.jobPosition?.name}
|
{employee.jobPosition?.name}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-gray-600 truncate">
|
<p className="text-xs text-gray-600 truncate">{employee.department?.name}</p>
|
||||||
{employee.department?.name}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
@ -370,113 +351,100 @@ const OrganizationChart: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-2">
|
||||||
<div className="flex items-center justify-between">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-xl font-bold text-gray-900">
|
<div>
|
||||||
Organizasyon Şeması
|
<h2 className="text-xl font-bold text-gray-900">Organizasyon Şeması</h2>
|
||||||
</h2>
|
<p className="text-sm text-gray-600 mt-1">Kurumsal hiyerarşi ve raporlama yapısı</p>
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
</div>
|
||||||
Kurumsal hiyerarşi ve raporlama yapısı
|
|
||||||
</p>
|
<div className="flex items-center gap-2">
|
||||||
|
<select
|
||||||
|
value={selectedDepartment}
|
||||||
|
onChange={(e) => setSelectedDepartment(e.target.value)}
|
||||||
|
className="px-3 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>
|
||||||
|
{mockDepartments.map((dept) => (
|
||||||
|
<option key={dept.id} value={dept.id}>
|
||||||
|
{dept.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<div className="flex bg-gray-100 rounded-lg p-0.5">
|
||||||
|
<button
|
||||||
|
onClick={() => setViewMode('tree')}
|
||||||
|
className={`p-1.5 rounded-md transition-colors ${
|
||||||
|
viewMode === 'tree'
|
||||||
|
? 'bg-white text-blue-600 shadow-sm'
|
||||||
|
: 'text-gray-600 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FaSitemap 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'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FaTh className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
{/* Stats */}
|
||||||
<select
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||||
value={selectedDepartment}
|
<Widget title="Toplam Personel" value={employees.length} color="blue" icon="FaBuilding" />
|
||||||
onChange={(e) => setSelectedDepartment(e.target.value)}
|
|
||||||
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
<Widget
|
||||||
>
|
title="Departmanlar"
|
||||||
<option value="all">Tüm Departmanlar</option>
|
value={new Set(employees.map((e) => e.department?.id).filter(Boolean)).size}
|
||||||
{mockDepartments.map((dept) => (
|
color="purple"
|
||||||
<option key={dept.id} value={dept.id}>
|
icon="FaBuilding"
|
||||||
{dept.name}
|
/>
|
||||||
</option>
|
|
||||||
))}
|
<Widget
|
||||||
</select>
|
title="Seviye Sayısı"
|
||||||
<div className="flex bg-gray-100 rounded-lg p-0.5">
|
value={
|
||||||
<button
|
organizationData.length > 0
|
||||||
onClick={() => setViewMode("tree")}
|
? Math.max(...organizationData.map((org) => org.level)) + 1
|
||||||
className={`p-1.5 rounded-md transition-colors ${
|
: 0
|
||||||
viewMode === "tree"
|
}
|
||||||
? "bg-white text-blue-600 shadow-sm"
|
color="orange"
|
||||||
: "text-gray-600 hover:text-gray-900"
|
icon="FaUser"
|
||||||
}`}
|
/>
|
||||||
>
|
|
||||||
<FaSitemap 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"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FaTh className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats */}
|
{/* Content */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
<div className="bg-white rounded-lg border p-4">
|
||||||
<Widget
|
{viewMode === 'tree' ? (
|
||||||
title="Toplam Personel"
|
<div className="pt-2">{filteredOrgTree.map((node) => renderTreeNode(node))}</div>
|
||||||
value={employees.length}
|
) : (
|
||||||
color="blue"
|
renderCardView()
|
||||||
icon="FaBuilding"
|
)}
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
{(viewMode === 'tree'
|
||||||
title="Departmanlar"
|
? filteredOrgTree.length === 0
|
||||||
value={
|
: filteredEmployees.length === 0) && (
|
||||||
new Set(employees.map((e) => e.department?.id).filter(Boolean)).size
|
<div className="text-center py-12">
|
||||||
}
|
<FaBuilding className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||||||
color="purple"
|
<h3 className="text-base font-medium text-gray-900 mb-2">
|
||||||
icon="FaBuilding"
|
Organizasyon verisi bulunamadı
|
||||||
/>
|
</h3>
|
||||||
|
<p className="text-gray-500">Henüz organizasyon şeması oluşturulmamış.</p>
|
||||||
<Widget
|
</div>
|
||||||
title="Seviye Sayısı"
|
)}
|
||||||
value={
|
</div>
|
||||||
organizationData.length > 0
|
|
||||||
? Math.max(...organizationData.map((org) => org.level)) + 1
|
|
||||||
: 0
|
|
||||||
}
|
|
||||||
color="orange"
|
|
||||||
icon="FaUser"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="bg-white rounded-lg border p-4">
|
|
||||||
{viewMode === "tree" ? (
|
|
||||||
<div className="pt-2">
|
|
||||||
{filteredOrgTree.map((node) => renderTreeNode(node))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
renderCardView()
|
|
||||||
)}
|
|
||||||
|
|
||||||
{(viewMode === "tree"
|
|
||||||
? filteredOrgTree.length === 0
|
|
||||||
: filteredEmployees.length === 0) && (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<FaBuilding className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
|
||||||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
|
||||||
Organizasyon verisi bulunamadı
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-500">
|
|
||||||
Henüz organizasyon şeması oluşturulmamış.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Employee Detail Modal */}
|
{/* Employee Detail Modal */}
|
||||||
|
|
@ -485,13 +453,8 @@ const OrganizationChart: React.FC = () => {
|
||||||
<div className="bg-white rounded-lg p-4 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
<div className="bg-white rounded-lg p-4 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
{/* Modal Header */}
|
{/* Modal Header */}
|
||||||
<div className="flex justify-between items-center mb-4">
|
<div className="flex justify-between items-center mb-4">
|
||||||
<h3 className="text-lg font-semibold text-gray-900">
|
<h3 className="text-lg font-semibold text-gray-900">Personel Detayları</h3>
|
||||||
Personel Detayları
|
<button onClick={handleCloseModal} className="text-gray-400 hover:text-gray-600 p-1">
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
onClick={handleCloseModal}
|
|
||||||
className="text-gray-400 hover:text-gray-600 p-1"
|
|
||||||
>
|
|
||||||
<FaTimes className="w-5 h-5" />
|
<FaTimes className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -504,13 +467,9 @@ const OrganizationChart: React.FC = () => {
|
||||||
<FaUser className="w-8 h-8 text-blue-600" />
|
<FaUser className="w-8 h-8 text-blue-600" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-lg font-bold text-gray-900">
|
<h4 className="text-lg font-bold text-gray-900">{selectedEmployee.fullName}</h4>
|
||||||
{selectedEmployee.fullName}
|
|
||||||
</h4>
|
|
||||||
<p className="text-gray-600">{selectedEmployee.code}</p>
|
<p className="text-gray-600">{selectedEmployee.code}</p>
|
||||||
<p className="text-sm text-gray-500">
|
<p className="text-sm text-gray-500">{selectedEmployee.jobPosition?.name}</p>
|
||||||
{selectedEmployee.jobPosition?.name}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -524,17 +483,13 @@ const OrganizationChart: React.FC = () => {
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<FaEnvelope className="w-4 h-4 text-gray-500 mr-3" />
|
<FaEnvelope className="w-4 h-4 text-gray-500 mr-3" />
|
||||||
<span className="text-sm">E-posta:</span>
|
<span className="text-sm">E-posta:</span>
|
||||||
<span className="ml-2 text-sm font-medium">
|
<span className="ml-2 text-sm font-medium">{selectedEmployee.email}</span>
|
||||||
{selectedEmployee.email}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
{selectedEmployee.phone && (
|
{selectedEmployee.phone && (
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<FaPhone className="w-4 h-4 text-gray-500 mr-3" />
|
<FaPhone className="w-4 h-4 text-gray-500 mr-3" />
|
||||||
<span className="text-sm">İş Telefonu:</span>
|
<span className="text-sm">İş Telefonu:</span>
|
||||||
<span className="ml-2 text-sm font-medium">
|
<span className="ml-2 text-sm font-medium">{selectedEmployee.phone}</span>
|
||||||
{selectedEmployee.phone}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{selectedEmployee.personalPhone && (
|
{selectedEmployee.personalPhone && (
|
||||||
|
|
@ -559,39 +514,25 @@ const OrganizationChart: React.FC = () => {
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">Departman:</span>
|
<span className="text-sm text-gray-600">Departman:</span>
|
||||||
<p className="font-medium">
|
<p className="font-medium">{selectedEmployee.department?.name}</p>
|
||||||
{selectedEmployee.department?.name}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">Pozisyon:</span>
|
<span className="text-sm text-gray-600">Pozisyon:</span>
|
||||||
<p className="font-medium">
|
<p className="font-medium">{selectedEmployee.jobPosition?.name}</p>
|
||||||
{selectedEmployee.jobPosition?.name}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">İşe Başlama Tarihi:</span>
|
||||||
İşe Başlama Tarihi:
|
|
||||||
</span>
|
|
||||||
<p className="font-medium flex items-center">
|
<p className="font-medium flex items-center">
|
||||||
<FaCalendar className="w-4 h-4 mr-1 text-gray-500" />
|
<FaCalendar className="w-4 h-4 mr-1 text-gray-500" />
|
||||||
{new Date(selectedEmployee.hireDate).toLocaleDateString(
|
{new Date(selectedEmployee.hireDate).toLocaleDateString('tr-TR')}
|
||||||
"tr-TR"
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">İstihdam Türü:</span>
|
||||||
İstihdam Türü:
|
<p className="font-medium">{selectedEmployee.employmentType}</p>
|
||||||
</span>
|
|
||||||
<p className="font-medium">
|
|
||||||
{selectedEmployee.employmentType}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">Çalışma Lokasyonu:</span>
|
||||||
Çalışma Lokasyonu:
|
|
||||||
</span>
|
|
||||||
<p className="font-medium flex items-center">
|
<p className="font-medium flex items-center">
|
||||||
<FaMapMarkerAlt className="w-4 h-4 mr-1 text-gray-500" />
|
<FaMapMarkerAlt className="w-4 h-4 mr-1 text-gray-500" />
|
||||||
{selectedEmployee.workLocation}
|
{selectedEmployee.workLocation}
|
||||||
|
|
@ -602,11 +543,11 @@ const OrganizationChart: React.FC = () => {
|
||||||
<span
|
<span
|
||||||
className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
|
className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
selectedEmployee.isActive
|
selectedEmployee.isActive
|
||||||
? "bg-green-100 text-green-800"
|
? 'bg-green-100 text-green-800'
|
||||||
: "bg-red-100 text-red-800"
|
: 'bg-red-100 text-red-800'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{selectedEmployee.isActive ? "Aktif" : "Pasif"}
|
{selectedEmployee.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -622,14 +563,10 @@ const OrganizationChart: React.FC = () => {
|
||||||
<div className="bg-gray-50 p-3 rounded-lg space-y-2">
|
<div className="bg-gray-50 p-3 rounded-lg space-y-2">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">Doğum Tarihi:</span>
|
||||||
Doğum Tarihi:
|
|
||||||
</span>
|
|
||||||
<p className="font-medium flex items-center">
|
<p className="font-medium flex items-center">
|
||||||
<FaCalendar className="w-4 h-4 mr-1 text-gray-500" />
|
<FaCalendar className="w-4 h-4 mr-1 text-gray-500" />
|
||||||
{new Date(
|
{new Date(selectedEmployee.birthDate).toLocaleDateString('tr-TR')}
|
||||||
selectedEmployee.birthDate
|
|
||||||
).toLocaleDateString("tr-TR")}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -637,20 +574,12 @@ const OrganizationChart: React.FC = () => {
|
||||||
<p className="font-medium">{selectedEmployee.gender}</p>
|
<p className="font-medium">{selectedEmployee.gender}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">Medeni Durum:</span>
|
||||||
Medeni Durum:
|
<p className="font-medium">{selectedEmployee.maritalStatus}</p>
|
||||||
</span>
|
|
||||||
<p className="font-medium">
|
|
||||||
{selectedEmployee.maritalStatus}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">TC Kimlik No:</span>
|
||||||
TC Kimlik No:
|
<p className="font-medium">{selectedEmployee.nationalId}</p>
|
||||||
</span>
|
|
||||||
<p className="font-medium">
|
|
||||||
{selectedEmployee.nationalId}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -659,8 +588,7 @@ const OrganizationChart: React.FC = () => {
|
||||||
<span className="text-sm text-gray-600">Adres:</span>
|
<span className="text-sm text-gray-600">Adres:</span>
|
||||||
<p className="font-medium flex items-start">
|
<p className="font-medium flex items-start">
|
||||||
<FaMapMarkerAlt className="w-4 h-4 mr-1 text-gray-500 mt-0.5" />
|
<FaMapMarkerAlt className="w-4 h-4 mr-1 text-gray-500 mt-0.5" />
|
||||||
{selectedEmployee.address.street},{" "}
|
{selectedEmployee.address.street}, {selectedEmployee.address.city},{' '}
|
||||||
{selectedEmployee.address.city},{" "}
|
|
||||||
{selectedEmployee.address.country}
|
{selectedEmployee.address.country}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -679,9 +607,7 @@ const OrganizationChart: React.FC = () => {
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">İsim:</span>
|
<span className="text-sm text-gray-600">İsim:</span>
|
||||||
<p className="font-medium">
|
<p className="font-medium">{selectedEmployee.emergencyContact.name}</p>
|
||||||
{selectedEmployee.emergencyContact.name}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">Yakınlık:</span>
|
<span className="text-sm text-gray-600">Yakınlık:</span>
|
||||||
|
|
@ -691,9 +617,7 @@ const OrganizationChart: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm text-gray-600">Telefon:</span>
|
<span className="text-sm text-gray-600">Telefon:</span>
|
||||||
<p className="font-medium">
|
<p className="font-medium">{selectedEmployee.emergencyContact.phone}</p>
|
||||||
{selectedEmployee.emergencyContact.phone}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -713,8 +637,8 @@ const OrganizationChart: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default OrganizationChart;
|
export default OrganizationChart
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue