Claude güncellemesi FormTab güncellemeri optimizasyon

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({
+// Bu sekme ListForm nesnesinin tamamını düzenler; `name` / `title` / `height`
-  name: string().required(),
+// 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)

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({
+// Bu sekme ListForm nesnesinin tamamını düzenler; `name` / `title` / `height`
-  name: string().required(),
+// gibi alanların girdisi burada yok. Şema bu alanları zorunlu tutuyordu ve
-  title: string().required(),
+// 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)

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({
+// Bu sekme ListForm nesnesinin tamamını düzenler; `name` / `title` / `height`
-  height: string().required(),
+// gibi alanların girdisi burada yok. Şema bu alanları zorunlu tutuyordu ve
-  name: string().required(),
+// ListForm'da boş olduklarında Kaydet hiçbir mesaj vermeden çalışmıyordu.
-  backgroundColor: string().notRequired(),
+// (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)

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({
+// Bu sekme ListForm nesnesinin tamamını düzenler; `name` / `title` / `height`
-  name: string().required(),
+// 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)

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) => {

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) => {

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) => {

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) => {

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) => {

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(),
+  permissionDto: object().shape({
-  r: string(),
+    c: string().nullable(),
-  u: string(),
+    r: string().nullable(),
-  d: string(),
+    u: string().nullable(),
-  e: string(),
+    d: string().nullable(),
-  i: string(),
+    e: string().nullable(),
-  n: string(),
+    i: string().nullable(),
+    n: string().nullable(),
+  }),
 })
 
 function FormTabPermissions(props: FormEditProps) {

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) => {

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} />

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">
+                  <SelectField
-                    {({ field, form }: FieldProps<ColumnRowTypeListOptions>) => (
+                    name="rowType"
-                      <Select
-                        field={field}
-                        form={form}
                     options={columnRowTypeListOptions}
-                        value={columnRowTypeListOptions.filter(
+                    isClearable={false}
-                          (option: any) => option.value === values.rowType,
-                        )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
                   />
-                    )}
-                  </Field>
                 </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">
+                  <SelectField
-                    {({ field, form }: FieldProps<ColumnValidationComparisonTypeEnum>) => (
+                    name="condition"
-                      <Select
-                        field={field}
-                        form={form}
                     options={columnValidationComparisonTypeListOptions}
-                        value={columnValidationComparisonTypeListOptions.filter(
+                    isClearable={false}
-                          (option: any) => option.value === values.condition,
-                        )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
                   />
-                    )}
-                  </Field>
                 </FormItem>
 
                 <FormItem

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">
+                <SelectField
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                  name="columnCustomizationDto.fixedPosition"
-                    <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>
               </FormItem>
 
               <Button block size="sm" className="mt-1" variant="solid" loading={isSubmitting} type="submit">

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">
+                <SelectField
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                  name="sourceDbType"
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={false}
                   options={dbSourceTypeOptions}
-                      value={dbSourceTypeOptions.filter(
+                  isClearable={false}
-                        (option: any) => option.value === values.sourceDbType,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
                 />
-                  )}
-                </Field>
               </FormItem>
               <FormItem label={translate('::ListForms.ListFormFieldEdit.DetailsAlignment')}>
-                <Field type="text" name="alignment">
+                <SelectField
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                  name="alignment"
-                    <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>
               </FormItem>
               <FormItem label={translate('::ListForms.ListFormFieldEdit.DetailsFormat')}>
-                <Field type="text" name="format">
+                <SelectField
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                  name="format"
-                    <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>
               </FormItem>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.DetailsEditorOptions')}

ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx

@@ -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

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
+                <SelectField
-                  type="text"
-                  autoComplete="off"
                   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>
               </FormItem>
 
               <FormItem
@@ -171,25 +157,10 @@ function FormFieldTabJoinOptions({
                 }
                 errorMessage={errors.columnJoinTableDto?.joinCondition2}
               >
-                <Field
+                <SelectField
-                  type="text"
-                  autoComplete="off"
                   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>
               </FormItem>
 
               <FormItem

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
+                <SelectField
-                  type="text"
-                  autoComplete="off"
                   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>
               </FormItem>
 
               <FormItem
@@ -406,27 +391,10 @@ function FormFieldTabLookup({
                 }
                 errorMessage={errors.lookupDto?.cascadeFilterOperator}
               >
-                <Field
+                <SelectField
-                  type="text"
-                  autoComplete="off"
                   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>
               </FormItem>
 
               <FormItem

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">
+                <SelectField
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                  name="sortDirection"
-                    <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>
               </FormItem>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.OptionsSortIndex')}

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
+                <SelectField
-                  type="text"
-                  autoComplete="off"
                   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>
               </FormItem>
               <FormItem
                 label={translate('::Create')}

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(),
+    format: string().nullable(),
-    summaryType: string(),
+    summaryType: string().nullable(),
-    groupInterval: string(),
+    groupInterval: string().nullable(),
     wordWrapEnabled: boolean(),
   }),
 })
@@ -60,25 +62,10 @@ function FormFieldTabPivotSetting({
                 invalid={errors.pivotSettingsDto?.area && touched.pivotSettingsDto?.area}
                 errorMessage={errors.pivotSettingsDto?.area}
               >
-                <Field
+                <SelectField
-                  type="text"
-                  autoComplete="off"
                   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>
               </FormItem>
 
               <FormItem
@@ -86,25 +73,10 @@ function FormFieldTabPivotSetting({
                 invalid={errors.pivotSettingsDto?.format && touched.pivotSettingsDto?.format}
                 errorMessage={errors.pivotSettingsDto?.format}
               >
-                <Field
+                <SelectField
-                  type="text"
-                  autoComplete="off"
                   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>
               </FormItem>
 
               <FormItem
@@ -114,25 +86,10 @@ function FormFieldTabPivotSetting({
                 }
                 errorMessage={errors.pivotSettingsDto?.summaryType}
               >
-                <Field
+                <SelectField
-                  type="text"
-                  autoComplete="off"
                   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>
               </FormItem>
             </Card>
 
@@ -144,25 +101,10 @@ function FormFieldTabPivotSetting({
                 }
                 errorMessage={errors.pivotSettingsDto?.groupInterval}
               >
-                <Field
+                <SelectField
-                  type="text"
-                  autoComplete="off"
                   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>
               </FormItem>
 
               <FormItem
@@ -170,25 +112,10 @@ function FormFieldTabPivotSetting({
                 invalid={errors.pivotSettingsDto?.sortOrder && touched.pivotSettingsDto?.sortOrder}
                 errorMessage={errors.pivotSettingsDto?.sortOrder}
               >
-                <Field
+                <SelectField
-                  type="text"
-                  autoComplete="off"
                   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>
               </FormItem>
 
               <FormItem

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

ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx

@@ -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

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">
+                  <SelectField
-                    {({ field, form }: FieldProps<ColumnValidationTypeListEnum>) => (
+                    name="type"
-                      <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>
                 </FormItem>
 
                 <FormItem
@@ -290,25 +280,10 @@ function FormFieldTabValidationRules({
                   invalid={errors.comparisonType && touched.comparisonType}
                   errorMessage={errors.comparisonType}
                 >
-                  <Field
+                  <SelectField
-                    type="text"
-                    autoComplete="off"
                     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>
                 </FormItem>
 
                 <FormItem

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">
+                <SelectField
-                  {({ field, form }: FieldProps<LanguageInfo>) => (
+                  name="cultureName"
-                    <Select
-                      placeholder={translate('::App.Listform.ListformField.CultureName')}
-                      field={field}
-                      form={form}
                   options={langOptions}
-                      isClearable={true}
+                  placeholder={translate('::App.Listform.ListformField.CultureName')}
-                      value={langOptions.filter((option) => option.value === values?.cultureName)}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
                 />
-                  )}
-                </Field>
               </FormItem>
               <FormItem invalid={errors.roleId && touched.roleId} errorMessage={errors.roleId}>
-                <Field type="text" name="roleId">
+                <SelectField
-                  {({ field, form }: FieldProps<IdentityRoleDto>) => (
+                  name="roleId"
-                    <Select
-                      placeholder={translate('::ListForms.ListFormField.Role')}
-                      field={field}
-                      form={form}
                   options={roleList}
-                      isClearable={true}
+                  placeholder={translate('::ListForms.ListFormField.Role')}
-                      value={roleList.filter((option) => option.value === values.roleId)}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
                 />
-                  )}
-                </Field>
               </FormItem>
               <FormItem invalid={errors.userId && touched.userId} errorMessage={errors.userId}>
-                <Field type="text" name="userId">
+                <SelectField
-                  {({ field, form }: FieldProps<IdentityUserDto>) => (
+                  name="userId"
-                    <Select
-                      placeholder={translate('::ListForms.ListFormField.User')}
-                      field={field}
-                      form={form}
                   options={userList}
-                      isClearable={true}
+                  placeholder={translate('::ListForms.ListFormField.User')}
-                      value={userList.filter((option) => option.value === values.userId)}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
                 />
-                  )}
-                </Field>
               </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">
+                  <SelectField
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    name="fieldName"
-                      <Select
-                        field={field}
-                        form={form}
                     options={columnOptions}
-                        isClearable={true}
+                    // Sütun seçilince veri tipi kaynaktan otomatik doldurulur.
-                        value={columnOptions.filter((option) => option.value === values.fieldName)}
+                    onValueChange={(value, form) =>
-                        onChange={(option) => {
-                          form.setFieldValue(field.name, option?.value)
                       form.setFieldValue(
                         'sourceDbType',
                         sqlDataTypeToDbType(
-                              columns.find((c) => c.columnName === option?.value)?.dataType || '',
+                          columns.find((column) => column.columnName === value)?.dataType || '',
                         ) as any,
                       )
-                        }}
+                    }
                   />
-                    )}
-                  </Field>
                 </FormItem>
 
                 <FormItem label={translate('::ListForms.ListFormEdit.CustomValueType')}>
-                  <Field type="text" name="sourceDbType">
+                  <SelectField
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    name="sourceDbType"
-                      <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>
                 </FormItem>
 
                 <FormItem
@@ -635,23 +594,10 @@ function FormFields({
                   errorMessage={errors.cultureName}
                   asterisk={true}
                 >
-                  <Field
+                  <SelectField
-                    type="text"
-                    autoComplete="off"
                     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>
                 </FormItem>
 
                 <FormItem
@@ -659,23 +605,10 @@ function FormFields({
                   invalid={errors.roleId && touched.roleId}
                   errorMessage={errors.roleId}
                 >
-                  <Field
+                  <SelectField
-                    type="text"
-                    autoComplete="off"
                     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>
                 </FormItem>
 
                 <FormItem
@@ -683,23 +616,10 @@ function FormFields({
                   invalid={errors.userId && touched.userId}
                   errorMessage={errors.userId}
                 >
-                  <Field
+                  <SelectField
-                    type="text"
-                    autoComplete="off"
                     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>
                 </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
+                  <SelectField
-                    type="text"
-                    autoFocus={true}
                     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>
                 </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">
+                  <SelectField
-                    {({ field, form }: FieldProps<LanguageInfo>) => (
+                    name="sourceCultureName"
-                      <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>
                 </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">
+                  <SelectField
-                    {({ field, form }: FieldProps<LanguageInfo>) => (
+                    name="targetCultureName"
-                      <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>
                 </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">
+                  <SelectField
-                    {({ field, form }: FieldProps<IdentityRoleDto>) => (
+                    name="roleId"
-                      <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>
                 </FormItem>
 
                 <FormItem
@@ -920,23 +797,10 @@ function FormFields({
                   invalid={errors.userId && touched.userId}
                   errorMessage={errors.userId}
                 >
-                  <Field
+                  <SelectField
-                    type="text"
-                    autoComplete="off"
                     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>
                 </FormItem>
                 <div className="grid grid-cols-4 gap-4">
                   <FormItem label={translate('::App.Reports.Search')} labelClass="justify-center">

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(),
+  // Eksen tipi listesindeki "None" seçeneği null döndürüyor.
-  type: Yup.string().notRequired(),
+  valueType: Yup.string().nullable().notRequired(),
+  type: Yup.string().nullable().notRequired(),
   position: Yup.string().notRequired(),
   name: Yup.string().required(),
   title: Yup.string().notRequired(),

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(),

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