From 05b9f5f4a8e8b33f538e9195e57bd58ac30d4722 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Fri, 31 Oct 2025 12:20:39 +0300
Subject: [PATCH] =?UTF-8?q?Developer=20Kit=20tasar=C4=B1m=20d=C3=BCzenleme?=
 =?UTF-8?q?si?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Seeds/LanguagesData.json                  |   6 -
 ui/src/components/developerKit/ApiManager.tsx | 120 ++++++++++--------
 .../developerKit/ComponentManager.tsx         |  86 ++++++-------
 ui/src/components/developerKit/Dashboard.tsx  |  22 ++--
 .../developerKit/MigrationManager.tsx         | 114 +++++++++--------
 5 files changed, 179 insertions(+), 169 deletions(-)

diff --git a/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
index 6a941305..45f540d5 100644
--- a/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -9613,12 +9613,6 @@
             "en": "Props:",
             "tr": "Özellikler:"
         },
-        {
-            "resourceName": "Platform",
-            "key": "App.DeveloperKit.Component.DateNotAvailable",
-            "en": "N/A",
-            "tr": "Yok"
-        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.Component.Status.Active",
diff --git a/ui/src/components/developerKit/ApiManager.tsx b/ui/src/components/developerKit/ApiManager.tsx
index 06eee634..15cba307 100644
--- a/ui/src/components/developerKit/ApiManager.tsx
+++ b/ui/src/components/developerKit/ApiManager.tsx
@@ -14,8 +14,8 @@ import {
   FaPaperPlane,
   FaPlusCircle,
   FaEdit,
-  FaTrash
-} from 'react-icons/fa';
+  FaTrash,
+} from 'react-icons/fa'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 
 interface EndpointType {
@@ -372,9 +372,7 @@ const ApiManager: React.FC = () => {
           <h1 className="text-2xl font-bold text-slate-900">
             {translate('::App.DeveloperKit.Endpoint.Title')}
           </h1>
-          <p className="text-slate-600">
-            {translate('::App.DeveloperKit.Endpoint.Description')}
-          </p>
+          <p className="text-slate-600">{translate('::App.DeveloperKit.Endpoint.Description')}</p>
         </div>
         <div className="flex items-center gap-3">
           <div className="flex items-center gap-2 bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">
@@ -385,16 +383,14 @@ const ApiManager: React.FC = () => {
       </div>
 
       {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-8">
+      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-4">
         <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
           <div className="flex items-center justify-between">
             <div>
               <p className="text-sm font-medium text-slate-600">
                 {translate('::App.DeveloperKit.Endpoint.GeneratedCrud')}
               </p>
-              <p className="text-2xl font-bold text-slate-900 mt-1">
-                {stats.generated}
-              </p>
+              <p className="text-2xl font-bold text-slate-900 mt-1">{stats.generated}</p>
             </div>
             <div className="bg-emerald-100 text-emerald-600 p-3 rounded-lg">
               <FaDatabase className="w-6 h-6" />
@@ -456,42 +452,40 @@ const ApiManager: React.FC = () => {
       </div>
 
       {/* Filters */}
-      <div className="bg-white rounded-lg border border-slate-200 p-6 mb-6 shadow-sm">
-        <div className="flex flex-col lg:flex-row gap-4">
-          <div className="flex-1 relative">
-            <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
-            <input
-              type="text"
-              placeholder={translate('::App.DeveloperKit.Endpoint.SearchPlaceholder')}
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-            />
-          </div>
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-2">
-              <FaFilter className="w-5 h-5 text-slate-500" />
-              <select
-                value={filterMethod}
-                onChange={(e) =>
-                  setFilterMethod(e.target.value as 'all' | 'GET' | 'POST' | 'PUT' | 'DELETE')
-                }
-                className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-              >
-                <option value="all">{translate('::App.DeveloperKit.Endpoint.AllMethods')}</option>
-                <option value="GET">GET</option>
-                <option value="POST">POST</option>
-                <option value="PUT">PUT</option>
-                <option value="DELETE">DELETE</option>
-              </select>
-            </div>
+      <div className="flex flex-col lg:flex-row gap-4">
+        <div className="flex-1 relative">
+          <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
+          <input
+            type="text"
+            placeholder={translate('::App.DeveloperKit.Endpoint.SearchPlaceholder')}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+          />
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <FaFilter className="w-5 h-5 text-slate-500" />
+            <select
+              value={filterMethod}
+              onChange={(e) =>
+                setFilterMethod(e.target.value as 'all' | 'GET' | 'POST' | 'PUT' | 'DELETE')
+              }
+              className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+            >
+              <option value="all">{translate('::App.DeveloperKit.Endpoint.AllMethods')}</option>
+              <option value="GET">GET</option>
+              <option value="POST">POST</option>
+              <option value="PUT">PUT</option>
+              <option value="DELETE">DELETE</option>
+            </select>
           </div>
         </div>
       </div>
 
       {/* Endpoints List */}
       {filteredEndpoints.length > 0 ? (
-        <div className="space-y-4">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
           {filteredEndpoints.map((endpoint) => (
             <div
               key={endpoint.id}
@@ -508,6 +502,7 @@ const ApiManager: React.FC = () => {
                 }}
               >
                 <div className="flex items-center justify-between">
+                  {/* Sol taraf */}
                   <div className="flex items-center gap-4">
                     <span
                       className={`px-3 py-1 text-sm font-medium rounded-full border ${getMethodColor(
@@ -522,19 +517,25 @@ const ApiManager: React.FC = () => {
                         {endpoint.path}
                       </code>
                     </div>
-                    <div className="flex items-center gap-2">
-                      {endpoint.type === 'generated' && (
-                        <span className="bg-emerald-100 text-emerald-700 text-xs px-2 py-1 rounded-full">
-                          {translate('::App.DeveloperKit.Endpoint.AutoGenerated')}
-                        </span>
-                      )}
+                  </div>
+
+                  {/* Sağ taraf */}
+                  <div className="flex items-center gap-3">
+                    {endpoint.type === 'generated' && (
+                      <span className="bg-emerald-100 text-emerald-700 text-xs px-2 py-1 rounded-full">
+                        {translate('::App.DeveloperKit.Endpoint.AutoGenerated')}
+                      </span>
+                    )}
+
+                    <div className="flex items-center gap-1">
+                      <FaCheckCircle className="w-5 h-5 text-green-500" />
+                      <span className="text-sm text-slate-500">
+                        {translate('::App.DeveloperKit.Endpoint.Active')}
+                      </span>
                     </div>
                   </div>
-                  <div className="flex items-center gap-2">
-                    <FaCheckCircle className="w-5 h-5 text-green-500" />
-                    <span className="text-sm text-slate-500">{translate('::App.DeveloperKit.Endpoint.Active')}</span>
-                  </div>
                 </div>
+
                 {endpoint.description && (
                   <p className="text-slate-600 text-sm mt-2">{endpoint.description}</p>
                 )}
@@ -543,10 +544,12 @@ const ApiManager: React.FC = () => {
               {/* Expanded Details */}
               {selectedEndpoint === endpoint.id && (
                 <div className="border-t border-slate-200 p-6 bg-slate-50">
-                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                  <div className="grid grid-cols-1 gap-6">
                     {/* Request Details */}
                     <div>
-                      <h4 className="font-semibold text-slate-900 mb-3">{translate('::App.DeveloperKit.Endpoint.RequestTitle')}</h4>
+                      <h4 className="font-semibold text-slate-900 mb-3">
+                        {translate('::App.DeveloperKit.Endpoint.RequestTitle')}
+                      </h4>
                       <div className="space-y-4">
                         <div>
                           <label className="block text-sm font-medium text-slate-700 mb-1">
@@ -627,7 +630,9 @@ const ApiManager: React.FC = () => {
                               <textarea
                                 value={getCurrentRequestBody(endpoint)}
                                 onChange={(e) => updateRequestBody(endpoint.id, e.target.value)}
-                                placeholder={translate('::App.DeveloperKit.Endpoint.RequestBodyPlaceholder')}
+                                placeholder={translate(
+                                  '::App.DeveloperKit.Endpoint.RequestBodyPlaceholder',
+                                )}
                                 rows={8}
                                 className="w-full px-3 py-2 text-sm border border-slate-300 rounded font-mono focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               />
@@ -672,7 +677,9 @@ const ApiManager: React.FC = () => {
 
                         {/* Test Section */}
                         <div className="bg-white border border-slate-300 rounded p-4">
-                          <h5 className="font-medium text-slate-900 mb-3">{translate('::App.DeveloperKit.Endpoint.TestSectionTitle')}</h5>
+                          <h5 className="font-medium text-slate-900 mb-3">
+                            {translate('::App.DeveloperKit.Endpoint.TestSectionTitle')}
+                          </h5>
                           <div className="flex gap-2">
                             <button
                               onClick={() => testEndpoint(endpoint)}
@@ -684,7 +691,9 @@ const ApiManager: React.FC = () => {
                               ) : (
                                 <FaPaperPlane className="w-4 h-4" />
                               )}
-                              {loadingEndpoints.has(endpoint.id) ? translate('::App.DeveloperKit.Endpoint.SendLoading') : translate('::App.DeveloperKit.Endpoint.SendRequest')}
+                              {loadingEndpoints.has(endpoint.id)
+                                ? translate('::App.DeveloperKit.Endpoint.SendLoading')
+                                : translate('::App.DeveloperKit.Endpoint.SendRequest')}
                             </button>
                             {testResults[endpoint.id] && (
                               <button
@@ -716,7 +725,8 @@ const ApiManager: React.FC = () => {
                           <FaExclamationCircle className="w-5 h-5 text-red-500" />
                         )}
                         <h5 className="font-semibold text-slate-900">
-                          {translate('::App.DeveloperKit.Endpoint.TestResultLabel')} ({testResults[endpoint.id].status})
+                          {translate('::App.DeveloperKit.Endpoint.TestResultLabel')} (
+                          {testResults[endpoint.id].status})
                         </h5>
                         <span className="text-xs text-slate-500">
                           {new Date(testResults[endpoint.id].timestamp).toLocaleTimeString()}
diff --git a/ui/src/components/developerKit/ComponentManager.tsx b/ui/src/components/developerKit/ComponentManager.tsx
index 561ef5cb..ed1eb5a3 100644
--- a/ui/src/components/developerKit/ComponentManager.tsx
+++ b/ui/src/components/developerKit/ComponentManager.tsx
@@ -106,7 +106,7 @@ const ComponentManager: React.FC = () => {
       </div>
 
       {/* Statistics Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-4">
         {stats.map((stat, index) => (
           <div key={index} className="bg-white rounded-lg border border-slate-200 p-6">
             <div className="flex items-center justify-between">
@@ -123,34 +123,32 @@ const ComponentManager: React.FC = () => {
       </div>
 
       {/* Filters */}
-      <div className="bg-white rounded-lg border border-slate-200 p-6 mb-6">
-        <div className="flex flex-col sm:flex-row gap-4">
-          <div className="flex-1 relative">
-            <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
-            <input
-              type="text"
-              placeholder={translate('::App.DeveloperKit.Component.SearchPlaceholder')}
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
-          <div className="flex items-center gap-2">
-            <FaFilter className="w-5 h-5 text-slate-500" />
-            <select
-              value={filterActive}
-              onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')}
-              className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            >
-              <option value="all">{translate('::App.DeveloperKit.Component.Filter.All')}</option>
-              <option value="active">
-                {translate('::App.DeveloperKit.Component.Filter.Active')}
-              </option>
-              <option value="inactive">
-                {translate('::App.DeveloperKit.Component.Filter.Inactive')}
-              </option>
-            </select>
-          </div>
+      <div className="flex flex-col sm:flex-row gap-4">
+        <div className="flex-1 relative">
+          <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
+          <input
+            type="text"
+            placeholder={translate('::App.DeveloperKit.Component.SearchPlaceholder')}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <FaFilter className="w-5 h-5 text-slate-500" />
+          <select
+            value={filterActive}
+            onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')}
+            className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value="all">{translate('::App.DeveloperKit.Component.Filter.All')}</option>
+            <option value="active">
+              {translate('::App.DeveloperKit.Component.Filter.Active')}
+            </option>
+            <option value="inactive">
+              {translate('::App.DeveloperKit.Component.Filter.Inactive')}
+            </option>
+          </select>
         </div>
       </div>
 
@@ -162,14 +160,15 @@ const ComponentManager: React.FC = () => {
           </div>
         </div>
       ) : filteredComponents?.length > 0 ? (
-        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6">
           {filteredComponents.map((component) => (
             <div
               key={component.id}
               className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
             >
               <div className="p-6">
-                <div className="flex items-start justify-between mb-4">
+                <div className="flex items-start justify-between">
+                  {/* Sol taraf */}
                   <div className="flex-1">
                     <div className="flex items-center gap-2 mb-1">
                       <h3 className="text-lg font-semibold text-slate-900">{component.name}</h3>
@@ -179,6 +178,7 @@ const ComponentManager: React.FC = () => {
                         }`}
                       />
                     </div>
+
                     <p className="text-slate-600 text-sm mb-3">
                       {(() => {
                         try {
@@ -195,17 +195,17 @@ const ComponentManager: React.FC = () => {
                     {component.description && (
                       <p className="text-slate-600 text-sm mb-3">{component.description}</p>
                     )}
-                    <div className="flex items-center gap-4 text-xs text-slate-500">
-                      <div className="flex items-center gap-1">
-                        <FaCalendarAlt className="w-3 h-3" />
-                        <span>
-                          {component.lastModificationTime
-                            ? new Date(component.lastModificationTime).toLocaleDateString()
-                            : translate('::App.DeveloperKit.Component.DateNotAvailable')}
-                        </span>
-                      </div>
-                    </div>
                   </div>
+
+                  {/* Sağ taraf */}
+                  {component.lastModificationTime && (
+                    <div className="flex items-center gap-1 text-xs text-slate-500 ml-4 whitespace-nowrap">
+                      <FaCalendarAlt className="w-3 h-3" />
+                      <span>
+                        {new Date(component.lastModificationTime).toLocaleDateString() ?? ''}
+                      </span>
+                    </div>
+                  )}
                 </div>
 
                 {/* Props Preview */}
@@ -221,7 +221,7 @@ const ComponentManager: React.FC = () => {
                 )}
 
                 {/* Actions */}
-                <div className="flex items-center justify-between pt-4 border-t border-slate-100">
+                <div className="flex items-center justify-between pt-2 border-t border-slate-100">
                   <div className="flex items-center gap-2">
                     <button
                       onClick={() => handleToggleActive(component.id, !component.isActive)}
@@ -281,7 +281,7 @@ const ComponentManager: React.FC = () => {
         </div>
       ) : (
         <div className="text-center py-12">
-          <div className="max-w-md mx-auto">
+          <div className="mx-auto">
             <div className="bg-slate-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
               <FaPlus className="w-8 h-8 text-slate-500" />
             </div>
diff --git a/ui/src/components/developerKit/Dashboard.tsx b/ui/src/components/developerKit/Dashboard.tsx
index 27080199..1e979fdd 100644
--- a/ui/src/components/developerKit/Dashboard.tsx
+++ b/ui/src/components/developerKit/Dashboard.tsx
@@ -158,7 +158,7 @@ const Dashboard: React.FC = () => {
   ]
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-4">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
@@ -198,16 +198,16 @@ const Dashboard: React.FC = () => {
       </div>
 
       {/* Stats Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
         {stats.map((stat) => {
           const Icon = stat.icon
           return (
             <Link
               key={stat.name}
               to={stat.href}
-              className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 hover:shadow-md transition-all duration-200 group"
+              className="bg-white rounded-xl shadow-sm border border-slate-200 p-4 hover:shadow-md transition-all duration-200 group"
             >
-              <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center justify-between">
                 <div
                   className={`${stat.bgColor} ${stat.color} p-3 rounded-lg group-hover:scale-110 transition-transform`}
                 >
@@ -228,20 +228,20 @@ const Dashboard: React.FC = () => {
       </div>
 
       {/* Development Flow */}
-      <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-8">
-        <div className="flex items-center gap-2 mb-6">
+      <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
+        <div className="flex items-center gap-2 mb-4">
           <FaCog className="w-6 h-6 text-blue-600" />
           <h2 className="text-xl font-semibold text-slate-900">
             {translate('::App.DeveloperKit.Dashboard.Flow.Title')}
           </h2>
         </div>
-        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-8">
           {developmentFlow.map((flow, index) => {
             const Icon = flow.icon
             return (
               <Link key={flow.step} to={flow.href} className="group relative">
                 <div
-                  className={`${flow.color} text-white p-6 rounded-lg transition-all duration-200 transform group-hover:scale-105`}
+                  className={`${flow.color} text-white p-4 rounded-lg transition-all duration-200 transform group-hover:scale-105`}
                 >
                   <div className="flex items-center justify-between mb-4">
                     <div className="bg-white bg-opacity-20 rounded-lg p-2">
@@ -252,7 +252,7 @@ const Dashboard: React.FC = () => {
                     </div>
                   </div>
                   <h3 className="font-semibold text-lg mb-2 text-white">{flow.title}</h3>
-                  <p className="text-sm opacity-90">{flow.description}</p>
+                  <p className="text-xs opacity-90">{flow.description}</p>
 
                   {flow.status === 'action-needed' && (
                     <div className="absolute -top-2 -right-2">
@@ -274,9 +274,9 @@ const Dashboard: React.FC = () => {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
         {/* System Health */}
-        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
+        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
           <div className="flex items-center gap-2 mb-4">
             <FaCog className="w-5 h-5 text-green-500" />
             <h3 className="text-lg font-semibold text-slate-900">
diff --git a/ui/src/components/developerKit/MigrationManager.tsx b/ui/src/components/developerKit/MigrationManager.tsx
index 0f498acf..7ac0ca8e 100644
--- a/ui/src/components/developerKit/MigrationManager.tsx
+++ b/ui/src/components/developerKit/MigrationManager.tsx
@@ -182,7 +182,7 @@ const MigrationManager: React.FC = () => {
       </div>
 
       {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
         <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
           <div className="flex items-center justify-between">
             <div>
@@ -196,7 +196,7 @@ const MigrationManager: React.FC = () => {
             </div>
           </div>
         </div>
-        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
+        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
           <div className="flex items-center justify-between">
             <div>
               <p className="text-sm font-medium text-slate-600">
@@ -209,7 +209,7 @@ const MigrationManager: React.FC = () => {
             </div>
           </div>
         </div>
-        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
+        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
           <div className="flex items-center justify-between">
             <div>
               <p className="text-sm font-medium text-slate-600">
@@ -239,19 +239,19 @@ const MigrationManager: React.FC = () => {
 
       {/* Entities Needing Migration */}
       {entitiesNeedingMigration.length > 0 && (
-        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mb-6">
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
           <div className="flex items-start gap-4">
             <div className="bg-yellow-100 rounded-lg p-2">
               <FaBolt className="w-6 h-6 text-yellow-600" />
             </div>
             <div className="flex-1">
-              <h3 className="text-lg font-semibold text-slate-900 mb-2">
+              <h3 className="text-lg font-semibold text-slate-900">
                 {translate('::App.DeveloperKit.Migration.EntitiesRequireMigration')}
               </h3>
-              <p className="text-slate-700 mb-4">
+              <p className="text-slate-700 mb-2">
                 {translate('::App.DeveloperKit.Migration.EntitiesRequireMigrationDescription')}
               </p>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-3">
                 {entitiesNeedingMigration.map((entity) => (
                   <div key={entity.id} className="bg-white border border-yellow-300 rounded-lg p-4">
                     <div className="flex items-center justify-between">
@@ -280,41 +280,39 @@ const MigrationManager: React.FC = () => {
       )}
 
       {/* Filters */}
-      <div className="bg-white rounded-lg border border-slate-200 p-6 mb-6 shadow-sm">
-        <div className="flex flex-col lg:flex-row gap-4">
-          <div className="flex-1 relative">
-            <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
-            <input
-              type="text"
-              placeholder={translate('::App.DeveloperKit.Migration.SearchPlaceholder')}
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-            />
-          </div>
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-2">
-              <FaFilter className="w-5 h-5 text-slate-500" />
-              <select
-                value={filterStatus}
-                onChange={(e) =>
-                  setFilterStatus(e.target.value as 'all' | 'pending' | 'applied' | 'failed')
-                }
-                className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-              >
-                <option value="all">{translate('::App.DeveloperKit.Migration.AllStatus')}</option>
-                <option value="pending">Pending</option>
-                <option value="applied">Applied</option>
-                <option value="failed">Failed</option>
-              </select>
-            </div>
+      <div className="flex flex-col lg:flex-row gap-4">
+        <div className="flex-1 relative">
+          <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
+          <input
+            type="text"
+            placeholder={translate('::App.DeveloperKit.Migration.SearchPlaceholder')}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+          />
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <FaFilter className="w-5 h-5 text-slate-500" />
+            <select
+              value={filterStatus}
+              onChange={(e) =>
+                setFilterStatus(e.target.value as 'all' | 'pending' | 'applied' | 'failed')
+              }
+              className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+            >
+              <option value="all">{translate('::App.DeveloperKit.Migration.AllStatus')}</option>
+              <option value="pending">Pending</option>
+              <option value="applied">Applied</option>
+              <option value="failed">Failed</option>
+            </select>
           </div>
         </div>
       </div>
 
       {/* Migrations List */}
       {filteredMigrations.length > 0 ? (
-        <div className="space-y-4">
+        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
           {filteredMigrations.map((migration) => {
             const StatusIcon = getStatusIcon(migration.status)
             return (
@@ -324,25 +322,33 @@ const MigrationManager: React.FC = () => {
               >
                 <div className="p-6">
                   <div className="flex items-start justify-between mb-4">
-                    <div className="flex-1">
-                      <div className="flex items-center gap-3 mb-2">
-                        <div className="bg-blue-100 text-blue-600 p-2 rounded-lg">
-                          <FaDatabase className="w-5 h-5" />
-                        </div>
-                        <div>
-                          <h3 className="text-lg font-semibold text-slate-900">
-                            {migration.fileName || `Migration for ${migration.entityName}`}
-                          </h3>
-                          <p className="text-sm text-slate-600">Entity: {migration.entityName}</p>
-                        </div>
-                        <span
-                          className={`px-3 py-1 text-sm font-medium rounded-full border ${getStatusColor(migration.status)}`}
-                        >
-                          <StatusIcon className="w-4 h-4 inline mr-1" />
-                          {migration.status.charAt(0).toUpperCase() + migration.status.slice(1)}
-                        </span>
+                    {/* Sol taraf */}
+                    <div className="flex items-center gap-3">
+                      <div className="bg-blue-100 text-blue-600 p-2 rounded-lg">
+                        <FaDatabase className="w-5 h-5" />
                       </div>
-                      <div className="flex items-center gap-4 text-xs text-slate-500">
+                      <div>
+                        <h3 className="text-lg font-semibold text-slate-900">
+                          {migration.fileName || `Migration for ${migration.entityName}`}
+                        </h3>
+                        <p className="text-sm text-slate-600">Entity: {migration.entityName}</p>
+                      </div>
+                    </div>
+
+                    {/* Sağ taraf */}
+                    <div className="flex flex-col items-end gap-2 text-right">
+                      {/* Status etiketi */}
+                      <span
+                        className={`px-3 py-1 text-sm font-medium rounded-full border ${getStatusColor(
+                          migration.status,
+                        )}`}
+                      >
+                        <StatusIcon className="w-4 h-4 inline mr-1" />
+                        {migration.status.charAt(0).toUpperCase() + migration.status.slice(1)}
+                      </span>
+
+                      {/* Tarihler */}
+                      <div className="flex flex-col items-end text-xs text-slate-500">
                         <div className="flex items-center gap-1">
                           <FaCalendarAlt className="w-3 h-3" />
                           <span>