From e8451627bda8cad063eb2b085a00f1d62fc157a3 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 11:30:04 +0300
Subject: [PATCH] Developer Kit Custom Entity

---
 .../DeveloperKit/CustomEntityDto.cs           |   2 +
 .../DeveloperKit/CustomEntityAppService.cs    |  30 +-
 .../Seeds/LanguagesData.json                  |  12 +-
 .../Seeds/ListFormSeeder.cs                   |   2 +-
 .../Tenant/Administration/CustomEntity.cs     |   1 +
 ....cs => 20251031075637_Initial.Designer.cs} |   5 +-
 ...4_Initial.cs => 20251031075637_Initial.cs} |   1 +
 .../PlatformDbContextModelSnapshot.cs         |   3 +
 .../developerKit/ComponentEditor.tsx          | 357 +++++-----
 .../components/developerKit/EntityEditor.tsx  | 642 +++++++++---------
 .../components/developerKit/EntityManager.tsx | 126 ++--
 ui/src/proxy/developerKit/models.ts           |   2 +
 12 files changed, 588 insertions(+), 595 deletions(-)
 rename api/src/Kurs.Platform.EntityFrameworkCore/Migrations/{20251030134034_Initial.Designer.cs => 20251031075637_Initial.Designer.cs} (99%)
 rename api/src/Kurs.Platform.EntityFrameworkCore/Migrations/{20251030134034_Initial.cs => 20251031075637_Initial.cs} (99%)

diff --git a/api/src/Kurs.Platform.Application.Contracts/DeveloperKit/CustomEntityDto.cs b/api/src/Kurs.Platform.Application.Contracts/DeveloperKit/CustomEntityDto.cs
index f1e5597e..586a08ac 100644
--- a/api/src/Kurs.Platform.Application.Contracts/DeveloperKit/CustomEntityDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/DeveloperKit/CustomEntityDto.cs
@@ -43,6 +43,7 @@ public class EntityFieldDto : FullAuditedEntityDto<Guid>
     public bool IsUnique { get; set; }
     public string? DefaultValue { get; set; }
     public string? Description { get; set; }
+    public int DisplayOrder { get; set; } = 0;
 }
 
 public class CreateUpdateCustomEntityFieldDto
@@ -56,4 +57,5 @@ public class CreateUpdateCustomEntityFieldDto
     public bool IsUnique { get; set; }
     public string? DefaultValue { get; set; }
     public string? Description { get; set; }
+    public int DisplayOrder { get; set; } = 0;
 }
diff --git a/api/src/Kurs.Platform.Application/DeveloperKit/CustomEntityAppService.cs b/api/src/Kurs.Platform.Application/DeveloperKit/CustomEntityAppService.cs
index 8b762964..1149adb6 100644
--- a/api/src/Kurs.Platform.Application/DeveloperKit/CustomEntityAppService.cs
+++ b/api/src/Kurs.Platform.Application/DeveloperKit/CustomEntityAppService.cs
@@ -35,12 +35,13 @@ public class CustomEntityAppService : CrudAppService<
         _repository = repository;
         _migrationRepository = migrationRepository;
         _endpointRepository = endpointRepository;
+        _fieldRepository = fieldRepository;
     }
 
     public override async Task<PagedResultDto<CustomEntityDto>> GetListAsync(PagedAndSortedResultRequestDto input)
     {
         var query = await _repository.GetQueryableAsync();
-        var fullQuery = query.Include(x => x.Fields);
+        var fullQuery = query.Include(x => x.Fields.OrderBy(f => f.DisplayOrder));
 
         var totalCount = await fullQuery.CountAsync();
 
@@ -59,7 +60,7 @@ public class CustomEntityAppService : CrudAppService<
     {
         var query = await _repository.GetQueryableAsync();
         var entity = await query
-            .Include(x => x.Fields)
+            .Include(x => x.Fields.OrderBy(f => f.DisplayOrder))
             .FirstOrDefaultAsync(x => x.Id == id);
 
         if (entity == null)
@@ -72,7 +73,7 @@ public class CustomEntityAppService : CrudAppService<
     {
         var query = await _repository.GetQueryableAsync();
         var entities = await query
-            .Include(x => x.Fields)
+            .Include(x => x.Fields.OrderBy(f => f.DisplayOrder))
             .Where(x => x.IsActive)
             .ToListAsync();
 
@@ -83,7 +84,7 @@ public class CustomEntityAppService : CrudAppService<
     {
         var query = await _repository.GetQueryableAsync();
         var entity = await query
-            .Include(x => x.Fields)
+            .Include(x => x.Fields.OrderBy(f => f.DisplayOrder))
             .FirstOrDefaultAsync(x => x.Id == id);
 
         if (entity == null)
@@ -115,13 +116,14 @@ public class CustomEntityAppService : CrudAppService<
 
         var updatedFields = new List<CustomEntityField>();
 
-        foreach (var dtoField in input.Fields)
+        for (int i = 0; i < input.Fields.Count; i++)
         {
+            var dtoField = input.Fields[i];
             CustomEntityField? existingField = null;
 
             if (dtoField.Id.HasValue)
             {
-                existingField = entity.Fields.FirstOrDefault(f => f.Id == dtoField.Id.Value);
+                existingField = entity.Fields?.FirstOrDefault(f => f.Id == dtoField.Id.Value);
             }
 
             if (existingField != null)
@@ -133,6 +135,7 @@ public class CustomEntityAppService : CrudAppService<
                 existingField.IsUnique = dtoField.IsUnique;
                 existingField.DefaultValue = dtoField.DefaultValue;
                 existingField.Description = dtoField.Description;
+                existingField.DisplayOrder = dtoField.DisplayOrder;
 
                 updatedFields.Add(existingField);
             }
@@ -147,7 +150,8 @@ public class CustomEntityAppService : CrudAppService<
                     MaxLength = dtoField.MaxLength,
                     IsUnique = dtoField.IsUnique,
                     DefaultValue = dtoField.DefaultValue,
-                    Description = dtoField.Description
+                    Description = dtoField.Description,
+                    DisplayOrder = dtoField.DisplayOrder
                 };
 
                 await _fieldRepository.InsertAsync(newField);
@@ -156,9 +160,9 @@ public class CustomEntityAppService : CrudAppService<
         }
 
         // Silinecek alanlar
-        var toRemove = entity.Fields
+        var toRemove = entity.Fields?
             .Where(existing => updatedFields.All(f => f.Id != existing.Id))
-            .ToList();
+            .ToList() ?? [];
 
         if (toRemove.Any())
         {
@@ -185,9 +189,10 @@ public class CustomEntityAppService : CrudAppService<
             MigrationStatus = "pending"
         };
 
-        // Fields ekle
-        foreach (var fieldDto in input.Fields)
+        // Fields ekle - sıralama ile
+        for (int i = 0; i < input.Fields.Count; i++)
         {
+            var fieldDto = input.Fields[i];
             var field = new CustomEntityField
             {
                 EntityId = entity.Id,
@@ -197,7 +202,8 @@ public class CustomEntityAppService : CrudAppService<
                 MaxLength = fieldDto.MaxLength,
                 IsUnique = fieldDto.IsUnique,
                 DefaultValue = fieldDto.DefaultValue,
-                Description = fieldDto.Description
+                Description = fieldDto.Description,
+                DisplayOrder = fieldDto.DisplayOrder
             };
             entity.Fields.Add(field);
         }
diff --git a/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
index 5237cbf0..6a941305 100644
--- a/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -10168,7 +10168,7 @@
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.Entity.EndpointStatus",
-            "en": "Endpoint Status:",
+            "en": "Crud Endpoint Status:",
             "tr": "Uç Nokta Durumu:"
         },
         {
@@ -10681,17 +10681,11 @@
             "en": "Active",
             "tr": "Aktif"
         },
-        {
-            "resourceName": "Platform",
-            "key": "App.DeveloperKit.ComponentEditor.Active",
-            "en": "Active",
-            "tr": "Aktif"
-        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.ComponentEditor.Save",
-            "en": "Save Component",
-            "tr": "Bileşeni Kaydet"
+            "en": "Save",
+            "tr": "Kaydet"
         },
         {
             "resourceName": "Platform",
diff --git a/api/src/Kurs.Platform.DbMigrator/Seeds/ListFormSeeder.cs b/api/src/Kurs.Platform.DbMigrator/Seeds/ListFormSeeder.cs
index 179ee4c0..8ad476f0 100644
--- a/api/src/Kurs.Platform.DbMigrator/Seeds/ListFormSeeder.cs
+++ b/api/src/Kurs.Platform.DbMigrator/Seeds/ListFormSeeder.cs
@@ -44042,7 +44042,7 @@ public class ListFormSeeder : IDataSeedContributor, ITransientDependency
                         R = AppCodes.SupplyChain.MaterialGroup,
                         U = AppCodes.SupplyChain.MaterialGroup + ".Update",
                         E = true,
-                        I = true,
+                        I = false,
                         Deny = false
                     }),
                     PivotSettingsJson = JsonSerializer.Serialize(new ListFormFieldPivotSettingsDto
diff --git a/api/src/Kurs.Platform.Domain/Entities/Tenant/Administration/CustomEntity.cs b/api/src/Kurs.Platform.Domain/Entities/Tenant/Administration/CustomEntity.cs
index c52d32ff..2f2fd40a 100644
--- a/api/src/Kurs.Platform.Domain/Entities/Tenant/Administration/CustomEntity.cs
+++ b/api/src/Kurs.Platform.Domain/Entities/Tenant/Administration/CustomEntity.cs
@@ -38,6 +38,7 @@ public class CustomEntityField : FullAuditedEntity<Guid>
     public bool IsUnique { get; set; }
     public string? DefaultValue { get; set; }
     public string? Description { get; set; }
+    public int DisplayOrder { get; set; } = 0;
 
     public virtual CustomEntity Entity { get; set; } = null!;
 
diff --git a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251030134034_Initial.Designer.cs b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251031075637_Initial.Designer.cs
similarity index 99%
rename from api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251030134034_Initial.Designer.cs
rename to api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251031075637_Initial.Designer.cs
index 52409666..7619f7ea 100644
--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251030134034_Initial.Designer.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251031075637_Initial.Designer.cs
@@ -13,7 +13,7 @@ using Volo.Abp.EntityFrameworkCore;
 namespace Kurs.Platform.Migrations
 {
     [DbContext(typeof(PlatformDbContext))]
-    [Migration("20251030134034_Initial")]
+    [Migration("20251031075637_Initial")]
     partial class Initial
     {
         /// <inheritdoc />
@@ -3001,6 +3001,9 @@ namespace Kurs.Platform.Migrations
                         .HasMaxLength(500)
                         .HasColumnType("nvarchar(500)");
 
+                    b.Property<int>("DisplayOrder")
+                        .HasColumnType("int");
+
                     b.Property<Guid>("EntityId")
                         .HasColumnType("uniqueidentifier");
 
diff --git a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251030134034_Initial.cs b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251031075637_Initial.cs
similarity index 99%
rename from api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251030134034_Initial.cs
rename to api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251031075637_Initial.cs
index 5a190f0d..90966b70 100644
--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251030134034_Initial.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251031075637_Initial.cs
@@ -3459,6 +3459,7 @@ namespace Kurs.Platform.Migrations
                     IsUnique = table.Column<bool>(type: "bit", nullable: false),
                     DefaultValue = table.Column<string>(type: "nvarchar(256)", maxLength: 256, nullable: true),
                     Description = table.Column<string>(type: "nvarchar(500)", maxLength: 500, nullable: true),
+                    DisplayOrder = table.Column<int>(type: "int", nullable: false),
                     CreationTime = table.Column<DateTime>(type: "datetime2", nullable: false),
                     CreatorId = table.Column<Guid>(type: "uniqueidentifier", nullable: true),
                     LastModificationTime = table.Column<DateTime>(type: "datetime2", nullable: true),
diff --git a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
index c7cc445d..a547aab1 100644
--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
@@ -2998,6 +2998,9 @@ namespace Kurs.Platform.Migrations
                         .HasMaxLength(500)
                         .HasColumnType("nvarchar(500)");
 
+                    b.Property<int>("DisplayOrder")
+                        .HasColumnType("int");
+
                     b.Property<Guid>("EntityId")
                         .HasColumnType("uniqueidentifier");
 
diff --git a/ui/src/components/developerKit/ComponentEditor.tsx b/ui/src/components/developerKit/ComponentEditor.tsx
index 9fa365cf..59714746 100644
--- a/ui/src/components/developerKit/ComponentEditor.tsx
+++ b/ui/src/components/developerKit/ComponentEditor.tsx
@@ -17,7 +17,7 @@ import { ROUTES_ENUM } from '@/routes/route.constant'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Formik, Form, Field, FieldProps } from 'formik'
 import * as Yup from 'yup'
-import { FormItem } from '@/components/ui'
+import { Checkbox, FormContainer, FormItem, Input } from '@/components/ui'
 
 // Error tipini tanımla
 interface ValidationError {
@@ -180,207 +180,188 @@ const ComponentEditor: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
-      <div className="mx-auto">
-        <Formik
-          enableReinitialize
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={handleSubmit}
-        >
-          {({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => (
-            <>
-              {/* Enhanced Header */}
-              <div className="bg-white shadow-lg border-b border-slate-200 sticky top-0 z-10">
-                <div className="px-4 py-3">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-4">
-                      <button
-                        type="button"
-                        onClick={() => navigate(ROUTES_ENUM.protected.saas.developerKit.components)}
-                        className="flex items-center gap-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 rounded-lg transition-all duration-200"
-                      >
-                        <FaArrowLeft className="w-4 h-4" />
-                        {translate('::App.DeveloperKit.ComponentEditor.Back')}
-                      </button>
-                      <div className="h-6 w-px bg-slate-300"></div>
-                      <div className="flex items-center gap-3">
-                        <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-2 rounded-lg">
-                          <FaCode className="w-5 h-5 text-white" />
-                        </div>
-                        <div>
-                          <h1 className="text-xl font-bold text-slate-900">
-                            {isEditing
-                              ? `${translate('::App.DeveloperKit.ComponentEditor.Title.Edit')} - ${values.name || initialValues.name || 'Component'}`
-                              : translate('::App.DeveloperKit.ComponentEditor.Title.Create')}
-                          </h1>
-                          <p className="text-sm text-slate-600">
-                            {isEditing
-                              ? 'Modify your React component'
-                              : 'Create a new React component'}
-                          </p>
-                        </div>
-                      </div>
+    <Formik
+      enableReinitialize
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={handleSubmit}
+    >
+      {({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => (
+        <>
+          {/* Enhanced Header */}
+          <div className="bg-white shadow-lg border-b border-slate-200 sticky top-0 z-10">
+            <div className="px-4 py-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <button
+                    type="button"
+                    onClick={() => navigate(ROUTES_ENUM.protected.saas.developerKit.components)}
+                    className="flex items-center gap-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 rounded-lg transition-all duration-200"
+                  >
+                    <FaArrowLeft className="w-4 h-4" />
+                    {translate('::App.DeveloperKit.ComponentEditor.Back')}
+                  </button>
+                  <div className="h-6 w-px bg-slate-300"></div>
+                  <div className="flex items-center gap-3">
+                    <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-2 rounded-lg">
+                      <FaCode className="w-5 h-5 text-white" />
                     </div>
-
-                    {/* Save Button in Header */}
-                    <div className="flex items-center gap-3">
-                      <button
-                        type="button"
-                        onClick={submitForm}
-                        disabled={isSubmitting || !values.name.trim() || !isValid}
-                        className="flex items-center gap-2 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold px-4 py-2 rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
-                      >
-                        <FaRegSave className="w-4 h-4" />
-                        {isSubmitting
-                          ? translate('::App.DeveloperKit.ComponentEditor.Saving')
-                          : translate('::App.DeveloperKit.ComponentEditor.Save')}
-                      </button>
+                    <div>
+                      <h1 className="text-xl font-bold text-slate-900">
+                        {isEditing
+                          ? `${translate('::App.DeveloperKit.ComponentEditor.Title.Edit')} - ${values.name || initialValues.name || 'Component'}`
+                          : translate('::App.DeveloperKit.ComponentEditor.Title.Create')}
+                      </h1>
+                      <p className="text-sm text-slate-600">
+                        {isEditing ? 'Modify your React component' : 'Create a new React component'}
+                      </p>
                     </div>
                   </div>
                 </div>
+
+                {/* Save Button in Header */}
+                <div className="flex items-center gap-3">
+                  <button
+                    type="button"
+                    onClick={submitForm}
+                    disabled={isSubmitting || !values.name.trim() || !isValid}
+                    className="flex items-center gap-1 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold px-2 py-1.5 rounded shadow transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+                  >
+                    <FaRegSave className="w-4 h-4" />
+                    {isSubmitting
+                      ? translate('::App.DeveloperKit.ComponentEditor.Saving')
+                      : translate('::App.DeveloperKit.ComponentEditor.Save')}
+                  </button>
+                </div>
               </div>
+            </div>
+          </div>
 
-              <Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-2">
-                {/* Left Side - Component Settings */}
-                <div className="space-y-4 col-span-1">
-                  <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
-                    <div className="flex items-center gap-2 mb-4">
-                      <div className="bg-blue-100 p-1.5 rounded-lg">
-                        <FaCog className="w-4 h-4 text-blue-600" />
-                      </div>
-                      <h2 className="text-base font-semibold text-slate-900">Component Settings</h2>
-                    </div>
-
-                    <div className="space-y-3">
-                      <FormItem
-                        label={translate('::App.DeveloperKit.ComponentEditor.ComponentName')}
-                        invalid={!!(errors.name && touched.name)}
-                        errorMessage={errors.name as string}
-                      >
-                        <Field
-                          name="name"
-                          type="text"
-                          placeholder="e.g., Button, Card, Modal"
-                          className="w-full px-2 py-1.5 border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 text-sm bg-slate-50 focus:bg-white"
-                        />
-                      </FormItem>
-
-                      <FormItem
-                        label={translate('::App.DeveloperKit.ComponentEditor.Description')}
-                        invalid={!!(errors.description && touched.description)}
-                        errorMessage={errors.description as string}
-                      >
-                        <Field
-                          name="description"
-                          type="text"
-                          placeholder="Brief description of the component"
-                          className="w-full px-2 py-1.5 border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 text-sm bg-slate-50 focus:bg-white"
-                        />
-                      </FormItem>
-
-                      <FormItem
-                        label={translate('::App.DeveloperKit.ComponentEditor.Dependencies')}
-                        invalid={!!(errors.dependencies && touched.dependencies)}
-                        errorMessage={errors.dependencies as string}
-                      >
-                        <Field name="dependencies">
-                          {({ field }: FieldProps) => (
-                            <input
-                              type="text"
-                              value={(values.dependencies || []).join(', ')}
-                              onChange={(e) =>
-                                setFieldValue(
-                                  'dependencies',
-                                  e.target.value
-                                    .split(',')
-                                    .map((s) => s.trim())
-                                    .filter(Boolean),
-                                )
-                              }
-                              className="w-full px-2 py-1.5 border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 text-sm bg-slate-50 focus:bg-white"
-                              placeholder="MyComponent, AnotherComponent, etc."
-                            />
-                          )}
-                        </Field>
-                      </FormItem>
-
-                      <FormItem>
-                        <div className="flex items-center p-2 bg-slate-50 rounded border border-slate-200">
-                          <Field
-                            name="isActive"
-                            type="checkbox"
-                            className="rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5"
-                          />
-                          <label className="ml-2 text-xs font-medium text-slate-700">
-                            {translate('::App.DeveloperKit.ComponentEditor.Active')}
-                          </label>
-                        </div>
-                      </FormItem>
-                    </div>
+          <Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-2">
+            {/* Left Side - Component Settings */}
+            <div className="space-y-4 col-span-1">
+              <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
+                <div className="flex items-center gap-2 mb-4">
+                  <div className="bg-blue-100 p-1.5 rounded-lg">
+                    <FaCog className="w-4 h-4 text-blue-600" />
                   </div>
+                  <h2 className="text-base font-semibold text-slate-900">Component Settings</h2>
                 </div>
 
-                {/* Right Side - Preview and Validation */}
-                <div className="space-y-4 col-span-2">
-                  {/* Validation Errors */}
-                  {validationErrors.length > 0 && (
-                    <div className="bg-red-50 border border-red-200 rounded-lg p-3 shadow-sm">
-                      <div className="flex items-start gap-2">
-                        <div className="bg-red-100 rounded-full p-1.5">
-                          <FaExclamationCircle className="w-4 h-4 text-red-600" />
-                        </div>
-                        <div className="flex-1">
-                          <h3 className="text-base font-semibold text-red-800 mb-1">
-                            Validation Issues
-                          </h3>
-                          <p className="text-xs text-red-700 mb-3">
-                            {validationErrors.length} issue
-                            {validationErrors.length !== 1 ? 's' : ''} found in your code
-                          </p>
-                          <div className="space-y-1.5 max-h-32 overflow-y-auto">
-                            {validationErrors.slice(0, 5).map((error, index) => (
-                              <div
-                                key={index}
-                                className="bg-white p-2 rounded border border-red-100"
-                              >
-                                <div className="text-xs text-red-800">
-                                  <span className="font-medium bg-red-100 px-1.5 py-0.5 rounded text-xs">
-                                    Line {error.startLineNumber}
-                                  </span>
-                                  <span className="ml-2">{error.message}</span>
-                                </div>
-                              </div>
-                            ))}
-                            {validationErrors.length > 5 && (
-                              <div className="text-xs text-red-600 italic text-center py-1">
-                                ... and {validationErrors.length - 5} more issue
-                                {validationErrors.length - 5 !== 1 ? 's' : ''}
-                              </div>
-                            )}
+                <FormContainer size="sm">
+                  <FormItem
+                    label={translate('::App.DeveloperKit.ComponentEditor.ComponentName')}
+                    invalid={!!(errors.name && touched.name)}
+                    errorMessage={errors.name as string}
+                  >
+                    <Field
+                      name="name"
+                      type="text"
+                      component={Input}
+                      placeholder="e.g., Button, Card, Modal"
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::App.DeveloperKit.ComponentEditor.Description')}
+                    invalid={!!(errors.description && touched.description)}
+                    errorMessage={errors.description as string}
+                  >
+                    <Field
+                      name="description"
+                      type="text"
+                      component={Input}
+                      placeholder="Brief description of the component"
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::App.DeveloperKit.ComponentEditor.Dependencies')}
+                    invalid={!!(errors.dependencies && touched.dependencies)}
+                    errorMessage={errors.dependencies as string}
+                  >
+                    <Field name="dependencies">
+                      {({ field }: FieldProps) => (
+                        <Input
+                          type="text"
+                          value={(values.dependencies || []).join(', ')}
+                          onChange={(e) =>
+                            setFieldValue(
+                              'dependencies',
+                              e.target.value
+                                .split(',')
+                                .map((s) => s.trim())
+                                .filter(Boolean),
+                            )
+                          }
+                          placeholder="MyComponent, AnotherComponent, etc."
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem label={translate('::App.DeveloperKit.ComponentEditor.Active')}>
+                    <Field name="isActive" component={Checkbox} />
+                  </FormItem>
+                </FormContainer>
+              </div>
+            </div>
+
+            {/* Right Side - Preview and Validation */}
+            <div className="space-y-4 col-span-2">
+              {/* Validation Errors */}
+              {validationErrors.length > 0 && (
+                <div className="bg-red-50 border border-red-200 rounded-lg p-3 shadow-sm">
+                  <div className="flex items-start gap-2">
+                    <div className="bg-red-100 rounded-full p-1.5">
+                      <FaExclamationCircle className="w-4 h-4 text-red-600" />
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-base font-semibold text-red-800 mb-1">
+                        Validation Issues
+                      </h3>
+                      <p className="text-xs text-red-700 mb-3">
+                        {validationErrors.length} issue
+                        {validationErrors.length !== 1 ? 's' : ''} found in your code
+                      </p>
+                      <div className="space-y-1.5 max-h-32 overflow-y-auto">
+                        {validationErrors.slice(0, 5).map((error, index) => (
+                          <div key={index} className="bg-white p-2 rounded border border-red-100">
+                            <div className="text-xs text-red-800">
+                              <span className="font-medium bg-red-100 px-1.5 py-0.5 rounded text-xs">
+                                Line {error.startLineNumber}
+                              </span>
+                              <span className="ml-2">{error.message}</span>
+                            </div>
                           </div>
-                        </div>
+                        ))}
+                        {validationErrors.length > 5 && (
+                          <div className="text-xs text-red-600 italic text-center py-1">
+                            ... and {validationErrors.length - 5} more issue
+                            {validationErrors.length - 5 !== 1 ? 's' : ''}
+                          </div>
+                        )}
                       </div>
                     </div>
-                  )}
-
-                  {/* Component Preview */}
-                  <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
-                    <div className="flex items-center gap-2 mb-3">
-                      <div className="bg-purple-100 p-1.5 rounded-lg">
-                        <FaEye className="w-4 h-4 text-purple-600" />
-                      </div>
-                      <h2 className="text-base font-semibold text-slate-900">Preview</h2>
-                    </div>
-                      <ComponentPreview componentName={values.name} />
                   </div>
                 </div>
-              </Form>
-            </>
-          )}
-        </Formik>
-      </div>
-    </div>
+              )}
+
+              {/* Component Preview */}
+              <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
+                <div className="flex items-center gap-2 mb-3">
+                  <div className="bg-purple-100 p-1.5 rounded-lg">
+                    <FaEye className="w-4 h-4 text-purple-600" />
+                  </div>
+                  <h2 className="text-base font-semibold text-slate-900">Preview</h2>
+                </div>
+                <ComponentPreview componentName={values.name} />
+              </div>
+            </div>
+          </Form>
+        </>
+      )}
+    </Formik>
   )
 }
 
diff --git a/ui/src/components/developerKit/EntityEditor.tsx b/ui/src/components/developerKit/EntityEditor.tsx
index 87a29e3b..10428b1a 100644
--- a/ui/src/components/developerKit/EntityEditor.tsx
+++ b/ui/src/components/developerKit/EntityEditor.tsx
@@ -11,12 +11,12 @@ import {
   FaTable,
   FaColumns,
 } from 'react-icons/fa'
-import { CreateUpdateCustomEntityFieldDto, CustomEntityField } from '@/proxy/developerKit/models'
+import { CustomEntityField } from '@/proxy/developerKit/models'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Formik, Form, Field, FieldProps, FieldArray } from 'formik'
 import * as Yup from 'yup'
-import {  FormItem, Input, Select, Checkbox } from '@/components/ui'
+import { FormItem, Input, Select, Checkbox, FormContainer } from '@/components/ui'
 import { SelectBoxOption } from '@/shared/types'
 
 // Validation schema
@@ -33,8 +33,9 @@ const validationSchema = Yup.object({
         isRequired: Yup.boolean(),
         maxLength: Yup.number().nullable(),
         isUnique: Yup.boolean(),
-        defaultValue: Yup.string(),
-        description: Yup.string(),
+        defaultValue: Yup.string().notRequired(),
+        description: Yup.string().notRequired(),
+        displayOrder: Yup.number().required(),
       }),
     )
     .min(1, 'At least one field is required'),
@@ -67,6 +68,7 @@ const EntityEditor: React.FC = () => {
         isRequired: true,
         maxLength: 100,
         description: 'Entity name',
+        displayOrder: 1,
       },
     ] as CustomEntityField[],
     isActive: true,
@@ -83,12 +85,18 @@ const EntityEditor: React.FC = () => {
     if (isEditing && id) {
       const entity = getEntity(id)
       if (entity) {
+        // Ensure fields are sorted by displayOrder and normalized to sequential values
+        const sortedFields = (entity.fields || [])
+          .slice()
+          .sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0))
+          .map((f, idx) => ({ ...f, displayOrder: f.displayOrder ?? idx + 1 }))
+
         setInitialValues({
           name: entity.name,
           displayName: entity.displayName,
           tableName: entity.tableName,
           description: entity.description || '',
-          fields: entity.fields,
+          fields: sortedFields,
           isActive: entity.isActive,
           hasAuditFields: entity.hasAuditFields,
           hasSoftDelete: entity.hasSoftDelete,
@@ -100,7 +108,8 @@ const EntityEditor: React.FC = () => {
   const handleSubmit = async (values: typeof initialValues, { setSubmitting }: any) => {
     try {
       const sanitizedFields = values.fields.map((f) => {
-        const sanitized: CreateUpdateCustomEntityFieldDto = {
+        // send both `displayOrder` (frontend proxy) and `order` (backend DTO) to be safe
+        const sanitized: any = {
           ...(f.id && isEditing ? { id: f.id } : {}),
           name: f.name.trim(),
           type: f.type,
@@ -109,6 +118,8 @@ const EntityEditor: React.FC = () => {
           isUnique: f.isUnique || false,
           defaultValue: f.defaultValue,
           description: f.description,
+          displayOrder: f.displayOrder,
+          order: f.displayOrder,
         }
 
         return sanitized
@@ -150,171 +161,164 @@ const EntityEditor: React.FC = () => {
   ]
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
-      <div className="mx-auto">
-        <Formik
-          enableReinitialize
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={handleSubmit}
-        >
-          {({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => (
-            <>
-              {/* Enhanced Header */}
-              <div className="bg-white shadow border-b border-slate-200 sticky top-0 z-10">
-                <div className="px-3 py-2">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        onClick={() => navigate(ROUTES_ENUM.protected.saas.developerKit.entities)}
-                        className="flex items-center gap-1 text-slate-600 hover:text-blue-600 hover:bg-blue-50 px-2 py-1.5 rounded transition-all duration-200"
-                      >
-                        <FaArrowLeft className="w-3 h-3" />
-                        <span className="text-sm">{translate('::App.DeveloperKit.EntityEditor.Back')}</span>
-                      </button>
-                      <div className="h-4 w-px bg-slate-300"></div>
-                      <div className="flex items-center gap-2">
-                        <div className="bg-gradient-to-r from-green-500 to-blue-600 p-1 rounded">
-                          <FaDatabase className="w-3 h-3 text-white" />
-                        </div>
-                        <div>
-                          <h1 className="text-sm font-bold text-slate-900">
-                            {isEditing
-                              ? `${translate('::App.DeveloperKit.EntityEditor.Title.Edit')} - ${values.name || initialValues.name || 'Entity'}`
-                              : translate('::App.DeveloperKit.EntityEditor.Title.Create')}
-                          </h1>
-                        </div>
-                      </div>
+    <Formik
+      enableReinitialize
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={handleSubmit}
+    >
+      {({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => (
+        <>
+          {/* Enhanced Header */}
+          <div className="bg-white shadow border-b border-slate-200 sticky top-0 z-10">
+            <div className="px-4 py-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <button
+                    type="button"
+                    onClick={() => navigate(ROUTES_ENUM.protected.saas.developerKit.entities)}
+                    className="flex items-center gap-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 rounded-lg transition-all duration-200"
+                  >
+                    <FaArrowLeft className="w-4 h-4" />
+                    <span className="text-sm">
+                      {translate('::App.DeveloperKit.EntityEditor.Back')}
+                    </span>
+                  </button>
+                  <div className="h-6 w-px bg-slate-300"></div>
+                  <div className="flex items-center gap-3">
+                    <div className="bg-gradient-to-r from-green-500 to-blue-600 p-1 rounded">
+                      <FaDatabase className="w-5 h-5 text-white" />
                     </div>
-
-                    {/* Save Button in Header */}
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        onClick={submitForm}
-                        disabled={isSubmitting || !isValid}
-                        className="flex items-center gap-1 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold px-2 py-1.5 rounded shadow transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-                      >
-                        <FaSave className="w-3 h-3" />
-                        {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                      </button>
+                    <div>
+                      <h1 className="text-xl font-bold text-slate-900">
+                        {isEditing
+                          ? `${translate('::App.DeveloperKit.EntityEditor.Title.Edit')} - ${values.name || initialValues.name || 'Entity'}`
+                          : translate('::App.DeveloperKit.EntityEditor.Title.Create')}
+                      </h1>
+                      <p className="text-sm text-slate-600">
+                        {isEditing ? 'Modify your entity' : 'Create a new entity'}
+                      </p>
                     </div>
                   </div>
                 </div>
+
+                {/* Save Button in Header */}
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={submitForm}
+                    disabled={isSubmitting || !isValid}
+                    className="flex items-center gap-1 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold px-2 py-1.5 rounded shadow transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+                  >
+                    <FaSave className="w-3 h-3" />
+                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  </button>
+                </div>
               </div>
+            </div>
+          </div>
 
-              <Form className="space-y-2 pt-2">
-                {/* Basic Entity Information */}
-                <div className="bg-white rounded border border-slate-200 p-2">
-                  <div className="flex items-center gap-1.5 mb-2">
-                    <div className="bg-blue-100 p-1 rounded">
-                      <FaCog className="w-3 h-3 text-blue-600" />
-                    </div>
-                    <h2 className="text-sm font-semibold text-slate-900">Entity Settings</h2>
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-                    <FormItem
-                      label={translate('::App.DeveloperKit.EntityEditor.EntityName')}
-                      invalid={!!(errors.name && touched.name)}
-                      errorMessage={errors.name as string}
-                    >
-                      <Field name="name">
-                        {({ field }: FieldProps) => (
-                          <Input
-                            {...field}
-                            onBlur={(e) => {
-                              field.onBlur(e)
-                              if (!values.tableName) {
-                                setFieldValue('tableName', values.name + 's')
-                              }
-                              if (!values.displayName) {
-                                setFieldValue('displayName', values.name)
-                              }
-                            }}
-                            disabled={isMigrationApplied}
-                            placeholder="e.g., Product, User, Order"
-                            className="px-2 py-1.5 bg-slate-50 focus:bg-white transition-all duration-200 text-sm h-7"
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label={translate('::App.DeveloperKit.EntityEditor.DisplayName')}
-                      invalid={!!(errors.displayName && touched.displayName)}
-                      errorMessage={errors.displayName as string}
-                    >
-                      <Field
-                        name="displayName"
-                        component={Input}
-                        placeholder="e.g., Product, User, Order"
-                        className="px-2 py-1.5 bg-slate-50 focus:bg-white transition-all duration-200 text-sm h-7"
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label={translate('::App.DeveloperKit.EntityEditor.TableName')}
-                      invalid={!!(errors.tableName && touched.tableName)}
-                      errorMessage={errors.tableName as string}
-                    >
-                      <Field
-                        name="tableName"
-                        component={Input}
-                        disabled={isMigrationApplied}
-                        placeholder="e.g., Products, Users, Orders"
-                        className="px-2 py-1.5 bg-slate-50 focus:bg-white transition-all duration-200 disabled:bg-slate-100 disabled:text-slate-500 text-sm h-7"
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label={translate('::App.DeveloperKit.EntityEditor.Description')}
-                      invalid={!!(errors.description && touched.description)}
-                      errorMessage={errors.description as string}
-                    >
-                      <Field
-                        name="description"
-                        component={Input}
-                        placeholder="Brief description of this entity"
-                        className="px-2 py-1.5 bg-slate-50 focus:bg-white transition-all duration-200 text-sm h-7"
-                      />
-                    </FormItem>
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mt-2 pt-2 border-t border-slate-200">
-                    <div className="flex items-center p-1 bg-slate-50 rounded border border-slate-200">
-                      <Field name="isActive" component={Checkbox} className="w-3 h-3" />
-                      <label className="ml-1 text-sm font-medium text-slate-700">
-                        {translate('::App.DeveloperKit.EntityEditor.Active')}
-                      </label>
-                    </div>
-
-                    <div className="flex items-center p-1 bg-slate-50 rounded border border-slate-200">
-                      <Field name="hasAuditFields" component={Checkbox} className="w-3 h-3" />
-                      <label className="ml-1 text-sm font-medium text-slate-700">
-                        {translate('::App.DeveloperKit.EntityEditor.Audit')}
-                      </label>
-                    </div>
-
-                    <div className="flex items-center p-1 bg-slate-50 rounded border border-slate-200">
-                      <Field name="hasSoftDelete" component={Checkbox} className="w-3 h-3" />
-                      <label className="ml-1 text-sm font-medium text-slate-700">
-                        {translate('::App.DeveloperKit.EntityEditor.SoftDelete')}
-                      </label>
-                    </div>
+          <Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-2">
+            {/* Basic Entity Information */}
+            <div className="space-y-4 col-span-1">
+              <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
+                <div className="flex items-center gap-2 mb-4">
+                  <div className="bg-blue-100 p-1.5 rounded-lg">
+                    <FaCog className="w-4 h-4 text-blue-600" />
                   </div>
+                  <h2 className="text-sm font-semibold text-slate-900">Entity Settings</h2>
                 </div>
 
-                {/* Fields Section */}
-                <div className="bg-white rounded border border-slate-200 p-2">
+                <FormContainer size="sm">
+                  <FormItem
+                    label={translate('::App.DeveloperKit.EntityEditor.EntityName')}
+                    invalid={!!(errors.name && touched.name)}
+                    errorMessage={errors.name as string}
+                  >
+                    <Field name="name">
+                      {({ field }: FieldProps) => (
+                        <Input
+                          {...field}
+                          onBlur={(e) => {
+                            field.onBlur(e)
+                            if (!values.tableName) {
+                              setFieldValue('tableName', values.name + 's')
+                            }
+                            if (!values.displayName) {
+                              setFieldValue('displayName', values.name)
+                            }
+                          }}
+                          disabled={isMigrationApplied}
+                          placeholder="e.g., Product, User, Order"
+                          className="px-2 py-1.5 bg-slate-50 focus:bg-white transition-all duration-200 text-sm h-7"
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::App.DeveloperKit.EntityEditor.DisplayName')}
+                    invalid={!!(errors.displayName && touched.displayName)}
+                    errorMessage={errors.displayName as string}
+                  >
+                    <Field
+                      name="displayName"
+                      component={Input}
+                      placeholder="e.g., Product, User, Order"
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::App.DeveloperKit.EntityEditor.TableName')}
+                    invalid={!!(errors.tableName && touched.tableName)}
+                    errorMessage={errors.tableName as string}
+                  >
+                    <Field
+                      name="tableName"
+                      component={Input}
+                      disabled={isMigrationApplied}
+                      placeholder="e.g., Products, Users, Orders"
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::App.DeveloperKit.EntityEditor.Description')}
+                    invalid={!!(errors.description && touched.description)}
+                    errorMessage={errors.description as string}
+                  >
+                    <Field
+                      name="description"
+                      component={Input}
+                      placeholder="Brief description of this entity"
+                    />
+                  </FormItem>
+
+                  <FormItem label={translate('::App.DeveloperKit.ComponentEditor.Active')}>
+                    <Field name="isActive" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem label={translate('::App.DeveloperKit.EntityEditor.Audit')}>
+                    <Field name="hasAuditFields" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem label={translate('::App.DeveloperKit.EntityEditor.SoftDelete')}>
+                    <Field name="hasSoftDelete" component={Checkbox} />
+                  </FormItem>
+                </FormContainer>
+              </div>
+            </div>
+
+            {/* Fields Section */}
+            <div className="space-y-4 col-span-2">
+              <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
+                <FormContainer size="sm">
                   <FieldArray name="fields">
                     {({ push, remove }) => (
                       <>
                         <div className="flex items-center justify-between mb-2">
                           <div className="flex items-center gap-1">
-                            <div className="bg-green-100 p-1 rounded">
-                              <FaColumns className="w-3 h-3 text-green-600" />
+                            <div className="bg-green-100 p-1.5 rounded">
+                              <FaColumns className="w-4 h-4 text-green-600" />
                             </div>
                             <h2 className="text-sm font-semibold text-slate-900">
                               {translate('::App.DeveloperKit.EntityEditor.Fields')}
@@ -330,6 +334,8 @@ const EntityEditor: React.FC = () => {
                                 type: 'string',
                                 isRequired: false,
                                 description: '',
+                                // Assign next sequential displayOrder
+                                displayOrder: (values.fields?.length ?? 0) + 1,
                               })
                             }
                             className="flex items-center gap-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white px-2 py-1.5 rounded hover:from-blue-700 hover:to-blue-800 transition-all duration-200 text-sm"
@@ -339,197 +345,191 @@ const EntityEditor: React.FC = () => {
                           </button>
                         </div>
 
-                        <div className="space-y-2">
-                          {values.fields.map((field, index) => (
-                            <div
-                              key={field.id || `new-${index}`}
-                              className="bg-gradient-to-r from-slate-50 to-slate-100 border border-slate-200 rounded p-2 shadow-sm hover:shadow-md transition-all duration-200"
-                            >
-                              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 mb-2">
-                                <FormItem
-                                  label={`${translate('::App.DeveloperKit.EntityEditor.FieldName')} *`}
-                                  invalid={
-                                    !!(
-                                      errors.fields &&
-                                      (errors.fields as any)[index]?.name &&
-                                      touched.fields &&
-                                      (touched.fields as any)[index]?.name
-                                    )
-                                  }
-                                  errorMessage={(errors.fields as any)?.[index]?.name as string}
-                                >
-                                  <Field
-                                    name={`fields.${index}.name`}
-                                    component={Input}
-                                    placeholder="e.g., Name, Email, Age"
-                                    className="px-2 py-1.5 bg-white border-slate-300 focus:border-blue-500 focus:ring-blue-500 transition-all duration-200 text-sm h-6"
-                                  />
-                                </FormItem>
+                        {values.fields.map((field, index) => (
+                          <div key={field.id || `new-${index}`}>
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-2 mb-2">
+                              <FormItem label="Order *" className="col-span-1">
+                                <Field type="number" name={`fields.${index}.displayOrder`} component={Input} />
+                              </FormItem>
 
-                                <FormItem
-                                  label={`${translate('::App.DeveloperKit.EntityEditor.Type')} *`}
-                                  invalid={
-                                    !!(
-                                      errors.fields &&
-                                      (errors.fields as any)[index]?.type &&
-                                      touched.fields &&
-                                      (touched.fields as any)[index]?.type
-                                    )
-                                  }
-                                  errorMessage={(errors.fields as any)?.[index]?.type as string}
-                                >
-                                  <Field name={`fields.${index}.type`}>
-                                    {({ field, form }: FieldProps<SelectBoxOption>) => (
-                                      <Select
-                                        field={field}
-                                        form={form}
-                                        options={fieldTypes.map((type) => ({
-                                          value: type.value,
-                                          label: type.label,
-                                        }))}
-                                        value={fieldTypes
-                                          .map((type) => ({ value: type.value, label: type.label }))
-                                          .filter((option) => option.value === field.value)}
-                                        onChange={(option) =>
-                                          form.setFieldValue(field.name, option?.value)
-                                        }
-                                        className="bg-white border-slate-300 focus:border-blue-500 focus:ring-blue-500"
-                                      />
-                                    )}
-                                  </Field>
-                                </FormItem>
+                              <FormItem
+                                label={`${translate('::App.DeveloperKit.EntityEditor.FieldName')} *`}
+                                invalid={
+                                  !!(
+                                    errors.fields &&
+                                    (errors.fields as any)[index]?.name &&
+                                    touched.fields &&
+                                    (touched.fields as any)[index]?.name
+                                  )
+                                }
+                                errorMessage={(errors.fields as any)?.[index]?.name as string}
+                                className="col-span-2"
+                              >
+                                <Field
+                                  name={`fields.${index}.name`}
+                                  component={Input}
+                                  placeholder="e.g., Name, Email, Age"
+                                />
+                              </FormItem>
 
-                                {field.type === 'string' && (
-                                  <FormItem
-                                    label={translate('::App.DeveloperKit.EntityEditor.MaxLength')}
-                                    invalid={
-                                      !!(
-                                        errors.fields &&
-                                        (errors.fields as any)[index]?.maxLength &&
-                                        touched.fields &&
-                                        (touched.fields as any)[index]?.maxLength
-                                      )
-                                    }
-                                    errorMessage={
-                                      (errors.fields as any)?.[index]?.maxLength as string
-                                    }
-                                  >
-                                    <Field
-                                      name={`fields.${index}.maxLength`}
-                                      component={Input}
-                                      type="number"
-                                      placeholder="e.g., 100"
-                                      className="px-2 py-1.5 bg-white border-slate-300 focus:border-blue-500 focus:ring-blue-500 transition-all duration-200 text-sm h-6"
+                              <FormItem
+                                label={`${translate('::App.DeveloperKit.EntityEditor.Type')} *`}
+                                invalid={
+                                  !!(
+                                    errors.fields &&
+                                    (errors.fields as any)[index]?.type &&
+                                    touched.fields &&
+                                    (touched.fields as any)[index]?.type
+                                  )
+                                }
+                                errorMessage={(errors.fields as any)?.[index]?.type as string}
+                                className="col-span-1"
+                              >
+                                <Field name={`fields.${index}.type`}>
+                                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                                    <Select
+                                      field={field}
+                                      form={form}
+                                      options={fieldTypes.map((type) => ({
+                                        value: type.value,
+                                        label: type.label,
+                                      }))}
+                                      value={fieldTypes
+                                        .map((type) => ({ value: type.value, label: type.label }))
+                                        .filter((option) => option.value === field.value)}
+                                      onChange={(option) =>
+                                        form.setFieldValue(field.name, option?.value)
+                                      }
                                     />
-                                  </FormItem>
-                                )}
+                                  )}
+                                </Field>
+                              </FormItem>
 
+                              <FormItem
+                                label={translate('::App.DeveloperKit.EntityEditor.DefaultValue')}
+                                invalid={
+                                  !!(
+                                    errors.fields &&
+                                    (errors.fields as any)[index]?.defaultValue &&
+                                    touched.fields &&
+                                    (touched.fields as any)[index]?.defaultValue
+                                  )
+                                }
+                                errorMessage={
+                                  (errors.fields as any)?.[index]?.defaultValue as string
+                                }
+                                className="col-span-2"
+                              >
+                                <Field
+                                  name={`fields.${index}.defaultValue`}
+                                  component={Input}
+                                  placeholder="Optional default value"
+                                />
+                              </FormItem>
+
+                              {field.type === 'string' && (
                                 <FormItem
-                                  label={translate('::App.DeveloperKit.EntityEditor.DefaultValue')}
+                                  label={translate('::App.DeveloperKit.EntityEditor.MaxLength')}
                                   invalid={
                                     !!(
                                       errors.fields &&
-                                      (errors.fields as any)[index]?.defaultValue &&
+                                      (errors.fields as any)[index]?.maxLength &&
                                       touched.fields &&
-                                      (touched.fields as any)[index]?.defaultValue
+                                      (touched.fields as any)[index]?.maxLength
                                     )
                                   }
                                   errorMessage={
-                                    (errors.fields as any)?.[index]?.defaultValue as string
+                                    (errors.fields as any)?.[index]?.maxLength as string
                                   }
                                 >
                                   <Field
-                                    name={`fields.${index}.defaultValue`}
+                                    name={`fields.${index}.maxLength`}
                                     component={Input}
-                                    placeholder="Optional default value"
-                                    className="px-2 py-1.5 bg-white border-slate-300 focus:border-blue-500 focus:ring-blue-500 transition-all duration-200 text-sm h-6"
+                                    type="number"
+                                    placeholder="e.g., 100"
                                   />
                                 </FormItem>
-                              </div>
+                              )}
 
-                              <div className="flex items-center justify-between pt-2 border-t border-slate-200">
-                                <div className="flex-1 mr-2">
-                                  <FormItem
-                                    label={translate('::App.DeveloperKit.EntityEditor.Description')}
-                                    invalid={
-                                      !!(
-                                        errors.fields &&
-                                        (errors.fields as any)[index]?.description &&
-                                        touched.fields &&
-                                        (touched.fields as any)[index]?.description
-                                      )
-                                    }
-                                    errorMessage={
-                                      (errors.fields as any)?.[index]?.description as string
-                                    }
-                                  >
-                                    <Field
-                                      name={`fields.${index}.description`}
-                                      component={Input}
-                                      placeholder="Field description"
-                                      className="px-2 py-1.5 bg-white border-slate-300 focus:border-blue-500 focus:ring-blue-500 transition-all duration-200 text-sm h-6"
-                                    />
-                                  </FormItem>
-                                </div>
+                              <FormItem
+                                label={translate('::App.DeveloperKit.EntityEditor.Description')}
+                                invalid={
+                                  !!(
+                                    errors.fields &&
+                                    (errors.fields as any)[index]?.description &&
+                                    touched.fields &&
+                                    (touched.fields as any)[index]?.description
+                                  )
+                                }
+                                errorMessage={
+                                  (errors.fields as any)?.[index]?.description as string
+                                }
+                                className={field.type === 'string' ? 'col-span-2' : 'col-span-3'}
+                              >
+                                <Field
+                                  name={`fields.${index}.description`}
+                                  component={Input}
+                                  placeholder="Field description"
+                                />
+                              </FormItem>
 
-                                <div className="flex items-center gap-2">
-                                  <div className="flex items-center p-1 bg-white rounded border border-slate-200">
-                                    <Field
-                                      name={`fields.${index}.isRequired`}
-                                      component={Checkbox}
-                                      className="w-3 h-3"
-                                    />
-                                    <label className="ml-1 text-sm font-medium text-slate-700">
-                                      {translate('::App.DeveloperKit.EntityEditor.Required')}
-                                    </label>
-                                  </div>
+                              <FormItem
+                                label={translate('::App.DeveloperKit.EntityEditor.Required')}
+                                className="items-center"
+                              >
+                                <Field name={`fields.${index}.isRequired`} component={Checkbox} />
+                              </FormItem>
 
-                                  <div className="flex items-center p-1 bg-white rounded border border-slate-200">
-                                    <Field
-                                      name={`fields.${index}.isUnique`}
-                                      component={Checkbox}
-                                      className="w-3 h-3"
-                                    />
-                                    <label className="ml-1 text-sm font-medium text-slate-700">
-                                      {translate('::App.DeveloperKit.EntityEditor.Unique')}
-                                    </label>
-                                  </div>
+                              <FormItem
+                                label={translate('::App.DeveloperKit.EntityEditor.Unique')}
+                                className="items-center"
+                              >
+                                <Field name={`fields.${index}.isUnique`} component={Checkbox} />
+                              </FormItem>
 
-                                  <button
-                                    type="button"
-                                    onClick={() => remove(index)}
-                                    className="p-1 text-red-600 hover:text-red-800 hover:bg-red-50 rounded transition-all duration-200 border border-red-200 hover:border-red-300"
-                                    title="Remove field"
-                                  >
-                                    <FaTrashAlt className="w-3 h-3" />
-                                  </button>
-                                </div>
-                              </div>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  // Remove the field and reindex displayOrder for remaining fields
+                                  remove(index)
+                                  const newFields = values.fields ? [...values.fields] : []
+                                  newFields.splice(index, 1)
+                                  newFields.forEach((f, i) => {
+                                    // ensure sequential ordering starting at 1
+                                    f.displayOrder = i + 1
+                                  })
+                                  setFieldValue('fields', newFields)
+                                }}
+                                className="p-3 text-red-600 hover:text-red-800 rounded transition-all duration-200"
+                                title="Remove field"
+                              >
+                                <FaTrashAlt className="w-5 h-5" />
+                              </button>
                             </div>
-                          ))}
+                          </div>
+                        ))}
 
-                          {values.fields.length === 0 && (
-                            <div className="text-center py-4 bg-slate-50 rounded border-2 border-dashed border-slate-300">
-                              <FaTable className="w-8 h-8 mx-auto mb-2 text-slate-400" />
-                              <h3 className="text-sm font-medium text-slate-600 mb-1">
-                                {translate('::App.DeveloperKit.EntityEditor.NoFields')}
-                              </h3>
-                              <p className="text-sm text-slate-500">
-                                {translate('::App.DeveloperKit.EntityEditor.NoFieldsDescription')}
-                              </p>
-                            </div>
-                          )}
-                        </div>
+                        {values.fields.length === 0 && (
+                          <div className="text-center py-4 bg-slate-50 rounded border-2 border-dashed border-slate-300">
+                            <FaTable className="w-8 h-8 mx-auto mb-2 text-slate-400" />
+                            <h3 className="text-sm font-medium text-slate-600 mb-1">
+                              {translate('::App.DeveloperKit.EntityEditor.NoFields')}
+                            </h3>
+                            <p className="text-sm text-slate-500">
+                              {translate('::App.DeveloperKit.EntityEditor.NoFieldsDescription')}
+                            </p>
+                          </div>
+                        )}
                       </>
                     )}
                   </FieldArray>
-                </div>
-              </Form>
-            </>
-          )}
-        </Formik>
-      </div>
-    </div>
+                </FormContainer>
+              </div>
+            </div>
+          </Form>
+        </>
+      )}
+    </Formik>
   )
 }
 
diff --git a/ui/src/components/developerKit/EntityManager.tsx b/ui/src/components/developerKit/EntityManager.tsx
index b5ae088b..93004bea 100644
--- a/ui/src/components/developerKit/EntityManager.tsx
+++ b/ui/src/components/developerKit/EntityManager.tsx
@@ -103,7 +103,7 @@ const EntityManager: 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-8">
         <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
           <div className="flex items-center justify-between">
             <div>
@@ -162,94 +162,94 @@ const EntityManager: 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.Entity.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-emerald-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={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-emerald-500 focus:border-transparent transition-colors"
-              >
-                <option value="all">{translate('::App.DeveloperKit.Entity.Filter.All')}</option>
-                <option value="active">
-                  {translate('::App.DeveloperKit.Entity.Filter.Active')}
-                </option>
-                <option value="inactive">
-                  {translate('::App.DeveloperKit.Entity.Filter.Inactive')}
-                </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.Entity.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-emerald-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={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-emerald-500 focus:border-transparent transition-colors"
+            >
+              <option value="all">{translate('::App.DeveloperKit.Entity.Filter.All')}</option>
+              <option value="active">{translate('::App.DeveloperKit.Entity.Filter.Active')}</option>
+              <option value="inactive">
+                {translate('::App.DeveloperKit.Entity.Filter.Inactive')}
+              </option>
+            </select>
           </div>
         </div>
       </div>
 
       {/* Entities List */}
       {filteredEntities.length > 0 ? (
-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
           {filteredEntities.map((entity) => {
             return (
               <div
                 key={entity.id}
                 className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 group"
               >
-                <div className="p-6">
+                <div className="p-5">
                   <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">
-                          <FaTable className="w-5 h-5" />
+                      <div className="flex items-center justify-between mb-2">
+                        {/* Sol taraf */}
+                        <div className="flex items-center gap-3">
+                          <div className="bg-blue-100 text-blue-600 p-2 rounded-lg">
+                            <FaTable className="w-5 h-5" />
+                          </div>
+                          <div>
+                            <h3 className="text-lg font-semibold text-slate-900">
+                              {entity.displayName}
+                            </h3>
+                            <p className="text-sm text-slate-500">
+                              {translate('::App.DeveloperKit.Entity.TableLabel')}:{' '}
+                              {entity.tableName}
+                            </p>
+                          </div>
                         </div>
-                        <div>
-                          <h3 className="text-lg font-semibold text-slate-900">
-                            {entity.displayName}
-                          </h3>
-                          <p className="text-sm text-slate-500">
-                            {translate('::App.DeveloperKit.Entity.TableLabel')}: {entity.tableName}
-                          </p>
+
+                        {/* Sağ taraf */}
+                        <div className="flex flex-col items-end text-sm text-slate-600 gap-1">
+                          <div className="flex items-center gap-1">
+                            <FaCalendarAlt className="w-3 h-3" />
+                            <span>
+                              {translate('::App.DeveloperKit.Entity.Updated')}:{' '}
+                              {entity.lastModificationTime
+                                ? new Date(entity.lastModificationTime).toLocaleDateString()
+                                : 'Never'}
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <FaDatabase className="w-3 h-3" />
+                            <span>
+                              {entity.fields.length} {translate('::App.DeveloperKit.Entity.Fields')}
+                            </span>
+                          </div>
                         </div>
                       </div>
+
                       {entity.description && (
                         <p className="text-slate-600 text-sm mb-3">{entity.description}</p>
                       )}
-                      <div className="flex items-center gap-4 text-xs text-slate-500 mb-3">
-                        <div className="flex items-center gap-1">
-                          <FaCalendarAlt className="w-3 h-3" />
-                          <span>
-                            {translate('::App.DeveloperKit.Entity.Updated')}:{' '}
-                            {entity.lastModificationTime
-                              ? new Date(entity.lastModificationTime).toLocaleDateString()
-                              : 'Never'}
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-1">
-                          <FaDatabase className="w-3 h-3" />
-                          <span>
-                            {entity.fields.length} {translate('::App.DeveloperKit.Entity.Fields')}
-                          </span>
-                        </div>
-                      </div>
                     </div>
                   </div>
 
                   {/* Entity Fields Preview */}
                   <div className="mb-4">
                     <div className="bg-slate-50 rounded-lg p-3">
-                      <h4 className="text-sm font-medium text-slate-700 mb-2">
-                        {translate('::App.DeveloperKit.Entity.FieldLabel')}
-                      </h4>
-                      <div className="grid grid-cols-2 gap-2 text-xs">
+                      <div className="grid grid-cols-3 gap-2 text-xs">
                         {entity.fields.slice(0, 4).map((field) => (
                           <div key={field.id} className="flex items-center gap-2">
                             <span
diff --git a/ui/src/proxy/developerKit/models.ts b/ui/src/proxy/developerKit/models.ts
index 03b589c9..677a564a 100644
--- a/ui/src/proxy/developerKit/models.ts
+++ b/ui/src/proxy/developerKit/models.ts
@@ -27,6 +27,7 @@ export interface CustomEntityField {
   description?: string;
   creationTime?: string;
   lastModificationTime?: string;
+  displayOrder: number;
 }
 
 export interface CreateUpdateCustomEntityFieldDto {
@@ -38,6 +39,7 @@ export interface CreateUpdateCustomEntityFieldDto {
   isUnique?: boolean;
   defaultValue?: string;
   description?: string;
+  displayOrder: number;
 }
 
 export interface CreateUpdateCustomEntityDto {