From 7d525737657e254124d6d73acf1d8260c5279986 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Mon, 15 Sep 2025 17:13:20 +0300
Subject: [PATCH] Container Crm Management

---
 .../views/crm/components/ActivityDetails.tsx  |  154 +-
 ui/src/views/crm/components/ActivityForm.tsx  |  266 ++-
 .../views/crm/components/ActivityRecords.tsx  |  891 ++++-----
 ui/src/views/crm/components/CustomerCards.tsx |  206 +--
 ui/src/views/crm/components/CustomerEdit.tsx  | 1075 +++++------
 ui/src/views/crm/components/CustomerForm.tsx  |  914 +++++----
 .../views/crm/components/CustomerFormNew.tsx  |  907 +++++----
 ui/src/views/crm/components/CustomerList.tsx  |  164 +-
 .../crm/components/CustomerListWithToggle.tsx |   99 +-
 ui/src/views/crm/components/CustomerView.tsx  | 1648 ++++++++---------
 .../crm/components/LossReasonCardView.tsx     |   76 +-
 .../views/crm/components/LossReasonModal.tsx  |  189 +-
 ui/src/views/crm/components/LossReasons.tsx   |  688 ++++---
 .../crm/components/OpportunityDetails.tsx     |  127 +-
 .../views/crm/components/OpportunityForm.tsx  |  245 +--
 .../crm/components/OpportunityManagement.tsx  |  566 +++---
 .../views/crm/components/SalesOrderForm.tsx   | 1328 +++++++------
 .../views/crm/components/SalesOrderView.tsx   |  695 ++++---
 ui/src/views/crm/components/SalesOrders.tsx   |  494 +++--
 .../views/crm/components/SalesTeamCreate.tsx  |  686 ++++---
 ui/src/views/crm/components/SalesTeamEdit.tsx |  720 ++++---
 ui/src/views/crm/components/SalesTeamView.tsx |  768 ++++----
 ui/src/views/crm/components/SalesTeams.tsx    |  615 +++---
 23 files changed, 6155 insertions(+), 7366 deletions(-)

diff --git a/ui/src/views/crm/components/ActivityDetails.tsx b/ui/src/views/crm/components/ActivityDetails.tsx
index 9e6ef6d8..e1b41c13 100644
--- a/ui/src/views/crm/components/ActivityDetails.tsx
+++ b/ui/src/views/crm/components/ActivityDetails.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 import {
   FaTimes,
   FaCalendar,
@@ -12,10 +12,10 @@ import {
   FaFlag,
   FaFileAlt,
   FaHistory,
-} from "react-icons/fa";
-import { CrmActivity } from "../../../types/crm";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
+} from 'react-icons/fa'
+import { CrmActivity } from '../../../types/crm'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
 import {
   getActivityStatusColor,
   getActivityStatusText,
@@ -23,28 +23,22 @@ import {
   getPsActivityTypeText,
   getPriorityColor,
   getPriorityText,
-} from "../../../utils/erp";
+  getActivityTypeText,
+} from '../../../utils/erp'
 
 interface ActivityDetailsProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onEdit: (activity: CrmActivity) => void;
-  activity: CrmActivity | null;
+  isOpen: boolean
+  onClose: () => void
+  onEdit: (activity: CrmActivity) => void
+  activity: CrmActivity | null
 }
 
-const ActivityDetails: React.FC<ActivityDetailsProps> = ({
-  isOpen,
-  onClose,
-  onEdit,
-  activity,
-}) => {
-  if (!isOpen || !activity) return null;
+const ActivityDetails: React.FC<ActivityDetailsProps> = ({ isOpen, onClose, onEdit, activity }) => {
+  if (!isOpen || !activity) return null
 
-  const customer = mockBusinessParties.find(
-    (c) => c.id === activity.customerId
-  );
+  const customer = mockBusinessParties.find((c) => c.id === activity.customerId)
 
-  const ActivityIcon = getActivityTypeIcon(activity.activityType);
+  const ActivityIcon = getActivityTypeIcon(activity.activityType)
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
@@ -56,12 +50,8 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
               <ActivityIcon className="w-6 h-6 text-blue-600" />
             </div>
             <div>
-              <h2 className="text-lg font-semibold text-gray-900">
-                {activity.subject}
-              </h2>
-              <p className="text-sm text-gray-600">
-                {getPsActivityTypeText(activity.activityType)}
-              </p>
+              <h2 className="text-lg font-semibold text-gray-900">{activity.subject}</h2>
+              <p className="text-sm text-gray-600">{getActivityTypeText(activity.activityType)}</p>
             </div>
           </div>
           <div className="flex items-center gap-3">
@@ -72,10 +62,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
               <FaEdit className="w-4 h-4" />
               Düzenle
             </button>
-            <button
-              onClick={onClose}
-              className="text-gray-400 hover:text-gray-600 p-2"
-            >
+            <button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-2">
               <FaTimes className="w-5 h-5" />
             </button>
           </div>
@@ -87,7 +74,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
             <div className="text-center">
               <div
                 className={`inline-flex px-3 py-1.5 rounded-full text-xs font-medium border ${getActivityStatusColor(
-                  activity.status
+                  activity.status,
                 )}`}
               >
                 {getActivityStatusText(activity.status)}
@@ -96,11 +83,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
             </div>
 
             <div className="text-center">
-              <div
-                className={`text-base font-semibold ${getPriorityColor(
-                  activity.priority
-                )}`}
-              >
+              <div className={`text-base font-semibold ${getPriorityColor(activity.priority)}`}>
                 <div className="flex items-center justify-center gap-2">
                   <FaFlag className="w-4 h-4" />
                   {getPriorityText(activity.priority)}
@@ -112,7 +95,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
             <div className="text-center">
               <div className="flex items-center justify-center gap-2 text-base font-semibold text-gray-900">
                 <FaCalendar className="w-4 h-4 text-gray-400" />
-                {new Date(activity.activityDate).toLocaleDateString("tr-TR")}
+                {new Date(activity.activityDate).toLocaleDateString('tr-TR')}
               </div>
               <p className="text-xs text-gray-500 mt-1">Tarih</p>
             </div>
@@ -139,9 +122,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                 </h3>
                 <div className="space-y-3">
                   <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Konu
-                    </label>
+                    <label className="block text-sm font-medium text-gray-600 mb-1">Konu</label>
                     <p className="text-gray-900">{activity.subject}</p>
                   </div>
 
@@ -150,9 +131,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                       <label className="block text-sm font-medium text-gray-600 mb-1">
                         Açıklama
                       </label>
-                      <p className="text-gray-900 whitespace-pre-wrap">
-                        {activity.description}
-                      </p>
+                      <p className="text-gray-900 whitespace-pre-wrap">{activity.description}</p>
                     </div>
                   )}
 
@@ -163,13 +142,10 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                           Başlangıç Saati
                         </label>
                         <p className="text-gray-900">
-                          {new Date(activity.startTime).toLocaleTimeString(
-                            "tr-TR",
-                            {
-                              hour: "2-digit",
-                              minute: "2-digit",
-                            }
-                          )}
+                          {new Date(activity.startTime).toLocaleTimeString('tr-TR', {
+                            hour: '2-digit',
+                            minute: '2-digit',
+                          })}
                         </p>
                       </div>
                     )}
@@ -180,13 +156,10 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                           Bitiş Saati
                         </label>
                         <p className="text-gray-900">
-                          {new Date(activity.endTime).toLocaleTimeString(
-                            "tr-TR",
-                            {
-                              hour: "2-digit",
-                              minute: "2-digit",
-                            }
-                          )}
+                          {new Date(activity.endTime).toLocaleTimeString('tr-TR', {
+                            hour: '2-digit',
+                            minute: '2-digit',
+                          })}
                         </p>
                       </div>
                     )}
@@ -232,16 +205,12 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                       <div className="space-y-1.5">
                         <div className="flex items-center gap-2">
                           <FaEnvelope className="w-4 h-4 text-gray-400" />
-                          <span className="text-gray-900">
-                            {customer.primaryContact?.email}
-                          </span>
+                          <span className="text-gray-900">{customer.primaryContact?.email}</span>
                         </div>
                         {customer.primaryContact?.phone && (
                           <div className="flex items-center gap-2">
                             <FaPhone className="w-4 h-4 text-gray-400" />
-                            <span className="text-gray-900">
-                              {customer.primaryContact.phone}
-                            </span>
+                            <span className="text-gray-900">{customer.primaryContact.phone}</span>
                           </div>
                         )}
                       </div>
@@ -261,14 +230,10 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                 </h3>
                 <div className="space-y-3">
                   <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Sorumlu
-                    </label>
+                    <label className="block text-sm font-medium text-gray-600 mb-1">Sorumlu</label>
                     <div className="flex items-center gap-2">
                       <FaUser className="w-4 h-4 text-gray-400" />
-                      <span className="text-gray-900">
-                        {activity.assigned?.fullName}
-                      </span>
+                      <span className="text-gray-900">{activity.assigned?.fullName}</span>
                     </div>
                   </div>
 
@@ -279,20 +244,15 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                       </label>
                       <div className="space-y-1.5">
                         {activity.participants.map((participantId, index) => {
-                          const employee = mockEmployees.find(
-                            (emp) => emp.id === participantId
-                          );
+                          const employee = mockEmployees.find((emp) => emp.id === participantId)
                           return (
-                            <div
-                              key={index}
-                              className="flex items-center gap-2"
-                            >
+                            <div key={index} className="flex items-center gap-2">
                               <FaUsers className="w-4 h-4 text-gray-400" />
                               <span className="text-gray-900">
                                 {employee ? employee.fullName : participantId}
                               </span>
                             </div>
-                          );
+                          )
                         })}
                       </div>
                     </div>
@@ -316,9 +276,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                         <div className="flex items-center gap-2">
                           <FaCalendar className="w-4 h-4 text-gray-400" />
                           <span className="text-gray-900">
-                            {new Date(activity.followUpDate).toLocaleDateString(
-                              "tr-TR"
-                            )}
+                            {new Date(activity.followUpDate).toLocaleDateString('tr-TR')}
                           </span>
                         </div>
                       </div>
@@ -329,9 +287,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                         <label className="block text-sm font-medium text-gray-600 mb-1">
                           Takip Aktivitesi
                         </label>
-                        <p className="text-gray-900">
-                          {activity.followUpActivity}
-                        </p>
+                        <p className="text-gray-900">{activity.followUpActivity}</p>
                       </div>
                     )}
                   </div>
@@ -351,9 +307,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                         <label className="block text-sm font-medium text-gray-600 mb-1">
                           Sonuç
                         </label>
-                        <p className="text-gray-900 whitespace-pre-wrap">
-                          {activity.outcome}
-                        </p>
+                        <p className="text-gray-900 whitespace-pre-wrap">{activity.outcome}</p>
                       </div>
                     )}
 
@@ -362,9 +316,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                         <label className="block text-sm font-medium text-gray-600 mb-1">
                           Sonraki Adımlar
                         </label>
-                        <p className="text-gray-900 whitespace-pre-wrap">
-                          {activity.nextSteps}
-                        </p>
+                        <p className="text-gray-900 whitespace-pre-wrap">{activity.nextSteps}</p>
                       </div>
                     )}
                   </div>
@@ -381,14 +333,10 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                   <div className="flex items-start gap-3 border-l-2 border-blue-200 pl-4">
                     <div className="w-3 h-3 bg-blue-600 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
                     <div>
-                      <p className="text-sm font-medium text-gray-900">
-                        Aktivite Oluşturuldu
-                      </p>
+                      <p className="text-sm font-medium text-gray-900">Aktivite Oluşturuldu</p>
                       <p className="text-xs text-gray-500 flex items-center gap-1">
                         <FaClock className="w-3 h-3" />
-                        {new Date(activity.creationTime).toLocaleDateString(
-                          "tr-TR"
-                        )}
+                        {new Date(activity.creationTime).toLocaleDateString('tr-TR')}
                       </p>
                     </div>
                   </div>
@@ -396,14 +344,10 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
                   <div className="flex items-start gap-3 border-l-2 border-gray-200 pl-4">
                     <div className="w-3 h-3 bg-gray-400 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
                     <div>
-                      <p className="text-sm font-medium text-gray-900">
-                        Son Güncelleme
-                      </p>
+                      <p className="text-sm font-medium text-gray-900">Son Güncelleme</p>
                       <p className="text-xs text-gray-500 flex items-center gap-1">
                         <FaClock className="w-3 h-3" />
-                        {new Date(
-                          activity.lastModificationTime
-                        ).toLocaleDateString("tr-TR")}
+                        {new Date(activity.lastModificationTime).toLocaleDateString('tr-TR')}
                       </p>
                     </div>
                   </div>
@@ -414,7 +358,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ActivityDetails;
+export default ActivityDetails
diff --git a/ui/src/views/crm/components/ActivityForm.tsx b/ui/src/views/crm/components/ActivityForm.tsx
index 065adaf7..f356da3b 100644
--- a/ui/src/views/crm/components/ActivityForm.tsx
+++ b/ui/src/views/crm/components/ActivityForm.tsx
@@ -1,163 +1,140 @@
-import React, { useState, useEffect } from "react";
-import { FaTimes, FaCalendar, FaFileAlt, FaFlag } from "react-icons/fa";
-import {
-  CrmActivity,
-  CrmActivityTypeEnum,
-  ActivityStatusEnum,
-} from "../../../types/crm";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import MultiSelectEmployee from "../../../components/common/MultiSelectEmployee";
-import { BusinessParty, PriorityEnum } from "../../../types/common";
-import {
-  getActivityStatusText,
-  getPriorityText,
-  getActivityTypeText,
-} from "../../../utils/erp";
+import React, { useState, useEffect } from 'react'
+import { FaTimes, FaCalendar, FaFileAlt, FaFlag } from 'react-icons/fa'
+import { CrmActivity, CrmActivityTypeEnum, ActivityStatusEnum } from '../../../types/crm'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import MultiSelectEmployee from '../../../components/common/MultiSelectEmployee'
+import { BusinessParty, PriorityEnum } from '../../../types/common'
+import { getActivityStatusText, getPriorityText, getActivityTypeText } from '../../../utils/erp'
 
 interface ActivityFormProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSave: (activity: CrmActivity) => void;
-  activity?: CrmActivity | null;
-  mode: "create" | "edit";
+  isOpen: boolean
+  onClose: () => void
+  onSave: (activity: CrmActivity) => void
+  activity?: CrmActivity | null
+  mode: 'create' | 'edit'
 }
 
-const ActivityForm: React.FC<ActivityFormProps> = ({
-  isOpen,
-  onClose,
-  onSave,
-  activity,
-  mode,
-}) => {
+const ActivityForm: React.FC<ActivityFormProps> = ({ isOpen, onClose, onSave, activity, mode }) => {
   const [formData, setFormData] = useState({
-    id: "",
+    id: '',
     activityType: CrmActivityTypeEnum.Call,
-    subject: "",
-    description: "",
-    customerId: "",
-    contactId: "",
-    activityDate: "",
-    startTime: "",
-    endTime: "",
-    duration: "",
-    assignedTo: "",
+    subject: '',
+    description: '',
+    customerId: '',
+    contactId: '',
+    activityDate: '',
+    startTime: '',
+    endTime: '',
+    duration: '',
+    assignedTo: '',
     participants: [] as string[], // Array of employee IDs
     status: ActivityStatusEnum.Planned,
     priority: PriorityEnum.Normal,
-    followUpDate: "",
-    followUpActivity: "",
-    outcome: "",
-    nextSteps: "",
-  });
+    followUpDate: '',
+    followUpActivity: '',
+    outcome: '',
+    nextSteps: '',
+  })
 
-  const [customers] = useState<BusinessParty[]>(mockBusinessParties);
-  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [customers] = useState<BusinessParty[]>(mockBusinessParties)
+  const [errors, setErrors] = useState<Record<string, string>>({})
 
   useEffect(() => {
-    if (activity && mode === "edit") {
+    if (activity && mode === 'edit') {
       setFormData({
         id: activity.id,
         activityType: activity.activityType,
         subject: activity.subject,
-        description: activity.description || "",
-        customerId: activity.customerId || "",
-        contactId: activity.contactId || "",
-        activityDate: activity.activityDate.toISOString().split("T")[0],
-        startTime: activity.startTime
-          ? activity.startTime.toISOString().slice(11, 16)
-          : "",
-        endTime: activity.endTime
-          ? activity.endTime.toISOString().slice(11, 16)
-          : "",
-        duration: activity.duration?.toString() || "",
+        description: activity.description || '',
+        customerId: activity.customerId || '',
+        contactId: activity.contactId || '',
+        activityDate: activity.activityDate.toISOString().split('T')[0],
+        startTime: activity.startTime ? activity.startTime.toISOString().slice(11, 16) : '',
+        endTime: activity.endTime ? activity.endTime.toISOString().slice(11, 16) : '',
+        duration: activity.duration?.toString() || '',
         assignedTo: activity.assignedTo,
         participants: activity.participants || [], // Keep as array of IDs
         status: activity.status,
         priority: activity.priority,
         followUpDate: activity.followUpDate
-          ? activity.followUpDate.toISOString().split("T")[0]
-          : "",
-        followUpActivity: activity.followUpActivity || "",
-        outcome: activity.outcome || "",
-        nextSteps: activity.nextSteps || "",
-      });
-    } else if (mode === "create") {
-      const today = new Date().toISOString().split("T")[0];
+          ? activity.followUpDate.toISOString().split('T')[0]
+          : '',
+        followUpActivity: activity.followUpActivity || '',
+        outcome: activity.outcome || '',
+        nextSteps: activity.nextSteps || '',
+      })
+    } else if (mode === 'create') {
+      const today = new Date().toISOString().split('T')[0]
       setFormData({
         id: `act_${Date.now()}`,
         activityType: CrmActivityTypeEnum.Call,
-        subject: "",
-        description: "",
-        customerId: "",
-        contactId: "",
+        subject: '',
+        description: '',
+        customerId: '',
+        contactId: '',
         activityDate: today,
-        startTime: "",
-        endTime: "",
-        duration: "",
-        assignedTo: "Mevcut Kullanıcı",
+        startTime: '',
+        endTime: '',
+        duration: '',
+        assignedTo: 'Mevcut Kullanıcı',
         participants: [], // Empty array for new activities
         status: ActivityStatusEnum.Planned,
         priority: PriorityEnum.Normal,
-        followUpDate: "",
-        followUpActivity: "",
-        outcome: "",
-        nextSteps: "",
-      });
+        followUpDate: '',
+        followUpActivity: '',
+        outcome: '',
+        nextSteps: '',
+      })
     }
-  }, [activity, mode, isOpen]);
+  }, [activity, mode, isOpen])
 
   const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-    >
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
   ) => {
-    const { name, value } = e.target;
+    const { name, value } = e.target
     setFormData((prev) => ({
       ...prev,
       [name]: value,
-    }));
+    }))
 
     // Clear error when user starts typing
     if (errors[name]) {
       setErrors((prev) => ({
         ...prev,
-        [name]: "",
-      }));
+        [name]: '',
+      }))
     }
-  };
+  }
 
   const validateForm = () => {
-    const newErrors: Record<string, string> = {};
+    const newErrors: Record<string, string> = {}
 
     if (!formData.subject.trim()) {
-      newErrors.subject = "Aktivite konusu zorunludur";
+      newErrors.subject = 'Aktivite konusu zorunludur'
     }
 
     if (!formData.activityDate) {
-      newErrors.activityDate = "Aktivite tarihi zorunludur";
+      newErrors.activityDate = 'Aktivite tarihi zorunludur'
     }
 
     if (!formData.assignedTo.trim()) {
-      newErrors.assignedTo = "Sorumlu kişi zorunludur";
+      newErrors.assignedTo = 'Sorumlu kişi zorunludur'
     }
 
-    if (
-      formData.duration &&
-      (isNaN(Number(formData.duration)) || Number(formData.duration) <= 0)
-    ) {
-      newErrors.duration = "Süre geçerli bir sayı olmalıdır";
+    if (formData.duration && (isNaN(Number(formData.duration)) || Number(formData.duration) <= 0)) {
+      newErrors.duration = 'Süre geçerli bir sayı olmalıdır'
     }
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (!validateForm()) {
-      return;
+      return
     }
 
     const activityData: CrmActivity = {
@@ -179,21 +156,19 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
       participants: formData.participants, // Already an array of IDs
       status: formData.status,
       priority: formData.priority,
-      followUpDate: formData.followUpDate
-        ? new Date(formData.followUpDate)
-        : undefined,
+      followUpDate: formData.followUpDate ? new Date(formData.followUpDate) : undefined,
       followUpActivity: formData.followUpActivity || undefined,
       outcome: formData.outcome || undefined,
       nextSteps: formData.nextSteps || undefined,
       creationTime: activity?.creationTime || new Date(),
       lastModificationTime: new Date(),
-    };
+    }
 
-    onSave(activityData);
-    onClose();
-  };
+    onSave(activityData)
+    onClose()
+  }
 
-  if (!isOpen) return null;
+  if (!isOpen) return null
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
@@ -201,12 +176,9 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b">
           <h2 className="text-lg font-semibold text-gray-900">
-            {mode === "create" ? "Yeni Aktivite Oluştur" : "Aktivite Düzenle"}
+            {mode === 'create' ? 'Yeni Aktivite Oluştur' : 'Aktivite Düzenle'}
           </h2>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600"
-          >
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
             <FaTimes className="w-5 h-5" />
           </button>
         </div>
@@ -240,28 +212,22 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Konu *
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Konu *</label>
                 <input
                   type="text"
                   name="subject"
                   value={formData.subject}
                   onChange={handleInputChange}
                   className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                    errors.subject ? "border-red-500" : "border-gray-300"
+                    errors.subject ? 'border-red-500' : 'border-gray-300'
                   }`}
                   placeholder="Aktivite konusunu girin"
                 />
-                {errors.subject && (
-                  <p className="text-red-500 text-sm mt-1">{errors.subject}</p>
-                )}
+                {errors.subject && <p className="text-red-500 text-sm mt-1">{errors.subject}</p>}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Açıklama
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Açıklama</label>
                 <textarea
                   name="description"
                   value={formData.description}
@@ -273,9 +239,7 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Müşteri
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Müşteri</label>
                 <select
                   name="customerId"
                   value={formData.customerId}
@@ -292,9 +256,7 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Öncelik
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Öncelik</label>
                 <select
                   name="priority"
                   value={formData.priority}
@@ -327,13 +289,11 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
                   value={formData.activityDate}
                   onChange={handleInputChange}
                   className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                    errors.activityDate ? "border-red-500" : "border-gray-300"
+                    errors.activityDate ? 'border-red-500' : 'border-gray-300'
                   }`}
                 />
                 {errors.activityDate && (
-                  <p className="text-red-500 text-sm mt-1">
-                    {errors.activityDate}
-                  </p>
+                  <p className="text-red-500 text-sm mt-1">{errors.activityDate}</p>
                 )}
               </div>
 
@@ -376,19 +336,15 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
                   onChange={handleInputChange}
                   min="1"
                   className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                    errors.duration ? "border-red-500" : "border-gray-300"
+                    errors.duration ? 'border-red-500' : 'border-gray-300'
                   }`}
                   placeholder="60"
                 />
-                {errors.duration && (
-                  <p className="text-red-500 text-sm mt-1">{errors.duration}</p>
-                )}
+                {errors.duration && <p className="text-red-500 text-sm mt-1">{errors.duration}</p>}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Sorumlu *
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Sorumlu *</label>
                 <select
                   value={formData.assignedTo}
                   onChange={handleInputChange}
@@ -402,16 +358,12 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
                   ))}
                 </select>
                 {errors.assignedTo && (
-                  <p className="text-red-500 text-sm mt-1">
-                    {errors.assignedTo}
-                  </p>
+                  <p className="text-red-500 text-sm mt-1">{errors.assignedTo}</p>
                 )}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Katılımcılar
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Katılımcılar</label>
                 <MultiSelectEmployee
                   selectedEmployees={formData.participants}
                   onChange={(employeeIds) =>
@@ -426,9 +378,7 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Durum
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Durum</label>
                 <select
                   name="status"
                   value={formData.status}
@@ -454,9 +404,7 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Takip Tarihi
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Takip Tarihi</label>
                 <input
                   type="date"
                   name="followUpDate"
@@ -482,9 +430,7 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Sonuç
-              </label>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Sonuç</label>
               <textarea
                 name="outcome"
                 value={formData.outcome}
@@ -523,13 +469,13 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
               type="submit"
               className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
             >
-              {mode === "create" ? "Oluştur" : "Güncelle"}
+              {mode === 'create' ? 'Oluştur' : 'Güncelle'}
             </button>
           </div>
         </form>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ActivityForm;
+export default ActivityForm
diff --git a/ui/src/views/crm/components/ActivityRecords.tsx b/ui/src/views/crm/components/ActivityRecords.tsx
index 29e33bd5..da5915b8 100644
--- a/ui/src/views/crm/components/ActivityRecords.tsx
+++ b/ui/src/views/crm/components/ActivityRecords.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaCalendar,
   FaPlus,
@@ -10,93 +10,82 @@ import {
   FaList,
   FaTh,
   FaFlag,
-} from "react-icons/fa";
-import {
-  CrmActivity,
-  CrmActivityTypeEnum,
-  ActivityStatusEnum,
-} from "../../../types/crm";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
-import { mockActivities } from "../../../mocks/mockActivities";
-import ActivityForm from "./ActivityForm";
-import ActivityDetails from "./ActivityDetails";
-import { BusinessParty, PriorityEnum } from "../../../types/common";
-import Widget from "../../../components/common/Widget";
+} from 'react-icons/fa'
+import { CrmActivity, CrmActivityTypeEnum, ActivityStatusEnum } from '../../../types/crm'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
+import { mockActivities } from '../../../mocks/mockActivities'
+import ActivityForm from './ActivityForm'
+import ActivityDetails from './ActivityDetails'
+import { BusinessParty, PriorityEnum } from '../../../types/common'
+import Widget from '../../../components/common/Widget'
 import {
   getActivityStatusColor,
   getActivityStatusText,
   getActivityTypeIcon,
-  getPsActivityTypeText,
-} from "../../../utils/erp";
+  getActivityTypeText,
+} from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const ActivityRecords: React.FC = () => {
-  const [activities, setActivities] = useState<CrmActivity[]>(mockActivities);
-  const [customers] = useState<BusinessParty[]>(mockBusinessParties);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedType, setSelectedType] = useState<CrmActivityTypeEnum | "all">(
-    "all"
-  );
-  const [selectedStatus, setSelectedStatus] = useState<
-    ActivityStatusEnum | "all"
-  >("all");
-  const [viewMode, setViewMode] = useState<"list" | "cards">("list");
+  const [activities, setActivities] = useState<CrmActivity[]>(mockActivities)
+  const [customers] = useState<BusinessParty[]>(mockBusinessParties)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedType, setSelectedType] = useState<CrmActivityTypeEnum | 'all'>('all')
+  const [selectedStatus, setSelectedStatus] = useState<ActivityStatusEnum | 'all'>('all')
+  const [viewMode, setViewMode] = useState<'list' | 'cards'>('list')
 
   // Modal states
-  const [isFormOpen, setIsFormOpen] = useState(false);
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [selectedActivity, setSelectedActivity] = useState<CrmActivity | null>(
-    null
-  );
-  const [formMode, setFormMode] = useState<"create" | "edit">("create");
+  const [isFormOpen, setIsFormOpen] = useState(false)
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false)
+  const [selectedActivity, setSelectedActivity] = useState<CrmActivity | null>(null)
+  const [formMode, setFormMode] = useState<'create' | 'edit'>('create')
 
   const handleAdd = () => {
-    setSelectedActivity(null);
-    setFormMode("create");
-    setIsFormOpen(true);
-  };
+    setSelectedActivity(null)
+    setFormMode('create')
+    setIsFormOpen(true)
+  }
 
   const handleEdit = (activity: CrmActivity) => {
-    setSelectedActivity(activity);
-    setFormMode("edit");
-    setIsFormOpen(true);
-  };
+    setSelectedActivity(activity)
+    setFormMode('edit')
+    setIsFormOpen(true)
+  }
 
   const handleDelete = (id: string) => {
-    if (confirm("Bu aktiviteyi silmek istediğinizden emin misiniz?")) {
-      setActivities((prev) => prev.filter((act) => act.id !== id));
+    if (confirm('Bu aktiviteyi silmek istediğinizden emin misiniz?')) {
+      setActivities((prev) => prev.filter((act) => act.id !== id))
     }
-  };
+  }
 
   const handleViewDetails = (activity: CrmActivity) => {
-    setSelectedActivity(activity);
-    setIsDetailsOpen(true);
-  };
+    setSelectedActivity(activity)
+    setIsDetailsOpen(true)
+  }
 
   const handleSaveActivity = (activity: CrmActivity) => {
-    if (formMode === "create") {
-      setActivities((prev) => [...prev, activity]);
+    if (formMode === 'create') {
+      setActivities((prev) => [...prev, activity])
     } else {
-      setActivities((prev) =>
-        prev.map((act) => (act.id === activity.id ? activity : act))
-      );
+      setActivities((prev) => prev.map((act) => (act.id === activity.id ? activity : act)))
     }
-  };
+  }
 
   const handleCloseForm = () => {
-    setIsFormOpen(false);
-    setSelectedActivity(null);
-  };
+    setIsFormOpen(false)
+    setSelectedActivity(null)
+  }
 
   const handleCloseDetails = () => {
-    setIsDetailsOpen(false);
-    setSelectedActivity(null);
-  };
+    setIsDetailsOpen(false)
+    setSelectedActivity(null)
+  }
 
   const handleEditFromDetails = (activity: CrmActivity) => {
-    setIsDetailsOpen(false);
-    handleEdit(activity);
-  };
+    setIsDetailsOpen(false)
+    handleEdit(activity)
+  }
 
   const filteredActivities = activities.filter((activity) => {
     if (
@@ -104,81 +93,77 @@ const ActivityRecords: React.FC = () => {
       !activity.subject.toLowerCase().includes(searchTerm.toLowerCase()) &&
       !activity.description?.toLowerCase().includes(searchTerm.toLowerCase())
     ) {
-      return false;
+      return false
     }
-    if (selectedType !== "all" && activity.activityType !== selectedType) {
-      return false;
+    if (selectedType !== 'all' && activity.activityType !== selectedType) {
+      return false
     }
-    if (selectedStatus !== "all" && activity.status !== selectedStatus) {
-      return false;
+    if (selectedStatus !== 'all' && activity.status !== selectedStatus) {
+      return false
     }
-    return true;
-  });
+    return true
+  })
 
   const columns: Column<CrmActivity>[] = [
     {
-      key: "subject",
-      header: "Aktivite",
+      key: 'subject',
+      header: 'Aktivite',
       sortable: true,
       render: (activity: CrmActivity) => {
-        const Icon = getActivityTypeIcon(activity.activityType);
+        const Icon = getActivityTypeIcon(activity.activityType)
         return (
           <div className="flex items-center gap-3">
             <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
               <Icon className="w-5 h-5 text-blue-600" />
             </div>
             <div>
-              <div className="font-medium text-gray-900">
-                {activity.subject}
-              </div>
+              <div className="font-medium text-gray-900">{activity.subject}</div>
               <div className="text-sm text-gray-500">
-                {getPsActivityTypeText(activity.activityType)}
+                {getActivityTypeText(activity.activityType)}
               </div>
             </div>
           </div>
-        );
+        )
       },
     },
     {
-      key: "customer",
-      header: "Müşteri",
+      key: 'customer',
+      header: 'Müşteri',
       render: (activity: CrmActivity) => {
-        const customer = customers.find((c) => c.id === activity.customerId);
+        const customer = customers.find((c) => c.id === activity.customerId)
         return customer ? (
           <div className="flex items-center gap-2">
             <FaBuilding className="w-4 h-4 text-gray-400" />
             <span>{customer.name}</span>
           </div>
         ) : (
-          "-"
-        );
+          '-'
+        )
       },
     },
     {
-      key: "activityDate",
-      header: "Tarih & Saat",
+      key: 'activityDate',
+      header: 'Tarih & Saat',
       render: (activity: CrmActivity) => (
         <div className="flex items-center gap-1 text-sm">
           <FaCalendar className="w-3 h-3 text-gray-400" />
           <div>
-            <div>
-              {new Date(activity.activityDate).toLocaleDateString("tr-TR")}
-            </div>
+            <div>{new Date(activity.activityDate).toLocaleDateString('tr-TR')}</div>
             <div className="text-gray-500">
               {activity.startTime
-                ? new Date(activity.startTime).toLocaleTimeString("tr-TR", {
-                    hour: "2-digit",
-                    minute: "2-digit",
+                ? new Date(activity.startTime).toLocaleTimeString('tr-TR', {
+                    hour: '2-digit',
+                    minute: '2-digit',
                   })
-                : "-"}
+                : '-'}
             </div>
           </div>
         </div>
       ),
     },
     {
-      key: "duration",
-      header: "Süre",
+      key: 'duration',
+      header: 'Süre',
       render: (activity: CrmActivity) =>
         activity.duration ? (
           <div className="flex items-center gap-1">
@@ -186,12 +171,12 @@ const ActivityRecords: React.FC = () => {
             <span>{activity.duration} dk</span>
           </div>
         ) : (
-          "-"
+          '-'
         ),
     },
     {
-      key: "assignedTo",
-      header: "Sorumlu",
+      key: 'assignedTo',
+      header: 'Sorumlu',
       render: (activity: CrmActivity) => (
         <div className="flex items-center gap-1">
           <FaUser className="w-4 h-4 text-gray-400" />
@@ -200,12 +185,12 @@ const ActivityRecords: React.FC = () => {
       ),
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (activity: CrmActivity) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getActivityStatusColor(
-            activity.status
+            activity.status,
           )}`}
         >
           {getActivityStatusText(activity.status)}
@@ -213,8 +198,8 @@ const ActivityRecords: React.FC = () => {
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (activity: CrmActivity) => (
         <div className="flex gap-2">
           <button
@@ -241,434 +226,372 @@ const ActivityRecords: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   // Calculate statistics
-  const totalActivities = activities.length;
+  const totalActivities = activities.length
   const completedActivities = activities.filter(
-    (a) => a.status === ActivityStatusEnum.Completed
-  ).length;
+    (a) => a.status === ActivityStatusEnum.Completed,
+  ).length
   const pendingActivities = activities.filter(
-    (a) =>
-      a.status === ActivityStatusEnum.Planned ||
-      a.status === ActivityStatusEnum.InProgress
-  ).length;
+    (a) => a.status === ActivityStatusEnum.Planned || a.status === ActivityStatusEnum.InProgress,
+  ).length
   const todayActivities = activities.filter((a) => {
-    const today = new Date();
-    const activityDate = new Date(a.activityDate);
-    return activityDate.toDateString() === today.toDateString();
-  }).length;
+    const today = new Date()
+    const activityDate = new Date(a.activityDate)
+    return activityDate.toDateString() === today.toDateString()
+  }).length
 
   // Activity type distribution
   const typeDistribution = Object.values(CrmActivityTypeEnum).map((type) => ({
     type,
     count: activities.filter((a) => a.activityType === type).length,
     completed: activities.filter(
-      (a) =>
-        a.activityType === type && a.status === ActivityStatusEnum.Completed
+      (a) => a.activityType === type && a.status === ActivityStatusEnum.Completed,
     ).length,
-  }));
+  }))
 
   return (
-    <div className="space-y-4 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">
-            Görüşme / Aktivite Kayıtları
-          </h2>
-          <p className="text-sm text-gray-600 mt-1">
-            Müşteri etkileşimleri ve aktivite takibi
-          </p>
+    <Container>
+      <div className="space-y-4 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">Görüşme / Aktivite Kayıtları</h2>
+            <p className="text-sm text-gray-600 mt-1">Müşteri etkileşimleri ve aktivite takibi</p>
+          </div>
+          <div className="flex items-center gap-4">
+            <button
+              onClick={handleAdd}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            >
+              <FaPlus className="w-4 h-4" />
+              Yeni Aktivite
+            </button>
+          </div>
         </div>
-        <div className="flex items-center gap-4">
-          <button
-            onClick={handleAdd}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Widget title="Toplam Aktivite" value={totalActivities} color="blue" icon="FaCalendar" />
+
+          <Widget title="Bekleyen" value={pendingActivities} color="orange" icon="FaClock" />
+
+          <Widget title="Tamamlanan" value={completedActivities} color="green" icon="FaUsers" />
+
+          <Widget title="Bugün" value={todayActivities} color="purple" icon="FaCalendar" />
+        </div>
+
+        {/* Activity Types Distribution */}
+        <div className="bg-white rounded-lg shadow-sm border p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-3">Aktivite Türü Dağılımı</h3>
+          <div className="grid grid-cols-2 md:grid-cols-7 gap-3">
+            {typeDistribution.map(({ type, count, completed }) => {
+              const Icon = getActivityTypeIcon(type)
+              const completionRate = count > 0 ? Math.round((completed / count) * 100) : 0
+
+              return (
+                <div key={type} className="text-center p-4 border rounded-lg">
+                  <div className="flex justify-center mb-1">
+                    <Icon className="w-5 h-5 text-blue-600" />
+                  </div>
+                  <div className="text-sm font-medium text-gray-600 mb-1">
+                    {getActivityTypeText(type)}
+                  </div>
+                  <div className="text-xl font-bold text-gray-900 mb-1">{count}</div>
+                  <div className="text-xxs text-gray-500">%{completionRate} tamamlandı</div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Recent Activities */}
+        <div className="bg-white rounded-lg shadow-sm border p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-3">Son Aktiviteler</h3>
+          <div className="space-y-4 pt-2">
+            {activities
+              .sort(
+                (a, b) => new Date(b.activityDate).getTime() - new Date(a.activityDate).getTime(),
+              )
+              .slice(0, 5)
+              .map((activity) => {
+                const Icon = getActivityTypeIcon(activity.activityType)
+                const customer = customers.find((c) => c.id === activity.customerId)
+
+                return (
+                  <div
+                    key={activity.id}
+                    className="flex items-center justify-between p-4 bg-gray-50 rounded-lg"
+                  >
+                    <div className="flex items-center gap-4">
+                      <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+                        <Icon className="w-5 h-5 text-blue-600" />
+                      </div>
+                      <div>
+                        <h4 className="font-medium text-gray-900">{activity.subject}</h4>
+                        <p className="text-sm text-gray-500">
+                          {customer?.name} • {getActivityTypeText(activity.activityType)}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-sm text-gray-900">
+                        {new Date(activity.activityDate).toLocaleDateString('tr-TR')}
+                      </div>
+                      <span
+                        className={`px-2 py-1 text-xs font-medium rounded-full ${getActivityStatusColor(
+                          activity.status,
+                        )}`}
+                      >
+                        {getActivityStatusText(activity.status)}
+                      </span>
+                    </div>
+                  </div>
+                )
+              })}
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="flex gap-4 items-center">
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="Aktivite başlığı ara..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <select
+            value={selectedType}
+            onChange={(e) => setSelectedType(e.target.value as CrmActivityTypeEnum | 'all')}
+            className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
           >
-            <FaPlus className="w-4 h-4" />
-            Yeni Aktivite
-          </button>
+            <option value="all">Tüm Türler</option>
+            {Object.values(CrmActivityTypeEnum).map((type) => (
+              <option key={type} value={type}>
+                {getActivityTypeText(type)}
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={selectedStatus}
+            onChange={(e) => setSelectedStatus(e.target.value as ActivityStatusEnum | 'all')}
+            className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm Durumlar</option>
+            {Object.values(ActivityStatusEnum).map((status) => (
+              <option key={status} value={status}>
+                {getActivityStatusText(status)}
+              </option>
+            ))}
+          </select>
+
+          <div className="flex bg-gray-100 rounded-md p-1">
+            <button
+              onClick={() => setViewMode('list')}
+              className={`px-3 py-1.5 flex items-center gap-2 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>
+            <button
+              onClick={() => setViewMode('cards')}
+              className={`px-3 py-1.5 flex items-center gap-2 text-sm ${
+                viewMode === 'cards'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-white text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              <FaTh className="w-4 h-4" />
+            </button>
+          </div>
         </div>
-      </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Widget
-          title="Toplam Aktivite"
-          value={totalActivities}
-          color="blue"
-          icon="FaCalendar"
-        />
-
-        <Widget
-          title="Bekleyen"
-          value={pendingActivities}
-          color="orange"
-          icon="FaClock"
-        />
-
-        <Widget
-          title="Tamamlanan"
-          value={completedActivities}
-          color="green"
-          icon="FaUsers"
-        />
-
-        <Widget
-          title="Bugün"
-          value={todayActivities}
-          color="purple"
-          icon="FaCalendar"
-        />
-      </div>
-
-      {/* Activity Types Distribution */}
-      <div className="bg-white rounded-lg shadow-sm border p-4">
-        <h3 className="text-base font-semibold text-gray-900 mb-3">
-          Aktivite Türü Dağılımı
-        </h3>
-        <div className="grid grid-cols-2 md:grid-cols-7 gap-3">
-          {typeDistribution.map(({ type, count, completed }) => {
-            const Icon = getActivityTypeIcon(type);
-            const completionRate =
-              count > 0 ? Math.round((completed / count) * 100) : 0;
-
-            return (
-              <div key={type} className="text-center p-4 border rounded-lg">
-                <div className="flex justify-center mb-1">
-                  <Icon className="w-5 h-5 text-blue-600" />
-                </div>
-                <div className="text-sm font-medium text-gray-600 mb-1">
-                  {getPsActivityTypeText(type)}
-                </div>
-                <div className="text-xl font-bold text-gray-900 mb-1">
-                  {count}
-                </div>
-                <div className="text-xxs text-gray-500">
-                  %{completionRate} tamamlandı
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Recent Activities */}
-      <div className="bg-white rounded-lg shadow-sm border p-4">
-        <h3 className="text-base font-semibold text-gray-900 mb-3">
-          Son Aktiviteler
-        </h3>
-        <div className="space-y-4 pt-2">
-          {activities
-            .sort(
-              (a, b) =>
-                new Date(b.activityDate).getTime() -
-                new Date(a.activityDate).getTime()
-            )
-            .slice(0, 5)
-            .map((activity) => {
-              const Icon = getActivityTypeIcon(activity.activityType);
-              const customer = customers.find(
-                (c) => c.id === activity.customerId
-              );
+        {/* Data Display */}
+        {viewMode === 'list' ? (
+          <div className="bg-white rounded-lg shadow-sm border">
+            <DataTable data={filteredActivities} columns={columns} />
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredActivities.map((activity) => {
+              const customer = customers.find((c) => c.id === activity.customerId)
+              const ActivityIcon = getActivityTypeIcon(activity.activityType)
 
               return (
                 <div
                   key={activity.id}
-                  className="flex items-center justify-between p-4 bg-gray-50 rounded-lg"
+                  className="bg-white rounded-lg shadow-sm border p-4 hover:shadow-md transition-shadow"
                 >
-                  <div className="flex items-center gap-4">
-                    <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
-                      <Icon className="w-5 h-5 text-blue-600" />
-                    </div>
-                    <div>
-                      <h4 className="font-medium text-gray-900">
-                        {activity.subject}
-                      </h4>
-                      <p className="text-sm text-gray-500">
-                        {customer?.name} •{" "}
-                        {getPsActivityTypeText(activity.activityType)}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="text-right">
-                    <div className="text-sm text-gray-900">
-                      {new Date(activity.activityDate).toLocaleDateString(
-                        "tr-TR"
-                      )}
+                  {/* Card Header */}
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+                        <ActivityIcon className="w-4 h-4 text-blue-600" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-gray-900 text-sm leading-tight">
+                          {activity.subject}
+                        </h3>
+                        <p className="text-sm text-gray-600">
+                          {getActivityTypeText(activity.activityType)}
+                        </p>
+                      </div>
                     </div>
                     <span
                       className={`px-2 py-1 text-xs font-medium rounded-full ${getActivityStatusColor(
-                        activity.status
+                        activity.status,
                       )}`}
                     >
                       {getActivityStatusText(activity.status)}
                     </span>
                   </div>
-                </div>
-              );
-            })}
-        </div>
-      </div>
 
-      {/* Filters */}
-      <div className="flex gap-4 items-center">
-        <div className="flex-1">
-          <input
-            type="text"
-            placeholder="Aktivite başlığı ara..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-        </div>
+                  {/* Card Content */}
+                  <div className="space-y-2 mb-3">
+                    {customer && (
+                      <div className="flex items-center gap-2 text-sm">
+                        <FaBuilding className="w-4 h-4 text-gray-400" />
+                        <span className="text-gray-900 truncate">{customer.name}</span>
+                      </div>
+                    )}
 
-        <select
-          value={selectedType}
-          onChange={(e) =>
-            setSelectedType(e.target.value as CrmActivityTypeEnum | "all")
-          }
-          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Türler</option>
-          {Object.values(CrmActivityTypeEnum).map((type) => (
-            <option key={type} value={type}>
-              {getPsActivityTypeText(type)}
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={selectedStatus}
-          onChange={(e) =>
-            setSelectedStatus(e.target.value as ActivityStatusEnum | "all")
-          }
-          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Durumlar</option>
-          {Object.values(ActivityStatusEnum).map((status) => (
-            <option key={status} value={status}>
-              {getActivityStatusText(status)}
-            </option>
-          ))}
-        </select>
-
-        <div className="flex bg-gray-100 rounded-md p-1">
-          <button
-            onClick={() => setViewMode("list")}
-            className={`px-3 py-1.5 flex items-center gap-2 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>
-          <button
-            onClick={() => setViewMode("cards")}
-            className={`px-3 py-1.5 flex items-center gap-2 text-sm ${
-              viewMode === "cards"
-                ? "bg-blue-600 text-white"
-                : "bg-white text-gray-700 hover:bg-gray-50"
-            }`}
-          >
-            <FaTh className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      {/* Data Display */}
-      {viewMode === "list" ? (
-        <div className="bg-white rounded-lg shadow-sm border">
-          <DataTable data={filteredActivities} columns={columns} />
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {filteredActivities.map((activity) => {
-            const customer = customers.find(
-              (c) => c.id === activity.customerId
-            );
-            const ActivityIcon = getActivityTypeIcon(activity.activityType);
-
-            return (
-              <div
-                key={activity.id}
-                className="bg-white rounded-lg shadow-sm border p-4 hover:shadow-md transition-shadow"
-              >
-                {/* Card Header */}
-                <div className="flex items-start justify-between mb-3">
-                  <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                      <ActivityIcon className="w-4 h-4 text-blue-600" />
-                    </div>
-                    <div>
-                      <h3 className="font-semibold text-gray-900 text-sm leading-tight">
-                        {activity.subject}
-                      </h3>
-                      <p className="text-sm text-gray-600">
-                        {getPsActivityTypeText(activity.activityType)}
-                      </p>
-                    </div>
-                  </div>
-                  <span
-                    className={`px-2 py-1 text-xs font-medium rounded-full ${getActivityStatusColor(
-                      activity.status
-                    )}`}
-                  >
-                    {getActivityStatusText(activity.status)}
-                  </span>
-                </div>
-
-                {/* Card Content */}
-                <div className="space-y-2 mb-3">
-                  {customer && (
                     <div className="flex items-center gap-2 text-sm">
-                      <FaBuilding className="w-4 h-4 text-gray-400" />
-                      <span className="text-gray-900 truncate">
-                        {customer.name}
-                      </span>
-                    </div>
-                  )}
-
-                  <div className="flex items-center gap-2 text-sm">
-                    <FaCalendar className="w-4 h-4 text-gray-400" />
-                    <span className="text-gray-900">
-                      {new Date(activity.activityDate).toLocaleDateString(
-                        "tr-TR"
-                      )}
-                      {activity.startTime && (
-                        <span className="text-gray-500 ml-1">
-                          •{" "}
-                          {new Date(activity.startTime).toLocaleTimeString(
-                            "tr-TR",
-                            {
-                              hour: "2-digit",
-                              minute: "2-digit",
-                            }
-                          )}
-                        </span>
-                      )}
-                    </span>
-                  </div>
-
-                  <div className="flex items-center gap-2 text-sm">
-                    <FaUser className="w-4 h-4 text-gray-400" />
-                    <span className="text-gray-900">{activity.assignedTo}</span>
-                  </div>
-
-                  {activity.duration && (
-                    <div className="flex items-center gap-2 text-sm">
-                      <FaClock className="w-4 h-4 text-gray-400" />
+                      <FaCalendar className="w-4 h-4 text-gray-400" />
                       <span className="text-gray-900">
-                        {activity.duration} dk
+                        {new Date(activity.activityDate).toLocaleDateString('tr-TR')}
+                        {activity.startTime && (
+                          <span className="text-gray-500 ml-1">
+                            •{' '}
+                            {new Date(activity.startTime).toLocaleTimeString('tr-TR', {
+                              hour: '2-digit',
+                              minute: '2-digit',
+                            })}
+                          </span>
+                        )}
                       </span>
                     </div>
-                  )}
 
-                  <div className="flex items-center gap-2 text-sm">
-                    <FaFlag
-                      className={`w-4 h-4 ${
-                        activity.priority === PriorityEnum.High ||
-                        activity.priority === PriorityEnum.Urgent
-                          ? "text-red-500"
+                    <div className="flex items-center gap-2 text-sm">
+                      <FaUser className="w-4 h-4 text-gray-400" />
+                      <span className="text-gray-900">{activity.assignedTo}</span>
+                    </div>
+
+                    {activity.duration && (
+                      <div className="flex items-center gap-2 text-sm">
+                        <FaClock className="w-4 h-4 text-gray-400" />
+                        <span className="text-gray-900">{activity.duration} dk</span>
+                      </div>
+                    )}
+
+                    <div className="flex items-center gap-2 text-sm">
+                      <FaFlag
+                        className={`w-4 h-4 ${
+                          activity.priority === PriorityEnum.High ||
+                          activity.priority === PriorityEnum.Urgent
+                            ? 'text-red-500'
+                            : activity.priority === PriorityEnum.Normal
+                              ? 'text-blue-500'
+                              : 'text-gray-400'
+                        }`}
+                      />
+                      <span
+                        className={`${
+                          activity.priority === PriorityEnum.High ||
+                          activity.priority === PriorityEnum.Urgent
+                            ? 'text-red-600'
+                            : activity.priority === PriorityEnum.Normal
+                              ? 'text-blue-600'
+                              : 'text-gray-600'
+                        }`}
+                      >
+                        {activity.priority === PriorityEnum.Low
+                          ? 'Düşük'
                           : activity.priority === PriorityEnum.Normal
-                          ? "text-blue-500"
-                          : "text-gray-400"
-                      }`}
-                    />
-                    <span
-                      className={`${
-                        activity.priority === PriorityEnum.High ||
-                        activity.priority === PriorityEnum.Urgent
-                          ? "text-red-600"
-                          : activity.priority === PriorityEnum.Normal
-                          ? "text-blue-600"
-                          : "text-gray-600"
-                      }`}
-                    >
-                      {activity.priority === PriorityEnum.Low
-                        ? "Düşük"
-                        : activity.priority === PriorityEnum.Normal
-                        ? "Normal"
-                        : activity.priority === PriorityEnum.High
-                        ? "Yüksek"
-                        : "Acil"}
-                    </span>
+                            ? 'Normal'
+                            : activity.priority === PriorityEnum.High
+                              ? 'Yüksek'
+                              : 'Acil'}
+                      </span>
+                    </div>
+
+                    {activity.description && (
+                      <p
+                        className="text-sm text-gray-600 overflow-hidden"
+                        style={{
+                          display: '-webkit-box',
+                          WebkitLineClamp: 2,
+                          WebkitBoxOrient: 'vertical',
+                          lineHeight: '1.4em',
+                          maxHeight: '2.8em',
+                        }}
+                      >
+                        {activity.description}
+                      </p>
+                    )}
                   </div>
 
-                  {activity.description && (
-                    <p
-                      className="text-sm text-gray-600 overflow-hidden"
-                      style={{
-                        display: "-webkit-box",
-                        WebkitLineClamp: 2,
-                        WebkitBoxOrient: "vertical",
-                        lineHeight: "1.4em",
-                        maxHeight: "2.8em",
-                      }}
+                  {/* Card Actions */}
+                  <div className="flex gap-2 pt-3 border-t justify-end">
+                    <button
+                      onClick={() => handleViewDetails(activity)}
+                      className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors text-xs"
                     >
-                      {activity.description}
-                    </p>
-                  )}
+                      <FaCalendar className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => handleEdit(activity)}
+                      className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-green-600 bg-green-50 rounded-md hover:bg-green-100 transition-colors text-xs"
+                    >
+                      <FaEdit className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => handleDelete(activity.id)}
+                      className="px-2.5 py-1.5 text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors"
+                    >
+                      <FaTrash className="w-4 h-4" />
+                    </button>
+                  </div>
                 </div>
+              )
+            })}
+          </div>
+        )}
 
-                {/* Card Actions */}
-                <div className="flex gap-2 pt-3 border-t justify-end">
-                  <button
-                    onClick={() => handleViewDetails(activity)}
-                    className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors text-xs"
-                  >
-                    <FaCalendar className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => handleEdit(activity)}
-                    className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-green-600 bg-green-50 rounded-md hover:bg-green-100 transition-colors text-xs"
-                  >
-                    <FaEdit className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => handleDelete(activity.id)}
-                    className="px-2.5 py-1.5 text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors"
-                  >
-                    <FaTrash className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
+        {filteredActivities.length === 0 && (
+          <div className="text-center py-12">
+            <FaCalendar className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-gray-900 mb-2">Aktivite bulunamadı</h3>
+            <p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
+          </div>
+        )}
 
-      {filteredActivities.length === 0 && (
-        <div className="text-center py-12">
-          <FaCalendar className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            Aktivite bulunamadı
-          </h3>
-          <p className="text-gray-500">
-            Arama kriterlerinizi değiştirmeyi deneyin.
-          </p>
-        </div>
-      )}
+        {/* Modals */}
+        <ActivityForm
+          isOpen={isFormOpen}
+          onClose={handleCloseForm}
+          onSave={handleSaveActivity}
+          activity={selectedActivity}
+          mode={formMode}
+        />
 
-      {/* Modals */}
-      <ActivityForm
-        isOpen={isFormOpen}
-        onClose={handleCloseForm}
-        onSave={handleSaveActivity}
-        activity={selectedActivity}
-        mode={formMode}
-      />
+        <ActivityDetails
+          isOpen={isDetailsOpen}
+          onClose={handleCloseDetails}
+          onEdit={handleEditFromDetails}
+          activity={selectedActivity}
+        />
+      </div>
+    </Container>
+  )
+}
 
-      <ActivityDetails
-        isOpen={isDetailsOpen}
-        onClose={handleCloseDetails}
-        onEdit={handleEditFromDetails}
-        activity={selectedActivity}
-      />
-    </div>
-  );
-};
-
-export default ActivityRecords;
+export default ActivityRecords
diff --git a/ui/src/views/crm/components/CustomerCards.tsx b/ui/src/views/crm/components/CustomerCards.tsx
index d2dd1097..dc3db675 100644
--- a/ui/src/views/crm/components/CustomerCards.tsx
+++ b/ui/src/views/crm/components/CustomerCards.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 {
   FaUserCheck,
   FaPlus,
@@ -19,62 +19,55 @@ import {
   FaGlobe,
   FaUser,
   FaChartLine,
-} from "react-icons/fa";
-import classNames from "classnames";
-import { CustomerSegmentEnum } from "../../../types/crm";
-import dayjs from "dayjs";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
-import Widget from "../../../components/common/Widget";
-import { BusinessPartyStatusEnum, PartyType } from "../../../types/common";
+} from 'react-icons/fa'
+import classNames from 'classnames'
+import { CustomerSegmentEnum } from '../../../types/crm'
+import dayjs from 'dayjs'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
+import Widget from '../../../components/common/Widget'
+import { BusinessPartyStatusEnum, PartyType } from '../../../types/common'
 import {
   getBusinessPartyStatusColor,
   getBusinessPartyStatusName,
   getCustomerSegmentName,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
 
 const CustomerCards: React.FC = () => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [filterStatus, setFilterStatus] = useState("all");
-  const [filterSegment, setFilterSegment] = useState("all");
-  const [showFilters, setShowFilters] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('')
+  const [filterStatus, setFilterStatus] = useState('all')
+  const [filterSegment, setFilterSegment] = useState('all')
+  const [showFilters, setShowFilters] = useState(false)
 
   const {
     data: customers,
     isLoading,
     error,
   } = useQuery({
-    queryKey: ["customers", searchTerm, filterStatus, filterSegment],
+    queryKey: ['customers', searchTerm, filterStatus, filterSegment],
     queryFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
+      await new Promise((resolve) => setTimeout(resolve, 500))
 
       const mockCustomers = mockBusinessParties.filter(
-        (customer) => customer.partyType === PartyType.Customer
-      );
+        (customer) => customer.partyType === PartyType.Customer,
+      )
 
       return mockCustomers.filter((customer) => {
         const matchesSearch =
           customer.code?.toLowerCase().includes(searchTerm.toLowerCase()) ||
           customer.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          customer.primaryContact?.fullName
-            ?.toLowerCase()
-            .includes(searchTerm.toLowerCase());
-        const matchesStatus =
-          filterStatus === "all" || customer.status === filterStatus;
-        const matchesSegment =
-          filterSegment === "all" || customer.customerSegment === filterSegment;
-        return matchesSearch && matchesStatus && matchesSegment;
-      });
+          customer.primaryContact?.fullName?.toLowerCase().includes(searchTerm.toLowerCase())
+        const matchesStatus = filterStatus === 'all' || customer.status === filterStatus
+        const matchesSegment = filterSegment === 'all' || customer.customerSegment === filterSegment
+        return matchesSearch && matchesStatus && matchesSegment
+      })
     },
-  });
+  })
 
   if (isLoading) {
     return (
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
         {[...Array(12)].map((_, index) => (
-          <div
-            key={index}
-            className="bg-white rounded-xl shadow-sm border animate-pulse"
-          >
+          <div key={index} className="bg-white rounded-xl shadow-sm border animate-pulse">
             <div className="p-6">
               <div className="flex items-center justify-between mb-4">
                 <div className="flex items-center space-x-3">
@@ -105,7 +98,7 @@ const CustomerCards: React.FC = () => {
           </div>
         ))}
       </div>
-    );
+    )
   }
 
   if (error) {
@@ -113,12 +106,10 @@ const CustomerCards: 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">
-            Müşteriler yüklenirken hata oluştu.
-          </span>
+          <span className="text-red-800">Müşteriler yüklenirken hata oluştu.</span>
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -143,10 +134,10 @@ const CustomerCards: React.FC = () => {
           <button
             onClick={() => setShowFilters(!showFilters)}
             className={classNames(
-              "flex items-center px-3 py-1.5 text-sm border rounded-lg transition-colors",
+              '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"
+                ? 'border-blue-500 bg-blue-50 text-blue-700'
+                : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
             )}
           >
             <FaFilter size={14} className="mr-2" />
@@ -156,7 +147,7 @@ const CustomerCards: React.FC = () => {
 
         <div className="flex items-center space-x-2">
           <button
-            onClick={() => alert("Dışa aktarma özelliği yakında eklenecek")}
+            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={14} className="mr-2" />
@@ -178,18 +169,14 @@ const CustomerCards: React.FC = () => {
         <div className="bg-white border border-gray-200 rounded-lg p-3">
           <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
             <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Durum
-              </label>
+              <label className="block text-xs font-medium text-gray-700 mb-1">Durum</label>
               <select
                 value={filterStatus}
                 onChange={(e) => setFilterStatus(e.target.value)}
                 className="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
               >
                 <option value="all">Tümü</option>
-                <option value={BusinessPartyStatusEnum.Prospect}>
-                  Potansiyel
-                </option>
+                <option value={BusinessPartyStatusEnum.Prospect}>Potansiyel</option>
                 <option value={BusinessPartyStatusEnum.Active}>Aktif</option>
                 <option value={BusinessPartyStatusEnum.Inactive}>Pasif</option>
                 <option value={BusinessPartyStatusEnum.Blocked}>Blokeli</option>
@@ -197,9 +184,7 @@ const CustomerCards: React.FC = () => {
             </div>
 
             <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Segment
-              </label>
+              <label className="block text-xs font-medium text-gray-700 mb-1">Segment</label>
               <select
                 value={filterSegment}
                 onChange={(e) => setFilterSegment(e.target.value)}
@@ -216,9 +201,9 @@ const CustomerCards: React.FC = () => {
             <div className="flex items-end">
               <button
                 onClick={() => {
-                  setFilterStatus("all");
-                  setFilterSegment("all");
-                  setSearchTerm("");
+                  setFilterStatus('all')
+                  setFilterSegment('all')
+                  setSearchTerm('')
                 }}
                 className="w-full px-4 py-1.5 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
               >
@@ -240,11 +225,7 @@ const CustomerCards: React.FC = () => {
 
         <Widget
           title="Aktif Müşteri"
-          value={
-            customers?.filter(
-              (c) => c.status === BusinessPartyStatusEnum.Active
-            ).length || 0
-          }
+          value={customers?.filter((c) => c.status === BusinessPartyStatusEnum.Active).length || 0}
           color="green"
           icon="FaUserCheck"
         />
@@ -252,9 +233,7 @@ const CustomerCards: React.FC = () => {
         <Widget
           title="Toplam Ciro"
           value={`₺${
-            customers
-              ?.reduce((acc, c) => acc + (c.totalRevenue ?? 0), 0)
-              .toLocaleString() || 0
+            customers?.reduce((acc, c) => acc + (c.totalRevenue ?? 0), 0).toLocaleString() || 0
           }`}
           color="purple"
           icon="FaDollarSign"
@@ -265,10 +244,8 @@ const CustomerCards: React.FC = () => {
           value={`₺${
             customers?.length
               ? Math.round(
-                  customers.reduce(
-                    (acc, c) => acc + (c.averageOrderValue ?? 0),
-                    0
-                  ) / customers.length
+                  customers.reduce((acc, c) => acc + (c.averageOrderValue ?? 0), 0) /
+                    customers.length,
                 ).toLocaleString()
               : 0
           }`}
@@ -288,14 +265,14 @@ const CustomerCards: React.FC = () => {
             {/* Status Indicator */}
             <div
               className={classNames(
-                "absolute top-0 left-0 w-full h-1",
+                'absolute top-0 left-0 w-full h-1',
                 customer.status === BusinessPartyStatusEnum.Active
-                  ? "bg-green-500"
+                  ? 'bg-green-500'
                   : customer.status === BusinessPartyStatusEnum.Prospect
-                  ? "bg-blue-500"
-                  : customer.status === BusinessPartyStatusEnum.Blocked
-                  ? "bg-red-500"
-                  : "bg-gray-400"
+                    ? 'bg-blue-500'
+                    : customer.status === BusinessPartyStatusEnum.Blocked
+                      ? 'bg-red-500'
+                      : 'bg-gray-400',
               )}
             ></div>
 
@@ -317,8 +294,8 @@ const CustomerCards: React.FC = () => {
                 </div>
                 <span
                   className={classNames(
-                    "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border",
-                    getBusinessPartyStatusColor(customer.status!)
+                    'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border',
+                    getBusinessPartyStatusColor(customer.status!),
                   )}
                 >
                   {getBusinessPartyStatusName(customer.status!)}
@@ -331,9 +308,7 @@ const CustomerCards: React.FC = () => {
                   {customer.name}
                 </h2>
                 {customer.industry && (
-                  <p className="text-xs text-gray-500 mt-1">
-                    {customer.industry}
-                  </p>
+                  <p className="text-xs text-gray-500 mt-1">{customer.industry}</p>
                 )}
               </div>
 
@@ -341,15 +316,11 @@ const CustomerCards: React.FC = () => {
               <div className="space-y-1.5 mb-3 text-xs">
                 <div className="flex items-center text-sm text-gray-600">
                   <FaUser className="w-4 h-4 mr-2 text-gray-400" />
-                  <span className="truncate">
-                    {customer.primaryContact?.fullName}
-                  </span>
+                  <span className="truncate">{customer.primaryContact?.fullName}</span>
                 </div>
                 <div className="flex items-center text-sm text-gray-600">
                   <FaEnvelope className="w-4 h-4 mr-2 text-gray-400" />
-                  <span className="truncate">
-                    {customer.primaryContact?.email}
-                  </span>
+                  <span className="truncate">{customer.primaryContact?.email}</span>
                 </div>
                 {customer.primaryContact?.phone && (
                   <div className="flex items-center text-sm text-gray-600">
@@ -384,17 +355,13 @@ const CustomerCards: React.FC = () => {
                   <div className="text-base font-bold text-green-700">
                     ₺{(customer.totalRevenue! / 1000).toLocaleString()}K
                   </div>
-                  <div className="text-xs text-green-600 font-medium">
-                    Toplam Ciro
-                  </div>
+                  <div className="text-xs text-green-600 font-medium">Toplam Ciro</div>
                 </div>
                 <div className="text-center p-2 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg border border-blue-100">
                   <div className="text-base font-bold text-blue-700">
                     ₺{(customer.averageOrderValue! / 1000).toLocaleString()}K
                   </div>
-                  <div className="text-xs text-blue-600 font-medium">
-                    Ort. Sipariş
-                  </div>
+                  <div className="text-xs text-blue-600 font-medium">Ort. Sipariş</div>
                 </div>
               </div>
 
@@ -402,16 +369,12 @@ const CustomerCards: React.FC = () => {
               <div className="flex items-center justify-between text-xs text-gray-500 mb-3">
                 <div className="flex items-center">
                   <FaStar className="w-4 h-4 text-yellow-500 mr-1" />
-                  <span>
-                    LTV: ₺{(customer.lifetimeValue! / 1000000).toFixed(1)}M
-                  </span>
+                  <span>LTV: ₺{(customer.lifetimeValue! / 1000000).toFixed(1)}M</span>
                 </div>
                 {customer.lastOrderDate && (
                   <div className="flex items-center">
                     <FaCalendar className="w-4 h-4 mr-1" />
-                    <span>
-                      {dayjs(customer.lastOrderDate).format("DD.MM.YY")}
-                    </span>
+                    <span>{dayjs(customer.lastOrderDate).format('DD.MM.YY')}</span>
                   </div>
                 )}
               </div>
@@ -419,9 +382,7 @@ const CustomerCards: React.FC = () => {
               {/* Credit Limit Progress */}
               <div className="mb-3">
                 <div className="flex justify-between text-xs mb-1">
-                  <span className="text-gray-600 font-medium">
-                    Kredi Kullanımı
-                  </span>
+                  <span className="text-gray-600 font-medium">Kredi Kullanımı</span>
                   <span className="font-semibold text-gray-900">
                     ₺{customer.creditLimit.toLocaleString()}
                   </span>
@@ -429,24 +390,17 @@ const CustomerCards: React.FC = () => {
                 <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                   <div
                     className={classNames(
-                      "h-2.5 rounded-full transition-all duration-500",
-                      Math.min(
-                        (customer.totalRevenue! / customer.creditLimit) * 100,
-                        100
-                      ) > 80
-                        ? "bg-gradient-to-r from-red-500 to-red-600"
-                        : Math.min(
-                            (customer.totalRevenue! / customer.creditLimit) *
-                              100,
-                            100
-                          ) > 60
-                        ? "bg-gradient-to-r from-yellow-400 to-yellow-500"
-                        : "bg-gradient-to-r from-green-500 to-green-600"
+                      'h-2.5 rounded-full transition-all duration-500',
+                      Math.min((customer.totalRevenue! / customer.creditLimit) * 100, 100) > 80
+                        ? 'bg-gradient-to-r from-red-500 to-red-600'
+                        : Math.min((customer.totalRevenue! / customer.creditLimit) * 100, 100) > 60
+                          ? 'bg-gradient-to-r from-yellow-400 to-yellow-500'
+                          : 'bg-gradient-to-r from-green-500 to-green-600',
                     )}
                     style={{
                       width: `${Math.min(
                         (customer.totalRevenue! / customer.creditLimit) * 100,
-                        100
+                        100,
                       )}%`,
                     }}
                   ></div>
@@ -454,10 +408,7 @@ const CustomerCards: React.FC = () => {
                 <div className="flex justify-between text-xs text-gray-500 mt-1">
                   <span>₺0</span>
                   <span className="font-medium">
-                    {Math.round(
-                      (customer.totalRevenue! / customer.creditLimit) * 100
-                    )}
-                    % kullanıldı
+                    {Math.round((customer.totalRevenue! / customer.creditLimit) * 100)}% kullanıldı
                   </span>
                 </div>
               </div>
@@ -485,17 +436,15 @@ const CustomerCards: React.FC = () => {
                 <div className="flex items-center text-xs">
                   <div
                     className={classNames(
-                      "flex items-center px-2 py-1 rounded-full text-xs font-medium",
+                      'flex items-center px-2 py-1 rounded-full text-xs font-medium',
                       customer.status === BusinessPartyStatusEnum.Active
-                        ? "bg-green-100 text-green-700"
-                        : "bg-gray-100 text-gray-600"
+                        ? 'bg-green-100 text-green-700'
+                        : 'bg-gray-100 text-gray-600',
                     )}
                   >
                     <FaChartLine className="w-3 h-3 mr-1" />
                     <span>
-                      {customer.status === BusinessPartyStatusEnum.Active
-                        ? "Aktif"
-                        : "Durgun"}
+                      {customer.status === BusinessPartyStatusEnum.Active ? 'Aktif' : 'Durgun'}
                     </span>
                   </div>
                 </div>
@@ -509,12 +458,9 @@ const CustomerCards: React.FC = () => {
       {(!customers || customers.length === 0) && (
         <div className="text-center py-10">
           <FaUserCheck className="mx-auto h-12 w-12 text-gray-400 mb-3" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            Müşteri bulunamadı
-          </h3>
+          <h3 className="text-lg font-medium text-gray-900 mb-2">Müşteri bulunamadı</h3>
           <p className="text-sm text-gray-500 mb-4">
-            Yeni müşteri ekleyerek başlayın veya arama kriterlerinizi
-            değiştirin.
+            Yeni müşteri ekleyerek başlayın veya arama kriterlerinizi değiştirin.
           </p>
           <Link
             to="/admin/crm/customers/new"
@@ -526,7 +472,7 @@ const CustomerCards: React.FC = () => {
         </div>
       )}
     </div>
-  );
-};
+  )
+}
 
-export default CustomerCards;
+export default CustomerCards
diff --git a/ui/src/views/crm/components/CustomerEdit.tsx b/ui/src/views/crm/components/CustomerEdit.tsx
index b16518ed..d074ffcb 100644
--- a/ui/src/views/crm/components/CustomerEdit.tsx
+++ b/ui/src/views/crm/components/CustomerEdit.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { useParams, useNavigate, Link } from "react-router-dom";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import React, { useState } from 'react'
+import { useParams, useNavigate, Link } from 'react-router-dom'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import {
   FaArrowLeft,
   FaSave,
@@ -11,117 +11,105 @@ import {
   FaIdCard,
   FaCreditCard,
   FaExclamationTriangle,
-} from "react-icons/fa";
-import classNames from "classnames";
-import { CustomerSegmentEnum, CustomerTypeEnum } from "../../../types/crm";
-import {
-  mockBusinessParties,
-  mockBusinessPartyNew,
-} from "../../../mocks/mockBusinessParties";
-import {
-  BusinessParty,
-  BusinessPartyStatusEnum,
-  PaymentTerms,
-} from "../../../types/common";
+} from 'react-icons/fa'
+import classNames from 'classnames'
+import { CustomerSegmentEnum, CustomerTypeEnum } from '../../../types/crm'
+import { mockBusinessParties, mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
+import { BusinessParty, BusinessPartyStatusEnum, PaymentTerms } from '../../../types/common'
+import { Container } from '@/components/shared'
 
 const CustomerEdit: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
-  const [activeTab, setActiveTab] = useState("basic");
-  const [isDirty, setIsDirty] = useState(false);
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [activeTab, setActiveTab] = useState('basic')
+  const [isDirty, setIsDirty] = useState(false)
 
   const {
     data: customer,
     isLoading,
     error,
   } = useQuery({
-    queryKey: ["customer", id],
+    queryKey: ['customer', id],
     queryFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 300));
-      const found = mockBusinessParties.find((c) => c.id === id);
-      if (!found) throw new Error("Müşteri bulunamadı");
-      return found;
+      await new Promise((resolve) => setTimeout(resolve, 300))
+      const found = mockBusinessParties.find((c) => c.id === id)
+      if (!found) throw new Error('Müşteri bulunamadı')
+      return found
     },
-  });
+  })
 
-  const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew);
+  const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew)
 
   // Initialize form data when customer is loaded
   React.useEffect(() => {
     if (customer) {
-      setFormData(
-        mockBusinessParties.find((c) => c.id === id) || mockBusinessPartyNew
-      );
+      setFormData(mockBusinessParties.find((c) => c.id === id) || mockBusinessPartyNew)
     }
-  }, [customer, id]);
+  }, [customer, id])
 
   const updateMutation = useMutation({
     mutationFn: async (data: BusinessParty) => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
+      await new Promise((resolve) => setTimeout(resolve, 1000))
       // Simulate API call
-      return { ...customer, ...data };
+      return { ...customer, ...data }
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["customers"] });
-      queryClient.invalidateQueries({ queryKey: ["customer", id] });
-      setIsDirty(false);
-      navigate(`/admin/crm/customers/${id}`);
+      queryClient.invalidateQueries({ queryKey: ['customers'] })
+      queryClient.invalidateQueries({ queryKey: ['customer', id] })
+      setIsDirty(false)
+      navigate(`/admin/crm/customers/${id}`)
     },
-  });
+  })
 
   const handleInputChange = (field: string, value: string | number) => {
-    const keys = field.split(".");
+    const keys = field.split('.')
     if (keys.length === 2) {
-      const [section, subField] = keys;
+      const [section, subField] = keys
       setFormData((prev: any) => {
-        if (section === "primaryContact") {
+        if (section === 'primaryContact') {
           return {
             ...prev,
             primaryContact: {
               ...prev.primaryContact,
               [subField]: value,
             },
-          };
-        } else if (section === "address") {
+          }
+        } else if (section === 'address') {
           return {
             ...prev,
             address: {
               ...prev.address,
               [subField]: value,
             },
-          };
+          }
         }
-        return prev;
-      });
+        return prev
+      })
     } else {
       setFormData((prev) => ({
         ...prev,
         [field]: value,
-      }));
+      }))
     }
-    setIsDirty(true);
-  };
+    setIsDirty(true)
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
-    updateMutation.mutate(formData);
-  };
+    updateMutation.mutate(formData)
+  }
 
   const handleCancel = () => {
     if (isDirty) {
-      if (
-        window.confirm(
-          "Değişiklikleriniz kaydedilmedi. Çıkmak istediğinizden emin misiniz?"
-        )
-      ) {
-        navigate(`/admin/crm/customers/${id}`);
+      if (window.confirm('Değişiklikleriniz kaydedilmedi. Çıkmak istediğinizden emin misiniz?')) {
+        navigate(`/admin/crm/customers/${id}`)
       }
     } else {
-      navigate(`/admin/crm/customers/${id}`);
+      navigate(`/admin/crm/customers/${id}`)
     }
-  };
+  }
 
   if (isLoading) {
     return (
@@ -139,7 +127,7 @@ const CustomerEdit: React.FC = () => {
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   if (error || !customer) {
@@ -150,17 +138,13 @@ const CustomerEdit: React.FC = () => {
             <div className="flex items-center">
               <FaExclamationTriangle className="h-8 w-8 text-red-600 mr-3" />
               <div>
-                <h3 className="text-lg font-medium text-red-800">
-                  Müşteri Bulunamadı
-                </h3>
-                <p className="text-red-600">
-                  Düzenlemek istediğiniz müşteri mevcut değil.
-                </p>
+                <h3 className="text-lg font-medium text-red-800">Müşteri Bulunamadı</h3>
+                <p className="text-red-600">Düzenlemek istediğiniz müşteri mevcut değil.</p>
               </div>
             </div>
             <div className="mt-4">
               <button
-                onClick={() => navigate("/admin/crm/customers")}
+                onClick={() => navigate('/admin/crm/customers')}
                 className="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
               >
                 <FaArrowLeft className="w-4 h-4 mr-2" />
@@ -170,283 +154,137 @@ const CustomerEdit: React.FC = () => {
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   const tabs = [
-    { id: "basic", label: "Temel Bilgiler", icon: FaBuilding },
-    { id: "contact", label: "İletişim", icon: FaUser },
-    { id: "business", label: "İş Bilgileri", icon: FaIdCard },
-    { id: "financial", label: "Finansal", icon: FaCreditCard },
-  ];
+    { id: 'basic', label: 'Temel Bilgiler', icon: FaBuilding },
+    { id: 'contact', label: 'İletişim', icon: FaUser },
+    { id: 'business', label: 'İş Bilgileri', icon: FaIdCard },
+    { id: 'financial', label: 'Finansal', icon: FaCreditCard },
+  ]
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <form onSubmit={handleSubmit}>
-        {/* Header */}
-        <div className="bg-white border-b border-gray-200">
-          <div className="mx-auto px-4 py-3">
-            {/* Breadcrumb */}
-            <div className="flex items-center space-x-2 text-xs text-gray-500 mb-3">
-              <Link to="/admin/crm/customers" className="hover:text-blue-600">
-                Müşteriler
-              </Link>
-              <span>/</span>
-              <Link
-                to={`/admin/crm/customers/${id}`}
-                className="hover:text-blue-600"
-              >
-                {customer.name}
-              </Link>
-              <span>/</span>
-              <span className="text-gray-900">Düzenle</span>
-            </div>
-
-            {/* Header */}
-            <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-4">
-                <button
-                  type="button"
-                  onClick={handleCancel}
-                  className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-                >
-                  <FaArrowLeft className="w-5 h-5" />
-                </button>
+    <Container>
+      <div className="min-h-screen bg-gray-50">
+        <form onSubmit={handleSubmit}>
+          {/* Header */}
+          <div className="bg-white border-b border-gray-200">
+            <div className="mx-auto px-4 py-3">
+              {/* Breadcrumb */}
+              <div className="flex items-center space-x-2 text-xs text-gray-500 mb-3">
+                <Link to="/admin/crm/customers" className="hover:text-blue-600">
+                  Müşteriler
+                </Link>
+                <span>/</span>
+                <Link to={`/admin/crm/customers/${id}`} className="hover:text-blue-600">
+                  {customer.name}
+                </Link>
+                <span>/</span>
+                <span className="text-gray-900">Düzenle</span>
+              </div>
 
+              {/* Header */}
+              <div className="flex items-center justify-between">
                 <div className="flex items-center space-x-4">
-                  <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white shadow-lg">
-                    <FaBuilding className="w-6 h-6" />
-                  </div>
+                  <button
+                    type="button"
+                    onClick={handleCancel}
+                    className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                  >
+                    <FaArrowLeft className="w-5 h-5" />
+                  </button>
 
-                  <div>
-                    <h1 className="text-xl font-bold text-gray-900">
-                      Müşteri Düzenle
-                    </h1>
-                    <p className="text-sm text-gray-600">{customer.name}</p>
+                  <div className="flex items-center space-x-4">
+                    <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white shadow-lg">
+                      <FaBuilding className="w-6 h-6" />
+                    </div>
+
+                    <div>
+                      <h1 className="text-xl font-bold text-gray-900">Müşteri Düzenle</h1>
+                      <p className="text-sm text-gray-600">{customer.name}</p>
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div className="flex items-center space-x-2">
-                <button
-                  type="button"
-                  onClick={handleCancel}
-                  className="inline-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"
-                >
-                  <FaTimes className="w-4 h-4 mr-2" />
-                  İptal
-                </button>
-                <button
-                  type="submit"
-                  disabled={!isDirty || updateMutation.isPending}
-                  className={classNames(
-                    "inline-flex items-center px-3 py-1.5 text-sm rounded-lg transition-colors",
-                    isDirty && !updateMutation.isPending
-                      ? "bg-blue-600 text-white hover:bg-blue-700"
-                      : "bg-gray-300 text-gray-500 cursor-not-allowed"
-                  )}
-                >
-                  {updateMutation.isPending ? (
-                    <>
-                      <div className="animate-spin w-4 h-4 mr-2 border-2 border-white border-t-transparent rounded-full"></div>
-                      Kaydediliyor...
-                    </>
-                  ) : (
-                    <>
-                      <FaSave className="w-4 h-4 mr-2" />
-                      Kaydet
-                    </>
-                  )}
-                </button>
+                <div className="flex items-center space-x-2">
+                  <button
+                    type="button"
+                    onClick={handleCancel}
+                    className="inline-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"
+                  >
+                    <FaTimes className="w-4 h-4 mr-2" />
+                    İptal
+                  </button>
+                  <button
+                    type="submit"
+                    disabled={!isDirty || updateMutation.isPending}
+                    className={classNames(
+                      'inline-flex items-center px-3 py-1.5 text-sm rounded-lg transition-colors',
+                      isDirty && !updateMutation.isPending
+                        ? 'bg-blue-600 text-white hover:bg-blue-700'
+                        : 'bg-gray-300 text-gray-500 cursor-not-allowed',
+                    )}
+                  >
+                    {updateMutation.isPending ? (
+                      <>
+                        <div className="animate-spin w-4 h-4 mr-2 border-2 border-white border-t-transparent rounded-full"></div>
+                        Kaydediliyor...
+                      </>
+                    ) : (
+                      <>
+                        <FaSave className="w-4 h-4 mr-2" />
+                        Kaydet
+                      </>
+                    )}
+                  </button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        {/* Tabs */}
-        <div className="bg-white border-b border-gray-200">
-          <div className="mx-auto px-4">
-            <nav className="flex space-x-8">
-              {tabs.map((tab) => (
-                <button
-                  key={tab.id}
-                  type="button"
-                  onClick={() => setActiveTab(tab.id)}
-                  className={classNames(
-                    "flex items-center space-x-2 py-3 px-1 border-b-2 font-medium text-sm transition-colors",
-                    activeTab === tab.id
-                      ? "border-blue-500 text-blue-600"
-                      : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                  )}
-                >
-                  <tab.icon className="w-4 h-4" />
-                  <span>{tab.label}</span>
-                </button>
-              ))}
-            </nav>
-          </div>
-        </div>
-
-        {/* Form Content */}
-        <div className="mx-auto py-4">
-          {activeTab === "basic" && (
-            <div className="bg-white rounded-lg shadow p-4">
-              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                <FaBuilding className="w-5 h-5 mr-2" />
-                Temel Bilgiler
-              </h3>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Müşteri Kodu *
-                  </label>
-                  <input
-                    type="text"
-                    value={formData.code}
-                    onChange={(e) => handleInputChange("code", e.target.value)}
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    required
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Şirket Adı *
-                  </label>
-                  <input
-                    type="text"
-                    value={formData.name}
-                    onChange={(e) => handleInputChange("name", e.target.value)}
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    required
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Müşteri Tipi
-                  </label>
-                  <select
-                    value={formData.customerType}
-                    onChange={(e) =>
-                      handleInputChange("customerType", e.target.value)
-                    }
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          {/* Tabs */}
+          <div className="bg-white border-b border-gray-200">
+            <div className="mx-auto px-4">
+              <nav className="flex space-x-8">
+                {tabs.map((tab) => (
+                  <button
+                    key={tab.id}
+                    type="button"
+                    onClick={() => setActiveTab(tab.id)}
+                    className={classNames(
+                      'flex items-center space-x-2 py-3 px-1 border-b-2 font-medium text-sm transition-colors',
+                      activeTab === tab.id
+                        ? 'border-blue-500 text-blue-600'
+                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                    )}
                   >
-                    <option value={CustomerTypeEnum.Company}>Şirket</option>
-                    <option value={CustomerTypeEnum.Individual}>
-                      Bireysel
-                    </option>
-                    <option value={CustomerTypeEnum.Government}>Kamu</option>
-                    <option value={CustomerTypeEnum.NonProfit}>
-                      Kar Amacı Gütmeyen
-                    </option>
-                  </select>
-                </div>
-
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Sektör
-                  </label>
-                  <input
-                    type="text"
-                    value={formData.industry}
-                    onChange={(e) =>
-                      handleInputChange("industry", e.target.value)
-                    }
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="Teknoloji, İmalat, Hizmet vb."
-                  />
-                </div>
-
-                <div className="md:col-span-2">
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Website
-                  </label>
-                  <input
-                    type="url"
-                    value={formData.website}
-                    onChange={(e) =>
-                      handleInputChange("website", e.target.value)
-                    }
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="https://www.ornek.com"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Müşteri Durumu
-                  </label>
-                  <select
-                    value={formData.status}
-                    onChange={(e) =>
-                      handleInputChange("status", e.target.value)
-                    }
-                    className="w-full 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={BusinessPartyStatusEnum.Prospect}>
-                      Potansiyel
-                    </option>
-                    <option value={BusinessPartyStatusEnum.Active}>
-                      Aktif
-                    </option>
-                    <option value={BusinessPartyStatusEnum.Inactive}>
-                      Pasif
-                    </option>
-                    <option value={BusinessPartyStatusEnum.Blocked}>
-                      Blokeli
-                    </option>
-                  </select>
-                </div>
-
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Müşteri Segmenti
-                  </label>
-                  <select
-                    value={formData.customerSegment}
-                    onChange={(e) =>
-                      handleInputChange("customerSegment", e.target.value)
-                    }
-                    className="w-full 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={CustomerSegmentEnum.Enterprise}>
-                      Kurumsal
-                    </option>
-                    <option value={CustomerSegmentEnum.SMB}>KOBİ</option>
-                    <option value={CustomerSegmentEnum.Startup}>Girişim</option>
-                    <option value={CustomerSegmentEnum.Government}>Kamu</option>
-                  </select>
-                </div>
-              </div>
+                    <tab.icon className="w-4 h-4" />
+                    <span>{tab.label}</span>
+                  </button>
+                ))}
+              </nav>
             </div>
-          )}
+          </div>
 
-          {activeTab === "contact" && (
-            <div className="space-y-4">
-              {/* Primary Contact */}
+          {/* Form Content */}
+          <div className="mx-auto py-4">
+            {activeTab === 'basic' && (
               <div className="bg-white rounded-lg shadow p-4">
                 <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                  <FaUser className="w-5 h-5 mr-2" />
-                  Ana İletişim Kişisi
+                  <FaBuilding className="w-5 h-5 mr-2" />
+                  Temel Bilgiler
                 </h3>
 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
                     <label className="block text-xs font-medium text-gray-700 mb-1">
-                      Ad *
+                      Müşteri Kodu *
                     </label>
                     <input
                       type="text"
-                      value={formData.primaryContact?.firstName}
-                      onChange={(e) =>
-                        handleInputChange(
-                          "primaryContact.firstName",
-                          e.target.value
-                        )
-                      }
+                      value={formData.code}
+                      onChange={(e) => handleInputChange('code', e.target.value)}
                       className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       required
                     />
@@ -454,17 +292,12 @@ const CustomerEdit: React.FC = () => {
 
                   <div>
                     <label className="block text-xs font-medium text-gray-700 mb-1">
-                      Soyad *
+                      Şirket Adı *
                     </label>
                     <input
                       type="text"
-                      value={formData.primaryContact?.lastName}
-                      onChange={(e) =>
-                        handleInputChange(
-                          "primaryContact.lastName",
-                          e.target.value
-                        )
-                      }
+                      value={formData.name}
+                      onChange={(e) => handleInputChange('name', e.target.value)}
                       className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       required
                     />
@@ -472,310 +305,372 @@ const CustomerEdit: React.FC = () => {
 
                   <div>
                     <label className="block text-xs font-medium text-gray-700 mb-1">
-                      Ünvan
+                      Müşteri Tipi
+                    </label>
+                    <select
+                      value={formData.customerType}
+                      onChange={(e) => handleInputChange('customerType', e.target.value)}
+                      className="w-full 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={CustomerTypeEnum.Company}>Şirket</option>
+                      <option value={CustomerTypeEnum.Individual}>Bireysel</option>
+                      <option value={CustomerTypeEnum.Government}>Kamu</option>
+                      <option value={CustomerTypeEnum.NonProfit}>Kar Amacı Gütmeyen</option>
+                    </select>
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">Sektör</label>
+                    <input
+                      type="text"
+                      value={formData.industry}
+                      onChange={(e) => handleInputChange('industry', e.target.value)}
+                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="Teknoloji, İmalat, Hizmet vb."
+                    />
+                  </div>
+
+                  <div className="md:col-span-2">
+                    <label className="block text-xs font-medium text-gray-700 mb-1">Website</label>
+                    <input
+                      type="url"
+                      value={formData.website}
+                      onChange={(e) => handleInputChange('website', e.target.value)}
+                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="https://www.ornek.com"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                      Müşteri Durumu
+                    </label>
+                    <select
+                      value={formData.status}
+                      onChange={(e) => handleInputChange('status', e.target.value)}
+                      className="w-full 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={BusinessPartyStatusEnum.Prospect}>Potansiyel</option>
+                      <option value={BusinessPartyStatusEnum.Active}>Aktif</option>
+                      <option value={BusinessPartyStatusEnum.Inactive}>Pasif</option>
+                      <option value={BusinessPartyStatusEnum.Blocked}>Blokeli</option>
+                    </select>
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                      Müşteri Segmenti
+                    </label>
+                    <select
+                      value={formData.customerSegment}
+                      onChange={(e) => handleInputChange('customerSegment', e.target.value)}
+                      className="w-full 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={CustomerSegmentEnum.Enterprise}>Kurumsal</option>
+                      <option value={CustomerSegmentEnum.SMB}>KOBİ</option>
+                      <option value={CustomerSegmentEnum.Startup}>Girişim</option>
+                      <option value={CustomerSegmentEnum.Government}>Kamu</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'contact' && (
+              <div className="space-y-4">
+                {/* Primary Contact */}
+                <div className="bg-white rounded-lg shadow p-4">
+                  <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                    <FaUser className="w-5 h-5 mr-2" />
+                    Ana İletişim Kişisi
+                  </h3>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">Ad *</label>
+                      <input
+                        type="text"
+                        value={formData.primaryContact?.firstName}
+                        onChange={(e) =>
+                          handleInputChange('primaryContact.firstName', e.target.value)
+                        }
+                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        required
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">
+                        Soyad *
+                      </label>
+                      <input
+                        type="text"
+                        value={formData.primaryContact?.lastName}
+                        onChange={(e) =>
+                          handleInputChange('primaryContact.lastName', e.target.value)
+                        }
+                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        required
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">Ünvan</label>
+                      <input
+                        type="text"
+                        value={formData.primaryContact?.title}
+                        onChange={(e) => handleInputChange('primaryContact.title', e.target.value)}
+                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        placeholder="Genel Müdür, Satış Direktörü vb."
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">
+                        Departman
+                      </label>
+                      <input
+                        type="text"
+                        value={formData.primaryContact?.department}
+                        onChange={(e) =>
+                          handleInputChange('primaryContact.department', e.target.value)
+                        }
+                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        placeholder="Satış, Pazarlama, İnsan Kaynakları vb."
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">
+                        E-posta *
+                      </label>
+                      <input
+                        type="email"
+                        value={formData.primaryContact?.email}
+                        onChange={(e) => handleInputChange('primaryContact.email', e.target.value)}
+                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        required
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">
+                        Telefon
+                      </label>
+                      <input
+                        type="tel"
+                        value={formData.primaryContact?.phone}
+                        onChange={(e) => handleInputChange('primaryContact.phone', e.target.value)}
+                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        placeholder="+90 (212) 555 0123"
+                      />
+                    </div>
+
+                    <div className="md:col-span-2">
+                      <label className="block text-xs font-medium text-gray-700 mb-1">
+                        Mobil Telefon
+                      </label>
+                      <input
+                        type="tel"
+                        value={formData.primaryContact?.mobile}
+                        onChange={(e) => handleInputChange('primaryContact.mobile', e.target.value)}
+                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        placeholder="+90 (555) 123 4567"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Address */}
+                <div className="bg-white rounded-lg shadow p-4">
+                  <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                    <FaMapMarkerAlt className="w-5 h-5 mr-2" />
+                    Adres Bilgileri
+                  </h3>
+
+                  <div className="grid grid-cols-1 gap-4">
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">
+                        Adres *
+                      </label>
+                      <textarea
+                        value={formData.address?.street}
+                        onChange={(e) => handleInputChange('address.street', e.target.value)}
+                        rows={3}
+                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        placeholder="Sokak, cadde, mahalle, bina no vb."
+                        required
+                      />
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Şehir *
+                        </label>
+                        <input
+                          type="text"
+                          value={formData.address?.city}
+                          onChange={(e) => handleInputChange('address.city', e.target.value)}
+                          className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          required
+                        />
+                      </div>
+
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          İl/Eyalet
+                        </label>
+                        <input
+                          type="text"
+                          value={formData.address?.state}
+                          onChange={(e) => handleInputChange('address.state', e.target.value)}
+                          className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        />
+                      </div>
+
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Posta Kodu
+                        </label>
+                        <input
+                          type="text"
+                          value={formData.address?.postalCode}
+                          onChange={(e) => handleInputChange('address.postalCode', e.target.value)}
+                          className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        />
+                      </div>
+
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Ülke *
+                        </label>
+                        <input
+                          type="text"
+                          value={formData.address?.country}
+                          onChange={(e) => handleInputChange('address.country', e.target.value)}
+                          className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          required
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'business' && (
+              <div className="bg-white rounded-lg shadow p-4">
+                <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                  <FaIdCard className="w-5 h-5 mr-2" />
+                  İş Bilgileri
+                </h3>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                      Vergi Numarası
                     </label>
                     <input
                       type="text"
-                      value={formData.primaryContact?.title}
-                      onChange={(e) =>
-                        handleInputChange(
-                          "primaryContact.title",
-                          e.target.value
-                        )
-                      }
+                      value={formData.taxNumber}
+                      onChange={(e) => handleInputChange('taxNumber', e.target.value)}
                       className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                      placeholder="Genel Müdür, Satış Direktörü vb."
+                      placeholder="1234567890"
                     />
                   </div>
 
                   <div>
                     <label className="block text-xs font-medium text-gray-700 mb-1">
-                      Departman
+                      Sicil Numarası
                     </label>
                     <input
                       type="text"
-                      value={formData.primaryContact?.department}
-                      onChange={(e) =>
-                        handleInputChange(
-                          "primaryContact.department",
-                          e.target.value
-                        )
-                      }
+                      value={formData.registrationNumber}
+                      onChange={(e) => handleInputChange('registrationNumber', e.target.value)}
                       className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                      placeholder="Satış, Pazarlama, İnsan Kaynakları vb."
-                    />
-                  </div>
-
-                  <div>
-                    <label className="block text-xs font-medium text-gray-700 mb-1">
-                      E-posta *
-                    </label>
-                    <input
-                      type="email"
-                      value={formData.primaryContact?.email}
-                      onChange={(e) =>
-                        handleInputChange(
-                          "primaryContact.email",
-                          e.target.value
-                        )
-                      }
-                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                      required
-                    />
-                  </div>
-
-                  <div>
-                    <label className="block text-xs font-medium text-gray-700 mb-1">
-                      Telefon
-                    </label>
-                    <input
-                      type="tel"
-                      value={formData.primaryContact?.phone}
-                      onChange={(e) =>
-                        handleInputChange(
-                          "primaryContact.phone",
-                          e.target.value
-                        )
-                      }
-                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                      placeholder="+90 (212) 555 0123"
+                      placeholder="123456789"
                     />
                   </div>
 
                   <div className="md:col-span-2">
                     <label className="block text-xs font-medium text-gray-700 mb-1">
-                      Mobil Telefon
+                      Atanmış Satış Temsilcisi
                     </label>
                     <input
-                      type="tel"
-                      value={formData.primaryContact?.mobile}
-                      onChange={(e) =>
-                        handleInputChange(
-                          "primaryContact.mobile",
-                          e.target.value
-                        )
-                      }
+                      type="text"
+                      value={formData.assignedSalesRep}
+                      onChange={(e) => handleInputChange('assignedSalesRep', e.target.value)}
                       className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                      placeholder="+90 (555) 123 4567"
+                      placeholder="Satış temsilcisi adı"
                     />
                   </div>
                 </div>
               </div>
+            )}
 
-              {/* Address */}
+            {activeTab === 'financial' && (
               <div className="bg-white rounded-lg shadow p-4">
                 <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                  <FaMapMarkerAlt className="w-5 h-5 mr-2" />
-                  Adres Bilgileri
+                  <FaCreditCard className="w-5 h-5 mr-2" />
+                  Finansal Bilgiler
                 </h3>
 
-                <div className="grid grid-cols-1 gap-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
                     <label className="block text-xs font-medium text-gray-700 mb-1">
-                      Adres *
+                      Kredi Limiti (₺)
                     </label>
-                    <textarea
-                      value={formData.address?.street}
-                      onChange={(e) =>
-                        handleInputChange("address.street", e.target.value)
-                      }
-                      rows={3}
+                    <input
+                      type="number"
+                      value={formData.creditLimit}
+                      onChange={(e) => handleInputChange('creditLimit', Number(e.target.value))}
                       className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                      placeholder="Sokak, cadde, mahalle, bina no vb."
-                      required
+                      min="0"
+                      step="1000"
                     />
                   </div>
 
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Şehir *
-                      </label>
-                      <input
-                        type="text"
-                        value={formData.address?.city}
-                        onChange={(e) =>
-                          handleInputChange("address.city", e.target.value)
-                        }
-                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                        required
-                      />
-                    </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                      Para Birimi
+                    </label>
+                    <select
+                      value={formData.currency}
+                      onChange={(e) => handleInputChange('currency', e.target.value)}
+                      className="w-full 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="TRY">Türk Lirası (TRY)</option>
+                      <option value="USD">Amerikan Doları (USD)</option>
+                      <option value="EUR">Euro (EUR)</option>
+                      <option value="GBP">İngiliz Sterlini (GBP)</option>
+                    </select>
+                  </div>
 
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        İl/Eyalet
-                      </label>
-                      <input
-                        type="text"
-                        value={formData.address?.state}
-                        onChange={(e) =>
-                          handleInputChange("address.state", e.target.value)
-                        }
-                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                      />
-                    </div>
-
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Posta Kodu
-                      </label>
-                      <input
-                        type="text"
-                        value={formData.address?.postalCode}
-                        onChange={(e) =>
-                          handleInputChange(
-                            "address.postalCode",
-                            e.target.value
-                          )
-                        }
-                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                      />
-                    </div>
-
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Ülke *
-                      </label>
-                      <input
-                        type="text"
-                        value={formData.address?.country}
-                        onChange={(e) =>
-                          handleInputChange("address.country", e.target.value)
-                        }
-                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                        required
-                      />
-                    </div>
+                  <div className="md:col-span-2">
+                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                      Ödeme Koşulları
+                    </label>
+                    <select
+                      value={formData.paymentTerms}
+                      onChange={(e) => handleInputChange('paymentTerms', e.target.value)}
+                      className="w-full 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={PaymentTerms.Prepaid}>Peşin</option>
+                      <option value={PaymentTerms.COD}>Kapıda Ödeme</option>
+                      <option value={PaymentTerms.Net30}>30 Gün Vade</option>
+                      <option value={PaymentTerms.Net60}>60 Gün Vade</option>
+                      <option value={PaymentTerms.Net90}>90 Gün Vade</option>
+                    </select>
                   </div>
                 </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
+        </form>
+      </div>
+    </Container>
+  )
+}
 
-          {activeTab === "business" && (
-            <div className="bg-white rounded-lg shadow p-4">
-              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                <FaIdCard className="w-5 h-5 mr-2" />
-                İş Bilgileri
-              </h3>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Vergi Numarası
-                  </label>
-                  <input
-                    type="text"
-                    value={formData.taxNumber}
-                    onChange={(e) =>
-                      handleInputChange("taxNumber", e.target.value)
-                    }
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="1234567890"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Sicil Numarası
-                  </label>
-                  <input
-                    type="text"
-                    value={formData.registrationNumber}
-                    onChange={(e) =>
-                      handleInputChange("registrationNumber", e.target.value)
-                    }
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="123456789"
-                  />
-                </div>
-
-                <div className="md:col-span-2">
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Atanmış Satış Temsilcisi
-                  </label>
-                  <input
-                    type="text"
-                    value={formData.assignedSalesRep}
-                    onChange={(e) =>
-                      handleInputChange("assignedSalesRep", e.target.value)
-                    }
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="Satış temsilcisi adı"
-                  />
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeTab === "financial" && (
-            <div className="bg-white rounded-lg shadow p-4">
-              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                <FaCreditCard className="w-5 h-5 mr-2" />
-                Finansal Bilgiler
-              </h3>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Kredi Limiti (₺)
-                  </label>
-                  <input
-                    type="number"
-                    value={formData.creditLimit}
-                    onChange={(e) =>
-                      handleInputChange("creditLimit", Number(e.target.value))
-                    }
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    min="0"
-                    step="1000"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Para Birimi
-                  </label>
-                  <select
-                    value={formData.currency}
-                    onChange={(e) =>
-                      handleInputChange("currency", e.target.value)
-                    }
-                    className="w-full 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="TRY">Türk Lirası (TRY)</option>
-                    <option value="USD">Amerikan Doları (USD)</option>
-                    <option value="EUR">Euro (EUR)</option>
-                    <option value="GBP">İngiliz Sterlini (GBP)</option>
-                  </select>
-                </div>
-
-                <div className="md:col-span-2">
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Ödeme Koşulları
-                  </label>
-                  <select
-                    value={formData.paymentTerms}
-                    onChange={(e) =>
-                      handleInputChange("paymentTerms", e.target.value)
-                    }
-                    className="w-full 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={PaymentTerms.Prepaid}>Peşin</option>
-                    <option value={PaymentTerms.COD}>Kapıda Ödeme</option>
-                    <option value={PaymentTerms.Net30}>30 Gün Vade</option>
-                    <option value={PaymentTerms.Net60}>60 Gün Vade</option>
-                    <option value={PaymentTerms.Net90}>90 Gün Vade</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default CustomerEdit;
+export default CustomerEdit
diff --git a/ui/src/views/crm/components/CustomerForm.tsx b/ui/src/views/crm/components/CustomerForm.tsx
index a95a91df..3e4e2a04 100644
--- a/ui/src/views/crm/components/CustomerForm.tsx
+++ b/ui/src/views/crm/components/CustomerForm.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import React, { useState, useEffect, useCallback } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
 import {
   FaSave,
   FaTimes,
@@ -8,553 +8,499 @@ import {
   FaMapMarkerAlt,
   FaCreditCard,
   FaEnvelope,
-} from "react-icons/fa";
-import LoadingSpinner from "../../../components/common/LoadingSpinner";
-import {
-  mockBusinessParties,
-  mockBusinessPartyNew,
-} from "../../../mocks/mockBusinessParties";
-import { BusinessParty } from "../../../types/common";
+} from 'react-icons/fa'
+import LoadingSpinner from '../../../components/common/LoadingSpinner'
+import { mockBusinessParties, mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
+import { BusinessParty } from '../../../types/common'
+import { Container } from '@/components/shared'
 
 interface ValidationErrors {
-  [key: string]: string;
+  [key: string]: string
 }
 
 const CustomerForm: 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 [loading, setLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [errors, setErrors] = useState<ValidationErrors>({})
 
-  const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew);
+  const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew)
 
   const loadFormData = useCallback(async () => {
-    setLoading(true);
+    setLoading(true)
     try {
       if (isEdit && id) {
         // Simulate API call
-        await new Promise((resolve) => setTimeout(resolve, 1000));
+        await new Promise((resolve) => setTimeout(resolve, 1000))
 
         // Mock customer data
-        const mockCustomer = mockBusinessParties.find(
-          (cust) => cust.id === id
-        )!;
-        setFormData(mockCustomer);
+        const mockCustomer = mockBusinessParties.find((cust) => cust.id === id)!
+        setFormData(mockCustomer)
       }
     } 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(() => {
-    loadFormData();
-  }, [loadFormData]);
+    loadFormData()
+  }, [loadFormData])
 
   const validateForm = (): boolean => {
-    const newErrors: ValidationErrors = {};
+    const newErrors: ValidationErrors = {}
 
     if (!formData.code.trim()) {
-      newErrors.code = "Müşteri kodu zorunludur";
+      newErrors.code = 'Müşteri kodu zorunludur'
     }
     if (!formData.name.trim()) {
-      newErrors.name = "Şirket adı zorunludur";
+      newErrors.name = 'Şirket adı zorunludur'
     }
     if (formData.creditLimit < 0) {
-      newErrors.creditLimit = "Kredi limiti 0'dan küçük olamaz";
+      newErrors.creditLimit = "Kredi limiti 0'dan küçük olamaz"
     }
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
 
-  const handleInputChange = (
-    field: keyof BusinessParty,
-    value: string | number | boolean
-  ) => {
+  const handleInputChange = (field: keyof BusinessParty, value: string | number | boolean) => {
     setFormData((prev) => ({
       ...prev,
       [field]: value,
-    }));
+    }))
 
     // Clear error when user starts typing
     if (errors[field]) {
       setErrors((prev) => ({
         ...prev,
-        [field]: "",
-      }));
+        [field]: '',
+      }))
     }
-  };
+  }
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (!validateForm()) {
-      return;
+      return
     }
 
-    setSaving(true);
+    setSaving(true)
     try {
       // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 2000));
+      await new Promise((resolve) => setTimeout(resolve, 2000))
 
-      console.log("Customer data:", {
+      console.log('Customer data:', {
         ...formData,
         id: isEdit ? id : undefined,
-      });
+      })
 
       // Show success message
-      alert(
-        isEdit
-          ? "Müşteri başarıyla güncellendi!"
-          : "Müşteri başarıyla oluşturuldu!"
-      );
+      alert(isEdit ? 'Müşteri başarıyla güncellendi!' : 'Müşteri başarıyla oluşturuldu!')
 
       // Navigate back to list
-      navigate("/admin/crm");
+      navigate('/admin/crm')
     } catch (error) {
-      console.error("Error saving customer:", error);
-      alert("Bir hata oluştu. Lütfen tekrar deneyin.");
+      console.error('Error saving customer:', error)
+      alert('Bir hata oluştu. Lütfen tekrar deneyin.')
     } finally {
-      setSaving(false);
+      setSaving(false)
     }
-  };
+  }
 
   const handleCancel = () => {
-    navigate("/admin/crm");
-  };
+    navigate('/admin/crm')
+  }
 
   if (loading) {
-    return <LoadingSpinner />;
+    return <LoadingSpinner />
   }
 
   return (
-    <div className="space-y-4 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-lg font-semibold text-gray-900">
-            {isEdit ? "Müşteri Düzenle" : "Yeni Müşteri"}
-          </h2>
-          <p className="text-sm text-gray-600">
-            {isEdit
-              ? "Mevcut müşteri bilgilerini güncelleyin"
-              : "Yeni müşteri bilgilerini girin"}
-          </p>
+    <Container>
+      <div className="space-y-4 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900">
+              {isEdit ? 'Müşteri Düzenle' : 'Yeni Müşteri'}
+            </h2>
+            <p className="text-sm text-gray-600">
+              {isEdit ? 'Mevcut müşteri bilgilerini güncelleyin' : 'Yeni müşteri bilgilerini girin'}
+            </p>
+          </div>
         </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-3">
+          {/* General Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaBuilding className="w-5 h-5 mr-2" />
+                Genel Bilgiler
+              </h3>
+            </div>
+
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Müşteri Kodu *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.code}
+                    onChange={(e) => handleInputChange('code', e.target.value)}
+                    className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.code
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="Örn: MST001"
+                  />
+                  {errors.customerCode && (
+                    <p className="mt-1 text-sm text-red-600">{errors.customerCode}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Müşteri Tipi
+                  </label>
+                  <select
+                    value={formData.customerType}
+                    onChange={(e) =>
+                      handleInputChange('customerType', e.target.value as 'INDIVIDUAL' | 'COMPANY')
+                    }
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="COMPANY">Şirket</option>
+                    <option value="INDIVIDUAL">Bireysel</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Şirket Adı *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => handleInputChange('name', e.target.value)}
+                    className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.name
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="Şirket adını girin"
+                  />
+                  {errors.companyName && (
+                    <p className="mt-1 text-sm text-red-600">{errors.companyName}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Sektör</label>
+                  <select
+                    value={formData.industry}
+                    onChange={(e) => handleInputChange('industry', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="">Sektör seçin</option>
+                    <option value="TECHNOLOGY">Teknoloji</option>
+                    <option value="MANUFACTURING">İmalat</option>
+                    <option value="CONSTRUCTION">İnşaat</option>
+                    <option value="AUTOMOTIVE">Otomotiv</option>
+                    <option value="RETAIL">Perakende</option>
+                    <option value="FINANCE">Finans</option>
+                    <option value="HEALTHCARE">Sağlık</option>
+                    <option value="OTHER">Diğer</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Website</label>
+                <input
+                  type="url"
+                  value={formData.website}
+                  onChange={(e) => handleInputChange('website', e.target.value)}
+                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  placeholder="https://www.ornek.com"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Contact Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaUser className="w-5 h-5 mr-2" />
+                İletişim Bilgileri
+              </h3>
+            </div>
+
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Email *</label>
+                  <input
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => handleInputChange('email', e.target.value)}
+                    className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.email
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="email@ornek.com"
+                  />
+                  {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Telefon *</label>
+                  <input
+                    type="tel"
+                    value={formData.phone}
+                    onChange={(e) => handleInputChange('phone', e.target.value)}
+                    className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.phone
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="+90 212 555 0123"
+                  />
+                  {errors.phone && <p className="mt-1 text-sm text-red-600">{errors.phone}</p>}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Address Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaMapMarkerAlt className="w-5 h-5 mr-2" />
+                Adres Bilgileri
+              </h3>
+            </div>
+          </div>
+
+          {/* Business Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaCreditCard className="w-5 h-5 mr-2" />
+                İş Bilgileri
+              </h3>
+            </div>
+
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Vergi Numarası
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.taxNumber}
+                    onChange={(e) => handleInputChange('taxNumber', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="1234567890"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Ticaret Sicil No
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.registrationNumber}
+                    onChange={(e) => handleInputChange('registrationNumber', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="98765"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Kredi Limiti
+                  </label>
+                  <input
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    value={formData.creditLimit}
+                    onChange={(e) =>
+                      handleInputChange('creditLimit', parseFloat(e.target.value) || 0)
+                    }
+                    className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.creditLimit
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="0.00"
+                  />
+                  {errors.creditLimit && (
+                    <p className="mt-1 text-sm text-red-600">{errors.creditLimit}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Ödeme Koşulları
+                  </label>
+                  <select
+                    value={formData.paymentTerms}
+                    onChange={(e) => handleInputChange('paymentTerms', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="CASH">Peşin</option>
+                    <option value="NET_15">15 Gün Vadeli</option>
+                    <option value="NET_30">30 Gün Vadeli</option>
+                    <option value="NET_60">60 Gün Vadeli</option>
+                    <option value="NET_90">90 Gün Vadeli</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs 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-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="TRY">Türk Lirası (TRY)</option>
+                    <option value="USD">Amerikan Doları (USD)</option>
+                    <option value="EUR">Euro (EUR)</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Relationship Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaEnvelope className="w-5 h-5 mr-2" />
+                İlişki Yönetimi
+              </h3>
+            </div>
+
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Müşteri Durumu
+                  </label>
+                  <select
+                    value={formData.status}
+                    onChange={(e) => handleInputChange('status', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="ACTIVE">Aktif</option>
+                    <option value="INACTIVE">Pasif</option>
+                    <option value="PROSPECT">Potansiyel</option>
+                    <option value="BLOCKED">Blokeli</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Müşteri Segmenti
+                  </label>
+                  <select
+                    value={formData.customerSegment}
+                    onChange={(e) => handleInputChange('customerSegment', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="STANDARD">Standart</option>
+                    <option value="PREMIUM">Premium</option>
+                    <option value="ENTERPRISE">Kurumsal</option>
+                    <option value="VIP">VIP</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Sorumlu Satış Temsilcisi
+                  </label>
+                  <select
+                    value={formData.assignedSalesRep}
+                    onChange={(e) => handleInputChange('assignedSalesRep', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="">Temsilci seçin</option>
+                    <option value="sales_rep_1">Mehmet Özkan</option>
+                    <option value="sales_rep_2">Ayşe Demir</option>
+                    <option value="sales_rep_3">Ali Yılmaz</option>
+                  </select>
+                </div>
+              </div>
+
+              <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">
+                  Aktif
+                </label>
+              </div>
+            </div>
+          </div>
+
+          {/* Form Actions */}
+          <div className="flex items-center justify-end space-x-2 bg-gray-50 px-4 py-3 rounded-b-lg">
+            <button
+              type="button"
+              onClick={handleCancel}
+              className="inline-flex items-center px-4 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              <FaTimes className="w-4 h-4 mr-2" />
+              İptal
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              className="inline-flex items-center px-4 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {saving ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                  Kaydediliyor...
+                </>
+              ) : (
+                <>
+                  <FaSave className="w-4 h-4 mr-2" />
+                  {isEdit ? 'Güncelle' : 'Kaydet'}
+                </>
+              )}
+            </button>
+          </div>
+        </form>
       </div>
+    </Container>
+  )
+}
 
-      {/* Form */}
-      <form onSubmit={handleSubmit} className="space-y-3">
-        {/* General Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-4 py-3 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaBuilding className="w-5 h-5 mr-2" />
-              Genel Bilgiler
-            </h3>
-          </div>
-
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Müşteri Kodu *
-                </label>
-                <input
-                  type="text"
-                  value={formData.code}
-                  onChange={(e) => handleInputChange("code", e.target.value)}
-                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.code
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="Örn: MST001"
-                />
-                {errors.customerCode && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.customerCode}
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Müşteri Tipi
-                </label>
-                <select
-                  value={formData.customerType}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "customerType",
-                      e.target.value as "INDIVIDUAL" | "COMPANY"
-                    )
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="COMPANY">Şirket</option>
-                  <option value="INDIVIDUAL">Bireysel</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Şirket Adı *
-                </label>
-                <input
-                  type="text"
-                  value={formData.name}
-                  onChange={(e) => handleInputChange("name", e.target.value)}
-                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.name
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="Şirket adını girin"
-                />
-                {errors.companyName && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.companyName}
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Sektör
-                </label>
-                <select
-                  value={formData.industry}
-                  onChange={(e) =>
-                    handleInputChange("industry", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="">Sektör seçin</option>
-                  <option value="TECHNOLOGY">Teknoloji</option>
-                  <option value="MANUFACTURING">İmalat</option>
-                  <option value="CONSTRUCTION">İnşaat</option>
-                  <option value="AUTOMOTIVE">Otomotiv</option>
-                  <option value="RETAIL">Perakende</option>
-                  <option value="FINANCE">Finans</option>
-                  <option value="HEALTHCARE">Sağlık</option>
-                  <option value="OTHER">Diğer</option>
-                </select>
-              </div>
-            </div>
-
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Website
-              </label>
-              <input
-                type="url"
-                value={formData.website}
-                onChange={(e) => handleInputChange("website", e.target.value)}
-                className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                placeholder="https://www.ornek.com"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Contact Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-4 py-3 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaUser className="w-5 h-5 mr-2" />
-              İletişim Bilgileri
-            </h3>
-          </div>
-
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Email *
-                </label>
-                <input
-                  type="email"
-                  value={formData.email}
-                  onChange={(e) => handleInputChange("email", e.target.value)}
-                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.email
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="email@ornek.com"
-                />
-                {errors.email && (
-                  <p className="mt-1 text-sm text-red-600">{errors.email}</p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Telefon *
-                </label>
-                <input
-                  type="tel"
-                  value={formData.phone}
-                  onChange={(e) => handleInputChange("phone", e.target.value)}
-                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.phone
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="+90 212 555 0123"
-                />
-                {errors.phone && (
-                  <p className="mt-1 text-sm text-red-600">{errors.phone}</p>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Address Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-4 py-3 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaMapMarkerAlt className="w-5 h-5 mr-2" />
-              Adres Bilgileri
-            </h3>
-          </div>
-        </div>
-
-        {/* Business Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-4 py-3 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaCreditCard className="w-5 h-5 mr-2" />
-              İş Bilgileri
-            </h3>
-          </div>
-
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Vergi Numarası
-                </label>
-                <input
-                  type="text"
-                  value={formData.taxNumber}
-                  onChange={(e) =>
-                    handleInputChange("taxNumber", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="1234567890"
-                />
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Ticaret Sicil No
-                </label>
-                <input
-                  type="text"
-                  value={formData.registrationNumber}
-                  onChange={(e) =>
-                    handleInputChange("registrationNumber", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="98765"
-                />
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Kredi Limiti
-                </label>
-                <input
-                  type="number"
-                  min="0"
-                  step="0.01"
-                  value={formData.creditLimit}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "creditLimit",
-                      parseFloat(e.target.value) || 0
-                    )
-                  }
-                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.creditLimit
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="0.00"
-                />
-                {errors.creditLimit && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.creditLimit}
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Ödeme Koşulları
-                </label>
-                <select
-                  value={formData.paymentTerms}
-                  onChange={(e) =>
-                    handleInputChange("paymentTerms", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="CASH">Peşin</option>
-                  <option value="NET_15">15 Gün Vadeli</option>
-                  <option value="NET_30">30 Gün Vadeli</option>
-                  <option value="NET_60">60 Gün Vadeli</option>
-                  <option value="NET_90">90 Gün Vadeli</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-xs 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-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="TRY">Türk Lirası (TRY)</option>
-                  <option value="USD">Amerikan Doları (USD)</option>
-                  <option value="EUR">Euro (EUR)</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Relationship Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-4 py-3 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaEnvelope className="w-5 h-5 mr-2" />
-              İlişki Yönetimi
-            </h3>
-          </div>
-
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Müşteri Durumu
-                </label>
-                <select
-                  value={formData.status}
-                  onChange={(e) => handleInputChange("status", e.target.value)}
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="ACTIVE">Aktif</option>
-                  <option value="INACTIVE">Pasif</option>
-                  <option value="PROSPECT">Potansiyel</option>
-                  <option value="BLOCKED">Blokeli</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Müşteri Segmenti
-                </label>
-                <select
-                  value={formData.customerSegment}
-                  onChange={(e) =>
-                    handleInputChange("customerSegment", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="STANDARD">Standart</option>
-                  <option value="PREMIUM">Premium</option>
-                  <option value="ENTERPRISE">Kurumsal</option>
-                  <option value="VIP">VIP</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Sorumlu Satış Temsilcisi
-                </label>
-                <select
-                  value={formData.assignedSalesRep}
-                  onChange={(e) =>
-                    handleInputChange("assignedSalesRep", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="">Temsilci seçin</option>
-                  <option value="sales_rep_1">Mehmet Özkan</option>
-                  <option value="sales_rep_2">Ayşe Demir</option>
-                  <option value="sales_rep_3">Ali Yılmaz</option>
-                </select>
-              </div>
-            </div>
-
-            <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"
-              >
-                Aktif
-              </label>
-            </div>
-          </div>
-        </div>
-
-        {/* Form Actions */}
-        <div className="flex items-center justify-end space-x-2 bg-gray-50 px-4 py-3 rounded-b-lg">
-          <button
-            type="button"
-            onClick={handleCancel}
-            className="inline-flex items-center px-4 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            <FaTimes className="w-4 h-4 mr-2" />
-            İptal
-          </button>
-          <button
-            type="submit"
-            disabled={saving}
-            className="inline-flex items-center px-4 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {saving ? (
-              <>
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                Kaydediliyor...
-              </>
-            ) : (
-              <>
-                <FaSave className="w-4 h-4 mr-2" />
-                {isEdit ? "Güncelle" : "Kaydet"}
-              </>
-            )}
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default CustomerForm;
+export default CustomerForm
diff --git a/ui/src/views/crm/components/CustomerFormNew.tsx b/ui/src/views/crm/components/CustomerFormNew.tsx
index c5eed976..d0896f95 100644
--- a/ui/src/views/crm/components/CustomerFormNew.tsx
+++ b/ui/src/views/crm/components/CustomerFormNew.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import React, { useState, useEffect, useCallback } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
 import {
   FaSave,
   FaTimes,
@@ -8,546 +8,497 @@ import {
   FaMapMarkerAlt,
   FaCreditCard,
   FaEnvelope,
-} from "react-icons/fa";
-import LoadingSpinner from "../../../components/common/LoadingSpinner";
-import { BusinessParty } from "../../../types/common";
-import { mockBusinessPartyNew } from "../../../mocks/mockBusinessParties";
+} from 'react-icons/fa'
+import LoadingSpinner from '../../../components/common/LoadingSpinner'
+import { BusinessParty } from '../../../types/common'
+import { mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
+import { Container } from '@/components/shared'
 
 interface ValidationErrors {
-  [key: string]: string;
+  [key: string]: string
 }
 
 const CustomerForm: 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 [loading, setLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [errors, setErrors] = useState<ValidationErrors>({})
 
-  const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew);
+  const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew)
 
   const loadFormData = useCallback(async () => {
-    setLoading(true);
+    setLoading(true)
     try {
       if (isEdit && id) {
         // Simulate API call
-        await new Promise((resolve) => setTimeout(resolve, 1000));
+        await new Promise((resolve) => setTimeout(resolve, 1000))
 
-        setFormData(mockBusinessPartyNew);
+        setFormData(mockBusinessPartyNew)
       }
     } 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(() => {
-    loadFormData();
-  }, [loadFormData]);
+    loadFormData()
+  }, [loadFormData])
 
   const validateForm = (): boolean => {
-    const newErrors: ValidationErrors = {};
+    const newErrors: ValidationErrors = {}
 
     if (!formData.code.trim()) {
-      newErrors.code = "Müşteri kodu zorunludur";
+      newErrors.code = 'Müşteri kodu zorunludur'
     }
     if (!formData.name.trim()) {
-      newErrors.name = "Şirket adı zorunludur";
+      newErrors.name = 'Şirket adı zorunludur'
     }
     if (formData.creditLimit < 0) {
-      newErrors.creditLimit = "Kredi limiti 0'dan küçük olamaz";
+      newErrors.creditLimit = "Kredi limiti 0'dan küçük olamaz"
     }
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
 
-  const handleInputChange = (
-    field: keyof BusinessParty,
-    value: string | number | boolean
-  ) => {
+  const handleInputChange = (field: keyof BusinessParty, value: string | number | boolean) => {
     setFormData((prev) => ({
       ...prev,
       [field]: value,
-    }));
+    }))
 
     // Clear error when user starts typing
     if (errors[field]) {
       setErrors((prev) => ({
         ...prev,
-        [field]: "",
-      }));
+        [field]: '',
+      }))
     }
-  };
+  }
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (!validateForm()) {
-      return;
+      return
     }
 
-    setSaving(true);
+    setSaving(true)
     try {
       // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 2000));
+      await new Promise((resolve) => setTimeout(resolve, 2000))
 
-      console.log("Customer data:", {
+      console.log('Customer data:', {
         ...formData,
         id: isEdit ? id : undefined,
-      });
+      })
 
       // Show success message
-      alert(
-        isEdit
-          ? "Müşteri başarıyla güncellendi!"
-          : "Müşteri başarıyla oluşturuldu!"
-      );
+      alert(isEdit ? 'Müşteri başarıyla güncellendi!' : 'Müşteri başarıyla oluşturuldu!')
 
       // Navigate back to list
-      navigate("/admin/crm");
+      navigate('/admin/crm')
     } catch (error) {
-      console.error("Error saving customer:", error);
-      alert("Bir hata oluştu. Lütfen tekrar deneyin.");
+      console.error('Error saving customer:', error)
+      alert('Bir hata oluştu. Lütfen tekrar deneyin.')
     } finally {
-      setSaving(false);
+      setSaving(false)
     }
-  };
+  }
 
   const handleCancel = () => {
-    navigate("/admin/crm");
-  };
+    navigate('/admin/crm')
+  }
 
   if (loading) {
-    return <LoadingSpinner />;
+    return <LoadingSpinner />
   }
 
   return (
-    <div className="space-y-4 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-lg font-semibold text-gray-900">
-            {isEdit ? "Müşteri Düzenle" : "Yeni Müşteri"}
-          </h2>
-          <p className="text-sm text-gray-600">
-            {isEdit
-              ? "Mevcut müşteri bilgilerini güncelleyin"
-              : "Yeni müşteri bilgilerini girin"}
-          </p>
+    <Container>
+      <div className="space-y-4 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900">
+              {isEdit ? 'Müşteri Düzenle' : 'Yeni Müşteri'}
+            </h2>
+            <p className="text-sm text-gray-600">
+              {isEdit ? 'Mevcut müşteri bilgilerini güncelleyin' : 'Yeni müşteri bilgilerini girin'}
+            </p>
+          </div>
         </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-3">
+          {/* General Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaBuilding className="w-5 h-5 mr-2" />
+                Genel Bilgiler
+              </h3>
+            </div>
+
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Müşteri Kodu *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.code}
+                    onChange={(e) => handleInputChange('code', e.target.value)}
+                    className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.code
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="Örn: MST001"
+                  />
+                  {errors.customerCode && (
+                    <p className="mt-1 text-sm text-red-600">{errors.customerCode}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Müşteri Tipi
+                  </label>
+                  <select
+                    value={formData.customerType}
+                    onChange={(e) =>
+                      handleInputChange('customerType', e.target.value as 'INDIVIDUAL' | 'COMPANY')
+                    }
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="COMPANY">Şirket</option>
+                    <option value="INDIVIDUAL">Bireysel</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Şirket Adı *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => handleInputChange('name', e.target.value)}
+                    className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.name
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="Şirket adını girin"
+                  />
+                  {errors.companyName && (
+                    <p className="mt-1 text-sm text-red-600">{errors.companyName}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Sektör</label>
+                  <select
+                    value={formData.industry}
+                    onChange={(e) => handleInputChange('industry', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="">Sektör seçin</option>
+                    <option value="TECHNOLOGY">Teknoloji</option>
+                    <option value="MANUFACTURING">İmalat</option>
+                    <option value="CONSTRUCTION">İnşaat</option>
+                    <option value="AUTOMOTIVE">Otomotiv</option>
+                    <option value="RETAIL">Perakende</option>
+                    <option value="FINANCE">Finans</option>
+                    <option value="HEALTHCARE">Sağlık</option>
+                    <option value="OTHER">Diğer</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Website</label>
+                <input
+                  type="url"
+                  value={formData.website}
+                  onChange={(e) => handleInputChange('website', e.target.value)}
+                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  placeholder="https://www.ornek.com"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Contact Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaUser className="w-5 h-5 mr-2" />
+                İletişim Bilgileri
+              </h3>
+            </div>
+
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Email *</label>
+                  <input
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => handleInputChange('email', e.target.value)}
+                    className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.email
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="email@ornek.com"
+                  />
+                  {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Telefon *</label>
+                  <input
+                    type="tel"
+                    value={formData.phone}
+                    onChange={(e) => handleInputChange('phone', e.target.value)}
+                    className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.phone
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="+90 212 555 0123"
+                  />
+                  {errors.phone && <p className="mt-1 text-sm text-red-600">{errors.phone}</p>}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Address Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaMapMarkerAlt className="w-5 h-5 mr-2" />
+                Adres Bilgileri
+              </h3>
+            </div>
+          </div>
+
+          {/* Business Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaCreditCard className="w-5 h-5 mr-2" />
+                İş Bilgileri
+              </h3>
+            </div>
+
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Vergi Numarası
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.taxNumber}
+                    onChange={(e) => handleInputChange('taxNumber', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="1234567890"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Ticaret Sicil No
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.registrationNumber}
+                    onChange={(e) => handleInputChange('registrationNumber', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="98765"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Kredi Limiti
+                  </label>
+                  <input
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    value={formData.creditLimit}
+                    onChange={(e) =>
+                      handleInputChange('creditLimit', parseFloat(e.target.value) || 0)
+                    }
+                    className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
+                      errors.creditLimit
+                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    }`}
+                    placeholder="0.00"
+                  />
+                  {errors.creditLimit && (
+                    <p className="mt-1 text-sm text-red-600">{errors.creditLimit}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Ödeme Koşulları
+                  </label>
+                  <select
+                    value={formData.paymentTerms}
+                    onChange={(e) => handleInputChange('paymentTerms', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="CASH">Peşin</option>
+                    <option value="NET_15">15 Gün Vadeli</option>
+                    <option value="NET_30">30 Gün Vadeli</option>
+                    <option value="NET_60">60 Gün Vadeli</option>
+                    <option value="NET_90">90 Gün Vadeli</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs 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-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="TRY">Türk Lirası (TRY)</option>
+                    <option value="USD">Amerikan Doları (USD)</option>
+                    <option value="EUR">Euro (EUR)</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Relationship Information */}
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900 flex items-center">
+                <FaEnvelope className="w-5 h-5 mr-2" />
+                İlişki Yönetimi
+              </h3>
+            </div>
+
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Müşteri Durumu
+                  </label>
+                  <select
+                    value={formData.status}
+                    onChange={(e) => handleInputChange('status', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="ACTIVE">Aktif</option>
+                    <option value="INACTIVE">Pasif</option>
+                    <option value="PROSPECT">Potansiyel</option>
+                    <option value="BLOCKED">Blokeli</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Müşteri Segmenti
+                  </label>
+                  <select
+                    value={formData.customerSegment}
+                    onChange={(e) => handleInputChange('customerSegment', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="STANDARD">Standart</option>
+                    <option value="PREMIUM">Premium</option>
+                    <option value="ENTERPRISE">Kurumsal</option>
+                    <option value="VIP">VIP</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Sorumlu Satış Temsilcisi
+                  </label>
+                  <select
+                    value={formData.assignedSalesRep}
+                    onChange={(e) => handleInputChange('assignedSalesRep', e.target.value)}
+                    className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    <option value="">Temsilci seçin</option>
+                    <option value="sales_rep_1">Mehmet Özkan</option>
+                    <option value="sales_rep_2">Ayşe Demir</option>
+                    <option value="sales_rep_3">Ali Yılmaz</option>
+                  </select>
+                </div>
+              </div>
+
+              <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">
+                  Aktif
+                </label>
+              </div>
+            </div>
+          </div>
+
+          {/* Form Actions */}
+          <div className="flex items-center justify-end space-x-2 bg-gray-50 px-4 py-3 rounded-b-lg">
+            <button
+              type="button"
+              onClick={handleCancel}
+              className="inline-flex items-center px-4 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              <FaTimes className="w-4 h-4 mr-2" />
+              İptal
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              className="inline-flex items-center px-4 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {saving ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                  Kaydediliyor...
+                </>
+              ) : (
+                <>
+                  <FaSave className="w-4 h-4 mr-2" />
+                  {isEdit ? 'Güncelle' : 'Kaydet'}
+                </>
+              )}
+            </button>
+          </div>
+        </form>
       </div>
+    </Container>
+  )
+}
 
-      {/* Form */}
-      <form onSubmit={handleSubmit} className="space-y-3">
-        {/* General Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-4 py-3 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaBuilding className="w-5 h-5 mr-2" />
-              Genel Bilgiler
-            </h3>
-          </div>
-
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Müşteri Kodu *
-                </label>
-                <input
-                  type="text"
-                  value={formData.code}
-                  onChange={(e) => handleInputChange("code", e.target.value)}
-                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.code
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="Örn: MST001"
-                />
-                {errors.customerCode && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.customerCode}
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Müşteri Tipi
-                </label>
-                <select
-                  value={formData.customerType}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "customerType",
-                      e.target.value as "INDIVIDUAL" | "COMPANY"
-                    )
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="COMPANY">Şirket</option>
-                  <option value="INDIVIDUAL">Bireysel</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Şirket Adı *
-                </label>
-                <input
-                  type="text"
-                  value={formData.name}
-                  onChange={(e) => handleInputChange("name", e.target.value)}
-                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.name
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="Şirket adını girin"
-                />
-                {errors.companyName && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.companyName}
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Sektör
-                </label>
-                <select
-                  value={formData.industry}
-                  onChange={(e) =>
-                    handleInputChange("industry", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="">Sektör seçin</option>
-                  <option value="TECHNOLOGY">Teknoloji</option>
-                  <option value="MANUFACTURING">İmalat</option>
-                  <option value="CONSTRUCTION">İnşaat</option>
-                  <option value="AUTOMOTIVE">Otomotiv</option>
-                  <option value="RETAIL">Perakende</option>
-                  <option value="FINANCE">Finans</option>
-                  <option value="HEALTHCARE">Sağlık</option>
-                  <option value="OTHER">Diğer</option>
-                </select>
-              </div>
-            </div>
-
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Website
-              </label>
-              <input
-                type="url"
-                value={formData.website}
-                onChange={(e) => handleInputChange("website", e.target.value)}
-                className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                placeholder="https://www.ornek.com"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Contact Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-4 py-3 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaUser className="w-5 h-5 mr-2" />
-              İletişim Bilgileri
-            </h3>
-          </div>
-
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Email *
-                </label>
-                <input
-                  type="email"
-                  value={formData.email}
-                  onChange={(e) => handleInputChange("email", e.target.value)}
-                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.email
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="email@ornek.com"
-                />
-                {errors.email && (
-                  <p className="mt-1 text-sm text-red-600">{errors.email}</p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Telefon *
-                </label>
-                <input
-                  type="tel"
-                  value={formData.phone}
-                  onChange={(e) => handleInputChange("phone", e.target.value)}
-                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.phone
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="+90 212 555 0123"
-                />
-                {errors.phone && (
-                  <p className="mt-1 text-sm text-red-600">{errors.phone}</p>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Address Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-4 py-3 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaMapMarkerAlt className="w-5 h-5 mr-2" />
-              Adres Bilgileri
-            </h3>
-          </div>
-        </div>
-
-        {/* Business Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-4 py-3 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaCreditCard className="w-5 h-5 mr-2" />
-              İş Bilgileri
-            </h3>
-          </div>
-
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Vergi Numarası
-                </label>
-                <input
-                  type="text"
-                  value={formData.taxNumber}
-                  onChange={(e) =>
-                    handleInputChange("taxNumber", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="1234567890"
-                />
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Ticaret Sicil No
-                </label>
-                <input
-                  type="text"
-                  value={formData.registrationNumber}
-                  onChange={(e) =>
-                    handleInputChange("registrationNumber", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                  placeholder="98765"
-                />
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Kredi Limiti
-                </label>
-                <input
-                  type="number"
-                  min="0"
-                  step="0.01"
-                  value={formData.creditLimit}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "creditLimit",
-                      parseFloat(e.target.value) || 0
-                    )
-                  }
-                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
-                    errors.creditLimit
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                  }`}
-                  placeholder="0.00"
-                />
-                {errors.creditLimit && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {errors.creditLimit}
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Ödeme Koşulları
-                </label>
-                <select
-                  value={formData.paymentTerms}
-                  onChange={(e) =>
-                    handleInputChange("paymentTerms", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="CASH">Peşin</option>
-                  <option value="NET_15">15 Gün Vadeli</option>
-                  <option value="NET_30">30 Gün Vadeli</option>
-                  <option value="NET_60">60 Gün Vadeli</option>
-                  <option value="NET_90">90 Gün Vadeli</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-xs 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-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="TRY">Türk Lirası (TRY)</option>
-                  <option value="USD">Amerikan Doları (USD)</option>
-                  <option value="EUR">Euro (EUR)</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Relationship Information */}
-        <div className="bg-white shadow rounded-lg">
-          <div className="px-4 py-3 border-b border-gray-200">
-            <h3 className="text-base font-medium text-gray-900 flex items-center">
-              <FaEnvelope className="w-5 h-5 mr-2" />
-              İlişki Yönetimi
-            </h3>
-          </div>
-
-          <div className="p-4 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Müşteri Durumu
-                </label>
-                <select
-                  value={formData.status}
-                  onChange={(e) => handleInputChange("status", e.target.value)}
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="ACTIVE">Aktif</option>
-                  <option value="INACTIVE">Pasif</option>
-                  <option value="PROSPECT">Potansiyel</option>
-                  <option value="BLOCKED">Blokeli</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Müşteri Segmenti
-                </label>
-                <select
-                  value={formData.customerSegment}
-                  onChange={(e) =>
-                    handleInputChange("customerSegment", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="STANDARD">Standart</option>
-                  <option value="PREMIUM">Premium</option>
-                  <option value="ENTERPRISE">Kurumsal</option>
-                  <option value="VIP">VIP</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Sorumlu Satış Temsilcisi
-                </label>
-                <select
-                  value={formData.assignedSalesRep}
-                  onChange={(e) =>
-                    handleInputChange("assignedSalesRep", e.target.value)
-                  }
-                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="">Temsilci seçin</option>
-                  <option value="sales_rep_1">Mehmet Özkan</option>
-                  <option value="sales_rep_2">Ayşe Demir</option>
-                  <option value="sales_rep_3">Ali Yılmaz</option>
-                </select>
-              </div>
-            </div>
-
-            <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"
-              >
-                Aktif
-              </label>
-            </div>
-          </div>
-        </div>
-
-        {/* Form Actions */}
-        <div className="flex items-center justify-end space-x-2 bg-gray-50 px-4 py-3 rounded-b-lg">
-          <button
-            type="button"
-            onClick={handleCancel}
-            className="inline-flex items-center px-4 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            <FaTimes className="w-4 h-4 mr-2" />
-            İptal
-          </button>
-          <button
-            type="submit"
-            disabled={saving}
-            className="inline-flex items-center px-4 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {saving ? (
-              <>
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                Kaydediliyor...
-              </>
-            ) : (
-              <>
-                <FaSave className="w-4 h-4 mr-2" />
-                {isEdit ? "Güncelle" : "Kaydet"}
-              </>
-            )}
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default CustomerForm;
+export default CustomerForm
diff --git a/ui/src/views/crm/components/CustomerList.tsx b/ui/src/views/crm/components/CustomerList.tsx
index 6b44f6e1..e8a2c761 100644
--- a/ui/src/views/crm/components/CustomerList.tsx
+++ b/ui/src/views/crm/components/CustomerList.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 {
   FaUserCheck,
   FaPlus,
@@ -16,54 +16,50 @@ import {
   FaExclamationTriangle,
   FaStar,
   FaCalendar,
-} from "react-icons/fa";
-import classNames from "classnames";
-import { CustomerSegmentEnum } from "../../../types/crm";
-import dayjs from "dayjs";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
-import { BusinessPartyStatusEnum, PartyType } from "../../../types/common";
-import Widget from "../../../components/common/Widget";
+} from 'react-icons/fa'
+import classNames from 'classnames'
+import { CustomerSegmentEnum } from '../../../types/crm'
+import dayjs from 'dayjs'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
+import { BusinessPartyStatusEnum, PartyType } from '../../../types/common'
+import Widget from '../../../components/common/Widget'
 import {
   getBusinessPartyStatusColor,
   getBusinessPartyStatusName,
   getCustomerSegmentColor,
   getCustomerSegmentName,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
 
 const CustomerList: React.FC = () => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [filterStatus, setFilterStatus] = useState("all");
-  const [filterSegment, setFilterSegment] = useState("all");
-  const [showFilters, setShowFilters] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('')
+  const [filterStatus, setFilterStatus] = useState('all')
+  const [filterSegment, setFilterSegment] = useState('all')
+  const [showFilters, setShowFilters] = useState(false)
 
   const {
     data: customers,
     isLoading,
     error,
   } = useQuery({
-    queryKey: ["customers", searchTerm, filterStatus, filterSegment],
+    queryKey: ['customers', searchTerm, filterStatus, filterSegment],
     queryFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
+      await new Promise((resolve) => setTimeout(resolve, 500))
 
       const mockCustomers = mockBusinessParties.filter(
-        (customer) => customer.partyType === PartyType.Customer
-      );
+        (customer) => customer.partyType === PartyType.Customer,
+      )
 
       return mockCustomers.filter((customer) => {
         const matchesSearch =
           customer.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
           customer.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          customer.primaryContact?.fullName
-            .toLowerCase()
-            .includes(searchTerm.toLowerCase());
-        const matchesStatus =
-          filterStatus === "all" || customer.status === filterStatus;
-        const matchesSegment =
-          filterSegment === "all" || customer.customerSegment === filterSegment;
-        return matchesSearch && matchesStatus && matchesSegment;
-      });
+          customer.primaryContact?.fullName.toLowerCase().includes(searchTerm.toLowerCase())
+        const matchesStatus = filterStatus === 'all' || customer.status === filterStatus
+        const matchesSegment = filterSegment === 'all' || customer.customerSegment === filterSegment
+        return matchesSearch && matchesStatus && matchesSegment
+      })
     },
-  });
+  })
 
   if (isLoading) {
     return (
@@ -71,7 +67,7 @@ const CustomerList: 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">Müşteriler yükleniyor...</span>
       </div>
-    );
+    )
   }
 
   if (error) {
@@ -79,12 +75,10 @@ const CustomerList: 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">
-            Müşteriler yüklenirken hata oluştu.
-          </span>
+          <span className="text-red-800">Müşteriler yüklenirken hata oluştu.</span>
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -109,10 +103,10 @@ const CustomerList: React.FC = () => {
           <button
             onClick={() => setShowFilters(!showFilters)}
             className={classNames(
-              "flex items-center px-3 py-1.5 text-sm border rounded-lg transition-colors",
+              '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"
+                ? 'border-blue-500 bg-blue-50 text-blue-700'
+                : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
             )}
           >
             <FaFilter size={14} className="mr-2" />
@@ -122,7 +116,7 @@ const CustomerList: React.FC = () => {
 
         <div className="flex items-center space-x-2">
           <button
-            onClick={() => alert("Dışa aktarma özelliği yakında eklenecek")}
+            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={14} className="mr-2" />
@@ -144,18 +138,14 @@ const CustomerList: React.FC = () => {
         <div className="bg-white border border-gray-200 rounded-lg p-3">
           <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
             <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Durum
-              </label>
+              <label className="block text-xs font-medium text-gray-700 mb-1">Durum</label>
               <select
                 value={filterStatus}
                 onChange={(e) => setFilterStatus(e.target.value)}
                 className="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
               >
                 <option value="all">Tümü</option>
-                <option value={BusinessPartyStatusEnum.Prospect}>
-                  Potansiyel
-                </option>
+                <option value={BusinessPartyStatusEnum.Prospect}>Potansiyel</option>
                 <option value={BusinessPartyStatusEnum.Active}>Aktif</option>
                 <option value={BusinessPartyStatusEnum.Inactive}>Pasif</option>
                 <option value={BusinessPartyStatusEnum.Blocked}>Blokeli</option>
@@ -163,9 +153,7 @@ const CustomerList: React.FC = () => {
             </div>
 
             <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Segment
-              </label>
+              <label className="block text-xs font-medium text-gray-700 mb-1">Segment</label>
               <select
                 value={filterSegment}
                 onChange={(e) => setFilterSegment(e.target.value)}
@@ -182,9 +170,9 @@ const CustomerList: React.FC = () => {
             <div className="flex items-end">
               <button
                 onClick={() => {
-                  setFilterStatus("all");
-                  setFilterSegment("all");
-                  setSearchTerm("");
+                  setFilterStatus('all')
+                  setFilterSegment('all')
+                  setSearchTerm('')
                 }}
                 className="w-full px-4 py-1.5 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
               >
@@ -206,11 +194,7 @@ const CustomerList: React.FC = () => {
 
         <Widget
           title="Aktif Müşteri"
-          value={
-            customers?.filter(
-              (c) => c.status === BusinessPartyStatusEnum.Active
-            ).length || 0
-          }
+          value={customers?.filter((c) => c.status === BusinessPartyStatusEnum.Active).length || 0}
           color="green"
           icon="FaUserCheck"
         />
@@ -218,9 +202,7 @@ const CustomerList: React.FC = () => {
         <Widget
           title="Toplam Ciro"
           value={`₺${
-            customers
-              ?.reduce((acc, c) => acc + (c.totalRevenue ?? 0), 0)
-              .toLocaleString() || 0
+            customers?.reduce((acc, c) => acc + (c.totalRevenue ?? 0), 0).toLocaleString() || 0
           }`}
           color="purple"
           icon="FaDollarSign"
@@ -231,10 +213,8 @@ const CustomerList: React.FC = () => {
           value={`₺${
             customers?.length
               ? Math.round(
-                  customers.reduce(
-                    (acc, c) => acc + (c.averageOrderValue ?? 0),
-                    0
-                  ) / customers.length
+                  customers.reduce((acc, c) => acc + (c.averageOrderValue ?? 0), 0) /
+                    customers.length,
                 ).toLocaleString()
               : 0
           }`}
@@ -279,10 +259,7 @@ const CustomerList: React.FC = () => {
 
             <tbody className="bg-white divide-y divide-gray-200">
               {customers?.map((customer) => (
-                <tr
-                  key={customer.id}
-                  className="hover:bg-gray-50 transition-colors"
-                >
+                <tr key={customer.id} className="hover:bg-gray-50 transition-colors">
                   <td className="px-4 py-3">
                     <div className="flex items-center">
                       <div className="flex-shrink-0 h-8 w-8">
@@ -291,16 +268,10 @@ const CustomerList: React.FC = () => {
                         </div>
                       </div>
                       <div className="ml-4">
-                        <div className="text-xs font-medium text-gray-900">
-                          {customer.code}
-                        </div>
-                        <div className="text-sm text-gray-500">
-                          {customer.name}
-                        </div>
+                        <div className="text-xs font-medium text-gray-900">{customer.code}</div>
+                        <div className="text-sm text-gray-500">{customer.name}</div>
                         {customer.industry && (
-                          <div className="text-xs text-gray-400 mt-1">
-                            {customer.industry}
-                          </div>
+                          <div className="text-xs text-gray-400 mt-1">{customer.industry}</div>
                         )}
                       </div>
                     </div>
@@ -332,26 +303,26 @@ const CustomerList: React.FC = () => {
                     <div className="space-y-2">
                       <div
                         className={classNames(
-                          "text-sm font-medium",
+                          'text-sm font-medium',
                           getCustomerSegmentColor(
-                            customer.customerSegment || CustomerSegmentEnum.SMB
-                          )
+                            customer.customerSegment || CustomerSegmentEnum.SMB,
+                          ),
                         )}
                       >
                         {getCustomerSegmentName(
-                          customer.customerSegment || CustomerSegmentEnum.SMB
+                          customer.customerSegment || CustomerSegmentEnum.SMB,
                         )}
                       </div>
                       <span
                         className={classNames(
-                          "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
+                          'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
                           getBusinessPartyStatusColor(
-                            customer.status ?? BusinessPartyStatusEnum.Prospect
-                          )
+                            customer.status ?? BusinessPartyStatusEnum.Prospect,
+                          ),
                         )}
                       >
                         {getBusinessPartyStatusName(
-                          customer.status ?? BusinessPartyStatusEnum.Prospect
+                          customer.status ?? BusinessPartyStatusEnum.Prospect,
                         )}
                       </span>
                     </div>
@@ -363,15 +334,12 @@ const CustomerList: React.FC = () => {
                         ₺{(customer.totalRevenue ?? 0).toLocaleString()}
                       </div>
                       <div className="text-sm text-gray-500">
-                        Ort. Sipariş: ₺
-                        {(customer.averageOrderValue ?? 0).toLocaleString()}
+                        Ort. Sipariş: ₺{(customer.averageOrderValue ?? 0).toLocaleString()}
                       </div>
                       <div className="flex items-center">
                         <FaStar size={14} className="text-yellow-500 mr-1" />
                         <span className="text-sm text-gray-600">
-                          LTV: ₺
-                          {((customer.lifetimeValue ?? 0) / 1000000).toFixed(1)}
-                          M
+                          LTV: ₺{((customer.lifetimeValue ?? 0) / 1000000).toFixed(1)}M
                         </span>
                       </div>
                     </div>
@@ -381,9 +349,7 @@ const CustomerList: React.FC = () => {
                     <div className="text-sm font-medium text-gray-900">
                       ₺{customer.creditLimit.toLocaleString()}
                     </div>
-                    <div className="text-sm text-gray-500">
-                      {customer.paymentTerms}
-                    </div>
+                    <div className="text-sm text-gray-500">{customer.paymentTerms}</div>
                   </td>
 
                   <td className="px-4 py-3">
@@ -391,7 +357,7 @@ const CustomerList: React.FC = () => {
                       {customer.lastOrderDate && (
                         <div className="flex items-center text-sm text-gray-900">
                           <FaCalendar size={14} className="mr-1" />
-                          {dayjs(customer.lastOrderDate).format("DD.MM.YYYY")}
+                          {dayjs(customer.lastOrderDate).format('DD.MM.YYYY')}
                         </div>
                       )}
                       <div className="text-sm text-gray-500">Son sipariş</div>
@@ -426,12 +392,8 @@ const CustomerList: React.FC = () => {
         {(!customers || customers.length === 0) && (
           <div className="text-center py-12">
             <FaUserCheck className="mx-auto h-10 w-10 text-gray-400" />
-            <h3 className="mt-2 text-xs font-medium text-gray-900">
-              Müşteri bulunamadı
-            </h3>
-            <p className="mt-1 text-xs text-gray-500">
-              Yeni müşteri ekleyerek başlayın.
-            </p>
+            <h3 className="mt-2 text-xs font-medium text-gray-900">Müşteri bulunamadı</h3>
+            <p className="mt-1 text-xs text-gray-500">Yeni müşteri ekleyerek başlayın.</p>
             <div className="mt-6">
               <Link
                 to="/admin/crm/customers/new"
@@ -445,7 +407,7 @@ const CustomerList: React.FC = () => {
         )}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default CustomerList;
+export default CustomerList
diff --git a/ui/src/views/crm/components/CustomerListWithToggle.tsx b/ui/src/views/crm/components/CustomerListWithToggle.tsx
index d959856a..5ed763a5 100644
--- a/ui/src/views/crm/components/CustomerListWithToggle.tsx
+++ b/ui/src/views/crm/components/CustomerListWithToggle.tsx
@@ -1,60 +1,61 @@
-import React, { useState } from "react";
-import { FaList, FaTh } from "react-icons/fa";
-import classNames from "classnames";
-import CustomerList from "./CustomerList";
-import CustomerCards from "./CustomerCards";
+import React, { useState } from 'react'
+import { FaList, FaTh } from 'react-icons/fa'
+import classNames from 'classnames'
+import CustomerList from './CustomerList'
+import CustomerCards from './CustomerCards'
+import { Container } from '@/components/shared'
 
-export type ViewMode = "list" | "cards";
+export type ViewMode = 'list' | 'cards'
 
 const CustomerListWithToggle: React.FC = () => {
-  const [viewMode, setViewMode] = useState<ViewMode>("list");
+  const [viewMode, setViewMode] = useState<ViewMode>('list')
 
   return (
-    <div className="space-y-4 pt-2">
-      {/* Header with View Toggle */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-        <div>
-          <h1 className="text-xl font-bold text-gray-900">Müşteri Listesi</h1>
-          <p className="text-sm text-gray-600 mt-1">
-            Müşteri listesi ve detay bilgileri
-          </p>
-        </div>
+    <Container>
+      <div className="space-y-4 pt-2">
+        {/* Header with View Toggle */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div>
+            <h1 className="text-xl font-bold text-gray-900">Müşteri Listesi</h1>
+            <p className="text-sm text-gray-600 mt-1">Müşteri listesi ve detay bilgileri</p>
+          </div>
 
-        {/* View Mode Toggle */}
-        <div className="flex items-center space-x-2">
-          <div className="flex bg-gray-100 rounded-lg p-1">
-            <button
-              onClick={() => setViewMode("list")}
-              className={classNames(
-                "flex items-center space-x-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
-                viewMode === "list"
-                  ? "bg-white text-gray-900 shadow-sm"
-                  : "text-gray-600 hover:text-gray-900"
-              )}
-            >
-              <FaList className="w-4 h-4" />
-            </button>
-            <button
-              onClick={() => setViewMode("cards")}
-              className={classNames(
-                "flex items-center space-x-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
-                viewMode === "cards"
-                  ? "bg-white text-gray-900 shadow-sm"
-                  : "text-gray-600 hover:text-gray-900"
-              )}
-            >
-              <FaTh className="w-4 h-4" />
-            </button>
+          {/* View Mode Toggle */}
+          <div className="flex items-center space-x-2">
+            <div className="flex bg-gray-100 rounded-lg p-1">
+              <button
+                onClick={() => setViewMode('list')}
+                className={classNames(
+                  'flex items-center space-x-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
+                  viewMode === 'list'
+                    ? 'bg-white text-gray-900 shadow-sm'
+                    : 'text-gray-600 hover:text-gray-900',
+                )}
+              >
+                <FaList className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => setViewMode('cards')}
+                className={classNames(
+                  'flex items-center space-x-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
+                  viewMode === 'cards'
+                    ? 'bg-white text-gray-900 shadow-sm'
+                    : 'text-gray-600 hover:text-gray-900',
+                )}
+              >
+                <FaTh className="w-4 h-4" />
+              </button>
+            </div>
           </div>
         </div>
-      </div>
 
-      {/* Content */}
-      <div className="transition-all duration-200">
-        {viewMode === "list" ? <CustomerList /> : <CustomerCards />}
+        {/* Content */}
+        <div className="transition-all duration-200">
+          {viewMode === 'list' ? <CustomerList /> : <CustomerCards />}
+        </div>
       </div>
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default CustomerListWithToggle;
+export default CustomerListWithToggle
diff --git a/ui/src/views/crm/components/CustomerView.tsx b/ui/src/views/crm/components/CustomerView.tsx
index e41c028e..8ad83ec9 100644
--- a/ui/src/views/crm/components/CustomerView.tsx
+++ b/ui/src/views/crm/components/CustomerView.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { useParams, Link, useNavigate } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import React, { useState } from 'react'
+import { useParams, Link, useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
 import {
   FaArrowLeft,
   FaEdit,
@@ -23,36 +23,37 @@ import {
   FaUsers,
   FaChartBar,
   FaArrowUp,
-} from "react-icons/fa";
-import classNames from "classnames";
-import { CustomerSegmentEnum } from "../../../types/crm";
-import dayjs from "dayjs";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
+} from 'react-icons/fa'
+import classNames from 'classnames'
+import { CustomerSegmentEnum } from '../../../types/crm'
+import dayjs from 'dayjs'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
 import {
   getBusinessPartyStatusColor,
   getBusinessPartyStatusName,
   getCustomerSegmentName,
-} from "../../../utils/erp";
-import { BusinessPartyStatusEnum } from "../../../types/common";
+} from '../../../utils/erp'
+import { BusinessPartyStatusEnum } from '../../../types/common'
+import { Container } from '@/components/shared'
 
 const CustomerView: 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')
 
   const {
     data: customer,
     isLoading,
     error,
   } = useQuery({
-    queryKey: ["customer", id],
+    queryKey: ['customer', id],
     queryFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 300));
-      const found = mockBusinessParties.find((c) => c.id === id);
-      if (!found) throw new Error("Müşteri bulunamadı");
-      return found;
+      await new Promise((resolve) => setTimeout(resolve, 300))
+      const found = mockBusinessParties.find((c) => c.id === id)
+      if (!found) throw new Error('Müşteri bulunamadı')
+      return found
     },
-  });
+  })
 
   if (isLoading) {
     return (
@@ -85,7 +86,7 @@ const CustomerView: React.FC = () => {
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   if (error || !customer) {
@@ -96,18 +97,15 @@ const CustomerView: React.FC = () => {
             <div className="flex items-center">
               <FaExclamationTriangle className="h-8 w-8 text-red-600 mr-3" />
               <div>
-                <h3 className="text-lg font-medium text-red-800">
-                  Müşteri Bulunamadı
-                </h3>
+                <h3 className="text-lg font-medium text-red-800">Müşteri Bulunamadı</h3>
                 <p className="text-red-600">
-                  Aradığınız müşteri mevcut değil veya erişim izniniz
-                  bulunmuyor.
+                  Aradığınız müşteri mevcut değil veya erişim izniniz bulunmuyor.
                 </p>
               </div>
             </div>
             <div className="mt-4">
               <button
-                onClick={() => navigate("/admin/crm/customers")}
+                onClick={() => navigate('/admin/crm/customers')}
                 className="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
               >
                 <FaArrowLeft className="w-4 h-4 mr-2" />
@@ -117,934 +115,850 @@ const CustomerView: React.FC = () => {
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   const tabs = [
-    { id: "overview", label: "Genel Bakış", icon: FaChartLine },
-    { id: "contact", label: "İletişim", icon: FaUser },
-    { id: "business", label: "İş Bilgileri", icon: FaBuilding },
-    { id: "financial", label: "Finansal", icon: FaDollarSign },
-    { id: "history", label: "Geçmiş", icon: FaHistory },
-  ];
+    { id: 'overview', label: 'Genel Bakış', icon: FaChartLine },
+    { id: 'contact', label: 'İletişim', icon: FaUser },
+    { id: 'business', label: 'İş Bilgileri', icon: FaBuilding },
+    { id: 'financial', label: 'Finansal', icon: FaDollarSign },
+    { id: 'history', label: 'Geçmiş', icon: FaHistory },
+  ]
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b border-gray-200">
-        <div className="mx-auto px-4 py-3">
-          {/* Breadcrumb */}
-          <div className="flex items-center space-x-2 text-xs text-gray-500 mb-3">
-            <Link to="/admin/crm/customers" className="hover:text-blue-600">
-              Müşteriler
-            </Link>
-            <span>/</span>
-            <span className="text-gray-900">{customer.name}</span>
-          </div>
-
-          {/* Header */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-4">
-              <button
-                onClick={() => navigate("/admin/crm/customers")}
-                className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-              >
-                <FaArrowLeft className="w-5 h-5" />
-              </button>
-
-              <div className="flex items-center space-x-4">
-                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white shadow-lg">
-                  <FaBuilding className="w-8 h-8" />
-                </div>
-
-                <div>
-                  <div className="flex items-center space-x-3">
-                    <h1 className="text-xl font-bold text-gray-900">
-                      {customer.name}
-                    </h1>
-                    <span
-                      className={classNames(
-                        "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border",
-                        getBusinessPartyStatusColor(
-                          customer.status || BusinessPartyStatusEnum.Active
-                        )
-                      )}
-                    >
-                      {getBusinessPartyStatusName(
-                        customer.status || BusinessPartyStatusEnum.Active
-                      )}
-                    </span>
-                  </div>
-                  <div className="flex items-center space-x-4 mt-1">
-                    <span className="text-sm text-gray-600">
-                      {customer.code}
-                    </span>
-                    <span className="text-sm text-gray-400">•</span>
-                    <span className="text-sm text-gray-600">
-                      {getCustomerSegmentName(
-                        customer.customerSegment || CustomerSegmentEnum.Startup
-                      )}
-                    </span>
-                    {customer.industry && (
-                      <>
-                        <span className="text-sm text-gray-400">•</span>
-                        <span className="text-sm text-gray-600">
-                          {customer.industry}
-                        </span>
-                      </>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="flex items-center space-x-2">
-              <Link
-                to={`/admin/crm/customers/edit/${customer.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
+    <Container>
+      <div className="min-h-screen bg-gray-50">
+        <div className="bg-white border-b border-gray-200">
+          <div className="mx-auto px-4 py-3">
+            {/* Breadcrumb */}
+            <div className="flex items-center space-x-2 text-xs text-gray-500 mb-3">
+              <Link to="/admin/crm/customers" className="hover:text-blue-600">
+                Müşteriler
               </Link>
-            </div>
-          </div>
-
-          {/* Key Metrics */}
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
-            <div className="bg-gray-50 rounded-lg p-3">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-sm font-medium text-gray-600">
-                    Toplam Ciro
-                  </p>
-                  <p className="text-lg font-bold text-gray-900">
-                    ₺{customer.totalRevenue?.toLocaleString()}
-                  </p>
-                </div>
-                <FaDollarSign className="h-6 w-6 text-green-500" />
-              </div>
+              <span>/</span>
+              <span className="text-gray-900">{customer.name}</span>
             </div>
 
-            <div className="bg-gray-50 rounded-lg p-3">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-sm font-medium text-gray-600">
-                    Ort. Sipariş
-                  </p>
-                  <p className="text-lg font-bold text-gray-900">
-                    ₺{customer.averageOrderValue?.toLocaleString()}
-                  </p>
-                </div>
-                <FaShoppingCart className="h-6 w-6 text-blue-500" />
-              </div>
-            </div>
+            {/* Header */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                <button
+                  onClick={() => navigate('/admin/crm/customers')}
+                  className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  <FaArrowLeft className="w-5 h-5" />
+                </button>
 
-            <div className="bg-gray-50 rounded-lg p-3">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-sm font-medium text-gray-600">
-                    Yaşam Boyu Değer
-                  </p>
-                  <p className="text-lg font-bold text-gray-900">
-                    ₺{((customer.lifetimeValue ?? 0) / 1000000).toFixed(1)}M
-                  </p>
-                </div>
-                <FaStar className="h-6 w-6 text-yellow-500" />
-              </div>
-            </div>
-
-            <div className="bg-gray-50 rounded-lg p-3">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-sm font-medium text-gray-600">
-                    Kredi Limiti
-                  </p>
-                  <p className="text-lg font-bold text-gray-900">
-                    ₺{customer.creditLimit.toLocaleString()}
-                  </p>
-                </div>
-                <FaCreditCard className="h-6 w-6 text-purple-500" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Tabs */}
-      <div className="bg-white border-b border-gray-200">
-        <div className="mx-auto px-4">
-          <nav className="flex space-x-8">
-            {tabs.map((tab) => (
-              <button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                className={classNames(
-                  "flex items-center space-x-2 py-3 px-1 border-b-2 font-medium text-sm transition-colors",
-                  activeTab === tab.id
-                    ? "border-blue-500 text-blue-600"
-                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                )}
-              >
-                <tab.icon className="w-4 h-4" />
-                <span>{tab.label}</span>
-              </button>
-            ))}
-          </nav>
-        </div>
-      </div>
-
-      {/* Tab Content */}
-      <div className="mx-auto py-4">
-        {activeTab === "overview" && (
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-            {/* Main Overview */}
-            <div className="lg:col-span-2 space-y-4">
-              {/* Quick Summary */}
-              <div className="bg-white rounded-lg shadow p-4">
-                <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
-                  <FaChartBar className="w-5 h-5 mr-2" />
-                  Müşteri Özeti
-                </h3>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div>
-                    <h4 className="font-medium text-gray-900 mb-3">
-                      Temel Bilgiler
-                    </h4>
-                    <div className="space-y-2 text-sm">
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Müşteri Kodu:</span>
-                        <span className="font-medium">{customer.code}</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Şirket:</span>
-                        <span className="font-medium">{customer.name}</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Sektör:</span>
-                        <span className="font-medium">
-                          {customer.industry || "Belirtilmemiş"}
-                        </span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Segment:</span>
-                        <span className="font-medium">
-                          {getCustomerSegmentName(
-                            customer.customerSegment ||
-                              CustomerSegmentEnum.Startup
-                          )}
-                        </span>
-                      </div>
-                    </div>
+                <div className="flex items-center space-x-4">
+                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white shadow-lg">
+                    <FaBuilding className="w-8 h-8" />
                   </div>
 
                   <div>
-                    <h4 className="font-medium text-gray-900 mb-3">
-                      Performans
-                    </h4>
-                    <div className="space-y-2 text-sm">
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Son Sipariş:</span>
-                        <span className="font-medium">
-                          {customer.lastOrderDate
-                            ? dayjs(customer.lastOrderDate).format("DD.MM.YYYY")
-                            : "Henüz sipariş yok"}
-                        </span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Ödeme Koşulları:</span>
-                        <span className="font-medium">
-                          {customer.paymentTerms}
-                        </span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Para Birimi:</span>
-                        <span className="font-medium">{customer.currency}</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Kayıt Tarihi:</span>
-                        <span className="font-medium">
-                          {dayjs(customer.creationTime).format("DD.MM.YYYY")}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Performance Chart */}
-              <div className="bg-white rounded-lg shadow p-4">
-                <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
-                  <FaChartLine className="w-5 h-5 mr-2" />
-                  Satış Performansı
-                </h3>
-                <div className="grid grid-cols-3 gap-3 mb-4">
-                  <div className="text-center p-3 bg-blue-50 rounded-lg">
-                    <div className="text-xl font-bold text-blue-600">
-                      {customer.orders?.length || 0}
-                    </div>
-                    <div className="text-sm text-gray-600">Toplam Sipariş</div>
-                  </div>
-                  <div className="text-center p-3 bg-green-50 rounded-lg">
-                    <div className="text-xl font-bold text-green-600">
-                      ₺{((customer.totalRevenue ?? 0) / 1000).toFixed(0)}K
-                    </div>
-                    <div className="text-sm text-gray-600">Toplam Satış</div>
-                  </div>
-                  <div className="text-center p-3 bg-purple-50 rounded-lg">
-                    <div className="text-xl font-bold text-purple-600">
-                      ₺{((customer.averageOrderValue ?? 0) / 1000).toFixed(0)}K
-                    </div>
-                    <div className="text-sm text-gray-600">
-                      Ortalama Sipariş
-                    </div>
-                  </div>
-                </div>
-
-                {/* Progress Bars */}
-                <div className="space-y-3">
-                  <div>
-                    <div className="flex justify-between text-sm mb-1">
-                      <span>Kredi Kullanımı</span>
-                      <span>
-                        {Math.round(
-                          ((customer.totalRevenue ?? 0) /
-                            customer.creditLimit) *
-                            100
+                    <div className="flex items-center space-x-3">
+                      <h1 className="text-xl font-bold text-gray-900">{customer.name}</h1>
+                      <span
+                        className={classNames(
+                          'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border',
+                          getBusinessPartyStatusColor(
+                            customer.status || BusinessPartyStatusEnum.Active,
+                          ),
+                        )}
+                      >
+                        {getBusinessPartyStatusName(
+                          customer.status || BusinessPartyStatusEnum.Active,
                         )}
-                        %
                       </span>
                     </div>
-                    <div className="w-full bg-gray-200 rounded-full h-1.5">
-                      <div
-                        className="bg-blue-600 h-1.5 rounded-full"
-                        style={{
-                          width: `${Math.min(
-                            ((customer.totalRevenue ?? 0) /
-                              (customer.creditLimit ?? 1)) *
-                              100,
-                            100
-                          )}%`,
-                        }}
-                      ></div>
+                    <div className="flex items-center space-x-4 mt-1">
+                      <span className="text-sm text-gray-600">{customer.code}</span>
+                      <span className="text-sm text-gray-400">•</span>
+                      <span className="text-sm text-gray-600">
+                        {getCustomerSegmentName(
+                          customer.customerSegment || CustomerSegmentEnum.Startup,
+                        )}
+                      </span>
+                      {customer.industry && (
+                        <>
+                          <span className="text-sm text-gray-400">•</span>
+                          <span className="text-sm text-gray-600">{customer.industry}</span>
+                        </>
+                      )}
                     </div>
                   </div>
                 </div>
               </div>
+
+              <div className="flex items-center space-x-2">
+                <Link
+                  to={`/admin/crm/customers/edit/${customer.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>
 
-            {/* Sidebar */}
-            <div className="space-y-4">
-              {/* Primary Contact */}
-              <div className="bg-white rounded-lg shadow p-4">
-                <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
-                  <FaUser className="w-5 h-5 mr-2" />
-                  Ana İletişim
-                </h3>
-                <div className="text-center mb-3">
-                  <div className="w-16 h-16 bg-gray-200 rounded-full mx-auto mb-3 flex items-center justify-center">
-                    <FaUser className="w-8 h-8 text-gray-500" />
+            {/* Key Metrics */}
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
+              <div className="bg-gray-50 rounded-lg p-3">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium text-gray-600">Toplam Ciro</p>
+                    <p className="text-lg font-bold text-gray-900">
+                      ₺{customer.totalRevenue?.toLocaleString()}
+                    </p>
                   </div>
-                  <h4 className="font-medium text-gray-900">
-                    {customer.primaryContact?.fullName}
-                  </h4>
-                  <p className="text-sm text-gray-600">
-                    {customer.primaryContact?.title || "Pozisyon belirtilmemiş"}
-                  </p>
-                </div>
-
-                <div className="space-y-2">
-                  <div className="flex items-center">
-                    <FaEnvelope className="w-4 h-4 text-gray-400 mr-3" />
-                    <a
-                      href={`mailto:${customer.primaryContact?.email}`}
-                      className="text-blue-600 hover:text-blue-800 text-sm"
-                    >
-                      {customer.primaryContact?.email}
-                    </a>
-                  </div>
-                  {customer.primaryContact?.phone && (
-                    <div className="flex items-center">
-                      <FaPhone className="w-4 h-4 text-gray-400 mr-3" />
-                      <a
-                        href={`tel:${customer.primaryContact?.phone}`}
-                        className="text-blue-600 hover:text-blue-800 text-sm"
-                      >
-                        {customer.primaryContact.phone}
-                      </a>
-                    </div>
-                  )}
+                  <FaDollarSign className="h-6 w-6 text-green-500" />
                 </div>
               </div>
 
-              {/* Quick Actions */}
-              <div className="bg-white rounded-lg shadow p-4">
-                <h3 className="text-base font-semibold text-gray-900 mb-3">
-                  Hızlı İşlemler
-                </h3>
-                <div className="space-y-2">
-                  <button className="w-full flex items-center justify-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
-                    <FaShoppingCart className="w-4 h-4 mr-2" />
-                    Yeni Sipariş
-                  </button>
-                  <button className="w-full flex items-center justify-center px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
-                    <FaClipboardList className="w-4 h-4 mr-2" />
-                    Teklif Oluştur
-                  </button>
-                  <button className="w-full flex items-center justify-center px-3 py-1.5 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
-                    <FaCalendar className="w-4 h-4 mr-2" />
-                    Toplantı Planla
-                  </button>
+              <div className="bg-gray-50 rounded-lg p-3">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium text-gray-600">Ort. Sipariş</p>
+                    <p className="text-lg font-bold text-gray-900">
+                      ₺{customer.averageOrderValue?.toLocaleString()}
+                    </p>
+                  </div>
+                  <FaShoppingCart className="h-6 w-6 text-blue-500" />
                 </div>
               </div>
 
-              {/* Recent Activities */}
-              <div className="bg-white rounded-lg shadow p-4">
-                <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
-                  <FaHistory className="w-5 h-5 mr-2" />
-                  Son Aktiviteler
-                </h3>
-                <div className="space-y-3">
-                  <div className="flex items-start space-x-3">
-                    <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
-                    <div className="flex-1">
-                      <p className="text-sm text-gray-900">
-                        Yeni sipariş oluşturuldu
-                      </p>
-                      <p className="text-sm text-gray-600">
-                        {dayjs().subtract(2, "hour").format("HH:mm")}
-                      </p>
-                    </div>
+              <div className="bg-gray-50 rounded-lg p-3">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium text-gray-600">Yaşam Boyu Değer</p>
+                    <p className="text-lg font-bold text-gray-900">
+                      ₺{((customer.lifetimeValue ?? 0) / 1000000).toFixed(1)}M
+                    </p>
                   </div>
-                  <div className="flex items-start space-x-3">
-                    <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
-                    <div className="flex-1">
-                      <p className="text-sm text-gray-900">Teklif onaylandı</p>
-                      <p className="text-sm text-gray-600">
-                        {dayjs().subtract(1, "day").format("DD.MM.YYYY")}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="flex items-start space-x-3">
-                    <div className="w-2 h-2 bg-yellow-500 rounded-full mt-2"></div>
-                    <div className="flex-1">
-                      <p className="text-sm text-gray-900">Görüşme yapıldı</p>
-                      <p className="text-sm text-gray-600">
-                        {dayjs().subtract(3, "day").format("DD.MM.YYYY")}
-                      </p>
-                    </div>
+                  <FaStar className="h-6 w-6 text-yellow-500" />
+                </div>
+              </div>
+
+              <div className="bg-gray-50 rounded-lg p-3">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium text-gray-600">Kredi Limiti</p>
+                    <p className="text-lg font-bold text-gray-900">
+                      ₺{customer.creditLimit.toLocaleString()}
+                    </p>
                   </div>
+                  <FaCreditCard className="h-6 w-6 text-purple-500" />
                 </div>
               </div>
             </div>
           </div>
-        )}
+        </div>
 
-        {activeTab === "contact" && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            {/* Primary Contact */}
-            <div className="bg-white rounded-lg shadow p-4">
-              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                <FaUser className="w-5 h-5 mr-2" />
-                Ana İletişim Kişisi
-              </h3>
+        {/* Tabs */}
+        <div className="bg-white border-b border-gray-200">
+          <div className="mx-auto px-4">
+            <nav className="flex space-x-8">
+              {tabs.map((tab) => (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={classNames(
+                    'flex items-center space-x-2 py-3 px-1 border-b-2 font-medium text-sm transition-colors',
+                    activeTab === tab.id
+                      ? 'border-blue-500 text-blue-600'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                  )}
+                >
+                  <tab.icon className="w-4 h-4" />
+                  <span>{tab.label}</span>
+                </button>
+              ))}
+            </nav>
+          </div>
+        </div>
 
-              <div className="space-y-3">
-                <div className="flex items-center space-x-4">
-                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
-                    <FaUser className="w-8 h-8 text-blue-600" />
-                  </div>
-                  <div>
-                    <h4 className="text-xl font-semibold text-gray-900">
-                      {customer.primaryContact?.fullName}
-                    </h4>
-                    <p className="text-gray-600">
-                      {customer.primaryContact?.title ||
-                        "Pozisyon belirtilmemiş"}
-                    </p>
+        {/* Tab Content */}
+        <div className="mx-auto py-4">
+          {activeTab === 'overview' && (
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+              {/* Main Overview */}
+              <div className="lg:col-span-2 space-y-4">
+                {/* Quick Summary */}
+                <div className="bg-white rounded-lg shadow p-4">
+                  <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
+                    <FaChartBar className="w-5 h-5 mr-2" />
+                    Müşteri Özeti
+                  </h3>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                      <h4 className="font-medium text-gray-900 mb-3">Temel Bilgiler</h4>
+                      <div className="space-y-2 text-sm">
+                        <div className="flex justify-between">
+                          <span className="text-gray-600">Müşteri Kodu:</span>
+                          <span className="font-medium">{customer.code}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-gray-600">Şirket:</span>
+                          <span className="font-medium">{customer.name}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-gray-600">Sektör:</span>
+                          <span className="font-medium">
+                            {customer.industry || 'Belirtilmemiş'}
+                          </span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-gray-600">Segment:</span>
+                          <span className="font-medium">
+                            {getCustomerSegmentName(
+                              customer.customerSegment || CustomerSegmentEnum.Startup,
+                            )}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div>
+                      <h4 className="font-medium text-gray-900 mb-3">Performans</h4>
+                      <div className="space-y-2 text-sm">
+                        <div className="flex justify-between">
+                          <span className="text-gray-600">Son Sipariş:</span>
+                          <span className="font-medium">
+                            {customer.lastOrderDate
+                              ? dayjs(customer.lastOrderDate).format('DD.MM.YYYY')
+                              : 'Henüz sipariş yok'}
+                          </span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-gray-600">Ödeme Koşulları:</span>
+                          <span className="font-medium">{customer.paymentTerms}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-gray-600">Para Birimi:</span>
+                          <span className="font-medium">{customer.currency}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-gray-600">Kayıt Tarihi:</span>
+                          <span className="font-medium">
+                            {dayjs(customer.creationTime).format('DD.MM.YYYY')}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
 
-                <div className="grid grid-cols-1 gap-3 pt-3">
-                  <div className="flex items-center p-2 bg-gray-50 rounded-lg">
-                    <FaEnvelope className="w-5 h-5 text-gray-400 mr-3" />
+                {/* Performance Chart */}
+                <div className="bg-white rounded-lg shadow p-4">
+                  <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
+                    <FaChartLine className="w-5 h-5 mr-2" />
+                    Satış Performansı
+                  </h3>
+                  <div className="grid grid-cols-3 gap-3 mb-4">
+                    <div className="text-center p-3 bg-blue-50 rounded-lg">
+                      <div className="text-xl font-bold text-blue-600">
+                        {customer.orders?.length || 0}
+                      </div>
+                      <div className="text-sm text-gray-600">Toplam Sipariş</div>
+                    </div>
+                    <div className="text-center p-3 bg-green-50 rounded-lg">
+                      <div className="text-xl font-bold text-green-600">
+                        ₺{((customer.totalRevenue ?? 0) / 1000).toFixed(0)}K
+                      </div>
+                      <div className="text-sm text-gray-600">Toplam Satış</div>
+                    </div>
+                    <div className="text-center p-3 bg-purple-50 rounded-lg">
+                      <div className="text-xl font-bold text-purple-600">
+                        ₺{((customer.averageOrderValue ?? 0) / 1000).toFixed(0)}K
+                      </div>
+                      <div className="text-sm text-gray-600">Ortalama Sipariş</div>
+                    </div>
+                  </div>
+
+                  {/* Progress Bars */}
+                  <div className="space-y-3">
                     <div>
-                      <p className="text-sm text-gray-600">E-posta</p>
+                      <div className="flex justify-between text-sm mb-1">
+                        <span>Kredi Kullanımı</span>
+                        <span>
+                          {Math.round(((customer.totalRevenue ?? 0) / customer.creditLimit) * 100)}%
+                        </span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div
+                          className="bg-blue-600 h-1.5 rounded-full"
+                          style={{
+                            width: `${Math.min(
+                              ((customer.totalRevenue ?? 0) / (customer.creditLimit ?? 1)) * 100,
+                              100,
+                            )}%`,
+                          }}
+                        ></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Sidebar */}
+              <div className="space-y-4">
+                {/* Primary Contact */}
+                <div className="bg-white rounded-lg shadow p-4">
+                  <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
+                    <FaUser className="w-5 h-5 mr-2" />
+                    Ana İletişim
+                  </h3>
+                  <div className="text-center mb-3">
+                    <div className="w-16 h-16 bg-gray-200 rounded-full mx-auto mb-3 flex items-center justify-center">
+                      <FaUser className="w-8 h-8 text-gray-500" />
+                    </div>
+                    <h4 className="font-medium text-gray-900">
+                      {customer.primaryContact?.fullName}
+                    </h4>
+                    <p className="text-sm text-gray-600">
+                      {customer.primaryContact?.title || 'Pozisyon belirtilmemiş'}
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center">
+                      <FaEnvelope className="w-4 h-4 text-gray-400 mr-3" />
                       <a
                         href={`mailto:${customer.primaryContact?.email}`}
-                        className="text-blue-600 hover:text-blue-800 font-medium"
+                        className="text-blue-600 hover:text-blue-800 text-sm"
                       >
                         {customer.primaryContact?.email}
                       </a>
                     </div>
-                  </div>
-
-                  {customer.primaryContact?.phone && (
-                    <div className="flex items-center p-2 bg-gray-50 rounded-lg">
-                      <FaPhone className="w-5 h-5 text-gray-400 mr-3" />
-                      <div>
-                        <p className="text-sm text-gray-600">Telefon</p>
+                    {customer.primaryContact?.phone && (
+                      <div className="flex items-center">
+                        <FaPhone className="w-4 h-4 text-gray-400 mr-3" />
                         <a
                           href={`tel:${customer.primaryContact?.phone}`}
+                          className="text-blue-600 hover:text-blue-800 text-sm"
+                        >
+                          {customer.primaryContact.phone}
+                        </a>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Quick Actions */}
+                <div className="bg-white rounded-lg shadow p-4">
+                  <h3 className="text-base font-semibold text-gray-900 mb-3">Hızlı İşlemler</h3>
+                  <div className="space-y-2">
+                    <button className="w-full flex items-center justify-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+                      <FaShoppingCart className="w-4 h-4 mr-2" />
+                      Yeni Sipariş
+                    </button>
+                    <button className="w-full flex items-center justify-center px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
+                      <FaClipboardList className="w-4 h-4 mr-2" />
+                      Teklif Oluştur
+                    </button>
+                    <button className="w-full flex items-center justify-center px-3 py-1.5 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+                      <FaCalendar className="w-4 h-4 mr-2" />
+                      Toplantı Planla
+                    </button>
+                  </div>
+                </div>
+
+                {/* Recent Activities */}
+                <div className="bg-white rounded-lg shadow p-4">
+                  <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
+                    <FaHistory className="w-5 h-5 mr-2" />
+                    Son Aktiviteler
+                  </h3>
+                  <div className="space-y-3">
+                    <div className="flex items-start space-x-3">
+                      <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
+                      <div className="flex-1">
+                        <p className="text-sm text-gray-900">Yeni sipariş oluşturuldu</p>
+                        <p className="text-sm text-gray-600">
+                          {dayjs().subtract(2, 'hour').format('HH:mm')}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-start space-x-3">
+                      <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
+                      <div className="flex-1">
+                        <p className="text-sm text-gray-900">Teklif onaylandı</p>
+                        <p className="text-sm text-gray-600">
+                          {dayjs().subtract(1, 'day').format('DD.MM.YYYY')}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-start space-x-3">
+                      <div className="w-2 h-2 bg-yellow-500 rounded-full mt-2"></div>
+                      <div className="flex-1">
+                        <p className="text-sm text-gray-900">Görüşme yapıldı</p>
+                        <p className="text-sm text-gray-600">
+                          {dayjs().subtract(3, 'day').format('DD.MM.YYYY')}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'contact' && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              {/* Primary Contact */}
+              <div className="bg-white rounded-lg shadow p-4">
+                <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                  <FaUser className="w-5 h-5 mr-2" />
+                  Ana İletişim Kişisi
+                </h3>
+
+                <div className="space-y-3">
+                  <div className="flex items-center space-x-4">
+                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
+                      <FaUser className="w-8 h-8 text-blue-600" />
+                    </div>
+                    <div>
+                      <h4 className="text-xl font-semibold text-gray-900">
+                        {customer.primaryContact?.fullName}
+                      </h4>
+                      <p className="text-gray-600">
+                        {customer.primaryContact?.title || 'Pozisyon belirtilmemiş'}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-3 pt-3">
+                    <div className="flex items-center p-2 bg-gray-50 rounded-lg">
+                      <FaEnvelope className="w-5 h-5 text-gray-400 mr-3" />
+                      <div>
+                        <p className="text-sm text-gray-600">E-posta</p>
+                        <a
+                          href={`mailto:${customer.primaryContact?.email}`}
                           className="text-blue-600 hover:text-blue-800 font-medium"
                         >
-                          {customer.primaryContact?.phone}
+                          {customer.primaryContact?.email}
+                        </a>
+                      </div>
+                    </div>
+
+                    {customer.primaryContact?.phone && (
+                      <div className="flex items-center p-2 bg-gray-50 rounded-lg">
+                        <FaPhone className="w-5 h-5 text-gray-400 mr-3" />
+                        <div>
+                          <p className="text-sm text-gray-600">Telefon</p>
+                          <a
+                            href={`tel:${customer.primaryContact?.phone}`}
+                            className="text-blue-600 hover:text-blue-800 font-medium"
+                          >
+                            {customer.primaryContact?.phone}
+                          </a>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Address Information */}
+              <div className="bg-white rounded-lg shadow p-4">
+                <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                  <FaMapMarkerAlt className="w-5 h-5 mr-2" />
+                  Adres Bilgileri
+                </h3>
+
+                <div className="space-y-3">
+                  <div className="p-4 bg-gray-50 rounded-lg">
+                    <div className="space-y-2">
+                      <p className="font-medium text-gray-900">{customer.address?.street}</p>
+                      <p className="text-gray-600">{customer.address?.city}</p>
+                      <p className="text-gray-600">
+                        {customer.address?.state} {customer.address?.postalCode}
+                      </p>
+                      <p className="text-gray-600 font-medium">{customer.address?.country}</p>
+                    </div>
+                  </div>
+
+                  {customer.website && (
+                    <div className="flex items-center p-2 bg-gray-50 rounded-lg">
+                      <FaGlobe className="w-5 h-5 text-gray-400 mr-3" />
+                      <div>
+                        <p className="text-sm text-gray-600">Website</p>
+                        <a
+                          href={customer.website}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-blue-600 hover:text-blue-800 font-medium"
+                        >
+                          {customer.website}
                         </a>
                       </div>
                     </div>
                   )}
                 </div>
               </div>
-            </div>
 
-            {/* Address Information */}
-            <div className="bg-white rounded-lg shadow p-4">
-              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                <FaMapMarkerAlt className="w-5 h-5 mr-2" />
-                Adres Bilgileri
-              </h3>
+              {/* Additional Contacts */}
+              {customer.contacts && customer.contacts.length > 0 && (
+                <div className="lg:col-span-2 bg-white rounded-lg shadow p-4">
+                  <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                    <FaUsers className="w-5 h-5 mr-2" />
+                    Diğer İletişim Kişileri
+                  </h3>
 
-              <div className="space-y-3">
-                <div className="p-4 bg-gray-50 rounded-lg">
-                  <div className="space-y-2">
-                    <p className="font-medium text-gray-900">
-                      {customer.address?.street}
-                    </p>
-                    <p className="text-gray-600">{customer.address?.city}</p>
-                    <p className="text-gray-600">
-                      {customer.address?.state} {customer.address?.postalCode}
-                    </p>
-                    <p className="text-gray-600 font-medium">
-                      {customer.address?.country}
-                    </p>
-                  </div>
-                </div>
-
-                {customer.website && (
-                  <div className="flex items-center p-2 bg-gray-50 rounded-lg">
-                    <FaGlobe className="w-5 h-5 text-gray-400 mr-3" />
-                    <div>
-                      <p className="text-sm text-gray-600">Website</p>
-                      <a
-                        href={customer.website}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-blue-600 hover:text-blue-800 font-medium"
-                      >
-                        {customer.website}
-                      </a>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Additional Contacts */}
-            {customer.contacts && customer.contacts.length > 0 && (
-              <div className="lg:col-span-2 bg-white rounded-lg shadow p-4">
-                <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                  <FaUsers className="w-5 h-5 mr-2" />
-                  Diğer İletişim Kişileri
-                </h3>
-
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                  {customer.contacts.map((contact, index) => (
-                    <div
-                      key={index}
-                      className="p-3 border border-gray-200 rounded-lg"
-                    >
-                      <div className="flex items-start space-x-3">
-                        <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
-                          <FaUser className="w-5 h-5 text-gray-500" />
-                        </div>
-                        <div className="flex-1">
-                          <h4 className="font-medium text-gray-900">
-                            {contact.fullName}
-                          </h4>
-                          <p className="text-sm text-gray-600 mb-2">
-                            {contact.title || "Pozisyon belirtilmemiş"}
-                          </p>
-                          <div className="space-y-1">
-                            <div className="flex items-center text-sm text-gray-600">
-                              <FaEnvelope className="w-3 h-3 mr-2" />
-                              <a
-                                href={`mailto:${contact.email}`}
-                                className="text-blue-600 hover:text-blue-800"
-                              >
-                                {contact.email}
-                              </a>
-                            </div>
-                            {contact.phone && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    {customer.contacts.map((contact, index) => (
+                      <div key={index} className="p-3 border border-gray-200 rounded-lg">
+                        <div className="flex items-start space-x-3">
+                          <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
+                            <FaUser className="w-5 h-5 text-gray-500" />
+                          </div>
+                          <div className="flex-1">
+                            <h4 className="font-medium text-gray-900">{contact.fullName}</h4>
+                            <p className="text-sm text-gray-600 mb-2">
+                              {contact.title || 'Pozisyon belirtilmemiş'}
+                            </p>
+                            <div className="space-y-1">
                               <div className="flex items-center text-sm text-gray-600">
-                                <FaPhone className="w-3 h-3 mr-2" />
+                                <FaEnvelope className="w-3 h-3 mr-2" />
                                 <a
-                                  href={`tel:${contact.phone}`}
+                                  href={`mailto:${contact.email}`}
                                   className="text-blue-600 hover:text-blue-800"
                                 >
-                                  {contact.phone}
+                                  {contact.email}
                                 </a>
                               </div>
-                            )}
+                              {contact.phone && (
+                                <div className="flex items-center text-sm text-gray-600">
+                                  <FaPhone className="w-3 h-3 mr-2" />
+                                  <a
+                                    href={`tel:${contact.phone}`}
+                                    className="text-blue-600 hover:text-blue-800"
+                                  >
+                                    {contact.phone}
+                                  </a>
+                                </div>
+                              )}
+                            </div>
                           </div>
                         </div>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {activeTab === "business" && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            {/* Company Information */}
-            <div className="bg-white rounded-lg shadow p-4">
-              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                <FaBuilding className="w-5 h-5 mr-2" />
-                Şirket Bilgileri
-              </h3>
-
-              <div className="space-y-3">
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Şirket Adı
-                    </label>
-                    <p className="text-gray-900 font-medium">{customer.name}</p>
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Müşteri Kodu
-                    </label>
-                    <p className="text-gray-900 font-medium">{customer.code}</p>
+                    ))}
                   </div>
                 </div>
-
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Sektör
-                    </label>
-                    <p className="text-gray-900">
-                      {customer.industry || "Belirtilmemiş"}
-                    </p>
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Müşteri Tipi
-                    </label>
-                    <p className="text-gray-900">{customer.customerType}</p>
-                  </div>
-                </div>
-
-                {customer.taxNumber && (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Vergi Numarası
-                    </label>
-                    <p className="text-gray-900 font-mono">
-                      {customer.taxNumber}
-                    </p>
-                  </div>
-                )}
-
-                {customer.registrationNumber && (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Sicil Numarası
-                    </label>
-                    <p className="text-gray-900 font-mono">
-                      {customer.registrationNumber}
-                    </p>
-                  </div>
-                )}
-              </div>
+              )}
             </div>
+          )}
 
-            {/* Relationship Information */}
-            <div className="bg-white rounded-lg shadow p-4">
-              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                <FaHandshake className="w-5 h-5 mr-2" />
-                İlişki Bilgileri
-              </h3>
+          {activeTab === 'business' && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              {/* Company Information */}
+              <div className="bg-white rounded-lg shadow p-4">
+                <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                  <FaBuilding className="w-5 h-5 mr-2" />
+                  Şirket Bilgileri
+                </h3>
 
-              <div className="space-y-3">
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Müşteri Durumu
-                    </label>
-                    <span
-                      className={classNames(
-                        "inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium border",
-                        getBusinessPartyStatusColor(
-                          customer.status || BusinessPartyStatusEnum.Active
-                        )
-                      )}
-                    >
-                      {getBusinessPartyStatusName(
-                        customer.status || BusinessPartyStatusEnum.Active
-                      )}
-                    </span>
+                <div className="space-y-3">
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Şirket Adı
+                      </label>
+                      <p className="text-gray-900 font-medium">{customer.name}</p>
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Müşteri Kodu
+                      </label>
+                      <p className="text-gray-900 font-medium">{customer.code}</p>
+                    </div>
                   </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Müşteri Segmenti
-                    </label>
-                    <p className="text-gray-900">
-                      {getCustomerSegmentName(
-                        customer.customerSegment || CustomerSegmentEnum.Startup
-                      )}
-                    </p>
-                  </div>
-                </div>
 
-                {customer.assignedSalesRep && (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Atanmış Satış Temsilcisi
-                    </label>
-                    <p className="text-gray-900">{customer.assignedSalesRep}</p>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">Sektör</label>
+                      <p className="text-gray-900">{customer.industry || 'Belirtilmemiş'}</p>
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Müşteri Tipi
+                      </label>
+                      <p className="text-gray-900">{customer.customerType}</p>
+                    </div>
                   </div>
-                )}
 
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Kayıt Tarihi
-                    </label>
-                    <p className="text-gray-900">
-                      {dayjs(customer.creationTime).format("DD.MM.YYYY")}
-                    </p>
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Son Güncelleme
-                    </label>
-                    <p className="text-gray-900">
-                      {dayjs(customer.lastModificationTime).format(
-                        "DD.MM.YYYY"
-                      )}
-                    </p>
-                  </div>
+                  {customer.taxNumber && (
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Vergi Numarası
+                      </label>
+                      <p className="text-gray-900 font-mono">{customer.taxNumber}</p>
+                    </div>
+                  )}
+
+                  {customer.registrationNumber && (
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Sicil Numarası
+                      </label>
+                      <p className="text-gray-900 font-mono">{customer.registrationNumber}</p>
+                    </div>
+                  )}
                 </div>
               </div>
-            </div>
-          </div>
-        )}
 
-        {activeTab === "financial" && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            {/* Financial Overview */}
-            <div className="bg-white rounded-lg shadow p-4">
-              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                <FaDollarSign className="w-5 h-5 mr-2" />
-                Finansal Durum
-              </h3>
+              {/* Relationship Information */}
+              <div className="bg-white rounded-lg shadow p-4">
+                <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                  <FaHandshake className="w-5 h-5 mr-2" />
+                  İlişki Bilgileri
+                </h3>
 
-              <div className="space-y-4">
-                <div className="grid grid-cols-1 gap-3">
-                  <div className="p-4 bg-green-50 rounded-lg">
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="text-sm font-medium text-green-800">
-                        Toplam Ciro
-                      </span>
-                      <FaArrowUp className="w-4 h-4 text-green-600" />
-                    </div>
-                    <div className="text-2xl font-bold text-green-900">
-                      ₺{customer.totalRevenue?.toLocaleString()}
-                    </div>
-                  </div>
-
-                  <div className="p-4 bg-blue-50 rounded-lg">
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="text-sm font-medium text-blue-800">
-                        Ortalama Sipariş
-                      </span>
-                      <FaShoppingCart className="w-4 h-4 text-blue-600" />
-                    </div>
-                    <div className="text-2xl font-bold text-blue-900">
-                      ₺{customer.averageOrderValue?.toLocaleString()}
-                    </div>
-                  </div>
-
-                  <div className="p-4 bg-purple-50 rounded-lg">
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="text-sm font-medium text-purple-800">
-                        Yaşam Boyu Değer
-                      </span>
-                      <FaStar className="w-4 h-4 text-purple-600" />
-                    </div>
-                    <div className="text-2xl font-bold text-purple-900">
-                      ₺{((customer.lifetimeValue ?? 0) / 1000000).toFixed(1)}M
-                    </div>
-                  </div>
-                </div>
-
-                <div>
-                  <div className="flex justify-between items-center mb-2">
-                    <span className="text-sm font-medium text-gray-700">
-                      Kredi Kullanımı
-                    </span>
-                    <span className="text-sm text-gray-600">
-                      {Math.round(
-                        ((customer.totalRevenue ?? 0) / customer.creditLimit) *
-                          100
-                      )}
-                      %
-                    </span>
-                  </div>
-                  <div className="w-full bg-gray-200 rounded-full h-2">
-                    <div
-                      className={classNames(
-                        "h-3 rounded-full",
-                        ((customer.totalRevenue ?? 0) / customer.creditLimit) *
-                          100 >
-                          80
-                          ? "bg-red-500"
-                          : ((customer.totalRevenue ?? 0) /
-                              customer.creditLimit) *
-                              100 >
-                            60
-                          ? "bg-yellow-500"
-                          : "bg-green-500"
-                      )}
-                      style={{
-                        width: `${Math.min(
-                          ((customer.totalRevenue ?? 0) /
-                            customer.creditLimit) *
-                            100,
-                          100
-                        )}%`,
-                      }}
-                    ></div>
-                  </div>
-                  <div className="flex justify-between text-xs text-gray-600 mt-1">
-                    <span>₺0</span>
-                    <span>₺{customer.creditLimit.toLocaleString()}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Payment Information */}
-            <div className="bg-white rounded-lg shadow p-4">
-              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                <FaCreditCard className="w-5 h-5 mr-2" />
-                Ödeme Bilgileri
-              </h3>
-
-              <div className="space-y-3">
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Kredi Limiti
-                    </label>
-                    <p className="text-xl font-bold text-gray-900">
-                      ₺{customer.creditLimit.toLocaleString()}
-                    </p>
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Para Birimi
-                    </label>
-                    <p className="text-lg font-medium text-gray-900">
-                      {customer.currency}
-                    </p>
-                  </div>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-600 mb-1">
-                    Ödeme Koşulları
-                  </label>
-                  <p className="text-gray-900">{customer.paymentTerms}</p>
-                </div>
-
-                {customer.lastOrderDate && (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Son Sipariş Tarihi
-                    </label>
-                    <p className="text-gray-900">
-                      {dayjs(customer.lastOrderDate).format("DD.MM.YYYY")}
-                    </p>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {activeTab === "history" && (
-          <div className="space-y-4">
-            <div className="bg-white rounded-lg shadow p-4">
-              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-                <FaHistory className="w-5 h-5 mr-2" />
-                Müşteri Geçmişi
-              </h3>
-
-              <div className="space-y-3">
-                <div className="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg">
-                  <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
-                  <div className="flex-1">
-                    <div className="flex items-center justify-between">
-                      <h4 className="font-medium text-gray-900">
-                        Müşteri Kaydı Oluşturuldu
-                      </h4>
-                      <span className="text-sm text-gray-500">
-                        {dayjs(customer.creationTime).format(
-                          "DD.MM.YYYY HH:mm"
+                <div className="space-y-3">
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Müşteri Durumu
+                      </label>
+                      <span
+                        className={classNames(
+                          'inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium border',
+                          getBusinessPartyStatusColor(
+                            customer.status || BusinessPartyStatusEnum.Active,
+                          ),
+                        )}
+                      >
+                        {getBusinessPartyStatusName(
+                          customer.status || BusinessPartyStatusEnum.Active,
                         )}
                       </span>
                     </div>
-                  </div>
-                </div>
-
-                <div className="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg">
-                  <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
-                  <div className="flex-1">
-                    <div className="flex items-center justify-between">
-                      <h4 className="font-medium text-gray-900">
-                        Son Güncelleme
-                      </h4>
-                      <span className="text-sm text-gray-500">
-                        {dayjs(customer.lastModificationTime).format(
-                          "DD.MM.YYYY HH:mm"
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Müşteri Segmenti
+                      </label>
+                      <p className="text-gray-900">
+                        {getCustomerSegmentName(
+                          customer.customerSegment || CustomerSegmentEnum.Startup,
                         )}
-                      </span>
-                    </div>
-                    <p className="text-sm text-gray-600 mt-1">
-                      Müşteri bilgileri güncellendi.
-                    </p>
-                  </div>
-                </div>
-
-                {customer.lastOrderDate && (
-                  <div className="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg">
-                    <div className="w-2 h-2 bg-purple-500 rounded-full mt-2"></div>
-                    <div className="flex-1">
-                      <div className="flex items-center justify-between">
-                        <h4 className="font-medium text-gray-900">
-                          Son Sipariş
-                        </h4>
-                        <span className="text-sm text-gray-500">
-                          {dayjs(customer.lastOrderDate).format("DD.MM.YYYY")}
-                        </span>
-                      </div>
-                      <p className="text-sm text-gray-600 mt-1">
-                        Son sipariş tarihi:{" "}
-                        {dayjs(customer.lastOrderDate).format("DD.MM.YYYY")}
                       </p>
                     </div>
                   </div>
-                )}
+
+                  {customer.assignedSalesRep && (
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Atanmış Satış Temsilcisi
+                      </label>
+                      <p className="text-gray-900">{customer.assignedSalesRep}</p>
+                    </div>
+                  )}
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Kayıt Tarihi
+                      </label>
+                      <p className="text-gray-900">
+                        {dayjs(customer.creationTime).format('DD.MM.YYYY')}
+                      </p>
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Son Güncelleme
+                      </label>
+                      <p className="text-gray-900">
+                        {dayjs(customer.lastModificationTime).format('DD.MM.YYYY')}
+                      </p>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
+          )}
 
-export default CustomerView;
+          {activeTab === 'financial' && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              {/* Financial Overview */}
+              <div className="bg-white rounded-lg shadow p-4">
+                <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                  <FaDollarSign className="w-5 h-5 mr-2" />
+                  Finansal Durum
+                </h3>
+
+                <div className="space-y-4">
+                  <div className="grid grid-cols-1 gap-3">
+                    <div className="p-4 bg-green-50 rounded-lg">
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm font-medium text-green-800">Toplam Ciro</span>
+                        <FaArrowUp className="w-4 h-4 text-green-600" />
+                      </div>
+                      <div className="text-2xl font-bold text-green-900">
+                        ₺{customer.totalRevenue?.toLocaleString()}
+                      </div>
+                    </div>
+
+                    <div className="p-4 bg-blue-50 rounded-lg">
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm font-medium text-blue-800">Ortalama Sipariş</span>
+                        <FaShoppingCart className="w-4 h-4 text-blue-600" />
+                      </div>
+                      <div className="text-2xl font-bold text-blue-900">
+                        ₺{customer.averageOrderValue?.toLocaleString()}
+                      </div>
+                    </div>
+
+                    <div className="p-4 bg-purple-50 rounded-lg">
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm font-medium text-purple-800">
+                          Yaşam Boyu Değer
+                        </span>
+                        <FaStar className="w-4 h-4 text-purple-600" />
+                      </div>
+                      <div className="text-2xl font-bold text-purple-900">
+                        ₺{((customer.lifetimeValue ?? 0) / 1000000).toFixed(1)}M
+                      </div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="flex justify-between items-center mb-2">
+                      <span className="text-sm font-medium text-gray-700">Kredi Kullanımı</span>
+                      <span className="text-sm text-gray-600">
+                        {Math.round(((customer.totalRevenue ?? 0) / customer.creditLimit) * 100)}%
+                      </span>
+                    </div>
+                    <div className="w-full bg-gray-200 rounded-full h-2">
+                      <div
+                        className={classNames(
+                          'h-3 rounded-full',
+                          ((customer.totalRevenue ?? 0) / customer.creditLimit) * 100 > 80
+                            ? 'bg-red-500'
+                            : ((customer.totalRevenue ?? 0) / customer.creditLimit) * 100 > 60
+                              ? 'bg-yellow-500'
+                              : 'bg-green-500',
+                        )}
+                        style={{
+                          width: `${Math.min(
+                            ((customer.totalRevenue ?? 0) / customer.creditLimit) * 100,
+                            100,
+                          )}%`,
+                        }}
+                      ></div>
+                    </div>
+                    <div className="flex justify-between text-xs text-gray-600 mt-1">
+                      <span>₺0</span>
+                      <span>₺{customer.creditLimit.toLocaleString()}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Payment Information */}
+              <div className="bg-white rounded-lg shadow p-4">
+                <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                  <FaCreditCard className="w-5 h-5 mr-2" />
+                  Ödeme Bilgileri
+                </h3>
+
+                <div className="space-y-3">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Kredi Limiti
+                      </label>
+                      <p className="text-xl font-bold text-gray-900">
+                        ₺{customer.creditLimit.toLocaleString()}
+                      </p>
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Para Birimi
+                      </label>
+                      <p className="text-lg font-medium text-gray-900">{customer.currency}</p>
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-600 mb-1">
+                      Ödeme Koşulları
+                    </label>
+                    <p className="text-gray-900">{customer.paymentTerms}</p>
+                  </div>
+
+                  {customer.lastOrderDate && (
+                    <div>
+                      <label className="block text-sm font-medium text-gray-600 mb-1">
+                        Son Sipariş Tarihi
+                      </label>
+                      <p className="text-gray-900">
+                        {dayjs(customer.lastOrderDate).format('DD.MM.YYYY')}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'history' && (
+            <div className="space-y-4">
+              <div className="bg-white rounded-lg shadow p-4">
+                <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                  <FaHistory className="w-5 h-5 mr-2" />
+                  Müşteri Geçmişi
+                </h3>
+
+                <div className="space-y-3">
+                  <div className="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg">
+                    <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <h4 className="font-medium text-gray-900">Müşteri Kaydı Oluşturuldu</h4>
+                        <span className="text-sm text-gray-500">
+                          {dayjs(customer.creationTime).format('DD.MM.YYYY HH:mm')}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg">
+                    <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <h4 className="font-medium text-gray-900">Son Güncelleme</h4>
+                        <span className="text-sm text-gray-500">
+                          {dayjs(customer.lastModificationTime).format('DD.MM.YYYY HH:mm')}
+                        </span>
+                      </div>
+                      <p className="text-sm text-gray-600 mt-1">Müşteri bilgileri güncellendi.</p>
+                    </div>
+                  </div>
+
+                  {customer.lastOrderDate && (
+                    <div className="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg">
+                      <div className="w-2 h-2 bg-purple-500 rounded-full mt-2"></div>
+                      <div className="flex-1">
+                        <div className="flex items-center justify-between">
+                          <h4 className="font-medium text-gray-900">Son Sipariş</h4>
+                          <span className="text-sm text-gray-500">
+                            {dayjs(customer.lastOrderDate).format('DD.MM.YYYY')}
+                          </span>
+                        </div>
+                        <p className="text-sm text-gray-600 mt-1">
+                          Son sipariş tarihi: {dayjs(customer.lastOrderDate).format('DD.MM.YYYY')}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </Container>
+  )
+}
+
+export default CustomerView
diff --git a/ui/src/views/crm/components/LossReasonCardView.tsx b/ui/src/views/crm/components/LossReasonCardView.tsx
index 1ed24b3c..1c4a1cbd 100644
--- a/ui/src/views/crm/components/LossReasonCardView.tsx
+++ b/ui/src/views/crm/components/LossReasonCardView.tsx
@@ -1,17 +1,14 @@
-import React from "react";
-import { FaEdit, FaTrash, FaEye, FaBullseye } from "react-icons/fa";
-import { CrmLostReason, CrmOpportunity } from "../../../types/crm";
-import {
-  getLostReasonCategoryColor,
-  getLostReasonCategoryText,
-} from "../../../utils/erp";
+import React from 'react'
+import { FaEdit, FaTrash, FaEye, FaBullseye } from 'react-icons/fa'
+import { CrmLostReason, CrmOpportunity } from '../../../types/crm'
+import { getLostReasonCategoryColor, getLostReasonCategoryText } from '../../../utils/erp'
 
 interface LossReasonCardViewProps {
-  lossReasons: CrmLostReason[];
-  opportunities: CrmOpportunity[];
-  onEdit: (reason: CrmLostReason) => void;
-  onDelete: (id: string) => void;
-  onView: (reason: CrmLostReason) => void;
+  lossReasons: CrmLostReason[]
+  opportunities: CrmOpportunity[]
+  onEdit: (reason: CrmLostReason) => void
+  onDelete: (id: string) => void
+  onView: (reason: CrmLostReason) => void
 }
 
 const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
@@ -22,15 +19,14 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
   onView,
 }) => {
   const getUsageCount = (reasonId: string) => {
-    return opportunities.filter((opp) => opp.lostReason?.id === reasonId)
-      .length;
-  };
+    return opportunities.filter((opp) => opp.lostReason?.id === reasonId).length
+  }
 
   const getLostValue = (reasonId: string) => {
     return opportunities
       .filter((opp) => opp.lostReason?.id === reasonId)
-      .reduce((sum, opp) => sum + opp.estimatedValue, 0);
-  };
+      .reduce((sum, opp) => sum + opp.estimatedValue, 0)
+  }
 
   if (lossReasons.length === 0) {
     return (
@@ -38,21 +34,17 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
         <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
           <FaBullseye className="w-8 h-8 text-gray-400" />
         </div>
-        <h3 className="text-lg font-medium text-gray-900 mb-2">
-          Kayıp nedeni bulunamadı
-        </h3>
-        <p className="text-gray-500">
-          Arama kriterlerinizi değiştirmeyi deneyin.
-        </p>
+        <h3 className="text-lg font-medium text-gray-900 mb-2">Kayıp nedeni bulunamadı</h3>
+        <p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
       </div>
-    );
+    )
   }
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
       {lossReasons.map((reason) => {
-        const usageCount = getUsageCount(reason.id);
-        const lostValue = getLostValue(reason.id);
+        const usageCount = getUsageCount(reason.id)
+        const lostValue = getLostValue(reason.id)
 
         return (
           <div
@@ -63,21 +55,17 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
             <div className="p-3 border-b">
               <div className="flex items-start justify-between mb-1">
                 <div className="flex-1">
-                  <h3 className="font-semibold text-gray-900 text-sm">
-                    {reason.name}
-                  </h3>
+                  <h3 className="font-semibold text-gray-900 text-sm">{reason.name}</h3>
                   <div className="flex items-center gap-2">
-                    <span className="text-xs text-gray-500 font-mono">
-                      {reason.code}
-                    </span>
+                    <span className="text-xs text-gray-500 font-mono">{reason.code}</span>
                     <span
                       className={`px-2 py-1 text-xs font-medium rounded-full ${
                         reason.isActive
-                          ? "bg-green-100 text-green-800"
-                          : "bg-gray-100 text-gray-800"
+                          ? 'bg-green-100 text-green-800'
+                          : 'bg-gray-100 text-gray-800'
                       }`}
                     >
-                      {reason.isActive ? "Aktif" : "Pasif"}
+                      {reason.isActive ? 'Aktif' : 'Pasif'}
                     </span>
                   </div>
                 </div>
@@ -86,7 +74,7 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
               {/* Category */}
               <span
                 className={`inline-block px-2 py-1 text-xs font-medium rounded-full ${getLostReasonCategoryColor(
-                  reason.category
+                  reason.category,
                 )}`}
               >
                 {getLostReasonCategoryText(reason.category)}
@@ -100,9 +88,9 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
                 <p
                   className="text-xs text-gray-600 overflow-hidden flex-grow"
                   style={{
-                    display: "-webkit-box",
+                    display: '-webkit-box',
                     WebkitLineClamp: 2,
-                    WebkitBoxOrient: "vertical",
+                    WebkitBoxOrient: 'vertical',
                   }}
                 >
                   {reason.description}
@@ -116,9 +104,7 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
                     <FaBullseye className="w-3 h-3 text-gray-400" />
                     <span className="text-xs text-gray-500">Kullanım</span>
                   </div>
-                  <div className="text-sm font-bold text-gray-900">
-                    {usageCount}
-                  </div>
+                  <div className="text-sm font-bold text-gray-900">{usageCount}</div>
                 </div>
                 <div className="text-center">
                   <div className="text-xs text-gray-500 mb-1">Kayıp Değer</div>
@@ -154,10 +140,10 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
               </button>
             </div>
           </div>
-        );
+        )
       })}
     </div>
-  );
-};
+  )
+}
 
-export default LossReasonCardView;
+export default LossReasonCardView
diff --git a/ui/src/views/crm/components/LossReasonModal.tsx b/ui/src/views/crm/components/LossReasonModal.tsx
index 3de0adbf..2e8e5882 100644
--- a/ui/src/views/crm/components/LossReasonModal.tsx
+++ b/ui/src/views/crm/components/LossReasonModal.tsx
@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from "react";
-import { FaTimes, FaSave } from "react-icons/fa";
-import { CrmLostReason, LostReasonCategoryEnum } from "../../../types/crm";
-import { getLostReasonCategoryText } from "../../../utils/erp";
+import React, { useState, useEffect } from 'react'
+import { FaTimes, FaSave } from 'react-icons/fa'
+import { CrmLostReason, LostReasonCategoryEnum } from '../../../types/crm'
+import { getLostReasonCategoryText } from '../../../utils/erp'
 
 interface LossReasonModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSave: (reason: Partial<CrmLostReason>) => void;
-  editingReason?: CrmLostReason | null;
-  mode: "add" | "edit" | "view";
+  isOpen: boolean
+  onClose: () => void
+  onSave: (reason: Partial<CrmLostReason>) => void
+  editingReason?: CrmLostReason | null
+  mode: 'add' | 'edit' | 'view'
 }
 
 const LossReasonModal: React.FC<LossReasonModalProps> = ({
@@ -19,102 +19,97 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
   mode,
 }) => {
   const [formData, setFormData] = useState<Partial<CrmLostReason>>({
-    code: "",
-    name: "",
-    description: "",
+    code: '',
+    name: '',
+    description: '',
     category: LostReasonCategoryEnum.Price,
     isActive: true,
-  });
+  })
 
-  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  const [errors, setErrors] = useState<{ [key: string]: string }>({})
 
   useEffect(() => {
     if (editingReason) {
-      setFormData(editingReason);
+      setFormData(editingReason)
     } else {
       setFormData({
-        code: "",
-        name: "",
-        description: "",
+        code: '',
+        name: '',
+        description: '',
         category: LostReasonCategoryEnum.Price,
         isActive: true,
-      });
+      })
     }
-    setErrors({});
-  }, [editingReason, isOpen]);
+    setErrors({})
+  }, [editingReason, isOpen])
 
   const validateForm = () => {
-    const newErrors: { [key: string]: string } = {};
+    const newErrors: { [key: string]: string } = {}
 
     if (!formData.code?.trim()) {
-      newErrors.code = "Kod zorunludur";
+      newErrors.code = 'Kod zorunludur'
     }
 
     if (!formData.name?.trim()) {
-      newErrors.name = "Kayıp nedeni adı zorunludur";
+      newErrors.name = 'Kayıp nedeni adı zorunludur'
     }
 
     if (!formData.category) {
-      newErrors.category = "Kategori seçimi zorunludur";
+      newErrors.category = 'Kategori seçimi zorunludur'
     }
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
-    if (mode === "view") {
-      onClose();
-      return;
+    if (mode === 'view') {
+      onClose()
+      return
     }
 
     if (validateForm()) {
-      onSave(formData);
-      onClose();
+      onSave(formData)
+      onClose()
     }
-  };
+  }
 
   const handleInputChange = (
     field: keyof CrmLostReason,
-    value: string | boolean | LostReasonCategoryEnum
+    value: string | boolean | LostReasonCategoryEnum,
   ) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
+    setFormData((prev) => ({ ...prev, [field]: value }))
     if (errors[field]) {
-      setErrors((prev) => ({ ...prev, [field]: "" }));
+      setErrors((prev) => ({ ...prev, [field]: '' }))
     }
-  };
+  }
 
-  if (!isOpen) return null;
+  if (!isOpen) return null
 
   const getModalTitle = () => {
     switch (mode) {
-      case "add":
-        return "Yeni Kayıp Nedeni";
-      case "edit":
-        return "Kayıp Nedeni Düzenle";
-      case "view":
-        return "Kayıp Nedeni Detayları";
+      case 'add':
+        return 'Yeni Kayıp Nedeni'
+      case 'edit':
+        return 'Kayıp Nedeni Düzenle'
+      case 'view':
+        return 'Kayıp Nedeni Detayları'
       default:
-        return "";
+        return ''
     }
-  };
+  }
 
-  const isReadOnly = mode === "view";
+  const isReadOnly = mode === 'view'
 
   return (
     <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 w-full max-w-md mx-4">
         {/* Header */}
         <div className="flex items-center justify-between p-3 border-b">
-          <h3 className="text-sm font-semibold text-gray-900">
-            {getModalTitle()}
-          </h3>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600"
-          >
+          <h3 className="text-sm font-semibold text-gray-900">{getModalTitle()}</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
             <FaTimes className="w-5 h-5" />
           </button>
         </div>
@@ -124,60 +119,47 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
           <div className="space-y-2">
             {/* Code */}
             <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Kod *
-              </label>
+              <label className="block text-xs font-medium text-gray-700 mb-1">Kod *</label>
               <input
                 type="text"
-                value={formData.code || ""}
-                onChange={(e) => handleInputChange("code", e.target.value)}
+                value={formData.code || ''}
+                onChange={(e) => handleInputChange('code', e.target.value)}
                 className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                  errors.code ? "border-red-500" : "border-gray-300"
-                } ${isReadOnly ? "bg-gray-100" : ""}`}
+                  errors.code ? 'border-red-500' : 'border-gray-300'
+                } ${isReadOnly ? 'bg-gray-100' : ''}`}
                 placeholder="Örn: LR001"
                 readOnly={isReadOnly}
               />
-              {errors.code && (
-                <p className="text-red-500 text-sm mt-1">{errors.code}</p>
-              )}
+              {errors.code && <p className="text-red-500 text-sm mt-1">{errors.code}</p>}
             </div>
 
             {/* Name */}
             <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Kayıp Nedeni *
-              </label>
+              <label className="block text-xs font-medium text-gray-700 mb-1">Kayıp Nedeni *</label>
               <input
                 type="text"
-                value={formData.name || ""}
-                onChange={(e) => handleInputChange("name", e.target.value)}
+                value={formData.name || ''}
+                onChange={(e) => handleInputChange('name', e.target.value)}
                 className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                  errors.name ? "border-red-500" : "border-gray-300"
-                } ${isReadOnly ? "bg-gray-100" : ""}`}
+                  errors.name ? 'border-red-500' : 'border-gray-300'
+                } ${isReadOnly ? 'bg-gray-100' : ''}`}
                 placeholder="Kayıp nedeni adını girin"
                 readOnly={isReadOnly}
               />
-              {errors.name && (
-                <p className="text-red-500 text-sm mt-1">{errors.name}</p>
-              )}
+              {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
             </div>
 
             {/* Category */}
             <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Kategori *
-              </label>
+              <label className="block text-xs font-medium text-gray-700 mb-1">Kategori *</label>
               <select
-                value={formData.category || ""}
+                value={formData.category || ''}
                 onChange={(e) =>
-                  handleInputChange(
-                    "category",
-                    e.target.value as LostReasonCategoryEnum
-                  )
+                  handleInputChange('category', e.target.value as LostReasonCategoryEnum)
                 }
                 className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                  errors.category ? "border-red-500" : "border-gray-300"
-                } ${isReadOnly ? "bg-gray-100" : ""}`}
+                  errors.category ? 'border-red-500' : 'border-gray-300'
+                } ${isReadOnly ? 'bg-gray-100' : ''}`}
                 disabled={isReadOnly}
               >
                 {Object.values(LostReasonCategoryEnum).map((category) => (
@@ -186,24 +168,18 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
                   </option>
                 ))}
               </select>
-              {errors.category && (
-                <p className="text-red-500 text-sm mt-1">{errors.category}</p>
-              )}
+              {errors.category && <p className="text-red-500 text-sm mt-1">{errors.category}</p>}
             </div>
 
             {/* Description */}
             <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Açıklama
-              </label>
+              <label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
               <textarea
-                value={formData.description || ""}
-                onChange={(e) =>
-                  handleInputChange("description", e.target.value)
-                }
+                value={formData.description || ''}
+                onChange={(e) => handleInputChange('description', e.target.value)}
                 rows={2}
                 className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                  isReadOnly ? "bg-gray-100" : "border-gray-300"
+                  isReadOnly ? 'bg-gray-100' : 'border-gray-300'
                 }`}
                 placeholder="Kayıp nedeni hakkında detaylı açıklama"
                 readOnly={isReadOnly}
@@ -216,16 +192,11 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
                 type="checkbox"
                 id="isActive"
                 checked={formData.isActive || false}
-                onChange={(e) =>
-                  handleInputChange("isActive", e.target.checked)
-                }
+                onChange={(e) => handleInputChange('isActive', e.target.checked)}
                 className="mr-2"
                 disabled={isReadOnly}
               />
-              <label
-                htmlFor="isActive"
-                className="text-sm font-medium text-gray-700"
-              >
+              <label htmlFor="isActive" className="text-sm font-medium text-gray-700">
                 Aktif
               </label>
             </div>
@@ -238,9 +209,9 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
               onClick={onClose}
               className="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
             >
-              {mode === "view" ? "Kapat" : "İptal"}
+              {mode === 'view' ? 'Kapat' : 'İptal'}
             </button>
-            {mode !== "view" && (
+            {mode !== 'view' && (
               <button
                 type="submit"
                 className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
@@ -253,7 +224,7 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
         </form>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default LossReasonModal;
+export default LossReasonModal
diff --git a/ui/src/views/crm/components/LossReasons.tsx b/ui/src/views/crm/components/LossReasons.tsx
index c011557e..c73fcb92 100644
--- a/ui/src/views/crm/components/LossReasons.tsx
+++ b/ui/src/views/crm/components/LossReasons.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaPlus,
   FaEdit,
@@ -9,104 +9,86 @@ import {
   FaTh,
   FaList,
   FaTimes,
-} from "react-icons/fa";
-import {
-  CrmLostReason,
-  LostReasonCategoryEnum,
-  CrmOpportunity,
-} from "../../../types/crm";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import LossReasonModal from "./LossReasonModal";
-import LossReasonCardView from "./LossReasonCardView";
-import { mockLossReasons } from "../../../mocks/mockLossReasons";
-import { mockOpportunities } from "../../../mocks/mockOpportunities";
-import Widget from "../../../components/common/Widget";
-import {
-  getLostReasonCategoryColor,
-  getLostReasonCategoryText,
-} from "../../../utils/erp";
+} from 'react-icons/fa'
+import { CrmLostReason, LostReasonCategoryEnum, CrmOpportunity } from '../../../types/crm'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import LossReasonModal from './LossReasonModal'
+import LossReasonCardView from './LossReasonCardView'
+import { mockLossReasons } from '../../../mocks/mockLossReasons'
+import { mockOpportunities } from '../../../mocks/mockOpportunities'
+import Widget from '../../../components/common/Widget'
+import { getLostReasonCategoryColor, getLostReasonCategoryText } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const LossReasons: React.FC = () => {
-  const [lossReasons, setLossReasons] =
-    useState<CrmLostReason[]>(mockLossReasons);
-  const [opportunities] = useState<CrmOpportunity[]>(mockOpportunities);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState<
-    LostReasonCategoryEnum | "all"
-  >("all");
-  const [viewMode, setViewMode] = useState<"table" | "card">("table");
+  const [lossReasons, setLossReasons] = useState<CrmLostReason[]>(mockLossReasons)
+  const [opportunities] = useState<CrmOpportunity[]>(mockOpportunities)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState<LostReasonCategoryEnum | 'all'>('all')
+  const [viewMode, setViewMode] = useState<'table' | 'card'>('table')
 
   // Modal states
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalMode, setModalMode] = useState<"add" | "edit" | "view">("add");
-  const [editingReason, setEditingReason] = useState<CrmLostReason | null>(
-    null
-  );
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalMode, setModalMode] = useState<'add' | 'edit' | 'view'>('add')
+  const [editingReason, setEditingReason] = useState<CrmLostReason | null>(null)
 
   // Delete modal states
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [reasonToDelete, setReasonToDelete] = useState<CrmLostReason | null>(
-    null
-  );
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+  const [reasonToDelete, setReasonToDelete] = useState<CrmLostReason | null>(null)
 
   const handleAdd = () => {
-    setModalMode("add");
-    setEditingReason(null);
-    setIsModalOpen(true);
-  };
+    setModalMode('add')
+    setEditingReason(null)
+    setIsModalOpen(true)
+  }
 
   const handleEdit = (reason: CrmLostReason) => {
-    setModalMode("edit");
-    setEditingReason(reason);
-    setIsModalOpen(true);
-  };
+    setModalMode('edit')
+    setEditingReason(reason)
+    setIsModalOpen(true)
+  }
 
   const handleView = (reason: CrmLostReason) => {
-    setModalMode("view");
-    setEditingReason(reason);
-    setIsModalOpen(true);
-  };
+    setModalMode('view')
+    setEditingReason(reason)
+    setIsModalOpen(true)
+  }
 
   const handleDelete = (id: string) => {
-    const reason = lossReasons.find((r) => r.id === id);
+    const reason = lossReasons.find((r) => r.id === id)
     if (reason) {
-      setReasonToDelete(reason);
-      setIsDeleteModalOpen(true);
+      setReasonToDelete(reason)
+      setIsDeleteModalOpen(true)
     }
-  };
+  }
 
   const handleSave = (reasonData: Partial<CrmLostReason>) => {
-    if (modalMode === "add") {
+    if (modalMode === 'add') {
       const newReason: CrmLostReason = {
         id: Date.now().toString(),
-        code: reasonData.code || "",
-        name: reasonData.name || "",
-        description: reasonData.description || "",
+        code: reasonData.code || '',
+        name: reasonData.name || '',
+        description: reasonData.description || '',
         category: reasonData.category || LostReasonCategoryEnum.Price,
-        isActive:
-          reasonData.isActive !== undefined ? reasonData.isActive : true,
-      };
-      setLossReasons((prev) => [...prev, newReason]);
-    } else if (modalMode === "edit" && editingReason) {
+        isActive: reasonData.isActive !== undefined ? reasonData.isActive : true,
+      }
+      setLossReasons((prev) => [...prev, newReason])
+    } else if (modalMode === 'edit' && editingReason) {
       setLossReasons((prev) =>
         prev.map((reason) =>
-          reason.id === editingReason.id
-            ? ({ ...reason, ...reasonData } as CrmLostReason)
-            : reason
-        )
-      );
+          reason.id === editingReason.id ? ({ ...reason, ...reasonData } as CrmLostReason) : reason,
+        ),
+      )
     }
-  };
+  }
 
   const confirmDelete = () => {
     if (reasonToDelete) {
-      setLossReasons((prev) =>
-        prev.filter((reason) => reason.id !== reasonToDelete.id)
-      );
-      setIsDeleteModalOpen(false);
-      setReasonToDelete(null);
+      setLossReasons((prev) => prev.filter((reason) => reason.id !== reasonToDelete.id))
+      setIsDeleteModalOpen(false)
+      setReasonToDelete(null)
     }
-  };
+  }
 
   const filteredReasons = lossReasons.filter((reason) => {
     if (
@@ -114,26 +96,26 @@ const LossReasons: React.FC = () => {
       !reason.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
       !reason.code.toLowerCase().includes(searchTerm.toLowerCase())
     ) {
-      return false;
+      return false
     }
-    if (selectedCategory !== "all" && reason.category !== selectedCategory) {
-      return false;
+    if (selectedCategory !== 'all' && reason.category !== selectedCategory) {
+      return false
     }
-    return true;
-  });
+    return true
+  })
 
   const columns: Column<CrmLostReason>[] = [
     {
-      key: "code",
-      header: "Kod",
+      key: 'code',
+      header: 'Kod',
       sortable: true,
       render: (reason: CrmLostReason) => (
         <div className="font-medium text-gray-900">{reason.code}</div>
       ),
     },
     {
-      key: "name",
-      header: "Kayıp Nedeni",
+      key: 'name',
+      header: 'Kayıp Nedeni',
       sortable: true,
       render: (reason: CrmLostReason) => (
         <div>
@@ -143,12 +125,12 @@ const LossReasons: React.FC = () => {
       ),
     },
     {
-      key: "category",
-      header: "Kategori",
+      key: 'category',
+      header: 'Kategori',
       render: (reason: CrmLostReason) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getLostReasonCategoryColor(
-            reason.category
+            reason.category,
           )}`}
         >
           {getLostReasonCategoryText(reason.category)}
@@ -156,38 +138,34 @@ const LossReasons: React.FC = () => {
       ),
     },
     {
-      key: "usage",
-      header: "Kullanım",
+      key: 'usage',
+      header: 'Kullanım',
       render: (reason: CrmLostReason) => {
-        const usageCount = opportunities.filter(
-          (opp) => opp.lostReason?.id === reason.id
-        ).length;
+        const usageCount = opportunities.filter((opp) => opp.lostReason?.id === reason.id).length
         return (
           <div className="flex items-center gap-1">
             <FaBullseye className="w-4 h-4 text-gray-400" />
             <span>{usageCount} Fırsat</span>
           </div>
-        );
+        )
       },
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (reason: CrmLostReason) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${
-            reason.isActive
-              ? "bg-green-100 text-green-800"
-              : "bg-gray-100 text-gray-800"
+            reason.isActive ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
           }`}
         >
-          {reason.isActive ? "Aktif" : "Pasif"}
+          {reason.isActive ? 'Aktif' : 'Pasif'}
         </span>
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (reason: CrmLostReason) => (
         <div className="flex gap-2">
           <button
@@ -214,306 +192,280 @@ const LossReasons: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   // Calculate statistics
-  const totalReasons = lossReasons.length;
-  const activeReasons = lossReasons.filter((r) => r.isActive).length;
-  const categoryDistribution = Object.values(LostReasonCategoryEnum).map(
-    (category) => ({
-      category,
-      count: lossReasons.filter((r) => r.category === category).length,
-      usage: opportunities.filter(
-        (opp) =>
-          opp.lostReason &&
-          lossReasons.find(
-            (r) => r.id === opp.lostReason?.id && r.category === category
-          )
-      ).length,
-    })
-  );
+  const totalReasons = lossReasons.length
+  const activeReasons = lossReasons.filter((r) => r.isActive).length
+  const categoryDistribution = Object.values(LostReasonCategoryEnum).map((category) => ({
+    category,
+    count: lossReasons.filter((r) => r.category === category).length,
+    usage: opportunities.filter(
+      (opp) =>
+        opp.lostReason &&
+        lossReasons.find((r) => r.id === opp.lostReason?.id && r.category === category),
+    ).length,
+  }))
 
   // Top loss reasons by usage
   const topLossReasons = lossReasons
     .map((reason) => ({
       ...reason,
-      usageCount: opportunities.filter(
-        (opp) => opp.lostReason?.id === reason.id
-      ).length,
+      usageCount: opportunities.filter((opp) => opp.lostReason?.id === reason.id).length,
       lostValue: opportunities
         .filter((opp) => opp.lostReason?.id === reason.id)
         .reduce((sum, opp) => sum + opp.estimatedValue, 0),
     }))
     .sort((a, b) => b.usageCount - a.usageCount)
-    .slice(0, 5);
+    .slice(0, 5)
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-lg font-bold text-gray-900">Kayıp Nedenleri</h2>
-          <p className="text-sm text-gray-600">
-            Fırsat kaybı nedenlerini analiz edin
-          </p>
-        </div>
-        <div className="flex items-center gap-3">
-          <button
-            onClick={handleAdd}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-          >
-            <FaPlus className="w-4 h-4" />
-            Yeni Kayıp Nedeni
-          </button>
-        </div>
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-        <Widget
-          title="Toplam Neden"
-          value={totalReasons}
-          color="red"
-          icon="FaExclamationTriangle"
-        />
-
-        <Widget
-          title="Aktif Neden"
-          value={activeReasons}
-          color="green"
-          icon="FaArrowDown"
-        />
-
-        <Widget
-          title="Kayıp Fırsat"
-          value={opportunities.filter((opp) => opp.lostReason).length}
-          color="orange"
-          icon="FaBullseye"
-        />
-
-        <Widget
-          title="En Çok Kullanılan"
-          value={topLossReasons[0]?.name || "-"}
-          color="purple"
-          icon="FaChartBar"
-          valueClassName="text-lg"
-        />
-      </div>
-
-      {/* Category Distribution */}
-      <div className="bg-white rounded-lg shadow-sm border p-4">
-        <h3 className="text-base font-semibold text-gray-900 mb-3">
-          Kategori Dağılımı
-        </h3>
-        <div className="grid grid-cols-2 md:grid-cols-6 gap-3">
-          {categoryDistribution.map(({ category, count, usage }) => (
-            <div key={category} className="text-center p-4 border rounded-lg">
-              <div
-                className={`inline-block px-2 py-1 text-xs font-medium rounded-full mb-2 ${getLostReasonCategoryColor(
-                  category
-                )}`}
-              >
-                {getLostReasonCategoryText(category)}
-              </div>
-              <div className="text-lg font-bold text-gray-900 mb-1">
-                {count}
-              </div>
-              <div className="text-xs text-gray-500">{usage} Kullanım</div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Top Loss Reasons */}
-      <div className="bg-white rounded-lg shadow-sm border p-3">
-        <h3 className="text-sm font-semibold text-gray-900 mb-2">
-          En Çok Kayıp Yaşanan Nedenler
-        </h3>
-        <div className="space-y-3 pt-2">
-          {topLossReasons.map((reason, index) => (
-            <div
-              key={reason.id}
-              className="flex items-center justify-between p-2 bg-gray-50 rounded-lg"
+    <Container>
+      <div className="space-y-3 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-bold text-gray-900">Kayıp Nedenleri</h2>
+            <p className="text-sm text-gray-600">Fırsat kaybı nedenlerini analiz edin</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              onClick={handleAdd}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
             >
-              <div className="flex items-center gap-4">
-                <div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
-                  <span className="text-red-600 font-bold">{index + 1}</span>
-                </div>
-                <div>
-                  <h4 className="font-medium text-gray-900">{reason.name}</h4>
-                  <p className="text-sm text-gray-500">
-                    {getLostReasonCategoryText(reason.category)} •{" "}
-                    {reason.usageCount} fırsat
-                  </p>
-                </div>
-              </div>
-              <div className="text-right">
-                <div className="text-sm font-bold text-red-600">
-                  ₺{reason.lostValue.toLocaleString()}
-                </div>
-                <div className="text-sm text-gray-500">Kayıp Değer</div>
-              </div>
-            </div>
-          ))}
+              <FaPlus className="w-4 h-4" />
+              Yeni Kayıp Nedeni
+            </button>
+          </div>
         </div>
-      </div>
 
-      {/* Filters */}
-      <div className="flex gap-3 items-center">
-        <div className="flex-1">
-          <input
-            type="text"
-            placeholder="Neden adı veya kodu ara..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <Widget
+            title="Toplam Neden"
+            value={totalReasons}
+            color="red"
+            icon="FaExclamationTriangle"
+          />
+
+          <Widget title="Aktif Neden" value={activeReasons} color="green" icon="FaArrowDown" />
+
+          <Widget
+            title="Kayıp Fırsat"
+            value={opportunities.filter((opp) => opp.lostReason).length}
+            color="orange"
+            icon="FaBullseye"
+          />
+
+          <Widget
+            title="En Çok Kullanılan"
+            value={topLossReasons[0]?.name || '-'}
+            color="purple"
+            icon="FaChartBar"
+            valueClassName="text-lg"
           />
         </div>
 
-        <select
-          value={selectedCategory}
-          onChange={(e) =>
-            setSelectedCategory(
-              e.target.value as LostReasonCategoryEnum | "all"
-            )
-          }
-          className="px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Kategoriler</option>
-          {Object.values(LostReasonCategoryEnum).map((category) => (
-            <option key={category} value={category}>
-              {getLostReasonCategoryText(category)}
-            </option>
-          ))}
-        </select>
-
-        {/* View Mode Toggle */}
-        <div className="flex bg-gray-100 rounded-lg p-1">
-          <button
-            onClick={() => setViewMode("table")}
-            className={`flex items-center gap-2 px-2 py-1 rounded-md text-sm transition-colors ${
-              viewMode === "table"
-                ? "bg-white text-gray-900 shadow-sm"
-                : "text-gray-600 hover:text-gray-900"
-            }`}
-          >
-            <FaList className="w-4 h-4" />
-          </button>
-          <button
-            onClick={() => setViewMode("card")}
-            className={`flex items-center gap-2 px-2 py-1 rounded-md text-sm transition-colors ${
-              viewMode === "card"
-                ? "bg-white text-gray-900 shadow-sm"
-                : "text-gray-600 hover:text-gray-900"
-            }`}
-          >
-            <FaTh className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      {/* Data Display */}
-      {viewMode === "table" ? (
-        <div className="bg-white rounded-lg shadow-sm border">
-          <DataTable data={filteredReasons} columns={columns} />
-        </div>
-      ) : (
-        <LossReasonCardView
-          lossReasons={filteredReasons}
-          opportunities={opportunities}
-          onEdit={handleEdit}
-          onDelete={handleDelete}
-          onView={handleView}
-        />
-      )}
-
-      {filteredReasons.length === 0 && viewMode === "table" && (
-        <div className="text-center py-12">
-          <FaExclamationTriangle className="w-8 h-8 text-gray-400 mx-auto mb-2" />
-          <h3 className="text-sm font-medium text-gray-900 mb-2">
-            Kayıp nedeni bulunamadı
-          </h3>
-          <p className="text-gray-500">
-            Arama kriterlerinizi değiştirmeyi deneyin.
-          </p>
-        </div>
-      )}
-
-      {/* Modals */}
-      <LossReasonModal
-        isOpen={isModalOpen}
-        onClose={() => {
-          setIsModalOpen(false);
-          setEditingReason(null);
-        }}
-        onSave={handleSave}
-        editingReason={editingReason}
-        mode={modalMode}
-      />
-
-      {/* Delete Confirmation Modal */}
-      {isDeleteModalOpen && (
-        <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 w-full max-w-md mx-4">
-            {/* Header */}
-            <div className="flex items-center justify-between p-3 border-b">
-              <div className="flex items-center gap-3">
-                <FaExclamationTriangle className="w-6 h-6 text-red-600" />
-                <h3 className="text-sm font-semibold text-gray-900">
-                  Silme Onayı
-                </h3>
-              </div>
-              <button
-                onClick={() => {
-                  setIsDeleteModalOpen(false);
-                  setReasonToDelete(null);
-                }}
-                className="text-gray-400 hover:text-gray-600"
-              >
-                <FaTimes className="w-5 h-5" />
-              </button>
-            </div>
-
-            {/* Content */}
-            <div className="p-3">
-              <div className="text-center">
-                <div className="mx-auto flex items-center justify-center h-10 w-10 rounded-full bg-red-100 mb-3">
-                  <FaTrash className="h-6 w-6 text-red-600" />
+        {/* Category Distribution */}
+        <div className="bg-white rounded-lg shadow-sm border p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-3">Kategori Dağılımı</h3>
+          <div className="grid grid-cols-2 md:grid-cols-6 gap-3">
+            {categoryDistribution.map(({ category, count, usage }) => (
+              <div key={category} className="text-center p-4 border rounded-lg">
+                <div
+                  className={`inline-block px-2 py-1 text-xs font-medium rounded-full mb-2 ${getLostReasonCategoryColor(
+                    category,
+                  )}`}
+                >
+                  {getLostReasonCategoryText(category)}
                 </div>
-                <h3 className="text-sm font-medium text-gray-900 mb-2">
-                  Kayıp nedeni silinsin mi?
-                </h3>
-                <p className="text-sm text-gray-500 mb-6">
-                  <span className="font-medium">"{reasonToDelete?.name}"</span>{" "}
-                  kayıp nedenini silmek üzeresiniz. Bu işlem geri alınamaz.
-                </p>
+                <div className="text-lg font-bold text-gray-900 mb-1">{count}</div>
+                <div className="text-xs text-gray-500">{usage} Kullanım</div>
               </div>
+            ))}
+          </div>
+        </div>
 
-              {/* Buttons */}
-              <div className="flex justify-end gap-1.5">
+        {/* Top Loss Reasons */}
+        <div className="bg-white rounded-lg shadow-sm border p-3">
+          <h3 className="text-sm font-semibold text-gray-900 mb-2">
+            En Çok Kayıp Yaşanan Nedenler
+          </h3>
+          <div className="space-y-3 pt-2">
+            {topLossReasons.map((reason, index) => (
+              <div
+                key={reason.id}
+                className="flex items-center justify-between p-2 bg-gray-50 rounded-lg"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
+                    <span className="text-red-600 font-bold">{index + 1}</span>
+                  </div>
+                  <div>
+                    <h4 className="font-medium text-gray-900">{reason.name}</h4>
+                    <p className="text-sm text-gray-500">
+                      {getLostReasonCategoryText(reason.category)} • {reason.usageCount} fırsat
+                    </p>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <div className="text-sm font-bold text-red-600">
+                    ₺{reason.lostValue.toLocaleString()}
+                  </div>
+                  <div className="text-sm text-gray-500">Kayıp Değer</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="flex gap-3 items-center">
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="Neden adı veya kodu ara..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <select
+            value={selectedCategory}
+            onChange={(e) => setSelectedCategory(e.target.value as LostReasonCategoryEnum | 'all')}
+            className="px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm Kategoriler</option>
+            {Object.values(LostReasonCategoryEnum).map((category) => (
+              <option key={category} value={category}>
+                {getLostReasonCategoryText(category)}
+              </option>
+            ))}
+          </select>
+
+          {/* View Mode Toggle */}
+          <div className="flex bg-gray-100 rounded-lg p-1">
+            <button
+              onClick={() => setViewMode('table')}
+              className={`flex items-center gap-2 px-2 py-1 rounded-md text-sm transition-colors ${
+                viewMode === 'table'
+                  ? 'bg-white text-gray-900 shadow-sm'
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}
+            >
+              <FaList className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setViewMode('card')}
+              className={`flex items-center gap-2 px-2 py-1 rounded-md text-sm transition-colors ${
+                viewMode === 'card'
+                  ? 'bg-white text-gray-900 shadow-sm'
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}
+            >
+              <FaTh className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+
+        {/* Data Display */}
+        {viewMode === 'table' ? (
+          <div className="bg-white rounded-lg shadow-sm border">
+            <DataTable data={filteredReasons} columns={columns} />
+          </div>
+        ) : (
+          <LossReasonCardView
+            lossReasons={filteredReasons}
+            opportunities={opportunities}
+            onEdit={handleEdit}
+            onDelete={handleDelete}
+            onView={handleView}
+          />
+        )}
+
+        {filteredReasons.length === 0 && viewMode === 'table' && (
+          <div className="text-center py-12">
+            <FaExclamationTriangle className="w-8 h-8 text-gray-400 mx-auto mb-2" />
+            <h3 className="text-sm font-medium text-gray-900 mb-2">Kayıp nedeni bulunamadı</h3>
+            <p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
+          </div>
+        )}
+
+        {/* Modals */}
+        <LossReasonModal
+          isOpen={isModalOpen}
+          onClose={() => {
+            setIsModalOpen(false)
+            setEditingReason(null)
+          }}
+          onSave={handleSave}
+          editingReason={editingReason}
+          mode={modalMode}
+        />
+
+        {/* Delete Confirmation Modal */}
+        {isDeleteModalOpen && (
+          <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 w-full max-w-md mx-4">
+              {/* Header */}
+              <div className="flex items-center justify-between p-3 border-b">
+                <div className="flex items-center gap-3">
+                  <FaExclamationTriangle className="w-6 h-6 text-red-600" />
+                  <h3 className="text-sm font-semibold text-gray-900">Silme Onayı</h3>
+                </div>
                 <button
                   onClick={() => {
-                    setIsDeleteModalOpen(false);
-                    setReasonToDelete(null);
+                    setIsDeleteModalOpen(false)
+                    setReasonToDelete(null)
                   }}
-                  className="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
+                  className="text-gray-400 hover:text-gray-600"
                 >
-                  İptal
-                </button>
-                <button
-                  onClick={confirmDelete}
-                  className="flex items-center gap-2 px-3 py-1.5 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
-                >
-                  <FaTrash className="w-4 h-4" />
-                  Sil
+                  <FaTimes className="w-5 h-5" />
                 </button>
               </div>
+
+              {/* Content */}
+              <div className="p-3">
+                <div className="text-center">
+                  <div className="mx-auto flex items-center justify-center h-10 w-10 rounded-full bg-red-100 mb-3">
+                    <FaTrash className="h-6 w-6 text-red-600" />
+                  </div>
+                  <h3 className="text-sm font-medium text-gray-900 mb-2">
+                    Kayıp nedeni silinsin mi?
+                  </h3>
+                  <p className="text-sm text-gray-500 mb-6">
+                    <span className="font-medium">"{reasonToDelete?.name}"</span> kayıp nedenini
+                    silmek üzeresiniz. Bu işlem geri alınamaz.
+                  </p>
+                </div>
+
+                {/* Buttons */}
+                <div className="flex justify-end gap-1.5">
+                  <button
+                    onClick={() => {
+                      setIsDeleteModalOpen(false)
+                      setReasonToDelete(null)
+                    }}
+                    className="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
+                  >
+                    İptal
+                  </button>
+                  <button
+                    onClick={confirmDelete}
+                    className="flex items-center gap-2 px-3 py-1.5 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
+                  >
+                    <FaTrash className="w-4 h-4" />
+                    Sil
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      )}
-    </div>
-  );
-};
+        )}
+      </div>
+    </Container>
+  )
+}
 
-export default LossReasons;
+export default LossReasons
diff --git a/ui/src/views/crm/components/OpportunityDetails.tsx b/ui/src/views/crm/components/OpportunityDetails.tsx
index f5f18a90..322c803e 100644
--- a/ui/src/views/crm/components/OpportunityDetails.tsx
+++ b/ui/src/views/crm/components/OpportunityDetails.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 import {
   FaTimes,
   FaBullseye,
@@ -13,21 +13,21 @@ import {
   FaClock,
   FaPhone,
   FaEnvelope,
-} from "react-icons/fa";
-import { CrmOpportunity, OpportunityStageEnum } from "../../../types/crm";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
+} from 'react-icons/fa'
+import { CrmOpportunity, OpportunityStageEnum } from '../../../types/crm'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
 import {
   getOpportunityLeadSourceText,
   getOpportunityProbabilityColor,
   getOpportunityStageColor,
   getOpportunityStageText,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
 
 interface OpportunityDetailsProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onEdit: (opportunity: CrmOpportunity) => void;
-  opportunity: CrmOpportunity | null;
+  isOpen: boolean
+  onClose: () => void
+  onEdit: (opportunity: CrmOpportunity) => void
+  opportunity: CrmOpportunity | null
 }
 
 const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
@@ -36,11 +36,9 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
   onEdit,
   opportunity,
 }) => {
-  if (!isOpen || !opportunity) return null;
+  if (!isOpen || !opportunity) return null
 
-  const customer = mockBusinessParties.find(
-    (c) => c.id === opportunity.customerId
-  );
+  const customer = mockBusinessParties.find((c) => c.id === opportunity.customerId)
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
@@ -52,12 +50,8 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
               <FaBullseye className="w-6 h-6 text-blue-600" />
             </div>
             <div>
-              <h2 className="text-lg font-semibold text-gray-900">
-                {opportunity.title}
-              </h2>
-              <p className="text-sm text-gray-600">
-                {opportunity.opportunityNumber}
-              </p>
+              <h2 className="text-lg font-semibold text-gray-900">{opportunity.title}</h2>
+              <p className="text-sm text-gray-600">{opportunity.opportunityNumber}</p>
             </div>
           </div>
           <div className="flex items-center gap-3">
@@ -68,10 +62,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
               <FaEdit className="w-4 h-4" />
               Düzenle
             </button>
-            <button
-              onClick={onClose}
-              className="text-gray-400 hover:text-gray-600 p-2"
-            >
+            <button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-2">
               <FaTimes className="w-5 h-5" />
             </button>
           </div>
@@ -83,7 +74,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
             <div className="text-center">
               <div
                 className={`inline-flex px-3 py-1.5 rounded-full text-xs font-medium border ${getOpportunityStageColor(
-                  opportunity.stage
+                  opportunity.stage,
                 )}`}
               >
                 {getOpportunityStageText(opportunity.stage)}
@@ -102,7 +93,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
             <div className="text-center">
               <div
                 className={`flex items-center justify-center gap-2 text-xl font-bold ${getOpportunityProbabilityColor(
-                  opportunity.probability
+                  opportunity.probability,
                 )}`}
               >
                 <FaPercentage className="w-5 h-5" />
@@ -114,9 +105,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
             <div className="text-center">
               <div className="flex items-center justify-center gap-2 text-base font-semibold text-gray-900">
                 <FaCalendar className="w-4 h-4 text-gray-400" />
-                {new Date(opportunity.expectedCloseDate).toLocaleDateString(
-                  "tr-TR"
-                )}
+                {new Date(opportunity.expectedCloseDate).toLocaleDateString('tr-TR')}
               </div>
               <p className="text-xs text-gray-500 mt-1">Beklenen Kapanış</p>
             </div>
@@ -133,9 +122,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
                 </h3>
                 <div className="space-y-3">
                   <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Başlık
-                    </label>
+                    <label className="block text-sm font-medium text-gray-600 mb-1">Başlık</label>
                     <p className="text-gray-900">{opportunity.title}</p>
                   </div>
 
@@ -144,16 +131,12 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
                       <label className="block text-sm font-medium text-gray-600 mb-1">
                         Açıklama
                       </label>
-                      <p className="text-gray-900 whitespace-pre-wrap">
-                        {opportunity.description}
-                      </p>
+                      <p className="text-gray-900 whitespace-pre-wrap">{opportunity.description}</p>
                     </div>
                   )}
 
                   <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Kaynak
-                    </label>
+                    <label className="block text-sm font-medium text-gray-600 mb-1">Kaynak</label>
                     <div className="flex items-center gap-2">
                       <FaTags className="w-4 h-4 text-gray-400" />
                       <span className="text-gray-900">
@@ -209,16 +192,12 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
                       <div className="space-y-1.5">
                         <div className="flex items-center gap-2">
                           <FaEnvelope className="w-4 h-4 text-gray-400" />
-                          <span className="text-gray-900">
-                            {customer.primaryContact?.email}
-                          </span>
+                          <span className="text-gray-900">{customer.primaryContact?.email}</span>
                         </div>
                         {customer.primaryContact?.phone && (
                           <div className="flex items-center gap-2">
                             <FaPhone className="w-4 h-4 text-gray-400" />
-                            <span className="text-gray-900">
-                              {customer.primaryContact?.phone}
-                            </span>
+                            <span className="text-gray-900">{customer.primaryContact?.phone}</span>
                           </div>
                         )}
                       </div>
@@ -238,14 +217,10 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
                 </h3>
                 <div className="space-y-3">
                   <div>
-                    <label className="block text-sm font-medium text-gray-600 mb-1">
-                      Sorumlu
-                    </label>
+                    <label className="block text-sm font-medium text-gray-600 mb-1">Sorumlu</label>
                     <div className="flex items-center gap-2">
                       <FaUser className="w-4 h-4 text-gray-400" />
-                      <span className="text-gray-900">
-                        {opportunity.assigned?.fullName}
-                      </span>
+                      <span className="text-gray-900">{opportunity.assigned?.fullName}</span>
                     </div>
                   </div>
 
@@ -256,9 +231,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
                     <div className="flex items-center gap-2">
                       <FaCalendar className="w-4 h-4 text-gray-400" />
                       <span className="text-gray-900">
-                        {new Date(
-                          opportunity.expectedCloseDate
-                        ).toLocaleDateString("tr-TR")}
+                        {new Date(opportunity.expectedCloseDate).toLocaleDateString('tr-TR')}
                       </span>
                     </div>
                   </div>
@@ -271,9 +244,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
                       <div className="flex items-center gap-2">
                         <FaCalendar className="w-4 h-4 text-gray-400" />
                         <span className="text-gray-900">
-                          {new Date(
-                            opportunity.actualCloseDate
-                          ).toLocaleDateString("tr-TR")}
+                          {new Date(opportunity.actualCloseDate).toLocaleDateString('tr-TR')}
                         </span>
                       </div>
                     </div>
@@ -291,14 +262,10 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
                   <div className="flex items-start gap-3 border-l-2 border-blue-200 pl-4">
                     <div className="w-3 h-3 bg-blue-600 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
                     <div>
-                      <p className="text-sm font-medium text-gray-900">
-                        Fırsat Oluşturuldu
-                      </p>
+                      <p className="text-sm font-medium text-gray-900">Fırsat Oluşturuldu</p>
                       <p className="text-xs text-gray-500 flex items-center gap-1">
                         <FaClock className="w-3 h-3" />
-                        {new Date(opportunity.creationTime).toLocaleDateString(
-                          "tr-TR"
-                        )}
+                        {new Date(opportunity.creationTime).toLocaleDateString('tr-TR')}
                       </p>
                     </div>
                   </div>
@@ -306,14 +273,10 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
                   <div className="flex items-start gap-3 border-l-2 border-gray-200 pl-4">
                     <div className="w-3 h-3 bg-gray-400 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
                     <div>
-                      <p className="text-sm font-medium text-gray-900">
-                        Son Güncelleme
-                      </p>
+                      <p className="text-sm font-medium text-gray-900">Son Güncelleme</p>
                       <p className="text-xs text-gray-500 flex items-center gap-1">
                         <FaClock className="w-3 h-3" />
-                        {new Date(
-                          opportunity.lastModificationTime
-                        ).toLocaleDateString("tr-TR")}
+                        {new Date(opportunity.lastModificationTime).toLocaleDateString('tr-TR')}
                       </p>
                     </div>
                   </div>
@@ -322,41 +285,37 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
 
               {/* Progress Indicator */}
               <div className="bg-gray-50 rounded-lg p-4">
-                <h3 className="text-base font-semibold text-gray-900 mb-3">
-                  Aşama İlerlemesi
-                </h3>
+                <h3 className="text-base font-semibold text-gray-900 mb-3">Aşama İlerlemesi</h3>
                 <div className="space-y-2">
                   {Object.values(OpportunityStageEnum).map((stage, index) => {
-                    const isCurrentStage = stage === opportunity.stage;
+                    const isCurrentStage = stage === opportunity.stage
                     const isPassedStage =
-                      Object.values(OpportunityStageEnum).indexOf(
-                        opportunity.stage
-                      ) > index;
+                      Object.values(OpportunityStageEnum).indexOf(opportunity.stage) > index
 
                     return (
                       <div key={stage} className="flex items-center gap-3">
                         <div
                           className={`w-4 h-4 rounded-full border-2 ${
                             isCurrentStage
-                              ? "bg-blue-600 border-blue-600"
+                              ? 'bg-blue-600 border-blue-600'
                               : isPassedStage
-                              ? "bg-green-600 border-green-600"
-                              : "bg-white border-gray-300"
+                                ? 'bg-green-600 border-green-600'
+                                : 'bg-white border-gray-300'
                           }`}
                         ></div>
                         <span
                           className={`text-sm ${
                             isCurrentStage
-                              ? "font-semibold text-blue-600"
+                              ? 'font-semibold text-blue-600'
                               : isPassedStage
-                              ? "text-green-600"
-                              : "text-gray-500"
+                                ? 'text-green-600'
+                                : 'text-gray-500'
                           }`}
                         >
                           {getOpportunityStageText(stage)}
                         </span>
                       </div>
-                    );
+                    )
                   })}
                 </div>
               </div>
@@ -365,7 +324,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default OpportunityDetails;
+export default OpportunityDetails
diff --git a/ui/src/views/crm/components/OpportunityForm.tsx b/ui/src/views/crm/components/OpportunityForm.tsx
index 87302c26..18fc1c13 100644
--- a/ui/src/views/crm/components/OpportunityForm.tsx
+++ b/ui/src/views/crm/components/OpportunityForm.tsx
@@ -1,21 +1,22 @@
-import React, { useState, useEffect } from "react";
-import { FaTimes, FaDollarSign, FaFileAlt } from "react-icons/fa";
+import React, { useState, useEffect } from 'react'
+import { FaTimes, FaDollarSign, FaFileAlt } from 'react-icons/fa'
 import {
   CrmOpportunity,
   OpportunityStageEnum,
   LeadSourceEnum,
   OpportunityStatusEnum,
-} from "../../../types/crm";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { BusinessParty } from "../../../types/common";
+} from '../../../types/crm'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { BusinessParty } from '../../../types/common'
+import { getOpportunityLeadSourceText, getOpportunityStageText } from '@/utils/erp'
 
 interface OpportunityFormProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSave: (opportunity: CrmOpportunity) => void;
-  opportunity?: CrmOpportunity | null;
-  mode: "create" | "edit";
+  isOpen: boolean
+  onClose: () => void
+  onSave: (opportunity: CrmOpportunity) => void
+  opportunity?: CrmOpportunity | null
+  mode: 'create' | 'edit'
 }
 
 const OpportunityForm: React.FC<OpportunityFormProps> = ({
@@ -26,122 +27,118 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
   mode,
 }) => {
   const [formData, setFormData] = useState({
-    id: "",
-    opportunityNumber: "",
-    title: "",
-    description: "",
-    customerId: "",
-    contactId: "",
+    id: '',
+    opportunityNumber: '',
+    title: '',
+    description: '',
+    customerId: '',
+    contactId: '',
     stage: OpportunityStageEnum.Qualification,
     probability: 10,
     estimatedValue: 0,
-    currency: "TRY",
-    expectedCloseDate: "",
-    assignedTo: "",
-    teamId: "",
+    currency: 'TRY',
+    expectedCloseDate: '',
+    assignedTo: '',
+    teamId: '',
     leadSource: LeadSourceEnum.Website,
-    campaignId: "",
-  });
+    campaignId: '',
+  })
 
-  const [customers] = useState<BusinessParty[]>(mockBusinessParties);
-  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [customers] = useState<BusinessParty[]>(mockBusinessParties)
+  const [errors, setErrors] = useState<Record<string, string>>({})
 
   useEffect(() => {
-    if (opportunity && mode === "edit") {
+    if (opportunity && mode === 'edit') {
       setFormData({
         id: opportunity.id,
         opportunityNumber: opportunity.opportunityNumber,
         title: opportunity.title,
-        description: opportunity.description || "",
+        description: opportunity.description || '',
         customerId: opportunity.customerId,
-        contactId: opportunity.contactId || "",
+        contactId: opportunity.contactId || '',
         stage: opportunity.stage,
         probability: opportunity.probability,
         estimatedValue: opportunity.estimatedValue,
         currency: opportunity.currency,
-        expectedCloseDate: opportunity.expectedCloseDate
-          .toISOString()
-          .split("T")[0],
+        expectedCloseDate: opportunity.expectedCloseDate.toISOString().split('T')[0],
         assignedTo: opportunity.assignedTo,
-        teamId: opportunity.teamId || "",
+        teamId: opportunity.teamId || '',
         leadSource: opportunity.leadSource,
-        campaignId: opportunity.campaignId || "",
-      });
-    } else if (mode === "create") {
+        campaignId: opportunity.campaignId || '',
+      })
+    } else if (mode === 'create') {
       // Generate new opportunity number
-      const newNumber = `OPP-${Date.now().toString().slice(-6)}`;
+      const newNumber = `OPP-${Date.now().toString().slice(-6)}`
       setFormData({
         id: `opp_${Date.now()}`,
         opportunityNumber: newNumber,
-        title: "",
-        description: "",
-        customerId: "",
-        contactId: "",
+        title: '',
+        description: '',
+        customerId: '',
+        contactId: '',
         stage: OpportunityStageEnum.Qualification,
         probability: 10,
         estimatedValue: 0,
-        currency: "TRY",
-        expectedCloseDate: "",
-        assignedTo: "Mevcut Kullanıcı",
-        teamId: "",
+        currency: 'TRY',
+        expectedCloseDate: '',
+        assignedTo: 'Mevcut Kullanıcı',
+        teamId: '',
         leadSource: LeadSourceEnum.Website,
-        campaignId: "",
-      });
+        campaignId: '',
+      })
     }
-  }, [opportunity, mode, isOpen]);
+  }, [opportunity, mode, isOpen])
 
   const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-    >
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
   ) => {
-    const { name, value } = e.target;
+    const { name, value } = e.target
     setFormData((prev) => ({
       ...prev,
       [name]: value,
-    }));
+    }))
 
     // Clear error when user starts typing
     if (errors[name]) {
       setErrors((prev) => ({
         ...prev,
-        [name]: "",
-      }));
+        [name]: '',
+      }))
     }
-  };
+  }
 
   const validateForm = () => {
-    const newErrors: Record<string, string> = {};
+    const newErrors: Record<string, string> = {}
 
     if (!formData.title.trim()) {
-      newErrors.title = "Fırsat başlığı zorunludur";
+      newErrors.title = 'Fırsat başlığı zorunludur'
     }
 
     if (!formData.customerId) {
-      newErrors.customerId = "Müşteri seçimi zorunludur";
+      newErrors.customerId = 'Müşteri seçimi zorunludur'
     }
 
     if (formData.estimatedValue <= 0) {
-      newErrors.estimatedValue = "Tahmini değer 0'dan büyük olmalıdır";
+      newErrors.estimatedValue = "Tahmini değer 0'dan büyük olmalıdır"
     }
 
     if (!formData.expectedCloseDate) {
-      newErrors.expectedCloseDate = "Beklenen kapanış tarihi zorunludur";
+      newErrors.expectedCloseDate = 'Beklenen kapanış tarihi zorunludur'
     }
 
     if (formData.probability < 0 || formData.probability > 100) {
-      newErrors.probability = "Olasılık 0-100 arasında olmalıdır";
+      newErrors.probability = 'Olasılık 0-100 arasında olmalıdır'
     }
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (!validateForm()) {
-      return;
+      return
     }
 
     const opportunityData: CrmOpportunity = {
@@ -164,45 +161,20 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
         formData.stage === OpportunityStageEnum.ClosedWon
           ? OpportunityStatusEnum.Won
           : formData.stage === OpportunityStageEnum.ClosedLost
-          ? OpportunityStatusEnum.Lost
-          : OpportunityStatusEnum.Open,
+            ? OpportunityStatusEnum.Lost
+            : OpportunityStatusEnum.Open,
 
       activities: [],
       competitors: [],
       creationTime: opportunity?.creationTime || new Date(),
       lastModificationTime: new Date(),
-    };
+    }
 
-    onSave(opportunityData);
-    onClose();
-  };
+    onSave(opportunityData)
+    onClose()
+  }
 
-  const getStageLabel = (stage: OpportunityStageEnum) => {
-    const stageLabels = {
-      [OpportunityStageEnum.Qualification]: "Nitelendirme",
-      [OpportunityStageEnum.NeedsAnalysis]: "İhtiyaç Analizi",
-      [OpportunityStageEnum.Proposal]: "Teklif",
-      [OpportunityStageEnum.Negotiation]: "Müzakere",
-      [OpportunityStageEnum.ClosedWon]: "Kazanıldı",
-      [OpportunityStageEnum.ClosedLost]: "Kaybedildi",
-    };
-    return stageLabels[stage];
-  };
-
-  const getLeadSourceLabel = (source: LeadSourceEnum) => {
-    const sourceLabels: Record<LeadSourceEnum, string> = {
-      [LeadSourceEnum.Website]: "Web Sitesi",
-      [LeadSourceEnum.Referral]: "Referans",
-      [LeadSourceEnum.Campaign]: "Kampanya",
-      [LeadSourceEnum.Trade_Show]: "Fuar",
-      [LeadSourceEnum.Cold_Call]: "Soğuk Arama",
-      [LeadSourceEnum.Social_Media]: "Sosyal Medya",
-      [LeadSourceEnum.Partner]: "Partner",
-    };
-    return sourceLabels[source];
-  };
-
-  if (!isOpen) return null;
+  if (!isOpen) return null
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
@@ -210,12 +182,9 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b">
           <h2 className="text-lg font-semibold text-gray-900">
-            {mode === "create" ? "Yeni Fırsat Oluştur" : "Fırsat Düzenle"}
+            {mode === 'create' ? 'Yeni Fırsat Oluştur' : 'Fırsat Düzenle'}
           </h2>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600"
-          >
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
             <FaTimes className="w-5 h-5" />
           </button>
         </div>
@@ -254,19 +223,15 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
                   value={formData.title}
                   onChange={handleInputChange}
                   className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                    errors.title ? "border-red-500" : "border-gray-300"
+                    errors.title ? 'border-red-500' : 'border-gray-300'
                   }`}
                   placeholder="Fırsat başlığını girin"
                 />
-                {errors.title && (
-                  <p className="text-red-500 text-sm mt-1">{errors.title}</p>
-                )}
+                {errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Açıklama
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Açıklama</label>
                 <textarea
                   name="description"
                   value={formData.description}
@@ -278,15 +243,13 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Müşteri *
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Müşteri *</label>
                 <select
                   name="customerId"
                   value={formData.customerId}
                   onChange={handleInputChange}
                   className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                    errors.customerId ? "border-red-500" : "border-gray-300"
+                    errors.customerId ? 'border-red-500' : 'border-gray-300'
                   }`}
                 >
                   <option value="">Müşteri seçin</option>
@@ -297,18 +260,14 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
                   ))}
                 </select>
                 {errors.customerId && (
-                  <p className="text-red-500 text-sm mt-1">
-                    {errors.customerId}
-                  </p>
+                  <p className="text-red-500 text-sm mt-1">{errors.customerId}</p>
                 )}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Sorumlu
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Sorumlu</label>
                 <select
-                  value={formData.assignedTo || ""}
+                  value={formData.assignedTo || ''}
                   onChange={handleInputChange}
                   className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                 >
@@ -330,9 +289,7 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
               </h3>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Aşama
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Aşama</label>
                 <select
                   name="stage"
                   value={formData.stage}
@@ -341,7 +298,7 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
                 >
                   {Object.values(OpportunityStageEnum).map((stage) => (
                     <option key={stage} value={stage}>
-                      {getStageLabel(stage)}
+                      {getOpportunityStageText(stage)}
                     </option>
                   ))}
                 </select>
@@ -359,13 +316,11 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
                   min="0"
                   max="100"
                   className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                    errors.probability ? "border-red-500" : "border-gray-300"
+                    errors.probability ? 'border-red-500' : 'border-gray-300'
                   }`}
                 />
                 {errors.probability && (
-                  <p className="text-red-500 text-sm mt-1">
-                    {errors.probability}
-                  </p>
+                  <p className="text-red-500 text-sm mt-1">{errors.probability}</p>
                 )}
               </div>
 
@@ -381,21 +336,17 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
                   min="0"
                   step="0.01"
                   className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                    errors.estimatedValue ? "border-red-500" : "border-gray-300"
+                    errors.estimatedValue ? 'border-red-500' : 'border-gray-300'
                   }`}
                   placeholder="0.00"
                 />
                 {errors.estimatedValue && (
-                  <p className="text-red-500 text-sm mt-1">
-                    {errors.estimatedValue}
-                  </p>
+                  <p className="text-red-500 text-sm mt-1">{errors.estimatedValue}</p>
                 )}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Para Birimi
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Para Birimi</label>
                 <select
                   name="currency"
                   value={formData.currency}
@@ -418,22 +369,16 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
                   value={formData.expectedCloseDate}
                   onChange={handleInputChange}
                   className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                    errors.expectedCloseDate
-                      ? "border-red-500"
-                      : "border-gray-300"
+                    errors.expectedCloseDate ? 'border-red-500' : 'border-gray-300'
                   }`}
                 />
                 {errors.expectedCloseDate && (
-                  <p className="text-red-500 text-sm mt-1">
-                    {errors.expectedCloseDate}
-                  </p>
+                  <p className="text-red-500 text-sm mt-1">{errors.expectedCloseDate}</p>
                 )}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Kaynak
-                </label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Kaynak</label>
                 <select
                   name="leadSource"
                   value={formData.leadSource}
@@ -442,7 +387,7 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
                 >
                   {Object.values(LeadSourceEnum).map((source) => (
                     <option key={source} value={source}>
-                      {getLeadSourceLabel(source)}
+                      {getOpportunityLeadSourceText(source)}
                     </option>
                   ))}
                 </select>
@@ -463,13 +408,13 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
               type="submit"
               className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
             >
-              {mode === "create" ? "Oluştur" : "Güncelle"}
+              {mode === 'create' ? 'Oluştur' : 'Güncelle'}
             </button>
           </div>
         </form>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default OpportunityForm;
+export default OpportunityForm
diff --git a/ui/src/views/crm/components/OpportunityManagement.tsx b/ui/src/views/crm/components/OpportunityManagement.tsx
index 4f7d2551..97e7d317 100644
--- a/ui/src/views/crm/components/OpportunityManagement.tsx
+++ b/ui/src/views/crm/components/OpportunityManagement.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaBullseye,
   FaPlus,
@@ -9,86 +9,80 @@ import {
   FaArrowUp,
   FaUser,
   FaBuilding,
-} from "react-icons/fa";
-import { CrmOpportunity, OpportunityStageEnum } from "../../../types/crm";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
-import { mockOpportunities } from "../../../mocks/mockOpportunities";
-import OpportunityForm from "./OpportunityForm";
-import OpportunityDetails from "./OpportunityDetails";
-import { BusinessParty } from "../../../types/common";
-import Widget from "../../../components/common/Widget";
+} from 'react-icons/fa'
+import { CrmOpportunity, OpportunityStageEnum } from '../../../types/crm'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
+import { mockOpportunities } from '../../../mocks/mockOpportunities'
+import OpportunityForm from './OpportunityForm'
+import OpportunityDetails from './OpportunityDetails'
+import { BusinessParty } from '../../../types/common'
+import Widget from '../../../components/common/Widget'
 import {
   getOpportunityProbabilityColor,
   getOpportunityStageColor,
   getOpportunityStageText,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
-// Mock data - replace with actual data fetching
 const OpportunityManagement: React.FC = () => {
-  const [opportunities, setOpportunities] =
-    useState<CrmOpportunity[]>(mockOpportunities);
-  const [customers] = useState<BusinessParty[]>(mockBusinessParties);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedStage, setSelectedStage] = useState<
-    OpportunityStageEnum | "all"
-  >("all");
-  const [selectedCustomer, setSelectedCustomer] = useState<string>("all");
+  const [opportunities, setOpportunities] = useState<CrmOpportunity[]>(mockOpportunities)
+  const [customers] = useState<BusinessParty[]>(mockBusinessParties)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedStage, setSelectedStage] = useState<OpportunityStageEnum | 'all'>('all')
+  const [selectedCustomer, setSelectedCustomer] = useState<string>('all')
 
   // Modal states
-  const [isFormOpen, setIsFormOpen] = useState(false);
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [selectedOpportunity, setSelectedOpportunity] =
-    useState<CrmOpportunity | null>(null);
-  const [formMode, setFormMode] = useState<"create" | "edit">("create");
+  const [isFormOpen, setIsFormOpen] = useState(false)
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false)
+  const [selectedOpportunity, setSelectedOpportunity] = useState<CrmOpportunity | null>(null)
+  const [formMode, setFormMode] = useState<'create' | 'edit'>('create')
 
   const handleAdd = () => {
-    setSelectedOpportunity(null);
-    setFormMode("create");
-    setIsFormOpen(true);
-  };
+    setSelectedOpportunity(null)
+    setFormMode('create')
+    setIsFormOpen(true)
+  }
 
   const handleEdit = (opportunity: CrmOpportunity) => {
-    setSelectedOpportunity(opportunity);
-    setFormMode("edit");
-    setIsFormOpen(true);
-  };
+    setSelectedOpportunity(opportunity)
+    setFormMode('edit')
+    setIsFormOpen(true)
+  }
 
   const handleDelete = (id: string) => {
-    if (confirm("Bu fırsatı silmek istediğinizden emin misiniz?")) {
-      setOpportunities((prev) => prev.filter((opp) => opp.id !== id));
+    if (confirm('Bu fırsatı silmek istediğinizden emin misiniz?')) {
+      setOpportunities((prev) => prev.filter((opp) => opp.id !== id))
     }
-  };
+  }
 
   const handleViewDetails = (opportunity: CrmOpportunity) => {
-    setSelectedOpportunity(opportunity);
-    setIsDetailsOpen(true);
-  };
+    setSelectedOpportunity(opportunity)
+    setIsDetailsOpen(true)
+  }
 
   const handleSaveOpportunity = (opportunity: CrmOpportunity) => {
-    if (formMode === "create") {
-      setOpportunities((prev) => [...prev, opportunity]);
+    if (formMode === 'create') {
+      setOpportunities((prev) => [...prev, opportunity])
     } else {
-      setOpportunities((prev) =>
-        prev.map((opp) => (opp.id === opportunity.id ? opportunity : opp))
-      );
+      setOpportunities((prev) => prev.map((opp) => (opp.id === opportunity.id ? opportunity : opp)))
     }
-  };
+  }
 
   const handleCloseForm = () => {
-    setIsFormOpen(false);
-    setSelectedOpportunity(null);
-  };
+    setIsFormOpen(false)
+    setSelectedOpportunity(null)
+  }
 
   const handleCloseDetails = () => {
-    setIsDetailsOpen(false);
-    setSelectedOpportunity(null);
-  };
+    setIsDetailsOpen(false)
+    setSelectedOpportunity(null)
+  }
 
   const handleEditFromDetails = (opportunity: CrmOpportunity) => {
-    setIsDetailsOpen(false);
-    handleEdit(opportunity);
-  };
+    setIsDetailsOpen(false)
+    handleEdit(opportunity)
+  }
 
   const filteredOpportunities = opportunities.filter((opportunity) => {
     if (
@@ -96,56 +90,51 @@ const OpportunityManagement: React.FC = () => {
       !opportunity.title.toLowerCase().includes(searchTerm.toLowerCase()) &&
       !opportunity.description?.toLowerCase().includes(searchTerm.toLowerCase())
     ) {
-      return false;
+      return false
     }
-    if (selectedStage !== "all" && opportunity.stage !== selectedStage) {
-      return false;
+    if (selectedStage !== 'all' && opportunity.stage !== selectedStage) {
+      return false
     }
-    if (
-      selectedCustomer !== "all" &&
-      opportunity.customerId !== selectedCustomer
-    ) {
-      return false;
+    if (selectedCustomer !== 'all' && opportunity.customerId !== selectedCustomer) {
+      return false
     }
-    return true;
-  });
+    return true
+  })
 
   const columns: Column<CrmOpportunity>[] = [
     {
-      key: "title",
-      header: "Fırsat Başlığı",
+      key: 'title',
+      header: 'Fırsat Başlığı',
       sortable: true,
       render: (opportunity: CrmOpportunity) => (
         <div>
           <div className="font-medium text-gray-900">{opportunity.title}</div>
-          <div className="text-sm text-gray-500">
-            {opportunity.opportunityNumber}
-          </div>
+          <div className="text-sm text-gray-500">{opportunity.opportunityNumber}</div>
         </div>
       ),
     },
     {
-      key: "customer",
-      header: "Müşteri",
+      key: 'customer',
+      header: 'Müşteri',
       render: (opportunity: CrmOpportunity) => {
-        const customer = customers.find((c) => c.id === opportunity.customerId);
+        const customer = customers.find((c) => c.id === opportunity.customerId)
         return customer ? (
           <div className="flex items-center gap-2">
             <FaBuilding className="w-4 h-4 text-gray-400" />
             <span>{customer.name}</span>
           </div>
         ) : (
-          "-"
-        );
+          '-'
+        )
       },
     },
     {
-      key: "stage",
-      header: "Aşama",
+      key: 'stage',
+      header: 'Aşama',
       render: (opportunity: CrmOpportunity) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getOpportunityStageColor(
-            opportunity.stage
+            opportunity.stage,
           )}`}
         >
           {getOpportunityStageText(opportunity.stage)}
@@ -153,27 +142,23 @@ const OpportunityManagement: React.FC = () => {
       ),
     },
     {
-      key: "estimatedValue",
-      header: "Tahmini Değer",
+      key: 'estimatedValue',
+      header: 'Tahmini Değer',
       render: (opportunity: CrmOpportunity) => (
         <div className="flex items-center gap-1">
           <FaDollarSign className="w-4 h-4 text-gray-400" />
-          <span className="font-medium">
-            ₺{opportunity.estimatedValue.toLocaleString()}
-          </span>
+          <span className="font-medium">₺{opportunity.estimatedValue.toLocaleString()}</span>
         </div>
       ),
     },
     {
-      key: "probability",
-      header: "Olasılık",
+      key: 'probability',
+      header: 'Olasılık',
       render: (opportunity: CrmOpportunity) => (
         <div className="flex items-center gap-1">
           <FaArrowUp className="w-4 h-4 text-gray-400" />
           <span
-            className={`font-medium ${getOpportunityProbabilityColor(
-              opportunity.probability
-            )}`}
+            className={`font-medium ${getOpportunityProbabilityColor(opportunity.probability)}`}
           >
             %{opportunity.probability}
           </span>
@@ -181,22 +166,18 @@ const OpportunityManagement: React.FC = () => {
       ),
     },
     {
-      key: "expectedCloseDate",
-      header: "Beklenen Kapanış",
+      key: 'expectedCloseDate',
+      header: 'Beklenen Kapanış',
       render: (opportunity: CrmOpportunity) => (
         <div className="flex items-center gap-1 text-sm">
           <FaCalendar className="w-3 h-3 text-gray-400" />
-          <span>
-            {new Date(opportunity.expectedCloseDate).toLocaleDateString(
-              "tr-TR"
-            )}
-          </span>
+          <span>{new Date(opportunity.expectedCloseDate).toLocaleDateString('tr-TR')}</span>
         </div>
       ),
     },
     {
-      key: "assignedTo",
-      header: "Sorumlu",
+      key: 'assignedTo',
+      header: 'Sorumlu',
       render: (opportunity: CrmOpportunity) => (
         <div className="flex items-center gap-1">
           <FaUser className="w-4 h-4 text-gray-400" />
@@ -205,8 +186,8 @@ const OpportunityManagement: React.FC = () => {
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (opportunity: CrmOpportunity) => (
         <div className="flex gap-2">
           <button
@@ -233,238 +214,195 @@ const OpportunityManagement: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   // Calculate statistics
-  const totalOpportunities = opportunities.length;
+  const totalOpportunities = opportunities.length
   const activeOpportunities = opportunities.filter(
     (o) =>
-      o.stage !== OpportunityStageEnum.ClosedWon &&
-      o.stage !== OpportunityStageEnum.ClosedLost
-  ).length;
-  const totalValue = opportunities.reduce(
-    (sum, opp) => sum + opp.estimatedValue,
-    0
-  );
+      o.stage !== OpportunityStageEnum.ClosedWon && o.stage !== OpportunityStageEnum.ClosedLost,
+  ).length
+  const totalValue = opportunities.reduce((sum, opp) => sum + opp.estimatedValue, 0)
   const averageProbability =
-    opportunities.reduce((sum, opp) => sum + opp.probability, 0) /
-      opportunities.length || 0;
+    opportunities.reduce((sum, opp) => sum + opp.probability, 0) / opportunities.length || 0
 
   // Stage distribution
-  const stageDistribution = Object.values(OpportunityStageEnum).map(
-    (stage) => ({
-      stage,
-      count: opportunities.filter((o) => o.stage === stage).length,
-      value: opportunities
-        .filter((o) => o.stage === stage)
-        .reduce((sum, o) => sum + o.estimatedValue, 0),
-    })
-  );
+  const stageDistribution = Object.values(OpportunityStageEnum).map((stage) => ({
+    stage,
+    count: opportunities.filter((o) => o.stage === stage).length,
+    value: opportunities
+      .filter((o) => o.stage === stage)
+      .reduce((sum, o) => sum + o.estimatedValue, 0),
+  }))
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">
-            Teklif & Fırsat Yönetimi
-          </h2>
-          <p className="text-sm text-gray-600">
-            Satış fırsatları ve teklif takibi
-          </p>
-        </div>
-        <button
-          onClick={handleAdd}
-          className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-        >
-          <FaPlus className="w-4 h-4" />
-          Yeni Fırsat
-        </button>
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-        <Widget
-          title="Toplam Fırsat"
-          value={totalOpportunities}
-          color="blue"
-          icon="FaBullseye"
-        />
-
-        <Widget
-          title="Aktif Fırsat"
-          value={activeOpportunities}
-          color="green"
-          icon="FaArrowUp"
-        />
-
-        <Widget
-          title="Toplam Değer"
-          value={`₺${totalValue.toLocaleString()}`}
-          color="purple"
-          icon="FaDollarSign"
-        />
-
-        <Widget
-          title="Ortalama Olasılık"
-          value={`%${averageProbability.toFixed(0)}`}
-          color="orange"
-          icon="FaArrowUp"
-        />
-      </div>
-
-      {/* Stage Pipeline */}
-      <div className="bg-white rounded-lg shadow-sm border p-3">
-        <h3 className="text-sm font-semibold text-gray-900 mb-3">
-          Satış Aşamaları
-        </h3>
-        <div className="grid grid-cols-2 md:grid-cols-6 gap-2">
-          {stageDistribution.map(({ stage, count, value }) => (
-            <div key={stage} className="text-center p-2 border rounded-lg">
-              <div
-                className={`inline-block px-2 py-0.5 text-xs font-medium rounded-full mb-1 ${getOpportunityStageColor(
-                  stage
-                )}`}
-              >
-                {getOpportunityStageText(stage)}
-              </div>
-              <div className="text-lg font-bold text-gray-900 mb-1">
-                {count}
-              </div>
-              <div className="text-xs text-gray-500">
-                ₺{value.toLocaleString()}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Win Rate Analysis */}
-      <div className="bg-white rounded-lg shadow-sm border p-3">
-        <h3 className="text-sm font-semibold text-gray-900 mb-3">
-          Başarı Oranı Analizi
-        </h3>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div className="text-center">
-            <div className="text-2xl font-bold text-green-600 mb-1">
-              {
-                opportunities.filter(
-                  (o) => o.stage === OpportunityStageEnum.ClosedWon
-                ).length
-              }
-            </div>
-            <p className="text-sm text-gray-600">Kazanılan Fırsat</p>
-          </div>
-
-          <div className="text-center">
-            <div className="text-2xl font-bold text-red-600 mb-1">
-              {
-                opportunities.filter(
-                  (o) => o.stage === OpportunityStageEnum.ClosedLost
-                ).length
-              }
-            </div>
-            <p className="text-sm text-gray-600">Kaybedilen Fırsat</p>
-          </div>
-
-          <div className="text-center">
-            <div className="text-2xl font-bold text-blue-600 mb-1">
-              {Math.round(
-                (opportunities.filter(
-                  (o) => o.stage === OpportunityStageEnum.ClosedWon
-                ).length /
-                  Math.max(
-                    opportunities.filter(
-                      (o) =>
-                        o.stage === OpportunityStageEnum.ClosedWon ||
-                        o.stage === OpportunityStageEnum.ClosedLost
-                    ).length,
-                    1
-                  )) *
-                  100
-              )}
-              %
-            </div>
-            <p className="text-sm text-gray-600">Kazanma Oranı</p>
+    <Container>
+      <div className="space-y-3 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">Teklif & Fırsat Yönetimi</h2>
+            <p className="text-sm text-gray-600">Satış fırsatları ve teklif takibi</p>
           </div>
+          <button
+            onClick={handleAdd}
+            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          >
+            <FaPlus className="w-4 h-4" />
+            Yeni Fırsat
+          </button>
         </div>
-      </div>
 
-      {/* Filters */}
-      <div className="flex gap-3 items-center">
-        <div className="flex-1">
-          <input
-            type="text"
-            placeholder="Fırsat başlığı ara..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <Widget title="Toplam Fırsat" value={totalOpportunities} color="blue" icon="FaBullseye" />
+
+          <Widget title="Aktif Fırsat" value={activeOpportunities} color="green" icon="FaArrowUp" />
+
+          <Widget
+            title="Toplam Değer"
+            value={`₺${totalValue.toLocaleString()}`}
+            color="purple"
+            icon="FaDollarSign"
+          />
+
+          <Widget
+            title="Ortalama Olasılık"
+            value={`%${averageProbability.toFixed(0)}`}
+            color="orange"
+            icon="FaArrowUp"
           />
         </div>
 
-        <select
-          value={selectedStage}
-          onChange={(e) =>
-            setSelectedStage(e.target.value as OpportunityStageEnum | "all")
-          }
-          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Aşamalar</option>
-          {Object.values(OpportunityStageEnum).map((stage) => (
-            <option key={stage} value={stage}>
-              {getOpportunityStageText(stage)}
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={selectedCustomer}
-          onChange={(e) => setSelectedCustomer(e.target.value)}
-          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Müşteriler</option>
-          {customers.map((customer) => (
-            <option key={customer.id} value={customer.id}>
-              {customer.name}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {/* Data Table */}
-      <div className="bg-white rounded-lg shadow-sm border">
-        <DataTable data={filteredOpportunities} columns={columns} />
-      </div>
-
-      {filteredOpportunities.length === 0 && (
-        <div className="text-center py-12">
-          <FaBullseye className="w-10 h-10 text-gray-400 mx-auto mb-3" />
-          <h3 className="text-sm font-medium text-gray-900 mb-2">
-            Fırsat bulunamadı
-          </h3>
-          <p className="text-gray-500">
-            Arama kriterlerinizi değiştirmeyi deneyin.
-          </p>
+        {/* Stage Pipeline */}
+        <div className="bg-white rounded-lg shadow-sm border p-3">
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">Satış Aşamaları</h3>
+          <div className="grid grid-cols-2 md:grid-cols-6 gap-2">
+            {stageDistribution.map(({ stage, count, value }) => (
+              <div key={stage} className="text-center p-2 border rounded-lg">
+                <div
+                  className={`inline-block px-2 py-0.5 text-xs font-medium rounded-full mb-1 ${getOpportunityStageColor(
+                    stage,
+                  )}`}
+                >
+                  {getOpportunityStageText(stage)}
+                </div>
+                <div className="text-lg font-bold text-gray-900 mb-1">{count}</div>
+                <div className="text-xs text-gray-500">₺{value.toLocaleString()}</div>
+              </div>
+            ))}
+          </div>
         </div>
-      )}
 
-      {/* Modals */}
-      <OpportunityForm
-        isOpen={isFormOpen}
-        onClose={handleCloseForm}
-        onSave={handleSaveOpportunity}
-        opportunity={selectedOpportunity}
-        mode={formMode}
-      />
+        {/* Win Rate Analysis */}
+        <div className="bg-white rounded-lg shadow-sm border p-3">
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">Başarı Oranı Analizi</h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-green-600 mb-1">
+                {opportunities.filter((o) => o.stage === OpportunityStageEnum.ClosedWon).length}
+              </div>
+              <p className="text-sm text-gray-600">Kazanılan Fırsat</p>
+            </div>
 
-      <OpportunityDetails
-        isOpen={isDetailsOpen}
-        onClose={handleCloseDetails}
-        onEdit={handleEditFromDetails}
-        opportunity={selectedOpportunity}
-      />
-    </div>
-  );
-};
+            <div className="text-center">
+              <div className="text-2xl font-bold text-red-600 mb-1">
+                {opportunities.filter((o) => o.stage === OpportunityStageEnum.ClosedLost).length}
+              </div>
+              <p className="text-sm text-gray-600">Kaybedilen Fırsat</p>
+            </div>
 
-export default OpportunityManagement;
+            <div className="text-center">
+              <div className="text-2xl font-bold text-blue-600 mb-1">
+                {Math.round(
+                  (opportunities.filter((o) => o.stage === OpportunityStageEnum.ClosedWon).length /
+                    Math.max(
+                      opportunities.filter(
+                        (o) =>
+                          o.stage === OpportunityStageEnum.ClosedWon ||
+                          o.stage === OpportunityStageEnum.ClosedLost,
+                      ).length,
+                      1,
+                    )) *
+                    100,
+                )}
+                %
+              </div>
+              <p className="text-sm text-gray-600">Kazanma Oranı</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="flex gap-3 items-center">
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="Fırsat başlığı ara..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <select
+            value={selectedStage}
+            onChange={(e) => setSelectedStage(e.target.value as OpportunityStageEnum | 'all')}
+            className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm Aşamalar</option>
+            {Object.values(OpportunityStageEnum).map((stage) => (
+              <option key={stage} value={stage}>
+                {getOpportunityStageText(stage)}
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={selectedCustomer}
+            onChange={(e) => setSelectedCustomer(e.target.value)}
+            className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm Müşteriler</option>
+            {customers.map((customer) => (
+              <option key={customer.id} value={customer.id}>
+                {customer.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Data Table */}
+        <div className="bg-white rounded-lg shadow-sm border">
+          <DataTable data={filteredOpportunities} columns={columns} />
+        </div>
+
+        {filteredOpportunities.length === 0 && (
+          <div className="text-center py-12">
+            <FaBullseye className="w-10 h-10 text-gray-400 mx-auto mb-3" />
+            <h3 className="text-sm font-medium text-gray-900 mb-2">Fırsat bulunamadı</h3>
+            <p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
+          </div>
+        )}
+
+        {/* Modals */}
+        <OpportunityForm
+          isOpen={isFormOpen}
+          onClose={handleCloseForm}
+          onSave={handleSaveOpportunity}
+          opportunity={selectedOpportunity}
+          mode={formMode}
+        />
+
+        <OpportunityDetails
+          isOpen={isDetailsOpen}
+          onClose={handleCloseDetails}
+          onEdit={handleEditFromDetails}
+          opportunity={selectedOpportunity}
+        />
+      </div>
+    </Container>
+  )
+}
+
+export default OpportunityManagement
diff --git a/ui/src/views/crm/components/SalesOrderForm.tsx b/ui/src/views/crm/components/SalesOrderForm.tsx
index bb5e741d..40a6f994 100644
--- a/ui/src/views/crm/components/SalesOrderForm.tsx
+++ b/ui/src/views/crm/components/SalesOrderForm.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import React, { useState, useEffect } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
 import {
   FaSave,
   FaTimes,
@@ -11,31 +11,32 @@ import {
   FaBuilding,
   FaClipboardList,
   FaNotesMedical,
-} from "react-icons/fa";
+} from 'react-icons/fa'
 import {
   SaleOrderStatusEnum,
   CrmSalesOrder,
   CrmSalesOrderItem,
   SaleOrderItemStatusEnum,
-} from "../../../types/crm";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
-import { mockMaterials } from "../../../mocks/mockMaterials";
-import { mockSalesOrders } from "../../../mocks/mockSalesOrders";
-import { BusinessParty, PaymentTerms } from "../../../types/common";
+} from '../../../types/crm'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
+import { mockMaterials } from '../../../mocks/mockMaterials'
+import { mockSalesOrders } from '../../../mocks/mockSalesOrders'
+import { BusinessParty, PaymentTerms } from '../../../types/common'
+import { Container } from '@/components/shared'
 
 const SalesOrderForm: React.FC = () => {
-  const navigate = useNavigate();
-  const { id } = useParams();
-  const isEdit = Boolean(id);
+  const navigate = useNavigate()
+  const { id } = useParams()
+  const isEdit = Boolean(id)
 
-  const [customers] = useState<BusinessParty[]>(mockBusinessParties);
-  const [materials] = useState(mockMaterials);
+  const [customers] = useState<BusinessParty[]>(mockBusinessParties)
+  const [materials] = useState(mockMaterials)
 
   // Form data state with extended fields for form handling
   const [formData, setFormData] = useState<CrmSalesOrder>({
-    id: "",
-    orderNumber: "",
-    customerId: "",
+    id: '',
+    orderNumber: '',
+    customerId: '',
     customer: undefined,
     orderDate: new Date(),
     requestedDeliveryDate: new Date(),
@@ -45,76 +46,73 @@ const SalesOrderForm: React.FC = () => {
     taxAmount: 0,
     discountAmount: 0,
     totalAmount: 0,
-    currency: "TRY",
+    currency: 'TRY',
     paymentTerms: PaymentTerms.Net30,
     deliveryAddress: {
-      street: "",
-      city: "",
-      state: "",
-      postalCode: "",
-      country: "Türkiye",
+      street: '',
+      city: '',
+      state: '',
+      postalCode: '',
+      country: 'Türkiye',
     },
     billingAddress: {
-      street: "",
-      city: "",
-      state: "",
-      postalCode: "",
-      country: "Türkiye",
+      street: '',
+      city: '',
+      state: '',
+      postalCode: '',
+      country: 'Türkiye',
     },
     items: [],
     deliveries: [],
     creationTime: new Date(),
     lastModificationTime: new Date(),
     // Additional form fields
-    deliveryTerms: "",
-    notes: "",
+    deliveryTerms: '',
+    notes: '',
     exchangeRate: 1,
     discountRate: 0,
     taxRate: 18,
-    specialInstructions: "",
-  });
+    specialInstructions: '',
+  })
 
   const [newItem, setNewItem] = useState<Partial<CrmSalesOrderItem>>({
-    materialId: "",
+    materialId: '',
     quantity: 1,
     unitPrice: 0,
     discountRate: 0,
     taxRate: 18,
-    notes: "",
-  });
+    notes: '',
+  })
 
-  const [showItemForm, setShowItemForm] = useState(false);
-  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [showItemForm, setShowItemForm] = useState(false)
+  const [errors, setErrors] = useState<Record<string, string>>({})
 
   useEffect(() => {
     if (isEdit && id) {
-      const existingOrder = mockSalesOrders.find((order) => order.id === id);
+      const existingOrder = mockSalesOrders.find((order) => order.id === id)
       if (existingOrder) {
-        setFormData(existingOrder);
+        setFormData(existingOrder)
       }
       // Load existing sales order data
       // This would typically come from an API call
-      console.log("Loading sales order:", id);
+      console.log('Loading sales order:', id)
     }
-  }, [id, isEdit]);
+  }, [id, isEdit])
 
   useEffect(() => {
     const calculateTotals = () => {
-      if (!formData.items) return;
+      if (!formData.items) return
 
-      const subtotal = formData.items.reduce(
-        (sum: number, item: CrmSalesOrderItem) => {
-          const itemTotal = item.quantity * item.unitPrice;
-          const itemDiscount = itemTotal * ((item.discountRate || 0) / 100);
-          return sum + (itemTotal - itemDiscount);
-        },
-        0
-      );
+      const subtotal = formData.items.reduce((sum: number, item: CrmSalesOrderItem) => {
+        const itemTotal = item.quantity * item.unitPrice
+        const itemDiscount = itemTotal * ((item.discountRate || 0) / 100)
+        return sum + (itemTotal - itemDiscount)
+      }, 0)
 
-      const discountAmount = subtotal * ((formData.discountRate || 0) / 100);
-      const taxableAmount = subtotal - discountAmount;
-      const taxAmount = taxableAmount * ((formData.taxRate || 18) / 100);
-      const totalAmount = taxableAmount + taxAmount;
+      const discountAmount = subtotal * ((formData.discountRate || 0) / 100)
+      const taxableAmount = subtotal - discountAmount
+      const taxAmount = taxableAmount * ((formData.taxRate || 18) / 100)
+      const totalAmount = taxableAmount + taxAmount
 
       setFormData((prev: CrmSalesOrder) => ({
         ...prev,
@@ -122,53 +120,47 @@ const SalesOrderForm: React.FC = () => {
         discountAmount,
         taxAmount,
         totalAmount,
-      }));
-    };
+      }))
+    }
 
-    calculateTotals();
-  }, [formData.items, formData.discountRate, formData.taxRate]);
+    calculateTotals()
+  }, [formData.items, formData.discountRate, formData.taxRate])
 
   const handleInputChange = (
     field: string,
-    value:
-      | string
-      | number
-      | SaleOrderStatusEnum
-      | PaymentTerms
-      | Date
-      | undefined
+    value: string | number | SaleOrderStatusEnum | PaymentTerms | Date | undefined,
   ) => {
     setFormData((prev: CrmSalesOrder) => ({
       ...prev,
       [field]: value,
-    }));
+    }))
 
     if (errors[field]) {
       setErrors((prev: Record<string, string>) => ({
         ...prev,
-        [field]: "",
-      }));
+        [field]: '',
+      }))
     }
-  };
+  }
 
   const handleAddItem = () => {
     if (!newItem.materialId || !newItem.quantity || !newItem.unitPrice) {
-      alert("Lütfen tüm item bilgilerini doldurun!");
-      return;
+      alert('Lütfen tüm item bilgilerini doldurun!')
+      return
     }
 
-    const material = materials.find((m) => m.id === newItem.materialId);
-    if (!material) return;
+    const material = materials.find((m) => m.id === newItem.materialId)
+    if (!material) return
 
-    const itemTotal = (newItem.quantity || 0) * (newItem.unitPrice || 0);
-    const itemDiscount = itemTotal * ((newItem.discountRate || 0) / 100);
-    const itemTaxableAmount = itemTotal - itemDiscount;
-    const itemTaxAmount = itemTaxableAmount * ((newItem.taxRate || 0) / 100);
-    const itemTotalAmount = itemTaxableAmount + itemTaxAmount;
+    const itemTotal = (newItem.quantity || 0) * (newItem.unitPrice || 0)
+    const itemDiscount = itemTotal * ((newItem.discountRate || 0) / 100)
+    const itemTaxableAmount = itemTotal - itemDiscount
+    const itemTaxAmount = itemTaxableAmount * ((newItem.taxRate || 0) / 100)
+    const itemTotalAmount = itemTaxableAmount + itemTaxAmount
 
     const item: CrmSalesOrderItem = {
       id: `item_${Date.now()}`,
-      orderId: formData.id || "",
+      orderId: formData.id || '',
       materialId: newItem.materialId!,
       material: material,
       description: material.name,
@@ -185,393 +177,527 @@ const SalesOrderForm: React.FC = () => {
       requestedDate: formData.requestedDeliveryDate,
       confirmedDate: undefined,
       status: SaleOrderItemStatusEnum.Pending,
-      notes: newItem.notes || "",
-    };
+      notes: newItem.notes || '',
+    }
 
     setFormData((prev: CrmSalesOrder) => ({
       ...prev,
       items: [...prev.items, item],
-    }));
+    }))
 
     setNewItem({
-      materialId: "",
+      materialId: '',
       quantity: 1,
       unitPrice: 0,
       discountRate: 0,
       taxRate: 18,
-      notes: "",
-    });
-    setShowItemForm(false);
-  };
+      notes: '',
+    })
+    setShowItemForm(false)
+  }
 
   const handleRemoveItem = (itemId: string) => {
     setFormData((prev: CrmSalesOrder) => ({
       ...prev,
       items: prev.items.filter((item: CrmSalesOrderItem) => item.id !== itemId),
-    }));
-  };
+    }))
+  }
 
   const validateForm = (): boolean => {
-    const newErrors: Record<string, string> = {};
+    const newErrors: Record<string, string> = {}
 
     if (!formData.orderNumber) {
-      newErrors.orderNumber = "Sipariş numarası gerekli";
+      newErrors.orderNumber = 'Sipariş numarası gerekli'
     }
     if (!formData.customerId) {
-      newErrors.customerId = "Müşteri seçimi gerekli";
+      newErrors.customerId = 'Müşteri seçimi gerekli'
     }
     if (!formData.orderDate) {
-      newErrors.orderDate = "Sipariş tarihi gerekli";
+      newErrors.orderDate = 'Sipariş tarihi gerekli'
     }
     if (!formData.items || formData.items.length === 0) {
-      newErrors.items = "En az bir ürün eklemelisiniz";
+      newErrors.items = 'En az bir ürün eklemelisiniz'
     }
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (!validateForm()) {
-      return;
+      return
     }
 
     try {
       // Here you would make an API call to save the sales order
-      console.log("Saving sales order:", formData);
+      console.log('Saving sales order:', formData)
 
       // Navigate back to sales orders list
-      navigate("/admin/crm/sales-orders");
+      navigate('/admin/crm/sales-orders')
     } catch (error) {
-      console.error("Error saving sales order:", error);
-      alert("Sipariş kaydedilirken bir hata oluştu!");
+      console.error('Error saving sales order:', error)
+      alert('Sipariş kaydedilirken bir hata oluştu!')
     }
-  };
+  }
 
-  const selectedCustomer = customers.find((c) => c.id === formData.customerId);
+  const selectedCustomer = customers.find((c) => c.id === formData.customerId)
 
   return (
-    <div className="space-y-6 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">
-            {isEdit ? "Satış Siparişi Düzenle" : "Yeni Satış Siparişi"}
-          </h2>
-          <p className="text-sm text-gray-600 mt-1">
-            Müşteri siparişi oluştur ve yönet
-          </p>
-        </div>
-        <div className="flex gap-2">
-          <button
-            type="button"
-            onClick={() => navigate("/admin/crm/sales-orders")}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors"
-          >
-            <FaTimes className="w-4 h-4" />
-            İptal
-          </button>
-          <button
-            onClick={handleSubmit}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-          >
-            <FaSave className="w-4 h-4" />
-            Kaydet
-          </button>
-        </div>
-      </div>
-
-      <form onSubmit={handleSubmit} className="space-y-4">
-        {/* Order Information Card */}
-        <div className="bg-white rounded-lg shadow-sm border p-4">
-          <div className="flex items-center gap-2 mb-3">
-            <FaShoppingCart className="w-5 h-5 text-blue-600" />
-            <h3 className="text-base font-semibold text-gray-900">
-              Sipariş Bilgileri
-            </h3>
+    <Container>
+      <div className="space-y-6 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">
+              {isEdit ? 'Satış Siparişi Düzenle' : 'Yeni Satış Siparişi'}
+            </h2>
+            <p className="text-sm text-gray-600 mt-1">Müşteri siparişi oluştur ve yönet</p>
           </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Sipariş Numarası *
-              </label>
-              <input
-                type="text"
-                value={formData.orderNumber}
-                onChange={(e) =>
-                  handleInputChange("orderNumber", e.target.value)
-                }
-                className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                  errors.orderNumber ? "border-red-500" : "border-gray-300"
-                }`}
-                placeholder="ORD-2024-001"
-              />
-              {errors.orderNumber && (
-                <p className="text-red-500 text-sm mt-1">
-                  {errors.orderNumber}
-                </p>
-              )}
-            </div>
-
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Sipariş Tarihi *
-              </label>
-              <input
-                type="date"
-                value={formData.orderDate.toISOString().split("T")[0]}
-                onChange={(e) =>
-                  handleInputChange("orderDate", new Date(e.target.value))
-                }
-                className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                  errors.orderDate ? "border-red-500" : "border-gray-300"
-                }`}
-              />
-              {errors.orderDate && (
-                <p className="text-red-500 text-sm mt-1">{errors.orderDate}</p>
-              )}
-            </div>
-
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Durum
-              </label>
-              <select
-                value={formData.status}
-                onChange={(e) =>
-                  handleInputChange(
-                    "status",
-                    e.target.value as SaleOrderStatusEnum
-                  )
-                }
-                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                <option value={SaleOrderStatusEnum.Draft}>Taslak</option>
-                <option value={SaleOrderStatusEnum.Confirmed}>Onaylandı</option>
-                <option value={SaleOrderStatusEnum.InProduction}>
-                  Üretimde
-                </option>
-                <option value={SaleOrderStatusEnum.Ready}>Hazır</option>
-                <option value={SaleOrderStatusEnum.Shipped}>Kargoda</option>
-                <option value={SaleOrderStatusEnum.Delivered}>
-                  Teslim Edildi
-                </option>
-                <option value={SaleOrderStatusEnum.Cancelled}>
-                  İptal Edildi
-                </option>
-              </select>
-            </div>
-          </div>
-        </div>
-
-        {/* Customer Information Card */}
-        <div className="bg-white rounded-lg shadow-sm border p-4">
-          <div className="flex items-center gap-2 mb-3">
-            <FaBuilding className="w-5 h-5 text-blue-600" />
-            <h3 className="text-base font-semibold text-gray-900">
-              Müşteri Bilgileri
-            </h3>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div className="md:col-span-2">
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Müşteri *
-              </label>
-              <select
-                value={formData.customerId}
-                onChange={(e) =>
-                  handleInputChange("customerId", e.target.value)
-                }
-                className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                  errors.customerId ? "border-red-500" : "border-gray-300"
-                }`}
-              >
-                <option value="">Müşteri seçin...</option>
-                {customers.map((customer) => (
-                  <option key={customer.id} value={customer.id}>
-                    {customer.name} - {customer.primaryContact?.fullName}
-                  </option>
-                ))}
-              </select>
-              {errors.customerId && (
-                <p className="text-red-500 text-sm mt-1">{errors.customerId}</p>
-              )}
-            </div>
-
-            {selectedCustomer && (
-              <>
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    İletişim Kişisi
-                  </label>
-                  <input
-                    type="text"
-                    value={selectedCustomer.primaryContact?.fullName}
-                    disabled
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md bg-gray-50"
-                  />
-                </div>
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Telefon
-                  </label>
-                  <input
-                    type="text"
-                    value={selectedCustomer.primaryContact?.phone || ""}
-                    disabled
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md bg-gray-50"
-                  />
-                </div>
-                <div className="md:col-span-2">
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Adres
-                  </label>
-                  <textarea
-                    value={`${selectedCustomer.address?.street}, ${selectedCustomer.address?.city}, ${selectedCustomer.address?.country}`}
-                    disabled
-                    rows={2}
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md bg-gray-50"
-                  />
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Delivery Information Card */}
-        <div className="bg-white rounded-lg shadow-sm border p-4">
-          <div className="flex items-center gap-2 mb-3">
-            <FaCalendar className="w-5 h-5 text-blue-600" />
-            <h3 className="text-base font-semibold text-gray-900">
-              Teslimat Bilgileri
-            </h3>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                İstenen Teslimat Tarihi
-              </label>
-              <input
-                type="date"
-                value={
-                  formData.requestedDeliveryDate.toISOString().split("T")[0]
-                }
-                onChange={(e) =>
-                  handleInputChange(
-                    "requestedDeliveryDate",
-                    new Date(e.target.value)
-                  )
-                }
-                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
-
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Onaylanmış Teslimat Tarihi
-              </label>
-              <input
-                type="date"
-                value={
-                  formData.confirmedDeliveryDate?.toISOString().split("T")[0] ||
-                  ""
-                }
-                onChange={(e) =>
-                  handleInputChange(
-                    "confirmedDeliveryDate",
-                    e.target.value ? new Date(e.target.value) : undefined
-                  )
-                }
-                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
-
-            <div className="md:col-span-2">
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Teslimat Koşulları
-              </label>
-              <input
-                type="text"
-                value={formData.deliveryTerms}
-                onChange={(e) =>
-                  handleInputChange("deliveryTerms", e.target.value)
-                }
-                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="EXW, FOB, CIF, vb."
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Order Items Card */}
-        <div className="bg-white rounded-lg shadow-sm border p-4">
-          <div className="flex items-center justify-between mb-3">
-            <div className="flex items-center gap-2">
-              <FaClipboardList className="w-5 h-5 text-blue-600" />
-              <h3 className="text-base font-semibold text-gray-900">
-                Sipariş Kalemleri
-              </h3>
-            </div>
+          <div className="flex gap-2">
             <button
               type="button"
-              onClick={() => setShowItemForm(true)}
-              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+              onClick={() => navigate('/admin/crm/sales-orders')}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors"
             >
-              <FaPlus className="w-4 h-4" />
-              Kalem Ekle
+              <FaTimes className="w-4 h-4" />
+              İptal
+            </button>
+            <button
+              onClick={handleSubmit}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            >
+              <FaSave className="w-4 h-4" />
+              Kaydet
             </button>
           </div>
+        </div>
 
-          {errors.items && (
-            <p className="text-red-500 text-sm mb-4">{errors.items}</p>
-          )}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Order Information Card */}
+          <div className="bg-white rounded-lg shadow-sm border p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <FaShoppingCart className="w-5 h-5 text-blue-600" />
+              <h3 className="text-base font-semibold text-gray-900">Sipariş Bilgileri</h3>
+            </div>
 
-          {/* Add Item Form */}
-          {showItemForm && (
-            <div className="bg-gray-50 p-3 rounded-lg mb-3">
-              <div className="grid grid-cols-1 md:grid-cols-6 gap-3">
-                <div className="md:col-span-2">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  Sipariş Numarası *
+                </label>
+                <input
+                  type="text"
+                  value={formData.orderNumber}
+                  onChange={(e) => handleInputChange('orderNumber', e.target.value)}
+                  className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                    errors.orderNumber ? 'border-red-500' : 'border-gray-300'
+                  }`}
+                  placeholder="ORD-2024-001"
+                />
+                {errors.orderNumber && (
+                  <p className="text-red-500 text-sm mt-1">{errors.orderNumber}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  Sipariş Tarihi *
+                </label>
+                <input
+                  type="date"
+                  value={formData.orderDate.toISOString().split('T')[0]}
+                  onChange={(e) => handleInputChange('orderDate', new Date(e.target.value))}
+                  className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                    errors.orderDate ? 'border-red-500' : 'border-gray-300'
+                  }`}
+                />
+                {errors.orderDate && (
+                  <p className="text-red-500 text-sm mt-1">{errors.orderDate}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Durum</label>
+                <select
+                  value={formData.status}
+                  onChange={(e) =>
+                    handleInputChange('status', e.target.value as SaleOrderStatusEnum)
+                  }
+                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value={SaleOrderStatusEnum.Draft}>Taslak</option>
+                  <option value={SaleOrderStatusEnum.Confirmed}>Onaylandı</option>
+                  <option value={SaleOrderStatusEnum.InProduction}>Üretimde</option>
+                  <option value={SaleOrderStatusEnum.Ready}>Hazır</option>
+                  <option value={SaleOrderStatusEnum.Shipped}>Kargoda</option>
+                  <option value={SaleOrderStatusEnum.Delivered}>Teslim Edildi</option>
+                  <option value={SaleOrderStatusEnum.Cancelled}>İptal Edildi</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          {/* Customer Information Card */}
+          <div className="bg-white rounded-lg shadow-sm border p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <FaBuilding className="w-5 h-5 text-blue-600" />
+              <h3 className="text-base font-semibold text-gray-900">Müşteri Bilgileri</h3>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="md:col-span-2">
+                <label className="block text-xs font-medium text-gray-700 mb-1">Müşteri *</label>
+                <select
+                  value={formData.customerId}
+                  onChange={(e) => handleInputChange('customerId', e.target.value)}
+                  className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                    errors.customerId ? 'border-red-500' : 'border-gray-300'
+                  }`}
+                >
+                  <option value="">Müşteri seçin...</option>
+                  {customers.map((customer) => (
+                    <option key={customer.id} value={customer.id}>
+                      {customer.name} - {customer.primaryContact?.fullName}
+                    </option>
+                  ))}
+                </select>
+                {errors.customerId && (
+                  <p className="text-red-500 text-sm mt-1">{errors.customerId}</p>
+                )}
+              </div>
+
+              {selectedCustomer && (
+                <>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                      İletişim Kişisi
+                    </label>
+                    <input
+                      type="text"
+                      value={selectedCustomer.primaryContact?.fullName}
+                      disabled
+                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md bg-gray-50"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">Telefon</label>
+                    <input
+                      type="text"
+                      value={selectedCustomer.primaryContact?.phone || ''}
+                      disabled
+                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md bg-gray-50"
+                    />
+                  </div>
+                  <div className="md:col-span-2">
+                    <label className="block text-xs font-medium text-gray-700 mb-1">Adres</label>
+                    <textarea
+                      value={`${selectedCustomer.address?.street}, ${selectedCustomer.address?.city}, ${selectedCustomer.address?.country}`}
+                      disabled
+                      rows={2}
+                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md bg-gray-50"
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Delivery Information Card */}
+          <div className="bg-white rounded-lg shadow-sm border p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <FaCalendar className="w-5 h-5 text-blue-600" />
+              <h3 className="text-base font-semibold text-gray-900">Teslimat Bilgileri</h3>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  İstenen Teslimat Tarihi
+                </label>
+                <input
+                  type="date"
+                  value={formData.requestedDeliveryDate.toISOString().split('T')[0]}
+                  onChange={(e) =>
+                    handleInputChange('requestedDeliveryDate', new Date(e.target.value))
+                  }
+                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  Onaylanmış Teslimat Tarihi
+                </label>
+                <input
+                  type="date"
+                  value={formData.confirmedDeliveryDate?.toISOString().split('T')[0] || ''}
+                  onChange={(e) =>
+                    handleInputChange(
+                      'confirmedDeliveryDate',
+                      e.target.value ? new Date(e.target.value) : undefined,
+                    )
+                  }
+                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+
+              <div className="md:col-span-2">
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  Teslimat Koşulları
+                </label>
+                <input
+                  type="text"
+                  value={formData.deliveryTerms}
+                  onChange={(e) => handleInputChange('deliveryTerms', e.target.value)}
+                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="EXW, FOB, CIF, vb."
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Order Items Card */}
+          <div className="bg-white rounded-lg shadow-sm border p-4">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <FaClipboardList className="w-5 h-5 text-blue-600" />
+                <h3 className="text-base font-semibold text-gray-900">Sipariş Kalemleri</h3>
+              </div>
+              <button
+                type="button"
+                onClick={() => setShowItemForm(true)}
+                className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+              >
+                <FaPlus className="w-4 h-4" />
+                Kalem Ekle
+              </button>
+            </div>
+
+            {errors.items && <p className="text-red-500 text-sm mb-4">{errors.items}</p>}
+
+            {/* Add Item Form */}
+            {showItemForm && (
+              <div className="bg-gray-50 p-3 rounded-lg mb-3">
+                <div className="grid grid-cols-1 md:grid-cols-6 gap-3">
+                  <div className="md:col-span-2">
+                    <label className="block text-xs font-medium text-gray-700 mb-1">Malzeme</label>
+                    <select
+                      value={newItem.materialId || ''}
+                      onChange={(e) =>
+                        setNewItem((prev: Partial<CrmSalesOrderItem>) => ({
+                          ...prev,
+                          materialId: e.target.value,
+                        }))
+                      }
+                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                      <option value="">Malzeme seçin...</option>
+                      {materials.map((material) => (
+                        <option key={material.id} value={material.id}>
+                          {material.code} - {material.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">Miktar</label>
+                    <input
+                      type="number"
+                      min="0"
+                      step="0.01"
+                      value={newItem.quantity || ''}
+                      onChange={(e) =>
+                        setNewItem((prev: Partial<CrmSalesOrderItem>) => ({
+                          ...prev,
+                          quantity: parseFloat(e.target.value) || 0,
+                        }))
+                      }
+                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                      Birim Fiyat
+                    </label>
+                    <input
+                      type="number"
+                      min="0"
+                      step="0.01"
+                      value={newItem.unitPrice || ''}
+                      onChange={(e) =>
+                        setNewItem((prev: Partial<CrmSalesOrderItem>) => ({
+                          ...prev,
+                          unitPrice: parseFloat(e.target.value) || 0,
+                        }))
+                      }
+                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                      İskonto (%)
+                    </label>
+                    <input
+                      type="number"
+                      min="0"
+                      max="100"
+                      step="0.01"
+                      value={newItem.discountRate || ''}
+                      onChange={(e) =>
+                        setNewItem((prev: Partial<CrmSalesOrderItem>) => ({
+                          ...prev,
+                          discountRate: parseFloat(e.target.value) || 0,
+                        }))
+                      }
+                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+
+                  <div className="flex items-end gap-2">
+                    <button
+                      type="button"
+                      onClick={handleAddItem}
+                      className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+                    >
+                      <FaPlus className="w-4 h-4" />
+                      Ekle
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setShowItemForm(false)}
+                      className="flex items-center gap-2 px-3 py-1.5 text-sm border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors"
+                    >
+                      <FaTimes className="w-4 h-4" />
+                      İptal
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Items Table */}
+            {formData.items && formData.items.length > 0 ? (
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Malzeme
+                      </th>
+                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Miktar
+                      </th>
+                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Birim Fiyat
+                      </th>
+                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        İskonto
+                      </th>
+                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        KDV
+                      </th>
+                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Toplam
+                      </th>
+                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        İşlemler
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white divide-y divide-gray-200">
+                    {formData.items.map((item: CrmSalesOrderItem) => (
+                      <tr key={item.id}>
+                        <td className="px-3 py-2 whitespace-nowrap">
+                          <div>
+                            <div className="text-sm font-medium text-gray-900">
+                              {item.material?.code || item.materialId}
+                            </div>
+                            <div className="text-xs text-gray-500">
+                              {item.material?.name || item.description}
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                          {item.quantity} {item.unit?.name || ''}
+                        </td>
+                        <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                          ₺{item.unitPrice.toLocaleString()}
+                        </td>
+                        <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                          %{item.discountRate || 0} <br />
+                          <span className="text-xs text-gray-500">
+                            (₺{(item.discountAmount || 0).toLocaleString()})
+                          </span>
+                        </td>
+                        <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                          %{item.taxRate || 18} <br />
+                          <span className="text-xs text-gray-500">
+                            (₺{(item.taxAmount || 0).toLocaleString()})
+                          </span>
+                        </td>
+                        <td className="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
+                          ₺{item.totalAmount.toLocaleString()}
+                        </td>
+                        <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
+                          <button
+                            type="button"
+                            onClick={() => handleRemoveItem(item.id)}
+                            className="text-red-600 hover:text-red-900"
+                          >
+                            <FaTrash className="w-4 h-4" />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="text-center py-8 text-gray-500">
+                Henüz sipariş kalemi eklenmedi. Yukarıdaki "Kalem Ekle" butonunu kullanarak ürün
+                ekleyebilirsiniz.
+              </div>
+            )}
+          </div>
+
+          {/* Financial Information Card */}
+          <div className="bg-white rounded-lg shadow-sm border p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <FaCalculator className="w-5 h-5 text-blue-600" />
+              <h3 className="text-base font-semibold text-gray-900">Mali Bilgiler</h3>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-3">
+                <div>
                   <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Malzeme
+                    Para Birimi
                   </label>
                   <select
-                    value={newItem.materialId || ""}
-                    onChange={(e) =>
-                      setNewItem((prev: Partial<CrmSalesOrderItem>) => ({
-                        ...prev,
-                        materialId: e.target.value,
-                      }))
-                    }
+                    value={formData.currency}
+                    onChange={(e) => handleInputChange('currency', e.target.value)}
                     className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                   >
-                    <option value="">Malzeme seçin...</option>
-                    {materials.map((material) => (
-                      <option key={material.id} value={material.id}>
-                        {material.code} - {material.name}
-                      </option>
-                    ))}
+                    <option value="TRY">TRY - Türk Lirası</option>
+                    <option value="USD">USD - ABD Doları</option>
+                    <option value="EUR">EUR - Euro</option>
                   </select>
                 </div>
 
                 <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Miktar
-                  </label>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Döviz Kuru</label>
                   <input
                     type="number"
                     min="0"
                     step="0.01"
-                    value={newItem.quantity || ""}
+                    value={formData.exchangeRate}
                     onChange={(e) =>
-                      setNewItem((prev: Partial<CrmSalesOrderItem>) => ({
-                        ...prev,
-                        quantity: parseFloat(e.target.value) || 0,
-                      }))
+                      handleInputChange('exchangeRate', parseFloat(e.target.value) || 1)
                     }
                     className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
@@ -579,338 +705,126 @@ const SalesOrderForm: React.FC = () => {
 
                 <div>
                   <label className="block text-xs font-medium text-gray-700 mb-1">
-                    Birim Fiyat
-                  </label>
-                  <input
-                    type="number"
-                    min="0"
-                    step="0.01"
-                    value={newItem.unitPrice || ""}
-                    onChange={(e) =>
-                      setNewItem((prev: Partial<CrmSalesOrderItem>) => ({
-                        ...prev,
-                        unitPrice: parseFloat(e.target.value) || 0,
-                      }))
-                    }
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
-                    İskonto (%)
+                    Genel İskonto (%)
                   </label>
                   <input
                     type="number"
                     min="0"
                     max="100"
                     step="0.01"
-                    value={newItem.discountRate || ""}
+                    value={formData.discountRate}
                     onChange={(e) =>
-                      setNewItem((prev: Partial<CrmSalesOrderItem>) => ({
-                        ...prev,
-                        discountRate: parseFloat(e.target.value) || 0,
-                      }))
+                      handleInputChange('discountRate', parseFloat(e.target.value) || 0)
                     }
                     className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
                 </div>
 
-                <div className="flex items-end gap-2">
-                  <button
-                    type="button"
-                    onClick={handleAddItem}
-                    className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    KDV Oranı (%)
+                  </label>
+                  <input
+                    type="number"
+                    min="0"
+                    max="100"
+                    step="0.01"
+                    value={formData.taxRate}
+                    onChange={(e) => handleInputChange('taxRate', parseFloat(e.target.value) || 18)}
+                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Ödeme Koşulları
+                  </label>
+                  <select
+                    value={formData.paymentTerms}
+                    onChange={(e) => handleInputChange('paymentTerms', e.target.value)}
+                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                   >
-                    <FaPlus className="w-4 h-4" />
-                    Ekle
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setShowItemForm(false)}
-                    className="flex items-center gap-2 px-3 py-1.5 text-sm border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors"
-                  >
-                    <FaTimes className="w-4 h-4" />
-                    İptal
-                  </button>
+                    <option value="">Seçin...</option>
+                    <option value="NET30">30 Gün Vadeli</option>
+                    <option value="NET60">60 Gün Vadeli</option>
+                    <option value="NET90">90 Gün Vadeli</option>
+                    <option value="COD">Kapıda Ödeme</option>
+                    <option value="PREPAID">Peşin</option>
+                  </select>
                 </div>
               </div>
-            </div>
-          )}
 
-          {/* Items Table */}
-          {formData.items && formData.items.length > 0 ? (
-            <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-gray-200">
-                <thead className="bg-gray-50">
-                  <tr>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Malzeme
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Miktar
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Birim Fiyat
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      İskonto
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      KDV
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Toplam
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      İşlemler
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="bg-white divide-y divide-gray-200">
-                  {formData.items.map((item: CrmSalesOrderItem) => (
-                    <tr key={item.id}>
-                      <td className="px-3 py-2 whitespace-nowrap">
-                        <div>
-                          <div className="text-sm font-medium text-gray-900">
-                            {item.material?.code || item.materialId}
-                          </div>
-                          <div className="text-xs text-gray-500">
-                            {item.material?.name || item.description}
-                          </div>
-                        </div>
-                      </td>
-                      <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                        {item.quantity} {item.unit?.name || ""}
-                      </td>
-                      <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                        ₺{item.unitPrice.toLocaleString()}
-                      </td>
-                      <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                        %{item.discountRate || 0} <br />
-                        <span className="text-xs text-gray-500">
-                          (₺{(item.discountAmount || 0).toLocaleString()})
-                        </span>
-                      </td>
-                      <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                        %{item.taxRate || 18} <br />
-                        <span className="text-xs text-gray-500">
-                          (₺{(item.taxAmount || 0).toLocaleString()})
-                        </span>
-                      </td>
-                      <td className="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
-                        ₺{item.totalAmount.toLocaleString()}
-                      </td>
-                      <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
-                        <button
-                          type="button"
-                          onClick={() => handleRemoveItem(item.id)}
-                          className="text-red-600 hover:text-red-900"
-                        >
-                          <FaTrash className="w-4 h-4" />
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          ) : (
-            <div className="text-center py-8 text-gray-500">
-              Henüz sipariş kalemi eklenmedi. Yukarıdaki "Kalem Ekle" butonunu
-              kullanarak ürün ekleyebilirsiniz.
-            </div>
-          )}
-        </div>
-
-        {/* Financial Information Card */}
-        <div className="bg-white rounded-lg shadow-sm border p-4">
-          <div className="flex items-center gap-2 mb-3">
-            <FaCalculator className="w-5 h-5 text-blue-600" />
-            <h3 className="text-base font-semibold text-gray-900">
-              Mali Bilgiler
-            </h3>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Para Birimi
-                </label>
-                <select
-                  value={formData.currency}
-                  onChange={(e) =>
-                    handleInputChange("currency", e.target.value)
-                  }
-                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                >
-                  <option value="TRY">TRY - Türk Lirası</option>
-                  <option value="USD">USD - ABD Doları</option>
-                  <option value="EUR">EUR - Euro</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Döviz Kuru
-                </label>
-                <input
-                  type="number"
-                  min="0"
-                  step="0.01"
-                  value={formData.exchangeRate}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "exchangeRate",
-                      parseFloat(e.target.value) || 1
-                    )
-                  }
-                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Genel İskonto (%)
-                </label>
-                <input
-                  type="number"
-                  min="0"
-                  max="100"
-                  step="0.01"
-                  value={formData.discountRate}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "discountRate",
-                      parseFloat(e.target.value) || 0
-                    )
-                  }
-                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  KDV Oranı (%)
-                </label>
-                <input
-                  type="number"
-                  min="0"
-                  max="100"
-                  step="0.01"
-                  value={formData.taxRate}
-                  onChange={(e) =>
-                    handleInputChange(
-                      "taxRate",
-                      parseFloat(e.target.value) || 18
-                    )
-                  }
-                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Ödeme Koşulları
-                </label>
-                <select
-                  value={formData.paymentTerms}
-                  onChange={(e) =>
-                    handleInputChange("paymentTerms", e.target.value)
-                  }
-                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                >
-                  <option value="">Seçin...</option>
-                  <option value="NET30">30 Gün Vadeli</option>
-                  <option value="NET60">60 Gün Vadeli</option>
-                  <option value="NET90">90 Gün Vadeli</option>
-                  <option value="COD">Kapıda Ödeme</option>
-                  <option value="PREPAID">Peşin</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="bg-gray-50 p-3 rounded-lg">
-              <h4 className="font-medium text-sm text-gray-900 mb-2">
-                Sipariş Özeti
-              </h4>
-              <div className="space-y-2">
-                <div className="flex justify-between text-sm">
-                  <span className="text-sm text-gray-600">Ara Toplam:</span>
-                  <span className="text-sm font-medium">
-                    ₺{formData.subtotal.toLocaleString()}
-                  </span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-sm text-gray-600">İskonto:</span>
-                  <span className="text-sm font-medium text-red-600">
-                    -₺{formData.discountAmount.toLocaleString()}
-                  </span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-sm text-gray-600">KDV:</span>
-                  <span className="text-sm font-medium">
-                    ₺{formData.taxAmount.toLocaleString()}
-                  </span>
-                </div>
-                <div className="border-t pt-2 mt-2">
-                  <div className="flex justify-between">
-                    <span className="text-lg font-semibold text-gray-900">
-                      Genel Toplam:
+              <div className="bg-gray-50 p-3 rounded-lg">
+                <h4 className="font-medium text-sm text-gray-900 mb-2">Sipariş Özeti</h4>
+                <div className="space-y-2">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-sm text-gray-600">Ara Toplam:</span>
+                    <span className="text-sm font-medium">
+                      ₺{formData.subtotal.toLocaleString()}
                     </span>
-                    <span className="text-lg font-bold text-blue-600">
-                      ₺{formData.totalAmount.toLocaleString()}
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-sm text-gray-600">İskonto:</span>
+                    <span className="text-sm font-medium text-red-600">
+                      -₺{formData.discountAmount.toLocaleString()}
                     </span>
                   </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-sm text-gray-600">KDV:</span>
+                    <span className="text-sm font-medium">
+                      ₺{formData.taxAmount.toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="border-t pt-2 mt-2">
+                    <div className="flex justify-between">
+                      <span className="text-lg font-semibold text-gray-900">Genel Toplam:</span>
+                      <span className="text-lg font-bold text-blue-600">
+                        ₺{formData.totalAmount.toLocaleString()}
+                      </span>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
 
-        {/* Notes Card */}
-        <div className="bg-white rounded-lg shadow-sm border p-4">
-          <div className="flex items-center gap-2 mb-3">
-            <FaNotesMedical className="w-5 h-5 text-blue-600" />
-            <h3 className="text-base font-semibold text-gray-900">
-              Notlar ve Talimatlar
-            </h3>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Genel Notlar
-              </label>
-              <textarea
-                value={formData.notes}
-                onChange={(e) => handleInputChange("notes", e.target.value)}
-                rows={4}
-                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="Sipariş ile ilgili genel notlar..."
-              />
+          {/* Notes Card */}
+          <div className="bg-white rounded-lg shadow-sm border p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <FaNotesMedical className="w-5 h-5 text-blue-600" />
+              <h3 className="text-base font-semibold text-gray-900">Notlar ve Talimatlar</h3>
             </div>
 
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Özel Talimatlar
-              </label>
-              <textarea
-                value={formData.specialInstructions}
-                onChange={(e) =>
-                  handleInputChange("specialInstructions", e.target.value)
-                }
-                rows={4}
-                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="Özel üretim talimatları, ambalaj notları vb..."
-              />
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Genel Notlar</label>
+                <textarea
+                  value={formData.notes}
+                  onChange={(e) => handleInputChange('notes', e.target.value)}
+                  rows={4}
+                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="Sipariş ile ilgili genel notlar..."
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  Özel Talimatlar
+                </label>
+                <textarea
+                  value={formData.specialInstructions}
+                  onChange={(e) => handleInputChange('specialInstructions', e.target.value)}
+                  rows={4}
+                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="Özel üretim talimatları, ambalaj notları vb..."
+                />
+              </div>
             </div>
           </div>
-        </div>
-      </form>
-    </div>
-  );
-};
+        </form>
+      </div>
+    </Container>
+  )
+}
 
-export default SalesOrderForm;
+export default SalesOrderForm
diff --git a/ui/src/views/crm/components/SalesOrderView.tsx b/ui/src/views/crm/components/SalesOrderView.tsx
index ecbd7ecd..0827638d 100644
--- a/ui/src/views/crm/components/SalesOrderView.tsx
+++ b/ui/src/views/crm/components/SalesOrderView.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import React, { useState, useEffect } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
 import {
   FaEdit,
   FaArrowLeft,
@@ -17,440 +17,397 @@ import {
   FaTruck,
   FaFileInvoiceDollar,
   FaExclamationCircle,
-} from "react-icons/fa";
-import {
-  CrmSalesOrder,
-  CrmSalesOrderItem,
-  SaleOrderItemStatusEnum,
-} from "../../../types/crm";
-import { mockSalesOrders } from "../../../mocks/mockSalesOrders";
+} from 'react-icons/fa'
+import { CrmSalesOrder, CrmSalesOrderItem, SaleOrderItemStatusEnum } from '../../../types/crm'
+import { mockSalesOrders } from '../../../mocks/mockSalesOrders'
 import {
   getSaleOrderItemStatusnfo,
   getSaleOrderStatusColor,
   getSaleOrderStatusText,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const SalesOrderView: React.FC = () => {
-  const navigate = useNavigate();
-  const { id } = useParams();
+  const navigate = useNavigate()
+  const { id } = useParams()
 
-  const [order, setOrder] = useState<CrmSalesOrder | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [order, setOrder] = useState<CrmSalesOrder | null>(null)
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     if (id) {
       // Find the order from mock data
       setTimeout(() => {
-        const foundOrder = mockSalesOrders.find((order) => order.id === id);
+        const foundOrder = mockSalesOrders.find((order) => order.id === id)
         if (foundOrder) {
-          setOrder(foundOrder);
+          setOrder(foundOrder)
         }
-        setLoading(false);
-      }, 1000);
+        setLoading(false)
+      }, 1000)
     }
-  }, [id]);
+  }, [id])
 
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
         <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
       </div>
-    );
+    )
   }
 
   if (!order) {
     return (
       <div className="flex flex-col items-center justify-center h-64">
         <FaExclamationCircle className="text-4xl text-red-500 mb-4" />
-        <h2 className="text-xl font-semibold text-gray-900 mb-2">
-          Sipariş Bulunamadı
-        </h2>
+        <h2 className="text-xl font-semibold text-gray-900 mb-2">Sipariş Bulunamadı</h2>
         <p className="text-gray-600 mb-4">Belirtilen sipariş mevcut değil.</p>
         <button
-          onClick={() => navigate("/admin/crm/sales-orders")}
+          onClick={() => navigate('/admin/crm/sales-orders')}
           className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
         >
           Sipariş Listesine Dön
         </button>
       </div>
-    );
+    )
   }
 
   return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center space-x-4">
-            <button
-              onClick={() => navigate("/admin/crm/sales-orders")}
-              className="flex items-center text-gray-600 hover:text-gray-800 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" />
-              Geri
-            </button>
-            <div className="h-6 border-l border-gray-300"></div>
+    <Container>
+      <div className="space-y-4">
+        {/* Header */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center space-x-4">
+              <button
+                onClick={() => navigate('/admin/crm/sales-orders')}
+                className="flex items-center text-gray-600 hover:text-gray-800 transition-colors"
+              >
+                <FaArrowLeft className="mr-2" />
+                Geri
+              </button>
+              <div className="h-6 border-l border-gray-300"></div>
+              <div>
+                <h1 className="text-xl font-bold text-gray-900 flex items-center">
+                  <FaShoppingCart className="mr-3 text-blue-600" />
+                  {order.orderNumber}
+                </h1>
+                <p className="text-xs text-gray-500 mt-1">Satış Siparişi Detayları</p>
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <span
+                className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${getSaleOrderStatusColor(
+                  order.status,
+                )}`}
+              >
+                {getSaleOrderStatusText(order.status)}
+              </span>
+              <button
+                onClick={() => navigate(`/admin/crm/sales-orders/edit/${order.id}`)}
+                className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 transition-colors flex items-center"
+              >
+                <FaEdit className="mr-2" />
+                Düzenle
+              </button>
+              <button className="bg-gray-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-gray-700 transition-colors flex items-center">
+                <FaPrint className="mr-2" />
+                Yazdır
+              </button>
+              <button className="bg-green-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-green-700 transition-colors flex items-center">
+                <FaDownload className="mr-2" />
+                İndir
+              </button>
+            </div>
+          </div>
+
+          {/* Order Info Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-3 mb-4">
+            <div className="bg-gradient-to-r from-blue-50 to-blue-100 p-3 rounded-lg border border-blue-200">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-blue-800">Sipariş Tarihi</p>
+                  <p className="text-base font-bold text-blue-900">
+                    {new Date(order.orderDate).toLocaleDateString('tr-TR')}
+                  </p>
+                </div>
+                <FaCalendar className="text-2xl text-blue-600" />
+              </div>
+            </div>
+
+            <div className="bg-gradient-to-r from-green-50 to-green-100 p-3 rounded-lg border border-green-200">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-green-800">Talep Edilen Tarih</p>
+                  <p className="text-base font-bold text-green-900">
+                    {new Date(order.requestedDeliveryDate).toLocaleDateString('tr-TR')}
+                  </p>
+                </div>
+                <FaCalendar className="text-2xl text-green-600" />
+              </div>
+            </div>
+
+            <div className="bg-gradient-to-r from-purple-50 to-purple-100 p-3 rounded-lg border border-purple-200">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-purple-800">Onaylanan Tarih</p>
+                  <p className="text-base font-bold text-purple-900">
+                    {order.confirmedDeliveryDate
+                      ? new Date(order.confirmedDeliveryDate).toLocaleDateString('tr-TR')
+                      : 'Belirtilmemiş'}
+                  </p>
+                </div>
+                <FaCalendar className="text-2xl text-purple-600" />
+              </div>
+            </div>
+
+            <div className="bg-gradient-to-r from-amber-50 to-amber-100 p-3 rounded-lg border border-amber-200">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-amber-800">Toplam Tutar</p>
+                  <p className="text-base font-bold text-amber-900">
+                    {order.totalAmount.toLocaleString('tr-TR')} {order.currency}
+                  </p>
+                </div>
+                <FaCalculator className="text-2xl text-amber-600" />
+              </div>
+            </div>
+          </div>
+
+          {/* Additional Info */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
             <div>
-              <h1 className="text-xl font-bold text-gray-900 flex items-center">
-                <FaShoppingCart className="mr-3 text-blue-600" />
-                {order.orderNumber}
-              </h1>
-              <p className="text-xs text-gray-500 mt-1">
-                Satış Siparişi Detayları
-              </p>
+              <span className="font-medium text-gray-700">Ödeme Koşulları:</span>
+              <p className="text-gray-900">{order.paymentTerms}</p>
+            </div>
+            <div>
+              <span className="font-medium text-gray-700">Para Birimi:</span>
+              <p className="text-gray-900">{order.currency}</p>
             </div>
           </div>
 
-          <div className="flex items-center space-x-2">
-            <span
-              className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${getSaleOrderStatusColor(
-                order.status
-              )}`}
-            >
-              {getSaleOrderStatusText(order.status)}
-            </span>
-            <button
-              onClick={() =>
-                navigate(`/admin/crm/sales-orders/edit/${order.id}`)
-              }
-              className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 transition-colors flex items-center"
-            >
-              <FaEdit className="mr-2" />
-              Düzenle
-            </button>
-            <button className="bg-gray-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-gray-700 transition-colors flex items-center">
-              <FaPrint className="mr-2" />
-              Yazdır
-            </button>
-            <button className="bg-green-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-green-700 transition-colors flex items-center">
-              <FaDownload className="mr-2" />
-              İndir
-            </button>
-          </div>
-        </div>
-
-        {/* Order Info Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-3 mb-4">
-          <div className="bg-gradient-to-r from-blue-50 to-blue-100 p-3 rounded-lg border border-blue-200">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-blue-800">
-                  Sipariş Tarihi
-                </p>
-                <p className="text-base font-bold text-blue-900">
-                  {new Date(order.orderDate).toLocaleDateString("tr-TR")}
-                </p>
+          <div className="mt-3 pt-3 border-t border-gray-200">
+            <div className="text-sm text-gray-600">
+              <span className="font-medium">Son Güncelleme:</span>
+              <div className="mt-1">
+                {order.lastModificationTime
+                  ? new Date(order.lastModificationTime).toLocaleString('tr-TR')
+                  : 'Güncelleme yok'}
               </div>
-              <FaCalendar className="text-2xl text-blue-600" />
-            </div>
-          </div>
-
-          <div className="bg-gradient-to-r from-green-50 to-green-100 p-3 rounded-lg border border-green-200">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-green-800">
-                  Talep Edilen Tarih
-                </p>
-                <p className="text-base font-bold text-green-900">
-                  {new Date(order.requestedDeliveryDate).toLocaleDateString(
-                    "tr-TR"
-                  )}
-                </p>
-              </div>
-              <FaCalendar className="text-2xl text-green-600" />
-            </div>
-          </div>
-
-          <div className="bg-gradient-to-r from-purple-50 to-purple-100 p-3 rounded-lg border border-purple-200">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-purple-800">
-                  Onaylanan Tarih
-                </p>
-                <p className="text-base font-bold text-purple-900">
-                  {order.confirmedDeliveryDate
-                    ? new Date(order.confirmedDeliveryDate).toLocaleDateString(
-                        "tr-TR"
-                      )
-                    : "Belirtilmemiş"}
-                </p>
-              </div>
-              <FaCalendar className="text-2xl text-purple-600" />
-            </div>
-          </div>
-
-          <div className="bg-gradient-to-r from-amber-50 to-amber-100 p-3 rounded-lg border border-amber-200">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-amber-800">
-                  Toplam Tutar
-                </p>
-                <p className="text-base font-bold text-amber-900">
-                  {order.totalAmount.toLocaleString("tr-TR")} {order.currency}
-                </p>
-              </div>
-              <FaCalculator className="text-2xl text-amber-600" />
             </div>
           </div>
         </div>
 
-        {/* Additional Info */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
-          <div>
-            <span className="font-medium text-gray-700">Ödeme Koşulları:</span>
-            <p className="text-gray-900">{order.paymentTerms}</p>
-          </div>
-          <div>
-            <span className="font-medium text-gray-700">Para Birimi:</span>
-            <p className="text-gray-900">{order.currency}</p>
-          </div>
-        </div>
+        {/* Customer Information */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+          <h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+            <FaBuilding className="mr-3 text-blue-600" />
+            Müşteri Bilgileri
+          </h2>
 
-        <div className="mt-3 pt-3 border-t border-gray-200">
-          <div className="text-sm text-gray-600">
-            <span className="font-medium">Son Güncelleme:</span>
-            <div className="mt-1">
-              {order.lastModificationTime
-                ? new Date(order.lastModificationTime).toLocaleString("tr-TR")
-                : "Güncelleme yok"}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <h3 className="text-base font-medium text-gray-800 mb-2 flex items-center">
+                <FaUser className="mr-2 text-gray-600" />
+                Müşteri Detayları
+              </h3>
+              <div className="space-y-2">
+                <div>
+                  <span className="text-sm font-medium text-gray-600">Firma Adı:</span>
+                  <p className="text-sm font-medium text-gray-900">
+                    {order.customer?.name || 'Müşteri bilgisi yok'}
+                  </p>
+                </div>
+                <div>
+                  <span className="text-sm font-medium text-gray-600">İletişim Kişisi:</span>
+                  <p className="text-sm text-gray-900">
+                    {order.customer?.primaryContact?.fullName || 'Belirtilmemiş'}
+                  </p>
+                </div>
+                <div className="flex items-center text-sm text-gray-600">
+                  <FaPhone className="mr-2" />
+                  <span>{order.customer?.primaryContact?.phone || 'Belirtilmemiş'}</span>
+                </div>
+                <div className="flex items-center text-sm text-gray-600">
+                  <FaEnvelope className="mr-2" />
+                  <span>{order.customer?.primaryContact?.email || 'Belirtilmemiş'}</span>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      </div>
 
-      {/* Customer Information */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-        <h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
-          <FaBuilding className="mr-3 text-blue-600" />
-          Müşteri Bilgileri
-        </h2>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <h3 className="text-base font-medium text-gray-800 mb-2 flex items-center">
-              <FaUser className="mr-2 text-gray-600" />
-              Müşteri Detayları
-            </h3>
-            <div className="space-y-2">
-              <div>
-                <span className="text-sm font-medium text-gray-600">
-                  Firma Adı:
-                </span>
-                <p className="text-sm font-medium text-gray-900">
-                  {order.customer?.name || "Müşteri bilgisi yok"}
+            <div>
+              <h3 className="text-base font-medium text-gray-800 mb-2 flex items-center">
+                <FaMapMarkerAlt className="mr-2 text-gray-600" />
+                Teslimat Adresi
+              </h3>
+              <div className="text-sm text-gray-900 space-y-1">
+                <p>{order.deliveryAddress.street}</p>
+                <p>
+                  {order.deliveryAddress.city}, {order.deliveryAddress.state}
                 </p>
+                <p>{order.deliveryAddress.postalCode}</p>
+                <p>{order.deliveryAddress.country}</p>
               </div>
-              <div>
-                <span className="text-sm font-medium text-gray-600">
-                  İletişim Kişisi:
-                </span>
-                <p className="text-sm text-gray-900">
-                  {order.customer?.primaryContact?.fullName || "Belirtilmemiş"}
-                </p>
-              </div>
-              <div className="flex items-center text-sm text-gray-600">
-                <FaPhone className="mr-2" />
-                <span>
-                  {order.customer?.primaryContact?.phone || "Belirtilmemiş"}
-                </span>
-              </div>
-              <div className="flex items-center text-sm text-gray-600">
-                <FaEnvelope className="mr-2" />
-                <span>
-                  {order.customer?.primaryContact?.email || "Belirtilmemiş"}
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <h3 className="text-base font-medium text-gray-800 mb-2 flex items-center">
-              <FaMapMarkerAlt className="mr-2 text-gray-600" />
-              Teslimat Adresi
-            </h3>
-            <div className="text-sm text-gray-900 space-y-1">
-              <p>{order.deliveryAddress.street}</p>
-              <p>
-                {order.deliveryAddress.city}, {order.deliveryAddress.state}
-              </p>
-              <p>{order.deliveryAddress.postalCode}</p>
-              <p>{order.deliveryAddress.country}</p>
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Order Items */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-        <h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
-          <FaClipboardList className="mr-3 text-blue-600" />
-          Sipariş Kalemleri
-        </h2>
+        {/* Order Items */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+          <h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+            <FaClipboardList className="mr-3 text-blue-600" />
+            Sipariş Kalemleri
+          </h2>
 
-        <div className="overflow-x-auto">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
-              <tr>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Malzeme
-                </th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Miktar
-                </th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Teslim Edilen
-                </th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Birim Fiyat
-                </th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Toplam
-                </th>
-                <th className="px-4 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">
-              {order.items.map((item: CrmSalesOrderItem) => {
-                const itemStatus = getSaleOrderItemStatusnfo(item.status);
-                return (
-                  <tr key={item.id} className="hover:bg-gray-50">
-                    <td className="px-4 py-2 whitespace-nowrap">
-                      <div>
-                        <div className="text-sm font-medium text-gray-900">
-                          {item.material?.code || item.materialId}
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Malzeme
+                  </th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Miktar
+                  </th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Teslim Edilen
+                  </th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Birim Fiyat
+                  </th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Toplam
+                  </th>
+                  <th className="px-4 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">
+                {order.items.map((item: CrmSalesOrderItem) => {
+                  const itemStatus = getSaleOrderItemStatusnfo(item.status)
+                  return (
+                    <tr key={item.id} className="hover:bg-gray-50">
+                      <td className="px-4 py-2 whitespace-nowrap">
+                        <div>
+                          <div className="text-sm font-medium text-gray-900">
+                            {item.material?.code || item.materialId}
+                          </div>
+                          <div className="text-xs text-gray-500">
+                            {item.material?.name || item.description}
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
+                        {item.quantity} {item.material?.baseUnit?.name || 'Adet'}
+                      </td>
+                      <td className="px-4 py-2 whitespace-nowrap">
+                        <div className="font-medium">
+                          {item.deliveredQuantity} {item.material?.baseUnit?.name || 'Adet'}
                         </div>
                         <div className="text-xs text-gray-500">
-                          {item.material?.name || item.description}
+                          {((item.deliveredQuantity / item.quantity) * 100).toFixed(1)}% tamamlandı
                         </div>
-                      </div>
-                    </td>
-                    <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
-                      {item.quantity} {item.material?.baseUnit?.name || "Adet"}
-                    </td>
-                    <td className="px-4 py-2 whitespace-nowrap">
-                      <div className="font-medium">
-                        {item.deliveredQuantity}{" "}
-                        {item.material?.baseUnit?.name || "Adet"}
-                      </div>
-                      <div className="text-xs text-gray-500">
-                        {(
-                          (item.deliveredQuantity / item.quantity) *
-                          100
-                        ).toFixed(1)}
-                        % tamamlandı
-                      </div>
-                    </td>
-                    <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
-                      {item.unitPrice.toLocaleString("tr-TR")} {order.currency}
-                    </td>
-                    <td className="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
-                      {item.totalAmount.toLocaleString("tr-TR")}{" "}
-                      {order.currency}
-                    </td>
-                    <td className="px-4 py-2 whitespace-nowrap">
-                      <span
-                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${itemStatus.color}`}
-                      >
-                        <itemStatus.icon
-                          className={`mr-1 ${itemStatus.iconColor}`}
-                        />
-                        {itemStatus.label}
-                      </span>
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Financial Summary */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-        <h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
-          <FaCalculator className="mr-3 text-blue-600" />
-          Mali Özet
-        </h2>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <div className="flex justify-between py-1.5 border-b border-gray-100">
-              <span className="text-sm font-medium text-gray-600">
-                Ara Toplam:
-              </span>
-              <span className="text-sm text-gray-900">
-                {order.subtotal.toLocaleString("tr-TR")} {order.currency}
-              </span>
-            </div>
-            <div className="flex justify-between py-1.5 border-b border-gray-100">
-              <span className="text-sm font-medium text-gray-600">
-                İndirim:
-              </span>
-              <span className="text-sm text-gray-900">
-                -{order.discountAmount.toLocaleString("tr-TR")} {order.currency}
-              </span>
-            </div>
-            <div className="flex justify-between py-1.5 border-b border-gray-100">
-              <span className="text-sm font-medium text-gray-600">KDV:</span>
-              <span className="text-sm text-gray-900">
-                {order.taxAmount.toLocaleString("tr-TR")} {order.currency}
-              </span>
-            </div>
-            <div className="flex justify-between py-2 border-t-2 border-gray-200">
-              <span className="text-base font-bold text-gray-900">
-                Genel Toplam:
-              </span>
-              <span className="text-base font-bold text-gray-900">
-                {order.totalAmount.toLocaleString("tr-TR")} {order.currency}
-              </span>
-            </div>
+                      </td>
+                      <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
+                        {item.unitPrice.toLocaleString('tr-TR')} {order.currency}
+                      </td>
+                      <td className="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
+                        {item.totalAmount.toLocaleString('tr-TR')} {order.currency}
+                      </td>
+                      <td className="px-4 py-2 whitespace-nowrap">
+                        <span
+                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${itemStatus.color}`}
+                        >
+                          <itemStatus.icon className={`mr-1 ${itemStatus.iconColor}`} />
+                          {itemStatus.label}
+                        </span>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
           </div>
+        </div>
 
-          <div className="space-y-4">
-            <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
-              <h3 className="text-sm font-medium text-blue-800 mb-2 flex items-center">
-                <FaTruck className="mr-2" />
-                Teslimat Durumu
-              </h3>
-              <div className="text-sm text-blue-900">
-                <p>Toplam Kalem: {order.items.length}</p>
-                <p>
-                  Teslim Edilenler:{" "}
-                  {
-                    order.items.filter(
-                      (item) =>
-                        item.status === SaleOrderItemStatusEnum.Delivered
-                    ).length
-                  }
-                </p>
-                <p>
-                  Bekleyenler:{" "}
-                  {
-                    order.items.filter(
-                      (item) =>
-                        item.status !== SaleOrderItemStatusEnum.Delivered
-                    ).length
-                  }
-                </p>
+        {/* Financial Summary */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+          <h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+            <FaCalculator className="mr-3 text-blue-600" />
+            Mali Özet
+          </h2>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <div className="flex justify-between py-1.5 border-b border-gray-100">
+                <span className="text-sm font-medium text-gray-600">Ara Toplam:</span>
+                <span className="text-sm text-gray-900">
+                  {order.subtotal.toLocaleString('tr-TR')} {order.currency}
+                </span>
+              </div>
+              <div className="flex justify-between py-1.5 border-b border-gray-100">
+                <span className="text-sm font-medium text-gray-600">İndirim:</span>
+                <span className="text-sm text-gray-900">
+                  -{order.discountAmount.toLocaleString('tr-TR')} {order.currency}
+                </span>
+              </div>
+              <div className="flex justify-between py-1.5 border-b border-gray-100">
+                <span className="text-sm font-medium text-gray-600">KDV:</span>
+                <span className="text-sm text-gray-900">
+                  {order.taxAmount.toLocaleString('tr-TR')} {order.currency}
+                </span>
+              </div>
+              <div className="flex justify-between py-2 border-t-2 border-gray-200">
+                <span className="text-base font-bold text-gray-900">Genel Toplam:</span>
+                <span className="text-base font-bold text-gray-900">
+                  {order.totalAmount.toLocaleString('tr-TR')} {order.currency}
+                </span>
               </div>
             </div>
 
-            <div className="bg-green-50 p-4 rounded-lg border border-green-200">
-              <h3 className="text-sm font-medium text-green-800 mb-2 flex items-center">
-                <FaFileInvoiceDollar className="mr-2" />
-                Faturalama Durumu
-              </h3>
-              <div className="text-sm text-green-900">
-                <p>Teslimat Sayısı: {order.deliveries?.length || 0}</p>
+            <div className="space-y-4">
+              <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
+                <h3 className="text-sm font-medium text-blue-800 mb-2 flex items-center">
+                  <FaTruck className="mr-2" />
+                  Teslimat Durumu
+                </h3>
+                <div className="text-sm text-blue-900">
+                  <p>Toplam Kalem: {order.items.length}</p>
+                  <p>
+                    Teslim Edilenler:{' '}
+                    {
+                      order.items.filter(
+                        (item) => item.status === SaleOrderItemStatusEnum.Delivered,
+                      ).length
+                    }
+                  </p>
+                  <p>
+                    Bekleyenler:{' '}
+                    {
+                      order.items.filter(
+                        (item) => item.status !== SaleOrderItemStatusEnum.Delivered,
+                      ).length
+                    }
+                  </p>
+                </div>
+              </div>
+
+              <div className="bg-green-50 p-4 rounded-lg border border-green-200">
+                <h3 className="text-sm font-medium text-green-800 mb-2 flex items-center">
+                  <FaFileInvoiceDollar className="mr-2" />
+                  Faturalama Durumu
+                </h3>
+                <div className="text-sm text-green-900">
+                  <p>Teslimat Sayısı: {order.deliveries?.length || 0}</p>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default SalesOrderView;
+export default SalesOrderView
diff --git a/ui/src/views/crm/components/SalesOrders.tsx b/ui/src/views/crm/components/SalesOrders.tsx
index 97e254d4..efab756c 100644
--- a/ui/src/views/crm/components/SalesOrders.tsx
+++ b/ui/src/views/crm/components/SalesOrders.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   FaShoppingCart,
   FaPlus,
@@ -9,146 +9,128 @@ import {
   FaCalendar,
   FaBox,
   FaBuilding,
-} from "react-icons/fa";
-import { CrmSalesOrder, SaleOrderStatusEnum } from "../../../types/crm";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
-import { mockSalesOrders } from "../../../mocks/mockSalesOrders";
-import { BusinessParty } from "../../../types/common";
-import Widget from "../../../components/common/Widget";
-import {
-  getSaleOrderStatusColor,
-  getSaleOrderStatusText,
-} from "../../../utils/erp";
+} from 'react-icons/fa'
+import { CrmSalesOrder, SaleOrderStatusEnum } from '../../../types/crm'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
+import { mockSalesOrders } from '../../../mocks/mockSalesOrders'
+import { BusinessParty } from '../../../types/common'
+import Widget from '../../../components/common/Widget'
+import { getSaleOrderStatusColor, getSaleOrderStatusText } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const SalesOrders: React.FC = () => {
-  const navigate = useNavigate();
-  const [salesOrders] = useState<CrmSalesOrder[]>(mockSalesOrders);
-  const [customers] = useState<BusinessParty[]>(mockBusinessParties);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedStatus, setSelectedStatus] = useState<
-    SaleOrderStatusEnum | "all"
-  >("all");
-  const [selectedCustomer, setSelectedCustomer] = useState<string>("all");
+  const navigate = useNavigate()
+  const [salesOrders] = useState<CrmSalesOrder[]>(mockSalesOrders)
+  const [customers] = useState<BusinessParty[]>(mockBusinessParties)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedStatus, setSelectedStatus] = useState<SaleOrderStatusEnum | 'all'>('all')
+  const [selectedCustomer, setSelectedCustomer] = useState<string>('all')
 
   const handleAdd = () => {
-    navigate("/admin/crm/sales-orders/new");
-  };
+    navigate('/admin/crm/sales-orders/new')
+  }
 
   const handleEdit = (order: CrmSalesOrder) => {
-    navigate(`/admin/crm/sales-orders/edit/${order.id}`);
-  };
+    navigate(`/admin/crm/sales-orders/edit/${order.id}`)
+  }
 
   const handleDelete = (id: string) => {
-    console.log("Delete sales order:", id);
+    console.log('Delete sales order:', id)
     // Implement delete functionality
-  };
+  }
 
   const handleViewDetails = (order: CrmSalesOrder) => {
-    navigate(`/admin/crm/sales-orders/${order.id}`);
-  };
+    navigate(`/admin/crm/sales-orders/${order.id}`)
+  }
 
   const filteredOrders = salesOrders.filter((order) => {
-    if (
-      searchTerm &&
-      !order.orderNumber.toLowerCase().includes(searchTerm.toLowerCase())
-    ) {
-      return false;
+    if (searchTerm && !order.orderNumber.toLowerCase().includes(searchTerm.toLowerCase())) {
+      return false
     }
-    if (selectedStatus !== "all" && order.status !== selectedStatus) {
-      return false;
+    if (selectedStatus !== 'all' && order.status !== selectedStatus) {
+      return false
     }
-    if (selectedCustomer !== "all" && order.customerId !== selectedCustomer) {
-      return false;
+    if (selectedCustomer !== 'all' && order.customerId !== selectedCustomer) {
+      return false
     }
-    return true;
-  });
+    return true
+  })
 
   const columns: Column<CrmSalesOrder>[] = [
     {
-      key: "orderNumber",
-      header: "Sipariş No",
+      key: 'orderNumber',
+      header: 'Sipariş No',
       sortable: true,
       render: (order: CrmSalesOrder) => (
         <div>
           <div className="font-medium text-gray-900">{order.orderNumber}</div>
-          <div className="text-sm text-gray-500">
-            Sipariş #{order.id.substring(0, 8)}
-          </div>
+          <div className="text-sm text-gray-500">Sipariş #{order.id.substring(0, 8)}</div>
         </div>
       ),
     },
     {
-      key: "customer",
-      header: "Müşteri",
+      key: 'customer',
+      header: 'Müşteri',
       render: (order: CrmSalesOrder) => {
-        const customer = customers.find((c) => c.id === order.customerId);
+        const customer = customers.find((c) => c.id === order.customerId)
         return customer ? (
           <div className="flex items-center gap-2">
             <FaBuilding className="w-4 h-4 text-gray-400" />
             <span>{customer.name}</span>
           </div>
         ) : (
-          "-"
-        );
+          '-'
+        )
       },
     },
     {
-      key: "orderDate",
-      header: "Sipariş Tarihi",
+      key: 'orderDate',
+      header: 'Sipariş Tarihi',
       render: (order: CrmSalesOrder) => (
         <div className="flex items-center gap-1 text-sm">
           <FaCalendar className="w-3 h-3 text-gray-400" />
-          <span>{new Date(order.orderDate).toLocaleDateString("tr-TR")}</span>
+          <span>{new Date(order.orderDate).toLocaleDateString('tr-TR')}</span>
         </div>
       ),
     },
     {
-      key: "deliveryDate",
-      header: "Teslimat Tarihi",
+      key: 'deliveryDate',
+      header: 'Teslimat Tarihi',
       render: (order: CrmSalesOrder) =>
         order.confirmedDeliveryDate ? (
           <div className="flex items-center gap-1 text-sm">
             <FaBox className="w-3 h-3 text-gray-400" />
-            <span>
-              {new Date(order.confirmedDeliveryDate).toLocaleDateString(
-                "tr-TR"
-              )}
-            </span>
+            <span>{new Date(order.confirmedDeliveryDate).toLocaleDateString('tr-TR')}</span>
           </div>
         ) : order.requestedDeliveryDate ? (
           <div className="flex items-center gap-1 text-sm text-gray-500">
             <FaBox className="w-3 h-3 text-gray-400" />
             <span>
-              {new Date(order.requestedDeliveryDate).toLocaleDateString(
-                "tr-TR"
-              )}{" "}
-              (İstenen)
+              {new Date(order.requestedDeliveryDate).toLocaleDateString('tr-TR')} (İstenen)
             </span>
           </div>
         ) : (
-          "-"
+          '-'
         ),
     },
     {
-      key: "totalAmount",
-      header: "Toplam Tutar",
+      key: 'totalAmount',
+      header: 'Toplam Tutar',
       render: (order: CrmSalesOrder) => (
         <div className="flex items-center gap-1">
           <FaDollarSign className="w-4 h-4 text-gray-400" />
-          <span className="font-medium">
-            ₺{order.totalAmount.toLocaleString()}
-          </span>
+          <span className="font-medium">₺{order.totalAmount.toLocaleString()}</span>
         </div>
       ),
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (order: CrmSalesOrder) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getSaleOrderStatusColor(
-            order.status
+            order.status,
           )}`}
         >
           {getSaleOrderStatusText(order.status)}
@@ -156,8 +138,8 @@ const SalesOrders: React.FC = () => {
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (order: CrmSalesOrder) => (
         <div className="flex gap-2">
           <button
@@ -184,231 +166,185 @@ const SalesOrders: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   // Calculate statistics
-  const totalOrders = salesOrders.length;
+  const totalOrders = salesOrders.length
   const activeOrders = salesOrders.filter(
     (o) =>
-      o.status === SaleOrderStatusEnum.Confirmed ||
-      o.status === SaleOrderStatusEnum.InProduction
-  ).length;
+      o.status === SaleOrderStatusEnum.Confirmed || o.status === SaleOrderStatusEnum.InProduction,
+  ).length
   const totalRevenue = salesOrders
     .filter((o) => o.status === SaleOrderStatusEnum.Delivered)
-    .reduce((sum, order) => sum + order.totalAmount, 0);
+    .reduce((sum, order) => sum + order.totalAmount, 0)
   const averageOrderValue =
-    salesOrders.reduce((sum, order) => sum + order.totalAmount, 0) /
-      salesOrders.length || 0;
+    salesOrders.reduce((sum, order) => sum + order.totalAmount, 0) / salesOrders.length || 0
 
   // Status distribution
-  const statusDistribution = Object.values(SaleOrderStatusEnum).map(
-    (status) => ({
-      status,
-      count: salesOrders.filter((o) => o.status === status).length,
-      value: salesOrders
-        .filter((o) => o.status === status)
-        .reduce((sum, o) => sum + o.totalAmount, 0),
-    })
-  );
+  const statusDistribution = Object.values(SaleOrderStatusEnum).map((status) => ({
+    status,
+    count: salesOrders.filter((o) => o.status === status).length,
+    value: salesOrders
+      .filter((o) => o.status === status)
+      .reduce((sum, o) => sum + o.totalAmount, 0),
+  }))
 
   // Monthly trend
-  const currentMonth = new Date();
-  const lastMonth = new Date(
-    currentMonth.getFullYear(),
-    currentMonth.getMonth() - 1,
-    1
-  );
-  const currentMonthOrders = salesOrders.filter(
-    (o) => new Date(o.orderDate) >= lastMonth
-  ).length;
+  const currentMonth = new Date()
+  const lastMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
+  const currentMonthOrders = salesOrders.filter((o) => new Date(o.orderDate) >= lastMonth).length
   const previousMonthOrders = salesOrders.filter((o) => {
-    const orderDate = new Date(o.orderDate);
+    const orderDate = new Date(o.orderDate)
     return (
-      orderDate >=
-        new Date(lastMonth.getFullYear(), lastMonth.getMonth() - 1, 1) &&
+      orderDate >= new Date(lastMonth.getFullYear(), lastMonth.getMonth() - 1, 1) &&
       orderDate < lastMonth
-    );
-  }).length;
+    )
+  }).length
 
   return (
-    <div className="space-y-3 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">Satış Siparişleri</h2>
-          <p className="text-sm text-gray-600">
-            Müşteri siparişleri ve teslimat takibi
-          </p>
-        </div>
-        <button
-          onClick={handleAdd}
-          className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-        >
-          <FaPlus className="w-4 h-4" />
-          Yeni Sipariş
-        </button>
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-        <Widget
-          title="Toplam Sipariş"
-          value={totalOrders}
-          color="blue"
-          icon="FaShoppingCart"
-        />
-
-        <Widget
-          title="Aktif Sipariş"
-          value={activeOrders}
-          color="orange"
-          icon="FaBox"
-        />
-
-        <Widget
-          title="Toplam Gelir"
-          value={`₺${totalRevenue.toLocaleString()}`}
-          color="green"
-          icon="FaDollarSign"
-        />
-
-        <Widget
-          title="Ortalama Sipariş"
-          value={`₺${averageOrderValue.toLocaleString()}`}
-          color="purple"
-          icon="FaArrowUp"
-        />
-      </div>
-
-      {/* Order Status Pipeline */}
-      <div className="bg-white rounded-lg shadow-sm border p-3">
-        <h3 className="text-sm font-semibold text-gray-900 mb-3">
-          Sipariş Durumu Dağılımı
-        </h3>
-        <div className="grid grid-cols-2 md:grid-cols-7 gap-2">
-          {statusDistribution.map(({ status, count, value }) => (
-            <div
-              key={status as string}
-              className="text-center p-2 border rounded-lg"
-            >
-              <div
-                className={`inline-block px-2 py-0.5 text-xs font-medium rounded-full mb-1 ${getSaleOrderStatusColor(
-                  status as SaleOrderStatusEnum
-                )}`}
-              >
-                {getSaleOrderStatusText(status as SaleOrderStatusEnum)}
-              </div>
-              <div className="text-xl font-bold text-gray-900 mb-1">
-                {count}
-              </div>
-              <div className="text-xs text-gray-500">
-                ₺{value.toLocaleString()}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Monthly Performance */}
-      <div className="bg-white rounded-lg shadow-sm border p-3">
-        <h3 className="text-sm font-semibold text-gray-900 mb-3">
-          Aylık Performans
-        </h3>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div className="text-center">
-            <div className="text-2xl font-bold text-blue-600 mb-1">
-              {currentMonthOrders}
-            </div>
-            <p className="text-sm text-gray-600">Bu Ay</p>
-          </div>
-
-          <div className="text-center">
-            <div className="text-2xl font-bold text-gray-600 mb-1">
-              {previousMonthOrders}
-            </div>
-            <p className="text-sm text-gray-600">Geçen Ay</p>
-          </div>
-
-          <div className="text-center">
-            <div
-              className={`text-2xl font-bold mb-1 ${
-                currentMonthOrders >= previousMonthOrders
-                  ? "text-green-600"
-                  : "text-red-600"
-              }`}
-            >
-              {previousMonthOrders > 0
-                ? `${Math.round(
-                    ((currentMonthOrders - previousMonthOrders) /
-                      previousMonthOrders) *
-                      100
-                  )}%`
-                : "-%"}
-            </div>
-            <p className="text-sm text-gray-600">Değişim</p>
+    <Container>
+      <div className="space-y-3 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">Satış Siparişleri</h2>
+            <p className="text-sm text-gray-600">Müşteri siparişleri ve teslimat takibi</p>
           </div>
+          <button
+            onClick={handleAdd}
+            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          >
+            <FaPlus className="w-4 h-4" />
+            Yeni Sipariş
+          </button>
         </div>
-      </div>
 
-      {/* Filters */}
-      <div className="flex gap-3 items-center">
-        <div className="flex-1">
-          <input
-            type="text"
-            placeholder="Sipariş numarası ara..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <Widget title="Toplam Sipariş" value={totalOrders} color="blue" icon="FaShoppingCart" />
+
+          <Widget title="Aktif Sipariş" value={activeOrders} color="orange" icon="FaBox" />
+
+          <Widget
+            title="Toplam Gelir"
+            value={`₺${totalRevenue.toLocaleString()}`}
+            color="green"
+            icon="FaDollarSign"
+          />
+
+          <Widget
+            title="Ortalama Sipariş"
+            value={`₺${averageOrderValue.toLocaleString()}`}
+            color="purple"
+            icon="FaArrowUp"
           />
         </div>
 
-        <select
-          value={selectedStatus}
-          onChange={(e) =>
-            setSelectedStatus(e.target.value as SaleOrderStatusEnum | "all")
-          }
-          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Durumlar</option>
-          {Object.values(SaleOrderStatusEnum).map((status) => (
-            <option key={status as string} value={status as string}>
-              {getSaleOrderStatusText(status as SaleOrderStatusEnum)}
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={selectedCustomer}
-          onChange={(e) => setSelectedCustomer(e.target.value)}
-          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="all">Tüm Müşteriler</option>
-          {customers.map((customer) => (
-            <option key={customer.id} value={customer.id}>
-              {customer.name}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {/* Data Table */}
-      <div className="bg-white rounded-lg shadow-sm border">
-        <DataTable data={filteredOrders} columns={columns} />
-      </div>
-
-      {filteredOrders.length === 0 && (
-        <div className="text-center py-12">
-          <FaShoppingCart className="w-10 h-10 text-gray-400 mx-auto mb-3" />
-          <h3 className="text-sm font-medium text-gray-900 mb-2">
-            Sipariş bulunamadı
-          </h3>
-          <p className="text-gray-500">
-            Arama kriterlerinizi değiştirmeyi deneyin.
-          </p>
+        {/* Order Status Pipeline */}
+        <div className="bg-white rounded-lg shadow-sm border p-3">
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">Sipariş Durumu Dağılımı</h3>
+          <div className="grid grid-cols-2 md:grid-cols-7 gap-2">
+            {statusDistribution.map(({ status, count, value }) => (
+              <div key={status as string} className="text-center p-2 border rounded-lg">
+                <div
+                  className={`inline-block px-2 py-0.5 text-xs font-medium rounded-full mb-1 ${getSaleOrderStatusColor(
+                    status as SaleOrderStatusEnum,
+                  )}`}
+                >
+                  {getSaleOrderStatusText(status as SaleOrderStatusEnum)}
+                </div>
+                <div className="text-xl font-bold text-gray-900 mb-1">{count}</div>
+                <div className="text-xs text-gray-500">₺{value.toLocaleString()}</div>
+              </div>
+            ))}
+          </div>
         </div>
-      )}
-    </div>
-  );
-};
 
-export default SalesOrders;
+        {/* Monthly Performance */}
+        <div className="bg-white rounded-lg shadow-sm border p-3">
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">Aylık Performans</h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-blue-600 mb-1">{currentMonthOrders}</div>
+              <p className="text-sm text-gray-600">Bu Ay</p>
+            </div>
+
+            <div className="text-center">
+              <div className="text-2xl font-bold text-gray-600 mb-1">{previousMonthOrders}</div>
+              <p className="text-sm text-gray-600">Geçen Ay</p>
+            </div>
+
+            <div className="text-center">
+              <div
+                className={`text-2xl font-bold mb-1 ${
+                  currentMonthOrders >= previousMonthOrders ? 'text-green-600' : 'text-red-600'
+                }`}
+              >
+                {previousMonthOrders > 0
+                  ? `${Math.round(
+                      ((currentMonthOrders - previousMonthOrders) / previousMonthOrders) * 100,
+                    )}%`
+                  : '-%'}
+              </div>
+              <p className="text-sm text-gray-600">Değişim</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="flex gap-3 items-center">
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="Sipariş numarası ara..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <select
+            value={selectedStatus}
+            onChange={(e) => setSelectedStatus(e.target.value as SaleOrderStatusEnum | 'all')}
+            className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm Durumlar</option>
+            {Object.values(SaleOrderStatusEnum).map((status) => (
+              <option key={status as string} value={status as string}>
+                {getSaleOrderStatusText(status as SaleOrderStatusEnum)}
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={selectedCustomer}
+            onChange={(e) => setSelectedCustomer(e.target.value)}
+            className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Tüm Müşteriler</option>
+            {customers.map((customer) => (
+              <option key={customer.id} value={customer.id}>
+                {customer.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Data Table */}
+        <div className="bg-white rounded-lg shadow-sm border">
+          <DataTable data={filteredOrders} columns={columns} />
+        </div>
+
+        {filteredOrders.length === 0 && (
+          <div className="text-center py-12">
+            <FaShoppingCart className="w-10 h-10 text-gray-400 mx-auto mb-3" />
+            <h3 className="text-sm font-medium text-gray-900 mb-2">Sipariş bulunamadı</h3>
+            <p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
+          </div>
+        )}
+      </div>
+    </Container>
+  )
+}
+
+export default SalesOrders
diff --git a/ui/src/views/crm/components/SalesTeamCreate.tsx b/ui/src/views/crm/components/SalesTeamCreate.tsx
index 75737f04..acf9e51d 100644
--- a/ui/src/views/crm/components/SalesTeamCreate.tsx
+++ b/ui/src/views/crm/components/SalesTeamCreate.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaUsers,
   FaArrowLeft,
@@ -7,475 +7,421 @@ import {
   FaPlus,
   FaTrash,
   FaMapMarkerAlt,
-} from "react-icons/fa";
-import { useNavigate } from "react-router-dom";
-import { CrmTerritory } from "../../../types/crm";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { Team, TeamMember, TeamRoleEnum } from "../../../types/common";
+} from 'react-icons/fa'
+import { useNavigate } from 'react-router-dom'
+import { CrmTerritory } from '../../../types/crm'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { Team, TeamMember, TeamRoleEnum } from '../../../types/common'
+import { Container } from '@/components/shared'
 
 const SalesTeamCreate: React.FC = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   const [formData, setFormData] = useState({
-    teamCode: "",
-    name: "",
-    description: "",
-    managerId: "",
+    teamCode: '',
+    name: '',
+    description: '',
+    managerId: '',
     isActive: true,
-  });
+  })
 
-  const [members, setMembers] = useState<Partial<TeamMember>[]>([]);
-  const [territories, setTerritories] = useState<Partial<CrmTerritory>[]>([]);
-  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [members, setMembers] = useState<Partial<TeamMember>[]>([])
+  const [territories, setTerritories] = useState<Partial<CrmTerritory>[]>([])
+  const [errors, setErrors] = useState<Record<string, string>>({})
 
   const handleInputChange = (field: string, value: string | boolean) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
+    setFormData((prev) => ({ ...prev, [field]: value }))
     if (errors[field]) {
-      setErrors((prev) => ({ ...prev, [field]: "" }));
+      setErrors((prev) => ({ ...prev, [field]: '' }))
     }
-  };
+  }
 
   const addMember = () => {
     setMembers((prev) => [
       ...prev,
       {
-        employeeId: "",
+        employeeId: '',
         role: TeamRoleEnum.Member,
         isActive: true,
       },
-    ]);
-  };
+    ])
+  }
 
   const removeMember = (index: number) => {
-    setMembers((prev) => prev.filter((_, i) => i !== index));
-  };
+    setMembers((prev) => prev.filter((_, i) => i !== index))
+  }
 
-  const updateMember = (
-    index: number,
-    field: string,
-    value: string | TeamRoleEnum | boolean
-  ) => {
+  const updateMember = (index: number, field: string, value: string | TeamRoleEnum | boolean) => {
     setMembers((prev) =>
-      prev.map((member, i) =>
-        i === index ? { ...member, [field]: value } : member
-      )
-    );
-  };
+      prev.map((member, i) => (i === index ? { ...member, [field]: value } : member)),
+    )
+  }
 
   const addTerritory = () => {
     setTerritories((prev) => [
       ...prev,
       {
-        territoryCode: "",
-        name: "",
-        description: "",
-        region: "",
+        territoryCode: '',
+        name: '',
+        description: '',
+        region: '',
         countries: [],
         cities: [],
         isActive: true,
       },
-    ]);
-  };
+    ])
+  }
 
   const removeTerritory = (index: number) => {
-    setTerritories((prev) => prev.filter((_, i) => i !== index));
-  };
+    setTerritories((prev) => prev.filter((_, i) => i !== index))
+  }
 
-  const updateTerritory = (
-    index: number,
-    field: string,
-    value: string | string[] | boolean
-  ) => {
+  const updateTerritory = (index: number, field: string, value: string | string[] | boolean) => {
     setTerritories((prev) =>
-      prev.map((territory, i) =>
-        i === index ? { ...territory, [field]: value } : territory
-      )
-    );
-  };
+      prev.map((territory, i) => (i === index ? { ...territory, [field]: value } : territory)),
+    )
+  }
 
   const validateForm = () => {
-    const newErrors: Record<string, string> = {};
+    const newErrors: Record<string, string> = {}
 
     if (!formData.teamCode.trim()) {
-      newErrors.teamCode = "Takım kodu zorunludur";
+      newErrors.teamCode = 'Takım kodu zorunludur'
     }
     if (!formData.name.trim()) {
-      newErrors.name = "Takım adı zorunludur";
+      newErrors.name = 'Takım adı zorunludur'
     }
     if (!formData.managerId.trim()) {
-      newErrors.managerId = "Takım lideri seçimi zorunludur";
+      newErrors.managerId = 'Takım lideri seçimi zorunludur'
     }
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
 
   const handleSave = () => {
-    if (!validateForm()) return;
+    if (!validateForm()) return
 
     const newTeam: Partial<Team> = {
       ...formData,
       members: members.map((member, index) => ({
         ...member,
         id: `member-new-${index}`,
-        teamId: "new-team",
+        teamId: 'new-team',
         joinDate: new Date(),
       })) as TeamMember[],
       territories: territories.map((territory, index) => ({
         ...territory,
         id: `territory-new-${index}`,
-        assignedTeamId: "new-team",
+        assignedTeamId: 'new-team',
       })) as CrmTerritory[],
       targets: [],
       creationTime: new Date(),
       lastModificationTime: new Date(),
-    };
+    }
 
-    console.log("Creating new sales team:", newTeam);
-    alert("Satış ekibi başarıyla oluşturuldu!");
-    navigate("/admin/crm/sales-teams");
-  };
+    console.log('Creating new sales team:', newTeam)
+    alert('Satış ekibi başarıyla oluşturuldu!')
+    navigate('/admin/crm/sales-teams')
+  }
 
   const handleCancel = () => {
-    if (
-      confirm("Değişiklikler kaydedilmedi. Çıkmak istediğinizden emin misiniz?")
-    ) {
-      navigate("/admin/crm/sales-teams");
+    if (confirm('Değişiklikler kaydedilmedi. Çıkmak istediğinizden emin misiniz?')) {
+      navigate('/admin/crm/sales-teams')
     }
-  };
+  }
 
   return (
-    <div className="space-y-4 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <button
-            onClick={() => navigate("/admin/crm/sales-teams")}
-            className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-          >
-            <FaArrowLeft className="w-5 h-5" />
-          </button>
-          <div>
-            <h2 className="text-xl font-bold text-gray-900">
-              Yeni Satış Ekibi
-            </h2>
-            <p className="text-sm text-gray-600 mt-1">
-              Yeni satış ekibi oluşturun ve ekip üyelerini atayın
-            </p>
+    <Container>
+      <div className="space-y-4 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => navigate('/admin/crm/sales-teams')}
+              className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              <FaArrowLeft className="w-5 h-5" />
+            </button>
+            <div>
+              <h2 className="text-xl font-bold text-gray-900">Yeni Satış Ekibi</h2>
+              <p className="text-sm text-gray-600 mt-1">
+                Yeni satış ekibi oluşturun ve ekip üyelerini atayın
+              </p>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <button
+              onClick={handleCancel}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
+            >
+              <FaTimes className="w-4 h-4" />
+              İptal
+            </button>
+            <button
+              onClick={handleSave}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            >
+              <FaSave className="w-4 h-4" />
+              Kaydet
+            </button>
           </div>
         </div>
 
-        <div className="flex gap-2">
-          <button
-            onClick={handleCancel}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
-          >
-            <FaTimes className="w-4 h-4" />
-            İptal
-          </button>
-          <button
-            onClick={handleSave}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-          >
-            <FaSave className="w-4 h-4" />
-            Kaydet
-          </button>
-        </div>
-      </div>
+        {/* Form */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          {/* Basic Information */}
+          <div className="lg:col-span-2">
+            <div className="bg-white rounded-lg shadow-sm border p-4">
+              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                <FaUsers className="w-5 h-5 mr-2" />
+                Temel Bilgiler
+              </h3>
 
-      {/* Form */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        {/* Basic Information */}
-        <div className="lg:col-span-2">
-          <div className="bg-white rounded-lg shadow-sm border p-4">
-            <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-              <FaUsers className="w-5 h-5 mr-2" />
-              Temel Bilgiler
-            </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Takım Kodu *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.teamCode}
+                    onChange={(e) => handleInputChange('teamCode', e.target.value)}
+                    className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                      errors.teamCode ? 'border-red-500' : 'border-gray-300'
+                    }`}
+                    placeholder="ST-001"
+                  />
+                  {errors.teamCode && (
+                    <p className="text-red-500 text-sm mt-1">{errors.teamCode}</p>
+                  )}
+                </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Takım Kodu *
-                </label>
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Takım Lideri *
+                  </label>
+
+                  <select
+                    value={formData.managerId}
+                    onChange={(e) => handleInputChange('managerId', e.target.value)}
+                    className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                      errors.managerId ? 'border-red-500' : 'border-gray-300'
+                    }`}
+                  >
+                    <option value="">Çalışan seçin</option>
+                    {mockEmployees.map((employee) => (
+                      <option key={employee.id} value={employee.id}>
+                        {employee.fullName}
+                      </option>
+                    ))}
+                  </select>
+
+                  {errors.managerId && (
+                    <p className="text-red-500 text-sm mt-1">{errors.managerId}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="mt-4">
+                <label className="block text-xs font-medium text-gray-700 mb-1">Takım Adı *</label>
                 <input
                   type="text"
-                  value={formData.teamCode}
-                  onChange={(e) =>
-                    handleInputChange("teamCode", e.target.value)
-                  }
+                  value={formData.name}
+                  onChange={(e) => handleInputChange('name', e.target.value)}
                   className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                    errors.teamCode ? "border-red-500" : "border-gray-300"
+                    errors.name ? 'border-red-500' : 'border-gray-300'
                   }`}
-                  placeholder="ST-001"
+                  placeholder="Kurumsal Satış Ekibi"
                 />
-                {errors.teamCode && (
-                  <p className="text-red-500 text-sm mt-1">{errors.teamCode}</p>
-                )}
+                {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
               </div>
 
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Takım Lideri *
+              <div className="mt-4">
+                <label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => handleInputChange('description', e.target.value)}
+                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  rows={3}
+                  placeholder="Ekip açıklaması..."
+                />
+              </div>
+
+              <div className="mt-4">
+                <label className="flex items-center">
+                  <input
+                    type="checkbox"
+                    checked={formData.isActive}
+                    onChange={(e) => handleInputChange('isActive', e.target.checked)}
+                    className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                  />
+                  <span className="ml-2 text-sm text-gray-700">Aktif</span>
                 </label>
-
-                <select
-                  value={formData.managerId}
-                  onChange={(e) =>
-                    handleInputChange("managerId", e.target.value)
-                  }
-                  className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                    errors.managerId ? "border-red-500" : "border-gray-300"
-                  }`}
-                >
-                  <option value="">Çalışan seçin</option>
-                  {mockEmployees.map((employee) => (
-                    <option key={employee.id} value={employee.id}>
-                      {employee.fullName}
-                    </option>
-                  ))}
-                </select>
-
-                {errors.managerId && (
-                  <p className="text-red-500 text-sm mt-1">
-                    {errors.managerId}
-                  </p>
-                )}
               </div>
             </div>
 
-            <div className="mt-4">
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Takım Adı *
-              </label>
-              <input
-                type="text"
-                value={formData.name}
-                onChange={(e) => handleInputChange("name", e.target.value)}
-                className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors.name ? "border-red-500" : "border-gray-300"
-                }`}
-                placeholder="Kurumsal Satış Ekibi"
-              />
-              {errors.name && (
-                <p className="text-red-500 text-sm mt-1">{errors.name}</p>
-              )}
-            </div>
-
-            <div className="mt-4">
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Açıklama
-              </label>
-              <textarea
-                value={formData.description}
-                onChange={(e) =>
-                  handleInputChange("description", e.target.value)
-                }
-                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                rows={3}
-                placeholder="Ekip açıklaması..."
-              />
-            </div>
-
-            <div className="mt-4">
-              <label className="flex items-center">
-                <input
-                  type="checkbox"
-                  checked={formData.isActive}
-                  onChange={(e) =>
-                    handleInputChange("isActive", e.target.checked)
-                  }
-                  className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
-                />
-                <span className="ml-2 text-sm text-gray-700">Aktif</span>
-              </label>
-            </div>
-          </div>
-
-          {/* Team Members */}
-          <div className="bg-white rounded-lg shadow-sm border p-4 mt-4">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-base font-semibold text-gray-900 flex items-center">
-                <FaUsers className="w-5 h-5 mr-2" />
-                Ekip Üyeleri
-              </h3>
-              <button
-                onClick={addMember}
-                className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
-              >
-                <FaPlus className="w-4 h-4" />
-                Üye Ekle
-              </button>
-            </div>
-
-            <div className="space-y-3">
-              {members.map((member, index) => (
-                <div
-                  key={index}
-                  className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg"
+            {/* Team Members */}
+            <div className="bg-white rounded-lg shadow-sm border p-4 mt-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-base font-semibold text-gray-900 flex items-center">
+                  <FaUsers className="w-5 h-5 mr-2" />
+                  Ekip Üyeleri
+                </h3>
+                <button
+                  onClick={addMember}
+                  className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
                 >
-                  <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Çalışan
-                      </label>
-                      <select
-                        value={member.employeeId || ""}
-                        onChange={(e) =>
-                          updateMember(index, "employeeId", e.target.value)
-                        }
-                        className="w-full 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="">Çalışan seçin</option>
-                        {mockEmployees.map((employee) => (
-                          <option key={employee.id} value={employee.id}>
-                            {employee.fullName}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Rol
-                      </label>
-                      <select
-                        value={member.role || TeamRoleEnum.Member}
-                        onChange={(e) =>
-                          updateMember(index, "role", e.target.value)
-                        }
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                      >
-                        <option value={TeamRoleEnum.Member}>Üye</option>
-                        <option value={TeamRoleEnum.Lead}>Takım Lideri</option>
-                        <option value={TeamRoleEnum.Manager}>Yönetici</option>
-                      </select>
-                    </div>
-                  </div>
-                  <button
-                    onClick={() => removeMember(index)}
-                    className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                  <FaPlus className="w-4 h-4" />
+                  Üye Ekle
+                </button>
+              </div>
+
+              <div className="space-y-3">
+                {members.map((member, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg"
                   >
-                    <FaTrash className="w-4 h-4" />
-                  </button>
-                </div>
-              ))}
-
-              {members.length === 0 && (
-                <div className="text-center py-8 text-gray-500">
-                  <FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
-                  <p>Henüz ekip üyesi eklenmedi</p>
-                  <p className="text-sm">
-                    Üye eklemek için yukarıdaki butona tıklayın
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Territories */}
-        <div>
-          <div className="bg-white rounded-lg shadow-sm border p-4">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-base font-semibold text-gray-900 flex items-center">
-                <FaMapMarkerAlt className="w-5 h-5 mr-2" />
-                Bölgeler
-              </h3>
-              <button
-                onClick={addTerritory}
-                className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
-              >
-                <FaPlus className="w-4 h-4" />
-                Bölge Ekle
-              </button>
-            </div>
-
-            <div className="space-y-3">
-              {territories.map((territory, index) => (
-                <div
-                  key={index}
-                  className="p-3 border border-gray-200 rounded-lg"
-                >
-                  <div className="flex justify-between items-start mb-3">
-                    <h4 className="font-medium text-gray-900">
-                      Bölge {index + 1}
-                    </h4>
+                    <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Çalışan
+                        </label>
+                        <select
+                          value={member.employeeId || ''}
+                          onChange={(e) => updateMember(index, 'employeeId', e.target.value)}
+                          className="w-full 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="">Çalışan seçin</option>
+                          {mockEmployees.map((employee) => (
+                            <option key={employee.id} value={employee.id}>
+                              {employee.fullName}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">Rol</label>
+                        <select
+                          value={member.role || TeamRoleEnum.Member}
+                          onChange={(e) => updateMember(index, 'role', e.target.value)}
+                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        >
+                          <option value={TeamRoleEnum.Member}>Üye</option>
+                          <option value={TeamRoleEnum.Lead}>Takım Lideri</option>
+                          <option value={TeamRoleEnum.Manager}>Yönetici</option>
+                        </select>
+                      </div>
+                    </div>
                     <button
-                      onClick={() => removeTerritory(index)}
-                      className="p-1.5 text-red-600 hover:bg-red-50 rounded"
+                      onClick={() => removeMember(index)}
+                      className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                     >
                       <FaTrash className="w-4 h-4" />
                     </button>
                   </div>
+                ))}
 
-                  <div className="space-y-2">
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Bölge Kodu
-                      </label>
-                      <input
-                        type="text"
-                        value={territory.territoryCode || ""}
-                        onChange={(e) =>
-                          updateTerritory(
-                            index,
-                            "territoryCode",
-                            e.target.value
-                          )
-                        }
-                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                        placeholder="TR-IST"
-                      />
+                {members.length === 0 && (
+                  <div className="text-center py-8 text-gray-500">
+                    <FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
+                    <p>Henüz ekip üyesi eklenmedi</p>
+                    <p className="text-sm">Üye eklemek için yukarıdaki butona tıklayın</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Territories */}
+          <div>
+            <div className="bg-white rounded-lg shadow-sm border p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-base font-semibold text-gray-900 flex items-center">
+                  <FaMapMarkerAlt className="w-5 h-5 mr-2" />
+                  Bölgeler
+                </h3>
+                <button
+                  onClick={addTerritory}
+                  className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
+                >
+                  <FaPlus className="w-4 h-4" />
+                  Bölge Ekle
+                </button>
+              </div>
+
+              <div className="space-y-3">
+                {territories.map((territory, index) => (
+                  <div key={index} className="p-3 border border-gray-200 rounded-lg">
+                    <div className="flex justify-between items-start mb-3">
+                      <h4 className="font-medium text-gray-900">Bölge {index + 1}</h4>
+                      <button
+                        onClick={() => removeTerritory(index)}
+                        className="p-1.5 text-red-600 hover:bg-red-50 rounded"
+                      >
+                        <FaTrash className="w-4 h-4" />
+                      </button>
                     </div>
 
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Bölge Adı
-                      </label>
-                      <input
-                        type="text"
-                        value={territory.name || ""}
-                        onChange={(e) =>
-                          updateTerritory(index, "name", e.target.value)
-                        }
-                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                        placeholder="İstanbul Anadolu"
-                      />
-                    </div>
+                    <div className="space-y-2">
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Bölge Kodu
+                        </label>
+                        <input
+                          type="text"
+                          value={territory.territoryCode || ''}
+                          onChange={(e) => updateTerritory(index, 'territoryCode', e.target.value)}
+                          className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          placeholder="TR-IST"
+                        />
+                      </div>
 
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Bölge
-                      </label>
-                      <input
-                        type="text"
-                        value={territory.region || ""}
-                        onChange={(e) =>
-                          updateTerritory(index, "region", e.target.value)
-                        }
-                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                        placeholder="Marmara"
-                      />
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Bölge Adı
+                        </label>
+                        <input
+                          type="text"
+                          value={territory.name || ''}
+                          onChange={(e) => updateTerritory(index, 'name', e.target.value)}
+                          className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          placeholder="İstanbul Anadolu"
+                        />
+                      </div>
+
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Bölge
+                        </label>
+                        <input
+                          type="text"
+                          value={territory.region || ''}
+                          onChange={(e) => updateTerritory(index, 'region', e.target.value)}
+                          className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          placeholder="Marmara"
+                        />
+                      </div>
                     </div>
                   </div>
-                </div>
-              ))}
+                ))}
 
-              {territories.length === 0 && (
-                <div className="text-center py-8 text-gray-500">
-                  <FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
-                  <p>Henüz bölge eklenmedi</p>
-                  <p className="text-sm">
-                    Bölge eklemek için yukarıdaki butona tıklayın
-                  </p>
-                </div>
-              )}
+                {territories.length === 0 && (
+                  <div className="text-center py-8 text-gray-500">
+                    <FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
+                    <p>Henüz bölge eklenmedi</p>
+                    <p className="text-sm">Bölge eklemek için yukarıdaki butona tıklayın</p>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default SalesTeamCreate;
+export default SalesTeamCreate
diff --git a/ui/src/views/crm/components/SalesTeamEdit.tsx b/ui/src/views/crm/components/SalesTeamEdit.tsx
index 47648f1e..f45b34b2 100644
--- a/ui/src/views/crm/components/SalesTeamEdit.tsx
+++ b/ui/src/views/crm/components/SalesTeamEdit.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react'
 import {
   FaUsers,
   FaArrowLeft,
@@ -7,131 +7,120 @@ import {
   FaPlus,
   FaTrash,
   FaMapMarkerAlt,
-} from "react-icons/fa";
-import { useNavigate, useParams } from "react-router-dom";
-import { CrmTerritory } from "../../../types/crm";
-import mockSalesTeams from "../../../mocks/mockSalesTeams";
-import { mockEmployees } from "../../../mocks/mockEmployees";
-import { Team, TeamMember, TeamRoleEnum } from "../../../types/common";
+} from 'react-icons/fa'
+import { useNavigate, useParams } from 'react-router-dom'
+import { CrmTerritory } from '../../../types/crm'
+import mockSalesTeams from '../../../mocks/mockSalesTeams'
+import { mockEmployees } from '../../../mocks/mockEmployees'
+import { Team, TeamMember, TeamRoleEnum } from '../../../types/common'
+import { Container } from '@/components/shared'
 
 const SalesTeamEdit: React.FC = () => {
-  const navigate = useNavigate();
-  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate()
+  const { id } = useParams<{ id: string }>()
 
   const [formData, setFormData] = useState({
-    teamCode: "",
-    name: "",
-    description: "",
-    managerId: "",
+    teamCode: '',
+    name: '',
+    description: '',
+    managerId: '',
     isActive: true,
-  });
+  })
 
-  const [members, setMembers] = useState<Partial<TeamMember>[]>([]);
-  const [territories, setTerritories] = useState<Partial<CrmTerritory>[]>([]);
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [loading, setLoading] = useState(true);
+  const [members, setMembers] = useState<Partial<TeamMember>[]>([])
+  const [territories, setTerritories] = useState<Partial<CrmTerritory>[]>([])
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [loading, setLoading] = useState(true)
 
   // Load team data on component mount
   useEffect(() => {
-    const team = mockSalesTeams.find((t) => t.id === id);
+    const team = mockSalesTeams.find((t) => t.id === id)
     if (team) {
       setFormData({
         teamCode: team.code,
         name: team.name,
-        description: team.description || "",
+        description: team.description || '',
         managerId: team.managerId,
         isActive: team.isActive,
-      });
-      setMembers(team.members || []);
-      setTerritories(team.territories || []);
+      })
+      setMembers(team.members || [])
+      setTerritories(team.territories || [])
     }
-    setLoading(false);
-  }, [id]);
+    setLoading(false)
+  }, [id])
 
   const handleInputChange = (field: string, value: string | boolean) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
+    setFormData((prev) => ({ ...prev, [field]: value }))
     if (errors[field]) {
-      setErrors((prev) => ({ ...prev, [field]: "" }));
+      setErrors((prev) => ({ ...prev, [field]: '' }))
     }
-  };
+  }
 
   const addMember = () => {
     setMembers((prev) => [
       ...prev,
       {
-        employeeId: "",
+        employeeId: '',
         role: TeamRoleEnum.Member,
         isActive: true,
       },
-    ]);
-  };
+    ])
+  }
 
   const removeMember = (index: number) => {
-    setMembers((prev) => prev.filter((_, i) => i !== index));
-  };
+    setMembers((prev) => prev.filter((_, i) => i !== index))
+  }
 
-  const updateMember = (
-    index: number,
-    field: string,
-    value: string | TeamRoleEnum | boolean
-  ) => {
+  const updateMember = (index: number, field: string, value: string | TeamRoleEnum | boolean) => {
     setMembers((prev) =>
-      prev.map((member, i) =>
-        i === index ? { ...member, [field]: value } : member
-      )
-    );
-  };
+      prev.map((member, i) => (i === index ? { ...member, [field]: value } : member)),
+    )
+  }
 
   const addTerritory = () => {
     setTerritories((prev) => [
       ...prev,
       {
-        territoryCode: "",
-        name: "",
-        description: "",
-        region: "",
+        territoryCode: '',
+        name: '',
+        description: '',
+        region: '',
         countries: [],
         cities: [],
         isActive: true,
       },
-    ]);
-  };
+    ])
+  }
 
   const removeTerritory = (index: number) => {
-    setTerritories((prev) => prev.filter((_, i) => i !== index));
-  };
+    setTerritories((prev) => prev.filter((_, i) => i !== index))
+  }
 
-  const updateTerritory = (
-    index: number,
-    field: string,
-    value: string | string[] | boolean
-  ) => {
+  const updateTerritory = (index: number, field: string, value: string | string[] | boolean) => {
     setTerritories((prev) =>
-      prev.map((territory, i) =>
-        i === index ? { ...territory, [field]: value } : territory
-      )
-    );
-  };
+      prev.map((territory, i) => (i === index ? { ...territory, [field]: value } : territory)),
+    )
+  }
 
   const validateForm = () => {
-    const newErrors: Record<string, string> = {};
+    const newErrors: Record<string, string> = {}
 
     if (!formData.teamCode.trim()) {
-      newErrors.teamCode = "Takım kodu zorunludur";
+      newErrors.teamCode = 'Takım kodu zorunludur'
     }
     if (!formData.name.trim()) {
-      newErrors.name = "Takım adı zorunludur";
+      newErrors.name = 'Takım adı zorunludur'
     }
     if (!formData.managerId.trim()) {
-      newErrors.managerId = "Takım lideri seçimi zorunludur";
+      newErrors.managerId = 'Takım lideri seçimi zorunludur'
     }
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
 
   const handleSave = () => {
-    if (!validateForm()) return;
+    if (!validateForm()) return
 
     const updatedTeam: Partial<Team> = {
       id,
@@ -139,29 +128,27 @@ const SalesTeamEdit: React.FC = () => {
       members: members.map((member, index) => ({
         ...member,
         id: member.id || `member-updated-${index}`,
-        teamId: id || "",
+        teamId: id || '',
         joinDate: member.joinDate || new Date(),
       })) as TeamMember[],
       territories: territories.map((territory, index) => ({
         ...territory,
         id: territory.id || `territory-updated-${index}`,
-        assignedTeamId: id || "",
+        assignedTeamId: id || '',
       })) as CrmTerritory[],
       lastModificationTime: new Date(),
-    };
+    }
 
-    console.log("Updating sales team:", updatedTeam);
-    alert("Satış ekibi başarıyla güncellendi!");
-    navigate("/admin/crm/sales-teams");
-  };
+    console.log('Updating sales team:', updatedTeam)
+    alert('Satış ekibi başarıyla güncellendi!')
+    navigate('/admin/crm/sales-teams')
+  }
 
   const handleCancel = () => {
-    if (
-      confirm("Değişiklikler kaydedilmedi. Çıkmak istediğinizden emin misiniz?")
-    ) {
-      navigate("/admin/crm/sales-teams");
+    if (confirm('Değişiklikler kaydedilmedi. Çıkmak istediğinizden emin misiniz?')) {
+      navigate('/admin/crm/sales-teams')
     }
-  };
+  }
 
   if (loading) {
     return (
@@ -171,365 +158,320 @@ const SalesTeamEdit: React.FC = () => {
           <p className="mt-4 text-gray-600">Yükleniyor...</p>
         </div>
       </div>
-    );
+    )
   }
 
-  const team = mockSalesTeams.find((t) => t.id === id);
+  const team = mockSalesTeams.find((t) => t.id === id)
   if (!team) {
     return (
       <div className="text-center py-12">
-        <h3 className="text-lg font-medium text-gray-900 mb-2">
-          Satış ekibi bulunamadı
-        </h3>
+        <h3 className="text-lg font-medium text-gray-900 mb-2">Satış ekibi bulunamadı</h3>
         <p className="text-gray-500 mb-4">
           Aradığınız satış ekibi mevcut değil veya silinmiş olabilir.
         </p>
         <button
-          onClick={() => navigate("/admin/crm/sales-teams")}
+          onClick={() => navigate('/admin/crm/sales-teams')}
           className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
         >
           Geri Dön
         </button>
       </div>
-    );
+    )
   }
 
   return (
-    <div className="space-y-4 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <button
-            onClick={() => navigate("/admin/crm/sales-teams")}
-            className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-          >
-            <FaArrowLeft className="w-5 h-5" />
-          </button>
-          <div>
-            <h2 className="text-xl font-bold text-gray-900">
-              Satış Ekibi Düzenle
-            </h2>
-            <p className="text-sm text-gray-600 mt-1">
-              {team.name} ekibini düzenleyin
-            </p>
+    <Container>
+      <div className="space-y-4 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => navigate('/admin/crm/sales-teams')}
+              className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              <FaArrowLeft className="w-5 h-5" />
+            </button>
+            <div>
+              <h2 className="text-xl font-bold text-gray-900">Satış Ekibi Düzenle</h2>
+              <p className="text-sm text-gray-600 mt-1">{team.name} ekibini düzenleyin</p>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <button
+              onClick={handleCancel}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
+            >
+              <FaTimes className="w-4 h-4" />
+              İptal
+            </button>
+            <button
+              onClick={handleSave}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            >
+              <FaSave className="w-4 h-4" />
+              Güncelle
+            </button>
           </div>
         </div>
 
-        <div className="flex gap-2">
-          <button
-            onClick={handleCancel}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
-          >
-            <FaTimes className="w-4 h-4" />
-            İptal
-          </button>
-          <button
-            onClick={handleSave}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-          >
-            <FaSave className="w-4 h-4" />
-            Güncelle
-          </button>
-        </div>
-      </div>
+        {/* Form */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          {/* Basic Information */}
+          <div className="lg:col-span-2">
+            <div className="bg-white rounded-lg shadow-sm border p-4">
+              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                <FaUsers className="w-5 h-5 mr-2" />
+                Temel Bilgiler
+              </h3>
 
-      {/* Form */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        {/* Basic Information */}
-        <div className="lg:col-span-2">
-          <div className="bg-white rounded-lg shadow-sm border p-4">
-            <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-              <FaUsers className="w-5 h-5 mr-2" />
-              Temel Bilgiler
-            </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Takım Kodu *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.teamCode}
+                    onChange={(e) => handleInputChange('teamCode', e.target.value)}
+                    className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                      errors.teamCode ? 'border-red-500' : 'border-gray-300'
+                    }`}
+                    placeholder="ST-001"
+                  />
+                  {errors.teamCode && (
+                    <p className="text-red-500 text-sm mt-1">{errors.teamCode}</p>
+                  )}
+                </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Takım Kodu *
-                </label>
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Takım Lideri *
+                  </label>
+
+                  <select
+                    value={formData.managerId}
+                    onChange={(e) => handleInputChange('managerId', e.target.value)}
+                    className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                      errors.managerId ? 'border-red-500' : 'border-gray-300'
+                    }`}
+                  >
+                    <option value="">Lider seçin</option>
+                    {mockEmployees.map((employee) => (
+                      <option key={employee.id} value={employee.id}>
+                        {employee.fullName}
+                      </option>
+                    ))}
+                  </select>
+                  {errors.managerId && (
+                    <p className="text-red-500 text-sm mt-1">{errors.managerId}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="mt-4">
+                <label className="block text-xs font-medium text-gray-700 mb-1">Takım Adı *</label>
                 <input
                   type="text"
-                  value={formData.teamCode}
-                  onChange={(e) =>
-                    handleInputChange("teamCode", e.target.value)
-                  }
+                  value={formData.name}
+                  onChange={(e) => handleInputChange('name', e.target.value)}
                   className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                    errors.teamCode ? "border-red-500" : "border-gray-300"
+                    errors.name ? 'border-red-500' : 'border-gray-300'
                   }`}
-                  placeholder="ST-001"
+                  placeholder="Kurumsal Satış Ekibi"
                 />
-                {errors.teamCode && (
-                  <p className="text-red-500 text-sm mt-1">{errors.teamCode}</p>
-                )}
+                {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
               </div>
 
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Takım Lideri *
+              <div className="mt-4">
+                <label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => handleInputChange('description', e.target.value)}
+                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  rows={3}
+                  placeholder="Ekip açıklaması..."
+                />
+              </div>
+
+              <div className="mt-4">
+                <label className="flex items-center">
+                  <input
+                    type="checkbox"
+                    checked={formData.isActive}
+                    onChange={(e) => handleInputChange('isActive', e.target.checked)}
+                    className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                  />
+                  <span className="ml-2 text-sm text-gray-700">Aktif</span>
                 </label>
-
-                <select
-                  value={formData.managerId}
-                  onChange={(e) =>
-                    handleInputChange("managerId", e.target.value)
-                  }
-                  className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                    errors.managerId ? "border-red-500" : "border-gray-300"
-                  }`}
-                >
-                  <option value="">Lider seçin</option>
-                  {mockEmployees.map((employee) => (
-                    <option key={employee.id} value={employee.id}>
-                      {employee.fullName}
-                    </option>
-                  ))}
-                </select>
-                {errors.managerId && (
-                  <p className="text-red-500 text-sm mt-1">
-                    {errors.managerId}
-                  </p>
-                )}
               </div>
             </div>
 
-            <div className="mt-4">
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Takım Adı *
-              </label>
-              <input
-                type="text"
-                value={formData.name}
-                onChange={(e) => handleInputChange("name", e.target.value)}
-                className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors.name ? "border-red-500" : "border-gray-300"
-                }`}
-                placeholder="Kurumsal Satış Ekibi"
-              />
-              {errors.name && (
-                <p className="text-red-500 text-sm mt-1">{errors.name}</p>
-              )}
-            </div>
-
-            <div className="mt-4">
-              <label className="block text-xs font-medium text-gray-700 mb-1">
-                Açıklama
-              </label>
-              <textarea
-                value={formData.description}
-                onChange={(e) =>
-                  handleInputChange("description", e.target.value)
-                }
-                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                rows={3}
-                placeholder="Ekip açıklaması..."
-              />
-            </div>
-
-            <div className="mt-4">
-              <label className="flex items-center">
-                <input
-                  type="checkbox"
-                  checked={formData.isActive}
-                  onChange={(e) =>
-                    handleInputChange("isActive", e.target.checked)
-                  }
-                  className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
-                />
-                <span className="ml-2 text-sm text-gray-700">Aktif</span>
-              </label>
-            </div>
-          </div>
-
-          {/* Team Members */}
-          <div className="bg-white rounded-lg shadow-sm border p-4 mt-4">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-base font-semibold text-gray-900 flex items-center">
-                <FaUsers className="w-5 h-5 mr-2" />
-                Ekip Üyeleri
-              </h3>
-              <button
-                onClick={addMember}
-                className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
-              >
-                <FaPlus className="w-4 h-4" />
-                Üye Ekle
-              </button>
-            </div>
-
-            <div className="space-y-3">
-              {members.map((member, index) => (
-                <div
-                  key={index}
-                  className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg"
+            {/* Team Members */}
+            <div className="bg-white rounded-lg shadow-sm border p-4 mt-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-base font-semibold text-gray-900 flex items-center">
+                  <FaUsers className="w-5 h-5 mr-2" />
+                  Ekip Üyeleri
+                </h3>
+                <button
+                  onClick={addMember}
+                  className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
                 >
-                  <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Çalışan
-                      </label>
+                  <FaPlus className="w-4 h-4" />
+                  Üye Ekle
+                </button>
+              </div>
 
-                      <select
-                        value={member.employeeId || ""}
-                        onChange={(e) =>
-                          updateMember(index, "employeeId", e.target.value)
-                        }
-                        className="w-full 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="">Çalışan seçin</option>
-                        {mockEmployees.map((employee) => (
-                          <option key={employee.id} value={employee.id}>
-                            {employee.fullName}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Rol
-                      </label>
-                      <select
-                        value={member.role || TeamRoleEnum.Member}
-                        onChange={(e) =>
-                          updateMember(
-                            index,
-                            "role",
-                            e.target.value as TeamRoleEnum
-                          )
-                        }
-                        className="w-full 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={TeamRoleEnum.Member}>Üye</option>
-                        <option value={TeamRoleEnum.Lead}>Takım Lideri</option>
-                        <option value={TeamRoleEnum.Manager}>Yönetici</option>
-                      </select>
-                    </div>
-                  </div>
-                  <button
-                    onClick={() => removeMember(index)}
-                    className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+              <div className="space-y-3">
+                {members.map((member, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg"
                   >
-                    <FaTrash className="w-4 h-4" />
-                  </button>
-                </div>
-              ))}
+                    <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Çalışan
+                        </label>
 
-              {members.length === 0 && (
-                <div className="text-center py-8 text-gray-500">
-                  <FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
-                  <p>Henüz ekip üyesi yok</p>
-                  <p className="text-sm">
-                    Üye eklemek için yukarıdaki butona tıklayın
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Territories */}
-        <div>
-          <div className="bg-white rounded-lg shadow-sm border p-4">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-base font-semibold text-gray-900 flex items-center">
-                <FaMapMarkerAlt className="w-5 h-5 mr-2" />
-                Bölgeler
-              </h3>
-              <button
-                onClick={addTerritory}
-                className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
-              >
-                <FaPlus className="w-4 h-4" />
-                Bölge Ekle
-              </button>
-            </div>
-
-            <div className="space-y-3">
-              {territories.map((territory, index) => (
-                <div
-                  key={index}
-                  className="p-3 border border-gray-200 rounded-lg"
-                >
-                  <div className="flex justify-between items-start mb-3">
-                    <h4 className="font-medium text-gray-900">
-                      {territory.name || `Bölge ${index + 1}`}
-                    </h4>
+                        <select
+                          value={member.employeeId || ''}
+                          onChange={(e) => updateMember(index, 'employeeId', e.target.value)}
+                          className="w-full 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="">Çalışan seçin</option>
+                          {mockEmployees.map((employee) => (
+                            <option key={employee.id} value={employee.id}>
+                              {employee.fullName}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">Rol</label>
+                        <select
+                          value={member.role || TeamRoleEnum.Member}
+                          onChange={(e) =>
+                            updateMember(index, 'role', e.target.value as TeamRoleEnum)
+                          }
+                          className="w-full 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={TeamRoleEnum.Member}>Üye</option>
+                          <option value={TeamRoleEnum.Lead}>Takım Lideri</option>
+                          <option value={TeamRoleEnum.Manager}>Yönetici</option>
+                        </select>
+                      </div>
+                    </div>
                     <button
-                      onClick={() => removeTerritory(index)}
-                      className="p-1.5 text-red-600 hover:bg-red-50 rounded"
+                      onClick={() => removeMember(index)}
+                      className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                     >
                       <FaTrash className="w-4 h-4" />
                     </button>
                   </div>
+                ))}
 
-                  <div className="space-y-2">
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Bölge Kodu
-                      </label>
-                      <input
-                        type="text"
-                        value={territory.territoryCode || ""}
-                        onChange={(e) =>
-                          updateTerritory(
-                            index,
-                            "territoryCode",
-                            e.target.value
-                          )
-                        }
-                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                        placeholder="TR-IST"
-                      />
+                {members.length === 0 && (
+                  <div className="text-center py-8 text-gray-500">
+                    <FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
+                    <p>Henüz ekip üyesi yok</p>
+                    <p className="text-sm">Üye eklemek için yukarıdaki butona tıklayın</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Territories */}
+          <div>
+            <div className="bg-white rounded-lg shadow-sm border p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-base font-semibold text-gray-900 flex items-center">
+                  <FaMapMarkerAlt className="w-5 h-5 mr-2" />
+                  Bölgeler
+                </h3>
+                <button
+                  onClick={addTerritory}
+                  className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
+                >
+                  <FaPlus className="w-4 h-4" />
+                  Bölge Ekle
+                </button>
+              </div>
+
+              <div className="space-y-3">
+                {territories.map((territory, index) => (
+                  <div key={index} className="p-3 border border-gray-200 rounded-lg">
+                    <div className="flex justify-between items-start mb-3">
+                      <h4 className="font-medium text-gray-900">
+                        {territory.name || `Bölge ${index + 1}`}
+                      </h4>
+                      <button
+                        onClick={() => removeTerritory(index)}
+                        className="p-1.5 text-red-600 hover:bg-red-50 rounded"
+                      >
+                        <FaTrash className="w-4 h-4" />
+                      </button>
                     </div>
 
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Bölge Adı
-                      </label>
-                      <input
-                        type="text"
-                        value={territory.name || ""}
-                        onChange={(e) =>
-                          updateTerritory(index, "name", e.target.value)
-                        }
-                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                        placeholder="İstanbul Anadolu"
-                      />
-                    </div>
+                    <div className="space-y-2">
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Bölge Kodu
+                        </label>
+                        <input
+                          type="text"
+                          value={territory.territoryCode || ''}
+                          onChange={(e) => updateTerritory(index, 'territoryCode', e.target.value)}
+                          className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          placeholder="TR-IST"
+                        />
+                      </div>
 
-                    <div>
-                      <label className="block text-xs font-medium text-gray-700 mb-1">
-                        Bölge
-                      </label>
-                      <input
-                        type="text"
-                        value={territory.region || ""}
-                        onChange={(e) =>
-                          updateTerritory(index, "region", e.target.value)
-                        }
-                        className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                        placeholder="Marmara"
-                      />
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Bölge Adı
+                        </label>
+                        <input
+                          type="text"
+                          value={territory.name || ''}
+                          onChange={(e) => updateTerritory(index, 'name', e.target.value)}
+                          className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          placeholder="İstanbul Anadolu"
+                        />
+                      </div>
+
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                          Bölge
+                        </label>
+                        <input
+                          type="text"
+                          value={territory.region || ''}
+                          onChange={(e) => updateTerritory(index, 'region', e.target.value)}
+                          className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          placeholder="Marmara"
+                        />
+                      </div>
                     </div>
                   </div>
-                </div>
-              ))}
+                ))}
 
-              {territories.length === 0 && (
-                <div className="text-center py-8 text-gray-500">
-                  <FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
-                  <p>Henüz bölge yok</p>
-                  <p className="text-sm">
-                    Bölge eklemek için yukarıdaki butona tıklayın
-                  </p>
-                </div>
-              )}
+                {territories.length === 0 && (
+                  <div className="text-center py-8 text-gray-500">
+                    <FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
+                    <p>Henüz bölge yok</p>
+                    <p className="text-sm">Bölge eklemek için yukarıdaki butona tıklayın</p>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default SalesTeamEdit;
+export default SalesTeamEdit
diff --git a/ui/src/views/crm/components/SalesTeamView.tsx b/ui/src/views/crm/components/SalesTeamView.tsx
index 477f0f2f..c625eab2 100644
--- a/ui/src/views/crm/components/SalesTeamView.tsx
+++ b/ui/src/views/crm/components/SalesTeamView.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 import {
   FaUsers,
   FaArrowLeft,
@@ -11,475 +11,439 @@ import {
   FaAward,
   FaTrophy,
   FaChartLine,
-} from "react-icons/fa";
-import { useNavigate, useParams } from "react-router-dom";
-import mockSalesTeams from "../../../mocks/mockSalesTeams";
-import dayjs from "dayjs";
-import { Team, TeamRoleEnum } from "../../../types/common";
-import { getTeamRoleText } from "../../../utils/erp";
+} from 'react-icons/fa'
+import { useNavigate, useParams } from 'react-router-dom'
+import mockSalesTeams from '../../../mocks/mockSalesTeams'
+import dayjs from 'dayjs'
+import { Team, TeamRoleEnum } from '../../../types/common'
+import { getTeamRoleText } from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 const SalesTeamView: React.FC = () => {
-  const navigate = useNavigate();
-  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate()
+  const { id } = useParams<{ id: string }>()
 
-  const team = mockSalesTeams.find((t) => t.id === id);
+  const team = mockSalesTeams.find((t) => t.id === id)
 
   const calculateTeamPerformance = (team: Team): number => {
-    if (!team.targets || team.targets.length === 0) return 0;
-    const activeTarget = team.targets.find((t) => t.status === "ACTIVE");
-    if (!activeTarget || activeTarget.targetValue === 0) return 0;
-    return (activeTarget.actualValue / activeTarget.targetValue) * 100;
-  };
+    if (!team.targets || team.targets.length === 0) return 0
+    const activeTarget = team.targets.find((t) => t.status === 'ACTIVE')
+    if (!activeTarget || activeTarget.targetValue === 0) return 0
+    return (activeTarget.actualValue / activeTarget.targetValue) * 100
+  }
 
   const calculateTeamRevenue = (team: Team): number => {
-    if (!team.targets || team.targets.length === 0) return 0;
-    return team.targets.reduce((sum, target) => sum + target.actualValue, 0);
-  };
+    if (!team.targets || team.targets.length === 0) return 0
+    return team.targets.reduce((sum, target) => sum + target.actualValue, 0)
+  }
 
   const handleEdit = () => {
-    navigate(`/admin/crm/sales-teams/edit/${id}`);
-  };
+    navigate(`/admin/crm/sales-teams/edit/${id}`)
+  }
 
   const handleDelete = () => {
     if (confirm(`${team?.name} ekibini silmek istediğinizden emin misiniz?`)) {
-      console.log("Delete sales team:", id);
-      alert("Ekip silindi (mock)");
-      navigate("/admin/crm/sales-teams");
+      console.log('Delete sales team:', id)
+      alert('Ekip silindi (mock)')
+      navigate('/admin/crm/sales-teams')
     }
-  };
+  }
 
   if (!team) {
     return (
       <div className="text-center py-12">
-        <h3 className="text-lg font-medium text-gray-900 mb-2">
-          Satış ekibi bulunamadı
-        </h3>
+        <h3 className="text-lg font-medium text-gray-900 mb-2">Satış ekibi bulunamadı</h3>
         <p className="text-gray-500 mb-4">
           Aradığınız satış ekibi mevcut değil veya silinmiş olabilir.
         </p>
         <button
-          onClick={() => navigate("/admin/crm/sales-teams")}
+          onClick={() => navigate('/admin/crm/sales-teams')}
           className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
         >
           Geri Dön
         </button>
       </div>
-    );
+    )
   }
 
-  const performance = calculateTeamPerformance(team);
-  const revenue = calculateTeamRevenue(team);
-  const activeTarget = team.targets?.find((t) => t.status === "ACTIVE");
+  const performance = calculateTeamPerformance(team)
+  const revenue = calculateTeamRevenue(team)
+  const activeTarget = team.targets?.find((t) => t.status === 'ACTIVE')
 
   return (
-    <div className="space-y-6 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <button
-            onClick={() => navigate("/admin/crm/sales-teams")}
-            className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-          >
-            <FaArrowLeft className="w-5 h-5" />
-          </button>
-          <div>
-            <h2 className="text-xl font-bold text-gray-900">{team.name}</h2>
-            <p className="text-gray-600 mt-1">
-              {team.code} • Satış ekibi detayları
-            </p>
-          </div>
-        </div>
-
-        <div className="flex gap-3">
-          <button
-            onClick={handleEdit}
-            className="flex items-center gap-2 px-4 py-2 text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
-          >
-            <FaEdit className="w-4 h-4" />
-            Düzenle
-          </button>
-          <button
-            onClick={handleDelete}
-            className="flex items-center gap-2 px-4 py-2 text-red-600 border border-red-200 rounded-md hover:bg-red-50 transition-colors"
-          >
-            <FaTrash className="w-4 h-4" />
-            Sil
-          </button>
-        </div>
-      </div>
-
-      {/* Overview Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div className="bg-white p-4 rounded-lg shadow-sm border">
-          <div className="flex items-center">
-            <FaUsers className="w-6 h-6 text-blue-500" />
-            <div className="ml-4">
-              <p className="text-sm font-medium text-gray-600">Üye Sayısı</p>
-              <p className="text-xl font-bold text-gray-900">
-                {team.members?.length || 0}
-              </p>
+    <Container>
+      <div className="space-y-6 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => navigate('/admin/crm/sales-teams')}
+              className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              <FaArrowLeft className="w-5 h-5" />
+            </button>
+            <div>
+              <h2 className="text-xl font-bold text-gray-900">{team.name}</h2>
+              <p className="text-gray-600 mt-1">{team.code} • Satış ekibi detayları</p>
             </div>
           </div>
-        </div>
 
-        <div className="bg-white p-4 rounded-lg shadow-sm border">
-          <div className="flex items-center">
-            <FaMapMarkerAlt className="w-6 h-6 text-green-500" />
-            <div className="ml-4">
-              <p className="text-sm font-medium text-gray-600">Bölge Sayısı</p>
-              <p className="text-xl font-bold text-gray-900">
-                {team.territories?.length || 0}
-              </p>
-            </div>
+          <div className="flex gap-3">
+            <button
+              onClick={handleEdit}
+              className="flex items-center gap-2 px-4 py-2 text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
+            >
+              <FaEdit className="w-4 h-4" />
+              Düzenle
+            </button>
+            <button
+              onClick={handleDelete}
+              className="flex items-center gap-2 px-4 py-2 text-red-600 border border-red-200 rounded-md hover:bg-red-50 transition-colors"
+            >
+              <FaTrash className="w-4 h-4" />
+              Sil
+            </button>
           </div>
         </div>
 
-        <div className="bg-white p-4 rounded-lg shadow-sm border">
-          <div className="flex items-center">
-            <FaArrowUp
-              className={`w-6 h-6 ${
-                performance >= 100
-                  ? "text-green-600"
-                  : performance >= 80
-                  ? "text-yellow-600"
-                  : "text-red-600"
-              }`}
-            />
-            <div className="ml-4">
-              <p className="text-sm font-medium text-gray-600">Performans</p>
-              <p
-                className={`text-xl font-bold ${
+        {/* Overview Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="bg-white p-4 rounded-lg shadow-sm border">
+            <div className="flex items-center">
+              <FaUsers className="w-6 h-6 text-blue-500" />
+              <div className="ml-4">
+                <p className="text-sm font-medium text-gray-600">Üye Sayısı</p>
+                <p className="text-xl font-bold text-gray-900">{team.members?.length || 0}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white p-4 rounded-lg shadow-sm border">
+            <div className="flex items-center">
+              <FaMapMarkerAlt className="w-6 h-6 text-green-500" />
+              <div className="ml-4">
+                <p className="text-sm font-medium text-gray-600">Bölge Sayısı</p>
+                <p className="text-xl font-bold text-gray-900">{team.territories?.length || 0}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white p-4 rounded-lg shadow-sm border">
+            <div className="flex items-center">
+              <FaArrowUp
+                className={`w-6 h-6 ${
                   performance >= 100
-                    ? "text-green-600"
+                    ? 'text-green-600'
                     : performance >= 80
-                    ? "text-yellow-600"
-                    : "text-red-600"
+                      ? 'text-yellow-600'
+                      : 'text-red-600'
                 }`}
-              >
-                %{performance.toFixed(1)}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white p-4 rounded-lg shadow-sm border">
-          <div className="flex items-center">
-            <FaDollarSign className="w-6 h-6 text-purple-500" />
-            <div className="ml-4">
-              <p className="text-sm font-medium text-gray-600">Toplam Gelir</p>
-              <p className="text-lg font-bold text-gray-900">
-                ₺{revenue.toLocaleString()}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        {/* Team Information */}
-        <div className="lg:col-span-2 space-y-4">
-          {/* Basic Info */}
-          <div className="bg-white rounded-lg shadow-sm border p-4">
-            <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-              <FaUsers className="w-5 h-5 mr-2" />
-              Ekip Bilgileri
-            </h3>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label className="block text-xs font-medium text-gray-600 mb-1">
-                  Ekip Kodu
-                </label>
-                <p className="text-gray-900">{team.code}</p>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-600 mb-1">
-                  Durum
-                </label>
-                <span
-                  className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
-                    team.isActive
-                      ? "bg-green-100 text-green-800"
-                      : "bg-red-100 text-red-800"
-                  }`}
-                >
-                  {team.isActive ? "Aktif" : "Pasif"}
-                </span>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-600 mb-1">
-                  Açıklama
-                </label>
-                <p className="text-gray-900">
-                  {team.description || "Açıklama girilmemiş"}
-                </p>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-600 mb-1">
-                  Yönetici
-                </label>
-                <p className="text-gray-900">
-                  {team.manager?.fullName || "Yönetici bilgisi girilmemiş"}
-                </p>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-600 mb-1">
-                  Oluşturulma Tarihi
-                </label>
-                <p className="text-gray-900">
-                  {dayjs(team.creationTime).format("DD.MM.YYYY")}
-                </p>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-600 mb-1">
-                  Son Güncelleme
-                </label>
-                <p className="text-gray-900">
-                  {dayjs(team.lastModificationTime).format("DD.MM.YYYY")}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          {/* Team Members */}
-          <div className="bg-white rounded-lg shadow-sm border p-4">
-            <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-              <FaUser className="w-5 h-5 mr-2" />
-              Ekip Üyeleri ({team.members?.length || 0})
-            </h3>
-
-            {team.members && team.members.length > 0 ? (
-              <div className="space-y-3">
-                {team.members.map((member, index) => (
-                  <div
-                    key={member.id || index}
-                    className="flex items-center justify-between p-3 border border-gray-200 rounded-lg"
-                  >
-                    <div className="flex items-center gap-4">
-                      <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>
-                        <p className="font-medium text-gray-900">
-                          {member.employee?.fullName}
-                        </p>
-                        <p className="text-sm text-gray-500">
-                          Katılım: {dayjs(member.joinDate).format("DD.MM.YYYY")}
-                        </p>
-                      </div>
-                    </div>
-                    <div className="text-right">
-                      <span
-                        className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
-                          member.role === TeamRoleEnum.Manager
-                            ? "bg-purple-100 text-purple-800"
-                            : member.role === TeamRoleEnum.Lead
-                            ? "bg-blue-100 text-blue-800"
-                            : "bg-gray-100 text-gray-800"
-                        }`}
-                      >
-                        {getTeamRoleText(member.role)}
-                      </span>
-                      <p className="text-xs text-gray-500 mt-1">
-                        {member.isActive ? "Aktif" : "Pasif"}
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="text-center py-8 text-gray-500">
-                <FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
-                <p>Henüz ekip üyesi eklenmemiş</p>
-              </div>
-            )}
-          </div>
-
-          {/* Territories */}
-          <div className="bg-white rounded-lg shadow-sm border p-4">
-            <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
-              <FaMapMarkerAlt className="w-5 h-5 mr-2" />
-              Sorumlu Bölgeler ({team.territories?.length || 0})
-            </h3>
-
-            {team.territories && team.territories.length > 0 ? (
-              <div className="space-y-3">
-                {team.territories.map((territory, index) => (
-                  <div
-                    key={territory.id || index}
-                    className="p-3 border border-gray-200 rounded-lg"
-                  >
-                    <div className="flex justify-between items-start mb-2">
-                      <h4 className="font-medium text-gray-900">
-                        {territory.name}
-                      </h4>
-                      <span className="text-sm text-gray-500">
-                        {territory.territoryCode}
-                      </span>
-                    </div>
-                    <p className="text-sm text-gray-600 mb-2">
-                      {territory.description}
-                    </p>
-                    <div className="flex gap-4 text-sm text-gray-500">
-                      <span>Bölge: {territory.region}</span>
-                      <span>Ülke: {territory.countries?.join(", ")}</span>
-                      {territory.cities && territory.cities.length > 0 && (
-                        <span>Şehir: {territory.cities.join(", ")}</span>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="text-center py-8 text-gray-500">
-                <FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
-                <p>Henüz bölge atanmamış</p>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Performance & Targets */}
-        <div className="space-y-4">
-          {/* Performance Overview */}
-          <div className="bg-white rounded-lg shadow-sm border p-4">
-            <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
-              <FaChartLine className="w-5 h-5 mr-2" />
-              Performans
-            </h3>
-
-            <div className="space-y-3">
-              <div className="text-center">
-                <div
-                  className={`text-3xl font-bold mb-2 ${
+              />
+              <div className="ml-4">
+                <p className="text-sm font-medium text-gray-600">Performans</p>
+                <p
+                  className={`text-xl font-bold ${
                     performance >= 100
-                      ? "text-green-600"
+                      ? 'text-green-600'
                       : performance >= 80
-                      ? "text-yellow-600"
-                      : "text-red-600"
+                        ? 'text-yellow-600'
+                        : 'text-red-600'
                   }`}
                 >
                   %{performance.toFixed(1)}
-                </div>
-                <p className="text-sm text-gray-600">Hedef Başarımı</p>
-              </div>
-
-              <div className="w-full bg-gray-200 rounded-full h-2.5">
-                <div
-                  className={`h-2.5 rounded-full ${
-                    performance >= 100
-                      ? "bg-green-500"
-                      : performance >= 80
-                      ? "bg-yellow-500"
-                      : "bg-red-500"
-                  }`}
-                  style={{ width: `${Math.min(performance, 100)}%` }}
-                />
-              </div>
-
-              <div className="flex justify-between text-sm text-gray-600">
-                <span>0%</span>
-                <span>100%</span>
+                </p>
               </div>
             </div>
           </div>
 
-          {/* Current Target */}
-          {activeTarget && (
+          <div className="bg-white p-4 rounded-lg shadow-sm border">
+            <div className="flex items-center">
+              <FaDollarSign className="w-6 h-6 text-purple-500" />
+              <div className="ml-4">
+                <p className="text-sm font-medium text-gray-600">Toplam Gelir</p>
+                <p className="text-lg font-bold text-gray-900">₺{revenue.toLocaleString()}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          {/* Team Information */}
+          <div className="lg:col-span-2 space-y-4">
+            {/* Basic Info */}
+            <div className="bg-white rounded-lg shadow-sm border p-4">
+              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                <FaUsers className="w-5 h-5 mr-2" />
+                Ekip Bilgileri
+              </h3>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-medium text-gray-600 mb-1">Ekip Kodu</label>
+                  <p className="text-gray-900">{team.code}</p>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-600 mb-1">Durum</label>
+                  <span
+                    className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
+                      team.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                    }`}
+                  >
+                    {team.isActive ? 'Aktif' : 'Pasif'}
+                  </span>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-600 mb-1">Açıklama</label>
+                  <p className="text-gray-900">{team.description || 'Açıklama girilmemiş'}</p>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-600 mb-1">Yönetici</label>
+                  <p className="text-gray-900">
+                    {team.manager?.fullName || 'Yönetici bilgisi girilmemiş'}
+                  </p>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-600 mb-1">
+                    Oluşturulma Tarihi
+                  </label>
+                  <p className="text-gray-900">{dayjs(team.creationTime).format('DD.MM.YYYY')}</p>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-600 mb-1">
+                    Son Güncelleme
+                  </label>
+                  <p className="text-gray-900">
+                    {dayjs(team.lastModificationTime).format('DD.MM.YYYY')}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Team Members */}
+            <div className="bg-white rounded-lg shadow-sm border p-4">
+              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                <FaUser className="w-5 h-5 mr-2" />
+                Ekip Üyeleri ({team.members?.length || 0})
+              </h3>
+
+              {team.members && team.members.length > 0 ? (
+                <div className="space-y-3">
+                  {team.members.map((member, index) => (
+                    <div
+                      key={member.id || index}
+                      className="flex items-center justify-between p-3 border border-gray-200 rounded-lg"
+                    >
+                      <div className="flex items-center gap-4">
+                        <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>
+                          <p className="font-medium text-gray-900">{member.employee?.fullName}</p>
+                          <p className="text-sm text-gray-500">
+                            Katılım: {dayjs(member.joinDate).format('DD.MM.YYYY')}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <span
+                          className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
+                            member.role === TeamRoleEnum.Manager
+                              ? 'bg-purple-100 text-purple-800'
+                              : member.role === TeamRoleEnum.Lead
+                                ? 'bg-blue-100 text-blue-800'
+                                : 'bg-gray-100 text-gray-800'
+                          }`}
+                        >
+                          {getTeamRoleText(member.role)}
+                        </span>
+                        <p className="text-xs text-gray-500 mt-1">
+                          {member.isActive ? 'Aktif' : 'Pasif'}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-8 text-gray-500">
+                  <FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
+                  <p>Henüz ekip üyesi eklenmemiş</p>
+                </div>
+              )}
+            </div>
+
+            {/* Territories */}
+            <div className="bg-white rounded-lg shadow-sm border p-4">
+              <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+                <FaMapMarkerAlt className="w-5 h-5 mr-2" />
+                Sorumlu Bölgeler ({team.territories?.length || 0})
+              </h3>
+
+              {team.territories && team.territories.length > 0 ? (
+                <div className="space-y-3">
+                  {team.territories.map((territory, index) => (
+                    <div
+                      key={territory.id || index}
+                      className="p-3 border border-gray-200 rounded-lg"
+                    >
+                      <div className="flex justify-between items-start mb-2">
+                        <h4 className="font-medium text-gray-900">{territory.name}</h4>
+                        <span className="text-sm text-gray-500">{territory.territoryCode}</span>
+                      </div>
+                      <p className="text-sm text-gray-600 mb-2">{territory.description}</p>
+                      <div className="flex gap-4 text-sm text-gray-500">
+                        <span>Bölge: {territory.region}</span>
+                        <span>Ülke: {territory.countries?.join(', ')}</span>
+                        {territory.cities && territory.cities.length > 0 && (
+                          <span>Şehir: {territory.cities.join(', ')}</span>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-8 text-gray-500">
+                  <FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
+                  <p>Henüz bölge atanmamış</p>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Performance & Targets */}
+          <div className="space-y-4">
+            {/* Performance Overview */}
             <div className="bg-white rounded-lg shadow-sm border p-4">
               <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
-                <FaTrophy className="w-5 h-5 mr-2" />
-                Aktif Hedef
+                <FaChartLine className="w-5 h-5 mr-2" />
+                Performans
               </h3>
 
               <div className="space-y-3">
-                <div>
-                  <label className="block text-xs font-medium text-gray-600 mb-1">
-                    Hedef Dönem
-                  </label>
-                  <p className="text-gray-900">{activeTarget.targetPeriod}</p>
+                <div className="text-center">
+                  <div
+                    className={`text-3xl font-bold mb-2 ${
+                      performance >= 100
+                        ? 'text-green-600'
+                        : performance >= 80
+                          ? 'text-yellow-600'
+                          : 'text-red-600'
+                    }`}
+                  >
+                    %{performance.toFixed(1)}
+                  </div>
+                  <p className="text-sm text-gray-600">Hedef Başarımı</p>
                 </div>
 
-                <div>
-                  <label className="block text-xs font-medium text-gray-600 mb-1">
-                    Hedef Tutar
-                  </label>
-                  <p className="text-lg font-bold text-gray-900">
-                    ₺{activeTarget.targetValue.toLocaleString()}
-                  </p>
+                <div className="w-full bg-gray-200 rounded-full h-2.5">
+                  <div
+                    className={`h-2.5 rounded-full ${
+                      performance >= 100
+                        ? 'bg-green-500'
+                        : performance >= 80
+                          ? 'bg-yellow-500'
+                          : 'bg-red-500'
+                    }`}
+                    style={{ width: `${Math.min(performance, 100)}%` }}
+                  />
                 </div>
 
-                <div>
-                  <label className="block text-xs font-medium text-gray-600 mb-1">
-                    Gerçekleşen
-                  </label>
-                  <p className="text-lg font-bold text-blue-600">
-                    ₺{activeTarget.actualValue.toLocaleString()}
-                  </p>
-                </div>
-
-                <div>
-                  <label className="block text-xs font-medium text-gray-600 mb-1">
-                    Başlangıç - Bitiş
-                  </label>
-                  <p className="text-sm text-gray-900">
-                    {dayjs(activeTarget.startDate).format("DD.MM.YYYY")} -{" "}
-                    {dayjs(activeTarget.endDate).format("DD.MM.YYYY")}
-                  </p>
+                <div className="flex justify-between text-sm text-gray-600">
+                  <span>0%</span>
+                  <span>100%</span>
                 </div>
               </div>
             </div>
-          )}
 
-          {/* Achievement Badge */}
-          {performance >= 100 && (
-            <div className="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg p-4 text-center text-white">
-              <FaAward className="w-10 h-10 mx-auto mb-2" />
-              <h3 className="text-base font-bold mb-1">Tebrikler!</h3>
-              <p className="text-sm">
-                Bu ekip hedefini aştı ve başarı ödülünü hak etti!
-              </p>
-            </div>
-          )}
+            {/* Current Target */}
+            {activeTarget && (
+              <div className="bg-white rounded-lg shadow-sm border p-4">
+                <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
+                  <FaTrophy className="w-5 h-5 mr-2" />
+                  Aktif Hedef
+                </h3>
 
-          {/* Quick Stats */}
-          <div className="bg-white rounded-lg shadow-sm border p-4">
-            <h3 className="text-base font-semibold text-gray-900 mb-3">
-              Hızlı İstatistikler
-            </h3>
+                <div className="space-y-3">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-600 mb-1">
+                      Hedef Dönem
+                    </label>
+                    <p className="text-gray-900">{activeTarget.targetPeriod}</p>
+                  </div>
 
-            <div className="space-y-3">
-              <div className="flex justify-between">
-                <span className="text-gray-600">Toplam Hedef:</span>
-                <span className="font-medium">{team.targets?.length || 0}</span>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-600 mb-1">
+                      Hedef Tutar
+                    </label>
+                    <p className="text-lg font-bold text-gray-900">
+                      ₺{activeTarget.targetValue.toLocaleString()}
+                    </p>
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-600 mb-1">
+                      Gerçekleşen
+                    </label>
+                    <p className="text-lg font-bold text-blue-600">
+                      ₺{activeTarget.actualValue.toLocaleString()}
+                    </p>
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-600 mb-1">
+                      Başlangıç - Bitiş
+                    </label>
+                    <p className="text-sm text-gray-900">
+                      {dayjs(activeTarget.startDate).format('DD.MM.YYYY')} -{' '}
+                      {dayjs(activeTarget.endDate).format('DD.MM.YYYY')}
+                    </p>
+                  </div>
+                </div>
               </div>
-              <div className="flex justify-between">
-                <span className="text-gray-600">Aktif Üye:</span>
-                <span className="font-medium">
-                  {team.members?.filter((m) => m.isActive).length || 0}
-                </span>
+            )}
+
+            {/* Achievement Badge */}
+            {performance >= 100 && (
+              <div className="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg p-4 text-center text-white">
+                <FaAward className="w-10 h-10 mx-auto mb-2" />
+                <h3 className="text-base font-bold mb-1">Tebrikler!</h3>
+                <p className="text-sm">Bu ekip hedefini aştı ve başarı ödülünü hak etti!</p>
               </div>
-              <div className="flex justify-between">
-                <span className="text-gray-600">Kapsam Alanı:</span>
-                <span className="font-medium">
-                  {team.territories?.reduce(
-                    (acc, t) => acc + (t.cities?.length || 0),
-                    0
-                  ) || 0}{" "}
-                  şehir
-                </span>
+            )}
+
+            {/* Quick Stats */}
+            <div className="bg-white rounded-lg shadow-sm border p-4">
+              <h3 className="text-base font-semibold text-gray-900 mb-3">Hızlı İstatistikler</h3>
+
+              <div className="space-y-3">
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Toplam Hedef:</span>
+                  <span className="font-medium">{team.targets?.length || 0}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Aktif Üye:</span>
+                  <span className="font-medium">
+                    {team.members?.filter((m) => m.isActive).length || 0}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Kapsam Alanı:</span>
+                  <span className="font-medium">
+                    {team.territories?.reduce((acc, t) => acc + (t.cities?.length || 0), 0) || 0}{' '}
+                    şehir
+                  </span>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default SalesTeamView;
+export default SalesTeamView
diff --git a/ui/src/views/crm/components/SalesTeams.tsx b/ui/src/views/crm/components/SalesTeams.tsx
index 155f6476..15f62ea1 100644
--- a/ui/src/views/crm/components/SalesTeams.tsx
+++ b/ui/src/views/crm/components/SalesTeams.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   FaUsers,
   FaPlus,
@@ -12,96 +12,93 @@ import {
   FaList,
   FaSearch,
   FaFilter,
-} from "react-icons/fa";
-import { useNavigate } from "react-router-dom";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import mockSalesTeams from "../../../mocks/mockSalesTeams";
-import Widget from "../../../components/common/Widget";
-import { Team } from "../../../types/common";
+} from 'react-icons/fa'
+import { useNavigate } from 'react-router-dom'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import mockSalesTeams from '../../../mocks/mockSalesTeams'
+import Widget from '../../../components/common/Widget'
+import { Team } from '../../../types/common'
+import { Container } from '@/components/shared'
 
 const SalesTeams: React.FC = () => {
-  const navigate = useNavigate();
-  const [teams] = useState<Team[]>(mockSalesTeams);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [viewMode, setViewMode] = useState<"cards" | "list">("cards");
-  const [filterStatus, setFilterStatus] = useState<
-    "all" | "active" | "inactive"
-  >("all");
+  const navigate = useNavigate()
+  const [teams] = useState<Team[]>(mockSalesTeams)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [viewMode, setViewMode] = useState<'cards' | 'list'>('cards')
+  const [filterStatus, setFilterStatus] = useState<'all' | 'active' | 'inactive'>('all')
 
   const handleAdd = () => {
-    navigate("/admin/crm/sales-teams/new");
-  };
+    navigate('/admin/crm/sales-teams/new')
+  }
 
   const handleEdit = (team: Team) => {
-    navigate(`/admin/crm/sales-teams/edit/${team.id}`);
-  };
+    navigate(`/admin/crm/sales-teams/edit/${team.id}`)
+  }
 
   const handleDelete = (id: string) => {
-    const team = teams.find((t) => t.id === id);
+    const team = teams.find((t) => t.id === id)
     if (confirm(`${team?.name} ekibini silmek istediğinizden emin misiniz?`)) {
-      console.log("Delete sales team:", id);
+      console.log('Delete sales team:', id)
       // Implement delete logic here
-      alert("Ekip silindi (mock)");
+      alert('Ekip silindi (mock)')
     }
-  };
+  }
 
   const handleViewDetails = (team: Team) => {
-    navigate(`/admin/crm/sales-teams/${team.id}`);
-  };
+    navigate(`/admin/crm/sales-teams/${team.id}`)
+  }
 
   // Calculate team performance based on targets
   const calculateTeamPerformance = (team: Team): number => {
-    if (!team.targets || team.targets.length === 0) return 0;
-    const activeTarget = team.targets.find((t) => t.status === "ACTIVE");
-    if (!activeTarget || activeTarget.targetValue === 0) return 0;
-    return (activeTarget.actualValue / activeTarget.targetValue) * 100;
-  };
+    if (!team.targets || team.targets.length === 0) return 0
+    const activeTarget = team.targets.find((t) => t.status === 'ACTIVE')
+    if (!activeTarget || activeTarget.targetValue === 0) return 0
+    return (activeTarget.actualValue / activeTarget.targetValue) * 100
+  }
 
   // Calculate team revenue
   const calculateTeamRevenue = (team: Team): number => {
-    if (!team.targets || team.targets.length === 0) return 0;
-    return team.targets.reduce((sum, target) => sum + target.actualValue, 0);
-  };
+    if (!team.targets || team.targets.length === 0) return 0
+    return team.targets.reduce((sum, target) => sum + target.actualValue, 0)
+  }
 
   // Filter teams based on search and status
   const filteredTeams = teams.filter((team) => {
     const matchesSearch =
-      searchTerm === "" ||
+      searchTerm === '' ||
       team.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
       team.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      team.description?.toLowerCase().includes(searchTerm.toLowerCase());
+      team.description?.toLowerCase().includes(searchTerm.toLowerCase())
 
     const matchesStatus =
-      filterStatus === "all" ||
-      (filterStatus === "active" && team.isActive) ||
-      (filterStatus === "inactive" && !team.isActive);
+      filterStatus === 'all' ||
+      (filterStatus === 'active' && team.isActive) ||
+      (filterStatus === 'inactive' && !team.isActive)
 
-    return matchesSearch && matchesStatus;
-  });
+    return matchesSearch && matchesStatus
+  })
 
   // Table columns for list view
   const columns: Column<Team>[] = [
     {
-      key: "teamCode",
-      header: "Takım Kodu",
+      key: 'teamCode',
+      header: 'Takım Kodu',
       sortable: true,
     },
     {
-      key: "name",
-      header: "Takım Adı",
+      key: 'name',
+      header: 'Takım Adı',
       sortable: true,
       render: (team: Team) => (
         <div>
           <div className="font-medium text-gray-900">{team.name}</div>
-          <div className="text-sm text-gray-500 truncate max-w-xs">
-            {team.description}
-          </div>
+          <div className="text-sm text-gray-500 truncate max-w-xs">{team.description}</div>
         </div>
       ),
     },
     {
-      key: "memberCount",
-      header: "Üye Sayısı",
+      key: 'memberCount',
+      header: 'Üye Sayısı',
       render: (team: Team) => (
         <div className="flex items-center gap-1">
           <FaUsers className="w-4 h-4 text-gray-500" />
@@ -110,8 +107,8 @@ const SalesTeams: React.FC = () => {
       ),
     },
     {
-      key: "territories",
-      header: "Bölge Sayısı",
+      key: 'territories',
+      header: 'Bölge Sayısı',
       render: (team: Team) => (
         <div className="flex items-center gap-1">
           <FaMapMarkerAlt className="w-4 h-4 text-gray-500" />
@@ -120,55 +117,53 @@ const SalesTeams: React.FC = () => {
       ),
     },
     {
-      key: "performance",
-      header: "Performans",
+      key: 'performance',
+      header: 'Performans',
       render: (team: Team) => {
-        const performance = calculateTeamPerformance(team);
+        const performance = calculateTeamPerformance(team)
         const color =
           performance >= 100
-            ? "text-green-600"
+            ? 'text-green-600'
             : performance >= 80
-            ? "text-yellow-600"
-            : "text-red-600";
+              ? 'text-yellow-600'
+              : 'text-red-600'
         return (
           <div className={`flex items-center gap-1 ${color}`}>
             <FaArrowUp className="w-4 h-4" />
             <span className="font-medium">%{performance.toFixed(1)}</span>
           </div>
-        );
+        )
       },
     },
     {
-      key: "totalRevenue",
-      header: "Toplam Gelir",
+      key: 'totalRevenue',
+      header: 'Toplam Gelir',
       render: (team: Team) => {
-        const revenue = calculateTeamRevenue(team);
+        const revenue = calculateTeamRevenue(team)
         return (
           <div className="flex items-center gap-1">
             <FaDollarSign className="w-4 h-4 text-gray-500" />
             <span>₺{revenue.toLocaleString()}</span>
           </div>
-        );
+        )
       },
     },
     {
-      key: "status",
-      header: "Durum",
+      key: 'status',
+      header: 'Durum',
       render: (team: Team) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${
-            team.isActive
-              ? "bg-green-100 text-green-800"
-              : "bg-red-100 text-red-800"
+            team.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
           }`}
         >
-          {team.isActive ? "Aktif" : "Pasif"}
+          {team.isActive ? 'Aktif' : 'Pasif'}
         </span>
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (team: Team) => (
         <div className="flex gap-2">
           <button
@@ -195,302 +190,258 @@ const SalesTeams: React.FC = () => {
         </div>
       ),
     },
-  ];
+  ]
 
   // Calculate overall statistics
-  const totalMembers = teams.reduce(
-    (sum, team) => sum + (team.members?.length || 0),
-    0
-  );
-  const totalRevenue = teams.reduce(
-    (sum, team) => sum + calculateTeamRevenue(team),
-    0
-  );
+  const totalMembers = teams.reduce((sum, team) => sum + (team.members?.length || 0), 0)
+  const totalRevenue = teams.reduce((sum, team) => sum + calculateTeamRevenue(team), 0)
   const averagePerformance =
-    teams.reduce((sum, team) => sum + calculateTeamPerformance(team), 0) /
-      teams.length || 0;
-  const topPerformingTeams = teams.filter(
-    (team) => calculateTeamPerformance(team) >= 100
-  ).length;
+    teams.reduce((sum, team) => sum + calculateTeamPerformance(team), 0) / teams.length || 0
+  const topPerformingTeams = teams.filter((team) => calculateTeamPerformance(team) >= 100).length
 
   return (
-    <div className="space-y-4 pt-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-xl font-bold text-gray-900">Satış Ekipleri</h2>
-          <p className="text-gray-600 mt-1">
-            Satış ekipleri ve performans yönetimi
-          </p>
+    <Container>
+      <div className="space-y-4 pt-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">Satış Ekipleri</h2>
+            <p className="text-gray-600 mt-1">Satış ekipleri ve performans yönetimi</p>
+          </div>
+          <button
+            onClick={handleAdd}
+            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          >
+            <FaPlus className="w-4 h-4" />
+            Yeni Ekip
+          </button>
         </div>
-        <button
-          onClick={handleAdd}
-          className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-        >
-          <FaPlus className="w-4 h-4" />
-          Yeni Ekip
-        </button>
-      </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-        <Widget
-          title="Toplam Ekip"
-          value={teams.length}
-          color="blue"
-          icon="FaUsers"
-        />
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+          <Widget title="Toplam Ekip" value={teams.length} color="blue" icon="FaUsers" />
 
-        <Widget
-          title="Toplam Üye"
-          value={totalMembers}
-          color="green"
-          icon="FaUser"
-        />
+          <Widget title="Toplam Üye" value={totalMembers} color="green" icon="FaUser" />
 
-        <Widget
-          title="Toplam Gelir"
-          value={`₺${totalRevenue.toLocaleString()}`}
-          color="purple"
-          icon="FaDollarSign"
-        />
+          <Widget
+            title="Toplam Gelir"
+            value={`₺${totalRevenue.toLocaleString()}`}
+            color="purple"
+            icon="FaDollarSign"
+          />
 
-        <Widget
-          title="Hedef Aşan Ekip"
-          value={topPerformingTeams}
-          color="orange"
-          icon="FaAward"
-        />
-      </div>
+          <Widget
+            title="Hedef Aşan Ekip"
+            value={topPerformingTeams}
+            color="orange"
+            icon="FaAward"
+          />
+        </div>
 
-      {/* Performance Overview */}
-      <div className="bg-white rounded-lg shadow-sm border p-4">
-        <h3 className="text-base font-semibold text-gray-900 mb-3">
-          Performans Özeti
-        </h3>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div className="text-center">
-            <div className="text-2xl font-bold text-blue-600 mb-1">
-              %{averagePerformance.toFixed(1)}
+        {/* Performance Overview */}
+        <div className="bg-white rounded-lg shadow-sm border p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-3">Performans Özeti</h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-blue-600 mb-1">
+                %{averagePerformance.toFixed(1)}
+              </div>
+              <p className="text-sm text-gray-600">Ortalama Performans</p>
             </div>
-            <p className="text-sm text-gray-600">Ortalama Performans</p>
-          </div>
 
-          <div className="text-center">
-            <div className="text-2xl font-bold text-green-600 mb-1">
-              {topPerformingTeams}
+            <div className="text-center">
+              <div className="text-2xl font-bold text-green-600 mb-1">{topPerformingTeams}</div>
+              <p className="text-sm text-gray-600">Hedef Aşan Ekip</p>
             </div>
-            <p className="text-sm text-gray-600">Hedef Aşan Ekip</p>
-          </div>
 
-          <div className="text-center">
-            <div className="text-2xl font-bold text-purple-600 mb-1">
-              ₺{Math.round(totalRevenue / teams.length || 0).toLocaleString()}
+            <div className="text-center">
+              <div className="text-2xl font-bold text-purple-600 mb-1">
+                ₺{Math.round(totalRevenue / teams.length || 0).toLocaleString()}
+              </div>
+              <p className="text-sm text-gray-600">Ekip Başına Ortalama</p>
             </div>
-            <p className="text-sm text-gray-600">Ekip Başına Ortalama</p>
           </div>
         </div>
-      </div>
 
-      {/* Controls */}
-      <div className="bg-white rounded-lg shadow-sm border p-3">
-        <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
-          {/* Search */}
-          <div className="flex items-center gap-2 flex-1">
-            <FaSearch className="w-4 h-4 text-gray-400" />
-            <input
-              type="text"
-              placeholder="Ekip adı, kod veya açıklama ara..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-          </div>
+        {/* Controls */}
+        <div className="bg-white rounded-lg shadow-sm border p-3">
+          <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
+            {/* Search */}
+            <div className="flex items-center gap-2 flex-1">
+              <FaSearch className="w-4 h-4 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Ekip adı, kod veya açıklama ara..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
 
-          {/* Status Filter */}
-          <div className="flex items-center gap-2">
-            <FaFilter className="w-4 h-4 text-gray-400" />
-            <select
-              value={filterStatus}
-              onChange={(e) =>
-                setFilterStatus(e.target.value as "all" | "active" | "inactive")
-              }
-              className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-            >
-              <option value="all">Tüm Durumlar</option>
-              <option value="active">Aktif</option>
-              <option value="inactive">Pasif</option>
-            </select>
-          </div>
-
-          {/* View Mode Toggle */}
-          <div className="flex bg-gray-100 rounded-lg p-1">
-            <button
-              onClick={() => setViewMode("list")}
-              className={`flex items-center gap-2 px-3 py-2 rounded-md 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>
-            <button
-              onClick={() => setViewMode("cards")}
-              className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors ${
-                viewMode === "cards"
-                  ? "bg-white text-blue-600 shadow-sm"
-                  : "text-gray-600 hover:text-gray-900"
-              }`}
-            >
-              <FaTh className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Content */}
-      {viewMode === "cards" ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-          {filteredTeams.map((team) => {
-            const performance = calculateTeamPerformance(team);
-            const revenue = calculateTeamRevenue(team);
-
-            return (
-              <div
-                key={team.id}
-                className="bg-white rounded-lg shadow-sm border p-4"
+            {/* Status Filter */}
+            <div className="flex items-center gap-2">
+              <FaFilter className="w-4 h-4 text-gray-400" />
+              <select
+                value={filterStatus}
+                onChange={(e) => setFilterStatus(e.target.value as 'all' | 'active' | 'inactive')}
+                className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
               >
-                {/* Card Header */}
-                <div className="flex items-start justify-between mb-3">
-                  <div className="flex-1">
-                    <h3 className="text-base font-semibold text-gray-900">
-                      {team.name}
-                    </h3>
-                    <p className="text-sm text-gray-500">{team.code}</p>
-                    {team.description && (
-                      <p className="text-sm text-gray-600 mt-1 line-clamp-2">
-                        {team.description}
-                      </p>
-                    )}
-                  </div>
-                  <span
-                    className={`px-2 py-1 text-xs font-medium rounded-full ${
-                      team.isActive
-                        ? "bg-green-100 text-green-800"
-                        : "bg-red-100 text-red-800"
-                    }`}
-                  >
-                    {team.isActive ? "Aktif" : "Pasif"}
-                  </span>
-                </div>
+                <option value="all">Tüm Durumlar</option>
+                <option value="active">Aktif</option>
+                <option value="inactive">Pasif</option>
+              </select>
+            </div>
 
-                {/* Card Stats */}
-                <div className="space-y-2 mb-3">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <FaUsers className="w-4 h-4 text-gray-400" />
-                      <span className="text-sm text-gray-600">Yönetici</span>
-                    </div>
-                    <span className="font-medium">
-                      {team.manager?.fullName}
-                    </span>
-                  </div>
+            {/* View Mode Toggle */}
+            <div className="flex bg-gray-100 rounded-lg p-1">
+              <button
+                onClick={() => setViewMode('list')}
+                className={`flex items-center gap-2 px-3 py-2 rounded-md 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>
+              <button
+                onClick={() => setViewMode('cards')}
+                className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors ${
+                  viewMode === 'cards'
+                    ? 'bg-white text-blue-600 shadow-sm'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                <FaTh className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
 
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <FaUsers className="w-4 h-4 text-gray-400" />
-                      <span className="text-sm text-gray-600">Üye Sayısı</span>
-                    </div>
-                    <span className="font-medium">
-                      {team.members?.length || 0}
-                    </span>
-                  </div>
+        {/* Content */}
+        {viewMode === 'cards' ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+            {filteredTeams.map((team) => {
+              const performance = calculateTeamPerformance(team)
+              const revenue = calculateTeamRevenue(team)
 
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <FaMapMarkerAlt className="w-4 h-4 text-gray-400" />
-                      <span className="text-sm text-gray-600">Bölge</span>
-                    </div>
-                    <span className="font-medium">
-                      {team.territories?.length || 0}
-                    </span>
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <FaArrowUp className="w-4 h-4 text-gray-400" />
-                      <span className="text-sm text-gray-600">Performans</span>
+              return (
+                <div key={team.id} className="bg-white rounded-lg shadow-sm border p-4">
+                  {/* Card Header */}
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex-1">
+                      <h3 className="text-base font-semibold text-gray-900">{team.name}</h3>
+                      <p className="text-sm text-gray-500">{team.code}</p>
+                      {team.description && (
+                        <p className="text-sm text-gray-600 mt-1 line-clamp-2">
+                          {team.description}
+                        </p>
+                      )}
                     </div>
                     <span
-                      className={`font-medium ${
-                        performance >= 100
-                          ? "text-green-600"
-                          : performance >= 80
-                          ? "text-yellow-600"
-                          : "text-red-600"
+                      className={`px-2 py-1 text-xs font-medium rounded-full ${
+                        team.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                       }`}
                     >
-                      %{performance.toFixed(1)}
+                      {team.isActive ? 'Aktif' : 'Pasif'}
                     </span>
                   </div>
 
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <FaDollarSign className="w-4 h-4 text-gray-400" />
-                      <span className="text-sm text-gray-600">Gelir</span>
+                  {/* Card Stats */}
+                  <div className="space-y-2 mb-3">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <FaUsers className="w-4 h-4 text-gray-400" />
+                        <span className="text-sm text-gray-600">Yönetici</span>
+                      </div>
+                      <span className="font-medium">{team.manager?.fullName}</span>
                     </div>
-                    <span className="font-medium">
-                      ₺{revenue.toLocaleString()}
-                    </span>
+
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <FaUsers className="w-4 h-4 text-gray-400" />
+                        <span className="text-sm text-gray-600">Üye Sayısı</span>
+                      </div>
+                      <span className="font-medium">{team.members?.length || 0}</span>
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <FaMapMarkerAlt className="w-4 h-4 text-gray-400" />
+                        <span className="text-sm text-gray-600">Bölge</span>
+                      </div>
+                      <span className="font-medium">{team.territories?.length || 0}</span>
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <FaArrowUp className="w-4 h-4 text-gray-400" />
+                        <span className="text-sm text-gray-600">Performans</span>
+                      </div>
+                      <span
+                        className={`font-medium ${
+                          performance >= 100
+                            ? 'text-green-600'
+                            : performance >= 80
+                              ? 'text-yellow-600'
+                              : 'text-red-600'
+                        }`}
+                      >
+                        %{performance.toFixed(1)}
+                      </span>
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <FaDollarSign className="w-4 h-4 text-gray-400" />
+                        <span className="text-sm text-gray-600">Gelir</span>
+                      </div>
+                      <span className="font-medium">₺{revenue.toLocaleString()}</span>
+                    </div>
+                  </div>
+
+                  {/* Card Actions */}
+                  <div className="flex gap-2 pt-3 border-t justify-end">
+                    <button
+                      onClick={() => handleViewDetails(team)}
+                      className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
+                    >
+                      <FaEye className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => handleEdit(team)}
+                      className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-sm text-green-600 border border-green-200 rounded-md hover:bg-green-50 transition-colors"
+                    >
+                      <FaEdit className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => handleDelete(team.id)}
+                      className="px-2.5 py-1.5 text-red-600 border border-red-200 rounded-md hover:bg-red-50 transition-colors"
+                      title="Sil"
+                    >
+                      <FaTrash className="w-4 h-4" />
+                    </button>
                   </div>
                 </div>
+              )
+            })}
+          </div>
+        ) : (
+          <div className="bg-white rounded-lg shadow-sm border">
+            <DataTable data={filteredTeams} columns={columns} />
+          </div>
+        )}
 
-                {/* Card Actions */}
-                <div className="flex gap-2 pt-3 border-t justify-end">
-                  <button
-                    onClick={() => handleViewDetails(team)}
-                    className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
-                  >
-                    <FaEye className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => handleEdit(team)}
-                    className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-sm text-green-600 border border-green-200 rounded-md hover:bg-green-50 transition-colors"
-                  >
-                    <FaEdit className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => handleDelete(team.id)}
-                    className="px-2.5 py-1.5 text-red-600 border border-red-200 rounded-md hover:bg-red-50 transition-colors"
-                    title="Sil"
-                  >
-                    <FaTrash className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        <div className="bg-white rounded-lg shadow-sm border">
-          <DataTable data={filteredTeams} columns={columns} />
-        </div>
-      )}
+        {filteredTeams.length === 0 && (
+          <div className="text-center py-12">
+            <FaUsers className="w-10 h-10 text-gray-400 mx-auto mb-3" />
+            <h3 className="text-base font-medium text-gray-900 mb-2">Ekip bulunamadı</h3>
+            <p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
+          </div>
+        )}
+      </div>
+    </Container>
+  )
+}
 
-      {filteredTeams.length === 0 && (
-        <div className="text-center py-12">
-          <FaUsers className="w-10 h-10 text-gray-400 mx-auto mb-3" />
-          <h3 className="text-base font-medium text-gray-900 mb-2">
-            Ekip bulunamadı
-          </h3>
-          <p className="text-gray-500">
-            Arama kriterlerinizi değiştirmeyi deneyin.
-          </p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SalesTeams;
+export default SalesTeams