FormType bilgisi değişinci ilgili tablar görünmeli

api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/LayoutDto.cs

@@ -5,6 +5,7 @@ public class LayoutDto
     public bool Grid { get; set; } = true;
     public bool Card { get; set; } = true;
     public bool Pivot { get; set; } = true;
+    public bool Chart { get; set; } = true;
     public string DefaultLayout { get; set; } = "grid";
     public int CardLayoutColumn { get; set; } = 4;
 }

api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json

@@ -12517,6 +12517,12 @@
             "en": "Pivot Layout",
             "tr": "Pivot Düzeni"
         },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.DetailsLayoutDto.ChartLayout",
+            "en": "Chart Layout",
+            "tr": "Grafik Düzeni"
+        },
         {
             "resourceName": "Platform",
             "key": "ListForms.ListFormEdit.DetailsLayoutDto.DefaultLayout",

ui/public/version.json

@@ -1,6 +1,102 @@
 {
-  "commit": "a8dbf4c",
+  "commit": "d731943",
   "releases": [
+    {
+      "version": "1.0.28",
+      "buildDate": "2025-09-24",
+      "commit": "948925816f3fc5808a07bf0ce6fd86e0ac880ec7",
+      "changeLog": [
+        "Vite güncellemesi ile artık versiyon bilgileri düzelecek ve cache problemi düzelmeli"
+      ]
+    },
+    {
+      "version": "1.0.27",
+      "buildDate": "2025-09-24",
+      "commit": "6e3f58ce9d3e7bc79c74dfc33ec79d115b7160a2",
+      "changeLog": [
+        "FormView, FormNew, Grid Popup için Script özelliği eklendi. Ayrıca itemlara buton eklenebiliyor.",
+        "Sadece textbox olan inputlara ekleniyor. Diğer komponenler için render özelliği kullanılması gerekiyor."
+      ]
+    },
+    {
+      "version": "1.0.26",
+      "buildDate": "2025-09-23",
+      "commit": "ea5dbe91f5abd0a7408b75cc111c3119fbb8eb53",
+      "changeLog": [
+        "Liste, Pivot ve Card görünümü düzeltildi.",
+        "Menü ikonları Listelerde gösterildi.",
+        "Form detayında Subform filtreleri çalıştırıldı.",
+        "Grid proplarına gridDto gelmiyorsa kendi başının çaresine bakacak şekilde düzenlendi."
+      ]
+    },
+    {
+      "version": "1.0.25",
+      "buildDate": "2025-09-23",
+      "commit": "d4f994b7b17bd96c45ed868e4c94d18ca757e217",
+      "changeLog": [
+        "Genel düzenlemeler"
+      ]
+    },
+    {
+      "version": "1.0.24",
+      "buildDate": "2025-09-23",
+      "commit": "f62c35dec957dae225ab93811a0899c975cecf52",
+      "changeLog": [
+        "BaseModel LocalStorage açıldı.",
+        "ListeForm Layout ve CardColumnCount eklendi.",
+        "FormView, FormEdit ve FormNew den geri butonu ile Liste kaldığı yerden devam edebilecek."
+      ]
+    },
+    {
+      "version": "1.0.23",
+      "buildDate": "2025-09-23",
+      "commit": "e92143fd055b9db1a8932f2c4d0b81172b19ef00",
+      "changeLog": [
+        "Vite üzerinde html dosyaları cacheleme"
+      ]
+    },
+    {
+      "version": "1.0.22",
+      "buildDate": "2025-09-23",
+      "commit": "226410e7a928a54f01dd7f5305bf09fb7dcbc59d",
+      "changeLog": [
+        "MenuIcon için hook hazırladı. Liste, FormEdit, FormView ve FormNew de kullanılabilir."
+      ]
+    },
+    {
+      "version": "1.0.21",
+      "buildDate": "2025-09-23",
+      "commit": "fcd6547dcb85d46d90d78eaa24788d7cc079d1b3",
+      "changeLog": [
+        "Versiyon güncellemeleri sistemin son aşama; eğer versiyon bilgisi değişmiş ise ChangeLog sayfasına yönlendirildi."
+      ]
+    },
+    {
+      "version": "1.0.19",
+      "buildDate": "2025-09-23",
+      "commit": "43a945969174dd50b798d0d619e5fb7932402d04",
+      "changeLog": [
+        "Docker içerisinden diskclean script kaldırıldı. Ayrıca çalıştırılabilecek şekilde diskclean dizinin içerisinde sh dosyası mevcut."
+      ]
+    },
+    {
+      "version": "1.0.18",
+      "buildDate": "2025-09-23",
+      "commit": "09566cce3b6750ad1f6ef2faad24b81d21dfd668",
+      "changeLog": [
+        "\"build\": \"node scripts/generate-version.js && vite build\"",
+        "\"build:production\": \"vite build\",",
+        "Yukarıdaki şekilde hem developer hem de production ortamı build işlemi birbirinden ayrıldı."
+      ]
+    },
+    {
+      "version": "1.0.17",
+      "buildDate": "2025-09-23",
+      "commit": "5456486692eb070601313ab439de9c33a977b15b",
+      "changeLog": [
+        "Hem developer hem de production için versiyon güncellemesi"
+      ]
+    },
     {
       "version": "1.0.16",
       "buildDate": "2025-09-23",
@@ -22,7 +118,7 @@
     {
       "version": "1.0.14",
       "buildDate": "2025-09-22",
-      "commit": "1c4ab4f8232b4cd2a39fa66f8101664840113ce5",
+      "commit": "51208b86937484d68b699120d74872067b1c7ef6",
       "changeLog": [
         "Yeni versiyon çıktı uyarı gelecek şekilde düzenlendi.",
         "Sağ alt kısımda mesaj çıkacak ve yenile butonu ile uygulama yeni versiyona geçecektir."

ui/src/proxy/admin/list-form/models.ts

@@ -52,73 +52,3 @@ export interface ListFormJsonRowDto {
   itemChartValueAxis?: ChartValueAxisDto
 }
 
-export const ListFormEditTabs = {
-  DetailsForm: 'details',
-  Database: {
-    DataSourceForm: 'database.dataSource',
-    Select: {
-      SelectForm: 'database.select.form',
-      SelectFieldsDefaultValuesJsonRow: 'database.select.fields',
-    },
-    Insert: {
-      InsertForm: 'database.insert.form',
-      InsertFieldsDefaultValuesJsonRow: 'database.insert.fields',
-      FormFieldsDefaultValuesJsonRow: 'database.insert.formFields',
-    },
-    Update: {
-      UpdateForm: 'database.update.form',
-      UpdateFieldsDefaultValuesJsonRow: 'database.update.fields',
-    },
-    Delete: {
-      DeleteForm: 'database.delete.form',
-      DeleteFieldsDefaultValuesJsonRow: 'database.delete.fields',
-    },
-  },
-  PermissionForm: 'permission',
-  CommandColumnsJsonRow: 'commandColumn',
-  Edit: {
-    EditForm: 'edit.form',
-    EditingFormFieldsJsonRow: 'edit.formFields',
-  },
-  FilterForm: 'filter',
-  SearchForm: 'search',
-  GroupForm: 'group',
-  SelectForm: 'select',
-  ColumnForm: 'column',
-  PivotForm: 'pivot',
-  PagerForm: 'pager',
-  StateForm: 'state',
-  SubForm: 'subForm',
-  Widget: 'widget',
-  Fields: 'fields',
-  Customization: 'customization',
-  ExtraFilter: 'extraFilter',
-  //Chart Tabs
-  ChartCommon: 'chartCommon',
-  ChartSeries: {
-    GeneralJsonRow: 'chartSeries.general',
-    CommonSeriesSettingForm: 'chartSeries.commonSetting',
-  },
-  ChartAxis: {
-    ValueAxisJsonRow: 'chartAxis.valueAxis',
-    CommonAxisForm: 'chartAxis.commonAxis',
-  },
-  ChartPanes: {
-    CommonPanesSettingForm: 'chartPanes.commonSetting',
-    PanesJsonRow: 'chartPanes.panes',
-  },
-  ChartAnimationForm: 'chartAnimation',
-  ChartAnnotations: {
-    GeneralJsonRow: 'chartAnnotations.general',
-    CommonPaneForm: 'chartAnnotations.commonPane',
-  },
-  ChartZoomForm: 'chartZoom',
-  ChartLegendForm: 'chartLegend',
-  ChartExportForm: 'chartExport',
-  ChartCrosshairForm: 'chartCrosshair',
-} as const
-
-export const extraFilterControlTypeOptions = [
-  { value: 'Select', label: 'Select' },
-  { value: 'TextBox', label: 'TextBox' },
-]

ui/src/proxy/admin/list-form/options.ts

@@ -0,0 +1,120 @@
+export const extraFilterControlTypeOptions = [
+  { value: 'Select', label: 'Select' },
+  { value: 'TextBox', label: 'TextBox' },
+]
+
+export const ListFormEditTabs = {
+  DetailsForm: 'details',
+  Database: {
+    DataSourceForm: 'database.dataSource',
+    Select: {
+      SelectForm: 'database.select.form',
+      SelectFieldsDefaultValuesJsonRow: 'database.select.fields',
+    },
+    Insert: {
+      InsertForm: 'database.insert.form',
+      InsertFieldsDefaultValuesJsonRow: 'database.insert.fields',
+      FormFieldsDefaultValuesJsonRow: 'database.insert.formFields',
+    },
+    Update: {
+      UpdateForm: 'database.update.form',
+      UpdateFieldsDefaultValuesJsonRow: 'database.update.fields',
+    },
+    Delete: {
+      DeleteForm: 'database.delete.form',
+      DeleteFieldsDefaultValuesJsonRow: 'database.delete.fields',
+    },
+  },
+  PermissionForm: 'permission',
+  CommandColumnsJsonRow: 'commandColumn',
+  Edit: {
+    EditForm: 'edit.form',
+    EditingFormFieldsJsonRow: 'edit.formFields',
+  },
+  FilterForm: 'filter',
+  SearchForm: 'search',
+  GroupForm: 'group',
+  SelectForm: 'select',
+  ColumnForm: 'column',
+  PivotForm: 'pivot',
+  PagerForm: 'pager',
+  StateForm: 'state',
+  SubForm: 'subForm',
+  Widget: 'widget',
+  Fields: 'fields',
+  Customization: 'customization',
+  ExtraFilter: 'extraFilter',
+  //Chart Tabs
+  ChartCommon: 'chartCommon',
+  ChartSeries: {
+    GeneralJsonRow: 'chartSeries.general',
+    CommonSeriesSettingForm: 'chartSeries.commonSetting',
+  },
+  ChartAxis: {
+    ValueAxisJsonRow: 'chartAxis.valueAxis',
+    CommonAxisForm: 'chartAxis.commonAxis',
+  },
+  ChartPanes: {
+    CommonPanesSettingForm: 'chartPanes.commonSetting',
+    PanesJsonRow: 'chartPanes.panes',
+  },
+  ChartAnimationForm: 'chartAnimation',
+  ChartAnnotations: {
+    GeneralJsonRow: 'chartAnnotations.general',
+    CommonPaneForm: 'chartAnnotations.commonPane',
+  },
+  ChartZoomForm: 'chartZoom',
+  ChartLegendForm: 'chartLegend',
+  ChartExportForm: 'chartExport',
+  ChartCrosshairForm: 'chartCrosshair',
+} as const
+
+export const tabVisibilityConfig: Record<string, string[]> = {
+    List: [
+      'details',
+      'database',
+      'permissions',
+      'commands',
+      'edit',
+      'filterRow',
+      'search',
+      'group',
+      'select',
+      'columns',
+      'pivots',
+      'pager',
+      'state',
+      'extrafilter',
+      'customization',
+      'fields',
+      'editForm',
+      'widget',
+    ],
+    Form: [
+      'details',
+      'database',
+      'permissions',
+      'commands',
+      'edit',
+      'fields',
+      'editForm',
+      'widget',
+      'subForms',
+    ],
+    Chart: [
+      'details',
+      'database',
+      'permissions',
+      'widget',
+      'commonSettings',
+      'series',
+      'axis',
+      'panes',
+      'animationsOptions',
+      'annotations',
+      'zoomAndPanSettings',
+      'legendSettings',
+      'exportSettings',
+      'crosshairOptions',
+    ],
+  }

ui/src/proxy/form/models.ts

@@ -808,7 +808,8 @@ export interface LayoutDto {
   grid: boolean
   card: boolean
   pivot: boolean
-  defaultLayout: 'grid' | 'card' | 'pivot'
+  chart: boolean
+  defaultLayout: 'grid' | 'card' | 'pivot' | 'chart'
   cardLayoutColumn: number
 }
 

ui/src/views/admin/listForm/edit/ChartTabAnimation.tsx

@@ -4,7 +4,7 @@ import { Field, FieldProps, Form, Formik } from 'formik'
 import { object } from 'yup'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { chartEasingListOptions } from './options'
 

ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx

@@ -24,7 +24,7 @@ import { object, string } from 'yup'
 import { FormEditProps } from './FormEdit'
 import { useStoreState } from '@/store/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import {
   chartAnnotationTypeListOptions,
   chartWordWrapListOptions,

ui/src/views/admin/listForm/edit/ChartTabAxis.tsx

@@ -23,7 +23,7 @@ import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { object, string } from 'yup'
 import {
   chartArgumentAxisHoverModeListOptions,

ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx

@@ -18,7 +18,7 @@ import { themeOptions, tooltipFormatListOptions } from '@/shared/options'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { object } from 'yup'
 import {
   chartPaletteOptions,

ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx

@@ -5,7 +5,7 @@ import { Field, FieldProps, Form, Formik } from 'formik'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { object } from 'yup'
 import { chartSeriesDashStyleOptions } from './options'
 

ui/src/views/admin/listForm/edit/ChartTabExport.tsx

@@ -3,7 +3,7 @@ import { Field, Form, Formik } from 'formik'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { object } from 'yup'
 
 const schema = object()

ui/src/views/admin/listForm/edit/ChartTabLegend.tsx

@@ -16,7 +16,7 @@ import { Field, FieldProps, Form, Formik } from 'formik'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { object } from 'yup'
 import {
   chartLegendOrientationListOptions,

ui/src/views/admin/listForm/edit/ChartTabPanes.tsx

@@ -9,7 +9,7 @@ import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useStoreState } from '@/store/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { object, string } from 'yup'
 import { JsonRowDialogData } from './json-row-operations/types'
 import { useState } from 'react'

ui/src/views/admin/listForm/edit/ChartTabSeries.tsx

@@ -22,7 +22,7 @@ import { SelectBoxOption } from '@/shared/types'
 import { Field, FieldProps, Form, Formik } from 'formik'
 import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
 import { object, string } from 'yup'

ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx

@@ -2,7 +2,7 @@ import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '
 import { SelectBoxOption } from '@/shared/types'
 import { Field, FieldProps, Form, Formik } from 'formik'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
 import { object } from 'yup'

ui/src/views/admin/listForm/edit/FormEdit.tsx

@@ -38,12 +38,6 @@ import FormTabEditForm from './FormTabEditForm'
 import FormTabPivots from './FormTabPivots'
 import ChartTabAnimation from './ChartTabAnimation'
 import ChartTabAnnotations from './ChartTabAnnotations'
-import {
-  ChartAnnotationDto,
-  ChartPanesDto,
-  ChartSeriesDto,
-  ChartValueAxisDto,
-} from '@/proxy/admin/charts/models'
 import ChartTabZoomAndPan from './ChartTabZoomAndPan'
 import ChartTabLegend from './ChartTabLegend'
 import ChartTabExport from './ChartTabExport'
@@ -52,6 +46,7 @@ import ChartTabCommonSettings from './ChartTabCommonSettings'
 import ChartTabSeries from './ChartTabSeries'
 import ChartTabAxis from './ChartTabAxis'
 import ChartTabPanes from './ChartTabPanes'
+import { tabVisibilityConfig } from '@/proxy/admin/list-form/options'
 
 export interface FormEditProps {
   onSubmit: (
@@ -129,7 +124,11 @@ const FormEdit = () => {
     await getRoleList()
     await getUserList()
   }
-  
+
+  const listFormType = listFormValues?.listFormType || 'List'
+  const [activeFormType, setActiveFormType] = useState<string>(listFormType)
+  const visibleTabs = tabVisibilityConfig[activeFormType] || []
+
   //LİST FORM ve LİST FORM FİELDS AİT BİLGİLER
   useEffect(() => {
     refreshData()
@@ -190,6 +189,120 @@ const FormEdit = () => {
       </div>
       <Tabs defaultValue="details" variant="pill">
         <TabList className="flex-wrap border-b mb-2 bg-slate-50">
+          {visibleTabs.includes('details') && (
+            <TabNav value="details">{translate('::ListForms.ListFormEdit.TabDetails')}</TabNav>
+          )}
+          {visibleTabs.includes('database') && (
+            <TabNav value="database">{translate('::ListForms.ListFormEdit.TabDatabase')}</TabNav>
+          )}
+          {visibleTabs.includes('permissions') && (
+            <TabNav value="permissions">
+              {translate('::ListForms.ListFormEdit.TabPermissions')}
+            </TabNav>
+          )}
+          {visibleTabs.includes('commands') && (
+            <TabNav value="commands">{translate('::ListForms.ListFormEdit.TabCommands')}</TabNav>
+          )}
+          {visibleTabs.includes('edit') && (
+            <TabNav value="edit">{translate('::ListForms.ListFormEdit.TabEditing')}</TabNav>
+          )}
+          {visibleTabs.includes('filterRow') && (
+            <TabNav value="filterRow">
+              {translate('::ListForms.ListFormEdit.TabFilteringSorting')}
+            </TabNav>
+          )}
+          {visibleTabs.includes('search') && (
+            <TabNav value="search">{translate('::ListForms.ListFormEdit.TabSearch')}</TabNav>
+          )}
+          {visibleTabs.includes('group') && (
+            <TabNav value="group">{translate('::ListForms.ListFormEdit.TabGrouping')}</TabNav>
+          )}
+          {visibleTabs.includes('select') && (
+            <TabNav value="select">{translate('::ListForms.ListFormEdit.TabSelection')}</TabNav>
+          )}
+          {visibleTabs.includes('columns') && (
+            <TabNav value="columns">{translate('::ListForms.ListFormEdit.TabColumns')}</TabNav>
+          )}
+          {visibleTabs.includes('pivots') && (
+            <TabNav value="pivots">{translate('::ListForms.ListFormEdit.TabPivots')}</TabNav>
+          )}
+          {visibleTabs.includes('pager') && (
+            <TabNav value="pager">{translate('::ListForms.ListFormEdit.TabPaging')}</TabNav>
+          )}
+          {visibleTabs.includes('state') && (
+            <TabNav value="state">{translate('::ListForms.ListFormEdit.TabState')}</TabNav>
+          )}
+          {visibleTabs.includes('extrafilter') && (
+            <TabNav value="extrafilter">
+              {translate('::ListForms.ListFormEdit.ExtraFilters')}
+            </TabNav>
+          )}
+          {visibleTabs.includes('fields') && (
+            <TabNav value="fields">{translate('::ListForms.ListFormEdit.TabFields')}</TabNav>
+          )}
+          {visibleTabs.includes('customization') && (
+            <TabNav value="customization">
+              {translate('::ListForms.ListFormEdit.TabCustomization')}
+            </TabNav>
+          )}
+          {visibleTabs.includes('editForm') && (
+            <TabNav value="editForm">{translate('::ListForms.ListFormEdit.EditingForm')}</TabNav>
+          )}
+          {visibleTabs.includes('subForms') && (
+            <TabNav value="subForms">{translate('::ListForms.ListFormEdit.TabSubForms')}</TabNav>
+          )}
+          {visibleTabs.includes('widget') && (
+            <TabNav value="widget">{translate('::ListForms.ListFormEdit.TabWidgets')}</TabNav>
+          )}
+
+          {/* Chart Tabs */}
+          {visibleTabs.includes('commonSettings') && (
+            <TabNav value="commonSettings">
+              {translate('::ListForms.ListFormEdit.TabChartCommon')}
+            </TabNav>
+          )}
+          {visibleTabs.includes('series') && (
+            <TabNav value="series">{translate('::ListForms.ListFormEdit.TabChartSeries')}</TabNav>
+          )}
+          {visibleTabs.includes('axis') && (
+            <TabNav value="axis">{translate('::ListForms.ListFormEdit.TabChartAxis')}</TabNav>
+          )}
+          {visibleTabs.includes('panes') && (
+            <TabNav value="panes">{translate('::ListForms.ListFormEdit.TabChartPanes')}</TabNav>
+          )}
+          {visibleTabs.includes('animationsOptions') && (
+            <TabNav value="animationsOptions">
+              {translate('::ListForms.ListFormEdit.TabChartAnimation')}
+            </TabNav>
+          )}
+          {visibleTabs.includes('annotations') && (
+            <TabNav value="annotations">
+              {translate('::ListForms.ListFormEdit.TabChartAnnotations')}
+            </TabNav>
+          )}
+          {visibleTabs.includes('zoomAndPanSettings') && (
+            <TabNav value="zoomAndPanSettings">
+              {translate('::ListForms.ListFormEdit.TabChartZoomAndPan')}
+            </TabNav>
+          )}
+          {visibleTabs.includes('legendSettings') && (
+            <TabNav value="legendSettings">
+              {translate('::ListForms.ListFormEdit.TabChartLegend')}
+            </TabNav>
+          )}
+          {visibleTabs.includes('exportSettings') && (
+            <TabNav value="exportSettings">
+              {translate('::ListForms.ListFormEdit.TabChartExport')}
+            </TabNav>
+          )}
+          {visibleTabs.includes('crosshairOptions') && (
+            <TabNav value="crosshairOptions">
+              {translate('::ListForms.ListFormEdit.TabChartCrosshair')}
+            </TabNav>
+          )}
+        </TabList>
+
+        {/* <TabList className="flex-wrap border-b mb-2 bg-slate-50">
           <TabNav value="details">{translate('::ListForms.ListFormEdit.TabDetails')}</TabNav>
           <TabNav value="database">{translate('::ListForms.ListFormEdit.TabDatabase')}</TabNav>
           <TabNav value="permissions">
@@ -239,9 +352,14 @@ const FormEdit = () => {
           <TabNav value="crosshairOptions">
             {translate('::ListForms.ListFormEdit.TabChartCrosshair')}
           </TabNav>
-        </TabList>
+        </TabList> */}
         <TabContent value="details">
-          <FormTabDetails onSubmit={onSubmit} roleList={roleList} userList={userList} />
+          <FormTabDetails
+            onSubmit={onSubmit}
+            roleList={roleList}
+            userList={userList}
+            onFormTypeChange={setActiveFormType}
+          />
         </TabContent>
         <TabContent value="database">
           <FormTabDatabase onSubmit={onSubmit} />

ui/src/views/admin/listForm/edit/FormTabColumns.tsx

@@ -9,7 +9,7 @@ import {
   Select,
   Tabs,
 } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { ColumnChooserMode, ColumnResizeMode } from 'devextreme/common/grids'

ui/src/views/admin/listForm/edit/FormTabCommands.tsx

@@ -5,7 +5,7 @@ import THead from '@/components/ui/Table/THead'
 import Td from '@/components/ui/Table/Td'
 import Th from '@/components/ui/Table/Th'
 import Tr from '@/components/ui/Table/Tr'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useState } from 'react'

ui/src/views/admin/listForm/edit/FormTabDatabaseDataSource.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/shared'
 import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { getDataSources } from '@/proxy/data-source'
 import { SelectBoxOption } from '@/shared/types'
 import { useStoreState } from '@/store'

ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx

@@ -5,7 +5,7 @@ import THead from '@/components/ui/Table/THead'
 import Td from '@/components/ui/Table/Td'
 import Th from '@/components/ui/Table/Th'
 import Tr from '@/components/ui/Table/Tr'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, Form, Formik } from 'formik'

ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx

@@ -5,7 +5,7 @@ import THead from '@/components/ui/Table/THead'
 import Td from '@/components/ui/Table/Td'
 import Th from '@/components/ui/Table/Th'
 import Tr from '@/components/ui/Table/Tr'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, Form, Formik } from 'formik'

ui/src/views/admin/listForm/edit/FormTabDatabaseSelect.tsx

@@ -5,7 +5,7 @@ import THead from '@/components/ui/Table/THead'
 import Td from '@/components/ui/Table/Td'
 import Th from '@/components/ui/Table/Th'
 import Tr from '@/components/ui/Table/Tr'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, Form, Formik } from 'formik'

ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx

@@ -5,7 +5,7 @@ import THead from '@/components/ui/Table/THead'
 import Td from '@/components/ui/Table/Td'
 import Th from '@/components/ui/Table/Th'
 import Tr from '@/components/ui/Table/Tr'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, Form, Formik } from 'formik'

ui/src/views/admin/listForm/edit/FormTabDetails.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/shared'
 import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { LanguageInfo } from '@/proxy/config/models'
 import { SelectBoxOption } from '@/shared/types'
 import { useStoreState } from '@/store'
@@ -29,7 +29,11 @@ const schema = Yup.object().shape({
 })
 
 function FormTabDetails(
-  props: FormEditProps & { roleList: SelectBoxOption[]; userList: SelectBoxOption[] },
+  props: FormEditProps & {
+    roleList: SelectBoxOption[]
+    userList: SelectBoxOption[]
+    onFormTypeChange: (formType: string) => void
+  },
 ) {
   const [langOptions, setLangOptions] = useState<SelectBoxOption[]>([])
   const { translate } = useLocalization()
@@ -107,7 +111,10 @@ function FormTabDetails(
                       value={listFormTypeOptions?.filter(
                         (option) => option.value === values.listFormType,
                       )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                      onChange={(option) => {
+                        form.setFieldValue(field.name, option?.value)
+                        props.onFormTypeChange(option?.value || 'List')
+                      }}
                     />
                   )}
                 </Field>
@@ -277,8 +284,8 @@ function FormTabDetails(
 
                 <FormItem
                   label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
-                  invalid={errors.layoutDto?.card && touched.layoutDto?.card}
+                  invalid={errors.layoutDto?.pivot && touched.layoutDto?.pivot}
-                  errorMessage={errors.layoutDto?.card}
+                  errorMessage={errors.layoutDto?.pivot}
                 >
                   <Field
                     className="w-20"
@@ -288,6 +295,20 @@ function FormTabDetails(
                     component={Checkbox}
                   />
                 </FormItem>
+
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.ChartLayout')}
+                  invalid={errors.layoutDto?.chart && touched.layoutDto?.chart}
+                  errorMessage={errors.layoutDto?.chart}
+                >
+                  <Field
+                    className="w-20"
+                    autoComplete="off"
+                    name="layoutDto.chart"
+                    placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.ChartLayout')}
+                    component={Checkbox}
+                  />
+                </FormItem>
               </div>
 
               <FormItem

ui/src/views/admin/listForm/edit/FormTabEdit.tsx

@@ -9,7 +9,7 @@ import {
   Select,
   Tabs,
 } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import {

ui/src/views/admin/listForm/edit/FormTabEditForm.tsx

@@ -5,7 +5,7 @@ import THead from '@/components/ui/Table/THead'
 import Td from '@/components/ui/Table/Td'
 import Th from '@/components/ui/Table/Th'
 import Tr from '@/components/ui/Table/Tr'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useState } from 'react'

ui/src/views/admin/listForm/edit/FormTabExtraFilters.tsx

@@ -5,7 +5,7 @@ import THead from '@/components/ui/Table/THead'
 import Td from '@/components/ui/Table/Td'
 import Th from '@/components/ui/Table/Th'
 import Tr from '@/components/ui/Table/Tr'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useState } from 'react'

ui/src/views/admin/listForm/edit/FormTabFilters.tsx

@@ -9,7 +9,7 @@ import {
   Select,
   Tabs,
 } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { ApplyFilterMode } from 'devextreme/common/grids'

ui/src/views/admin/listForm/edit/FormTabGroup.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/shared'
 import { Button, Checkbox, FormContainer, FormItem } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, Form, Formik } from 'formik'

ui/src/views/admin/listForm/edit/FormTabPager.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/shared'
 import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { ScrollMode } from 'devextreme/common'

ui/src/views/admin/listForm/edit/FormTabPermissions.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/shared'
 import { Button, FormContainer, FormItem, Select } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { SelectBoxOption } from '@/shared/types'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'

ui/src/views/admin/listForm/edit/FormTabPivots.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/shared'
 import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, FieldProps, Form, Formik } from 'formik'

ui/src/views/admin/listForm/edit/FormTabSearch.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/shared'
 import { Button, Checkbox, FormContainer, FormItem, Input } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, Form, Formik } from 'formik'

ui/src/views/admin/listForm/edit/FormTabSelect.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/shared'
 import { Button, Checkbox, FormContainer, FormItem, Select } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { SelectAllMode, SingleMultipleOrNone } from 'devextreme/common'

ui/src/views/admin/listForm/edit/FormTabState.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/shared'
 import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { StateStoreType } from 'devextreme/common/grids'

ui/src/views/admin/listForm/edit/FormTabSubForm.tsx

@@ -5,7 +5,7 @@ import THead from '@/components/ui/Table/THead'
 import Td from '@/components/ui/Table/Td'
 import Th from '@/components/ui/Table/Th'
 import Tr from '@/components/ui/Table/Tr'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useState } from 'react'

ui/src/views/admin/listForm/edit/FormTabWidgets.tsx

@@ -5,7 +5,7 @@ import THead from '@/components/ui/Table/THead'
 import Td from '@/components/ui/Table/Td'
 import Th from '@/components/ui/Table/Th'
 import Tr from '@/components/ui/Table/Tr'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useState } from 'react'

ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogDatabase.tsx

@@ -8,7 +8,8 @@ import {
   Select,
   toast,
 } from '@/components/ui'
-import { ListFormEditTabs, ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
+import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreActions } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, FieldProps, Form, Formik } from 'formik'

ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogExtraFilter.tsx

@@ -8,7 +8,7 @@ import {
   Select,
   toast,
 } from '@/components/ui'
-import { extraFilterControlTypeOptions, ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
+import {  ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
 import { SelectBoxOption } from '@/shared/types'
 import { useStoreActions, useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
@@ -26,6 +26,7 @@ import { cascadeFilterOperator, colSpanOptions } from '../options'
 import CreatableSelect from 'react-select/creatable'
 import { getListFormFields } from '@/services/admin/list-form-field.service'
 import { groupBy } from 'lodash'
+import { extraFilterControlTypeOptions } from '@/proxy/admin/list-form/options'
 
 const schema = object().shape({
   fieldName: string().required('Field Name Required'),

ui/src/views/admin/listForm/edit/json-row-operations/types.ts

@@ -4,7 +4,7 @@ import {
   ChartSeriesDto,
   ChartValueAxisDto,
 } from '@/proxy/admin/charts/models'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import {
   CommandColumnDto,
   EditingFormDto,

ui/src/views/admin/listForm/edit/options.ts

@@ -186,12 +186,14 @@ export const columnEditorTypeListOptions = [
 export const listFormTypeOptions = [
   { value: 'Form', label: 'Form' },
   { value: 'List', label: 'List' },
+  { value: 'Chart', label: 'Chart' },
 ]
 
 export const listFormDefaultLayoutOptions = [
   { value: 'grid', label: 'Grid' },
   { value: 'card', label: 'Card' },
   { value: 'pivot', label: 'Pivot' },
+  { value: 'chart', label: 'Chart' },
 ]
 
 export const listFormAlignmentOptions = [