From 56b74b85a5f9d2004fb45bcdaf133658a2d9ffb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Sun, 9 Aug 2026 02:33:32 +0300
Subject: [PATCH] =?UTF-8?q?Claude=20g=C3=BCncellemesi=20FormTab=20g=C3=BCn?=
 =?UTF-8?q?cellemeri=20optimizasyon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../listForm/edit/ChartTabAnnotations.tsx     |  11 +-
 .../admin/listForm/edit/ChartTabAxis.tsx      |  12 +-
 .../admin/listForm/edit/ChartTabPanes.tsx     |  13 +-
 .../admin/listForm/edit/ChartTabSeries.tsx    |  11 +-
 .../edit/FormTabDatabaseDataSource.tsx        |   1 +
 .../listForm/edit/FormTabDatabaseDelete.tsx   |   1 +
 .../listForm/edit/FormTabDatabaseInsert.tsx   |   1 +
 .../listForm/edit/FormTabDatabaseSelect.tsx   |   1 +
 .../listForm/edit/FormTabDatabaseUpdate.tsx   |   1 +
 .../listForm/edit/FormTabPermissions.tsx      |  18 +-
 .../admin/listForm/edit/FormTabWorkflow.tsx   |   1 +
 .../edit/form-fields/FormFieldEdit.tsx        |  21 +-
 .../FormFieldTabConditionalFormatting.tsx     |  40 +--
 .../form-fields/FormFieldTabCustomization.tsx |  25 +-
 .../edit/form-fields/FormFieldTabDetails.tsx  |  61 ++---
 .../form-fields/FormFieldTabGroupSummary.tsx  | 188 -------------
 .../form-fields/FormFieldTabJoinOptions.tsx   |  47 +---
 .../edit/form-fields/FormFieldTabLookup.tsx   |  48 +---
 .../edit/form-fields/FormFieldTabOptions.tsx  |  19 +-
 .../form-fields/FormFieldTabPermissions.tsx   |  22 +-
 .../form-fields/FormFieldTabPivotSetting.tsx  | 121 ++------
 .../edit/form-fields/FormFieldTabSummary.tsx  | 119 ++++++++
 .../form-fields/FormFieldTabTotalSummary.tsx  | 188 -------------
 .../FormFieldTabValidationRules.tsx           |  43 +--
 .../listForm/edit/form-fields/FormFields.tsx  | 258 +++++-------------
 .../JsonRowOpDialogAxis.tsx                   |   5 +-
 .../JsonRowOpDialogSeries.tsx                 |   2 +-
 .../listForm/edit/shared/SelectField.tsx      |  54 ++++
 28 files changed, 393 insertions(+), 939 deletions(-)
 delete mode 100644 ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
 create mode 100644 ui/src/views/admin/listForm/edit/form-fields/FormFieldTabSummary.tsx
 delete mode 100644 ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
 create mode 100644 ui/src/views/admin/listForm/edit/shared/SelectField.tsx

diff --git a/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx b/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
index 6aac15b5..3097e96f 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
@@ -20,7 +20,7 @@ import Tr from '@/components/ui/Table/Tr'
 import { SelectBoxOption } from '@/types/shared'
 import { Field, FieldProps, Form, Formik } from 'formik'
 import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
-import { object, string } from 'yup'
+import { object } from 'yup'
 import { FormEditProps } from './FormEdit'
 import { useStoreState } from '@/store/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
@@ -35,9 +35,12 @@ import { JsonRowDialogData } from './json-row-operations/types'
 import { useState } from 'react'
 import JsonRowOpDialogAnnotation from './json-row-operations/JsonRowOpDialogAnnotation'
 
-const schema = object().shape({
-  name: string().required(),
-})
+// Bu sekme ListForm nesnesinin tamamını düzenler; `name` / `title` / `height`
+// gibi alanların girdisi burada yok. Şema bu alanları zorunlu tutuyordu ve
+// ListForm'da boş olduklarında Kaydet hiçbir mesaj vermeden çalışmıyordu.
+// (Zorunluluk, aynı adları gerçekten alan olarak barındıran JsonRowOpDialog*
+// dosyalarından kopyalanmış.)
+const schema = object()
 
 function ChartTabAnnotations(props: FormEditProps) {
   const [isJsonRowOpDialogOpen, setIsJsonRowOpDialogOpen] = useState(false)
diff --git a/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx b/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
index 11e298a6..28588c78 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
@@ -24,7 +24,7 @@ import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
 import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
-import { object, string } from 'yup'
+import { object } from 'yup'
 import {
   chartArgumentAxisHoverModeListOptions,
   chartArgumentAxisTypeListOptions,
@@ -37,10 +37,12 @@ import { useState } from 'react'
 import { JsonRowDialogData } from './json-row-operations/types'
 import JsonRowOpDialogAxis from './json-row-operations/JsonRowOpDialogAxis'
 
-const schema = object().shape({
-  name: string().required(),
-  title: string().required(),
-})
+// Bu sekme ListForm nesnesinin tamamını düzenler; `name` / `title` / `height`
+// gibi alanların girdisi burada yok. Şema bu alanları zorunlu tutuyordu ve
+// ListForm'da boş olduklarında Kaydet hiçbir mesaj vermeden çalışmıyordu.
+// (Zorunluluk, aynı adları gerçekten alan olarak barındıran JsonRowOpDialog*
+// dosyalarından kopyalanmış.)
+const schema = object()
 
 function ChartTabAxis(props: FormEditProps) {
   const [isJsonRowOpDialogOpen, setIsJsonRowOpDialogOpen] = useState(false)
diff --git a/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx b/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
index b747ab95..d1d8f61e 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
@@ -10,16 +10,17 @@ import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useStoreState } from '@/store/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
-import { object, string } from 'yup'
+import { object } from 'yup'
 import { JsonRowDialogData } from './json-row-operations/types'
 import { useState } from 'react'
 import JsonRowOpDialogPane from './json-row-operations/JsonRowOpDialogPane'
 
-const schema = object().shape({
-  height: string().required(),
-  name: string().required(),
-  backgroundColor: string().notRequired(),
-})
+// Bu sekme ListForm nesnesinin tamamını düzenler; `name` / `title` / `height`
+// gibi alanların girdisi burada yok. Şema bu alanları zorunlu tutuyordu ve
+// ListForm'da boş olduklarında Kaydet hiçbir mesaj vermeden çalışmıyordu.
+// (Zorunluluk, aynı adları gerçekten alan olarak barındıran JsonRowOpDialog*
+// dosyalarından kopyalanmış.)
+const schema = object()
 
 function ChartTabPanes(props: FormEditProps) {
   const [isJsonRowOpDialogOpen, setIsJsonRowOpDialogOpen] = useState(false)
diff --git a/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx b/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
index bf0338d6..db9488e2 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
@@ -28,7 +28,7 @@ import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { object, string } from 'yup'
+import { object } from 'yup'
 import {
   chartSeriesTypeOptions,
   chartSeriesSelectionModeOptions,
@@ -41,9 +41,12 @@ import CreatableSelect from 'react-select/creatable'
 import { getListFormFields } from '@/services/admin/list-form-field.service'
 import groupBy from 'lodash/groupBy'
 
-const schema = object().shape({
-  name: string().required(),
-})
+// Bu sekme ListForm nesnesinin tamamını düzenler; `name` / `title` / `height`
+// gibi alanların girdisi burada yok. Şema bu alanları zorunlu tutuyordu ve
+// ListForm'da boş olduklarında Kaydet hiçbir mesaj vermeden çalışmıyordu.
+// (Zorunluluk, aynı adları gerçekten alan olarak barındıran JsonRowOpDialog*
+// dosyalarından kopyalanmış.)
+const schema = object()
 
 function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
   const [isJsonRowOpDialogOpen, setIsJsonRowOpDialogOpen] = useState(false)
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseDataSource.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseDataSource.tsx
index 6538b858..78301cb5 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseDataSource.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseDataSource.tsx
@@ -120,6 +120,7 @@ function FormTabDatabaseDataSource(props: FormEditProps) {
   return (
     <Container>
       <Formik
+        enableReinitialize
         initialValues={initialValues}
         validationSchema={schema}
         onSubmit={async (values, formikHelpers) => {
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
index cb7bef53..d0f89aca 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
@@ -42,6 +42,7 @@ function FormTabDatabaseDelete({
   return (
     <Container>
       <Formik
+        enableReinitialize
         initialValues={initialValues}
         validationSchema={schema}
         onSubmit={async (values, formikHelpers) => {
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
index 0392035a..4d855163 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
@@ -42,6 +42,7 @@ function FormTabDatabaseInsert({
   return (
     <Container>
       <Formik
+        enableReinitialize
         initialValues={initialValues}
         validationSchema={schema}
         onSubmit={async (values, formikHelpers) => {
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseSelect.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseSelect.tsx
index 183b83be..167713d0 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseSelect.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseSelect.tsx
@@ -42,6 +42,7 @@ function FormTabDatabaseSelect({
   return (
     <Container>
       <Formik
+        enableReinitialize
         initialValues={initialValues}
         validationSchema={schema}
         onSubmit={async (values, formikHelpers) => {
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
index 54ac19d1..1c747ce4 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
@@ -42,6 +42,7 @@ function FormTabDatabaseUpdate({
   return (
     <Container>
       <Formik
+        enableReinitialize
         initialValues={initialValues}
         validationSchema={schema}
         onSubmit={async (values, formikHelpers) => {
diff --git a/ui/src/views/admin/listForm/edit/FormTabPermissions.tsx b/ui/src/views/admin/listForm/edit/FormTabPermissions.tsx
index 3866cd0a..cff61904 100644
--- a/ui/src/views/admin/listForm/edit/FormTabPermissions.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabPermissions.tsx
@@ -11,14 +11,18 @@ import { FormEditProps } from './FormEdit'
 import { PermissionDefinitionRecord } from '@/proxy/admin/models'
 import { getPermissionsList } from '@/services/identity.service'
 
+// Alanlar `permissionDto.*` altında; şema düz kökten tanımlandığı için hiçbir
+// şeyi doğrulamıyordu.
 const schema = object().shape({
-  c: string(),
-  r: string(),
-  u: string(),
-  d: string(),
-  e: string(),
-  i: string(),
-  n: string(),
+  permissionDto: object().shape({
+    c: string().nullable(),
+    r: string().nullable(),
+    u: string().nullable(),
+    d: string().nullable(),
+    e: string().nullable(),
+    i: string().nullable(),
+    n: string().nullable(),
+  }),
 })
 
 function FormTabPermissions(props: FormEditProps) {
diff --git a/ui/src/views/admin/listForm/edit/FormTabWorkflow.tsx b/ui/src/views/admin/listForm/edit/FormTabWorkflow.tsx
index 82af6519..47dd98d2 100644
--- a/ui/src/views/admin/listForm/edit/FormTabWorkflow.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabWorkflow.tsx
@@ -329,6 +329,7 @@ export function FormTabWorkflow(
   return (
     <div>
       <Formik
+        enableReinitialize
         initialValues={initialValues}
         validationSchema={schema}
         onSubmit={async (values, formikHelpers) => {
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldEdit.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldEdit.tsx
index 91347bef..1201cdbe 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldEdit.tsx
@@ -2,21 +2,20 @@ import { Tabs } from '@/components/ui'
 import TabContent from '@/components/ui/Tabs/TabContent'
 import TabList from '@/components/ui/Tabs/TabList'
 import TabNav from '@/components/ui/Tabs/TabNav'
-import { ColumnFormatEditDto } from '@/proxy/admin/list-form-field/models'
+import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import FormFieldTabConditionalFormatting from './FormFieldTabConditionalFormatting'
 import FormFieldTabCssOptions from './FormFieldTabCssOptions'
 import FormFieldTabCustomization from './FormFieldTabCustomization'
 import FormFieldTabDetails from './FormFieldTabDetails'
 import FormFieldTabFiltering from './FormFieldTabFiltering'
-import FormFieldTabGroupSummary from './FormFieldTabGroupSummary'
 import FormFieldTabGrouping from './FormFieldTabGrouping'
 import FormFieldTabHeadering from './FormFieldTabHeadering'
 import FormFieldTabJoinOptions from './FormFieldTabJoinOptions'
 import FormFieldTabLookup from './FormFieldTabLookup'
 import FormFieldTabOptions from './FormFieldTabOptions'
 import FormFieldTabPermissions from './FormFieldTabPermissions'
-import FormFieldTabTotalSummary from './FormFieldTabTotalSummary'
+import FormFieldTabSummary from './FormFieldTabSummary'
 import FormFieldTabValidationRules from './FormFieldTabValidationRules'
 import { FormFieldEditProps } from './FormFields'
 import FormFieldTabPivotSetting from './FormFieldTabPivotSetting'
@@ -104,10 +103,22 @@ function FormFieldEdit({
             <FormFieldTabGrouping initialValues={item} onSubmit={onSubmit} />
           </TabContent>
           <TabContent value="groupSummary">
-            <FormFieldTabGroupSummary initialValues={item} fields={fields} onSubmit={onSubmit} />
+            <FormFieldTabSummary
+              dtoKey="columnGroupSummaryDto"
+              editTab={ListFormFieldEditTabs.GroupSummaryForm}
+              initialValues={item}
+              fields={fields}
+              onSubmit={onSubmit}
+            />
           </TabContent>
           <TabContent value="totalSummary">
-            <FormFieldTabTotalSummary initialValues={item} fields={fields} onSubmit={onSubmit} />
+            <FormFieldTabSummary
+              dtoKey="columnTotalSummaryDto"
+              editTab={ListFormFieldEditTabs.TotalSummaryForm}
+              initialValues={item}
+              fields={fields}
+              onSubmit={onSubmit}
+            />
           </TabContent>
           <TabContent value="joinOptions">
             <FormFieldTabJoinOptions initialValues={item} onSubmit={onSubmit} />
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabConditionalFormatting.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabConditionalFormatting.tsx
index 59013bfa..7a993e1c 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabConditionalFormatting.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabConditionalFormatting.tsx
@@ -7,7 +7,6 @@ import {
   FormItem,
   Input,
   Notification,
-  Select,
   Table,
   toast,
 } from '@/components/ui'
@@ -20,7 +19,7 @@ import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-f
 
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import setNull from '@/utils/setNull'
-import { Field, FieldProps, Form, Formik } from 'formik'
+import { Field, Form, Formik } from 'formik'
 import { useState } from 'react'
 import { FaEdit, FaPlusSquare, FaCheck, FaTrashAlt } from 'react-icons/fa'
 import { object, string } from 'yup'
@@ -32,6 +31,7 @@ import {
   ColumnStylingDto,
   ColumnValidationComparisonTypeEnum,
 } from '@/proxy/form/models'
+import SelectField from '../shared/SelectField'
 
 const NewItem: ColumnStylingDto = {
   rowType: ColumnRowTypeListOptions.Data,
@@ -225,19 +225,11 @@ function FormFieldTabConditionalFormatting({
                   invalid={errors.rowType && touched.rowType}
                   errorMessage={errors.rowType}
                 >
-                  <Field type="text" autoComplete="off" name="rowType" placeholder="Row Type">
-                    {({ field, form }: FieldProps<ColumnRowTypeListOptions>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        options={columnRowTypeListOptions}
-                        value={columnRowTypeListOptions.filter(
-                          (option: any) => option.value === values.rowType,
-                        )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                  <SelectField
+                    name="rowType"
+                    options={columnRowTypeListOptions}
+                    isClearable={false}
+                  />
                 </FormItem>
 
                 <FormItem
@@ -255,19 +247,11 @@ function FormFieldTabConditionalFormatting({
                   invalid={errors.condition && touched.condition}
                   errorMessage={errors.condition}
                 >
-                  <Field type="text" autoComplete="off" name="condition" placeholder="Condition">
-                    {({ field, form }: FieldProps<ColumnValidationComparisonTypeEnum>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        options={columnValidationComparisonTypeListOptions}
-                        value={columnValidationComparisonTypeListOptions.filter(
-                          (option: any) => option.value === values.condition,
-                        )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                  <SelectField
+                    name="condition"
+                    options={columnValidationComparisonTypeListOptions}
+                    isClearable={false}
+                  />
                 </FormItem>
 
                 <FormItem
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx
index 1094d715..bc175642 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx
@@ -1,13 +1,13 @@
 import { Container } from '@/components/shared'
-import { Button, Checkbox, FormContainer, FormItem, Select } from '@/components/ui'
+import { Button, Checkbox, FormContainer, FormItem } from '@/components/ui'
 import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
-import { SelectBoxOption } from '@/types/shared'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, FieldProps, Form, Formik } from 'formik'
+import { Field, Form, Formik } from 'formik'
 import { bool, object, string } from 'yup'
 import { fixedPositionOptions } from '../options'
 import { FormFieldEditProps } from './FormFields'
 import { FixedPositionEnum } from '@/proxy/form/models'
+import SelectField from '../shared/SelectField'
 
 const schema = object().shape({
   columnCustomizationDto: object()
@@ -51,21 +51,10 @@ function FormFieldTabCustomization({
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.CustomizationFixedPosition')}
               >
-                <Field type="text" name="columnCustomizationDto.fixedPosition">
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={fixedPositionOptions}
-                      value={fixedPositionOptions.filter(
-                        (option: any) =>
-                          option.value === values?.columnCustomizationDto?.fixedPosition,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                <SelectField
+                  name="columnCustomizationDto.fixedPosition"
+                  options={fixedPositionOptions}
+                />
               </FormItem>
 
               <Button block size="sm" className="mt-1" variant="solid" loading={isSubmitting} type="submit">
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
index 0d45d55d..4ab4883a 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
@@ -1,8 +1,7 @@
-import { Button, Card, Checkbox, FormItem, Input, Select } from '@/components/ui'
+import { Button, Card, Checkbox, FormItem, Input } from '@/components/ui'
 import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
-import { SelectBoxOption } from '@/types/shared'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, FieldProps, Form, Formik } from 'formik'
+import { Field, Form, Formik } from 'formik'
 import { useState } from 'react'
 import { FaSlidersH } from 'react-icons/fa'
 import { bool, number, object, string } from 'yup'
@@ -11,6 +10,7 @@ import EditorOptionsBuilderDialog from '../json-row-operations/EditorOptionsBuil
 import { isValidJsonText } from '../json-row-operations/editor-options/jsonUtils'
 import { FormFieldEditProps } from './FormFields'
 import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
+import SelectField from '../shared/SelectField'
 
 const schema = object().shape({
   fieldName: string().required().max(100),
@@ -119,52 +119,23 @@ function FormFieldTabDetails({
                 errorMessage={errors.sourceDbType as string}
               >
                 {/* Temizlenirse zorunlu alan doğrulaması formu sessizce bloke ediyordu. */}
-                <Field type="text" name="sourceDbType">
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={false}
-                      options={dbSourceTypeOptions}
-                      value={dbSourceTypeOptions.filter(
-                        (option: any) => option.value === values.sourceDbType,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                <SelectField
+                  name="sourceDbType"
+                  options={dbSourceTypeOptions}
+                  isClearable={false}
+                />
               </FormItem>
               <FormItem label={translate('::ListForms.ListFormFieldEdit.DetailsAlignment')}>
-                <Field type="text" name="alignment">
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={listFormAlignmentOptions}
-                      value={listFormAlignmentOptions.filter(
-                        (option) => option.value === values.alignment,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                <SelectField
+                  name="alignment"
+                  options={listFormAlignmentOptions}
+                />
               </FormItem>
               <FormItem label={translate('::ListForms.ListFormFieldEdit.DetailsFormat')}>
-                <Field type="text" name="format">
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={tooltipFormatListOptions}
-                      value={tooltipFormatListOptions.filter(
-                        (option) => option.value === values.format,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                <SelectField
+                  name="format"
+                  options={tooltipFormatListOptions}
+                />
               </FormItem>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.DetailsEditorOptions')}
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
deleted file mode 100644
index 1791483c..00000000
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { Container } from '@/components/shared'
-import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
-import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
-import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, FieldProps, Form, Formik } from 'formik'
-import { bool, object, string } from 'yup'
-import { columnSummaryTypeListOptions } from '../options'
-import { FormFieldEditProps } from './FormFields'
-import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
-import { SelectBoxOption } from '@/types/shared'
-
-const schema = object().shape({
-  columnGroupingDto: object()
-    .shape({
-      summaryType: string(),
-      valueFormat: string(),
-      showInGroupFooter: bool(),
-      alignByColumn: bool(),
-      displayFormat: string(),
-      showInColumn: string(),
-    })
-    .required(),
-})
-
-function FormFieldTabGroupSummary({
-  initialValues,
-  onSubmit,
-  fields,
-}: {
-  initialValues: ColumnFormatEditDto
-  fields: ColumnFormatEditDto[]
-} & FormFieldEditProps) {
-  const { translate } = useLocalization()
-
-  const fieldList: SelectBoxOption[] = fields.length
-    ? fields.map((field) => ({
-        value: field.fieldName,
-        label: `${field.fieldName}`,
-      }))
-    : []
-
-  return (
-    <Container className="grid xl:grid-cols-2">
-      <Formik
-        enableReinitialize
-        initialValues={initialValues}
-        validationSchema={schema}
-        onSubmit={async (values, formikHelpers) => {
-          await onSubmit(ListFormFieldEditTabs.GroupSummaryForm, values, formikHelpers)
-        }}
-      >
-        {({ touched, errors, isSubmitting, values }) => (
-          <Form>
-            <FormContainer size="sm">
-              <FormItem label={translate('::ListForms.ListFormFieldEdit.SummaryType')}>
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="columnGroupSummaryDto.summaryType"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.SummaryType')}
-                >
-                  {({ field, form }: FieldProps<any>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={columnSummaryTypeListOptions}
-                      value={columnSummaryTypeListOptions.filter(
-                        (option) => option.value === values.columnGroupSummaryDto.summaryType,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="columnGroupSummaryDto.valueFormat"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat',
-                  )}
-                >
-                  {({ field, form }: FieldProps<any>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={tooltipFormatListOptions}
-                      value={tooltipFormatListOptions.filter(
-                        (option) => option.value === values.columnGroupSummaryDto.valueFormat,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryDisplayFormat')}
-                invalid={
-                  errors.columnGroupSummaryDto?.displayFormat &&
-                  touched.columnGroupSummaryDto?.displayFormat
-                }
-                errorMessage={errors.columnGroupSummaryDto?.displayFormat}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="columnGroupSummaryDto.displayFormat"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.GroupingSummaryDisplayFormat',
-                  )}
-                  component={Input}
-                />
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn')}
-                invalid={
-                  errors.columnGroupSummaryDto?.showInColumn &&
-                  touched.columnGroupSummaryDto?.showInColumn
-                }
-                errorMessage={errors.columnGroupSummaryDto?.showInColumn}
-              >
-                <Field
-                  type="text"
-                  autoFocus={true}
-                  name="columnGroupSummaryDto.showInColumn"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn',
-                  )}
-                >
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={fieldList}
-                      value={fieldList.filter(
-                        (option) => option.value === values.columnGroupSummaryDto?.showInColumn,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryShowInGroupFooter')}
-              >
-                <Field
-                  name="columnGroupSummaryDto.showInGroupFooter"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.GroupingSummaryShowInGroupFooter',
-                  )}
-                  component={Checkbox}
-                />
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryAlignByColumn')}
-              >
-                <Field
-                  name="columnGroupSummaryDto.alignByColumn"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.GroupingSummaryAlignByColumn',
-                  )}
-                  component={Checkbox}
-                />
-              </FormItem>
-
-              <Button block size="sm" variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::Saving') : translate('::Save')}
-              </Button>
-            </FormContainer>
-          </Form>
-        )}
-      </Formik>
-    </Container>
-  )
-}
-
-export default FormFieldTabGroupSummary
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
index 599e3ebe..510b94f8 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
@@ -1,4 +1,4 @@
-import { Button, Card, FormItem, Input, Select } from '@/components/ui'
+import { Button, Card, FormItem, Input } from '@/components/ui'
 import {
   ColumnFormatEditDto,
   GridColumnJoinConditionEnum,
@@ -6,10 +6,11 @@ import {
   ListFormFieldEditTabs,
 } from '@/proxy/admin/list-form-field/models'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, FieldProps, Form, Formik } from 'formik'
+import { Field, Form, Formik } from 'formik'
 import { object, string } from 'yup'
 import { gridColumnJoinConditionOptions, gridColumnJoinTypeListOptions } from '../options'
 import { FormFieldEditProps } from './FormFields'
+import SelectField from '../shared/SelectField'
 
 const schema = object().shape({
   columnJoinTableDto: object()
@@ -53,25 +54,10 @@ function FormFieldTabJoinOptions({
                 labelWidth="40%"
                 label={translate('::ListForms.ListFormFieldEdit.JoinOptionsJoinType')}
               >
-                <Field
-                  type="text"
-                  autoComplete="off"
+                <SelectField
                   name="columnJoinTableDto.joinType"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.JoinOptionsJoinType')}
-                >
-                  {({ field, form }: FieldProps<GridColumnJoinTypeListEnum>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={gridColumnJoinTypeListOptions}
-                      value={gridColumnJoinTypeListOptions.filter(
-                        (option) => option.value === values.columnJoinTableDto.joinType,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                  options={gridColumnJoinTypeListOptions}
+                />
               </FormItem>
 
               <FormItem
@@ -171,25 +157,10 @@ function FormFieldTabJoinOptions({
                 }
                 errorMessage={errors.columnJoinTableDto?.joinCondition2}
               >
-                <Field
-                  type="text"
-                  autoComplete="off"
+                <SelectField
                   name="columnJoinTableDto.joinCondition2"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.JoinOptionsJoinCondition2')}
-                >
-                  {({ field, form }: FieldProps<GridColumnJoinConditionEnum>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={gridColumnJoinConditionOptions}
-                      value={gridColumnJoinConditionOptions.filter(
-                        (option) => option.value === values.columnJoinTableDto.joinCondition2,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                  options={gridColumnJoinConditionOptions}
+                />
               </FormItem>
 
               <FormItem
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
index 241e0976..284624a4 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
@@ -1,8 +1,7 @@
-import { Button, Card, FormItem, Input, Select } from '@/components/ui'
+import { Button, Card, FormItem, Input } from '@/components/ui'
 import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
 import type { DatabaseColumnDto, SqlObjectExplorerDto } from '@/proxy/sql-query-manager/models'
 import { sqlObjectManagerService } from '@/services/sql-query-manager.service'
-import { SelectBoxOption } from '@/types/shared'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
 import { Field, FieldProps, Form, Formik } from 'formik'
@@ -13,6 +12,7 @@ import { cascadeFilterOperator, columnLookupDataSourceTypeListOptions } from '..
 import { FormFieldEditProps } from './FormFields'
 import { ColumnCascadeFilterOperatorEnum, UiLookupDataSourceTypeEnum } from '@/proxy/form/models'
 import { buildLookupQuery } from '../../lookupQuery'
+import SelectField from '../shared/SelectField'
 
 const schema = object().shape({
   lookupDto: object()
@@ -288,25 +288,10 @@ function FormFieldTabLookup({
                 invalid={errors.lookupDto?.dataSourceType && touched.lookupDto?.dataSourceType}
                 errorMessage={errors.lookupDto?.dataSourceType}
               >
-                <Field
-                  type="text"
-                  autoComplete="off"
+                <SelectField
                   name="lookupDto.dataSourceType"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.LookupDataSourceType')}
-                >
-                  {({ field, form }: FieldProps<UiLookupDataSourceTypeEnum>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={columnLookupDataSourceTypeListOptions}
-                      value={columnLookupDataSourceTypeListOptions.filter(
-                        (option: any) => option.value === values.lookupDto?.dataSourceType,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                  options={columnLookupDataSourceTypeListOptions}
+                />
               </FormItem>
 
               <FormItem
@@ -406,27 +391,10 @@ function FormFieldTabLookup({
                 }
                 errorMessage={errors.lookupDto?.cascadeFilterOperator}
               >
-                <Field
-                  type="text"
-                  autoComplete="off"
+                <SelectField
                   name="lookupDto.cascadeFilterOperator"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.LookupCascadeFilterOperator',
-                  )}
-                >
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={cascadeFilterOperator}
-                      value={cascadeFilterOperator.filter(
-                        (option: any) => option.value === values.lookupDto?.cascadeFilterOperator,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                  options={cascadeFilterOperator}
+                />
               </FormItem>
 
               <FormItem
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
index 42e2ed47..6145eecc 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
@@ -10,6 +10,7 @@ import { EditingFormDto, SortDirectionEnum } from '@/proxy/form/models'
 import { FaCode } from 'react-icons/fa'
 import { useState } from 'react'
 import EditorScriptBuilderDialog from '../json-row-operations/EditorScriptBuilderDialog'
+import SelectField from '../shared/SelectField'
 
 const schema = object().shape({
   listOrderNo: number(),
@@ -81,20 +82,10 @@ function FormFieldTabOptions({
                 invalid={errors.sortDirection && touched.sortDirection}
                 errorMessage={errors.sortDirection}
               >
-                <Field type="text" name="sortDirection">
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={sortDirectionOptions}
-                      value={sortDirectionOptions.filter(
-                        (option: any) => option.value === values.sortDirection,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                <SelectField
+                  name="sortDirection"
+                  options={sortDirectionOptions}
+                />
               </FormItem>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.OptionsSortIndex')}
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx
index cd18a7fa..462395fa 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx
@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react'
 import { bool, object, string } from 'yup'
 import { FormFieldEditProps } from './FormFields'
 import { getPermissions } from '@/services/identity.service'
+import SelectField from '../shared/SelectField'
 
 const schema = object().shape({
   permissionDto: object().shape({
@@ -72,25 +73,10 @@ function FormFieldTabPermissions({
                 invalid={errors.permissionDto?.r && touched.permissionDto?.r}
                 errorMessage={errors.permissionDto?.r}
               >
-                <Field
-                  type="text"
-                  autoComplete="off"
+                <SelectField
                   name="permissionDto.r"
-                  placeholder={translate('::Read')}
-                >
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={permissionOptions}
-                      value={permissionOptions.filter(
-                        (option) => option.value === values.permissionDto?.r,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                  options={permissionOptions}
+                />
               </FormItem>
               <FormItem
                 label={translate('::Create')}
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
index 6c9ace95..a31c49aa 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
@@ -1,10 +1,9 @@
-import { Button, Card, Checkbox, FormItem, Select } from '@/components/ui'
+import { Button, Card, Checkbox, FormItem } from '@/components/ui'
 import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, FieldProps, Form, Formik } from 'formik'
+import { Field, Form, Formik } from 'formik'
 import { boolean, object, string } from 'yup'
 import { FormFieldEditProps } from './FormFields'
-import { SelectBoxOption } from '@/types/shared'
 import {
   columnSummaryTypeListOptions,
   pivotSettingsAreaOptions,
@@ -12,16 +11,19 @@ import {
   pivotSortDirectionOptions,
 } from '../options'
 import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
+import SelectField from '../shared/SelectField'
 
 const schema = object().shape({
   pivotSettingsDto: object().shape({
     isPivot: boolean(),
     expanded: boolean(),
-    sortOrder: string(),
+    // Bu alanlar temizlenebilir Select'e bağlı; format listesindeki "None"
+    // seçeneği null döndürüyor ve nullable olmadan Kaydet sessizce iptal oluyor.
+    sortOrder: string().nullable(),
     area: string().required(),
-    format: string(),
-    summaryType: string(),
-    groupInterval: string(),
+    format: string().nullable(),
+    summaryType: string().nullable(),
+    groupInterval: string().nullable(),
     wordWrapEnabled: boolean(),
   }),
 })
@@ -60,25 +62,10 @@ function FormFieldTabPivotSetting({
                 invalid={errors.pivotSettingsDto?.area && touched.pivotSettingsDto?.area}
                 errorMessage={errors.pivotSettingsDto?.area}
               >
-                <Field
-                  type="text"
-                  autoComplete="off"
+                <SelectField
                   name="pivotSettingsDto.area"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.PivotSettingArea')}
-                >
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={pivotSettingsAreaOptions}
-                      value={pivotSettingsAreaOptions.filter(
-                        (option: any) => option.value === values.pivotSettingsDto?.area,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                  options={pivotSettingsAreaOptions}
+                />
               </FormItem>
 
               <FormItem
@@ -86,25 +73,10 @@ function FormFieldTabPivotSetting({
                 invalid={errors.pivotSettingsDto?.format && touched.pivotSettingsDto?.format}
                 errorMessage={errors.pivotSettingsDto?.format}
               >
-                <Field
-                  type="text"
-                  autoComplete="off"
+                <SelectField
                   name="pivotSettingsDto.format"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.DetailsFormat')}
-                >
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={tooltipFormatListOptions}
-                      value={tooltipFormatListOptions.filter(
-                        (option) => option.value === values.pivotSettingsDto?.format,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                  options={tooltipFormatListOptions}
+                />
               </FormItem>
 
               <FormItem
@@ -114,25 +86,10 @@ function FormFieldTabPivotSetting({
                 }
                 errorMessage={errors.pivotSettingsDto?.summaryType}
               >
-                <Field
-                  type="text"
-                  autoComplete="off"
+                <SelectField
                   name="pivotSettingsDto.summaryType"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.SummaryType')}
-                >
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={columnSummaryTypeListOptions}
-                      value={columnSummaryTypeListOptions.filter(
-                        (option: any) => option.value === values.pivotSettingsDto?.summaryType,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                  options={columnSummaryTypeListOptions}
+                />
               </FormItem>
             </Card>
 
@@ -144,25 +101,10 @@ function FormFieldTabPivotSetting({
                 }
                 errorMessage={errors.pivotSettingsDto?.groupInterval}
               >
-                <Field
-                  type="text"
-                  autoComplete="off"
+                <SelectField
                   name="pivotSettingsDto.groupInterval"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.PivotSettingGroupInterval')}
-                >
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={pivotSettingsGroupIntervalOptions}
-                      value={pivotSettingsGroupIntervalOptions.filter(
-                        (option: any) => option.value === values.pivotSettingsDto?.groupInterval,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                  options={pivotSettingsGroupIntervalOptions}
+                />
               </FormItem>
 
               <FormItem
@@ -170,25 +112,10 @@ function FormFieldTabPivotSetting({
                 invalid={errors.pivotSettingsDto?.sortOrder && touched.pivotSettingsDto?.sortOrder}
                 errorMessage={errors.pivotSettingsDto?.sortOrder}
               >
-                <Field
-                  type="text"
-                  autoComplete="off"
+                <SelectField
                   name="pivotSettingsDto.sortOrder"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.PivotSettingSortOrder')}
-                >
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={pivotSortDirectionOptions}
-                      value={pivotSortDirectionOptions.filter(
-                        (option: any) => option.value === values.pivotSettingsDto?.sortOrder,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                  options={pivotSortDirectionOptions}
+                />
               </FormItem>
 
               <FormItem
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabSummary.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabSummary.tsx
new file mode 100644
index 00000000..19ec191d
--- /dev/null
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabSummary.tsx
@@ -0,0 +1,119 @@
+import { Container } from '@/components/shared'
+import { Button, Checkbox, FormContainer, FormItem, Input } from '@/components/ui'
+import { ColumnFormatEditDto } from '@/proxy/admin/list-form-field/models'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { Field, Form, Formik } from 'formik'
+import { bool, object, string } from 'yup'
+import { columnSummaryTypeListOptions } from '../options'
+import { FormFieldEditProps } from './FormFields'
+import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
+import { SelectBoxOption } from '@/types/shared'
+import SelectField from '../shared/SelectField'
+
+/**
+ * Grup özeti ve genel toplam sekmelerinin ortak gövdesi.
+ *
+ * İki sekme yalnızca hangi DTO'yu düzenlediği ve hangi editType ile kaydettiği
+ * konusunda ayrışıyordu; dosyalar bunun dışında birebir aynıydı.
+ */
+type SummaryDtoKey = 'columnGroupSummaryDto' | 'columnTotalSummaryDto'
+
+// Temizlenebilir Select'ler null yazabildiği için tüm metin alanları nullable.
+const buildSchema = (dtoKey: SummaryDtoKey) =>
+  object().shape({
+    [dtoKey]: object().shape({
+      summaryType: string().nullable(),
+      valueFormat: string().nullable(),
+      showInGroupFooter: bool(),
+      alignByColumn: bool(),
+      displayFormat: string().nullable(),
+      showInColumn: string().nullable(),
+    }),
+  })
+
+function FormFieldTabSummary({
+  initialValues,
+  onSubmit,
+  fields,
+  dtoKey,
+  editTab,
+}: {
+  initialValues: ColumnFormatEditDto
+  fields: ColumnFormatEditDto[]
+  dtoKey: SummaryDtoKey
+  editTab: string
+} & FormFieldEditProps) {
+  const { translate } = useLocalization()
+
+  const fieldList: SelectBoxOption[] = fields.map((field) => ({
+    value: field.fieldName,
+    label: `${field.fieldName}`,
+  }))
+
+  const schema = buildSchema(dtoKey)
+  const label = (key: string) => translate(`::ListForms.ListFormFieldEdit.${key}`)
+
+  return (
+    <Container className="grid xl:grid-cols-2">
+      <Formik
+        enableReinitialize
+        initialValues={initialValues}
+        validationSchema={schema}
+        onSubmit={async (values, formikHelpers) => {
+          await onSubmit(editTab, values, formikHelpers)
+        }}
+      >
+        {({ isSubmitting }) => (
+            <Form>
+              <FormContainer size="sm">
+                <FormItem label={label('SummaryType')}>
+                  <SelectField
+                    name={`${dtoKey}.summaryType`}
+                    options={columnSummaryTypeListOptions}
+                  />
+                </FormItem>
+
+                <FormItem label={label('GroupingSummaryValueFormat')}>
+                  <SelectField
+                    name={`${dtoKey}.valueFormat`}
+                    options={tooltipFormatListOptions}
+                  />
+                </FormItem>
+
+                <FormItem label={label('GroupingSummaryDisplayFormat')}>
+                  <Field
+                    type="text"
+                    autoComplete="off"
+                    name={`${dtoKey}.displayFormat`}
+                    placeholder={label('GroupingSummaryDisplayFormat')}
+                    component={Input}
+                  />
+                </FormItem>
+
+                <FormItem label={label('GroupingSummaryShowInColumn')}>
+                  <SelectField
+                    name={`${dtoKey}.showInColumn`}
+                    options={fieldList}
+                  />
+                </FormItem>
+
+                <FormItem label={label('GroupingSummaryShowInGroupFooter')}>
+                  <Field name={`${dtoKey}.showInGroupFooter`} component={Checkbox} />
+                </FormItem>
+
+                <FormItem label={label('GroupingSummaryAlignByColumn')}>
+                  <Field name={`${dtoKey}.alignByColumn`} component={Checkbox} />
+                </FormItem>
+
+                <Button block size="sm" variant="solid" loading={isSubmitting} type="submit">
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
+                </Button>
+              </FormContainer>
+          </Form>
+        )}
+      </Formik>
+    </Container>
+  )
+}
+
+export default FormFieldTabSummary
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
deleted file mode 100644
index 9f300dc6..00000000
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { Container } from '@/components/shared'
-import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
-import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
-import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, FieldProps, Form, Formik } from 'formik'
-import { bool, object, string } from 'yup'
-import { columnSummaryTypeListOptions } from '../options'
-import { FormFieldEditProps } from './FormFields'
-import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
-import { SelectBoxOption } from '@/types/shared'
-
-const schema = object().shape({
-  columnTotalSummaryDto: object()
-    .shape({
-      summaryType: string(),
-      valueFormat: string(),
-      showInGroupFooter: bool(),
-      alignByColumn: bool(),
-      displayFormat: string(),
-      showInColumn: string(),
-    })
-    .required(),
-})
-
-function FormFieldTabTotalSummary({
-  initialValues,
-  onSubmit,
-  fields,
-}: {
-  initialValues: ColumnFormatEditDto
-  fields: ColumnFormatEditDto[]
-} & FormFieldEditProps) {
-  const { translate } = useLocalization()
-
-  const fieldList: SelectBoxOption[] = fields.length
-    ? fields.map((field) => ({
-        value: field.fieldName,
-        label: `${field.fieldName}`,
-      }))
-    : []
-
-  return (
-    <Container className="grid xl:grid-cols-2">
-      <Formik
-        enableReinitialize
-        initialValues={initialValues}
-        validationSchema={schema}
-        onSubmit={async (values, formikHelpers) => {
-          await onSubmit(ListFormFieldEditTabs.TotalSummaryForm, values, formikHelpers)
-        }}
-      >
-        {({ touched, errors, isSubmitting, values }) => (
-          <Form>
-            <FormContainer size="sm">
-              <FormItem label={translate('::ListForms.ListFormFieldEdit.SummaryType')}>
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="columnTotalSummaryDto.summaryType"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.SummaryType')}
-                >
-                  {({ field, form }: FieldProps<any>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={columnSummaryTypeListOptions}
-                      value={columnSummaryTypeListOptions.filter(
-                        (option) => option.value === values.columnTotalSummaryDto.summaryType,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="columnTotalSummaryDto.valueFormat"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat',
-                  )}
-                >
-                  {({ field, form }: FieldProps<any>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={tooltipFormatListOptions}
-                      value={tooltipFormatListOptions.filter(
-                        (option) => option.value === values.columnTotalSummaryDto.valueFormat,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryDisplayFormat')}
-                invalid={
-                  errors.columnTotalSummaryDto?.displayFormat &&
-                  touched.columnTotalSummaryDto?.displayFormat
-                }
-                errorMessage={errors.columnTotalSummaryDto?.displayFormat}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="columnTotalSummaryDto.displayFormat"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.GroupingSummaryDisplayFormat',
-                  )}
-                  component={Input}
-                />
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn')}
-                invalid={
-                  errors.columnTotalSummaryDto?.showInColumn &&
-                  touched.columnTotalSummaryDto?.showInColumn
-                }
-                errorMessage={errors.columnTotalSummaryDto?.showInColumn}
-              >
-                <Field
-                  type="text"
-                  autoFocus={true}
-                  name="columnTotalSummaryDto.showInColumn"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn',
-                  )}
-                >
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={fieldList}
-                      value={fieldList.filter(
-                        (option) => option.value === values.columnTotalSummaryDto?.showInColumn,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryShowInGroupFooter')}
-              >
-                <Field
-                  name="columnTotalSummaryDto.showInGroupFooter"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.GroupingSummaryShowInGroupFooter',
-                  )}
-                  component={Checkbox}
-                />
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryAlignByColumn')}
-              >
-                <Field
-                  name="columnTotalSummaryDto.alignByColumn"
-                  placeholder={translate(
-                    '::ListForms.ListFormFieldEdit.GroupingSummaryAlignByColumn',
-                  )}
-                  component={Checkbox}
-                />
-              </FormItem>
-
-              <Button block size="sm" className="mt-1" variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::Saving') : translate('::Save')}
-              </Button>
-            </FormContainer>
-          </Form>
-        )}
-      </Formik>
-    </Container>
-  )
-}
-
-export default FormFieldTabTotalSummary
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
index a6902709..8b872211 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
@@ -7,7 +7,6 @@ import {
   FormItem,
   Input,
   Notification,
-  Select,
   Table,
   toast,
 } from '@/components/ui'
@@ -21,7 +20,7 @@ import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-f
 
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import setNull from '@/utils/setNull'
-import { Field, FieldProps, Form, Formik } from 'formik'
+import { Field, Form, Formik } from 'formik'
 import { useState } from 'react'
 import { FaEdit, FaPlusSquare, FaCheck, FaTrashAlt } from 'react-icons/fa'
 import { bool, object, string } from 'yup'
@@ -35,6 +34,7 @@ import {
   ColumnValidationTypeListEnum,
   ValidationRuleDto,
 } from '@/proxy/form/models'
+import SelectField from '../shared/SelectField'
 
 const NewItem: ValidationRuleDto = {
   type: ColumnValidationTypeListEnum.None,
@@ -235,20 +235,10 @@ function FormFieldTabValidationRules({
                   invalid={errors.type && touched.type}
                   errorMessage={errors.type}
                 >
-                  <Field type="text" autoComplete="off" name="type" placeholder="Type">
-                    {({ field, form }: FieldProps<ColumnValidationTypeListEnum>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={columnValidationTypeListOptions}
-                        value={columnValidationTypeListOptions.filter(
-                          (option: any) => option.value === values.type,
-                        )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                  <SelectField
+                    name="type"
+                    options={columnValidationTypeListOptions}
+                  />
                 </FormItem>
 
                 <FormItem
@@ -290,25 +280,10 @@ function FormFieldTabValidationRules({
                   invalid={errors.comparisonType && touched.comparisonType}
                   errorMessage={errors.comparisonType}
                 >
-                  <Field
-                    type="text"
-                    autoComplete="off"
+                  <SelectField
                     name="comparisonType"
-                    placeholder="Comparison Type"
-                  >
-                    {({ field, form }: FieldProps<ColumnValidationComparisonTypeEnum>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={columnValidationComparisonTypeListOptions}
-                        value={columnValidationComparisonTypeListOptions.filter(
-                          (option: any) => option.value === values.comparisonType,
-                        )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                    options={columnValidationComparisonTypeListOptions}
+                  />
                 </FormItem>
 
                 <FormItem
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
index dcf38f57..631d75e0 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
@@ -8,7 +8,6 @@ import {
   FormItem,
   Input,
   Notification,
-  Select,
   Table,
   toast,
 } from '@/components/ui'
@@ -34,7 +33,7 @@ import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import setNull from '@/utils/setNull'
 import classNames from 'classnames'
-import { Field, FieldProps, Form, Formik, FormikHelpers } from 'formik'
+import { Field, Form, Formik, FormikHelpers } from 'formik'
 import { useCallback, useEffect, useState } from 'react'
 import { FaFileMedical, FaCopy, FaEyeSlash, FaMinus, FaTimes, FaTable } from 'react-icons/fa'
 import { number, object, string } from 'yup'
@@ -44,6 +43,7 @@ import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin/models'
 import { sqlObjectManagerService } from '@/services/sql-query-manager.service'
 import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
 import type { EditingFormDto } from '@/proxy/form/models'
+import SelectField from '../shared/SelectField'
 
 export interface FormFieldEditProps {
   onSubmit: (
@@ -351,49 +351,25 @@ function FormFields({
                 invalid={errors.cultureName && touched.cultureName}
                 errorMessage={errors.cultureName}
               >
-                <Field type="text" name="cultureName">
-                  {({ field, form }: FieldProps<LanguageInfo>) => (
-                    <Select
-                      placeholder={translate('::App.Listform.ListformField.CultureName')}
-                      field={field}
-                      form={form}
-                      options={langOptions}
-                      isClearable={true}
-                      value={langOptions.filter((option) => option.value === values?.cultureName)}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                <SelectField
+                  name="cultureName"
+                  options={langOptions}
+                  placeholder={translate('::App.Listform.ListformField.CultureName')}
+                />
               </FormItem>
               <FormItem invalid={errors.roleId && touched.roleId} errorMessage={errors.roleId}>
-                <Field type="text" name="roleId">
-                  {({ field, form }: FieldProps<IdentityRoleDto>) => (
-                    <Select
-                      placeholder={translate('::ListForms.ListFormField.Role')}
-                      field={field}
-                      form={form}
-                      options={roleList}
-                      isClearable={true}
-                      value={roleList.filter((option) => option.value === values.roleId)}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                <SelectField
+                  name="roleId"
+                  options={roleList}
+                  placeholder={translate('::ListForms.ListFormField.Role')}
+                />
               </FormItem>
               <FormItem invalid={errors.userId && touched.userId} errorMessage={errors.userId}>
-                <Field type="text" name="userId">
-                  {({ field, form }: FieldProps<IdentityUserDto>) => (
-                    <Select
-                      placeholder={translate('::ListForms.ListFormField.User')}
-                      field={field}
-                      form={form}
-                      options={userList}
-                      isClearable={true}
-                      value={userList.filter((option) => option.value === values.userId)}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
+                <SelectField
+                  name="userId"
+                  options={userList}
+                  placeholder={translate('::ListForms.ListFormField.User')}
+                />
               </FormItem>
 
               <Button block size="sm" variant="solid" loading={isSubmitting} type="submit">
@@ -590,43 +566,26 @@ function FormFields({
                   errorMessage={errors.fieldName}
                   asterisk={true}
                 >
-                  <Field type="text" name="fieldName">
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        options={columnOptions}
-                        isClearable={true}
-                        value={columnOptions.filter((option) => option.value === values.fieldName)}
-                        onChange={(option) => {
-                          form.setFieldValue(field.name, option?.value)
-                          form.setFieldValue(
-                            'sourceDbType',
-                            sqlDataTypeToDbType(
-                              columns.find((c) => c.columnName === option?.value)?.dataType || '',
-                            ) as any,
-                          )
-                        }}
-                      />
-                    )}
-                  </Field>
+                  <SelectField
+                    name="fieldName"
+                    options={columnOptions}
+                    // Sütun seçilince veri tipi kaynaktan otomatik doldurulur.
+                    onValueChange={(value, form) =>
+                      form.setFieldValue(
+                        'sourceDbType',
+                        sqlDataTypeToDbType(
+                          columns.find((column) => column.columnName === value)?.dataType || '',
+                        ) as any,
+                      )
+                    }
+                  />
                 </FormItem>
 
                 <FormItem label={translate('::ListForms.ListFormEdit.CustomValueType')}>
-                  <Field type="text" name="sourceDbType">
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={dbSourceTypeOptions}
-                        value={dbSourceTypeOptions.filter(
-                          (option: any) => option.value === values.sourceDbType,
-                        )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                  <SelectField
+                    name="sourceDbType"
+                    options={dbSourceTypeOptions}
+                  />
                 </FormItem>
 
                 <FormItem
@@ -635,23 +594,10 @@ function FormFields({
                   errorMessage={errors.cultureName}
                   asterisk={true}
                 >
-                  <Field
-                    type="text"
-                    autoComplete="off"
+                  <SelectField
                     name="cultureName"
-                    placeholder={translate('::App.Listform.ListformField.CultureName')}
-                  >
-                    {({ field, form }: FieldProps<LanguageInfo>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={langOptions}
-                        value={langOptions.filter((option) => option.value === values.cultureName)}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                    options={langOptions}
+                  />
                 </FormItem>
 
                 <FormItem
@@ -659,23 +605,10 @@ function FormFields({
                   invalid={errors.roleId && touched.roleId}
                   errorMessage={errors.roleId}
                 >
-                  <Field
-                    type="text"
-                    autoComplete="off"
+                  <SelectField
                     name="roleId"
-                    placeholder={translate('::ListForms.ListFormField.Role')}
-                  >
-                    {({ field, form }: FieldProps<IdentityRoleDto>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        options={roleList}
-                        isClearable={true}
-                        value={roleList.filter((option) => option.value === values.roleId)}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                    options={roleList}
+                  />
                 </FormItem>
 
                 <FormItem
@@ -683,23 +616,10 @@ function FormFields({
                   invalid={errors.userId && touched.userId}
                   errorMessage={errors.userId}
                 >
-                  <Field
-                    type="text"
-                    autoComplete="off"
+                  <SelectField
                     name="userId"
-                    placeholder={translate('::ListForms.ListFormField.User')}
-                  >
-                    {({ field, form }: FieldProps<IdentityUserDto>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        options={userList}
-                        isClearable={true}
-                        value={userList.filter((option) => option.value === values.userId)}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                    options={userList}
+                  />
                 </FormItem>
 
                 <Button block size="sm" variant="solid" loading={isSubmitting} type="submit">
@@ -819,25 +739,10 @@ function FormFields({
                   invalid={errors.sourceFieldName && touched.sourceFieldName}
                   errorMessage={errors.sourceFieldName}
                 >
-                  <Field
-                    type="text"
-                    autoFocus={true}
+                  <SelectField
                     name="sourceFieldName"
-                    placeholder={translate('::ListForms.ListFormField.CopySourceFieldName')}
-                  >
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={fieldList}
-                        value={fieldList.filter(
-                          (option) => option.value === values.sourceFieldName,
-                        )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                    options={fieldList}
+                  />
                 </FormItem>
 
                 <FormItem
@@ -859,20 +764,10 @@ function FormFields({
                   invalid={errors.sourceCultureName && touched.sourceCultureName}
                   errorMessage={errors.sourceCultureName}
                 >
-                  <Field type="text" name="sourceCultureName" placeholder="Source Culture Name">
-                    {({ field, form }: FieldProps<LanguageInfo>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={langOptions}
-                        value={langOptions.filter(
-                          (option) => option.value === values.sourceCultureName,
-                        )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                  <SelectField
+                    name="sourceCultureName"
+                    options={langOptions}
+                  />
                 </FormItem>
 
                 <FormItem
@@ -880,20 +775,10 @@ function FormFields({
                   invalid={errors.targetCultureName && touched.targetCultureName}
                   errorMessage={errors.targetCultureName}
                 >
-                  <Field type="text" name="targetCultureName" placeholder="Target Culture Name">
-                    {({ field, form }: FieldProps<LanguageInfo>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={langOptions}
-                        value={langOptions.filter(
-                          (option) => option.value === values.targetCultureName,
-                        )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                  <SelectField
+                    name="targetCultureName"
+                    options={langOptions}
+                  />
                 </FormItem>
 
                 <FormItem
@@ -901,18 +786,10 @@ function FormFields({
                   invalid={errors.roleId && touched.roleId}
                   errorMessage={errors.roleId}
                 >
-                  <Field type="text" autoComplete="off" name="roleId" placeholder="Role">
-                    {({ field, form }: FieldProps<IdentityRoleDto>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={roleList}
-                        value={roleList.filter((option) => option.value === values.roleId)}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                  <SelectField
+                    name="roleId"
+                    options={roleList}
+                  />
                 </FormItem>
 
                 <FormItem
@@ -920,23 +797,10 @@ function FormFields({
                   invalid={errors.userId && touched.userId}
                   errorMessage={errors.userId}
                 >
-                  <Field
-                    type="text"
-                    autoComplete="off"
+                  <SelectField
                     name="userId"
-                    placeholder={translate('::ListForms.ListFormField.User')}
-                  >
-                    {({ field, form }: FieldProps<IdentityUserDto>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={userList}
-                        value={userList.filter((option) => option.value === values.userId)}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
+                    options={userList}
+                  />
                 </FormItem>
                 <div className="grid grid-cols-4 gap-4">
                   <FormItem label={translate('::App.Reports.Search')} labelClass="justify-center">
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
index 6c72ad2d..d59567ac 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
@@ -38,8 +38,9 @@ import { BreakDto } from '@/proxy/admin/charts/models'
 
 const schema = Yup.object().shape({
   visible: Yup.boolean().notRequired(),
-  valueType: Yup.string().notRequired(),
-  type: Yup.string().notRequired(),
+  // Eksen tipi listesindeki "None" seçeneği null döndürüyor.
+  valueType: Yup.string().nullable().notRequired(),
+  type: Yup.string().nullable().notRequired(),
   position: Yup.string().notRequired(),
   name: Yup.string().required(),
   title: Yup.string().notRequired(),
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
index 832bb090..8084fda3 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
@@ -52,7 +52,7 @@ const schema = object().shape({
     visible: boolean().notRequired(),
     backgroundColor: string().notRequired(),
     customizeText: string().notRequired(),
-    format: string().notRequired(),
+    format: string().nullable().notRequired(),
     font: object().shape({
       color: string().notRequired(),
       family: string().notRequired(),
diff --git a/ui/src/views/admin/listForm/edit/shared/SelectField.tsx b/ui/src/views/admin/listForm/edit/shared/SelectField.tsx
new file mode 100644
index 00000000..c4a1bfd6
--- /dev/null
+++ b/ui/src/views/admin/listForm/edit/shared/SelectField.tsx
@@ -0,0 +1,54 @@
+import { Select } from '@/components/ui'
+import { SelectBoxOption } from '@/types/shared'
+import { Field, FieldProps } from 'formik'
+
+/**
+ * ListForm düzenleme ekranlarındaki standart "Formik + Select" alanı.
+ *
+ * Bu kalıp klasör genelinde 100'den fazla yerde satır satır kopyalanmıştı ve
+ * her kopyada seçili değer `values.<alan>` üzerinden ayrıca yazıldığı için
+ * alan adı ile okunan değerin uyuşmadığı kopyala-yapıştır hataları oluşuyordu.
+ * Burada değer doğrudan Formik alanından okunur; uyuşmazlık mümkün değildir.
+ */
+type SelectFieldProps = {
+  name: string
+  options: readonly any[]
+  placeholder?: string
+  /** Varsayılan true; zorunlu alanlarda false verilmeli. */
+  isClearable?: boolean
+  isDisabled?: boolean
+  /**
+   * Seçim sonrası ek iş yapmak için (bağlı alanları temizlemek gibi).
+   * Alanın kendi değeri zaten yazılmış olarak çağrılır.
+   */
+  onValueChange?: (value: any, form: FieldProps['form']) => void
+}
+
+const SelectField = ({
+  name,
+  options,
+  placeholder,
+  isClearable = true,
+  isDisabled,
+  onValueChange,
+}: SelectFieldProps) => (
+  <Field name={name}>
+    {({ field, form }: FieldProps<SelectBoxOption>) => (
+      <Select
+        field={field}
+        form={form}
+        isClearable={isClearable}
+        isDisabled={isDisabled}
+        options={options as any}
+        placeholder={placeholder}
+        value={options.find((option) => option?.value === field.value) ?? null}
+        onChange={(option: any) => {
+          form.setFieldValue(name, option?.value)
+          onValueChange?.(option?.value, form)
+        }}
+      />
+    )}
+  </Field>
+)
+
+export default SelectField