From 2217722243f00069e69fb08908be904525852c04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= <sedat.ozturk@sozsoft.com>
Date: Mon, 15 Sep 2025 23:27:01 +0300
Subject: [PATCH] Project Management

---
 .../Seeds/SeederData.json                     |   20 +-
 .../components/ActivityTypeFormModal.tsx      |  410 ++-
 .../project/components/ActivityTypes.tsx      |  691 ++---
 .../views/project/components/ProjectForm.tsx  | 2680 ++++++++---------
 .../views/project/components/ProjectGantt.tsx |  718 ++---
 .../views/project/components/ProjectList.tsx  | 1117 ++++---
 .../project/components/ProjectPhases.tsx      |  645 ++--
 .../views/project/components/ProjectTasks.tsx |   10 +-
 .../views/project/components/ProjectView.tsx  | 1857 ++++++------
 .../project/components/TaskDailyUpdates.tsx   |  626 ++--
 .../project/components/TaskViewModal.tsx      |    2 +-
 11 files changed, 4063 insertions(+), 4713 deletions(-)

diff --git a/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json b/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
index 18c3869f..cde35f6c 100644
--- a/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
+++ b/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
@@ -4686,70 +4686,70 @@
 
         {
             "key": "admin.project.list",
-            "path": "/admin/project",
+            "path": "/admin/projects",
             "componentPath": "@/views/project/components/ProjectList",
             "routeType": "protected",
             "authority": null
         },
         {
             "key": "admin.project.new",
-            "path": "/admin/project/new",
+            "path": "/admin/projects/new",
             "componentPath": "@/views/project/components/ProjectForm",
             "routeType": "protected",
             "authority": null
         },
         {
             "key": "admin.project.edit",
-            "path": "/admin/project/edit/:id",
+            "path": "/admin/projects/edit/:id",
             "componentPath": "@/views/project/components/ProjectForm",
             "routeType": "protected",
             "authority": null
         },
         {
             "key": "admin.project.detail",
-            "path": "/admin/project/:id",
+            "path": "/admin/projects/:id",
             "componentPath": "@/views/project/components/ProjectView",
             "routeType": "protected",
             "authority": null
         },
         {
             "key": "admin.project.tasks",
-            "path": "/admin/project/tasks",
+            "path": "/admin/projects/tasks",
             "componentPath": "@/views/project/components/ProjectTasks",
             "routeType": "protected",
             "authority": null
         },
         {
             "key": "admin.project.phases",
-            "path": "/admin/project/phases",
+            "path": "/admin/projects/phases",
             "componentPath": "@/views/project/components/ProjectPhases",
             "routeType": "protected",
             "authority": null
         },
         {
             "key": "admin.project.activities",
-            "path": "/admin/project/activities",
+            "path": "/admin/projects/activities",
             "componentPath": "@/views/project/components/ActivityTypes",
             "routeType": "protected",
             "authority": null
         },
         {
             "key": "admin.project.workload",
-            "path": "/admin/project/workload",
+            "path": "/admin/projects/workload",
             "componentPath": "@/views/project/components/ProjectGantt",
             "routeType": "protected",
             "authority": null
         },
         {
             "key": "admin.project.costTracking",
-            "path": "/admin/project/cost-tracking",
+            "path": "/admin/projects/cost-tracking",
             "componentPath": "@/views/project/components/CostTimeTracking",
             "routeType": "protected",
             "authority": null
         },
         {
             "key": "admin.project.dailyUpdates",
-            "path": "/admin/project/daily-updates",
+            "path": "/admin/projects/daily-updates",
             "componentPath": "@/views/project/components/TaskDailyUpdates",
             "routeType": "protected",
             "authority": null
diff --git a/ui/src/views/project/components/ActivityTypeFormModal.tsx b/ui/src/views/project/components/ActivityTypeFormModal.tsx
index 36eabf7d..8d10d368 100644
--- a/ui/src/views/project/components/ActivityTypeFormModal.tsx
+++ b/ui/src/views/project/components/ActivityTypeFormModal.tsx
@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from "react";
-import { FaSave, FaTimes } from "react-icons/fa";
-import { PsActivityTypeEnum, PsActivity } from "../../../types/ps";
-import { getPsActivityTypeText } from "../../../utils/erp";
+import React, { useState, useEffect } from 'react'
+import { FaSave, FaTimes } from 'react-icons/fa'
+import { PsActivityTypeEnum, PsActivity } from '../../../types/ps'
+import { getPsActivityTypeText } from '../../../utils/erp'
 
 interface ActivityTypeFormModalProps {
-  open: boolean;
-  activityType: PsActivity | null;
-  onClose: () => void;
-  onSave: (activityType: Partial<PsActivity>) => void;
+  open: boolean
+  activityType: PsActivity | null
+  onClose: () => void
+  onSave: (activityType: Partial<PsActivity>) => void
 }
 
 const ActivityTypeFormModal: React.FC<ActivityTypeFormModalProps> = ({
@@ -17,277 +17,253 @@ const ActivityTypeFormModal: React.FC<ActivityTypeFormModalProps> = ({
   onSave,
 }) => {
   const [formData, setFormData] = useState<Partial<PsActivity>>({
-    name: "",
-    description: "",
-    category: "",
+    name: '',
+    description: '',
+    category: '',
     defaultDuration: 1,
     activityType: PsActivityTypeEnum.WorkLog,
     isActive: true,
-  });
+  })
 
-  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({})
 
   useEffect(() => {
     if (activityType) {
       setFormData({
         ...activityType,
-      });
+      })
     } else {
       setFormData({
-        name: "",
-        description: "",
-        category: "",
+        name: '',
+        description: '',
+        category: '',
         defaultDuration: 1,
         activityType: PsActivityTypeEnum.WorkLog,
         isActive: true,
-      });
+      })
     }
-    setErrors({});
-  }, [activityType]);
+    setErrors({})
+  }, [activityType])
 
   const handleInputChange = (
     field: keyof PsActivity,
-    value: string | number | boolean | PsActivityTypeEnum
+    value: string | number | boolean | PsActivityTypeEnum,
   ) => {
     setFormData((prev) => ({
       ...prev,
       [field]: value,
-    }));
+    }))
 
     // Clear error when user starts typing
     if (errors[field]) {
       setErrors((prev) => ({
         ...prev,
-        [field]: "",
-      }));
+        [field]: '',
+      }))
     }
-  };
+  }
 
   const validateForm = (): boolean => {
-    const newErrors: Record<string, string> = {};
+    const newErrors: Record<string, string> = {}
 
     if (!formData.name?.trim()) {
-      newErrors.name = "Aktivite türü adı zorunludur";
+      newErrors.name = 'Aktivite türü adı zorunludur'
     }
 
     if (!formData.description?.trim()) {
-      newErrors.description = "Açıklama zorunludur";
+      newErrors.description = 'Açıklama zorunludur'
     }
 
     if (!formData.category?.trim()) {
-      newErrors.category = "Kategori zorunludur";
+      newErrors.category = 'Kategori zorunludur'
     }
 
     if (!formData.defaultDuration || formData.defaultDuration <= 0) {
-      newErrors.defaultDuration = "Varsayılan süre pozitif bir sayı olmalıdır";
+      newErrors.defaultDuration = 'Varsayılan süre pozitif bir sayı olmalıdır'
     }
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
 
   const handleSave = () => {
     if (validateForm()) {
-      onSave(formData);
-      onClose();
+      onSave(formData)
+      onClose()
     }
-  };
+  }
 
-  if (!open) return null;
+  if (!open) return null
 
   return (
     <div className="fixed inset-0 z-50 overflow-y-auto">
-      <div className="flex items-center justify-center min-h-screen pt-2 px-2 pb-8 text-center sm:block sm:p-0">
+      <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
         <div
           className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
           onClick={onClose}
         ></div>
-
-        <div className="inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-2 sm:align-middle sm:max-w-md sm:w-full">
-          {/* Header */}
-          <div className="bg-white px-3 py-2 border-b border-gray-200">
-            <div className="flex items-center justify-between">
-              <h3 className="text-base font-medium text-gray-900">
-                {activityType ? "Aktivite Türü Düzenle" : "Yeni Aktivite Türü"}
-              </h3>
-              <button
-                onClick={onClose}
-                className="text-gray-400 hover:text-gray-600 transition-colors"
-              >
-                <FaTimes className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-
-          {/* Form */}
-          <div className="p-3">
+        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
+          <div className="space-y-3">
             <div className="space-y-3">
-              {/* Activity Type */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Aktivite Türü *
-                </label>
-                <select
-                  value={formData.activityType || ""}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "activityType",
-                      e.target.value as PsActivityTypeEnum
-                    )
-                  }
-                  className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
-                    errors.activityType ? "border-red-500" : "border-gray-300"
-                  }`}
+              {/* Header */}
+              <div className="bg-white px-3 py-2 border-b border-gray-200">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-base font-medium text-gray-900">
+                    {activityType ? 'Aktivite Türü Düzenle' : 'Yeni Aktivite Türü'}
+                  </h3>
+                  <button
+                    onClick={onClose}
+                    className="text-gray-400 hover:text-gray-600 transition-colors"
+                  >
+                    <FaTimes className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+
+              {/* Form */}
+              <div className="p-3">
+                <div className="space-y-3">
+                  {/* Activity Type */}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Aktivite Türü *
+                    </label>
+                    <select
+                      value={formData.activityType || ''}
+                      onChange={(e) =>
+                        handleInputChange('activityType', e.target.value as PsActivityTypeEnum)
+                      }
+                      className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+                        errors.activityType ? 'border-red-500' : 'border-gray-300'
+                      }`}
+                    >
+                      {Object.values(PsActivityTypeEnum).map((type) => (
+                        <option key={type} value={type}>
+                          {getPsActivityTypeText(type)}
+                        </option>
+                      ))}
+                    </select>
+                    {errors.activityType && (
+                      <p className="mt-1 text-sm text-red-600">{errors.activityType}</p>
+                    )}
+                  </div>
+
+                  {/* Name */}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Ad *</label>
+                    <input
+                      type="text"
+                      value={formData.name || ''}
+                      onChange={(e) => handleInputChange('name', e.target.value)}
+                      className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+                        errors.name ? 'border-red-500' : 'border-gray-300'
+                      }`}
+                      placeholder="Aktivite türü adını girin"
+                    />
+                    {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name}</p>}
+                  </div>
+
+                  {/* Description */}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Açıklama *
+                    </label>
+                    <textarea
+                      value={formData.description || ''}
+                      onChange={(e) => handleInputChange('description', e.target.value)}
+                      rows={2}
+                      className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+                        errors.description ? 'border-red-500' : 'border-gray-300'
+                      }`}
+                      placeholder="Aktivite türü açıklamasını girin"
+                    />
+                    {errors.description && (
+                      <p className="mt-1 text-sm text-red-600">{errors.description}</p>
+                    )}
+                  </div>
+
+                  {/* Category */}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Kategori *
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.category || ''}
+                      onChange={(e) => handleInputChange('category', e.target.value)}
+                      className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+                        errors.category ? 'border-red-500' : 'border-gray-300'
+                      }`}
+                      placeholder="Kategori adını girin (örn: Görev Yönetimi)"
+                    />
+                    {errors.category && (
+                      <p className="mt-1 text-sm text-red-600">{errors.category}</p>
+                    )}
+                  </div>
+
+                  {/* Default Duration */}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Varsayılan Süre (saat) *
+                    </label>
+                    <input
+                      type="number"
+                      min="0"
+                      step="0.25"
+                      value={formData.defaultDuration || ''}
+                      onChange={(e) =>
+                        handleInputChange('defaultDuration', parseFloat(e.target.value))
+                      }
+                      className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+                        errors.defaultDuration ? 'border-red-500' : 'border-gray-300'
+                      }`}
+                      placeholder="1.0"
+                    />
+                    {errors.defaultDuration && (
+                      <p className="mt-1 text-sm text-red-600">{errors.defaultDuration}</p>
+                    )}
+                  </div>
+
+                  {/* Active Status */}
+                  <div className="flex items-center">
+                    <input
+                      type="checkbox"
+                      id="isActive"
+                      checked={formData.isActive || false}
+                      onChange={(e) => handleInputChange('isActive', e.target.checked)}
+                      className="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+                    />
+                    <label htmlFor="isActive" className="ml-2 text-sm text-gray-700">
+                      Aktif durumda
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              {/* Footer */}
+              <div className="flex items-center justify-end space-x-2 px-3 py-2 border-t border-gray-200">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                 >
-                  {Object.values(PsActivityTypeEnum).map((type) => (
-                    <option key={type} value={type}>
-                      {getPsActivityTypeText(type)}
-                    </option>
-                  ))}
-                </select>
-                {errors.activityType && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.activityType}
-                  </p>
-                )}
-              </div>
-
-              {/* Name */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Ad *
-                </label>
-                <input
-                  type="text"
-                  value={formData.name || ""}
-                  onChange={(e) => handleInputChange("name", e.target.value)}
-                  className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
-                    errors.name ? "border-red-500" : "border-gray-300"
-                  }`}
-                  placeholder="Aktivite türü adını girin"
-                />
-                {errors.name && (
-                  <p className="mt-1 text-sm text-red-600">{errors.name}</p>
-                )}
-              </div>
-
-              {/* Description */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Açıklama *
-                </label>
-                <textarea
-                  value={formData.description || ""}
-                  onChange={(e) =>
-                    handleInputChange("description", e.target.value)
-                  }
-                  rows={2}
-                  className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
-                    errors.description ? "border-red-500" : "border-gray-300"
-                  }`}
-                  placeholder="Aktivite türü açıklamasını girin"
-                />
-                {errors.description && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.description}
-                  </p>
-                )}
-              </div>
-
-              {/* Category */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Kategori *
-                </label>
-                <input
-                  type="text"
-                  value={formData.category || ""}
-                  onChange={(e) =>
-                    handleInputChange("category", e.target.value)
-                  }
-                  className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
-                    errors.category ? "border-red-500" : "border-gray-300"
-                  }`}
-                  placeholder="Kategori adını girin (örn: Görev Yönetimi)"
-                />
-                {errors.category && (
-                  <p className="mt-1 text-sm text-red-600">{errors.category}</p>
-                )}
-              </div>
-
-              {/* Default Duration */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Varsayılan Süre (saat) *
-                </label>
-                <input
-                  type="number"
-                  min="0"
-                  step="0.25"
-                  value={formData.defaultDuration || ""}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "defaultDuration",
-                      parseFloat(e.target.value)
-                    )
-                  }
-                  className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
-                    errors.defaultDuration
-                      ? "border-red-500"
-                      : "border-gray-300"
-                  }`}
-                  placeholder="1.0"
-                />
-                {errors.defaultDuration && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.defaultDuration}
-                  </p>
-                )}
-              </div>
-
-              {/* Active Status */}
-              <div className="flex items-center">
-                <input
-                  type="checkbox"
-                  id="isActive"
-                  checked={formData.isActive || false}
-                  onChange={(e) =>
-                    handleInputChange("isActive", e.target.checked)
-                  }
-                  className="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                />
-                <label
-                  htmlFor="isActive"
-                  className="ml-2 text-sm text-gray-700"
+                  İptal
+                </button>
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  className="flex items-center space-x-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                 >
-                  Aktif durumda
-                </label>
+                  <FaSave className="w-4 h-4" />
+                  <span>Kaydet</span>
+                </button>
               </div>
             </div>
           </div>
-
-          {/* Footer */}
-          <div className="flex items-center justify-end space-x-2 px-3 py-2 border-t border-gray-200">
-            <button
-              type="button"
-              onClick={onClose}
-              className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
-            >
-              İptal
-            </button>
-            <button
-              type="button"
-              onClick={handleSave}
-              className="flex items-center space-x-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-            >
-              <FaSave className="w-4 h-4" />
-              <span>Kaydet</span>
-            </button>
-          </div>
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ActivityTypeFormModal;
+export default ActivityTypeFormModal
diff --git a/ui/src/views/project/components/ActivityTypes.tsx b/ui/src/views/project/components/ActivityTypes.tsx
index 69c929e5..22668c50 100644
--- a/ui/src/views/project/components/ActivityTypes.tsx
+++ b/ui/src/views/project/components/ActivityTypes.tsx
@@ -1,108 +1,85 @@
-import React, { useState } from "react";
-import {
-  FaSearch,
-  FaPlus,
-  FaEdit,
-  FaTrash,
-  FaEye,
-  FaTh,
-  FaList,
-} from "react-icons/fa";
-import { PsActivity } from "../../../types/ps";
-import { activityTypes } from "../../../mocks/mockActivityTypes";
-import ActivityTypeFormModal from "./ActivityTypeFormModal";
-import Widget from "../../../components/common/Widget";
-import {
-  getPsActivityTypeColor,
-  getPsActivityTypeIcon,
-} from "../../../utils/erp";
+import React, { useState } from 'react'
+import { FaSearch, FaPlus, FaEdit, FaTrash, FaEye, FaTh, FaList } from 'react-icons/fa'
+import { PsActivity } from '../../../types/ps'
+import { activityTypes } from '../../../mocks/mockActivityTypes'
+import ActivityTypeFormModal from './ActivityTypeFormModal'
+import Widget from '../../../components/common/Widget'
+import { getPsActivityTypeColor, getPsActivityTypeIcon } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const ActivityTypes: React.FC = () => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [categoryFilter, setCategoryFilter] = useState<string>("");
-  const [selectedActivity, setSelectedActivity] = useState<string>("");
-  const [showActivityForm, setShowActivityForm] = useState(false);
-  const [editingActivity, setEditingActivity] = useState<PsActivity | null>(
-    null
-  );
-  const [viewMode, setViewMode] = useState<"card" | "list">("card");
+  const [searchTerm, setSearchTerm] = useState('')
+  const [categoryFilter, setCategoryFilter] = useState<string>('')
+  const [selectedActivity, setSelectedActivity] = useState<string>('')
+  const [showActivityForm, setShowActivityForm] = useState(false)
+  const [editingActivity, setEditingActivity] = useState<PsActivity | null>(null)
+  const [viewMode, setViewMode] = useState<'card' | 'list'>('card')
 
   // Helper functions
   const handleEdit = (activity: PsActivity) => {
-    setEditingActivity(activity);
-    setShowActivityForm(true);
-  };
+    setEditingActivity(activity)
+    setShowActivityForm(true)
+  }
 
   const handleNew = () => {
-    setEditingActivity(null);
-    setShowActivityForm(true);
-  };
+    setEditingActivity(null)
+    setShowActivityForm(true)
+  }
 
   const handleCloseForm = () => {
-    setShowActivityForm(false);
-    setEditingActivity(null);
-  };
+    setShowActivityForm(false)
+    setEditingActivity(null)
+  }
 
   const handleSave = (activityData: Partial<PsActivity>) => {
     // TODO: In a real application, this would make an API call
-    console.log("Saving activity type:", activityData);
+    console.log('Saving activity type:', activityData)
 
     if (editingActivity) {
-      console.log(
-        "Updating existing activity type with ID:",
-        editingActivity.id
-      );
+      console.log('Updating existing activity type with ID:', editingActivity.id)
     } else {
-      console.log("Creating new activity type");
+      console.log('Creating new activity type')
     }
 
     // For now, just close the modal
-    handleCloseForm();
-  };
+    handleCloseForm()
+  }
 
-  const categories = Array.from(new Set(activityTypes.map((a) => a.category)));
+  const categories = Array.from(new Set(activityTypes.map((a) => a.category)))
 
   const filteredActivities = activityTypes.filter((activity) => {
     const matchesSearch =
       activity.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
       (activity.description &&
-        activity.description.toLowerCase().includes(searchTerm.toLowerCase()));
-    const matchesCategory =
-      categoryFilter === "" || activity.category === categoryFilter;
-    return matchesSearch && matchesCategory;
-  });
+        activity.description.toLowerCase().includes(searchTerm.toLowerCase()))
+    const matchesCategory = categoryFilter === '' || activity.category === categoryFilter
+    return matchesSearch && matchesCategory
+  })
 
   const ActivityDetailModal = () => {
-    const activity = activityTypes.find((a) => a.id === selectedActivity);
+    const activity = activityTypes.find((a) => a.id === selectedActivity)
 
-    if (!selectedActivity || !activity) return null;
+    if (!selectedActivity || !activity) return null
 
-    const ActivityIcon = getPsActivityTypeIcon(activity.activityType);
+    const ActivityIcon = getPsActivityTypeIcon(activity.activityType)
 
     return (
       <div className="fixed inset-0 z-50 overflow-y-auto">
         <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <div
             className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-            onClick={() => setSelectedActivity("")}
+            onClick={() => setSelectedActivity('')}
           ></div>
 
-          <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-2 sm:align-middle sm:max-w-xl sm:w-full">
+          <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
             <div className="bg-white px-3 pt-3 pb-3 sm:p-4 sm:pb-3">
               <div className="flex items-center justify-between mb-4">
-                <h3 className="text-lg font-medium text-gray-900">
-                  Aktivite Türü Detayları
-                </h3>
+                <h3 className="text-lg font-medium text-gray-900">Aktivite Türü Detayları</h3>
                 <button
-                  onClick={() => setSelectedActivity("")}
+                  onClick={() => setSelectedActivity('')}
                   className="text-gray-400 hover:text-gray-600"
                 >
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
+                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path
                       strokeLinecap="round"
                       strokeLinejoin="round"
@@ -117,16 +94,12 @@ const ActivityTypes: React.FC = () => {
                 {/* Activity Header */}
                 <div className="flex items-center gap-3">
                   <div
-                    className={`p-2 rounded-lg ${getPsActivityTypeColor(
-                      activity.activityType
-                    )}`}
+                    className={`p-2 rounded-lg ${getPsActivityTypeColor(activity.activityType)}`}
                   >
                     <ActivityIcon className="w-6 h-6" />
                   </div>
                   <div>
-                    <h4 className="text-lg font-medium text-gray-900">
-                      {activity.name}
-                    </h4>
+                    <h4 className="text-lg font-medium text-gray-900">{activity.name}</h4>
                     <p className="text-sm text-gray-500">{activity.category}</p>
                   </div>
                 </div>
@@ -134,9 +107,7 @@ const ActivityTypes: React.FC = () => {
                 {/* Activity Details */}
                 <div className="grid grid-cols-2 gap-2">
                   <div className="bg-gray-50 rounded-lg p-2">
-                    <h5 className="font-medium text-gray-900 mb-2">
-                      Genel Bilgiler
-                    </h5>
+                    <h5 className="font-medium text-gray-900 mb-2">Genel Bilgiler</h5>
                     <div className="space-y-2 text-sm">
                       <div>
                         <strong>Aktivite Türü:</strong> {activity.activityType}
@@ -145,38 +116,33 @@ const ActivityTypes: React.FC = () => {
                         <strong>Kategori:</strong> {activity.category}
                       </div>
                       <div>
-                        <strong>Varsayılan Süre:</strong>{" "}
-                        {activity.defaultDuration} saat
+                        <strong>Varsayılan Süre:</strong> {activity.defaultDuration} saat
                       </div>
                       <div>
                         <strong>Durum:</strong>
                         <span
                           className={`ml-2 px-2 py-1 text-xs rounded-full ${
                             activity.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'
                           }`}
                         >
-                          {activity.isActive ? "Aktif" : "Pasif"}
+                          {activity.isActive ? 'Aktif' : 'Pasif'}
                         </span>
                       </div>
                     </div>
                   </div>
 
                   <div className="bg-gray-50 rounded-lg p-2">
-                    <h5 className="font-medium text-gray-900 mb-2">
-                      Zaman Bilgileri
-                    </h5>
+                    <h5 className="font-medium text-gray-900 mb-2">Zaman Bilgileri</h5>
                     <div className="space-y-2 text-sm">
                       <div>
-                        <strong>Oluşturulma:</strong>{" "}
-                        {activity.creationTime.toLocaleDateString("tr-TR")}
+                        <strong>Oluşturulma:</strong>{' '}
+                        {activity.creationTime.toLocaleDateString('tr-TR')}
                       </div>
                       <div>
-                        <strong>Son Güncelleme:</strong>{" "}
-                        {activity.lastModificationTime.toLocaleDateString(
-                          "tr-TR"
-                        )}
+                        <strong>Son Güncelleme:</strong>{' '}
+                        {activity.lastModificationTime.toLocaleDateString('tr-TR')}
                       </div>
                     </div>
                   </div>
@@ -184,312 +150,285 @@ const ActivityTypes: React.FC = () => {
 
                 <div className="bg-gray-50 rounded-lg p-2">
                   <h5 className="font-medium text-gray-900 mb-2">Açıklama</h5>
-                  <p className="text-sm text-gray-700">
-                    {activity.description}
-                  </p>
+                  <p className="text-sm text-gray-700">{activity.description}</p>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    );
-  };
+    )
+  }
 
   return (
-    <div className="space-y-2 pt-2">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">Aktivite Türleri</h2>
-          <p className="text-gray-600 mt-1">
-            Proje ve görev aktivitelerinin türlerini yönetin
-          </p>
-        </div>
-        <div className="flex gap-1.5">
-          <div className="flex border border-gray-300 rounded-lg overflow-hidden">
+    <Container>
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">Aktivite Türleri</h2>
+            <p className="text-gray-600 mt-1">Proje ve görev aktivitelerinin türlerini yönetin</p>
+          </div>
+          <div className="flex gap-1.5">
+            <div className="flex border border-gray-300 rounded-lg overflow-hidden">
+              <button
+                onClick={() => setViewMode('card')}
+                className={`px-2.5 py-1.5 text-sm ${
+                  viewMode === 'card'
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-white text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                <FaTh className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => setViewMode('list')}
+                className={`px-2.5 py-1.5 text-sm ${
+                  viewMode === 'list'
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-white text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                <FaList className="w-4 h-4" />
+              </button>
+            </div>
             <button
-              onClick={() => setViewMode("card")}
-              className={`px-2.5 py-1.5 text-sm ${
-                viewMode === "card"
-                  ? "bg-blue-600 text-white"
-                  : "bg-white text-gray-700 hover:bg-gray-50"
-              }`}
+              onClick={handleNew}
+              className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center gap-2"
             >
-              <FaTh className="w-4 h-4" />
-            </button>
-            <button
-              onClick={() => setViewMode("list")}
-              className={`px-2.5 py-1.5 text-sm ${
-                viewMode === "list"
-                  ? "bg-blue-600 text-white"
-                  : "bg-white text-gray-700 hover:bg-gray-50"
-              }`}
-            >
-              <FaList className="w-4 h-4" />
+              <FaPlus className="w-4 h-4" />
+              Yeni Aktivite Türü
             </button>
           </div>
-          <button
-            onClick={handleNew}
-            className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center gap-2"
-          >
-            <FaPlus className="w-4 h-4" />
-            Yeni Aktivite Türü
-          </button>
         </div>
-      </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-2">
-        <Widget
-          title="Toplam Aktivite Türü"
-          value={activityTypes.length}
-          color="blue"
-          icon="FaCog"
-        />
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-2">
+          <Widget
+            title="Toplam Aktivite Türü"
+            value={activityTypes.length}
+            color="blue"
+            icon="FaCog"
+          />
 
-        <Widget
-          title="Aktif"
-          value={activityTypes.filter((a) => a.isActive).length}
-          color="green"
-          icon="FaCog"
-        />
+          <Widget
+            title="Aktif"
+            value={activityTypes.filter((a) => a.isActive).length}
+            color="green"
+            icon="FaCog"
+          />
 
-        <Widget
-          title="Kategori Sayısı"
-          value={categories.length}
-          color="purple"
-          icon="FaFileAlt"
-        />
+          <Widget
+            title="Kategori Sayısı"
+            value={categories.length}
+            color="purple"
+            icon="FaFileAlt"
+          />
 
-        <Widget
-          title="Ortalama Süre"
-          value={`${(
-            activityTypes.reduce((acc, a) => acc + a.defaultDuration, 0) /
-            activityTypes.length
-          ).toFixed(1)}h`}
-          color="orange"
-          icon="FaFlask"
-        />
-      </div>
-
-      {/* Filters */}
-      <div className="flex flex-col sm:flex-row gap-2">
-        <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="Aktivite türü ara..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-10 pr-3 py-1.5 text-sm w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          <Widget
+            title="Ortalama Süre"
+            value={`${(
+              activityTypes.reduce((acc, a) => acc + a.defaultDuration, 0) / activityTypes.length
+            ).toFixed(1)}h`}
+            color="orange"
+            icon="FaFlask"
           />
         </div>
-        <select
-          value={categoryFilter}
-          onChange={(e) => setCategoryFilter(e.target.value)}
-          className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-        >
-          <option value="">Tüm Kategoriler</option>
-          {categories.map((category) => (
-            <option key={category} value={category}>
-              {category}
-            </option>
-          ))}
-        </select>
+
+        {/* Filters */}
+        <div className="flex flex-col sm:flex-row gap-2">
+          <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="Aktivite türü ara..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10 pr-3 py-1.5 text-sm w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+          </div>
+          <select
+            value={categoryFilter}
+            onChange={(e) => setCategoryFilter(e.target.value)}
+            className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value="">Tüm Kategoriler</option>
+            {categories.map((category) => (
+              <option key={category} value={category}>
+                {category}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Activity Types - Card/List View */}
+        {viewMode === 'card' ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+            {filteredActivities.map((activity) => {
+              const ActivityIcon = getPsActivityTypeIcon(activity.activityType)
+
+              return (
+                <div
+                  key={activity.id}
+                  className="bg-white rounded-lg border border-gray-200 p-2.5 hover:shadow-md transition-shadow"
+                >
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`p-2 rounded-lg ${getPsActivityTypeColor(
+                          activity.activityType,
+                        )}`}
+                      >
+                        <ActivityIcon className="w-4 h-4" />
+                      </div>
+                      <div>
+                        <h3 className="font-medium text-gray-900">{activity.name}</h3>
+                        <p className="text-sm text-gray-500">{activity.category}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <button
+                        onClick={() => setSelectedActivity(activity.id)}
+                        className="text-blue-600 hover:text-blue-900 p-1"
+                        title="Detayları Gör"
+                      >
+                        <FaEye className="w-4 h-4" />
+                      </button>
+                      <button
+                        onClick={() => handleEdit(activity)}
+                        className="text-blue-600 hover:text-blue-900 p-1"
+                        title="Düzenle"
+                      >
+                        <FaEdit className="w-4 h-4" />
+                      </button>
+                      <button className="text-red-600 hover:text-red-900 p-1" title="Sil">
+                        <FaTrash className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <p className="text-sm text-gray-600 mb-2">{activity.description}</p>
+
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-gray-500">Süre: {activity.defaultDuration}h</span>
+                    <span
+                      className={`px-2 py-1 text-xs rounded-full ${
+                        activity.isActive
+                          ? 'bg-green-100 text-green-800'
+                          : 'bg-red-100 text-red-800'
+                      }`}
+                    >
+                      {activity.isActive ? 'Aktif' : 'Pasif'}
+                    </span>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        ) : (
+          <div className="bg-white rounded-lg border border-gray-200">
+            <div className="px-3 py-1.5 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900">Aktivite Türleri Listesi</h3>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Aktivite Türü
+                    </th>
+                    <th className="px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Kategori
+                    </th>
+                    <th className="px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Varsayılan Süre
+                    </th>
+                    <th className="px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Durum
+                    </th>
+                    <th className="px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Son Güncelleme
+                    </th>
+                    <th className="px-2 py-1.5 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">
+                  {filteredActivities.map((activity) => {
+                    const ActivityIcon = getPsActivityTypeIcon(activity.activityType)
+
+                    return (
+                      <tr key={activity.id} className="hover:bg-gray-50 text-sm">
+                        <td className="px-2 py-1.5 whitespace-nowrap">
+                          <div className="flex items-center">
+                            <div
+                              className={`p-2 rounded-lg mr-3 ${getPsActivityTypeColor(
+                                activity.activityType,
+                              )}`}
+                            >
+                              <ActivityIcon className="w-4 h-4" />
+                            </div>
+                            <div>
+                              <div className="text-sm font-medium text-gray-900">
+                                {activity.name}
+                              </div>
+                              <div className="text-sm text-gray-500">{activity.description}</div>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-2 py-1.5 whitespace-nowrap">
+                          <div className="text-sm text-gray-900">{activity.category}</div>
+                        </td>
+                        <td className="px-2 py-1.5 whitespace-nowrap">
+                          <div className="text-sm text-gray-900">
+                            {activity.defaultDuration} saat
+                          </div>
+                        </td>
+                        <td className="px-2 py-1.5 whitespace-nowrap">
+                          <span
+                            className={`px-2 py-1 text-xs rounded-full ${
+                              activity.isActive
+                                ? 'bg-green-100 text-green-800'
+                                : 'bg-red-100 text-red-800'
+                            }`}
+                          >
+                            {activity.isActive ? 'Aktif' : 'Pasif'}
+                          </span>
+                        </td>
+                        <td className="px-2 py-1.5 whitespace-nowrap text-sm text-gray-500">
+                          {activity.lastModificationTime.toLocaleDateString('tr-TR')}
+                        </td>
+                        <td className="px-2 py-1.5 whitespace-nowrap text-right text-sm font-medium">
+                          <div className="flex items-center justify-end gap-2">
+                            <button
+                              onClick={() => setSelectedActivity(activity.id)}
+                              className="text-blue-600 hover:text-blue-900"
+                              title="Detayları Gör"
+                            >
+                              <FaEye className="w-4 h-4" />
+                            </button>
+                            <button
+                              onClick={() => handleEdit(activity)}
+                              className="text-blue-600 hover:text-blue-900"
+                              title="Düzenle"
+                            >
+                              <FaEdit className="w-4 h-4" />
+                            </button>
+                            <button className="text-red-600 hover:text-red-900" title="Sil">
+                              <FaTrash className="w-4 h-4" />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
       </div>
 
-      {/* Activity Types - Card/List View */}
-      {viewMode === "card" ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
-          {filteredActivities.map((activity) => {
-            const ActivityIcon = getPsActivityTypeIcon(activity.activityType);
-
-            return (
-              <div
-                key={activity.id}
-                className="bg-white rounded-lg border border-gray-200 p-2.5 hover:shadow-md transition-shadow"
-              >
-                <div className="flex items-start justify-between mb-3">
-                  <div className="flex items-center gap-3">
-                    <div
-                      className={`p-2 rounded-lg ${getPsActivityTypeColor(
-                        activity.activityType
-                      )}`}
-                    >
-                      <ActivityIcon className="w-4 h-4" />
-                    </div>
-                    <div>
-                      <h3 className="font-medium text-gray-900">
-                        {activity.name}
-                      </h3>
-                      <p className="text-sm text-gray-500">
-                        {activity.category}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-1">
-                    <button
-                      onClick={() => setSelectedActivity(activity.id)}
-                      className="text-blue-600 hover:text-blue-900 p-1"
-                      title="Detayları Gör"
-                    >
-                      <FaEye className="w-4 h-4" />
-                    </button>
-                    <button
-                      onClick={() => handleEdit(activity)}
-                      className="text-blue-600 hover:text-blue-900 p-1"
-                      title="Düzenle"
-                    >
-                      <FaEdit className="w-4 h-4" />
-                    </button>
-                    <button
-                      className="text-red-600 hover:text-red-900 p-1"
-                      title="Sil"
-                    >
-                      <FaTrash className="w-4 h-4" />
-                    </button>
-                  </div>
-                </div>
-
-                <p className="text-sm text-gray-600 mb-2">
-                  {activity.description}
-                </p>
-
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-gray-500">
-                    Süre: {activity.defaultDuration}h
-                  </span>
-                  <span
-                    className={`px-2 py-1 text-xs rounded-full ${
-                      activity.isActive
-                        ? "bg-green-100 text-green-800"
-                        : "bg-red-100 text-red-800"
-                    }`}
-                  >
-                    {activity.isActive ? "Aktif" : "Pasif"}
-                  </span>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        <div className="bg-white rounded-lg border border-gray-200">
-          <div className="px-3 py-1.5 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900">
-              Aktivite Türleri Listesi
-            </h3>
-          </div>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Aktivite Türü
-                  </th>
-                  <th className="px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Kategori
-                  </th>
-                  <th className="px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Varsayılan Süre
-                  </th>
-                  <th className="px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Durum
-                  </th>
-                  <th className="px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Son Güncelleme
-                  </th>
-                  <th className="px-2 py-1.5 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">
-                {filteredActivities.map((activity) => {
-                  const ActivityIcon = getPsActivityTypeIcon(
-                    activity.activityType
-                  );
-
-                  return (
-                    <tr key={activity.id} className="hover:bg-gray-50 text-sm">
-                      <td className="px-2 py-1.5 whitespace-nowrap">
-                        <div className="flex items-center">
-                          <div
-                            className={`p-2 rounded-lg mr-3 ${getPsActivityTypeColor(
-                              activity.activityType
-                            )}`}
-                          >
-                            <ActivityIcon className="w-4 h-4" />
-                          </div>
-                          <div>
-                            <div className="text-sm font-medium text-gray-900">
-                              {activity.name}
-                            </div>
-                            <div className="text-sm text-gray-500">
-                              {activity.description}
-                            </div>
-                          </div>
-                        </div>
-                      </td>
-                      <td className="px-2 py-1.5 whitespace-nowrap">
-                        <div className="text-sm text-gray-900">
-                          {activity.category}
-                        </div>
-                      </td>
-                      <td className="px-2 py-1.5 whitespace-nowrap">
-                        <div className="text-sm text-gray-900">
-                          {activity.defaultDuration} saat
-                        </div>
-                      </td>
-                      <td className="px-2 py-1.5 whitespace-nowrap">
-                        <span
-                          className={`px-2 py-1 text-xs rounded-full ${
-                            activity.isActive
-                              ? "bg-green-100 text-green-800"
-                              : "bg-red-100 text-red-800"
-                          }`}
-                        >
-                          {activity.isActive ? "Aktif" : "Pasif"}
-                        </span>
-                      </td>
-                      <td className="px-2 py-1.5 whitespace-nowrap text-sm text-gray-500">
-                        {activity.lastModificationTime.toLocaleDateString(
-                          "tr-TR"
-                        )}
-                      </td>
-                      <td className="px-2 py-1.5 whitespace-nowrap text-right text-sm font-medium">
-                        <div className="flex items-center justify-end gap-2">
-                          <button
-                            onClick={() => setSelectedActivity(activity.id)}
-                            className="text-blue-600 hover:text-blue-900"
-                            title="Detayları Gör"
-                          >
-                            <FaEye className="w-4 h-4" />
-                          </button>
-                          <button
-                            onClick={() => handleEdit(activity)}
-                            className="text-blue-600 hover:text-blue-900"
-                            title="Düzenle"
-                          >
-                            <FaEdit className="w-4 h-4" />
-                          </button>
-                          <button
-                            className="text-red-600 hover:text-red-900"
-                            title="Sil"
-                          >
-                            <FaTrash className="w-4 h-4" />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      )}
-
       {/* Activity Detail Modal */}
       <ActivityDetailModal />
 
@@ -500,8 +439,8 @@ const ActivityTypes: React.FC = () => {
         onClose={handleCloseForm}
         onSave={handleSave}
       />
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default ActivityTypes;
+export default ActivityTypes
diff --git a/ui/src/views/project/components/ProjectForm.tsx b/ui/src/views/project/components/ProjectForm.tsx
index 6c0a062d..8e3ec9fc 100644
--- a/ui/src/views/project/components/ProjectForm.tsx
+++ b/ui/src/views/project/components/ProjectForm.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { useNavigate, useParams, Link } from "react-router-dom";
+import React, { useState, useEffect, useCallback } from 'react'
+import { useNavigate, useParams, Link } from 'react-router-dom'
 import {
   FaSave,
   FaTimes,
@@ -22,11 +22,11 @@ import {
   FaDollarSign,
   FaEye,
   FaDownload,
-} from "react-icons/fa";
-import LoadingSpinner from "../../../components/common/LoadingSpinner";
-import { HrEmployee } from "../../../types/hr";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
+} from 'react-icons/fa'
+import LoadingSpinner from '../../../components/common/LoadingSpinner'
+import { HrEmployee } from '../../../types/hr'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
 import {
   PsProject,
   ProjectStatusEnum,
@@ -42,18 +42,18 @@ import {
   RiskImpactEnum,
   RiskLevelEnum,
   RiskStatusEnum,
-} from "../../../types/ps";
-import { mockProjects } from "../../../mocks/mockProjects";
-import { mockProjectPhases } from "../../../mocks/mockProjectPhases";
-import { mockProjectTasks } from "../../../mocks/mockProjectTasks";
-import dayjs from "dayjs";
-import classNames from "classnames";
-import PhaseEditModal from "./PhaseEditModal";
-import TaskModal, { TaskFormData } from "./TaskEditModal";
-import DocumentUploadModal from "./DocumentUploadModal";
-import DocumentViewerModal from "./DocumentViewerModal";
-import RiskModal from "./RiskModal";
-import { BusinessParty, PriorityEnum } from "../../../types/common";
+} from '../../../types/ps'
+import { mockProjects } from '../../../mocks/mockProjects'
+import { mockProjectPhases } from '../../../mocks/mockProjectPhases'
+import { mockProjectTasks } from '../../../mocks/mockProjectTasks'
+import dayjs from 'dayjs'
+import classNames from 'classnames'
+import PhaseEditModal from './PhaseEditModal'
+import TaskModal, { TaskFormData } from './TaskEditModal'
+import DocumentUploadModal from './DocumentUploadModal'
+import DocumentViewerModal from './DocumentViewerModal'
+import RiskModal from './RiskModal'
+import { BusinessParty, PriorityEnum } from '../../../types/common'
 import {
   getProjectStatusColor,
   getProjectStatusIcon,
@@ -63,7 +63,8 @@ import {
   getPriorityText,
   getProjectTypeColor,
   getProjectTypeText,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 // Custom styles for the slider
 const sliderStyles = `
@@ -96,59 +97,56 @@ const sliderStyles = `
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     cursor: pointer;
   }
-`;
+`
 
 interface ValidationErrors {
-  [key: string]: string;
+  [key: string]: string
 }
 
 const ProjectForm: 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 [customers, setCustomers] = useState<BusinessParty[]>([]);
-  const [projectManagers, setProjectManagers] = useState<HrEmployee[]>([]);
-  const [activeTab, setActiveTab] = useState("overview");
+  const [loading, setLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [errors, setErrors] = useState<ValidationErrors>({})
+  const [customers, setCustomers] = useState<BusinessParty[]>([])
+  const [projectManagers, setProjectManagers] = useState<HrEmployee[]>([])
+  const [activeTab, setActiveTab] = useState('overview')
 
   // Additional states for the new features
-  const [phases, setPhases] = useState<PsProjectPhase[]>([]);
-  const [tasks, setTasks] = useState<PsProjectTask[]>([]);
-  const [risks, setRisks] = useState<PsProjectRisk[]>([]);
-  const [documents, setDocuments] = useState<PsProjectDocument[]>([]);
+  const [phases, setPhases] = useState<PsProjectPhase[]>([])
+  const [tasks, setTasks] = useState<PsProjectTask[]>([])
+  const [risks, setRisks] = useState<PsProjectRisk[]>([])
+  const [documents, setDocuments] = useState<PsProjectDocument[]>([])
 
   // Modal states
-  const [isPhaseModalOpen, setIsPhaseModalOpen] = useState(false);
-  const [editingPhase, setEditingPhase] = useState<PsProjectPhase | null>(null);
-  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
-  const [editingTask, setEditingTask] = useState<PsProjectTask | null>(null);
+  const [isPhaseModalOpen, setIsPhaseModalOpen] = useState(false)
+  const [editingPhase, setEditingPhase] = useState<PsProjectPhase | null>(null)
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false)
+  const [editingTask, setEditingTask] = useState<PsProjectTask | null>(null)
 
   // Document modal states
-  const [isDocumentUploadModalOpen, setIsDocumentUploadModalOpen] =
-    useState(false);
-  const [isDocumentViewerModalOpen, setIsDocumentViewerModalOpen] =
-    useState(false);
-  const [selectedDocument, setSelectedDocument] =
-    useState<PsProjectDocument | null>(null);
+  const [isDocumentUploadModalOpen, setIsDocumentUploadModalOpen] = useState(false)
+  const [isDocumentViewerModalOpen, setIsDocumentViewerModalOpen] = useState(false)
+  const [selectedDocument, setSelectedDocument] = useState<PsProjectDocument | null>(null)
 
   // Risk modal states
-  const [isRiskModalOpen, setIsRiskModalOpen] = useState(false);
-  const [editingRisk, setEditingRisk] = useState<PsProjectRisk | null>(null);
+  const [isRiskModalOpen, setIsRiskModalOpen] = useState(false)
+  const [editingRisk, setEditingRisk] = useState<PsProjectRisk | null>(null)
 
   const [formData, setFormData] = useState<PsProject>({
-    id: "",
-    code: "",
-    name: "",
-    description: "",
+    id: '',
+    code: '',
+    name: '',
+    description: '',
     projectType: ProjectTypeEnum.Internal,
     status: ProjectStatusEnum.Planning,
     priority: PriorityEnum.Low,
-    customerId: "",
+    customerId: '',
     customer: undefined,
-    projectManagerId: "",
+    projectManagerId: '',
     projectManager: undefined,
     startDate: new Date(),
     endDate: new Date(),
@@ -156,7 +154,7 @@ const ProjectForm: React.FC = () => {
     actualEndDate: undefined,
     budget: 0,
     actualCost: 0,
-    currency: "TRY",
+    currency: 'TRY',
     progress: 0,
     phases: [],
     tasks: [],
@@ -165,183 +163,170 @@ const ProjectForm: React.FC = () => {
     isActive: true,
     creationTime: new Date(),
     lastModificationTime: new Date(),
-  });
+  })
 
   const tabs = [
-    { id: "overview", name: "Genel Bakış", icon: FaChartLine },
-    { id: "phases", name: "Aşamalar", icon: FaFlag },
-    { id: "tasks", name: "Görevler", icon: FaTasks },
-    { id: "documents", name: "Belgeler", icon: FaFileAlt },
-    { id: "risks", name: "Riskler", icon: FaExclamationCircle },
-    { id: "budget", name: "Bütçe Bilgileri", icon: FaDollarSign },
-  ];
+    { id: 'overview', name: 'Genel Bakış', icon: FaChartLine },
+    { id: 'phases', name: 'Aşamalar', icon: FaFlag },
+    { id: 'tasks', name: 'Görevler', icon: FaTasks },
+    { id: 'documents', name: 'Belgeler', icon: FaFileAlt },
+    { id: 'risks', name: 'Riskler', icon: FaExclamationCircle },
+    { id: 'budget', name: 'Bütçe Bilgileri', icon: FaDollarSign },
+  ]
 
   const budgetUsagePercentage =
-    formData.budget > 0 ? (formData.actualCost / formData.budget) * 100 : 0;
+    formData.budget > 0 ? (formData.actualCost / formData.budget) * 100 : 0
 
   const loadData = useCallback(async () => {
     try {
-      setCustomers(mockBusinessParties);
-      setProjectManagers(mockEmployees);
+      setCustomers(mockBusinessParties)
+      setProjectManagers(mockEmployees)
 
       if (isEdit && id) {
         // Load existing phases, tasks, risks, documents for the project
-        const existingPhases = mockProjectPhases.filter(
-          (p) => p.projectId === id
-        );
-        const existingTasks = mockProjectTasks.filter(
-          (t) => t.projectId === id
-        );
-        setPhases(existingPhases);
-        setTasks(existingTasks);
+        const existingPhases = mockProjectPhases.filter((p) => p.projectId === id)
+        const existingTasks = mockProjectTasks.filter((t) => t.projectId === id)
+        setPhases(existingPhases)
+        setTasks(existingTasks)
         // For now, using empty arrays for risks and documents
-        setRisks([]);
-        setDocuments([]);
+        setRisks([])
+        setDocuments([])
       }
     } catch (error) {
-      console.error("Error loading data:", error);
+      console.error('Error loading data:', error)
     }
-  }, [isEdit, id]);
+  }, [isEdit, id])
 
   const loadFormData = useCallback(async () => {
-    setLoading(true);
+    setLoading(true)
     try {
       if (isEdit && id) {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        const mockProject = mockProjects.find((p) => p.id === id);
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        const mockProject = mockProjects.find((p) => p.id === id)
         if (mockProject) {
-          setFormData(mockProject);
+          setFormData(mockProject)
         }
       }
     } 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])
 
   // Add custom slider styles
   useEffect(() => {
-    const style = document.createElement("style");
-    style.textContent = sliderStyles;
-    document.head.appendChild(style);
+    const style = document.createElement('style')
+    style.textContent = sliderStyles
+    document.head.appendChild(style)
 
     return () => {
-      document.head.removeChild(style);
-    };
-  }, []);
+      document.head.removeChild(style)
+    }
+  }, [])
 
   const validateForm = (): boolean => {
-    const newErrors: ValidationErrors = {};
+    const newErrors: ValidationErrors = {}
 
     if (!formData.code.trim()) {
-      newErrors.projectCode = "Proje kodu zorunludur";
+      newErrors.projectCode = 'Proje kodu zorunludur'
     }
     if (!formData.name.trim()) {
-      newErrors.name = "Proje adı zorunludur";
+      newErrors.name = 'Proje adı zorunludur'
     }
     if (!formData.projectType) {
-      newErrors.projectType = "Proje tipi seçilmelidir";
+      newErrors.projectType = 'Proje tipi seçilmelidir'
     }
     if (!formData.projectManagerId) {
-      newErrors.projectManagerId = "Proje yöneticisi seçilmelidir";
+      newErrors.projectManagerId = 'Proje yöneticisi seçilmelidir'
     }
     if (!formData.startDate) {
-      newErrors.startDate = "Başlangıç tarihi zorunludur";
+      newErrors.startDate = 'Başlangıç tarihi zorunludur'
     }
     if (!formData.endDate) {
-      newErrors.endDate = "Bitiş tarihi zorunludur";
+      newErrors.endDate = 'Bitiş tarihi zorunludur'
     }
-    if (
-      formData.startDate &&
-      formData.endDate &&
-      formData.startDate >= formData.endDate
-    ) {
-      newErrors.endDate = "Bitiş tarihi başlangıç tarihinden sonra olmalıdır";
+    if (formData.startDate && formData.endDate && formData.startDate >= formData.endDate) {
+      newErrors.endDate = 'Bitiş tarihi başlangıç tarihinden sonra olmalıdır'
     }
     if (formData.budget <= 0) {
-      newErrors.budget = "Bütçe 0'dan büyük olmalıdır";
+      newErrors.budget = "Bütçe 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 PsProject,
-    value: string | number | boolean | Date
-  ) => {
+  const handleInputChange = (field: keyof PsProject, value: string | number | boolean | Date) => {
     setFormData((prev) => ({
       ...prev,
       [field]: value,
-    }));
+    }))
 
     if (errors[field]) {
       setErrors((prev) => ({
         ...prev,
-        [field]: "",
-      }));
+        [field]: '',
+      }))
     }
-  };
+  }
 
   const handleDateChange = (field: keyof PsProject, value: string) => {
-    const date = value ? new Date(value) : new Date();
-    handleInputChange(field, date);
-  };
+    const date = value ? new Date(value) : new Date()
+    handleInputChange(field, date)
+  }
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (!validateForm()) {
-      return;
+      return
     }
 
-    setSaving(true);
+    setSaving(true)
     try {
-      await new Promise((resolve) => setTimeout(resolve, 2000));
+      await new Promise((resolve) => setTimeout(resolve, 2000))
 
-      console.log("Project data:", {
+      console.log('Project data:', {
         ...formData,
         id: isEdit ? id : undefined,
-      });
+      })
 
-      alert(
-        isEdit ? "Proje başarıyla güncellendi!" : "Proje başarıyla oluşturuldu!"
-      );
+      alert(isEdit ? 'Proje başarıyla güncellendi!' : 'Proje başarıyla oluşturuldu!')
 
-      navigate("/admin/projects");
+      navigate('/admin/projects')
     } catch (error) {
-      console.error("Error saving project:", error);
-      alert("Bir hata oluştu. Lütfen tekrar deneyin.");
+      console.error('Error saving project:', error)
+      alert('Bir hata oluştu. Lütfen tekrar deneyin.')
     } finally {
-      setSaving(false);
+      setSaving(false)
     }
-  };
+  }
 
   const handleCancel = () => {
-    navigate("/admin/projects");
-  };
+    navigate('/admin/projects')
+  }
 
   // Phase modal handlers
   const openPhaseModal = () => {
-    setEditingPhase(null);
-    setIsPhaseModalOpen(true);
-  };
+    setEditingPhase(null)
+    setIsPhaseModalOpen(true)
+  }
 
   const openEditPhaseModal = (phase: PsProjectPhase) => {
-    setEditingPhase(phase);
-    setIsPhaseModalOpen(true);
-  };
+    setEditingPhase(phase)
+    setIsPhaseModalOpen(true)
+  }
 
   const closePhaseModal = () => {
-    setIsPhaseModalOpen(false);
-    setEditingPhase(null);
-  };
+    setIsPhaseModalOpen(false)
+    setEditingPhase(null)
+  }
 
   const handlePhaseSubmit = (phaseData: PsProjectPhase) => {
     if (editingPhase) {
@@ -361,23 +346,21 @@ const ProjectForm: React.FC = () => {
               assignedTeams: phaseData.assignedTeams,
               updatedAt: new Date(),
             }
-          : p
-      );
-      setPhases(updatedPhases);
-      alert("Aşama başarıyla güncellendi!");
+          : p,
+      )
+      setPhases(updatedPhases)
+      alert('Aşama başarıyla güncellendi!')
     } else {
       // Create new phase
-      const selectedProject = mockProjects.find(
-        (p) => p.id === phaseData.projectId
-      );
+      const selectedProject = mockProjects.find((p) => p.id === phaseData.projectId)
       if (!selectedProject) {
-        alert("Proje bulunamadı!");
-        return;
+        alert('Proje bulunamadı!')
+        return
       }
 
       const newPhase: PsProjectPhase = {
         id: Date.now().toString(),
-        code: `PH-${(phases.length + 1).toString().padStart(3, "0")}`,
+        code: `PH-${(phases.length + 1).toString().padStart(3, '0')}`,
         name: phaseData.name,
         description: phaseData.description,
         projectId: phaseData.projectId,
@@ -397,35 +380,35 @@ const ProjectForm: React.FC = () => {
         sequence: phases.length + 1,
         tasks: [],
         isActive: true,
-      };
-      setPhases([...phases, newPhase]);
-      alert("Yeni aşama başarıyla oluşturuldu!");
+      }
+      setPhases([...phases, newPhase])
+      alert('Yeni aşama başarıyla oluşturuldu!')
     }
-    closePhaseModal();
-  };
+    closePhaseModal()
+  }
 
   const handleDeletePhase = (phaseId: string) => {
-    if (window.confirm("Bu aşamayı silmek istediğinizden emin misiniz?")) {
-      setPhases(phases.filter((p) => p.id !== phaseId));
-      alert("Aşama başarıyla silindi!");
+    if (window.confirm('Bu aşamayı silmek istediğinizden emin misiniz?')) {
+      setPhases(phases.filter((p) => p.id !== phaseId))
+      alert('Aşama başarıyla silindi!')
     }
-  };
+  }
 
   // Task handlers
   const openTaskModal = () => {
-    setEditingTask(null);
-    setIsTaskModalOpen(true);
-  };
+    setEditingTask(null)
+    setIsTaskModalOpen(true)
+  }
 
   const openEditTaskModal = (task: PsProjectTask) => {
-    setEditingTask(task);
-    setIsTaskModalOpen(true);
-  };
+    setEditingTask(task)
+    setIsTaskModalOpen(true)
+  }
 
   const closeTaskModal = () => {
-    setIsTaskModalOpen(false);
-    setEditingTask(null);
-  };
+    setIsTaskModalOpen(false)
+    setEditingTask(null)
+  }
 
   const handleTaskSubmit = (taskData: TaskFormData) => {
     if (editingTask) {
@@ -442,34 +425,26 @@ const ProjectForm: React.FC = () => {
               status: taskData.status,
               priority: taskData.priority,
               assignedTo: taskData.assignedTo,
-              assignee: mockEmployees.find(
-                (emp) => emp.id === taskData.assignedTo
-              ),
+              assignee: mockEmployees.find((emp) => emp.id === taskData.assignedTo),
               startDate: new Date(taskData.startDate),
               endDate: new Date(taskData.endDate),
               estimatedHours: taskData.estimatedHours,
               progress: taskData.progress,
               lastModificationTime: new Date(),
             }
-          : t
-      );
-      setTasks(updatedTasks);
-      alert("Görev başarıyla güncellendi!");
+          : t,
+      )
+      setTasks(updatedTasks)
+      alert('Görev başarıyla güncellendi!')
     } else {
       // Create new task
-      const selectedProject = mockProjects.find(
-        (p) => p.id === taskData.projectId
-      );
-      const selectedPhase = mockProjectPhases.find(
-        (p) => p.id === taskData.phaseId
-      );
-      const selectedAssignee = mockEmployees.find(
-        (emp) => emp.id === taskData.assignedTo
-      );
+      const selectedProject = mockProjects.find((p) => p.id === taskData.projectId)
+      const selectedPhase = mockProjectPhases.find((p) => p.id === taskData.phaseId)
+      const selectedAssignee = mockEmployees.find((emp) => emp.id === taskData.assignedTo)
 
       if (!selectedProject) {
-        alert("Proje bulunamadı!");
-        return;
+        alert('Proje bulunamadı!')
+        return
       }
 
       const newTask: PsProjectTask = {
@@ -477,7 +452,7 @@ const ProjectForm: React.FC = () => {
         projectId: taskData.projectId,
         phaseId: taskData.phaseId,
         phase: selectedPhase,
-        taskCode: `TSK-${(tasks.length + 1).toString().padStart(3, "0")}`,
+        taskCode: `TSK-${(tasks.length + 1).toString().padStart(3, '0')}`,
         name: taskData.name,
         description: taskData.description,
         taskType: taskData.taskType,
@@ -495,94 +470,94 @@ const ProjectForm: React.FC = () => {
         isActive: true,
         creationTime: new Date(),
         lastModificationTime: new Date(),
-      };
-      setTasks([...tasks, newTask]);
-      alert("Yeni görev başarıyla oluşturuldu!");
+      }
+      setTasks([...tasks, newTask])
+      alert('Yeni görev başarıyla oluşturuldu!')
     }
-    closeTaskModal();
-  };
+    closeTaskModal()
+  }
 
   const handleDeleteTask = (taskId: string) => {
-    if (window.confirm("Bu görevi silmek istediğinizden emin misiniz?")) {
-      setTasks(tasks.filter((t) => t.id !== taskId));
-      alert("Görev başarıyla silindi!");
+    if (window.confirm('Bu görevi silmek istediğinizden emin misiniz?')) {
+      setTasks(tasks.filter((t) => t.id !== taskId))
+      alert('Görev başarıyla silindi!')
     }
-  };
+  }
 
   // Document handlers
   const openDocumentUploadModal = () => {
-    setIsDocumentUploadModalOpen(true);
-  };
+    setIsDocumentUploadModalOpen(true)
+  }
 
   const closeDocumentUploadModal = () => {
-    setIsDocumentUploadModalOpen(false);
-  };
+    setIsDocumentUploadModalOpen(false)
+  }
 
   const handleDocumentUpload = (documentData: {
-    documentName: string;
-    documentType: PsDocumentTypeEnum;
-    file: File;
+    documentName: string
+    documentType: PsDocumentTypeEnum
+    file: File
   }) => {
     // In a real application, you would upload the file to a server
     // For now, we'll create a mock URL and add it to the documents list
     const newDocument: PsProjectDocument = {
       id: Date.now().toString(),
-      projectId: formData.id || "temp-project-id",
+      projectId: formData.id || 'temp-project-id',
       documentName: documentData.documentName,
       documentType: documentData.documentType,
       filePath: URL.createObjectURL(documentData.file), // Mock file path
       fileSize: Number((documentData.file.size / (1024 * 1024)).toFixed(2)), // Convert to MB
-      uploadedBy: "Current User", // In real app, get from auth context
+      uploadedBy: 'Current User', // In real app, get from auth context
       uploadedAt: new Date(),
-      version: "1.0",
+      version: '1.0',
       isActive: true,
-    };
+    }
 
-    setDocuments([...documents, newDocument]);
-    closeDocumentUploadModal();
-    alert("Belge başarıyla yüklendi!");
-  };
+    setDocuments([...documents, newDocument])
+    closeDocumentUploadModal()
+    alert('Belge başarıyla yüklendi!')
+  }
 
   const openDocumentViewer = (document: PsProjectDocument) => {
-    setSelectedDocument(document);
-    setIsDocumentViewerModalOpen(true);
-  };
+    setSelectedDocument(document)
+    setIsDocumentViewerModalOpen(true)
+  }
 
   const closeDocumentViewer = () => {
-    setIsDocumentViewerModalOpen(false);
-    setSelectedDocument(null);
-  };
+    setIsDocumentViewerModalOpen(false)
+    setSelectedDocument(null)
+  }
 
   const handleDocumentDownload = (document: PsProjectDocument) => {
     // In a real application, this would trigger a server download
-    const link = window.document.createElement("a");
-    link.href = document.filePath;
-    link.download = document.documentName;
-    link.click();
-  };
+    const link = window.document.createElement('a')
+    link.href = document.filePath
+    link.download = document.documentName
+    link.click()
+  }
 
   const handleDeleteDocument = (documentId: string) => {
-    if (window.confirm("Bu belgeyi silmek istediğinizden emin misiniz?")) {
-      setDocuments(documents.filter((d) => d.id !== documentId));
-      alert("Belge başarıyla silindi!");
+    if (window.confirm('Bu belgeyi silmek istediğinizden emin misiniz?')) {
+      setDocuments(documents.filter((d) => d.id !== documentId))
+      alert('Belge başarıyla silindi!')
     }
-  };
+  }
 
   // Risk handlers
   const openRiskModal = () => {
-    setEditingRisk(null);
-    setIsRiskModalOpen(true);
-  };
+    setEditingRisk(null)
+    setIsRiskModalOpen(true)
+  }
 
   const openEditRiskModal = (risk: PsProjectRisk) => {
-    setEditingRisk(risk);
-    setIsRiskModalOpen(true);
-  };
+    setEditingRisk(risk)
+    setIsRiskModalOpen(true)
+  }
 
   const closeRiskModal = () => {
-    setIsRiskModalOpen(false);
-    setEditingRisk(null);
-  };
+    setIsRiskModalOpen(false)
+    setEditingRisk(null)
+  }
 
   const handleRiskSubmit = (riskData: Partial<PsProjectRisk>) => {
     if (editingRisk) {
@@ -593,347 +568,664 @@ const ProjectForm: React.FC = () => {
               ...editingRisk,
               ...riskData,
             }
-          : r
-      );
-      setRisks(updatedRisks);
-      alert("Risk başarıyla güncellendi!");
+          : r,
+      )
+      setRisks(updatedRisks)
+      alert('Risk başarıyla güncellendi!')
     } else {
       // Create new risk
       const newRisk: PsProjectRisk = {
         id: Date.now().toString(),
-        projectId: formData.id || "temp-project-id",
-        riskCode: `RISK-${(risks.length + 1).toString().padStart(3, "0")}`,
-        title: riskData.title || "",
-        description: riskData.description || "",
+        projectId: formData.id || 'temp-project-id',
+        riskCode: `RISK-${(risks.length + 1).toString().padStart(3, '0')}`,
+        title: riskData.title || '',
+        description: riskData.description || '',
         category: riskData.category || RiskCategoryEnum.Technical,
         probability: riskData.probability || RiskProbabilityEnum.Medium,
         impact: riskData.impact || RiskImpactEnum.Medium,
         riskLevel: riskData.riskLevel || RiskLevelEnum.Medium,
         status: riskData.status || RiskStatusEnum.Identified,
-        identifiedBy: "Current User", // In real app, get from auth context
+        identifiedBy: 'Current User', // In real app, get from auth context
         identifiedDate: new Date(),
         mitigationPlan: riskData.mitigationPlan,
         contingencyPlan: riskData.contingencyPlan,
         ownerId: riskData.ownerId,
         reviewDate: riskData.reviewDate,
         isActive: true,
-      };
-      setRisks([...risks, newRisk]);
-      alert("Yeni risk başarıyla eklendi!");
+      }
+      setRisks([...risks, newRisk])
+      alert('Yeni risk başarıyla eklendi!')
     }
-    closeRiskModal();
-  };
+    closeRiskModal()
+  }
 
   const handleDeleteRisk = (riskId: string) => {
-    if (window.confirm("Bu riski silmek istediğinizden emin misiniz?")) {
-      setRisks(risks.filter((r) => r.id !== riskId));
-      alert("Risk başarıyla silindi!");
+    if (window.confirm('Bu riski silmek istediğinizden emin misiniz?')) {
+      setRisks(risks.filter((r) => r.id !== riskId))
+      alert('Risk başarıyla silindi!')
     }
-  };
+  }
 
   if (loading) {
-    return <LoadingSpinner />;
+    return <LoadingSpinner />
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <div className="bg-white border-b border-gray-200">
-        <div className="mx-auto">
-          <div className="flex items-center justify-between h-12">
-            <div className="flex items-center">
-              <Link
-                to="/admin/projects"
-                className="flex items-center px-2.5 py-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors mr-2"
-              >
-                <FaArrowLeft className="w-4 h-4 mr-2" />
-                Geri
-              </Link>
-              <div className="flex items-center space-x-2">
-                <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
-                  <FaFolder className="w-6 h-6 text-blue-600" />
-                </div>
-                <div>
-                  <h1 className="text-xl font-bold text-gray-900">
-                    {isEdit ? formData.code : "Yeni Proje"}
-                  </h1>
-                  <p className="text-sm text-gray-600">
-                    {isEdit ? formData.name : "Proje bilgilerini girin"}
-                  </p>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="bg-white border-b border-gray-200">
+          <div className="p-2">
+            <div className="flex items-center justify-between h-12">
+              <div className="flex items-center">
+                <Link
+                  to="/admin/projects"
+                  className="flex items-center px-2.5 py-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors mr-2"
+                >
+                  <FaArrowLeft className="w-4 h-4 mr-2" />
+                  Geri
+                </Link>
+                <div className="flex items-center space-x-2">
+                  <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
+                    <FaFolder className="w-6 h-6 text-blue-600" />
+                  </div>
+                  <div>
+                    <h1 className="text-xl font-bold text-gray-900">
+                      {isEdit ? formData.code : 'Yeni Proje'}
+                    </h1>
+                    <p className="text-sm text-gray-600">
+                      {isEdit ? formData.name : 'Proje bilgilerini girin'}
+                    </p>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div className="flex items-center space-x-2">
-              {isEdit && (
-                <span
-                  className={classNames(
-                    "inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium border",
-                    getProjectStatusColor(formData.status)
-                  )}
-                >
-                  {getProjectStatusIcon(formData.status)}
-                  <span className="ml-2">
-                    {getProjectStatusText(formData.status)}
+              <div className="flex items-center space-x-2">
+                {isEdit && (
+                  <span
+                    className={classNames(
+                      'inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium border',
+                      getProjectStatusColor(formData.status),
+                    )}
+                  >
+                    {getProjectStatusIcon(formData.status)}
+                    <span className="ml-2">{getProjectStatusText(formData.status)}</span>
                   </span>
-                </span>
-              )}
+                )}
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div className="mx-auto py-2">
-        {/* Summary Cards - Only show in edit mode */}
-        {isEdit && (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
-            {/* Progress Card */}
-            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
-              <div className="flex items-center justify-between mb-2">
-                <div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
-                  <FaBullseye className="w-5 h-5 text-blue-600" />
+        <div className="mx-auto py-2">
+          {/* Summary Cards - Only show in edit mode */}
+          {isEdit && (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
+              {/* Progress Card */}
+              <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
+                    <FaBullseye className="w-5 h-5 text-blue-600" />
+                  </div>
+                  <span className="text-lg font-bold text-blue-600">{formData.progress}%</span>
+                </div>
+                <h3 className="text-sm font-medium text-gray-600 mb-1">İlerleme</h3>
+                <div className="w-full bg-gray-200 rounded-full h-2">
+                  <div
+                    className={classNames('h-2 rounded-full', getProgressColor(formData.progress))}
+                    style={{ width: `${formData.progress}%` }}
+                  />
                 </div>
-                <span className="text-lg font-bold text-blue-600">
-                  {formData.progress}%
-                </span>
               </div>
-              <h3 className="text-sm font-medium text-gray-600 mb-1">
-                İlerleme
-              </h3>
-              <div className="w-full bg-gray-200 rounded-full h-2">
-                <div
-                  className={classNames(
-                    "h-2 rounded-full",
-                    getProgressColor(formData.progress)
-                  )}
-                  style={{ width: `${formData.progress}%` }}
-                />
-              </div>
-            </div>
 
-            {/* Budget Card */}
-            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
-              <div className="flex items-center justify-between mb-2">
-                <div className="w-7 h-7 bg-green-100 rounded-lg flex items-center justify-center">
-                  <FaDollarSign className="w-5 h-5 text-green-600" />
+              {/* Budget Card */}
+              <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="w-7 h-7 bg-green-100 rounded-lg flex items-center justify-center">
+                    <FaDollarSign className="w-5 h-5 text-green-600" />
+                  </div>
+                  <span className="text-lg font-bold text-green-600">
+                    {budgetUsagePercentage.toFixed(0)}%
+                  </span>
+                </div>
+                <h3 className="text-sm font-medium text-gray-600 mb-1">Bütçe Kullanımı</h3>
+                <div className="text-xs text-gray-500">
+                  ₺{formData.actualCost.toLocaleString()} / ₺{formData.budget.toLocaleString()}
                 </div>
-                <span className="text-lg font-bold text-green-600">
-                  {budgetUsagePercentage.toFixed(0)}%
-                </span>
               </div>
-              <h3 className="text-sm font-medium text-gray-600 mb-1">
-                Bütçe Kullanımı
-              </h3>
-              <div className="text-xs text-gray-500">
-                ₺{formData.actualCost.toLocaleString()} / ₺
-                {formData.budget.toLocaleString()}
-              </div>
-            </div>
 
-            {/* Duration Card */}
-            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
-              <div className="flex items-center justify-between mb-2">
-                <div className="w-7 h-7 bg-orange-100 rounded-lg flex items-center justify-center">
-                  <FaClock className="w-5 h-5 text-orange-600" />
+              {/* Duration Card */}
+              <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="w-7 h-7 bg-orange-100 rounded-lg flex items-center justify-center">
+                    <FaClock className="w-5 h-5 text-orange-600" />
+                  </div>
+                  <span className="text-lg font-bold text-orange-600">
+                    {dayjs(formData.endDate).diff(dayjs(formData.startDate), 'day')}
+                  </span>
+                </div>
+                <h3 className="text-sm font-medium text-gray-600 mb-1">Süre (Gün)</h3>
+                <div className="text-xs text-gray-500">
+                  {dayjs(formData.startDate).format('DD.MM.YYYY')} -{' '}
+                  {dayjs(formData.endDate).format('DD.MM.YYYY')}
                 </div>
-                <span className="text-lg font-bold text-orange-600">
-                  {dayjs(formData.endDate).diff(
-                    dayjs(formData.startDate),
-                    "day"
-                  )}
-                </span>
               </div>
-              <h3 className="text-sm font-medium text-gray-600 mb-1">
-                Süre (Gün)
-              </h3>
-              <div className="text-xs text-gray-500">
-                {dayjs(formData.startDate).format("DD.MM.YYYY")} -{" "}
-                {dayjs(formData.endDate).format("DD.MM.YYYY")}
-              </div>
-            </div>
 
-            {/* Priority Card */}
-            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
-              <div className="flex items-center justify-between mb-2">
-                <div className="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
-                  <FaFlag className="w-5 h-5 text-red-600" />
+              {/* Priority Card */}
+              <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
+                    <FaFlag className="w-5 h-5 text-red-600" />
+                  </div>
+                  <span
+                    className={classNames('text-lg font-bold', getPriorityColor(formData.priority))}
+                  >
+                    {getPriorityText(formData.priority)}
+                  </span>
                 </div>
+                <h3 className="text-sm font-medium text-gray-600 mb-1">Öncelik</h3>
                 <span
                   className={classNames(
-                    "text-lg font-bold",
-                    getPriorityColor(formData.priority)
+                    'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border',
+                    getProjectTypeColor(formData.projectType),
                   )}
                 >
-                  {getPriorityText(formData.priority)}
+                  {getProjectTypeText(formData.projectType)}
                 </span>
               </div>
-              <h3 className="text-sm font-medium text-gray-600 mb-1">
-                Öncelik
-              </h3>
-              <span
-                className={classNames(
-                  "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border",
-                  getProjectTypeColor(formData.projectType)
-                )}
-              >
-                {getProjectTypeText(formData.projectType)}
-              </span>
             </div>
-          </div>
-        )}
+          )}
 
-        {/* Tabs */}
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-          <div className="border-b border-gray-200">
-            <nav className="flex space-x-2 px-3" aria-label="Tabs">
-              {tabs.map((tab) => {
-                const Icon = tab.icon;
-                return (
-                  <button
-                    key={tab.id}
-                    onClick={() => setActiveTab(tab.id)}
-                    className={classNames(
-                      "py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 transition-colors",
-                      activeTab === tab.id
-                        ? "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" />
-                    <span>{tab.name}</span>
-                  </button>
-                );
-              })}
-            </nav>
-          </div>
+          {/* Tabs */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div className="border-b border-gray-200">
+              <nav className="flex space-x-2 px-3" aria-label="Tabs">
+                {tabs.map((tab) => {
+                  const Icon = tab.icon
+                  return (
+                    <button
+                      key={tab.id}
+                      onClick={() => setActiveTab(tab.id)}
+                      className={classNames(
+                        'py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 transition-colors',
+                        activeTab === tab.id
+                          ? '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" />
+                      <span>{tab.name}</span>
+                    </button>
+                  )
+                })}
+              </nav>
+            </div>
+
+            {/* Tab Content */}
+            <div className="p-3">
+              {activeTab === 'overview' && (
+                <div className="space-y-3">
+                  {/* Project Info Grid */}
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                    {/* Project Details */}
+                    <div className="space-y-3">
+                      <div>
+                        <h3 className="text-base font-semibold text-gray-900 mb-2">
+                          Proje Detayları
+                        </h3>
+                        <div className="bg-gray-50 rounded-lg p-2.5 space-y-2.5">
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700 mb-1">
+                                Proje Kodu *
+                              </label>
+                              <input
+                                autoFocus
+                                type="text"
+                                value={formData.code}
+                                onChange={(e) => handleInputChange('code', e.target.value)}
+                                className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                                  errors.code
+                                    ? 'border-red-300 focus:border-red-500'
+                                    : 'border-gray-300 focus:border-blue-500'
+                                }`}
+                                placeholder="Örn: PRJ001"
+                              />
+                              {errors.projectCode && (
+                                <p className="mt-1 text-sm text-red-600">{errors.projectCode}</p>
+                              )}
+                            </div>
+
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700 mb-1">
+                                Proje Tipi *
+                              </label>
+                              <select
+                                value={formData.projectType}
+                                onChange={(e) => handleInputChange('projectType', e.target.value)}
+                                className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                                  errors.projectType
+                                    ? 'border-red-300 focus:border-red-500'
+                                    : 'border-gray-300 focus:border-blue-500'
+                                }`}
+                              >
+                                <option value="">Tip seçin</option>
+                                <option value="INTERNAL">İç Proje</option>
+                                <option value="CUSTOMER">Müşteri Projesi</option>
+                                <option value="RESEARCH">Ar-Ge Projesi</option>
+                                <option value="MAINTENANCE">Bakım Projesi</option>
+                              </select>
+                              {errors.projectType && (
+                                <p className="mt-1 text-sm text-red-600">{errors.projectType}</p>
+                              )}
+                            </div>
+                          </div>
 
-          {/* Tab Content */}
-          <div className="p-3">
-            {activeTab === "overview" && (
-              <div className="space-y-3">
-                {/* Project Info Grid */}
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-                  {/* Project Details */}
-                  <div className="space-y-3">
-                    <div>
-                      <h3 className="text-base font-semibold text-gray-900 mb-2">
-                        Proje Detayları
-                      </h3>
-                      <div className="bg-gray-50 rounded-lg p-2.5 space-y-2.5">
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
                           <div>
                             <label className="block text-sm font-medium text-gray-700 mb-1">
-                              Proje Kodu *
+                              Proje Adı *
                             </label>
                             <input
-                              autoFocus
                               type="text"
-                              value={formData.code}
-                              onChange={(e) =>
-                                handleInputChange("code", e.target.value)
-                              }
+                              value={formData.name}
+                              onChange={(e) => handleInputChange('name', e.target.value)}
                               className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                                errors.code
-                                  ? "border-red-300 focus:border-red-500"
-                                  : "border-gray-300 focus:border-blue-500"
+                                errors.name
+                                  ? 'border-red-300 focus:border-red-500'
+                                  : 'border-gray-300 focus:border-blue-500'
                               }`}
-                              placeholder="Örn: PRJ001"
+                              placeholder="Proje adı"
                             />
-                            {errors.projectCode && (
-                              <p className="mt-1 text-sm text-red-600">
-                                {errors.projectCode}
-                              </p>
+                            {errors.name && (
+                              <p className="mt-1 text-sm text-red-600">{errors.name}</p>
                             )}
                           </div>
 
+                          <div className="grid grid-cols-1 md:grid-cols-3 gap-2.5">
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700 mb-1">
+                                Durum
+                              </label>
+                              <select
+                                value={formData.status}
+                                onChange={(e) => handleInputChange('status', e.target.value)}
+                                className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                              >
+                                <option value="PLANNING">Planlama</option>
+                                <option value="ACTIVE">Aktif</option>
+                                <option value="ON_HOLD">Beklemede</option>
+                                <option value="COMPLETED">Tamamlandı</option>
+                                <option value="CANCELLED">İptal Edildi</option>
+                              </select>
+                            </div>
+
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700 mb-1">
+                                Öncelik
+                              </label>
+                              <select
+                                value={formData.priority}
+                                onChange={(e) => handleInputChange('priority', e.target.value)}
+                                className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                              >
+                                <option value="LOW">Düşük</option>
+                                <option value="NORMAL">Normal</option>
+                                <option value="HIGH">Yüksek</option>
+                                <option value="URGENT">Acil</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.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 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>
+
                           <div>
                             <label className="block text-sm font-medium text-gray-700 mb-1">
-                              Proje Tipi *
+                              Açıklama
                             </label>
-                            <select
-                              value={formData.projectType}
-                              onChange={(e) =>
-                                handleInputChange("projectType", e.target.value)
-                              }
-                              className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                                errors.projectType
-                                  ? "border-red-300 focus:border-red-500"
-                                  : "border-gray-300 focus:border-blue-500"
-                              }`}
-                            >
-                              <option value="">Tip seçin</option>
-                              <option value="INTERNAL">İç Proje</option>
-                              <option value="CUSTOMER">Müşteri Projesi</option>
-                              <option value="RESEARCH">Ar-Ge Projesi</option>
-                              <option value="MAINTENANCE">Bakım Projesi</option>
-                            </select>
-                            {errors.projectType && (
-                              <p className="mt-1 text-sm text-red-600">
-                                {errors.projectType}
-                              </p>
-                            )}
+                            <textarea
+                              value={formData.description}
+                              onChange={(e) => handleInputChange('description', e.target.value)}
+                              rows={3}
+                              className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                              placeholder="Proje açıklaması"
+                            />
                           </div>
                         </div>
+                      </div>
 
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Proje Adı *
-                          </label>
-                          <input
-                            type="text"
-                            value={formData.name}
-                            onChange={(e) =>
-                              handleInputChange("name", e.target.value)
-                            }
-                            className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                              errors.name
-                                ? "border-red-300 focus:border-red-500"
-                                : "border-gray-300 focus:border-blue-500"
-                            }`}
-                            placeholder="Proje adı"
-                          />
-                          {errors.name && (
-                            <p className="mt-1 text-sm text-red-600">
-                              {errors.name}
-                            </p>
+                      {/* Timeline */}
+                      <div>
+                        <h3 className="text-base font-semibold text-gray-900 mb-2">
+                          Zaman Çizelgesi
+                        </h3>
+                        <div className="bg-gray-50 rounded-lg p-2.5 space-y-2.5">
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700 mb-1">
+                                Başlangıç Tarihi *
+                              </label>
+                              <input
+                                type="date"
+                                value={dayjs(formData.startDate).format('YYYY-MM-DD')}
+                                onChange={(e) => handleDateChange('startDate', e.target.value)}
+                                className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                                  errors.startDate
+                                    ? 'border-red-300 focus:border-red-500'
+                                    : 'border-gray-300 focus:border-blue-500'
+                                }`}
+                              />
+                              {errors.startDate && (
+                                <p className="mt-1 text-sm text-red-600">{errors.startDate}</p>
+                              )}
+                            </div>
+
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700 mb-1">
+                                Bitiş Tarihi *
+                              </label>
+                              <input
+                                type="date"
+                                value={dayjs(formData.endDate).format('YYYY-MM-DD')}
+                                onChange={(e) => handleDateChange('endDate', e.target.value)}
+                                className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                                  errors.endDate
+                                    ? 'border-red-300 focus:border-red-500'
+                                    : 'border-gray-300 focus:border-blue-500'
+                                }`}
+                              />
+                              {errors.endDate && (
+                                <p className="mt-1 text-sm text-red-600">{errors.endDate}</p>
+                              )}
+                            </div>
+                          </div>
+
+                          {isEdit && (
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
+                              <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">
+                                  Gerçek Başlangıç Tarihi
+                                </label>
+                                <input
+                                  type="date"
+                                  value={
+                                    formData.actualStartDate
+                                      ? dayjs(formData.actualStartDate).format('YYYY-MM-DD')
+                                      : ''
+                                  }
+                                  onChange={(e) =>
+                                    handleDateChange('actualStartDate', e.target.value)
+                                  }
+                                  className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                />
+                              </div>
+
+                              <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">
+                                  Gerçek Bitiş Tarihi
+                                </label>
+                                <input
+                                  type="date"
+                                  value={
+                                    formData.actualEndDate
+                                      ? dayjs(formData.actualEndDate).format('YYYY-MM-DD')
+                                      : ''
+                                  }
+                                  onChange={(e) =>
+                                    handleDateChange('actualEndDate', e.target.value)
+                                  }
+                                  className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                />
+                              </div>
+                            </div>
                           )}
                         </div>
+                      </div>
 
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-2.5">
-                          <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-1">
-                              Durum
+                      {/* Progress Section */}
+                      {isEdit && (
+                        <div>
+                          <h3 className="text-base font-semibold text-gray-900 mb-2">
+                            İlerleme Durumu
+                          </h3>
+                          <div className="bg-gray-50 rounded-lg p-2.5">
+                            <label className="block text-sm font-medium text-gray-700 mb-2">
+                              Proje İlerleme: {formData.progress}%
                             </label>
-                            <select
-                              value={formData.status}
-                              onChange={(e) =>
-                                handleInputChange("status", e.target.value)
-                              }
-                              className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                            >
-                              <option value="PLANNING">Planlama</option>
-                              <option value="ACTIVE">Aktif</option>
-                              <option value="ON_HOLD">Beklemede</option>
-                              <option value="COMPLETED">Tamamlandı</option>
-                              <option value="CANCELLED">İptal Edildi</option>
-                            </select>
+                            <div className="relative">
+                              <input
+                                type="range"
+                                min="0"
+                                max="100"
+                                value={formData.progress}
+                                onChange={(e) =>
+                                  handleInputChange('progress', parseFloat(e.target.value) || 0)
+                                }
+                                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+                                style={{
+                                  background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${formData.progress}%, #e5e7eb ${formData.progress}%, #e5e7eb 100%)`,
+                                }}
+                              />
+                              <div className="flex justify-between text-xs text-gray-500 mt-1.5">
+                                <span>0%</span>
+                                <span>25%</span>
+                                <span>50%</span>
+                                <span>75%</span>
+                                <span>100%</span>
+                              </div>
+                            </div>
+                            <div className="mt-3 w-full bg-gray-200 rounded-full h-2.5">
+                              <div
+                                className={classNames(
+                                  'h-3 rounded-full transition-all duration-300',
+                                  getProgressColor(formData.progress),
+                                )}
+                                style={{ width: `${formData.progress}%` }}
+                              />
+                            </div>
                           </div>
+                        </div>
+                      )}
 
+                      {/* Active Status */}
+                      <div>
+                        <h3 className="text-base font-semibold text-gray-900 mb-2">
+                          Durum Ayarları
+                        </h3>
+                        <div className="bg-gray-50 rounded-lg p-2.5">
+                          <div className="flex items-center">
+                            <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">
+                              Proje Aktif
+                            </label>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Stakeholders */}
+                    <div className="space-y-3">
+                      {/* Project Manager */}
+                      <div>
+                        <h3 className="text-base font-semibold text-gray-900 mb-2">
+                          Proje Yöneticisi
+                        </h3>
+                        <div className="bg-gray-50 rounded-lg p-2.5">
+                          <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Proje Yöneticisi *
+                          </label>
+                          <select
+                            value={formData.projectManagerId}
+                            onChange={(e) => handleInputChange('projectManagerId', e.target.value)}
+                            className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                              errors.projectManagerId
+                                ? 'border-red-300 focus:border-red-500'
+                                : 'border-gray-300 focus:border-blue-500'
+                            }`}
+                          >
+                            <option value="">Proje yöneticisi seçin</option>
+                            {projectManagers.map((manager) => (
+                              <option key={manager.id} value={manager.id}>
+                                {manager.fullName}
+                              </option>
+                            ))}
+                          </select>
+                          {errors.projectManagerId && (
+                            <p className="mt-1 text-sm text-red-600">{errors.projectManagerId}</p>
+                          )}
+
+                          {formData.projectManagerId && (
+                            <div className="mt-1.5 p-2 bg-white rounded-lg border">
+                              {(() => {
+                                const manager = projectManagers.find(
+                                  (m) => m.id === formData.projectManagerId,
+                                )
+                                return manager ? (
+                                  <div className="flex items-center space-x-3">
+                                    <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+                                      <FaUser className="w-5 h-5 text-blue-600" />
+                                    </div>
+                                    <div>
+                                      <h4 className="font-medium text-gray-900">
+                                        {manager.fullName}
+                                      </h4>
+                                      <p className="text-sm text-gray-600">
+                                        {manager.jobPosition?.name || 'Proje Yöneticisi'}
+                                      </p>
+                                      <div className="flex items-center mt-1 text-sm text-gray-500">
+                                        <FaEnvelope className="w-3 h-3 mr-1" />
+                                        {manager.email}
+                                      </div>
+                                      {manager.phone && (
+                                        <div className="flex items-center mt-1 text-sm text-gray-500">
+                                          <FaPhone className="w-3 h-3 mr-1" />
+                                          {manager.phone}
+                                        </div>
+                                      )}
+                                    </div>
+                                  </div>
+                                ) : null
+                              })()}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Customer */}
+                      <div>
+                        <h3 className="text-base font-semibold text-gray-900 mb-2">Müşteri</h3>
+                        <div className="bg-gray-50 rounded-lg p-2.5">
+                          <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Müşteri
+                          </label>
+                          <select
+                            value={formData.customerId}
+                            onChange={(e) => handleInputChange('customerId', e.target.value)}
+                            className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          >
+                            <option value="">Müşteri seçin</option>
+                            {customers.map((customer) => (
+                              <option key={customer.id} value={customer.id}>
+                                {customer.name}
+                              </option>
+                            ))}
+                          </select>
+
+                          {formData.customerId && (
+                            <div className="mt-1.5 p-2 bg-white rounded-lg border">
+                              {(() => {
+                                const customer = customers.find((c) => c.id === formData.customerId)
+                                return customer ? (
+                                  <div className="flex items-center space-x-3">
+                                    <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                                      <FaBuilding className="w-5 h-5 text-green-600" />
+                                    </div>
+                                    <div>
+                                      <h4 className="font-medium text-gray-900">{customer.name}</h4>
+                                      <p className="text-sm text-gray-600">
+                                        {customer.primaryContact?.firstName}{' '}
+                                        {customer.primaryContact?.lastName}
+                                      </p>
+                                      {customer.primaryContact?.email && (
+                                        <div className="flex items-center mt-1 text-sm text-gray-500">
+                                          <FaEnvelope className="w-3 h-3 mr-1" />
+                                          {customer.primaryContact.email}
+                                        </div>
+                                      )}
+                                      {customer.primaryContact?.phone && (
+                                        <div className="flex items-center mt-1 text-sm text-gray-500">
+                                          <FaPhone className="w-3 h-3 mr-1" />
+                                          {customer.primaryContact.phone}
+                                        </div>
+                                      )}
+                                    </div>
+                                  </div>
+                                ) : null
+                              })()}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Budget Tab */}
+              {activeTab === 'budget' && (
+                <div className="space-y-3">
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                    {/* Budget Information */}
+                    <div className="space-y-3">
+                      <div>
+                        <h3 className="text-base font-semibold text-gray-900 mb-3">
+                          Temel Bütçe Bilgileri
+                        </h3>
+                        <div className="bg-gray-50 rounded-lg p-3 space-y-3">
                           <div>
                             <label className="block text-sm font-medium text-gray-700 mb-1">
-                              Öncelik
+                              Toplam Bütçe *
                             </label>
-                            <select
-                              value={formData.priority}
-                              onChange={(e) =>
-                                handleInputChange("priority", e.target.value)
-                              }
-                              className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                            >
-                              <option value="LOW">Düşük</option>
-                              <option value="NORMAL">Normal</option>
-                              <option value="HIGH">Yüksek</option>
-                              <option value="URGENT">Acil</option>
-                            </select>
+                            <div className="relative">
+                              <input
+                                type="number"
+                                min="0"
+                                step="0.01"
+                                value={formData.budget}
+                                onChange={(e) =>
+                                  handleInputChange('budget', parseFloat(e.target.value) || 0)
+                                }
+                                className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                                  errors.budget
+                                    ? 'border-red-300 focus:border-red-500'
+                                    : 'border-gray-300 focus:border-blue-500'
+                                }`}
+                                placeholder="0.00"
+                              />
+                              <span className="absolute right-3 top-2 text-gray-500 text-sm">
+                                {formData.currency}
+                              </span>
+                            </div>
+                            {errors.budget && (
+                              <p className="mt-1 text-sm text-red-600">{errors.budget}</p>
+                            )}
                           </div>
 
                           <div>
@@ -942,9 +1234,7 @@ const ProjectForm: React.FC = () => {
                             </label>
                             <select
                               value={formData.currency}
-                              onChange={(e) =>
-                                handleInputChange("currency", e.target.value)
-                              }
+                              onChange={(e) => handleInputChange('currency', e.target.value)}
                               className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                             >
                               <option value="TRY">Türk Lirası (TRY)</option>
@@ -952,944 +1242,494 @@ const ProjectForm: React.FC = () => {
                               <option value="EUR">Euro (EUR)</option>
                             </select>
                           </div>
-                        </div>
 
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Açıklama
-                          </label>
-                          <textarea
-                            value={formData.description}
-                            onChange={(e) =>
-                              handleInputChange("description", e.target.value)
-                            }
-                            rows={3}
-                            className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                            placeholder="Proje açıklaması"
-                          />
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Timeline */}
-                    <div>
-                      <h3 className="text-base font-semibold text-gray-900 mb-2">
-                        Zaman Çizelgesi
-                      </h3>
-                      <div className="bg-gray-50 rounded-lg p-2.5 space-y-2.5">
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
-                          <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-1">
-                              Başlangıç Tarihi *
-                            </label>
-                            <input
-                              type="date"
-                              value={dayjs(formData.startDate).format(
-                                "YYYY-MM-DD"
-                              )}
-                              onChange={(e) =>
-                                handleDateChange("startDate", e.target.value)
-                              }
-                              className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                                errors.startDate
-                                  ? "border-red-300 focus:border-red-500"
-                                  : "border-gray-300 focus:border-blue-500"
-                              }`}
-                            />
-                            {errors.startDate && (
-                              <p className="mt-1 text-sm text-red-600">
-                                {errors.startDate}
-                              </p>
-                            )}
-                          </div>
-
-                          <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-1">
-                              Bitiş Tarihi *
-                            </label>
-                            <input
-                              type="date"
-                              value={dayjs(formData.endDate).format(
-                                "YYYY-MM-DD"
-                              )}
-                              onChange={(e) =>
-                                handleDateChange("endDate", e.target.value)
-                              }
-                              className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                                errors.endDate
-                                  ? "border-red-300 focus:border-red-500"
-                                  : "border-gray-300 focus:border-blue-500"
-                              }`}
-                            />
-                            {errors.endDate && (
-                              <p className="mt-1 text-sm text-red-600">
-                                {errors.endDate}
-                              </p>
-                            )}
-                          </div>
-                        </div>
-
-                        {isEdit && (
-                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
+                          {isEdit && (
                             <div>
                               <label className="block text-sm font-medium text-gray-700 mb-1">
-                                Gerçek Başlangıç Tarihi
+                                Gerçekleşen Maliyet
                               </label>
-                              <input
-                                type="date"
-                                value={
-                                  formData.actualStartDate
-                                    ? dayjs(formData.actualStartDate).format(
-                                        "YYYY-MM-DD"
-                                      )
-                                    : ""
-                                }
-                                onChange={(e) =>
-                                  handleDateChange(
-                                    "actualStartDate",
-                                    e.target.value
-                                  )
-                                }
-                                className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                              />
+                              <div className="relative">
+                                <input
+                                  type="number"
+                                  min="0"
+                                  step="0.01"
+                                  value={formData.actualCost}
+                                  onChange={(e) =>
+                                    handleInputChange('actualCost', parseFloat(e.target.value) || 0)
+                                  }
+                                  className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                  placeholder="0.00"
+                                />
+                                <span className="absolute right-3 top-2 text-gray-500 text-sm">
+                                  {formData.currency}
+                                </span>
+                              </div>
                             </div>
-
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 mb-1">
-                                Gerçek Bitiş Tarihi
-                              </label>
-                              <input
-                                type="date"
-                                value={
-                                  formData.actualEndDate
-                                    ? dayjs(formData.actualEndDate).format(
-                                        "YYYY-MM-DD"
-                                      )
-                                    : ""
-                                }
-                                onChange={(e) =>
-                                  handleDateChange(
-                                    "actualEndDate",
-                                    e.target.value
-                                  )
-                                }
-                                className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                              />
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Progress Section */}
-                    {isEdit && (
-                      <div>
-                        <h3 className="text-base font-semibold text-gray-900 mb-2">
-                          İlerleme Durumu
-                        </h3>
-                        <div className="bg-gray-50 rounded-lg p-2.5">
-                          <label className="block text-sm font-medium text-gray-700 mb-2">
-                            Proje İlerleme: {formData.progress}%
-                          </label>
-                          <div className="relative">
-                            <input
-                              type="range"
-                              min="0"
-                              max="100"
-                              value={formData.progress}
-                              onChange={(e) =>
-                                handleInputChange(
-                                  "progress",
-                                  parseFloat(e.target.value) || 0
-                                )
-                              }
-                              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
-                              style={{
-                                background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${formData.progress}%, #e5e7eb ${formData.progress}%, #e5e7eb 100%)`,
-                              }}
-                            />
-                            <div className="flex justify-between text-xs text-gray-500 mt-1.5">
-                              <span>0%</span>
-                              <span>25%</span>
-                              <span>50%</span>
-                              <span>75%</span>
-                              <span>100%</span>
-                            </div>
-                          </div>
-                          <div className="mt-3 w-full bg-gray-200 rounded-full h-2.5">
-                            <div
-                              className={classNames(
-                                "h-3 rounded-full transition-all duration-300",
-                                getProgressColor(formData.progress)
-                              )}
-                              style={{ width: `${formData.progress}%` }}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Active Status */}
-                    <div>
-                      <h3 className="text-base font-semibold text-gray-900 mb-2">
-                        Durum Ayarları
-                      </h3>
-                      <div className="bg-gray-50 rounded-lg p-2.5">
-                        <div className="flex items-center">
-                          <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"
-                          >
-                            Proje Aktif
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Stakeholders */}
-                  <div className="space-y-3">
-                    {/* Project Manager */}
-                    <div>
-                      <h3 className="text-base font-semibold text-gray-900 mb-2">
-                        Proje Yöneticisi
-                      </h3>
-                      <div className="bg-gray-50 rounded-lg p-2.5">
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
-                          Proje Yöneticisi *
-                        </label>
-                        <select
-                          value={formData.projectManagerId}
-                          onChange={(e) =>
-                            handleInputChange(
-                              "projectManagerId",
-                              e.target.value
-                            )
-                          }
-                          className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                            errors.projectManagerId
-                              ? "border-red-300 focus:border-red-500"
-                              : "border-gray-300 focus:border-blue-500"
-                          }`}
-                        >
-                          <option value="">Proje yöneticisi seçin</option>
-                          {projectManagers.map((manager) => (
-                            <option key={manager.id} value={manager.id}>
-                              {manager.fullName}
-                            </option>
-                          ))}
-                        </select>
-                        {errors.projectManagerId && (
-                          <p className="mt-1 text-sm text-red-600">
-                            {errors.projectManagerId}
-                          </p>
-                        )}
-
-                        {formData.projectManagerId && (
-                          <div className="mt-1.5 p-2 bg-white rounded-lg border">
-                            {(() => {
-                              const manager = projectManagers.find(
-                                (m) => m.id === formData.projectManagerId
-                              );
-                              return manager ? (
-                                <div className="flex items-center space-x-3">
-                                  <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
-                                    <FaUser className="w-5 h-5 text-blue-600" />
-                                  </div>
-                                  <div>
-                                    <h4 className="font-medium text-gray-900">
-                                      {manager.fullName}
-                                    </h4>
-                                    <p className="text-sm text-gray-600">
-                                      {manager.jobPosition?.name ||
-                                        "Proje Yöneticisi"}
-                                    </p>
-                                    <div className="flex items-center mt-1 text-sm text-gray-500">
-                                      <FaEnvelope className="w-3 h-3 mr-1" />
-                                      {manager.email}
-                                    </div>
-                                    {manager.phone && (
-                                      <div className="flex items-center mt-1 text-sm text-gray-500">
-                                        <FaPhone className="w-3 h-3 mr-1" />
-                                        {manager.phone}
-                                      </div>
-                                    )}
-                                  </div>
-                                </div>
-                              ) : null;
-                            })()}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Customer */}
-                    <div>
-                      <h3 className="text-base font-semibold text-gray-900 mb-2">
-                        Müşteri
-                      </h3>
-                      <div className="bg-gray-50 rounded-lg p-2.5">
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
-                          Müşteri
-                        </label>
-                        <select
-                          value={formData.customerId}
-                          onChange={(e) =>
-                            handleInputChange("customerId", e.target.value)
-                          }
-                          className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        >
-                          <option value="">Müşteri seçin</option>
-                          {customers.map((customer) => (
-                            <option key={customer.id} value={customer.id}>
-                              {customer.name}
-                            </option>
-                          ))}
-                        </select>
-
-                        {formData.customerId && (
-                          <div className="mt-1.5 p-2 bg-white rounded-lg border">
-                            {(() => {
-                              const customer = customers.find(
-                                (c) => c.id === formData.customerId
-                              );
-                              return customer ? (
-                                <div className="flex items-center space-x-3">
-                                  <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
-                                    <FaBuilding className="w-5 h-5 text-green-600" />
-                                  </div>
-                                  <div>
-                                    <h4 className="font-medium text-gray-900">
-                                      {customer.name}
-                                    </h4>
-                                    <p className="text-sm text-gray-600">
-                                      {customer.primaryContact?.firstName}{" "}
-                                      {customer.primaryContact?.lastName}
-                                    </p>
-                                    {customer.primaryContact?.email && (
-                                      <div className="flex items-center mt-1 text-sm text-gray-500">
-                                        <FaEnvelope className="w-3 h-3 mr-1" />
-                                        {customer.primaryContact.email}
-                                      </div>
-                                    )}
-                                    {customer.primaryContact?.phone && (
-                                      <div className="flex items-center mt-1 text-sm text-gray-500">
-                                        <FaPhone className="w-3 h-3 mr-1" />
-                                        {customer.primaryContact.phone}
-                                      </div>
-                                    )}
-                                  </div>
-                                </div>
-                              ) : null;
-                            })()}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Budget Tab */}
-            {activeTab === "budget" && (
-              <div className="space-y-3">
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-                  {/* Budget Information */}
-                  <div className="space-y-3">
-                    <div>
-                      <h3 className="text-base font-semibold text-gray-900 mb-3">
-                        Temel Bütçe Bilgileri
-                      </h3>
-                      <div className="bg-gray-50 rounded-lg p-3 space-y-3">
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Toplam Bütçe *
-                          </label>
-                          <div className="relative">
-                            <input
-                              type="number"
-                              min="0"
-                              step="0.01"
-                              value={formData.budget}
-                              onChange={(e) =>
-                                handleInputChange(
-                                  "budget",
-                                  parseFloat(e.target.value) || 0
-                                )
-                              }
-                              className={`block w-full px-2.5 py-1.5 text-sm border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                                errors.budget
-                                  ? "border-red-300 focus:border-red-500"
-                                  : "border-gray-300 focus:border-blue-500"
-                              }`}
-                              placeholder="0.00"
-                            />
-                            <span className="absolute right-3 top-2 text-gray-500 text-sm">
-                              {formData.currency}
-                            </span>
-                          </div>
-                          {errors.budget && (
-                            <p className="mt-1 text-sm text-red-600">
-                              {errors.budget}
-                            </p>
                           )}
                         </div>
+                      </div>
+                    </div>
 
+                    {/* Budget Analysis */}
+                    {isEdit && (
+                      <div className="space-y-3">
                         <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.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 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>
-
-                        {isEdit && (
-                          <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-1">
-                              Gerçekleşen Maliyet
-                            </label>
-                            <div className="relative">
-                              <input
-                                type="number"
-                                min="0"
-                                step="0.01"
-                                value={formData.actualCost}
-                                onChange={(e) =>
-                                  handleInputChange(
-                                    "actualCost",
-                                    parseFloat(e.target.value) || 0
-                                  )
-                                }
-                                className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                placeholder="0.00"
-                              />
-                              <span className="absolute right-3 top-2 text-gray-500 text-sm">
-                                {formData.currency}
-                              </span>
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Budget Analysis */}
-                  {isEdit && (
-                    <div className="space-y-3">
-                      <div>
-                        <h3 className="text-base font-semibold text-gray-900 mb-3">
-                          Bütçe Analizi
-                        </h3>
-                        <div className="bg-white rounded-lg border border-gray-200 p-3 space-y-3">
-                          {/* Budget Usage Chart */}
-                          <div>
-                            <div className="flex items-center justify-between mb-3">
-                              <h4 className="text-sm font-medium text-gray-700">
-                                Bütçe Kullanımı
-                              </h4>
-                              <span className="text-xl font-bold text-green-600">
-                                {budgetUsagePercentage.toFixed(1)}%
-                              </span>
-                            </div>
-                            <div className="w-full bg-gray-200 rounded-full h-3 mb-1.5">
-                              <div
-                                className={classNames(
-                                  "h-3 rounded-full transition-all duration-300",
-                                  budgetUsagePercentage > 100
-                                    ? "bg-red-500"
-                                    : budgetUsagePercentage > 80
-                                    ? "bg-orange-500"
-                                    : budgetUsagePercentage > 60
-                                    ? "bg-yellow-500"
-                                    : "bg-green-500"
-                                )}
-                                style={{
-                                  width: `${Math.min(
-                                    budgetUsagePercentage,
-                                    100
-                                  )}%`,
-                                }}
-                              />
-                            </div>
-                            <div className="flex justify-between text-xs text-gray-500">
-                              <span>
-                                ₺{formData.actualCost.toLocaleString()}
-                              </span>
-                              <span>₺{formData.budget.toLocaleString()}</span>
-                            </div>
-                          </div>
-
-                          {/* Budget Statistics */}
-                          <div className="grid grid-cols-1 gap-2">
-                            <div className="bg-gray-50 rounded-lg p-2.5">
-                              <div className="flex items-center justify-between">
-                                <span className="text-sm text-gray-600">
-                                  Kalan Bütçe
+                          <h3 className="text-base font-semibold text-gray-900 mb-3">
+                            Bütçe Analizi
+                          </h3>
+                          <div className="bg-white rounded-lg border border-gray-200 p-3 space-y-3">
+                            {/* Budget Usage Chart */}
+                            <div>
+                              <div className="flex items-center justify-between mb-3">
+                                <h4 className="text-sm font-medium text-gray-700">
+                                  Bütçe Kullanımı
+                                </h4>
+                                <span className="text-xl font-bold text-green-600">
+                                  {budgetUsagePercentage.toFixed(1)}%
                                 </span>
-                                <span
+                              </div>
+                              <div className="w-full bg-gray-200 rounded-full h-3 mb-1.5">
+                                <div
                                   className={classNames(
-                                    "font-semibold",
-                                    formData.budget - formData.actualCost >= 0
-                                      ? "text-green-600"
-                                      : "text-red-600"
+                                    'h-3 rounded-full transition-all duration-300',
+                                    budgetUsagePercentage > 100
+                                      ? 'bg-red-500'
+                                      : budgetUsagePercentage > 80
+                                        ? 'bg-orange-500'
+                                        : budgetUsagePercentage > 60
+                                          ? 'bg-yellow-500'
+                                          : 'bg-green-500',
                                   )}
-                                >
-                                  ₺
-                                  {(
-                                    formData.budget - formData.actualCost
-                                  ).toLocaleString()}
-                                </span>
+                                  style={{
+                                    width: `${Math.min(budgetUsagePercentage, 100)}%`,
+                                  }}
+                                />
+                              </div>
+                              <div className="flex justify-between text-xs text-gray-500">
+                                <span>₺{formData.actualCost.toLocaleString()}</span>
+                                <span>₺{formData.budget.toLocaleString()}</span>
                               </div>
                             </div>
 
-                            <div className="bg-gray-50 rounded-lg p-2.5">
-                              <div className="flex items-center justify-between">
-                                <span className="text-sm text-gray-600">
-                                  Aşılan Tutar
-                                </span>
-                                <span
-                                  className={classNames(
-                                    "font-semibold",
-                                    formData.actualCost > formData.budget
-                                      ? "text-red-600"
-                                      : "text-gray-400"
-                                  )}
-                                >
-                                  {formData.actualCost > formData.budget
-                                    ? `₺${(
-                                        formData.actualCost - formData.budget
-                                      ).toLocaleString()}`
-                                    : "₺0"}
-                                </span>
-                              </div>
-                            </div>
-
-                            {budgetUsagePercentage > 80 && (
-                              <div className="bg-orange-50 border border-orange-200 rounded-lg p-2.5">
-                                <div className="flex items-center">
-                                  <FaExclamationCircle className="w-4 h-4 text-orange-600 mr-2" />
-                                  <span className="text-sm text-orange-800">
-                                    {budgetUsagePercentage > 100
-                                      ? "Bütçe aşıldı!"
-                                      : "Bütçe %80'in üzerinde kullanıldı!"}
+                            {/* Budget Statistics */}
+                            <div className="grid grid-cols-1 gap-2">
+                              <div className="bg-gray-50 rounded-lg p-2.5">
+                                <div className="flex items-center justify-between">
+                                  <span className="text-sm text-gray-600">Kalan Bütçe</span>
+                                  <span
+                                    className={classNames(
+                                      'font-semibold',
+                                      formData.budget - formData.actualCost >= 0
+                                        ? 'text-green-600'
+                                        : 'text-red-600',
+                                    )}
+                                  >
+                                    ₺{(formData.budget - formData.actualCost).toLocaleString()}
                                   </span>
                                 </div>
                               </div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
 
-            {/* Phases Tab */}
-            {activeTab === "phases" && (
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <h2 className="text-lg font-semibold text-gray-900">
-                    Proje Fazları
-                  </h2>
-                  <button
-                    type="button"
-                    onClick={openPhaseModal}
-                    className="px-2.5 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center"
-                  >
-                    <FaPlus className="w-4 h-4 mr-2" />
-                    Faz Ekle
-                  </button>
-                </div>
-
-                <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                  <div className="px-3 py-2 border-b border-gray-200">
-                    <h3 className="text-base font-medium text-gray-900">
-                      Faz Listesi ({phases.length})
-                    </h3>
-                  </div>
-                  <div className="divide-y divide-gray-200">
-                    {phases.length > 0 ? (
-                      phases.map((phase, index) => (
-                        <div
-                          key={phase.id || index}
-                          className="px-3 py-2 hover:bg-gray-50"
-                        >
-                          <div className="flex items-start justify-between">
-                            <div className="flex-1">
-                              <div className="flex items-center space-x-2 mb-1.5">
-                                <h4 className="text-sm font-medium text-gray-900">
-                                  {phase.name}
-                                </h4>
-                                <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                                  {phase.code}
-                                </span>
-                                <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                                  {phase.status}
-                                </span>
-                              </div>
-                              <p className="text-sm text-gray-600 mb-1.5">
-                                {phase.description}
-                              </p>
-                              <div className="flex items-center space-x-4 text-xs text-gray-500">
-                                <span>
-                                  Başlangıç:{" "}
-                                  {dayjs(phase.startDate).format("DD.MM.YYYY")}
-                                </span>
-                                <span>
-                                  Bitiş:{" "}
-                                  {dayjs(phase.endDate).format("DD.MM.YYYY")}
-                                </span>
-                                <span>
-                                  Bütçe: ₺{phase.budget.toLocaleString()}
-                                </span>
-                                <span>İlerleme: %{phase.progress}</span>
-                              </div>
-                            </div>
-                            <div className="flex items-center space-x-1 ml-3">
-                              <button
-                                onClick={() => openEditPhaseModal(phase)}
-                                className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
-                              >
-                                <FaEdit className="w-4 h-4" />
-                              </button>
-                              <button
-                                onClick={() => handleDeletePhase(phase.id)}
-                                className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
-                              >
-                                <FaTrash className="w-4 h-4" />
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      ))
-                    ) : (
-                      <div className="px-4 py-6 text-center">
-                        <FaFlag className="mx-auto h-10 w-10 text-gray-400" />
-                        <h3 className="mt-2 text-sm font-medium text-gray-900">
-                          Faz bulunamadı
-                        </h3>
-                        <p className="mt-1 text-sm text-gray-500">
-                          Bu proje için henüz faz tanımlanmamış.
-                        </p>
-                        <button
-                          onClick={openPhaseModal}
-                          className="mt-2 px-2.5 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center mx-auto"
-                        >
-                          <FaPlus className="w-4 h-4 mr-2" />
-                          İlk Fazı Ekle
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Tasks Tab */}
-            {activeTab === "tasks" && (
-              <div className="space-y-3">
-                <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                  <div className="flex items-center justify-between px-2.5 py-2 border-b border-gray-200">
-                    <h3 className="text-lg font-semibold text-gray-900">
-                      Görev Listesi ({tasks.length})
-                    </h3>
-                    <button
-                      type="button"
-                      onClick={openTaskModal}
-                      className="px-2.5 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center"
-                    >
-                      <FaPlus className="w-4 h-4 mr-2" />
-                      Görev Ekle
-                    </button>
-                  </div>
-                  <div className="divide-y divide-gray-200">
-                    {tasks.length > 0 ? (
-                      tasks.map((task, index) => (
-                        <div key={index} className="px-3 py-2 hover:bg-gray-50">
-                          <div className="flex items-start justify-between">
-                            <div className="flex-1">
-                              <div className="flex items-center space-x-2 mb-1.5">
-                                <h4 className="text-sm font-medium text-gray-900">
-                                  {task.name}
-                                </h4>
-                                <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                                  {task.taskCode}
-                                </span>
-                                <span
-                                  className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
-                                    task.status === TaskStatusEnum.Completed
-                                      ? "bg-green-100 text-green-800"
-                                      : task.status ===
-                                        TaskStatusEnum.InProgress
-                                      ? "bg-yellow-100 text-yellow-800"
-                                      : task.status ===
-                                        TaskStatusEnum.NotStarted
-                                      ? "bg-gray-100 text-gray-800"
-                                      : "bg-red-100 text-red-800"
-                                  }`}
-                                >
-                                  {task.status === TaskStatusEnum.Completed
-                                    ? "Tamamlandı"
-                                    : task.status === TaskStatusEnum.InProgress
-                                    ? "Devam Ediyor"
-                                    : task.status === TaskStatusEnum.NotStarted
-                                    ? "Başlamadı"
-                                    : task.status}
-                                </span>
-                              </div>
-                              <p className="text-sm text-gray-600 mb-1.5">
-                                {task.description}
-                              </p>
-                            </div>
-                            <div className="flex items-center space-x-1 ml-3">
-                              <button
-                                onClick={() => openEditTaskModal(task)}
-                                className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
-                              >
-                                <FaEdit className="w-4 h-4" />
-                              </button>
-                              <button
-                                onClick={() => handleDeleteTask(task.id)}
-                                className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
-                              >
-                                <FaTrash className="w-4 h-4" />
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      ))
-                    ) : (
-                      <div className="px-3 py-6 text-center">
-                        <FaTasks className="mx-auto h-10 w-10 text-gray-400" />
-                        <h3 className="mt-2 text-sm font-medium text-gray-900">
-                          Görev bulunamadı
-                        </h3>
-                        <p className="mt-1 text-sm text-gray-500">
-                          Bu proje için henüz görev tanımlanmamış.
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Documents Tab */}
-            {activeTab === "documents" && (
-              <div className="space-y-3">
-                <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                  <div className="flex items-center justify-between px-2.5 py-2 border-b border-gray-200">
-                    <h3 className="text-base font-medium text-gray-900">
-                      Belge Listesi ({documents.length})
-                    </h3>
-
-                    <button
-                      type="button"
-                      onClick={openDocumentUploadModal}
-                      className="px-2.5 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center"
-                    >
-                      <FaPlus className="w-4 h-4 mr-2" />
-                      Belge Yükle
-                    </button>
-                  </div>
-                  <div className="divide-y divide-gray-200">
-                    {documents.length > 0 ? (
-                      documents.map((doc, index) => (
-                        <div key={index} className="px-3 py-2 hover:bg-gray-50">
-                          <div className="flex items-center justify-between">
-                            <div className="flex items-center space-x-2">
-                              <div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
-                                <FaFileAlt className="w-4 h-4 text-blue-600" />
-                              </div>
-                              <div>
-                                <h4 className="text-sm font-medium text-gray-900">
-                                  {doc.documentName}
-                                </h4>
-                                <div className="flex items-center space-x-3 text-xs text-gray-500 mt-1">
-                                  <span>{doc.documentType}</span>
-                                  <span>{doc.fileSize} MB</span>
-                                  <span>
-                                    {dayjs(doc.uploadedAt).format("DD.MM.YYYY")}
+                              <div className="bg-gray-50 rounded-lg p-2.5">
+                                <div className="flex items-center justify-between">
+                                  <span className="text-sm text-gray-600">Aşılan Tutar</span>
+                                  <span
+                                    className={classNames(
+                                      'font-semibold',
+                                      formData.actualCost > formData.budget
+                                        ? 'text-red-600'
+                                        : 'text-gray-400',
+                                    )}
+                                  >
+                                    {formData.actualCost > formData.budget
+                                      ? `₺${(
+                                          formData.actualCost - formData.budget
+                                        ).toLocaleString()}`
+                                      : '₺0'}
                                   </span>
-                                  <span>Yükleyen: {doc.uploadedBy}</span>
                                 </div>
                               </div>
-                            </div>
-                            <div className="flex items-center space-x-1">
-                              <button
-                                onClick={() => openDocumentViewer(doc)}
-                                className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
-                                title="Belgeyi Görüntüle"
-                              >
-                                <FaEye className="w-4 h-4" />
-                              </button>
-                              <button
-                                onClick={() => handleDocumentDownload(doc)}
-                                className="p-1 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg"
-                                title="Belgeyi İndir"
-                              >
-                                <FaDownload className="w-4 h-4" />
-                              </button>
-                              <button
-                                onClick={() => handleDeleteDocument(doc.id)}
-                                className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
-                                title="Belgeyi Sil"
-                              >
-                                <FaTrash className="w-4 h-4" />
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      ))
-                    ) : (
-                      <div className="px-3 py-6 text-center">
-                        <FaFileAlt className="mx-auto h-10 w-10 text-gray-400" />
-                        <h3 className="mt-2 text-sm font-medium text-gray-900">
-                          Belge bulunamadı
-                        </h3>
-                        <p className="mt-1 text-sm text-gray-500">
-                          Bu proje için henüz belge yüklenmemiş.
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
 
-            {/* Risks Tab */}
-            {activeTab === "risks" && (
-              <div className="space-y-3">
-                <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                  <div className="flex items-center justify-between px-2.5 py-2 border-b border-gray-200">
-                    <h3 className="text-base font-medium text-gray-900">
-                      Risk Listesi ({risks.length})
-                    </h3>
-                    <button
-                      type="button"
-                      onClick={openRiskModal}
-                      className="px-2.5 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center"
-                    >
-                      <FaPlus className="w-4 h-4 mr-2" />
-                      Risk Ekle
-                    </button>
-                  </div>
-                  <div className="divide-y divide-gray-200">
-                    {risks.length > 0 ? (
-                      risks.map((risk, index) => (
-                        <div key={index} className="px-3 py-2 hover:bg-gray-50">
-                          <div className="flex items-start justify-between">
-                            <div className="flex-1">
-                              <div className="flex items-center space-x-2 mb-1.5">
-                                <h4 className="text-sm font-medium text-gray-900">
-                                  {risk.title}
-                                </h4>
-                                <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
-                                  {risk.riskLevel}
-                                </span>
-                                <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                                  {risk.status}
-                                </span>
-                              </div>
-                              <p className="text-sm text-gray-600 mb-1.5">
-                                {risk.description}
-                              </p>
-                              {risk.mitigationPlan && (
-                                <div className="bg-gray-50 rounded-lg p-2 mb-2">
-                                  <p className="text-xs font-medium text-gray-700 mb-1">
-                                    Önlem Planı:
-                                  </p>
-                                  <p className="text-xs text-gray-600">
-                                    {risk.mitigationPlan}
-                                  </p>
+                              {budgetUsagePercentage > 80 && (
+                                <div className="bg-orange-50 border border-orange-200 rounded-lg p-2.5">
+                                  <div className="flex items-center">
+                                    <FaExclamationCircle className="w-4 h-4 text-orange-600 mr-2" />
+                                    <span className="text-sm text-orange-800">
+                                      {budgetUsagePercentage > 100
+                                        ? 'Bütçe aşıldı!'
+                                        : "Bütçe %80'in üzerinde kullanıldı!"}
+                                    </span>
+                                  </div>
                                 </div>
                               )}
                             </div>
-                            <div className="flex items-center space-x-1 ml-3">
-                              <button
-                                onClick={() => openEditRiskModal(risk)}
-                                className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
-                                title="Risk Düzenle"
-                              >
-                                <FaEdit className="w-4 h-4" />
-                              </button>
-                              <button
-                                onClick={() => handleDeleteRisk(risk.id)}
-                                className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
-                                title="Risk Sil"
-                              >
-                                <FaTrash className="w-4 h-4" />
-                              </button>
-                            </div>
                           </div>
                         </div>
-                      ))
-                    ) : (
-                      <div className="px-3 py-6 text-center">
-                        <FaExclamationCircle className="mx-auto h-10 w-10 text-gray-400" />
-                        <h3 className="mt-2 text-sm font-medium text-gray-900">
-                          Risk bulunamadı
-                        </h3>
-                        <p className="mt-1 text-sm text-gray-500">
-                          Bu proje için henüz risk tanımlanmamış.
-                        </p>
                       </div>
                     )}
                   </div>
                 </div>
-              </div>
-            )}
-          </div>
-        </div>
+              )}
 
-        {/* Form Actions */}
-        <div className="flex items-center justify-end space-x-2 bg-white px-3 py-2 rounded-lg shadow-sm mt-3">
-          <button
-            type="button"
-            onClick={handleCancel}
-            className="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-          >
-            <FaTimes className="w-4 h-4 mr-2" />
-            İptal
-          </button>
-          <button
-            type="submit"
-            disabled={saving}
-            onClick={handleSubmit}
-            className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 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>
+              {/* Phases Tab */}
+              {activeTab === 'phases' && (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <h2 className="text-lg font-semibold text-gray-900">Proje Fazları</h2>
+                    <button
+                      type="button"
+                      onClick={openPhaseModal}
+                      className="px-2.5 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center"
+                    >
+                      <FaPlus className="w-4 h-4 mr-2" />
+                      Faz Ekle
+                    </button>
+                  </div>
+
+                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <div className="px-3 py-2 border-b border-gray-200">
+                      <h3 className="text-base font-medium text-gray-900">
+                        Faz Listesi ({phases.length})
+                      </h3>
+                    </div>
+                    <div className="divide-y divide-gray-200">
+                      {phases.length > 0 ? (
+                        phases.map((phase, index) => (
+                          <div key={phase.id || index} className="px-3 py-2 hover:bg-gray-50">
+                            <div className="flex items-start justify-between">
+                              <div className="flex-1">
+                                <div className="flex items-center space-x-2 mb-1.5">
+                                  <h4 className="text-sm font-medium text-gray-900">
+                                    {phase.name}
+                                  </h4>
+                                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                    {phase.code}
+                                  </span>
+                                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                    {phase.status}
+                                  </span>
+                                </div>
+                                <p className="text-sm text-gray-600 mb-1.5">{phase.description}</p>
+                                <div className="flex items-center space-x-4 text-xs text-gray-500">
+                                  <span>
+                                    Başlangıç: {dayjs(phase.startDate).format('DD.MM.YYYY')}
+                                  </span>
+                                  <span>Bitiş: {dayjs(phase.endDate).format('DD.MM.YYYY')}</span>
+                                  <span>Bütçe: ₺{phase.budget.toLocaleString()}</span>
+                                  <span>İlerleme: %{phase.progress}</span>
+                                </div>
+                              </div>
+                              <div className="flex items-center space-x-1 ml-3">
+                                <button
+                                  onClick={() => openEditPhaseModal(phase)}
+                                  className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
+                                >
+                                  <FaEdit className="w-4 h-4" />
+                                </button>
+                                <button
+                                  onClick={() => handleDeletePhase(phase.id)}
+                                  className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
+                                >
+                                  <FaTrash className="w-4 h-4" />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        ))
+                      ) : (
+                        <div className="px-4 py-6 text-center">
+                          <FaFlag className="mx-auto h-10 w-10 text-gray-400" />
+                          <h3 className="mt-2 text-sm font-medium text-gray-900">Faz bulunamadı</h3>
+                          <p className="mt-1 text-sm text-gray-500">
+                            Bu proje için henüz faz tanımlanmamış.
+                          </p>
+                          <button
+                            onClick={openPhaseModal}
+                            className="mt-2 px-2.5 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center mx-auto"
+                          >
+                            <FaPlus className="w-4 h-4 mr-2" />
+                            İlk Fazı Ekle
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Tasks Tab */}
+              {activeTab === 'tasks' && (
+                <div className="space-y-3">
+                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <div className="flex items-center justify-between px-2.5 py-2 border-b border-gray-200">
+                      <h3 className="text-lg font-semibold text-gray-900">
+                        Görev Listesi ({tasks.length})
+                      </h3>
+                      <button
+                        type="button"
+                        onClick={openTaskModal}
+                        className="px-2.5 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center"
+                      >
+                        <FaPlus className="w-4 h-4 mr-2" />
+                        Görev Ekle
+                      </button>
+                    </div>
+                    <div className="divide-y divide-gray-200">
+                      {tasks.length > 0 ? (
+                        tasks.map((task, index) => (
+                          <div key={index} className="px-3 py-2 hover:bg-gray-50">
+                            <div className="flex items-start justify-between">
+                              <div className="flex-1">
+                                <div className="flex items-center space-x-2 mb-1.5">
+                                  <h4 className="text-sm font-medium text-gray-900">{task.name}</h4>
+                                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                    {task.taskCode}
+                                  </span>
+                                  <span
+                                    className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
+                                      task.status === TaskStatusEnum.Completed
+                                        ? 'bg-green-100 text-green-800'
+                                        : task.status === TaskStatusEnum.InProgress
+                                          ? 'bg-yellow-100 text-yellow-800'
+                                          : task.status === TaskStatusEnum.NotStarted
+                                            ? 'bg-gray-100 text-gray-800'
+                                            : 'bg-red-100 text-red-800'
+                                    }`}
+                                  >
+                                    {task.status === TaskStatusEnum.Completed
+                                      ? 'Tamamlandı'
+                                      : task.status === TaskStatusEnum.InProgress
+                                        ? 'Devam Ediyor'
+                                        : task.status === TaskStatusEnum.NotStarted
+                                          ? 'Başlamadı'
+                                          : task.status}
+                                  </span>
+                                </div>
+                                <p className="text-sm text-gray-600 mb-1.5">{task.description}</p>
+                              </div>
+                              <div className="flex items-center space-x-1 ml-3">
+                                <button
+                                  onClick={() => openEditTaskModal(task)}
+                                  className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
+                                >
+                                  <FaEdit className="w-4 h-4" />
+                                </button>
+                                <button
+                                  onClick={() => handleDeleteTask(task.id)}
+                                  className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
+                                >
+                                  <FaTrash className="w-4 h-4" />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        ))
+                      ) : (
+                        <div className="px-3 py-6 text-center">
+                          <FaTasks className="mx-auto h-10 w-10 text-gray-400" />
+                          <h3 className="mt-2 text-sm font-medium text-gray-900">
+                            Görev bulunamadı
+                          </h3>
+                          <p className="mt-1 text-sm text-gray-500">
+                            Bu proje için henüz görev tanımlanmamış.
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Documents Tab */}
+              {activeTab === 'documents' && (
+                <div className="space-y-3">
+                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <div className="flex items-center justify-between px-2.5 py-2 border-b border-gray-200">
+                      <h3 className="text-base font-medium text-gray-900">
+                        Belge Listesi ({documents.length})
+                      </h3>
+
+                      <button
+                        type="button"
+                        onClick={openDocumentUploadModal}
+                        className="px-2.5 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center"
+                      >
+                        <FaPlus className="w-4 h-4 mr-2" />
+                        Belge Yükle
+                      </button>
+                    </div>
+                    <div className="divide-y divide-gray-200">
+                      {documents.length > 0 ? (
+                        documents.map((doc, index) => (
+                          <div key={index} className="px-3 py-2 hover:bg-gray-50">
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center space-x-2">
+                                <div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
+                                  <FaFileAlt className="w-4 h-4 text-blue-600" />
+                                </div>
+                                <div>
+                                  <h4 className="text-sm font-medium text-gray-900">
+                                    {doc.documentName}
+                                  </h4>
+                                  <div className="flex items-center space-x-3 text-xs text-gray-500 mt-1">
+                                    <span>{doc.documentType}</span>
+                                    <span>{doc.fileSize} MB</span>
+                                    <span>{dayjs(doc.uploadedAt).format('DD.MM.YYYY')}</span>
+                                    <span>Yükleyen: {doc.uploadedBy}</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div className="flex items-center space-x-1">
+                                <button
+                                  onClick={() => openDocumentViewer(doc)}
+                                  className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
+                                  title="Belgeyi Görüntüle"
+                                >
+                                  <FaEye className="w-4 h-4" />
+                                </button>
+                                <button
+                                  onClick={() => handleDocumentDownload(doc)}
+                                  className="p-1 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg"
+                                  title="Belgeyi İndir"
+                                >
+                                  <FaDownload className="w-4 h-4" />
+                                </button>
+                                <button
+                                  onClick={() => handleDeleteDocument(doc.id)}
+                                  className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
+                                  title="Belgeyi Sil"
+                                >
+                                  <FaTrash className="w-4 h-4" />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        ))
+                      ) : (
+                        <div className="px-3 py-6 text-center">
+                          <FaFileAlt className="mx-auto h-10 w-10 text-gray-400" />
+                          <h3 className="mt-2 text-sm font-medium text-gray-900">
+                            Belge bulunamadı
+                          </h3>
+                          <p className="mt-1 text-sm text-gray-500">
+                            Bu proje için henüz belge yüklenmemiş.
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Risks Tab */}
+              {activeTab === 'risks' && (
+                <div className="space-y-3">
+                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <div className="flex items-center justify-between px-2.5 py-2 border-b border-gray-200">
+                      <h3 className="text-base font-medium text-gray-900">
+                        Risk Listesi ({risks.length})
+                      </h3>
+                      <button
+                        type="button"
+                        onClick={openRiskModal}
+                        className="px-2.5 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center"
+                      >
+                        <FaPlus className="w-4 h-4 mr-2" />
+                        Risk Ekle
+                      </button>
+                    </div>
+                    <div className="divide-y divide-gray-200">
+                      {risks.length > 0 ? (
+                        risks.map((risk, index) => (
+                          <div key={index} className="px-3 py-2 hover:bg-gray-50">
+                            <div className="flex items-start justify-between">
+                              <div className="flex-1">
+                                <div className="flex items-center space-x-2 mb-1.5">
+                                  <h4 className="text-sm font-medium text-gray-900">
+                                    {risk.title}
+                                  </h4>
+                                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                                    {risk.riskLevel}
+                                  </span>
+                                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                    {risk.status}
+                                  </span>
+                                </div>
+                                <p className="text-sm text-gray-600 mb-1.5">{risk.description}</p>
+                                {risk.mitigationPlan && (
+                                  <div className="bg-gray-50 rounded-lg p-2 mb-2">
+                                    <p className="text-xs font-medium text-gray-700 mb-1">
+                                      Önlem Planı:
+                                    </p>
+                                    <p className="text-xs text-gray-600">{risk.mitigationPlan}</p>
+                                  </div>
+                                )}
+                              </div>
+                              <div className="flex items-center space-x-1 ml-3">
+                                <button
+                                  onClick={() => openEditRiskModal(risk)}
+                                  className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
+                                  title="Risk Düzenle"
+                                >
+                                  <FaEdit className="w-4 h-4" />
+                                </button>
+                                <button
+                                  onClick={() => handleDeleteRisk(risk.id)}
+                                  className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
+                                  title="Risk Sil"
+                                >
+                                  <FaTrash className="w-4 h-4" />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        ))
+                      ) : (
+                        <div className="px-3 py-6 text-center">
+                          <FaExclamationCircle className="mx-auto h-10 w-10 text-gray-400" />
+                          <h3 className="mt-2 text-sm font-medium text-gray-900">
+                            Risk bulunamadı
+                          </h3>
+                          <p className="mt-1 text-sm text-gray-500">
+                            Bu proje için henüz risk tanımlanmamış.
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Form Actions */}
+          <div className="flex items-center justify-end space-x-2 bg-white px-3 py-2 rounded-lg shadow-sm mt-3">
+            <button
+              type="button"
+              onClick={handleCancel}
+              className="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+            >
+              <FaTimes className="w-4 h-4 mr-2" />
+              İptal
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              onClick={handleSubmit}
+              className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 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>
         </div>
       </div>
 
@@ -1908,7 +1748,7 @@ const ProjectForm: React.FC = () => {
         onClose={closeTaskModal}
         task={editingTask}
         onSubmit={handleTaskSubmit}
-        mode={editingTask ? "edit" : "create"}
+        mode={editingTask ? 'edit' : 'create'}
         defaultProjectId={formData.id}
       />
 
@@ -1933,10 +1773,10 @@ const ProjectForm: React.FC = () => {
         onClose={closeRiskModal}
         risk={editingRisk}
         onSubmit={handleRiskSubmit}
-        mode={editingRisk ? "edit" : "create"}
+        mode={editingRisk ? 'edit' : 'create'}
       />
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default ProjectForm;
+export default ProjectForm
diff --git a/ui/src/views/project/components/ProjectGantt.tsx b/ui/src/views/project/components/ProjectGantt.tsx
index a6d53623..2a3b1c04 100644
--- a/ui/src/views/project/components/ProjectGantt.tsx
+++ b/ui/src/views/project/components/ProjectGantt.tsx
@@ -1,141 +1,128 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo } from 'react'
 import {
   FaUser,
   FaChevronDown,
   FaChevronRight,
   FaChevronLeft,
   FaChevronRight as FaArrowRight,
-} from "react-icons/fa";
-import { PsGanttTask } from "../../../types/ps";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockProjects } from "../../../mocks/mockProjects";
-import { mockProjectPhases } from "../../../mocks/mockProjectPhases";
-import { mockProjectTasks } from "../../../mocks/mockProjectTasks";
-import { PriorityEnum } from "../../../types/common";
-import { getPriorityColor, getProjectStatusColor } from "../../../utils/erp";
+} from 'react-icons/fa'
+import { PsGanttTask } from '../../../types/ps'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockProjects } from '../../../mocks/mockProjects'
+import { mockProjectPhases } from '../../../mocks/mockProjectPhases'
+import { mockProjectTasks } from '../../../mocks/mockProjectTasks'
+import { PriorityEnum } from '../../../types/common'
+import { getPriorityColor, getProjectStatusColor } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 interface ProjectGanttProps {
-  employeeId?: string;
+  employeeId?: string
 }
 
 const ProjectGantt: React.FC<ProjectGanttProps> = ({ employeeId }) => {
   // İlk 2 projeyi ve fazlarını varsayılan olarak açık başlat
   const getInitialExpandedItems = () => {
-    const expandedItems = new Set<string>();
+    const expandedItems = new Set<string>()
 
     // İlk 2 projeyi aç
-    const firstTwoProjects = mockProjects.slice(0, 2);
+    const firstTwoProjects = mockProjects.slice(0, 2)
     firstTwoProjects.forEach((project) => {
-      expandedItems.add(`project-${project.id}`);
+      expandedItems.add(`project-${project.id}`)
 
       // Bu projelerin fazlarını da aç
-      const projectPhases = mockProjectPhases.filter(
-        (phase) => phase.projectId === project.id
-      );
+      const projectPhases = mockProjectPhases.filter((phase) => phase.projectId === project.id)
       projectPhases.forEach((phase) => {
-        expandedItems.add(`phase-${phase.id}`);
-      });
-    });
+        expandedItems.add(`phase-${phase.id}`)
+      })
+    })
 
-    return expandedItems;
-  };
+    return expandedItems
+  }
 
-  const [expandedItems, setExpandedItems] = useState<Set<string>>(
-    getInitialExpandedItems()
-  );
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(getInitialExpandedItems())
   const [selectedEmployee, setSelectedEmployee] = useState<string>(
-    employeeId || mockEmployees[0]?.id || ""
-  );
-  const [viewMode, setViewMode] = useState<"day" | "week" | "month" | "year">(
-    "week"
-  );
-  const [currentDate, setCurrentDate] = useState<Date>(new Date());
+    employeeId || mockEmployees[0]?.id || '',
+  )
+  const [viewMode, setViewMode] = useState<'day' | 'week' | 'month' | 'year'>('week')
+  const [currentDate, setCurrentDate] = useState<Date>(new Date())
 
   // Gantt chart için tarih aralığı oluştur
   const generateDateRange = () => {
-    const startDate = new Date(currentDate);
+    const startDate = new Date(currentDate)
 
-    if (viewMode === "day") {
+    if (viewMode === 'day') {
       // Günlük görünüm: seçili günden itibaren 24 saat
-      const hours = [];
+      const hours = []
       for (let i = 0; i < 24; i++) {
-        const hour = new Date(startDate);
-        hour.setHours(i, 0, 0, 0);
-        hours.push(hour);
+        const hour = new Date(startDate)
+        hour.setHours(i, 0, 0, 0)
+        hours.push(hour)
       }
-      return hours;
-    } else if (viewMode === "week") {
+      return hours
+    } else if (viewMode === 'week') {
       // Haftalık görünüm: hafta başından itibaren 7 gün
-      const weekStart = new Date(startDate);
-      const dayOfWeek = weekStart.getDay();
-      const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // Pazartesi = 0, Pazar = 6
-      weekStart.setDate(weekStart.getDate() - daysToSubtract);
-      weekStart.setHours(0, 0, 0, 0);
+      const weekStart = new Date(startDate)
+      const dayOfWeek = weekStart.getDay()
+      const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1 // Pazartesi = 0, Pazar = 6
+      weekStart.setDate(weekStart.getDate() - daysToSubtract)
+      weekStart.setHours(0, 0, 0, 0)
 
-      const dates = [];
+      const dates = []
       for (let i = 0; i < 7; i++) {
-        const date = new Date(weekStart);
-        date.setDate(weekStart.getDate() + i);
-        dates.push(date);
+        const date = new Date(weekStart)
+        date.setDate(weekStart.getDate() + i)
+        dates.push(date)
       }
-      return dates;
-    } else if (viewMode === "month") {
+      return dates
+    } else if (viewMode === 'month') {
       // Aylık görünüm: ay başından itibaren ay sonu
-      const monthStart = new Date(
-        currentDate.getFullYear(),
-        currentDate.getMonth(),
-        1
-      );
+      const monthStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
       const daysInMonth = new Date(
         currentDate.getFullYear(),
         currentDate.getMonth() + 1,
-        0
-      ).getDate();
+        0,
+      ).getDate()
 
-      const dates = [];
+      const dates = []
       for (let i = 0; i < daysInMonth; i++) {
-        const date = new Date(monthStart);
-        date.setDate(monthStart.getDate() + i);
-        dates.push(date);
+        const date = new Date(monthStart)
+        date.setDate(monthStart.getDate() + i)
+        dates.push(date)
       }
-      return dates;
+      return dates
     } else {
       // Yıllık görünüm: yıl başından itibaren 12 ay
-      const yearStart = new Date(currentDate.getFullYear(), 0, 1);
-      const months = [];
+      const yearStart = new Date(currentDate.getFullYear(), 0, 1)
+      const months = []
       for (let i = 0; i < 12; i++) {
-        const month = new Date(yearStart);
-        month.setMonth(i);
-        months.push(month);
+        const month = new Date(yearStart)
+        month.setMonth(i)
+        months.push(month)
       }
-      return months;
+      return months
     }
-  };
+  }
 
-  const dateRange = generateDateRange();
+  const dateRange = generateDateRange()
 
   // Seçili çalışana göre görevleri filtrele
   const filteredTasks = useMemo(() => {
     // Mock verilerden GanttTask formatına dönüştür
     const createGanttTasks = (): PsGanttTask[] => {
-      const ganttTasks: PsGanttTask[] = [];
+      const ganttTasks: PsGanttTask[] = []
 
       mockProjects.forEach((project) => {
-        const projectPhases = mockProjectPhases.filter(
-          (phase) => phase.projectId === project.id
-        );
+        const projectPhases = mockProjectPhases.filter((phase) => phase.projectId === project.id)
 
-        const projectChildren: PsGanttTask[] = [];
+        const projectChildren: PsGanttTask[] = []
 
         projectPhases.forEach((phase) => {
-          const phaseTasks = mockProjectTasks.filter(
-            (task) => task.phaseId === phase.id
-          );
+          const phaseTasks = mockProjectTasks.filter((task) => task.phaseId === phase.id)
 
           const phaseChildren: PsGanttTask[] = phaseTasks.map((task) => ({
             id: `task-${task.id}`,
             name: task.name,
-            type: "task" as const,
+            type: 'task' as const,
             startDate: task.startDate,
             endDate: task.endDate,
             progress: task.progress,
@@ -146,13 +133,13 @@ const ProjectGantt: React.FC<ProjectGanttProps> = ({ employeeId }) => {
             children: [],
             estimatedHours: task.estimatedHours,
             hoursWorked: task.actualHours,
-          }));
+          }))
 
           if (phaseChildren.length > 0) {
             projectChildren.push({
               id: `phase-${phase.id}`,
               name: phase.name,
-              type: "phase" as const,
+              type: 'phase' as const,
               startDate: phase.startDate,
               endDate: phase.endDate,
               progress: phase.progress,
@@ -160,15 +147,15 @@ const ProjectGantt: React.FC<ProjectGanttProps> = ({ employeeId }) => {
               priority: PriorityEnum.Normal,
               level: 1,
               children: phaseChildren,
-            });
+            })
           }
-        });
+        })
 
         if (projectChildren.length > 0) {
           ganttTasks.push({
             id: `project-${project.id}`,
             name: project.name,
-            type: "project" as const,
+            type: 'project' as const,
             startDate: project.startDate,
             endDate: project.endDate,
             progress: project.progress,
@@ -176,265 +163,254 @@ const ProjectGantt: React.FC<ProjectGanttProps> = ({ employeeId }) => {
             priority: project.priority,
             level: 0,
             children: projectChildren,
-          });
+          })
         }
-      });
+      })
 
-      return ganttTasks;
-    };
+      return ganttTasks
+    }
 
     const filterTasksByEmployee = (tasks: PsGanttTask[]): PsGanttTask[] => {
       return tasks
         .map((task) => {
-          if (task.type === "task" && task.assignee?.id !== selectedEmployee) {
-            return null;
+          if (task.type === 'task' && task.assignee?.id !== selectedEmployee) {
+            return null
           }
 
           if (task.children) {
-            const filteredChildren = filterTasksByEmployee(
-              task.children
-            ).filter(Boolean) as PsGanttTask[];
+            const filteredChildren = filterTasksByEmployee(task.children).filter(
+              Boolean,
+            ) as PsGanttTask[]
             if (filteredChildren.length > 0) {
-              return { ...task, children: filteredChildren };
-            } else if (task.type === "task") {
-              return task;
+              return { ...task, children: filteredChildren }
+            } else if (task.type === 'task') {
+              return task
             }
-            return null;
+            return null
           }
 
-          return task;
+          return task
         })
-        .filter(Boolean) as PsGanttTask[];
-    };
+        .filter(Boolean) as PsGanttTask[]
+    }
 
-    const allGanttTasks = createGanttTasks();
-    return filterTasksByEmployee(allGanttTasks);
-  }, [selectedEmployee]);
+    const allGanttTasks = createGanttTasks()
+    return filterTasksByEmployee(allGanttTasks)
+  }, [selectedEmployee])
 
   const toggleExpand = (id: string) => {
-    const newExpanded = new Set(expandedItems);
+    const newExpanded = new Set(expandedItems)
     if (newExpanded.has(id)) {
-      newExpanded.delete(id);
+      newExpanded.delete(id)
     } else {
-      newExpanded.add(id);
+      newExpanded.add(id)
     }
-    setExpandedItems(newExpanded);
-  };
+    setExpandedItems(newExpanded)
+  }
 
   // Navigasyon fonksiyonları
   const navigatePrevious = () => {
-    const newDate = new Date(currentDate);
-    if (viewMode === "day") {
-      newDate.setDate(newDate.getDate() - 1);
-    } else if (viewMode === "week") {
-      newDate.setDate(newDate.getDate() - 7);
-    } else if (viewMode === "month") {
-      newDate.setMonth(newDate.getMonth() - 1);
+    const newDate = new Date(currentDate)
+    if (viewMode === 'day') {
+      newDate.setDate(newDate.getDate() - 1)
+    } else if (viewMode === 'week') {
+      newDate.setDate(newDate.getDate() - 7)
+    } else if (viewMode === 'month') {
+      newDate.setMonth(newDate.getMonth() - 1)
     } else {
-      newDate.setFullYear(newDate.getFullYear() - 1);
+      newDate.setFullYear(newDate.getFullYear() - 1)
     }
-    setCurrentDate(newDate);
-  };
+    setCurrentDate(newDate)
+  }
 
   const navigateNext = () => {
-    const newDate = new Date(currentDate);
-    if (viewMode === "day") {
-      newDate.setDate(newDate.getDate() + 1);
-    } else if (viewMode === "week") {
-      newDate.setDate(newDate.getDate() + 7);
-    } else if (viewMode === "month") {
-      newDate.setMonth(newDate.getMonth() + 1);
+    const newDate = new Date(currentDate)
+    if (viewMode === 'day') {
+      newDate.setDate(newDate.getDate() + 1)
+    } else if (viewMode === 'week') {
+      newDate.setDate(newDate.getDate() + 7)
+    } else if (viewMode === 'month') {
+      newDate.setMonth(newDate.getMonth() + 1)
     } else {
-      newDate.setFullYear(newDate.getFullYear() + 1);
+      newDate.setFullYear(newDate.getFullYear() + 1)
     }
-    setCurrentDate(newDate);
-  };
+    setCurrentDate(newDate)
+  }
 
   const navigateToday = () => {
-    setCurrentDate(new Date());
-  };
+    setCurrentDate(new Date())
+  }
 
   // Mevcut tarih bilgisi gösterimi
   const getCurrentDateInfo = () => {
-    if (viewMode === "day") {
-      return currentDate.toLocaleDateString("tr-TR", {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-      });
-    } else if (viewMode === "week") {
-      const weekStart = new Date(currentDate);
-      const dayOfWeek = weekStart.getDay();
-      const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-      weekStart.setDate(weekStart.getDate() - daysToSubtract);
+    if (viewMode === 'day') {
+      return currentDate.toLocaleDateString('tr-TR', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    } else if (viewMode === 'week') {
+      const weekStart = new Date(currentDate)
+      const dayOfWeek = weekStart.getDay()
+      const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1
+      weekStart.setDate(weekStart.getDate() - daysToSubtract)
 
-      const weekEnd = new Date(weekStart);
-      weekEnd.setDate(weekStart.getDate() + 6);
+      const weekEnd = new Date(weekStart)
+      weekEnd.setDate(weekStart.getDate() + 6)
 
-      return `${weekStart.toLocaleDateString("tr-TR", {
-        day: "numeric",
-        month: "short",
-      })} - ${weekEnd.toLocaleDateString("tr-TR", {
-        day: "numeric",
-        month: "short",
-        year: "numeric",
-      })}`;
-    } else if (viewMode === "month") {
-      return currentDate.toLocaleDateString("tr-TR", {
-        year: "numeric",
-        month: "long",
-      });
+      return `${weekStart.toLocaleDateString('tr-TR', {
+        day: 'numeric',
+        month: 'short',
+      })} - ${weekEnd.toLocaleDateString('tr-TR', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      })}`
+    } else if (viewMode === 'month') {
+      return currentDate.toLocaleDateString('tr-TR', {
+        year: 'numeric',
+        month: 'long',
+      })
     } else {
-      return currentDate.toLocaleDateString("tr-TR", {
-        year: "numeric",
-      });
+      return currentDate.toLocaleDateString('tr-TR', {
+        year: 'numeric',
+      })
     }
-  };
+  }
 
   const calculateTaskPosition = (startDate: Date, endDate: Date) => {
-    const chartStart = dateRange[0];
-    const chartEnd = dateRange[dateRange.length - 1];
-    const taskStart = new Date(startDate);
-    const taskEnd = new Date(endDate);
+    const chartStart = dateRange[0]
+    const chartEnd = dateRange[dateRange.length - 1]
+    const taskStart = new Date(startDate)
+    const taskEnd = new Date(endDate)
 
-    if (viewMode === "day") {
+    if (viewMode === 'day') {
       // Günlük görünüm: saatlik hesaplama
-      const dayStart = new Date(chartStart);
-      dayStart.setHours(0, 0, 0, 0);
-      const dayEnd = new Date(chartStart);
-      dayEnd.setHours(23, 59, 59, 999);
+      const dayStart = new Date(chartStart)
+      dayStart.setHours(0, 0, 0, 0)
+      const dayEnd = new Date(chartStart)
+      dayEnd.setHours(23, 59, 59, 999)
 
       // Eğer görev bu gün içinde değilse, görünürde olup olmadığını kontrol et
       if (taskEnd < dayStart || taskStart > dayEnd) {
-        return { left: "100%", width: "0%", isVisible: false };
+        return { left: '100%', width: '0%', isVisible: false }
       }
 
       // Görev başlangıcını hesapla
-      let startHour = 0;
+      let startHour = 0
       if (taskStart > dayStart) {
-        startHour = taskStart.getHours() + taskStart.getMinutes() / 60;
+        startHour = taskStart.getHours() + taskStart.getMinutes() / 60
       }
 
       // Görev bitişini hesapla
-      let endHour = 24;
+      let endHour = 24
       if (taskEnd < dayEnd) {
-        endHour = taskEnd.getHours() + taskEnd.getMinutes() / 60;
+        endHour = taskEnd.getHours() + taskEnd.getMinutes() / 60
       }
 
-      const left = (startHour / 24) * 100;
-      const width = Math.max(1, ((endHour - startHour) / 24) * 100);
+      const left = (startHour / 24) * 100
+      const width = Math.max(1, ((endHour - startHour) / 24) * 100)
 
-      return { left: `${left}%`, width: `${width}%`, isVisible: true };
-    } else if (viewMode === "week") {
+      return { left: `${left}%`, width: `${width}%`, isVisible: true }
+    } else if (viewMode === 'week') {
       // Haftalık görünüm: günlük hesaplama
-      const weekStart = new Date(chartStart);
-      const weekEnd = new Date(chartEnd);
-      weekEnd.setHours(23, 59, 59, 999);
+      const weekStart = new Date(chartStart)
+      const weekEnd = new Date(chartEnd)
+      weekEnd.setHours(23, 59, 59, 999)
 
       // Görev hafta dışındaysa gizle
       if (taskEnd < weekStart || taskStart > weekEnd) {
-        return { left: "100%", width: "0%", isVisible: false };
+        return { left: '100%', width: '0%', isVisible: false }
       }
 
       // Başlangıç gününü hesapla
-      let startDay = 0;
+      let startDay = 0
       if (taskStart > weekStart) {
-        startDay = Math.floor(
-          (taskStart.getTime() - weekStart.getTime()) / (1000 * 60 * 60 * 24)
-        );
+        startDay = Math.floor((taskStart.getTime() - weekStart.getTime()) / (1000 * 60 * 60 * 24))
       }
 
       // Bitiş gününü hesapla
-      let endDay = 7;
+      let endDay = 7
       if (taskEnd < weekEnd) {
-        endDay = Math.ceil(
-          (taskEnd.getTime() - weekStart.getTime()) / (1000 * 60 * 60 * 24)
-        );
+        endDay = Math.ceil((taskEnd.getTime() - weekStart.getTime()) / (1000 * 60 * 60 * 24))
       }
 
-      const left = (startDay / 7) * 100;
-      const width = Math.max(1, ((endDay - startDay) / 7) * 100);
+      const left = (startDay / 7) * 100
+      const width = Math.max(1, ((endDay - startDay) / 7) * 100)
 
-      return { left: `${left}%`, width: `${width}%`, isVisible: true };
-    } else if (viewMode === "month") {
+      return { left: `${left}%`, width: `${width}%`, isVisible: true }
+    } else if (viewMode === 'month') {
       // Aylık görünüm: günlük hesaplama
-      const monthStart = new Date(chartStart);
-      const monthEnd = new Date(chartEnd);
-      monthEnd.setHours(23, 59, 59, 999);
+      const monthStart = new Date(chartStart)
+      const monthEnd = new Date(chartEnd)
+      monthEnd.setHours(23, 59, 59, 999)
 
       // Görev ay dışındaysa gizle
       if (taskEnd < monthStart || taskStart > monthEnd) {
-        return { left: "100%", width: "0%", isVisible: false };
+        return { left: '100%', width: '0%', isVisible: false }
       }
 
-      const daysInMonth = dateRange.length;
+      const daysInMonth = dateRange.length
 
       // Başlangıç gününü hesapla
-      let startDay = 0;
+      let startDay = 0
       if (taskStart > monthStart) {
-        startDay = Math.floor(
-          (taskStart.getTime() - monthStart.getTime()) / (1000 * 60 * 60 * 24)
-        );
+        startDay = Math.floor((taskStart.getTime() - monthStart.getTime()) / (1000 * 60 * 60 * 24))
       }
 
       // Bitiş gününü hesapla
-      let endDay = daysInMonth;
+      let endDay = daysInMonth
       if (taskEnd < monthEnd) {
-        endDay = Math.ceil(
-          (taskEnd.getTime() - monthStart.getTime()) / (1000 * 60 * 60 * 24)
-        );
+        endDay = Math.ceil((taskEnd.getTime() - monthStart.getTime()) / (1000 * 60 * 60 * 24))
       }
 
-      const left = (startDay / daysInMonth) * 100;
-      const width = Math.max(1, ((endDay - startDay) / daysInMonth) * 100);
+      const left = (startDay / daysInMonth) * 100
+      const width = Math.max(1, ((endDay - startDay) / daysInMonth) * 100)
 
-      return { left: `${left}%`, width: `${width}%`, isVisible: true };
+      return { left: `${left}%`, width: `${width}%`, isVisible: true }
     } else {
       // Yıllık görünüm: aylık hesaplama
-      const yearStart = new Date(chartStart);
-      const yearEnd = new Date(chartEnd);
-      yearEnd.setMonth(11, 31);
-      yearEnd.setHours(23, 59, 59, 999);
+      const yearStart = new Date(chartStart)
+      const yearEnd = new Date(chartEnd)
+      yearEnd.setMonth(11, 31)
+      yearEnd.setHours(23, 59, 59, 999)
 
       // Görev yıl dışındaysa gizle
       if (taskEnd < yearStart || taskStart > yearEnd) {
-        return { left: "100%", width: "0%", isVisible: false };
+        return { left: '100%', width: '0%', isVisible: false }
       }
 
       // Başlangıç ayını hesapla
-      let startMonth = 0;
+      let startMonth = 0
       if (taskStart > yearStart) {
-        startMonth = taskStart.getMonth();
+        startMonth = taskStart.getMonth()
       }
 
       // Bitiş ayını hesapla
-      let endMonth = 12;
+      let endMonth = 12
       if (taskEnd < yearEnd) {
-        endMonth = taskEnd.getMonth() + 1;
+        endMonth = taskEnd.getMonth() + 1
       }
 
-      const left = (startMonth / 12) * 100;
-      const width = Math.max(1, ((endMonth - startMonth) / 12) * 100);
+      const left = (startMonth / 12) * 100
+      const width = Math.max(1, ((endMonth - startMonth) / 12) * 100)
 
-      return { left: `${left}%`, width: `${width}%`, isVisible: true };
+      return { left: `${left}%`, width: `${width}%`, isVisible: true }
     }
-  };
+  }
 
   const renderTask = (task: PsGanttTask): React.ReactNode => {
-    const hasChildren = task.children && task.children.length > 0;
-    const isExpanded = expandedItems.has(task.id);
-    const indent = task.level * 20;
+    const hasChildren = task.children && task.children.length > 0
+    const isExpanded = expandedItems.has(task.id)
+    const indent = task.level * 20
 
     return (
       <React.Fragment key={task.id}>
         <div className="flex items-center border-b border-gray-100 hover:bg-gray-50 min-h-[32px] sm:min-h-[36px]">
           {/* Task Info */}
           <div className="w-1/3 sm:w-1/4 p-0.5 border-r border-gray-200">
-            <div
-              className="flex items-center"
-              style={{ paddingLeft: `${Math.min(indent, 40)}px` }}
-            >
+            <div className="flex items-center" style={{ paddingLeft: `${Math.min(indent, 40)}px` }}>
               {hasChildren && (
                 <button
                   onClick={() => toggleExpand(task.id)}
@@ -453,11 +429,11 @@ const ProjectGantt: React.FC<ProjectGanttProps> = ({ employeeId }) => {
                 <div className="flex items-center gap-1">
                   <span
                     className={`font-medium text-xs sm:text-sm truncate ${
-                      task.type === "project"
-                        ? "text-blue-900 font-semibold"
-                        : task.type === "phase"
-                        ? "text-blue-700"
-                        : "text-gray-900"
+                      task.type === 'project'
+                        ? 'text-blue-900 font-semibold'
+                        : task.type === 'phase'
+                          ? 'text-blue-700'
+                          : 'text-gray-900'
                     }`}
                     title={task.name}
                   >
@@ -465,14 +441,14 @@ const ProjectGantt: React.FC<ProjectGanttProps> = ({ employeeId }) => {
                   </span>
                   <span
                     className={`px-1 py-0.5 text-xs border rounded flex-shrink-0 hidden sm:inline ${getPriorityColor(
-                      task.priority
+                      task.priority,
                     )}`}
                   >
                     {task.priority}
                   </span>
                 </div>
 
-                {task.type === "task" && task.assignee && (
+                {task.type === 'task' && task.assignee && (
                   <div className="flex items-center gap-1 mt-0.5 text-xs text-gray-600">
                     <FaUser className="h-2 w-2 sm:h-2.5 sm:w-2.5 flex-shrink-0" />
                     <span className="truncate text-xs">
@@ -487,8 +463,8 @@ const ProjectGantt: React.FC<ProjectGanttProps> = ({ employeeId }) => {
                 )}
 
                 <div className="mt-1 text-xs text-gray-500 truncate hidden sm:block">
-                  {task.startDate.toLocaleDateString("tr-TR")} -{" "}
-                  {task.endDate.toLocaleDateString("tr-TR")}
+                  {task.startDate.toLocaleDateString('tr-TR')} -{' '}
+                  {task.endDate.toLocaleDateString('tr-TR')}
                 </div>
               </div>
             </div>
@@ -498,16 +474,13 @@ const ProjectGantt: React.FC<ProjectGanttProps> = ({ employeeId }) => {
           <div className="w-2/3 sm:w-3/4 p-0.5 relative">
             <div className="relative h-5 sm:h-7 bg-gray-200 rounded">
               {(() => {
-                const position = calculateTaskPosition(
-                  task.startDate,
-                  task.endDate
-                );
+                const position = calculateTaskPosition(task.startDate, task.endDate)
 
-                if (task.type === "task" && position.isVisible) {
+                if (task.type === 'task' && position.isVisible) {
                   return (
                     <div
                       className={`absolute h-4 sm:h-5 mt-0.5 rounded-sm ${getProjectStatusColor(
-                        task.status
+                        task.status,
                       )} shadow-md group cursor-pointer border border-white border-opacity-20`}
                       style={{ left: position.left, width: position.width }}
                       title={`${task.name} - ${task.progress}% tamamlandı`}
@@ -528,24 +501,16 @@ const ProjectGantt: React.FC<ProjectGanttProps> = ({ employeeId }) => {
                       {/* Tooltip */}
                       <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded py-2 px-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-20 hidden sm:block">
                         <div className="font-semibold">{task.name}</div>
-                        <div className="mt-1">
-                          İlerleme: {task.progress}% tamamlandı
-                        </div>
-                        <div>
-                          Planlanan Başlangıç:{" "}
-                          {task.startDate.toLocaleDateString("tr-TR")}
-                        </div>
-                        <div>
-                          Planlanan Bitiş:{" "}
-                          {task.endDate.toLocaleDateString("tr-TR")}
-                        </div>
+                        <div className="mt-1">İlerleme: {task.progress}% tamamlandı</div>
+                        <div>Planlanan Başlangıç: {task.startDate.toLocaleDateString('tr-TR')}</div>
+                        <div>Planlanan Bitiş: {task.endDate.toLocaleDateString('tr-TR')}</div>
                         <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-800"></div>
                       </div>
                     </div>
-                  );
+                  )
                 }
 
-                if (task.type !== "task" && position.isVisible) {
+                if (task.type !== 'task' && position.isVisible) {
                   return (
                     <div
                       className="absolute h-2 sm:h-2.5 mt-1.5 sm:mt-2 bg-gradient-to-r from-gray-400 to-gray-600 rounded-full group cursor-pointer shadow-sm border border-white border-opacity-30"
@@ -555,159 +520,142 @@ const ProjectGantt: React.FC<ProjectGanttProps> = ({ employeeId }) => {
                       {/* Tooltip for non-task items - no progress */}
                       <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded py-2 px-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-20 hidden sm:block">
                         <div className="font-semibold">{task.name}</div>
-                        <div>
-                          Planlanan Başlangıç:{" "}
-                          {task.startDate.toLocaleDateString("tr-TR")}
-                        </div>
-                        <div>
-                          Planlanan Bitiş:{" "}
-                          {task.endDate.toLocaleDateString("tr-TR")}
-                        </div>
+                        <div>Planlanan Başlangıç: {task.startDate.toLocaleDateString('tr-TR')}</div>
+                        <div>Planlanan Bitiş: {task.endDate.toLocaleDateString('tr-TR')}</div>
                         <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-800"></div>
                       </div>
                     </div>
-                  );
+                  )
                 }
 
-                return null;
+                return null
               })()}
             </div>
           </div>
         </div>
 
         {/* Render children if expanded */}
-        {hasChildren &&
-          isExpanded &&
-          task.children?.map((child) => renderTask(child))}
+        {hasChildren && isExpanded && task.children?.map((child) => renderTask(child))}
       </React.Fragment>
-    );
-  };
+    )
+  }
 
   return (
-    <>
-      <div className="space-y-3 py-2">
+    <Container>
+      <div className="space-y-2">
         <div className="flex items-center gap-3">
           <div>
-            <h2 className="text-xl font-bold text-gray-900">
-              İş Yükü ve Proje Takibi
-            </h2>
-            <p className="text-sm sm:text-base text-gray-600 mt-1">
+            <h2 className="text-xl font-bold text-gray-900">İş Yükü ve Proje Takibi</h2>
+            <p className="text-gray-600 mt-1">
               Tüm görevlerinizi merkezi bir noktadan yönetin.
             </p>
           </div>
         </div>
-      </div>
 
-      <div className="bg-white rounded-lg shadow-sm border h-full flex flex-col">
-        {/* Header */}
-        <div className="p-1.5 sm:p-2 border-b border-gray-200 flex-shrink-0">
-          {/* Navigation and Date Info */}
-          <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
-            {/* Navigation Controls */}
-            <div className="flex items-center justify-center gap-1 sm:gap-2">
-              <button
-                onClick={navigatePrevious}
-                className="p-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
-              >
-                <FaChevronLeft className="h-3.5 w-3.5" />
-              </button>
-              <div className="text-xs sm:text-sm font-semibold text-gray-900 min-w-[150px] sm:min-w-[170px] text-center">
-                {getCurrentDateInfo()}
-              </div>
-              <button
-                onClick={navigateNext}
-                className="p-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
-              >
-                <FaArrowRight className="h-3.5 w-3.5" />
-              </button>
-              <button
-                onClick={navigateToday}
-                className="px-1.5 py-0.5 text-xs sm:text-sm bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors"
-              >
-                Bugün
-              </button>
-            </div>
-
-            {/* Filters */}
-            <div className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:gap-2">
-              <select
-                value={selectedEmployee}
-                onChange={(e) => setSelectedEmployee(e.target.value)}
-                className="px-2 py-1.5 sm:px-3 sm:py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto"
-              >
-                <option value="">Tüm Çalışanlar</option>
-                {mockEmployees.map((emp) => (
-                  <option key={emp.id} value={emp.id}>
-                    {emp.firstName} {emp.lastName}
-                  </option>
-                ))}
-              </select>
-
-              <select
-                value={viewMode}
-                onChange={(e) =>
-                  setViewMode(
-                    e.target.value as "day" | "week" | "month" | "year"
-                  )
-                }
-                className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto"
-              >
-                <option value="day">Günlük</option>
-                <option value="week">Haftalık</option>
-                <option value="month">Aylık</option>
-                <option value="year">Yıllık</option>
-              </select>
-            </div>
-          </div>
-        </div>
-
-        {/* Timeline Header */}
-        <div className="flex border-b border-gray-200 flex-shrink-0">
-          <div className="w-1/3 sm:w-1/4 p-1.5 border-r border-gray-200 bg-gray-50 font-semibold text-xs sm:text-sm">
-            Proje / Görev
-          </div>
-          <div className="w-2/3 sm:w-3/4 p-1.5 bg-gray-50">
-            <div className="flex justify-between text-xs font-semibold">
-              {dateRange.map((date) => (
-                <div
-                  key={date.toISOString()}
-                  className="text-center min-w-0 flex-1"
+        <div className="bg-white rounded-lg shadow-sm border h-full flex flex-col">
+          {/* Header */}
+          <div className="p-1.5 sm:p-2 border-b border-gray-200 flex-shrink-0">
+            {/* Navigation and Date Info */}
+            <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+              {/* Navigation Controls */}
+              <div className="flex items-center justify-center gap-1 sm:gap-2">
+                <button
+                  onClick={navigatePrevious}
+                  className="p-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                 >
-                  <div className="truncate">
-                    {viewMode === "day"
-                      ? date.toLocaleTimeString("tr-TR", {
-                          hour: "2-digit",
-                          minute: "2-digit",
-                        })
-                      : viewMode === "week"
-                      ? date.toLocaleDateString("tr-TR", { day: "2-digit" })
-                      : viewMode === "year"
-                      ? date.toLocaleDateString("tr-TR", { month: "short" })
-                      : date.toLocaleDateString("tr-TR", { day: "2-digit" })}
-                  </div>
-                  {viewMode !== "day" && viewMode !== "year" && (
-                    <div className="text-xs text-gray-500 hidden sm:block">
-                      {date.toLocaleDateString("tr-TR", { weekday: "short" })}
-                    </div>
-                  )}
-                  {viewMode === "year" && (
-                    <div className="text-xs text-gray-500 hidden sm:block">
-                      {date.getFullYear()}
-                    </div>
-                  )}
+                  <FaChevronLeft className="h-3.5 w-3.5" />
+                </button>
+                <div className="text-xs sm:text-sm font-semibold text-gray-900 min-w-[150px] sm:min-w-[170px] text-center">
+                  {getCurrentDateInfo()}
                 </div>
-              ))}
+                <button
+                  onClick={navigateNext}
+                  className="p-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                >
+                  <FaArrowRight className="h-3.5 w-3.5" />
+                </button>
+                <button
+                  onClick={navigateToday}
+                  className="px-1.5 py-0.5 text-xs sm:text-sm bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors"
+                >
+                  Bugün
+                </button>
+              </div>
+
+              {/* Filters */}
+              <div className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:gap-2">
+                <select
+                  value={selectedEmployee}
+                  onChange={(e) => setSelectedEmployee(e.target.value)}
+                  className="px-2 py-1.5 sm:px-3 sm:py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto"
+                >
+                  <option value="">Tüm Çalışanlar</option>
+                  {mockEmployees.map((emp) => (
+                    <option key={emp.id} value={emp.id}>
+                      {emp.firstName} {emp.lastName}
+                    </option>
+                  ))}
+                </select>
+
+                <select
+                  value={viewMode}
+                  onChange={(e) => setViewMode(e.target.value as 'day' | 'week' | 'month' | 'year')}
+                  className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto"
+                >
+                  <option value="day">Günlük</option>
+                  <option value="week">Haftalık</option>
+                  <option value="month">Aylık</option>
+                  <option value="year">Yıllık</option>
+                </select>
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Tasks */}
-        <div className="flex-1 overflow-auto">
-          {filteredTasks.map((task) => renderTask(task))}
+          {/* Timeline Header */}
+          <div className="flex border-b border-gray-200 flex-shrink-0">
+            <div className="w-1/3 sm:w-1/4 p-1.5 border-r border-gray-200 bg-gray-50 font-semibold text-xs sm:text-sm">
+              Proje / Görev
+            </div>
+            <div className="w-2/3 sm:w-3/4 p-1.5 bg-gray-50">
+              <div className="flex justify-between text-xs font-semibold">
+                {dateRange.map((date) => (
+                  <div key={date.toISOString()} className="text-center min-w-0 flex-1">
+                    <div className="truncate">
+                      {viewMode === 'day'
+                        ? date.toLocaleTimeString('tr-TR', {
+                            hour: '2-digit',
+                            minute: '2-digit',
+                          })
+                        : viewMode === 'week'
+                          ? date.toLocaleDateString('tr-TR', { day: '2-digit' })
+                          : viewMode === 'year'
+                            ? date.toLocaleDateString('tr-TR', { month: 'short' })
+                            : date.toLocaleDateString('tr-TR', { day: '2-digit' })}
+                    </div>
+                    {viewMode !== 'day' && viewMode !== 'year' && (
+                      <div className="text-xs text-gray-500 hidden sm:block">
+                        {date.toLocaleDateString('tr-TR', { weekday: 'short' })}
+                      </div>
+                    )}
+                    {viewMode === 'year' && (
+                      <div className="text-xs text-gray-500 hidden sm:block">
+                        {date.getFullYear()}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Tasks */}
+          <div className="flex-1 overflow-auto">
+            {filteredTasks.map((task) => renderTask(task))}
+          </div>
         </div>
       </div>
-    </>
-  );
-};
+    </Container>
+  )
+}
 
-export default ProjectGantt;
+export default ProjectGantt
diff --git a/ui/src/views/project/components/ProjectList.tsx b/ui/src/views/project/components/ProjectList.tsx
index cfb12185..2e7781b4 100644
--- a/ui/src/views/project/components/ProjectList.tsx
+++ b/ui/src/views/project/components/ProjectList.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 {
   FaFolder,
   FaPlus,
@@ -18,15 +18,15 @@ import {
   FaList,
   FaFlag,
   FaTasks,
-} from "react-icons/fa";
-import classNames from "classnames";
-import { ProjectStatusEnum, PsProject } from "../../../types/ps";
-import dayjs from "dayjs";
-import { mockProjects } from "../../../mocks/mockProjects";
-import PhaseViewModal from "./PhaseViewModal";
-import TaskViewModal from "./TaskViewModal";
-import Widget from "../../../components/common/Widget";
-import { PriorityEnum } from "../../../types/common";
+} from 'react-icons/fa'
+import classNames from 'classnames'
+import { ProjectStatusEnum, PsProject } from '../../../types/ps'
+import dayjs from 'dayjs'
+import { mockProjects } from '../../../mocks/mockProjects'
+import PhaseViewModal from './PhaseViewModal'
+import TaskViewModal from './TaskViewModal'
+import Widget from '../../../components/common/Widget'
+import { PriorityEnum } from '../../../types/common'
 import {
   getProjectStatusColor,
   getProjectStatusIcon,
@@ -34,59 +34,56 @@ import {
   getPriorityColor,
   getPriorityText,
   getProgressColor,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const ProjectList: React.FC = () => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [filterStatus, setFilterStatus] = useState("all");
-  const [filterPriority, setFilterPriority] = useState("all");
-  const [showFilters, setShowFilters] = useState(false);
-  const [viewMode, setViewMode] = useState<"card" | "list">("list");
+  const [searchTerm, setSearchTerm] = useState('')
+  const [filterStatus, setFilterStatus] = useState('all')
+  const [filterPriority, setFilterPriority] = useState('all')
+  const [showFilters, setShowFilters] = useState(false)
+  const [viewMode, setViewMode] = useState<'card' | 'list'>('list')
 
   // Modal states
-  const [phasesModalOpen, setPhasesModalOpen] = useState(false);
-  const [tasksModalOpen, setTasksModalOpen] = useState(false);
-  const [selectedProject, setSelectedProject] = useState<PsProject | null>(
-    null
-  );
+  const [phasesModalOpen, setPhasesModalOpen] = useState(false)
+  const [tasksModalOpen, setTasksModalOpen] = useState(false)
+  const [selectedProject, setSelectedProject] = useState<PsProject | null>(null)
 
   // Modal functions
   const openPhasesModal = (project: PsProject) => {
-    setSelectedProject(project);
-    setPhasesModalOpen(true);
-  };
+    setSelectedProject(project)
+    setPhasesModalOpen(true)
+  }
 
   const openTasksModal = (project: PsProject) => {
-    setSelectedProject(project);
-    setTasksModalOpen(true);
-  };
+    setSelectedProject(project)
+    setTasksModalOpen(true)
+  }
 
   const closeModals = () => {
-    setPhasesModalOpen(false);
-    setTasksModalOpen(false);
-    setSelectedProject(null);
-  };
+    setPhasesModalOpen(false)
+    setTasksModalOpen(false)
+    setSelectedProject(null)
+  }
 
   const {
     data: projects,
     isLoading,
     error,
   } = useQuery({
-    queryKey: ["projects", searchTerm, filterStatus, filterPriority],
+    queryKey: ['projects', searchTerm, filterStatus, filterPriority],
     queryFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
+      await new Promise((resolve) => setTimeout(resolve, 500))
       return mockProjects.filter((project) => {
         const matchesSearch =
           project.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          project.name.toLowerCase().includes(searchTerm.toLowerCase());
-        const matchesStatus =
-          filterStatus === "all" || project.status === filterStatus;
-        const matchesPriority =
-          filterPriority === "all" || project.priority === filterPriority;
-        return matchesSearch && matchesStatus && matchesPriority;
-      });
+          project.name.toLowerCase().includes(searchTerm.toLowerCase())
+        const matchesStatus = filterStatus === 'all' || project.status === filterStatus
+        const matchesPriority = filterPriority === 'all' || project.priority === filterPriority
+        return matchesSearch && matchesStatus && matchesPriority
+      })
     },
-  });
+  })
 
   if (isLoading) {
     return (
@@ -94,7 +91,7 @@ const ProjectList: React.FC = () => {
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
         <span className="ml-3 text-gray-600">Projeler yükleniyor...</span>
       </div>
-    );
+    )
   }
 
   if (error) {
@@ -102,560 +99,510 @@ const ProjectList: 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">
-            Projeler yüklenirken hata oluştu.
-          </span>
+          <span className="text-red-800">Projeler yüklenirken hata oluştu.</span>
         </div>
       </div>
-    );
+    )
   }
 
   return (
-    <div className="space-y-4 pt-2">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">Proje Listesi</h2>
-          <p className="text-gray-600 mt-1">Proje listesinizi yönetin</p>
-        </div>
-        <div className="flex items-center space-x-2">
-          {/* View Toggle */}
-          <div className="flex bg-gray-100 rounded-lg">
-            <button
-              onClick={() => setViewMode("card")}
-              className={`px-2.5 py-1.5 rounded-md flex items-center space-x-2 transition-colors ${
-                viewMode === "card"
-                  ? "bg-white text-blue-600 shadow-sm"
-                  : "text-gray-600 hover:text-gray-900"
-              }`}
-            >
-              <FaTh className="w-4 h-4" />
-            </button>
-            <button
-              onClick={() => setViewMode("list")}
-              className={`px-2.5 py-1.5 rounded-md flex items-center space-x-2 transition-colors ${
-                viewMode === "list"
-                  ? "bg-white text-blue-600 shadow-sm"
-                  : "text-gray-600 hover:text-gray-900"
-              }`}
-            >
-              <FaList className="w-4 h-4" />
-            </button>
+    <Container>
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">Proje Listesi</h2>
+            <p className="text-gray-600 mt-1">Proje listesinizi yönetin</p>
           </div>
-
-          <button
-            onClick={() => alert("Dışa aktarma özelliği yakında eklenecek")}
-            className="flex items-center px-3 py-1.5 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>
-
-          <Link
-            to="/admin/projects/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 Proje
-          </Link>
-        </div>
-      </div>
-
-      {/* Header Actions */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-        <div className="flex items-center space-x-4">
-          <div className="relative">
-            <FaSearch
-              size={20}
-              className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-            />
-            <input
-              type="text"
-              placeholder="Proje kodu veya adı..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10 pr-3 py-1.5 text-sm w-80 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
-
-          <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>
-        </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-sm font-medium text-gray-700 mb-2">
-                Durum
-              </label>
-              <select
-                value={filterStatus}
-                onChange={(e) => setFilterStatus(e.target.value)}
-                className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              >
-                <option value="all">Tümü</option>
-                <option value={ProjectStatusEnum.Planning}>Planlama</option>
-                <option value={ProjectStatusEnum.Active}>Aktif</option>
-                <option value={ProjectStatusEnum.OnHold}>Beklemede</option>
-                <option value={ProjectStatusEnum.Completed}>Tamamlandı</option>
-                <option value={ProjectStatusEnum.Cancelled}>
-                  İptal Edildi
-                </option>
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Öncelik
-              </label>
-              <select
-                value={filterPriority}
-                onChange={(e) => setFilterPriority(e.target.value)}
-                className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              >
-                <option value="all">Tümü</option>
-                <option value={PriorityEnum.Low}>Düşük</option>
-                <option value={PriorityEnum.Normal}>Normal</option>
-                <option value={PriorityEnum.High}>Yüksek</option>
-                <option value={PriorityEnum.Urgent}>Acil</option>
-              </select>
-            </div>
-
-            <div className="flex items-end">
+          <div className="flex items-center space-x-2">
+            {/* View Toggle */}
+            <div className="flex bg-gray-100 rounded-lg">
               <button
-                onClick={() => {
-                  setFilterStatus("all");
-                  setFilterPriority("all");
-                  setSearchTerm("");
-                }}
-                className="w-full px-3 py-1.5 border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                onClick={() => setViewMode('card')}
+                className={`px-2.5 py-1.5 rounded-md flex items-center space-x-2 transition-colors ${
+                  viewMode === 'card'
+                    ? 'bg-white text-blue-600 shadow-sm'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
               >
-                Filtreleri Temizle
+                <FaTh className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => setViewMode('list')}
+                className={`px-2.5 py-1.5 rounded-md flex items-center space-x-2 transition-colors ${
+                  viewMode === 'list'
+                    ? 'bg-white text-blue-600 shadow-sm'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                <FaList className="w-4 h-4" />
               </button>
             </div>
-          </div>
-        </div>
-      )}
 
-      {/* Statistics Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Widget
-          title="Toplam Proje"
-          value={projects?.length || 0}
-          color="blue"
-          icon="FaFolder"
-        />
-
-        <Widget
-          title="Aktif Proje"
-          value={
-            projects?.filter((p) => p.status === ProjectStatusEnum.Active)
-              .length || 0
-          }
-          color="green"
-          icon="FaArrowUp"
-        />
-
-        <Widget
-          title="Toplam Bütçe"
-          value={`₺${
-            projects?.reduce((acc, p) => acc + p.budget, 0).toLocaleString() ||
-            0
-          }`}
-          color="purple"
-          icon="FaDollarSign"
-        />
-
-        <Widget
-          title="Ortalama İlerleme"
-          value={
-            projects?.length
-              ? `${Math.round(
-                  projects.reduce((acc, p) => acc + p.progress, 0) /
-                    projects.length
-                )}%`
-              : "0%"
-          }
-          color="yellow"
-          icon="FaBullseye"
-        />
-      </div>
-
-      {/* Projects Display */}
-      {viewMode === "list" ? (
-        /* List View */
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
-          <div className="px-3 py-2 border-b border-gray-200">
-            <h2 className="text-xl font-bold text-gray-900">Proje 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">
-                    Proje Bilgileri
-                  </th>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Proje Yöneticisi
-                  </th>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Durum / Öncelik
-                  </th>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Tarihler
-                  </th>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Bütçe / Maliyet
-                  </th>
-                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    İlerleme
-                  </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">
-                {projects?.map((project) => (
-                  <tr
-                    key={project.id}
-                    className="hover:bg-gray-50 transition-colors text-sm"
-                  >
-                    <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-lg bg-blue-100 flex items-center justify-center">
-                            <FaFolder className="h-5 w-5 text-blue-600" />
-                          </div>
-                        </div>
-                        <div className="ml-4">
-                          <div className="text-sm font-medium text-gray-900">
-                            {project.code}
-                          </div>
-                          <div className="text-sm text-gray-500 max-w-xs truncate">
-                            {project.name}
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2">
-                      <div className="flex items-center text-sm">
-                        <FaUser size={16} className="text-gray-400 mr-2" />
-                        <div>
-                          <div className="font-medium text-gray-900">
-                            {project.projectManager?.fullName}
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2">
-                      <div className="space-y-2">
-                        <span
-                          className={classNames(
-                            "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
-                            getProjectStatusColor(project.status)
-                          )}
-                        >
-                          {getProjectStatusIcon(project.status)}
-                          <span className="ml-1">
-                            {getProjectStatusText(project.status)}
-                          </span>
-                        </span>
-                        <div
-                          className={classNames(
-                            "text-sm font-medium",
-                            getPriorityColor(project.priority)
-                          )}
-                        >
-                          {getPriorityText(project.priority)}
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2">
-                      <div className="space-y-1">
-                        <div className="flex items-center text-sm text-gray-900">
-                          <FaCalendar size={14} className="mr-1" />
-                          {dayjs(project.startDate).format("DD.MM.YYYY")}
-                        </div>
-                        <div className="text-sm text-gray-500">
-                          Bitiş: {dayjs(project.endDate).format("DD.MM.YYYY")}
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2">
-                      <div className="space-y-1">
-                        <div className="text-sm font-medium text-gray-900">
-                          ₺{project.budget.toLocaleString()}
-                        </div>
-                        <div className="text-sm text-gray-500">
-                          Harcanan: ₺{project.actualCost.toLocaleString()}
-                        </div>
-                        <div className="text-xs text-blue-600">
-                          %
-                          {Math.round(
-                            (project.actualCost / project.budget) * 100
-                          )}{" "}
-                          kullanıldı
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2">
-                      <div className="space-y-2">
-                        <div className="flex items-center justify-between">
-                          <span className="text-sm font-medium text-gray-900">
-                            %{project.progress}
-                          </span>
-                        </div>
-                        <div className="w-full bg-gray-200 rounded-full h-2">
-                          <div
-                            className={classNames(
-                              "h-2 rounded-full",
-                              getProgressColor(project.progress)
-                            )}
-                            style={{ width: `${project.progress}%` }}
-                          />
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="px-3 py-2 text-right">
-                      <div className="flex items-center justify-end space-x-1">
-                        <Link
-                          to={`/admin/projects/${project.id}`}
-                          className="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
-                          title="Detayları Görüntüle"
-                        >
-                          <FaEye size={16} />
-                        </Link>
-
-                        <Link
-                          to={`/admin/projects/edit/${project.id}`}
-                          className="p-1.5 text-gray-600 hover:text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors"
-                          title="Düzenle"
-                        >
-                          <FaEdit size={16} />
-                        </Link>
-
-                        <button
-                          onClick={() => openPhasesModal(project)}
-                          className="p-1.5 text-gray-600 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
-                          title="Fazları Görüntüle"
-                        >
-                          <FaFlag size={16} />
-                        </button>
-
-                        <button
-                          onClick={() => openTasksModal(project)}
-                          className="p-1.5 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
-                          title="Görevleri Görüntüle"
-                        >
-                          <FaTasks size={16} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      ) : (
-        /* Card View */
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {projects?.map((project) => (
-            <div
-              key={project.id}
-              className="bg-white rounded-lg shadow-md border border-gray-200 p-4 hover:shadow-lg transition-shadow"
+            <button
+              onClick={() => alert('Dışa aktarma özelliği yakında eklenecek')}
+              className="flex items-center px-3 py-1.5 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
             >
-              <div className="flex items-start justify-between mb-3">
-                <div className="flex-1">
-                  <div className="flex items-center space-x-2 mb-2">
-                    <FaFolder className="w-5 h-5 text-blue-600" />
-                    <h3 className="text-base font-semibold text-gray-900">
-                      {project.code}
-                    </h3>
-                  </div>
-                  <p className="text-sm text-gray-600 mb-2">{project.name}</p>
-                  <div className="flex items-center space-x-2 mb-3">
-                    <span
-                      className={classNames(
-                        "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-                        getProjectStatusColor(project.status)
-                      )}
-                    >
-                      {getProjectStatusIcon(project.status)}
-                      <span className="ml-1">
-                        {getProjectStatusText(project.status)}
-                      </span>
-                    </span>
-                    <span
-                      className={classNames(
-                        "px-2 py-0.5 rounded-full text-xs font-medium",
-                        getPriorityColor(project.priority)
-                      )}
-                    >
-                      {getPriorityText(project.priority)}
-                    </span>
-                  </div>
-                </div>
-                <div className="flex space-x-1">
-                  <Link
-                    to={`/admin/projects/${project.id}`}
-                    className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
-                  >
-                    <FaEye className="w-4 h-4" />
-                  </Link>
-                  <Link
-                    to={`/admin/projects/edit/${project.id}`}
-                    className="p-1.5 text-gray-400 hover:text-yellow-600 hover:bg-yellow-50 rounded-md transition-colors"
-                  >
-                    <FaEdit className="w-4 h-4" />
-                  </Link>
-                  <button
-                    onClick={() => openPhasesModal(project)}
-                    className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
-                    title="Fazları Görüntüle"
-                  >
-                    <FaFlag className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => openTasksModal(project)}
-                    className="p-1.5 text-gray-400 hover:text-purple-600 hover:bg-purple-50 rounded-md transition-colors"
-                    title="Görevleri Görüntüle"
-                  >
-                    <FaTasks className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
+              <FaDownload size={16} className="mr-2" />
+              Dışa Aktar
+            </button>
 
-              {/* Project Manager */}
-              <div className="bg-gray-50 rounded-lg p-2 mb-3">
-                <div className="flex items-center space-x-2 mb-1">
-                  <FaUser className="w-4 h-4 text-gray-600" />
-                  <span className="font-medium text-gray-900">
-                    Proje Yöneticisi
-                  </span>
-                </div>
-                <p className="text-sm text-gray-700">
-                  {project.projectManager?.fullName}
-                </p>
-              </div>
-
-              {/* Progress */}
-              <div className="mb-3">
-                <div className="flex items-center justify-between text-sm mb-2">
-                  <span className="text-gray-500 flex items-center">
-                    <FaBullseye className="w-4 h-4 mr-1" />
-                    İlerleme
-                  </span>
-                  <span className="font-medium">{project.progress}%</span>
-                </div>
-                <div className="w-full bg-gray-200 rounded-full h-2">
-                  <div
-                    className={classNames(
-                      "h-2 rounded-full",
-                      getProgressColor(project.progress)
-                    )}
-                    style={{ width: `${project.progress}%` }}
-                  />
-                </div>
-              </div>
-
-              {/* Dates and Budget */}
-              <div className="grid grid-cols-2 gap-3 mb-3">
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-gray-500 flex items-center">
-                      <FaCalendar className="w-4 h-4 mr-1" />
-                      Başlangıç
-                    </span>
-                    <span className="font-medium">
-                      {dayjs(project.startDate).format("DD.MM.YYYY")}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-gray-500">Bitiş</span>
-                    <span className="font-medium">
-                      {dayjs(project.endDate).format("DD.MM.YYYY")}
-                    </span>
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-gray-500 flex items-center">
-                      <FaDollarSign className="w-4 h-4 mr-1" />
-                      Bütçe
-                    </span>
-                    <span className="font-medium">
-                      ₺{project.budget.toLocaleString()}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-gray-500">Harcanan</span>
-                    <span className="font-medium">
-                      ₺{project.actualCost.toLocaleString()}
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Budget Usage */}
-              <div className="bg-blue-50 rounded-lg p-2">
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-blue-700 font-medium">
-                    Bütçe Kullanımı
-                  </span>
-                  <span className="text-blue-600 font-bold">
-                    %{Math.round((project.actualCost / project.budget) * 100)}
-                  </span>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Empty State */}
-      {(!projects || projects.length === 0) && (
-        <div className="text-center py-10">
-          <FaFolder className="mx-auto h-12 w-12 text-gray-400" />
-          <h3 className="mt-2 text-sm font-medium text-gray-900">
-            Proje bulunamadı
-          </h3>
-          <p className="mt-1 text-sm text-gray-500">
-            Yeni proje oluşturarak başlayın.
-          </p>
-          <div className="mt-6">
             <Link
               to="/admin/projects/new"
-              className="inline-flex items-center px-3 py-1.5 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 Proje Oluştur
+              Yeni Proje
             </Link>
           </div>
         </div>
-      )}
+
+        {/* Header Actions */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div className="flex items-center space-x-4">
+            <div className="relative">
+              <FaSearch
+                size={20}
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+              />
+              <input
+                type="text"
+                placeholder="Proje kodu veya adı..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10 pr-3 py-1.5 text-sm w-80 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            <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>
+          </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-sm font-medium text-gray-700 mb-2">Durum</label>
+                <select
+                  value={filterStatus}
+                  onChange={(e) => setFilterStatus(e.target.value)}
+                  className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                >
+                  <option value="all">Tümü</option>
+                  <option value={ProjectStatusEnum.Planning}>Planlama</option>
+                  <option value={ProjectStatusEnum.Active}>Aktif</option>
+                  <option value={ProjectStatusEnum.OnHold}>Beklemede</option>
+                  <option value={ProjectStatusEnum.Completed}>Tamamlandı</option>
+                  <option value={ProjectStatusEnum.Cancelled}>İptal Edildi</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Öncelik</label>
+                <select
+                  value={filterPriority}
+                  onChange={(e) => setFilterPriority(e.target.value)}
+                  className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                >
+                  <option value="all">Tümü</option>
+                  <option value={PriorityEnum.Low}>Düşük</option>
+                  <option value={PriorityEnum.Normal}>Normal</option>
+                  <option value={PriorityEnum.High}>Yüksek</option>
+                  <option value={PriorityEnum.Urgent}>Acil</option>
+                </select>
+              </div>
+
+              <div className="flex items-end">
+                <button
+                  onClick={() => {
+                    setFilterStatus('all')
+                    setFilterPriority('all')
+                    setSearchTerm('')
+                  }}
+                  className="w-full px-3 py-1.5 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-4">
+          <Widget title="Toplam Proje" value={projects?.length || 0} color="blue" icon="FaFolder" />
+
+          <Widget
+            title="Aktif Proje"
+            value={projects?.filter((p) => p.status === ProjectStatusEnum.Active).length || 0}
+            color="green"
+            icon="FaArrowUp"
+          />
+
+          <Widget
+            title="Toplam Bütçe"
+            value={`₺${projects?.reduce((acc, p) => acc + p.budget, 0).toLocaleString() || 0}`}
+            color="purple"
+            icon="FaDollarSign"
+          />
+
+          <Widget
+            title="Ortalama İlerleme"
+            value={
+              projects?.length
+                ? `${Math.round(
+                    projects.reduce((acc, p) => acc + p.progress, 0) / projects.length,
+                  )}%`
+                : '0%'
+            }
+            color="yellow"
+            icon="FaBullseye"
+          />
+        </div>
+
+        {/* Projects Display */}
+        {viewMode === 'list' ? (
+          /* List View */
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200">
+            <div className="px-3 py-2 border-b border-gray-200">
+              <h2 className="text-xl font-bold text-gray-900">Proje 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">
+                      Proje Bilgileri
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Proje Yöneticisi
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Durum / Öncelik
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Tarihler
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Bütçe / Maliyet
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      İlerleme
+                    </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">
+                  {projects?.map((project) => (
+                    <tr key={project.id} className="hover:bg-gray-50 transition-colors text-sm">
+                      <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-lg bg-blue-100 flex items-center justify-center">
+                              <FaFolder className="h-5 w-5 text-blue-600" />
+                            </div>
+                          </div>
+                          <div className="ml-4">
+                            <div className="text-sm font-medium text-gray-900">{project.code}</div>
+                            <div className="text-sm text-gray-500 max-w-xs truncate">
+                              {project.name}
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+
+                      <td className="px-3 py-2">
+                        <div className="flex items-center text-sm">
+                          <FaUser size={16} className="text-gray-400 mr-2" />
+                          <div>
+                            <div className="font-medium text-gray-900">
+                              {project.projectManager?.fullName}
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+
+                      <td className="px-3 py-2">
+                        <div className="space-y-2">
+                          <span
+                            className={classNames(
+                              'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
+                              getProjectStatusColor(project.status),
+                            )}
+                          >
+                            {getProjectStatusIcon(project.status)}
+                            <span className="ml-1">{getProjectStatusText(project.status)}</span>
+                          </span>
+                          <div
+                            className={classNames(
+                              'text-sm font-medium',
+                              getPriorityColor(project.priority),
+                            )}
+                          >
+                            {getPriorityText(project.priority)}
+                          </div>
+                        </div>
+                      </td>
+
+                      <td className="px-3 py-2">
+                        <div className="space-y-1">
+                          <div className="flex items-center text-sm text-gray-900">
+                            <FaCalendar size={14} className="mr-1" />
+                            {dayjs(project.startDate).format('DD.MM.YYYY')}
+                          </div>
+                          <div className="text-sm text-gray-500">
+                            Bitiş: {dayjs(project.endDate).format('DD.MM.YYYY')}
+                          </div>
+                        </div>
+                      </td>
+
+                      <td className="px-3 py-2">
+                        <div className="space-y-1">
+                          <div className="text-sm font-medium text-gray-900">
+                            ₺{project.budget.toLocaleString()}
+                          </div>
+                          <div className="text-sm text-gray-500">
+                            Harcanan: ₺{project.actualCost.toLocaleString()}
+                          </div>
+                          <div className="text-xs text-blue-600">
+                            %{Math.round((project.actualCost / project.budget) * 100)} kullanıldı
+                          </div>
+                        </div>
+                      </td>
+
+                      <td className="px-3 py-2">
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <span className="text-sm font-medium text-gray-900">
+                              %{project.progress}
+                            </span>
+                          </div>
+                          <div className="w-full bg-gray-200 rounded-full h-2">
+                            <div
+                              className={classNames(
+                                'h-2 rounded-full',
+                                getProgressColor(project.progress),
+                              )}
+                              style={{ width: `${project.progress}%` }}
+                            />
+                          </div>
+                        </div>
+                      </td>
+
+                      <td className="px-3 py-2 text-right">
+                        <div className="flex items-center justify-end space-x-1">
+                          <Link
+                            to={`/admin/projects/${project.id}`}
+                            className="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                            title="Detayları Görüntüle"
+                          >
+                            <FaEye size={16} />
+                          </Link>
+
+                          <Link
+                            to={`/admin/projects/edit/${project.id}`}
+                            className="p-1.5 text-gray-600 hover:text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors"
+                            title="Düzenle"
+                          >
+                            <FaEdit size={16} />
+                          </Link>
+
+                          <button
+                            onClick={() => openPhasesModal(project)}
+                            className="p-1.5 text-gray-600 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
+                            title="Fazları Görüntüle"
+                          >
+                            <FaFlag size={16} />
+                          </button>
+
+                          <button
+                            onClick={() => openTasksModal(project)}
+                            className="p-1.5 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
+                            title="Görevleri Görüntüle"
+                          >
+                            <FaTasks size={16} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        ) : (
+          /* Card View */
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {projects?.map((project) => (
+              <div
+                key={project.id}
+                className="bg-white rounded-lg shadow-md border border-gray-200 p-4 hover:shadow-lg transition-shadow"
+              >
+                <div className="flex items-start justify-between mb-3">
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-2 mb-2">
+                      <FaFolder className="w-5 h-5 text-blue-600" />
+                      <h3 className="text-base font-semibold text-gray-900">{project.code}</h3>
+                    </div>
+                    <p className="text-sm text-gray-600 mb-2">{project.name}</p>
+                    <div className="flex items-center space-x-2 mb-3">
+                      <span
+                        className={classNames(
+                          'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
+                          getProjectStatusColor(project.status),
+                        )}
+                      >
+                        {getProjectStatusIcon(project.status)}
+                        <span className="ml-1">{getProjectStatusText(project.status)}</span>
+                      </span>
+                      <span
+                        className={classNames(
+                          'px-2 py-0.5 rounded-full text-xs font-medium',
+                          getPriorityColor(project.priority),
+                        )}
+                      >
+                        {getPriorityText(project.priority)}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="flex space-x-1">
+                    <Link
+                      to={`/admin/projects/${project.id}`}
+                      className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
+                    >
+                      <FaEye className="w-4 h-4" />
+                    </Link>
+                    <Link
+                      to={`/admin/projects/edit/${project.id}`}
+                      className="p-1.5 text-gray-400 hover:text-yellow-600 hover:bg-yellow-50 rounded-md transition-colors"
+                    >
+                      <FaEdit className="w-4 h-4" />
+                    </Link>
+                    <button
+                      onClick={() => openPhasesModal(project)}
+                      className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
+                      title="Fazları Görüntüle"
+                    >
+                      <FaFlag className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => openTasksModal(project)}
+                      className="p-1.5 text-gray-400 hover:text-purple-600 hover:bg-purple-50 rounded-md transition-colors"
+                      title="Görevleri Görüntüle"
+                    >
+                      <FaTasks className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Project Manager */}
+                <div className="bg-gray-50 rounded-lg p-2 mb-3">
+                  <div className="flex items-center space-x-2 mb-1">
+                    <FaUser className="w-4 h-4 text-gray-600" />
+                    <span className="font-medium text-gray-900">Proje Yöneticisi</span>
+                  </div>
+                  <p className="text-sm text-gray-700">{project.projectManager?.fullName}</p>
+                </div>
+
+                {/* Progress */}
+                <div className="mb-3">
+                  <div className="flex items-center justify-between text-sm mb-2">
+                    <span className="text-gray-500 flex items-center">
+                      <FaBullseye className="w-4 h-4 mr-1" />
+                      İlerleme
+                    </span>
+                    <span className="font-medium">{project.progress}%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2">
+                    <div
+                      className={classNames('h-2 rounded-full', getProgressColor(project.progress))}
+                      style={{ width: `${project.progress}%` }}
+                    />
+                  </div>
+                </div>
+
+                {/* Dates and Budget */}
+                <div className="grid grid-cols-2 gap-3 mb-3">
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-gray-500 flex items-center">
+                        <FaCalendar className="w-4 h-4 mr-1" />
+                        Başlangıç
+                      </span>
+                      <span className="font-medium">
+                        {dayjs(project.startDate).format('DD.MM.YYYY')}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-gray-500">Bitiş</span>
+                      <span className="font-medium">
+                        {dayjs(project.endDate).format('DD.MM.YYYY')}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-gray-500 flex items-center">
+                        <FaDollarSign className="w-4 h-4 mr-1" />
+                        Bütçe
+                      </span>
+                      <span className="font-medium">₺{project.budget.toLocaleString()}</span>
+                    </div>
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-gray-500">Harcanan</span>
+                      <span className="font-medium">₺{project.actualCost.toLocaleString()}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Budget Usage */}
+                <div className="bg-blue-50 rounded-lg p-2">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-blue-700 font-medium">Bütçe Kullanımı</span>
+                    <span className="text-blue-600 font-bold">
+                      %{Math.round((project.actualCost / project.budget) * 100)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Empty State */}
+        {(!projects || projects.length === 0) && (
+          <div className="text-center py-10">
+            <FaFolder className="mx-auto h-12 w-12 text-gray-400" />
+            <h3 className="mt-2 text-sm font-medium text-gray-900">Proje bulunamadı</h3>
+            <p className="mt-1 text-sm text-gray-500">Yeni proje oluşturarak başlayın.</p>
+            <div className="mt-6">
+              <Link
+                to="/admin/projects/new"
+                className="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                <FaPlus size={16} className="mr-2" />
+                Yeni Proje Oluştur
+              </Link>
+            </div>
+          </div>
+        )}
+      </div>
 
       {/* Modals */}
       {selectedProject && (
@@ -665,15 +612,11 @@ const ProjectList: React.FC = () => {
             isOpen={phasesModalOpen}
             onClose={closeModals}
           />
-          <TaskViewModal
-            project={selectedProject}
-            isOpen={tasksModalOpen}
-            onClose={closeModals}
-          />
+          <TaskViewModal project={selectedProject} isOpen={tasksModalOpen} onClose={closeModals} />
         </>
       )}
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default ProjectList;
+export default ProjectList
diff --git a/ui/src/views/project/components/ProjectPhases.tsx b/ui/src/views/project/components/ProjectPhases.tsx
index b38abb30..21b9bcf9 100644
--- a/ui/src/views/project/components/ProjectPhases.tsx
+++ b/ui/src/views/project/components/ProjectPhases.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaPlus,
   FaSearch,
@@ -11,190 +11,173 @@ import {
   FaEdit,
   FaSave,
   FaProjectDiagram,
-} from "react-icons/fa";
-import {
-  PhaseStatusEnum,
-  PsProjectPhase,
-  ProjectStatusEnum,
-} from "../../../types/ps";
-import { mockProjectPhases } from "../../../mocks/mockProjectPhases";
-import { mockProjects } from "../../../mocks/mockProjects";
-import MultiSelectTeam from "../../../components/common/MultiSelectTeam";
-import Widget from "../../../components/common/Widget";
+} from 'react-icons/fa'
+import { PhaseStatusEnum, PsProjectPhase, ProjectStatusEnum } from '../../../types/ps'
+import { mockProjectPhases } from '../../../mocks/mockProjectPhases'
+import { mockProjects } from '../../../mocks/mockProjects'
+import MultiSelectTeam from '../../../components/common/MultiSelectTeam'
+import Widget from '../../../components/common/Widget'
 import {
   getPhaseCategoryColor,
   getProgressColor,
   getPhaseStatusIcon,
   getPhaseStatusText,
   getPhaseStatusColor,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const ProjectPhases: React.FC = () => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedStatus, setSelectedStatus] = useState("All");
-  const [selectedProject, setSelectedProject] = useState("All");
-  const [selectedPhase, setSelectedPhase] = useState<PsProjectPhase | null>(
-    null
-  );
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [editingPhase, setEditingPhase] = useState<PsProjectPhase | null>(null);
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedStatus, setSelectedStatus] = useState('All')
+  const [selectedProject, setSelectedProject] = useState('All')
+  const [selectedPhase, setSelectedPhase] = useState<PsProjectPhase | null>(null)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
+  const [editingPhase, setEditingPhase] = useState<PsProjectPhase | null>(null)
 
   // Form state for creating/editing phases
   const [formData, setFormData] = useState({
-    phaseName: "",
-    description: "",
-    projectId: "",
+    phaseName: '',
+    description: '',
+    projectId: '',
     status: PhaseStatusEnum.NotStarted,
-    startDate: "",
-    endDate: "",
+    startDate: '',
+    endDate: '',
     budget: 0,
-    category: "",
+    category: '',
     assignedTeams: [] as string[],
-  });
+  })
 
   const filteredPhases = mockProjectPhases.filter((phase) => {
     const matchesSearch =
       phase.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
       phase.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      phase.description?.toLowerCase().includes(searchTerm.toLowerCase());
-    const matchesStatus =
-      selectedStatus === "All" || phase.status === selectedStatus;
-    const matchesProject =
-      selectedProject === "All" || phase.projectId === selectedProject;
+      phase.description?.toLowerCase().includes(searchTerm.toLowerCase())
+    const matchesStatus = selectedStatus === 'All' || phase.status === selectedStatus
+    const matchesProject = selectedProject === 'All' || phase.projectId === selectedProject
 
-    return matchesSearch && matchesStatus && matchesProject;
-  });
+    return matchesSearch && matchesStatus && matchesProject
+  })
 
   const calculateBudgetVariance = (budget: number, actualCost: number) => {
-    return ((actualCost - budget) / budget) * 100;
-  };
+    return ((actualCost - budget) / budget) * 100
+  }
 
   const calculateScheduleVariance = (phase: PsProjectPhase) => {
-    const plannedDuration =
-      new Date(phase.endDate).getTime() - new Date(phase.startDate).getTime();
+    const plannedDuration = new Date(phase.endDate).getTime() - new Date(phase.startDate).getTime()
     const actualDuration = phase.actualEndDate
       ? new Date(phase.actualEndDate).getTime() -
         new Date(phase.actualStartDate || phase.startDate).getTime()
-      : Date.now() -
-        new Date(phase.actualStartDate || phase.startDate).getTime();
+      : Date.now() - new Date(phase.actualStartDate || phase.startDate).getTime()
 
-    return ((actualDuration - plannedDuration) / plannedDuration) * 100;
-  };
+    return ((actualDuration - plannedDuration) / plannedDuration) * 100
+  }
 
   const openModal = (phase: PsProjectPhase) => {
-    setSelectedPhase(phase);
-    setIsModalOpen(true);
-  };
+    setSelectedPhase(phase)
+    setIsModalOpen(true)
+  }
 
   const closeModal = () => {
-    setSelectedPhase(null);
-    setIsModalOpen(false);
-  };
+    setSelectedPhase(null)
+    setIsModalOpen(false)
+  }
 
   const openCreateModal = () => {
     setFormData({
-      phaseName: "",
-      description: "",
-      projectId: "",
+      phaseName: '',
+      description: '',
+      projectId: '',
       status: PhaseStatusEnum.NotStarted,
-      startDate: "",
-      endDate: "",
+      startDate: '',
+      endDate: '',
       budget: 0,
-      category: "",
+      category: '',
       assignedTeams: [],
-    });
-    setIsCreateModalOpen(true);
-  };
+    })
+    setIsCreateModalOpen(true)
+  }
 
   const closeCreateModal = () => {
-    setIsCreateModalOpen(false);
-  };
+    setIsCreateModalOpen(false)
+  }
 
   const openEditModal = (phase: PsProjectPhase) => {
-    setEditingPhase(phase);
+    setEditingPhase(phase)
     setFormData({
       phaseName: phase.name,
-      description: phase.description || "",
+      description: phase.description || '',
       projectId: phase.projectId,
       status: phase.status,
-      startDate: phase.startDate.toISOString().split("T")[0],
-      endDate: phase.endDate.toISOString().split("T")[0],
+      startDate: phase.startDate.toISOString().split('T')[0],
+      endDate: phase.endDate.toISOString().split('T')[0],
       budget: phase.budget,
       category: phase.category,
       assignedTeams: phase.assignedTeams || [],
-    });
-    setIsEditModalOpen(true);
-  };
+    })
+    setIsEditModalOpen(true)
+  }
 
   const closeEditModal = () => {
-    setIsEditModalOpen(false);
-    setEditingPhase(null);
-  };
+    setIsEditModalOpen(false)
+    setEditingPhase(null)
+  }
 
   const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
   ) => {
-    const { name, value } = e.target;
+    const { name, value } = e.target
     setFormData((prev) => ({
       ...prev,
       [name]: value,
-    }));
-  };
+    }))
+  }
 
   const handleTeamChange = (teams: string[]) => {
     setFormData((prev) => ({
       ...prev,
       assignedTeams: teams,
-    }));
-  };
+    }))
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
     // Here you would normally save to backend
-    console.log("Saving phase:", formData);
-    alert(isEditModalOpen ? "Aşama güncellendi!" : "Yeni aşama oluşturuldu!");
+    console.log('Saving phase:', formData)
+    alert(isEditModalOpen ? 'Aşama güncellendi!' : 'Yeni aşama oluşturuldu!')
     if (isEditModalOpen) {
-      closeEditModal();
+      closeEditModal()
     } else {
-      closeCreateModal();
+      closeCreateModal()
     }
-  };
+  }
 
   const generatePhaseCode = () => {
-    const phaseCount = mockProjectPhases.length + 1;
-    return `PH-${phaseCount.toString().padStart(3, "0")}`;
-  };
+    const phaseCount = mockProjectPhases.length + 1
+    return `PH-${phaseCount.toString().padStart(3, '0')}`
+  }
 
   return (
-    <div>
-      <div className="mb-3 mt-2">
+    <Container>
+      <div className="space-y-2">
         {/* Header Section with Description */}
-        <div className="rounded-xl mt-2">
-          <div className="flex items-center justify-between mb-2">
-            <div className="flex-1">
-              <div className="flex items-center gap-3 mb-2">
-                <div>
-                  <h2 className="text-lg font-bold text-gray-900">
-                    Proje Aşamaları
-                  </h2>
-                  <p className="text-sm text-gray-600">
-                    Proje İlerleme Yönetimi
-                  </p>
-                </div>
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex-1">
+            <div className="flex items-center gap-3 mb-2">
+              <div>
+                <h2 className="text-xl font-bold text-gray-900">Proje Aşamaları</h2>
+                <p className="text-gray-600">Proje İlerleme Yönetimi</p>
               </div>
             </div>
-            <button
-              onClick={openCreateModal}
-              className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center gap-2 transition-colors shadow-sm"
-            >
-              <FaPlus className="w-4 h-4" />
-              Yeni Aşama
-            </button>
           </div>
+          <button
+            onClick={openCreateModal}
+            className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center gap-2 transition-colors shadow-sm"
+          >
+            <FaPlus className="w-4 h-4" />
+            Yeni Aşama
+          </button>
         </div>
 
         {/* Summary Cards */}
@@ -208,22 +191,14 @@ const ProjectPhases: React.FC = () => {
 
           <Widget
             title="Aktif Aşama"
-            value={
-              mockProjectPhases.filter(
-                (p) => p.status === PhaseStatusEnum.InProgress
-              ).length
-            }
+            value={mockProjectPhases.filter((p) => p.status === PhaseStatusEnum.InProgress).length}
             color="green"
             icon="FaBolt"
           />
 
           <Widget
             title="Tamamlanan"
-            value={
-              mockProjectPhases.filter(
-                (p) => p.status === PhaseStatusEnum.Completed
-              ).length
-            }
+            value={mockProjectPhases.filter((p) => p.status === PhaseStatusEnum.Completed).length}
             color="blue"
             icon="FaCheckCircle"
           />
@@ -232,9 +207,7 @@ const ProjectPhases: React.FC = () => {
             title="Geciken"
             value={
               mockProjectPhases.filter(
-                (p) =>
-                  p.status !== PhaseStatusEnum.Completed &&
-                  new Date(p.endDate) < new Date()
+                (p) => p.status !== PhaseStatusEnum.Completed && new Date(p.endDate) < new Date(),
               ).length
             }
             color="red"
@@ -281,124 +254,109 @@ const ProjectPhases: React.FC = () => {
             <option value={ProjectStatusEnum.Cancelled}>İptal Edildi</option>
           </select>
         </div>
-      </div>
 
-      {/* Phase Timeline */}
-      <h3 className="text-base font-semibold mb-2 flex items-center gap-2">
-        <FaCalendar className="w-4 h-4" />
-        Aşama Zaman Çizelgesi
-      </h3>
+        {/* Phase Timeline */}
+        <h3 className="text-base font-semibold mb-2 flex items-center gap-2">
+          <FaCalendar className="w-4 h-4" />
+          Aşama Zaman Çizelgesi
+        </h3>
 
-      <div className="space-y-2">
-        {filteredPhases
-          .sort(
-            (a, b) =>
-              new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
-          )
-          .map((phase) => (
-            <div key={phase.id} className="relative">
-              <div
-                className="flex items-center gap-2 p-2 border rounded-lg hover:shadow-md transition-shadow cursor-pointer bg-white"
-                onClick={() => openModal(phase)}
-              >
-                <div className="flex-1">
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
-                      <h4 className="font-medium text-gray-900">
-                        {phase.name}
-                      </h4>
-                      <span className="text-xs text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded">
-                        {phase.code}
+        <div className="space-y-2">
+          {filteredPhases
+            .sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime())
+            .map((phase) => (
+              <div key={phase.id} className="relative">
+                <div
+                  className="flex items-center gap-2 p-2 border rounded-lg hover:shadow-md transition-shadow cursor-pointer bg-white"
+                  onClick={() => openModal(phase)}
+                >
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-2">
+                        <h4 className="font-medium text-gray-900">{phase.name}</h4>
+                        <span className="text-xs text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded">
+                          {phase.code}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Project Information */}
+                    <div className="flex items-center gap-2 mb-2">
+                      <span className="text-xs font-medium text-blue-600">
+                        📋 {phase.project?.name || `Proje ID: ${phase.projectId}`}
+                      </span>
+                      <span className="text-xs text-gray-400">
+                        ({phase.project?.code || phase.projectId})
                       </span>
                     </div>
-                  </div>
 
-                  {/* Project Information */}
-                  <div className="flex items-center gap-2 mb-2">
-                    <span className="text-xs font-medium text-blue-600">
-                      📋 {phase.project?.name || `Proje ID: ${phase.projectId}`}
-                    </span>
-                    <span className="text-xs text-gray-400">
-                      ({phase.project?.code || phase.projectId})
-                    </span>
-                  </div>
+                    <p className="text-xs text-gray-600 mb-2">{phase.description}</p>
 
-                  <p className="text-xs text-gray-600 mb-2">
-                    {phase.description}
-                  </p>
+                    {/* Assigned Teams */}
+                    <div className="flex items-center gap-2 mb-2">
+                      <FaUsers className="w-4 h-4 text-gray-500" />
+                      <span className="text-sm font-medium text-gray-700">Atanmış Ekipler:</span>
+                      <div className="flex flex-wrap gap-1">
+                        {phase.assignedTeams.map((team, index) => (
+                          <span
+                            key={index}
+                            className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs bg-blue-50 text-blue-700 border border-blue-200"
+                          >
+                            {team}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
 
-                  {/* Assigned Teams */}
-                  <div className="flex items-center gap-2 mb-2">
-                    <FaUsers className="w-4 h-4 text-gray-500" />
-                    <span className="text-sm font-medium text-gray-700">
-                      Atanmış Ekipler:
-                    </span>
-                    <div className="flex flex-wrap gap-1">
-                      {phase.assignedTeams.map((team, index) => (
-                        <span
-                          key={index}
-                          className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs bg-blue-50 text-blue-700 border border-blue-200"
-                        >
-                          {team}
-                        </span>
-                      ))}
+                    <div className="flex items-center gap-3 text-xs text-gray-500">
+                      <div className="flex items-center gap-1">
+                        <FaCalendar className="w-4 h-4" />
+                        {new Date(phase.startDate).toLocaleDateString('tr-TR')} -{' '}
+                        {new Date(phase.endDate).toLocaleDateString('tr-TR')}
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <FaDollarSign className="w-4 h-4" />₺{phase.budget.toLocaleString()}
+                      </div>
+                      <div className="text-xs text-gray-500">
+                        {phase.completedMilestones}/{phase.milestones} milestone
+                      </div>
                     </div>
                   </div>
 
-                  <div className="flex items-center gap-3 text-xs text-gray-500">
-                    <div className="flex items-center gap-1">
-                      <FaCalendar className="w-4 h-4" />
-                      {new Date(phase.startDate).toLocaleDateString(
-                        "tr-TR"
-                      )} - {new Date(phase.endDate).toLocaleDateString("tr-TR")}
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <FaDollarSign className="w-4 h-4" />₺
-                      {phase.budget.toLocaleString()}
-                    </div>
-                    <div className="text-xs text-gray-500">
-                      {phase.completedMilestones}/{phase.milestones} milestone
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex-shrink-0 text-right">
-                  <div className="flex items-center gap-1.5 mb-1.5">
-                    <span
-                      className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${getPhaseStatusColor(
-                        phase.status
-                      )}`}
-                    >
-                      {getPhaseStatusText(phase.status)}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-1.5 mb-1.5">
-                    <span
-                      className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${getPhaseCategoryColor(
-                        phase.category
-                      )}`}
-                    >
-                      {phase.category}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2 mb-1">
-                    <div className="w-20 bg-gray-200 rounded-full h-2">
-                      <div
-                        className={`h-2 rounded-full ${getProgressColor(
-                          phase.progress
+                  <div className="flex-shrink-0 text-right">
+                    <div className="flex items-center gap-1.5 mb-1.5">
+                      <span
+                        className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${getPhaseStatusColor(
+                          phase.status,
                         )}`}
-                        style={{ width: `${phase.progress}%` }}
-                      />
+                      >
+                        {getPhaseStatusText(phase.status)}
+                      </span>
                     </div>
-                    <span className="text-xs font-medium text-gray-900">
-                      {phase.progress}%
-                    </span>
+                    <div className="flex items-center gap-1.5 mb-1.5">
+                      <span
+                        className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${getPhaseCategoryColor(
+                          phase.category,
+                        )}`}
+                      >
+                        {phase.category}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 mb-1">
+                      <div className="w-20 bg-gray-200 rounded-full h-2">
+                        <div
+                          className={`h-2 rounded-full ${getProgressColor(phase.progress)}`}
+                          style={{ width: `${phase.progress}%` }}
+                        />
+                      </div>
+                      <span className="text-xs font-medium text-gray-900">{phase.progress}%</span>
+                    </div>
+                    <div className="text-xs text-gray-500">Tamamlanma Oranı</div>
                   </div>
-                  <div className="text-xs text-gray-500">Tamamlanma Oranı</div>
                 </div>
               </div>
-            </div>
-          ))}
+            ))}
+        </div>
       </div>
 
       {/* Phase Detail Modal */}
@@ -412,10 +370,7 @@ const ProjectPhases: React.FC = () => {
                   {selectedPhase.code} - {selectedPhase.name}
                 </h3>
               </div>
-              <button
-                onClick={closeModal}
-                className="text-gray-400 hover:text-gray-600"
-              >
+              <button onClick={closeModal} className="text-gray-400 hover:text-gray-600">
                 <FaTimesCircle className="w-5 h-5" />
               </button>
             </div>
@@ -424,22 +379,16 @@ const ProjectPhases: React.FC = () => {
               <div className="lg:col-span-2">
                 <div className="space-y-3 pt-1">
                   <div>
-                    <h4 className="text-sm font-semibold mb-2">
-                      Aşama Bilgileri
-                    </h4>
+                    <h4 className="text-sm font-semibold mb-2">Aşama Bilgileri</h4>
                     <div className="bg-gray-50 p-2.5 rounded-lg">
-                      <p className="text-sm text-gray-900 mb-3">
-                        {selectedPhase.description}
-                      </p>
+                      <p className="text-sm text-gray-900 mb-3">{selectedPhase.description}</p>
 
                       <div className="grid grid-cols-2 gap-2 mb-2">
                         <div>
                           <label className="block text-xs font-medium text-gray-700 mb-1">
                             Proje
                           </label>
-                          <p className="text-sm text-gray-900">
-                            {selectedPhase.project?.name}
-                          </p>
+                          <p className="text-sm text-gray-900">{selectedPhase.project?.name}</p>
                         </div>
                         <div>
                           <label className="block text-xs font-medium text-gray-700 mb-1">
@@ -447,7 +396,7 @@ const ProjectPhases: React.FC = () => {
                           </label>
                           <span
                             className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${getPhaseCategoryColor(
-                              selectedPhase.category
+                              selectedPhase.category,
                             )}`}
                           >
                             {selectedPhase.category}
@@ -462,7 +411,7 @@ const ProjectPhases: React.FC = () => {
                           </label>
                           <span
                             className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs font-medium ${getPhaseStatusColor(
-                              selectedPhase.status
+                              selectedPhase.status,
                             )}`}
                           >
                             {getPhaseStatusIcon(selectedPhase.status)}
@@ -477,7 +426,7 @@ const ProjectPhases: React.FC = () => {
                             <div className="flex-1 bg-gray-200 rounded-full h-2">
                               <div
                                 className={`h-2 rounded-full ${getProgressColor(
-                                  selectedPhase.progress
+                                  selectedPhase.progress,
                                 )}`}
                                 style={{ width: `${selectedPhase.progress}%` }}
                               />
@@ -492,9 +441,7 @@ const ProjectPhases: React.FC = () => {
                   </div>
 
                   <div>
-                    <h4 className="text-sm font-semibold mb-2">
-                      Zaman Çizelgesi
-                    </h4>
+                    <h4 className="text-sm font-semibold mb-2">Zaman Çizelgesi</h4>
                     <div className="bg-gray-50 p-2.5 rounded-lg">
                       <div className="grid grid-cols-2 gap-2 mb-2">
                         <div>
@@ -502,9 +449,7 @@ const ProjectPhases: React.FC = () => {
                             Planlanan Başlangıç
                           </label>
                           <p className="text-sm text-gray-900">
-                            {new Date(
-                              selectedPhase.startDate
-                            ).toLocaleDateString("tr-TR")}
+                            {new Date(selectedPhase.startDate).toLocaleDateString('tr-TR')}
                           </p>
                         </div>
                         <div>
@@ -512,15 +457,12 @@ const ProjectPhases: React.FC = () => {
                             Planlanan Bitiş
                           </label>
                           <p className="text-sm text-gray-900">
-                            {new Date(selectedPhase.endDate).toLocaleDateString(
-                              "tr-TR"
-                            )}
+                            {new Date(selectedPhase.endDate).toLocaleDateString('tr-TR')}
                           </p>
                         </div>
                       </div>
 
-                      {(selectedPhase.actualStartDate ||
-                        selectedPhase.actualEndDate) && (
+                      {(selectedPhase.actualStartDate || selectedPhase.actualEndDate) && (
                         <div className="grid grid-cols-2 gap-2 mb-2 pt-2 border-t">
                           <div>
                             <label className="block text-xs font-medium text-gray-700 mb-1">
@@ -528,10 +470,10 @@ const ProjectPhases: React.FC = () => {
                             </label>
                             <p className="text-sm text-gray-900">
                               {selectedPhase.actualStartDate
-                                ? new Date(
-                                    selectedPhase.actualStartDate
-                                  ).toLocaleDateString("tr-TR")
-                                : "-"}
+                                ? new Date(selectedPhase.actualStartDate).toLocaleDateString(
+                                    'tr-TR',
+                                  )
+                                : '-'}
                             </p>
                           </div>
                           <div>
@@ -540,10 +482,8 @@ const ProjectPhases: React.FC = () => {
                             </label>
                             <p className="text-sm text-gray-900">
                               {selectedPhase.actualEndDate
-                                ? new Date(
-                                    selectedPhase.actualEndDate
-                                  ).toLocaleDateString("tr-TR")
-                                : "-"}
+                                ? new Date(selectedPhase.actualEndDate).toLocaleDateString('tr-TR')
+                                : '-'}
                             </p>
                           </div>
                         </div>
@@ -557,20 +497,15 @@ const ProjectPhases: React.FC = () => {
                           <div
                             className={`text-sm font-semibold ${
                               calculateScheduleVariance(selectedPhase) > 0
-                                ? "text-red-600"
-                                : "text-green-600"
+                                ? 'text-red-600'
+                                : 'text-green-600'
                             }`}
                           >
+                            {calculateScheduleVariance(selectedPhase) > 0 ? '+' : ''}
+                            {calculateScheduleVariance(selectedPhase).toFixed(1)}%
                             {calculateScheduleVariance(selectedPhase) > 0
-                              ? "+"
-                              : ""}
-                            {calculateScheduleVariance(selectedPhase).toFixed(
-                              1
-                            )}
-                            %
-                            {calculateScheduleVariance(selectedPhase) > 0
-                              ? " (Gecikme)"
-                              : " (Erken)"}
+                              ? ' (Gecikme)'
+                              : ' (Erken)'}
                           </div>
                         </div>
                       )}
@@ -578,9 +513,7 @@ const ProjectPhases: React.FC = () => {
                   </div>
 
                   <div>
-                    <h4 className="text-sm font-semibold mb-2">
-                      Bütçe Analizi
-                    </h4>
+                    <h4 className="text-sm font-semibold mb-2">Bütçe Analizi</h4>
                     <div className="bg-gray-50 p-2.5 rounded-lg">
                       <div className="grid grid-cols-2 gap-3 mb-3">
                         <div>
@@ -609,27 +542,25 @@ const ProjectPhases: React.FC = () => {
                           className={`text-lg font-semibold ${
                             calculateBudgetVariance(
                               selectedPhase.budget,
-                              selectedPhase.actualCost
+                              selectedPhase.actualCost,
                             ) > 0
-                              ? "text-red-600"
-                              : "text-green-600"
+                              ? 'text-red-600'
+                              : 'text-green-600'
                           }`}
                         >
+                          {calculateBudgetVariance(selectedPhase.budget, selectedPhase.actualCost) >
+                          0
+                            ? '+'
+                            : ''}
                           {calculateBudgetVariance(
                             selectedPhase.budget,
-                            selectedPhase.actualCost
-                          ) > 0
-                            ? "+"
-                            : ""}
-                          {calculateBudgetVariance(
-                            selectedPhase.budget,
-                            selectedPhase.actualCost
+                            selectedPhase.actualCost,
                           ).toFixed(1)}
                           %
                           <span className="text-sm font-normal text-gray-600 ml-2">
                             (₺
                             {Math.abs(
-                              selectedPhase.actualCost - selectedPhase.budget
+                              selectedPhase.actualCost - selectedPhase.budget,
                             ).toLocaleString()}
                             )
                           </span>
@@ -641,10 +572,7 @@ const ProjectPhases: React.FC = () => {
                           Kalan Bütçe
                         </label>
                         <p className="text-sm text-gray-900">
-                          ₺
-                          {(
-                            selectedPhase.budget - selectedPhase.actualCost
-                          ).toLocaleString()}
+                          ₺{(selectedPhase.budget - selectedPhase.actualCost).toLocaleString()}
                         </p>
                       </div>
                     </div>
@@ -660,8 +588,7 @@ const ProjectPhases: React.FC = () => {
                       <div className="flex items-center justify-between mb-2">
                         <span className="text-sm text-gray-600">İlerleme</span>
                         <span className="text-sm font-medium">
-                          {selectedPhase.completedMilestones}/
-                          {selectedPhase.milestones}
+                          {selectedPhase.completedMilestones}/{selectedPhase.milestones}
                         </span>
                       </div>
                       <div className="w-full bg-gray-200 rounded-full h-2 mb-3">
@@ -669,25 +596,20 @@ const ProjectPhases: React.FC = () => {
                           className="bg-green-500 h-2 rounded-full"
                           style={{
                             width: `${
-                              (selectedPhase.completedMilestones /
-                                selectedPhase.milestones) *
-                              100
+                              (selectedPhase.completedMilestones / selectedPhase.milestones) * 100
                             }%`,
                           }}
                         />
                       </div>
                       <p className="text-xs text-gray-600">
-                        {selectedPhase.milestones -
-                          selectedPhase.completedMilestones}{" "}
-                        milestone kaldı
+                        {selectedPhase.milestones - selectedPhase.completedMilestones} milestone
+                        kaldı
                       </p>
                     </div>
                   </div>
 
                   <div>
-                    <h4 className="text-sm font-semibold mb-2">
-                      Atanmış Ekipler
-                    </h4>
+                    <h4 className="text-sm font-semibold mb-2">Atanmış Ekipler</h4>
                     <div className="space-y-2">
                       {selectedPhase.assignedTeams.map((team, index) => (
                         <div
@@ -710,9 +632,7 @@ const ProjectPhases: React.FC = () => {
                           className="flex items-center gap-2 p-1.5 bg-gray-100 rounded"
                         >
                           <FaBullseye className="w-4 h-4 text-green-500" />
-                          <span className="text-sm text-gray-900">
-                            {deliverable}
-                          </span>
+                          <span className="text-sm text-gray-900">{deliverable}</span>
                         </div>
                       ))}
                     </div>
@@ -728,9 +648,7 @@ const ProjectPhases: React.FC = () => {
                             className="flex items-center gap-2 p-1.5 bg-red-50 rounded"
                           >
                             <FaExclamationTriangle className="w-4 h-4 text-red-500" />
-                            <span className="text-sm text-gray-900">
-                              {risk}
-                            </span>
+                            <span className="text-sm text-gray-900">{risk}</span>
                           </div>
                         ))}
                       </div>
@@ -749,8 +667,8 @@ const ProjectPhases: React.FC = () => {
               </button>
               <button
                 onClick={() => {
-                  closeModal();
-                  openEditModal(selectedPhase!);
+                  closeModal()
+                  openEditModal(selectedPhase!)
                 }}
                 className="px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2"
               >
@@ -778,12 +696,12 @@ const ProjectPhases: React.FC = () => {
                 </div>
                 <div>
                   <h3 className="text-lg font-bold text-gray-900">
-                    {isEditModalOpen ? "Aşama Düzenle" : "Yeni Aşama Oluştur"}
+                    {isEditModalOpen ? 'Aşama Düzenle' : 'Yeni Aşama Oluştur'}
                   </h3>
                   <p className="text-xs text-gray-600">
                     {isEditModalOpen
-                      ? "Mevcut aşama bilgilerini güncelleyin"
-                      : "Yeni bir proje aşaması tanımlayın"}
+                      ? 'Mevcut aşama bilgilerini güncelleyin'
+                      : 'Yeni bir proje aşaması tanımlayın'}
                   </p>
                 </div>
               </div>
@@ -830,9 +748,9 @@ const ProjectPhases: React.FC = () => {
                         {formData.projectId &&
                           (() => {
                             const selectedProject = mockProjects.find(
-                              (p) => p.id === formData.projectId
-                            );
-                            if (!selectedProject) return null;
+                              (p) => p.id === formData.projectId,
+                            )
+                            if (!selectedProject) return null
 
                             return (
                               <div className="mt-2 p-2 bg-blue-50 border border-blue-200 rounded-lg">
@@ -846,39 +764,32 @@ const ProjectPhases: React.FC = () => {
                                     </p>
                                     <div className="grid grid-cols-2 gap-2 text-xs">
                                       <div>
-                                        <span className="font-medium text-blue-800">
-                                          Durum:
-                                        </span>
+                                        <span className="font-medium text-blue-800">Durum:</span>
                                         <span
                                           className={`ml-1 px-2 py-1 rounded-full text-xs font-medium ${
-                                            selectedProject.status ===
-                                            ProjectStatusEnum.Active
-                                              ? "bg-green-100 text-green-800"
+                                            selectedProject.status === ProjectStatusEnum.Active
+                                              ? 'bg-green-100 text-green-800'
                                               : selectedProject.status ===
-                                                ProjectStatusEnum.Planning
-                                              ? "bg-yellow-100 text-yellow-800"
-                                              : "bg-gray-100 text-gray-800"
+                                                  ProjectStatusEnum.Planning
+                                                ? 'bg-yellow-100 text-yellow-800'
+                                                : 'bg-gray-100 text-gray-800'
                                           }`}
                                         >
-                                          {selectedProject.status ===
-                                          ProjectStatusEnum.Active
-                                            ? "Aktif"
-                                            : selectedProject.status ===
-                                              ProjectStatusEnum.Planning
-                                            ? "Planlama"
-                                            : selectedProject.status ===
-                                              ProjectStatusEnum.Completed
-                                            ? "Tamamlandı"
-                                            : selectedProject.status ===
-                                              ProjectStatusEnum.OnHold
-                                            ? "Beklemede"
-                                            : "Iptal"}
+                                          {selectedProject.status === ProjectStatusEnum.Active
+                                            ? 'Aktif'
+                                            : selectedProject.status === ProjectStatusEnum.Planning
+                                              ? 'Planlama'
+                                              : selectedProject.status ===
+                                                  ProjectStatusEnum.Completed
+                                                ? 'Tamamlandı'
+                                                : selectedProject.status ===
+                                                    ProjectStatusEnum.OnHold
+                                                  ? 'Beklemede'
+                                                  : 'Iptal'}
                                         </span>
                                       </div>
                                       <div>
-                                        <span className="font-medium text-blue-800">
-                                          İlerleme:
-                                        </span>
+                                        <span className="font-medium text-blue-800">İlerleme:</span>
                                         <span className="ml-1 text-blue-700">
                                           %{selectedProject.progress}
                                         </span>
@@ -888,37 +799,27 @@ const ProjectPhases: React.FC = () => {
                                           Başlangıç:
                                         </span>
                                         <span className="ml-1 text-blue-700">
-                                          {selectedProject.startDate.toLocaleDateString(
-                                            "tr-TR"
-                                          )}
+                                          {selectedProject.startDate.toLocaleDateString('tr-TR')}
                                         </span>
                                       </div>
                                       <div>
-                                        <span className="font-medium text-blue-800">
-                                          Bitiş:
-                                        </span>
+                                        <span className="font-medium text-blue-800">Bitiş:</span>
                                         <span className="ml-1 text-blue-700">
-                                          {selectedProject.endDate.toLocaleDateString(
-                                            "tr-TR"
-                                          )}
+                                          {selectedProject.endDate.toLocaleDateString('tr-TR')}
                                         </span>
                                       </div>
                                     </div>
                                   </div>
                                   <div className="ml-4 text-right">
                                     <div className="text-lg font-bold text-blue-900">
-                                      {selectedProject.budget.toLocaleString(
-                                        "tr-TR"
-                                      )}{" "}
+                                      {selectedProject.budget.toLocaleString('tr-TR')}{' '}
                                       {selectedProject.currency}
                                     </div>
-                                    <div className="text-xs text-blue-600">
-                                      Bütçe
-                                    </div>
+                                    <div className="text-xs text-blue-600">Bütçe</div>
                                   </div>
                                 </div>
                               </div>
-                            );
+                            )
                           })()}
                       </div>
                       <div>
@@ -979,21 +880,11 @@ const ProjectPhases: React.FC = () => {
                           onChange={handleInputChange}
                           className="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                         >
-                          <option value={PhaseStatusEnum.NotStarted}>
-                            Başlanmadı
-                          </option>
-                          <option value={PhaseStatusEnum.InProgress}>
-                            Devam Ediyor
-                          </option>
-                          <option value={PhaseStatusEnum.Completed}>
-                            Tamamlandı
-                          </option>
-                          <option value={PhaseStatusEnum.OnHold}>
-                            Beklemede
-                          </option>
-                          <option value={PhaseStatusEnum.Cancelled}>
-                            İptal Edildi
-                          </option>
+                          <option value={PhaseStatusEnum.NotStarted}>Başlanmadı</option>
+                          <option value={PhaseStatusEnum.InProgress}>Devam Ediyor</option>
+                          <option value={PhaseStatusEnum.Completed}>Tamamlandı</option>
+                          <option value={PhaseStatusEnum.OnHold}>Beklemede</option>
+                          <option value={PhaseStatusEnum.Cancelled}>İptal Edildi</option>
                         </select>
                       </div>
                     </div>
@@ -1075,9 +966,7 @@ const ProjectPhases: React.FC = () => {
                       <FaProjectDiagram className="w-4 h-4" />
                       <span className="text-sm font-medium">Aşama Kodu:</span>
                       <span className="font-bold">
-                        {isEditModalOpen
-                          ? editingPhase?.code
-                          : generatePhaseCode()}
+                        {isEditModalOpen ? editingPhase?.code : generatePhaseCode()}
                       </span>
                     </div>
                   </div>
@@ -1099,15 +988,15 @@ const ProjectPhases: React.FC = () => {
                   className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2 shadow-md hover:shadow-lg"
                 >
                   <FaSave className="w-4 h-4" />
-                  {isEditModalOpen ? "Güncelle" : "Oluştur"}
+                  {isEditModalOpen ? 'Güncelle' : 'Oluştur'}
                 </button>
               </div>
             </form>
           </div>
         </div>
       )}
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default ProjectPhases;
+export default ProjectPhases
diff --git a/ui/src/views/project/components/ProjectTasks.tsx b/ui/src/views/project/components/ProjectTasks.tsx
index 2b7b2ed6..5b75e10b 100644
--- a/ui/src/views/project/components/ProjectTasks.tsx
+++ b/ui/src/views/project/components/ProjectTasks.tsx
@@ -26,6 +26,7 @@ import {
   getPriorityColor,
   getTaskTypeColor,
 } from "../../../utils/erp";
+import { Container } from "@/components/shared";
 
 const ProjectTasks: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -166,12 +167,12 @@ const ProjectTasks: React.FC = () => {
   };
 
   return (
-    <div>
-      <div className="mb-3 mt-2">
+    <Container>
+      <div className="space-y-2">
         <div className="flex items-center justify-between mb-4">
           <div>
             <h2 className="text-xl font-bold text-gray-900">Görev Yönetimi</h2>
-            <p className="text-gray-600 mt-1">
+            <p className="text-gray-600">
               Proje görevlerinizi oluşturun, düzenleyin ve takip edin
             </p>
           </div>
@@ -1156,7 +1157,8 @@ const ProjectTasks: React.FC = () => {
           </div>
         </div>
       )}
-    </div>
+    </Container>
+
   );
 };
 
diff --git a/ui/src/views/project/components/ProjectView.tsx b/ui/src/views/project/components/ProjectView.tsx
index be15e45a..923f88c5 100644
--- a/ui/src/views/project/components/ProjectView.tsx
+++ b/ui/src/views/project/components/ProjectView.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { useParams, Link, useNavigate } from "react-router-dom";
+import React, { useState } from 'react'
+import { useParams, Link, useNavigate } from 'react-router-dom'
 import {
   FaArrowLeft,
   FaEdit,
@@ -16,14 +16,14 @@ import {
   FaFolder,
   FaPhone,
   FaEnvelope,
-} from "react-icons/fa";
-import { TaskStatusEnum } from "../../../types/ps";
-import { mockProjects } from "../../../mocks/mockProjects";
-import { mockProjectPhases } from "../../../mocks/mockProjectPhases";
-import { mockProjectTasks } from "../../../mocks/mockProjectTasks";
-import dayjs from "dayjs";
-import classNames from "classnames";
-import { PriorityEnum } from "../../../types/common";
+} from 'react-icons/fa'
+import { TaskStatusEnum } from '../../../types/ps'
+import { mockProjects } from '../../../mocks/mockProjects'
+import { mockProjectPhases } from '../../../mocks/mockProjectPhases'
+import { mockProjectTasks } from '../../../mocks/mockProjectTasks'
+import dayjs from 'dayjs'
+import classNames from 'classnames'
+import { PriorityEnum } from '../../../types/common'
 import {
   getProjectStatusColor,
   getProjectStatusIcon,
@@ -33,27 +33,24 @@ import {
   getPriorityText,
   getProjectTypeColor,
   getProjectTypeText,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const ProjectView: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const [activeTab, setActiveTab] = useState("overview");
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const [activeTab, setActiveTab] = useState('overview')
 
   // Find the project by ID
-  const project = mockProjects.find((p) => p.id === id);
+  const project = mockProjects.find((p) => p.id === id)
 
   if (!project) {
     return (
       <div className="min-h-screen bg-gray-50 flex items-center justify-center">
         <div className="text-center">
           <FaFolder className="mx-auto h-12 w-12 text-gray-400" />
-          <h3 className="mt-2 text-sm font-medium text-gray-900">
-            Proje bulunamadı
-          </h3>
-          <p className="mt-1 text-sm text-gray-500">
-            Belirtilen ID ile proje mevcut değil.
-          </p>
+          <h3 className="mt-2 text-sm font-medium text-gray-900">Proje bulunamadı</h3>
+          <p className="mt-1 text-sm text-gray-500">Belirtilen ID ile proje mevcut değil.</p>
           <div className="mt-6">
             <Link
               to="/admin/projects"
@@ -65,1062 +62,936 @@ const ProjectView: React.FC = () => {
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   const tabs = [
-    { id: "overview", name: "Genel Bakış", icon: FaChartLine },
-    { id: "phases", name: "Fazlar", icon: FaFlag },
-    { id: "tasks", name: "Görevler", icon: FaTasks },
-    { id: "documents", name: "Belgeler", icon: FaFileAlt },
-    { id: "risks", name: "Riskler", icon: FaExclamationCircle },
-    { id: "financial", name: "Mali Özet", icon: FaDollarSign },
-  ];
+    { id: 'overview', name: 'Genel Bakış', icon: FaChartLine },
+    { id: 'phases', name: 'Fazlar', icon: FaFlag },
+    { id: 'tasks', name: 'Görevler', icon: FaTasks },
+    { id: 'documents', name: 'Belgeler', icon: FaFileAlt },
+    { id: 'risks', name: 'Riskler', icon: FaExclamationCircle },
+    { id: 'financial', name: 'Mali Özet', icon: FaDollarSign },
+  ]
 
-  const budgetUsagePercentage = (project.actualCost / project.budget) * 100;
-  const timeElapsed = dayjs().diff(dayjs(project.startDate), "day");
-  const totalDuration = dayjs(project.endDate).diff(
-    dayjs(project.startDate),
-    "day"
-  );
-  const timeProgress = Math.min((timeElapsed / totalDuration) * 100, 100);
+  const budgetUsagePercentage = (project.actualCost / project.budget) * 100
+  const timeElapsed = dayjs().diff(dayjs(project.startDate), 'day')
+  const totalDuration = dayjs(project.endDate).diff(dayjs(project.startDate), 'day')
+  const timeProgress = Math.min((timeElapsed / totalDuration) * 100, 100)
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <div className="bg-white shadow-sm border-b border-gray-200">
-        <div className="mx-auto px-2">
-          <div className="flex items-center justify-between h-12">
-            <div className="flex items-center space-x-2">
-              <button
-                onClick={() => navigate("/admin/projects")}
-                className="flex items-center px-2 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-              >
-                <FaArrowLeft className="w-4 h-4 mr-2" />
-                Geri
-              </button>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="bg-white shadow-sm border-b border-gray-200">
+          <div className="p-2">
+            <div className="flex items-center justify-between h-12">
               <div className="flex items-center space-x-2">
-                <div className="w-9 h-9 bg-blue-100 rounded-lg flex items-center justify-center">
-                  <FaFolder className="w-6 h-6 text-blue-600" />
-                </div>
-                <div>
-                  <h1 className="text-lg font-bold text-gray-900">
-                    {project.code}
-                  </h1>
-                  <p className="text-sm text-gray-600">{project.name}</p>
+                <button
+                  onClick={() => navigate('/admin/projects')}
+                  className="flex items-center px-2 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  <FaArrowLeft className="w-4 h-4 mr-2" />
+                  Geri
+                </button>
+                <div className="flex items-center space-x-2">
+                  <div className="w-9 h-9 bg-blue-100 rounded-lg flex items-center justify-center">
+                    <FaFolder className="w-6 h-6 text-blue-600" />
+                  </div>
+                  <div>
+                    <h1 className="text-lg font-bold text-gray-900">{project.code}</h1>
+                    <p className="text-sm text-gray-600">{project.name}</p>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div className="flex items-center space-x-2">
-              <span
-                className={classNames(
-                  "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium border",
-                  getProjectStatusColor(project.status)
-                )}
-              >
-                {getProjectStatusIcon(project.status)}
-                <span className="ml-2">
-                  {getProjectStatusText(project.status)}
+              <div className="flex items-center space-x-2">
+                <span
+                  className={classNames(
+                    'inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium border',
+                    getProjectStatusColor(project.status),
+                  )}
+                >
+                  {getProjectStatusIcon(project.status)}
+                  <span className="ml-2">{getProjectStatusText(project.status)}</span>
                 </span>
-              </span>
-              <Link
-                to={`/admin/projects/edit/${project.id}`}
-                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"
-              >
-                <FaEdit className="w-4 h-4 mr-2" />
-                Düzenle
-              </Link>
+                <Link
+                  to={`/admin/projects/edit/${project.id}`}
+                  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"
+                >
+                  <FaEdit className="w-4 h-4 mr-2" />
+                  Düzenle
+                </Link>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div className="mx-auto py-2">
-        {/* Summary Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
-          {/* Progress Card */}
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
-            <div className="flex items-center justify-between mb-2">
-              <div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
-                <FaBullseye className="w-5 h-5 text-blue-600" />
+        <div className="mx-auto py-2">
+          {/* Summary Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
+            {/* Progress Card */}
+            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
+              <div className="flex items-center justify-between mb-2">
+                <div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
+                  <FaBullseye className="w-5 h-5 text-blue-600" />
+                </div>
+                <span className="text-lg font-bold text-blue-600">{project.progress}%</span>
+              </div>
+              <h3 className="text-sm font-medium text-gray-600 mb-1.5">İlerleme</h3>
+              <div className="w-full bg-gray-200 rounded-full h-1.5">
+                <div
+                  className={classNames('h-1.5 rounded-full', getProgressColor(project.progress))}
+                  style={{ width: `${project.progress}%` }}
+                />
               </div>
-              <span className="text-lg font-bold text-blue-600">
-                {project.progress}%
-              </span>
             </div>
-            <h3 className="text-sm font-medium text-gray-600 mb-1.5">
-              İlerleme
-            </h3>
-            <div className="w-full bg-gray-200 rounded-full h-1.5">
-              <div
-                className={classNames(
-                  "h-1.5 rounded-full",
-                  getProgressColor(project.progress)
-                )}
-                style={{ width: `${project.progress}%` }}
-              />
-            </div>
-          </div>
 
-          {/* Budget Card */}
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
-            <div className="flex items-center justify-between mb-2">
-              <div className="w-7 h-7 bg-green-100 rounded-lg flex items-center justify-center">
-                <FaDollarSign className="w-5 h-5 text-green-600" />
+            {/* Budget Card */}
+            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
+              <div className="flex items-center justify-between mb-2">
+                <div className="w-7 h-7 bg-green-100 rounded-lg flex items-center justify-center">
+                  <FaDollarSign className="w-5 h-5 text-green-600" />
+                </div>
+                <span className="text-lg font-bold text-green-600">
+                  {budgetUsagePercentage.toFixed(0)}%
+                </span>
+              </div>
+              <h3 className="text-sm font-medium text-gray-600 mb-1">Bütçe Kullanımı</h3>
+              <div className="text-xs text-gray-500">
+                ₺{project.actualCost.toLocaleString()} / ₺{project.budget.toLocaleString()}
               </div>
-              <span className="text-lg font-bold text-green-600">
-                {budgetUsagePercentage.toFixed(0)}%
-              </span>
             </div>
-            <h3 className="text-sm font-medium text-gray-600 mb-1">
-              Bütçe Kullanımı
-            </h3>
-            <div className="text-xs text-gray-500">
-              ₺{project.actualCost.toLocaleString()} / ₺
-              {project.budget.toLocaleString()}
-            </div>
-          </div>
 
-          {/* Time Progress Card */}
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
-            <div className="flex items-center justify-between mb-2">
-              <div className="w-7 h-7 bg-orange-100 rounded-lg flex items-center justify-center">
-                <FaClock className="w-5 h-5 text-orange-600" />
+            {/* Time Progress Card */}
+            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
+              <div className="flex items-center justify-between mb-2">
+                <div className="w-7 h-7 bg-orange-100 rounded-lg flex items-center justify-center">
+                  <FaClock className="w-5 h-5 text-orange-600" />
+                </div>
+                <span className="text-lg font-bold text-orange-600">
+                  {timeProgress.toFixed(0)}%
+                </span>
+              </div>
+              <h3 className="text-sm font-medium text-gray-600 mb-1">Zaman İlerlemesi</h3>
+              <div className="text-xs text-gray-500">
+                {timeElapsed} / {totalDuration} gün
               </div>
-              <span className="text-lg font-bold text-orange-600">
-                {timeProgress.toFixed(0)}%
-              </span>
             </div>
-            <h3 className="text-sm font-medium text-gray-600 mb-1">
-              Zaman İlerlemesi
-            </h3>
-            <div className="text-xs text-gray-500">
-              {timeElapsed} / {totalDuration} gün
-            </div>
-          </div>
 
-          {/* Priority Card */}
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
-            <div className="flex items-center justify-between mb-2">
-              <div className="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
-                <FaFlag className="w-5 h-5 text-red-600" />
+            {/* Priority Card */}
+            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
+              <div className="flex items-center justify-between mb-2">
+                <div className="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
+                  <FaFlag className="w-5 h-5 text-red-600" />
+                </div>
+                <span
+                  className={classNames('text-lg font-bold', getPriorityColor(project.priority))}
+                >
+                  {getPriorityText(project.priority)}
+                </span>
               </div>
+              <h3 className="text-sm font-medium text-gray-600 mb-1">Öncelik</h3>
               <span
                 className={classNames(
-                  "text-lg font-bold",
-                  getPriorityColor(project.priority)
+                  'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border',
+                  getProjectTypeColor(project.projectType),
                 )}
               >
-                {getPriorityText(project.priority)}
+                {getProjectTypeText(project.projectType)}
               </span>
             </div>
-            <h3 className="text-sm font-medium text-gray-600 mb-1">Öncelik</h3>
-            <span
-              className={classNames(
-                "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border",
-                getProjectTypeColor(project.projectType)
-              )}
-            >
-              {getProjectTypeText(project.projectType)}
-            </span>
-          </div>
-        </div>
-
-        {/* Tabs */}
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-          <div className="border-b border-gray-200">
-            <nav className="flex space-x-4 px-3" aria-label="Tabs">
-              {tabs.map((tab) => {
-                const Icon = tab.icon;
-                return (
-                  <button
-                    key={tab.id}
-                    onClick={() => setActiveTab(tab.id)}
-                    className={classNames(
-                      "py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 transition-colors",
-                      activeTab === tab.id
-                        ? "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" />
-                    <span>{tab.name}</span>
-                  </button>
-                );
-              })}
-            </nav>
           </div>
 
-          <div className="p-3">
-            {activeTab === "overview" && (
-              <div className="space-y-3">
-                {/* Project Info Grid */}
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-                  {/* Project Details */}
-                  <div className="space-y-3">
-                    <div>
-                      <h3 className="text-base font-semibold text-gray-900 mb-2">
-                        Proje Detayları
-                      </h3>
-                      <div className="bg-gray-50 rounded-lg p-2.5 space-y-1.5 text-sm">
-                        <div className="flex justify-between items-center">
-                          <span className="text-gray-600">Proje Kodu:</span>
-                          <span className="font-medium text-gray-900">
-                            {project.code}
-                          </span>
-                        </div>
-                        <div className="flex justify-between items-center">
-                          <span className="text-gray-600">Proje Türü:</span>
-                          <span
-                            className={classNames(
-                              "px-2 py-0.5 rounded-full text-xs font-medium border",
-                              getProjectTypeColor(project.projectType)
-                            )}
-                          >
-                            {getProjectTypeText(project.projectType)}
-                          </span>
-                        </div>
-                        <div className="flex justify-between items-center">
-                          <span className="text-gray-600">
-                            Başlangıç Tarihi:
-                          </span>
-                          <span className="font-medium text-gray-900">
-                            {dayjs(project.startDate).format("DD.MM.YYYY")}
-                          </span>
-                        </div>
-                        <div className="flex justify-between items-center">
-                          <span className="text-gray-600">Bitiş Tarihi:</span>
-                          <span className="font-medium text-gray-900">
-                            {dayjs(project.endDate).format("DD.MM.YYYY")}
-                          </span>
-                        </div>
-                        <div className="flex justify-between items-center">
-                          <span className="text-gray-600">
-                            Gerçek Başlangıç:
-                          </span>
-                          <span className="font-medium text-gray-900">
-                            {project.actualStartDate
-                              ? dayjs(project.actualStartDate).format(
-                                  "DD.MM.YYYY"
-                                )
-                              : "Henüz başlamadı"}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
+          {/* Tabs */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div className="border-b border-gray-200">
+              <nav className="flex space-x-4 px-3" aria-label="Tabs">
+                {tabs.map((tab) => {
+                  const Icon = tab.icon
+                  return (
+                    <button
+                      key={tab.id}
+                      onClick={() => setActiveTab(tab.id)}
+                      className={classNames(
+                        'py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 transition-colors',
+                        activeTab === tab.id
+                          ? '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" />
+                      <span>{tab.name}</span>
+                    </button>
+                  )
+                })}
+              </nav>
+            </div>
 
-                    {/* Description */}
-                    {project.description && (
+            <div className="p-3">
+              {activeTab === 'overview' && (
+                <div className="space-y-3">
+                  {/* Project Info Grid */}
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                    {/* Project Details */}
+                    <div className="space-y-3">
                       <div>
                         <h3 className="text-base font-semibold text-gray-900 mb-2">
-                          Açıklama
+                          Proje Detayları
                         </h3>
-                        <div className="bg-gray-50 rounded-lg p-2.5">
-                          <p className="text-sm text-gray-700 leading-relaxed">
-                            {project.description}
-                          </p>
+                        <div className="bg-gray-50 rounded-lg p-2.5 space-y-1.5 text-sm">
+                          <div className="flex justify-between items-center">
+                            <span className="text-gray-600">Proje Kodu:</span>
+                            <span className="font-medium text-gray-900">{project.code}</span>
+                          </div>
+                          <div className="flex justify-between items-center">
+                            <span className="text-gray-600">Proje Türü:</span>
+                            <span
+                              className={classNames(
+                                'px-2 py-0.5 rounded-full text-xs font-medium border',
+                                getProjectTypeColor(project.projectType),
+                              )}
+                            >
+                              {getProjectTypeText(project.projectType)}
+                            </span>
+                          </div>
+                          <div className="flex justify-between items-center">
+                            <span className="text-gray-600">Başlangıç Tarihi:</span>
+                            <span className="font-medium text-gray-900">
+                              {dayjs(project.startDate).format('DD.MM.YYYY')}
+                            </span>
+                          </div>
+                          <div className="flex justify-between items-center">
+                            <span className="text-gray-600">Bitiş Tarihi:</span>
+                            <span className="font-medium text-gray-900">
+                              {dayjs(project.endDate).format('DD.MM.YYYY')}
+                            </span>
+                          </div>
+                          <div className="flex justify-between items-center">
+                            <span className="text-gray-600">Gerçek Başlangıç:</span>
+                            <span className="font-medium text-gray-900">
+                              {project.actualStartDate
+                                ? dayjs(project.actualStartDate).format('DD.MM.YYYY')
+                                : 'Henüz başlamadı'}
+                            </span>
+                          </div>
                         </div>
                       </div>
-                    )}
-                  </div>
 
-                  {/* Stakeholders */}
-                  <div className="space-y-3">
-                    {/* Project Manager */}
-                    <div>
-                      <h3 className="text-base font-semibold text-gray-900 mb-2">
-                        Proje Yöneticisi
-                      </h3>
-                      {project.projectManager && (
-                        <div className="bg-gray-50 rounded-lg p-2.5">
-                          <div className="flex items-center space-x-2">
-                            <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>
-                              <h4 className="font-medium text-gray-900">
-                                {project.projectManager.fullName}
-                              </h4>
-                              <p className="text-sm text-gray-600">
-                                {project.projectManager.jobPosition?.name ||
-                                  "Proje Yöneticisi"}
-                              </p>
-                              <div className="flex items-center mt-1 text-sm text-gray-500">
-                                <FaEnvelope className="w-3 h-3 mr-1" />
-                                {project.projectManager.email}
-                              </div>
-                              {project.projectManager.phone && (
-                                <div className="flex items-center mt-1 text-sm text-gray-500">
-                                  <FaPhone className="w-3 h-3 mr-1" />
-                                  {project.projectManager.phone}
-                                </div>
-                              )}
-                            </div>
+                      {/* Description */}
+                      {project.description && (
+                        <div>
+                          <h3 className="text-base font-semibold text-gray-900 mb-2">Açıklama</h3>
+                          <div className="bg-gray-50 rounded-lg p-2.5">
+                            <p className="text-sm text-gray-700 leading-relaxed">
+                              {project.description}
+                            </p>
                           </div>
                         </div>
                       )}
                     </div>
 
-                    {/* Customer */}
-                    {project.customer && (
+                    {/* Stakeholders */}
+                    <div className="space-y-3">
+                      {/* Project Manager */}
                       <div>
                         <h3 className="text-base font-semibold text-gray-900 mb-2">
-                          Müşteri
+                          Proje Yöneticisi
                         </h3>
-                        <div className="bg-gray-50 rounded-lg p-2.5">
-                          <div className="flex items-center space-x-2">
-                            <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
-                              <FaBuilding className="w-6 h-6 text-green-600" />
-                            </div>
-                            <div>
-                              <h4 className="font-medium text-gray-900">
-                                {project.customer.name}
-                              </h4>
-                              <p className="text-sm text-gray-600">
-                                {project.customer.primaryContact?.firstName}{" "}
-                                {project.customer.primaryContact?.lastName}
-                              </p>
-                              {project.customer.primaryContact?.email && (
-                                <div className="flex items-center mt-1 text-sm text-gray-500">
-                                  <FaEnvelope className="w-3 h-3 mr-1" />
-                                  {project.customer.primaryContact.email}
-                                </div>
-                              )}
-                              {project.customer.primaryContact?.phone && (
-                                <div className="flex items-center mt-1 text-sm text-gray-500">
-                                  <FaPhone className="w-3 h-3 mr-1" />
-                                  {project.customer.primaryContact.phone}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {activeTab === "phases" && (
-              <div className="space-y-3">
-                {/* Phases List */}
-                <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                  <div className="divide-y divide-gray-200">
-                    {mockProjectPhases.filter(
-                      (phase) => phase.projectId === project.id
-                    ).length > 0 ? (
-                      mockProjectPhases
-                        .filter((phase) => phase.projectId === project.id)
-                        .map((phase) => (
-                          <div
-                            key={phase.id}
-                            className="px-3 py-2 hover:bg-gray-50"
-                          >
-                            <div className="flex items-start justify-between">
-                              <div className="flex-1">
-                                <div className="flex items-center space-x-2 mb-1.5">
-                                  <h4 className="text-sm font-medium text-gray-900">
-                                    {phase.name}
-                                  </h4>
-                                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                                    {phase.code}
-                                  </span>
-                                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                                    {phase.status}
-                                  </span>
-                                </div>
-                                <p className="text-sm text-gray-600 mb-1.5">
-                                  {phase.description}
-                                </p>
-                                <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-1.5">
-                                  <div>
-                                    <p className="text-xs font-medium text-gray-700">
-                                      Başlangıç
-                                    </p>
-                                    <p className="text-xs text-gray-600">
-                                      {dayjs(phase.startDate).format(
-                                        "DD.MM.YYYY"
-                                      )}
-                                    </p>
-                                  </div>
-                                  <div>
-                                    <p className="text-xs font-medium text-gray-700">
-                                      Bitiş
-                                    </p>
-                                    <p className="text-xs text-gray-600">
-                                      {dayjs(phase.endDate).format(
-                                        "DD.MM.YYYY"
-                                      )}
-                                    </p>
-                                  </div>
-                                  <div>
-                                    <p className="text-xs font-medium text-gray-700">
-                                      Bütçe
-                                    </p>
-                                    <p className="text-xs text-gray-600">
-                                      ₺{phase.budget.toLocaleString()}
-                                    </p>
-                                  </div>
-                                  <div>
-                                    <p className="text-xs font-medium text-gray-700">
-                                      İlerleme
-                                    </p>
-                                    <p className="text-xs text-gray-600">
-                                      %{phase.progress}
-                                    </p>
-                                  </div>
-                                </div>
-                                <div className="w-full bg-gray-200 rounded-full h-1.5">
-                                  <div
-                                    className="bg-blue-500 h-1.5 rounded-full"
-                                    style={{ width: `${phase.progress}%` }}
-                                  />
-                                </div>
-                              </div>
-                              <div className="flex items-center space-x-1 ml-2">
-                                <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
-                                  <FaFlag className="w-4 h-4" />
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        ))
-                    ) : (
-                      <div className="px-3 py-5 text-center">
-                        <FaFlag className="mx-auto h-12 w-12 text-gray-400" />
-                        <h3 className="mt-2 text-sm font-medium text-gray-900">
-                          Faz bulunamadı
-                        </h3>
-                        <p className="mt-1 text-sm text-gray-500">
-                          Bu proje için henüz faz tanımlanmamış.
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {activeTab === "tasks" && (
-              <div className="space-y-3">
-                {/* Tasks List */}
-                <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                  <div className="divide-y divide-gray-200">
-                    {mockProjectTasks.filter(
-                      (task) => task.projectId === project.id
-                    ).length > 0 ? (
-                      mockProjectTasks
-                        .filter((task) => task.projectId === project.id)
-                        .map((task) => (
-                          <div
-                            key={task.id}
-                            className="px-3 py-2 hover:bg-gray-50"
-                          >
-                            <div className="flex items-start justify-between">
-                              <div className="flex-1">
-                                <div className="flex items-center space-x-2 mb-1.5">
-                                  <h4 className="text-sm font-medium text-gray-900">
-                                    {task.name}
-                                  </h4>
-                                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                                    {task.taskCode}
-                                  </span>
-                                  <span
-                                    className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
-                                      task.status === TaskStatusEnum.Completed
-                                        ? "bg-green-100 text-green-800"
-                                        : task.status ===
-                                          TaskStatusEnum.InProgress
-                                        ? "bg-yellow-100 text-yellow-800"
-                                        : task.status ===
-                                          TaskStatusEnum.NotStarted
-                                        ? "bg-gray-100 text-gray-800"
-                                        : "bg-red-100 text-red-800"
-                                    }`}
-                                  >
-                                    {task.status === TaskStatusEnum.Completed
-                                      ? "Tamamlandı"
-                                      : task.status ===
-                                        TaskStatusEnum.InProgress
-                                      ? "Devam Ediyor"
-                                      : task.status ===
-                                        TaskStatusEnum.NotStarted
-                                      ? "Başlamadı"
-                                      : task.status}
-                                  </span>
-                                  <span
-                                    className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
-                                      task.priority === PriorityEnum.High
-                                        ? "bg-red-100 text-red-800"
-                                        : task.priority === PriorityEnum.Normal
-                                        ? "bg-orange-100 text-orange-800"
-                                        : "bg-green-100 text-green-800"
-                                    }`}
-                                  >
-                                    {task.priority === PriorityEnum.High
-                                      ? "Yüksek"
-                                      : task.priority === PriorityEnum.Normal
-                                      ? "Normal"
-                                      : task.priority === PriorityEnum.Urgent
-                                      ? "Acil"
-                                      : "Düşük"}
-                                  </span>
-                                </div>
-                                <p className="text-sm text-gray-600 mb-2">
-                                  {task.description}
-                                </p>
-                                <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-2">
-                                  <div>
-                                    <p className="text-xs font-medium text-gray-700">
-                                      Başlangıç
-                                    </p>
-                                    <p className="text-xs text-gray-600">
-                                      {dayjs(task.startDate).format(
-                                        "DD.MM.YYYY"
-                                      )}
-                                    </p>
-                                  </div>
-                                  <div>
-                                    <p className="text-xs font-medium text-gray-700">
-                                      Bitiş
-                                    </p>
-                                    <p className="text-xs text-gray-600">
-                                      {dayjs(task.endDate).format("DD.MM.YYYY")}
-                                    </p>
-                                  </div>
-                                  <div>
-                                    <p className="text-xs font-medium text-gray-700">
-                                      Tahmini Saat
-                                    </p>
-                                    <p className="text-xs text-gray-600">
-                                      {task.estimatedHours}h
-                                    </p>
-                                  </div>
-                                  <div>
-                                    <p className="text-xs font-medium text-gray-700">
-                                      İlerleme
-                                    </p>
-                                    <p className="text-xs text-gray-600">
-                                      %{task.progress}
-                                    </p>
-                                  </div>
-                                </div>
-                                <div className="w-full bg-gray-200 rounded-full h-1.5">
-                                  <div
-                                    className={`h-1.5 rounded-full ${
-                                      task.progress >= 90
-                                        ? "bg-green-500"
-                                        : task.progress >= 70
-                                        ? "bg-blue-500"
-                                        : task.progress >= 50
-                                        ? "bg-yellow-500"
-                                        : "bg-red-500"
-                                    }`}
-                                    style={{ width: `${task.progress}%` }}
-                                  />
-                                </div>
-                              </div>
-                              <div className="flex items-center space-x-1 ml-2">
-                                <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
-                                  <FaTasks className="w-4 h-4" />
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        ))
-                    ) : (
-                      <div className="px-3 py-5 text-center">
-                        <FaTasks className="mx-auto h-12 w-12 text-gray-400" />
-                        <h3 className="mt-2 text-sm font-medium text-gray-900">
-                          Görev bulunamadı
-                        </h3>
-                        <p className="mt-1 text-sm text-gray-500">
-                          Bu proje için henüz görev tanımlanmamış.
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {activeTab === "documents" && (
-              <div className="space-y-3">
-                {/* Documents List */}
-                <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                  <div className="divide-y divide-gray-200">
-                    {project.documents.length > 0 ? (
-                      project.documents.map((doc) => (
-                        <div
-                          key={doc.id}
-                          className="px-3 py-2 hover:bg-gray-50"
-                        >
-                          <div className="flex items-center justify-between">
+                        {project.projectManager && (
+                          <div className="bg-gray-50 rounded-lg p-2.5">
                             <div className="flex items-center space-x-2">
-                              <div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
-                                <FaFileAlt className="w-4 h-4 text-blue-600" />
+                              <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>
-                                <h4 className="text-sm font-medium text-gray-900">
-                                  {doc.documentName}
+                                <h4 className="font-medium text-gray-900">
+                                  {project.projectManager.fullName}
                                 </h4>
-                                <div className="flex items-center space-x-3 text-xs text-gray-500 mt-1">
-                                  <span>{doc.documentType}</span>
-                                  <span>{doc.fileSize} MB</span>
-                                  <span>
-                                    {dayjs(doc.uploadedAt).format("DD.MM.YYYY")}
-                                  </span>
-                                  <span>Yükleyen: {doc.uploadedBy}</span>
+                                <p className="text-sm text-gray-600">
+                                  {project.projectManager.jobPosition?.name || 'Proje Yöneticisi'}
+                                </p>
+                                <div className="flex items-center mt-1 text-sm text-gray-500">
+                                  <FaEnvelope className="w-3 h-3 mr-1" />
+                                  {project.projectManager.email}
                                 </div>
-                              </div>
-                            </div>
-                            <div className="flex items-center space-x-1 ml-2">
-                              <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
-                                <FaFolder className="w-4 h-4" />
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      ))
-                    ) : (
-                      <div className="px-3 py-5 text-center">
-                        <FaFileAlt className="mx-auto h-12 w-12 text-gray-400" />
-                        <h3 className="mt-2 text-sm font-medium text-gray-900">
-                          Belge bulunamadı
-                        </h3>
-                        <p className="mt-1 text-sm text-gray-500">
-                          Bu proje için henüz belge yüklenmemiş.
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {activeTab === "risks" && (
-              <div className="space-y-3">
-                {/* Risks List */}
-                <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                  <div className="divide-y divide-gray-200">
-                    {project.risks.length > 0 ? (
-                      project.risks.map((risk) => (
-                        <div
-                          key={risk.id}
-                          className="px-3 py-2 hover:bg-gray-50"
-                        >
-                          <div className="flex items-start justify-between">
-                            <div className="flex-1">
-                              <div className="flex items-center space-x-2 mb-1.5">
-                                <h4 className="text-sm font-medium text-gray-900">
-                                  {risk.title}
-                                </h4>
-                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
-                                  {risk.riskLevel}
-                                </span>
-                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                                  {risk.status}
-                                </span>
-                              </div>
-                              <p className="text-sm text-gray-600 mb-1.5">
-                                {risk.description}
-                              </p>
-                              {risk.mitigationPlan && (
-                                <div className="bg-gray-50 rounded-lg p-2 mb-2">
-                                  <p className="text-xs font-medium text-gray-700 mb-1">
-                                    Önlem Planı:
-                                  </p>
-                                  <p className="text-xs text-gray-600">
-                                    {risk.mitigationPlan}
-                                  </p>
-                                </div>
-                              )}
-                              <div className="flex items-center space-x-3 text-xs text-gray-500">
-                                <span>Risk Kodu: {risk.riskCode}</span>
-                                <span>
-                                  Tanımlama:{" "}
-                                  {dayjs(risk.identifiedDate).format(
-                                    "DD.MM.YYYY"
-                                  )}
-                                </span>
-                              </div>
-                            </div>
-                            <div className="flex items-center space-x-1 ml-2">
-                              <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
-                                <FaExclamationCircle className="w-4 h-4" />
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      ))
-                    ) : (
-                      <div className="px-3 py-5 text-center">
-                        <FaExclamationCircle className="mx-auto h-12 w-12 text-gray-400" />
-                        <h3 className="mt-2 text-sm font-medium text-gray-900">
-                          Risk bulunamadı
-                        </h3>
-                        <p className="mt-1 text-sm text-gray-500">
-                          Bu proje için henüz risk tanımlanmamış.
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Financial Summary Tab */}
-            {activeTab === "financial" && (
-              <div className="space-y-3">
-                {/* Overview Cards */}
-                <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-                  <div className="bg-white rounded-lg border border-gray-200 p-3">
-                    <div className="flex items-center">
-                      <div className="p-1.5 bg-blue-100 rounded-lg">
-                        <FaDollarSign className="h-5 w-5 text-blue-600" />
-                      </div>
-                      <div className="ml-2">
-                        <p className="text-sm font-medium text-gray-500">
-                          Toplam Bütçe
-                        </p>
-                        <p className="text-base font-semibold text-gray-900">
-                          ₺{project.budget.toLocaleString()}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="bg-white rounded-lg border border-gray-200 p-3">
-                    <div className="flex items-center">
-                      <div className="p-1.5 bg-red-100 rounded-lg">
-                        <FaDollarSign className="h-5 w-5 text-red-600" />
-                      </div>
-                      <div className="ml-2">
-                        <p className="text-sm font-medium text-gray-500">
-                          Harcanan
-                        </p>
-                        <p className="text-base font-semibold text-gray-900">
-                          ₺{project.actualCost.toLocaleString()}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="bg-white rounded-lg border border-gray-200 p-3">
-                    <div className="flex items-center">
-                      <div className="p-1.5 bg-green-100 rounded-lg">
-                        <FaDollarSign className="h-5 w-5 text-green-600" />
-                      </div>
-                      <div className="ml-2">
-                        <p className="text-sm font-medium text-gray-500">
-                          Kalan Bütçe
-                        </p>
-                        <p className="text-base font-semibold text-gray-900">
-                          ₺
-                          {(
-                            project.budget - project.actualCost
-                          ).toLocaleString()}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="bg-white rounded-lg border border-gray-200 p-3">
-                    <div className="flex items-center">
-                      <div className="p-1.5 bg-orange-100 rounded-lg">
-                        <FaChartLine className="h-5 w-5 text-orange-600" />
-                      </div>
-                      <div className="ml-2">
-                        <p className="text-sm font-medium text-gray-500">
-                          Kullanım Oranı
-                        </p>
-                        <p className="text-base font-semibold text-gray-900">
-                          %{budgetUsagePercentage.toFixed(1)}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Budget Progress */}
-                <div className="bg-white rounded-lg border border-gray-200 p-3">
-                  <h3 className="text-base font-semibold text-gray-900 mb-2">
-                    Bütçe Kullanım Durumu
-                  </h3>
-                  <div className="space-y-2">
-                    <div className="flex justify-between text-xs">
-                      <span>
-                        Harcanan: ₺{project.actualCost.toLocaleString()}
-                      </span>
-                      <span>Toplam: ₺{project.budget.toLocaleString()}</span>
-                    </div>
-                    <div className="w-full bg-gray-200 rounded-full h-2.5">
-                      <div
-                        className={`h-2.5 rounded-full transition-all duration-300 ${
-                          budgetUsagePercentage > 90
-                            ? "bg-red-500"
-                            : budgetUsagePercentage > 70
-                            ? "bg-orange-500"
-                            : "bg-green-500"
-                        }`}
-                        style={{
-                          width: `${Math.min(budgetUsagePercentage, 100)}%`,
-                        }}
-                      />
-                    </div>
-                    <div
-                      className={`text-xs font-medium ${
-                        budgetUsagePercentage > 90
-                          ? "text-red-600"
-                          : budgetUsagePercentage > 70
-                          ? "text-orange-600"
-                          : "text-green-600"
-                      }`}
-                    >
-                      {budgetUsagePercentage > 90
-                        ? "Kritik Seviye - Bütçe Aşımı Riski"
-                        : budgetUsagePercentage > 70
-                        ? "Dikkat - Yüksek Kullanım"
-                        : "Normal Seviye"}
-                    </div>
-                  </div>
-                </div>
-
-                {/* Phase Costs */}
-                <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
-                  <div className="px-3 py-2 border-b border-gray-200">
-                    <h3 className="text-base font-semibold text-gray-900">
-                      Faz Bazında Maliyet Analizi
-                    </h3>
-                  </div>
-                  <div className="overflow-x-auto">
-                    <table className="min-w-full divide-y divide-gray-200 text-sm">
-                      <thead className="bg-gray-50">
-                        <tr>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Faz Adı
-                          </th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Bütçe
-                          </th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Harcanan
-                          </th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Kalan
-                          </th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Kullanım %
-                          </th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Durum
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody className="bg-white divide-y divide-gray-200">
-                        {mockProjectPhases
-                          .filter((phase) => phase.projectId === project.id)
-                          .map((phase) => {
-                            const phaseUsage =
-                              (phase.actualCost / phase.budget) * 100;
-                            return (
-                              <tr key={phase.id} className="hover:bg-gray-50">
-                                <td className="px-3 py-2 whitespace-nowrap">
-                                  <div className="flex flex-col">
-                                    <div className="text-sm font-medium text-gray-900">
-                                      {phase.name}
-                                    </div>
-                                    <div className="text-sm text-gray-500">
-                                      {phase.code}
-                                    </div>
+                                {project.projectManager.phone && (
+                                  <div className="flex items-center mt-1 text-sm text-gray-500">
+                                    <FaPhone className="w-3 h-3 mr-1" />
+                                    {project.projectManager.phone}
                                   </div>
-                                </td>
-                                <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                                  ₺{phase.budget.toLocaleString()}
-                                </td>
-                                <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                                  ₺{phase.actualCost.toLocaleString()}
-                                </td>
-                                <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                                  ₺
-                                  {(
-                                    phase.budget - phase.actualCost
-                                  ).toLocaleString()}
-                                </td>
-                                <td className="px-3 py-2 whitespace-nowrap">
-                                  <div className="flex items-center">
-                                    <div className="w-14 bg-gray-200 rounded-full h-1.5 mr-2">
-                                      <div
-                                        className={`h-1.5 rounded-full ${
-                                          phaseUsage > 90
-                                            ? "bg-red-500"
-                                            : phaseUsage > 70
-                                            ? "bg-orange-500"
-                                            : "bg-green-500"
-                                        }`}
-                                        style={{
-                                          width: `${Math.min(
-                                            phaseUsage,
-                                            100
-                                          )}%`,
-                                        }}
-                                      />
-                                    </div>
-                                    <span className="text-sm text-gray-900">
-                                      {phaseUsage.toFixed(1)}%
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Customer */}
+                      {project.customer && (
+                        <div>
+                          <h3 className="text-base font-semibold text-gray-900 mb-2">Müşteri</h3>
+                          <div className="bg-gray-50 rounded-lg p-2.5">
+                            <div className="flex items-center space-x-2">
+                              <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                                <FaBuilding className="w-6 h-6 text-green-600" />
+                              </div>
+                              <div>
+                                <h4 className="font-medium text-gray-900">
+                                  {project.customer.name}
+                                </h4>
+                                <p className="text-sm text-gray-600">
+                                  {project.customer.primaryContact?.firstName}{' '}
+                                  {project.customer.primaryContact?.lastName}
+                                </p>
+                                {project.customer.primaryContact?.email && (
+                                  <div className="flex items-center mt-1 text-sm text-gray-500">
+                                    <FaEnvelope className="w-3 h-3 mr-1" />
+                                    {project.customer.primaryContact.email}
+                                  </div>
+                                )}
+                                {project.customer.primaryContact?.phone && (
+                                  <div className="flex items-center mt-1 text-sm text-gray-500">
+                                    <FaPhone className="w-3 h-3 mr-1" />
+                                    {project.customer.primaryContact.phone}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {activeTab === 'phases' && (
+                <div className="space-y-3">
+                  {/* Phases List */}
+                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <div className="divide-y divide-gray-200">
+                      {mockProjectPhases.filter((phase) => phase.projectId === project.id).length >
+                      0 ? (
+                        mockProjectPhases
+                          .filter((phase) => phase.projectId === project.id)
+                          .map((phase) => (
+                            <div key={phase.id} className="px-3 py-2 hover:bg-gray-50">
+                              <div className="flex items-start justify-between">
+                                <div className="flex-1">
+                                  <div className="flex items-center space-x-2 mb-1.5">
+                                    <h4 className="text-sm font-medium text-gray-900">
+                                      {phase.name}
+                                    </h4>
+                                    <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                      {phase.code}
+                                    </span>
+                                    <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                      {phase.status}
                                     </span>
                                   </div>
-                                </td>
-                                <td className="px-3 py-2 whitespace-nowrap">
-                                  <span
-                                    className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
-                                      phaseUsage > 100
-                                        ? "bg-red-100 text-red-800"
-                                        : phaseUsage > 90
-                                        ? "bg-orange-100 text-orange-800"
-                                        : phaseUsage > 70
-                                        ? "bg-yellow-100 text-yellow-800"
-                                        : "bg-green-100 text-green-800"
-                                    }`}
-                                  >
-                                    {phaseUsage > 100
-                                      ? "Bütçe Aşımı"
-                                      : phaseUsage > 90
-                                      ? "Kritik"
-                                      : phaseUsage > 70
-                                      ? "Dikkat"
-                                      : "Normal"}
+                                  <p className="text-sm text-gray-600 mb-1.5">
+                                    {phase.description}
+                                  </p>
+                                  <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-1.5">
+                                    <div>
+                                      <p className="text-xs font-medium text-gray-700">Başlangıç</p>
+                                      <p className="text-xs text-gray-600">
+                                        {dayjs(phase.startDate).format('DD.MM.YYYY')}
+                                      </p>
+                                    </div>
+                                    <div>
+                                      <p className="text-xs font-medium text-gray-700">Bitiş</p>
+                                      <p className="text-xs text-gray-600">
+                                        {dayjs(phase.endDate).format('DD.MM.YYYY')}
+                                      </p>
+                                    </div>
+                                    <div>
+                                      <p className="text-xs font-medium text-gray-700">Bütçe</p>
+                                      <p className="text-xs text-gray-600">
+                                        ₺{phase.budget.toLocaleString()}
+                                      </p>
+                                    </div>
+                                    <div>
+                                      <p className="text-xs font-medium text-gray-700">İlerleme</p>
+                                      <p className="text-xs text-gray-600">%{phase.progress}</p>
+                                    </div>
+                                  </div>
+                                  <div className="w-full bg-gray-200 rounded-full h-1.5">
+                                    <div
+                                      className="bg-blue-500 h-1.5 rounded-full"
+                                      style={{ width: `${phase.progress}%` }}
+                                    />
+                                  </div>
+                                </div>
+                                <div className="flex items-center space-x-1 ml-2">
+                                  <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
+                                    <FaFlag className="w-4 h-4" />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          ))
+                      ) : (
+                        <div className="px-3 py-5 text-center">
+                          <FaFlag className="mx-auto h-12 w-12 text-gray-400" />
+                          <h3 className="mt-2 text-sm font-medium text-gray-900">Faz bulunamadı</h3>
+                          <p className="mt-1 text-sm text-gray-500">
+                            Bu proje için henüz faz tanımlanmamış.
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {activeTab === 'tasks' && (
+                <div className="space-y-3">
+                  {/* Tasks List */}
+                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <div className="divide-y divide-gray-200">
+                      {mockProjectTasks.filter((task) => task.projectId === project.id).length >
+                      0 ? (
+                        mockProjectTasks
+                          .filter((task) => task.projectId === project.id)
+                          .map((task) => (
+                            <div key={task.id} className="px-3 py-2 hover:bg-gray-50">
+                              <div className="flex items-start justify-between">
+                                <div className="flex-1">
+                                  <div className="flex items-center space-x-2 mb-1.5">
+                                    <h4 className="text-sm font-medium text-gray-900">
+                                      {task.name}
+                                    </h4>
+                                    <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                      {task.taskCode}
+                                    </span>
+                                    <span
+                                      className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
+                                        task.status === TaskStatusEnum.Completed
+                                          ? 'bg-green-100 text-green-800'
+                                          : task.status === TaskStatusEnum.InProgress
+                                            ? 'bg-yellow-100 text-yellow-800'
+                                            : task.status === TaskStatusEnum.NotStarted
+                                              ? 'bg-gray-100 text-gray-800'
+                                              : 'bg-red-100 text-red-800'
+                                      }`}
+                                    >
+                                      {task.status === TaskStatusEnum.Completed
+                                        ? 'Tamamlandı'
+                                        : task.status === TaskStatusEnum.InProgress
+                                          ? 'Devam Ediyor'
+                                          : task.status === TaskStatusEnum.NotStarted
+                                            ? 'Başlamadı'
+                                            : task.status}
+                                    </span>
+                                    <span
+                                      className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
+                                        task.priority === PriorityEnum.High
+                                          ? 'bg-red-100 text-red-800'
+                                          : task.priority === PriorityEnum.Normal
+                                            ? 'bg-orange-100 text-orange-800'
+                                            : 'bg-green-100 text-green-800'
+                                      }`}
+                                    >
+                                      {task.priority === PriorityEnum.High
+                                        ? 'Yüksek'
+                                        : task.priority === PriorityEnum.Normal
+                                          ? 'Normal'
+                                          : task.priority === PriorityEnum.Urgent
+                                            ? 'Acil'
+                                            : 'Düşük'}
+                                    </span>
+                                  </div>
+                                  <p className="text-sm text-gray-600 mb-2">{task.description}</p>
+                                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-2">
+                                    <div>
+                                      <p className="text-xs font-medium text-gray-700">Başlangıç</p>
+                                      <p className="text-xs text-gray-600">
+                                        {dayjs(task.startDate).format('DD.MM.YYYY')}
+                                      </p>
+                                    </div>
+                                    <div>
+                                      <p className="text-xs font-medium text-gray-700">Bitiş</p>
+                                      <p className="text-xs text-gray-600">
+                                        {dayjs(task.endDate).format('DD.MM.YYYY')}
+                                      </p>
+                                    </div>
+                                    <div>
+                                      <p className="text-xs font-medium text-gray-700">
+                                        Tahmini Saat
+                                      </p>
+                                      <p className="text-xs text-gray-600">
+                                        {task.estimatedHours}h
+                                      </p>
+                                    </div>
+                                    <div>
+                                      <p className="text-xs font-medium text-gray-700">İlerleme</p>
+                                      <p className="text-xs text-gray-600">%{task.progress}</p>
+                                    </div>
+                                  </div>
+                                  <div className="w-full bg-gray-200 rounded-full h-1.5">
+                                    <div
+                                      className={`h-1.5 rounded-full ${
+                                        task.progress >= 90
+                                          ? 'bg-green-500'
+                                          : task.progress >= 70
+                                            ? 'bg-blue-500'
+                                            : task.progress >= 50
+                                              ? 'bg-yellow-500'
+                                              : 'bg-red-500'
+                                      }`}
+                                      style={{ width: `${task.progress}%` }}
+                                    />
+                                  </div>
+                                </div>
+                                <div className="flex items-center space-x-1 ml-2">
+                                  <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
+                                    <FaTasks className="w-4 h-4" />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          ))
+                      ) : (
+                        <div className="px-3 py-5 text-center">
+                          <FaTasks className="mx-auto h-12 w-12 text-gray-400" />
+                          <h3 className="mt-2 text-sm font-medium text-gray-900">
+                            Görev bulunamadı
+                          </h3>
+                          <p className="mt-1 text-sm text-gray-500">
+                            Bu proje için henüz görev tanımlanmamış.
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {activeTab === 'documents' && (
+                <div className="space-y-3">
+                  {/* Documents List */}
+                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <div className="divide-y divide-gray-200">
+                      {project.documents.length > 0 ? (
+                        project.documents.map((doc) => (
+                          <div key={doc.id} className="px-3 py-2 hover:bg-gray-50">
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center space-x-2">
+                                <div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
+                                  <FaFileAlt className="w-4 h-4 text-blue-600" />
+                                </div>
+                                <div>
+                                  <h4 className="text-sm font-medium text-gray-900">
+                                    {doc.documentName}
+                                  </h4>
+                                  <div className="flex items-center space-x-3 text-xs text-gray-500 mt-1">
+                                    <span>{doc.documentType}</span>
+                                    <span>{doc.fileSize} MB</span>
+                                    <span>{dayjs(doc.uploadedAt).format('DD.MM.YYYY')}</span>
+                                    <span>Yükleyen: {doc.uploadedBy}</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div className="flex items-center space-x-1 ml-2">
+                                <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
+                                  <FaFolder className="w-4 h-4" />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        ))
+                      ) : (
+                        <div className="px-3 py-5 text-center">
+                          <FaFileAlt className="mx-auto h-12 w-12 text-gray-400" />
+                          <h3 className="mt-2 text-sm font-medium text-gray-900">
+                            Belge bulunamadı
+                          </h3>
+                          <p className="mt-1 text-sm text-gray-500">
+                            Bu proje için henüz belge yüklenmemiş.
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {activeTab === 'risks' && (
+                <div className="space-y-3">
+                  {/* Risks List */}
+                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <div className="divide-y divide-gray-200">
+                      {project.risks.length > 0 ? (
+                        project.risks.map((risk) => (
+                          <div key={risk.id} className="px-3 py-2 hover:bg-gray-50">
+                            <div className="flex items-start justify-between">
+                              <div className="flex-1">
+                                <div className="flex items-center space-x-2 mb-1.5">
+                                  <h4 className="text-sm font-medium text-gray-900">
+                                    {risk.title}
+                                  </h4>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                                    {risk.riskLevel}
                                   </span>
-                                </td>
-                              </tr>
-                            );
-                          })}
-                      </tbody>
-                    </table>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                    {risk.status}
+                                  </span>
+                                </div>
+                                <p className="text-sm text-gray-600 mb-1.5">{risk.description}</p>
+                                {risk.mitigationPlan && (
+                                  <div className="bg-gray-50 rounded-lg p-2 mb-2">
+                                    <p className="text-xs font-medium text-gray-700 mb-1">
+                                      Önlem Planı:
+                                    </p>
+                                    <p className="text-xs text-gray-600">{risk.mitigationPlan}</p>
+                                  </div>
+                                )}
+                                <div className="flex items-center space-x-3 text-xs text-gray-500">
+                                  <span>Risk Kodu: {risk.riskCode}</span>
+                                  <span>
+                                    Tanımlama: {dayjs(risk.identifiedDate).format('DD.MM.YYYY')}
+                                  </span>
+                                </div>
+                              </div>
+                              <div className="flex items-center space-x-1 ml-2">
+                                <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
+                                  <FaExclamationCircle className="w-4 h-4" />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        ))
+                      ) : (
+                        <div className="px-3 py-5 text-center">
+                          <FaExclamationCircle className="mx-auto h-12 w-12 text-gray-400" />
+                          <h3 className="mt-2 text-sm font-medium text-gray-900">
+                            Risk bulunamadı
+                          </h3>
+                          <p className="mt-1 text-sm text-gray-500">
+                            Bu proje için henüz risk tanımlanmamış.
+                          </p>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </div>
+              )}
 
-                {/* Cost Breakdown */}
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-                  <div className="bg-white rounded-lg border border-gray-200 p-3">
-                    <h3 className="text-base font-semibold text-gray-900 mb-2">
-                      Maliyet Kategorileri
-                    </h3>
-                    <div className="space-y-2">
-                      <div className="flex justify-between items-center">
-                        <span className="text-sm text-gray-600">
-                          Personel Maliyeti
-                        </span>
-                        <span className="text-sm font-medium text-gray-900">
-                          ₺{(project.actualCost * 0.6).toLocaleString()}
-                        </span>
+              {/* Financial Summary Tab */}
+              {activeTab === 'financial' && (
+                <div className="space-y-3">
+                  {/* Overview Cards */}
+                  <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+                    <div className="bg-white rounded-lg border border-gray-200 p-3">
+                      <div className="flex items-center">
+                        <div className="p-1.5 bg-blue-100 rounded-lg">
+                          <FaDollarSign className="h-5 w-5 text-blue-600" />
+                        </div>
+                        <div className="ml-2">
+                          <p className="text-sm font-medium text-gray-500">Toplam Bütçe</p>
+                          <p className="text-base font-semibold text-gray-900">
+                            ₺{project.budget.toLocaleString()}
+                          </p>
+                        </div>
                       </div>
-                      <div className="flex justify-between items-center">
-                        <span className="text-sm text-gray-600">
-                          Malzeme Maliyeti
-                        </span>
-                        <span className="text-sm font-medium text-gray-900">
-                          ₺{(project.actualCost * 0.25).toLocaleString()}
-                        </span>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-3">
+                      <div className="flex items-center">
+                        <div className="p-1.5 bg-red-100 rounded-lg">
+                          <FaDollarSign className="h-5 w-5 text-red-600" />
+                        </div>
+                        <div className="ml-2">
+                          <p className="text-sm font-medium text-gray-500">Harcanan</p>
+                          <p className="text-base font-semibold text-gray-900">
+                            ₺{project.actualCost.toLocaleString()}
+                          </p>
+                        </div>
                       </div>
-                      <div className="flex justify-between items-center">
-                        <span className="text-sm text-gray-600">
-                          İş Merkezi Maliyeti
-                        </span>
-                        <span className="text-sm font-medium text-gray-900">
-                          ₺{(project.actualCost * 0.1).toLocaleString()}
-                        </span>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-3">
+                      <div className="flex items-center">
+                        <div className="p-1.5 bg-green-100 rounded-lg">
+                          <FaDollarSign className="h-5 w-5 text-green-600" />
+                        </div>
+                        <div className="ml-2">
+                          <p className="text-sm font-medium text-gray-500">Kalan Bütçe</p>
+                          <p className="text-base font-semibold text-gray-900">
+                            ₺{(project.budget - project.actualCost).toLocaleString()}
+                          </p>
+                        </div>
                       </div>
-                      <div className="flex justify-between items-center">
-                        <span className="text-sm text-gray-600">
-                          Diğer Giderler
-                        </span>
-                        <span className="text-sm font-medium text-gray-900">
-                          ₺{(project.actualCost * 0.05).toLocaleString()}
-                        </span>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-3">
+                      <div className="flex items-center">
+                        <div className="p-1.5 bg-orange-100 rounded-lg">
+                          <FaChartLine className="h-5 w-5 text-orange-600" />
+                        </div>
+                        <div className="ml-2">
+                          <p className="text-sm font-medium text-gray-500">Kullanım Oranı</p>
+                          <p className="text-base font-semibold text-gray-900">
+                            %{budgetUsagePercentage.toFixed(1)}
+                          </p>
+                        </div>
                       </div>
                     </div>
                   </div>
 
+                  {/* Budget Progress */}
                   <div className="bg-white rounded-lg border border-gray-200 p-3">
                     <h3 className="text-base font-semibold text-gray-900 mb-2">
-                      Maliyet Analizi
+                      Bütçe Kullanım Durumu
                     </h3>
                     <div className="space-y-2">
-                      <div>
-                        <div className="flex justify-between mb-1">
-                          <span className="text-sm text-gray-600">
-                            Ortalama Günlük Harcama
-                          </span>
+                      <div className="flex justify-between text-xs">
+                        <span>Harcanan: ₺{project.actualCost.toLocaleString()}</span>
+                        <span>Toplam: ₺{project.budget.toLocaleString()}</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-2.5">
+                        <div
+                          className={`h-2.5 rounded-full transition-all duration-300 ${
+                            budgetUsagePercentage > 90
+                              ? 'bg-red-500'
+                              : budgetUsagePercentage > 70
+                                ? 'bg-orange-500'
+                                : 'bg-green-500'
+                          }`}
+                          style={{
+                            width: `${Math.min(budgetUsagePercentage, 100)}%`,
+                          }}
+                        />
+                      </div>
+                      <div
+                        className={`text-xs font-medium ${
+                          budgetUsagePercentage > 90
+                            ? 'text-red-600'
+                            : budgetUsagePercentage > 70
+                              ? 'text-orange-600'
+                              : 'text-green-600'
+                        }`}
+                      >
+                        {budgetUsagePercentage > 90
+                          ? 'Kritik Seviye - Bütçe Aşımı Riski'
+                          : budgetUsagePercentage > 70
+                            ? 'Dikkat - Yüksek Kullanım'
+                            : 'Normal Seviye'}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Phase Costs */}
+                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <div className="px-3 py-2 border-b border-gray-200">
+                      <h3 className="text-base font-semibold text-gray-900">
+                        Faz Bazında Maliyet Analizi
+                      </h3>
+                    </div>
+                    <div className="overflow-x-auto">
+                      <table className="min-w-full divide-y divide-gray-200 text-sm">
+                        <thead className="bg-gray-50">
+                          <tr>
+                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                              Faz Adı
+                            </th>
+                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                              Bütçe
+                            </th>
+                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                              Harcanan
+                            </th>
+                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                              Kalan
+                            </th>
+                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                              Kullanım %
+                            </th>
+                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                              Durum
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody className="bg-white divide-y divide-gray-200">
+                          {mockProjectPhases
+                            .filter((phase) => phase.projectId === project.id)
+                            .map((phase) => {
+                              const phaseUsage = (phase.actualCost / phase.budget) * 100
+                              return (
+                                <tr key={phase.id} className="hover:bg-gray-50">
+                                  <td className="px-3 py-2 whitespace-nowrap">
+                                    <div className="flex flex-col">
+                                      <div className="text-sm font-medium text-gray-900">
+                                        {phase.name}
+                                      </div>
+                                      <div className="text-sm text-gray-500">{phase.code}</div>
+                                    </div>
+                                  </td>
+                                  <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                                    ₺{phase.budget.toLocaleString()}
+                                  </td>
+                                  <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                                    ₺{phase.actualCost.toLocaleString()}
+                                  </td>
+                                  <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                                    ₺{(phase.budget - phase.actualCost).toLocaleString()}
+                                  </td>
+                                  <td className="px-3 py-2 whitespace-nowrap">
+                                    <div className="flex items-center">
+                                      <div className="w-14 bg-gray-200 rounded-full h-1.5 mr-2">
+                                        <div
+                                          className={`h-1.5 rounded-full ${
+                                            phaseUsage > 90
+                                              ? 'bg-red-500'
+                                              : phaseUsage > 70
+                                                ? 'bg-orange-500'
+                                                : 'bg-green-500'
+                                          }`}
+                                          style={{
+                                            width: `${Math.min(phaseUsage, 100)}%`,
+                                          }}
+                                        />
+                                      </div>
+                                      <span className="text-sm text-gray-900">
+                                        {phaseUsage.toFixed(1)}%
+                                      </span>
+                                    </div>
+                                  </td>
+                                  <td className="px-3 py-2 whitespace-nowrap">
+                                    <span
+                                      className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
+                                        phaseUsage > 100
+                                          ? 'bg-red-100 text-red-800'
+                                          : phaseUsage > 90
+                                            ? 'bg-orange-100 text-orange-800'
+                                            : phaseUsage > 70
+                                              ? 'bg-yellow-100 text-yellow-800'
+                                              : 'bg-green-100 text-green-800'
+                                      }`}
+                                    >
+                                      {phaseUsage > 100
+                                        ? 'Bütçe Aşımı'
+                                        : phaseUsage > 90
+                                          ? 'Kritik'
+                                          : phaseUsage > 70
+                                            ? 'Dikkat'
+                                            : 'Normal'}
+                                    </span>
+                                  </td>
+                                </tr>
+                              )
+                            })}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+
+                  {/* Cost Breakdown */}
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                    <div className="bg-white rounded-lg border border-gray-200 p-3">
+                      <h3 className="text-base font-semibold text-gray-900 mb-2">
+                        Maliyet Kategorileri
+                      </h3>
+                      <div className="space-y-2">
+                        <div className="flex justify-between items-center">
+                          <span className="text-sm text-gray-600">Personel Maliyeti</span>
                           <span className="text-sm font-medium text-gray-900">
-                            ₺
-                            {Math.round(
-                              project.actualCost / Math.max(timeElapsed, 1)
-                            ).toLocaleString()}
+                            ₺{(project.actualCost * 0.6).toLocaleString()}
                           </span>
                         </div>
-                      </div>
-                      <div>
-                        <div className="flex justify-between mb-1">
-                          <span className="text-sm text-gray-600">
-                            Tahmini Proje Sonu Maliyeti
-                          </span>
+                        <div className="flex justify-between items-center">
+                          <span className="text-sm text-gray-600">Malzeme Maliyeti</span>
                           <span className="text-sm font-medium text-gray-900">
-                            ₺
-                            {Math.round(
-                              (project.actualCost /
-                                Math.max(project.progress, 1)) *
-                                100
-                            ).toLocaleString()}
+                            ₺{(project.actualCost * 0.25).toLocaleString()}
+                          </span>
+                        </div>
+                        <div className="flex justify-between items-center">
+                          <span className="text-sm text-gray-600">İş Merkezi Maliyeti</span>
+                          <span className="text-sm font-medium text-gray-900">
+                            ₺{(project.actualCost * 0.1).toLocaleString()}
+                          </span>
+                        </div>
+                        <div className="flex justify-between items-center">
+                          <span className="text-sm text-gray-600">Diğer Giderler</span>
+                          <span className="text-sm font-medium text-gray-900">
+                            ₺{(project.actualCost * 0.05).toLocaleString()}
                           </span>
                         </div>
                       </div>
-                      <div>
-                        <div className="flex justify-between mb-1">
-                          <span className="text-sm text-gray-600">
-                            Maliyet Varyansı
-                          </span>
-                          <span
-                            className={`text-sm font-medium ${
-                              project.actualCost > project.budget
-                                ? "text-red-600"
-                                : "text-green-600"
-                            }`}
-                          >
-                            {project.actualCost > project.budget ? "+" : ""}₺
-                            {(
-                              project.actualCost - project.budget
-                            ).toLocaleString()}
-                          </span>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-3">
+                      <h3 className="text-base font-semibold text-gray-900 mb-2">
+                        Maliyet Analizi
+                      </h3>
+                      <div className="space-y-2">
+                        <div>
+                          <div className="flex justify-between mb-1">
+                            <span className="text-sm text-gray-600">Ortalama Günlük Harcama</span>
+                            <span className="text-sm font-medium text-gray-900">
+                              ₺
+                              {Math.round(
+                                project.actualCost / Math.max(timeElapsed, 1),
+                              ).toLocaleString()}
+                            </span>
+                          </div>
                         </div>
-                      </div>
-                      <div>
-                        <div className="flex justify-between mb-1">
-                          <span className="text-sm text-gray-600">
-                            CPI (Maliyet Performans İndeksi)
-                          </span>
-                          <span
-                            className={`text-sm font-medium ${
-                              project.budget / project.actualCost >= 1
-                                ? "text-green-600"
-                                : "text-red-600"
-                            }`}
-                          >
-                            {(project.budget / project.actualCost).toFixed(2)}
-                          </span>
+                        <div>
+                          <div className="flex justify-between mb-1">
+                            <span className="text-sm text-gray-600">
+                              Tahmini Proje Sonu Maliyeti
+                            </span>
+                            <span className="text-sm font-medium text-gray-900">
+                              ₺
+                              {Math.round(
+                                (project.actualCost / Math.max(project.progress, 1)) * 100,
+                              ).toLocaleString()}
+                            </span>
+                          </div>
+                        </div>
+                        <div>
+                          <div className="flex justify-between mb-1">
+                            <span className="text-sm text-gray-600">Maliyet Varyansı</span>
+                            <span
+                              className={`text-sm font-medium ${
+                                project.actualCost > project.budget
+                                  ? 'text-red-600'
+                                  : 'text-green-600'
+                              }`}
+                            >
+                              {project.actualCost > project.budget ? '+' : ''}₺
+                              {(project.actualCost - project.budget).toLocaleString()}
+                            </span>
+                          </div>
+                        </div>
+                        <div>
+                          <div className="flex justify-between mb-1">
+                            <span className="text-sm text-gray-600">
+                              CPI (Maliyet Performans İndeksi)
+                            </span>
+                            <span
+                              className={`text-sm font-medium ${
+                                project.budget / project.actualCost >= 1
+                                  ? 'text-green-600'
+                                  : 'text-red-600'
+                              }`}
+                            >
+                              {(project.budget / project.actualCost).toFixed(2)}
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default ProjectView;
+export default ProjectView
diff --git a/ui/src/views/project/components/TaskDailyUpdates.tsx b/ui/src/views/project/components/TaskDailyUpdates.tsx
index 53c9ae42..6950ef6a 100644
--- a/ui/src/views/project/components/TaskDailyUpdates.tsx
+++ b/ui/src/views/project/components/TaskDailyUpdates.tsx
@@ -1,99 +1,77 @@
-import React, { useState } from "react";
-import { FaPlus, FaSave, FaEdit, FaTrash, FaCalendarAlt } from "react-icons/fa";
-import {
-  PsTaskDailyUpdate,
-  WorkTypeEnum,
-  DailyUpdateStatusEnum,
-} from "../../../types/ps";
-import { mockProjectTasks } from "../../../mocks/mockProjectTasks";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockProjectTaskDailyUpdates } from "../../../mocks/mockProjectTaskDailyUpdates";
-import Widget from "../../../components/common/Widget";
-import {
-  getDailyUpdateStatusColor,
-  getWorkTypeColor,
-} from "../../../utils/erp";
+import React, { useState } from 'react'
+import { FaPlus, FaSave, FaEdit, FaTrash, FaCalendarAlt } from 'react-icons/fa'
+import { PsTaskDailyUpdate, WorkTypeEnum, DailyUpdateStatusEnum } from '../../../types/ps'
+import { mockProjectTasks } from '../../../mocks/mockProjectTasks'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockProjectTaskDailyUpdates } from '../../../mocks/mockProjectTaskDailyUpdates'
+import Widget from '../../../components/common/Widget'
+import { getDailyUpdateStatusColor, getWorkTypeColor } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 interface TaskDailyUpdatesFormData {
-  taskId: string;
-  date: string;
-  hoursWorked: number;
-  description: string;
-  workType: WorkTypeEnum;
-  progress: number;
-  challenges?: string;
-  nextSteps?: string;
+  taskId: string
+  date: string
+  hoursWorked: number
+  description: string
+  workType: WorkTypeEnum
+  progress: number
+  challenges?: string
+  nextSteps?: string
 }
 
 const initialFormData: TaskDailyUpdatesFormData = {
-  taskId: "",
-  date: new Date().toISOString().split("T")[0],
+  taskId: '',
+  date: new Date().toISOString().split('T')[0],
   hoursWorked: 0,
-  description: "",
+  description: '',
   workType: WorkTypeEnum.Development,
   progress: 0,
-  challenges: "",
-  nextSteps: "",
-};
+  challenges: '',
+  nextSteps: '',
+}
 
 const TaskDailyUpdates: React.FC = () => {
-  const [updates, setUpdates] = useState<PsTaskDailyUpdate[]>(
-    mockProjectTaskDailyUpdates
-  );
-  const [editingUpdate, setEditingUpdate] = useState<PsTaskDailyUpdate | null>(
-    null
-  );
-  const [formData, setFormData] =
-    useState<TaskDailyUpdatesFormData>(initialFormData);
-  const [selectedDate, setSelectedDate] = useState<string>(
-    new Date().toISOString().split("T")[0]
-  );
-  const [selectedEmployee, setSelectedEmployee] = useState<string>(
-    mockEmployees[0].id
-  );
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [searchQuery, setSearchQuery] = useState<string>("");
-  const [selectedEmployeeForForm, setSelectedEmployeeForForm] =
-    useState<string>(mockEmployees[0].id);
+  const [updates, setUpdates] = useState<PsTaskDailyUpdate[]>(mockProjectTaskDailyUpdates)
+  const [editingUpdate, setEditingUpdate] = useState<PsTaskDailyUpdate | null>(null)
+  const [formData, setFormData] = useState<TaskDailyUpdatesFormData>(initialFormData)
+  const [selectedDate, setSelectedDate] = useState<string>(new Date().toISOString().split('T')[0])
+  const [selectedEmployee, setSelectedEmployee] = useState<string>(mockEmployees[0].id)
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const [searchQuery, setSearchQuery] = useState<string>('')
+  const [selectedEmployeeForForm, setSelectedEmployeeForForm] = useState<string>(
+    mockEmployees[0].id,
+  )
 
   // Filter updates based on selected filters
   const filteredUpdates = updates.filter((update) => {
-    const matchesDate =
-      !selectedDate || update.date.toISOString().split("T")[0] === selectedDate;
-    const matchesEmployee = update.employeeId === selectedEmployee;
+    const matchesDate = !selectedDate || update.date.toISOString().split('T')[0] === selectedDate
+    const matchesEmployee = update.employeeId === selectedEmployee
     const matchesSearch =
       !searchQuery ||
       update.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
       update.task?.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      update.employee?.firstName
-        ?.toLowerCase()
-        .includes(searchQuery.toLowerCase()) ||
-      update.employee?.lastName
-        ?.toLowerCase()
-        .includes(searchQuery.toLowerCase());
-    return matchesDate && matchesEmployee && matchesSearch;
-  });
+      update.employee?.firstName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      update.employee?.lastName?.toLowerCase().includes(searchQuery.toLowerCase())
+    return matchesDate && matchesEmployee && matchesSearch
+  })
 
   // Get tasks for the selected employee in form
   const formUserTasks = mockProjectTasks.filter(
-    (task) => task.assignedTo === selectedEmployeeForForm
-  );
+    (task) => task.assignedTo === selectedEmployeeForForm,
+  )
 
   const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
   ) => {
-    const { name, value } = e.target;
+    const { name, value } = e.target
     setFormData((prev) => ({
       ...prev,
-      [name]:
-        name === "hoursWorked" || name === "progress" ? Number(value) : value,
-    }));
-  };
+      [name]: name === 'hoursWorked' || name === 'progress' ? Number(value) : value,
+    }))
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
     const newUpdate: PsTaskDailyUpdate = {
       id: editingUpdate ? editingUpdate.id : Date.now().toString(),
@@ -112,86 +90,268 @@ const TaskDailyUpdates: React.FC = () => {
       attachments: [],
       creationTime: editingUpdate ? editingUpdate.creationTime : new Date(),
       lastModificationTime: new Date(),
-    };
+    }
 
     if (editingUpdate) {
       setUpdates((prev) =>
-        prev.map((update) =>
-          update.id === editingUpdate.id ? newUpdate : update
-        )
-      );
+        prev.map((update) => (update.id === editingUpdate.id ? newUpdate : update)),
+      )
     } else {
-      setUpdates((prev) => [...prev, newUpdate]);
+      setUpdates((prev) => [...prev, newUpdate])
     }
 
-    resetForm();
-  };
+    resetForm()
+  }
 
   const resetForm = () => {
-    setFormData(initialFormData);
-    setIsModalVisible(false);
-    setEditingUpdate(null);
-    setSelectedEmployeeForForm(mockEmployees[0].id);
-  };
+    setFormData(initialFormData)
+    setIsModalVisible(false)
+    setEditingUpdate(null)
+    setSelectedEmployeeForForm(mockEmployees[0].id)
+  }
 
   const handleEdit = (update: PsTaskDailyUpdate) => {
-    setEditingUpdate(update);
-    setSelectedEmployeeForForm(update.employeeId);
+    setEditingUpdate(update)
+    setSelectedEmployeeForForm(update.employeeId)
     setFormData({
       taskId: update.taskId,
-      date: update.date.toISOString().split("T")[0],
+      date: update.date.toISOString().split('T')[0],
       hoursWorked: update.hoursWorked,
       description: update.description,
       workType: update.workType,
       progress: update.progress,
-      challenges: update.challenges || "",
-      nextSteps: update.nextSteps || "",
-    });
-    setIsModalVisible(true);
-  };
+      challenges: update.challenges || '',
+      nextSteps: update.nextSteps || '',
+    })
+    setIsModalVisible(true)
+  }
 
   const handleDelete = (id: string) => {
-    if (
-      window.confirm("Bu günlük raporu silmek istediğinizden emin misiniz?")
-    ) {
-      setUpdates((prev) => prev.filter((update) => update.id !== id));
+    if (window.confirm('Bu günlük raporu silmek istediğinizden emin misiniz?')) {
+      setUpdates((prev) => prev.filter((update) => update.id !== id))
     }
-  };
+  }
 
   const handleStatusChange = (id: string, status: DailyUpdateStatusEnum) => {
-    setUpdates((prev) =>
-      prev.map((update) => (update.id === id ? { ...update, status } : update))
-    );
-  };
+    setUpdates((prev) => prev.map((update) => (update.id === id ? { ...update, status } : update)))
+  }
 
   const todayTotalHours = filteredUpdates
     .filter(
       (update) =>
-        update.date.toISOString().split("T")[0] ===
-        new Date().toISOString().split("T")[0]
+        update.date.toISOString().split('T')[0] === new Date().toISOString().split('T')[0],
     )
-    .reduce((sum, update) => sum + update.hoursWorked, 0);
+    .reduce((sum, update) => sum + update.hoursWorked, 0)
 
   return (
-    <div className="space-y-6">
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="mb-4 mt-2">
+          <div className="flex items-center justify-between mb-3">
+            <div>
+              <h2 className="text-lg font-bold text-gray-900">Günlük Aktivite Takibi</h2>
+              <p className="text-gray-600">
+                Günlük işlerinizi planlayın, tamamlanan görevleri işaretleyin
+              </p>
+            </div>
+            <button
+              onClick={() => setIsModalVisible(true)}
+              className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center gap-2 transition-colors shadow-sm"
+            >
+              <FaPlus className="w-4 h-4" />
+              Yeni Günlük Rapor
+            </button>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-4 gap-2">
+            <Widget
+              title="Bugün Toplam"
+              value={`${todayTotalHours}h`}
+              color="blue"
+              icon="FaClock"
+            />
+
+            <Widget
+              title="Onaylanan"
+              value={
+                filteredUpdates.filter((update) => update.status === DailyUpdateStatusEnum.Approved)
+                  .length
+              }
+              color="green"
+              icon="FaCheckCircle"
+            />
+
+            <Widget
+              title="Beklemede"
+              value={
+                filteredUpdates.filter(
+                  (update) => update.status === DailyUpdateStatusEnum.Submitted,
+                ).length
+              }
+              color="yellow"
+              icon="FaHourglassHalf"
+            />
+
+            <Widget
+              title="Taslak Rapor"
+              value={
+                filteredUpdates.filter((update) => update.status === DailyUpdateStatusEnum.Draft)
+                  .length
+              }
+              color="gray"
+              icon="FaFileAlt"
+            />
+          </div>
+
+          {/* Filters */}
+          <div className="bg-white grid grid-cols-6 gap-2 p-2 rounded-lg shadow-sm border border-gray-200 mt-3 mb-3">
+            <div className="col-span-2">
+              <select
+                value={selectedEmployee}
+                onChange={(e) => setSelectedEmployee(e.target.value)}
+                className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              >
+                {mockEmployees.map((employee) => (
+                  <option key={employee.id} value={employee.id}>
+                    {employee.firstName} {employee.lastName}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="col-span-3">
+              <input
+                type="text"
+                placeholder="Açıklama, görev veya çalışan adı..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+            <div className="col-span-1">
+              <input
+                type="date"
+                value={selectedDate}
+                onChange={(e) => setSelectedDate(e.target.value)}
+                className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Updates List */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
+          <div className="p-1.5 border-b border-gray-200">
+            <h3 className="text-base font-semibold text-gray-900 ml-1.5">Günlük Raporlar</h3>
+          </div>
+
+          <div className="divide-y divide-gray-200">
+            {filteredUpdates.length === 0 ? (
+              <div className="p-4 text-center text-gray-500">
+                <FaCalendarAlt className="h-10 w-10 mx-auto text-gray-300 mb-2" />
+                <p className="text-sm">Henüz günlük rapor bulunmuyor.</p>
+                <p className="text-sm">Yeni bir rapor eklemek için yukarıdaki butonu kullanın.</p>
+              </div>
+            ) : (
+              filteredUpdates.map((update) => (
+                <div key={update.id} className="p-3 hover:bg-gray-50">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1.5">
+                        <h4 className="font-medium text-sm text-gray-900">
+                          {update.task?.name || 'Bilinmeyen Görev'}
+                        </h4>
+                        <span
+                          className={`px-2 py-1 text-xs rounded-full ${getDailyUpdateStatusColor(
+                            update.status,
+                          )}`}
+                        >
+                          {update.status}
+                        </span>
+                        <span
+                          className={`px-2 py-1 text-xs rounded-full ${getWorkTypeColor(
+                            update.workType,
+                          )}`}
+                        >
+                          {update.workType}
+                        </span>
+                      </div>
+
+                      <div className="grid grid-cols-3 gap-3 mb-2 text-xs text-gray-600">
+                        <div>
+                          <span className="font-medium">Tarih:</span>{' '}
+                          {update.date.toLocaleDateString('tr-TR')}
+                        </div>
+                        <div>
+                          <span className="font-medium">Çalışılan Saat:</span> {update.hoursWorked}h
+                        </div>
+                        <div>
+                          <span className="font-medium">İlerleme:</span> %{update.progress}
+                        </div>
+                      </div>
+
+                      <p className="text-sm text-gray-700 mb-2">{update.description}</p>
+
+                      {update.challenges && (
+                        <div className="mb-2">
+                          <span className="text-xs font-medium text-red-700">Zorluklar:</span>
+                          <p className="text-sm text-gray-600">{update.challenges}</p>
+                        </div>
+                      )}
+
+                      {update.nextSteps && (
+                        <div>
+                          <span className="text-xs font-medium text-blue-700">
+                            Sonraki Adımlar:
+                          </span>
+                          <p className="text-sm text-gray-600">{update.nextSteps}</p>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex items-center gap-1">
+                      {update.status === DailyUpdateStatusEnum.Draft && (
+                        <button
+                          onClick={() =>
+                            handleStatusChange(update.id, DailyUpdateStatusEnum.Submitted)
+                          }
+                          className="px-2 py-0.5 text-xs bg-blue-600 text-white hover:bg-blue-700 rounded"
+                        >
+                          Gönder
+                        </button>
+                      )}
+                      <button
+                        onClick={() => handleEdit(update)}
+                        className="p-1 text-gray-400 hover:text-blue-600"
+                      >
+                        <FaEdit className="h-4 w-4" />
+                      </button>
+                      <button
+                        onClick={() => handleDelete(update.id)}
+                        className="p-1 text-gray-400 hover:text-red-600"
+                      >
+                        <FaTrash className="h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+
       {/* Modal */}
       {isModalVisible && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
           <div className="bg-white rounded-lg shadow-xl p-3 w-full max-w-lg max-h-[90vh] overflow-y-auto">
             <div className="flex items-center justify-between mb-3">
               <h3 className="text-base font-semibold text-gray-900">
-                {editingUpdate ? "Günlük Rapor Düzenle" : "Yeni Günlük Rapor"}
+                {editingUpdate ? 'Günlük Rapor Düzenle' : 'Yeni Günlük Rapor'}
               </h3>
-              <button
-                onClick={resetForm}
-                className="text-gray-400 hover:text-gray-600"
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
+              <button onClick={resetForm} className="text-gray-400 hover:text-gray-600">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
@@ -211,8 +371,8 @@ const TaskDailyUpdates: React.FC = () => {
                 <select
                   value={selectedEmployeeForForm}
                   onChange={(e) => {
-                    setSelectedEmployeeForForm(e.target.value);
-                    setFormData((prev) => ({ ...prev, taskId: "" })); // Reset task selection
+                    setSelectedEmployeeForForm(e.target.value)
+                    setFormData((prev) => ({ ...prev, taskId: '' })) // Reset task selection
                   }}
                   className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                 >
@@ -239,8 +399,8 @@ const TaskDailyUpdates: React.FC = () => {
                     <option value="">Görev Seçin</option>
                     {formUserTasks.map((task) => (
                       <option key={task.id} value={task.id}>
-                        {task.phase?.project?.name || "Proje"} →{" "}
-                        {task.phase?.name || "Aşama"} → {task.name}
+                        {task.phase?.project?.name || 'Proje'} → {task.phase?.name || 'Aşama'} →{' '}
+                        {task.name}
                       </option>
                     ))}
                   </select>
@@ -263,9 +423,7 @@ const TaskDailyUpdates: React.FC = () => {
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    İş Türü
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">İş Türü</label>
                   <select
                     name="workType"
                     value={formData.workType}
@@ -371,231 +529,15 @@ const TaskDailyUpdates: React.FC = () => {
                   className="bg-blue-600 text-white py-1 px-3 text-sm rounded-md hover:bg-blue-700 flex items-center justify-center gap-2"
                 >
                   <FaSave className="h-4 w-4" />
-                  {editingUpdate ? "Güncelle" : "Kaydet"}
+                  {editingUpdate ? 'Güncelle' : 'Kaydet'}
                 </button>
               </div>
             </form>
           </div>
         </div>
       )}
+    </Container>
+  )
+}
 
-      {/* Header */}
-      <div className="mb-4 mt-2">
-        <div className="flex items-center justify-between mb-3">
-          <div>
-            <h2 className="text-lg font-bold text-gray-900">
-              Günlük Aktivite Takibi
-            </h2>
-            <p className="text-sm text-gray-600">
-              Günlük işlerinizi planlayın, tamamlanan görevleri işaretleyin
-            </p>
-          </div>
-          <button
-            onClick={() => setIsModalVisible(true)}
-            className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center gap-2 transition-colors shadow-sm"
-          >
-            <FaPlus className="w-4 h-4" />
-            Yeni Günlük Rapor
-          </button>
-        </div>
-
-        {/* Stats */}
-        <div className="grid grid-cols-4 gap-2">
-          <Widget
-            title="Bugün Toplam"
-            value={`${todayTotalHours}h`}
-            color="blue"
-            icon="FaClock"
-          />
-
-          <Widget
-            title="Onaylanan"
-            value={
-              filteredUpdates.filter(
-                (update) => update.status === DailyUpdateStatusEnum.Approved
-              ).length
-            }
-            color="green"
-            icon="FaCheckCircle"
-          />
-
-          <Widget
-            title="Beklemede"
-            value={
-              filteredUpdates.filter(
-                (update) => update.status === DailyUpdateStatusEnum.Submitted
-              ).length
-            }
-            color="yellow"
-            icon="FaHourglassHalf"
-          />
-
-          <Widget
-            title="Taslak Rapor"
-            value={
-              filteredUpdates.filter(
-                (update) => update.status === DailyUpdateStatusEnum.Draft
-              ).length
-            }
-            color="gray"
-            icon="FaFileAlt"
-          />
-        </div>
-
-        {/* Filters */}
-        <div className="bg-white grid grid-cols-6 gap-2 p-2 rounded-lg shadow-sm border border-gray-200 mt-3 mb-3">
-          <div className="col-span-2">
-            <select
-              value={selectedEmployee}
-              onChange={(e) => setSelectedEmployee(e.target.value)}
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            >
-              {mockEmployees.map((employee) => (
-                <option key={employee.id} value={employee.id}>
-                  {employee.firstName} {employee.lastName}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="col-span-3">
-            <input
-              type="text"
-              placeholder="Açıklama, görev veya çalışan adı..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            />
-          </div>
-          <div className="col-span-1">
-            <input
-              type="date"
-              value={selectedDate}
-              onChange={(e) => setSelectedDate(e.target.value)}
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Updates List */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200">
-        <div className="p-1.5 border-b border-gray-200">
-          <h3 className="text-base font-semibold text-gray-900 ml-1.5">
-            Günlük Raporlar
-          </h3>
-        </div>
-
-        <div className="divide-y divide-gray-200">
-          {filteredUpdates.length === 0 ? (
-            <div className="p-4 text-center text-gray-500">
-              <FaCalendarAlt className="h-10 w-10 mx-auto text-gray-300 mb-2" />
-              <p className="text-sm">Henüz günlük rapor bulunmuyor.</p>
-              <p className="text-sm">
-                Yeni bir rapor eklemek için yukarıdaki butonu kullanın.
-              </p>
-            </div>
-          ) : (
-            filteredUpdates.map((update) => (
-              <div key={update.id} className="p-3 hover:bg-gray-50">
-                <div className="flex items-start justify-between gap-3">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2 mb-1.5">
-                      <h4 className="font-medium text-sm text-gray-900">
-                        {update.task?.name || "Bilinmeyen Görev"}
-                      </h4>
-                      <span
-                        className={`px-2 py-1 text-xs rounded-full ${getDailyUpdateStatusColor(
-                          update.status
-                        )}`}
-                      >
-                        {update.status}
-                      </span>
-                      <span
-                        className={`px-2 py-1 text-xs rounded-full ${getWorkTypeColor(
-                          update.workType
-                        )}`}
-                      >
-                        {update.workType}
-                      </span>
-                    </div>
-
-                    <div className="grid grid-cols-3 gap-3 mb-2 text-xs text-gray-600">
-                      <div>
-                        <span className="font-medium">Tarih:</span>{" "}
-                        {update.date.toLocaleDateString("tr-TR")}
-                      </div>
-                      <div>
-                        <span className="font-medium">Çalışılan Saat:</span>{" "}
-                        {update.hoursWorked}h
-                      </div>
-                      <div>
-                        <span className="font-medium">İlerleme:</span> %
-                        {update.progress}
-                      </div>
-                    </div>
-
-                    <p className="text-sm text-gray-700 mb-2">
-                      {update.description}
-                    </p>
-
-                    {update.challenges && (
-                      <div className="mb-2">
-                        <span className="text-xs font-medium text-red-700">
-                          Zorluklar:
-                        </span>
-                        <p className="text-sm text-gray-600">
-                          {update.challenges}
-                        </p>
-                      </div>
-                    )}
-
-                    {update.nextSteps && (
-                      <div>
-                        <span className="text-xs font-medium text-blue-700">
-                          Sonraki Adımlar:
-                        </span>
-                        <p className="text-sm text-gray-600">
-                          {update.nextSteps}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="flex items-center gap-1">
-                    {update.status === DailyUpdateStatusEnum.Draft && (
-                      <button
-                        onClick={() =>
-                          handleStatusChange(
-                            update.id,
-                            DailyUpdateStatusEnum.Submitted
-                          )
-                        }
-                        className="px-2 py-0.5 text-xs bg-blue-600 text-white hover:bg-blue-700 rounded"
-                      >
-                        Gönder
-                      </button>
-                    )}
-                    <button
-                      onClick={() => handleEdit(update)}
-                      className="p-1 text-gray-400 hover:text-blue-600"
-                    >
-                      <FaEdit className="h-4 w-4" />
-                    </button>
-                    <button
-                      onClick={() => handleDelete(update.id)}
-                      className="p-1 text-gray-400 hover:text-red-600"
-                    >
-                      <FaTrash className="h-4 w-4" />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TaskDailyUpdates;
+export default TaskDailyUpdates
diff --git a/ui/src/views/project/components/TaskViewModal.tsx b/ui/src/views/project/components/TaskViewModal.tsx
index 38f401e5..6439cfd4 100644
--- a/ui/src/views/project/components/TaskViewModal.tsx
+++ b/ui/src/views/project/components/TaskViewModal.tsx
@@ -84,7 +84,7 @@ const ProgressBar: React.FC<{ progress: number }> = ({ progress }) => {
   };
 
   return (
-    <div className="space-y-1">
+    <div className="space-y-2">
       <div className="flex justify-between text-sm">
         <span className="font-medium">İlerleme</span>
         <span>%{progress}</span>