From 57796d1177926475de38a566c1ed4eb1de5c2856 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Tue, 16 Sep 2025 08:58:13 +0300
Subject: [PATCH] Container Modal problemleri

---
 ui/dev-dist/sw.js                             |   2 +-
 .../components/CheckNoteManagement.tsx        | 405 ++++----
 .../components/CurrentAccountManagement.tsx   | 906 ++++++++----------
 .../views/crm/components/ActivityRecords.tsx  |  32 +-
 4 files changed, 635 insertions(+), 710 deletions(-)

diff --git a/ui/dev-dist/sw.js b/ui/dev-dist/sw.js
index abf60c30..e51461c0 100644
--- a/ui/dev-dist/sw.js
+++ b/ui/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-a959eb95'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "/index.html",
-    "revision": "0.daul0044rt"
+    "revision": "0.hml46tc2c78"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/index.html"), {
diff --git a/ui/src/views/accounting/components/CheckNoteManagement.tsx b/ui/src/views/accounting/components/CheckNoteManagement.tsx
index 6b30cbb4..d88bc59d 100644
--- a/ui/src/views/accounting/components/CheckNoteManagement.tsx
+++ b/ui/src/views/accounting/components/CheckNoteManagement.tsx
@@ -26,6 +26,7 @@ import CheckNoteDetails from './CheckNoteDetails'
 import CollectionDialog from './CollectionDialog'
 import EndorsementDialog from './EndorsementDialog'
 import Widget from '../../../components/common/Widget'
+import { Container } from '@/components/shared'
 
 interface CheckNoteManagementProps {
   checks: FiCheck[]
@@ -662,92 +663,217 @@ const CheckNoteManagement: React.FC<CheckNoteManagementProps> = ({
   })
 
   return (
-    <div className="space-y-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-bold text-gray-900">Çek & Senet Takibi</h2>
-          <p className="text-gray-600">Alınan ve verilen çek & senet yönetimi</p>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900">Çek & Senet Takibi</h2>
+            <p className="text-gray-600">Alınan ve verilen çek & senet yönetimi</p>
+          </div>
+          <div className="flex gap-2 text-sm">
+            <button
+              onClick={handleAddNote}
+              className="flex items-center gap-2 px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+            >
+              <FaFileAlt className="w-4 h-4" />
+              Yeni Senet
+            </button>
+            <button
+              onClick={handleAddCheck}
+              className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            >
+              <FaCreditCard className="w-4 h-4" />
+              Yeni Çek
+            </button>
+          </div>
         </div>
-        <div className="flex gap-2 text-sm">
-          <button
-            onClick={handleAddNote}
-            className="flex items-center gap-2 px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
-          >
-            <FaFileAlt className="w-4 h-4" />
-            Yeni Senet
-          </button>
-          <button
-            onClick={handleAddCheck}
-            className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-          >
-            <FaCreditCard className="w-4 h-4" />
-            Yeni Çek
-          </button>
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Widget
+            title="Toplam Çek"
+            value={formatCurrency(totalCheckAmount)}
+            color="blue"
+            icon="FaCreditCard"
+            subTitle={`${checks.length} adet`}
+          />
+          <Widget
+            title="Toplam Senet"
+            value={formatCurrency(totalNoteAmount)}
+            color="green"
+            icon="FaFileAlt"
+            subTitle={`${promissoryNotes.length} adet`}
+          />
+          <Widget
+            title="Alacak Çek"
+            value={formatCurrency(receivedCheckAmount)}
+            color="green"
+            icon="FaCreditCard"
+          />
+          <Widget
+            title="Alacak Senet"
+            value={formatCurrency(receivedNoteAmount)}
+            color="green"
+            icon="FaFileAlt"
+          />
         </div>
-      </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Widget
-          title="Toplam Çek"
-          value={formatCurrency(totalCheckAmount)}
-          color="blue"
-          icon="FaCreditCard"
-          subTitle={`${checks.length} adet`}
-        />
-        <Widget
-          title="Toplam Senet"
-          value={formatCurrency(totalNoteAmount)}
-          color="green"
-          icon="FaFileAlt"
-          subTitle={`${promissoryNotes.length} adet`}
-        />
-        <Widget
-          title="Alacak Çek"
-          value={formatCurrency(receivedCheckAmount)}
-          color="green"
-          icon="FaCreditCard"
-        />
-        <Widget
-          title="Alacak Senet"
-          value={formatCurrency(receivedNoteAmount)}
-          color="green"
-          icon="FaFileAlt"
-        />
-      </div>
-
-      {/* Alerts */}
-      {(dueChecks.length > 0 ||
-        dueNotes.length > 0 ||
-        overdueChecks.length > 0 ||
-        overdueNotes.length > 0) && (
-        <div className="space-y-3">
-          {(dueChecks.length > 0 || dueNotes.length > 0) && (
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
-              <div className="flex items-center gap-2">
-                <FaClock className="w-5 h-5 text-yellow-600" />
-                <h3 className="text-base font-semibold text-yellow-900">Vadesi Yaklaşan</h3>
+        {/* Alerts */}
+        {(dueChecks.length > 0 ||
+          dueNotes.length > 0 ||
+          overdueChecks.length > 0 ||
+          overdueNotes.length > 0) && (
+          <div className="space-y-3">
+            {(dueChecks.length > 0 || dueNotes.length > 0) && (
+              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                <div className="flex items-center gap-2">
+                  <FaClock className="w-5 h-5 text-yellow-600" />
+                  <h3 className="text-base font-semibold text-yellow-900">Vadesi Yaklaşan</h3>
+                </div>
+                <p className="text-sm text-yellow-700 mt-1">
+                  {dueChecks.length} çek ve {dueNotes.length} senet 7 gün içinde vadesi dolacak.
+                </p>
               </div>
-              <p className="text-sm text-yellow-700 mt-1">
-                {dueChecks.length} çek ve {dueNotes.length} senet 7 gün içinde vadesi dolacak.
-              </p>
-            </div>
+            )}
+
+            {(overdueChecks.length > 0 || overdueNotes.length > 0) && (
+              <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                <div className="flex items-center gap-2">
+                  <FaExclamationTriangle className="w-5 h-5 text-red-600" />
+                  <h3 className="text-base font-semibold text-red-900">Vadesi Geçmiş</h3>
+                </div>
+                <p className="text-sm text-red-700 mt-1">
+                  {overdueChecks.length} çek ve {overdueNotes.length} senet vadesi geçmiş durumda.
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Tabs */}
+        <div className="border-b border-gray-200">
+          <nav className="-mb-px flex space-x-6">
+            <button
+              onClick={() => setActiveTab('checks')}
+              className={`py-3 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'checks'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              Çekler ({checks.length})
+            </button>
+            <button
+              onClick={() => setActiveTab('notes')}
+              className={`py-3 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'notes'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              Senetler ({promissoryNotes.length})
+            </button>
+          </nav>
+        </div>
+
+        {/* Filters */}
+        <div className="flex gap-3 items-center">
+          <div className="flex-1 relative">
+            <FaSearch className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              placeholder={
+                activeTab === 'checks'
+                  ? 'Çek no, keşideci, lehtar veya banka ara...'
+                  : 'Senet no, keşideci veya lehtar ara...'
+              }
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full pl-10 pr-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 CheckTypeEnum | NoteTypeEnum | '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>
+            <option value="RECEIVED">Alınan</option>
+            <option value="ISSUED">Verilen</option>
+          </select>
+
+          {activeTab === 'checks' ? (
+            <select
+              value={selectedCheckStatus}
+              onChange={(e) => setSelectedCheckStatus(e.target.value as CheckStatusEnum | '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(CheckStatusEnum).map((status) => (
+                <option key={status} value={status}>
+                  {getCheckStatusLabel(status)}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <select
+              value={selectedNoteStatus}
+              onChange={(e) => setSelectedNoteStatus(e.target.value as NoteStatusEnum | '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(NoteStatusEnum).map((status) => (
+                <option key={status} value={status}>
+                  {getNoteStatusLabel(status)}
+                </option>
+              ))}
+            </select>
           )}
 
-          {(overdueChecks.length > 0 || overdueNotes.length > 0) && (
-            <div className="bg-red-50 border border-red-200 rounded-lg p-3">
-              <div className="flex items-center gap-2">
-                <FaExclamationTriangle className="w-5 h-5 text-red-600" />
-                <h3 className="text-base font-semibold text-red-900">Vadesi Geçmiş</h3>
-              </div>
-              <p className="text-sm text-red-700 mt-1">
-                {overdueChecks.length} çek ve {overdueNotes.length} senet vadesi geçmiş durumda.
-              </p>
-            </div>
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as 'dueDate' | 'amount' | 'issueDate')}
+            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="dueDate">Vade Tarihine Göre</option>
+            <option value="amount">Tutara Göre</option>
+            <option value="issueDate">Düzenleme Tarihine Göre</option>
+          </select>
+        </div>
+
+        {/* Data Table */}
+        <div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
+          {activeTab === 'checks' ? (
+            <DataTable data={filteredChecks} columns={checkColumns} />
+          ) : (
+            <DataTable data={filteredNotes} columns={noteColumns} />
           )}
         </div>
-      )}
+
+        {/* Empty State */}
+        {((activeTab === 'checks' && filteredChecks.length === 0) ||
+          (activeTab === 'notes' && filteredNotes.length === 0)) && (
+          <div className="text-center py-10">
+            {activeTab === 'checks' ? (
+              <FaCreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+            ) : (
+              <FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+            )}
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
+              {activeTab === 'checks' ? 'Çek bulunamadı' : 'Senet bulunamadı'}
+            </h3>
+            <p className="text-sm text-gray-500">
+              {activeTab === 'checks'
+                ? 'Yeni bir çek ekleyin veya arama kriterlerinizi değiştirin.'
+                : 'Yeni bir senet ekleyin veya arama kriterlerinizi değiştirin.'}
+            </p>
+          </div>
+        )}
+      </div>
 
       {/* Modal Components */}
       <CheckForm
@@ -787,128 +913,7 @@ const CheckNoteManagement: React.FC<CheckNoteManagementProps> = ({
           isOpen={showEndorsementDialog}
         />
       )}
-
-      {/* Tabs */}
-      <div className="border-b border-gray-200">
-        <nav className="-mb-px flex space-x-6">
-          <button
-            onClick={() => setActiveTab('checks')}
-            className={`py-3 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'checks'
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-            }`}
-          >
-            Çekler ({checks.length})
-          </button>
-          <button
-            onClick={() => setActiveTab('notes')}
-            className={`py-3 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'notes'
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-            }`}
-          >
-            Senetler ({promissoryNotes.length})
-          </button>
-        </nav>
-      </div>
-
-      {/* Filters */}
-      <div className="flex gap-3 items-center">
-        <div className="flex-1 relative">
-          <FaSearch className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
-          <input
-            type="text"
-            placeholder={
-              activeTab === 'checks'
-                ? 'Çek no, keşideci, lehtar veya banka ara...'
-                : 'Senet no, keşideci veya lehtar ara...'
-            }
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full pl-10 pr-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 CheckTypeEnum | NoteTypeEnum | '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>
-          <option value="RECEIVED">Alınan</option>
-          <option value="ISSUED">Verilen</option>
-        </select>
-
-        {activeTab === 'checks' ? (
-          <select
-            value={selectedCheckStatus}
-            onChange={(e) => setSelectedCheckStatus(e.target.value as CheckStatusEnum | '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(CheckStatusEnum).map((status) => (
-              <option key={status} value={status}>
-                {getCheckStatusLabel(status)}
-              </option>
-            ))}
-          </select>
-        ) : (
-          <select
-            value={selectedNoteStatus}
-            onChange={(e) => setSelectedNoteStatus(e.target.value as NoteStatusEnum | '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(NoteStatusEnum).map((status) => (
-              <option key={status} value={status}>
-                {getNoteStatusLabel(status)}
-              </option>
-            ))}
-          </select>
-        )}
-
-        <select
-          value={sortBy}
-          onChange={(e) => setSortBy(e.target.value as 'dueDate' | 'amount' | 'issueDate')}
-          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="dueDate">Vade Tarihine Göre</option>
-          <option value="amount">Tutara Göre</option>
-          <option value="issueDate">Düzenleme Tarihine Göre</option>
-        </select>
-      </div>
-
-      {/* Data Table */}
-      <div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
-        {activeTab === 'checks' ? (
-          <DataTable data={filteredChecks} columns={checkColumns} />
-        ) : (
-          <DataTable data={filteredNotes} columns={noteColumns} />
-        )}
-      </div>
-
-      {/* Empty State */}
-      {((activeTab === 'checks' && filteredChecks.length === 0) ||
-        (activeTab === 'notes' && filteredNotes.length === 0)) && (
-        <div className="text-center py-10">
-          {activeTab === 'checks' ? (
-            <FaCreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-          ) : (
-            <FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-          )}
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            {activeTab === 'checks' ? 'Çek bulunamadı' : 'Senet bulunamadı'}
-          </h3>
-          <p className="text-sm text-gray-500">
-            {activeTab === 'checks'
-              ? 'Yeni bir çek ekleyin veya arama kriterlerinizi değiştirin.'
-              : 'Yeni bir senet ekleyin veya arama kriterlerinizi değiştirin.'}
-          </p>
-        </div>
-      )}
-    </div>
+    </Container>
   )
 }
 
diff --git a/ui/src/views/accounting/components/CurrentAccountManagement.tsx b/ui/src/views/accounting/components/CurrentAccountManagement.tsx
index 13f36670..6c6e8fef 100644
--- a/ui/src/views/accounting/components/CurrentAccountManagement.tsx
+++ b/ui/src/views/accounting/components/CurrentAccountManagement.tsx
@@ -1,24 +1,17 @@
-import React, { useState } from "react";
-import {
-  FaUsers,
-  FaPlus,
-  FaSearch,
-  FaEdit,
-  FaEye,
-  FaReceipt,
-} from "react-icons/fa";
+import React, { useState } from 'react'
+import { FaUsers, FaPlus, FaSearch, FaEdit, FaEye, FaReceipt } from 'react-icons/fa'
 import {
   FiCurrentAccount,
   AccountTypeEnum,
   RiskGroupEnum,
   FiCurrentAccountMovement,
   FiDocumentTypeEnum,
-} from "../../../types/fi";
-import DataTable, { Column } from "../../../components/common/DataTable";
-import CurrentAccountForm from "./CurrentAccountForm";
-import CurrentAccountDetails from "./CurrentAccountDetails";
-import CurrentAccountMovementForm from "./CurrentAccountMovementForm";
-import Widget from "../../../components/common/Widget";
+} from '../../../types/fi'
+import DataTable, { Column } from '../../../components/common/DataTable'
+import CurrentAccountForm from './CurrentAccountForm'
+import CurrentAccountDetails from './CurrentAccountDetails'
+import CurrentAccountMovementForm from './CurrentAccountMovementForm'
+import Widget from '../../../components/common/Widget'
 import {
   getAccountTypeColor,
   getAccountTypeText,
@@ -26,183 +19,155 @@ import {
   getFiDocumentTypeText,
   getRiskGroupColor,
   getRiskGroupText,
-} from "../../../utils/erp";
+} from '../../../utils/erp'
+import { Container } from '@/components/shared'
 
 interface CurrentAccountManagementProps {
-  accounts: FiCurrentAccount[];
-  accountMovements: FiCurrentAccountMovement[];
+  accounts: FiCurrentAccount[]
+  accountMovements: FiCurrentAccountMovement[]
 }
 
 const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
   accounts,
   accountMovements,
 }) => {
-  const [activeTab, setActiveTab] = useState<"accounts" | "movements">(
-    "accounts"
-  );
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedType, setSelectedType] = useState<AccountTypeEnum | "all">(
-    "all"
-  );
-  const [selectedRiskGroup, setSelectedRiskGroup] = useState<
-    RiskGroupEnum | "all"
-  >("all");
-  const [sortBy, setSortBy] = useState<"title" | "balance" | "lastTransaction">(
-    "title"
-  );
-  const [selectedAccount, setSelectedAccount] =
-    useState<FiCurrentAccount | null>(null);
-  const [showForm, setShowForm] = useState(false);
-  const [showDetails, setShowDetails] = useState(false);
-  const [editingAccount, setEditingAccount] = useState<FiCurrentAccount | null>(
-    null
-  );
+  const [activeTab, setActiveTab] = useState<'accounts' | 'movements'>('accounts')
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedType, setSelectedType] = useState<AccountTypeEnum | 'all'>('all')
+  const [selectedRiskGroup, setSelectedRiskGroup] = useState<RiskGroupEnum | 'all'>('all')
+  const [sortBy, setSortBy] = useState<'title' | 'balance' | 'lastTransaction'>('title')
+  const [selectedAccount, setSelectedAccount] = useState<FiCurrentAccount | null>(null)
+  const [showForm, setShowForm] = useState(false)
+  const [showDetails, setShowDetails] = useState(false)
+  const [editingAccount, setEditingAccount] = useState<FiCurrentAccount | null>(null)
 
   // Movement form states
-  const [showMovementForm, setShowMovementForm] = useState(false);
-  const [editingMovement, setEditingMovement] =
-    useState<FiCurrentAccountMovement | null>(null);
+  const [showMovementForm, setShowMovementForm] = useState(false)
+  const [editingMovement, setEditingMovement] = useState<FiCurrentAccountMovement | null>(null)
 
   // Movement filters
-  const [movementSearchTerm, setMovementSearchTerm] = useState("");
-  const [selectedDocumentType, setSelectedDocumentType] = useState<
-    FiDocumentTypeEnum | "all"
-  >("all");
-  const [movementSortBy, setMovementSortBy] = useState<"date" | "amount">(
-    "date"
-  );
+  const [movementSearchTerm, setMovementSearchTerm] = useState('')
+  const [selectedDocumentType, setSelectedDocumentType] = useState<FiDocumentTypeEnum | 'all'>(
+    'all',
+  )
+  const [movementSortBy, setMovementSortBy] = useState<'date' | 'amount'>('date')
 
   // Handler functions
   const handleAdd = () => {
-    setEditingAccount(null);
-    setShowForm(true);
-  };
+    setEditingAccount(null)
+    setShowForm(true)
+  }
 
   const handleEdit = (account: FiCurrentAccount) => {
-    setEditingAccount(account);
-    setShowForm(true);
-  };
+    setEditingAccount(account)
+    setShowForm(true)
+  }
 
   const handleViewDetails = (account: FiCurrentAccount) => {
-    setSelectedAccount(account);
-    setShowDetails(true);
-  };
+    setSelectedAccount(account)
+    setShowDetails(true)
+  }
 
   const handleViewMovements = (account: FiCurrentAccount) => {
-    setSelectedAccount(account);
-    setActiveTab("movements");
-  };
+    setSelectedAccount(account)
+    setActiveTab('movements')
+  }
 
   const handleSaveAccount = (accountData: Partial<FiCurrentAccount>) => {
     // This would normally call the parent's save function
-    console.log("Saving account:", accountData);
-    setShowForm(false);
-    setEditingAccount(null);
-  };
+    console.log('Saving account:', accountData)
+    setShowForm(false)
+    setEditingAccount(null)
+  }
 
   const handleCloseForm = () => {
-    setShowForm(false);
-    setEditingAccount(null);
-  };
+    setShowForm(false)
+    setEditingAccount(null)
+  }
 
   const handleCloseDetails = () => {
-    setShowDetails(false);
-    setSelectedAccount(null);
-  };
+    setShowDetails(false)
+    setSelectedAccount(null)
+  }
 
   const handleEditFromDetails = () => {
     if (selectedAccount) {
-      setShowDetails(false);
-      setEditingAccount(selectedAccount);
-      setShowForm(true);
+      setShowDetails(false)
+      setEditingAccount(selectedAccount)
+      setShowForm(true)
     }
-  };
+  }
 
   const handleEditMovement = (movement: FiCurrentAccountMovement) => {
-    setEditingMovement(movement);
-    setShowMovementForm(true);
-  };
+    setEditingMovement(movement)
+    setShowMovementForm(true)
+  }
 
-  const handleSaveMovement = (
-    movementData: Partial<FiCurrentAccountMovement>
-  ) => {
+  const handleSaveMovement = (movementData: Partial<FiCurrentAccountMovement>) => {
     // This would normally call the parent's save function
-    console.log("Saving movement:", movementData);
-    setShowMovementForm(false);
-    setEditingMovement(null);
-  };
+    console.log('Saving movement:', movementData)
+    setShowMovementForm(false)
+    setEditingMovement(null)
+  }
 
   const handleCloseMovementForm = () => {
-    setShowMovementForm(false);
-    setEditingMovement(null);
-  };
+    setShowMovementForm(false)
+    setEditingMovement(null)
+  }
 
   const handleAddMovement = () => {
-    setEditingMovement(null);
-    setShowMovementForm(true);
-  };
+    setEditingMovement(null)
+    setShowMovementForm(true)
+  }
 
   // Filter movements
   const filteredMovements = accountMovements
     .filter((movement) => {
       if (selectedAccount && movement.accountId !== selectedAccount.id) {
-        return false;
+        return false
       }
       if (
         movementSearchTerm &&
-        !movement.description
-          .toLowerCase()
-          .includes(movementSearchTerm.toLowerCase()) &&
-        !movement.referenceNumber
-          ?.toLowerCase()
-          .includes(movementSearchTerm.toLowerCase())
+        !movement.description.toLowerCase().includes(movementSearchTerm.toLowerCase()) &&
+        !movement.referenceNumber?.toLowerCase().includes(movementSearchTerm.toLowerCase())
       ) {
-        return false;
+        return false
       }
-      if (
-        selectedDocumentType !== "all" &&
-        movement.documentType !== selectedDocumentType
-      ) {
-        return false;
+      if (selectedDocumentType !== 'all' && movement.documentType !== selectedDocumentType) {
+        return false
       }
-      return true;
+      return true
     })
     .sort((a, b) => {
       switch (movementSortBy) {
-        case "date":
+        case 'date':
+          return new Date(b.transactionDate).getTime() - new Date(a.transactionDate).getTime()
+        case 'amount':
           return (
-            new Date(b.transactionDate).getTime() -
-            new Date(a.transactionDate).getTime()
-          );
-        case "amount":
-          return (
-            Math.abs(b.debitAmount || b.creditAmount) -
-            Math.abs(a.debitAmount || a.creditAmount)
-          );
+            Math.abs(b.debitAmount || b.creditAmount) - Math.abs(a.debitAmount || a.creditAmount)
+          )
         default:
-          return 0;
+          return 0
       }
-    });
+    })
 
   // Movement columns
   const movementColumns: Column<FiCurrentAccountMovement>[] = [
     {
-      key: "transactionDate",
-      header: "Tarih",
+      key: 'transactionDate',
+      header: 'Tarih',
       sortable: true,
       render: (movement: FiCurrentAccountMovement) => (
-        <span className="text-sm">
-          {movement.transactionDate.toLocaleDateString("tr-TR")}
-        </span>
+        <span className="text-sm">{movement.transactionDate.toLocaleDateString('tr-TR')}</span>
       ),
     },
     {
-      key: "documentType",
-      header: "Belge Türü",
+      key: 'documentType',
+      header: 'Belge Türü',
       render: (movement: FiCurrentAccountMovement) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getFiDocumentTypeColor(
-            movement.documentType
+            movement.documentType,
           )}`}
         >
           {getFiDocumentTypeText(movement.documentType)}
@@ -210,34 +175,32 @@ const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
       ),
     },
     {
-      key: "referenceNumber",
-      header: "Belge No",
+      key: 'referenceNumber',
+      header: 'Belge No',
       render: (movement: FiCurrentAccountMovement) => (
         <span className="font-mono text-sm">
-          {movement.referenceNumber || movement.documentNumber || "-"}
+          {movement.referenceNumber || movement.documentNumber || '-'}
         </span>
       ),
     },
     {
-      key: "description",
-      header: "Açıklama",
+      key: 'description',
+      header: 'Açıklama',
       render: (movement: FiCurrentAccountMovement) => (
         <div className="max-w-xs">
-          <div className="font-medium text-gray-900 truncate">
-            {movement.description}
-          </div>
+          <div className="font-medium text-gray-900 truncate">{movement.description}</div>
         </div>
       ),
     },
     {
-      key: "debitAmount",
-      header: "Borç",
+      key: 'debitAmount',
+      header: 'Borç',
       render: (movement: FiCurrentAccountMovement) => (
         <div className="text-right">
           {movement.debitAmount > 0 ? (
             <span className="text-red-600 font-medium">
-              {movement.debitAmount.toLocaleString("tr-TR", {
-                style: "currency",
+              {movement.debitAmount.toLocaleString('tr-TR', {
+                style: 'currency',
                 currency: movement.currency,
                 minimumFractionDigits: 2,
               })}
@@ -249,14 +212,14 @@ const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
       ),
     },
     {
-      key: "creditAmount",
-      header: "Alacak",
+      key: 'creditAmount',
+      header: 'Alacak',
       render: (movement: FiCurrentAccountMovement) => (
         <div className="text-right">
           {movement.creditAmount > 0 ? (
             <span className="text-green-600 font-medium">
-              {movement.creditAmount.toLocaleString("tr-TR", {
-                style: "currency",
+              {movement.creditAmount.toLocaleString('tr-TR', {
+                style: 'currency',
                 currency: movement.currency,
                 minimumFractionDigits: 2,
               })}
@@ -268,33 +231,27 @@ const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
       ),
     },
     {
-      key: "balance",
-      header: "Bakiye",
+      key: 'balance',
+      header: 'Bakiye',
       render: (movement: FiCurrentAccountMovement) => {
-        const isDebit = movement.balance > 0;
+        const isDebit = movement.balance > 0
         return (
           <div className="text-right">
-            <span
-              className={`font-medium ${
-                isDebit ? "text-red-600" : "text-green-600"
-              }`}
-            >
-              {Math.abs(movement.balance).toLocaleString("tr-TR", {
-                style: "currency",
+            <span className={`font-medium ${isDebit ? 'text-red-600' : 'text-green-600'}`}>
+              {Math.abs(movement.balance).toLocaleString('tr-TR', {
+                style: 'currency',
                 currency: movement.currency,
                 minimumFractionDigits: 2,
               })}
             </span>
-            <div className="text-xs text-gray-500">
-              {isDebit ? "Borçlu" : "Alacaklı"}
-            </div>
+            <div className="text-xs text-gray-500">{isDebit ? 'Borçlu' : 'Alacaklı'}</div>
           </div>
-        );
+        )
       },
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (movement: FiCurrentAccountMovement) => (
         <div className="flex gap-1">
           <button
@@ -307,86 +264,72 @@ const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
         </div>
       ),
     },
-  ];
+  ]
 
   const filteredAccounts = accounts
     .filter((account) => {
       if (
         searchTerm &&
-        !account.businessParty?.name
-          .toLowerCase()
-          .includes(searchTerm.toLowerCase()) &&
+        !account.businessParty?.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
         !account.accountCode.toLowerCase().includes(searchTerm.toLowerCase()) &&
         !account.taxNumber?.toLowerCase().includes(searchTerm.toLowerCase())
       ) {
-        return false;
+        return false
       }
-      if (selectedType !== "all" && account.type !== selectedType) {
-        return false;
+      if (selectedType !== 'all' && account.type !== selectedType) {
+        return false
       }
-      if (
-        selectedRiskGroup !== "all" &&
-        account.riskGroup !== selectedRiskGroup
-      ) {
-        return false;
+      if (selectedRiskGroup !== 'all' && account.riskGroup !== selectedRiskGroup) {
+        return false
       }
-      return true;
+      return true
     })
     .sort((a, b) => {
       switch (sortBy) {
-        case "title":
-          return (
-            a.businessParty?.name?.localeCompare(b.businessParty?.name || "") ||
-            0
-          );
-        case "balance":
-          return Math.abs(b.balance) - Math.abs(a.balance);
-        case "lastTransaction": {
-          const aDate = a.lastTransactionDate
-            ? new Date(a.lastTransactionDate).getTime()
-            : 0;
-          const bDate = b.lastTransactionDate
-            ? new Date(b.lastTransactionDate).getTime()
-            : 0;
-          return bDate - aDate;
+        case 'title':
+          return a.businessParty?.name?.localeCompare(b.businessParty?.name || '') || 0
+        case 'balance':
+          return Math.abs(b.balance) - Math.abs(a.balance)
+        case 'lastTransaction': {
+          const aDate = a.lastTransactionDate ? new Date(a.lastTransactionDate).getTime() : 0
+          const bDate = b.lastTransactionDate ? new Date(b.lastTransactionDate).getTime() : 0
+          return bDate - aDate
         }
         default:
-          return 0;
+          return 0
       }
-    });
+    })
 
   const formatBalance = (balance: number) => {
-    const isDebit = balance > 0;
-    const absBalance = Math.abs(balance);
+    const isDebit = balance > 0
+    const absBalance = Math.abs(balance)
     return {
-      amount: absBalance.toLocaleString("tr-TR", {
-        style: "currency",
-        currency: "TRY",
+      amount: absBalance.toLocaleString('tr-TR', {
+        style: 'currency',
+        currency: 'TRY',
         minimumFractionDigits: 2,
       }),
-      type: isDebit ? "Borçlu" : "Alacaklı",
+      type: isDebit ? 'Borçlu' : 'Alacaklı',
       isDebit,
-    };
-  };
+    }
+  }
 
   const columns: Column<FiCurrentAccount>[] = [
     {
-      key: "accountCode",
-      header: "Hesap Kodu",
+      key: 'accountCode',
+      header: 'Hesap Kodu',
       sortable: true,
       render: (account: FiCurrentAccount) => (
         <span className="font-mono text-sm">{account.accountCode}</span>
       ),
     },
     {
-      key: "title",
-      header: "Ünvan",
+      key: 'title',
+      header: 'Ünvan',
       sortable: true,
       render: (account: FiCurrentAccount) => (
         <div>
-          <div className="font-medium text-gray-900">
-            {account.businessParty?.name}
-          </div>
+          <div className="font-medium text-gray-900">{account.businessParty?.name}</div>
           {account.contactPerson && (
             <div className="text-sm text-gray-500">{account.contactPerson}</div>
           )}
@@ -394,12 +337,12 @@ const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
       ),
     },
     {
-      key: "type",
-      header: "Tür",
+      key: 'type',
+      header: 'Tür',
       render: (account: FiCurrentAccount) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getAccountTypeColor(
-            account.type
+            account.type,
           )}`}
         >
           {getAccountTypeText(account.type)}
@@ -407,34 +350,32 @@ const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
       ),
     },
     {
-      key: "balance",
-      header: "Bakiye",
+      key: 'balance',
+      header: 'Bakiye',
       sortable: true,
       render: (account: FiCurrentAccount) => {
-        const balanceInfo = formatBalance(account.balance);
+        const balanceInfo = formatBalance(account.balance)
         return (
           <div className="text-right">
             <div
-              className={`font-medium ${
-                balanceInfo.isDebit ? "text-red-600" : "text-green-600"
-              }`}
+              className={`font-medium ${balanceInfo.isDebit ? 'text-red-600' : 'text-green-600'}`}
             >
               {balanceInfo.amount}
             </div>
             <div className="text-xs text-gray-500">{balanceInfo.type}</div>
           </div>
-        );
+        )
       },
     },
     {
-      key: "creditLimit",
-      header: "Kredi Limiti",
+      key: 'creditLimit',
+      header: 'Kredi Limiti',
       render: (account: FiCurrentAccount) => (
         <div className="text-right">
           <span className="text-sm text-gray-900">
-            {account.creditLimit.toLocaleString("tr-TR", {
-              style: "currency",
-              currency: "TRY",
+            {account.creditLimit.toLocaleString('tr-TR', {
+              style: 'currency',
+              currency: 'TRY',
               minimumFractionDigits: 0,
             })}
           </span>
@@ -442,12 +383,12 @@ const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
       ),
     },
     {
-      key: "riskGroup",
-      header: "Risk Grubu",
+      key: 'riskGroup',
+      header: 'Risk Grubu',
       render: (account: FiCurrentAccount) => (
         <span
           className={`px-2 py-1 text-xs font-medium rounded-full ${getRiskGroupColor(
-            account.riskGroup
+            account.riskGroup,
           )}`}
         >
           {getRiskGroupText(account.riskGroup)}
@@ -455,33 +396,29 @@ const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
       ),
     },
     {
-      key: "contact",
-      header: "İletişim",
+      key: 'contact',
+      header: 'İletişim',
       render: (account: FiCurrentAccount) => (
         <div className="text-sm">
-          {account.phone && (
-            <div className="text-gray-900">{account.phone}</div>
-          )}
-          {account.email && (
-            <div className="text-gray-500">{account.email}</div>
-          )}
+          {account.phone && <div className="text-gray-900">{account.phone}</div>}
+          {account.email && <div className="text-gray-500">{account.email}</div>}
         </div>
       ),
     },
     {
-      key: "lastTransaction",
-      header: "Son Hareket",
+      key: 'lastTransaction',
+      header: 'Son Hareket',
       render: (account: FiCurrentAccount) => (
         <div className="text-sm text-gray-500">
           {account.lastTransactionDate
-            ? new Date(account.lastTransactionDate).toLocaleDateString("tr-TR")
-            : "Hareket yok"}
+            ? new Date(account.lastTransactionDate).toLocaleDateString('tr-TR')
+            : 'Hareket yok'}
         </div>
       ),
     },
     {
-      key: "actions",
-      header: "İşlemler",
+      key: 'actions',
+      header: 'İşlemler',
       render: (account: FiCurrentAccount) => (
         <div className="flex gap-1">
           <button
@@ -509,292 +446,275 @@ const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
         </div>
       ),
     },
-  ];
+  ]
 
   // Calculate statistics
-  const totalAccounts = accounts.length;
-  const activeAccounts = accounts.filter((a) => a.isActive).length;
+  const totalAccounts = accounts.length
+  const activeAccounts = accounts.filter((a) => a.isActive).length
   const totalDebitBalance = accounts
     .filter((a) => a.balance > 0)
-    .reduce((sum, a) => sum + a.balance, 0);
+    .reduce((sum, a) => sum + a.balance, 0)
   const totalCreditBalance = accounts
     .filter((a) => a.balance < 0)
-    .reduce((sum, a) => sum + Math.abs(a.balance), 0);
+    .reduce((sum, a) => sum + Math.abs(a.balance), 0)
 
   // High risk accounts
   const highRiskAccounts = accounts.filter(
     (a) =>
       a.riskGroup === RiskGroupEnum.High ||
       a.riskGroup === RiskGroupEnum.Blocked ||
-      Math.abs(a.balance) > a.creditLimit
-  );
+      Math.abs(a.balance) > a.creditLimit,
+  )
 
   return (
-    <div className="space-y-2">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-bold text-gray-900">
-            Cari Hesap Yönetimi
-          </h2>
-          <p className="text-gray-600">
-            Müşteri ve tedarikçi cari hesaplarının 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 Cari Hesap
-        </button>
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Widget
-          title="Toplam Hesap"
-          value={totalAccounts}
-          color="blue"
-          icon="FaUsers"
-          subTitle={`${activeAccounts} aktif`}
-        />
-        <Widget
-          title="Toplam Borç"
-          value={totalDebitBalance.toLocaleString("tr-TR", {
-            style: "currency",
-            currency: "TRY",
-            minimumFractionDigits: 0,
-          })}
-          color="red"
-          icon="FaArrowUp"
-        />
-        <Widget
-          title="Toplam Alacak"
-          value={totalCreditBalance.toLocaleString("tr-TR", {
-            style: "currency",
-            currency: "TRY",
-            minimumFractionDigits: 0,
-          })}
-          color="green"
-          icon="FaArrowDown"
-        />
-        <Widget
-          title="Riskli Hesap"
-          value={highRiskAccounts.length}
-          color="orange"
-          icon="FaExclamationCircle"
-        />
-      </div>
-
-      {/* Tabs */}
-      <div className="bg-white rounded-lg shadow-sm border">
-        <div className="border-b border-gray-200">
-          <nav className="-mb-px flex space-x-6 px-4">
-            <button
-              onClick={() => setActiveTab("accounts")}
-              className={`py-3 px-1 border-b-2 font-medium text-sm ${
-                activeTab === "accounts"
-                  ? "border-blue-500 text-blue-600"
-                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
-              }`}
-            >
-              <div className="flex items-center gap-2">
-                <FaUsers className="w-4 h-4" />
-                Cari Hesaplar ({accounts.length})
-              </div>
-            </button>
-            <button
-              onClick={() => setActiveTab("movements")}
-              className={`py-3 px-1 border-b-2 font-medium text-sm ${
-                activeTab === "movements"
-                  ? "border-blue-500 text-blue-600"
-                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
-              }`}
-            >
-              <div className="flex items-center gap-2">
-                <FaReceipt className="w-4 h-4" />
-                Cari Hesap Hareketleri ({accountMovements.length})
-              </div>
-            </button>
-          </nav>
+    <Container>
+      <div className="space-y-2">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900">Cari Hesap Yönetimi</h2>
+            <p className="text-gray-600">Müşteri ve tedarikçi cari hesaplarının 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 Cari Hesap
+          </button>
         </div>
 
-        <div className="p-4">
-          {activeTab === "accounts" && (
-            <div className="space-y-4">
-              {/* Filters */}
-              <div className="flex gap-3 items-center">
-                <div className="flex-1 relative">
-                  <FaSearch className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
-                  <input
-                    type="text"
-                    placeholder="Ünvan, hesap kodu veya vergi numarası ara..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    className="w-full pl-10 pr-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-4">
+          <Widget
+            title="Toplam Hesap"
+            value={totalAccounts}
+            color="blue"
+            icon="FaUsers"
+            subTitle={`${activeAccounts} aktif`}
+          />
+          <Widget
+            title="Toplam Borç"
+            value={totalDebitBalance.toLocaleString('tr-TR', {
+              style: 'currency',
+              currency: 'TRY',
+              minimumFractionDigits: 0,
+            })}
+            color="red"
+            icon="FaArrowUp"
+          />
+          <Widget
+            title="Toplam Alacak"
+            value={totalCreditBalance.toLocaleString('tr-TR', {
+              style: 'currency',
+              currency: 'TRY',
+              minimumFractionDigits: 0,
+            })}
+            color="green"
+            icon="FaArrowDown"
+          />
+          <Widget
+            title="Riskli Hesap"
+            value={highRiskAccounts.length}
+            color="orange"
+            icon="FaExclamationCircle"
+          />
+        </div>
+
+        {/* Tabs */}
+        <div className="bg-white rounded-lg shadow-sm border">
+          <div className="border-b border-gray-200">
+            <nav className="-mb-px flex space-x-6 px-4">
+              <button
+                onClick={() => setActiveTab('accounts')}
+                className={`py-3 px-1 border-b-2 font-medium text-sm ${
+                  activeTab === 'accounts'
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                <div className="flex items-center gap-2">
+                  <FaUsers className="w-4 h-4" />
+                  Cari Hesaplar ({accounts.length})
                 </div>
-
-                <select
-                  value={selectedType}
-                  onChange={(e) =>
-                    setSelectedType(e.target.value as AccountTypeEnum | "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(AccountTypeEnum).map((type) => (
-                    <option key={type} value={type}>
-                      {getAccountTypeText(type)}
-                    </option>
-                  ))}
-                </select>
-
-                <select
-                  value={selectedRiskGroup}
-                  onChange={(e) =>
-                    setSelectedRiskGroup(
-                      e.target.value as RiskGroupEnum | "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 Risk Grupları</option>
-                  {Object.values(RiskGroupEnum).map((risk) => (
-                    <option key={risk} value={risk}>
-                      {getRiskGroupText(risk)}
-                    </option>
-                  ))}
-                </select>
-
-                <select
-                  value={sortBy}
-                  onChange={(e) =>
-                    setSortBy(
-                      e.target.value as "title" | "balance" | "lastTransaction"
-                    )
-                  }
-                  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="title">Ünvana Göre</option>
-                  <option value="balance">Bakiyeye Göre</option>
-                  <option value="lastTransaction">Son Harekete Göre</option>
-                </select>
-              </div>
-
-              {/* Data Table */}
-              <div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
-                <DataTable data={filteredAccounts} columns={columns} />
-              </div>
-
-              {filteredAccounts.length === 0 && (
-                <div className="text-center py-10">
-                  <FaUsers className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-                  <h3 className="text-base font-medium text-gray-900 mb-2">
-                    Cari hesap bulunamadı
-                  </h3>
-                  <p className="text-sm text-gray-500">
-                    Yeni bir cari hesap ekleyin veya arama kriterlerinizi
-                    değiştirin.
-                  </p>
+              </button>
+              <button
+                onClick={() => setActiveTab('movements')}
+                className={`py-3 px-1 border-b-2 font-medium text-sm ${
+                  activeTab === 'movements'
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                <div className="flex items-center gap-2">
+                  <FaReceipt className="w-4 h-4" />
+                  Cari Hesap Hareketleri ({accountMovements.length})
                 </div>
-              )}
-            </div>
-          )}
+              </button>
+            </nav>
+          </div>
 
-          {activeTab === "movements" && (
-            <div className="space-y-4">
-              {/* Movement Header */}
-              <div className="flex items-center justify-between">
-                <div>
-                  <h3 className="text-base font-semibold text-gray-900">
-                    Cari Hesap Hareketleri
-                  </h3>
-                  <p className="text-gray-600 text-sm">
-                    {selectedAccount
-                      ? `${selectedAccount.businessParty?.name} (${selectedAccount.accountCode}) hesabının hareketleri`
-                      : "Tüm cari hesap hareketleri"}
-                  </p>
-                </div>
-                <button
-                  onClick={handleAddMovement}
-                  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" />
-                  Yeni Hareket
-                </button>
-              </div>
+          <div className="p-4">
+            {activeTab === 'accounts' && (
+              <div className="space-y-4">
+                {/* Filters */}
+                <div className="flex gap-3 items-center">
+                  <div className="flex-1 relative">
+                    <FaSearch className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+                    <input
+                      type="text"
+                      placeholder="Ünvan, hesap kodu veya vergi numarası ara..."
+                      value={searchTerm}
+                      onChange={(e) => setSearchTerm(e.target.value)}
+                      className="w-full pl-10 pr-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
 
-              {/* Movement Filters */}
-              <div className="flex gap-3 items-center">
-                {selectedAccount && (
-                  <button
-                    onClick={() => setSelectedAccount(null)}
-                    className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors text-sm"
+                  <select
+                    value={selectedType}
+                    onChange={(e) => setSelectedType(e.target.value as AccountTypeEnum | '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"
                   >
-                    Tüm Hareketleri Göster
-                  </button>
+                    <option value="all">Tüm Türler</option>
+                    {Object.values(AccountTypeEnum).map((type) => (
+                      <option key={type} value={type}>
+                        {getAccountTypeText(type)}
+                      </option>
+                    ))}
+                  </select>
+
+                  <select
+                    value={selectedRiskGroup}
+                    onChange={(e) => setSelectedRiskGroup(e.target.value as RiskGroupEnum | '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 Risk Grupları</option>
+                    {Object.values(RiskGroupEnum).map((risk) => (
+                      <option key={risk} value={risk}>
+                        {getRiskGroupText(risk)}
+                      </option>
+                    ))}
+                  </select>
+
+                  <select
+                    value={sortBy}
+                    onChange={(e) =>
+                      setSortBy(e.target.value as 'title' | 'balance' | 'lastTransaction')
+                    }
+                    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="title">Ünvana Göre</option>
+                    <option value="balance">Bakiyeye Göre</option>
+                    <option value="lastTransaction">Son Harekete Göre</option>
+                  </select>
+                </div>
+
+                {/* Data Table */}
+                <div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
+                  <DataTable data={filteredAccounts} columns={columns} />
+                </div>
+
+                {filteredAccounts.length === 0 && (
+                  <div className="text-center py-10">
+                    <FaUsers className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+                    <h3 className="text-base font-medium text-gray-900 mb-2">
+                      Cari hesap bulunamadı
+                    </h3>
+                    <p className="text-sm text-gray-500">
+                      Yeni bir cari hesap ekleyin veya arama kriterlerinizi değiştirin.
+                    </p>
+                  </div>
                 )}
+              </div>
+            )}
 
-                <div className="flex-1 relative">
-                  <FaSearch className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
-                  <input
-                    type="text"
-                    placeholder="Açıklama veya belge numarası ara..."
-                    value={movementSearchTerm}
-                    onChange={(e) => setMovementSearchTerm(e.target.value)}
-                    className="w-full pl-10 pr-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  />
+            {activeTab === 'movements' && (
+              <div className="space-y-4">
+                {/* Movement Header */}
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="text-base font-semibold text-gray-900">
+                      Cari Hesap Hareketleri
+                    </h3>
+                    <p className="text-gray-600 text-sm">
+                      {selectedAccount
+                        ? `${selectedAccount.businessParty?.name} (${selectedAccount.accountCode}) hesabının hareketleri`
+                        : 'Tüm cari hesap hareketleri'}
+                    </p>
+                  </div>
+                  <button
+                    onClick={handleAddMovement}
+                    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" />
+                    Yeni Hareket
+                  </button>
                 </div>
 
-                <select
-                  value={selectedDocumentType}
-                  onChange={(e) =>
-                    setSelectedDocumentType(
-                      e.target.value as FiDocumentTypeEnum | "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 Belge Türleri</option>
-                  {Object.values(FiDocumentTypeEnum).map((type) => (
-                    <option key={type} value={type}>
-                      {getFiDocumentTypeText(type)}
-                    </option>
-                  ))}
-                </select>
+                {/* Movement Filters */}
+                <div className="flex gap-3 items-center">
+                  {selectedAccount && (
+                    <button
+                      onClick={() => setSelectedAccount(null)}
+                      className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors text-sm"
+                    >
+                      Tüm Hareketleri Göster
+                    </button>
+                  )}
 
-                <select
-                  value={movementSortBy}
-                  onChange={(e) =>
-                    setMovementSortBy(e.target.value as "date" | "amount")
-                  }
-                  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="date">Tarihe Göre</option>
-                  <option value="amount">Tutara Göre</option>
-                </select>
-              </div>
+                  <div className="flex-1 relative">
+                    <FaSearch className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+                    <input
+                      type="text"
+                      placeholder="Açıklama veya belge numarası ara..."
+                      value={movementSearchTerm}
+                      onChange={(e) => setMovementSearchTerm(e.target.value)}
+                      className="w-full pl-10 pr-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
 
-              {/* Movement Data Table */}
-              <div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
-                <DataTable data={filteredMovements} columns={movementColumns} />
-              </div>
+                  <select
+                    value={selectedDocumentType}
+                    onChange={(e) =>
+                      setSelectedDocumentType(e.target.value as FiDocumentTypeEnum | '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 Belge Türleri</option>
+                    {Object.values(FiDocumentTypeEnum).map((type) => (
+                      <option key={type} value={type}>
+                        {getFiDocumentTypeText(type)}
+                      </option>
+                    ))}
+                  </select>
 
-              {filteredMovements.length === 0 && (
-                <div className="text-center py-10">
-                  <FaReceipt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-                  <h3 className="text-base font-medium text-gray-900 mb-2">
-                    Hareket bulunamadı
-                  </h3>
-                  <p className="text-sm text-gray-500">
-                    Seçili kriterlere uygun hareket bulunmamaktadır.
-                  </p>
+                  <select
+                    value={movementSortBy}
+                    onChange={(e) => setMovementSortBy(e.target.value as 'date' | 'amount')}
+                    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="date">Tarihe Göre</option>
+                    <option value="amount">Tutara Göre</option>
+                  </select>
                 </div>
-              )}
-            </div>
-          )}
+
+                {/* Movement Data Table */}
+                <div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
+                  <DataTable data={filteredMovements} columns={movementColumns} />
+                </div>
+
+                {filteredMovements.length === 0 && (
+                  <div className="text-center py-10">
+                    <FaReceipt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+                    <h3 className="text-base font-medium text-gray-900 mb-2">Hareket bulunamadı</h3>
+                    <p className="text-sm text-gray-500">
+                      Seçili kriterlere uygun hareket bulunmamaktadır.
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
@@ -826,8 +746,8 @@ const CurrentAccountManagement: React.FC<CurrentAccountManagementProps> = ({
           onSave={handleSaveMovement}
         />
       )}
-    </div>
-  );
-};
+    </Container>
+  )
+}
 
-export default CurrentAccountManagement;
+export default CurrentAccountManagement
diff --git a/ui/src/views/crm/components/ActivityRecords.tsx b/ui/src/views/crm/components/ActivityRecords.tsx
index 0a7e402d..b6409948 100644
--- a/ui/src/views/crm/components/ActivityRecords.tsx
+++ b/ui/src/views/crm/components/ActivityRecords.tsx
@@ -573,23 +573,23 @@ const ActivityRecords: React.FC = () => {
             <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}
-        />
-
-        <ActivityDetails
-          isOpen={isDetailsOpen}
-          onClose={handleCloseDetails}
-          onEdit={handleEditFromDetails}
-          activity={selectedActivity}
-        />
       </div>
+
+      {/* Modals */}
+      <ActivityForm
+        isOpen={isFormOpen}
+        onClose={handleCloseForm}
+        onSave={handleSaveActivity}
+        activity={selectedActivity}
+        mode={formMode}
+      />
+
+      <ActivityDetails
+        isOpen={isDetailsOpen}
+        onClose={handleCloseDetails}
+        onEdit={handleEditFromDetails}
+        activity={selectedActivity}
+      />
     </Container>
   )
 }