diff --git a/ui/src/views/hr/components/BadgeManagement.tsx b/ui/src/views/hr/components/BadgeManagement.tsx
index 5310467f..c43b4ea7 100644
--- a/ui/src/views/hr/components/BadgeManagement.tsx
+++ b/ui/src/views/hr/components/BadgeManagement.tsx
@@ -1,64 +1,55 @@
-import React, { useState } from "react";
-import { FaAward, FaPlus, FaEdit, FaTrash, FaUsers } from "react-icons/fa";
-import { HrBadge, HrEmployeeBadge } from "../../../types/hr";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockBadges } from "../../../mocks/mockBadges";
-import BadgeEditModal from "./BadgeEditModal";
-import BadgeAssignmentModal, {
-  BadgeAssignmentFormData,
-} from "./BadgeAssignmentModal";
-import Widget from "../../../components/common/Widget";
-import { getIconComponent } from "../../../utils/erp";
+import React, { useState } from 'react'
+import { FaAward, FaPlus, FaEdit, FaTrash, FaUsers } from 'react-icons/fa'
+import { HrBadge, HrEmployeeBadge } from '../../../types/hr'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockBadges } from '../../../mocks/mockBadges'
+import BadgeEditModal from './BadgeEditModal'
+import BadgeAssignmentModal, { BadgeAssignmentFormData } from './BadgeAssignmentModal'
+import Widget from '../../../components/common/Widget'
+import { getIconComponent } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const BadgeManagement: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<"badges" | "assignments">(
-    "badges"
-  );
-  const [searchTerm, setSearchTerm] = useState("");
-  const [searchAssignTerm, setSearchAssignTerm] = useState("");
+  const [activeTab, setActiveTab] = useState<'badges' | 'assignments'>('badges')
+  const [searchTerm, setSearchTerm] = useState('')
+  const [searchAssignTerm, setSearchAssignTerm] = useState('')
 
   // Modal states
-  const [isBadgeModalOpen, setIsBadgeModalOpen] = useState(false);
-  const [isAssignmentModalOpen, setIsAssignmentModalOpen] = useState(false);
-  const [editingBadge, setEditingBadge] = useState<HrBadge | null>(null);
+  const [isBadgeModalOpen, setIsBadgeModalOpen] = useState(false)
+  const [isAssignmentModalOpen, setIsAssignmentModalOpen] = useState(false)
+  const [editingBadge, setEditingBadge] = useState<HrBadge | null>(null)
 
   // Mock data - In real app, this would come from API
-  const [badges, setBadges] = useState(mockBadges);
-  const [employeeBadges, setEmployeeBadges] = useState<HrEmployeeBadge[]>([]);
+  const [badges, setBadges] = useState(mockBadges)
+  const [employeeBadges, setEmployeeBadges] = useState<HrEmployeeBadge[]>([])
 
   // Handlers
   const handleAddBadge = () => {
-    setEditingBadge(null);
-    setIsBadgeModalOpen(true);
-  };
+    setEditingBadge(null)
+    setIsBadgeModalOpen(true)
+  }
 
   const handleEditBadge = (badge: HrBadge) => {
-    setEditingBadge(badge);
-    setIsBadgeModalOpen(true);
-  };
+    setEditingBadge(badge)
+    setIsBadgeModalOpen(true)
+  }
 
   const handleDeleteBadge = (id: string) => {
-    if (window.confirm("Bu rozeti silmek istediğinizden emin misiniz?")) {
-      setBadges(badges.filter((badge) => badge.id !== id));
-      alert("Rozet başarıyla silindi!");
+    if (window.confirm('Bu rozeti silmek istediğinizden emin misiniz?')) {
+      setBadges(badges.filter((badge) => badge.id !== id))
+      alert('Rozet başarıyla silindi!')
     }
-  };
+  }
 
   const handleRevokeBadge = (employeeBadgeId: string) => {
-    if (
-      window.confirm(
-        "Bu rozet atamasını iptal etmek istediğinizden emin misiniz?"
-      )
-    ) {
+    if (window.confirm('Bu rozet atamasını iptal etmek istediğinizden emin misiniz?')) {
       setEmployeeBadges((prev) =>
-        prev.map((eb) =>
-          eb.id === employeeBadgeId ? { ...eb, isActive: false } : eb
-        )
-      );
-      alert("Rozet ataması iptal edildi!");
+        prev.map((eb) => (eb.id === employeeBadgeId ? { ...eb, isActive: false } : eb)),
+      )
+      alert('Rozet ataması iptal edildi!')
     }
-  };
+  }
 
   const handleBadgeSubmit = (badgeData: HrBadge) => {
     if (editingBadge) {
@@ -71,29 +62,27 @@ const BadgeManagement: React.FC = () => {
                 ...badgeData,
                 lastModificationTime: new Date(),
               }
-            : badge
-        )
-      );
-      alert("Rozet başarıyla güncellendi!");
+            : badge,
+        ),
+      )
+      alert('Rozet başarıyla güncellendi!')
     } else {
       // Create new badge
       const newBadge: HrBadge = {
         ...badgeData,
         creationTime: new Date(),
         lastModificationTime: new Date(),
-      };
-      setBadges((prev) => [...prev, newBadge]);
-      alert("Yeni rozet başarıyla oluşturuldu!");
+      }
+      setBadges((prev) => [...prev, newBadge])
+      alert('Yeni rozet başarıyla oluşturuldu!')
     }
-    setIsBadgeModalOpen(false);
-    setEditingBadge(null);
-  };
+    setIsBadgeModalOpen(false)
+    setEditingBadge(null)
+  }
 
   const handleAssignmentSubmit = (assignmentData: BadgeAssignmentFormData) => {
-    const employee = mockEmployees.find(
-      (emp) => emp.id === assignmentData.employeeId
-    );
-    const badge = badges.find((b) => b.id === assignmentData.badgeId);
+    const employee = mockEmployees.find((emp) => emp.id === assignmentData.employeeId)
+    const badge = badges.find((b) => b.id === assignmentData.badgeId)
 
     if (employee && badge) {
       const newAssignment: HrEmployeeBadge = {
@@ -103,42 +92,40 @@ const BadgeManagement: React.FC = () => {
         badgeId: assignmentData.badgeId,
         badge: badge,
         earnedDate: new Date(assignmentData.earnedDate),
-        expiryDate: assignmentData.expiryDate
-          ? new Date(assignmentData.expiryDate)
-          : undefined,
+        expiryDate: assignmentData.expiryDate ? new Date(assignmentData.expiryDate) : undefined,
         reason: assignmentData.reason,
         notes: assignmentData.notes,
         isActive: true,
         creationTime: new Date(),
         lastModificationTime: new Date(),
-      };
+      }
 
-      setEmployeeBadges((prev) => [...prev, newAssignment]);
-      alert("Rozet başarıyla atandı!");
+      setEmployeeBadges((prev) => [...prev, newAssignment])
+      alert('Rozet başarıyla atandı!')
     }
-    setIsAssignmentModalOpen(false);
-  };
+    setIsAssignmentModalOpen(false)
+  }
 
   const openAssignmentModal = () => {
-    setIsAssignmentModalOpen(true);
-  };
+    setIsAssignmentModalOpen(true)
+  }
 
   const filteredBadges = badges.filter(
     (badge) =>
       badge.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      badge.description.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+      badge.description.toLowerCase().includes(searchTerm.toLowerCase()),
+  )
 
   const filteredEmployeeBadges = employeeBadges.filter((eb) =>
-    eb.employee?.fullName.toLowerCase().includes(searchAssignTerm.toLowerCase())
-  );
+    eb.employee?.fullName.toLowerCase().includes(searchAssignTerm.toLowerCase()),
+  )
 
   const badgeColumns: Column<HrBadge>[] = [
     {
-      key: "icon",
-      header: "Simge",
+      key: 'icon',
+      header: 'Simge',
       render: (badge: HrBadge) => {
-        const IconComponent = getIconComponent(badge.icon);
+        const IconComponent = getIconComponent(badge.icon)
         return (
           <div
             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" />
           </div>
-        );
+        )
       },
     },
     {
-      key: "name",
-      header: "Rozet Adı",
+      key: 'name',
+      header: 'Rozet Adı',
       sortable: true,
       render: (badge: HrBadge) => (
         <div>
           <div className="font-medium text-gray-900">{badge.name}</div>
-          <div className="text-sm text-gray-500 truncate max-w-xs">
-            {badge.description}
-          </div>
+          <div className="text-sm text-gray-500 truncate max-w-xs">{badge.description}</div>
         </div>
       ),
     },
     {
-      key: "criteria",
-      header: "Kazanma Kriteri",
+      key: 'criteria',
+      header: 'Kazanma Kriteri',
       render: (badge: HrBadge) => (
-        <div className="text-sm text-gray-600 max-w-xs truncate">
-          {badge.criteria}
-        </div>
+        <div className="text-sm text-gray-600 max-w-xs truncate">{badge.criteria}</div>
       ),
     },
     {
-      key: "assignedCount",
-      header: "Atanan Sayısı",
+      key: 'assignedCount',
+      header: 'Atanan Sayısı',
       render: (badge: HrBadge) => {
-        const count = employeeBadges.filter(
-          (eb) => eb.badgeId === badge.id && eb.isActive
-        ).length;
+        const count = employeeBadges.filter((eb) => eb.badgeId === badge.id && eb.isActive).length
         return (
           <div className="flex items-center gap-1">
             <FaUsers className="w-4 h-4 text-gray-500" />
             <span>{count}</span>
           </div>
-        );
+        )
       },
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (badge: HrBadge) => (
         <span
           className={`px-2 py-0.5 text-xs font-medium rounded-full ${
-            badge.isActive
-              ? "bg-green-100 text-green-800"
-              : "bg-red-100 text-red-800"
+            badge.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
           }`}
         >
-          {badge.isActive ? "Aktif" : "Pasif"}
+          {badge.isActive ? 'Aktif' : 'Pasif'}
         </span>
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (badge: HrBadge) => (
         <div className="flex gap-2">
           <button
@@ -223,30 +202,24 @@ const BadgeManagement: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   const assignmentColumns: Column<HrEmployeeBadge>[] = [
     {
-      key: "employee",
-      header: "Personel",
+      key: 'employee',
+      header: 'Personel',
       render: (assignment: HrEmployeeBadge) => (
         <div>
-          <div className="font-medium text-gray-900">
-            {assignment.employee?.fullName}
-          </div>
-          <div className="text-sm text-gray-500">
-            {assignment.employee?.code}
-          </div>
+          <div className="font-medium text-gray-900">{assignment.employee?.fullName}</div>
+          <div className="text-sm text-gray-500">{assignment.employee?.code}</div>
         </div>
       ),
     },
     {
-      key: "badge",
-      header: "Rozet",
+      key: 'badge',
+      header: 'Rozet',
       render: (assignment: HrEmployeeBadge) => {
-        const IconComponent = getIconComponent(
-          assignment.badge?.icon || "award"
-        );
+        const IconComponent = getIconComponent(assignment.badge?.icon || 'award')
         return (
           <div className="flex items-center gap-2">
             <div
@@ -257,51 +230,46 @@ const BadgeManagement: React.FC = () => {
             </div>
             <span>{assignment.badge?.name}</span>
           </div>
-        );
+        )
       },
     },
     {
-      key: "earnedDate",
-      header: "Kazanıldığı Tarih",
+      key: 'earnedDate',
+      header: 'Kazanıldığı Tarih',
       render: (assignment: HrEmployeeBadge) =>
-        new Date(assignment.earnedDate).toLocaleDateString("tr-TR"),
+        new Date(assignment.earnedDate).toLocaleDateString('tr-TR'),
     },
     {
-      key: "expiryDate",
-      header: "Geçerlilik Süresi",
+      key: 'expiryDate',
+      header: 'Geçerlilik Süresi',
       render: (assignment: HrEmployeeBadge) =>
         assignment.expiryDate
-          ? new Date(assignment.expiryDate).toLocaleDateString("tr-TR")
-          : "Süresiz",
+          ? new Date(assignment.expiryDate).toLocaleDateString('tr-TR')
+          : 'Süresiz',
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (assignment: HrEmployeeBadge) => {
-        const isExpired =
-          assignment.expiryDate && new Date(assignment.expiryDate) < new Date();
+        const isExpired = assignment.expiryDate && new Date(assignment.expiryDate) < new Date()
         return (
           <span
             className={`px-2 py-0.5 text-xs font-medium rounded-full ${
               !assignment.isActive
-                ? "bg-red-100 text-red-800"
+                ? 'bg-red-100 text-red-800'
                 : isExpired
-                ? "bg-yellow-100 text-yellow-800"
-                : "bg-green-100 text-green-800"
+                  ? 'bg-yellow-100 text-yellow-800'
+                  : 'bg-green-100 text-green-800'
             }`}
           >
-            {!assignment.isActive
-              ? "İptal Edildi"
-              : isExpired
-              ? "Süresi Dolmuş"
-              : "Aktif"}
+            {!assignment.isActive ? 'İptal Edildi' : isExpired ? 'Süresi Dolmuş' : 'Aktif'}
           </span>
-        );
+        )
       },
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (assignment: HrEmployeeBadge) => (
         <div className="flex gap-2">
           {assignment.isActive && (
@@ -316,156 +284,145 @@ const BadgeManagement: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-2">
-        <div>
-          <h2 className="text-lg font-bold text-gray-900">Rozet Yönetimi</h2>
-          <p className="text-sm text-gray-600">
-            Personel başarı rozetleri ve ödüllendirme sistemi
-          </p>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-2">
+          <div>
+            <h2 className="text-lg font-bold text-gray-900">Rozet Yönetimi</h2>
+            <p className="text-sm text-gray-600">
+              Personel başarı rozetleri ve ödüllendirme sistemi
+            </p>
+          </div>
         </div>
-      </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-        <Widget
-          title="Toplam Rozet"
-          value={badges.length}
-          color="blue"
-          icon="FaAward"
-        />
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <Widget title="Toplam Rozet" value={badges.length} color="blue" icon="FaAward" />
 
-        <Widget
-          title="Aktif Rozet"
-          value={badges.filter((b) => b.isActive).length}
-          color="yellow"
-          icon="FaTrophy"
-        />
+          <Widget
+            title="Aktif Rozet"
+            value={badges.filter((b) => b.isActive).length}
+            color="yellow"
+            icon="FaTrophy"
+          />
 
-        <Widget
-          title="Toplam Atama"
-          value={filteredEmployeeBadges.length}
-          color="green"
-          icon="FaUsers"
-        />
+          <Widget
+            title="Toplam Atama"
+            value={filteredEmployeeBadges.length}
+            color="green"
+            icon="FaUsers"
+          />
 
-        <Widget
-          title="Rozetli Personel"
-          value={
-            new Set(filteredEmployeeBadges.map((ab) => ab.employeeId)).size
-          }
-          color="purple"
-          icon="FaStar"
-        />
-      </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"
-            />
+          <Widget
+            title="Rozetli Personel"
+            value={new Set(filteredEmployeeBadges.map((ab) => ab.employeeId)).size}
+            color="purple"
+            icon="FaStar"
+          />
+        </div>
 
+        {/* Tabs */}
+        <div className="border-b border-gray-200">
+          <nav className="-mb-px flex space-x-8">
             <button
-              onClick={handleAddBadge}
-              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"
+              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'
+              }`}
             >
-              <FaPlus className="w-4 h-4" />
-              <span className="whitespace-nowrap">Yeni Rozet</span>
+              Rozetler
             </button>
-          </div>
-
-          {/* Badges Table */}
-          <div className="bg-white rounded-lg shadow-sm border">
-            <DataTable data={filteredBadges} columns={badgeColumns} />
-          </div>
+            <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>
-      )}
 
-      {activeTab === "assignments" && (
-        <div className="space-y-3 pt-2">
-          <div className="bg-white p-3 rounded-lg shadow-sm border">
+        {/* 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={searchAssignTerm}
-                onChange={(e) => setSearchAssignTerm(e.target.value)}
+                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"
               />
 
               <button
-                className="px-3 py-1 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
-                onClick={openAssignmentModal}
+                onClick={handleAddBadge}
+                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>
             </div>
-          </div>
 
-          {/* Assignments Table */}
-          <div className="bg-white rounded-lg shadow-sm border">
-            <DataTable
-              data={filteredEmployeeBadges}
-              columns={assignmentColumns}
-            />
+            {/* Badges Table */}
+            <div className="bg-white rounded-lg shadow-sm border">
+              <DataTable data={filteredBadges} columns={badgeColumns} />
+            </div>
           </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>
-      )}
+        {activeTab === 'assignments' && (
+          <div className="space-y-3 pt-2">
+            <div className="bg-white p-3 rounded-lg shadow-sm border">
+              <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={searchAssignTerm}
+                  onChange={(e) => setSearchAssignTerm(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"
+                />
+
+                <button
+                  className="px-3 py-1 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+                  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 */}
       <BadgeEditModal
@@ -473,7 +430,7 @@ const BadgeManagement: React.FC = () => {
         onClose={() => setIsBadgeModalOpen(false)}
         badge={editingBadge}
         onSubmit={handleBadgeSubmit}
-        mode={editingBadge ? "edit" : "create"}
+        mode={editingBadge ? 'edit' : 'create'}
       />
 
       {/* Badge Assignment Modal */}
@@ -482,8 +439,8 @@ const BadgeManagement: React.FC = () => {
         onClose={() => setIsAssignmentModalOpen(false)}
         onSubmit={handleAssignmentSubmit}
       />
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default BadgeManagement;
+export default BadgeManagement
diff --git a/ui/src/views/hr/components/CostCenterManagement.tsx b/ui/src/views/hr/components/CostCenterManagement.tsx
index 4cd1c5a1..e3cf12f9 100644
--- a/ui/src/views/hr/components/CostCenterManagement.tsx
+++ b/ui/src/views/hr/components/CostCenterManagement.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaPlus,
   FaEdit,
@@ -9,64 +9,54 @@ import {
   FaEye,
   FaList,
   FaTh,
-} from "react-icons/fa";
-import { HrCostCenter, CostCenterType } from "../../../types/hr";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockCostCenters } from "../../../mocks/mockCostCenters";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import CostCenterFormModal from "./CostCenterFormModal";
-import CostCenterViewModal from "./CostCenterViewModal";
-import Widget from "../../../components/common/Widget";
-import {
-  getCostCenterTypeColor,
-  getCostCenterTypeText,
-} from "../../../utils/erp";
+} from 'react-icons/fa'
+import { HrCostCenter, CostCenterType } from '../../../types/hr'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockCostCenters } from '../../../mocks/mockCostCenters'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import CostCenterFormModal from './CostCenterFormModal'
+import CostCenterViewModal from './CostCenterViewModal'
+import Widget from '../../../components/common/Widget'
+import { getCostCenterTypeColor, getCostCenterTypeText } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const CostCenterManagement: React.FC = () => {
-  const [costCenters, setCostCenters] =
-    useState<HrCostCenter[]>(mockCostCenters);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedType, setSelectedType] = useState<string>("all");
-  const [viewMode, setViewMode] = useState<"list" | "cards">("list");
-  const [isFormModalOpen, setIsFormModalOpen] = useState(false);
-  const [isViewModalOpen, setIsViewModalOpen] = useState(false);
-  const [selectedCostCenter, setSelectedCostCenter] =
-    useState<HrCostCenter | null>(null);
-  const [editingCostCenter, setEditingCostCenter] = useState<
-    HrCostCenter | undefined
-  >(undefined);
+  const [costCenters, setCostCenters] = useState<HrCostCenter[]>(mockCostCenters)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedType, setSelectedType] = useState<string>('all')
+  const [viewMode, setViewMode] = useState<'list' | 'cards'>('list')
+  const [isFormModalOpen, setIsFormModalOpen] = useState(false)
+  const [isViewModalOpen, setIsViewModalOpen] = useState(false)
+  const [selectedCostCenter, setSelectedCostCenter] = useState<HrCostCenter | null>(null)
+  const [editingCostCenter, setEditingCostCenter] = useState<HrCostCenter | undefined>(undefined)
 
   // Cost center bağlantılarını kur
   mockCostCenters.forEach((cc) => {
     if (cc.responsibleEmployeeId) {
-      cc.responsibleEmployee = mockEmployees.find(
-        (emp) => emp.id === cc.responsibleEmployeeId
-      );
+      cc.responsibleEmployee = mockEmployees.find((emp) => emp.id === cc.responsibleEmployeeId)
     }
-  });
+  })
 
   const handleAdd = () => {
-    setEditingCostCenter(undefined);
-    setIsFormModalOpen(true);
-  };
+    setEditingCostCenter(undefined)
+    setIsFormModalOpen(true)
+  }
 
   const handleEdit = (costCenter: HrCostCenter) => {
-    setEditingCostCenter(costCenter);
-    setIsFormModalOpen(true);
-  };
+    setEditingCostCenter(costCenter)
+    setIsFormModalOpen(true)
+  }
 
   const handleView = (costCenter: HrCostCenter) => {
-    setSelectedCostCenter(costCenter);
-    setIsViewModalOpen(true);
-  };
+    setSelectedCostCenter(costCenter)
+    setIsViewModalOpen(true)
+  }
 
   const handleDelete = (id: string) => {
-    if (
-      window.confirm("Bu maliyet merkezini silmek istediğinizden emin misiniz?")
-    ) {
-      setCostCenters(costCenters.filter((cc) => cc.id !== id));
+    if (window.confirm('Bu maliyet merkezini silmek istediğinizden emin misiniz?')) {
+      setCostCenters(costCenters.filter((cc) => cc.id !== id))
     }
-  };
+  }
 
   const handleSave = (costCenterData: Partial<HrCostCenter>) => {
     if (editingCostCenter) {
@@ -79,9 +69,9 @@ const CostCenterManagement: React.FC = () => {
                 ...costCenterData,
                 lastModificationTime: new Date(),
               }
-            : cc
-        )
-      );
+            : cc,
+        ),
+      )
     } else {
       // Add new
       const newCostCenter: HrCostCenter = {
@@ -90,12 +80,12 @@ const CostCenterManagement: React.FC = () => {
         subCostCenters: [],
         creationTime: new Date(),
         lastModificationTime: new Date(),
-      } as HrCostCenter;
-      setCostCenters([...costCenters, newCostCenter]);
+      } as HrCostCenter
+      setCostCenters([...costCenters, newCostCenter])
     }
-    setIsFormModalOpen(false);
-    setEditingCostCenter(undefined);
-  };
+    setIsFormModalOpen(false)
+    setEditingCostCenter(undefined)
+  }
 
   const filteredCostCenters = costCenters.filter((costCenter) => {
     if (
@@ -103,37 +93,37 @@ const CostCenterManagement: React.FC = () => {
       !costCenter.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
       !costCenter.code.toLowerCase().includes(searchTerm.toLowerCase())
     ) {
-      return false;
+      return false
     }
-    if (selectedType !== "all" && costCenter.costCenterType !== selectedType) {
-      return false;
+    if (selectedType !== 'all' && costCenter.costCenterType !== selectedType) {
+      return false
     }
-    return true;
-  });
+    return true
+  })
 
   const getVariancePercentage = (budgeted: number, actual: number): number => {
-    if (budgeted === 0) return 0;
-    return ((actual - budgeted) / budgeted) * 100;
-  };
+    if (budgeted === 0) return 0
+    return ((actual - budgeted) / budgeted) * 100
+  }
 
   const columns: Column<HrCostCenter>[] = [
     {
-      key: "code",
-      header: "Maliyet Merkezi Kodu",
+      key: 'code',
+      header: 'Maliyet Merkezi Kodu',
       sortable: true,
     },
     {
-      key: "name",
-      header: "Maliyet Merkezi Adı",
+      key: 'name',
+      header: 'Maliyet Merkezi Adı',
       sortable: true,
     },
     {
-      key: "costCenterType",
-      header: "Tip",
+      key: 'costCenterType',
+      header: 'Tip',
       render: (costCenter: HrCostCenter) => (
         <span
           className={`px-2 py-0.5 text-xs font-medium rounded-full ${getCostCenterTypeColor(
-            costCenter.costCenterType
+            costCenter.costCenterType,
           )}`}
         >
           {getCostCenterTypeText(costCenter.costCenterType)}
@@ -141,14 +131,13 @@ const CostCenterManagement: React.FC = () => {
       ),
     },
     {
-      key: "responsibleEmployee",
-      header: "Sorumlu",
-      render: (costCenter: HrCostCenter) =>
-        costCenter.responsibleEmployee?.fullName || "-",
+      key: 'responsibleEmployee',
+      header: 'Sorumlu',
+      render: (costCenter: HrCostCenter) => costCenter.responsibleEmployee?.fullName || '-',
     },
     {
-      key: "budgetedAmount",
-      header: "Bütçe",
+      key: 'budgetedAmount',
+      header: 'Bütçe',
       render: (costCenter: HrCostCenter) => (
         <div className="flex items-center gap-1">
           <FaDollarSign className="w-4 h-4 text-gray-500" />
@@ -157,8 +146,8 @@ const CostCenterManagement: React.FC = () => {
       ),
     },
     {
-      key: "actualAmount",
-      header: "Gerçekleşen",
+      key: 'actualAmount',
+      header: 'Gerçekleşen',
       render: (costCenter: HrCostCenter) => (
         <div className="flex items-center gap-1">
           <FaDollarSign className="w-4 h-4 text-gray-500" />
@@ -167,47 +156,38 @@ const CostCenterManagement: React.FC = () => {
       ),
     },
     {
-      key: "variance",
-      header: "Fark (%)",
+      key: 'variance',
+      header: 'Fark (%)',
       render: (costCenter: HrCostCenter) => {
-        const variance = getVariancePercentage(
-          costCenter.budgetedAmount,
-          costCenter.actualAmount
-        );
-        const isPositive = variance > 0;
+        const variance = getVariancePercentage(costCenter.budgetedAmount, costCenter.actualAmount)
+        const isPositive = variance > 0
         return (
           <div className="flex items-center gap-1">
             <FaPercentage className="w-4 h-4 text-gray-500" />
-            <span
-              className={`font-medium ${
-                isPositive ? "text-red-600" : "text-green-600"
-              }`}
-            >
-              {isPositive ? "+" : ""}
+            <span className={`font-medium ${isPositive ? 'text-red-600' : 'text-green-600'}`}>
+              {isPositive ? '+' : ''}
               {variance.toFixed(1)}%
             </span>
           </div>
-        );
+        )
       },
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (costCenter: HrCostCenter) => (
         <span
           className={`px-2 py-0.5 text-xs font-medium rounded-full ${
-            costCenter.isActive
-              ? "bg-green-100 text-green-800"
-              : "bg-red-100 text-red-800"
+            costCenter.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
           }`}
         >
-          {costCenter.isActive ? "Aktif" : "Pasif"}
+          {costCenter.isActive ? 'Aktif' : 'Pasif'}
         </span>
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (costCenter: HrCostCenter) => (
         <div className="flex gap-1">
           <button
@@ -234,23 +214,17 @@ const CostCenterManagement: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
-  const totalBudget = costCenters.reduce(
-    (sum, cc) => sum + cc.budgetedAmount,
-    0
-  );
-  const totalActual = costCenters.reduce((sum, cc) => sum + cc.actualAmount, 0);
-  const totalVariance = getVariancePercentage(totalBudget, totalActual);
+  const totalBudget = costCenters.reduce((sum, cc) => sum + cc.budgetedAmount, 0)
+  const totalActual = costCenters.reduce((sum, cc) => sum + cc.actualAmount, 0)
+  const totalVariance = getVariancePercentage(totalBudget, totalActual)
 
   const renderCards = () => (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
       {filteredCostCenters.map((costCenter) => {
-        const variance = getVariancePercentage(
-          costCenter.budgetedAmount,
-          costCenter.actualAmount
-        );
-        const isPositive = variance > 0;
+        const variance = getVariancePercentage(costCenter.budgetedAmount, costCenter.actualAmount)
+        const isPositive = variance > 0
 
         return (
           <div
@@ -260,14 +234,12 @@ const CostCenterManagement: React.FC = () => {
             <div className="p-4">
               <div className="flex items-start justify-between mb-4">
                 <div>
-                  <h3 className="text-lg font-semibold text-gray-900 mb-1">
-                    {costCenter.name}
-                  </h3>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-1">{costCenter.name}</h3>
                   <p className="text-sm text-gray-600">{costCenter.code}</p>
                 </div>
                 <span
                   className={`px-2 py-0.5 text-xs font-medium rounded-full ${getCostCenterTypeColor(
-                    costCenter.costCenterType
+                    costCenter.costCenterType,
                   )}`}
                 >
                   {getCostCenterTypeText(costCenter.costCenterType)}
@@ -275,32 +247,22 @@ const CostCenterManagement: React.FC = () => {
               </div>
 
               {costCenter.description && (
-                <p className="text-sm text-gray-600 mb-4 line-clamp-2">
-                  {costCenter.description}
-                </p>
+                <p className="text-sm text-gray-600 mb-4 line-clamp-2">{costCenter.description}</p>
               )}
 
               <div className="space-y-3 mb-4">
                 <div className="flex justify-between">
                   <span className="text-sm text-gray-600">Bütçe:</span>
-                  <span className="font-medium">
-                    ₺{costCenter.budgetedAmount.toLocaleString()}
-                  </span>
+                  <span className="font-medium">₺{costCenter.budgetedAmount.toLocaleString()}</span>
                 </div>
                 <div className="flex justify-between">
                   <span className="text-sm text-gray-600">Gerçekleşen:</span>
-                  <span className="font-medium">
-                    ₺{costCenter.actualAmount.toLocaleString()}
-                  </span>
+                  <span className="font-medium">₺{costCenter.actualAmount.toLocaleString()}</span>
                 </div>
                 <div className="flex justify-between">
                   <span className="text-sm text-gray-600">Fark:</span>
-                  <span
-                    className={`font-medium ${
-                      isPositive ? "text-red-600" : "text-green-600"
-                    }`}
-                  >
-                    {isPositive ? "+" : ""}
+                  <span className={`font-medium ${isPositive ? 'text-red-600' : 'text-green-600'}`}>
+                    {isPositive ? '+' : ''}
                     {variance.toFixed(1)}%
                   </span>
                 </div>
@@ -318,12 +280,10 @@ const CostCenterManagement: React.FC = () => {
               <div className="flex items-center justify-between pt-4 border-t">
                 <span
                   className={`px-2 py-0.5 text-xs font-medium rounded-full ${
-                    costCenter.isActive
-                      ? "bg-green-100 text-green-800"
-                      : "bg-red-100 text-red-800"
+                    costCenter.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                   }`}
                 >
-                  {costCenter.isActive ? "Aktif" : "Pasif"}
+                  {costCenter.isActive ? 'Aktif' : 'Pasif'}
                 </span>
 
                 <div className="flex gap-1">
@@ -352,162 +312,156 @@ const CostCenterManagement: React.FC = () => {
               </div>
             </div>
           </div>
-        );
+        )
       })}
     </div>
-  );
+  )
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">
-            Maliyet Merkezi Yönetimi
-          </h2>
-          <p className="text-sm text-gray-600 mt-1">
-            Maliyet merkezlerini ve bütçe takibini yönetin
-          </p>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">Maliyet Merkezi Yönetimi</h2>
+            <p className="text-sm text-gray-600 mt-1">
+              Maliyet merkezlerini ve bütçe takibini yönetin
+            </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>
-        <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 */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Widget
-          title="Toplam Maliyet Merkezi"
-          value={costCenters.length}
-          color="blue"
-          icon="FaChartPie"
-        />
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Widget
+            title="Toplam Maliyet Merkezi"
+            value={costCenters.length}
+            color="blue"
+            icon="FaChartPie"
+          />
 
-        <Widget
-          title="Toplam Bütçe"
-          value={`₺${totalBudget.toLocaleString()}`}
-          color="green"
-          icon="FaDollarSign"
-        />
+          <Widget
+            title="Toplam Bütçe"
+            value={`₺${totalBudget.toLocaleString()}`}
+            color="green"
+            icon="FaDollarSign"
+          />
 
-        <Widget
-          title="Toplam Gerçekleşen"
-          value={`₺${totalActual.toLocaleString()}`}
-          color="orange"
-          icon="FaDollarSign"
-        />
+          <Widget
+            title="Toplam Gerçekleşen"
+            value={`₺${totalActual.toLocaleString()}`}
+            color="orange"
+            icon="FaDollarSign"
+          />
 
-        <Widget
-          title="Toplam Fark"
-          value={`${totalVariance > 0 ? "+" : ""}${totalVariance.toFixed(1)}%`}
-          color={totalVariance > 0 ? "red" : "green"}
-          icon="FaPercentage"
-        />
-      </div>
+          <Widget
+            title="Toplam Fark"
+            value={`${totalVariance > 0 ? '+' : ''}${totalVariance.toFixed(1)}%`}
+            color={totalVariance > 0 ? 'red' : 'green'}
+            icon="FaPercentage"
+          />
+        </div>
 
-      {/* 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 flex-1">
-          <div className="flex-1">
-            <input
-              type="text"
-              placeholder="Maliyet merkezi 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"
-            />
+        {/* 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 flex-1">
+            <div className="flex-1">
+              <input
+                type="text"
+                placeholder="Maliyet merkezi 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>
+
+            <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>
 
-          <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>
+          {/* View Mode Toggle */}
+          <div className="flex items-center gap-2 bg-gray-100 rounded-lg p-1">
+            <button
+              onClick={() => setViewMode('list')}
+              className={`p-1.5 rounded-md text-sm 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 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>
 
-        {/* View Mode Toggle */}
-        <div className="flex items-center gap-2 bg-gray-100 rounded-lg p-1">
-          <button
-            onClick={() => setViewMode("list")}
-            className={`p-1.5 rounded-md text-sm 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 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>
+        {/* 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>
+        )}
       </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 */}
       <CostCenterFormModal
         isOpen={isFormModalOpen}
         onClose={() => {
-          setIsFormModalOpen(false);
-          setEditingCostCenter(undefined);
+          setIsFormModalOpen(false)
+          setEditingCostCenter(undefined)
         }}
         onSave={handleSave}
         costCenter={editingCostCenter}
-        title={
-          editingCostCenter ? "Maliyet Merkezi Düzenle" : "Yeni Maliyet Merkezi"
-        }
+        title={editingCostCenter ? 'Maliyet Merkezi Düzenle' : 'Yeni Maliyet Merkezi'}
       />
 
       <CostCenterViewModal
         isOpen={isViewModalOpen}
         onClose={() => {
-          setIsViewModalOpen(false);
-          setSelectedCostCenter(null);
+          setIsViewModalOpen(false)
+          setSelectedCostCenter(null)
         }}
         costCenter={selectedCostCenter}
       />
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default CostCenterManagement;
+export default CostCenterManagement
diff --git a/ui/src/views/hr/components/Degree360Evaluation.tsx b/ui/src/views/hr/components/Degree360Evaluation.tsx
index 712a27d5..2b9cb43e 100644
--- a/ui/src/views/hr/components/Degree360Evaluation.tsx
+++ b/ui/src/views/hr/components/Degree360Evaluation.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaUsers,
   FaEye,
@@ -9,7 +9,7 @@ import {
   FaSave,
   FaPlay,
   FaPoll,
-} from "react-icons/fa";
+} from 'react-icons/fa'
 import {
   HrEvaluation360,
   CampaignStatusEnum,
@@ -20,15 +20,15 @@ import {
   HrEvaluation360Result,
   HrGroupScore,
   HrAssessorTypeScore,
-} from "../../../types/hr";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockEvaluation360 } from "../../../mocks/mockEvaluation360";
-import { mockEvaluation360Results } from "../../../mocks/mockEvaluation360Results";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockDepartments } from "../../../mocks/mockDepartments";
-import { mockEvaluation360Templates } from "../../../mocks/mockEvaluation360Templates";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
-import Widget from "../../../components/common/Widget";
+} from '../../../types/hr'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockEvaluation360 } from '../../../mocks/mockEvaluation360'
+import { mockEvaluation360Results } from '../../../mocks/mockEvaluation360Results'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockDepartments } from '../../../mocks/mockDepartments'
+import { mockEvaluation360Templates } from '../../../mocks/mockEvaluation360Templates'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
+import Widget from '../../../components/common/Widget'
 import {
   getAssessorTypeDescription,
   getAssessorTypeText,
@@ -36,220 +36,186 @@ import {
   getParticipantStatusText,
   getCampaignStatusColor,
   getCampaignStatusText,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const Degree360Evaluation: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<"campaigns" | "results">(
-    "campaigns"
-  );
-  const [selectedStatus, setSelectedStatus] = useState<string>("all");
-  const [selectedEmployee, setSelectedEmployee] = useState<string>("all");
-  const [selectedDepartment, setSelectedDepartment] = useState<string>("all");
+  const [activeTab, setActiveTab] = useState<'campaigns' | 'results'>('campaigns')
+  const [selectedStatus, setSelectedStatus] = useState<string>('all')
+  const [selectedEmployee, setSelectedEmployee] = useState<string>('all')
+  const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
 
   // Results tab filters
-  const [selectedResultsStatus, setSelectedResultsStatus] =
-    useState<string>("all");
-  const [selectedResultsEmployee, setSelectedResultsEmployee] =
-    useState<string>("all");
-  const [selectedResultsDepartment, setSelectedResultsDepartment] =
-    useState<string>("all");
-  const [selectedResultsCampaign, setSelectedResultsCampaign] =
-    useState<string>("all");
+  const [selectedResultsStatus, setSelectedResultsStatus] = useState<string>('all')
+  const [selectedResultsEmployee, setSelectedResultsEmployee] = useState<string>('all')
+  const [selectedResultsDepartment, setSelectedResultsDepartment] = useState<string>('all')
+  const [selectedResultsCampaign, setSelectedResultsCampaign] = useState<string>('all')
 
   // Modal states
-  const [showCampaignModal, setShowCampaignModal] = useState(false);
-  const [showViewModal, setShowViewModal] = useState(false);
-  const [showEvaluationModal, setShowEvaluationModal] = useState(false);
-  const [showResultDetailModal, setShowResultDetailModal] = useState(false);
-  const [showResultEditModal, setShowResultEditModal] = useState(false);
-  const [selectedCampaign, setSelectedCampaign] =
-    useState<HrEvaluation360 | null>(null);
+  const [showCampaignModal, setShowCampaignModal] = useState(false)
+  const [showViewModal, setShowViewModal] = useState(false)
+  const [showEvaluationModal, setShowEvaluationModal] = useState(false)
+  const [showResultDetailModal, setShowResultDetailModal] = useState(false)
+  const [showResultEditModal, setShowResultEditModal] = useState(false)
+  const [selectedCampaign, setSelectedCampaign] = useState<HrEvaluation360 | null>(null)
   const [selectedResult, setSelectedResult] = useState<{
-    resultId: string;
-    evaluatedEmployeeName: string;
-    evaluatorName: string;
-    campaignName: string;
-    overallScore: number;
-    scorePercentage: number;
-    evaluatedEmployeeId: string;
-    evaluatorId: string;
-    campaignId: string;
-    evaluatorType: AssessorTypeEnum;
-    status: ParticipantStatusEnum;
-    completedDate?: Date;
-  } | null>(null);
+    resultId: string
+    evaluatedEmployeeName: string
+    evaluatorName: string
+    campaignName: string
+    overallScore: number
+    scorePercentage: number
+    evaluatedEmployeeId: string
+    evaluatorId: string
+    campaignId: string
+    evaluatorType: AssessorTypeEnum
+    status: ParticipantStatusEnum
+    completedDate?: Date
+  } | null>(null)
 
   // Evaluation states
-  const [evaluationTarget, setEvaluationTarget] = useState<string>("");
-  const [evaluationEvaluator, setEvaluationEvaluator] = useState<string>("");
-  const [selectedAssessorType, setSelectedAssessorType] =
-    useState<AssessorTypeEnum | null>(null);
-  const [externalEvaluatorName, setExternalEvaluatorName] =
-    useState<string>("");
-  const [externalEvaluatorEmail, setExternalEvaluatorEmail] =
-    useState<string>("");
-  const [selectedCustomerId, setSelectedCustomerId] = useState<string>("");
-  const [evaluatorSearchTerm, setEvaluatorSearchTerm] = useState<string>("");
+  const [evaluationTarget, setEvaluationTarget] = useState<string>('')
+  const [evaluationEvaluator, setEvaluationEvaluator] = useState<string>('')
+  const [selectedAssessorType, setSelectedAssessorType] = useState<AssessorTypeEnum | null>(null)
+  const [externalEvaluatorName, setExternalEvaluatorName] = useState<string>('')
+  const [externalEvaluatorEmail, setExternalEvaluatorEmail] = useState<string>('')
+  const [selectedCustomerId, setSelectedCustomerId] = useState<string>('')
+  const [evaluatorSearchTerm, setEvaluatorSearchTerm] = useState<string>('')
   const [currentCampaignForEvaluation, setCurrentCampaignForEvaluation] =
-    useState<HrEvaluation360 | null>(null);
+    useState<HrEvaluation360 | null>(null)
 
   // Evaluation responses state
-  const [evaluationResponses, setEvaluationResponses] = useState<
-    Record<string, string | number>
-  >({});
+  const [evaluationResponses, setEvaluationResponses] = useState<Record<string, string | number>>(
+    {},
+  )
 
   // Edit modal states
-  const [editResponses, setEditResponses] = useState<
-    Record<string, string | number>
-  >({});
-  const [editManagerComments, setEditManagerComments] = useState<string>("");
-  const [editHrComments, setEditHrComments] = useState<string>("");
-  const [editResultStatus, setEditResultStatus] = useState<string>("PENDING");
+  const [editResponses, setEditResponses] = useState<Record<string, string | number>>({})
+  const [editManagerComments, setEditManagerComments] = useState<string>('')
+  const [editHrComments, setEditHrComments] = useState<string>('')
+  const [editResultStatus, setEditResultStatus] = useState<string>('PENDING')
 
   // Form states
   const [campaignFormData, setCampaignFormData] = useState({
-    name: "",
-    description: "",
-    templateId: "",
-    departmentId: "",
+    name: '',
+    description: '',
+    templateId: '',
+    departmentId: '',
     targetEmployees: [] as string[],
-    startDate: "",
-    endDate: "",
-  });
+    startDate: '',
+    endDate: '',
+  })
 
   // Event handlers
   const handleCloseModal = () => {
-    setShowCampaignModal(false);
-    setShowViewModal(false);
-    setShowEvaluationModal(false);
-    setShowResultDetailModal(false);
-    setShowResultEditModal(false);
-    setSelectedCampaign(null);
-    setSelectedResult(null);
-    setEvaluationTarget("");
-    setEvaluationEvaluator("");
-    setSelectedAssessorType(null);
-    setExternalEvaluatorName("");
-    setExternalEvaluatorEmail("");
-    setSelectedCustomerId("");
-    setEvaluatorSearchTerm("");
-    setCurrentCampaignForEvaluation(null);
-    setEvaluationResponses({});
-    setEditResponses({});
-    setEditManagerComments("");
-    setEditHrComments("");
-    setEditResultStatus("PENDING");
+    setShowCampaignModal(false)
+    setShowViewModal(false)
+    setShowEvaluationModal(false)
+    setShowResultDetailModal(false)
+    setShowResultEditModal(false)
+    setSelectedCampaign(null)
+    setSelectedResult(null)
+    setEvaluationTarget('')
+    setEvaluationEvaluator('')
+    setSelectedAssessorType(null)
+    setExternalEvaluatorName('')
+    setExternalEvaluatorEmail('')
+    setSelectedCustomerId('')
+    setEvaluatorSearchTerm('')
+    setCurrentCampaignForEvaluation(null)
+    setEvaluationResponses({})
+    setEditResponses({})
+    setEditManagerComments('')
+    setEditHrComments('')
+    setEditResultStatus('PENDING')
     setCampaignFormData({
-      name: "",
-      description: "",
-      templateId: "",
-      departmentId: "",
+      name: '',
+      description: '',
+      templateId: '',
+      departmentId: '',
       targetEmployees: [],
-      startDate: "",
-      endDate: "",
-    });
-  };
+      startDate: '',
+      endDate: '',
+    })
+  }
 
   // Response handling functions
   const handleResponseChange = (questionId: string, value: string | number) => {
     setEvaluationResponses((prev) => ({
       ...prev,
       [questionId]: value,
-    }));
-  };
+    }))
+  }
 
   // Edit response handling function
-  const handleEditResponseChange = (
-    questionId: string,
-    value: string | number
-  ) => {
+  const handleEditResponseChange = (questionId: string, value: string | number) => {
     setEditResponses((prev) => ({
       ...prev,
       [questionId]: value,
-    }));
-  };
+    }))
+  }
 
   // Evaluation kaydetme fonksiyonu
   const handleSaveEvaluation = () => {
-    if (
-      !currentCampaignForEvaluation ||
-      !evaluationTarget ||
-      !evaluationEvaluator
-    ) {
-      alert("Tüm alanları doldurun!");
-      return;
+    if (!currentCampaignForEvaluation || !evaluationTarget || !evaluationEvaluator) {
+      alert('Tüm alanları doldurun!')
+      return
     }
 
     const template = mockEvaluation360Templates.find(
-      (t) => t.id === currentCampaignForEvaluation.templateId
-    );
+      (t) => t.id === currentCampaignForEvaluation.templateId,
+    )
 
     if (!template) {
-      alert("Template bulunamadı!");
-      return;
+      alert('Template bulunamadı!')
+      return
     }
 
     // Responses oluştur
-    const responses = Object.entries(evaluationResponses).map(
-      ([questionId, responseValue]) => {
-        const question = template.questionGroups
-          .flatMap((g) => g.questions)
-          .find((q) => q.id === questionId);
+    const responses = Object.entries(evaluationResponses).map(([questionId, responseValue]) => {
+      const question = template.questionGroups
+        .flatMap((g) => g.questions)
+        .find((q) => q.id === questionId)
 
-        let score = 0;
-        if (question) {
-          if (question.questionType === QuestionTypeEnum.Rating) {
-            score = Number(responseValue);
-          } else if (question.questionType === QuestionTypeEnum.YesNo) {
-            score =
-              responseValue === "yes"
-                ? question.maxRating || 5
-                : question.minRating || 1;
-          } else if (
-            question.questionType === QuestionTypeEnum.MultipleChoice
-          ) {
-            const option = question.options?.find(
-              (o) => o.value === Number(responseValue)
-            );
-            score = option?.value || 0;
-          }
+      let score = 0
+      if (question) {
+        if (question.questionType === QuestionTypeEnum.Rating) {
+          score = Number(responseValue)
+        } else if (question.questionType === QuestionTypeEnum.YesNo) {
+          score = responseValue === 'yes' ? question.maxRating || 5 : question.minRating || 1
+        } else if (question.questionType === QuestionTypeEnum.MultipleChoice) {
+          const option = question.options?.find((o) => o.value === Number(responseValue))
+          score = option?.value || 0
         }
-
-        return {
-          id: `response-${Date.now()}-${Math.random()}`,
-          participantId: `participant-${Date.now()}`,
-          questionId,
-          question,
-          responseValue,
-          responseText:
-            typeof responseValue === "string" ? responseValue : undefined,
-          score,
-          submittedDate: new Date(),
-        };
       }
-    );
+
+      return {
+        id: `response-${Date.now()}-${Math.random()}`,
+        participantId: `participant-${Date.now()}`,
+        questionId,
+        question,
+        responseValue,
+        responseText: typeof responseValue === 'string' ? responseValue : undefined,
+        score,
+        submittedDate: new Date(),
+      }
+    })
 
     // Puanları hesapla
-    const totalScore = responses.reduce(
-      (sum, response) => sum + response.score,
-      0
-    );
+    const totalScore = responses.reduce((sum, response) => sum + response.score, 0)
     const maxScore = template.questionGroups
       .flatMap((g) => g.questions)
-      .reduce((sum, q) => sum + (q.maxRating || 5), 0);
+      .reduce((sum, q) => sum + (q.maxRating || 5), 0)
 
-    const scorePercentage = maxScore > 0 ? (totalScore / maxScore) * 100 : 0;
+    const scorePercentage = maxScore > 0 ? (totalScore / maxScore) * 100 : 0
 
     // Grup skorlarını hesapla
     const groupScores: HrGroupScore[] = template.questionGroups.map((group) => {
       const groupResponses = responses.filter((r) =>
-        group.questions.some((q) => q.id === r.questionId)
-      );
-      const groupScore = groupResponses.reduce((sum, r) => sum + r.score, 0);
-      const groupMaxScore = group.questions.reduce(
-        (sum, q) => sum + (q.maxRating || 5),
-        0
-      );
+        group.questions.some((q) => q.id === r.questionId),
+      )
+      const groupScore = groupResponses.reduce((sum, r) => sum + r.score, 0)
+      const groupMaxScore = group.questions.reduce((sum, q) => sum + (q.maxRating || 5), 0)
 
       return {
         groupId: group.id,
@@ -258,8 +224,8 @@ const Degree360Evaluation: React.FC = () => {
         maxScore: groupMaxScore,
         percentage: groupMaxScore > 0 ? (groupScore / groupMaxScore) * 100 : 0,
         responseCount: groupResponses.length,
-      };
-    });
+      }
+    })
 
     // Assessor type skorlarını hesapla
     const assessorTypeScores: HrAssessorTypeScore[] = [
@@ -270,7 +236,7 @@ const Degree360Evaluation: React.FC = () => {
         maxScore: maxScore,
         percentage: scorePercentage,
       },
-    ];
+    ]
 
     // Evaluation360Result oluştur
     const evaluationResult: HrEvaluation360Result = {
@@ -283,9 +249,7 @@ const Degree360Evaluation: React.FC = () => {
           id: `participant-${Date.now()}`,
           campaignId: currentCampaignForEvaluation.id,
           evaluatedEmployeeId: evaluationTarget,
-          evaluatedEmployee: mockEmployees.find(
-            (e) => e.id === evaluationTarget
-          ),
+          evaluatedEmployee: mockEmployees.find((e) => e.id === evaluationTarget),
           evaluatorId: evaluationEvaluator,
           evaluator:
             selectedAssessorType === AssessorTypeEnum.External ||
@@ -299,7 +263,7 @@ const Degree360Evaluation: React.FC = () => {
           completedDate: new Date(),
           responses,
           overallScore: totalScore,
-          notes: "",
+          notes: '',
         },
       ],
       overallScore: totalScore,
@@ -307,81 +271,76 @@ const Degree360Evaluation: React.FC = () => {
       scorePercentage,
       groupScores,
       assessorTypeScores,
-      strengths: ["Güçlü iletişim", "Takım çalışması"], // Örnek veriler
-      developmentAreas: ["Zaman yönetimi", "Teknik beceriler"], // Örnek veriler
-      actionPlan: ["Zaman yönetimi kursu alma", "Teknik eğitimlere katılma"], // Örnek veriler
-      managerComments: "",
-      hrComments: "",
+      strengths: ['Güçlü iletişim', 'Takım çalışması'], // Örnek veriler
+      developmentAreas: ['Zaman yönetimi', 'Teknik beceriler'], // Örnek veriler
+      actionPlan: ['Zaman yönetimi kursu alma', 'Teknik eğitimlere katılma'], // Örnek veriler
+      managerComments: '',
+      hrComments: '',
       status: ResultStatusEnum.Pending,
       generatedDate: new Date(),
       approvedBy: undefined,
       approvedDate: undefined,
-    };
+    }
 
     // Console'a yazdır
-    console.log("Evaluation360Result:", evaluationResult);
+    console.log('Evaluation360Result:', evaluationResult)
 
-    alert("Değerlendirme başarıyla kaydedildi! Sonuç konsola yazdırıldı.");
-    handleCloseModal();
-  };
+    alert('Değerlendirme başarıyla kaydedildi! Sonuç konsola yazdırıldı.')
+    handleCloseModal()
+  }
 
   const handleNewCampaign = () => {
-    setSelectedCampaign(null);
-    setShowCampaignModal(true);
-  };
+    setSelectedCampaign(null)
+    setShowCampaignModal(true)
+  }
 
   const handleEditCampaign = (campaign: HrEvaluation360 | null) => {
     if (campaign) {
-      setSelectedCampaign(campaign);
+      setSelectedCampaign(campaign)
       setCampaignFormData({
         name: campaign.name,
         description: campaign.description,
         templateId: campaign.templateId,
-        departmentId: campaign.departmentId || "",
+        departmentId: campaign.departmentId || '',
         targetEmployees: campaign.targetEmployees,
-        startDate: campaign.startDate.toISOString().split("T")[0],
-        endDate: campaign.endDate.toISOString().split("T")[0],
-      });
-      setShowCampaignModal(true);
+        startDate: campaign.startDate.toISOString().split('T')[0],
+        endDate: campaign.endDate.toISOString().split('T')[0],
+      })
+      setShowCampaignModal(true)
     }
-  };
+  }
 
   const handleViewCampaign = (campaign: HrEvaluation360) => {
-    setSelectedCampaign(campaign);
-    setShowViewModal(true);
-  };
+    setSelectedCampaign(campaign)
+    setShowViewModal(true)
+  }
 
   const handleSaveCampaign = () => {
-    console.log("Değerlendirme kaydediliyor:", campaignFormData);
-    handleCloseModal();
-  };
+    console.log('Değerlendirme kaydediliyor:', campaignFormData)
+    handleCloseModal()
+  }
 
   const handleDepartmentChange = (departmentId: string) => {
-    setSelectedDepartment(departmentId);
+    setSelectedDepartment(departmentId)
     setCampaignFormData({
       ...campaignFormData,
       departmentId,
       targetEmployees: [],
-    });
-  };
+    })
+  }
 
   // Değerlendirme yapma handler'ı
   const handleStartEvaluation = () => {
-    setCurrentCampaignForEvaluation(null);
-    setEvaluationTarget("");
-    setEvaluationEvaluator("");
-    setShowEvaluationModal(true);
-  };
+    setCurrentCampaignForEvaluation(null)
+    setEvaluationTarget('')
+    setEvaluationEvaluator('')
+    setShowEvaluationModal(true)
+  }
 
   // Otomatik değerlendirici belirleme fonksiyonu (360° metodolojisi)
-  const getEvaluatorsByType = (
-    targetEmployeeId: string,
-    assessorType: AssessorTypeEnum
-  ) => {
-    const targetEmployee = mockEmployees.find(
-      (emp) => emp.id === targetEmployeeId
-    );
-    if (!targetEmployee) return [];
+  const getEvaluatorsByType = (targetEmployeeId: string, assessorType: AssessorTypeEnum) => {
+    const targetEmployee = mockEmployees.find((emp) => emp.id === targetEmployeeId)
+    if (!targetEmployee) return []
 
     switch (assessorType) {
       case AssessorTypeEnum.Self: {
@@ -391,31 +350,29 @@ const Degree360Evaluation: React.FC = () => {
             name: targetEmployee.fullName,
             title: targetEmployee.jobPosition?.name,
             department:
-              mockDepartments.find((d) => d.id === targetEmployee.departmantId)
-                ?.name || "",
-            type: "employee",
+              mockDepartments.find((d) => d.id === targetEmployee.departmantId)?.name || '',
+            type: 'employee',
           },
-        ];
+        ]
       }
 
       case AssessorTypeEnum.Manager: {
         const managers = mockEmployees.filter(
           (emp) =>
             emp.departmantId === targetEmployee.departmantId &&
-            (typeof emp.jobPosition?.level === "number" &&
-            typeof targetEmployee.jobPosition?.level === "number"
+            (typeof emp.jobPosition?.level === 'number' &&
+            typeof targetEmployee.jobPosition?.level === 'number'
               ? emp.jobPosition?.level > targetEmployee.jobPosition?.level
-              : emp.jobPosition?.name.includes("Müdür") ||
-                emp.jobPosition?.name.includes("Manager"))
-        );
+              : emp.jobPosition?.name.includes('Müdür') ||
+                emp.jobPosition?.name.includes('Manager')),
+        )
         return managers.map((emp) => ({
           id: emp.id,
           name: emp.fullName,
           title: emp.jobPosition?.name,
-          department:
-            mockDepartments.find((d) => d.id === emp.departmantId)?.name || "",
-          type: "employee",
-        }));
+          department: mockDepartments.find((d) => d.id === emp.departmantId)?.name || '',
+          type: 'employee',
+        }))
       }
 
       case AssessorTypeEnum.Peer: {
@@ -423,244 +380,221 @@ const Degree360Evaluation: React.FC = () => {
           (emp) =>
             emp.id !== targetEmployeeId &&
             emp.departmantId === targetEmployee.departmantId &&
-            emp.jobPosition?.level === targetEmployee.jobPosition?.level
-        );
+            emp.jobPosition?.level === targetEmployee.jobPosition?.level,
+        )
         return peers.map((emp) => ({
           id: emp.id,
           name: emp.fullName,
           title: emp.jobPosition?.name,
-          department:
-            mockDepartments.find((d) => d.id === emp.departmantId)?.name || "",
-          type: "employee",
-        }));
+          department: mockDepartments.find((d) => d.id === emp.departmantId)?.name || '',
+          type: 'employee',
+        }))
       }
 
       case AssessorTypeEnum.Subordinate: {
         const subordinates = mockEmployees.filter(
           (emp) =>
             emp.departmantId === targetEmployee.departmantId &&
-            (typeof emp.jobPosition?.level === "number" &&
-            typeof targetEmployee.jobPosition?.level === "number"
+            (typeof emp.jobPosition?.level === 'number' &&
+            typeof targetEmployee.jobPosition?.level === 'number'
               ? emp.jobPosition?.level < targetEmployee.jobPosition?.level
-              : !emp.jobPosition?.name.includes("Müdür") &&
-                !emp.jobPosition?.name.includes("Manager"))
-        );
+              : !emp.jobPosition?.name.includes('Müdür') &&
+                !emp.jobPosition?.name.includes('Manager')),
+        )
         return subordinates.map((emp) => ({
           id: emp.id,
           name: emp.fullName,
           title: emp.jobPosition?.name,
-          department:
-            mockDepartments.find((d) => d.id === emp.departmantId)?.name || "",
-          type: "employee",
-        }));
+          department: mockDepartments.find((d) => d.id === emp.departmantId)?.name || '',
+          type: 'employee',
+        }))
       }
 
       case AssessorTypeEnum.Customer: {
         return mockBusinessParties.map((customer) => ({
           id: customer.id,
           name: customer.name,
-          title: "Müşteri Temsilcisi",
-          department: "Müşteri",
-          type: "customer",
-        }));
+          title: 'Müşteri Temsilcisi',
+          department: 'Müşteri',
+          type: 'customer',
+        }))
       }
 
       case AssessorTypeEnum.External: {
         return [
           {
-            id: "external",
-            name: "Dış Değerlendirici",
-            title: "Harici",
-            department: "Dış Paydaş",
-            type: "external",
+            id: 'external',
+            name: 'Dış Değerlendirici',
+            title: 'Harici',
+            department: 'Dış Paydaş',
+            type: 'external',
           },
-        ];
+        ]
       }
 
       case AssessorTypeEnum.HRUpperManagement: {
         const hrEmployees = mockEmployees.filter(
           (emp) =>
-            emp.id !== targetEmployeeId &&
-            (emp.departmantId === "hr" || emp.departmantId === "3") // HR departmanı
-        );
+            emp.id !== targetEmployeeId && (emp.departmantId === 'hr' || emp.departmantId === '3'), // HR departmanı
+        )
         return hrEmployees.map((emp) => ({
           id: emp.id,
           name: emp.fullName,
           title: emp.jobPosition?.name,
-          department:
-            mockDepartments.find((d) => d.id === emp.departmantId)?.name || "",
-          type: "employee",
-        }));
+          department: mockDepartments.find((d) => d.id === emp.departmantId)?.name || '',
+          type: 'employee',
+        }))
       }
 
       case AssessorTypeEnum.OtherDepartment: {
         const otherDepartmentEmployees = mockEmployees.filter(
-          (emp) =>
-            emp.id !== targetEmployeeId &&
-            emp.departmantId !== targetEmployee.departmantId
-        );
+          (emp) => emp.id !== targetEmployeeId && emp.departmantId !== targetEmployee.departmantId,
+        )
         return otherDepartmentEmployees.map((emp) => ({
           id: emp.id,
           name: emp.fullName,
           title: emp.jobPosition?.name,
-          department:
-            mockDepartments.find((d) => d.id === emp.departmantId)?.name || "",
-          type: "employee",
-        }));
+          department: mockDepartments.find((d) => d.id === emp.departmantId)?.name || '',
+          type: 'employee',
+        }))
       }
 
       default:
-        return [];
+        return []
     }
-  };
+  }
 
   // Değerlendiren bilgisini getiren fonksiyon
   const getEvaluatorInfo = () => {
-    if (evaluationEvaluator === "external") {
-      return externalEvaluatorName;
+    if (evaluationEvaluator === 'external') {
+      return externalEvaluatorName
     }
 
     if (selectedAssessorType === AssessorTypeEnum.Customer) {
-      const customer = mockBusinessParties.find(
-        (c) => c.id === selectedCustomerId
-      );
-      return customer ? customer.name : "Müşteri Bulunamadı";
+      const customer = mockBusinessParties.find((c) => c.id === selectedCustomerId)
+      return customer ? customer.name : 'Müşteri Bulunamadı'
     }
 
-    const employee = mockEmployees.find((e) => e.id === evaluationEvaluator);
-    return employee ? employee.fullName : "Çalışan Bulunamadı";
-  };
+    const employee = mockEmployees.find((e) => e.id === evaluationEvaluator)
+    return employee ? employee.fullName : 'Çalışan Bulunamadı'
+  }
 
   // Template'deki izin verilen assessor tiplerini getir
   const getAllowedAssessorTypes = () => {
-    if (!currentCampaignForEvaluation) return [];
+    if (!currentCampaignForEvaluation) return []
 
     const template = mockEvaluation360Templates.find(
-      (t) => t.id === currentCampaignForEvaluation.templateId
-    );
+      (t) => t.id === currentCampaignForEvaluation.templateId,
+    )
 
-    return template?.assessorTypes || [];
-  };
+    return template?.assessorTypes || []
+  }
 
   // Helper function to get participants for a campaign from results
   const getCampaignParticipants = (campaignId: string) => {
     return mockEvaluation360Results
       .filter((result) => result.campaignId === campaignId)
-      .flatMap((result) => result.participants);
-  };
+      .flatMap((result) => result.participants)
+  }
 
   // Filtered data
   const filteredCampaigns = mockEvaluation360.filter((campaign) => {
-    if (selectedStatus !== "all" && campaign.status !== selectedStatus)
-      return false;
-    if (
-      selectedDepartment !== "all" &&
-      campaign.departmentId !== selectedDepartment
-    )
-      return false;
-    if (selectedEmployee !== "all") {
-      const participants = getCampaignParticipants(campaign.id);
+    if (selectedStatus !== 'all' && campaign.status !== selectedStatus) return false
+    if (selectedDepartment !== 'all' && campaign.departmentId !== selectedDepartment) return false
+    if (selectedEmployee !== 'all') {
+      const participants = getCampaignParticipants(campaign.id)
       const hasEmployee = participants.some(
-        (p) =>
-          p.evaluatedEmployeeId === selectedEmployee ||
-          p.evaluatorId === selectedEmployee
-      );
-      if (!hasEmployee) return false;
+        (p) => p.evaluatedEmployeeId === selectedEmployee || p.evaluatorId === selectedEmployee,
+      )
+      if (!hasEmployee) return false
     }
-    return true;
-  });
+    return true
+  })
 
   const filteredEmployeesByDepartment = mockEmployees.filter(
-    (emp) =>
-      selectedDepartment === "all" || emp.departmantId === selectedDepartment
-  );
+    (emp) => selectedDepartment === 'all' || emp.departmantId === selectedDepartment,
+  )
 
   // Statistics
   const totalActiveCampaigns = mockEvaluation360.filter(
-    (c) => c.status === CampaignStatusEnum.Active
-  ).length;
+    (c) => c.status === CampaignStatusEnum.Active,
+  ).length
 
-  const allParticipants = mockEvaluation360Results.flatMap(
-    (result) => result.participants
-  );
+  const allParticipants = mockEvaluation360Results.flatMap((result) => result.participants)
 
   const totalCompletedEvaluations = allParticipants.filter(
-    (p) => p.status === ParticipantStatusEnum.Completed
-  ).length;
+    (p) => p.status === ParticipantStatusEnum.Completed,
+  ).length
 
   const totalPendingEvaluations = allParticipants.filter(
-    (p) =>
-      p.status === ParticipantStatusEnum.Invited ||
-      p.status === ParticipantStatusEnum.Started
-  ).length;
+    (p) => p.status === ParticipantStatusEnum.Invited || p.status === ParticipantStatusEnum.Started,
+  ).length
 
-  const totalParticipants = allParticipants.length;
+  const totalParticipants = allParticipants.length
 
   // Results helper functions
   // Participant evaluation helper functions
   const handleViewEvaluationDetail = (result: {
-    resultId: string;
-    evaluatedEmployeeName: string;
-    evaluatorName: string;
-    campaignName: string;
-    overallScore: number;
-    scorePercentage: number;
-    evaluatedEmployeeId: string;
-    evaluatorId: string;
-    campaignId: string;
-    evaluatorType: AssessorTypeEnum;
-    status: ParticipantStatusEnum;
-    completedDate?: Date;
+    resultId: string
+    evaluatedEmployeeName: string
+    evaluatorName: string
+    campaignName: string
+    overallScore: number
+    scorePercentage: number
+    evaluatedEmployeeId: string
+    evaluatorId: string
+    campaignId: string
+    evaluatorType: AssessorTypeEnum
+    status: ParticipantStatusEnum
+    completedDate?: Date
   }) => {
     // Değerlendirme detaylarını görüntüle
-    console.log("Viewing evaluation detail:", result);
-    setSelectedResult(result);
-    setShowResultDetailModal(true);
-  };
+    console.log('Viewing evaluation detail:', result)
+    setSelectedResult(result)
+    setShowResultDetailModal(true)
+  }
 
   const handleEditEvaluationDetail = (result: {
-    resultId: string;
-    evaluatedEmployeeName: string;
-    evaluatorName: string;
-    campaignName: string;
-    overallScore: number;
-    scorePercentage: number;
-    evaluatedEmployeeId: string;
-    evaluatorId: string;
-    campaignId: string;
-    evaluatorType: AssessorTypeEnum;
-    status: ParticipantStatusEnum;
-    completedDate?: Date;
+    resultId: string
+    evaluatedEmployeeName: string
+    evaluatorName: string
+    campaignName: string
+    overallScore: number
+    scorePercentage: number
+    evaluatedEmployeeId: string
+    evaluatorId: string
+    campaignId: string
+    evaluatorType: AssessorTypeEnum
+    status: ParticipantStatusEnum
+    completedDate?: Date
   }) => {
     // Değerlendirme detaylarını düzenle
-    console.log("Editing evaluation detail:", result);
+    console.log('Editing evaluation detail:', result)
 
     // Mevcut evaluation result'ını bul
-    const evaluationResult = mockEvaluation360Results.find(
-      (r) => r.id === result.resultId
-    );
+    const evaluationResult = mockEvaluation360Results.find((r) => r.id === result.resultId)
     if (evaluationResult) {
       // Mevcut cevapları yükle
-      const currentResponses: Record<string, string | number> = {};
+      const currentResponses: Record<string, string | number> = {}
       evaluationResult.participants.forEach((participant) => {
         participant.responses.forEach((response) => {
-          currentResponses[response.questionId] = response.responseValue;
-        });
-      });
+          currentResponses[response.questionId] = response.responseValue
+        })
+      })
 
-      setEditResponses(currentResponses);
-      setEditManagerComments(evaluationResult.managerComments || "");
-      setEditHrComments(evaluationResult.hrComments || "");
-      setEditResultStatus(evaluationResult.status);
+      setEditResponses(currentResponses)
+      setEditManagerComments(evaluationResult.managerComments || '')
+      setEditHrComments(evaluationResult.hrComments || '')
+      setEditResultStatus(evaluationResult.status)
     }
 
-    setSelectedResult(result);
-    setShowResultEditModal(true);
-  };
+    setSelectedResult(result)
+    setShowResultEditModal(true)
+  }
 
   const getAssessorTypeLabel = (assessorType: AssessorTypeEnum): string => {
-    return getAssessorTypeText(assessorType);
-  };
+    return getAssessorTypeText(assessorType)
+  }
 
   const getAllEvaluationParticipants = () => {
     // Tüm sonuçlardan participant verilerini al
@@ -669,97 +603,82 @@ const Degree360Evaluation: React.FC = () => {
         ...participant,
         resultId: result.id,
         evaluatedEmployeeName:
-          mockEmployees.find((e) => e.id === participant.evaluatedEmployeeId)
-            ?.fullName || "Bilinmiyor",
+          mockEmployees.find((e) => e.id === participant.evaluatedEmployeeId)?.fullName ||
+          'Bilinmiyor',
         evaluatorName:
-          mockEmployees.find((e) => e.id === participant.evaluatorId)
-            ?.fullName || "Bilinmiyor",
+          mockEmployees.find((e) => e.id === participant.evaluatorId)?.fullName || 'Bilinmiyor',
         campaignName:
-          mockEvaluation360.find((c) => c.id === participant.campaignId)
-            ?.name || "Bilinmiyor",
+          mockEvaluation360.find((c) => c.id === participant.campaignId)?.name || 'Bilinmiyor',
         overallScore: result.overallScore,
         scorePercentage: result.scorePercentage,
         result: result,
-      }))
-    );
+      })),
+    )
 
     // Filtreleme işlemi
     return allParticipants.filter((participant) => {
       // Durum filtresi
-      if (
-        selectedResultsStatus !== "all" &&
-        participant.status !== selectedResultsStatus
-      ) {
-        return false;
+      if (selectedResultsStatus !== 'all' && participant.status !== selectedResultsStatus) {
+        return false
       }
 
       // Kampanya filtresi
-      if (
-        selectedResultsCampaign !== "all" &&
-        participant.campaignId !== selectedResultsCampaign
-      ) {
-        return false;
+      if (selectedResultsCampaign !== 'all' && participant.campaignId !== selectedResultsCampaign) {
+        return false
       }
 
       // Değerlendirilecek kişi filtresi
       if (
-        selectedResultsEmployee !== "all" &&
+        selectedResultsEmployee !== 'all' &&
         participant.evaluatedEmployeeId !== selectedResultsEmployee
       ) {
-        return false;
+        return false
       }
 
       // Departman filtresi
-      if (selectedResultsDepartment !== "all") {
+      if (selectedResultsDepartment !== 'all') {
         const evaluatedEmployee = mockEmployees.find(
-          (e) => e.id === participant.evaluatedEmployeeId
-        );
-        if (
-          !evaluatedEmployee ||
-          evaluatedEmployee.departmantId !== selectedResultsDepartment
-        ) {
-          return false;
+          (e) => e.id === participant.evaluatedEmployeeId,
+        )
+        if (!evaluatedEmployee || evaluatedEmployee.departmantId !== selectedResultsDepartment) {
+          return false
         }
       }
 
-      return true;
-    });
-  };
+      return true
+    })
+  }
 
   // Columns for campaigns table
   const campaignColumns: Column<HrEvaluation360>[] = [
     {
-      key: "name",
-      header: "Değerlendirme Adı",
+      key: 'name',
+      header: 'Değerlendirme Adı',
       sortable: true,
     },
     {
-      key: "departmentId",
-      header: "Departman",
+      key: 'departmentId',
+      header: 'Departman',
       render: (item: HrEvaluation360) => {
-        const department = mockDepartments.find(
-          (d) => d.id === item.departmentId
-        );
-        return department?.name || "Tüm Departmanlar";
+        const department = mockDepartments.find((d) => d.id === item.departmentId)
+        return department?.name || 'Tüm Departmanlar'
       },
     },
     {
-      key: "templateId",
-      header: "Şablon",
+      key: 'templateId',
+      header: 'Şablon',
       render: (item: HrEvaluation360) => {
-        const template = mockEvaluation360Templates.find(
-          (t) => t.id === item.templateId
-        );
-        return template?.name || "Bilinmiyor";
+        const template = mockEvaluation360Templates.find((t) => t.id === item.templateId)
+        return template?.name || 'Bilinmiyor'
       },
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (item: HrEvaluation360) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getCampaignStatusColor(
-            item.status
+            item.status,
           )}`}
         >
           {getCampaignStatusText(item.status)}
@@ -767,28 +686,26 @@ const Degree360Evaluation: React.FC = () => {
       ),
     },
     {
-      key: "startDate",
-      header: "Başlangıç",
-      render: (item: HrEvaluation360) =>
-        item.startDate.toLocaleDateString("tr-TR"),
+      key: 'startDate',
+      header: 'Başlangıç',
+      render: (item: HrEvaluation360) => item.startDate.toLocaleDateString('tr-TR'),
     },
     {
-      key: "endDate",
-      header: "Bitiş",
-      render: (item: HrEvaluation360) =>
-        item.endDate.toLocaleDateString("tr-TR"),
+      key: 'endDate',
+      header: 'Bitiş',
+      render: (item: HrEvaluation360) => item.endDate.toLocaleDateString('tr-TR'),
     },
     {
-      key: "participants",
-      header: "Katılımcı",
+      key: 'participants',
+      header: 'Katılımcı',
       render: (item: HrEvaluation360) => {
-        const participants = getCampaignParticipants(item.id);
-        return `${participants.length} kişi`;
+        const participants = getCampaignParticipants(item.id)
+        return `${participants.length} kişi`
       },
     },
     {
-      key: "id",
-      header: "İşlemler",
+      key: 'id',
+      header: 'İşlemler',
       render: (item: HrEvaluation360) => (
         <div className="flex gap-2">
           <button
@@ -808,360 +725,326 @@ const Degree360Evaluation: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   return (
-    <div className="mt-2 space-y-3">
-      {/* Header */}
-      <div className="flex justify-between items-center">
-        <div>
-          <h1 className="text-xl font-bold text-gray-900">
-            360° Değerlendirme Sistemi
-          </h1>
-          <p className="text-gray-600 mt-1">
-            Çok yönlü performans değerlendirme sistemi
-          </p>
-        </div>
-      </div>
-
-      {/* Statistics Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-2">
-        <Widget
-          title="Aktif Değerlendirmeler"
-          value={totalActiveCampaigns}
-          color="blue"
-          icon="FaPlay"
-        />
-
-        <Widget
-          title="Tamamlanan Değerlendirmeler"
-          value={totalCompletedEvaluations}
-          color="green"
-          icon="FaCheckCircle"
-        />
-
-        <Widget
-          title="Bekleyen Değerlendirmeler"
-          value={totalPendingEvaluations}
-          color="yellow"
-          icon="FaPoll"
-        />
-
-        <Widget
-          title="Katılımcılar"
-          value={totalParticipants}
-          color="purple"
-          icon="FaUsers"
-        />
-      </div>
-
-      {/* Tabs */}
-      <div className="bg-white rounded-lg shadow-sm border">
-        <div className="border-b border-gray-200">
-          <nav className="-mb-px flex space-x-2 px-2">
-            {[
-              {
-                key: "campaigns",
-                label: "Değerlendirme Kampanyaları",
-                icon: FaUsers,
-              },
-              {
-                key: "results",
-                label: "Değerlendirme Sonuçları",
-                icon: FaChartBar,
-              },
-            ].map(({ key, label, icon: Icon }) => (
-              <button
-                key={key}
-                onClick={() => setActiveTab(key as "campaigns" | "results")}
-                className={`flex items-center gap-2 py-1.5 px-2.5 border-b-2 font-medium text-sm ${
-                  activeTab === key
-                    ? "border-blue-500 text-blue-600"
-                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                }`}
-              >
-                <Icon className="w-4 h-4" />
-                {label}
-              </button>
-            ))}
-          </nav>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-xl font-bold text-gray-900">360° Değerlendirme Sistemi</h1>
+            <p className="text-gray-600 mt-1">Çok yönlü performans değerlendirme sistemi</p>
+          </div>
         </div>
 
-        <div className="p-3">
-          {activeTab === "campaigns" && (
-            <div className="space-y-3">
-              {/* Filters and Actions */}
-              <div className="flex flex-col sm:flex-row gap-3 justify-between">
-                <div className="flex flex-col sm:flex-row gap-3">
-                  <select
-                    value={selectedStatus}
-                    onChange={(e) => setSelectedStatus(e.target.value)}
-                    className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
-                  >
-                    <option value="all">Tüm Durumlar</option>
-                    <option value={CampaignStatusEnum.Draft}>Taslak</option>
-                    <option value={CampaignStatusEnum.Active}>Aktif</option>
-                    <option value={CampaignStatusEnum.Completed}>
-                      Tamamlandı
-                    </option>
-                  </select>
+        {/* Statistics Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-2">
+          <Widget
+            title="Aktif Değerlendirmeler"
+            value={totalActiveCampaigns}
+            color="blue"
+            icon="FaPlay"
+          />
 
-                  <select
-                    value={selectedDepartment}
-                    onChange={(e) => setSelectedDepartment(e.target.value)}
-                    className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
-                  >
-                    <option value="all">Tüm Departmanlar</option>
-                    {mockDepartments.map((department) => (
-                      <option key={department.id} value={department.id}>
-                        {department.name}
-                      </option>
-                    ))}
-                  </select>
+          <Widget
+            title="Tamamlanan Değerlendirmeler"
+            value={totalCompletedEvaluations}
+            color="green"
+            icon="FaCheckCircle"
+          />
 
-                  <select
-                    value={selectedEmployee}
-                    onChange={(e) => setSelectedEmployee(e.target.value)}
-                    className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
-                  >
-                    <option value="all">Tüm Personel</option>
-                    {mockEmployees.map((employee) => (
-                      <option key={employee.id} value={employee.id}>
-                        {employee.firstName} {employee.lastName}
-                      </option>
-                    ))}
-                  </select>
-                </div>
+          <Widget
+            title="Bekleyen Değerlendirmeler"
+            value={totalPendingEvaluations}
+            color="yellow"
+            icon="FaPoll"
+          />
 
-                <div className="flex gap-2">
-                  <button
-                    onClick={handleNewCampaign}
-                    className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm"
-                  >
-                    <FaPlus className="w-4 h-4" />
-                    Yeni Değerlendirme
-                  </button>
-                  <button
-                    onClick={handleStartEvaluation}
-                    className="flex items-center gap-2 px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm"
-                  >
-                    <FaPoll className="w-4 h-4" />
-                    Değerlendirme Yap
-                  </button>
-                </div>
-              </div>
+          <Widget title="Katılımcılar" value={totalParticipants} color="purple" icon="FaUsers" />
+        </div>
 
-              {/* Campaigns Table */}
-              <DataTable data={filteredCampaigns} columns={campaignColumns} />
-            </div>
-          )}
+        {/* Tabs */}
+        <div className="bg-white rounded-lg shadow-sm border">
+          <div className="border-b border-gray-200">
+            <nav className="-mb-px flex space-x-2 px-2">
+              {[
+                {
+                  key: 'campaigns',
+                  label: 'Değerlendirme Kampanyaları',
+                  icon: FaUsers,
+                },
+                {
+                  key: 'results',
+                  label: 'Değerlendirme Sonuçları',
+                  icon: FaChartBar,
+                },
+              ].map(({ key, label, icon: Icon }) => (
+                <button
+                  key={key}
+                  onClick={() => setActiveTab(key as 'campaigns' | 'results')}
+                  className={`flex items-center gap-2 py-1.5 px-2.5 border-b-2 font-medium text-sm ${
+                    activeTab === key
+                      ? 'border-blue-500 text-blue-600'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                  }`}
+                >
+                  <Icon className="w-4 h-4" />
+                  {label}
+                </button>
+              ))}
+            </nav>
+          </div>
 
-          {activeTab === "results" && (
-            <div className="space-y-3">
-              {/* Results Filters */}
-              <div className="flex flex-col sm:flex-row gap-3 justify-between">
-                <div className="flex flex-col sm:flex-row gap-3">
-                  <select
-                    value={selectedResultsCampaign}
-                    onChange={(e) => setSelectedResultsCampaign(e.target.value)}
-                    className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
-                  >
-                    <option value="all">Tüm Değerlendirmeler</option>
-                    {mockEvaluation360.map((campaign) => (
-                      <option key={campaign.id} value={campaign.id}>
-                        {campaign.name}
-                      </option>
-                    ))}
-                  </select>
+          <div className="p-3">
+            {activeTab === 'campaigns' && (
+              <div className="space-y-3">
+                {/* Filters and Actions */}
+                <div className="flex flex-col sm:flex-row gap-3 justify-between">
+                  <div className="flex flex-col sm:flex-row gap-3">
+                    <select
+                      value={selectedStatus}
+                      onChange={(e) => setSelectedStatus(e.target.value)}
+                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
+                    >
+                      <option value="all">Tüm Durumlar</option>
+                      <option value={CampaignStatusEnum.Draft}>Taslak</option>
+                      <option value={CampaignStatusEnum.Active}>Aktif</option>
+                      <option value={CampaignStatusEnum.Completed}>Tamamlandı</option>
+                    </select>
 
-                  <select
-                    value={selectedResultsStatus}
-                    onChange={(e) => setSelectedResultsStatus(e.target.value)}
-                    className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
-                  >
-                    <option value="all">Tüm Durumlar</option>
-                    <option value={ParticipantStatusEnum.Invited}>
-                      Davet Edildi
-                    </option>
-                    <option value={ParticipantStatusEnum.Started}>
-                      Başladı
-                    </option>
-                    <option value={ParticipantStatusEnum.Completed}>
-                      Tamamlandı
-                    </option>
-                    <option value={ParticipantStatusEnum.Expired}>
-                      Süresi Dolmuş
-                    </option>
-                    <option value={ParticipantStatusEnum.Declined}>
-                      Reddedildi
-                    </option>
-                  </select>
-
-                  <select
-                    value={selectedResultsDepartment}
-                    onChange={(e) =>
-                      setSelectedResultsDepartment(e.target.value)
-                    }
-                    className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
-                  >
-                    <option value="all">Tüm Departmanlar</option>
-                    {mockDepartments.map((department) => (
-                      <option key={department.id} value={department.id}>
-                        {department.name}
-                      </option>
-                    ))}
-                  </select>
-
-                  <select
-                    value={selectedResultsEmployee}
-                    onChange={(e) => setSelectedResultsEmployee(e.target.value)}
-                    className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
-                  >
-                    <option value="all">Tüm Personel</option>
-                    {mockEmployees.map((employee) => (
-                      <option key={employee.id} value={employee.id}>
-                        {employee.firstName} {employee.lastName}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-
-              {/* Results Summary */}
-
-              <div className="bg-white rounded-lg border overflow-hidden">
-                <div className="overflow-x-auto">
-                  <table className="min-w-full divide-y divide-gray-200">
-                    <thead className="bg-gray-50">
-                      <tr>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          Değerlendirme Adı
-                        </th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          Değerlendirilecek Kişi
-                        </th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          Değerlendiren
-                        </th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          Toplam İlerleme
-                        </th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          Değerlendirme Durumu
-                        </th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          Toplam Puan
-                        </th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          Puan Yüzdesi
-                        </th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          İşlemler
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody className="bg-white divide-y divide-gray-200">
-                      {getAllEvaluationParticipants().map((result) => (
-                        <tr
-                          key={`${result.resultId}-${result.evaluatedEmployeeId}-${result.evaluatorId}`}
-                          className="hover:bg-gray-50 text-xs"
-                        >
-                          <td className="px-3 py-2 whitespace-nowrap text-gray-500">
-                            <div className="flex flex-col">
-                              <span className="font-medium text-gray-900">
-                                {result.campaignName}
-                              </span>
-                              <span className="text-xs text-gray-500">
-                                {result.completedDate
-                                  ? new Date(
-                                      result.completedDate
-                                    ).toLocaleDateString("tr-TR")
-                                  : "-"}
-                              </span>
-                            </div>
-                          </td>
-                          <td className="px-3 py-2 whitespace-nowrap text-gray-500">
-                            {result.evaluatedEmployeeName}
-                          </td>
-                          <td className="px-3 py-2 whitespace-nowrap text-gray-500">
-                            <div className="flex flex-col">
-                              <span className="font-medium text-gray-900">
-                                {result.evaluatorName}
-                              </span>
-                              <span className="text-xs text-gray-500">
-                                {getAssessorTypeLabel(result.evaluatorType)}
-                              </span>
-                            </div>
-                          </td>
-                          <td className="px-3 py-2 whitespace-nowrap text-sm">
-                            <div className="flex items-center">
-                              <div className="w-16 bg-gray-200 rounded-full h-2 mr-2">
-                                <div
-                                  className="bg-blue-600 h-2 rounded-full"
-                                  style={{
-                                    width: `${
-                                      result.status ===
-                                      ParticipantStatusEnum.Completed
-                                        ? 100
-                                        : 50
-                                    }%`,
-                                  }}
-                                ></div>
-                              </div>
-                              <span className="text-sm text-gray-600">
-                                {result.status ===
-                                ParticipantStatusEnum.Completed
-                                  ? 100
-                                  : 50}
-                                %
-                              </span>
-                            </div>
-                          </td>
-                          <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                            <span
-                              className={`inline-block px-2 py-1 text-xs rounded-full ${getParticipantStatusColor(
-                                result.status
-                              )}`}
-                            >
-                              {getParticipantStatusText(result.status)}
-                            </span>
-                          </td>
-                          <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                            {result.overallScore}/100
-                          </td>
-                          <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                            %{result.scorePercentage}
-                          </td>
-                          <td className="px-3 py-2 whitespace-nowrap text-sm font-medium">
-                            <div className="flex gap-2">
-                              <button
-                                onClick={() =>
-                                  handleViewEvaluationDetail(result)
-                                }
-                                className="text-blue-600 hover:text-blue-900"
-                                title="Değerlendirme Detayını Görüntüle"
-                              >
-                                <FaEye className="w-4 h-4" />
-                              </button>
-                              <button
-                                onClick={() =>
-                                  handleEditEvaluationDetail(result)
-                                }
-                                className="text-green-600 hover:text-green-900"
-                                title="Değerlendirme Detayını Düzenle"
-                              >
-                                <FaEdit className="w-4 h-4" />
-                              </button>
-                            </div>
-                          </td>
-                        </tr>
+                    <select
+                      value={selectedDepartment}
+                      onChange={(e) => setSelectedDepartment(e.target.value)}
+                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
+                    >
+                      <option value="all">Tüm Departmanlar</option>
+                      {mockDepartments.map((department) => (
+                        <option key={department.id} value={department.id}>
+                          {department.name}
+                        </option>
                       ))}
-                    </tbody>
-                  </table>
+                    </select>
+
+                    <select
+                      value={selectedEmployee}
+                      onChange={(e) => setSelectedEmployee(e.target.value)}
+                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
+                    >
+                      <option value="all">Tüm Personel</option>
+                      {mockEmployees.map((employee) => (
+                        <option key={employee.id} value={employee.id}>
+                          {employee.firstName} {employee.lastName}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="flex gap-2">
+                    <button
+                      onClick={handleNewCampaign}
+                      className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm"
+                    >
+                      <FaPlus className="w-4 h-4" />
+                      Yeni Değerlendirme
+                    </button>
+                    <button
+                      onClick={handleStartEvaluation}
+                      className="flex items-center gap-2 px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm"
+                    >
+                      <FaPoll className="w-4 h-4" />
+                      Değerlendirme Yap
+                    </button>
+                  </div>
+                </div>
+
+                {/* Campaigns Table */}
+                <DataTable data={filteredCampaigns} columns={campaignColumns} />
+              </div>
+            )}
+
+            {activeTab === 'results' && (
+              <div className="space-y-3">
+                {/* Results Filters */}
+                <div className="flex flex-col sm:flex-row gap-3 justify-between">
+                  <div className="flex flex-col sm:flex-row gap-3">
+                    <select
+                      value={selectedResultsCampaign}
+                      onChange={(e) => setSelectedResultsCampaign(e.target.value)}
+                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
+                    >
+                      <option value="all">Tüm Değerlendirmeler</option>
+                      {mockEvaluation360.map((campaign) => (
+                        <option key={campaign.id} value={campaign.id}>
+                          {campaign.name}
+                        </option>
+                      ))}
+                    </select>
+
+                    <select
+                      value={selectedResultsStatus}
+                      onChange={(e) => setSelectedResultsStatus(e.target.value)}
+                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
+                    >
+                      <option value="all">Tüm Durumlar</option>
+                      <option value={ParticipantStatusEnum.Invited}>Davet Edildi</option>
+                      <option value={ParticipantStatusEnum.Started}>Başladı</option>
+                      <option value={ParticipantStatusEnum.Completed}>Tamamlandı</option>
+                      <option value={ParticipantStatusEnum.Expired}>Süresi Dolmuş</option>
+                      <option value={ParticipantStatusEnum.Declined}>Reddedildi</option>
+                    </select>
+
+                    <select
+                      value={selectedResultsDepartment}
+                      onChange={(e) => setSelectedResultsDepartment(e.target.value)}
+                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
+                    >
+                      <option value="all">Tüm Departmanlar</option>
+                      {mockDepartments.map((department) => (
+                        <option key={department.id} value={department.id}>
+                          {department.name}
+                        </option>
+                      ))}
+                    </select>
+
+                    <select
+                      value={selectedResultsEmployee}
+                      onChange={(e) => setSelectedResultsEmployee(e.target.value)}
+                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
+                    >
+                      <option value="all">Tüm Personel</option>
+                      {mockEmployees.map((employee) => (
+                        <option key={employee.id} value={employee.id}>
+                          {employee.firstName} {employee.lastName}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+
+                {/* Results Summary */}
+
+                <div className="bg-white rounded-lg border overflow-hidden">
+                  <div className="overflow-x-auto">
+                    <table className="min-w-full divide-y divide-gray-200">
+                      <thead className="bg-gray-50">
+                        <tr>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Değerlendirme Adı
+                          </th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Değerlendirilecek Kişi
+                          </th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Değerlendiren
+                          </th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Toplam İlerleme
+                          </th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Değerlendirme Durumu
+                          </th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Toplam Puan
+                          </th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Puan Yüzdesi
+                          </th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            İşlemler
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody className="bg-white divide-y divide-gray-200">
+                        {getAllEvaluationParticipants().map((result) => (
+                          <tr
+                            key={`${result.resultId}-${result.evaluatedEmployeeId}-${result.evaluatorId}`}
+                            className="hover:bg-gray-50 text-xs"
+                          >
+                            <td className="px-3 py-2 whitespace-nowrap text-gray-500">
+                              <div className="flex flex-col">
+                                <span className="font-medium text-gray-900">
+                                  {result.campaignName}
+                                </span>
+                                <span className="text-xs text-gray-500">
+                                  {result.completedDate
+                                    ? new Date(result.completedDate).toLocaleDateString('tr-TR')
+                                    : '-'}
+                                </span>
+                              </div>
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap text-gray-500">
+                              {result.evaluatedEmployeeName}
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap text-gray-500">
+                              <div className="flex flex-col">
+                                <span className="font-medium text-gray-900">
+                                  {result.evaluatorName}
+                                </span>
+                                <span className="text-xs text-gray-500">
+                                  {getAssessorTypeLabel(result.evaluatorType)}
+                                </span>
+                              </div>
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap text-sm">
+                              <div className="flex items-center">
+                                <div className="w-16 bg-gray-200 rounded-full h-2 mr-2">
+                                  <div
+                                    className="bg-blue-600 h-2 rounded-full"
+                                    style={{
+                                      width: `${
+                                        result.status === ParticipantStatusEnum.Completed ? 100 : 50
+                                      }%`,
+                                    }}
+                                  ></div>
+                                </div>
+                                <span className="text-sm text-gray-600">
+                                  {result.status === ParticipantStatusEnum.Completed ? 100 : 50}%
+                                </span>
+                              </div>
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                              <span
+                                className={`inline-block px-2 py-1 text-xs rounded-full ${getParticipantStatusColor(
+                                  result.status,
+                                )}`}
+                              >
+                                {getParticipantStatusText(result.status)}
+                              </span>
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                              {result.overallScore}/100
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                              %{result.scorePercentage}
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap text-sm font-medium">
+                              <div className="flex gap-2">
+                                <button
+                                  onClick={() => handleViewEvaluationDetail(result)}
+                                  className="text-blue-600 hover:text-blue-900"
+                                  title="Değerlendirme Detayını Görüntüle"
+                                >
+                                  <FaEye className="w-4 h-4" />
+                                </button>
+                                <button
+                                  onClick={() => handleEditEvaluationDetail(result)}
+                                  className="text-green-600 hover:text-green-900"
+                                  title="Değerlendirme Detayını Düzenle"
+                                >
+                                  <FaEdit className="w-4 h-4" />
+                                </button>
+                              </div>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
 
@@ -1171,9 +1054,7 @@ const Degree360Evaluation: React.FC = () => {
           <div className="bg-white rounded-lg w-full max-w-lg max-h-[90vh] overflow-y-auto">
             <div className="flex justify-between items-center p-2.5 border-b">
               <h2 className="text-base font-semibold">
-                {selectedCampaign
-                  ? "Değerlendirme Düzenle"
-                  : "Yeni Değerlendirme"}
+                {selectedCampaign ? 'Değerlendirme Düzenle' : 'Yeni Değerlendirme'}
               </h2>
               <button
                 onClick={handleCloseModal}
@@ -1201,9 +1082,7 @@ const Degree360Evaluation: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Açıklama
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Açıklama</label>
                 <textarea
                   value={campaignFormData.description}
                   onChange={(e) =>
@@ -1241,9 +1120,7 @@ const Degree360Evaluation: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Departman
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Departman</label>
                 <select
                   value={campaignFormData.departmentId}
                   onChange={(e) => handleDepartmentChange(e.target.value)}
@@ -1265,38 +1142,29 @@ const Degree360Evaluation: React.FC = () => {
                   </label>
                   <div className="border border-gray-300 rounded-md p-1.5 max-h-28 overflow-y-auto">
                     {filteredEmployeesByDepartment.map((employee) => (
-                      <label
-                        key={employee.id}
-                        className="flex items-center mb-2"
-                      >
+                      <label key={employee.id} className="flex items-center mb-2">
                         <input
                           type="checkbox"
-                          checked={campaignFormData.targetEmployees.includes(
-                            employee.id
-                          )}
+                          checked={campaignFormData.targetEmployees.includes(employee.id)}
                           onChange={(e) => {
                             if (e.target.checked) {
                               setCampaignFormData({
                                 ...campaignFormData,
-                                targetEmployees: [
-                                  ...campaignFormData.targetEmployees,
-                                  employee.id,
-                                ],
-                              });
+                                targetEmployees: [...campaignFormData.targetEmployees, employee.id],
+                              })
                             } else {
                               setCampaignFormData({
                                 ...campaignFormData,
-                                targetEmployees:
-                                  campaignFormData.targetEmployees.filter(
-                                    (id) => id !== employee.id
-                                  ),
-                              });
+                                targetEmployees: campaignFormData.targetEmployees.filter(
+                                  (id) => id !== employee.id,
+                                ),
+                              })
                             }
                           }}
                           className="mr-2"
                         />
-                        {employee.firstName} {employee.lastName} -{" "}
-                        {employee.jobPosition?.name || "Pozisyon Belirtilmemiş"}
+                        {employee.firstName} {employee.lastName} -{' '}
+                        {employee.jobPosition?.name || 'Pozisyon Belirtilmemiş'}
                       </label>
                     ))}
                   </div>
@@ -1351,7 +1219,7 @@ const Degree360Evaluation: React.FC = () => {
                 className="flex items-center gap-2 px-2.5 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
               >
                 <FaSave className="w-4 h-4" />
-                {selectedCampaign ? "Güncelle" : "Kaydet"}
+                {selectedCampaign ? 'Güncelle' : 'Kaydet'}
               </button>
             </div>
           </div>
@@ -1363,9 +1231,7 @@ const Degree360Evaluation: React.FC = () => {
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2">
           <div className="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
             <div className="flex justify-between items-center p-2.5 border-b">
-              <h2 className="text-base font-semibold">
-                {selectedCampaign.name}
-              </h2>
+              <h2 className="text-base font-semibold">{selectedCampaign.name}</h2>
               <button
                 onClick={handleCloseModal}
                 className="p-1.5 text-gray-400 hover:text-gray-600"
@@ -1381,40 +1247,28 @@ const Degree360Evaluation: React.FC = () => {
                   </h3>
                   <div className="space-y-2">
                     <div>
-                      <span className="text-sm font-medium text-gray-600">
-                        Adı:
-                      </span>
-                      <p className="text-sm text-gray-900">
-                        {selectedCampaign.name}
-                      </p>
+                      <span className="text-sm font-medium text-gray-600">Adı:</span>
+                      <p className="text-sm text-gray-900">{selectedCampaign.name}</p>
                     </div>
                     <div>
-                      <span className="text-sm font-medium text-gray-600">
-                        Açıklama:
-                      </span>
-                      <p className="text-sm text-gray-900">
-                        {selectedCampaign.description}
-                      </p>
+                      <span className="text-sm font-medium text-gray-600">Açıklama:</span>
+                      <p className="text-sm text-gray-900">{selectedCampaign.description}</p>
                     </div>
                     <div>
-                      <span className="text-sm font-medium text-gray-600">
-                        Durum:
-                      </span>
+                      <span className="text-sm font-medium text-gray-600">Durum:</span>
                       <span
                         className={`ml-2 px-3 py-1 text-xs font-medium rounded-full ${getCampaignStatusColor(
-                          selectedCampaign.status
+                          selectedCampaign.status,
                         )}`}
                       >
                         {getCampaignStatusText(selectedCampaign.status)}
                       </span>
                     </div>
                     <div>
-                      <span className="text-sm font-medium text-gray-600">
-                        Tarih Aralığı:
-                      </span>
+                      <span className="text-sm font-medium text-gray-600">Tarih Aralığı:</span>
                       <p className="text-sm text-gray-900">
-                        {selectedCampaign.startDate.toLocaleDateString("tr-TR")}{" "}
-                        - {selectedCampaign.endDate.toLocaleDateString("tr-TR")}
+                        {selectedCampaign.startDate.toLocaleDateString('tr-TR')} -{' '}
+                        {selectedCampaign.endDate.toLocaleDateString('tr-TR')}
                       </p>
                     </div>
                   </div>
@@ -1426,64 +1280,52 @@ const Degree360Evaluation: React.FC = () => {
                   </h3>
                   <div className="space-y-2">
                     {(() => {
-                      const participants = getCampaignParticipants(
-                        selectedCampaign.id
-                      );
+                      const participants = getCampaignParticipants(selectedCampaign.id)
                       const completed = participants.filter(
-                        (p) => p.status === ParticipantStatusEnum.Completed
-                      );
+                        (p) => p.status === ParticipantStatusEnum.Completed,
+                      )
                       const started = participants.filter(
-                        (p) => p.status === ParticipantStatusEnum.Started
-                      );
+                        (p) => p.status === ParticipantStatusEnum.Started,
+                      )
                       const invited = participants.filter(
-                        (p) => p.status === ParticipantStatusEnum.Invited
-                      );
+                        (p) => p.status === ParticipantStatusEnum.Invited,
+                      )
 
                       return (
                         <>
                           <div className="flex justify-between">
-                            <span className="text-sm text-gray-600">
-                              Toplam:
-                            </span>
+                            <span className="text-sm text-gray-600">Toplam:</span>
                             <span className="text-sm font-medium text-gray-900">
                               {participants.length}
                             </span>
                           </div>
                           <div className="flex justify-between">
-                            <span className="text-sm text-gray-600">
-                              Tamamlanan:
-                            </span>
+                            <span className="text-sm text-gray-600">Tamamlanan:</span>
                             <span className="text-sm font-medium text-green-600">
                               {completed.length}
                             </span>
                           </div>
                           <div className="flex justify-between">
-                            <span className="text-sm text-gray-600">
-                              Devam Eden:
-                            </span>
+                            <span className="text-sm text-gray-600">Devam Eden:</span>
                             <span className="text-sm font-medium text-blue-600">
                               {started.length}
                             </span>
                           </div>
                           <div className="flex justify-between">
-                            <span className="text-sm text-gray-600">
-                              Bekleyen:
-                            </span>
+                            <span className="text-sm text-gray-600">Bekleyen:</span>
                             <span className="text-sm font-medium text-yellow-600">
                               {invited.length}
                             </span>
                           </div>
                         </>
-                      );
+                      )
                     })()}
                   </div>
                 </div>
               </div>
 
               <div>
-                <h3 className="text-sm font-medium text-gray-900 mb-2">
-                  Katılımcı Detayları
-                </h3>
+                <h3 className="text-sm font-medium text-gray-900 mb-2">Katılımcı Detayları</h3>
                 <div className="overflow-x-auto">
                   <table className="min-w-full divide-y divide-gray-200">
                     <thead className="bg-gray-50">
@@ -1506,56 +1348,50 @@ const Degree360Evaluation: React.FC = () => {
                       </tr>
                     </thead>
                     <tbody className="bg-white divide-y divide-gray-200">
-                      {getCampaignParticipants(selectedCampaign.id).map(
-                        (participant) => {
-                          const targetEmployee = mockEmployees.find(
-                            (emp) => emp.id === participant.evaluatedEmployeeId
-                          );
-                          const assessorEmployee = mockEmployees.find(
-                            (emp) => emp.id === participant.evaluatorId
-                          );
+                      {getCampaignParticipants(selectedCampaign.id).map((participant) => {
+                        const targetEmployee = mockEmployees.find(
+                          (emp) => emp.id === participant.evaluatedEmployeeId,
+                        )
+                        const assessorEmployee = mockEmployees.find(
+                          (emp) => emp.id === participant.evaluatorId,
+                        )
 
-                          return (
-                            <tr key={participant.id}>
-                              <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                                {targetEmployee
-                                  ? `${targetEmployee.firstName} ${targetEmployee.lastName}`
-                                  : "Bilinmiyor"}
-                              </td>
-                              <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                                {assessorEmployee
-                                  ? `${assessorEmployee.firstName} ${assessorEmployee.lastName}`
-                                  : "Bilinmiyor"}
-                              </td>
-                              <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-500">
-                                {getAssessorTypeText(participant.evaluatorType)}
-                              </td>
-                              <td className="px-3 py-2 whitespace-nowrap">
-                                <span
-                                  className={`px-2 py-1 text-xs font-medium rounded-full ${getParticipantStatusColor(
-                                    participant.status
-                                  )}`}
-                                >
-                                  {getParticipantStatusText(participant.status)}
-                                </span>
-                              </td>
-                              <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-500">
-                                {participant.completedDate
-                                  ? participant.completedDate.toLocaleDateString(
-                                      "tr-TR"
-                                    )
-                                  : participant.startedDate
+                        return (
+                          <tr key={participant.id}>
+                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                              {targetEmployee
+                                ? `${targetEmployee.firstName} ${targetEmployee.lastName}`
+                                : 'Bilinmiyor'}
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                              {assessorEmployee
+                                ? `${assessorEmployee.firstName} ${assessorEmployee.lastName}`
+                                : 'Bilinmiyor'}
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-500">
+                              {getAssessorTypeText(participant.evaluatorType)}
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap">
+                              <span
+                                className={`px-2 py-1 text-xs font-medium rounded-full ${getParticipantStatusColor(
+                                  participant.status,
+                                )}`}
+                              >
+                                {getParticipantStatusText(participant.status)}
+                              </span>
+                            </td>
+                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-500">
+                              {participant.completedDate
+                                ? participant.completedDate.toLocaleDateString('tr-TR')
+                                : participant.startedDate
                                   ? `Başladı: ${participant.startedDate.toLocaleDateString(
-                                      "tr-TR"
+                                      'tr-TR',
                                     )}`
-                                  : `Davet: ${participant.invitedDate.toLocaleDateString(
-                                      "tr-TR"
-                                    )}`}
-                              </td>
-                            </tr>
-                          );
-                        }
-                      )}
+                                  : `Davet: ${participant.invitedDate.toLocaleDateString('tr-TR')}`}
+                            </td>
+                          </tr>
+                        )
+                      })}
                     </tbody>
                   </table>
                 </div>
@@ -1570,8 +1406,8 @@ const Degree360Evaluation: React.FC = () => {
               </button>
               <button
                 onClick={() => {
-                  handleCloseModal();
-                  handleEditCampaign(selectedCampaign);
+                  handleCloseModal()
+                  handleEditCampaign(selectedCampaign)
                 }}
                 className="flex items-center gap-2 px-2.5 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
               >
@@ -1590,7 +1426,7 @@ const Degree360Evaluation: React.FC = () => {
             <div className="flex justify-between items-center p-2.5 border-b">
               <h2 className="text-base font-semibold">
                 {!currentCampaignForEvaluation
-                  ? "Değerlendirme Yap"
+                  ? 'Değerlendirme Yap'
                   : currentCampaignForEvaluation.name}
               </h2>
               <button
@@ -1604,41 +1440,30 @@ const Degree360Evaluation: React.FC = () => {
               {!currentCampaignForEvaluation ? (
                 /* Adım 0: Değerlendirme seçimi */
                 <div>
-                  <h3 className="text-sm font-medium text-gray-900 mb-2">
-                    Değerlendirme Seçin
-                  </h3>
+                  <h3 className="text-sm font-medium text-gray-900 mb-2">Değerlendirme Seçin</h3>
                   <div className="space-y-2">
                     {mockEvaluation360
-                      .filter(
-                        (campaign) =>
-                          campaign.status === CampaignStatusEnum.Active
-                      )
+                      .filter((campaign) => campaign.status === CampaignStatusEnum.Active)
                       .map((campaign) => (
                         <div
                           key={campaign.id}
                           className="border rounded-lg p-2.5 hover:bg-gray-50 cursor-pointer"
-                          onClick={() =>
-                            setCurrentCampaignForEvaluation(campaign)
-                          }
+                          onClick={() => setCurrentCampaignForEvaluation(campaign)}
                         >
                           <div className="flex justify-between items-center">
                             <div>
-                              <h4 className="font-medium text-gray-900">
-                                {campaign.name}
-                              </h4>
-                              <p className="text-sm text-gray-600">
-                                {campaign.description}
-                              </p>
+                              <h4 className="font-medium text-gray-900">{campaign.name}</h4>
+                              <p className="text-sm text-gray-600">{campaign.description}</p>
                               <div className="flex items-center gap-2 mt-2">
                                 <span
                                   className={`inline-block px-2 py-1 text-xs rounded-full ${getCampaignStatusColor(
-                                    campaign.status
+                                    campaign.status,
                                   )}`}
                                 >
                                   {getCampaignStatusText(campaign.status)}
                                 </span>
                                 <span className="text-xs text-gray-500">
-                                  {campaign.startDate.toLocaleDateString()} -{" "}
+                                  {campaign.startDate.toLocaleDateString()} -{' '}
                                   {campaign.endDate.toLocaleDateString()}
                                 </span>
                               </div>
@@ -1649,7 +1474,7 @@ const Degree360Evaluation: React.FC = () => {
                       ))}
                   </div>
                   {mockEvaluation360.filter(
-                    (campaign) => campaign.status === CampaignStatusEnum.Active
+                    (campaign) => campaign.status === CampaignStatusEnum.Active,
                   ).length === 0 && (
                     <div className="text-center py-8 text-gray-500">
                       <FaPoll className="w-12 h-12 mx-auto mb-3 text-gray-300" />
@@ -1673,16 +1498,13 @@ const Degree360Evaluation: React.FC = () => {
                   </h3>
                   <div className="bg-blue-50 p-2.5 rounded-lg mb-3">
                     <p className="text-sm text-blue-800">
-                      <strong>Seçili Değerlendirme:</strong>{" "}
-                      {currentCampaignForEvaluation.name}
+                      <strong>Seçili Değerlendirme:</strong> {currentCampaignForEvaluation.name}
                     </p>
                   </div>
                   <div className="space-y-3">
                     {mockEmployees
                       .filter((emp) =>
-                        currentCampaignForEvaluation.targetEmployees.includes(
-                          emp.id
-                        )
+                        currentCampaignForEvaluation.targetEmployees.includes(emp.id),
                       )
                       .map((employee) => (
                         <div
@@ -1692,18 +1514,10 @@ const Degree360Evaluation: React.FC = () => {
                         >
                           <div className="flex justify-between items-center">
                             <div>
-                              <h4 className="font-medium text-gray-900">
-                                {employee.fullName}
-                              </h4>
+                              <h4 className="font-medium text-gray-900">{employee.fullName}</h4>
+                              <p className="text-sm text-gray-600">{employee.jobPosition?.name}</p>
                               <p className="text-sm text-gray-600">
-                                {employee.jobPosition?.name}
-                              </p>
-                              <p className="text-sm text-gray-600">
-                                {
-                                  mockDepartments.find(
-                                    (d) => d.id === employee.departmantId
-                                  )?.name
-                                }
+                                {mockDepartments.find((d) => d.id === employee.departmantId)?.name}
                               </p>
                             </div>
                             <FaUsers className="w-4 h-4 text-gray-400" />
@@ -1712,9 +1526,7 @@ const Degree360Evaluation: React.FC = () => {
                       ))}
                   </div>
                   {mockEmployees.filter((emp) =>
-                    currentCampaignForEvaluation.targetEmployees.includes(
-                      emp.id
-                    )
+                    currentCampaignForEvaluation.targetEmployees.includes(emp.id),
                   ).length === 0 && (
                     <div className="text-center py-8 text-gray-500">
                       <FaUsers className="w-12 h-12 mx-auto mb-3 text-gray-300" />
@@ -1727,7 +1539,7 @@ const Degree360Evaluation: React.FC = () => {
                 <div>
                   <div className="mb-4">
                     <button
-                      onClick={() => setEvaluationTarget("")}
+                      onClick={() => setEvaluationTarget('')}
                       className="text-blue-600 hover:text-blue-800 text-sm"
                     >
                       ← Geri Dön
@@ -1738,11 +1550,8 @@ const Degree360Evaluation: React.FC = () => {
                   </h3>
                   <div className="bg-blue-50 p-2.5 rounded-lg mb-3">
                     <p className="text-sm text-blue-800">
-                      <strong>Değerlendirilecek:</strong>{" "}
-                      {
-                        mockEmployees.find((e) => e.id === evaluationTarget)
-                          ?.fullName
-                      }
+                      <strong>Değerlendirilecek:</strong>{' '}
+                      {mockEmployees.find((e) => e.id === evaluationTarget)?.fullName}
                     </p>
                   </div>
 
@@ -1753,8 +1562,8 @@ const Degree360Evaluation: React.FC = () => {
                         key={assessorType}
                         className="border rounded-lg p-2.5 hover:bg-gray-50 cursor-pointer"
                         onClick={() => {
-                          setSelectedAssessorType(assessorType);
-                          setEvaluatorSearchTerm("");
+                          setSelectedAssessorType(assessorType)
+                          setEvaluatorSearchTerm('')
                         }}
                       >
                         <div className="flex justify-between items-center">
@@ -1765,16 +1574,10 @@ const Degree360Evaluation: React.FC = () => {
                             <p className="text-sm text-gray-600">
                               {getAssessorTypeDescription(assessorType)}
                             </p>
-                            {getEvaluatorsByType(evaluationTarget, assessorType)
-                              .length > 0 && (
+                            {getEvaluatorsByType(evaluationTarget, assessorType).length > 0 && (
                               <span className="inline-block mt-1 px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">
-                                {
-                                  getEvaluatorsByType(
-                                    evaluationTarget,
-                                    assessorType
-                                  ).length
-                                }{" "}
-                                seçenek mevcut
+                                {getEvaluatorsByType(evaluationTarget, assessorType).length} seçenek
+                                mevcut
                               </span>
                             )}
                           </div>
@@ -1790,12 +1593,12 @@ const Degree360Evaluation: React.FC = () => {
                   <div className="mb-4">
                     <button
                       onClick={() => {
-                        setSelectedAssessorType(null);
-                        setEvaluationEvaluator("");
-                        setSelectedCustomerId("");
-                        setExternalEvaluatorName("");
-                        setExternalEvaluatorEmail("");
-                        setEvaluatorSearchTerm("");
+                        setSelectedAssessorType(null)
+                        setEvaluationEvaluator('')
+                        setSelectedCustomerId('')
+                        setExternalEvaluatorName('')
+                        setExternalEvaluatorEmail('')
+                        setEvaluatorSearchTerm('')
                       }}
                       className="text-blue-600 hover:text-blue-800 text-sm"
                     >
@@ -1807,13 +1610,10 @@ const Degree360Evaluation: React.FC = () => {
                   </h3>
                   <div className="bg-blue-50 p-2.5 rounded-lg mb-3">
                     <p className="text-sm text-blue-800">
-                      <strong>Değerlendirilecek:</strong>{" "}
-                      {
-                        mockEmployees.find((e) => e.id === evaluationTarget)
-                          ?.fullName
-                      }
+                      <strong>Değerlendirilecek:</strong>{' '}
+                      {mockEmployees.find((e) => e.id === evaluationTarget)?.fullName}
                       <br />
-                      <strong>Değerlendirici Tipi:</strong>{" "}
+                      <strong>Değerlendirici Tipi:</strong>{' '}
                       {getAssessorTypeText(selectedAssessorType)}
                     </p>
                   </div>
@@ -1828,9 +1628,7 @@ const Degree360Evaluation: React.FC = () => {
                         <input
                           type="text"
                           value={externalEvaluatorName}
-                          onChange={(e) =>
-                            setExternalEvaluatorName(e.target.value)
-                          }
+                          onChange={(e) => setExternalEvaluatorName(e.target.value)}
                           className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                           placeholder="Değerlendirici adını girin"
                         />
@@ -1842,16 +1640,14 @@ const Degree360Evaluation: React.FC = () => {
                         <input
                           type="email"
                           value={externalEvaluatorEmail}
-                          onChange={(e) =>
-                            setExternalEvaluatorEmail(e.target.value)
-                          }
+                          onChange={(e) => setExternalEvaluatorEmail(e.target.value)}
                           className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                           placeholder="E-posta adresini girin"
                         />
                       </div>
                       {externalEvaluatorName && externalEvaluatorEmail && (
                         <button
-                          onClick={() => setEvaluationEvaluator("external")}
+                          onClick={() => setEvaluationEvaluator('external')}
                           className="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 text-sm"
                         >
                           Dış Değerlendiriciyi Seç
@@ -1866,39 +1662,28 @@ const Degree360Evaluation: React.FC = () => {
                         <input
                           type="text"
                           value={evaluatorSearchTerm}
-                          onChange={(e) =>
-                            setEvaluatorSearchTerm(e.target.value)
-                          }
+                          onChange={(e) => setEvaluatorSearchTerm(e.target.value)}
                           className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                           placeholder="Müşteri adında ara..."
                         />
                       </div>
-                      {getEvaluatorsByType(
-                        evaluationTarget,
-                        selectedAssessorType
-                      )
+                      {getEvaluatorsByType(evaluationTarget, selectedAssessorType)
                         .filter((evaluator) =>
-                          evaluator.name
-                            .toLowerCase()
-                            .includes(evaluatorSearchTerm.toLowerCase())
+                          evaluator.name.toLowerCase().includes(evaluatorSearchTerm.toLowerCase()),
                         )
                         .map((evaluator) => (
                           <div
                             key={evaluator.id}
                             className="border rounded-lg p-2.5 hover:bg-gray-50 cursor-pointer"
                             onClick={() => {
-                              setSelectedCustomerId(evaluator.id);
-                              setEvaluationEvaluator(evaluator.id);
+                              setSelectedCustomerId(evaluator.id)
+                              setEvaluationEvaluator(evaluator.id)
                             }}
                           >
                             <div className="flex justify-between items-center">
                               <div>
-                                <h4 className="font-medium text-gray-900">
-                                  {evaluator.name}
-                                </h4>
-                                <p className="text-sm text-gray-600">
-                                  {evaluator.title}
-                                </p>
+                                <h4 className="font-medium text-gray-900">{evaluator.name}</h4>
+                                <p className="text-sm text-gray-600">{evaluator.title}</p>
                                 <span className="inline-block mt-1 px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">
                                   {evaluator.department}
                                 </span>
@@ -1916,21 +1701,14 @@ const Degree360Evaluation: React.FC = () => {
                         <input
                           type="text"
                           value={evaluatorSearchTerm}
-                          onChange={(e) =>
-                            setEvaluatorSearchTerm(e.target.value)
-                          }
+                          onChange={(e) => setEvaluatorSearchTerm(e.target.value)}
                           className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                           placeholder="Çalışan adında ara..."
                         />
                       </div>
-                      {getEvaluatorsByType(
-                        evaluationTarget,
-                        selectedAssessorType
-                      )
+                      {getEvaluatorsByType(evaluationTarget, selectedAssessorType)
                         .filter((evaluator) =>
-                          evaluator.name
-                            .toLowerCase()
-                            .includes(evaluatorSearchTerm.toLowerCase())
+                          evaluator.name.toLowerCase().includes(evaluatorSearchTerm.toLowerCase()),
                         )
                         .map((evaluator) => (
                           <div
@@ -1940,12 +1718,8 @@ const Degree360Evaluation: React.FC = () => {
                           >
                             <div className="flex justify-between items-center">
                               <div>
-                                <h4 className="font-medium text-gray-900">
-                                  {evaluator.name}
-                                </h4>
-                                <p className="text-sm text-gray-600">
-                                  {evaluator.title}
-                                </p>
+                                <h4 className="font-medium text-gray-900">{evaluator.name}</h4>
+                                <p className="text-sm text-gray-600">{evaluator.title}</p>
                                 <span className="inline-block mt-1 px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">
                                   {evaluator.department}
                                 </span>
@@ -1954,10 +1728,7 @@ const Degree360Evaluation: React.FC = () => {
                             </div>
                           </div>
                         ))}
-                      {getEvaluatorsByType(
-                        evaluationTarget,
-                        selectedAssessorType
-                      ).length === 0 && (
+                      {getEvaluatorsByType(evaluationTarget, selectedAssessorType).length === 0 && (
                         <div className="text-center py-8 text-gray-500">
                           <FaUsers className="w-12 h-12 mx-auto mb-3 text-gray-300" />
                           <p>Bu kategoride değerlendirici bulunmuyor</p>
@@ -1972,12 +1743,12 @@ const Degree360Evaluation: React.FC = () => {
                   <div className="mb-4">
                     <button
                       onClick={() => {
-                        setSelectedAssessorType(null);
-                        setEvaluationEvaluator("");
-                        setSelectedCustomerId("");
-                        setExternalEvaluatorName("");
-                        setExternalEvaluatorEmail("");
-                        setEvaluatorSearchTerm("");
+                        setSelectedAssessorType(null)
+                        setEvaluationEvaluator('')
+                        setSelectedCustomerId('')
+                        setExternalEvaluatorName('')
+                        setExternalEvaluatorEmail('')
+                        setEvaluatorSearchTerm('')
                       }}
                       className="text-blue-600 hover:text-blue-800 text-sm"
                     >
@@ -1989,11 +1760,8 @@ const Degree360Evaluation: React.FC = () => {
                   </h3>
                   <div className="bg-green-50 p-2.5 rounded-lg mb-3">
                     <p className="text-sm text-green-800">
-                      <strong>Değerlendirilen:</strong>{" "}
-                      {
-                        mockEmployees.find((e) => e.id === evaluationTarget)
-                          ?.fullName
-                      }
+                      <strong>Değerlendirilen:</strong>{' '}
+                      {mockEmployees.find((e) => e.id === evaluationTarget)?.fullName}
                       <br />
                       <strong>Değerlendiren:</strong> {getEvaluatorInfo()}
                     </p>
@@ -2003,39 +1771,23 @@ const Degree360Evaluation: React.FC = () => {
                   <div className="space-y-3">
                     {currentCampaignForEvaluation &&
                       mockEvaluation360Templates
-                        .find(
-                          (t) =>
-                            t.id === currentCampaignForEvaluation.templateId
-                        )
+                        .find((t) => t.id === currentCampaignForEvaluation.templateId)
                         ?.questionGroups.map((group) => (
-                          <div
-                            key={group.id}
-                            className="border rounded-lg p-2.5"
-                          >
-                            <h4 className="font-medium text-gray-900 mb-2">
-                              {group.groupName}
-                            </h4>
-                            <p className="text-sm text-gray-600 mb-3">
-                              {group.description}
-                            </p>
+                          <div key={group.id} className="border rounded-lg p-2.5">
+                            <h4 className="font-medium text-gray-900 mb-2">{group.groupName}</h4>
+                            <p className="text-sm text-gray-600 mb-3">{group.description}</p>
                             <div className="space-y-3">
                               {group.questions.map((question, qIndex) => (
-                                <div
-                                  key={question.id}
-                                  className="bg-gray-50 p-2.5 rounded"
-                                >
+                                <div key={question.id} className="bg-gray-50 p-2.5 rounded">
                                   <p className="font-medium text-gray-800 mb-3">
                                     {qIndex + 1}. {question.questionText}
                                     {question.isRequired && (
-                                      <span className="text-red-500 ml-1">
-                                        *
-                                      </span>
+                                      <span className="text-red-500 ml-1">*</span>
                                     )}
                                   </p>
 
                                   {/* Soru tipine göre input alanları */}
-                                  {question.questionType ===
-                                    QuestionTypeEnum.Rating && (
+                                  {question.questionType === QuestionTypeEnum.Rating && (
                                     <div className="space-y-2">
                                       <div className="flex justify-around items-center">
                                         {Array.from(
@@ -2046,8 +1798,7 @@ const Degree360Evaluation: React.FC = () => {
                                               1,
                                           },
                                           (_, i) => {
-                                            const value =
-                                              (question.minRating || 1) + i;
+                                            const value = (question.minRating || 1) + i
                                             return (
                                               <label
                                                 key={value}
@@ -2058,65 +1809,49 @@ const Degree360Evaluation: React.FC = () => {
                                                   name={`question-${question.id}`}
                                                   value={value}
                                                   checked={
-                                                    evaluationResponses[
-                                                      question.id
-                                                    ] === value
+                                                    evaluationResponses[question.id] === value
                                                   }
                                                   onChange={(e) =>
                                                     handleResponseChange(
                                                       question.id,
-                                                      Number(e.target.value)
+                                                      Number(e.target.value),
                                                     )
                                                   }
                                                   className="mb-1"
                                                 />
                                                 <span className="text-xs text-gray-600">
-                                                  {question.ratingLabels?.[i] ||
-                                                    value}
+                                                  {question.ratingLabels?.[i] || value}
                                                 </span>
                                               </label>
-                                            );
-                                          }
+                                            )
+                                          },
                                         )}
                                       </div>
                                     </div>
                                   )}
 
-                                  {question.questionType ===
-                                    QuestionTypeEnum.Text && (
+                                  {question.questionType === QuestionTypeEnum.Text && (
                                     <textarea
                                       className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                                       rows={3}
                                       placeholder="Yorumunuzu yazın..."
-                                      value={
-                                        evaluationResponses[question.id] || ""
-                                      }
+                                      value={evaluationResponses[question.id] || ''}
                                       onChange={(e) =>
-                                        handleResponseChange(
-                                          question.id,
-                                          e.target.value
-                                        )
+                                        handleResponseChange(question.id, e.target.value)
                                       }
                                     />
                                   )}
 
-                                  {question.questionType ===
-                                    QuestionTypeEnum.YesNo && (
+                                  {question.questionType === QuestionTypeEnum.YesNo && (
                                     <div className="flex gap-4">
                                       <label className="flex items-center cursor-pointer">
                                         <input
                                           type="radio"
                                           name={`question-${question.id}`}
                                           value="yes"
-                                          checked={
-                                            evaluationResponses[question.id] ===
-                                            "yes"
-                                          }
+                                          checked={evaluationResponses[question.id] === 'yes'}
                                           onChange={(e) =>
-                                            handleResponseChange(
-                                              question.id,
-                                              e.target.value
-                                            )
+                                            handleResponseChange(question.id, e.target.value)
                                           }
                                           className="mr-2"
                                         />
@@ -2127,15 +1862,9 @@ const Degree360Evaluation: React.FC = () => {
                                           type="radio"
                                           name={`question-${question.id}`}
                                           value="no"
-                                          checked={
-                                            evaluationResponses[question.id] ===
-                                            "no"
-                                          }
+                                          checked={evaluationResponses[question.id] === 'no'}
                                           onChange={(e) =>
-                                            handleResponseChange(
-                                              question.id,
-                                              e.target.value
-                                            )
+                                            handleResponseChange(question.id, e.target.value)
                                           }
                                           className="mr-2"
                                         />
@@ -2144,8 +1873,7 @@ const Degree360Evaluation: React.FC = () => {
                                     </div>
                                   )}
 
-                                  {question.questionType ===
-                                    QuestionTypeEnum.MultipleChoice && (
+                                  {question.questionType === QuestionTypeEnum.MultipleChoice && (
                                     <div className="space-y-2">
                                       {question.options?.map((option) => (
                                         <label
@@ -2157,14 +1885,12 @@ const Degree360Evaluation: React.FC = () => {
                                             name={`question-${question.id}`}
                                             value={option.value}
                                             checked={
-                                              evaluationResponses[
-                                                question.id
-                                              ] === option.value
+                                              evaluationResponses[question.id] === option.value
                                             }
                                             onChange={(e) =>
                                               handleResponseChange(
                                                 question.id,
-                                                Number(e.target.value)
+                                                Number(e.target.value),
                                               )
                                             }
                                             className="mr-2"
@@ -2226,32 +1952,22 @@ const Degree360Evaluation: React.FC = () => {
                   </h3>
                   <div className="space-y-1.5">
                     <div>
-                      <span className="text-sm text-blue-700 font-medium">
-                        Kampanya:{" "}
-                      </span>
-                      <span className="text-sm text-blue-800">
-                        {selectedResult.campaignName}
-                      </span>
+                      <span className="text-sm text-blue-700 font-medium">Kampanya: </span>
+                      <span className="text-sm text-blue-800">{selectedResult.campaignName}</span>
                     </div>
                     <div>
-                      <span className="text-sm text-blue-700 font-medium">
-                        Değerlendirilen:{" "}
-                      </span>
+                      <span className="text-sm text-blue-700 font-medium">Değerlendirilen: </span>
                       <span className="text-sm text-blue-800">
                         {selectedResult.evaluatedEmployeeName}
                       </span>
                     </div>
                     <div>
-                      <span className="text-sm text-blue-700 font-medium">
-                        Değerlendiren:{" "}
-                      </span>
-                      <span className="text-sm text-blue-800">
-                        {selectedResult.evaluatorName}
-                      </span>
+                      <span className="text-sm text-blue-700 font-medium">Değerlendiren: </span>
+                      <span className="text-sm text-blue-800">{selectedResult.evaluatorName}</span>
                     </div>
                     <div>
                       <span className="text-sm text-blue-700 font-medium">
-                        Değerlendiren Tipi:{" "}
+                        Değerlendiren Tipi:{' '}
                       </span>
                       <span className="text-sm text-blue-800">
                         {getAssessorTypeText(selectedResult.evaluatorType)}
@@ -2261,34 +1977,26 @@ const Degree360Evaluation: React.FC = () => {
                 </div>
 
                 <div className="bg-green-50 p-4 rounded-lg">
-                  <h3 className="font-medium text-green-800 mb-2 text-sm">
-                    Sonuç Bilgileri
-                  </h3>
+                  <h3 className="font-medium text-green-800 mb-2 text-sm">Sonuç Bilgileri</h3>
                   <div className="space-y-1.5">
                     <div>
-                      <span className="text-sm text-green-700 font-medium">
-                        Durum:{" "}
-                      </span>
+                      <span className="text-sm text-green-700 font-medium">Durum: </span>
                       <span
                         className={`text-sm px-2 py-0.5 rounded-full ${getParticipantStatusColor(
-                          selectedResult.status
+                          selectedResult.status,
                         )}`}
                       >
                         {getParticipantStatusText(selectedResult.status)}
                       </span>
                     </div>
                     <div>
-                      <span className="text-sm text-green-700 font-medium">
-                        Toplam Puan:{" "}
-                      </span>
+                      <span className="text-sm text-green-700 font-medium">Toplam Puan: </span>
                       <span className="text-sm text-green-800 font-bold">
                         {selectedResult.overallScore}/100
                       </span>
                     </div>
                     <div>
-                      <span className="text-sm text-green-700 font-medium">
-                        Yüzde:{" "}
-                      </span>
+                      <span className="text-sm text-green-700 font-medium">Yüzde: </span>
                       <span className="text-sm text-green-800 font-bold">
                         %{selectedResult.scorePercentage}
                       </span>
@@ -2296,12 +2004,10 @@ const Degree360Evaluation: React.FC = () => {
                     {selectedResult.completedDate && (
                       <div>
                         <span className="text-sm text-green-700 font-medium">
-                          Tamamlanma Tarihi:{" "}
+                          Tamamlanma Tarihi:{' '}
                         </span>
                         <span className="text-sm text-green-800">
-                          {new Date(
-                            selectedResult.completedDate
-                          ).toLocaleDateString("tr-TR")}
+                          {new Date(selectedResult.completedDate).toLocaleDateString('tr-TR')}
                         </span>
                       </div>
                     )}
@@ -2311,22 +2017,20 @@ const Degree360Evaluation: React.FC = () => {
 
               {/* Detaylı Sonuçlar */}
               <div className="border rounded-lg p-3">
-                <h3 className="font-medium text-gray-900 mb-2 text-sm">
-                  Detaylı Sonuçlar
-                </h3>
+                <h3 className="font-medium text-gray-900 mb-2 text-sm">Detaylı Sonuçlar</h3>
 
                 {(() => {
                   // Seçili sonucu mockEvaluation360Results'tan bul
                   const evaluationResult = mockEvaluation360Results.find(
-                    (r) => r.id === selectedResult.resultId
-                  );
+                    (r) => r.id === selectedResult.resultId,
+                  )
                   if (!evaluationResult) {
                     return (
                       <div className="text-center py-8 text-gray-500">
                         <FaChartBar className="w-12 h-12 mx-auto mb-3 text-gray-300" />
                         <p>Sonuç verisi bulunamadı</p>
                       </div>
-                    );
+                    )
                   }
 
                   return (
@@ -2334,13 +2038,11 @@ const Degree360Evaluation: React.FC = () => {
                       {/* Soru Cevapları */}
                       {(() => {
                         const campaign = mockEvaluation360.find(
-                          (c) => c.id === selectedResult.campaignId
-                        );
+                          (c) => c.id === selectedResult.campaignId,
+                        )
                         const template = campaign
-                          ? mockEvaluation360Templates.find(
-                              (t) => t.id === campaign.templateId
-                            )
-                          : null;
+                          ? mockEvaluation360Templates.find((t) => t.id === campaign.templateId)
+                          : null
 
                         if (template) {
                           return (
@@ -2350,131 +2052,107 @@ const Degree360Evaluation: React.FC = () => {
                               </h4>
                               <div className="space-y-3">
                                 {template.questionGroups.map((group) => (
-                                  <div
-                                    key={group.id}
-                                    className="bg-gray-50 p-2.5 rounded-lg"
-                                  >
+                                  <div key={group.id} className="bg-gray-50 p-2.5 rounded-lg">
                                     <div className="mb-3">
                                       <h5 className="font-medium text-gray-800">
                                         {group.groupName}
                                       </h5>
-                                      <p className="text-sm text-gray-600">
-                                        {group.description}
-                                      </p>
+                                      <p className="text-sm text-gray-600">{group.description}</p>
                                     </div>
 
                                     <div className="space-y-2.5">
-                                      {group.questions.map(
-                                        (question, qIndex) => {
-                                          const response =
-                                            evaluationResult.participants
-                                              .flatMap((p) => p.responses)
-                                              .find(
-                                                (r) =>
-                                                  r.questionId === question.id
-                                              );
+                                      {group.questions.map((question, qIndex) => {
+                                        const response = evaluationResult.participants
+                                          .flatMap((p) => p.responses)
+                                          .find((r) => r.questionId === question.id)
 
-                                          if (!response) return null;
+                                        if (!response) return null
 
-                                          return (
-                                            <div
-                                              key={question.id}
-                                              className="bg-white p-1.5 rounded border-l-4 border-blue-200"
-                                            >
-                                              <div className="mb-2">
-                                                <span className="text-sm font-medium text-gray-800">
-                                                  S{qIndex + 1}:{" "}
-                                                  {question.questionText}
+                                        return (
+                                          <div
+                                            key={question.id}
+                                            className="bg-white p-1.5 rounded border-l-4 border-blue-200"
+                                          >
+                                            <div className="mb-2">
+                                              <span className="text-sm font-medium text-gray-800">
+                                                S{qIndex + 1}: {question.questionText}
+                                              </span>
+                                            </div>
+
+                                            <div className="flex items-center justify-between">
+                                              <div className="flex items-center gap-3">
+                                                <span className="text-sm text-gray-600">
+                                                  Cevap:
+                                                </span>
+                                                <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm font-medium">
+                                                  {(() => {
+                                                    if (
+                                                      question.questionType ===
+                                                      QuestionTypeEnum.Rating
+                                                    ) {
+                                                      const ratingIndex =
+                                                        Number(response.responseValue) -
+                                                        (question.minRating || 1)
+                                                      const label =
+                                                        question.ratingLabels?.[ratingIndex]
+                                                      return label
+                                                        ? `${response.responseValue} - ${label}`
+                                                        : response.responseValue
+                                                    } else if (
+                                                      question.questionType ===
+                                                      QuestionTypeEnum.YesNo
+                                                    ) {
+                                                      return response.responseValue === 'yes'
+                                                        ? 'Evet'
+                                                        : 'Hayır'
+                                                    } else if (
+                                                      question.questionType ===
+                                                      QuestionTypeEnum.MultipleChoice
+                                                    ) {
+                                                      const option = question.options?.find(
+                                                        (o) =>
+                                                          o.value ===
+                                                          Number(response.responseValue),
+                                                      )
+                                                      return option
+                                                        ? option.optionText
+                                                        : response.responseValue
+                                                    } else {
+                                                      return response.responseValue
+                                                    }
+                                                  })()}
                                                 </span>
                                               </div>
 
-                                              <div className="flex items-center justify-between">
-                                                <div className="flex items-center gap-3">
-                                                  <span className="text-sm text-gray-600">
-                                                    Cevap:
-                                                  </span>
-                                                  <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm font-medium">
-                                                    {(() => {
-                                                      if (
-                                                        question.questionType ===
-                                                        QuestionTypeEnum.Rating
-                                                      ) {
-                                                        const ratingIndex =
-                                                          Number(
-                                                            response.responseValue
-                                                          ) -
-                                                          (question.minRating ||
-                                                            1);
-                                                        const label =
-                                                          question
-                                                            .ratingLabels?.[
-                                                            ratingIndex
-                                                          ];
-                                                        return label
-                                                          ? `${response.responseValue} - ${label}`
-                                                          : response.responseValue;
-                                                      } else if (
-                                                        question.questionType ===
-                                                        QuestionTypeEnum.YesNo
-                                                      ) {
-                                                        return response.responseValue ===
-                                                          "yes"
-                                                          ? "Evet"
-                                                          : "Hayır";
-                                                      } else if (
-                                                        question.questionType ===
-                                                        QuestionTypeEnum.MultipleChoice
-                                                      ) {
-                                                        const option =
-                                                          question.options?.find(
-                                                            (o) =>
-                                                              o.value ===
-                                                              Number(
-                                                                response.responseValue
-                                                              )
-                                                          );
-                                                        return option
-                                                          ? option.optionText
-                                                          : response.responseValue;
-                                                      } else {
-                                                        return response.responseValue;
-                                                      }
-                                                    })()}
-                                                  </span>
-                                                </div>
-
-                                                <div className="flex items-center gap-2">
-                                                  <span className="text-xs text-gray-500">
-                                                    Puan:
-                                                  </span>
-                                                  <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm font-bold">
-                                                    {response.score}
-                                                  </span>
-                                                </div>
+                                              <div className="flex items-center gap-2">
+                                                <span className="text-xs text-gray-500">Puan:</span>
+                                                <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm font-bold">
+                                                  {response.score}
+                                                </span>
                                               </div>
-
-                                              {response.responseText && (
-                                                <div className="mt-2 p-2 bg-gray-100 rounded">
-                                                  <span className="text-xs text-gray-600">
-                                                    Detay:{" "}
-                                                  </span>
-                                                  <span className="text-sm text-gray-700">
-                                                    {response.responseText}
-                                                  </span>
-                                                </div>
-                                              )}
                                             </div>
-                                          );
-                                        }
-                                      )}
+
+                                            {response.responseText && (
+                                              <div className="mt-2 p-2 bg-gray-100 rounded">
+                                                <span className="text-xs text-gray-600">
+                                                  Detay:{' '}
+                                                </span>
+                                                <span className="text-sm text-gray-700">
+                                                  {response.responseText}
+                                                </span>
+                                              </div>
+                                            )}
+                                          </div>
+                                        )
+                                      })}
                                     </div>
                                   </div>
                                 ))}
                               </div>
                             </div>
-                          );
+                          )
                         }
-                        return null;
+                        return null
                       })()}
 
                       {/* Grup Bazlı Puanlar */}
@@ -2484,10 +2162,7 @@ const Degree360Evaluation: React.FC = () => {
                         </h4>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                           {evaluationResult.groupScores.map((groupScore) => (
-                            <div
-                              key={groupScore.groupId}
-                              className="bg-gray-50 p-2.5 rounded-lg"
-                            >
+                            <div key={groupScore.groupId} className="bg-gray-50 p-2.5 rounded-lg">
                               <div className="flex justify-between items-center mb-2">
                                 <h5 className="font-medium text-gray-700">
                                   {groupScore.groupName}
@@ -2503,9 +2178,7 @@ const Degree360Evaluation: React.FC = () => {
                                 ></div>
                               </div>
                               <div className="flex justify-between text-sm text-gray-600">
-                                <span>
-                                  %{Math.round(groupScore.percentage)}
-                                </span>
+                                <span>%{Math.round(groupScore.percentage)}</span>
                                 <span>{groupScore.responseCount} cevap</span>
                               </div>
                             </div>
@@ -2519,48 +2192,36 @@ const Degree360Evaluation: React.FC = () => {
                           👥 Değerlendirici Tipi Bazlı Puanlar
                         </h4>
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                          {evaluationResult.assessorTypeScores.map(
-                            (assessorScore, index) => (
-                              <div
-                                key={index}
-                                className="bg-blue-50 p-2.5 rounded-lg text-center"
-                              >
-                                <div className="text-sm text-blue-700 font-medium mb-1">
-                                  {getAssessorTypeText(
-                                    assessorScore.assessorType
-                                  )}
-                                </div>
-                                <div className="text-2xl font-bold text-blue-800 mb-1">
-                                  %{Math.round(assessorScore.percentage)}
-                                </div>
-                                <div className="text-xs text-blue-600">
-                                  {assessorScore.averageScore}/
-                                  {assessorScore.maxScore} puan
-                                </div>
-                                <div className="text-xs text-blue-500">
-                                  {assessorScore.assessorCount} değerlendirici
-                                </div>
+                          {evaluationResult.assessorTypeScores.map((assessorScore, index) => (
+                            <div key={index} className="bg-blue-50 p-2.5 rounded-lg text-center">
+                              <div className="text-sm text-blue-700 font-medium mb-1">
+                                {getAssessorTypeText(assessorScore.assessorType)}
                               </div>
-                            )
-                          )}
+                              <div className="text-2xl font-bold text-blue-800 mb-1">
+                                %{Math.round(assessorScore.percentage)}
+                              </div>
+                              <div className="text-xs text-blue-600">
+                                {assessorScore.averageScore}/{assessorScore.maxScore} puan
+                              </div>
+                              <div className="text-xs text-blue-500">
+                                {assessorScore.assessorCount} değerlendirici
+                              </div>
+                            </div>
+                          ))}
                         </div>
                       </div>
 
                       {/* Güçlü Yönler */}
                       <div>
-                        <h4 className="font-medium text-gray-800 mb-2 text-sm">
-                          💪 Güçlü Yönler
-                        </h4>
+                        <h4 className="font-medium text-gray-800 mb-2 text-sm">💪 Güçlü Yönler</h4>
                         <div className="bg-green-50 p-2.5 rounded-lg">
                           {evaluationResult.strengths.length > 0 ? (
                             <ul className="list-disc list-inside space-y-1">
-                              {evaluationResult.strengths.map(
-                                (strength, index) => (
-                                  <li key={index} className="text-green-800">
-                                    {strength}
-                                  </li>
-                                )
-                              )}
+                              {evaluationResult.strengths.map((strength, index) => (
+                                <li key={index} className="text-green-800">
+                                  {strength}
+                                </li>
+                              ))}
                             </ul>
                           ) : (
                             <p className="text-green-700 italic">
@@ -2578,13 +2239,11 @@ const Degree360Evaluation: React.FC = () => {
                         <div className="bg-amber-50 p-2.5 rounded-lg">
                           {evaluationResult.developmentAreas.length > 0 ? (
                             <ul className="list-disc list-inside space-y-1">
-                              {evaluationResult.developmentAreas.map(
-                                (area, index) => (
-                                  <li key={index} className="text-amber-800">
-                                    {area}
-                                  </li>
-                                )
-                              )}
+                              {evaluationResult.developmentAreas.map((area, index) => (
+                                <li key={index} className="text-amber-800">
+                                  {area}
+                                </li>
+                              ))}
                             </ul>
                           ) : (
                             <p className="text-amber-700 italic">
@@ -2596,19 +2255,15 @@ const Degree360Evaluation: React.FC = () => {
 
                       {/* Aksiyon Planı */}
                       <div>
-                        <h4 className="font-medium text-gray-800 mb-2 text-sm">
-                          🎯 Aksiyon Planı
-                        </h4>
+                        <h4 className="font-medium text-gray-800 mb-2 text-sm">🎯 Aksiyon Planı</h4>
                         <div className="bg-purple-50 p-2.5 rounded-lg">
                           {evaluationResult.actionPlan.length > 0 ? (
                             <ul className="list-decimal list-inside space-y-1">
-                              {evaluationResult.actionPlan.map(
-                                (action, index) => (
-                                  <li key={index} className="text-purple-800">
-                                    {action}
-                                  </li>
-                                )
-                              )}
+                              {evaluationResult.actionPlan.map((action, index) => (
+                                <li key={index} className="text-purple-800">
+                                  {action}
+                                </li>
+                              ))}
                             </ul>
                           ) : (
                             <p className="text-purple-700 italic">
@@ -2619,38 +2274,27 @@ const Degree360Evaluation: React.FC = () => {
                       </div>
 
                       {/* Yorumlar */}
-                      {(evaluationResult.managerComments ||
-                        evaluationResult.hrComments) && (
+                      {(evaluationResult.managerComments || evaluationResult.hrComments) && (
                         <div>
-                          <h4 className="font-medium text-gray-800 mb-2 text-sm">
-                            💬 Yorumlar
-                          </h4>
+                          <h4 className="font-medium text-gray-800 mb-2 text-sm">💬 Yorumlar</h4>
                           <div className="space-y-2">
                             {evaluationResult.managerComments && (
                               <div className="bg-blue-50 p-2.5 rounded-lg">
-                                <h5 className="font-medium text-blue-800 mb-2">
-                                  Yönetici Yorumu
-                                </h5>
-                                <p className="text-blue-700">
-                                  {evaluationResult.managerComments}
-                                </p>
+                                <h5 className="font-medium text-blue-800 mb-2">Yönetici Yorumu</h5>
+                                <p className="text-blue-700">{evaluationResult.managerComments}</p>
                               </div>
                             )}
                             {evaluationResult.hrComments && (
                               <div className="bg-indigo-50 p-2.5 rounded-lg">
-                                <h5 className="font-medium text-indigo-800 mb-2">
-                                  İK Yorumu
-                                </h5>
-                                <p className="text-indigo-700">
-                                  {evaluationResult.hrComments}
-                                </p>
+                                <h5 className="font-medium text-indigo-800 mb-2">İK Yorumu</h5>
+                                <p className="text-indigo-700">{evaluationResult.hrComments}</p>
                               </div>
                             )}
                           </div>
                         </div>
                       )}
                     </div>
-                  );
+                  )
                 })()}
               </div>
             </div>
@@ -2663,8 +2307,8 @@ const Degree360Evaluation: React.FC = () => {
               </button>
               <button
                 onClick={() => {
-                  handleCloseModal();
-                  handleEditEvaluationDetail(selectedResult);
+                  handleCloseModal()
+                  handleEditEvaluationDetail(selectedResult)
                 }}
                 className="flex items-center gap-2 px-2.5 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
               >
@@ -2691,38 +2335,24 @@ const Degree360Evaluation: React.FC = () => {
             </div>
             <div className="p-3 space-y-2.5">
               <div className="bg-amber-50 p-2.5 rounded-lg">
-                <h3 className="font-medium text-amber-800 mb-2 text-sm">
-                  Değerlendirme Bilgileri
-                </h3>
+                <h3 className="font-medium text-amber-800 mb-2 text-sm">Değerlendirme Bilgileri</h3>
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <span className="text-sm text-amber-700 font-medium">
-                      Kampanya:{" "}
-                    </span>
-                    <span className="text-sm text-amber-800">
-                      {selectedResult.campaignName}
-                    </span>
+                    <span className="text-sm text-amber-700 font-medium">Kampanya: </span>
+                    <span className="text-sm text-amber-800">{selectedResult.campaignName}</span>
                   </div>
                   <div>
-                    <span className="text-sm text-amber-700 font-medium">
-                      Değerlendirilen:{" "}
-                    </span>
+                    <span className="text-sm text-amber-700 font-medium">Değerlendirilen: </span>
                     <span className="text-sm text-amber-800">
                       {selectedResult.evaluatedEmployeeName}
                     </span>
                   </div>
                   <div>
-                    <span className="text-sm text-amber-700 font-medium">
-                      Değerlendiren:{" "}
-                    </span>
-                    <span className="text-sm text-amber-800">
-                      {selectedResult.evaluatorName}
-                    </span>
+                    <span className="text-sm text-amber-700 font-medium">Değerlendiren: </span>
+                    <span className="text-sm text-amber-800">{selectedResult.evaluatorName}</span>
                   </div>
                   <div>
-                    <span className="text-sm text-amber-700 font-medium">
-                      Değerlendiren Tipi:{" "}
-                    </span>
+                    <span className="text-sm text-amber-700 font-medium">Değerlendiren Tipi: </span>
                     <span className="text-sm text-amber-800">
                       {getAssessorTypeText(selectedResult.evaluatorType)}
                     </span>
@@ -2733,44 +2363,32 @@ const Degree360Evaluation: React.FC = () => {
               {/* Soru Grupları ve Cevaplar */}
               {(() => {
                 const evaluationResult = mockEvaluation360Results.find(
-                  (r) => r.id === selectedResult.resultId
-                );
-                const campaign = mockEvaluation360.find(
-                  (c) => c.id === selectedResult.campaignId
-                );
+                  (r) => r.id === selectedResult.resultId,
+                )
+                const campaign = mockEvaluation360.find((c) => c.id === selectedResult.campaignId)
                 const template = campaign
-                  ? mockEvaluation360Templates.find(
-                      (t) => t.id === campaign.templateId
-                    )
-                  : null;
+                  ? mockEvaluation360Templates.find((t) => t.id === campaign.templateId)
+                  : null
 
                 if (!evaluationResult || !template) {
                   return (
                     <div className="text-center py-8 text-gray-500">
                       <p>Template verisi bulunamadı</p>
                     </div>
-                  );
+                  )
                 }
 
                 return (
                   <div className="space-y-3">
-                    <h3 className="text-sm font-medium text-gray-900">
-                      Soru Grupları ve Cevaplar
-                    </h3>
+                    <h3 className="text-sm font-medium text-gray-900">Soru Grupları ve Cevaplar</h3>
 
                     {template.questionGroups.map((group) => (
                       <div key={group.id} className="border rounded-lg p-2">
                         <div className="mb-3">
-                          <h4 className="font-medium text-gray-900 text-sm">
-                            {group.groupName}
-                          </h4>
-                          <p className="text-sm text-gray-600">
-                            {group.description}
-                          </p>
+                          <h4 className="font-medium text-gray-900 text-sm">{group.groupName}</h4>
+                          <p className="text-sm text-gray-600">{group.description}</p>
                           <div className="flex items-center gap-2 mt-2">
-                            <span className="text-xs text-gray-500">
-                              Ağırlık: %{group.weight}
-                            </span>
+                            <span className="text-xs text-gray-500">Ağırlık: %{group.weight}</span>
                             <span className="text-xs text-gray-500">•</span>
                             <span className="text-xs text-gray-500">
                               {group.questions.length} soru
@@ -2780,21 +2398,17 @@ const Degree360Evaluation: React.FC = () => {
 
                         <div className="space-y-2.5">
                           {group.questions.map((question, qIndex) => {
-                            const currentResponse =
-                              evaluationResult.participants
-                                .flatMap((p) => p.responses)
-                                .find((r) => r.questionId === question.id);
+                            const currentResponse = evaluationResult.participants
+                              .flatMap((p) => p.responses)
+                              .find((r) => r.questionId === question.id)
 
                             const editValue =
                               editResponses[question.id] !== undefined
                                 ? editResponses[question.id]
-                                : currentResponse?.responseValue;
+                                : currentResponse?.responseValue
 
                             return (
-                              <div
-                                key={question.id}
-                                className="bg-gray-50 p-2.5 rounded-lg"
-                              >
+                              <div key={question.id} className="bg-gray-50 p-2.5 rounded-lg">
                                 <p className="font-medium text-gray-800 mb-3">
                                   {qIndex + 1}. {question.questionText}
                                   {question.isRequired && (
@@ -2805,11 +2419,10 @@ const Degree360Evaluation: React.FC = () => {
                                 {currentResponse && (
                                   <div className="mb-2 p-1.5 bg-blue-50 rounded">
                                     <span className="text-xs text-blue-700 font-medium">
-                                      Mevcut Cevap:{" "}
+                                      Mevcut Cevap:{' '}
                                     </span>
                                     <span className="text-xs text-blue-800">
-                                      {typeof currentResponse.responseValue ===
-                                      "string"
+                                      {typeof currentResponse.responseValue === 'string'
                                         ? currentResponse.responseValue
                                         : `${currentResponse.responseValue} puan`}
                                     </span>
@@ -2820,8 +2433,7 @@ const Degree360Evaluation: React.FC = () => {
                                 )}
 
                                 {/* Soru tipine göre düzenleme alanları */}
-                                {question.questionType ===
-                                  QuestionTypeEnum.Rating && (
+                                {question.questionType === QuestionTypeEnum.Rating && (
                                   <div className="space-y-2">
                                     <label className="text-sm text-gray-700 font-medium">
                                       Yeni Puan:
@@ -2835,8 +2447,7 @@ const Degree360Evaluation: React.FC = () => {
                                             1,
                                         },
                                         (_, i) => {
-                                          const value =
-                                            (question.minRating || 1) + i;
+                                          const value = (question.minRating || 1) + i
                                           return (
                                             <label
                                               key={value}
@@ -2850,25 +2461,23 @@ const Degree360Evaluation: React.FC = () => {
                                                 onChange={(e) =>
                                                   handleEditResponseChange(
                                                     question.id,
-                                                    Number(e.target.value)
+                                                    Number(e.target.value),
                                                   )
                                                 }
                                                 className="mb-1"
                                               />
                                               <span className="text-xs text-gray-600">
-                                                {question.ratingLabels?.[i] ||
-                                                  value}
+                                                {question.ratingLabels?.[i] || value}
                                               </span>
                                             </label>
-                                          );
-                                        }
+                                          )
+                                        },
                                       )}
                                     </div>
                                   </div>
                                 )}
 
-                                {question.questionType ===
-                                  QuestionTypeEnum.Text && (
+                                {question.questionType === QuestionTypeEnum.Text && (
                                   <div>
                                     <label className="block text-sm text-gray-700 font-medium mb-2">
                                       Yeni Cevap:
@@ -2877,19 +2486,15 @@ const Degree360Evaluation: React.FC = () => {
                                       className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                                       rows={3}
                                       placeholder="Yeni cevabı yazın..."
-                                      value={editValue || ""}
+                                      value={editValue || ''}
                                       onChange={(e) =>
-                                        handleEditResponseChange(
-                                          question.id,
-                                          e.target.value
-                                        )
+                                        handleEditResponseChange(question.id, e.target.value)
                                       }
                                     />
                                   </div>
                                 )}
 
-                                {question.questionType ===
-                                  QuestionTypeEnum.YesNo && (
+                                {question.questionType === QuestionTypeEnum.YesNo && (
                                   <div>
                                     <label className="block text-sm text-gray-700 font-medium mb-2">
                                       Yeni Cevap:
@@ -2900,12 +2505,9 @@ const Degree360Evaluation: React.FC = () => {
                                           type="radio"
                                           name={`edit-question-${question.id}`}
                                           value="yes"
-                                          checked={editValue === "yes"}
+                                          checked={editValue === 'yes'}
                                           onChange={(e) =>
-                                            handleEditResponseChange(
-                                              question.id,
-                                              e.target.value
-                                            )
+                                            handleEditResponseChange(question.id, e.target.value)
                                           }
                                           className="mr-2"
                                         />
@@ -2916,12 +2518,9 @@ const Degree360Evaluation: React.FC = () => {
                                           type="radio"
                                           name={`edit-question-${question.id}`}
                                           value="no"
-                                          checked={editValue === "no"}
+                                          checked={editValue === 'no'}
                                           onChange={(e) =>
-                                            handleEditResponseChange(
-                                              question.id,
-                                              e.target.value
-                                            )
+                                            handleEditResponseChange(question.id, e.target.value)
                                           }
                                           className="mr-2"
                                         />
@@ -2931,8 +2530,7 @@ const Degree360Evaluation: React.FC = () => {
                                   </div>
                                 )}
 
-                                {question.questionType ===
-                                  QuestionTypeEnum.MultipleChoice && (
+                                {question.questionType === QuestionTypeEnum.MultipleChoice && (
                                   <div>
                                     <label className="block text-sm text-gray-700 font-medium mb-2">
                                       Yeni Seçim:
@@ -2951,7 +2549,7 @@ const Degree360Evaluation: React.FC = () => {
                                             onChange={(e) =>
                                               handleEditResponseChange(
                                                 question.id,
-                                                Number(e.target.value)
+                                                Number(e.target.value),
                                               )
                                             }
                                             className="mr-2"
@@ -2963,13 +2561,13 @@ const Degree360Evaluation: React.FC = () => {
                                   </div>
                                 )}
                               </div>
-                            );
+                            )
                           })}
                         </div>
                       </div>
                     ))}
                   </div>
-                );
+                )
               })()}
 
               {/* Yorumlar ve Durum */}
@@ -3002,9 +2600,7 @@ const Degree360Evaluation: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Sonuç Durumu
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Sonuç Durumu</label>
                 <select
                   className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                   value={editResultStatus}
@@ -3019,9 +2615,7 @@ const Degree360Evaluation: React.FC = () => {
 
               {/* Mevcut Puan Bilgileri */}
               <div className="border rounded-lg p-3">
-                <h4 className="font-medium text-gray-900 mb-2 text-sm">
-                  Mevcut Puan Bilgileri
-                </h4>
+                <h4 className="font-medium text-gray-900 mb-2 text-sm">Mevcut Puan Bilgileri</h4>
                 <div className="grid grid-cols-2 gap-3">
                   <div className="text-center p-4 bg-blue-50 rounded-lg">
                     <div className="text-2xl font-bold text-blue-600">
@@ -3047,12 +2641,12 @@ const Degree360Evaluation: React.FC = () => {
               </button>
               <button
                 onClick={() => {
-                  console.log("Güncellenen cevaplar:", editResponses);
-                  console.log("Yönetici yorumları:", editManagerComments);
-                  console.log("İK yorumları:", editHrComments);
-                  console.log("Durum:", editResultStatus);
-                  alert("Değerlendirme güncellendi!");
-                  handleCloseModal();
+                  console.log('Güncellenen cevaplar:', editResponses)
+                  console.log('Yönetici yorumları:', editManagerComments)
+                  console.log('İK yorumları:', editHrComments)
+                  console.log('Durum:', editResultStatus)
+                  alert('Değerlendirme güncellendi!')
+                  handleCloseModal()
                 }}
                 className="flex items-center gap-2 px-2.5 py-1 text-sm bg-green-600 text-white rounded-md hover:bg-green-700"
               >
@@ -3063,8 +2657,8 @@ const Degree360Evaluation: React.FC = () => {
           </div>
         </div>
       )}
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default Degree360Evaluation;
+export default Degree360Evaluation
diff --git a/ui/src/views/hr/components/Degree360Templates.tsx b/ui/src/views/hr/components/Degree360Templates.tsx
index 1c9230e8..9789a8cd 100644
--- a/ui/src/views/hr/components/Degree360Templates.tsx
+++ b/ui/src/views/hr/components/Degree360Templates.tsx
@@ -1,13 +1,5 @@
-import React, { useState } from "react";
-import {
-  FaEye,
-  FaEdit,
-  FaPlus,
-  FaTimes,
-  FaSave,
-  FaTrash,
-  FaQuestionCircle,
-} from "react-icons/fa";
+import React, { useState } from 'react'
+import { FaEye, FaEdit, FaPlus, FaTimes, FaSave, FaTrash, FaQuestionCircle } from 'react-icons/fa'
 import {
   HrEvaluation360Template,
   HrQuestionGroup,
@@ -15,77 +7,73 @@ import {
   QuestionTypeEnum,
   HrQuestionOption,
   AssessorTypeEnum,
-} from "../../../types/hr";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockEvaluation360Templates } from "../../../mocks/mockEvaluation360Templates";
-import Widget from "../../../components/common/Widget";
+} from '../../../types/hr'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockEvaluation360Templates } from '../../../mocks/mockEvaluation360Templates'
+import Widget from '../../../components/common/Widget'
+import { Container } from '@/components/shared'
 
 const Degree360Templates: React.FC = () => {
-  const [templateSearchTerm, setTemplateSearchTerm] = useState("");
+  const [templateSearchTerm, setTemplateSearchTerm] = useState('')
 
   // Modal states
-  const [showTemplateModal, setShowTemplateModal] = useState(false);
-  const [showQuestionModal, setShowQuestionModal] = useState(false);
-  const [showQuestionItemModal, setShowQuestionItemModal] = useState(false);
-  const [selectedTemplate, setSelectedTemplate] =
-    useState<HrEvaluation360Template | null>(null);
-  const [selectedQuestionGroup, setSelectedQuestionGroup] =
-    useState<HrQuestionGroup | null>(null);
-  const [selectedQuestion, setSelectedQuestion] =
-    useState<HrEvaluationQuestion | null>(null);
-  const [isEditMode, setIsEditMode] = useState(false);
+  const [showTemplateModal, setShowTemplateModal] = useState(false)
+  const [showQuestionModal, setShowQuestionModal] = useState(false)
+  const [showQuestionItemModal, setShowQuestionItemModal] = useState(false)
+  const [selectedTemplate, setSelectedTemplate] = useState<HrEvaluation360Template | null>(null)
+  const [selectedQuestionGroup, setSelectedQuestionGroup] = useState<HrQuestionGroup | null>(null)
+  const [selectedQuestion, setSelectedQuestion] = useState<HrEvaluationQuestion | null>(null)
+  const [isEditMode, setIsEditMode] = useState(false)
 
   // Form states
   const [templateForm, setTemplateForm] = useState({
-    name: "",
-    description: "",
+    name: '',
+    description: '',
     isActive: true,
     assessorTypes: [] as AssessorTypeEnum[],
-  });
+  })
 
   const [questionGroupForm, setQuestionGroupForm] = useState({
-    groupName: "",
-    description: "",
+    groupName: '',
+    description: '',
     weight: 0,
     order: 0,
-  });
+  })
 
   const [questionForm, setQuestionForm] = useState({
-    questionText: "",
+    questionText: '',
     questionType: QuestionTypeEnum.Rating,
     isRequired: true,
     order: 0,
     weight: 0,
     options: [] as HrQuestionOption[],
-  });
+  })
 
   // Filter templates
   const filteredTemplates = mockEvaluation360Templates.filter((template) => {
-    const searchLower = templateSearchTerm.toLowerCase();
+    const searchLower = templateSearchTerm.toLowerCase()
     return (
       template.name.toLowerCase().includes(searchLower) ||
       template.description.toLowerCase().includes(searchLower)
-    );
-  });
+    )
+  })
 
   // Statistics
-  const totalTemplates = mockEvaluation360Templates.length;
-  const activeTemplates = mockEvaluation360Templates.filter(
-    (t) => t.isActive
-  ).length;
+  const totalTemplates = mockEvaluation360Templates.length
+  const activeTemplates = mockEvaluation360Templates.filter((t) => t.isActive).length
 
   // Event handlers
   const handleNewTemplate = () => {
     setTemplateForm({
-      name: "",
-      description: "",
+      name: '',
+      description: '',
       isActive: true,
       assessorTypes: [],
-    });
-    setSelectedTemplate(null);
-    setIsEditMode(false);
-    setShowTemplateModal(true);
-  };
+    })
+    setSelectedTemplate(null)
+    setIsEditMode(false)
+    setShowTemplateModal(true)
+  }
 
   const handleEditTemplate = (template: HrEvaluation360Template) => {
     setTemplateForm({
@@ -93,11 +81,11 @@ const Degree360Templates: React.FC = () => {
       description: template.description,
       isActive: template.isActive,
       assessorTypes: template.assessorTypes || [],
-    });
-    setSelectedTemplate(template);
-    setIsEditMode(true);
-    setShowTemplateModal(true);
-  };
+    })
+    setSelectedTemplate(template)
+    setIsEditMode(true)
+    setShowTemplateModal(true)
+  }
 
   const handleViewTemplate = (template: HrEvaluation360Template) => {
     setTemplateForm({
@@ -105,72 +93,65 @@ const Degree360Templates: React.FC = () => {
       description: template.description,
       isActive: template.isActive,
       assessorTypes: template.assessorTypes || [],
-    });
-    setSelectedTemplate(template);
-    setShowTemplateModal(true);
-    setIsEditMode(false);
-  };
+    })
+    setSelectedTemplate(template)
+    setShowTemplateModal(true)
+    setIsEditMode(false)
+  }
 
   const handleSaveTemplate = () => {
-    console.log("Saving template:", templateForm);
-    setShowTemplateModal(false);
-  };
+    console.log('Saving template:', templateForm)
+    setShowTemplateModal(false)
+  }
 
   const handleDeleteTemplate = (template: HrEvaluation360Template) => {
-    if (
-      confirm(
-        `"${template.name}" şablonunu silmek istediğinizden emin misiniz?`
-      )
-    ) {
-      console.log("Deleting template:", template.id);
+    if (confirm(`"${template.name}" şablonunu silmek istediğinizden emin misiniz?`)) {
+      console.log('Deleting template:', template.id)
     }
-  };
+  }
 
   const handleAddQuestionGroup = () => {
     setQuestionGroupForm({
-      groupName: "",
-      description: "",
+      groupName: '',
+      description: '',
       weight: 0,
       order: 0,
-    });
-    setSelectedQuestionGroup(null);
-    setShowQuestionModal(true);
-  };
+    })
+    setSelectedQuestionGroup(null)
+    setShowQuestionModal(true)
+  }
 
   const handleEditQuestionGroup = (group: HrQuestionGroup) => {
     setQuestionGroupForm({
       groupName: group.groupName,
-      description: group.description || "",
+      description: group.description || '',
       weight: group.weight,
       order: group.order,
-    });
-    setSelectedQuestionGroup(group);
-    setShowQuestionModal(true);
-  };
+    })
+    setSelectedQuestionGroup(group)
+    setShowQuestionModal(true)
+  }
 
   const handleSaveQuestionGroup = () => {
-    console.log("Saving question group:", questionGroupForm);
-    setShowQuestionModal(false);
-  };
+    console.log('Saving question group:', questionGroupForm)
+    setShowQuestionModal(false)
+  }
 
   const handleAddQuestion = (group: HrQuestionGroup) => {
     setQuestionForm({
-      questionText: "",
+      questionText: '',
       questionType: QuestionTypeEnum.Rating,
       isRequired: true,
       order: 0,
       weight: 0,
       options: [],
-    });
-    setSelectedQuestion(null);
-    setSelectedQuestionGroup(group);
-    setShowQuestionItemModal(true);
-  };
+    })
+    setSelectedQuestion(null)
+    setSelectedQuestionGroup(group)
+    setShowQuestionItemModal(true)
+  }
 
-  const handleEditQuestion = (
-    question: HrEvaluationQuestion,
-    group: HrQuestionGroup
-  ) => {
+  const handleEditQuestion = (question: HrEvaluationQuestion, group: HrQuestionGroup) => {
     setQuestionForm({
       questionText: question.questionText,
       questionType: question.questionType,
@@ -178,22 +159,22 @@ const Degree360Templates: React.FC = () => {
       order: question.order,
       weight: question.weight,
       options: question.options || [],
-    });
-    setSelectedQuestion(question);
-    setSelectedQuestionGroup(group);
-    setShowQuestionItemModal(true);
-  };
+    })
+    setSelectedQuestion(question)
+    setSelectedQuestionGroup(group)
+    setShowQuestionItemModal(true)
+  }
 
   const handleSaveQuestion = () => {
-    console.log("Saving question:", questionForm);
-    setShowQuestionItemModal(false);
-  };
+    console.log('Saving question:', questionForm)
+    setShowQuestionItemModal(false)
+  }
 
   // Table columns
   const templateColumns: Column<HrEvaluation360Template>[] = [
     {
-      key: "name",
-      header: "Şablon Adı",
+      key: 'name',
+      header: 'Şablon Adı',
       sortable: true,
       render: (template) => (
         <div>
@@ -203,30 +184,28 @@ const Degree360Templates: React.FC = () => {
       ),
     },
     {
-      key: "questionGroups",
-      header: "Soru Grupları",
+      key: 'questionGroups',
+      header: 'Soru Grupları',
       render: (template) => (
-        <span className="text-sm text-gray-600">
-          {template.questionGroups?.length || 0} grup
-        </span>
+        <span className="text-sm text-gray-600">{template.questionGroups?.length || 0} grup</span>
       ),
     },
     {
-      key: "assessorTypes",
-      header: "Değerlendirecekler",
+      key: 'assessorTypes',
+      header: 'Değerlendirecekler',
       render: (template) => {
         const assessorLabels = {
-          [AssessorTypeEnum.Self]: "Kendi",
-          [AssessorTypeEnum.Manager]: "Yönetici",
-          [AssessorTypeEnum.Peer]: "Meslektaş",
-          [AssessorTypeEnum.Subordinate]: "Ast",
-          [AssessorTypeEnum.Customer]: "Müşteri",
-          [AssessorTypeEnum.OtherDepartment]: "Diğer Departman",
-          [AssessorTypeEnum.HRUpperManagement]: "İK/Üst Yönetim",
-          [AssessorTypeEnum.External]: "Dış Paydaş",
-        };
+          [AssessorTypeEnum.Self]: 'Kendi',
+          [AssessorTypeEnum.Manager]: 'Yönetici',
+          [AssessorTypeEnum.Peer]: 'Meslektaş',
+          [AssessorTypeEnum.Subordinate]: 'Ast',
+          [AssessorTypeEnum.Customer]: 'Müşteri',
+          [AssessorTypeEnum.OtherDepartment]: 'Diğer Departman',
+          [AssessorTypeEnum.HRUpperManagement]: 'İK/Üst Yönetim',
+          [AssessorTypeEnum.External]: 'Dış Paydaş',
+        }
 
-        const assessorTypes = template.assessorTypes || [];
+        const assessorTypes = template.assessorTypes || []
         return (
           <div className="flex flex-wrap gap-1">
             {assessorTypes.map((type) => (
@@ -241,27 +220,25 @@ const Degree360Templates: React.FC = () => {
               <span className="text-sm text-gray-400">Belirtilmemiş</span>
             )}
           </div>
-        );
+        )
       },
     },
     {
-      key: "isActive",
-      header: "Durum",
+      key: 'isActive',
+      header: 'Durum',
       render: (template) => (
         <span
           className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-            template.isActive
-              ? "bg-green-100 text-green-800"
-              : "bg-red-100 text-red-800"
+            template.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
           }`}
         >
-          {template.isActive ? "Aktif" : "Pasif"}
+          {template.isActive ? 'Aktif' : 'Pasif'}
         </span>
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (template) => (
         <div className="flex items-center gap-2">
           <button
@@ -288,66 +265,66 @@ const Degree360Templates: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   return (
-    <div className="space-y-4 mt-2">
-      {/* Header */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">360° Şablonlar</h2>
-          <p className="text-sm text-gray-600 mt-1">
-            360 derece değerlendirme şablonlarını yönetin
-          </p>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">360° Şablonlar</h2>
+            <p className="text-gray-600 mt-1">360 derece değerlendirme şablonlarını yönetin</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>
 
-        <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>
+        {/* Statistics */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Widget
+            title="Toplam Şablon"
+            value={totalTemplates}
+            color="purple"
+            icon="FaClipboardList"
+          />
 
-      {/* Statistics */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <Widget
-          title="Toplam Şablon"
-          value={totalTemplates}
-          color="purple"
-          icon="FaClipboardList"
-        />
+          <Widget
+            title="Aktif Şablon"
+            value={activeTemplates}
+            color="green"
+            icon="FaClipboardList"
+          />
 
-        <Widget
-          title="Aktif Şablon"
-          value={activeTemplates}
-          color="green"
-          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"
+          <Widget
+            title="Pasif Şablon"
+            value={totalTemplates - activeTemplates}
+            color="red"
+            icon="FaClipboardList"
           />
         </div>
-      </div>
 
-      {/* Templates Table */}
-      <DataTable data={filteredTemplates} columns={templateColumns} />
+        <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>
+
+        {/* Templates Table */}
+        <DataTable data={filteredTemplates} columns={templateColumns} />
+      </div>
 
       {/* Template Modal */}
       {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="flex justify-between items-center mb-4">
               <h2 className="text-lg font-bold">
-                {isEditMode
-                  ? "Şablon Düzenle"
-                  : selectedTemplate
-                  ? "Şablon Detayı"
-                  : "Yeni Şablon"}
+                {isEditMode ? 'Şablon Düzenle' : selectedTemplate ? 'Şablon Detayı' : 'Yeni Şablon'}
               </h2>
               <button
                 onClick={() => setShowTemplateModal(false)}
@@ -373,29 +346,23 @@ const Degree360Templates: React.FC = () => {
               {/* Basic Information */}
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Şablon Adı
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Şablon Adı</label>
                   <input
                     type="text"
                     value={templateForm.name}
-                    onChange={(e) =>
-                      setTemplateForm({ ...templateForm, name: e.target.value })
-                    }
+                    onChange={(e) => 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"
                     disabled={!isEditMode && !!selectedTemplate}
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Durum
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Durum</label>
                   <select
-                    value={templateForm.isActive ? "active" : "inactive"}
+                    value={templateForm.isActive ? 'active' : 'inactive'}
                     onChange={(e) =>
                       setTemplateForm({
                         ...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"
@@ -408,9 +375,7 @@ const Degree360Templates: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Açıklama
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
                 <textarea
                   value={templateForm.description}
                   onChange={(e) =>
@@ -433,15 +398,15 @@ const Degree360Templates: React.FC = () => {
                 <div className="grid grid-cols-2 gap-3">
                   {Object.values(AssessorTypeEnum).map((type) => {
                     const labels = {
-                      [AssessorTypeEnum.Self]: "Kendi",
-                      [AssessorTypeEnum.Manager]: "Yönetici",
-                      [AssessorTypeEnum.Peer]: "Meslektaş",
-                      [AssessorTypeEnum.Subordinate]: "Ast",
-                      [AssessorTypeEnum.Customer]: "Müşteri",
-                      [AssessorTypeEnum.OtherDepartment]: "Diğer Departman",
-                      [AssessorTypeEnum.HRUpperManagement]: "İK/Üst Yönetim",
-                      [AssessorTypeEnum.External]: "Dış Paydaş",
-                    };
+                      [AssessorTypeEnum.Self]: 'Kendi',
+                      [AssessorTypeEnum.Manager]: 'Yönetici',
+                      [AssessorTypeEnum.Peer]: 'Meslektaş',
+                      [AssessorTypeEnum.Subordinate]: 'Ast',
+                      [AssessorTypeEnum.Customer]: 'Müşteri',
+                      [AssessorTypeEnum.OtherDepartment]: 'Diğer Departman',
+                      [AssessorTypeEnum.HRUpperManagement]: 'İK/Üst Yönetim',
+                      [AssessorTypeEnum.External]: 'Dış Paydaş',
+                    }
 
                     return (
                       <label key={type} className="flex items-center space-x-2">
@@ -452,29 +417,21 @@ const Degree360Templates: React.FC = () => {
                             if (e.target.checked) {
                               setTemplateForm({
                                 ...templateForm,
-                                assessorTypes: [
-                                  ...templateForm.assessorTypes,
-                                  type,
-                                ],
-                              });
+                                assessorTypes: [...templateForm.assessorTypes, type],
+                              })
                             } else {
                               setTemplateForm({
                                 ...templateForm,
-                                assessorTypes:
-                                  templateForm.assessorTypes.filter(
-                                    (t) => t !== type
-                                  ),
-                              });
+                                assessorTypes: templateForm.assessorTypes.filter((t) => t !== type),
+                              })
                             }
                           }}
                           className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                           disabled={!isEditMode && !!selectedTemplate}
                         />
-                        <span className="text-sm text-gray-700">
-                          {labels[type] || type}
-                        </span>
+                        <span className="text-sm text-gray-700">{labels[type] || type}</span>
                       </label>
-                    );
+                    )
                   })}
                 </div>
               </div>
@@ -496,93 +453,72 @@ const Degree360Templates: React.FC = () => {
                   </div>
 
                   <div className="space-y-3">
-                    {selectedTemplate.questionGroups?.map(
-                      (group, groupIndex) => (
-                        <div
-                          key={groupIndex}
-                          className="bg-gray-50 p-3 rounded-lg"
-                        >
-                          <div className="flex justify-between items-start mb-3">
-                            <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>
-                            )}
+                    {selectedTemplate.questionGroups?.map((group, groupIndex) => (
+                      <div key={groupIndex} className="bg-gray-50 p-3 rounded-lg">
+                        <div className="flex justify-between items-start mb-3">
+                          <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>
-
-                          {/* Questions */}
-                          <div className="space-y-2">
-                            {group.questions?.map((question, questionIndex) => (
-                              <div
-                                key={questionIndex}
-                                className="bg-white p-2 rounded border"
+                          {isEditMode && (
+                            <div className="flex gap-2">
+                              <button
+                                onClick={() => handleEditQuestionGroup(group)}
+                                className="text-blue-600 hover:text-blue-900"
                               >
-                                <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>
+                                <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>
-                      )
-                    )}
+
+                        {/* 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>
               )}
@@ -593,7 +529,7 @@ const Degree360Templates: React.FC = () => {
                 onClick={() => setShowTemplateModal(false)}
                 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>
               {(isEditMode || !selectedTemplate) && (
                 <button
@@ -615,9 +551,7 @@ const Degree360Templates: React.FC = () => {
           <div className="bg-white rounded-lg p-6 w-full max-w-md">
             <div className="flex justify-between items-center mb-4">
               <h2 className="text-lg font-bold">
-                {selectedQuestionGroup
-                  ? "Soru Grubu Düzenle"
-                  : "Yeni Soru Grubu"}
+                {selectedQuestionGroup ? 'Soru Grubu Düzenle' : 'Yeni Soru Grubu'}
               </h2>
               <button
                 onClick={() => setShowQuestionModal(false)}
@@ -629,9 +563,7 @@ const Degree360Templates: React.FC = () => {
 
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Grup Adı
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Grup Adı</label>
                 <input
                   type="text"
                   value={questionGroupForm.groupName}
@@ -646,9 +578,7 @@ const Degree360Templates: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Açıklama
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
                 <textarea
                   value={questionGroupForm.description}
                   onChange={(e) =>
@@ -682,9 +612,7 @@ const Degree360Templates: React.FC = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Sıra
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Sıra</label>
                   <input
                     type="number"
                     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="flex justify-between items-center mb-4">
               <h2 className="text-lg font-bold">
-                {selectedQuestion ? "Soru Düzenle" : "Yeni Soru"}
+                {selectedQuestion ? 'Soru Düzenle' : 'Yeni Soru'}
               </h2>
               <button
                 onClick={() => setShowQuestionItemModal(false)}
@@ -738,9 +666,7 @@ const Degree360Templates: React.FC = () => {
 
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Soru Metni
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Soru Metni</label>
                 <textarea
                   value={questionForm.questionText}
                   onChange={(e) =>
@@ -755,9 +681,7 @@ const Degree360Templates: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Soru Tipi
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Soru Tipi</label>
                 <select
                   value={questionForm.questionType}
                   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"
                 >
                   <option value={QuestionTypeEnum.Rating}>Puanlama</option>
-                  <option value={QuestionTypeEnum.MultipleChoice}>
-                    Çoktan Seçmeli
-                  </option>
+                  <option value={QuestionTypeEnum.MultipleChoice}>Çoktan Seçmeli</option>
                   <option value={QuestionTypeEnum.Text}>Metin</option>
                   <option value={QuestionTypeEnum.YesNo}>Evet/Hayır</option>
                 </select>
@@ -797,9 +719,7 @@ const Degree360Templates: React.FC = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Sıra
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Sıra</label>
                   <input
                     type="number"
                     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"
                 />
-                <label
-                  htmlFor="isRequired"
-                  className="ml-2 block text-sm text-gray-700"
-                >
+                <label htmlFor="isRequired" className="ml-2 block text-sm text-gray-700">
                   Zorunlu soru
                 </label>
               </div>
@@ -855,8 +772,8 @@ const Degree360Templates: React.FC = () => {
           </div>
         </div>
       )}
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default Degree360Templates;
+export default Degree360Templates
diff --git a/ui/src/views/hr/components/DepartmentManagement.tsx b/ui/src/views/hr/components/DepartmentManagement.tsx
index 50f4f35c..fbe0b010 100644
--- a/ui/src/views/hr/components/DepartmentManagement.tsx
+++ b/ui/src/views/hr/components/DepartmentManagement.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaPlus,
   FaEdit,
@@ -9,53 +9,51 @@ import {
   FaEye,
   FaList,
   FaTh,
-} from "react-icons/fa";
-import { HrDepartment } from "../../../types/hr";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockDepartments } from "../../../mocks/mockDepartments";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockCostCenters } from "../../../mocks/mockCostCenters";
-import DepartmentFormModal from "./DepartmentFormModal";
-import DepartmentViewModal from "./DepartmentViewModal";
-import Widget from "../../../components/common/Widget";
+} from 'react-icons/fa'
+import { HrDepartment } from '../../../types/hr'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockDepartments } from '../../../mocks/mockDepartments'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockCostCenters } from '../../../mocks/mockCostCenters'
+import DepartmentFormModal from './DepartmentFormModal'
+import DepartmentViewModal from './DepartmentViewModal'
+import Widget from '../../../components/common/Widget'
+import { Container } from '@/components/shared'
 
 const DepartmentManagement: React.FC = () => {
-  const [departments, setDepartments] =
-    useState<HrDepartment[]>(mockDepartments);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedParent, setSelectedParent] = useState<string>("all");
-  const [viewMode, setViewMode] = useState<"list" | "cards">("list");
+  const [departments, setDepartments] = useState<HrDepartment[]>(mockDepartments)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedParent, setSelectedParent] = useState<string>('all')
+  const [viewMode, setViewMode] = useState<'list' | 'cards'>('list')
 
   // Modal states
-  const [isFormModalOpen, setIsFormModalOpen] = useState(false);
-  const [isViewModalOpen, setIsViewModalOpen] = useState(false);
-  const [selectedDepartment, setSelectedDepartment] = useState<
-    HrDepartment | undefined
-  >();
-  const [modalTitle, setModalTitle] = useState("");
+  const [isFormModalOpen, setIsFormModalOpen] = useState(false)
+  const [isViewModalOpen, setIsViewModalOpen] = useState(false)
+  const [selectedDepartment, setSelectedDepartment] = useState<HrDepartment | undefined>()
+  const [modalTitle, setModalTitle] = useState('')
 
   const handleAdd = () => {
-    setSelectedDepartment(undefined);
-    setModalTitle("Yeni Departman");
-    setIsFormModalOpen(true);
-  };
+    setSelectedDepartment(undefined)
+    setModalTitle('Yeni Departman')
+    setIsFormModalOpen(true)
+  }
 
   const handleEdit = (department: HrDepartment) => {
-    setSelectedDepartment(department);
-    setModalTitle("Departman Düzenle");
-    setIsFormModalOpen(true);
-  };
+    setSelectedDepartment(department)
+    setModalTitle('Departman Düzenle')
+    setIsFormModalOpen(true)
+  }
 
   const handleView = (department: HrDepartment) => {
-    setSelectedDepartment(department);
-    setIsViewModalOpen(true);
-  };
+    setSelectedDepartment(department)
+    setIsViewModalOpen(true)
+  }
 
   const handleDelete = (id: string) => {
-    if (confirm("Bu departmanı silmek istediğinizden emin misiniz?")) {
-      setDepartments((prev) => prev.filter((dept) => dept.id !== id));
+    if (confirm('Bu departmanı silmek istediğinizden emin misiniz?')) {
+      setDepartments((prev) => prev.filter((dept) => dept.id !== id))
     }
-  };
+  }
 
   const handleSave = (departmentData: Partial<HrDepartment>) => {
     if (selectedDepartment) {
@@ -64,9 +62,9 @@ const DepartmentManagement: React.FC = () => {
         prev.map((dept) =>
           dept.id === selectedDepartment.id
             ? { ...dept, ...departmentData, lastModificationTime: new Date() }
-            : dept
-        )
-      );
+            : dept,
+        ),
+      )
     } else {
       // Add new department
       const newDepartment: HrDepartment = {
@@ -75,37 +73,35 @@ const DepartmentManagement: React.FC = () => {
         subDepartments: [],
         creationTime: new Date(),
         lastModificationTime: new Date(),
-      } as HrDepartment;
-      setDepartments((prev) => [...prev, newDepartment]);
+      } as HrDepartment
+      setDepartments((prev) => [...prev, newDepartment])
     }
-    setIsFormModalOpen(false);
-  };
+    setIsFormModalOpen(false)
+  }
 
   const handleCloseFormModal = () => {
-    setIsFormModalOpen(false);
-    setSelectedDepartment(undefined);
-  };
+    setIsFormModalOpen(false)
+    setSelectedDepartment(undefined)
+  }
 
   const handleCloseViewModal = () => {
-    setIsViewModalOpen(false);
-    setSelectedDepartment(undefined);
-  };
+    setIsViewModalOpen(false)
+    setSelectedDepartment(undefined)
+  }
 
   const handleEditFromView = (department: HrDepartment) => {
-    setIsViewModalOpen(false);
-    handleEdit(department);
-  };
+    setIsViewModalOpen(false)
+    handleEdit(department)
+  }
 
   mockDepartments.forEach((dept) => {
     if (dept.managerId) {
-      dept.manager = mockEmployees.find((emp) => emp.id === dept.managerId);
+      dept.manager = mockEmployees.find((emp) => emp.id === dept.managerId)
     }
     if (dept.costCenterId) {
-      dept.costCenter = mockCostCenters.find(
-        (cc) => cc.id === dept.costCenterId
-      );
+      dept.costCenter = mockCostCenters.find((cc) => cc.id === dept.costCenterId)
     }
-  });
+  })
 
   const filteredDepartments = departments.filter((department) => {
     if (
@@ -113,96 +109,81 @@ const DepartmentManagement: React.FC = () => {
       !department.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
       !department.code.toLowerCase().includes(searchTerm.toLowerCase())
     ) {
-      return false;
+      return false
     }
-    if (
-      selectedParent !== "all" &&
-      department.parentDepartmentId !== selectedParent
-    ) {
-      return false;
+    if (selectedParent !== 'all' && department.parentDepartmentId !== selectedParent) {
+      return false
     }
-    return true;
-  });
+    return true
+  })
 
   const columns: Column<HrDepartment>[] = [
     {
-      key: "code",
-      header: "Departman Kodu",
+      key: 'code',
+      header: 'Departman Kodu',
       sortable: true,
     },
     {
-      key: "name",
-      header: "Departman Adı",
+      key: 'name',
+      header: 'Departman Adı',
       sortable: true,
     },
     {
-      key: "parentDepartment",
-      header: "Üst Departman",
-      render: (department: HrDepartment) =>
-        department.parentDepartment?.name || "-",
+      key: 'parentDepartment',
+      header: 'Üst Departman',
+      render: (department: HrDepartment) => department.parentDepartment?.name || '-',
     },
     {
-      key: "manager",
-      header: "Yönetici",
-      render: (department: HrDepartment) => department.manager?.fullName || "-",
+      key: 'manager',
+      header: 'Yönetici',
+      render: (department: HrDepartment) => department.manager?.fullName || '-',
     },
     {
-      key: "employeeCount",
-      header: "Personel Sayısı",
+      key: 'employeeCount',
+      header: 'Personel Sayısı',
       render: (department: HrDepartment) => (
         <div className="flex items-center gap-1">
           <FaUsers className="w-4 h-4 text-gray-500" />
-          <span>
-            {mockEmployees.filter((a) => a.departmantId == department.id)
-              .length || 0}
-          </span>
+          <span>{mockEmployees.filter((a) => a.departmantId == department.id).length || 0}</span>
         </div>
       ),
     },
     {
-      key: "costCenter",
-      header: "Maliyet Merkezi",
+      key: 'costCenter',
+      header: 'Maliyet Merkezi',
       render: (department: HrDepartment) => (
         <div className="flex flex-col">
-          <span className="font-medium">
-            {department.costCenter?.code || "-"}
-          </span>
-          <span className="text-xs text-gray-500">
-            {department.costCenter?.name || "-"}
-          </span>
+          <span className="font-medium">{department.costCenter?.code || '-'}</span>
+          <span className="text-xs text-gray-500">{department.costCenter?.name || '-'}</span>
         </div>
       ),
     },
     {
-      key: "budget",
-      header: "Bütçe",
+      key: 'budget',
+      header: 'Bütçe',
       render: (department: HrDepartment) => (
         <div className="flex items-center gap-1">
           <FaDollarSign className="w-4 h-4 text-gray-500" />
-          <span>
-            {department.budget ? `₺${department.budget.toLocaleString()}` : "-"}
-          </span>
+          <span>{department.budget ? `₺${department.budget.toLocaleString()}` : '-'}</span>
         </div>
       ),
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (department: HrDepartment) => (
         <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 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
           }`}
         >
-          {department.isActive ? "Aktif" : "Pasif"}
+          {department.isActive ? 'Aktif' : 'Pasif'}
         </span>
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (department: HrDepartment) => (
         <div className="flex gap-2">
           <button
@@ -229,246 +210,234 @@ const DepartmentManagement: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
-        <div>
-          <h2 className="text-lg font-bold text-gray-900">
-            Departman Yönetimi
-          </h2>
-          <p className="text-sm text-gray-600 mt-1">
-            Organizasyon yapısını ve departmanları yönetin
-          </p>
-        </div>
-        <div className="flex items-center gap-3">
-          {/* View Mode Toggle */}
-          <div className="flex bg-gray-100 rounded-lg p-0.5">
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <div>
+            <h2 className="text-lg font-bold text-gray-900">Departman Yönetimi</h2>
+            <p className="text-sm text-gray-600 mt-1">
+              Organizasyon yapısını ve departmanları yönetin
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            {/* View Mode Toggle */}
+            <div className="flex bg-gray-100 rounded-lg p-0.5">
+              <button
+                onClick={() => setViewMode('list')}
+                className={`p-1.5 rounded-md transition-colors ${
+                  viewMode === 'list'
+                    ? 'bg-white text-blue-600 shadow-sm'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+                title="Liste Görünümü"
+              >
+                <FaList className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => setViewMode('cards')}
+                className={`p-1.5 rounded-md transition-colors ${
+                  viewMode === 'cards'
+                    ? 'bg-white text-blue-600 shadow-sm'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+                title="Kart Görünümü"
+              >
+                <FaTh className="w-4 h-4" />
+              </button>
+            </div>
             <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ü"
+              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"
             >
-              <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" />
+              <FaPlus className="w-4 h-4" />
+              Yeni Departman
             </button>
           </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>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-        <Widget
-          title="Toplam Departman"
-          value={departments.length}
-          color="blue"
-          icon="FaBuilding"
-        />
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <Widget
+            title="Toplam Departman"
+            value={departments.length}
+            color="blue"
+            icon="FaBuilding"
+          />
 
-        <Widget
-          title="Toplam Personel"
-          value={mockEmployees.length}
-          color="green"
-          icon="FaUsers"
-        />
+          <Widget
+            title="Toplam Personel"
+            value={mockEmployees.length}
+            color="green"
+            icon="FaUsers"
+          />
 
-        <Widget
-          title="Ana Departmanlar"
-          value={departments.filter((d) => !d.parentDepartmentId).length}
-          color="purple"
-          icon="FaBuilding"
-        />
+          <Widget
+            title="Ana Departmanlar"
+            value={departments.filter((d) => !d.parentDepartmentId).length}
+            color="purple"
+            icon="FaBuilding"
+          />
 
-        <Widget
-          title="Toplam Bütçe"
-          value={`₺${departments
-            .reduce((total, dept) => total + (dept.budget || 0), 0)
-            .toLocaleString()}`}
-          color="orange"
-          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"
+          <Widget
+            title="Toplam Bütçe"
+            value={`₺${departments
+              .reduce((total, dept) => total + (dept.budget || 0), 0)
+              .toLocaleString()}`}
+            color="orange"
+            icon="FaDollarSign"
           />
         </div>
 
-        <select
-          value={selectedParent}
-          onChange={(e) => setSelectedParent(e.target.value)}
-          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>
+        {/* 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>
 
-      {/* Data Display */}
-      {viewMode === "list" ? (
-        <div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
-          <DataTable data={filteredDepartments} columns={columns} />
+          <select
+            value={selectedParent}
+            onChange={(e) => setSelectedParent(e.target.value)}
+            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 className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-          {filteredDepartments.map((department) => (
-            <div
-              key={department.id}
-              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 ${
+
+        {/* Data Display */}
+        {viewMode === 'list' ? (
+          <div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
+            <DataTable data={filteredDepartments} columns={columns} />
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+            {filteredDepartments.map((department) => (
+              <div
+                key={department.id}
+                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
-                        ? "bg-blue-100 text-blue-600"
-                        : "bg-gray-100 text-gray-500"
+                        ? 'bg-green-100 text-green-800'
+                        : 'bg-red-100 text-red-800'
                     }`}
                   >
-                    <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
-                      ? "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
+                    {department.isActive ? 'Aktif' : 'Pasif'}
                   </span>
                 </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">
-                    <FaDollarSign className="w-4 h-4 mr-2 text-gray-400" />
-                    <span>₺{department.budget.toLocaleString()}</span>
+                    <FaUsers className="w-4 h-4 mr-2 text-gray-400" />
+                    <span>
+                      {mockEmployees.filter((emp) => emp.departmantId === department.id).length}{' '}
+                      Personel
+                    </span>
                   </div>
-                )}
 
-                {department.costCenter && (
-                  <div className="text-xs text-gray-600">
-                    <div className="font-medium">
-                      {department.costCenter.code}
+                  {department.budget && (
+                    <div className="flex items-center text-xs text-gray-600">
+                      <FaDollarSign className="w-4 h-4 mr-2 text-gray-400" />
+                      <span>₺{department.budget.toLocaleString()}</span>
                     </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>
 
-              {/* Card Actions */}
-              <div className="flex justify-end space-x-1 mt-3 pt-3 border-t border-gray-100">
-                <button
-                  onClick={() => handleView(department)}
-                  className="p-1.5 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
-                  title="Görüntüle"
-                >
-                  <FaEye className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => handleEdit(department)}
-                  className="p-1.5 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
-                  title="Düzenle"
-                >
-                  <FaEdit className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => handleDelete(department.id)}
-                  className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-                  title="Sil"
-                >
-                  <FaTrash className="w-4 h-4" />
-                </button>
+                {/* Card Actions */}
+                <div className="flex justify-end space-x-1 mt-3 pt-3 border-t border-gray-100">
+                  <button
+                    onClick={() => handleView(department)}
+                    className="p-1.5 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
+                    title="Görüntüle"
+                  >
+                    <FaEye className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleEdit(department)}
+                    className="p-1.5 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                    title="Düzenle"
+                  >
+                    <FaEdit className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(department.id)}
+                    className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                    title="Sil"
+                  >
+                    <FaTrash className="w-4 h-4" />
+                  </button>
+                </div>
               </div>
-            </div>
-          ))}
-        </div>
-      )}
+            ))}
+          </div>
+        )}
 
-      {filteredDepartments.length === 0 && (
-        <div className="text-center py-12">
-          <FaBuilding className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            Departman bulunamadı
-          </h3>
-          <p className="text-gray-500">
-            Arama kriterlerinizi değiştirmeyi deneyin.
-          </p>
-        </div>
-      )}
+        {filteredDepartments.length === 0 && (
+          <div className="text-center py-12">
+            <FaBuilding className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-gray-900 mb-2">Departman bulunamadı</h3>
+            <p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
+          </div>
+        )}
+      </div>
 
       {/* Modals */}
       <DepartmentFormModal
@@ -485,8 +454,8 @@ const DepartmentManagement: React.FC = () => {
         department={selectedDepartment || null}
         onEdit={handleEditFromView}
       />
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default DepartmentManagement;
+export default DepartmentManagement
diff --git a/ui/src/views/hr/components/EmployeeCards.tsx b/ui/src/views/hr/components/EmployeeCards.tsx
index 3d9b6f74..82ea23ae 100644
--- a/ui/src/views/hr/components/EmployeeCards.tsx
+++ b/ui/src/views/hr/components/EmployeeCards.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaUser,
   FaEnvelope,
@@ -9,194 +9,174 @@ import {
   FaEye,
   FaTrash,
   FaPlus,
-} from "react-icons/fa";
-import { HrEmployee, EmployeeStatusEnum } from "../../../types/hr";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import {
-  getEmployeeStatusColor,
-  getEmployeeStatusText,
-} from "../../../utils/erp";
+} from 'react-icons/fa'
+import { HrEmployee, EmployeeStatusEnum } from '../../../types/hr'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { getEmployeeStatusColor, getEmployeeStatusText } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const EmployeeCards: React.FC = () => {
-  const [employees] = useState<HrEmployee[]>(mockEmployees);
-  const [selectedDepartment, setSelectedDepartment] = useState<string>("all");
-  const [selectedStatus, setSelectedStatus] = useState<string>("all");
+  const [employees] = useState<HrEmployee[]>(mockEmployees)
+  const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
+  const [selectedStatus, setSelectedStatus] = useState<string>('all')
 
   const handleEdit = (employee: HrEmployee) => {
-    console.log("Edit employee:", employee);
+    console.log('Edit employee:', employee)
     // Implement edit functionality
-  };
+  }
 
   const handleView = (employee: HrEmployee) => {
-    console.log("View employee:", employee);
+    console.log('View employee:', employee)
     // Implement view functionality
-  };
+  }
 
   const handleDelete = (id: string) => {
-    console.log("Delete employee:", id);
+    console.log('Delete employee:', id)
     // Implement delete functionality
-  };
+  }
 
   const handleAdd = () => {
-    console.log("Add new employee");
+    console.log('Add new employee')
     // Implement add functionality
-  };
+  }
 
   const filteredEmployees = employees.filter((employee) => {
-    if (
-      selectedDepartment !== "all" &&
-      employee.department?.id !== selectedDepartment
-    ) {
-      return false;
+    if (selectedDepartment !== 'all' && employee.department?.id !== selectedDepartment) {
+      return false
     }
-    if (
-      selectedStatus !== "all" &&
-      employee.employeeStatus !== selectedStatus
-    ) {
-      return false;
+    if (selectedStatus !== 'all' && employee.employeeStatus !== selectedStatus) {
+      return false
     }
-    return true;
-  });
+    return true
+  })
 
   return (
-    <div className="space-y-4 pt-2">
-      {/* Header with Add Button */}
-      <div className="flex justify-between items-center">
-        <h2 className="text-xl font-bold text-gray-900">Personel Kartları</h2>
-        <button
-          onClick={handleAdd}
-          className="px-2 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2"
-        >
-          <FaPlus className="w-4 h-4" />
-          Yeni Personel
-        </button>
-      </div>
-
-      {/* Filters */}
-      <div className="flex gap-3 mb-4">
-        <select
-          value={selectedDepartment}
-          onChange={(e) => setSelectedDepartment(e.target.value)}
-          className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Departmanlar</option>
-          {/* Department options would be populated from departments list */}
-        </select>
-
-        <select
-          value={selectedStatus}
-          onChange={(e) => setSelectedStatus(e.target.value)}
-          className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Durumlar</option>
-          <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"
+    <Container>
+      <div className="space-y-2">
+        {/* Header with Add Button */}
+        <div className="flex justify-between items-center">
+          <h2 className="text-xl font-bold text-gray-900">Personel Kartları</h2>
+          <button
+            onClick={handleAdd}
+            className="px-2 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2"
           >
-            {/* Header */}
-            <div className="flex items-center justify-between mb-3">
-              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
-                <FaUser className="w-6 h-6 text-blue-600" />
-              </div>
-              <span
-                className={`px-2 py-1 text-xs font-medium rounded-full ${getEmployeeStatusColor(
-                  employee.employeeStatus
-                )}`}
-              >
-                {getEmployeeStatusText(employee.employeeStatus)}
-              </span>
-            </div>
+            <FaPlus className="w-4 h-4" />
+            Yeni Personel
+          </button>
+        </div>
 
-            {/* Employee Info */}
-            <div className="space-y-1 mb-3">
-              <h3 className="font-semibold text-sm text-gray-900">
-                {employee.fullName}
-              </h3>
-              <p className="text-xs text-gray-600">
-                {employee.jobPosition?.name}
-              </p>
-              <p className="text-sm text-gray-500">
-                {employee.department?.name}
-              </p>
-            </div>
+        {/* 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>
 
-            {/* 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>
+          <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 */}
+              <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 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
+                  className={`px-2 py-1 text-xs font-medium rounded-full ${getEmployeeStatusColor(
+                    employee.employeeStatus,
+                  )}`}
+                >
+                  {getEmployeeStatusText(employee.employeeStatus)}
                 </span>
               </div>
-              <div className="flex items-center text-xs text-gray-600">
-                <FaCertificate className="w-4 h-4 mr-2" />
-                <span>{employee.code}</span>
+
+              {/* Employee Info */}
+              <div className="space-y-1 mb-3">
+                <h3 className="font-semibold text-sm text-gray-900">{employee.fullName}</h3>
+                <p className="text-xs text-gray-600">{employee.jobPosition?.name}</p>
+                <p className="text-sm text-gray-500">{employee.department?.name}</p>
+              </div>
+
+              {/* Contact Info */}
+              <div className="space-y-1.5 mb-3">
+                <div className="flex items-center text-xs text-gray-600">
+                  <FaEnvelope className="w-4 h-4 mr-2" />
+                  <span className="truncate">{employee.email}</span>
+                </div>
+                {employee.phone && (
+                  <div className="flex items-center text-xs text-gray-600">
+                    <FaPhone className="w-4 h-4 mr-2" />
+                    <span>{employee.phone}</span>
+                  </div>
+                )}
+                <div className="flex items-center text-xs text-gray-600">
+                  <FaCalendar className="w-4 h-4 mr-2" />
+                  <span>{new Date(employee.hireDate).toLocaleDateString('tr-TR')}</span>
+                </div>
+                <div className="flex items-center text-xs text-gray-600">
+                  <FaCertificate className="w-4 h-4 mr-2" />
+                  <span>{employee.code}</span>
+                </div>
+              </div>
+
+              {/* Actions */}
+              <div className="flex gap-2 pt-3 border-t">
+                <button
+                  onClick={() => handleView(employee)}
+                  className="flex-1 px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors flex items-center justify-center gap-1"
+                >
+                  <FaEye className="w-4 h-4" />
+                  Görüntüle
+                </button>
+                <button
+                  onClick={() => handleEdit(employee)}
+                  className="flex-1 px-2 py-1 text-xs bg-green-50 text-green-600 rounded-md hover:bg-green-100 transition-colors flex items-center justify-center gap-1"
+                >
+                  <FaEdit className="w-4 h-4" />
+                  Düzenle
+                </button>
+                <button
+                  onClick={() => handleDelete(employee.id)}
+                  className="px-2 py-1 text-xs bg-red-50 text-red-600 rounded-md hover:bg-red-100 transition-colors flex items-center justify-center"
+                >
+                  <FaTrash className="w-4 h-4" />
+                </button>
               </div>
             </div>
-
-            {/* 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>
-  );
-};
 
-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
diff --git a/ui/src/views/hr/components/EmployeeForm.tsx b/ui/src/views/hr/components/EmployeeForm.tsx
index fcc62873..020c054c 100644
--- a/ui/src/views/hr/components/EmployeeForm.tsx
+++ b/ui/src/views/hr/components/EmployeeForm.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import React, { useState, useEffect, useCallback } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
 import {
   FaSave,
   FaTimes,
@@ -9,10 +9,10 @@ import {
   FaMapMarkerAlt,
   FaPhone,
   FaEnvelope,
-} from "react-icons/fa";
-import LoadingSpinner from "../../../components/common/LoadingSpinner";
-import { mockDepartments } from "../../../mocks/mockDepartments";
-import { mockJobPositions } from "../../../mocks/mockJobPositions";
+} from 'react-icons/fa'
+import LoadingSpinner from '../../../components/common/LoadingSpinner'
+import { mockDepartments } from '../../../mocks/mockDepartments'
+import { mockJobPositions } from '../../../mocks/mockJobPositions'
 import {
   HrDepartment,
   HrEmployee,
@@ -22,68 +22,69 @@ import {
   JobLevelEnum,
   HrJobPosition,
   MaritalStatusEnum,
-} from "../../../types/hr";
-import { mockEmployees } from "../../../mocks/mockEmployees";
+} from '../../../types/hr'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { Container } from '@/components/shared'
 
 interface ValidationErrors {
-  [key: string]: string;
+  [key: string]: string
 }
 
 const EmployeeForm: React.FC = () => {
-  const navigate = useNavigate();
-  const { id } = useParams<{ id: string }>();
-  const isEdit = Boolean(id);
+  const navigate = useNavigate()
+  const { id } = useParams<{ id: string }>()
+  const isEdit = Boolean(id)
 
-  const [loading, setLoading] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [errors, setErrors] = useState<ValidationErrors>({});
-  const [departments, setDepartments] = useState<HrDepartment[]>([]);
-  const [jobPositions, setJobPositions] = useState<HrJobPosition[]>([]);
-  const [managers, setManagers] = useState<HrEmployee[]>([]);
+  const [loading, setLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [errors, setErrors] = useState<ValidationErrors>({})
+  const [departments, setDepartments] = useState<HrDepartment[]>([])
+  const [jobPositions, setJobPositions] = useState<HrJobPosition[]>([])
+  const [managers, setManagers] = useState<HrEmployee[]>([])
 
   const [formData, setFormData] = useState<HrEmployee>({
-    id: "",
-    code: "",
-    firstName: "",
-    lastName: "",
-    fullName: "",
-    email: "",
-    phone: "",
-    personalPhone: "",
-    nationalId: "",
+    id: '',
+    code: '',
+    firstName: '',
+    lastName: '',
+    fullName: '',
+    email: '',
+    phone: '',
+    personalPhone: '',
+    nationalId: '',
     birthDate: new Date(),
     gender: GenderEnum.Male,
     maritalStatus: MaritalStatusEnum.Single,
     address: {
-      street: "",
-      city: "",
-      state: "",
-      postalCode: "",
-      country: "",
+      street: '',
+      city: '',
+      state: '',
+      postalCode: '',
+      country: '',
     },
     emergencyContact: {
-      name: "",
-      relationship: "",
-      phone: "",
-      email: "",
+      name: '',
+      relationship: '',
+      phone: '',
+      email: '',
       address: {
-        street: "",
-        city: "",
-        state: "",
-        postalCode: "",
-        country: "",
+        street: '',
+        city: '',
+        state: '',
+        postalCode: '',
+        country: '',
       },
     },
     hireDate: new Date(),
     employmentType: EmploymentTypeEnum.FullTime,
-    jobPositionId: "",
-    departmantId: "",
+    jobPositionId: '',
+    departmantId: '',
     baseSalary: 0,
-    currency: "TRY",
-    payrollGroup: "",
-    bankAccountId: "",
-    workLocation: "",
-    badgeNumber: "",
+    currency: 'TRY',
+    payrollGroup: '',
+    bankAccountId: '',
+    workLocation: '',
+    badgeNumber: '',
     employeeStatus: EmployeeStatusEnum.Active,
     isActive: true,
     leaves: [],
@@ -92,803 +93,715 @@ const EmployeeForm: React.FC = () => {
     disciplinaryActions: [],
     creationTime: new Date(),
     lastModificationTime: new Date(),
-  });
+  })
 
   const loadData = useCallback(async () => {
     try {
       const mockManagers = mockEmployees.filter(
-        (emp) => emp.jobPosition?.level === JobLevelEnum.Manager
-      );
+        (emp) => emp.jobPosition?.level === JobLevelEnum.Manager,
+      )
 
-      setDepartments(mockDepartments);
-      setJobPositions(mockJobPositions);
-      setManagers(mockManagers);
+      setDepartments(mockDepartments)
+      setJobPositions(mockJobPositions)
+      setManagers(mockManagers)
     } catch (error) {
-      console.error("Error loading data:", error);
+      console.error('Error loading data:', error)
     }
-  }, []);
+  }, [])
 
   const loadFormData = useCallback(async () => {
-    setLoading(true);
+    setLoading(true)
     try {
       if (isEdit && id) {
         // Simulate API call
-        await new Promise((resolve) => setTimeout(resolve, 1000));
+        await new Promise((resolve) => setTimeout(resolve, 1000))
 
         // Mock employee data
-        const mockEmployee = mockEmployees.find((emp) => emp.id === id)!;
-        setFormData(mockEmployee);
+        const mockEmployee = mockEmployees.find((emp) => emp.id === id)!
+        setFormData(mockEmployee)
       }
     } catch (error) {
-      console.error("Error loading form data:", error);
+      console.error('Error loading form data:', error)
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  }, [isEdit, id]);
+  }, [isEdit, id])
 
   useEffect(() => {
-    loadData();
-    loadFormData();
-  }, [loadData, loadFormData]);
+    loadData()
+    loadFormData()
+  }, [loadData, loadFormData])
 
   const validateForm = (): boolean => {
-    const newErrors: ValidationErrors = {};
+    const newErrors: ValidationErrors = {}
 
     if (!formData.code.trim()) {
-      newErrors.code = "Personel kodu zorunludur";
+      newErrors.code = 'Personel kodu zorunludur'
     }
     if (!formData.firstName.trim()) {
-      newErrors.firstName = "Ad zorunludur";
+      newErrors.firstName = 'Ad zorunludur'
     }
     if (!formData.lastName.trim()) {
-      newErrors.lastName = "Soyad zorunludur";
+      newErrors.lastName = 'Soyad zorunludur'
     }
     if (!formData.email.trim()) {
-      newErrors.email = "Email zorunludur";
+      newErrors.email = 'Email zorunludur'
     } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
-      newErrors.email = "Geçerli bir email adresi girin";
+      newErrors.email = 'Geçerli bir email adresi girin'
     }
     if (!formData.nationalId.trim()) {
-      newErrors.nationalId = "TC Kimlik No zorunludur";
+      newErrors.nationalId = 'TC Kimlik No zorunludur'
     } else if (formData.nationalId.length !== 11) {
-      newErrors.nationalId = "TC Kimlik No 11 haneli olmalıdır";
+      newErrors.nationalId = 'TC Kimlik No 11 haneli olmalıdır'
     }
     if (!formData.birthDate) {
-      newErrors.birthDate = "Doğum tarihi zorunludur";
+      newErrors.birthDate = 'Doğum tarihi zorunludur'
     }
     if (!formData.hireDate) {
-      newErrors.hireDate = "İşe giriş tarihi zorunludur";
+      newErrors.hireDate = 'İşe giriş tarihi zorunludur'
     }
     if (!formData.departmantId) {
-      newErrors.departmentId = "Departman seçilmelidir";
+      newErrors.departmentId = 'Departman seçilmelidir'
     }
     if (!formData.jobPosition) {
-      newErrors.jobPositionId = "Pozisyon seçilmelidir";
+      newErrors.jobPositionId = 'Pozisyon seçilmelidir'
     }
     if (!formData.employmentType) {
-      newErrors.employmentType = "Çalışma tipi seçilmelidir";
+      newErrors.employmentType = 'Çalışma tipi seçilmelidir'
     }
     if (formData.baseSalary <= 0) {
-      newErrors.baseSalary = "Maaş 0'dan büyük olmalıdır";
+      newErrors.baseSalary = "Maaş 0'dan büyük olmalıdır"
     }
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
 
-  const handleInputChange = (
-    field: keyof HrEmployee,
-    value: string | number | boolean
-  ) => {
+  const handleInputChange = (field: keyof HrEmployee, value: string | number | boolean) => {
     setFormData((prev) => ({
       ...prev,
       [field]: value,
-    }));
+    }))
 
     // Clear error when user starts typing
     if (errors[field]) {
       setErrors((prev) => ({
         ...prev,
-        [field]: "",
-      }));
+        [field]: '',
+      }))
     }
-  };
+  }
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (!validateForm()) {
-      return;
+      return
     }
 
-    setSaving(true);
+    setSaving(true)
     try {
       // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 2000));
+      await new Promise((resolve) => setTimeout(resolve, 2000))
 
-      console.log("Employee data:", {
+      console.log('Employee data:', {
         ...formData,
         id: isEdit ? id : undefined,
-      });
+      })
 
       // Show success message
-      alert(
-        isEdit
-          ? "Personel başarıyla güncellendi!"
-          : "Personel başarıyla oluşturuldu!"
-      );
+      alert(isEdit ? 'Personel başarıyla güncellendi!' : 'Personel başarıyla oluşturuldu!')
 
       // Navigate back to list
-      navigate("/admin/hr");
+      navigate('/admin/hr')
     } catch (error) {
-      console.error("Error saving employee:", error);
-      alert("Bir hata oluştu. Lütfen tekrar deneyin.");
+      console.error('Error saving employee:', error)
+      alert('Bir hata oluştu. Lütfen tekrar deneyin.')
     } finally {
-      setSaving(false);
+      setSaving(false)
     }
-  };
+  }
 
   const handleCancel = () => {
-    navigate("/admin/hr");
-  };
+    navigate('/admin/hr')
+  }
 
   if (loading) {
-    return <LoadingSpinner />;
+    return <LoadingSpinner />
   }
 
   return (
-    <div className="space-y-4 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">
-            {isEdit ? "Personel Düzenle" : "Yeni Personel"}
-          </h2>
-          <p className="text-sm text-gray-600">
-            {isEdit
-              ? "Mevcut personel bilgilerini güncelleyin"
-              : "Yeni personel bilgilerini girin"}
-          </p>
-        </div>
-      </div>
-
-      {/* Form */}
-      <form onSubmit={handleSubmit} className="space-y-3">
-        {/* Personal Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-3 py-2 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaUser className="w-5 h-5 mr-2" />
-              Kişisel Bilgiler
-            </h3>
-          </div>
-
-          <div className="p-3 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Personel Kodu *
-                </label>
-                <input
-                  autoFocus
-                  type="text"
-                  value={formData.code}
-                  onChange={(e) => handleInputChange("code", e.target.value)}
-                  className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.code
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="Örn: EMP001"
-                />
-                {errors.employeeCode && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.employeeCode}
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  TC Kimlik No *
-                </label>
-                <input
-                  type="text"
-                  maxLength={11}
-                  value={formData.nationalId}
-                  onChange={(e) =>
-                    handleInputChange("nationalId", e.target.value)
-                  }
-                  className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.nationalId
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="12345678901"
-                />
-                {errors.nationalId && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.nationalId}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Ad *
-                </label>
-                <input
-                  type="text"
-                  value={formData.firstName}
-                  onChange={(e) =>
-                    handleInputChange("firstName", e.target.value)
-                  }
-                  className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.firstName
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="Ad"
-                />
-                {errors.firstName && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.firstName}
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Soyad *
-                </label>
-                <input
-                  type="text"
-                  value={formData.lastName}
-                  onChange={(e) =>
-                    handleInputChange("lastName", e.target.value)
-                  }
-                  className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.lastName
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="Soyad"
-                />
-                {errors.lastName && (
-                  <p className="mt-1 text-sm text-red-600">{errors.lastName}</p>
-                )}
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Doğum Tarihi *
-                </label>
-                <input
-                  type="date"
-                  value={
-                    formData.birthDate &&
-                    formData.birthDate.toString().split("T")[0]
-                  }
-                  onChange={(e) =>
-                    handleInputChange("birthDate", e.target.value)
-                  }
-                  className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.birthDate
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                />
-                {errors.birthDate && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.birthDate}
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Cinsiyet
-                </label>
-                <select
-                  value={formData.gender}
-                  onChange={(e) => handleInputChange("gender", e.target.value)}
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="">Cinsiyet seçin</option>
-                  <option value="MALE">Erkek</option>
-                  <option value="FEMALE">Kadın</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Medeni Durum
-                </label>
-                <select
-                  value={formData.maritalStatus}
-                  onChange={(e) =>
-                    handleInputChange("maritalStatus", e.target.value)
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="">Medeni durum seçin</option>
-                  <option value="SINGLE">Bekar</option>
-                  <option value="MARRIED">Evli</option>
-                  <option value="DIVORCED">Boşanmış</option>
-                  <option value="WIDOWED">Dul</option>
-                </select>
-              </div>
-            </div>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">
+              {isEdit ? 'Personel Düzenle' : 'Yeni Personel'}
+            </h2>
+            <p className="text-sm text-gray-600">
+              {isEdit
+                ? 'Mevcut personel bilgilerini güncelleyin'
+                : 'Yeni personel bilgilerini girin'}
+            </p>
           </div>
         </div>
 
-        {/* Contact Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-3 py-2 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaPhone className="w-5 h-5 mr-2" />
-              İletişim Bilgileri
-            </h3>
-          </div>
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-3">
+          {/* Personal Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-3 py-2 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaUser className="w-5 h-5 mr-2" />
+                Kişisel Bilgiler
+              </h3>
+            </div>
 
-          <div className="p-3 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Email *
-                </label>
-                <div className="relative">
-                  <FaEnvelope className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+            <div className="p-3 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Personel Kodu *
+                  </label>
                   <input
-                    type="email"
-                    value={formData.email}
-                    onChange={(e) => handleInputChange("email", e.target.value)}
-                    className={`block w-full pl-10 pr-3 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                      errors.email
-                        ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                        : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
+                    autoFocus
+                    type="text"
+                    value={formData.code}
+                    onChange={(e) => handleInputChange('code', e.target.value)}
+                    className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.code
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
                     }`}
-                    placeholder="email@company.com"
+                    placeholder="Örn: EMP001"
+                  />
+                  {errors.employeeCode && (
+                    <p className="mt-1 text-sm text-red-600">{errors.employeeCode}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    TC Kimlik No *
+                  </label>
+                  <input
+                    type="text"
+                    maxLength={11}
+                    value={formData.nationalId}
+                    onChange={(e) => handleInputChange('nationalId', e.target.value)}
+                    className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.nationalId
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="12345678901"
+                  />
+                  {errors.nationalId && (
+                    <p className="mt-1 text-sm text-red-600">{errors.nationalId}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Ad *</label>
+                  <input
+                    type="text"
+                    value={formData.firstName}
+                    onChange={(e) => handleInputChange('firstName', e.target.value)}
+                    className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.firstName
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="Ad"
+                  />
+                  {errors.firstName && (
+                    <p className="mt-1 text-sm text-red-600">{errors.firstName}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Soyad *</label>
+                  <input
+                    type="text"
+                    value={formData.lastName}
+                    onChange={(e) => handleInputChange('lastName', e.target.value)}
+                    className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.lastName
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="Soyad"
+                  />
+                  {errors.lastName && (
+                    <p className="mt-1 text-sm text-red-600">{errors.lastName}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Doğum Tarihi *
+                  </label>
+                  <input
+                    type="date"
+                    value={formData.birthDate && formData.birthDate.toString().split('T')[0]}
+                    onChange={(e) => handleInputChange('birthDate', e.target.value)}
+                    className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.birthDate
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                  />
+                  {errors.birthDate && (
+                    <p className="mt-1 text-sm text-red-600">{errors.birthDate}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Cinsiyet</label>
+                  <select
+                    value={formData.gender}
+                    onChange={(e) => handleInputChange('gender', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="">Cinsiyet seçin</option>
+                    <option value="MALE">Erkek</option>
+                    <option value="FEMALE">Kadın</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Medeni Durum
+                  </label>
+                  <select
+                    value={formData.maritalStatus}
+                    onChange={(e) => handleInputChange('maritalStatus', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="">Medeni durum seçin</option>
+                    <option value="SINGLE">Bekar</option>
+                    <option value="MARRIED">Evli</option>
+                    <option value="DIVORCED">Boşanmış</option>
+                    <option value="WIDOWED">Dul</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Contact Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-3 py-2 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaPhone className="w-5 h-5 mr-2" />
+                İletişim Bilgileri
+              </h3>
+            </div>
+
+            <div className="p-3 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
+                  <div className="relative">
+                    <FaEnvelope className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                    <input
+                      type="email"
+                      value={formData.email}
+                      onChange={(e) => handleInputChange('email', e.target.value)}
+                      className={`block w-full pl-10 pr-3 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                        errors.email
+                          ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                          : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                      }`}
+                      placeholder="email@company.com"
+                    />
+                  </div>
+                  {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    İş Telefonu
+                  </label>
+                  <input
+                    type="tel"
+                    value={formData.phone}
+                    onChange={(e) => handleInputChange('phone', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="+90 212 555 0123"
                   />
                 </div>
-                {errors.email && (
-                  <p className="mt-1 text-sm text-red-600">{errors.email}</p>
-                )}
-              </div>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  İş Telefonu
-                </label>
-                <input
-                  type="tel"
-                  value={formData.phone}
-                  onChange={(e) => handleInputChange("phone", e.target.value)}
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="+90 212 555 0123"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Kişisel Telefon
-                </label>
-                <input
-                  type="tel"
-                  value={formData.personalPhone}
-                  onChange={(e) =>
-                    handleInputChange("personalPhone", e.target.value)
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="+90 532 555 0123"
-                />
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Kişisel Telefon
+                  </label>
+                  <input
+                    type="tel"
+                    value={formData.personalPhone}
+                    onChange={(e) => handleInputChange('personalPhone', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="+90 532 555 0123"
+                  />
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        {/* Address */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-3 py-2 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaMapMarkerAlt className="w-5 h-5 mr-2" />
-              Adres Bilgileri
-            </h3>
-          </div>
-        </div>
-
-        {/* Employment Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-3 py-2 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaBriefcase className="w-5 h-5 mr-2" />
-              İş Bilgileri
-            </h3>
+          {/* Address */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-3 py-2 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaMapMarkerAlt className="w-5 h-5 mr-2" />
+                Adres Bilgileri
+              </h3>
+            </div>
           </div>
 
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  İşe Giriş Tarihi *
-                </label>
-                <input
-                  type="date"
-                  value={
-                    formData.hireDate &&
-                    formData.hireDate.toString().split("T")[0]
-                  }
-                  onChange={(e) =>
-                    handleInputChange("hireDate", e.target.value)
-                  }
-                  className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.hireDate
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                />
-                {errors.hireDate && (
-                  <p className="mt-1 text-sm text-red-600">{errors.hireDate}</p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Çalışma Tipi *
-                </label>
-                <select
-                  value={formData.employmentType}
-                  onChange={(e) =>
-                    handleInputChange("employmentType", e.target.value)
-                  }
-                  className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.employmentType
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                >
-                  <option value="">Tip seçin</option>
-                  <option value="FULL_TIME">Tam Zamanlı</option>
-                  <option value="PART_TIME">Yarı Zamanlı</option>
-                  <option value="CONTRACT">Sözleşmeli</option>
-                  <option value="INTERN">Stajyer</option>
-                  <option value="TEMPORARY">Geçici</option>
-                </select>
-                {errors.employmentType && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.employmentType}
-                  </p>
-                )}
-              </div>
+          {/* Employment Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-3 py-2 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaBriefcase className="w-5 h-5 mr-2" />
+                İş Bilgileri
+              </h3>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Departman *
-                </label>
-                <select
-                  value={formData.departmantId}
-                  onChange={(e) =>
-                    handleInputChange("departmantId", e.target.value)
-                  }
-                  className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.departmantId
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                >
-                  <option value="">Departman seçin</option>
-                  {departments.map((dept) => (
-                    <option key={dept.id} value={dept.id}>
-                      {dept.name}
-                    </option>
-                  ))}
-                </select>
-                {errors.departmentId && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.departmentId}
-                  </p>
-                )}
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    İşe Giriş Tarihi *
+                  </label>
+                  <input
+                    type="date"
+                    value={formData.hireDate && formData.hireDate.toString().split('T')[0]}
+                    onChange={(e) => handleInputChange('hireDate', e.target.value)}
+                    className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.hireDate
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                  />
+                  {errors.hireDate && (
+                    <p className="mt-1 text-sm text-red-600">{errors.hireDate}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Çalışma Tipi *
+                  </label>
+                  <select
+                    value={formData.employmentType}
+                    onChange={(e) => handleInputChange('employmentType', e.target.value)}
+                    className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.employmentType
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                  >
+                    <option value="">Tip seçin</option>
+                    <option value="FULL_TIME">Tam Zamanlı</option>
+                    <option value="PART_TIME">Yarı Zamanlı</option>
+                    <option value="CONTRACT">Sözleşmeli</option>
+                    <option value="INTERN">Stajyer</option>
+                    <option value="TEMPORARY">Geçici</option>
+                  </select>
+                  {errors.employmentType && (
+                    <p className="mt-1 text-sm text-red-600">{errors.employmentType}</p>
+                  )}
+                </div>
               </div>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Pozisyon *
-                </label>
-                <select
-                  value={formData.jobPositionId}
-                  onChange={(e) =>
-                    handleInputChange("jobPositionId", e.target.value)
-                  }
-                  className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.jobPositionId
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                >
-                  <option value="">Pozisyon seçin</option>
-                  {jobPositions.map((position) => (
-                    <option key={position.id} value={position.id}>
-                      {position.name}
-                    </option>
-                  ))}
-                </select>
-                {errors.jobPositionId && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.jobPositionId}
-                  </p>
-                )}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Departman *
+                  </label>
+                  <select
+                    value={formData.departmantId}
+                    onChange={(e) => handleInputChange('departmantId', e.target.value)}
+                    className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.departmantId
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                  >
+                    <option value="">Departman seçin</option>
+                    {departments.map((dept) => (
+                      <option key={dept.id} value={dept.id}>
+                        {dept.name}
+                      </option>
+                    ))}
+                  </select>
+                  {errors.departmentId && (
+                    <p className="mt-1 text-sm text-red-600">{errors.departmentId}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Pozisyon *</label>
+                  <select
+                    value={formData.jobPositionId}
+                    onChange={(e) => handleInputChange('jobPositionId', e.target.value)}
+                    className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.jobPositionId
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                  >
+                    <option value="">Pozisyon seçin</option>
+                    {jobPositions.map((position) => (
+                      <option key={position.id} value={position.id}>
+                        {position.name}
+                      </option>
+                    ))}
+                  </select>
+                  {errors.jobPositionId && (
+                    <p className="mt-1 text-sm text-red-600">{errors.jobPositionId}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Yönetici</label>
+                  <select
+                    value={formData.managerId}
+                    onChange={(e) => handleInputChange('managerId', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="">Yönetici seçin</option>
+                    {managers.map((manager) => (
+                      <option key={manager.id} value={manager.id}>
+                        {manager.fullName}
+                      </option>
+                    ))}
+                  </select>
+                </div>
               </div>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Yönetici
-                </label>
-                <select
-                  value={formData.managerId}
-                  onChange={(e) =>
-                    handleInputChange("managerId", e.target.value)
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="">Yönetici seçin</option>
-                  {managers.map((manager) => (
-                    <option key={manager.id} value={manager.id}>
-                      {manager.fullName}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Çalışma Lokasyonu
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.workLocation}
+                    onChange={(e) => handleInputChange('workLocation', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="Ofis lokasyonu"
+                  />
+                </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Çalışma Lokasyonu
-                </label>
-                <input
-                  type="text"
-                  value={formData.workLocation}
-                  onChange={(e) =>
-                    handleInputChange("workLocation", e.target.value)
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="Ofis lokasyonu"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Kart Numarası
-                </label>
-                <input
-                  type="text"
-                  value={formData.badgeNumber}
-                  onChange={(e) =>
-                    handleInputChange("badgeNumber", e.target.value)
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="Personel kartı numarası"
-                />
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Kart Numarası
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.badgeNumber}
+                    onChange={(e) => handleInputChange('badgeNumber', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="Personel kartı numarası"
+                  />
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        {/* Salary Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-3 py-2 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaDollarSign className="w-5 h-5 mr-2" />
-              Maaş Bilgileri
-            </h3>
-          </div>
+          {/* Salary Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-3 py-2 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaDollarSign className="w-5 h-5 mr-2" />
+                Maaş Bilgileri
+              </h3>
+            </div>
 
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Temel Maaş *
-                </label>
-                <input
-                  type="number"
-                  min="0"
-                  step="0.01"
-                  value={formData.baseSalary}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "baseSalary",
-                      parseFloat(e.target.value) || 0
-                    )
-                  }
-                  className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.baseSalary
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="0.00"
-                />
-                {errors.baseSalary && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.baseSalary}
-                  </p>
-                )}
-              </div>
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Temel Maaş *
+                  </label>
+                  <input
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    value={formData.baseSalary}
+                    onChange={(e) =>
+                      handleInputChange('baseSalary', parseFloat(e.target.value) || 0)
+                    }
+                    className={`block w-full px-2 py-1 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.baseSalary
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="0.00"
+                  />
+                  {errors.baseSalary && (
+                    <p className="mt-1 text-sm text-red-600">{errors.baseSalary}</p>
+                  )}
+                </div>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Para Birimi
-                </label>
-                <select
-                  value={formData.currency}
-                  onChange={(e) =>
-                    handleInputChange("currency", e.target.value)
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="TRY">Türk Lirası (TRY)</option>
-                  <option value="USD">Amerikan Doları (USD)</option>
-                  <option value="EUR">Euro (EUR)</option>
-                </select>
-              </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Para Birimi
+                  </label>
+                  <select
+                    value={formData.currency}
+                    onChange={(e) => handleInputChange('currency', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="TRY">Türk Lirası (TRY)</option>
+                    <option value="USD">Amerikan Doları (USD)</option>
+                    <option value="EUR">Euro (EUR)</option>
+                  </select>
+                </div>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Bordro Grubu
-                </label>
-                <select
-                  value={formData.payrollGroup}
-                  onChange={(e) =>
-                    handleInputChange("payrollGroup", e.target.value)
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="">Grup seçin</option>
-                  <option value="MONTHLY">Aylık</option>
-                  <option value="WEEKLY">Haftalık</option>
-                  <option value="HOURLY">Saatlik</option>
-                </select>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Bordro Grubu
+                  </label>
+                  <select
+                    value={formData.payrollGroup}
+                    onChange={(e) => handleInputChange('payrollGroup', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="">Grup seçin</option>
+                    <option value="MONTHLY">Aylık</option>
+                    <option value="WEEKLY">Haftalık</option>
+                    <option value="HOURLY">Saatlik</option>
+                  </select>
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        {/* Emergency Contact & Status */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-3 py-2 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaPhone className="w-5 h-5 mr-2" />
-              Acil Durum İletişim & Durum
-            </h3>
-          </div>
-
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Acil Durum Kişisi
-                </label>
-                <input
-                  type="text"
-                  value={formData.emergencyContact.name}
-                  onChange={(e) =>
-                    handleInputChange("emergencyContact.name", e.target.value)
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="Ad Soyad"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Acil Durum Telefonu
-                </label>
-                <input
-                  type="tel"
-                  value={formData.emergencyContact.phone}
-                  onChange={(e) =>
-                    handleInputChange("emergencyContact.phone", e.target.value)
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="+90 532 555 0123"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Yakınlık Derecesi
-                </label>
-                <input
-                  type="text"
-                  value={formData.emergencyContact.relationship}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "emergencyContact.relationship",
-                      e.target.value
-                    )
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="Eş, Anne, Baba vs."
-                />
-              </div>
+          {/* Emergency Contact & Status */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-3 py-2 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaPhone className="w-5 h-5 mr-2" />
+                Acil Durum İletişim & Durum
+              </h3>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Personel Durumu
-                </label>
-                <select
-                  value={formData.employeeStatus}
-                  onChange={(e) =>
-                    handleInputChange("employeeStatus", e.target.value)
-                  }
-                  className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="ACTIVE">Aktif</option>
-                  <option value="INACTIVE">Pasif</option>
-                  <option value="ON_LEAVE">İzinli</option>
-                  <option value="TERMINATED">İşten Ayrılmış</option>
-                </select>
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Acil Durum Kişisi
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.emergencyContact.name}
+                    onChange={(e) => handleInputChange('emergencyContact.name', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="Ad Soyad"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Acil Durum Telefonu
+                  </label>
+                  <input
+                    type="tel"
+                    value={formData.emergencyContact.phone}
+                    onChange={(e) => handleInputChange('emergencyContact.phone', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="+90 532 555 0123"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Yakınlık Derecesi
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.emergencyContact.relationship}
+                    onChange={(e) =>
+                      handleInputChange('emergencyContact.relationship', e.target.value)
+                    }
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="Eş, Anne, Baba vs."
+                  />
+                </div>
               </div>
 
-              <div className="flex items-center pt-6">
-                <input
-                  type="checkbox"
-                  id="isActive"
-                  checked={formData.isActive}
-                  onChange={(e) =>
-                    handleInputChange("isActive", e.target.checked)
-                  }
-                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-                />
-                <label
-                  htmlFor="isActive"
-                  className="ml-2 block text-sm text-gray-900"
-                >
-                  Aktif
-                </label>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Personel Durumu
+                  </label>
+                  <select
+                    value={formData.employeeStatus}
+                    onChange={(e) => handleInputChange('employeeStatus', e.target.value)}
+                    className="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="ACTIVE">Aktif</option>
+                    <option value="INACTIVE">Pasif</option>
+                    <option value="ON_LEAVE">İzinli</option>
+                    <option value="TERMINATED">İşten Ayrılmış</option>
+                  </select>
+                </div>
+
+                <div className="flex items-center pt-6">
+                  <input
+                    type="checkbox"
+                    id="isActive"
+                    checked={formData.isActive}
+                    onChange={(e) => handleInputChange('isActive', e.target.checked)}
+                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                  />
+                  <label htmlFor="isActive" className="ml-2 block text-sm text-gray-900">
+                    Aktif
+                  </label>
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        {/* Form Actions */}
-        <div className="flex items-center justify-end space-x-2 bg-gray-50 px-3 py-2 rounded-b-lg border-t">
-          <button
-            type="button"
-            onClick={handleCancel}
-            className="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            <FaTimes className="w-4 h-4 mr-2" />
-            İptal
-          </button>
-          <button
-            type="submit"
-            disabled={saving}
-            className="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {saving ? (
-              <>
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                Kaydediliyor...
-              </>
-            ) : (
-              <>
-                <FaSave className="w-4 h-4 mr-2" />
-                {isEdit ? "Güncelle" : "Kaydet"}
-              </>
-            )}
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};
+          {/* Form Actions */}
+          <div className="flex items-center justify-end space-x-2 bg-gray-50 px-3 py-2 rounded-b-lg border-t">
+            <button
+              type="button"
+              onClick={handleCancel}
+              className="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              <FaTimes className="w-4 h-4 mr-2" />
+              İptal
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              className="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {saving ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                  Kaydediliyor...
+                </>
+              ) : (
+                <>
+                  <FaSave className="w-4 h-4 mr-2" />
+                  {isEdit ? 'Güncelle' : 'Kaydet'}
+                </>
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </Container>
+  )
+}
 
-export default EmployeeForm;
+export default EmployeeForm
diff --git a/ui/src/views/hr/components/EmployeeList.tsx b/ui/src/views/hr/components/EmployeeList.tsx
index d064e7ec..d5a9a321 100644
--- a/ui/src/views/hr/components/EmployeeList.tsx
+++ b/ui/src/views/hr/components/EmployeeList.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
 import {
   FaUsers,
   FaPlus,
@@ -18,83 +18,78 @@ import {
   FaList,
   FaTh,
   FaBriefcase,
-} from "react-icons/fa";
-import classNames from "classnames";
-import { EmployeeStatusEnum, HrEmployee } from "../../../types/hr";
-import dayjs from "dayjs";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import EmployeeViewModal from "./EmployeeViewModal";
-import Widget from "../../../components/common/Widget";
+} from 'react-icons/fa'
+import classNames from 'classnames'
+import { EmployeeStatusEnum, HrEmployee } from '../../../types/hr'
+import dayjs from 'dayjs'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import EmployeeView from './EmployeeView'
+import Widget from '../../../components/common/Widget'
 import {
   getEmploymentTypeColor,
   getEmploymentTypeText,
   getEmployeeStatusColor,
   getEmployeeStatusIcon,
   getEmployeeStatusText,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const EmployeeList: React.FC = () => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [filterStatus, setFilterStatus] = useState("all");
-  const [filterDepartment, setFilterDepartment] = useState("all");
-  const [showFilters, setShowFilters] = useState(false);
-  const [viewMode, setViewMode] = useState<"list" | "cards">("list");
+  const [searchTerm, setSearchTerm] = useState('')
+  const [filterStatus, setFilterStatus] = useState('all')
+  const [filterDepartment, setFilterDepartment] = useState('all')
+  const [showFilters, setShowFilters] = useState(false)
+  const [viewMode, setViewMode] = useState<'list' | 'cards'>('list')
 
   // Modal states
-  const [isViewModalOpen, setIsViewModalOpen] = useState(false);
-  const [selectedEmployee, setSelectedEmployee] = useState<HrEmployee | null>(
-    null
-  );
+  const [isViewModalOpen, setIsViewModalOpen] = useState(false)
+  const [selectedEmployee, setSelectedEmployee] = useState<HrEmployee | null>(null)
 
   const {
     data: employees,
     isLoading,
     error,
   } = useQuery({
-    queryKey: ["employees", searchTerm, filterStatus, filterDepartment],
+    queryKey: ['employees', searchTerm, filterStatus, filterDepartment],
     queryFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
+      await new Promise((resolve) => setTimeout(resolve, 500))
       return mockEmployees.filter((employee) => {
         const matchesSearch =
           employee.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
           employee.fullName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          employee.email.toLowerCase().includes(searchTerm.toLowerCase());
-        const matchesStatus =
-          filterStatus === "all" || employee.employeeStatus === filterStatus;
+          employee.email.toLowerCase().includes(searchTerm.toLowerCase())
+        const matchesStatus = filterStatus === 'all' || employee.employeeStatus === filterStatus
         const matchesDepartment =
-          filterDepartment === "all" ||
-          employee.department?.code === filterDepartment;
-        return matchesSearch && matchesStatus && matchesDepartment;
-      });
+          filterDepartment === 'all' || employee.department?.code === filterDepartment
+        return matchesSearch && matchesStatus && matchesDepartment
+      })
     },
-  });
+  })
 
   // Modal handlers
   const handleViewEmployee = (employee: HrEmployee) => {
-    setSelectedEmployee(employee);
-    setIsViewModalOpen(true);
-  };
+    setSelectedEmployee(employee)
+    setIsViewModalOpen(true)
+  }
 
   const handleCloseViewModal = () => {
-    setIsViewModalOpen(false);
-    setSelectedEmployee(null);
-  };
+    setIsViewModalOpen(false)
+    setSelectedEmployee(null)
+  }
 
   const handleEditFromView = (employee: HrEmployee) => {
-    setIsViewModalOpen(false);
+    setIsViewModalOpen(false)
     // Navigate to edit page - you can replace this with a modal if preferred
-    window.location.href = `/admin/hr/employees/edit/${employee.id}`;
-  };
+    window.location.href = `/admin/hr/employees/edit/${employee.id}`
+  }
 
   if (isLoading) {
     return (
       <div className="flex items-center justify-center py-12">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-        <span className="ml-3 text-gray-600">
-          Personel listesi yükleniyor...
-        </span>
+        <span className="ml-3 text-gray-600">Personel listesi yükleniyor...</span>
       </div>
-    );
+    )
   }
 
   if (error) {
@@ -102,536 +97,491 @@ const EmployeeList: React.FC = () => {
       <div className="bg-red-50 border border-red-200 rounded-lg p-4">
         <div className="flex items-center">
           <FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
-          <span className="text-red-800">
-            Personel listesi yüklenirken hata oluştu.
-          </span>
+          <span className="text-red-800">Personel listesi yüklenirken hata oluştu.</span>
         </div>
       </div>
-    );
+    )
   }
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-        {/* Title & Description */}
-        <div>
-          <h2 className="text-lg font-bold text-gray-900">Personel Listesi</h2>
-          <p className="text-sm text-gray-600">Şirket çalışanlarının listesi</p>
-        </div>
-
-        {/* Header Actions */}
-        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
-          {/* View Mode Toggle */}
-          <div className="flex bg-gray-100 rounded-lg p-0.5">
-            <button
-              onClick={() => setViewMode("list")}
-              className={`p-1.5 rounded-md transition-colors ${
-                viewMode === "list"
-                  ? "bg-white text-blue-600 shadow-sm"
-                  : "text-gray-600 hover:text-gray-900"
-              }`}
-              title="Liste Görünümü"
-            >
-              <FaList className="w-4 h-4" />
-            </button>
-            <button
-              onClick={() => setViewMode("cards")}
-              className={`p-1.5 rounded-md transition-colors ${
-                viewMode === "cards"
-                  ? "bg-white text-blue-600 shadow-sm"
-                  : "text-gray-600 hover:text-gray-900"
-              }`}
-              title="Kart Görünümü"
-            >
-              <FaTh className="w-4 h-4" />
-            </button>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+          {/* Title & Description */}
+          <div>
+            <h2 className="text-lg font-bold text-gray-900">Personel Listesi</h2>
+            <p className="text-sm text-gray-600">Şirket çalışanlarının listesi</p>
           </div>
 
-          {/* Search Box */}
-          <div className="relative">
-            <FaSearch
-              size={18}
-              className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-            />
-            <input
-              type="text"
-              placeholder="Personel kodu, ad veya e-posta..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10 pr-4 py-1 text-sm w-full sm:w-64 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
-
-          {/* Filter Button */}
-          <button
-            onClick={() => setShowFilters(!showFilters)}
-            className={classNames(
-              "flex items-center px-3 py-1.5 text-sm border rounded-lg transition-colors",
-              showFilters
-                ? "border-blue-500 bg-blue-50 text-blue-700"
-                : "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
-            )}
-          >
-            <FaFilter size={16} className="mr-2" />
-            Filtreler
-          </button>
-
-          {/* Export Button */}
-          <button
-            onClick={() => alert("Dışa aktarma özelliği yakında eklenecek")}
-            className="flex items-center px-3 py-1 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
-          >
-            <FaDownload size={16} className="mr-2" />
-            Dışa Aktar
-          </button>
-
-          {/* Add New Employee */}
-          <Link
-            to="/admin/hr/employees/new"
-            className="flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-          >
-            <FaPlus size={16} className="mr-2" />
-            Yeni Personel
-          </Link>
-        </div>
-      </div>
-
-      {/* Filters Panel */}
-      {showFilters && (
-        <div className="bg-white border border-gray-200 rounded-lg p-3">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Durum
-              </label>
-              <select
-                value={filterStatus}
-                onChange={(e) => setFilterStatus(e.target.value)}
-                className="w-full border border-gray-300 rounded-lg px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              >
-                <option value="all">Tümü</option>
-                <option value={EmployeeStatusEnum.Active}>Aktif</option>
-                <option value={EmployeeStatusEnum.Inactive}>Pasif</option>
-                <option value={EmployeeStatusEnum.OnLeave}>İzinli</option>
-                <option value={EmployeeStatusEnum.Suspended}>Askıda</option>
-                <option value={EmployeeStatusEnum.Terminated}>
-                  İşten Çıkarıldı
-                </option>
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Departman
-              </label>
-              <select
-                value={filterDepartment}
-                onChange={(e) => setFilterDepartment(e.target.value)}
-                className="w-full border border-gray-300 rounded-lg px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              >
-                <option value="all">Tümü</option>
-                <option value="IT">Bilgi İşlem</option>
-                <option value="PROC">Satınalma</option>
-                <option value="PROD">Üretim</option>
-                <option value="HR">İnsan Kaynakları</option>
-              </select>
-            </div>
-
-            <div className="flex items-end">
+          {/* Header Actions */}
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
+            {/* View Mode Toggle */}
+            <div className="flex bg-gray-100 rounded-lg p-0.5">
               <button
-                onClick={() => {
-                  setFilterStatus("all");
-                  setFilterDepartment("all");
-                  setSearchTerm("");
-                }}
-                className="w-full px-3 py-1 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                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ü"
               >
-                Filtreleri Temizle
+                <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>
-          </div>
-        </div>
-      )}
 
-      {/* Statistics Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-        <Widget
-          title="Toplam Personel"
-          value={employees?.length || 0}
-          color="blue"
-          icon="FaUsers"
-        />
-
-        <Widget
-          title="Aktif Personel"
-          value={
-            employees?.filter(
-              (e) => e.employeeStatus === EmployeeStatusEnum.Active
-            ).length || 0
-          }
-          color="green"
-          icon="FaCheckCircle"
-        />
-
-        <Widget
-          title="İzinli Personel"
-          value={
-            employees?.filter(
-              (e) => e.employeeStatus === EmployeeStatusEnum.OnLeave
-            ).length || 0
-          }
-          color="yellow"
-          icon="FaCalendar"
-        />
-
-        <Widget
-          title="Yeni İşe Alınanlar"
-          value={
-            employees?.filter((e) =>
-              dayjs(e.hireDate).isAfter(dayjs().subtract(30, "day"))
-            ).length || 0
-          }
-          color="purple"
-          icon="FaArrowUp"
-        />
-      </div>
-
-      {/* Employees Display */}
-      {viewMode === "list" ? (
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200 text-xs">
-          <div className="px-3 py-2 border-b border-gray-200">
-            <h2 className="text-xl font-bold text-gray-900">
-              Personel Listesi
-            </h2>
-          </div>
-
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Personel Bilgileri
-                  </th>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    İletişim
-                  </th>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Pozisyon / Departman
-                  </th>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    İstihdam Bilgileri
-                  </th>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Maaş
-                  </th>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Durum
-                  </th>
-                  <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    İşlemler
-                  </th>
-                </tr>
-              </thead>
-
-              <tbody className="bg-white divide-y divide-gray-200">
-                {employees?.map((employee) => (
-                  <tr
-                    key={employee.id}
-                    className="hover:bg-gray-50 transition-colors text-xs"
-                  >
-                    <td className="px-3 py-2">
-                      <div className="flex items-center">
-                        <div className="flex-shrink-0 h-10 w-10">
-                          <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
-                            <FaUsers className="h-5 w-5 text-blue-600" />
-                          </div>
-                        </div>
-                        <div className="ml-4">
-                          <div className="text-xs font-medium text-gray-900">
-                            {employee.code}
-                          </div>
-                          <div className="text-xs text-gray-500">
-                            {employee.fullName}
-                          </div>
-                          {employee.badgeNumber && (
-                            <div className="text-xs text-gray-400 mt-1">
-                              Rozet: {employee.badgeNumber}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2">
-                      <div className="space-y-1">
-                        <div className="flex items-center text-xs text-gray-900">
-                          <FaEnvelope size={14} className="mr-1" />
-                          {employee.email}
-                        </div>
-                        {employee.phone && (
-                          <div className="flex items-center text-xs text-gray-500">
-                            <FaPhone size={14} className="mr-1" />
-                            {employee.phone}
-                          </div>
-                        )}
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2">
-                      <div>
-                        <div className="text-xs font-medium text-gray-900">
-                          {employee.jobPosition?.name}
-                        </div>
-                        <div className="flex items-center text-xs text-gray-500">
-                          <FaBuilding size={14} className="mr-1" />
-                          {employee.department?.name}
-                        </div>
-                        <div className="text-xs text-gray-400 mt-1">
-                          {employee.workLocation}
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2">
-                      <div className="space-y-1">
-                        <div
-                          className={classNames(
-                            "text-xs font-medium",
-                            getEmploymentTypeColor(employee.employmentType)
-                          )}
-                        >
-                          {getEmploymentTypeText(employee.employmentType)}
-                        </div>
-                        <div className="flex items-center text-xs text-gray-500">
-                          <FaCalendar size={14} className="mr-1" />
-                          {dayjs(employee.hireDate).format("DD.MM.YYYY")}
-                        </div>
-                        <div className="text-xs text-gray-400">
-                          {dayjs().diff(employee.hireDate, "year")} yıl deneyim
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2">
-                      <div className="text-xs font-medium text-gray-900">
-                        ₺{employee.baseSalary.toLocaleString()}
-                      </div>
-                      <div className="text-xs text-gray-500">
-                        {employee.payrollGroup}
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2">
-                      <span
-                        className={classNames(
-                          "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
-                          getEmployeeStatusColor(employee.employeeStatus)
-                        )}
-                      >
-                        {getEmployeeStatusIcon(employee.employeeStatus)}
-                        <span className="ml-1">
-                          {getEmployeeStatusText(employee.employeeStatus)}
-                        </span>
-                      </span>
-                    </td>
-
-                    <td className="px-3 py-2 text-right">
-                      <div className="flex items-center justify-end space-x-2">
-                        <button
-                          onClick={() => handleViewEmployee(employee)}
-                          className="p-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
-                          title="Detayları Görüntüle"
-                        >
-                          <FaEye size={16} />
-                        </button>
-
-                        <Link
-                          to={`/admin/hr/employees/edit/${employee.id}`}
-                          className="p-1 text-gray-600 hover:text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors"
-                          title="Düzenle"
-                        >
-                          <FaEdit size={16} />
-                        </Link>
-
-                        <button
-                          onClick={() =>
-                            alert(
-                              "Performans değerlendirme özelliği yakında eklenecek"
-                            )
-                          }
-                          className="p-1 text-gray-600 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
-                          title="Performans Değerlendirmesi"
-                        >
-                          <FaAward size={16} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-
-          {(!employees || employees.length === 0) && (
-            <div className="text-center py-12">
-              <FaUsers className="mx-auto h-10 w-10 text-gray-400" />
-              <h3 className="mt-2 text-xs font-medium text-gray-900">
-                Personel bulunamadı
-              </h3>
-              <p className="mt-1 text-xs text-gray-500">
-                Yeni personel ekleyerek başlayın.
-              </p>
-              <div className="mt-6">
-                <Link
-                  to="/admin/hr/employees/new"
-                  className="inline-flex items-center px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-                >
-                  <FaPlus size={16} className="mr-2" />
-                  Yeni Personel Ekle
-                </Link>
-              </div>
+            {/* Search Box */}
+            <div className="relative">
+              <FaSearch
+                size={18}
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+              />
+              <input
+                type="text"
+                placeholder="Personel kodu, ad veya e-posta..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10 pr-4 py-1 text-sm w-full sm:w-64 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
             </div>
-          )}
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-          {employees?.map((employee) => (
-            <div
-              key={employee.id}
-              className="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow p-3"
+
+            {/* Filter Button */}
+            <button
+              onClick={() => setShowFilters(!showFilters)}
+              className={classNames(
+                'flex items-center px-3 py-1.5 text-sm border rounded-lg transition-colors',
+                showFilters
+                  ? 'border-blue-500 bg-blue-50 text-blue-700'
+                  : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
+              )}
             >
-              {/* Card Header */}
-              <div className="flex items-start space-x-4 mb-4">
-                <div className="flex-shrink-0">
-                  <div className="h-12 w-12 rounded-full bg-blue-500 flex items-center justify-center">
-                    <span className="text-lg font-medium text-white">
-                      {employee.firstName.charAt(0)}
-                      {employee.lastName.charAt(0)}
-                    </span>
-                  </div>
-                </div>
-                <div className="flex-1 min-w-0">
-                  <h3 className="text-base font-semibold text-gray-900 truncate">
-                    {employee.fullName}
-                  </h3>
-                  <p className="text-sm text-gray-500">{employee.code}</p>
-                  <span
-                    className={classNames(
-                      "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium mt-1",
-                      getEmployeeStatusColor(employee.employeeStatus)
-                    )}
-                  >
-                    {getEmployeeStatusIcon(employee.employeeStatus)}
-                    <span className="ml-1">
-                      {getEmployeeStatusText(employee.employeeStatus)}
-                    </span>
-                  </span>
-                </div>
-              </div>
+              <FaFilter size={16} className="mr-2" />
+              Filtreler
+            </button>
 
-              {/* Card Content */}
-              <div className="space-y-1.5">
-                <div className="flex items-center text-sm text-gray-600">
-                  <FaBriefcase className="w-4 h-4 mr-2 text-gray-400" />
-                  <span>
-                    {employee.jobPosition?.name || "Pozisyon belirtilmemiş"}
-                  </span>
-                </div>
+            {/* Export Button */}
+            <button
+              onClick={() => alert('Dışa aktarma özelliği yakında eklenecek')}
+              className="flex items-center px-3 py-1 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              <FaDownload size={16} className="mr-2" />
+              Dışa Aktar
+            </button>
 
-                <div className="flex items-center text-sm text-gray-600">
-                  <FaBuilding className="w-4 h-4 mr-2 text-gray-400" />
-                  <span>
-                    {employee.department?.name || "Departman belirtilmemiş"}
-                  </span>
-                </div>
-
-                <div className="flex items-center text-sm text-gray-600">
-                  <FaEnvelope className="w-4 h-4 mr-2 text-gray-400" />
-                  <span className="truncate">{employee.email}</span>
-                </div>
-
-                {employee.phone && (
-                  <div className="flex items-center text-sm text-gray-600">
-                    <FaPhone className="w-4 h-4 mr-2 text-gray-400" />
-                    <span>{employee.phone}</span>
-                  </div>
-                )}
-
-                <div className="flex items-center text-sm text-gray-600">
-                  <FaCalendar className="w-4 h-4 mr-2 text-gray-400" />
-                  <span>
-                    İşe Başlama: {dayjs(employee.hireDate).format("DD.MM.YYYY")}
-                  </span>
-                </div>
-
-                <div className="text-sm text-gray-600">
-                  <span className="font-medium">İstihdam Türü:</span>{" "}
-                  {employee.employmentType}
-                </div>
-              </div>
-
-              {/* Card Actions */}
-              <div className="flex justify-end space-x-1 mt-2 pt-2 border-t border-gray-100">
-                <button
-                  onClick={() => handleViewEmployee(employee)}
-                  className="p-1 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
-                  title="Görüntüle"
-                >
-                  <FaEye className="w-4 h-4" />
-                </button>
-                <Link
-                  to={`/admin/hr/employees/edit/${employee.id}`}
-                  className="p-1 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
-                  title="Düzenle"
-                >
-                  <FaEdit className="w-4 h-4" />
-                </Link>
-                <button
-                  onClick={() =>
-                    alert("Performans değerlendirme özelliği yakında eklenecek")
-                  }
-                  className="p-1 text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
-                  title="Performans"
-                >
-                  <FaAward className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {(!employees || employees.length === 0) && (
-        <div className="text-center py-12">
-          <FaUsers className="mx-auto h-10 w-10 text-gray-400" />
-          <h3 className="mt-2 text-xs font-medium text-gray-900">
-            Personel bulunamadı
-          </h3>
-          <p className="mt-1 text-xs text-gray-500">
-            Yeni personel ekleyerek başlayın.
-          </p>
-          <div className="mt-6">
+            {/* Add New Employee */}
             <Link
               to="/admin/hr/employees/new"
-              className="inline-flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              className="flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
             >
               <FaPlus size={16} className="mr-2" />
-              Yeni Personel Ekle
+              Yeni Personel
             </Link>
           </div>
         </div>
-      )}
+
+        {/* Filters Panel */}
+        {showFilters && (
+          <div className="bg-white border border-gray-200 rounded-lg p-3">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Durum</label>
+                <select
+                  value={filterStatus}
+                  onChange={(e) => setFilterStatus(e.target.value)}
+                  className="w-full border border-gray-300 rounded-lg px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                >
+                  <option value="all">Tümü</option>
+                  <option value={EmployeeStatusEnum.Active}>Aktif</option>
+                  <option value={EmployeeStatusEnum.Inactive}>Pasif</option>
+                  <option value={EmployeeStatusEnum.OnLeave}>İzinli</option>
+                  <option value={EmployeeStatusEnum.Suspended}>Askıda</option>
+                  <option value={EmployeeStatusEnum.Terminated}>İşten Çıkarıldı</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Departman</label>
+                <select
+                  value={filterDepartment}
+                  onChange={(e) => setFilterDepartment(e.target.value)}
+                  className="w-full border border-gray-300 rounded-lg px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                >
+                  <option value="all">Tümü</option>
+                  <option value="IT">Bilgi İşlem</option>
+                  <option value="PROC">Satınalma</option>
+                  <option value="PROD">Üretim</option>
+                  <option value="HR">İnsan Kaynakları</option>
+                </select>
+              </div>
+
+              <div className="flex items-end">
+                <button
+                  onClick={() => {
+                    setFilterStatus('all')
+                    setFilterDepartment('all')
+                    setSearchTerm('')
+                  }}
+                  className="w-full px-3 py-1 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  Filtreleri Temizle
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Statistics Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <Widget
+            title="Toplam Personel"
+            value={employees?.length || 0}
+            color="blue"
+            icon="FaUsers"
+          />
+
+          <Widget
+            title="Aktif Personel"
+            value={
+              employees?.filter((e) => e.employeeStatus === EmployeeStatusEnum.Active).length || 0
+            }
+            color="green"
+            icon="FaCheckCircle"
+          />
+
+          <Widget
+            title="İzinli Personel"
+            value={
+              employees?.filter((e) => e.employeeStatus === EmployeeStatusEnum.OnLeave).length || 0
+            }
+            color="yellow"
+            icon="FaCalendar"
+          />
+
+          <Widget
+            title="Yeni İşe Alınanlar"
+            value={
+              employees?.filter((e) => dayjs(e.hireDate).isAfter(dayjs().subtract(30, 'day')))
+                .length || 0
+            }
+            color="purple"
+            icon="FaArrowUp"
+          />
+        </div>
+
+        {/* Employees Display */}
+        {viewMode === 'list' ? (
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 text-xs">
+            <div className="px-3 py-2 border-b border-gray-200">
+              <h2 className="text-xl font-bold text-gray-900">Personel Listesi</h2>
+            </div>
+
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Personel Bilgileri
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      İletişim
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Pozisyon / Departman
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      İstihdam Bilgileri
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Maaş
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Durum
+                    </th>
+                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      İşlemler
+                    </th>
+                  </tr>
+                </thead>
+
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {employees?.map((employee) => (
+                    <tr key={employee.id} className="hover:bg-gray-50 transition-colors text-xs">
+                      <td className="px-3 py-2">
+                        <div className="flex items-center">
+                          <div className="flex-shrink-0 h-10 w-10">
+                            <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
+                              <FaUsers className="h-5 w-5 text-blue-600" />
+                            </div>
+                          </div>
+                          <div className="ml-4">
+                            <div className="text-xs font-medium text-gray-900">{employee.code}</div>
+                            <div className="text-xs text-gray-500">{employee.fullName}</div>
+                            {employee.badgeNumber && (
+                              <div className="text-xs text-gray-400 mt-1">
+                                Rozet: {employee.badgeNumber}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </td>
+
+                      <td className="px-3 py-2">
+                        <div className="space-y-1">
+                          <div className="flex items-center text-xs text-gray-900">
+                            <FaEnvelope size={14} className="mr-1" />
+                            {employee.email}
+                          </div>
+                          {employee.phone && (
+                            <div className="flex items-center text-xs text-gray-500">
+                              <FaPhone size={14} className="mr-1" />
+                              {employee.phone}
+                            </div>
+                          )}
+                        </div>
+                      </td>
+
+                      <td className="px-3 py-2">
+                        <div>
+                          <div className="text-xs font-medium text-gray-900">
+                            {employee.jobPosition?.name}
+                          </div>
+                          <div className="flex items-center text-xs text-gray-500">
+                            <FaBuilding size={14} className="mr-1" />
+                            {employee.department?.name}
+                          </div>
+                          <div className="text-xs text-gray-400 mt-1">{employee.workLocation}</div>
+                        </div>
+                      </td>
+
+                      <td className="px-3 py-2">
+                        <div className="space-y-1">
+                          <div
+                            className={classNames(
+                              'text-xs font-medium',
+                              getEmploymentTypeColor(employee.employmentType),
+                            )}
+                          >
+                            {getEmploymentTypeText(employee.employmentType)}
+                          </div>
+                          <div className="flex items-center text-xs text-gray-500">
+                            <FaCalendar size={14} className="mr-1" />
+                            {dayjs(employee.hireDate).format('DD.MM.YYYY')}
+                          </div>
+                          <div className="text-xs text-gray-400">
+                            {dayjs().diff(employee.hireDate, 'year')} yıl deneyim
+                          </div>
+                        </div>
+                      </td>
+
+                      <td className="px-3 py-2">
+                        <div className="text-xs font-medium text-gray-900">
+                          ₺{employee.baseSalary.toLocaleString()}
+                        </div>
+                        <div className="text-xs text-gray-500">{employee.payrollGroup}</div>
+                      </td>
+
+                      <td className="px-3 py-2">
+                        <span
+                          className={classNames(
+                            'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
+                            getEmployeeStatusColor(employee.employeeStatus),
+                          )}
+                        >
+                          {getEmployeeStatusIcon(employee.employeeStatus)}
+                          <span className="ml-1">
+                            {getEmployeeStatusText(employee.employeeStatus)}
+                          </span>
+                        </span>
+                      </td>
+
+                      <td className="px-3 py-2 text-right">
+                        <div className="flex items-center justify-end space-x-2">
+                          <button
+                            onClick={() => handleViewEmployee(employee)}
+                            className="p-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                            title="Detayları Görüntüle"
+                          >
+                            <FaEye size={16} />
+                          </button>
+
+                          <Link
+                            to={`/admin/hr/employees/edit/${employee.id}`}
+                            className="p-1 text-gray-600 hover:text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors"
+                            title="Düzenle"
+                          >
+                            <FaEdit size={16} />
+                          </Link>
+
+                          <button
+                            onClick={() =>
+                              alert('Performans değerlendirme özelliği yakında eklenecek')
+                            }
+                            className="p-1 text-gray-600 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
+                            title="Performans Değerlendirmesi"
+                          >
+                            <FaAward size={16} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {(!employees || employees.length === 0) && (
+              <div className="text-center py-12">
+                <FaUsers className="mx-auto h-10 w-10 text-gray-400" />
+                <h3 className="mt-2 text-xs font-medium text-gray-900">Personel bulunamadı</h3>
+                <p className="mt-1 text-xs text-gray-500">Yeni personel ekleyerek başlayın.</p>
+                <div className="mt-6">
+                  <Link
+                    to="/admin/hr/employees/new"
+                    className="inline-flex items-center px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                  >
+                    <FaPlus size={16} className="mr-2" />
+                    Yeni Personel Ekle
+                  </Link>
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+            {employees?.map((employee) => (
+              <div
+                key={employee.id}
+                className="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow p-3"
+              >
+                {/* Card Header */}
+                <div className="flex items-start space-x-4 mb-4">
+                  <div className="flex-shrink-0">
+                    <div className="h-12 w-12 rounded-full bg-blue-500 flex items-center justify-center">
+                      <span className="text-lg font-medium text-white">
+                        {employee.firstName.charAt(0)}
+                        {employee.lastName.charAt(0)}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-base font-semibold text-gray-900 truncate">
+                      {employee.fullName}
+                    </h3>
+                    <p className="text-sm text-gray-500">{employee.code}</p>
+                    <span
+                      className={classNames(
+                        'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium mt-1',
+                        getEmployeeStatusColor(employee.employeeStatus),
+                      )}
+                    >
+                      {getEmployeeStatusIcon(employee.employeeStatus)}
+                      <span className="ml-1">{getEmployeeStatusText(employee.employeeStatus)}</span>
+                    </span>
+                  </div>
+                </div>
+
+                {/* Card Content */}
+                <div className="space-y-1.5">
+                  <div className="flex items-center text-sm text-gray-600">
+                    <FaBriefcase className="w-4 h-4 mr-2 text-gray-400" />
+                    <span>{employee.jobPosition?.name || 'Pozisyon belirtilmemiş'}</span>
+                  </div>
+
+                  <div className="flex items-center text-sm text-gray-600">
+                    <FaBuilding className="w-4 h-4 mr-2 text-gray-400" />
+                    <span>{employee.department?.name || 'Departman belirtilmemiş'}</span>
+                  </div>
+
+                  <div className="flex items-center text-sm text-gray-600">
+                    <FaEnvelope className="w-4 h-4 mr-2 text-gray-400" />
+                    <span className="truncate">{employee.email}</span>
+                  </div>
+
+                  {employee.phone && (
+                    <div className="flex items-center text-sm text-gray-600">
+                      <FaPhone className="w-4 h-4 mr-2 text-gray-400" />
+                      <span>{employee.phone}</span>
+                    </div>
+                  )}
+
+                  <div className="flex items-center text-sm text-gray-600">
+                    <FaCalendar className="w-4 h-4 mr-2 text-gray-400" />
+                    <span>İşe Başlama: {dayjs(employee.hireDate).format('DD.MM.YYYY')}</span>
+                  </div>
+
+                  <div className="text-sm text-gray-600">
+                    <span className="font-medium">İstihdam Türü:</span> {employee.employmentType}
+                  </div>
+                </div>
+
+                {/* Card Actions */}
+                <div className="flex justify-end space-x-1 mt-2 pt-2 border-t border-gray-100">
+                  <button
+                    onClick={() => handleViewEmployee(employee)}
+                    className="p-1 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
+                    title="Görüntüle"
+                  >
+                    <FaEye className="w-4 h-4" />
+                  </button>
+                  <Link
+                    to={`/admin/hr/employees/edit/${employee.id}`}
+                    className="p-1 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                    title="Düzenle"
+                  >
+                    <FaEdit className="w-4 h-4" />
+                  </Link>
+                  <button
+                    onClick={() => alert('Performans değerlendirme özelliği yakında eklenecek')}
+                    className="p-1 text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
+                    title="Performans"
+                  >
+                    <FaAward className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {(!employees || employees.length === 0) && (
+          <div className="text-center py-12">
+            <FaUsers className="mx-auto h-10 w-10 text-gray-400" />
+            <h3 className="mt-2 text-xs font-medium text-gray-900">Personel bulunamadı</h3>
+            <p className="mt-1 text-xs text-gray-500">Yeni personel ekleyerek başlayın.</p>
+            <div className="mt-6">
+              <Link
+                to="/admin/hr/employees/new"
+                className="inline-flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                <FaPlus size={16} className="mr-2" />
+                Yeni Personel Ekle
+              </Link>
+            </div>
+          </div>
+        )}
+      </div>
 
       {/* Employee View Modal */}
-      <EmployeeViewModal
+      <EmployeeView
         isOpen={isViewModalOpen}
         onClose={handleCloseViewModal}
         employee={selectedEmployee}
         onEdit={handleEditFromView}
       />
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default EmployeeList;
+export default EmployeeList
diff --git a/ui/src/views/hr/components/EmployeeView.tsx b/ui/src/views/hr/components/EmployeeView.tsx
index e284ed6d..71ff2002 100644
--- a/ui/src/views/hr/components/EmployeeView.tsx
+++ b/ui/src/views/hr/components/EmployeeView.tsx
@@ -1,77 +1,497 @@
-import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+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 { mockEmployees } from "../../../mocks/mockEmployees";
-import EmployeeViewModal from "./EmployeeViewModal";
-import LoadingSpinner from "../../../components/common/LoadingSpinner";
+import {
+  getEmployeeStatusColor,
+  getEmployeeStatusIcon,
+  getEmployeeStatusText,
+} from "../../../utils/erp";
 
-const EmployeeView: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const [employee, setEmployee] = useState<HrEmployee | null>(null);
-  const [loading, setLoading] = useState(true);
+interface EmployeeViewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  employee: HrEmployee | null;
+  onEdit?: (employee: HrEmployee) => void;
+}
 
-  useEffect(() => {
-    const loadEmployee = async () => {
-      setLoading(true);
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 300));
+const EmployeeViewModal: React.FC<EmployeeViewModalProps> = ({
+  isOpen,
+  onClose,
+  employee,
+  onEdit,
+}) => {
+  if (!isOpen || !employee) return null;
 
-      const foundEmployee = mockEmployees.find((emp) => emp.id === id);
-      setEmployee(foundEmployee || null);
-      setLoading(false);
-    };
+  const formatDate = (date: Date | string): string => {
+    return new Date(date).toLocaleDateString("tr-TR");
+  };
 
-    if (id) {
-      loadEmployee();
+  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`;
     }
-  }, [id]);
-
-  const handleClose = () => {
-    navigate("/admin/hr/employees");
+    return `${months} ay`;
   };
 
-  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 (
-    <EmployeeViewModal
-      isOpen={true}
-      onClose={handleClose}
-      employee={employee}
-      onEdit={handleEdit}
-    />
+    <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 EmployeeView;
+export default EmployeeViewModal;
diff --git a/ui/src/views/hr/components/EmployeeViewModal.tsx b/ui/src/views/hr/components/EmployeeViewModal.tsx
deleted file mode 100644
index 71ff2002..00000000
--- a/ui/src/views/hr/components/EmployeeViewModal.tsx
+++ /dev/null
@@ -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;
diff --git a/ui/src/views/hr/components/EmploymentTypes.tsx b/ui/src/views/hr/components/EmploymentTypes.tsx
index b102a5cc..2d6ba6d9 100644
--- a/ui/src/views/hr/components/EmploymentTypes.tsx
+++ b/ui/src/views/hr/components/EmploymentTypes.tsx
@@ -1,324 +1,305 @@
-import React, { useState } from "react";
-import { FaPlus, FaEdit, FaEye, FaTh, FaList, FaSearch } from "react-icons/fa";
-import { EmploymentTypeEnum } from "../../../types/hr";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockEmployeeTypes } from "../../../mocks/mockEmployeeTypes";
-import Widget from "../../../components/common/Widget";
-import {
-  getEmploymentTypeColor,
-  getEmploymentTypeText,
-} from "../../../utils/erp";
+import React, { useState } from 'react'
+import { FaPlus, FaEdit, FaEye, FaTh, FaList, FaSearch } from 'react-icons/fa'
+import { EmploymentTypeEnum } from '../../../types/hr'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockEmployeeTypes } from '../../../mocks/mockEmployeeTypes'
+import Widget from '../../../components/common/Widget'
+import { getEmploymentTypeColor, getEmploymentTypeText } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const EmploymentTypes: React.FC = () => {
-  const [viewMode, setViewMode] = useState<"card" | "list">("list");
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedEmploymentType, setSelectedEmploymentType] =
-    useState<EmploymentTypeEnum | null>(null);
-  const [showModal, setShowModal] = useState(false);
-  const [modalMode, setModalMode] = useState<"new" | "edit" | "view">("view");
+  const [viewMode, setViewMode] = useState<'card' | 'list'>('list')
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedEmploymentType, setSelectedEmploymentType] = useState<EmploymentTypeEnum | null>(
+    null,
+  )
+  const [showModal, setShowModal] = useState(false)
+  const [modalMode, setModalMode] = useState<'new' | 'edit' | 'view'>('view')
 
   const handleNewEmploymentType = () => {
-    setModalMode("new");
-    setSelectedEmploymentType(null);
-    setShowModal(true);
-  };
+    setModalMode('new')
+    setSelectedEmploymentType(null)
+    setShowModal(true)
+  }
 
   const handleEditEmploymentType = (type: EmploymentTypeEnum) => {
-    setModalMode("edit");
-    setSelectedEmploymentType(type);
-    setShowModal(true);
-  };
+    setModalMode('edit')
+    setSelectedEmploymentType(type)
+    setShowModal(true)
+  }
 
   const handleViewEmploymentType = (type: EmploymentTypeEnum) => {
-    setModalMode("view");
-    setSelectedEmploymentType(type);
-    setShowModal(true);
-  };
+    setModalMode('view')
+    setSelectedEmploymentType(type)
+    setShowModal(true)
+  }
 
   // Filter employee types based on search term
   const filteredEmployeeTypes = mockEmployeeTypes.filter((employeeType) =>
     getEmploymentTypeText(employeeType.name as EmploymentTypeEnum)
       .toLowerCase()
-      .includes(searchTerm.toLowerCase())
-  );
+      .includes(searchTerm.toLowerCase()),
+  )
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex flex-col gap-4">
-        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-          <div>
-            <h2 className="text-xl font-bold text-gray-900">
-              İstihdam Türleri
-            </h2>
-            <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>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div>
+              <h2 className="text-xl font-bold text-gray-900">İstihdam Türleri</h2>
+              <p className="text-gray-600 mt-1">Personel istihdam türleri ve dağılımı</p>
             </div>
 
-            {/* New Button - Visible on mobile */}
-            <div className="sm:hidden">
+            {/* 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 className="text-sm">Yeni</span>
+                <span>Yeni</span>
               </button>
             </div>
           </div>
-        </div>
-      </div>
 
-      {/* Overview Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        <Widget
-          title="Toplam Personel"
-          value={mockEmployees.length}
-          color="blue"
-          icon="FaUsers"
-        />
+          {/* 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>
 
-        <Widget
-          title="Tam Zamanlı"
-          value={
-            mockEmployees.filter(
-              (a) => a.employmentType === EmploymentTypeEnum.FullTime
-            ).length || 0
-          }
-          color="green"
-          icon="FaClock"
-        />
-
-        <Widget
-          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"
+            {/* 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ü"
                 >
-                  <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>
+                  <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 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>
-              );
-            })}
+              {/* New Button - Visible on mobile */}
+              <div className="sm:hidden">
+                <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 className="text-sm">Yeni</span>
+                </button>
+              </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
-                            className={`w-4 h-4 rounded-full mr-3 ${getEmploymentTypeColor(
-                              type
-                            )}`}
-                          />
-                          <div className="text-sm font-medium text-gray-900">
-                            {getEmploymentTypeText(type)}
-                          </div>
-                        </div>
-                      </td>
-                      <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                        {count}
-                      </td>
-                      <td className="px-3 py-2 whitespace-nowrap">
-                        <div className="flex items-center">
-                          <div className="w-16 bg-gray-200 rounded-full h-2 mr-2">
+        </div>
+
+        {/* Overview Stats */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          <Widget
+            title="Toplam Personel"
+            value={mockEmployees.length}
+            color="blue"
+            icon="FaUsers"
+          />
+
+          <Widget
+            title="Tam Zamanlı"
+            value={
+              mockEmployees.filter((a) => a.employmentType === EmploymentTypeEnum.FullTime)
+                .length || 0
+            }
+            color="green"
+            icon="FaClock"
+          />
+
+          <Widget
+            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">
+                      <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
-                              className={`h-2 rounded-full ${getEmploymentTypeColor(
-                                type
+                              className={`w-4 h-4 rounded-full mr-3 ${getEmploymentTypeColor(
+                                type,
                               )}`}
-                              style={{ width: `${percentage}%` }}
                             />
+                            <div className="text-sm font-medium text-gray-900">
+                              {getEmploymentTypeText(type)}
+                            </div>
                           </div>
-                          <span className="text-sm text-gray-900">
-                            {percentage.toFixed(1)}%
-                          </span>
-                        </div>
-                      </td>
-                      <td className="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
-                        <div className="flex justify-end gap-2">
-                          <button
-                            onClick={() => handleViewEmploymentType(type)}
-                            className="text-blue-600 hover:text-blue-900 p-1"
-                            title="Görüntüle"
-                          >
-                            <FaEye className="w-4 h-4" />
-                          </button>
-                          <button
-                            onClick={() => handleEditEmploymentType(type)}
-                            className="text-yellow-600 hover:text-yellow-900 p-1"
-                            title="Düzenle"
-                          >
-                            <FaEdit className="w-4 h-4" />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        )}
+                        </td>
+                        <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                          {count}
+                        </td>
+                        <td className="px-3 py-2 whitespace-nowrap">
+                          <div className="flex items-center">
+                            <div className="w-16 bg-gray-200 rounded-full h-2 mr-2">
+                              <div
+                                className={`h-2 rounded-full ${getEmploymentTypeColor(type)}`}
+                                style={{ width: `${percentage}%` }}
+                              />
+                            </div>
+                            <span className="text-sm text-gray-900">{percentage.toFixed(1)}%</span>
+                          </div>
+                        </td>
+                        <td className="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
+                          <div className="flex justify-end gap-2">
+                            <button
+                              onClick={() => handleViewEmploymentType(type)}
+                              className="text-blue-600 hover:text-blue-900 p-1"
+                              title="Görüntüle"
+                            >
+                              <FaEye className="w-4 h-4" />
+                            </button>
+                            <button
+                              onClick={() => handleEditEmploymentType(type)}
+                              className="text-yellow-600 hover:text-yellow-900 p-1"
+                              title="Düzenle"
+                            >
+                              <FaEdit className="w-4 h-4" />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
       </div>
 
       {/* 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="flex justify-between items-center mb-4">
               <h3 className="text-base font-semibold">
-                {modalMode === "new" && "Yeni İstihdam Türü"}
-                {modalMode === "edit" && "İstihdam Türünü Düzenle"}
-                {modalMode === "view" && "İstihdam Türü Detayları"}
+                {modalMode === 'new' && 'Yeni İstihdam Türü'}
+                {modalMode === 'edit' && 'İstihdam Türünü Düzenle'}
+                {modalMode === 'view' && 'İstihdam Türü Detayları'}
               </h3>
               <button
                 onClick={() => setShowModal(false)}
@@ -340,7 +321,7 @@ const EmploymentTypes: React.FC = () => {
             </div>
 
             <div className="space-y-4">
-              {modalMode === "new" && (
+              {modalMode === 'new' && (
                 <div className="space-y-4">
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
@@ -353,9 +334,7 @@ const EmploymentTypes: React.FC = () => {
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                      Açıklama
-                    </label>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
                     <textarea
                       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"
@@ -365,7 +344,7 @@ const EmploymentTypes: React.FC = () => {
                 </div>
               )}
 
-              {modalMode === "edit" && selectedEmploymentType && (
+              {modalMode === 'edit' && selectedEmploymentType && (
                 <div className="space-y-4">
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
@@ -373,16 +352,12 @@ const EmploymentTypes: React.FC = () => {
                     </label>
                     <input
                       type="text"
-                      defaultValue={getEmploymentTypeText(
-                        selectedEmploymentType
-                      )}
+                      defaultValue={getEmploymentTypeText(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"
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                      Açıklama
-                    </label>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
                     <textarea
                       rows={3}
                       defaultValue="Bu istihdam türüne ait açıklama..."
@@ -392,7 +367,7 @@ const EmploymentTypes: React.FC = () => {
                 </div>
               )}
 
-              {modalMode === "view" && selectedEmploymentType && (
+              {modalMode === 'view' && selectedEmploymentType && (
                 <div className="space-y-4">
                   <div>
                     <p className="text-sm text-gray-600">İstihdam Türü:</p>
@@ -401,15 +376,12 @@ const EmploymentTypes: React.FC = () => {
                     </p>
                   </div>
                   <div>
-                    <p className="text-sm text-gray-600">
-                      Toplam Personel Sayısı:
-                    </p>
+                    <p className="text-sm text-gray-600">Toplam Personel Sayısı:</p>
                     <p className="font-medium">
                       {
-                        mockEmployees.filter(
-                          (emp) => emp.employmentType === selectedEmploymentType
-                        ).length
-                      }{" "}
+                        mockEmployees.filter((emp) => emp.employmentType === selectedEmploymentType)
+                          .length
+                      }{' '}
                       kişi
                     </p>
                   </div>
@@ -418,7 +390,7 @@ const EmploymentTypes: React.FC = () => {
                     <div className="flex items-center gap-2">
                       <div
                         className={`w-4 h-4 rounded-full ${getEmploymentTypeColor(
-                          selectedEmploymentType
+                          selectedEmploymentType,
                         )}`}
                       />
                       <span className="text-sm">
@@ -427,14 +399,10 @@ const EmploymentTypes: React.FC = () => {
                     </div>
                   </div>
                   <div>
-                    <p className="text-sm text-gray-600 mb-2">
-                      Bu istihdam türündeki personeller:
-                    </p>
+                    <p className="text-sm text-gray-600 mb-2">Bu istihdam türündeki personeller:</p>
                     <div className="max-h-32 overflow-y-auto bg-gray-50 rounded p-2">
                       {mockEmployees
-                        .filter(
-                          (emp) => emp.employmentType === selectedEmploymentType
-                        )
+                        .filter((emp) => emp.employmentType === selectedEmploymentType)
                         .slice(0, 10)
                         .map((emp) => (
                           <div
@@ -444,15 +412,13 @@ const EmploymentTypes: React.FC = () => {
                             {emp.fullName} - {emp.department?.name}
                           </div>
                         ))}
-                      {mockEmployees.filter(
-                        (emp) => emp.employmentType === selectedEmploymentType
-                      ).length > 10 && (
+                      {mockEmployees.filter((emp) => emp.employmentType === selectedEmploymentType)
+                        .length > 10 && (
                         <div className="text-xs text-gray-500 pt-2">
                           +
                           {mockEmployees.filter(
-                            (emp) =>
-                              emp.employmentType === selectedEmploymentType
-                          ).length - 10}{" "}
+                            (emp) => emp.employmentType === selectedEmploymentType,
+                          ).length - 10}{' '}
                           kişi daha...
                         </div>
                       )}
@@ -467,22 +433,22 @@ const EmploymentTypes: React.FC = () => {
                 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"
               >
-                {modalMode === "view" ? "Kapat" : "İptal"}
+                {modalMode === 'view' ? 'Kapat' : 'İptal'}
               </button>
-              {modalMode !== "view" && (
+              {modalMode !== 'view' && (
                 <button
                   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"
                 >
-                  {modalMode === "new" ? "Oluştur" : "Güncelle"}
+                  {modalMode === 'new' ? 'Oluştur' : 'Güncelle'}
                 </button>
               )}
             </div>
           </div>
         </div>
       )}
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default EmploymentTypes;
+export default EmploymentTypes
diff --git a/ui/src/views/hr/components/JobPositions.tsx b/ui/src/views/hr/components/JobPositions.tsx
index 3595b60d..8db239a9 100644
--- a/ui/src/views/hr/components/JobPositions.tsx
+++ b/ui/src/views/hr/components/JobPositions.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaBriefcase,
   FaPlus,
@@ -10,51 +10,50 @@ import {
   FaEye,
   FaTh,
   FaList,
-} from "react-icons/fa";
-import { HrJobPosition, JobLevelEnum } from "../../../types/hr";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockJobPositions } from "../../../mocks/mockJobPositions";
-import JobPositionFormModal from "./JobPositionFormModal";
-import JobPositionViewModal from "./JobPositionViewModal";
-import { getJobLevelColor, getJobLevelText } from "../../../utils/erp";
+} from 'react-icons/fa'
+import { HrJobPosition, JobLevelEnum } from '../../../types/hr'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockJobPositions } from '../../../mocks/mockJobPositions'
+import JobPositionFormModal from './JobPositionFormModal'
+import JobPositionViewModal from './JobPositionViewModal'
+import { getJobLevelColor, getJobLevelText } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const JobPositions: React.FC = () => {
-  const [positions, setPositions] = useState<HrJobPosition[]>(mockJobPositions);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedLevel, setSelectedLevel] = useState<string>("all");
-  const [selectedDepartment, setSelectedDepartment] = useState<string>("all");
-  const [viewMode, setViewMode] = useState<"list" | "card">("list");
+  const [positions, setPositions] = useState<HrJobPosition[]>(mockJobPositions)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedLevel, setSelectedLevel] = useState<string>('all')
+  const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
+  const [viewMode, setViewMode] = useState<'list' | 'card'>('list')
 
   // Modal states
-  const [isFormModalOpen, setIsFormModalOpen] = useState(false);
-  const [isViewModalOpen, setIsViewModalOpen] = useState(false);
-  const [selectedPosition, setSelectedPosition] = useState<
-    HrJobPosition | undefined
-  >(undefined);
-  const [modalTitle, setModalTitle] = useState("");
+  const [isFormModalOpen, setIsFormModalOpen] = useState(false)
+  const [isViewModalOpen, setIsViewModalOpen] = useState(false)
+  const [selectedPosition, setSelectedPosition] = useState<HrJobPosition | undefined>(undefined)
+  const [modalTitle, setModalTitle] = useState('')
 
   const handleAdd = () => {
-    setSelectedPosition(undefined);
-    setModalTitle("Yeni İş Pozisyonu");
-    setIsFormModalOpen(true);
-  };
+    setSelectedPosition(undefined)
+    setModalTitle('Yeni İş Pozisyonu')
+    setIsFormModalOpen(true)
+  }
 
   const handleEdit = (position: HrJobPosition) => {
-    setSelectedPosition(position);
-    setModalTitle("İş Pozisyonu Düzenle");
-    setIsFormModalOpen(true);
-  };
+    setSelectedPosition(position)
+    setModalTitle('İş Pozisyonu Düzenle')
+    setIsFormModalOpen(true)
+  }
 
   const handleView = (position: HrJobPosition) => {
-    setSelectedPosition(position);
-    setIsViewModalOpen(true);
-  };
+    setSelectedPosition(position)
+    setIsViewModalOpen(true)
+  }
 
   const handleDelete = (id: string) => {
-    if (window.confirm("Bu pozisyonu silmek istediğinizden emin misiniz?")) {
-      setPositions(positions.filter((p) => p.id !== id));
+    if (window.confirm('Bu pozisyonu silmek istediğinizden emin misiniz?')) {
+      setPositions(positions.filter((p) => p.id !== id))
     }
-  };
+  }
 
   const handleSavePosition = (positionData: Partial<HrJobPosition>) => {
     if (selectedPosition) {
@@ -63,12 +62,8 @@ const JobPositions: React.FC = () => {
         ...selectedPosition,
         ...positionData,
         lastModificationTime: new Date(),
-      };
-      setPositions(
-        positions.map((p) =>
-          p.id === selectedPosition.id ? updatedPosition : p
-        )
-      );
+      }
+      setPositions(positions.map((p) => (p.id === selectedPosition.id ? updatedPosition : p)))
     } else {
       // Add new position
       const newPosition: HrJobPosition = {
@@ -77,21 +72,21 @@ const JobPositions: React.FC = () => {
         employees: [],
         creationTime: new Date(),
         lastModificationTime: new Date(),
-      } as HrJobPosition;
-      setPositions([...positions, newPosition]);
+      } as HrJobPosition
+      setPositions([...positions, newPosition])
     }
-  };
+  }
 
   const closeFormModal = () => {
-    setIsFormModalOpen(false);
-    setSelectedPosition(undefined);
-    setModalTitle("");
-  };
+    setIsFormModalOpen(false)
+    setSelectedPosition(undefined)
+    setModalTitle('')
+  }
 
   const closeViewModal = () => {
-    setIsViewModalOpen(false);
-    setSelectedPosition(undefined);
-  };
+    setIsViewModalOpen(false)
+    setSelectedPosition(undefined)
+  }
 
   const filteredPositions = positions.filter((position) => {
     if (
@@ -99,34 +94,27 @@ const JobPositions: React.FC = () => {
       !position.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
       !position.code.toLowerCase().includes(searchTerm.toLowerCase())
     ) {
-      return false;
+      return false
     }
-    if (selectedLevel !== "all" && position.level !== selectedLevel) {
-      return false;
+    if (selectedLevel !== 'all' && position.level !== selectedLevel) {
+      return false
     }
-    if (
-      selectedDepartment !== "all" &&
-      position.department?.id !== selectedDepartment
-    ) {
-      return false;
+    if (selectedDepartment !== 'all' && position.department?.id !== selectedDepartment) {
+      return false
     }
-    return true;
-  });
+    return true
+  })
 
   // Card component for individual position
-  const PositionCard: React.FC<{ position: HrJobPosition }> = ({
-    position,
-  }) => (
+  const PositionCard: React.FC<{ position: HrJobPosition }> = ({ position }) => (
     <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-1">
           <div className="flex items-center gap-2 mb-2">
-            <h3 className="text-base font-semibold text-gray-900">
-              {position.name}
-            </h3>
+            <h3 className="text-base font-semibold text-gray-900">{position.name}</h3>
             <span
               className={`px-2 py-1 text-xs font-medium rounded-full ${getJobLevelColor(
-                position.level
+                position.level,
               )}`}
             >
               {getJobLevelText(position.level)}
@@ -136,9 +124,9 @@ const JobPositions: React.FC = () => {
           <p
             className="text-sm text-gray-700 overflow-hidden"
             style={{
-              display: "-webkit-box",
+              display: '-webkit-box',
               WebkitLineClamp: 2,
-              WebkitBoxOrient: "vertical",
+              WebkitBoxOrient: 'vertical',
             }}
           >
             {position.description}
@@ -146,19 +134,17 @@ const JobPositions: React.FC = () => {
         </div>
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${
-            position.isActive
-              ? "bg-green-100 text-green-800"
-              : "bg-red-100 text-red-800"
+            position.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
           }`}
         >
-          {position.isActive ? "Aktif" : "Pasif"}
+          {position.isActive ? 'Aktif' : 'Pasif'}
         </span>
       </div>
 
       <div className="space-y-2 mb-3">
         <div className="flex items-center gap-2 text-sm text-gray-600">
           <FaBuilding className="w-4 h-4" />
-          <span>{position.department?.name || "Departman belirtilmemiş"}</span>
+          <span>{position.department?.name || 'Departman belirtilmemiş'}</span>
         </div>
 
         <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">
           <FaDollarSign className="w-4 h-4" />
           <span>
-            ₺{position.minSalary.toLocaleString()} - ₺
-            {position.maxSalary.toLocaleString()}
+            ₺{position.minSalary.toLocaleString()} - ₺{position.maxSalary.toLocaleString()}
           </span>
         </div>
       </div>
 
       <div className="mb-3">
-        <p className="text-xs font-medium text-gray-500 mb-2">
-          Gerekli Yetenekler
-        </p>
+        <p className="text-xs font-medium text-gray-500 mb-2">Gerekli Yetenekler</p>
         <div className="flex flex-wrap gap-1">
           {position.requiredSkills?.slice(0, 4).map((skill, index) => (
-            <span
-              key={index}
-              className="px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded"
-            >
+            <span key={index} className="px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded">
               {skill}
             </span>
           ))}
@@ -219,44 +199,42 @@ const JobPositions: React.FC = () => {
         </button>
       </div>
     </div>
-  );
+  )
 
   const columns: Column<HrJobPosition>[] = [
     {
-      key: "code",
-      header: "Pozisyon Kodu",
+      key: 'code',
+      header: 'Pozisyon Kodu',
       sortable: true,
     },
     {
-      key: "title",
-      header: "Pozisyon Adı",
+      key: 'title',
+      header: 'Pozisyon Adı',
       sortable: true,
       render: (position: HrJobPosition) => (
         <div>
           <div className="font-medium text-gray-900">{position.name}</div>
-          <div className="text-sm text-gray-500 truncate max-w-xs">
-            {position.description}
-          </div>
+          <div className="text-sm text-gray-500 truncate max-w-xs">{position.description}</div>
         </div>
       ),
     },
     {
-      key: "department",
-      header: "Departman",
+      key: 'department',
+      header: 'Departman',
       render: (position: HrJobPosition) => (
         <div className="flex items-center gap-2">
           <FaBuilding className="w-4 h-4 text-gray-500" />
-          <span>{position.department?.name || "-"}</span>
+          <span>{position.department?.name || '-'}</span>
         </div>
       ),
     },
     {
-      key: "level",
-      header: "Seviye",
+      key: 'level',
+      header: 'Seviye',
       render: (position: HrJobPosition) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getJobLevelColor(
-            position.level
+            position.level,
           )}`}
         >
           {getJobLevelText(position.level)}
@@ -264,8 +242,8 @@ const JobPositions: React.FC = () => {
       ),
     },
     {
-      key: "employeeCount",
-      header: "Personel Sayısı",
+      key: 'employeeCount',
+      header: 'Personel Sayısı',
       render: (position: HrJobPosition) => (
         <div className="flex items-center gap-1">
           <FaUsers className="w-4 h-4 text-gray-500" />
@@ -274,30 +252,25 @@ const JobPositions: React.FC = () => {
       ),
     },
     {
-      key: "salary",
-      header: "Maaş Aralığı",
+      key: 'salary',
+      header: 'Maaş Aralığı',
       render: (position: HrJobPosition) => (
         <div className="flex items-center gap-1">
           <FaDollarSign className="w-4 h-4 text-gray-500" />
           <div className="text-sm">
             <div>₺{position.minSalary.toLocaleString()}</div>
-            <div className="text-gray-500">
-              ₺{position.maxSalary.toLocaleString()}
-            </div>
+            <div className="text-gray-500">₺{position.maxSalary.toLocaleString()}</div>
           </div>
         </div>
       ),
     },
     {
-      key: "skills",
-      header: "Gerekli Yetenekler",
+      key: 'skills',
+      header: 'Gerekli Yetenekler',
       render: (position: HrJobPosition) => (
         <div className="flex flex-wrap gap-1 max-w-xs">
           {position.requiredSkills?.slice(0, 3).map((skill, index) => (
-            <span
-              key={index}
-              className="px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded"
-            >
+            <span key={index} className="px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded">
               {skill}
             </span>
           ))}
@@ -310,23 +283,21 @@ const JobPositions: React.FC = () => {
       ),
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (position: HrJobPosition) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${
-            position.isActive
-              ? "bg-green-100 text-green-800"
-              : "bg-red-100 text-red-800"
+            position.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
           }`}
         >
-          {position.isActive ? "Aktif" : "Pasif"}
+          {position.isActive ? 'Aktif' : 'Pasif'}
         </span>
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (position: HrJobPosition) => (
         <div className="flex gap-2">
           <button
@@ -353,196 +324,173 @@ const JobPositions: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   // Get unique departments for filter
-  const departments = [
-    ...new Set(positions.map((p) => p.department).filter(Boolean)),
-  ];
+  const departments = [...new Set(positions.map((p) => p.department).filter(Boolean))]
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">İş Pozisyonları</h2>
-          <p className="text-sm text-gray-600 mt-1">
-            Şirket pozisyonları ve iş tanımları yönetimi
-          </p>
-        </div>
-        <div className="flex items-center gap-3">
-          {/* View Toggle */}
-          <div className="flex bg-gray-100 rounded-lg p-0.5">
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">İş Pozisyonları</h2>
+            <p className="text-sm text-gray-600 mt-1">
+              Şirket pozisyonları ve iş tanımları yönetimi
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            {/* 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
-              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"
-              }`}
+              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"
             >
-              <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" />
+              <FaPlus className="w-4 h-4" />
+              <span className="hidden sm:inline">Yeni Pozisyon</span>
+              <span className="sm:hidden">Yeni</span>
             </button>
           </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>
 
-      {/* Stats Cards */}
-      <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="flex items-center">
-            <FaBriefcase className="w-6 h-6 text-blue-600" />
-            <div className="ml-3">
-              <p className="text-xs font-medium text-gray-600">
-                Toplam Pozisyon
-              </p>
-              <p className="text-xl font-bold text-gray-900">
-                {positions.length}
-              </p>
+        {/* Stats Cards */}
+        <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="flex items-center">
+              <FaBriefcase className="w-6 h-6 text-blue-600" />
+              <div className="ml-3">
+                <p className="text-xs font-medium text-gray-600">Toplam Pozisyon</p>
+                <p className="text-xl font-bold text-gray-900">{positions.length}</p>
+              </div>
+            </div>
+          </div>
+
+          <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 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>
+        {/* 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>
 
-        <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>
+        {/* 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="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>
-
-      {/* 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>
+        ) : (
+          <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} />
             ))}
-          </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 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 */}
-      {filteredPositions.length === 0 && (
-        <div className="text-center py-12">
-          <FaBriefcase className="w-10 h-10 text-gray-400 mx-auto mb-3" />
-          <h3 className="text-base font-medium text-gray-900 mb-2">
-            Pozisyon bulunamadı
-          </h3>
-          <p className="text-sm text-gray-500">
-            Arama kriterlerinizi değiştirmeyi deneyin.
-          </p>
-        </div>
-      )}
+        {/* Empty State */}
+        {filteredPositions.length === 0 && (
+          <div className="text-center py-12">
+            <FaBriefcase className="w-10 h-10 text-gray-400 mx-auto mb-3" />
+            <h3 className="text-base font-medium text-gray-900 mb-2">Pozisyon bulunamadı</h3>
+            <p className="text-sm text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
+          </div>
+        )}
+      </div>
 
       {/* Modals */}
       <JobPositionFormModal
@@ -558,8 +506,8 @@ const JobPositions: React.FC = () => {
         onClose={closeViewModal}
         position={selectedPosition}
       />
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default JobPositions;
+export default JobPositions
diff --git a/ui/src/views/hr/components/LeaveManagement.tsx b/ui/src/views/hr/components/LeaveManagement.tsx
index 2667ca4a..2f265abf 100644
--- a/ui/src/views/hr/components/LeaveManagement.tsx
+++ b/ui/src/views/hr/components/LeaveManagement.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaCalendar,
   FaUser,
@@ -8,105 +8,102 @@ import {
   FaTimes,
   FaEye,
   FaUsers,
-} from "react-icons/fa";
-import { HrLeave, LeaveStatusEnum, LeaveTypeEnum } from "../../../types/hr";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockEmployeeLeaves } from "../../../mocks/mockEmployeeLeaves";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockDepartments } from "../../../mocks/mockDepartments";
-import Widget from "../../../components/common/Widget";
-import {
-  getLeaveTypeText,
-  getLeaveStatusColor,
-  getLeaveStatusText,
-} from "../../../utils/erp";
+} from 'react-icons/fa'
+import { HrLeave, LeaveStatusEnum, LeaveTypeEnum } from '../../../types/hr'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockEmployeeLeaves } from '../../../mocks/mockEmployeeLeaves'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockDepartments } from '../../../mocks/mockDepartments'
+import Widget from '../../../components/common/Widget'
+import { getLeaveTypeText, getLeaveStatusColor, getLeaveStatusText } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const LeaveManagement: React.FC = () => {
   // Leave states
-  const [leaves, setLeaves] = useState<HrLeave[]>(mockEmployeeLeaves);
-  const [selectedStatus, setSelectedStatus] = useState<string>("all");
-  const [selectedType, setSelectedType] = useState<string>("all");
-  const [selectedPeriod, setSelectedPeriod] = useState<string>("all");
-  const [selectedDepartment, setSelectedDepartment] = useState<string>("all");
-  const [searchLeavesTerm, setSearchLeavesTerm] = useState("");
+  const [leaves, setLeaves] = useState<HrLeave[]>(mockEmployeeLeaves)
+  const [selectedStatus, setSelectedStatus] = useState<string>('all')
+  const [selectedType, setSelectedType] = useState<string>('all')
+  const [selectedPeriod, setSelectedPeriod] = useState<string>('all')
+  const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
+  const [searchLeavesTerm, setSearchLeavesTerm] = useState('')
 
   // Modal states
-  const [showAddModal, setShowAddModal] = useState(false);
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [showViewModal, setShowViewModal] = useState(false);
-  const [showRejectModal, setShowRejectModal] = useState(false);
-  const [showBulkModal, setShowBulkModal] = useState(false);
-  const [selectedLeave, setSelectedLeave] = useState<HrLeave | null>(null);
-  const [rejectReason, setRejectReason] = useState("");
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [showViewModal, setShowViewModal] = useState(false)
+  const [showRejectModal, setShowRejectModal] = useState(false)
+  const [showBulkModal, setShowBulkModal] = useState(false)
+  const [selectedLeave, setSelectedLeave] = useState<HrLeave | null>(null)
+  const [rejectReason, setRejectReason] = useState('')
 
   // Form state for add/edit
   const [formData, setFormData] = useState({
-    employeeId: "",
+    employeeId: '',
     leaveType: LeaveTypeEnum.Annual,
-    startDate: "",
-    endDate: "",
-    reason: "",
+    startDate: '',
+    endDate: '',
+    reason: '',
     isHalfDay: false,
-  });
+  })
 
   // Bulk leave form state
   const [bulkFormData, setBulkFormData] = useState({
-    departmentId: "",
+    departmentId: '',
     selectedEmployees: [] as string[],
     leaveType: LeaveTypeEnum.Annual,
-    startDate: "",
-    endDate: "",
-    reason: "",
+    startDate: '',
+    endDate: '',
+    reason: '',
     isHalfDay: false,
-  });
+  })
 
   // Get employees by department
   const getEmployeesByDepartment = (departmentId: string) => {
-    return mockEmployees.filter((emp) => emp.departmantId === departmentId);
-  };
+    return mockEmployees.filter((emp) => emp.departmantId === departmentId)
+  }
 
   // Get selected employee object
   const getSelectedEmployee = (employeeId: string) => {
-    return mockEmployees.find((emp) => emp.id === employeeId);
-  };
+    return mockEmployees.find((emp) => emp.id === employeeId)
+  }
 
   const handleAdd = () => {
     setFormData({
-      employeeId: "",
+      employeeId: '',
       leaveType: LeaveTypeEnum.Annual,
-      startDate: "",
-      endDate: "",
-      reason: "",
+      startDate: '',
+      endDate: '',
+      reason: '',
       isHalfDay: false,
-    });
-    setShowAddModal(true);
-  };
+    })
+    setShowAddModal(true)
+  }
 
   const handleBulkAdd = () => {
     setBulkFormData({
-      departmentId: "",
+      departmentId: '',
       selectedEmployees: [],
       leaveType: LeaveTypeEnum.Annual,
-      startDate: "",
-      endDate: "",
-      reason: "",
+      startDate: '',
+      endDate: '',
+      reason: '',
       isHalfDay: false,
-    });
-    setShowBulkModal(true);
-  };
+    })
+    setShowBulkModal(true)
+  }
 
   const handleEdit = (leave: HrLeave) => {
-    setSelectedLeave(leave);
+    setSelectedLeave(leave)
     setFormData({
       employeeId: leave.employeeId,
       leaveType: leave.leaveType,
-      startDate: new Date(leave.startDate).toISOString().split("T")[0],
-      endDate: new Date(leave.endDate).toISOString().split("T")[0],
-      reason: leave.reason || "",
+      startDate: new Date(leave.startDate).toISOString().split('T')[0],
+      endDate: new Date(leave.endDate).toISOString().split('T')[0],
+      reason: leave.reason || '',
       isHalfDay: leave.isHalfDay,
-    });
-    setShowEditModal(true);
-  };
+    })
+    setShowEditModal(true)
+  }
 
   const handleApprove = (id: string) => {
     setLeaves((prevLeaves) =>
@@ -118,11 +115,11 @@ const LeaveManagement: React.FC = () => {
               approvedDate: new Date(),
               lastModificationTime: new Date(),
             }
-          : leave
-      )
-    );
-    alert("İzin talebi onaylandı!");
-  };
+          : leave,
+      ),
+    )
+    alert('İzin talebi onaylandı!')
+  }
 
   const handleReject = (id: string, reason?: string) => {
     if (reason) {
@@ -135,38 +132,36 @@ const LeaveManagement: React.FC = () => {
                 rejectionReason: reason,
                 lastModificationTime: new Date(),
               }
-            : leave
-        )
-      );
-      setShowRejectModal(false);
-      setRejectReason("");
-      alert("İzin talebi reddedildi!");
+            : leave,
+        ),
+      )
+      setShowRejectModal(false)
+      setRejectReason('')
+      alert('İzin talebi reddedildi!')
     } else {
-      const leave = leaves.find((l) => l.id === id);
+      const leave = leaves.find((l) => l.id === id)
       if (leave) {
-        setSelectedLeave(leave);
-        setShowRejectModal(true);
+        setSelectedLeave(leave)
+        setShowRejectModal(true)
       }
     }
-  };
+  }
 
   const handleView = (leave: HrLeave) => {
-    setSelectedLeave(leave);
-    setShowViewModal(true);
-  };
+    setSelectedLeave(leave)
+    setShowViewModal(true)
+  }
 
   const handleSubmitAdd = () => {
     if (!formData.employeeId || !formData.startDate || !formData.endDate) {
-      alert("Lütfen tüm gerekli alanları doldurun!");
-      return;
+      alert('Lütfen tüm gerekli alanları doldurun!')
+      return
     }
 
-    const startDate = new Date(formData.startDate);
-    const endDate = new Date(formData.endDate);
+    const startDate = new Date(formData.startDate)
+    const endDate = new Date(formData.endDate)
     const totalDays =
-      Math.ceil(
-        (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)
-      ) + 1;
+      Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1
 
     const newLeave: HrLeave = {
       id: `leave_${Date.now()}`,
@@ -182,27 +177,25 @@ const LeaveManagement: React.FC = () => {
       attachments: [],
       creationTime: new Date(),
       lastModificationTime: new Date(),
-    };
-
-    setLeaves((prevLeaves) => [...prevLeaves, newLeave]);
-    setShowAddModal(false);
-    alert("İzin talebi başarıyla oluşturuldu!");
-  };
-
-  const handleSubmitEdit = () => {
-    if (!selectedLeave) return;
-
-    if (!formData.employeeId || !formData.startDate || !formData.endDate) {
-      alert("Lütfen tüm gerekli alanları doldurun!");
-      return;
     }
 
-    const startDate = new Date(formData.startDate);
-    const endDate = new Date(formData.endDate);
+    setLeaves((prevLeaves) => [...prevLeaves, newLeave])
+    setShowAddModal(false)
+    alert('İzin talebi başarıyla oluşturuldu!')
+  }
+
+  const handleSubmitEdit = () => {
+    if (!selectedLeave) return
+
+    if (!formData.employeeId || !formData.startDate || !formData.endDate) {
+      alert('Lütfen tüm gerekli alanları doldurun!')
+      return
+    }
+
+    const startDate = new Date(formData.startDate)
+    const endDate = new Date(formData.endDate)
     const totalDays =
-      Math.ceil(
-        (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)
-      ) + 1;
+      Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1
 
     setLeaves((prevLeaves) =>
       prevLeaves.map((leave) =>
@@ -218,23 +211,23 @@ const LeaveManagement: React.FC = () => {
               isHalfDay: formData.isHalfDay,
               lastModificationTime: new Date(),
             }
-          : leave
-      )
-    );
+          : leave,
+      ),
+    )
 
-    setShowEditModal(false);
-    setSelectedLeave(null);
-    alert("İzin talebi başarıyla güncellendi!");
-  };
+    setShowEditModal(false)
+    setSelectedLeave(null)
+    alert('İzin talebi başarıyla güncellendi!')
+  }
 
   const handleSubmitReject = () => {
     if (!selectedLeave || !rejectReason.trim()) {
-      alert("Lütfen red nedeni giriniz!");
-      return;
+      alert('Lütfen red nedeni giriniz!')
+      return
     }
 
-    handleReject(selectedLeave.id, rejectReason);
-  };
+    handleReject(selectedLeave.id, rejectReason)
+  }
 
   const handleSubmitBulk = () => {
     if (
@@ -242,146 +235,128 @@ const LeaveManagement: React.FC = () => {
       !bulkFormData.startDate ||
       !bulkFormData.endDate
     ) {
-      alert(
-        "Lütfen en az bir personel seçin ve tüm gerekli alanları doldurun!"
-      );
-      return;
+      alert('Lütfen en az bir personel seçin ve tüm gerekli alanları doldurun!')
+      return
     }
 
-    const startDate = new Date(bulkFormData.startDate);
-    const endDate = new Date(bulkFormData.endDate);
+    const startDate = new Date(bulkFormData.startDate)
+    const endDate = new Date(bulkFormData.endDate)
     const totalDays =
-      Math.ceil(
-        (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)
-      ) + 1;
+      Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1
 
-    const newLeaves: HrLeave[] = bulkFormData.selectedEmployees.map(
-      (employeeId) => {
-        const employee = getSelectedEmployee(employeeId);
-        return {
-          id: `leave_${Date.now()}_${employeeId}`,
-          employeeId: employeeId,
-          employee: employee,
-          leaveType: bulkFormData.leaveType,
-          startDate: startDate,
-          endDate: endDate,
-          totalDays: bulkFormData.isHalfDay ? 0.5 : totalDays,
-          reason: bulkFormData.reason,
-          status: LeaveStatusEnum.Pending,
-          appliedDate: new Date(),
-          isHalfDay: bulkFormData.isHalfDay,
-          attachments: [],
-          creationTime: new Date(),
-          lastModificationTime: new Date(),
-        };
+    const newLeaves: HrLeave[] = bulkFormData.selectedEmployees.map((employeeId) => {
+      const employee = getSelectedEmployee(employeeId)
+      return {
+        id: `leave_${Date.now()}_${employeeId}`,
+        employeeId: employeeId,
+        employee: employee,
+        leaveType: bulkFormData.leaveType,
+        startDate: startDate,
+        endDate: endDate,
+        totalDays: bulkFormData.isHalfDay ? 0.5 : totalDays,
+        reason: bulkFormData.reason,
+        status: LeaveStatusEnum.Pending,
+        appliedDate: new Date(),
+        isHalfDay: bulkFormData.isHalfDay,
+        attachments: [],
+        creationTime: new Date(),
+        lastModificationTime: new Date(),
       }
-    );
+    })
 
-    setLeaves((prevLeaves) => [...prevLeaves, ...newLeaves]);
-    setShowBulkModal(false);
+    setLeaves((prevLeaves) => [...prevLeaves, ...newLeaves])
+    setShowBulkModal(false)
     setBulkFormData({
-      departmentId: "",
+      departmentId: '',
       selectedEmployees: [],
       leaveType: LeaveTypeEnum.Annual,
-      startDate: "",
-      endDate: "",
-      reason: "",
+      startDate: '',
+      endDate: '',
+      reason: '',
       isHalfDay: false,
-    });
-    alert(
-      `${newLeaves.length} personel için toplu izin talebi başarıyla oluşturuldu!`
-    );
-  };
+    })
+    alert(`${newLeaves.length} personel için toplu izin talebi başarıyla oluşturuldu!`)
+  }
 
   const filteredLeaves = leaves.filter((leave) => {
-    if (selectedStatus !== "all" && leave.status !== selectedStatus) {
-      return false;
+    if (selectedStatus !== 'all' && leave.status !== selectedStatus) {
+      return false
     }
-    if (selectedType !== "all" && leave.leaveType !== selectedType) {
-      return false;
+    if (selectedType !== 'all' && leave.leaveType !== selectedType) {
+      return false
     }
-    if (
-      selectedDepartment !== "all" &&
-      leave.employee?.department?.name !== selectedDepartment
-    ) {
-      return false;
+    if (selectedDepartment !== 'all' && leave.employee?.department?.name !== selectedDepartment) {
+      return false
     }
-    if (selectedPeriod !== "all") {
-      const now = new Date();
-      const leaveStart = new Date(leave.startDate);
+    if (selectedPeriod !== 'all') {
+      const now = new Date()
+      const leaveStart = new Date(leave.startDate)
 
       switch (selectedPeriod) {
-        case "current": {
-          const currentMonth = now.getMonth();
-          const currentYear = now.getFullYear();
-          return (
-            leaveStart.getMonth() === currentMonth &&
-            leaveStart.getFullYear() === currentYear
-          );
+        case 'current': {
+          const currentMonth = now.getMonth()
+          const currentYear = now.getFullYear()
+          return leaveStart.getMonth() === currentMonth && leaveStart.getFullYear() === currentYear
         }
-        case "upcoming":
-          return leaveStart > now;
-        case "past":
-          return leaveStart < now;
+        case 'upcoming':
+          return leaveStart > now
+        case 'past':
+          return leaveStart < now
         default:
-          return true;
+          return true
       }
     }
 
     // Search filtresi
-    if (searchLeavesTerm.trim() !== "") {
-      const term = searchLeavesTerm.toLowerCase();
-      const employee = leave.employee;
+    if (searchLeavesTerm.trim() !== '') {
+      const term = searchLeavesTerm.toLowerCase()
+      const employee = leave.employee
 
       const matches =
         employee?.fullName.toLowerCase().includes(term) ||
         employee?.code.toLowerCase().includes(term) ||
-        employee?.email?.toLowerCase().includes(term);
+        employee?.email?.toLowerCase().includes(term)
 
       if (!matches) {
-        return false;
+        return false
       }
     }
 
-    return true;
-  });
+    return true
+  })
 
   const columns: Column<HrLeave>[] = [
     {
-      key: "employee",
-      header: "Personel",
+      key: 'employee',
+      header: 'Personel',
       render: (leave: HrLeave) => (
         <div className="flex items-center gap-2">
           <FaUser className="w-4 h-4 text-gray-500" />
           <div>
-            <div className="font-medium text-gray-900">
-              {leave.employee?.fullName}
-            </div>
+            <div className="font-medium text-gray-900">{leave.employee?.fullName}</div>
             <div className="text-sm text-gray-500">{leave.employee?.code}</div>
           </div>
         </div>
       ),
     },
     {
-      key: "leaveType",
-      header: "İzin Türü",
+      key: 'leaveType',
+      header: 'İzin Türü',
       render: (leave: HrLeave) => getLeaveTypeText(leave.leaveType),
     },
     {
-      key: "period",
-      header: "İzin Dönemi",
+      key: 'period',
+      header: 'İzin Dönemi',
       render: (leave: HrLeave) => (
         <div className="text-sm">
-          <div>{new Date(leave.startDate).toLocaleDateString("tr-TR")}</div>
-          <div className="text-gray-500">
-            {new Date(leave.endDate).toLocaleDateString("tr-TR")}
-          </div>
+          <div>{new Date(leave.startDate).toLocaleDateString('tr-TR')}</div>
+          <div className="text-gray-500">{new Date(leave.endDate).toLocaleDateString('tr-TR')}</div>
         </div>
       ),
     },
     {
-      key: "totalDays",
-      header: "Gün Sayısı",
+      key: 'totalDays',
+      header: 'Gün Sayısı',
       render: (leave: HrLeave) => (
         <div className="flex items-center gap-1">
           <FaCalendar className="w-4 h-4 text-gray-500" />
@@ -390,18 +365,17 @@ const LeaveManagement: React.FC = () => {
       ),
     },
     {
-      key: "appliedDate",
-      header: "Başvuru Tarihi",
-      render: (leave: HrLeave) =>
-        new Date(leave.appliedDate).toLocaleDateString("tr-TR"),
+      key: 'appliedDate',
+      header: 'Başvuru Tarihi',
+      render: (leave: HrLeave) => new Date(leave.appliedDate).toLocaleDateString('tr-TR'),
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (leave: HrLeave) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getLeaveStatusColor(
-            leave.status
+            leave.status,
           )}`}
         >
           {getLeaveStatusText(leave.status)}
@@ -409,8 +383,8 @@ const LeaveManagement: React.FC = () => {
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (leave: HrLeave) => (
         <div className="flex gap-1">
           <button
@@ -450,180 +424,150 @@ const LeaveManagement: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   // Calculate statistics
   const stats = {
     total: leaves.length,
     pending: leaves.filter((l) => l.status === LeaveStatusEnum.Pending).length,
-    approved: leaves.filter((l) => l.status === LeaveStatusEnum.Approved)
-      .length,
-    rejected: leaves.filter((l) => l.status === LeaveStatusEnum.Rejected)
-      .length,
-  };
+    approved: leaves.filter((l) => l.status === LeaveStatusEnum.Approved).length,
+    rejected: leaves.filter((l) => l.status === LeaveStatusEnum.Rejected).length,
+  }
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">İzin Yönetimi</h2>
-          <p className="text-sm text-gray-600 mt-1">
-            Personel izin talepleri ve onay süreçleri
-          </p>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">İzin Yönetimi</h2>
+            <p className="text-sm text-gray-600 mt-1">Personel izin talepleri ve onay süreçleri</p>
+          </div>
+          <div className="flex gap-2">
+            <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 İzin Talebi
+            </button>
+            <button
+              onClick={handleBulkAdd}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+            >
+              <FaUsers className="w-4 h-4" />
+              Toplu İzin
+            </button>
+          </div>
         </div>
-        <div className="flex gap-2">
-          <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"
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Widget title="Toplam Talep" value={stats.total} color="blue" icon="FaCalendar" />
+
+          <Widget title="Beklemede" value={stats.pending} color="yellow" icon="FaCalendar" />
+
+          <Widget title="Onaylanan" value={stats.approved} color="green" icon="FaCheck" />
+
+          <Widget title="Reddedilen" value={stats.rejected} color="red" icon="FaTimes" />
+        </div>
+
+        {/* Filters */}
+        <div className="flex gap-3 items-center">
+          <select
+            value={selectedDepartment}
+            onChange={(e) => setSelectedDepartment(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
           >
-            <FaPlus className="w-4 h-4" />
-            Yeni İzin Talebi
-          </button>
-          <button
-            onClick={handleBulkAdd}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+            <option value="all">Tüm Departmanlar</option>
+            {mockDepartments.map((dept) => (
+              <option key={dept.id} value={dept.name}>
+                {dept.name}
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={searchLeavesTerm}
+            onChange={(e) => setSearchLeavesTerm(e.target.value)}
+            className="w-full px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
           >
-            <FaUsers className="w-4 h-4" />
-            Toplu İzin
-          </button>
+            <option value="">Personel seçiniz...</option>
+            {mockEmployees.map((employee) => (
+              <option key={employee.id} value={employee.id}>
+                {employee.fullName} ({employee.code})
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={selectedStatus}
+            onChange={(e) => setSelectedStatus(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 rounded-md  text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm Durumlar</option>
+            <option value={LeaveStatusEnum.Pending}>Beklemede</option>
+            <option value={LeaveStatusEnum.Approved}>Onaylandı</option>
+            <option value={LeaveStatusEnum.Rejected}>Reddedildi</option>
+            <option value={LeaveStatusEnum.Cancelled}>İptal Edildi</option>
+          </select>
+
+          <select
+            value={selectedType}
+            onChange={(e) => setSelectedType(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm İzin Türleri</option>
+            <option value={LeaveTypeEnum.Annual}>Yıllık İzin</option>
+            <option value={LeaveTypeEnum.Sick}>Hastalık İzni</option>
+            <option value={LeaveTypeEnum.Maternity}>Doğum İzni</option>
+            <option value={LeaveTypeEnum.Paternity}>Babalık İzni</option>
+            <option value={LeaveTypeEnum.Personal}>Kişisel İzin</option>
+            <option value={LeaveTypeEnum.Emergency}>Acil Durum İzni</option>
+            <option value={LeaveTypeEnum.Study}>Eğitim İzni</option>
+            <option value={LeaveTypeEnum.Unpaid}>Ücretsiz İzin</option>
+          </select>
+
+          <select
+            value={selectedPeriod}
+            onChange={(e) => setSelectedPeriod(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm Dönemler</option>
+            <option value="current">Bu Ay</option>
+            <option value="upcoming">Gelecek</option>
+            <option value="past">Geçmiş</option>
+          </select>
         </div>
-      </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Widget
-          title="Toplam Talep"
-          value={stats.total}
-          color="blue"
-          icon="FaCalendar"
-        />
-
-        <Widget
-          title="Beklemede"
-          value={stats.pending}
-          color="yellow"
-          icon="FaCalendar"
-        />
-
-        <Widget
-          title="Onaylanan"
-          value={stats.approved}
-          color="green"
-          icon="FaCheck"
-        />
-
-        <Widget
-          title="Reddedilen"
-          value={stats.rejected}
-          color="red"
-          icon="FaTimes"
-        />
-      </div>
-
-      {/* Filters */}
-      <div className="flex gap-3 items-center">
-        <select
-          value={selectedDepartment}
-          onChange={(e) => setSelectedDepartment(e.target.value)}
-          className="px-3 py-1.5 border border-gray-300 rounded-md text-sm 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.name}>
-              {dept.name}
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={searchLeavesTerm}
-          onChange={(e) => setSearchLeavesTerm(e.target.value)}
-          className="w-full px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="">Personel seçiniz...</option>
-          {mockEmployees.map((employee) => (
-            <option key={employee.id} value={employee.id}>
-              {employee.fullName} ({employee.code})
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={selectedStatus}
-          onChange={(e) => setSelectedStatus(e.target.value)}
-          className="px-3 py-1.5 border border-gray-300 rounded-md  text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Durumlar</option>
-          <option value={LeaveStatusEnum.Pending}>Beklemede</option>
-          <option value={LeaveStatusEnum.Approved}>Onaylandı</option>
-          <option value={LeaveStatusEnum.Rejected}>Reddedildi</option>
-          <option value={LeaveStatusEnum.Cancelled}>İptal Edildi</option>
-        </select>
-
-        <select
-          value={selectedType}
-          onChange={(e) => setSelectedType(e.target.value)}
-          className="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm İzin Türleri</option>
-          <option value={LeaveTypeEnum.Annual}>Yıllık İzin</option>
-          <option value={LeaveTypeEnum.Sick}>Hastalık İzni</option>
-          <option value={LeaveTypeEnum.Maternity}>Doğum İzni</option>
-          <option value={LeaveTypeEnum.Paternity}>Babalık İzni</option>
-          <option value={LeaveTypeEnum.Personal}>Kişisel İzin</option>
-          <option value={LeaveTypeEnum.Emergency}>Acil Durum İzni</option>
-          <option value={LeaveTypeEnum.Study}>Eğitim İzni</option>
-          <option value={LeaveTypeEnum.Unpaid}>Ücretsiz İzin</option>
-        </select>
-
-        <select
-          value={selectedPeriod}
-          onChange={(e) => setSelectedPeriod(e.target.value)}
-          className="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Dönemler</option>
-          <option value="current">Bu Ay</option>
-          <option value="upcoming">Gelecek</option>
-          <option value="past">Geçmiş</option>
-        </select>
-      </div>
-
-      {/* Data Table */}
-      <div className="bg-white rounded-lg shadow-sm border">
-        <DataTable data={filteredLeaves} columns={columns} />
-      </div>
-
-      {filteredLeaves.length === 0 && (
-        <div className="text-center py-12">
-          <FaCalendar className="w-10 h-10 text-gray-400 mx-auto mb-3" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            İzin talebi bulunamadı
-          </h3>
-          <p className="text-gray-500">
-            Seçilen kriterlere uygun izin talebi bulunmamaktadır.
-          </p>
+        {/* Data Table */}
+        <div className="bg-white rounded-lg shadow-sm border">
+          <DataTable data={filteredLeaves} columns={columns} />
         </div>
-      )}
+
+        {filteredLeaves.length === 0 && (
+          <div className="text-center py-12">
+            <FaCalendar className="w-10 h-10 text-gray-400 mx-auto mb-3" />
+            <h3 className="text-lg font-medium text-gray-900 mb-2">İzin talebi bulunamadı</h3>
+            <p className="text-gray-500">Seçilen kriterlere uygun izin talebi bulunmamaktadır.</p>
+          </div>
+        )}
+      </div>
 
       {/* Add/Edit Modal */}
       {(showAddModal || (showEditModal && selectedLeave)) && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
           <div className="bg-white rounded-lg p-6 w-full max-w-md">
             <h3 className="text-base font-semibold mb-4">
-              {showAddModal ? "Yeni İzin Talebi" : "İzin Talebini Düzenle"}
+              {showAddModal ? 'Yeni İzin Talebi' : 'İzin Talebini Düzenle'}
             </h3>
 
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Personel
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Personel</label>
                 <select
                   value={formData.employeeId}
-                  onChange={(e) =>
-                    setFormData({ ...formData, employeeId: e.target.value })
-                  }
+                  onChange={(e) => setFormData({ ...formData, employeeId: 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"
                 >
                   <option value="">Personel seçiniz...</option>
@@ -636,9 +580,7 @@ const LeaveManagement: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  İzin Türü
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">İzin Türü</label>
                 <select
                   value={formData.leaveType}
                   onChange={(e) =>
@@ -654,9 +596,7 @@ const LeaveManagement: React.FC = () => {
                   <option value={LeaveTypeEnum.Maternity}>Doğum İzni</option>
                   <option value={LeaveTypeEnum.Paternity}>Babalık İzni</option>
                   <option value={LeaveTypeEnum.Personal}>Kişisel İzin</option>
-                  <option value={LeaveTypeEnum.Emergency}>
-                    Acil Durum İzni
-                  </option>
+                  <option value={LeaveTypeEnum.Emergency}>Acil Durum İzni</option>
                   <option value={LeaveTypeEnum.Study}>Eğitim İzni</option>
                   <option value={LeaveTypeEnum.Unpaid}>Ücretsiz İzin</option>
                 </select>
@@ -670,9 +610,7 @@ const LeaveManagement: React.FC = () => {
                   <input
                     type="date"
                     value={formData.startDate}
-                    onChange={(e) =>
-                      setFormData({ ...formData, startDate: e.target.value })
-                    }
+                    onChange={(e) => setFormData({ ...formData, startDate: 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>
@@ -684,9 +622,7 @@ const LeaveManagement: React.FC = () => {
                   <input
                     type="date"
                     value={formData.endDate}
-                    onChange={(e) =>
-                      setFormData({ ...formData, endDate: e.target.value })
-                    }
+                    onChange={(e) => setFormData({ ...formData, endDate: 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>
@@ -715,9 +651,7 @@ const LeaveManagement: React.FC = () => {
                 </label>
                 <textarea
                   value={formData.reason}
-                  onChange={(e) =>
-                    setFormData({ ...formData, reason: e.target.value })
-                  }
+                  onChange={(e) => setFormData({ ...formData, reason: 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"
                   rows={3}
                   placeholder="İzin nedenini belirtiniz..."
@@ -728,9 +662,9 @@ const LeaveManagement: React.FC = () => {
             <div className="flex justify-end gap-2 mt-6">
               <button
                 onClick={() => {
-                  setShowAddModal(false);
-                  setShowEditModal(false);
-                  setSelectedLeave(null);
+                  setShowAddModal(false)
+                  setShowEditModal(false)
+                  setSelectedLeave(null)
                 }}
                 className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
               >
@@ -740,7 +674,7 @@ const LeaveManagement: React.FC = () => {
                 onClick={showAddModal ? handleSubmitAdd : handleSubmitEdit}
                 className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
               >
-                {showAddModal ? "Oluştur" : "Güncelle"}
+                {showAddModal ? 'Oluştur' : 'Güncelle'}
               </button>
             </div>
           </div>
@@ -756,21 +690,14 @@ const LeaveManagement: React.FC = () => {
             <div className="space-y-4">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Personel
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Personel</label>
                   <p className="text-gray-900">
-                    {selectedLeave.employee?.fullName ||
-                      selectedLeave.employeeId}
+                    {selectedLeave.employee?.fullName || selectedLeave.employeeId}
                   </p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    İzin Türü
-                  </label>
-                  <p className="text-gray-900">
-                    {getLeaveTypeText(selectedLeave.leaveType)}
-                  </p>
+                  <label className="block text-sm font-medium text-gray-700">İzin Türü</label>
+                  <p className="text-gray-900">{getLeaveTypeText(selectedLeave.leaveType)}</p>
                 </div>
               </div>
 
@@ -780,37 +707,27 @@ const LeaveManagement: React.FC = () => {
                     Başlangıç Tarihi
                   </label>
                   <p className="text-gray-900">
-                    {new Date(selectedLeave.startDate).toLocaleDateString(
-                      "tr-TR"
-                    )}
+                    {new Date(selectedLeave.startDate).toLocaleDateString('tr-TR')}
                   </p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Bitiş Tarihi
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Bitiş Tarihi</label>
                   <p className="text-gray-900">
-                    {new Date(selectedLeave.endDate).toLocaleDateString(
-                      "tr-TR"
-                    )}
+                    {new Date(selectedLeave.endDate).toLocaleDateString('tr-TR')}
                   </p>
                 </div>
               </div>
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Toplam Gün
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Toplam Gün</label>
                   <p className="text-gray-900">{selectedLeave.totalDays} gün</p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Durum
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Durum</label>
                   <span
                     className={`px-2 py-1 text-xs font-medium rounded-full ${getLeaveStatusColor(
-                      selectedLeave.status
+                      selectedLeave.status,
                     )}`}
                   >
                     {getLeaveStatusText(selectedLeave.status)}
@@ -819,45 +736,31 @@ const LeaveManagement: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700">
-                  Başvuru Tarihi
-                </label>
+                <label className="block text-sm font-medium text-gray-700">Başvuru Tarihi</label>
                 <p className="text-gray-900">
-                  {new Date(selectedLeave.appliedDate).toLocaleDateString(
-                    "tr-TR"
-                  )}
+                  {new Date(selectedLeave.appliedDate).toLocaleDateString('tr-TR')}
                 </p>
               </div>
 
               {selectedLeave.reason && (
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Neden
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Neden</label>
                   <p className="text-gray-900">{selectedLeave.reason}</p>
                 </div>
               )}
 
               {selectedLeave.rejectionReason && (
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Red Nedeni
-                  </label>
-                  <p className="text-red-600">
-                    {selectedLeave.rejectionReason}
-                  </p>
+                  <label className="block text-sm font-medium text-gray-700">Red Nedeni</label>
+                  <p className="text-red-600">{selectedLeave.rejectionReason}</p>
                 </div>
               )}
 
               {selectedLeave.approvedDate && (
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Onay Tarihi
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Onay Tarihi</label>
                   <p className="text-gray-900">
-                    {new Date(selectedLeave.approvedDate).toLocaleDateString(
-                      "tr-TR"
-                    )}
+                    {new Date(selectedLeave.approvedDate).toLocaleDateString('tr-TR')}
                   </p>
                 </div>
               )}
@@ -866,8 +769,8 @@ const LeaveManagement: React.FC = () => {
             <div className="flex justify-end mt-6">
               <button
                 onClick={() => {
-                  setShowViewModal(false);
-                  setSelectedLeave(null);
+                  setShowViewModal(false)
+                  setSelectedLeave(null)
                 }}
                 className="px-3 py-1.5 text-sm bg-gray-600 text-white rounded-md hover:bg-gray-700"
               >
@@ -882,16 +785,12 @@ const LeaveManagement: React.FC = () => {
       {showRejectModal && selectedLeave && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
           <div className="bg-white rounded-lg p-6 w-full max-w-md">
-            <h3 className="text-base font-semibold mb-4">
-              İzin Talebini Reddet
-            </h3>
+            <h3 className="text-base font-semibold mb-4">İzin Talebini Reddet</h3>
 
             <div className="mb-4">
               <p className="text-gray-700 mb-2">
-                <strong>
-                  {selectedLeave.employee?.fullName || selectedLeave.employeeId}
-                </strong>{" "}
-                adlı personelin izin talebini reddetmek üzeresiniz.
+                <strong>{selectedLeave.employee?.fullName || selectedLeave.employeeId}</strong> adlı
+                personelin izin talebini reddetmek üzeresiniz.
               </p>
             </div>
 
@@ -911,9 +810,9 @@ const LeaveManagement: React.FC = () => {
             <div className="flex justify-end gap-2">
               <button
                 onClick={() => {
-                  setShowRejectModal(false);
-                  setSelectedLeave(null);
-                  setRejectReason("");
+                  setShowRejectModal(false)
+                  setSelectedLeave(null)
+                  setRejectReason('')
                 }}
                 className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
               >
@@ -939,9 +838,7 @@ const LeaveManagement: React.FC = () => {
             <div className="space-y-4">
               {/* Department Selection */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Departman
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Departman</label>
                 <select
                   value={bulkFormData.departmentId}
                   onChange={(e) => {
@@ -949,7 +846,7 @@ const LeaveManagement: React.FC = () => {
                       ...bulkFormData,
                       departmentId: e.target.value,
                       selectedEmployees: [],
-                    });
+                    })
                   }}
                   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"
                 >
@@ -974,61 +871,47 @@ const LeaveManagement: React.FC = () => {
                         <input
                           type="checkbox"
                           checked={
-                            getEmployeesByDepartment(bulkFormData.departmentId)
-                              .length > 0 &&
+                            getEmployeesByDepartment(bulkFormData.departmentId).length > 0 &&
                             bulkFormData.selectedEmployees.length ===
-                              getEmployeesByDepartment(
-                                bulkFormData.departmentId
-                              ).length
+                              getEmployeesByDepartment(bulkFormData.departmentId).length
                           }
                           onChange={(e) => {
-                            const departmentEmployees =
-                              getEmployeesByDepartment(
-                                bulkFormData.departmentId
-                              );
+                            const departmentEmployees = getEmployeesByDepartment(
+                              bulkFormData.departmentId,
+                            )
                             setBulkFormData({
                               ...bulkFormData,
                               selectedEmployees: e.target.checked
                                 ? departmentEmployees.map((emp) => emp.id)
                                 : [],
-                            });
+                            })
                           }}
                           className="mr-2"
                         />
                         <span className="font-medium">Tümünü Seç</span>
                       </label>
-                      {getEmployeesByDepartment(bulkFormData.departmentId).map(
-                        (employee) => (
-                          <label
-                            key={employee.id}
-                            className="flex items-center"
-                          >
-                            <input
-                              type="checkbox"
-                              checked={bulkFormData.selectedEmployees.includes(
-                                employee.id
-                              )}
-                              onChange={(e) => {
-                                setBulkFormData({
-                                  ...bulkFormData,
-                                  selectedEmployees: e.target.checked
-                                    ? [
-                                        ...bulkFormData.selectedEmployees,
-                                        employee.id,
-                                      ]
-                                    : bulkFormData.selectedEmployees.filter(
-                                        (id) => id !== employee.id
-                                      ),
-                                });
-                              }}
-                              className="mr-2"
-                            />
-                            <span>
-                              {employee.fullName} ({employee.code})
-                            </span>
-                          </label>
-                        )
-                      )}
+                      {getEmployeesByDepartment(bulkFormData.departmentId).map((employee) => (
+                        <label key={employee.id} className="flex items-center">
+                          <input
+                            type="checkbox"
+                            checked={bulkFormData.selectedEmployees.includes(employee.id)}
+                            onChange={(e) => {
+                              setBulkFormData({
+                                ...bulkFormData,
+                                selectedEmployees: e.target.checked
+                                  ? [...bulkFormData.selectedEmployees, employee.id]
+                                  : bulkFormData.selectedEmployees.filter(
+                                      (id) => id !== employee.id,
+                                    ),
+                              })
+                            }}
+                            className="mr-2"
+                          />
+                          <span>
+                            {employee.fullName} ({employee.code})
+                          </span>
+                        </label>
+                      ))}
                     </div>
                   </div>
                   <p className="text-sm text-gray-500 mt-1">
@@ -1039,9 +922,7 @@ const LeaveManagement: React.FC = () => {
 
               {/* Leave Type */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  İzin Türü
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">İzin Türü</label>
                 <select
                   value={bulkFormData.leaveType}
                   onChange={(e) =>
@@ -1057,9 +938,7 @@ const LeaveManagement: React.FC = () => {
                   <option value={LeaveTypeEnum.Maternity}>Doğum İzni</option>
                   <option value={LeaveTypeEnum.Paternity}>Babalık İzni</option>
                   <option value={LeaveTypeEnum.Personal}>Kişisel İzin</option>
-                  <option value={LeaveTypeEnum.Emergency}>
-                    Acil Durum İzni
-                  </option>
+                  <option value={LeaveTypeEnum.Emergency}>Acil Durum İzni</option>
                   <option value={LeaveTypeEnum.Study}>Eğitim İzni</option>
                   <option value={LeaveTypeEnum.Unpaid}>Ücretsiz İzin</option>
                 </select>
@@ -1143,16 +1022,16 @@ const LeaveManagement: React.FC = () => {
             <div className="flex justify-end gap-2 mt-6">
               <button
                 onClick={() => {
-                  setShowBulkModal(false);
+                  setShowBulkModal(false)
                   setBulkFormData({
-                    departmentId: "",
+                    departmentId: '',
                     selectedEmployees: [],
                     leaveType: LeaveTypeEnum.Annual,
-                    startDate: "",
-                    endDate: "",
-                    reason: "",
+                    startDate: '',
+                    endDate: '',
+                    reason: '',
                     isHalfDay: false,
-                  });
+                  })
                 }}
                 className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
               >
@@ -1168,8 +1047,8 @@ const LeaveManagement: React.FC = () => {
           </div>
         </div>
       )}
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default LeaveManagement;
+export default LeaveManagement
diff --git a/ui/src/views/hr/components/OrganizationChart.tsx b/ui/src/views/hr/components/OrganizationChart.tsx
index ef1d8d81..f6ff42e8 100644
--- a/ui/src/views/hr/components/OrganizationChart.tsx
+++ b/ui/src/views/hr/components/OrganizationChart.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo } from 'react'
 import {
   FaUser,
   FaUsers,
@@ -14,54 +14,49 @@ import {
   FaPhone,
   FaMapMarkerAlt,
   FaBriefcase,
-} from "react-icons/fa";
-import { HrEmployee, HrOrganizationChart as OrgChart } from "../../../types/hr";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockDepartments } from "../../../mocks/mockDepartments";
-import Widget from "../../../components/common/Widget";
+} from 'react-icons/fa'
+import { HrEmployee, HrOrganizationChart as OrgChart } from '../../../types/hr'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockDepartments } from '../../../mocks/mockDepartments'
+import Widget from '../../../components/common/Widget'
+import { Container } from '@/components/shared'
 
 // Dinamik organizasyon verisi oluşturma fonksiyonu
 const generateOrganizationData = (): OrgChart[] => {
-  const orgData: OrgChart[] = [];
+  const orgData: OrgChart[] = []
 
   // Çalışanları işle
   mockEmployees.forEach((employee) => {
-    const department = mockDepartments.find(
-      (d) => d.id === employee.departmantId
-    );
+    const department = mockDepartments.find((d) => d.id === employee.departmantId)
 
-    let level = 3; // Varsayılan seviye (normal çalışan)
-    let parentId: string | undefined = undefined;
+    let level = 3 // Varsayılan seviye (normal çalışan)
+    let parentId: string | undefined = undefined
 
     // Eğer bu çalışan bir departman yöneticisiyse
     if (department && department.managerId === employee.id) {
       if (!department.parentDepartmentId) {
         // Ana departman yöneticisi (CEO/Genel Müdür)
-        level = 0;
+        level = 0
       } else {
         // Alt departman yöneticisi
-        level = 1;
+        level = 1
         // Üst departmanın yöneticisini parent olarak bul
-        const parentDept = mockDepartments.find(
-          (d) => d.id === department.parentDepartmentId
-        );
+        const parentDept = mockDepartments.find((d) => d.id === department.parentDepartmentId)
         if (parentDept && parentDept.managerId) {
-          parentId = parentDept.managerId;
+          parentId = parentDept.managerId
         }
       }
     } else {
       // Normal çalışan - departman yöneticisine bağlı
       if (department && department.managerId) {
-        parentId = department.managerId;
+        parentId = department.managerId
 
         // Departman yöneticisinin seviyesine göre belirleme
-        const managerDept = mockDepartments.find(
-          (d) => d.managerId === department.managerId
-        );
+        const managerDept = mockDepartments.find((d) => d.managerId === department.managerId)
         if (managerDept && !managerDept.parentDepartmentId) {
-          level = 2; // CEO'ya direkt bağlı
+          level = 2 // CEO'ya direkt bağlı
         } 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,
       parentId: parentId,
       level: level,
-      position: employee.jobPosition?.name || "Belirsiz",
+      position: employee.jobPosition?.name || 'Belirsiz',
       isActive: employee.isActive,
-    });
-  });
+    })
+  })
 
-  return orgData.sort((a, b) => a.level - b.level);
-};
+  return orgData.sort((a, b) => a.level - b.level)
+}
 
 interface TreeNode {
-  employee: HrEmployee;
-  children: TreeNode[];
-  level: number;
+  employee: HrEmployee
+  children: TreeNode[]
+  level: number
 }
 
 const OrganizationChart: React.FC = () => {
-  const [employees] = useState<HrEmployee[]>(mockEmployees);
-  const [organizationData] = useState<OrgChart[]>(generateOrganizationData());
-  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
-  const [orgTree, setOrgTree] = useState<TreeNode[]>([]);
-  const [viewMode, setViewMode] = useState<"tree" | "cards">("tree");
-  const [selectedEmployee, setSelectedEmployee] = useState<HrEmployee | null>(
-    null
-  );
-  const [showModal, setShowModal] = useState(false);
-  const [selectedDepartment, setSelectedDepartment] = useState<string>("all");
+  const [employees] = useState<HrEmployee[]>(mockEmployees)
+  const [organizationData] = useState<OrgChart[]>(generateOrganizationData())
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set())
+  const [orgTree, setOrgTree] = useState<TreeNode[]>([])
+  const [viewMode, setViewMode] = useState<'tree' | 'cards'>('tree')
+  const [selectedEmployee, setSelectedEmployee] = useState<HrEmployee | null>(null)
+  const [showModal, setShowModal] = useState(false)
+  const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
 
   const handleViewEmployee = (employee: HrEmployee) => {
-    setSelectedEmployee(employee);
-    setShowModal(true);
-  };
+    setSelectedEmployee(employee)
+    setShowModal(true)
+  }
 
   const handleCloseModal = () => {
-    setShowModal(false);
-    setSelectedEmployee(null);
-  };
+    setShowModal(false)
+    setSelectedEmployee(null)
+  }
 
   useEffect(() => {
     // Build organization tree structure
     const buildTree = (): TreeNode[] => {
-      const nodeMap = new Map<string, TreeNode>();
+      const nodeMap = new Map<string, TreeNode>()
 
       // First, create all nodes
       employees.forEach((employee) => {
@@ -119,82 +112,79 @@ const OrganizationChart: React.FC = () => {
           employee,
           children: [],
           level: 0,
-        });
-      });
+        })
+      })
 
       // Then, build the tree structure
-      const rootNodes: TreeNode[] = [];
+      const rootNodes: TreeNode[] = []
 
       organizationData.forEach((orgData) => {
-        const node = nodeMap.get(orgData.employeeId);
+        const node = nodeMap.get(orgData.employeeId)
         if (node) {
-          node.level = orgData.level;
+          node.level = orgData.level
 
           if (orgData.parentId) {
-            const parentNode = nodeMap.get(orgData.parentId);
+            const parentNode = nodeMap.get(orgData.parentId)
             if (parentNode) {
-              parentNode.children.push(node);
+              parentNode.children.push(node)
             }
           } else {
-            rootNodes.push(node);
+            rootNodes.push(node)
           }
         }
-      });
+      })
 
-      return rootNodes;
-    };
+      return rootNodes
+    }
 
-    setOrgTree(buildTree());
+    setOrgTree(buildTree())
     // Auto-expand first level
     const firstLevelIds = organizationData
       .filter((org) => org.level <= 1)
-      .map((org) => org.employeeId);
-    setExpandedNodes(new Set(firstLevelIds));
-  }, [employees, organizationData]);
+      .map((org) => org.employeeId)
+    setExpandedNodes(new Set(firstLevelIds))
+  }, [employees, organizationData])
 
   // Filtered data for views
   const filteredOrgTree = useMemo(() => {
-    if (selectedDepartment === "all") {
-      return orgTree;
+    if (selectedDepartment === 'all') {
+      return orgTree
     }
 
     const filterTree = (nodes: TreeNode[]): TreeNode[] => {
-      const result: TreeNode[] = [];
+      const result: TreeNode[] = []
       for (const node of nodes) {
-        const filteredChildren = filterTree(node.children);
-        if (
-          node.employee.departmantId === selectedDepartment ||
-          filteredChildren.length > 0
-        ) {
-          result.push({ ...node, children: filteredChildren });
+        const filteredChildren = filterTree(node.children)
+        if (node.employee.departmantId === selectedDepartment || filteredChildren.length > 0) {
+          result.push({ ...node, children: filteredChildren })
         }
       }
-      return result;
-    };
+      return result
+    }
 
-    return filterTree(orgTree);
-  }, [orgTree, selectedDepartment]);
+    return filterTree(orgTree)
+  }, [orgTree, selectedDepartment])
 
   const filteredEmployees = useMemo(() => {
-    if (selectedDepartment === "all") {
-      return employees;
+    if (selectedDepartment === 'all') {
+      return employees
     }
-    return employees.filter((emp) => emp.departmantId === selectedDepartment);
-  }, [employees, selectedDepartment]);
+    return employees.filter((emp) => emp.departmantId === selectedDepartment)
+  }, [employees, selectedDepartment])
 
   const toggleNode = (nodeId: string) => {
-    const newExpanded = new Set(expandedNodes);
+    const newExpanded = new Set(expandedNodes)
     if (newExpanded.has(nodeId)) {
-      newExpanded.delete(nodeId);
+      newExpanded.delete(nodeId)
     } else {
-      newExpanded.add(nodeId);
+      newExpanded.add(nodeId)
     }
-    setExpandedNodes(newExpanded);
-  };
+    setExpandedNodes(newExpanded)
+  }
 
   const renderTreeNode = (node: TreeNode): React.ReactNode => {
-    const isExpanded = expandedNodes.has(node.employee.id);
-    const hasChildren = node.children.length > 0;
+    const isExpanded = expandedNodes.has(node.employee.id)
+    const hasChildren = node.children.length > 0
 
     return (
       <div key={node.employee.id} className="relative">
@@ -205,7 +195,7 @@ const OrganizationChart: React.FC = () => {
             style={{
               left: `${node.level * 1.25 - 0.7}rem`,
               top: 0,
-              height: "100%",
+              height: '100%',
             }}
           />
         )}
@@ -217,7 +207,7 @@ const OrganizationChart: React.FC = () => {
           {node.level > 0 && (
             <span
               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)}
                 className="p-1 text-gray-500 hover:text-gray-800 rounded-full hover:bg-gray-200"
               >
-                {isExpanded ? (
-                  <FaChevronDown size={10} />
-                ) : (
-                  <FaChevronRight size={10} />
-                )}
+                {isExpanded ? <FaChevronDown size={10} /> : <FaChevronRight size={10} />}
               </button>
             )}
           </div>
@@ -248,9 +234,7 @@ const OrganizationChart: React.FC = () => {
                   <p className="text-xs text-gray-600 truncate">
                     {node.employee.jobPosition?.name}
                   </p>
-                  <p className="text-xs text-gray-500 truncate">
-                    {node.employee.department?.name}
-                  </p>
+                  <p className="text-xs text-gray-500 truncate">{node.employee.department?.name}</p>
                 </div>
               </div>
             </div>
@@ -279,22 +263,23 @@ const OrganizationChart: React.FC = () => {
           <div>{node.children.map((child) => renderTreeNode(child))}</div>
         )}
       </div>
-    );
-  };
+    )
+  }
 
   const renderCardView = () => {
-    const groupedByLevel = filteredEmployees.reduce((acc, employee) => {
-      const orgData = organizationData.find(
-        (org) => org.employeeId === employee.id
-      );
-      const level = orgData?.level || 0;
+    const groupedByLevel = filteredEmployees.reduce(
+      (acc, employee) => {
+        const orgData = organizationData.find((org) => org.employeeId === employee.id)
+        const level = orgData?.level || 0
 
-      if (!acc[level]) {
-        acc[level] = [];
-      }
-      acc[level].push(employee);
-      return acc;
-    }, {} as Record<number, HrEmployee[]>);
+        if (!acc[level]) {
+          acc[level] = []
+        }
+        acc[level].push(employee)
+        return acc
+      },
+      {} as Record<number, HrEmployee[]>,
+    )
 
     return (
       <div className="space-y-6">
@@ -304,13 +289,13 @@ const OrganizationChart: React.FC = () => {
             <div key={level}>
               <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                 <FaBuilding className="w-5 h-5" />
-                {level === "0"
-                  ? "Üst Yönetim"
-                  : level === "1"
-                  ? "Orta Kademe Yönetim"
-                  : level === "2"
-                  ? "Alt Kademe Yönetim"
-                  : `${parseInt(level) + 1}. Seviye`}
+                {level === '0'
+                  ? 'Üst Yönetim'
+                  : level === '1'
+                    ? 'Orta Kademe Yönetim'
+                    : level === '2'
+                      ? 'Alt Kademe Yönetim'
+                      : `${parseInt(level) + 1}. Seviye`}
                 <span className="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
                   {levelEmployees.length} kişi
                 </span>
@@ -325,20 +310,20 @@ const OrganizationChart: React.FC = () => {
                     <div className="flex items-center mb-3">
                       <div
                         className={`w-8 h-8 rounded-full flex items-center justify-center mr-2 ${
-                          level === "0"
-                            ? "bg-blue-100"
-                            : level === "1"
-                            ? "bg-green-100"
-                            : "bg-gray-100"
+                          level === '0'
+                            ? 'bg-blue-100'
+                            : level === '1'
+                              ? 'bg-green-100'
+                              : 'bg-gray-100'
                         }`}
                       >
                         <FaUser
                           className={`w-4 h-4 ${
-                            level === "0"
-                              ? "text-blue-600"
-                              : level === "1"
-                              ? "text-green-600"
-                              : "text-gray-600"
+                            level === '0'
+                              ? 'text-blue-600'
+                              : level === '1'
+                                ? 'text-green-600'
+                                : 'text-gray-600'
                           }`}
                         />
                       </div>
@@ -350,9 +335,7 @@ const OrganizationChart: React.FC = () => {
                         >
                           {employee.fullName}
                         </h4>
-                        <p className="text-sm text-gray-600 truncate">
-                          {employee.code}
-                        </p>
+                        <p className="text-sm text-gray-600 truncate">{employee.code}</p>
                       </div>
                     </div>
 
@@ -360,9 +343,7 @@ const OrganizationChart: React.FC = () => {
                       <p className="text-xs text-gray-800 font-medium truncate">
                         {employee.jobPosition?.name}
                       </p>
-                      <p className="text-xs text-gray-600 truncate">
-                        {employee.department?.name}
-                      </p>
+                      <p className="text-xs text-gray-600 truncate">{employee.department?.name}</p>
                     </div>
                   </div>
                 ))}
@@ -370,113 +351,100 @@ const OrganizationChart: React.FC = () => {
             </div>
           ))}
       </div>
-    );
-  };
+    )
+  }
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">
-            Organizasyon Şeması
-          </h2>
-          <p className="text-sm text-gray-600 mt-1">
-            Kurumsal hiyerarşi ve raporlama yapısı
-          </p>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">Organizasyon Şeması</h2>
+            <p className="text-sm text-gray-600 mt-1">Kurumsal hiyerarşi ve raporlama yapısı</p>
+          </div>
+
+          <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 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>
+        {/* Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <Widget title="Toplam Personel" value={employees.length} color="blue" icon="FaBuilding" />
+
+          <Widget
+            title="Departmanlar"
+            value={new Set(employees.map((e) => e.department?.id).filter(Boolean)).size}
+            color="purple"
+            icon="FaBuilding"
+          />
+
+          <Widget
+            title="Seviye Sayısı"
+            value={
+              organizationData.length > 0
+                ? Math.max(...organizationData.map((org) => org.level)) + 1
+                : 0
+            }
+            color="orange"
+            icon="FaUser"
+          />
         </div>
-      </div>
 
-      {/* Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-        <Widget
-          title="Toplam Personel"
-          value={employees.length}
-          color="blue"
-          icon="FaBuilding"
-        />
+        {/* Content */}
+        <div className="bg-white rounded-lg border p-4">
+          {viewMode === 'tree' ? (
+            <div className="pt-2">{filteredOrgTree.map((node) => renderTreeNode(node))}</div>
+          ) : (
+            renderCardView()
+          )}
 
-        <Widget
-          title="Departmanlar"
-          value={
-            new Set(employees.map((e) => e.department?.id).filter(Boolean)).size
-          }
-          color="purple"
-          icon="FaBuilding"
-        />
-
-        <Widget
-          title="Seviye Sayısı"
-          value={
-            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>
-        )}
+          {(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 */}
@@ -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">
             {/* Modal Header */}
             <div className="flex justify-between items-center mb-4">
-              <h3 className="text-lg font-semibold text-gray-900">
-                Personel Detayları
-              </h3>
-              <button
-                onClick={handleCloseModal}
-                className="text-gray-400 hover:text-gray-600 p-1"
-              >
+              <h3 className="text-lg font-semibold text-gray-900">Personel Detayları</h3>
+              <button onClick={handleCloseModal} className="text-gray-400 hover:text-gray-600 p-1">
                 <FaTimes className="w-5 h-5" />
               </button>
             </div>
@@ -504,13 +467,9 @@ const OrganizationChart: React.FC = () => {
                   <FaUser className="w-8 h-8 text-blue-600" />
                 </div>
                 <div>
-                  <h4 className="text-lg font-bold text-gray-900">
-                    {selectedEmployee.fullName}
-                  </h4>
+                  <h4 className="text-lg font-bold text-gray-900">{selectedEmployee.fullName}</h4>
                   <p className="text-gray-600">{selectedEmployee.code}</p>
-                  <p className="text-sm text-gray-500">
-                    {selectedEmployee.jobPosition?.name}
-                  </p>
+                  <p className="text-sm text-gray-500">{selectedEmployee.jobPosition?.name}</p>
                 </div>
               </div>
 
@@ -524,17 +483,13 @@ const OrganizationChart: React.FC = () => {
                   <div className="flex items-center">
                     <FaEnvelope className="w-4 h-4 text-gray-500 mr-3" />
                     <span className="text-sm">E-posta:</span>
-                    <span className="ml-2 text-sm font-medium">
-                      {selectedEmployee.email}
-                    </span>
+                    <span className="ml-2 text-sm font-medium">{selectedEmployee.email}</span>
                   </div>
                   {selectedEmployee.phone && (
                     <div className="flex items-center">
                       <FaPhone className="w-4 h-4 text-gray-500 mr-3" />
                       <span className="text-sm">İş Telefonu:</span>
-                      <span className="ml-2 text-sm font-medium">
-                        {selectedEmployee.phone}
-                      </span>
+                      <span className="ml-2 text-sm font-medium">{selectedEmployee.phone}</span>
                     </div>
                   )}
                   {selectedEmployee.personalPhone && (
@@ -559,39 +514,25 @@ const OrganizationChart: React.FC = () => {
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
                       <span className="text-sm text-gray-600">Departman:</span>
-                      <p className="font-medium">
-                        {selectedEmployee.department?.name}
-                      </p>
+                      <p className="font-medium">{selectedEmployee.department?.name}</p>
                     </div>
                     <div>
                       <span className="text-sm text-gray-600">Pozisyon:</span>
-                      <p className="font-medium">
-                        {selectedEmployee.jobPosition?.name}
-                      </p>
+                      <p className="font-medium">{selectedEmployee.jobPosition?.name}</p>
                     </div>
                     <div>
-                      <span className="text-sm text-gray-600">
-                        İşe Başlama Tarihi:
-                      </span>
+                      <span className="text-sm text-gray-600">İşe Başlama Tarihi:</span>
                       <p className="font-medium flex items-center">
                         <FaCalendar className="w-4 h-4 mr-1 text-gray-500" />
-                        {new Date(selectedEmployee.hireDate).toLocaleDateString(
-                          "tr-TR"
-                        )}
+                        {new Date(selectedEmployee.hireDate).toLocaleDateString('tr-TR')}
                       </p>
                     </div>
                     <div>
-                      <span className="text-sm text-gray-600">
-                        İstihdam Türü:
-                      </span>
-                      <p className="font-medium">
-                        {selectedEmployee.employmentType}
-                      </p>
+                      <span className="text-sm text-gray-600">İstihdam Türü:</span>
+                      <p className="font-medium">{selectedEmployee.employmentType}</p>
                     </div>
                     <div>
-                      <span className="text-sm text-gray-600">
-                        Çalışma Lokasyonu:
-                      </span>
+                      <span className="text-sm text-gray-600">Çalışma Lokasyonu:</span>
                       <p className="font-medium flex items-center">
                         <FaMapMarkerAlt className="w-4 h-4 mr-1 text-gray-500" />
                         {selectedEmployee.workLocation}
@@ -602,11 +543,11 @@ const OrganizationChart: React.FC = () => {
                       <span
                         className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
                           selectedEmployee.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'
                         }`}
                       >
-                        {selectedEmployee.isActive ? "Aktif" : "Pasif"}
+                        {selectedEmployee.isActive ? 'Aktif' : 'Pasif'}
                       </span>
                     </div>
                   </div>
@@ -622,14 +563,10 @@ const OrganizationChart: React.FC = () => {
                 <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>
-                      <span className="text-sm text-gray-600">
-                        Doğum Tarihi:
-                      </span>
+                      <span className="text-sm text-gray-600">Doğum Tarihi:</span>
                       <p className="font-medium flex items-center">
                         <FaCalendar className="w-4 h-4 mr-1 text-gray-500" />
-                        {new Date(
-                          selectedEmployee.birthDate
-                        ).toLocaleDateString("tr-TR")}
+                        {new Date(selectedEmployee.birthDate).toLocaleDateString('tr-TR')}
                       </p>
                     </div>
                     <div>
@@ -637,20 +574,12 @@ const OrganizationChart: React.FC = () => {
                       <p className="font-medium">{selectedEmployee.gender}</p>
                     </div>
                     <div>
-                      <span className="text-sm text-gray-600">
-                        Medeni Durum:
-                      </span>
-                      <p className="font-medium">
-                        {selectedEmployee.maritalStatus}
-                      </p>
+                      <span className="text-sm text-gray-600">Medeni Durum:</span>
+                      <p className="font-medium">{selectedEmployee.maritalStatus}</p>
                     </div>
                     <div>
-                      <span className="text-sm text-gray-600">
-                        TC Kimlik No:
-                      </span>
-                      <p className="font-medium">
-                        {selectedEmployee.nationalId}
-                      </p>
+                      <span className="text-sm text-gray-600">TC Kimlik No:</span>
+                      <p className="font-medium">{selectedEmployee.nationalId}</p>
                     </div>
                   </div>
 
@@ -659,8 +588,7 @@ const OrganizationChart: React.FC = () => {
                       <span className="text-sm text-gray-600">Adres:</span>
                       <p className="font-medium flex items-start">
                         <FaMapMarkerAlt className="w-4 h-4 mr-1 text-gray-500 mt-0.5" />
-                        {selectedEmployee.address.street},{" "}
-                        {selectedEmployee.address.city},{" "}
+                        {selectedEmployee.address.street}, {selectedEmployee.address.city},{' '}
                         {selectedEmployee.address.country}
                       </p>
                     </div>
@@ -679,9 +607,7 @@ const OrganizationChart: React.FC = () => {
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <div>
                         <span className="text-sm text-gray-600">İsim:</span>
-                        <p className="font-medium">
-                          {selectedEmployee.emergencyContact.name}
-                        </p>
+                        <p className="font-medium">{selectedEmployee.emergencyContact.name}</p>
                       </div>
                       <div>
                         <span className="text-sm text-gray-600">Yakınlık:</span>
@@ -691,9 +617,7 @@ const OrganizationChart: React.FC = () => {
                       </div>
                       <div>
                         <span className="text-sm text-gray-600">Telefon:</span>
-                        <p className="font-medium">
-                          {selectedEmployee.emergencyContact.phone}
-                        </p>
+                        <p className="font-medium">{selectedEmployee.emergencyContact.phone}</p>
                       </div>
                     </div>
                   </div>
@@ -713,8 +637,8 @@ const OrganizationChart: React.FC = () => {
           </div>
         </div>
       )}
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default OrganizationChart;
+export default OrganizationChart
diff --git a/ui/src/views/hr/components/OvertimeManagement.tsx b/ui/src/views/hr/components/OvertimeManagement.tsx
index 78705702..9dbf4c6b 100644
--- a/ui/src/views/hr/components/OvertimeManagement.tsx
+++ b/ui/src/views/hr/components/OvertimeManagement.tsx
@@ -1,99 +1,87 @@
-import React, { useState } from "react";
-import {
-  FaClock,
-  FaUser,
-  FaPlus,
-  FaEdit,
-  FaCheck,
-  FaTimes,
-  FaEye,
-  FaUsers,
-} from "react-icons/fa";
-import { LeaveStatusEnum, HrOvertime } from "../../../types/hr";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockOvertimes } from "../../../mocks/mockOvertimes";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockDepartments } from "../../../mocks/mockDepartments";
-import Widget from "../../../components/common/Widget";
-import { getLeaveStatusColor, getLeaveStatusText } from "../../../utils/erp";
+import React, { useState } from 'react'
+import { FaClock, FaUser, FaPlus, FaEdit, FaCheck, FaTimes, FaEye, FaUsers } from 'react-icons/fa'
+import { LeaveStatusEnum, HrOvertime } from '../../../types/hr'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockOvertimes } from '../../../mocks/mockOvertimes'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockDepartments } from '../../../mocks/mockDepartments'
+import Widget from '../../../components/common/Widget'
+import { getLeaveStatusColor, getLeaveStatusText } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const OvertimeManagement: React.FC = () => {
   // Overtime states
-  const [overtimes, setOvertimes] = useState<HrOvertime[]>(mockOvertimes);
-  const [overtimeSelectedStatus, setOvertimeSelectedStatus] =
-    useState<string>("all");
-  const [overtimeSelectedPeriod, setOvertimeSelectedPeriod] =
-    useState<string>("all");
-  const [searchOvertimesTerm, setSearchOvertimesTerm] = useState("");
-  const [selectedDepartment, setSelectedDepartment] = useState<string>("all");
+  const [overtimes, setOvertimes] = useState<HrOvertime[]>(mockOvertimes)
+  const [overtimeSelectedStatus, setOvertimeSelectedStatus] = useState<string>('all')
+  const [overtimeSelectedPeriod, setOvertimeSelectedPeriod] = useState<string>('all')
+  const [searchOvertimesTerm, setSearchOvertimesTerm] = useState('')
+  const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
 
   // Overtime modal states
-  const [showOvertimeAddModal, setShowOvertimeAddModal] = useState(false);
-  const [showOvertimeEditModal, setShowOvertimeEditModal] = useState(false);
-  const [showOvertimeViewModal, setShowOvertimeViewModal] = useState(false);
-  const [showOvertimeRejectModal, setShowOvertimeRejectModal] = useState(false);
-  const [showBulkOvertimeModal, setShowBulkOvertimeModal] = useState(false);
-  const [selectedOvertime, setSelectedOvertime] = useState<HrOvertime | null>(
-    null
-  );
-  const [overtimeRejectReason, setOvertimeRejectReason] = useState("");
+  const [showOvertimeAddModal, setShowOvertimeAddModal] = useState(false)
+  const [showOvertimeEditModal, setShowOvertimeEditModal] = useState(false)
+  const [showOvertimeViewModal, setShowOvertimeViewModal] = useState(false)
+  const [showOvertimeRejectModal, setShowOvertimeRejectModal] = useState(false)
+  const [showBulkOvertimeModal, setShowBulkOvertimeModal] = useState(false)
+  const [selectedOvertime, setSelectedOvertime] = useState<HrOvertime | null>(null)
+  const [overtimeRejectReason, setOvertimeRejectReason] = useState('')
 
   // Overtime form state
   const [overtimeFormData, setOvertimeFormData] = useState({
-    employeeId: "",
-    date: "",
-    startTime: "",
-    endTime: "",
-    reason: "",
+    employeeId: '',
+    date: '',
+    startTime: '',
+    endTime: '',
+    reason: '',
     rate: 1.5,
-  });
+  })
 
   // Bulk overtime form state
   const [bulkOvertimeFormData, setBulkOvertimeFormData] = useState({
-    departmentId: "",
+    departmentId: '',
     selectedEmployees: [] as string[],
-    date: "",
-    startTime: "",
-    endTime: "",
-    reason: "",
+    date: '',
+    startTime: '',
+    endTime: '',
+    reason: '',
     rate: 1.5,
-  });
+  })
 
   // Get employees by department
   const getEmployeesByDepartment = (departmentId: string) => {
-    return mockEmployees.filter((emp) => emp.departmantId === departmentId);
-  };
+    return mockEmployees.filter((emp) => emp.departmantId === departmentId)
+  }
 
   // Get selected employee object
   const getSelectedEmployee = (employeeId: string) => {
-    return mockEmployees.find((emp) => emp.id === employeeId);
-  };
+    return mockEmployees.find((emp) => emp.id === employeeId)
+  }
 
   // Overtime handlers
   const handleOvertimeAdd = () => {
     setOvertimeFormData({
-      employeeId: "",
-      date: "",
-      startTime: "",
-      endTime: "",
-      reason: "",
+      employeeId: '',
+      date: '',
+      startTime: '',
+      endTime: '',
+      reason: '',
       rate: 1.5,
-    });
-    setShowOvertimeAddModal(true);
-  };
+    })
+    setShowOvertimeAddModal(true)
+  }
 
   const handleOvertimeEdit = (overtime: HrOvertime) => {
-    setSelectedOvertime(overtime);
+    setSelectedOvertime(overtime)
     setOvertimeFormData({
       employeeId: overtime.employeeId,
-      date: new Date(overtime.date).toISOString().split("T")[0],
+      date: new Date(overtime.date).toISOString().split('T')[0],
       startTime: overtime.startTime,
       endTime: overtime.endTime,
       reason: overtime.reason,
       rate: overtime.rate || 1.5,
-    });
-    setShowOvertimeEditModal(true);
-  };
+    })
+    setShowOvertimeEditModal(true)
+  }
 
   const handleOvertimeApprove = (id: string) => {
     setOvertimes((prevOvertimes) =>
@@ -104,11 +92,11 @@ const OvertimeManagement: React.FC = () => {
               status: LeaveStatusEnum.Approved,
               lastModificationTime: new Date(),
             }
-          : overtime
-      )
-    );
-    alert("Mesai talebi onaylandı!");
-  };
+          : overtime,
+      ),
+    )
+    alert('Mesai talebi onaylandı!')
+  }
 
   const handleOvertimeReject = (id: string, reason?: string) => {
     if (reason) {
@@ -120,25 +108,25 @@ const OvertimeManagement: React.FC = () => {
                 status: LeaveStatusEnum.Rejected,
                 lastModificationTime: new Date(),
               }
-            : overtime
-        )
-      );
-      setShowOvertimeRejectModal(false);
-      setOvertimeRejectReason("");
-      alert("Mesai talebi reddedildi!");
+            : overtime,
+        ),
+      )
+      setShowOvertimeRejectModal(false)
+      setOvertimeRejectReason('')
+      alert('Mesai talebi reddedildi!')
     } else {
-      const overtime = overtimes.find((o) => o.id === id);
+      const overtime = overtimes.find((o) => o.id === id)
       if (overtime) {
-        setSelectedOvertime(overtime);
-        setShowOvertimeRejectModal(true);
+        setSelectedOvertime(overtime)
+        setShowOvertimeRejectModal(true)
       }
     }
-  };
+  }
 
   const handleOvertimeView = (overtime: HrOvertime) => {
-    setSelectedOvertime(overtime);
-    setShowOvertimeViewModal(true);
-  };
+    setSelectedOvertime(overtime)
+    setShowOvertimeViewModal(true)
+  }
 
   const handleSubmitOvertimeAdd = () => {
     if (
@@ -147,18 +135,17 @@ const OvertimeManagement: React.FC = () => {
       !overtimeFormData.startTime ||
       !overtimeFormData.endTime
     ) {
-      alert("Lütfen tüm gerekli alanları doldurun!");
-      return;
+      alert('Lütfen tüm gerekli alanları doldurun!')
+      return
     }
 
-    const startTime = new Date(`2000-01-01 ${overtimeFormData.startTime}`);
-    const endTime = new Date(`2000-01-01 ${overtimeFormData.endTime}`);
-    const totalHours =
-      (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60);
+    const startTime = new Date(`2000-01-01 ${overtimeFormData.startTime}`)
+    const endTime = new Date(`2000-01-01 ${overtimeFormData.endTime}`)
+    const totalHours = (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60)
 
     if (totalHours <= 0) {
-      alert("Bitiş saati başlangıç saatinden sonra olmalıdır!");
-      return;
+      alert('Bitiş saati başlangıç saatinden sonra olmalıdır!')
+      return
     }
 
     const newOvertime: HrOvertime = {
@@ -174,15 +161,15 @@ const OvertimeManagement: React.FC = () => {
       amount: totalHours * 100 * overtimeFormData.rate, // Assuming 100 TL/hour base rate
       creationTime: new Date(),
       lastModificationTime: new Date(),
-    };
+    }
 
-    setOvertimes((prevOvertimes) => [...prevOvertimes, newOvertime]);
-    setShowOvertimeAddModal(false);
-    alert("Mesai talebi başarıyla oluşturuldu!");
-  };
+    setOvertimes((prevOvertimes) => [...prevOvertimes, newOvertime])
+    setShowOvertimeAddModal(false)
+    alert('Mesai talebi başarıyla oluşturuldu!')
+  }
 
   const handleSubmitOvertimeEdit = () => {
-    if (!selectedOvertime) return;
+    if (!selectedOvertime) return
 
     if (
       !overtimeFormData.employeeId ||
@@ -190,18 +177,17 @@ const OvertimeManagement: React.FC = () => {
       !overtimeFormData.startTime ||
       !overtimeFormData.endTime
     ) {
-      alert("Lütfen tüm gerekli alanları doldurun!");
-      return;
+      alert('Lütfen tüm gerekli alanları doldurun!')
+      return
     }
 
-    const startTime = new Date(`2000-01-01 ${overtimeFormData.startTime}`);
-    const endTime = new Date(`2000-01-01 ${overtimeFormData.endTime}`);
-    const totalHours =
-      (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60);
+    const startTime = new Date(`2000-01-01 ${overtimeFormData.startTime}`)
+    const endTime = new Date(`2000-01-01 ${overtimeFormData.endTime}`)
+    const totalHours = (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60)
 
     if (totalHours <= 0) {
-      alert("Bitiş saati başlangıç saatinden sonra olmalıdır!");
-      return;
+      alert('Bitiş saati başlangıç saatinden sonra olmalıdır!')
+      return
     }
 
     setOvertimes((prevOvertimes) =>
@@ -219,36 +205,36 @@ const OvertimeManagement: React.FC = () => {
               amount: totalHours * 100 * overtimeFormData.rate,
               lastModificationTime: new Date(),
             }
-          : overtime
-      )
-    );
+          : overtime,
+      ),
+    )
 
-    setShowOvertimeEditModal(false);
-    setSelectedOvertime(null);
-    alert("Mesai talebi başarıyla güncellendi!");
-  };
+    setShowOvertimeEditModal(false)
+    setSelectedOvertime(null)
+    alert('Mesai talebi başarıyla güncellendi!')
+  }
 
   const handleSubmitOvertimeReject = () => {
     if (!selectedOvertime || !overtimeRejectReason.trim()) {
-      alert("Lütfen red nedeni giriniz!");
-      return;
+      alert('Lütfen red nedeni giriniz!')
+      return
     }
 
-    handleOvertimeReject(selectedOvertime.id, overtimeRejectReason);
-  };
+    handleOvertimeReject(selectedOvertime.id, overtimeRejectReason)
+  }
 
   const handleBulkOvertimeAdd = () => {
     setBulkOvertimeFormData({
-      departmentId: "",
+      departmentId: '',
       selectedEmployees: [],
-      date: "",
-      startTime: "",
-      endTime: "",
-      reason: "",
+      date: '',
+      startTime: '',
+      endTime: '',
+      reason: '',
       rate: 1.5,
-    });
-    setShowBulkOvertimeModal(true);
-  };
+    })
+    setShowBulkOvertimeModal(true)
+  }
 
   const handleSubmitBulkOvertime = () => {
     if (
@@ -257,149 +243,130 @@ const OvertimeManagement: React.FC = () => {
       !bulkOvertimeFormData.startTime ||
       !bulkOvertimeFormData.endTime
     ) {
-      alert(
-        "Lütfen en az bir personel seçin ve tüm gerekli alanları doldurun!"
-      );
-      return;
+      alert('Lütfen en az bir personel seçin ve tüm gerekli alanları doldurun!')
+      return
     }
 
-    const startTime = new Date(`2000-01-01 ${bulkOvertimeFormData.startTime}`);
-    const endTime = new Date(`2000-01-01 ${bulkOvertimeFormData.endTime}`);
-    const totalHours =
-      (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60);
+    const startTime = new Date(`2000-01-01 ${bulkOvertimeFormData.startTime}`)
+    const endTime = new Date(`2000-01-01 ${bulkOvertimeFormData.endTime}`)
+    const totalHours = (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60)
 
     if (totalHours <= 0) {
-      alert("Bitiş saati başlangıç saatinden sonra olmalıdır!");
-      return;
+      alert('Bitiş saati başlangıç saatinden sonra olmalıdır!')
+      return
     }
 
-    const newOvertimes: HrOvertime[] =
-      bulkOvertimeFormData.selectedEmployees.map((employeeId) => {
-        const employee = getSelectedEmployee(employeeId);
-        return {
-          id: `ot_${Date.now()}_${employeeId}`,
-          employeeId: employeeId,
-          employee: employee,
-          date: new Date(bulkOvertimeFormData.date),
-          startTime: bulkOvertimeFormData.startTime,
-          endTime: bulkOvertimeFormData.endTime,
-          totalHours: totalHours,
-          reason: bulkOvertimeFormData.reason,
-          status: LeaveStatusEnum.Pending,
-          rate: bulkOvertimeFormData.rate,
-          amount: totalHours * 100 * bulkOvertimeFormData.rate, // 100 TL/hour base rate
-          creationTime: new Date(),
-          lastModificationTime: new Date(),
-        };
-      });
+    const newOvertimes: HrOvertime[] = bulkOvertimeFormData.selectedEmployees.map((employeeId) => {
+      const employee = getSelectedEmployee(employeeId)
+      return {
+        id: `ot_${Date.now()}_${employeeId}`,
+        employeeId: employeeId,
+        employee: employee,
+        date: new Date(bulkOvertimeFormData.date),
+        startTime: bulkOvertimeFormData.startTime,
+        endTime: bulkOvertimeFormData.endTime,
+        totalHours: totalHours,
+        reason: bulkOvertimeFormData.reason,
+        status: LeaveStatusEnum.Pending,
+        rate: bulkOvertimeFormData.rate,
+        amount: totalHours * 100 * bulkOvertimeFormData.rate, // 100 TL/hour base rate
+        creationTime: new Date(),
+        lastModificationTime: new Date(),
+      }
+    })
 
-    setOvertimes((prevOvertimes) => [...prevOvertimes, ...newOvertimes]);
-    setShowBulkOvertimeModal(false);
+    setOvertimes((prevOvertimes) => [...prevOvertimes, ...newOvertimes])
+    setShowBulkOvertimeModal(false)
     setBulkOvertimeFormData({
-      departmentId: "",
+      departmentId: '',
       selectedEmployees: [],
-      date: "",
-      startTime: "",
-      endTime: "",
-      reason: "",
+      date: '',
+      startTime: '',
+      endTime: '',
+      reason: '',
       rate: 1.5,
-    });
-    alert(
-      `${newOvertimes.length} personel için toplu mesai talebi başarıyla oluşturuldu!`
-    );
-  };
+    })
+    alert(`${newOvertimes.length} personel için toplu mesai talebi başarıyla oluşturuldu!`)
+  }
 
   // Filter overtime data
   const filteredOvertimes = overtimes.filter((overtime) => {
-    if (
-      overtimeSelectedStatus !== "all" &&
-      overtime.status !== overtimeSelectedStatus
-    ) {
-      return false;
+    if (overtimeSelectedStatus !== 'all' && overtime.status !== overtimeSelectedStatus) {
+      return false
     }
     if (
-      selectedDepartment !== "all" &&
+      selectedDepartment !== 'all' &&
       overtime.employee?.department?.name !== selectedDepartment
     ) {
-      return false;
+      return false
     }
 
-    if (overtimeSelectedPeriod !== "all") {
-      const now = new Date();
-      const overtimeDate = new Date(overtime.date);
+    if (overtimeSelectedPeriod !== 'all') {
+      const now = new Date()
+      const overtimeDate = new Date(overtime.date)
 
       switch (overtimeSelectedPeriod) {
-        case "this-month": {
-          const currentMonth = now.getMonth();
-          const currentYear = now.getFullYear();
+        case 'this-month': {
+          const currentMonth = now.getMonth()
+          const currentYear = now.getFullYear()
           return (
-            overtimeDate.getMonth() === currentMonth &&
-            overtimeDate.getFullYear() === currentYear
-          );
+            overtimeDate.getMonth() === currentMonth && overtimeDate.getFullYear() === currentYear
+          )
         }
-        case "last-month": {
-          const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1);
+        case 'last-month': {
+          const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1)
           return (
             overtimeDate.getMonth() === lastMonth.getMonth() &&
             overtimeDate.getFullYear() === lastMonth.getFullYear()
-          );
+          )
         }
-        case "last-3-months": {
-          const threeMonthsAgo = new Date(
-            now.getFullYear(),
-            now.getMonth() - 3
-          );
-          return overtimeDate >= threeMonthsAgo;
+        case 'last-3-months': {
+          const threeMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 3)
+          return overtimeDate >= threeMonthsAgo
         }
         default:
-          return true;
+          return true
       }
     }
 
     // Search filter
-    if (searchOvertimesTerm.trim() !== "") {
+    if (searchOvertimesTerm.trim() !== '') {
       if (overtime.employeeId !== searchOvertimesTerm) {
-        return false;
+        return false
       }
     }
 
-    return true;
-  });
+    return true
+  })
 
   // Overtime table columns
   const overtimeColumns: Column<HrOvertime>[] = [
     {
-      key: "employee",
-      header: "Personel",
+      key: 'employee',
+      header: 'Personel',
       render: (overtime: HrOvertime) => {
-        const employee = mockEmployees.find(
-          (emp) => emp.id === overtime.employeeId
-        );
+        const employee = mockEmployees.find((emp) => emp.id === overtime.employeeId)
         return (
           <div className="flex items-center gap-2">
             <FaUser className="w-4 h-4 text-gray-500" />
             <div>
-              <div className="font-medium text-gray-900">
-                {employee?.fullName}
-              </div>
+              <div className="font-medium text-gray-900">{employee?.fullName}</div>
               <div className="text-sm text-gray-500">{employee?.code}</div>
             </div>
           </div>
-        );
+        )
       },
     },
     {
-      key: "date",
-      header: "Tarih",
+      key: 'date',
+      header: 'Tarih',
       render: (overtime: HrOvertime) => (
-        <div className="text-sm">
-          {new Date(overtime.date).toLocaleDateString("tr-TR")}
-        </div>
+        <div className="text-sm">{new Date(overtime.date).toLocaleDateString('tr-TR')}</div>
       ),
     },
     {
-      key: "time",
-      header: "Mesai Saatleri",
+      key: 'time',
+      header: 'Mesai Saatleri',
       render: (overtime: HrOvertime) => (
         <div className="text-sm">
           <div>
@@ -410,8 +377,8 @@ const OvertimeManagement: React.FC = () => {
       ),
     },
     {
-      key: "reason",
-      header: "Neden",
+      key: 'reason',
+      header: 'Neden',
       render: (overtime: HrOvertime) => (
         <div className="text-sm max-w-xs truncate" title={overtime.reason}>
           {overtime.reason}
@@ -419,28 +386,24 @@ const OvertimeManagement: React.FC = () => {
       ),
     },
     {
-      key: "rate",
-      header: "Çarpan",
+      key: 'rate',
+      header: 'Çarpan',
+      render: (overtime: HrOvertime) => <div className="text-sm">x{overtime.rate}</div>,
+    },
+    {
+      key: 'amount',
+      header: 'Tutar',
       render: (overtime: HrOvertime) => (
-        <div className="text-sm">x{overtime.rate}</div>
+        <div className="text-sm font-medium">{overtime.amount?.toLocaleString('tr-TR')} ₺</div>
       ),
     },
     {
-      key: "amount",
-      header: "Tutar",
-      render: (overtime: HrOvertime) => (
-        <div className="text-sm font-medium">
-          {overtime.amount?.toLocaleString("tr-TR")} ₺
-        </div>
-      ),
-    },
-    {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (overtime: HrOvertime) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getLeaveStatusColor(
-            overtime.status
+            overtime.status,
           )}`}
         >
           {getLeaveStatusText(overtime.status)}
@@ -448,8 +411,8 @@ const OvertimeManagement: React.FC = () => {
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (overtime: HrOvertime) => (
         <div className="flex gap-1">
           <button
@@ -489,158 +452,140 @@ const OvertimeManagement: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">Mesai Yönetimi</h2>
-          <p className="text-sm text-gray-600 mt-1">
-            Personel mesai talepleri ve onay süreçleri
-          </p>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">Mesai Yönetimi</h2>
+            <p className="text-sm text-gray-600 mt-1">Personel mesai talepleri ve onay süreçleri</p>
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={handleOvertimeAdd}
+              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 Mesai Talebi
+            </button>
+            <button
+              onClick={handleBulkOvertimeAdd}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+            >
+              <FaUsers className="w-4 h-4" />
+              Toplu Mesai
+            </button>
+          </div>
         </div>
-        <div className="flex gap-2">
-          <button
-            onClick={handleOvertimeAdd}
-            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"
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Widget title="Toplam Mesai" value={overtimes.length} color="blue" icon="FaClock" />
+
+          <Widget
+            title="Beklemede"
+            value={overtimes.filter((o) => o.status === LeaveStatusEnum.Pending).length}
+            color="yellow"
+            icon="FaClock"
+          />
+
+          <Widget
+            title="Onaylanan"
+            value={overtimes.filter((o) => o.status === LeaveStatusEnum.Approved).length}
+            color="green"
+            icon="FaCheck"
+          />
+
+          <Widget
+            title="Toplam Tutar"
+            value={`${overtimes
+              .filter((o) => o.status === LeaveStatusEnum.Approved)
+              .reduce((sum, o) => sum + (o.amount || 0), 0)
+              .toLocaleString('tr-TR')} ₺`}
+            color="purple"
+            icon="FaDollarSign"
+          />
+        </div>
+
+        {/* Filters */}
+        <div className="flex gap-3 items-center">
+          <select
+            value={selectedDepartment}
+            onChange={(e) => setSelectedDepartment(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
           >
-            <FaPlus className="w-4 h-4" />
-            Yeni Mesai Talebi
-          </button>
-          <button
-            onClick={handleBulkOvertimeAdd}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+            <option value="all">Tüm Departmanlar</option>
+            {mockDepartments.map((dept) => (
+              <option key={dept.id} value={dept.name}>
+                {dept.name}
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={searchOvertimesTerm}
+            onChange={(e) => setSearchOvertimesTerm(e.target.value)}
+            className="w-full px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
           >
-            <FaUsers className="w-4 h-4" />
-            Toplu Mesai
-          </button>
+            <option value="">Personel seçiniz...</option>
+            {mockEmployees.map((employee) => (
+              <option key={employee.id} value={employee.id}>
+                {employee.fullName} ({employee.code})
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={overtimeSelectedStatus}
+            onChange={(e) => setOvertimeSelectedStatus(e.target.value)}
+            className="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value="all">Tüm Durumlar</option>
+            <option value={LeaveStatusEnum.Pending}>Beklemede</option>
+            <option value={LeaveStatusEnum.Approved}>Onaylı</option>
+            <option value={LeaveStatusEnum.Rejected}>Reddedildi</option>
+          </select>
+
+          <select
+            value={overtimeSelectedPeriod}
+            onChange={(e) => setOvertimeSelectedPeriod(e.target.value)}
+            className="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value="all">Tüm Dönemler</option>
+            <option value="this-month">Bu Ay</option>
+            <option value="last-month">Geçen Ay</option>
+            <option value="last-3-months">Son 3 Ay</option>
+          </select>
         </div>
-      </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Widget
-          title="Toplam Mesai"
-          value={overtimes.length}
-          color="blue"
-          icon="FaClock"
-        />
-
-        <Widget
-          title="Beklemede"
-          value={
-            overtimes.filter((o) => o.status === LeaveStatusEnum.Pending).length
-          }
-          color="yellow"
-          icon="FaClock"
-        />
-
-        <Widget
-          title="Onaylanan"
-          value={
-            overtimes.filter((o) => o.status === LeaveStatusEnum.Approved)
-              .length
-          }
-          color="green"
-          icon="FaCheck"
-        />
-
-        <Widget
-          title="Toplam Tutar"
-          value={`${overtimes
-            .filter((o) => o.status === LeaveStatusEnum.Approved)
-            .reduce((sum, o) => sum + (o.amount || 0), 0)
-            .toLocaleString("tr-TR")} ₺`}
-          color="purple"
-          icon="FaDollarSign"
-        />
-      </div>
-
-      {/* Filters */}
-      <div className="flex gap-3 items-center">
-        <select
-          value={selectedDepartment}
-          onChange={(e) => setSelectedDepartment(e.target.value)}
-          className="px-3 py-1.5 border border-gray-300 rounded-md text-sm 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.name}>
-              {dept.name}
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={searchOvertimesTerm}
-          onChange={(e) => setSearchOvertimesTerm(e.target.value)}
-          className="w-full px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="">Personel seçiniz...</option>
-          {mockEmployees.map((employee) => (
-            <option key={employee.id} value={employee.id}>
-              {employee.fullName} ({employee.code})
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={overtimeSelectedStatus}
-          onChange={(e) => setOvertimeSelectedStatus(e.target.value)}
-          className="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-        >
-          <option value="all">Tüm Durumlar</option>
-          <option value={LeaveStatusEnum.Pending}>Beklemede</option>
-          <option value={LeaveStatusEnum.Approved}>Onaylı</option>
-          <option value={LeaveStatusEnum.Rejected}>Reddedildi</option>
-        </select>
-
-        <select
-          value={overtimeSelectedPeriod}
-          onChange={(e) => setOvertimeSelectedPeriod(e.target.value)}
-          className="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-        >
-          <option value="all">Tüm Dönemler</option>
-          <option value="this-month">Bu Ay</option>
-          <option value="last-month">Geçen Ay</option>
-          <option value="last-3-months">Son 3 Ay</option>
-        </select>
-      </div>
-
-      {/* Data Table */}
-      <div className="bg-white rounded-lg shadow-sm border">
-        <DataTable data={filteredOvertimes} columns={overtimeColumns} />
-      </div>
-
-      {filteredOvertimes.length === 0 && (
-        <div className="text-center py-12">
-          <FaClock className="w-10 h-10 text-gray-400 mx-auto mb-3" />
-          <h3 className="text-base font-medium text-gray-900 mb-2">
-            Mesai talebi bulunamadı
-          </h3>
-          <p className="text-gray-500">
-            Seçilen kriterlere uygun mesai talebi bulunmamaktadır.
-          </p>
+        {/* Data Table */}
+        <div className="bg-white rounded-lg shadow-sm border">
+          <DataTable data={filteredOvertimes} columns={overtimeColumns} />
         </div>
-      )}
+
+        {filteredOvertimes.length === 0 && (
+          <div className="text-center py-12">
+            <FaClock className="w-10 h-10 text-gray-400 mx-auto mb-3" />
+            <h3 className="text-base font-medium text-gray-900 mb-2">Mesai talebi bulunamadı</h3>
+            <p className="text-gray-500">Seçilen kriterlere uygun mesai talebi bulunmamaktadır.</p>
+          </div>
+        )}
+      </div>
 
       {/* Overtime Add/Edit Modal */}
-      {(showOvertimeAddModal || showOvertimeEditModal) && selectedOvertime && (
+      {(showOvertimeAddModal || (showOvertimeEditModal && selectedOvertime)) && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
           <div className="bg-white rounded-lg p-4 w-full max-w-md">
             <h3 className="text-base font-semibold mb-4">
-              {showOvertimeAddModal
-                ? "Yeni Mesai Talebi"
-                : "Mesai Talebini Düzenle"}
+              {showOvertimeAddModal ? 'Yeni Mesai Talebi' : 'Mesai Talebini Düzenle'}
             </h3>
 
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Personel
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Personel</label>
                 <select
                   value={overtimeFormData.employeeId}
                   onChange={(e) =>
@@ -661,9 +606,7 @@ const OvertimeManagement: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Tarih
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Tarih</label>
                 <input
                   type="date"
                   value={overtimeFormData.date}
@@ -734,9 +677,7 @@ const OvertimeManagement: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Neden
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Neden</label>
                 <textarea
                   value={overtimeFormData.reason}
                   onChange={(e) =>
@@ -755,23 +696,19 @@ const OvertimeManagement: React.FC = () => {
             <div className="flex justify-end gap-2 mt-6">
               <button
                 onClick={() => {
-                  setShowOvertimeAddModal(false);
-                  setShowOvertimeEditModal(false);
-                  setSelectedOvertime(null);
+                  setShowOvertimeAddModal(false)
+                  setShowOvertimeEditModal(false)
+                  setSelectedOvertime(null)
                 }}
                 className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
               >
                 İptal
               </button>
               <button
-                onClick={
-                  showOvertimeAddModal
-                    ? handleSubmitOvertimeAdd
-                    : handleSubmitOvertimeEdit
-                }
+                onClick={showOvertimeAddModal ? handleSubmitOvertimeAdd : handleSubmitOvertimeEdit}
                 className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
               >
-                {showOvertimeAddModal ? "Oluştur" : "Güncelle"}
+                {showOvertimeAddModal ? 'Oluştur' : 'Güncelle'}
               </button>
             </div>
           </div>
@@ -787,74 +724,53 @@ const OvertimeManagement: React.FC = () => {
             <div className="space-y-4">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Personel
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Personel</label>
                   <p className="text-gray-900">
-                    {mockEmployees.find(
-                      (emp) => emp.id === selectedOvertime.employeeId
-                    )?.fullName || selectedOvertime.employeeId}
+                    {mockEmployees.find((emp) => emp.id === selectedOvertime.employeeId)
+                      ?.fullName || selectedOvertime.employeeId}
                   </p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Tarih
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Tarih</label>
                   <p className="text-gray-900">
-                    {new Date(selectedOvertime.date).toLocaleDateString(
-                      "tr-TR"
-                    )}
+                    {new Date(selectedOvertime.date).toLocaleDateString('tr-TR')}
                   </p>
                 </div>
               </div>
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Başlangıç Saati
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Başlangıç Saati</label>
                   <p className="text-gray-900">{selectedOvertime.startTime}</p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Bitiş Saati
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Bitiş Saati</label>
                   <p className="text-gray-900">{selectedOvertime.endTime}</p>
                 </div>
               </div>
 
               <div className="grid grid-cols-3 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Toplam Saat
-                  </label>
-                  <p className="text-gray-900">
-                    {selectedOvertime.totalHours} saat
-                  </p>
+                  <label className="block text-sm font-medium text-gray-700">Toplam Saat</label>
+                  <p className="text-gray-900">{selectedOvertime.totalHours} saat</p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Çarpan
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Çarpan</label>
                   <p className="text-gray-900">x{selectedOvertime.rate}</p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Tutar
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Tutar</label>
                   <p className="text-gray-900 font-medium">
-                    {selectedOvertime.amount?.toLocaleString("tr-TR")} ₺
+                    {selectedOvertime.amount?.toLocaleString('tr-TR')} ₺
                   </p>
                 </div>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700">
-                  Durum
-                </label>
+                <label className="block text-sm font-medium text-gray-700">Durum</label>
                 <span
                   className={`px-2 py-1 text-xs font-medium rounded-full ${getLeaveStatusColor(
-                    selectedOvertime.status
+                    selectedOvertime.status,
                   )}`}
                 >
                   {getLeaveStatusText(selectedOvertime.status)}
@@ -862,23 +778,15 @@ const OvertimeManagement: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700">
-                  Neden
-                </label>
+                <label className="block text-sm font-medium text-gray-700">Neden</label>
                 <p className="text-gray-900">{selectedOvertime.reason}</p>
               </div>
 
               {selectedOvertime.approvedBy && (
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Onaylayan
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700">Onaylayan</label>
                   <p className="text-gray-900">
-                    {
-                      mockEmployees.find(
-                        (emp) => emp.id === selectedOvertime.approvedBy
-                      )?.fullName
-                    }
+                    {mockEmployees.find((emp) => emp.id === selectedOvertime.approvedBy)?.fullName}
                   </p>
                 </div>
               )}
@@ -887,8 +795,8 @@ const OvertimeManagement: React.FC = () => {
             <div className="flex justify-end mt-6">
               <button
                 onClick={() => {
-                  setShowOvertimeViewModal(false);
-                  setSelectedOvertime(null);
+                  setShowOvertimeViewModal(false)
+                  setSelectedOvertime(null)
                 }}
                 className="px-3 py-1.5 text-sm bg-gray-600 text-white rounded-md hover:bg-gray-700"
               >
@@ -903,17 +811,14 @@ const OvertimeManagement: React.FC = () => {
       {showOvertimeRejectModal && selectedOvertime && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
           <div className="bg-white rounded-lg p-4 w-full max-w-md">
-            <h3 className="text-base font-semibold mb-4">
-              Mesai Talebini Reddet
-            </h3>
+            <h3 className="text-base font-semibold mb-4">Mesai Talebini Reddet</h3>
 
             <div className="mb-4">
               <p className="text-gray-700 mb-2">
                 <strong>
-                  {mockEmployees.find(
-                    (emp) => emp.id === selectedOvertime.employeeId
-                  )?.fullName || selectedOvertime.employeeId}
-                </strong>{" "}
+                  {mockEmployees.find((emp) => emp.id === selectedOvertime.employeeId)?.fullName ||
+                    selectedOvertime.employeeId}
+                </strong>{' '}
                 adlı personelin mesai talebini reddetmek üzeresiniz.
               </p>
             </div>
@@ -934,9 +839,9 @@ const OvertimeManagement: React.FC = () => {
             <div className="flex justify-end gap-2">
               <button
                 onClick={() => {
-                  setShowOvertimeRejectModal(false);
-                  setSelectedOvertime(null);
-                  setOvertimeRejectReason("");
+                  setShowOvertimeRejectModal(false)
+                  setSelectedOvertime(null)
+                  setOvertimeRejectReason('')
                 }}
                 className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
               >
@@ -962,9 +867,7 @@ const OvertimeManagement: React.FC = () => {
             <div className="space-y-4">
               {/* Department Selection */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Departman
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Departman</label>
                 <select
                   value={bulkOvertimeFormData.departmentId}
                   onChange={(e) => {
@@ -972,7 +875,7 @@ const OvertimeManagement: React.FC = () => {
                       ...bulkOvertimeFormData,
                       departmentId: e.target.value,
                       selectedEmployees: [],
-                    });
+                    })
                   }}
                   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"
                 >
@@ -997,73 +900,61 @@ const OvertimeManagement: React.FC = () => {
                         <input
                           type="checkbox"
                           checked={
-                            getEmployeesByDepartment(
-                              bulkOvertimeFormData.departmentId
-                            ).length > 0 &&
+                            getEmployeesByDepartment(bulkOvertimeFormData.departmentId).length >
+                              0 &&
                             bulkOvertimeFormData.selectedEmployees.length ===
-                              getEmployeesByDepartment(
-                                bulkOvertimeFormData.departmentId
-                              ).length
+                              getEmployeesByDepartment(bulkOvertimeFormData.departmentId).length
                           }
                           onChange={(e) => {
-                            const departmentEmployees =
-                              getEmployeesByDepartment(
-                                bulkOvertimeFormData.departmentId
-                              );
+                            const departmentEmployees = getEmployeesByDepartment(
+                              bulkOvertimeFormData.departmentId,
+                            )
                             setBulkOvertimeFormData({
                               ...bulkOvertimeFormData,
                               selectedEmployees: e.target.checked
                                 ? departmentEmployees.map((emp) => emp.id)
                                 : [],
-                            });
+                            })
                           }}
                           className="mr-2"
                         />
                         <span className="font-medium">Tümünü Seç</span>
                       </label>
-                      {getEmployeesByDepartment(
-                        bulkOvertimeFormData.departmentId
-                      ).map((employee) => (
-                        <label key={employee.id} className="flex items-center">
-                          <input
-                            type="checkbox"
-                            checked={bulkOvertimeFormData.selectedEmployees.includes(
-                              employee.id
-                            )}
-                            onChange={(e) => {
-                              setBulkOvertimeFormData({
-                                ...bulkOvertimeFormData,
-                                selectedEmployees: e.target.checked
-                                  ? [
-                                      ...bulkOvertimeFormData.selectedEmployees,
-                                      employee.id,
-                                    ]
-                                  : bulkOvertimeFormData.selectedEmployees.filter(
-                                      (id) => id !== employee.id
-                                    ),
-                              });
-                            }}
-                            className="mr-2"
-                          />
-                          <span>
-                            {employee.fullName} ({employee.code})
-                          </span>
-                        </label>
-                      ))}
+                      {getEmployeesByDepartment(bulkOvertimeFormData.departmentId).map(
+                        (employee) => (
+                          <label key={employee.id} className="flex items-center">
+                            <input
+                              type="checkbox"
+                              checked={bulkOvertimeFormData.selectedEmployees.includes(employee.id)}
+                              onChange={(e) => {
+                                setBulkOvertimeFormData({
+                                  ...bulkOvertimeFormData,
+                                  selectedEmployees: e.target.checked
+                                    ? [...bulkOvertimeFormData.selectedEmployees, employee.id]
+                                    : bulkOvertimeFormData.selectedEmployees.filter(
+                                        (id) => id !== employee.id,
+                                      ),
+                                })
+                              }}
+                              className="mr-2"
+                            />
+                            <span>
+                              {employee.fullName} ({employee.code})
+                            </span>
+                          </label>
+                        ),
+                      )}
                     </div>
                   </div>
                   <p className="text-sm text-gray-500 mt-1">
-                    {bulkOvertimeFormData.selectedEmployees.length} personel
-                    seçildi
+                    {bulkOvertimeFormData.selectedEmployees.length} personel seçildi
                   </p>
                 </div>
               )}
 
               {/* Date */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Mesai Tarihi
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Mesai Tarihi</label>
                 <input
                   type="date"
                   value={bulkOvertimeFormData.date}
@@ -1159,46 +1050,38 @@ const OvertimeManagement: React.FC = () => {
                 bulkOvertimeFormData.startTime &&
                 bulkOvertimeFormData.endTime && (
                   <div className="bg-blue-50 p-3 rounded-lg">
-                    <h4 className="text-sm font-medium text-blue-900 mb-2">
-                      Özet
-                    </h4>
+                    <h4 className="text-sm font-medium text-blue-900 mb-2">Özet</h4>
                     <div className="text-sm text-blue-800 space-y-1">
                       <p>
-                        <span className="font-medium">Personel Sayısı:</span>{" "}
+                        <span className="font-medium">Personel Sayısı:</span>{' '}
                         {bulkOvertimeFormData.selectedEmployees.length}
                       </p>
                       {(() => {
-                        const startTime = new Date(
-                          `2000-01-01 ${bulkOvertimeFormData.startTime}`
-                        );
-                        const endTime = new Date(
-                          `2000-01-01 ${bulkOvertimeFormData.endTime}`
-                        );
+                        const startTime = new Date(`2000-01-01 ${bulkOvertimeFormData.startTime}`)
+                        const endTime = new Date(`2000-01-01 ${bulkOvertimeFormData.endTime}`)
                         const totalHours =
-                          (endTime.getTime() - startTime.getTime()) /
-                          (1000 * 60 * 60);
+                          (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60)
                         const totalAmount =
                           totalHours *
                           100 *
                           bulkOvertimeFormData.rate *
-                          bulkOvertimeFormData.selectedEmployees.length;
+                          bulkOvertimeFormData.selectedEmployees.length
 
                         return totalHours > 0 ? (
                           <>
                             <p>
-                              <span className="font-medium">Mesai Süresi:</span>{" "}
-                              {totalHours} saat
+                              <span className="font-medium">Mesai Süresi:</span> {totalHours} saat
                             </p>
                             <p>
                               <span className="font-medium">Çarpan:</span> x
                               {bulkOvertimeFormData.rate}
                             </p>
                             <p>
-                              <span className="font-medium">Toplam Tutar:</span>{" "}
-                              {totalAmount.toLocaleString("tr-TR")} ₺
+                              <span className="font-medium">Toplam Tutar:</span>{' '}
+                              {totalAmount.toLocaleString('tr-TR')} ₺
                             </p>
                           </>
-                        ) : null;
+                        ) : null
                       })()}
                     </div>
                   </div>
@@ -1208,16 +1091,16 @@ const OvertimeManagement: React.FC = () => {
             <div className="flex justify-end gap-2 mt-6">
               <button
                 onClick={() => {
-                  setShowBulkOvertimeModal(false);
+                  setShowBulkOvertimeModal(false)
                   setBulkOvertimeFormData({
-                    departmentId: "",
+                    departmentId: '',
                     selectedEmployees: [],
-                    date: "",
-                    startTime: "",
-                    endTime: "",
-                    reason: "",
+                    date: '',
+                    startTime: '',
+                    endTime: '',
+                    reason: '',
                     rate: 1.5,
-                  });
+                  })
                 }}
                 className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
               >
@@ -1233,8 +1116,8 @@ const OvertimeManagement: React.FC = () => {
           </div>
         </div>
       )}
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default OvertimeManagement;
+export default OvertimeManagement
diff --git a/ui/src/views/hr/components/PayrollManagement.tsx b/ui/src/views/hr/components/PayrollManagement.tsx
index 0148d5f8..5c356dbd 100644
--- a/ui/src/views/hr/components/PayrollManagement.tsx
+++ b/ui/src/views/hr/components/PayrollManagement.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaCalculator,
   FaFileAlt,
@@ -11,90 +11,82 @@ import {
   FaCheck,
   FaBan,
   FaUsers,
-} from "react-icons/fa";
-import { HrPayroll, PayrollStatusEnum } from "../../../types/hr";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockPayrolls } from "../../../mocks/mockPayrolls";
-import { mockDepartments } from "../../../mocks/mockDepartments";
-import Widget from "../../../components/common/Widget";
-import {
-  getPayrollStatusColor,
-  getPayrollStatusText,
-} from "../../../utils/erp";
+} from 'react-icons/fa'
+import { HrPayroll, PayrollStatusEnum } from '../../../types/hr'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockPayrolls } from '../../../mocks/mockPayrolls'
+import { mockDepartments } from '../../../mocks/mockDepartments'
+import Widget from '../../../components/common/Widget'
+import { getPayrollStatusColor, getPayrollStatusText } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 // Mock data - replace with actual data fetching
 
 const PayrollManagement: React.FC = () => {
-  const [payrolls, setPayrolls] = useState<HrPayroll[]>(mockPayrolls);
-  const [selectedStatus, setSelectedStatus] = useState<string>("all");
-  const [selectedPeriod, setSelectedPeriod] = useState<string>("all");
-  const [selectedDepartment, setSelectedDepartment] = useState<string>("all");
-  const [showModal, setShowModal] = useState<boolean>(false);
-  const [showBulkModal, setShowBulkModal] = useState<boolean>(false);
-  const [modalType, setModalType] = useState<"add" | "edit" | "view">("add");
-  const [selectedPayroll, setSelectedPayroll] = useState<HrPayroll | null>(
-    null
-  );
-  const [searchTerm, setSearchTerm] = useState("");
+  const [payrolls, setPayrolls] = useState<HrPayroll[]>(mockPayrolls)
+  const [selectedStatus, setSelectedStatus] = useState<string>('all')
+  const [selectedPeriod, setSelectedPeriod] = useState<string>('all')
+  const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
+  const [showModal, setShowModal] = useState<boolean>(false)
+  const [showBulkModal, setShowBulkModal] = useState<boolean>(false)
+  const [modalType, setModalType] = useState<'add' | 'edit' | 'view'>('add')
+  const [selectedPayroll, setSelectedPayroll] = useState<HrPayroll | null>(null)
+  const [searchTerm, setSearchTerm] = useState('')
   const [formData, setFormData] = useState<Partial<HrPayroll>>({
-    period: "",
+    period: '',
     baseSalary: 0,
     overtime: 0,
     bonus: 0,
     allowances: [],
     deductions: [],
     status: PayrollStatusEnum.Draft,
-  });
+  })
 
   const handleAdd = () => {
-    setModalType("add");
+    setModalType('add')
     setFormData({
-      period:
-        new Date().getFullYear() +
-        "-" +
-        String(new Date().getMonth() + 1).padStart(2, "0"),
+      period: new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0'),
       baseSalary: 0,
       overtime: 0,
       bonus: 0,
       allowances: [],
       deductions: [],
       status: PayrollStatusEnum.Draft,
-    });
-    setSelectedPayroll(null);
-    setShowModal(true);
-  };
+    })
+    setSelectedPayroll(null)
+    setShowModal(true)
+  }
 
   const handleEdit = (payroll: HrPayroll) => {
-    setModalType("edit");
-    setFormData(payroll);
-    setSelectedPayroll(payroll);
-    setShowModal(true);
-  };
+    setModalType('edit')
+    setFormData(payroll)
+    setSelectedPayroll(payroll)
+    setShowModal(true)
+  }
 
   const handleView = (payroll: HrPayroll) => {
-    setModalType("view");
-    setFormData(payroll);
-    setSelectedPayroll(payroll);
-    setShowModal(true);
-  };
+    setModalType('view')
+    setFormData(payroll)
+    setSelectedPayroll(payroll)
+    setShowModal(true)
+  }
 
   const handleCalculate = (payroll: HrPayroll) => {
     // Calculate gross and net salary
     const totalAllowances = payroll.allowances.reduce(
       (total, allowance) => total + allowance.amount,
-      0
-    );
+      0,
+    )
     const totalDeductions = payroll.deductions.reduce(
       (total, deduction) => total + deduction.amount,
-      0
-    );
+      0,
+    )
 
-    const grossSalary =
-      payroll.baseSalary + totalAllowances + payroll.overtime + payroll.bonus;
-    const tax = grossSalary * 0.15; // 15% tax rate (simplified)
-    const socialSecurity = grossSalary * 0.14; // 14% social security (simplified)
-    const netSalary = grossSalary - tax - socialSecurity - totalDeductions;
+    const grossSalary = payroll.baseSalary + totalAllowances + payroll.overtime + payroll.bonus
+    const tax = grossSalary * 0.15 // 15% tax rate (simplified)
+    const socialSecurity = grossSalary * 0.14 // 14% social security (simplified)
+    const netSalary = grossSalary - tax - socialSecurity - totalDeductions
 
     const updatedPayroll: HrPayroll = {
       ...payroll,
@@ -104,90 +96,87 @@ const PayrollManagement: React.FC = () => {
       netSalary,
       status: PayrollStatusEnum.Calculated,
       lastModificationTime: new Date(),
-    };
+    }
 
     setPayrolls((prevPayrolls) =>
-      prevPayrolls.map((p) => (p.id === payroll.id ? updatedPayroll : p))
-    );
+      prevPayrolls.map((p) => (p.id === payroll.id ? updatedPayroll : p)),
+    )
 
     alert(
-      `Bordro hesaplandı:\nBrüt Maaş: ₺${grossSalary.toLocaleString()}\nNet Maaş: ₺${netSalary.toLocaleString()}`
-    );
-  };
+      `Bordro hesaplandı:\nBrüt Maaş: ₺${grossSalary.toLocaleString()}\nNet Maaş: ₺${netSalary.toLocaleString()}`,
+    )
+  }
 
   const handleApprove = (payroll: HrPayroll) => {
     const updatedPayroll: HrPayroll = {
       ...payroll,
       status: PayrollStatusEnum.Approved,
       lastModificationTime: new Date(),
-    };
+    }
 
     setPayrolls((prevPayrolls) =>
-      prevPayrolls.map((p) => (p.id === payroll.id ? updatedPayroll : p))
-    );
+      prevPayrolls.map((p) => (p.id === payroll.id ? updatedPayroll : p)),
+    )
 
-    alert(`Bordro onaylandı: ${payroll.employee?.fullName}`);
-  };
+    alert(`Bordro onaylandı: ${payroll.employee?.fullName}`)
+  }
 
   const handleReject = (payroll: HrPayroll) => {
     const updatedPayroll: HrPayroll = {
       ...payroll,
       status: PayrollStatusEnum.Cancelled,
       lastModificationTime: new Date(),
-    };
+    }
 
     setPayrolls((prevPayrolls) =>
-      prevPayrolls.map((p) => (p.id === payroll.id ? updatedPayroll : p))
-    );
+      prevPayrolls.map((p) => (p.id === payroll.id ? updatedPayroll : p)),
+    )
 
-    alert(`Bordro reddedildi: ${payroll.employee?.fullName}`);
-  };
+    alert(`Bordro reddedildi: ${payroll.employee?.fullName}`)
+  }
 
   const handleBulkEntry = () => {
-    setShowBulkModal(true);
-  };
+    setShowBulkModal(true)
+  }
 
   const handleExport = (payroll: HrPayroll) => {
     // Create a simple CSV export
     const csvContent = [
-      ["Personel Kodu", payroll.employee?.code || ""],
-      ["Personel Adı", payroll.employee?.fullName || ""],
-      ["Dönem", payroll.period],
-      ["Temel Maaş", `₺${payroll.baseSalary.toLocaleString()}`],
-      ["Mesai Ücreti", `₺${payroll.overtime.toLocaleString()}`],
-      ["Prim", `₺${payroll.bonus.toLocaleString()}`],
-      ["Brüt Maaş", `₺${payroll.grossSalary.toLocaleString()}`],
-      ["Vergi", `₺${payroll.tax.toLocaleString()}`],
-      ["SGK", `₺${payroll.socialSecurity.toLocaleString()}`],
-      ["Net Maaş", `₺${payroll.netSalary.toLocaleString()}`],
-      ["Durum", getPayrollStatusText(payroll.status)],
+      ['Personel Kodu', payroll.employee?.code || ''],
+      ['Personel Adı', payroll.employee?.fullName || ''],
+      ['Dönem', payroll.period],
+      ['Temel Maaş', `₺${payroll.baseSalary.toLocaleString()}`],
+      ['Mesai Ücreti', `₺${payroll.overtime.toLocaleString()}`],
+      ['Prim', `₺${payroll.bonus.toLocaleString()}`],
+      ['Brüt Maaş', `₺${payroll.grossSalary.toLocaleString()}`],
+      ['Vergi', `₺${payroll.tax.toLocaleString()}`],
+      ['SGK', `₺${payroll.socialSecurity.toLocaleString()}`],
+      ['Net Maaş', `₺${payroll.netSalary.toLocaleString()}`],
+      ['Durum', getPayrollStatusText(payroll.status)],
     ]
-      .map((row) => row.join(","))
-      .join("\n");
+      .map((row) => row.join(','))
+      .join('\n')
 
-    const blob = new Blob(["\uFEFF" + csvContent], {
-      type: "text/csv;charset=utf-8;",
-    });
-    const link = document.createElement("a");
-    const url = URL.createObjectURL(blob);
-    link.setAttribute("href", url);
-    link.setAttribute(
-      "download",
-      `bordro_${payroll.employee?.code}_${payroll.period}.csv`
-    );
-    link.style.visibility = "hidden";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
+    const blob = new Blob(['\uFEFF' + csvContent], {
+      type: 'text/csv;charset=utf-8;',
+    })
+    const link = document.createElement('a')
+    const url = URL.createObjectURL(blob)
+    link.setAttribute('href', url)
+    link.setAttribute('download', `bordro_${payroll.employee?.code}_${payroll.period}.csv`)
+    link.style.visibility = 'hidden'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
 
   const handleSubmit = () => {
-    if (modalType === "add") {
+    if (modalType === 'add') {
       const newPayroll: HrPayroll = {
         id: Date.now().toString(),
-        employeeId: formData.employeeId || "",
+        employeeId: formData.employeeId || '',
         employee: mockEmployees.find((emp) => emp.id === formData.employeeId),
-        period: formData.period || "",
+        period: formData.period || '',
         baseSalary: formData.baseSalary || 0,
         allowances: formData.allowances || [],
         deductions: formData.deductions || [],
@@ -200,172 +189,158 @@ const PayrollManagement: React.FC = () => {
         status: PayrollStatusEnum.Draft,
         creationTime: new Date(),
         lastModificationTime: new Date(),
-      };
+      }
 
-      setPayrolls((prevPayrolls) => [...prevPayrolls, newPayroll]);
-    } else if (modalType === "edit" && selectedPayroll) {
+      setPayrolls((prevPayrolls) => [...prevPayrolls, newPayroll])
+    } else if (modalType === 'edit' && selectedPayroll) {
       const updatedPayroll: HrPayroll = {
         ...selectedPayroll,
         ...formData,
         lastModificationTime: new Date(),
-      };
+      }
 
       setPayrolls((prevPayrolls) =>
-        prevPayrolls.map((p) =>
-          p.id === selectedPayroll.id ? updatedPayroll : p
-        )
-      );
+        prevPayrolls.map((p) => (p.id === selectedPayroll.id ? updatedPayroll : p)),
+      )
     }
 
-    setShowModal(false);
-    setSelectedPayroll(null);
+    setShowModal(false)
+    setSelectedPayroll(null)
     setFormData({
-      period: "",
+      period: '',
       baseSalary: 0,
       overtime: 0,
       bonus: 0,
       allowances: [],
       deductions: [],
       status: PayrollStatusEnum.Draft,
-    });
-  };
+    })
+  }
 
   const handleCancel = () => {
-    setShowModal(false);
-    setSelectedPayroll(null);
+    setShowModal(false)
+    setSelectedPayroll(null)
     setFormData({
-      period: "",
+      period: '',
       baseSalary: 0,
       overtime: 0,
       bonus: 0,
       allowances: [],
       deductions: [],
       status: PayrollStatusEnum.Draft,
-    });
-  };
+    })
+  }
 
   // Calculate gross and net salary helper function
   const calculateSalaries = (data: Partial<HrPayroll>) => {
     const totalAllowances = (data.allowances || []).reduce(
       (total, allowance) => total + allowance.amount,
-      0
-    );
+      0,
+    )
     const totalDeductions = (data.deductions || []).reduce(
       (total, deduction) => total + deduction.amount,
-      0
-    );
+      0,
+    )
 
     const grossSalary =
-      (data.baseSalary || 0) +
-      totalAllowances +
-      (data.overtime || 0) +
-      (data.bonus || 0);
-    const tax = grossSalary * 0.15; // 15% tax rate (simplified)
-    const socialSecurity = grossSalary * 0.14; // 14% social security (simplified)
-    const netSalary = grossSalary - tax - socialSecurity - totalDeductions;
+      (data.baseSalary || 0) + totalAllowances + (data.overtime || 0) + (data.bonus || 0)
+    const tax = grossSalary * 0.15 // 15% tax rate (simplified)
+    const socialSecurity = grossSalary * 0.14 // 14% social security (simplified)
+    const netSalary = grossSalary - tax - socialSecurity - totalDeductions
 
     return {
       grossSalary,
       tax,
       socialSecurity,
       netSalary,
-    };
-  };
+    }
+  }
 
   // Real-time calculation for form data
-  const calculatedValues = calculateSalaries(formData);
+  const calculatedValues = calculateSalaries(formData)
 
   const filteredPayrolls = payrolls.filter((payroll) => {
-    if (selectedStatus !== "all" && payroll.status !== selectedStatus) {
-      return false;
+    if (selectedStatus !== 'all' && payroll.status !== selectedStatus) {
+      return false
     }
-    if (selectedPeriod !== "all" && payroll.period !== selectedPeriod) {
-      return false;
+    if (selectedPeriod !== 'all' && payroll.period !== selectedPeriod) {
+      return false
     }
-    if (
-      selectedDepartment !== "all" &&
-      payroll.employee?.department?.name !== selectedDepartment
-    ) {
-      return false;
+    if (selectedDepartment !== 'all' && payroll.employee?.department?.name !== selectedDepartment) {
+      return false
     }
-    if (searchTerm.trim() !== "") {
+    if (searchTerm.trim() !== '') {
       if (payroll.employeeId !== searchTerm) {
-        return false;
+        return false
       }
     }
-    return true;
-  });
+    return true
+  })
 
   const columns: Column<HrPayroll>[] = [
     {
-      key: "employee",
-      header: "Personel",
+      key: 'employee',
+      header: 'Personel',
       render: (payroll: HrPayroll) => (
         <div>
-          <div className="font-medium text-gray-900">
-            {payroll.employee?.fullName}
-          </div>
+          <div className="font-medium text-gray-900">{payroll.employee?.fullName}</div>
           <div className="text-sm text-gray-500">{payroll.employee?.code}</div>
         </div>
       ),
     },
     {
-      key: "period",
-      header: "Dönem",
+      key: 'period',
+      header: 'Dönem',
       render: (payroll: HrPayroll) => payroll.period,
     },
     {
-      key: "baseSalary",
-      header: "Temel Maaş",
+      key: 'baseSalary',
+      header: 'Temel Maaş',
       render: (payroll: HrPayroll) => `₺${payroll.baseSalary.toLocaleString()}`,
     },
     {
-      key: "allowances",
-      header: "Ödemeler",
+      key: 'allowances',
+      header: 'Ödemeler',
       render: (payroll: HrPayroll) => {
         const totalAllowances = payroll.allowances.reduce(
           (total, allowance) => total + allowance.amount,
-          0
-        );
-        return `₺${totalAllowances.toLocaleString()}`;
+          0,
+        )
+        return `₺${totalAllowances.toLocaleString()}`
       },
     },
     {
-      key: "deductions",
-      header: "Kesintiler",
+      key: 'deductions',
+      header: 'Kesintiler',
       render: (payroll: HrPayroll) => {
         const totalDeductions = payroll.deductions.reduce(
           (total, deduction) => total + deduction.amount,
-          0
-        );
-        return `₺${totalDeductions.toLocaleString()}`;
+          0,
+        )
+        return `₺${totalDeductions.toLocaleString()}`
       },
     },
     {
-      key: "grossSalary",
-      header: "Brüt Maaş",
+      key: 'grossSalary',
+      header: 'Brüt Maaş',
       render: (payroll: HrPayroll) => (
-        <div className="font-medium text-gray-900">
-          ₺{payroll.grossSalary.toLocaleString()}
-        </div>
+        <div className="font-medium text-gray-900">₺{payroll.grossSalary.toLocaleString()}</div>
       ),
     },
     {
-      key: "netSalary",
-      header: "Net Maaş",
+      key: 'netSalary',
+      header: 'Net Maaş',
       render: (payroll: HrPayroll) => (
-        <div className="font-bold text-green-600">
-          ₺{payroll.netSalary.toLocaleString()}
-        </div>
+        <div className="font-bold text-green-600">₺{payroll.netSalary.toLocaleString()}</div>
       ),
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (payroll: HrPayroll) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getPayrollStatusColor(
-            payroll.status
+            payroll.status,
           )}`}
         >
           {getPayrollStatusText(payroll.status)}
@@ -373,8 +348,8 @@ const PayrollManagement: React.FC = () => {
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (payroll: HrPayroll) => (
         <div className="flex gap-1">
           <button
@@ -435,7 +410,7 @@ const PayrollManagement: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   // Calculate statistics
   const stats = {
@@ -444,154 +419,136 @@ const PayrollManagement: React.FC = () => {
     totalNet: payrolls.reduce((total, p) => total + p.netSalary, 0),
     totalTax: payrolls.reduce((total, p) => total + p.tax, 0),
     pending: payrolls.filter(
-      (p) =>
-        p.status === PayrollStatusEnum.Draft ||
-        p.status === PayrollStatusEnum.Calculated
+      (p) => p.status === PayrollStatusEnum.Draft || p.status === PayrollStatusEnum.Calculated,
     ).length,
-  };
+  }
 
   // Get unique periods for filter
-  const periods = [...new Set(payrolls.map((p) => p.period))].sort().reverse();
+  const periods = [...new Set(payrolls.map((p) => p.period))].sort().reverse()
 
   return (
-    <div className="space-y-4 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">
-            Maaş, Prim, Bordro Yönetimi
-          </h2>
-          <p className="text-gray-600 mt-1">
-            Personel ödemelerini hesaplayın ve yönetin
-          </p>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">Maaş, Prim, Bordro Yönetimi</h2>
+            <p className="text-gray-600 mt-1">Personel ödemelerini hesaplayın ve yönetin</p>
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={handleBulkEntry}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+            >
+              <FaUsers className="w-4 h-4" />
+              Toplu Bordro Girişi
+            </button>
+            <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 Bordro
+            </button>
+          </div>
         </div>
-        <div className="flex gap-2">
-          <button
-            onClick={handleBulkEntry}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-5 gap-6">
+          <Widget title="Toplam Bordro" value={stats.total} color="blue" icon="FaFileAlt" />
+
+          <Widget
+            title="Toplam Brüt"
+            value={`₺${stats.totalGross.toLocaleString()}`}
+            color="green"
+            icon="FaDollarSign"
+          />
+
+          <Widget
+            title="Toplam Net"
+            value={`₺${stats.totalNet.toLocaleString()}`}
+            color="purple"
+            icon="FaDollarSign"
+          />
+
+          <Widget
+            title="Toplam Vergi"
+            value={`₺${stats.totalTax.toLocaleString()}`}
+            color="red"
+            icon="FaCalculator"
+          />
+
+          <Widget title="Beklemede" value={stats.pending} color="yellow" icon="FaFileAlt" />
+        </div>
+
+        {/* Filters */}
+        <div className="flex gap-4 items-center">
+          <select
+            value={selectedDepartment}
+            onChange={(e) => setSelectedDepartment(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
           >
-            <FaUsers className="w-4 h-4" />
-            Toplu Bordro Girişi
-          </button>
-          <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"
+            <option value="all">Tüm Departmanlar</option>
+            {mockDepartments.map((dept) => (
+              <option key={dept.id} value={dept.name}>
+                {dept.name}
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
           >
-            <FaPlus className="w-4 h-4" />
-            Yeni Bordro
-          </button>
+            <option value="">Personel seçiniz...</option>
+            {mockEmployees.map((employee) => (
+              <option key={employee.id} value={employee.id}>
+                {employee.fullName} ({employee.code})
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={selectedStatus}
+            onChange={(e) => setSelectedStatus(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm Durumlar</option>
+            <option value={PayrollStatusEnum.Draft}>Taslak</option>
+            <option value={PayrollStatusEnum.Calculated}>Hesaplandı</option>
+            <option value={PayrollStatusEnum.Approved}>Onaylandı</option>
+            <option value={PayrollStatusEnum.Paid}>Ödendi</option>
+            <option value={PayrollStatusEnum.Cancelled}>İptal Edildi</option>
+          </select>
+
+          <select
+            value={selectedPeriod}
+            onChange={(e) => setSelectedPeriod(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm Dönemler</option>
+            {periods.map((period) => (
+              <option key={period} value={period}>
+                {period}
+              </option>
+            ))}
+          </select>
         </div>
-      </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-5 gap-6">
-        <Widget
-          title="Toplam Bordro"
-          value={stats.total}
-          color="blue"
-          icon="FaFileAlt"
-        />
-
-        <Widget
-          title="Toplam Brüt"
-          value={`₺${stats.totalGross.toLocaleString()}`}
-          color="green"
-          icon="FaDollarSign"
-        />
-
-        <Widget
-          title="Toplam Net"
-          value={`₺${stats.totalNet.toLocaleString()}`}
-          color="purple"
-          icon="FaDollarSign"
-        />
-
-        <Widget
-          title="Toplam Vergi"
-          value={`₺${stats.totalTax.toLocaleString()}`}
-          color="red"
-          icon="FaCalculator"
-        />
-
-        <Widget
-          title="Beklemede"
-          value={stats.pending}
-          color="yellow"
-          icon="FaFileAlt"
-        />
-      </div>
-
-      {/* Filters */}
-      <div className="flex gap-4 items-center">
-        <select
-          value={selectedDepartment}
-          onChange={(e) => setSelectedDepartment(e.target.value)}
-          className="px-3 py-1.5 border border-gray-300 text-sm 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.name}>
-              {dept.name}
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="w-full px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="">Personel seçiniz...</option>
-          {mockEmployees.map((employee) => (
-            <option key={employee.id} value={employee.id}>
-              {employee.fullName} ({employee.code})
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={selectedStatus}
-          onChange={(e) => setSelectedStatus(e.target.value)}
-          className="px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Durumlar</option>
-          <option value={PayrollStatusEnum.Draft}>Taslak</option>
-          <option value={PayrollStatusEnum.Calculated}>Hesaplandı</option>
-          <option value={PayrollStatusEnum.Approved}>Onaylandı</option>
-          <option value={PayrollStatusEnum.Paid}>Ödendi</option>
-          <option value={PayrollStatusEnum.Cancelled}>İptal Edildi</option>
-        </select>
-
-        <select
-          value={selectedPeriod}
-          onChange={(e) => setSelectedPeriod(e.target.value)}
-          className="px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Dönemler</option>
-          {periods.map((period) => (
-            <option key={period} value={period}>
-              {period}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {/* Data Table */}
-      <div className="bg-white rounded-lg shadow-sm border">
-        <DataTable data={filteredPayrolls} columns={columns} />
-      </div>
-
-      {filteredPayrolls.length === 0 && (
-        <div className="text-center py-12">
-          <FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            Bordro bulunamadı
-          </h3>
-          <p className="text-gray-500">
-            Seçilen kriterlere uygun bordro bulunmamaktadır.
-          </p>
+        {/* Data Table */}
+        <div className="bg-white rounded-lg shadow-sm border">
+          <DataTable data={filteredPayrolls} columns={columns} />
         </div>
-      )}
+
+        {filteredPayrolls.length === 0 && (
+          <div className="text-center py-12">
+            <FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-gray-900 mb-2">Bordro bulunamadı</h3>
+            <p className="text-gray-500">Seçilen kriterlere uygun bordro bulunmamaktadır.</p>
+          </div>
+        )}
+      </div>
 
       {/* Modal */}
       {showModal && (
@@ -599,30 +556,23 @@ const PayrollManagement: React.FC = () => {
           <div className="bg-white rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
             <div className="flex items-center justify-between mb-4">
               <h3 className="text-lg font-medium text-gray-900">
-                {modalType === "add" && "Yeni Bordro Ekle"}
-                {modalType === "edit" && "Bordro Düzenle"}
-                {modalType === "view" && "Bordro Detayları"}
+                {modalType === 'add' && 'Yeni Bordro Ekle'}
+                {modalType === 'edit' && 'Bordro Düzenle'}
+                {modalType === 'view' && 'Bordro Detayları'}
               </h3>
-              <button
-                onClick={handleCancel}
-                className="text-gray-400 hover:text-gray-600"
-              >
+              <button onClick={handleCancel} className="text-gray-400 hover:text-gray-600">
                 <FaTimes className="w-5 h-5" />
               </button>
             </div>
 
             <div className="space-y-4">
               {/* Employee Selection */}
-              {modalType === "add" && (
+              {modalType === 'add' && (
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    Personel
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Personel</label>
                   <select
-                    value={formData.employeeId || ""}
-                    onChange={(e) =>
-                      setFormData({ ...formData, employeeId: e.target.value })
-                    }
+                    value={formData.employeeId || ''}
+                    onChange={(e) => setFormData({ ...formData, employeeId: e.target.value })}
                     className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                   >
                     <option value="">Personel Seçiniz</option>
@@ -636,29 +586,24 @@ const PayrollManagement: React.FC = () => {
               )}
 
               {/* Employee Info (for edit/view) */}
-              {(modalType === "edit" || modalType === "view") &&
-                formData.employee && (
-                  <div className="bg-gray-50 p-3 rounded-md">
-                    <div className="text-sm text-gray-600">Personel</div>
-                    <div className="font-medium">
-                      {formData.employee.code} - {formData.employee.fullName}
-                    </div>
+              {(modalType === 'edit' || modalType === 'view') && formData.employee && (
+                <div className="bg-gray-50 p-3 rounded-md">
+                  <div className="text-sm text-gray-600">Personel</div>
+                  <div className="font-medium">
+                    {formData.employee.code} - {formData.employee.fullName}
                   </div>
-                )}
+                </div>
+              )}
 
               {/* Period */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Dönem
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Dönem</label>
                 <input
                   type="month"
                   value={formData.period}
-                  onChange={(e) =>
-                    setFormData({ ...formData, period: e.target.value })
-                  }
+                  onChange={(e) => setFormData({ ...formData, period: e.target.value })}
                   className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={modalType === "view"}
+                  disabled={modalType === 'view'}
                 />
               </div>
 
@@ -677,7 +622,7 @@ const PayrollManagement: React.FC = () => {
                     })
                   }
                   className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={modalType === "view"}
+                  disabled={modalType === 'view'}
                 />
               </div>
 
@@ -696,33 +641,27 @@ const PayrollManagement: React.FC = () => {
                     })
                   }
                   className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={modalType === "view"}
+                  disabled={modalType === 'view'}
                 />
               </div>
 
               {/* Bonus */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Prim (₺)
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Prim (₺)</label>
                 <input
                   type="number"
                   value={formData.bonus}
-                  onChange={(e) =>
-                    setFormData({ ...formData, bonus: Number(e.target.value) })
-                  }
+                  onChange={(e) => setFormData({ ...formData, bonus: Number(e.target.value) })}
                   className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={modalType === "view"}
+                  disabled={modalType === 'view'}
                 />
               </div>
 
               {/* Allowances */}
-              {modalType !== "view" && (
+              {modalType !== 'view' && (
                 <div>
                   <div className="flex items-center justify-between mb-2">
-                    <label className="block text-sm font-medium text-gray-700">
-                      Ödemeler
-                    </label>
+                    <label className="block text-sm font-medium text-gray-700">Ödemeler</label>
                     <button
                       type="button"
                       onClick={() => {
@@ -730,12 +669,12 @@ const PayrollManagement: React.FC = () => {
                           ...(formData.allowances || []),
                           {
                             id: Date.now().toString(),
-                            name: "",
+                            name: '',
                             amount: 0,
                             taxable: true,
                           },
-                        ];
-                        setFormData({ ...formData, allowances: newAllowances });
+                        ]
+                        setFormData({ ...formData, allowances: newAllowances })
                       }}
                       className="text-blue-600 hover:text-blue-700 text-sm"
                     >
@@ -749,17 +688,15 @@ const PayrollManagement: React.FC = () => {
                         placeholder="Ödeme adı"
                         value={allowance.name}
                         onChange={(e) => {
-                          const updatedAllowances = [
-                            ...(formData.allowances || []),
-                          ];
+                          const updatedAllowances = [...(formData.allowances || [])]
                           updatedAllowances[index] = {
                             ...allowance,
                             name: e.target.value,
-                          };
+                          }
                           setFormData({
                             ...formData,
                             allowances: updatedAllowances,
-                          });
+                          })
                         }}
                         className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                       />
@@ -768,17 +705,15 @@ const PayrollManagement: React.FC = () => {
                         placeholder="Tutar"
                         value={allowance.amount}
                         onChange={(e) => {
-                          const updatedAllowances = [
-                            ...(formData.allowances || []),
-                          ];
+                          const updatedAllowances = [...(formData.allowances || [])]
                           updatedAllowances[index] = {
                             ...allowance,
                             amount: Number(e.target.value),
-                          };
+                          }
                           setFormData({
                             ...formData,
                             allowances: updatedAllowances,
-                          });
+                          })
                         }}
                         className="w-24 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                       />
@@ -786,13 +721,11 @@ const PayrollManagement: React.FC = () => {
                         type="button"
                         onClick={() => {
                           const updatedAllowances =
-                            formData.allowances?.filter(
-                              (_, i) => i !== index
-                            ) || [];
+                            formData.allowances?.filter((_, i) => i !== index) || []
                           setFormData({
                             ...formData,
                             allowances: updatedAllowances,
-                          });
+                          })
                         }}
                         className="px-2 py-2 text-red-600 hover:text-red-700"
                       >
@@ -800,22 +733,17 @@ const PayrollManagement: React.FC = () => {
                       </button>
                     </div>
                   ))}
-                  {(!formData.allowances ||
-                    formData.allowances.length === 0) && (
-                    <p className="text-sm text-gray-500">
-                      Henüz ödeme eklenmedi
-                    </p>
+                  {(!formData.allowances || formData.allowances.length === 0) && (
+                    <p className="text-sm text-gray-500">Henüz ödeme eklenmedi</p>
                   )}
                 </div>
               )}
 
               {/* Deductions */}
-              {modalType !== "view" && (
+              {modalType !== 'view' && (
                 <div>
                   <div className="flex items-center justify-between mb-2">
-                    <label className="block text-sm font-medium text-gray-700">
-                      Kesintiler
-                    </label>
+                    <label className="block text-sm font-medium text-gray-700">Kesintiler</label>
                     <button
                       type="button"
                       onClick={() => {
@@ -823,12 +751,12 @@ const PayrollManagement: React.FC = () => {
                           ...(formData.deductions || []),
                           {
                             id: Date.now().toString(),
-                            name: "",
+                            name: '',
                             amount: 0,
                             mandatory: false,
                           },
-                        ];
-                        setFormData({ ...formData, deductions: newDeductions });
+                        ]
+                        setFormData({ ...formData, deductions: newDeductions })
                       }}
                       className="text-blue-600 hover:text-blue-700 text-sm"
                     >
@@ -842,17 +770,15 @@ const PayrollManagement: React.FC = () => {
                         placeholder="Kesinti adı"
                         value={deduction.name}
                         onChange={(e) => {
-                          const updatedDeductions = [
-                            ...(formData.deductions || []),
-                          ];
+                          const updatedDeductions = [...(formData.deductions || [])]
                           updatedDeductions[index] = {
                             ...deduction,
                             name: e.target.value,
-                          };
+                          }
                           setFormData({
                             ...formData,
                             deductions: updatedDeductions,
-                          });
+                          })
                         }}
                         className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                       />
@@ -861,17 +787,15 @@ const PayrollManagement: React.FC = () => {
                         placeholder="Tutar"
                         value={deduction.amount}
                         onChange={(e) => {
-                          const updatedDeductions = [
-                            ...(formData.deductions || []),
-                          ];
+                          const updatedDeductions = [...(formData.deductions || [])]
                           updatedDeductions[index] = {
                             ...deduction,
                             amount: Number(e.target.value),
-                          };
+                          }
                           setFormData({
                             ...formData,
                             deductions: updatedDeductions,
-                          });
+                          })
                         }}
                         className="w-24 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                       />
@@ -879,13 +803,11 @@ const PayrollManagement: React.FC = () => {
                         type="button"
                         onClick={() => {
                           const updatedDeductions =
-                            formData.deductions?.filter(
-                              (_, i) => i !== index
-                            ) || [];
+                            formData.deductions?.filter((_, i) => i !== index) || []
                           setFormData({
                             ...formData,
                             deductions: updatedDeductions,
-                          });
+                          })
                         }}
                         className="px-2 py-2 text-red-600 hover:text-red-700"
                       >
@@ -893,21 +815,16 @@ const PayrollManagement: React.FC = () => {
                       </button>
                     </div>
                   ))}
-                  {(!formData.deductions ||
-                    formData.deductions.length === 0) && (
-                    <p className="text-sm text-gray-500">
-                      Henüz kesinti eklenmedi
-                    </p>
+                  {(!formData.deductions || formData.deductions.length === 0) && (
+                    <p className="text-sm text-gray-500">Henüz kesinti eklenmedi</p>
                   )}
                 </div>
               )}
 
               {/* Real-time calculation preview for add/edit modes */}
-              {modalType !== "view" && (
+              {modalType !== 'view' && (
                 <div className="bg-blue-50 p-4 rounded-lg">
-                  <h5 className="font-medium text-gray-900 mb-3">
-                    Hesaplama Önizlemesi
-                  </h5>
+                  <h5 className="font-medium text-gray-900 mb-3">Hesaplama Önizlemesi</h5>
                   <div className="grid grid-cols-2 gap-4">
                     <div>
                       <div className="text-sm text-gray-600">Brüt Maaş</div>
@@ -915,16 +832,12 @@ const PayrollManagement: React.FC = () => {
                         ₺{calculatedValues.grossSalary.toLocaleString()}
                       </div>
                       <div className="text-xs text-gray-500">
-                        Temel: ₺{(formData.baseSalary || 0).toLocaleString()} +
-                        Ödemeler: ₺
+                        Temel: ₺{(formData.baseSalary || 0).toLocaleString()} + Ödemeler: ₺
                         {(formData.allowances || [])
-                          .reduce(
-                            (total, allowance) => total + allowance.amount,
-                            0
-                          )
-                          .toLocaleString()}{" "}
-                        + Mesai: ₺{(formData.overtime || 0).toLocaleString()} +
-                        Prim: ₺{(formData.bonus || 0).toLocaleString()}
+                          .reduce((total, allowance) => total + allowance.amount, 0)
+                          .toLocaleString()}{' '}
+                        + Mesai: ₺{(formData.overtime || 0).toLocaleString()} + Prim: ₺
+                        {(formData.bonus || 0).toLocaleString()}
                       </div>
                     </div>
                     <div>
@@ -933,14 +846,10 @@ const PayrollManagement: React.FC = () => {
                         ₺{calculatedValues.netSalary.toLocaleString()}
                       </div>
                       <div className="text-xs text-gray-500">
-                        Brüt - Vergi: ₺{calculatedValues.tax.toLocaleString()} -
-                        SGK: ₺{calculatedValues.socialSecurity.toLocaleString()}{" "}
-                        - Kesintiler: ₺
+                        Brüt - Vergi: ₺{calculatedValues.tax.toLocaleString()} - SGK: ₺
+                        {calculatedValues.socialSecurity.toLocaleString()} - Kesintiler: ₺
                         {(formData.deductions || [])
-                          .reduce(
-                            (total, deduction) => total + deduction.amount,
-                            0
-                          )
+                          .reduce((total, deduction) => total + deduction.amount, 0)
                           .toLocaleString()}
                       </div>
                     </div>
@@ -949,20 +858,15 @@ const PayrollManagement: React.FC = () => {
               )}
 
               {/* View mode - show allowances and deductions */}
-              {modalType === "view" && (
+              {modalType === 'view' && (
                 <>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                      Ödemeler
-                    </label>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Ödemeler</label>
                     <div className="px-3 py-2 bg-gray-50 border border-gray-300 rounded-md">
                       {formData.allowances && formData.allowances.length > 0 ? (
                         <div className="space-y-1">
                           {formData.allowances.map((allowance) => (
-                            <div
-                              key={allowance.id}
-                              className="flex justify-between text-sm"
-                            >
+                            <div key={allowance.id} className="flex justify-between text-sm">
                               <span>{allowance.name}</span>
                               <span>₺{allowance.amount.toLocaleString()}</span>
                             </div>
@@ -972,11 +876,7 @@ const PayrollManagement: React.FC = () => {
                             <span>
                               ₺
                               {formData.allowances
-                                .reduce(
-                                  (total, allowance) =>
-                                    total + allowance.amount,
-                                  0
-                                )
+                                .reduce((total, allowance) => total + allowance.amount, 0)
                                 .toLocaleString()}
                             </span>
                           </div>
@@ -995,10 +895,7 @@ const PayrollManagement: React.FC = () => {
                       {formData.deductions && formData.deductions.length > 0 ? (
                         <div className="space-y-1">
                           {formData.deductions.map((deduction) => (
-                            <div
-                              key={deduction.id}
-                              className="flex justify-between text-sm"
-                            >
+                            <div key={deduction.id} className="flex justify-between text-sm">
                               <span>{deduction.name}</span>
                               <span>₺{deduction.amount.toLocaleString()}</span>
                             </div>
@@ -1008,11 +905,7 @@ const PayrollManagement: React.FC = () => {
                             <span>
                               ₺
                               {formData.deductions
-                                .reduce(
-                                  (total, deduction) =>
-                                    total + deduction.amount,
-                                  0
-                                )
+                                .reduce((total, deduction) => total + deduction.amount, 0)
                                 .toLocaleString()}
                             </span>
                           </div>
@@ -1026,22 +919,18 @@ const PayrollManagement: React.FC = () => {
               )}
 
               {/* Calculated fields (show only in view/edit mode for existing payrolls) */}
-              {modalType === "view" && (
+              {modalType === 'view' && (
                 <>
                   {/* Status */}
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                      Durum
-                    </label>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Durum</label>
                     <div className="px-3 py-2 bg-gray-50 border border-gray-300 rounded-md">
                       <span
                         className={`px-2 py-1 text-xs font-medium rounded-full ${getPayrollStatusColor(
-                          formData.status || PayrollStatusEnum.Draft
+                          formData.status || PayrollStatusEnum.Draft,
                         )}`}
                       >
-                        {getPayrollStatusText(
-                          formData.status || PayrollStatusEnum.Draft
-                        )}
+                        {getPayrollStatusText(formData.status || PayrollStatusEnum.Draft)}
                       </span>
                     </div>
                   </div>
@@ -1087,7 +976,7 @@ const PayrollManagement: React.FC = () => {
             </div>
 
             {/* Modal Actions */}
-            {modalType !== "view" && (
+            {modalType !== 'view' && (
               <div className="flex justify-end gap-2 mt-6">
                 <button
                   onClick={handleCancel}
@@ -1100,12 +989,12 @@ const PayrollManagement: React.FC = () => {
                   className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
                 >
                   <FaSave className="w-4 h-4" />
-                  {modalType === "add" ? "Ekle" : "Güncelle"}
+                  {modalType === 'add' ? 'Ekle' : 'Güncelle'}
                 </button>
               </div>
             )}
 
-            {modalType === "view" && (
+            {modalType === 'view' && (
               <div className="flex justify-end mt-6">
                 <button
                   onClick={handleCancel}
@@ -1124,39 +1013,34 @@ const PayrollManagement: React.FC = () => {
         <BulkPayrollEntry
           onClose={() => setShowBulkModal(false)}
           onSubmit={(payrolls) => {
-            setPayrolls((prev) => [...prev, ...payrolls]);
-            setShowBulkModal(false);
+            setPayrolls((prev) => [...prev, ...payrolls])
+            setShowBulkModal(false)
           }}
         />
       )}
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
 // Bulk Payroll Entry Component
 interface BulkPayrollEntryProps {
-  onClose: () => void;
-  onSubmit: (payrolls: HrPayroll[]) => void;
+  onClose: () => void
+  onSubmit: (payrolls: HrPayroll[]) => void
 }
 
-const BulkPayrollEntry: React.FC<BulkPayrollEntryProps> = ({
-  onClose,
-  onSubmit,
-}) => {
-  const [selectedDepartment, setSelectedDepartment] = useState<string>("");
-  const [selectedEmployees, setSelectedEmployees] = useState<string[]>([]);
+const BulkPayrollEntry: React.FC<BulkPayrollEntryProps> = ({ onClose, onSubmit }) => {
+  const [selectedDepartment, setSelectedDepartment] = useState<string>('')
+  const [selectedEmployees, setSelectedEmployees] = useState<string[]>([])
   const [period, setPeriod] = useState<string>(
-    new Date().getFullYear() +
-      "-" +
-      String(new Date().getMonth() + 1).padStart(2, "0")
-  );
+    new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0'),
+  )
   const [bulkData, setBulkData] = useState({
     baseSalaryIncrease: 0,
     overtimeHours: 0,
     overtimeRate: 50,
     bonusAmount: 0,
     massBonus: 0,
-  });
+  })
 
   // Get unique departments from mockDepartments and employees
   const departments = [
@@ -1164,60 +1048,58 @@ const BulkPayrollEntry: React.FC<BulkPayrollEntryProps> = ({
       ...mockDepartments.map((dept) => dept.name),
       ...mockEmployees.map((emp) => emp.department?.name).filter(Boolean),
     ]),
-  ].sort();
+  ].sort()
 
   // Get employees by department
   const filteredEmployees = selectedDepartment
     ? mockEmployees.filter((emp) => emp.department?.name === selectedDepartment)
-    : [];
+    : []
 
   // Get selected employees data
   const selectedEmployeesData = filteredEmployees.filter((emp) =>
-    selectedEmployees.includes(emp.id)
-  );
+    selectedEmployees.includes(emp.id),
+  )
 
   // Handle department change - reset selected employees and auto-select all
   const handleDepartmentChange = (departmentName: string) => {
-    setSelectedDepartment(departmentName);
+    setSelectedDepartment(departmentName)
     // Auto-select all employees when department is selected
     if (departmentName) {
-      const employeesInDept = mockEmployees.filter(
-        (emp) => emp.department?.name === departmentName
-      );
-      setSelectedEmployees(employeesInDept.map((emp) => emp.id));
+      const employeesInDept = mockEmployees.filter((emp) => emp.department?.name === departmentName)
+      setSelectedEmployees(employeesInDept.map((emp) => emp.id))
     } else {
-      setSelectedEmployees([]);
+      setSelectedEmployees([])
     }
-  };
+  }
 
   // Handle select all employees
   const handleSelectAll = (checked: boolean) => {
     if (checked) {
-      setSelectedEmployees(filteredEmployees.map((emp) => emp.id));
+      setSelectedEmployees(filteredEmployees.map((emp) => emp.id))
     } else {
-      setSelectedEmployees([]);
+      setSelectedEmployees([])
     }
-  };
+  }
 
   // Handle individual employee selection
   const handleEmployeeSelect = (employeeId: string, checked: boolean) => {
     if (checked) {
-      setSelectedEmployees((prev) => [...prev, employeeId]);
+      setSelectedEmployees((prev) => [...prev, employeeId])
     } else {
-      setSelectedEmployees((prev) => prev.filter((id) => id !== employeeId));
+      setSelectedEmployees((prev) => prev.filter((id) => id !== employeeId))
     }
-  };
+  }
 
   const handleBulkSubmit = () => {
     if (!selectedDepartment || selectedEmployeesData.length === 0) {
-      alert("Lütfen bir departman ve en az bir personel seçin");
-      return;
+      alert('Lütfen bir departman ve en az bir personel seçin')
+      return
     }
 
     const newPayrolls: HrPayroll[] = selectedEmployeesData.map((employee) => {
-      const baseSalary = employee.baseSalary + bulkData.baseSalaryIncrease;
-      const overtime = bulkData.overtimeHours * bulkData.overtimeRate;
-      const bonus = bulkData.bonusAmount + bulkData.massBonus;
+      const baseSalary = employee.baseSalary + bulkData.baseSalaryIncrease
+      const overtime = bulkData.overtimeHours * bulkData.overtimeRate
+      const bonus = bulkData.bonusAmount + bulkData.massBonus
 
       return {
         id: `bulk_${Date.now()}_${employee.id}`,
@@ -1236,23 +1118,18 @@ const BulkPayrollEntry: React.FC<BulkPayrollEntryProps> = ({
         status: PayrollStatusEnum.Draft,
         creationTime: new Date(),
         lastModificationTime: new Date(),
-      };
-    });
+      }
+    })
 
-    onSubmit(newPayrolls);
-  };
+    onSubmit(newPayrolls)
+  }
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
       <div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-medium text-gray-900">
-            Toplu Bordro Girişi
-          </h3>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600"
-          >
+          <h3 className="text-lg font-medium text-gray-900">Toplu Bordro Girişi</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
             <FaTimes className="w-5 h-5" />
           </button>
         </div>
@@ -1261,9 +1138,7 @@ const BulkPayrollEntry: React.FC<BulkPayrollEntryProps> = ({
           {/* Department and Period */}
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Departman
-              </label>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Departman</label>
               <select
                 value={selectedDepartment}
                 onChange={(e) => handleDepartmentChange(e.target.value)}
@@ -1278,9 +1153,7 @@ const BulkPayrollEntry: React.FC<BulkPayrollEntryProps> = ({
               </select>
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Dönem
-              </label>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Dönem</label>
               <input
                 type="month"
                 value={period}
@@ -1311,9 +1184,7 @@ const BulkPayrollEntry: React.FC<BulkPayrollEntryProps> = ({
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Mesai Saati
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Mesai Saati</label>
                 <input
                   type="number"
                   value={bulkData.overtimeHours}
@@ -1407,39 +1278,23 @@ const BulkPayrollEntry: React.FC<BulkPayrollEntryProps> = ({
                     {filteredEmployees.map((employee) => (
                       <tr
                         key={employee.id}
-                        className={
-                          selectedEmployees.includes(employee.id)
-                            ? "bg-blue-50"
-                            : ""
-                        }
+                        className={selectedEmployees.includes(employee.id) ? 'bg-blue-50' : ''}
                       >
                         <td className="px-4 py-2">
                           <input
                             type="checkbox"
                             checked={selectedEmployees.includes(employee.id)}
-                            onChange={(e) =>
-                              handleEmployeeSelect(
-                                employee.id,
-                                e.target.checked
-                              )
-                            }
+                            onChange={(e) => handleEmployeeSelect(employee.id, e.target.checked)}
                             className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                           />
                         </td>
-                        <td className="px-4 py-2 text-sm text-gray-900">
-                          {employee.code}
-                        </td>
-                        <td className="px-4 py-2 text-sm text-gray-900">
-                          {employee.fullName}
-                        </td>
+                        <td className="px-4 py-2 text-sm text-gray-900">{employee.code}</td>
+                        <td className="px-4 py-2 text-sm text-gray-900">{employee.fullName}</td>
                         <td className="px-4 py-2 text-sm text-gray-900">
                           ₺{employee.baseSalary.toLocaleString()}
                         </td>
                         <td className="px-4 py-2 text-sm font-medium text-green-600">
-                          ₺
-                          {(
-                            employee.baseSalary + bulkData.baseSalaryIncrease
-                          ).toLocaleString()}
+                          ₺{(employee.baseSalary + bulkData.baseSalaryIncrease).toLocaleString()}
                         </td>
                       </tr>
                     ))}
@@ -1450,8 +1305,8 @@ const BulkPayrollEntry: React.FC<BulkPayrollEntryProps> = ({
               {selectedEmployees.length > 0 && (
                 <div className="mt-3 p-3 bg-blue-50 rounded-md">
                   <p className="text-sm text-blue-800">
-                    <strong>{selectedEmployees.length}</strong> personel
-                    seçildi. Toplam mevcut maaş:{" "}
+                    <strong>{selectedEmployees.length}</strong> personel seçildi. Toplam mevcut
+                    maaş:{' '}
                     <strong>
                       ₺
                       {selectedEmployeesData
@@ -1484,7 +1339,7 @@ const BulkPayrollEntry: React.FC<BulkPayrollEntryProps> = ({
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default PayrollManagement;
+export default PayrollManagement