erp-platform/ui/src/views/admin/chart/ChartEdit.tsx

import {
  Alert,
  Button,
  Card,
  Checkbox,
  Dialog,
  FormContainer,
  FormItem,
  Input,
  Notification,
  Select,
  Table,
  Tabs,
  toast,
} from '@/components/ui'
import TBody from '@/components/ui/Table/TBody'
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 TabContent from '@/components/ui/Tabs/TabContent'
import TabList from '@/components/ui/Tabs/TabList'
import TabNav from '@/components/ui/Tabs/TabNav'
import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin'
import { getRoles, getUsers } from '@/proxy/admin/identity.service'
import {
  BreakDto,
  ChartAnnotationDto,
  ChartEditDto,
  ChartPanesDto,
  ChartSeriesDto,
  ChartValueAxisDto,
} from '@/proxy/charts'
import {
  deleteChartJsonItem,
  getChartByCode,
  putChartJsonItem,
  putCharts,
} from '@/proxy/charts/chart.service'
import { LanguageInfo } from '@/proxy/config/models'
import { getDataSources } from '@/proxy/data-source'
import { DataSourceTypeEnum } from '@/proxy/form'
import { MenuDto } from '@/proxy/menus'
import { themeOptions, tooltipFormatListOptions } from '@/shared/options'
import { SelectBoxOption } from '@/shared/types'
import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
import setNull from '@/utils/setNull'
import { Field, FieldArray, FieldProps, Form, Formik, FormikProps, getIn } from 'formik'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet'
import { FiEdit3 } from 'react-icons/fi'
import { HiMinus, HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import { Link, useParams } from 'react-router-dom'
import { object, string } from 'yup'
import {
  chartAnnotationTypeListOptions,
  chartArgumentAxisHoverModeListOptions,
  chartArgumentAxisIntervalListOptions,
  chartArgumentAxisLabelDisplayModeListOptions,
  chartArgumentAxisLabelOverlappingBehaviorListOptions,
  chartArgumentAxisPositionListOptions,
  chartArgumentAxisTypeListOptions,
  chartBreakStyleLineListOptions,
  chartEasingListOptions,
  chartLegendOrientationListOptions,
  chartLegendPositionListOptions,
  chartPaletteExtensionModeOptions,
  chartPaletteOptions,
  chartSeriesDashStyleOptions,
  chartSeriesSelectionModeOptions,
  chartSeriesTypeOptions,
  chartTitleHorizantalAlignmentListOptions,
  chartTitleTextOverFlowListOptions,
  chartTitleVerticalAlignmentListOptions,
  chartTitleWordWrapListOptions,
  chartTooltipLocationListOptions,
  chartWordWrapListOptions,
  chartZoomAndPanAxisOptions,
  chartZoomAndPanKeyOptions,
} from './options'
import { ChartDialogType, ChartOperation } from './types'

const chartPanesValidationSchema = object().shape({
  name: string().required(),
})

const chartSeriesValidationSchema = object().shape({
  name: string().required(),
})

const chartAxisValidationSchema = object().shape({
  name: string().required(),
  title: string().required(),
})

const chartAnnotationsValidationSchema = object().shape({
  name: string().required(),
})

const fieldFeedback = (form: FormikProps<BreakDto>, name: string) => {
  const error = getIn(form.errors, name)
  const touch = getIn(form.touched, name)
  return {
    errorMessage: error || '',
    invalid: typeof touch === 'undefined' ? false : error && touch,
  }
}

const chartValidationSchema = object().shape({
  cultureName: string().required(),
  chartCode: string().required(),
})

interface DatabaseOperation {
  isOpen: ChartDialogType
  id: string
  operation: ChartOperation
  index: number
  panesValues?: ChartPanesDto
  seriesValues?: ChartSeriesDto
  annotationsValues?: ChartAnnotationDto
  axisValues?: ChartValueAxisDto
}

const defaultDatabaseOperation: DatabaseOperation = {
  isOpen: '',
  id: '',
  operation: 'select',
  index: -1,
}

interface ConfirmDelete {
  isOpen: boolean
  id: string
  index: number
  fieldName: ChartDialogType
}

const defaultConfirmDelete: ConfirmDelete = {
  isOpen: false,
  id: '',
  index: -1,
  fieldName: 'pane',
}

function ChartEdit() {
  const { chartCode } = useParams()
  const { translate } = useLocalization()
  const [dataSourceList, setDataSourceList] = useState<SelectBoxOption[]>([])

  const languages: LanguageInfo[] | undefined = useStoreState(
    (state) => state.abpConfig.config?.localization.languages,
  )
  const permissions: Record<string, boolean> | undefined = useStoreState(
    (state) => state.abpConfig.config?.auth.grantedPolicies,
  )
  const [chartValues, setChartValues] = useState<ChartEditDto>()
  const [langOptions, setLangOptions] = useState<SelectBoxOption[]>([])
  const [roleList, setRoleList] = useState<SelectBoxOption[]>([])
  const [userList, setUserList] = useState<SelectBoxOption[]>([])
  const [permissionOptions, setPermissionOptions] = useState<SelectBoxOption[]>([])
  const [confirmDelete, setConfirmDelete] = useState<ConfirmDelete>(defaultConfirmDelete)
  const [databaseOperationsModalData, setDatabaseOperationsModalData] =
    useState<DatabaseOperation>(defaultDatabaseOperation)

  const valueAxisList = () => {
    return chartValues?.valueAxisDto.map((key: ChartValueAxisDto) => ({
      value: key.name,
      label: key.name,
    }))
  }

  const valuePaneList = () => {
    return chartValues?.panesDto.map((key: ChartPanesDto) => ({
      value: key.name,
      label: key.name,
    }))
  }

  const SeriesList = () => {
    return chartValues?.seriesDto.map((key: ChartSeriesDto) => ({
      value: key.name,
      label: key.name,
    }))
  }

  useEffect(() => {
    if (languages) {
      setLangOptions(
        languages.map((lang) => ({
          value: lang.cultureName,
          label: lang.displayName,
        })),
      )
    }
  }, [languages])

  useEffect(() => {
    if (permissions) {
      setPermissionOptions(
        Object.keys(permissions).map((key) => {
          return {
            value: key,
            label: key,
          }
        }),
      )
    }
  }, [permissions])

  const getRoleList = async () => {
    const response = await getRoles()
    if (response.data?.items) {
      setRoleList(
        response.data.items.map((role: IdentityRoleDto) => ({
          value: role.id,
          label: role.name,
        })),
      )
    }
  }

  const getUserList = async () => {
    const response = await getUsers()
    if (response.data?.items) {
      setUserList(
        response.data.items.map((user: IdentityUserDto) => ({
          value: user.id,
          label: user.name,
        })),
      )
    }
  }

  const getChartValues = async () => {
    if (!chartCode) return

    const res = await getChartByCode(chartCode)
    setNull(res.data)
    setChartValues(res.data)
  }

  const getDataSourceList = async () => {
    const response = await getDataSources()
    if (response.data?.items) {
      setDataSourceList(
        response.data.items.map((a) => ({
          value: a.code,
          label: a.code,
        })),
      )
    }
  }

  useEffect(() => {
    getChartValues()
    getRoleList()
    getUserList()
    getDataSourceList()
  }, [chartCode])

  return chartValues && roleList && userList && permissionOptions ? (
    <div>
      <Formik
        initialValues={{ ...chartValues }}
        validationSchema={chartValidationSchema}
        onSubmit={async (values, { resetForm, setSubmitting }) => {
          setSubmitting(true)
          await putCharts({ ...values })
          toast.push(
            <Notification type="success" duration={2000}>
              {'Chart Bilgileri Kaydedildi.'}
            </Notification>,
            {
              placement: 'top-center',
            },
          )

          setSubmitting(false)
        }}
      >
        {({ touched, errors, resetForm, isSubmitting, values }) => (
          <Form>
            <FormContainer size="sm">
              <Helmet
                titleTemplate="%s | Kurs Platform"
                title={chartCode}
                defaultTitle="Kurs Platform"
              ></Helmet>

              <div className="lg:flex items-center justify-between mb-4 gap-3">
                <div className="mb-4 lg:mb-0">
                  <h4>
                    <Link to={`/chart/${chartCode}`}>
                      🔙 {chartCode}
                    </Link>
                  </h4>
                  {chartValues.isTenant && (
                    <Alert showIcon className="mb-4" type="warning">
                      Bu bir MULTI TENANT form'dur, veri kaybı olmaması için, sorgularda TENANTID
                      parametresini kullanmayı unutmayınız.
                    </Alert>
                  )}
                </div>
              </div>

              <Tabs defaultValue="details" variant="pill">
                <TabList className="flex-wrap border-b mb-2 bg-slate-50">
                  <TabNav value="details">Details</TabNav>
                  <TabNav value="database">Database</TabNav>
                  <TabNav value="commonSettings">Common</TabNav>
                  <TabNav value="permissions">Permissions</TabNav>
                  <TabNav value="series">Series</TabNav>
                  <TabNav value="axis">Axis</TabNav>
                  <TabNav value="panes">Panes</TabNav>
                  <TabNav value="animationsOptions">Animations</TabNav>
                  <TabNav value="crosshairOptions">Crosshair</TabNav>
                  <TabNav value="exportSettings">Export</TabNav>
                  <TabNav value="legendSettings">Legend</TabNav>
                  <TabNav value="zoomAndPanSettings">Zoom & Pan</TabNav>
                  <TabNav value="annotations">Annotations</TabNav>
                </TabList>
                <TabContent value="details">
                  <FormItem
                    label="Chart Code"
                    invalid={errors.chartCode && touched.chartCode}
                    errorMessage={errors.chartCode}
                  >
                    <Field type="text" name="chartCode" component={Input} />
                  </FormItem>

                  <FormItem
                    label="Culture Name"
                    invalid={errors.cultureName && touched.cultureName}
                    errorMessage={errors.cultureName}
                  >
                    <Field type="text" name="cultureName">
                      {({ field, form }: FieldProps<LanguageInfo>) => (
                        <Select
                          field={field}
                          form={form}
                          options={langOptions}
                          isClearable={true}
                          value={langOptions.filter(
                            (option) => option.value === values.cultureName,
                          )}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>

                  <FormItem
                    label="Role"
                    invalid={errors.roleId && touched.roleId}
                    errorMessage={errors.roleId}
                  >
                    <Field type="text" name="roleId">
                      {({ 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
                    label="User"
                    invalid={errors.userId && touched.userId}
                    errorMessage={errors.userId}
                  >
                    <Field type="text" name="userId">
                      {({ 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>

                </TabContent>

                <TabContent value="database">
                  <FormItem
                    label={translate('::ListForms.ListFormEdit.IsTenant')}
                    invalid={errors.isTenant && touched.isTenant}
                    errorMessage={errors.isTenant}
                  >
                    <Field
                      name="isTenant"
                      placeholder={translate('::ListForms.ListFormEdit.IsTenant')}
                      component={Checkbox}
                    />
                  </FormItem>
                  <FormItem
                    label={translate('::ListForms.ListFormEdit.IsBranch')}
                    invalid={errors.isBranch && touched.isBranch}
                    errorMessage={errors.isBranch}
                  >
                    <Field
                      name="isBranch"
                      placeholder={translate('::ListForms.ListFormEdit.IsBranch')}
                      component={Checkbox}
                    />
                  </FormItem>
                  <FormItem
                    label={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
                    invalid={errors.isOrganizationUnit && touched.isOrganizationUnit}
                    errorMessage={errors.isOrganizationUnit}
                  >
                    <Field
                      name="isOrganizationUnit"
                      placeholder={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
                      component={Checkbox}
                    />
                  </FormItem>

                  <FormItem
                    label="Data Source Code"
                    invalid={errors.dataSourceCode && touched.dataSourceCode}
                    errorMessage={errors.dataSourceCode}
                  >
                    <Field type="text" name="dataSourceCode">
                      {({ field, form }: FieldProps<DataSourceTypeEnum>) => (
                        <Select
                          field={field}
                          form={form}
                          options={dataSourceList}
                          value={dataSourceList?.filter(
                            (option) => option.value === values.dataSourceCode,
                          )}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>

                  <FormItem
                    label="DataSource Query"
                    invalid={errors.dataSourceDto?.query && touched.dataSourceDto?.query}
                    errorMessage={errors.dataSourceDto?.query}
                  >
                    <Field
                      type="text"
                      name="dataSourceDto.query"
                      component={Input}
                      textArea={true}
                    />
                  </FormItem>                  
                </TabContent>

                <TabContent value="commonSettings">
                  <Tabs defaultValue="commonSettings_general">
                    <TabList className="flex-wrap">
                      <TabNav value="commonSettings_general">General</TabNav>
                      <TabNav value="commonSettings_adaptiveLayouts">
                        Adaptive Layout Settings
                      </TabNav>
                      <TabNav value="commonSettings_title">Title Settings</TabNav>
                      <TabNav value="commonSettings_tooltip">Tooltip Settings</TabNav>
                      <TabNav value="commonSettings_margin">Margin Settings</TabNav>
                      <TabNav value="commonSettings_size">Size Settings</TabNav>
                      <TabNav value="commonSettings_scrollbar">ScrollBar Settings</TabNav>
                    </TabList>
                    <TabContent value="commonSettings_general">
                      <Card className="my-2">
                        <FormItem
                          label="Disabled"
                          invalid={errors.commonDto?.disabled && touched.commonDto?.disabled}
                          errorMessage={errors.commonDto?.disabled}
                        >
                          <Field name="commonDto.disabled" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Adjust On Zoom"
                          invalid={
                            errors.commonDto?.adjustOnZoom && touched.commonDto?.adjustOnZoom
                          }
                          errorMessage={errors.commonDto?.adjustOnZoom}
                        >
                          <Field name="commonDto.adjustOnZoom" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Container BackgroundColor"
                          invalid={
                            errors.commonDto?.containerBackgroundColor &&
                            touched.commonDto?.containerBackgroundColor
                          }
                          errorMessage={errors.commonDto?.containerBackgroundColor}
                        >
                          <Field name="commonDto.containerBackgroundColor" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Default Pane"
                          invalid={errors.commonDto?.defaultPane && touched.commonDto?.defaultPane}
                          errorMessage={errors.commonDto?.defaultPane}
                        >
                          <Field type="text" name="commonDto.defaultPane" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Theme"
                          invalid={errors.commonDto?.theme && touched.commonDto?.theme}
                          errorMessage={errors.commonDto?.theme}
                        >
                          <Field type="text" name="commonDto.theme">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={themeOptions}
                                isClearable={true}
                                value={themeOptions.filter(
                                  (option) => option.value === values.commonDto.theme,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Palette"
                          invalid={errors.commonDto?.palette && touched.commonDto?.palette}
                          errorMessage={errors.commonDto?.palette}
                        >
                          <Field type="text" name="commonDto.palette">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartPaletteOptions}
                                isClearable={true}
                                value={chartPaletteOptions.filter(
                                  (option) => option.value === values.commonDto.palette,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Palette Extension Mode"
                          invalid={
                            errors.commonDto?.paletteExtensionMode &&
                            touched.commonDto?.paletteExtensionMode
                          }
                          errorMessage={errors.commonDto?.paletteExtensionMode}
                        >
                          <Field type="text" name="commonDto.paletteExtensionMode">
                            {({ field, form }: FieldProps<any>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartPaletteExtensionModeOptions}
                                isClearable={true}
                                value={chartPaletteExtensionModeOptions.filter(
                                  (option) =>
                                    option.value === values.commonDto.paletteExtensionMode,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>
                      </Card>
                    </TabContent>
                    <TabContent value="commonSettings_adaptiveLayouts">
                      <Card className="my-2">
                        <FormItem
                          label="Keep Labels"
                          invalid={
                            errors.adaptivelayoutDto?.keepLabels &&
                            touched.adaptivelayoutDto?.keepLabels
                          }
                          errorMessage={errors.adaptivelayoutDto?.keepLabels}
                        >
                          <Field name="adaptivelayoutDto.keepLabels" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={
                            errors.adaptivelayoutDto?.width && touched.adaptivelayoutDto?.width
                          }
                          errorMessage={errors.adaptivelayoutDto?.width}
                        >
                          <Field type="number" name="adaptivelayoutDto.width" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Height"
                          invalid={
                            errors.adaptivelayoutDto?.height && touched.adaptivelayoutDto?.height
                          }
                          errorMessage={errors.adaptivelayoutDto?.height}
                        >
                          <Field type="number" name="adaptivelayoutDto.height" component={Input} />
                        </FormItem>
                      </Card>
                    </TabContent>
                    <TabContent value="commonSettings_title">
                      <Card className="my-2">
                        <FormItem
                          label="Text"
                          invalid={errors.titleDto?.text && touched.titleDto?.text}
                          errorMessage={errors.titleDto?.text}
                        >
                          <Field name="titleDto.text" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Subtitle"
                          invalid={errors.titleDto?.subtitle && touched.titleDto?.subtitle}
                          errorMessage={errors.titleDto?.subtitle}
                        >
                          <Field name="titleDto.subtitle" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Vertical Alignment"
                          invalid={
                            errors.titleDto?.verticalAlignment &&
                            touched.titleDto?.verticalAlignment
                          }
                          errorMessage={errors.titleDto?.verticalAlignment}
                        >
                          <Field type="text" name="titleDto.verticalAlignment">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartTitleVerticalAlignmentListOptions}
                                isClearable={true}
                                value={chartTitleVerticalAlignmentListOptions.filter(
                                  (option) => option.value === values.titleDto.verticalAlignment,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Horizontal Alignment"
                          invalid={
                            errors.titleDto?.horizontalAlignment &&
                            touched.titleDto?.horizontalAlignment
                          }
                          errorMessage={errors.titleDto?.horizontalAlignment}
                        >
                          <Field type="text" name="titleDto.horizontalAlignment">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartTitleHorizantalAlignmentListOptions}
                                isClearable={true}
                                value={chartTitleHorizantalAlignmentListOptions.filter(
                                  (option) => option.value === values.titleDto.horizontalAlignment,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Text Overflow"
                          invalid={errors.titleDto?.textOverflow && touched.titleDto?.textOverflow}
                          errorMessage={errors.titleDto?.textOverflow}
                        >
                          <Field type="text" name="titleDto.textOverflow">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartTitleTextOverFlowListOptions}
                                isClearable={true}
                                value={chartTitleTextOverFlowListOptions.filter(
                                  (option) => option.value === values.titleDto.textOverflow,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Word Wrap"
                          invalid={errors.titleDto?.wordWrap && touched.titleDto?.wordWrap}
                          errorMessage={errors.titleDto?.wordWrap}
                        >
                          <Field type="text" name="titleDto.wordWrap">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartTitleWordWrapListOptions}
                                isClearable={true}
                                value={chartTitleWordWrapListOptions.filter(
                                  (option) => option.value === values.titleDto.wordWrap,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>
                      </Card>
                    </TabContent>
                    <TabContent value="commonSettings_tooltip">
                      <Card className="my-2">
                        <FormItem
                          label="Enabled"
                          invalid={errors.tooltipDto?.enabled && touched.tooltipDto?.enabled}
                          errorMessage={errors.tooltipDto?.enabled}
                        >
                          <Field name="tooltipDto.keepLabels" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Shared"
                          invalid={errors.tooltipDto?.shared && touched.tooltipDto?.shared}
                          errorMessage={errors.tooltipDto?.shared}
                        >
                          <Field name="tooltipDto.shared" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Format"
                          invalid={errors.tooltipDto?.format && touched.tooltipDto?.format}
                          errorMessage={errors.tooltipDto?.format}
                        >
                          <Field type="text" name="tooltipDto.format">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={tooltipFormatListOptions}
                                isClearable={true}
                                value={tooltipFormatListOptions.filter(
                                  (option) => option.value === values.tooltipDto.format,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Location"
                          invalid={errors.tooltipDto?.location && touched.tooltipDto?.location}
                          errorMessage={errors.tooltipDto?.location}
                        >
                          <Field type="text" name="tooltipDto.location">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartTooltipLocationListOptions}
                                isClearable={true}
                                value={chartTooltipLocationListOptions.filter(
                                  (option) => option.value === values.tooltipDto.location,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Color"
                          invalid={errors.tooltipDto?.color && touched.tooltipDto?.color}
                          errorMessage={errors.tooltipDto?.color}
                        >
                          <Field name="tooltipDto.color" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Argument Format"
                          invalid={
                            errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat
                          }
                          errorMessage={errors.tooltipDto?.argumentFormat}
                        >
                          <Field name="tooltipDto.argumentFormat" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Arrow Length"
                          invalid={
                            errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength
                          }
                          errorMessage={errors.tooltipDto?.arrowLength}
                        >
                          <Field type="number" name="tooltipDto.arrowLength" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Padding Top/Bottom"
                          invalid={
                            errors.tooltipDto?.paddingTopBottom &&
                            touched.tooltipDto?.paddingTopBottom
                          }
                          errorMessage={errors.tooltipDto?.paddingTopBottom}
                        >
                          <Field
                            type="number"
                            name="tooltipDto.paddingTopBottom"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Padding Left/Right"
                          invalid={
                            errors.tooltipDto?.paddingLeftRight &&
                            touched.tooltipDto?.paddingLeftRight
                          }
                          errorMessage={errors.tooltipDto?.paddingLeftRight}
                        >
                          <Field
                            type="number"
                            name="tooltipDto.paddingLeftRight"
                            component={Input}
                          />
                        </FormItem>
                      </Card>
                      <div className="font-bold m-3">Tooltip Settings - Font</div>
                      <FormItem
                        label="Color"
                        invalid={errors.tooltipDto?.font?.color && touched.tooltipDto?.font?.color}
                        errorMessage={errors.tooltipDto?.font?.color}
                      >
                        <Field name="tooltipDto.font.color" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Family"
                        invalid={
                          errors.tooltipDto?.font?.family && touched.tooltipDto?.font?.family
                        }
                        errorMessage={errors.tooltipDto?.font?.family}
                      >
                        <Field name="tooltipDto.font.family" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Size"
                        invalid={errors.tooltipDto?.font?.size && touched.tooltipDto?.font?.size}
                        errorMessage={errors.tooltipDto?.font?.size}
                      >
                        <Field type="number" name="tooltipDto.font.size" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Weight"
                        invalid={
                          errors.tooltipDto?.font?.weight && touched.tooltipDto?.font?.weight
                        }
                        errorMessage={errors.tooltipDto?.font?.weight}
                      >
                        <Field type="number" name="tooltipDto.font.weight" component={Input} />
                      </FormItem>

                      <div className="font-bold m-3">Tooltip Settings - Border</div>
                      <FormItem
                        label="Visible"
                        invalid={
                          errors.tooltipDto?.border?.visible && touched.tooltipDto?.border?.visible
                        }
                        errorMessage={errors.tooltipDto?.border?.visible}
                      >
                        <Field name="tooltipDto.border.visible" component={Checkbox} />
                      </FormItem>

                      <FormItem
                        label="Dash Style"
                        invalid={
                          errors.tooltipDto?.border?.dashStyle &&
                          touched.tooltipDto?.border?.dashStyle
                        }
                        errorMessage={errors.tooltipDto?.border?.dashStyle}
                      >
                        <Field type="text" name="tooltipDto.border.dashStyle">
                          {({ field, form }: FieldProps<SelectBoxOption>) => (
                            <Select
                              field={field}
                              form={form}
                              options={chartSeriesDashStyleOptions}
                              isClearable={true}
                              value={chartSeriesDashStyleOptions.filter(
                                (option) => option.value === values.tooltipDto.border.dashStyle,
                              )}
                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
                            />
                          )}
                        </Field>
                      </FormItem>

                      <FormItem
                        label="Width"
                        invalid={
                          errors.tooltipDto?.border?.width && touched.tooltipDto?.border?.width
                        }
                        errorMessage={errors.tooltipDto?.border?.width}
                      >
                        <Field type="number" name="tooltipDto.border.width" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Corner Radius"
                        invalid={
                          errors.tooltipDto?.border?.cornerRadius &&
                          touched.tooltipDto?.border?.cornerRadius
                        }
                        errorMessage={errors.tooltipDto?.border?.cornerRadius}
                      >
                        <Field
                          type="number"
                          name="tooltipDto.border.cornerRadius"
                          component={Input}
                        />
                      </FormItem>
                    </TabContent>
                    <TabContent value="commonSettings_margin">
                      <Card className="my-2">
                        <FormItem
                          label="Bottom"
                          invalid={errors.marginDto?.bottom && touched.marginDto?.bottom}
                          errorMessage={errors.marginDto?.bottom}
                        >
                          <Field type="number" name="marginDto.bottom" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Top"
                          invalid={errors.marginDto?.top && touched.marginDto?.top}
                          errorMessage={errors.marginDto?.top}
                        >
                          <Field type="number" name="marginDto.top" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Right"
                          invalid={errors.marginDto?.right && touched.marginDto?.right}
                          errorMessage={errors.marginDto?.right}
                        >
                          <Field type="number" name="marginDto.right" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Left"
                          invalid={errors.marginDto?.left && touched.marginDto?.left}
                          errorMessage={errors.marginDto?.left}
                        >
                          <Field type="number" name="marginDto.left" component={Input} />
                        </FormItem>
                      </Card>
                    </TabContent>
                    <TabContent value="commonSettings_size">
                      <Card className="my-2">
                        <FormItem
                          label="Use Size"
                          invalid={errors.sizeDto?.useSize && touched.sizeDto?.useSize}
                          errorMessage={errors.sizeDto?.useSize}
                        >
                          <Field name="sizeDto.useSize" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={errors.sizeDto?.width && touched.sizeDto?.width}
                          errorMessage={errors.sizeDto?.width}
                        >
                          <Field type="number" name="sizeDto.width" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Height"
                          invalid={errors.sizeDto?.height && touched.sizeDto?.height}
                          errorMessage={errors.sizeDto?.height}
                        >
                          <Field type="number" name="sizeDto.height" component={Input} />
                        </FormItem>
                      </Card>
                    </TabContent>
                    <TabContent value="commonSettings_scrollbar">
                      <Card className="my-2">
                        <FormItem
                          label="Visible"
                          invalid={errors.scrollBarDto?.visible && touched.scrollBarDto?.visible}
                          errorMessage={errors.scrollBarDto?.visible}
                        >
                          <Field name="scrollBarDto.visible" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Color"
                          invalid={errors.scrollBarDto?.color && touched.scrollBarDto?.color}
                          errorMessage={errors.scrollBarDto?.color}
                        >
                          <Field name="scrollBarDto.color" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Position"
                          invalid={errors.scrollBarDto?.position && touched.scrollBarDto?.position}
                          errorMessage={errors.scrollBarDto?.position}
                        >
                          <Field type="text" name="commonDto.position">
                            {({ field, form }: FieldProps<IdentityRoleDto>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartArgumentAxisPositionListOptions}
                                isClearable={true}
                                value={chartArgumentAxisPositionListOptions.filter(
                                  (option) => option.value === values.scrollBarDto.position,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Offset"
                          invalid={errors.scrollBarDto?.offset && touched.scrollBarDto?.offset}
                          errorMessage={errors.scrollBarDto?.offset}
                        >
                          <Field type="number" name="scrollBarDto.offset" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={errors.scrollBarDto?.width && touched.scrollBarDto?.width}
                          errorMessage={errors.scrollBarDto?.width}
                        >
                          <Field type="number" name="scrollBarDto.width" component={Input} />
                        </FormItem>
                      </Card>
                    </TabContent>
                  </Tabs>
                </TabContent>

                <TabContent value="permissions">
                  <FormItem
                    label="Create"
                    invalid={errors.permissionDto?.c && touched.permissionDto?.c}
                    errorMessage={errors.permissionDto?.c}
                  >
                    <Field type="text" name="permissionDto.c">
                      {({ field, form }: FieldProps<MenuDto>) => (
                        <Select
                          field={field}
                          form={form}
                          options={permissionOptions}
                          isClearable={true}
                          value={permissionOptions.filter(
                            (option) => option.value === values.permissionDto.c,
                          )}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>
                  <FormItem
                    label="Read"
                    invalid={errors.permissionDto?.r && touched.permissionDto?.r}
                    errorMessage={errors.permissionDto?.r}
                  >
                    <Field type="text" name="permissionDto.r">
                      {({ field, form }: FieldProps<MenuDto>) => (
                        <Select
                          field={field}
                          form={form}
                          options={permissionOptions}
                          isClearable={true}
                          value={permissionOptions.filter(
                            (option) => option.value === values.permissionDto.r,
                          )}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>
                  <FormItem
                    label="Update"
                    invalid={errors.permissionDto?.u && touched.permissionDto?.u}
                    errorMessage={errors.permissionDto?.u}
                  >
                    <Field type="text" name="permissionDto.u">
                      {({ field, form }: FieldProps<MenuDto>) => (
                        <Select
                          field={field}
                          form={form}
                          options={permissionOptions}
                          isClearable={true}
                          value={permissionOptions.filter(
                            (option) => option.value === values.permissionDto.u,
                          )}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>
                  <FormItem
                    label="Delete"
                    invalid={errors.permissionDto?.d && touched.permissionDto?.d}
                    errorMessage={errors.permissionDto?.d}
                  >
                    <Field type="text" name="permissionDto.d">
                      {({ field, form }: FieldProps<MenuDto>) => (
                        <Select
                          field={field}
                          form={form}
                          options={permissionOptions}
                          isClearable={true}
                          value={permissionOptions.filter(
                            (option) => option.value === values.permissionDto.d,
                          )}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>
                </TabContent>

                <TabContent value="series">
                  <Tabs defaultValue="series_general">
                    <TabList>
                      <TabNav value="series_general">General</TabNav>
                      <TabNav value="series_common">Common Series Settings</TabNav>
                    </TabList>
                    <TabContent value="series_general">
                      <Card className="my-2" bodyClass="p-0">
                        <Table compact>
                          <THead>
                            <Tr>
                              <Th>
                                <Button
                                  shape="circle"
                                  variant="plain"
                                  type="button"
                                  size="xs"
                                  title="Add"
                                  icon={<HiOutlineDocumentAdd />}
                                  onClick={async (e) => {
                                    e.preventDefault()
                                    setDatabaseOperationsModalData({
                                      id: values.id ?? '',
                                      index: -1,
                                      isOpen: 'serie',
                                      operation: 'insert',
                                    })
                                  }}
                                />
                              </Th>
                              <Th>Type</Th>
                              <Th>Name</Th>
                              <Th>Argument Field</Th>
                              <Th>Value Field</Th>
                              <Th>Pane</Th>
                              <Th>Axis</Th>
                            </Tr>
                          </THead>
                          <TBody>
                            {chartValues.seriesDto.map((row, index) => (
                              <Tr key={index}>
                                <Td>
                                  <div className="flex-wrap inline-flex xl:flex items-center gap-2">
                                    <Button
                                      shape="circle"
                                      variant="plain"
                                      type="button"
                                      size="xs"
                                      title="Edit"
                                      icon={<FiEdit3 />}
                                      onClick={async (e) => {
                                        e.preventDefault()
                                        setDatabaseOperationsModalData({
                                          id: values.id ?? '',
                                          index,
                                          isOpen: 'serie',
                                          operation: 'update',
                                          seriesValues: chartValues.seriesDto[index],
                                        })
                                      }}
                                    />
                                    <Button
                                      shape="circle"
                                      variant="plain"
                                      type="button"
                                      size="xs"
                                      title="Delete"
                                      icon={<MdDelete />}
                                      onClick={async (e) => {
                                        e.preventDefault()
                                        setConfirmDelete({
                                          isOpen: true,
                                          id: values.id ?? '',
                                          fieldName: 'serie',
                                          index,
                                        })
                                      }}
                                    />
                                  </div>
                                </Td>
                                <Td>{row.type}</Td>
                                <Td>{row.name}</Td>
                                <Td>{row.argumentField}</Td>
                                <Td>{row.valueField}</Td>
                                <Td>{row.pane}</Td>
                                <Td>{row.axis}</Td>
                              </Tr>
                            ))}
                          </TBody>
                        </Table>
                      </Card>
                    </TabContent>
                    <TabContent value="series_common">
                      <Card className="my-2">
                        <FormItem
                          label="Visible"
                          invalid={
                            errors.commonSeriesSettingsDto?.visible &&
                            touched.commonSeriesSettingsDto?.visible
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.visible}
                        >
                          <Field name="commonSeriesSettingsDto.visible" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Show In Legend"
                          invalid={
                            errors.commonSeriesSettingsDto?.showInLegend &&
                            touched.commonSeriesSettingsDto?.showInLegend
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.showInLegend}
                        >
                          <Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Ignore Empty Points"
                          invalid={
                            errors.commonSeriesSettingsDto?.ignoreEmptyPoints &&
                            touched.commonSeriesSettingsDto?.ignoreEmptyPoints
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
                        >
                          <Field
                            name="commonSeriesSettingsDto.ignoreEmptyPoints"
                            component={Checkbox}
                          />
                        </FormItem>

                        <FormItem
                          label="Type"
                          invalid={
                            errors.commonSeriesSettingsDto?.type &&
                            touched.commonSeriesSettingsDto?.type
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.type}
                        >
                          <Field type="text" name="commonSeriesSettingsDto.type">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartSeriesTypeOptions}
                                isClearable={true}
                                value={chartSeriesTypeOptions.filter(
                                  (option) => option.value === values.commonSeriesSettingsDto.type,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Selection Mode"
                          invalid={
                            errors.commonSeriesSettingsDto?.selectionMode &&
                            touched.commonSeriesSettingsDto?.selectionMode
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.selectionMode}
                        >
                          <Field type="text" name="commonSeriesSettingsDto.selectionMode">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartSeriesSelectionModeOptions}
                                isClearable={true}
                                value={chartSeriesSelectionModeOptions.filter(
                                  (option) =>
                                    option.value === values.commonSeriesSettingsDto.selectionMode,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Argument Field"
                          invalid={
                            errors.commonSeriesSettingsDto?.argumentField &&
                            touched.commonSeriesSettingsDto?.argumentField
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.argumentField}
                        >
                          <Field name="commonSeriesSettingsDto.argumentField" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Value Field"
                          invalid={
                            errors.commonSeriesSettingsDto?.valueField &&
                            touched.commonSeriesSettingsDto?.valueField
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.valueField}
                        >
                          <Field name="commonSeriesSettingsDto.valueField" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Axis"
                          invalid={
                            errors.commonSeriesSettingsDto?.axis &&
                            touched.commonSeriesSettingsDto?.axis
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.axis}
                        >
                          <Field type="text" name="commonSeriesSettingsDto.axis">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={valueAxisList()}
                                isClearable={true}
                                value={valueAxisList()?.find(
                                  (option) => option.value === values.commonSeriesSettingsDto.axis,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Pane"
                          invalid={
                            errors.commonSeriesSettingsDto?.pane &&
                            touched.commonSeriesSettingsDto?.pane
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.pane}
                        >
                          <Field type="text" name="commonSeriesSettingsDto.pane">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={valuePaneList()}
                                isClearable={true}
                                value={valuePaneList()?.find(
                                  (option) => option.value === values.commonSeriesSettingsDto.pane,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Color"
                          invalid={
                            errors.commonSeriesSettingsDto?.color &&
                            touched.commonSeriesSettingsDto?.color
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.color}
                        >
                          <Field name="commonSeriesSettingsDto.color" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Corner Radius"
                          invalid={
                            errors.commonSeriesSettingsDto?.cornerRadius &&
                            touched.commonSeriesSettingsDto?.cornerRadius
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
                        >
                          <Field
                            type="number"
                            name="commonSeriesSettingsDto.cornerRadius"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Type"
                          invalid={
                            errors.commonSeriesSettingsDto?.dashStyle &&
                            touched.commonSeriesSettingsDto?.dashStyle
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
                        >
                          <Field type="text" name="commonSeriesSettingsDto.dashStyle">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartSeriesDashStyleOptions}
                                isClearable={true}
                                value={chartSeriesDashStyleOptions.filter(
                                  (option) =>
                                    option.value === values.commonSeriesSettingsDto.dashStyle,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={
                            errors.commonSeriesSettingsDto?.width &&
                            touched.commonSeriesSettingsDto?.width
                          }
                          errorMessage={errors.commonSeriesSettingsDto?.width}
                        >
                          <Field
                            type="number"
                            name="commonSeriesSettingsDto.width"
                            component={Input}
                          />
                        </FormItem>
                      </Card>
                    </TabContent>
                  </Tabs>
                </TabContent>

                <TabContent value="axis">
                  <Tabs defaultValue="axis_value">
                    <TabList>
                      <TabNav value="axis_value">Value Axis</TabNav>
                      <TabNav value="axis_argument">Argument Axis Options</TabNav>
                      <TabNav value="axis_common">Common Axis Settings</TabNav>
                    </TabList>
                    <TabContent value="axis_value">
                      <Card className="my-2" bodyClass="p-0">
                        <Table compact>
                          <THead>
                            <Tr>
                              <Th>
                                <Button
                                  shape="circle"
                                  variant="plain"
                                  type="button"
                                  size="xs"
                                  title="Add"
                                  icon={<HiOutlineDocumentAdd />}
                                  onClick={async (e) => {
                                    e.preventDefault()
                                    setDatabaseOperationsModalData({
                                      id: values.id ?? '',
                                      index: -1,
                                      isOpen: 'axis',
                                      operation: 'insert',
                                    })
                                  }}
                                />
                              </Th>
                              <Th>Value Type</Th>
                              <Th>Position</Th>
                              <Th>Type</Th>
                              <Th>Name</Th>
                              <Th>Title</Th>
                              <Th>Visible</Th>
                            </Tr>
                          </THead>
                          <TBody>
                            {chartValues.valueAxisDto.map((row, index) => (
                              <Tr key={index}>
                                <Td>
                                  <div className="flex-wrap inline-flex xl:flex items-center gap-2">
                                    <Button
                                      shape="circle"
                                      variant="plain"
                                      type="button"
                                      size="xs"
                                      title="Edit"
                                      icon={<FiEdit3 />}
                                      onClick={async (e) => {
                                        e.preventDefault()
                                        setDatabaseOperationsModalData({
                                          id: values.id ?? '',
                                          index,
                                          isOpen: 'axis',
                                          operation: 'update',
                                          axisValues: chartValues.valueAxisDto[index],
                                        })
                                      }}
                                    />
                                    <Button
                                      shape="circle"
                                      variant="plain"
                                      type="button"
                                      size="xs"
                                      title="Delete"
                                      icon={<MdDelete />}
                                      onClick={async (e) => {
                                        e.preventDefault()
                                        setConfirmDelete({
                                          isOpen: true,
                                          id: values.id ?? '',
                                          fieldName: 'axis',
                                          index,
                                        })
                                      }}
                                    />
                                  </div>
                                </Td>
                                <Td>{row.valueType}</Td>
                                <Td>{row.position}</Td>
                                <Td>{row.type}</Td>
                                <Td>{row.name}</Td>
                                <Td>{row.title}</Td>
                                <Td>{row.visible}</Td>
                              </Tr>
                            ))}
                          </TBody>
                        </Table>
                      </Card>
                    </TabContent>
                    <TabContent value="axis_argument">
                      <Card className="my-2">
                        <FormItem
                          label="Visible"
                          invalid={
                            errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible
                          }
                          errorMessage={errors.argumentAxisDto?.visible}
                        >
                          <Field name="argumentAxisDto.visible" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Workdays Only"
                          invalid={
                            errors.argumentAxisDto?.workdaysOnly &&
                            touched.argumentAxisDto?.workdaysOnly
                          }
                          errorMessage={errors.argumentAxisDto?.workdaysOnly}
                        >
                          <Field name="argumentAxisDto.visible" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Title"
                          invalid={errors.argumentAxisDto?.title && touched.argumentAxisDto?.title}
                          errorMessage={errors.argumentAxisDto?.title}
                        >
                          <Field type="text" name="argumentAxisDto.title" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Hover Mode"
                          invalid={
                            errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode
                          }
                          errorMessage={errors.argumentAxisDto?.hoverMode}
                        >
                          <Field type="text" name="argumentAxisDto.hoverMode">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartArgumentAxisHoverModeListOptions}
                                isClearable={true}
                                value={chartArgumentAxisHoverModeListOptions.filter(
                                  (option) => option.value === values.argumentAxisDto.hoverMode,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Argument Type"
                          invalid={
                            errors.argumentAxisDto?.argumentType &&
                            touched.argumentAxisDto?.argumentType
                          }
                          errorMessage={errors.argumentAxisDto?.argumentType}
                        >
                          <Field type="text" name="argumentAxisDto.argumentType">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartArgumentAxisTypeListOptions}
                                isClearable={true}
                                value={chartArgumentAxisTypeListOptions.filter(
                                  (option) => option.value === values.argumentAxisDto.argumentType,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Position"
                          invalid={
                            errors.argumentAxisDto?.position && touched.argumentAxisDto?.position
                          }
                          errorMessage={errors.argumentAxisDto?.position}
                        >
                          <Field type="text" name="argumentAxisDto.position">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartArgumentAxisPositionListOptions}
                                isClearable={true}
                                value={chartArgumentAxisPositionListOptions.filter(
                                  (option) => option.value === values.argumentAxisDto.position,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={errors.argumentAxisDto?.width && touched.argumentAxisDto?.width}
                          errorMessage={errors.argumentAxisDto?.width}
                        >
                          <Field type="number" name="argumentAxisDto.width" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Aggregation Interval"
                          invalid={
                            errors.argumentAxisDto?.aggregationInterval &&
                            touched.argumentAxisDto?.aggregationInterval
                          }
                          errorMessage={errors.argumentAxisDto?.aggregationInterval}
                        >
                          <Field type="text" name="argumentAxisDto.aggregationInterval">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartArgumentAxisIntervalListOptions}
                                isClearable={true}
                                value={chartArgumentAxisIntervalListOptions.filter(
                                  (option) =>
                                    option.value === values.argumentAxisDto.aggregationInterval,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>
                      </Card>

                      <Card className="my-2" header="Argument Axis - Grid">
                        <FormItem
                          label="Visible"
                          invalid={
                            errors.argumentAxisDto?.grid?.visible &&
                            touched.argumentAxisDto?.grid?.visible
                          }
                          errorMessage={errors.argumentAxisDto?.grid?.visible}
                        >
                          <Field name="argumentAxisDto.grid.visible" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Color"
                          invalid={
                            errors.argumentAxisDto?.grid?.color &&
                            touched.argumentAxisDto?.grid?.color
                          }
                          errorMessage={errors.argumentAxisDto?.grid?.color}
                        >
                          <Field type="text" name="argumentAxisDto.grid.color" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={
                            errors.argumentAxisDto?.grid?.width &&
                            touched.argumentAxisDto?.grid?.width
                          }
                          errorMessage={errors.argumentAxisDto?.grid?.width}
                        >
                          <Field
                            type="number"
                            name="argumentAxisDto.grid.width"
                            component={Input}
                          />
                        </FormItem>
                      </Card>

                      <Card className="my-2" header="Argument Axis - Label">
                        <FormItem
                          label="Position"
                          invalid={
                            errors.argumentAxisDto?.label?.displayMode &&
                            touched.argumentAxisDto?.label?.displayMode
                          }
                          errorMessage={errors.argumentAxisDto?.label?.displayMode}
                        >
                          <Field type="text" name="argumentAxisDto.label.displayMode">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartArgumentAxisLabelDisplayModeListOptions}
                                isClearable={true}
                                value={chartArgumentAxisLabelDisplayModeListOptions.filter(
                                  (option) =>
                                    option.value === values.argumentAxisDto.label.displayMode,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Rotation Angle"
                          invalid={
                            errors.argumentAxisDto?.label?.rotationAngle &&
                            touched.argumentAxisDto?.label?.rotationAngle
                          }
                          errorMessage={errors.argumentAxisDto?.label?.rotationAngle}
                        >
                          <Field
                            type="number"
                            name="argumentAxisDto.label.rotationAngle"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Overlapping Behavior"
                          invalid={
                            errors.argumentAxisDto?.label?.overlappingBehavior &&
                            touched.argumentAxisDto?.label?.overlappingBehavior
                          }
                          errorMessage={errors.argumentAxisDto?.label?.overlappingBehavior}
                        >
                          <Field type="text" name="argumentAxisDto.label.overlappingBehavior">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartArgumentAxisLabelOverlappingBehaviorListOptions}
                                isClearable={true}
                                value={chartArgumentAxisLabelOverlappingBehaviorListOptions.filter(
                                  (option) =>
                                    option.value ===
                                    values.argumentAxisDto.label.overlappingBehavior,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>
                      </Card>
                    </TabContent>
                    <TabContent value="axis_common">
                      <Card className="my-2">
                        <FormItem
                          label="Visible"
                          invalid={
                            errors.commonAxisSettingsDto?.visible &&
                            touched.commonAxisSettingsDto?.visible
                          }
                          errorMessage={errors.commonAxisSettingsDto?.visible}
                        >
                          <Field name="commonAxisSettingsDto.visible" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Title"
                          invalid={
                            errors.commonAxisSettingsDto?.title &&
                            touched.commonAxisSettingsDto?.title
                          }
                          errorMessage={errors.commonAxisSettingsDto?.title}
                        >
                          <Field type="text" name="title" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={
                            errors.commonAxisSettingsDto?.width &&
                            touched.commonAxisSettingsDto?.width
                          }
                          errorMessage={errors.commonAxisSettingsDto?.width}
                        >
                          <Field
                            type="number"
                            name="commonAxisSettingsDto.width"
                            component={Input}
                          />
                        </FormItem>
                      </Card>

                      <Card className="my-2" header="Common Axis Settings - Grid">
                        <FormItem
                          label="Visible"
                          invalid={
                            errors.commonAxisSettingsDto?.grid?.visible &&
                            touched.commonAxisSettingsDto?.grid?.visible
                          }
                          errorMessage={errors.commonAxisSettingsDto?.grid?.visible}
                        >
                          <Field name="commonAxisSettingsDto.grid.visible" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Color"
                          invalid={
                            errors.commonAxisSettingsDto?.grid?.color &&
                            touched.commonAxisSettingsDto?.grid?.color
                          }
                          errorMessage={errors.commonAxisSettingsDto?.grid?.color}
                        >
                          <Field
                            type="text"
                            name="commonAxisSettingsDto.grid.color"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={
                            errors.commonAxisSettingsDto?.grid?.width &&
                            touched.commonAxisSettingsDto?.grid?.width
                          }
                          errorMessage={errors.commonAxisSettingsDto?.grid?.width}
                        >
                          <Field
                            type="number"
                            name="commonAxisSettingsDto.grid.width"
                            component={Input}
                          />
                        </FormItem>
                      </Card>
                    </TabContent>
                  </Tabs>
                </TabContent>

                <TabContent value="panes">
                  <Card className="my-2">
                    <FormItem
                      label="Background Color"
                      invalid={
                        errors.commonPaneSettingsDto?.backgroundColor &&
                        touched.commonPaneSettingsDto?.backgroundColor
                      }
                      errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
                    >
                      <Field
                        type="text"
                        name="commonPaneSettingsDto.backgroundColor"
                        component={Input}
                      />
                    </FormItem>
                  </Card>
                  <Card className="my-2" bodyClass="p-0">
                    <Table compact>
                      <THead>
                        <Tr>
                          <Th>
                            <Button
                              shape="circle"
                              variant="plain"
                              type="button"
                              size="xs"
                              title="Add"
                              icon={<HiOutlineDocumentAdd />}
                              onClick={async (e) => {
                                e.preventDefault()
                                setDatabaseOperationsModalData({
                                  id: values.id ?? '',
                                  index: -1,
                                  isOpen: 'pane',
                                  operation: 'insert',
                                })
                              }}
                            />
                          </Th>
                          <Th>Name</Th>
                          <Th>Background Color</Th>
                          <Th>Height</Th>
                        </Tr>
                      </THead>
                      <TBody>
                        {chartValues.panesDto.map((row, index) => (
                          <Tr key={index}>
                            <Td>
                              <div className="flex-wrap inline-flex xl:flex items-center gap-2">
                                <Button
                                  shape="circle"
                                  variant="plain"
                                  type="button"
                                  size="xs"
                                  title="Edit"
                                  icon={<FiEdit3 />}
                                  onClick={async (e) => {
                                    e.preventDefault()
                                    setDatabaseOperationsModalData({
                                      id: values.id ?? '',
                                      index,
                                      isOpen: 'pane',
                                      operation: 'update',
                                      panesValues: chartValues.panesDto[index],
                                    })
                                  }}
                                />
                                <Button
                                  shape="circle"
                                  variant="plain"
                                  type="button"
                                  size="xs"
                                  title="Delete"
                                  icon={<MdDelete />}
                                  onClick={async (e) => {
                                    e.preventDefault()
                                    setConfirmDelete({
                                      isOpen: true,
                                      id: values.id ?? '',
                                      fieldName: 'pane',
                                      index,
                                    })
                                  }}
                                />
                              </div>
                            </Td>
                            <Td>{row.name}</Td>
                            <Td>{row.backgroundColor}</Td>
                            <Td>{row.height}</Td>
                          </Tr>
                        ))}
                      </TBody>
                    </Table>
                  </Card>
                </TabContent>

                <TabContent value="animationsOptions">
                  <Card className="my-2">
                    <FormItem
                      label="Enabled"
                      invalid={errors.animationDto?.enabled && touched.animationDto?.enabled}
                      errorMessage={errors.animationDto?.enabled}
                    >
                      <Field name="animationDto.enabled" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Easing"
                      invalid={errors.animationDto?.easing && touched.animationDto?.easing}
                      errorMessage={errors.animationDto?.easing}
                    >
                      <Field type="text" name="animationDto.easing">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={chartEasingListOptions}
                            isClearable={true}
                            value={chartEasingListOptions.filter(
                              (option) => option.value === values.animationDto.easing,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Duration"
                      invalid={errors.animationDto?.duration && touched.animationDto?.duration}
                      errorMessage={errors.animationDto?.duration}
                    >
                      <Field type="number" name="animationDto.duration" component={Input} />
                    </FormItem>

                    <FormItem
                      label="Max Point Count Supported"
                      invalid={
                        errors.animationDto?.maxPointCountSupported &&
                        touched.animationDto?.maxPointCountSupported
                      }
                      errorMessage={errors.animationDto?.maxPointCountSupported}
                    >
                      <Field
                        type="number"
                        name="animationDto.maxPointCountSupported"
                        component={Input}
                      />
                    </FormItem>
                  </Card>
                </TabContent>

                <TabContent value="crosshairOptions">
                  <Card className="my-2">
                    <FormItem
                      label="Enabled"
                      invalid={errors.crosshairDto?.enabled && touched.crosshairDto?.enabled}
                      errorMessage={errors.crosshairDto?.enabled}
                    >
                      <Field name="crosshairDto.enabled" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Color"
                      invalid={errors.crosshairDto?.color && touched.crosshairDto?.color}
                      errorMessage={errors.crosshairDto?.color}
                    >
                      <Field type="text" name="crosshairDto.color" component={Input} />
                    </FormItem>

                    <FormItem
                      label="Dash Style"
                      invalid={errors.crosshairDto?.dashStyle && touched.crosshairDto?.dashStyle}
                      errorMessage={errors.crosshairDto?.dashStyle}
                    >
                      <Field type="text" name="crosshairDto.dashStyle">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={chartSeriesDashStyleOptions}
                            isClearable={true}
                            value={chartSeriesDashStyleOptions.filter(
                              (option) => option.value === values.crosshairDto.dashStyle,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Width"
                      invalid={errors.crosshairDto?.width && touched.crosshairDto?.width}
                      errorMessage={errors.crosshairDto?.width}
                    >
                      <Field type="numner" name="crosshairDto.width" component={Input} />
                    </FormItem>
                  </Card>

                  <Card className="my-2" header="Crosshair Options - Label">
                    <FormItem
                      label="Visible"
                      invalid={
                        errors.crosshairDto?.label?.visible && touched.crosshairDto?.label?.visible
                      }
                      errorMessage={errors.crosshairDto?.label?.visible}
                    >
                      <Field name="crosshairDto.label.visible" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Background Color"
                      invalid={
                        errors.crosshairDto?.label?.backgroundColor &&
                        touched.crosshairDto?.label?.backgroundColor
                      }
                      errorMessage={errors.crosshairDto?.label?.backgroundColor}
                    >
                      <Field
                        type="text"
                        name="crosshairDto.label.backgroundColor"
                        component={Input}
                      />
                    </FormItem>

                    <FormItem
                      label="Format"
                      invalid={
                        errors.crosshairDto?.label?.format && touched.crosshairDto?.label?.format
                      }
                      errorMessage={errors.crosshairDto?.label?.format}
                    >
                      <Field type="text" name="crosshairDto.label.format">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={tooltipFormatListOptions}
                            isClearable={true}
                            value={tooltipFormatListOptions.filter(
                              (option) => option.value === values.crosshairDto.label.format,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Customize Text"
                      invalid={
                        errors.crosshairDto?.label?.customizeText &&
                        touched.crosshairDto?.label?.customizeText
                      }
                      errorMessage={errors.crosshairDto?.label?.customizeText}
                    >
                      <Field
                        type="text"
                        name="crosshairDto.label.customizeText"
                        component={Input}
                      />
                    </FormItem>
                  </Card>

                  <Card className="my-2" header="Crosshair Options - Label - Font">
                    <FormItem
                      label="Color"
                      invalid={
                        errors.crosshairDto?.label?.font?.color &&
                        touched.crosshairDto?.label?.font?.color
                      }
                      errorMessage={errors.crosshairDto?.label?.font?.color}
                    >
                      <Field type="text" name="crosshairDto.label.font.color" component={Input} />
                    </FormItem>

                    <FormItem
                      label="Family"
                      invalid={
                        errors.crosshairDto?.label?.font?.family &&
                        touched.crosshairDto?.label?.font?.family
                      }
                      errorMessage={errors.crosshairDto?.label?.font?.family}
                    >
                      <Field type="text" name="crosshairDto.label.font.family" component={Input} />
                    </FormItem>

                    <FormItem
                      label="Size"
                      invalid={
                        errors.crosshairDto?.label?.font?.size &&
                        touched.crosshairDto?.label?.font?.size
                      }
                      errorMessage={errors.crosshairDto?.label?.font?.size}
                    >
                      <Field type="number" name="crosshairDto.label.font.size" component={Input} />
                    </FormItem>

                    <FormItem
                      label="Weight"
                      invalid={
                        errors.crosshairDto?.label?.font?.weight &&
                        touched.crosshairDto?.label?.font?.weight
                      }
                      errorMessage={errors.crosshairDto?.label?.font?.weight}
                    >
                      <Field type="number" name="crosshairDto.label.font.size" component={Input} />
                    </FormItem>
                  </Card>

                  <Card className="my-2" header="Crosshair Options - Label - Horizontal Line">
                    <FormItem
                      label="Visible"
                      invalid={
                        errors.crosshairDto?.horizontalLine?.visible &&
                        touched.crosshairDto?.horizontalLine?.visible
                      }
                      errorMessage={errors.crosshairDto?.horizontalLine?.visible}
                    >
                      <Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Color"
                      invalid={
                        errors.crosshairDto?.horizontalLine?.color &&
                        touched.crosshairDto?.horizontalLine?.color
                      }
                      errorMessage={errors.crosshairDto?.horizontalLine?.color}
                    >
                      <Field
                        type="text"
                        name="crosshairDto.horizontalLine.color"
                        component={Input}
                      />
                    </FormItem>

                    <FormItem
                      label="Dash Style"
                      invalid={
                        errors.crosshairDto?.horizontalLine?.dashStyle &&
                        touched.crosshairDto?.horizontalLine?.dashStyle
                      }
                      errorMessage={errors.crosshairDto?.horizontalLine?.dashStyle}
                    >
                      <Field type="text" name="crosshairDto.horizontalLine.dashStyle">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={chartSeriesDashStyleOptions}
                            isClearable={true}
                            value={chartSeriesDashStyleOptions.filter(
                              (option) =>
                                option.value === values.crosshairDto.horizontalLine.dashStyle,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Width"
                      invalid={
                        errors.crosshairDto?.horizontalLine?.width &&
                        touched.crosshairDto?.horizontalLine?.width
                      }
                      errorMessage={errors.crosshairDto?.horizontalLine?.width}
                    >
                      <Field
                        type="numner"
                        name="crosshairDto.horizontalLine.width"
                        component={Input}
                      />
                    </FormItem>
                  </Card>

                  <Card
                    className="my-2"
                    header="Crosshair Options - Label - Horizontal Line - Font"
                  >
                    <FormItem
                      label="Color"
                      invalid={
                        errors.crosshairDto?.horizontalLine?.label?.font?.color &&
                        touched.crosshairDto?.horizontalLine?.label?.font?.color
                      }
                      errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.color}
                    >
                      <Field
                        type="text"
                        name="crosshairDto.horizontalLine.label.font.color"
                        component={Input}
                      />
                    </FormItem>

                    <FormItem
                      label="Family"
                      invalid={
                        errors.crosshairDto?.horizontalLine?.label?.font?.family &&
                        touched.crosshairDto?.horizontalLine?.label?.font?.family
                      }
                      errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.family}
                    >
                      <Field
                        type="text"
                        name="crosshairDto.horizontalLine.label.font.family"
                        component={Input}
                      />
                    </FormItem>

                    <FormItem
                      label="Size"
                      invalid={
                        errors.crosshairDto?.horizontalLine?.label?.font?.size &&
                        touched.crosshairDto?.horizontalLine?.label?.font?.size
                      }
                      errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.size}
                    >
                      <Field
                        type="number"
                        name="crosshairDto.horizontalLine.label.font.size"
                        component={Input}
                      />
                    </FormItem>

                    <FormItem
                      label="Weight"
                      invalid={
                        errors.crosshairDto?.horizontalLine?.label?.font?.weight &&
                        touched.crosshairDto?.horizontalLine?.label?.font?.weight
                      }
                      errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.weight}
                    >
                      <Field
                        type="number"
                        name="crosshairDto.horizontalLine.label.font.weight"
                        component={Input}
                      />
                    </FormItem>
                  </Card>

                  <Card className="my-2" header="Crosshair Options - Label - Vertical Line">
                    <FormItem
                      label="Visible"
                      invalid={
                        errors.crosshairDto?.verticalLine?.visible &&
                        touched.crosshairDto?.verticalLine?.visible
                      }
                      errorMessage={errors.crosshairDto?.verticalLine?.visible}
                    >
                      <Field name="crosshairDto.verticalLine.visible" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Color"
                      invalid={
                        errors.crosshairDto?.verticalLine?.color &&
                        touched.crosshairDto?.verticalLine?.color
                      }
                      errorMessage={errors.crosshairDto?.verticalLine?.color}
                    >
                      <Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
                    </FormItem>

                    <FormItem
                      label="Dash Style"
                      invalid={
                        errors.crosshairDto?.verticalLine?.dashStyle &&
                        touched.crosshairDto?.verticalLine?.dashStyle
                      }
                      errorMessage={errors.crosshairDto?.verticalLine?.dashStyle}
                    >
                      <Field type="text" name="crosshairDto.verticalLine.dashStyle">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={chartSeriesDashStyleOptions}
                            isClearable={true}
                            value={chartSeriesDashStyleOptions.filter(
                              (option) =>
                                option.value === values.crosshairDto.verticalLine.dashStyle,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Width"
                      invalid={
                        errors.crosshairDto?.verticalLine?.width &&
                        touched.crosshairDto?.verticalLine?.width
                      }
                      errorMessage={errors.crosshairDto?.verticalLine?.width}
                    >
                      <Field
                        type="numner"
                        name="crosshairDto.verticalLine.width"
                        component={Input}
                      />
                    </FormItem>
                  </Card>

                  <Card
                    className="my-2"
                    header="Crosshair Options - Label - Horizontal Line - Font"
                  >
                    <FormItem
                      label="Color"
                      invalid={
                        errors.crosshairDto?.verticalLine?.label?.font?.color &&
                        touched.crosshairDto?.verticalLine?.label?.font?.color
                      }
                      errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.color}
                    >
                      <Field
                        type="text"
                        name="crosshairDto.verticalLine.label.font.color"
                        component={Input}
                      />
                    </FormItem>

                    <FormItem
                      label="Family"
                      invalid={
                        errors.crosshairDto?.verticalLine?.label?.font?.family &&
                        touched.crosshairDto?.verticalLine?.label?.font?.family
                      }
                      errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.family}
                    >
                      <Field
                        type="text"
                        name="crosshairDto.verticalLine.label.font.family"
                        component={Input}
                      />
                    </FormItem>

                    <FormItem
                      label="Size"
                      invalid={
                        errors.crosshairDto?.verticalLine?.label?.font?.size &&
                        touched.crosshairDto?.verticalLine?.label?.font?.size
                      }
                      errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.size}
                    >
                      <Field
                        type="number"
                        name="crosshairDto.verticalLine.label.font.size"
                        component={Input}
                      />
                    </FormItem>

                    <FormItem
                      label="Weight"
                      invalid={
                        errors.crosshairDto?.verticalLine?.label?.font?.weight &&
                        touched.crosshairDto?.verticalLine?.label?.font?.weight
                      }
                      errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.weight}
                    >
                      <Field
                        type="number"
                        name="crosshairDto.verticalLine.label.font.weight"
                        component={Input}
                      />
                    </FormItem>
                  </Card>
                </TabContent>

                <TabContent value="exportSettings">
                  <Card className="my-2">
                    <FormItem
                      label="Enabled"
                      invalid={errors.exportDto?.enabled && touched.exportDto?.enabled}
                      errorMessage={errors.exportDto?.enabled}
                    >
                      <Field name="exportDto.enabled" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Printing Enabled"
                      invalid={
                        errors.exportDto?.printingEnabled && touched.exportDto?.printingEnabled
                      }
                      errorMessage={errors.exportDto?.printingEnabled}
                    >
                      <Field name="exportDto.printingEnabled" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Background Color"
                      invalid={
                        errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor
                      }
                      errorMessage={errors.exportDto?.backgroundColor}
                    >
                      <Field type="text" name="exportDto.backgroundColor" component={Input} />
                    </FormItem>

                    <FormItem
                      label="Margin"
                      invalid={errors.exportDto?.margin && touched.exportDto?.margin}
                      errorMessage={errors.exportDto?.margin}
                    >
                      <Field type="number" name="exportDto.margin" component={Input} />
                    </FormItem>
                  </Card>
                </TabContent>

                <TabContent value="legendSettings">
                  <Tabs defaultValue="legendSettings_general">
                    <TabList>
                      <TabNav value="legendSettings_general">General</TabNav>
                      <TabNav value="legendSettings_border">Border</TabNav>
                    </TabList>
                    <TabContent value="legendSettings_general">
                      <Card className="my-2">
                        <FormItem
                          label="Visible"
                          invalid={errors.legendDto?.visible && touched.legendDto?.visible}
                          errorMessage={errors.legendDto?.visible}
                        >
                          <Field name="legendDto.visible" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Background Color"
                          invalid={
                            errors.legendDto?.backgroundColor && touched.legendDto?.backgroundColor
                          }
                          errorMessage={errors.legendDto?.backgroundColor}
                        >
                          <Field name="legendDto.backgroundColor" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Title"
                          invalid={errors.legendDto?.title && touched.legendDto?.title}
                          errorMessage={errors.legendDto?.title}
                        >
                          <Field name="legendDto.title" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Orientation"
                          invalid={errors.legendDto?.orientation && touched.legendDto?.orientation}
                          errorMessage={errors.legendDto?.orientation}
                        >
                          <Field type="text" name="legendDto.orientation">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartLegendOrientationListOptions}
                                isClearable={true}
                                value={chartLegendOrientationListOptions.filter(
                                  (option) => option.value === values.legendDto.orientation,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Position"
                          invalid={errors.legendDto?.position && touched.legendDto?.position}
                          errorMessage={errors.legendDto?.position}
                        >
                          <Field type="text" name="legendDto.position">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartLegendPositionListOptions}
                                isClearable={true}
                                value={chartLegendPositionListOptions.filter(
                                  (option) => option.value === values.legendDto.position,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Row Count"
                          invalid={errors.legendDto?.rowCount && touched.legendDto?.rowCount}
                          errorMessage={errors.legendDto?.rowCount}
                        >
                          <Field type="number" name="legendDto.rowCount" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Column Count"
                          invalid={errors.legendDto?.columnCount && touched.legendDto?.columnCount}
                          errorMessage={errors.legendDto?.columnCount}
                        >
                          <Field type="number" name="legendDto.columnCount" component={Input} />
                        </FormItem>
                      </Card>
                    </TabContent>
                    <TabContent value="legendSettings_border">
                      <Card className="my-2">
                        <FormItem
                          label="Visible"
                          invalid={
                            errors.legendDto?.border?.visible && touched.legendDto?.border?.visible
                          }
                          errorMessage={errors.legendDto?.border?.visible}
                        >
                          <Field name="legendDto.border.visible" component={Checkbox} />
                        </FormItem>

                        <FormItem
                          label="Color"
                          invalid={
                            errors.legendDto?.border?.color && touched.legendDto?.border?.color
                          }
                          errorMessage={errors.legendDto?.border?.color}
                        >
                          <Field name="legendDto.border.color" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Dash Style"
                          invalid={
                            errors.legendDto?.border?.dashStyle &&
                            touched.legendDto?.border?.dashStyle
                          }
                          errorMessage={errors.legendDto?.border?.dashStyle}
                        >
                          <Field type="text" name="legendDto.border.dashStyle">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartSeriesDashStyleOptions}
                                isClearable={true}
                                value={chartSeriesDashStyleOptions.filter(
                                  (option) => option.value === values.legendDto.border.dashStyle,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={
                            errors.legendDto?.border?.width && touched.legendDto?.border?.width
                          }
                          errorMessage={errors.legendDto?.border?.width}
                        >
                          <Field type="number" name="legendDto.border.width" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Corner Radius"
                          invalid={
                            errors.legendDto?.border?.cornerRadius &&
                            touched.legendDto?.border?.cornerRadius
                          }
                          errorMessage={errors.legendDto?.border?.cornerRadius}
                        >
                          <Field
                            type="number"
                            name="legendDto.border.cornerRadius"
                            component={Input}
                          />
                        </FormItem>
                      </Card>
                    </TabContent>
                  </Tabs>
                </TabContent>

                <TabContent value="zoomAndPanSettings">
                  <Card className="my-2">
                    <FormItem
                      label="Allow Mouse Wheel"
                      invalid={
                        errors.zoomAndPanDto?.allowMouseWheel &&
                        touched.zoomAndPanDto?.allowMouseWheel
                      }
                      errorMessage={errors.zoomAndPanDto?.allowMouseWheel}
                    >
                      <Field name="zoomAndPanDto.allowMouseWheel" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Allow Touch Gestures"
                      invalid={
                        errors.zoomAndPanDto?.allowTouchGestures &&
                        touched.zoomAndPanDto?.allowTouchGestures
                      }
                      errorMessage={errors.zoomAndPanDto?.allowTouchGestures}
                    >
                      <Field name="zoomAndPanDto.allowTouchGestures" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Drag To Zoom"
                      invalid={
                        errors.zoomAndPanDto?.dragToZoom && touched.zoomAndPanDto?.dragToZoom
                      }
                      errorMessage={errors.zoomAndPanDto?.dragToZoom}
                    >
                      <Field name="zoomAndPanDto.dragToZoom" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Argument Axis"
                      invalid={
                        errors.zoomAndPanDto?.argumentAxis && touched.zoomAndPanDto?.argumentAxis
                      }
                      errorMessage={errors.zoomAndPanDto?.argumentAxis}
                    >
                      <Field type="text" name="zoomAndPanDto.argumentAxis">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={chartZoomAndPanAxisOptions}
                            isClearable={true}
                            value={chartZoomAndPanAxisOptions.filter(
                              (option) => option.value === values.zoomAndPanDto.argumentAxis,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Value Axis"
                      invalid={errors.zoomAndPanDto?.valueAxis && touched.zoomAndPanDto?.valueAxis}
                      errorMessage={errors.zoomAndPanDto?.valueAxis}
                    >
                      <Field type="text" name="zoomAndPanDto.valueAxis">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={chartZoomAndPanAxisOptions}
                            isClearable={true}
                            value={chartZoomAndPanAxisOptions.filter(
                              (option) => option.value === values.zoomAndPanDto.valueAxis,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Pan Key"
                      invalid={errors.zoomAndPanDto?.panKey && touched.zoomAndPanDto?.panKey}
                      errorMessage={errors.zoomAndPanDto?.panKey}
                    >
                      <Field type="text" name="zoomAndPanDto.panKey">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={chartZoomAndPanKeyOptions}
                            isClearable={true}
                            value={chartZoomAndPanKeyOptions.filter(
                              (option) => option.value === values.zoomAndPanDto.panKey,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>
                  </Card>

                  <Card className="my-2" header="Zoom and Pan - DragBox Style">
                    <FormItem
                      label="Color"
                      invalid={
                        errors.zoomAndPanDto?.dragBoxStyle?.color &&
                        touched.zoomAndPanDto?.dragBoxStyle?.color
                      }
                      errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
                    >
                      <Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
                    </FormItem>

                    <FormItem
                      label="Opacity"
                      invalid={
                        errors.zoomAndPanDto?.dragBoxStyle?.opacity &&
                        touched.zoomAndPanDto?.dragBoxStyle?.opacity
                      }
                      errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.opacity}
                    >
                      <Field
                        type="number"
                        name="zoomAndPanDto.dragBoxStyle.opacity"
                        component={Input}
                      />
                    </FormItem>
                  </Card>
                </TabContent>

                <TabContent value="annotations">
                  <Tabs defaultValue="annotations_general">
                    <TabList>
                      <TabNav value="annotations_general">General</TabNav>
                      <TabNav value="annotations_common">Common Pane</TabNav>
                    </TabList>
                    <TabContent value="annotations_general">
                      <Card className="my-2" bodyClass="p-0">
                        <Table compact>
                          <THead>
                            <Tr>
                              <Th>
                                <Button
                                  shape="circle"
                                  variant="plain"
                                  type="button"
                                  size="xs"
                                  title="Add"
                                  icon={<HiOutlineDocumentAdd />}
                                  onClick={async (e) => {
                                    e.preventDefault()
                                    setDatabaseOperationsModalData({
                                      id: values.id ?? '',
                                      index: -1,
                                      isOpen: 'annotation',
                                      operation: 'insert',
                                    })
                                  }}
                                />
                              </Th>
                              <Th>Type</Th>
                              <Th>Name</Th>
                              <Th>Text</Th>
                              <Th>Series</Th>
                              <Th>Value</Th>
                              <Th>Width</Th>
                            </Tr>
                          </THead>
                          <TBody>
                            {chartValues.annotationsDto.map((row, index) => (
                              <Tr key={index}>
                                <Td>
                                  <div className="flex-wrap inline-flex xl:flex items-center gap-2">
                                    <Button
                                      shape="circle"
                                      variant="plain"
                                      type="button"
                                      size="xs"
                                      title="Edit"
                                      icon={<FiEdit3 />}
                                      onClick={async (e) => {
                                        e.preventDefault()
                                        setDatabaseOperationsModalData({
                                          id: values.id ?? '',
                                          index,
                                          isOpen: 'annotation',
                                          operation: 'update',
                                          annotationsValues: chartValues.annotationsDto[index],
                                        })
                                      }}
                                    />
                                    <Button
                                      shape="circle"
                                      variant="plain"
                                      type="button"
                                      size="xs"
                                      title="Delete"
                                      icon={<MdDelete />}
                                      onClick={async (e) => {
                                        e.preventDefault()
                                        setConfirmDelete({
                                          isOpen: true,
                                          id: values.id ?? '',
                                          fieldName: 'annotation',
                                          index,
                                        })
                                      }}
                                    />
                                  </div>
                                </Td>
                                <Td>{row.type}</Td>
                                <Td>{row.name}</Td>
                                <Td>{row.text}</Td>
                                <Td>{row.series}</Td>
                                <Td>{row.value}</Td>
                                <Td>{row.width}</Td>
                              </Tr>
                            ))}
                          </TBody>
                        </Table>
                      </Card>
                    </TabContent>
                    <TabContent value="annotations_common">
                      <Card className="my-2">
                        <FormItem
                          label="Tooltip Enabled"
                          invalid={
                            errors.commonAnnotationSettingsDto?.tooltipEnabled &&
                            touched.commonAnnotationSettingsDto?.tooltipEnabled
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.tooltipEnabled}
                        >
                          <Field
                            name="commonAnnotationSettingsDto.tooltipEnabled"
                            component={Checkbox}
                          />
                        </FormItem>

                        <FormItem
                          label="Pan Key"
                          invalid={
                            errors.commonAnnotationSettingsDto?.type &&
                            touched.commonAnnotationSettingsDto?.type
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.type}
                        >
                          <Field type="text" name="commonAnnotationSettingsDto.type">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartAnnotationTypeListOptions}
                                isClearable={true}
                                value={chartAnnotationTypeListOptions.filter(
                                  (option) =>
                                    option.value === values.commonAnnotationSettingsDto.type,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Pan Key"
                          invalid={
                            errors.commonAnnotationSettingsDto?.series &&
                            touched.commonAnnotationSettingsDto?.series
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.series}
                        >
                          <Field type="text" name="commonAnnotationSettingsDto.series">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={SeriesList()}
                                isClearable={true}
                                value={SeriesList()?.find(
                                  (option) =>
                                    option.value === values.commonAnnotationSettingsDto.series,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Argument"
                          invalid={
                            errors.commonAnnotationSettingsDto?.argument &&
                            touched.commonAnnotationSettingsDto?.argument
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.argument}
                        >
                          <Field name="commonAnnotationSettingsDto.argument" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Color"
                          invalid={
                            errors.commonAnnotationSettingsDto?.color &&
                            touched.commonAnnotationSettingsDto?.color
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.color}
                        >
                          <Field name="commonAnnotationSettingsDto.color" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Value"
                          invalid={
                            errors.commonAnnotationSettingsDto?.value &&
                            touched.commonAnnotationSettingsDto?.value
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.value}
                        >
                          <Field name="commonAnnotationSettingsDto.value" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Description"
                          invalid={
                            errors.commonAnnotationSettingsDto?.description &&
                            touched.commonAnnotationSettingsDto?.description
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.description}
                        >
                          <Field name="commonAnnotationSettingsDto.description" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Image"
                          invalid={
                            errors.commonAnnotationSettingsDto?.image &&
                            touched.commonAnnotationSettingsDto?.image
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.image}
                        >
                          <Field name="commonAnnotationSettingsDto.image" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Text"
                          invalid={
                            errors.commonAnnotationSettingsDto?.text &&
                            touched.commonAnnotationSettingsDto?.text
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.text}
                        >
                          <Field name="commonAnnotationSettingsDto.text" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Word Wrap"
                          invalid={
                            errors.commonAnnotationSettingsDto?.wordWrap &&
                            touched.commonAnnotationSettingsDto?.wordWrap
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.wordWrap}
                        >
                          <Field type="text" name="commonAnnotationSettingsDto.wordWrap">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartWordWrapListOptions}
                                isClearable={true}
                                value={chartWordWrapListOptions.filter(
                                  (option) =>
                                    option.value === values.commonAnnotationSettingsDto.wordWrap,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={
                            errors.commonAnnotationSettingsDto?.width &&
                            touched.commonAnnotationSettingsDto?.width
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.width}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.width"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Height"
                          invalid={
                            errors.commonAnnotationSettingsDto?.height &&
                            touched.commonAnnotationSettingsDto?.height
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.height}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.height"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="X"
                          invalid={
                            errors.commonAnnotationSettingsDto?.x &&
                            touched.commonAnnotationSettingsDto?.x
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.x}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.x"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Y"
                          invalid={
                            errors.commonAnnotationSettingsDto?.y &&
                            touched.commonAnnotationSettingsDto?.y
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.y}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.y"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Offset X"
                          invalid={
                            errors.commonAnnotationSettingsDto?.offsetX &&
                            touched.commonAnnotationSettingsDto?.offsetX
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.offsetX}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.offsetX"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Offset Y"
                          invalid={
                            errors.commonAnnotationSettingsDto?.offsetY &&
                            touched.commonAnnotationSettingsDto?.offsetY
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.offsetY}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.offsetY"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Padding Left/Right"
                          invalid={
                            errors.commonAnnotationSettingsDto?.paddingLeftRight &&
                            touched.commonAnnotationSettingsDto?.paddingLeftRight
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.paddingLeftRight}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.paddingLeftRight"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Padding Top/Bottom"
                          invalid={
                            errors.commonAnnotationSettingsDto?.paddingTopBottom &&
                            touched.commonAnnotationSettingsDto?.paddingTopBottom
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.paddingTopBottom}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.paddingTopBottom"
                            component={Input}
                          />
                        </FormItem>
                      </Card>

                      <Card className="my-2" header="Common Annotations - Border">
                        <FormItem
                          label="Visible"
                          invalid={
                            errors.commonAnnotationSettingsDto?.border?.visible &&
                            touched.commonAnnotationSettingsDto?.border?.visible
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.border?.visible}
                        >
                          <Field
                            name="commonAnnotationSettingsDto.border.visible"
                            component={Checkbox}
                          />
                        </FormItem>

                        <FormItem
                          label="Color"
                          invalid={
                            errors.commonAnnotationSettingsDto?.border?.color &&
                            touched.commonAnnotationSettingsDto?.border?.color
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
                        >
                          <Field
                            type="text"
                            name="commonAnnotationSettingsDto.border.color"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Dash Style"
                          invalid={
                            errors.commonAnnotationSettingsDto?.border?.dashStyle &&
                            touched.commonAnnotationSettingsDto?.border?.dashStyle
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.border?.dashStyle}
                        >
                          <Field type="text" name="commonAnnotationSettingsDto.border.dashStyle">
                            {({ field, form }: FieldProps<SelectBoxOption>) => (
                              <Select
                                field={field}
                                form={form}
                                options={chartSeriesDashStyleOptions}
                                isClearable={true}
                                value={chartSeriesDashStyleOptions.filter(
                                  (option) =>
                                    option.value ===
                                    values.commonAnnotationSettingsDto.border.dashStyle,
                                )}
                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
                              />
                            )}
                          </Field>
                        </FormItem>

                        <FormItem
                          label="Corner Radius"
                          invalid={
                            errors.commonAnnotationSettingsDto?.border?.cornerRadius &&
                            touched.commonAnnotationSettingsDto?.border?.cornerRadius
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.border?.cornerRadius}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.border.cornerRadius"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Width"
                          invalid={
                            errors.commonAnnotationSettingsDto?.border?.width &&
                            touched.commonAnnotationSettingsDto?.border?.width
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.border?.width}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.border.width"
                            component={Input}
                          />
                        </FormItem>
                      </Card>

                      <Card className="my-2" header="Common Annotations - Font">
                        <FormItem
                          label="Color"
                          invalid={
                            errors.commonAnnotationSettingsDto?.font?.color &&
                            touched.commonAnnotationSettingsDto?.font?.color
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
                        >
                          <Field name="commonAnnotationSettingsDto.font.color" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Family"
                          invalid={
                            errors.commonAnnotationSettingsDto?.font?.family &&
                            touched.commonAnnotationSettingsDto?.font?.family
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.font?.family}
                        >
                          <Field name="commonAnnotationSettingsDto.font.family" component={Input} />
                        </FormItem>

                        <FormItem
                          label="Size"
                          invalid={
                            errors.commonAnnotationSettingsDto?.font?.size &&
                            touched.commonAnnotationSettingsDto?.font?.size
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.font?.size}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.font.size"
                            component={Input}
                          />
                        </FormItem>

                        <FormItem
                          label="Weight"
                          invalid={
                            errors.commonAnnotationSettingsDto?.font?.weight &&
                            touched.commonAnnotationSettingsDto?.font?.weight
                          }
                          errorMessage={errors.commonAnnotationSettingsDto?.font?.weight}
                        >
                          <Field
                            type="number"
                            name="commonAnnotationSettingsDto.font.weight"
                            component={Input}
                          />
                        </FormItem>
                      </Card>
                    </TabContent>
                  </Tabs>
                </TabContent>
              </Tabs>

              <div className="mt-4">
                <Button block variant="solid" loading={isSubmitting} type="submit">
                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
                </Button>
              </div>
            </FormContainer>
          </Form>
        )}
      </Formik>

      <Dialog
        id="paneOperation"
        contentClassName="pb-2 px-2"
        isOpen={databaseOperationsModalData.isOpen == 'pane'}
        onClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
        onRequestClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
      >
        <h5 className="mb-4">{databaseOperationsModalData.index === -1 ? 'Add' : 'Update'}</h5>

        <Formik
          initialValues={
            databaseOperationsModalData.panesValues ?? {
              id: '',
              backgroundColor: '',
              height: 250,
              name: '',
            }
          }
          validationSchema={chartPanesValidationSchema}
          onSubmit={async (values, { setSubmitting }) => {
            setSubmitting(true)
            await putChartJsonItem({
              id: chartValues.id,
              chartCode: chartValues.chartCode,
              index: databaseOperationsModalData.index,
              fieldName: 'pane',
              itemPane: { ...values },
            })

            toast.push(
              <Notification type="success" duration={2000}>
                {databaseOperationsModalData.index === -1
                  ? 'Kayıt eklendi.'
                  : 'Kayıt Değiştirildi.'}
              </Notification>,
              {
                placement: 'top-center',
              },
            )

            getChartValues()
            setSubmitting(false)
            setDatabaseOperationsModalData(defaultDatabaseOperation)
          }}
        >
          {({ touched, errors, resetForm, isSubmitting, values }) => (
            <Form>
              <FormContainer>
                <div className="max-h-96 overflow-y-auto p-2">
                  <FormItem
                    label="Name"
                    invalid={errors.name && touched.name}
                    errorMessage={errors.name}
                  >
                    <Field type="text" name="name" component={Input} />
                  </FormItem>

                  <FormItem
                    label="Background Color"
                    invalid={errors.backgroundColor && touched.backgroundColor}
                    errorMessage={errors.backgroundColor}
                  >
                    <Field type="text" name="backgroundColor" component={Input} />
                  </FormItem>

                  <FormItem
                    label="Height"
                    invalid={errors.height && touched.height}
                    errorMessage={errors.height}
                  >
                    <Field type="number" name="height" component={Input} />
                  </FormItem>
                </div>
                <div className="text-right mt-4">
                  <Button block variant="solid" loading={isSubmitting} type="submit">
                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
                  </Button>
                </div>
              </FormContainer>
            </Form>
          )}
        </Formik>
      </Dialog>

      <Dialog
        id="seriesOperation"
        width={900}
        contentClassName="pb-2 px-2"
        isOpen={databaseOperationsModalData.isOpen == 'serie'}
        onClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
        onRequestClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
      >
        <h5 className="mb-4">{databaseOperationsModalData.index === -1 ? 'Add' : 'Update'}</h5>

        <Formik
          initialValues={
            databaseOperationsModalData.seriesValues ?? {
              id: '',
              argumentField: '',
              axis: '',
              barOverlapGroup: '',
              barPadding: 0,
              barWidth: 0,
              color: '',
              cornerRadius: 0,
              dashStyle: 'solid',
              ignoreEmptyPoints: false,
              name: '',
              pane: '',
              rangeValue1Field: '',
              rangeValue2Field: '',
              selectionMode: 'none',
              showInLegend: true,
              type: 'line',
              valueField: '',
              visible: true,
              width: 2,
              label: {
                visible: false,
                backgroundColor: "#f05b41",
                customizeText: '',
                format: '',
                font: null
              },
            }
          }
          validationSchema={chartSeriesValidationSchema}
          onSubmit={async (values, { resetForm, setSubmitting }) => {
            setSubmitting(true)
            await putChartJsonItem({
              chartCode: chartValues.chartCode,
              id: chartValues.id,
              index: databaseOperationsModalData.index,
              fieldName: 'serie',
              itemSerie: { ...values },
            })

            toast.push(
              <Notification type="success" duration={2000}>
                {databaseOperationsModalData.index === -1
                  ? 'Kayıt eklendi.'
                  : 'Kayıt Değiştirildi.'}
              </Notification>,
              {
                placement: 'top-center',
              },
            )

            getChartValues()
            setSubmitting(false)
            setDatabaseOperationsModalData(defaultDatabaseOperation)
          }}
        >
          {({ touched, errors, resetForm, isSubmitting, values }) => (
            <Form>
              <FormContainer>
                <div className="max-h-96 overflow-y-auto p-2">
                  <FormItem
                    label="Visible"
                    invalid={errors.visible && touched.visible}
                    errorMessage={errors.visible}
                  >
                    <Field name="visible" component={Checkbox} />
                  </FormItem>

                  <FormItem
                    label="Show In Legend"
                    invalid={errors.showInLegend && touched.showInLegend}
                    errorMessage={errors.showInLegend}
                  >
                    <Field name="showInLegend" component={Checkbox} />
                  </FormItem>

                  <FormItem
                    label="Ignore Empty Points"
                    invalid={errors.ignoreEmptyPoints && touched.ignoreEmptyPoints}
                    errorMessage={errors.ignoreEmptyPoints}
                  >
                    <Field name="ignoreEmptyPoints" component={Checkbox} />
                  </FormItem>

                  <FormItem
                    label="Type"
                    invalid={errors.type && touched.type}
                    errorMessage={errors.type}
                  >
                    <Field type="text" name="type">
                      {({ field, form }: FieldProps<SelectBoxOption>) => (
                        <Select
                          field={field}
                          form={form}
                          options={chartSeriesTypeOptions}
                          isClearable={true}
                          value={chartSeriesTypeOptions.filter(
                            (option) => option.value === values.type,
                          )}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>

                  <FormItem
                    label="Name"
                    invalid={errors.name && touched.name}
                    errorMessage={errors.name}
                  >
                    <Field type="text" name="name" component={Input} />
                  </FormItem>

                  <FormItem
                    label="Argument Field"
                    invalid={errors.argumentField && touched.argumentField}
                    errorMessage={errors.argumentField}
                  >
                    <Field type="text" name="argumentField" component={Input} />
                  </FormItem>

                  <FormItem
                    label="Value Field"
                    invalid={errors.valueField && touched.valueField}
                    errorMessage={errors.valueField}
                  >
                    <Field type="text" name="valueField" component={Input} />
                  </FormItem>

                  <FormItem
                    label="Axis"
                    invalid={errors.axis && touched.axis}
                    errorMessage={errors.axis}
                  >
                    <Field type="text" name="axis">
                      {({ field, form }: FieldProps<SelectBoxOption>) => (
                        <Select
                          field={field}
                          form={form}
                          options={valueAxisList()}
                          isClearable={true}
                          value={valueAxisList()?.find((option) => option.value === values.axis)}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>

                  <FormItem
                    label="Pane"
                    invalid={errors.pane && touched.pane}
                    errorMessage={errors.pane}
                  >
                    <Field type="text" name="pane">
                      {({ field, form }: FieldProps<SelectBoxOption>) => (
                        <Select
                          field={field}
                          form={form}
                          options={valuePaneList()}
                          isClearable={true}
                          value={valuePaneList()?.find((option) => option.value === values.pane)}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>

                  <FormItem
                    label="Type"
                    invalid={errors.dashStyle && touched.dashStyle}
                    errorMessage={errors.dashStyle}
                  >
                    <Field type="text" name="dashStyle">
                      {({ field, form }: FieldProps<SelectBoxOption>) => (
                        <Select
                          field={field}
                          form={form}
                          options={chartSeriesDashStyleOptions}
                          isClearable={true}
                          value={chartSeriesDashStyleOptions.filter(
                            (option) => option.value === values.dashStyle,
                          )}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>

                  <FormItem
                    label="Color"
                    invalid={errors.color && touched.color}
                    errorMessage={errors.color}
                  >
                    <Field type="text" name="color" component={Input} />
                  </FormItem>

                  <FormItem
                    label="Selection Mode"
                    invalid={errors.selectionMode && touched.selectionMode}
                    errorMessage={errors.selectionMode}
                  >
                    <Field type="text" name="selectionMode">
                      {({ field, form }: FieldProps<SelectBoxOption>) => (
                        <Select
                          field={field}
                          form={form}
                          options={chartSeriesSelectionModeOptions}
                          isClearable={true}
                          value={chartSeriesSelectionModeOptions.filter(
                            (option) => option.value === values.selectionMode,
                          )}
                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
                        />
                      )}
                    </Field>
                  </FormItem>

                  <FormItem
                    label="Width"
                    invalid={errors.width && touched.width}
                    errorMessage={errors.width}
                  >
                    <Field type="number" name="width" component={Input} />
                  </FormItem>

                  <FormItem
                    label="Corner Radius"
                    invalid={errors.cornerRadius && touched.cornerRadius}
                    errorMessage={errors.cornerRadius}
                  >
                    <Field type="number" name="cornerRadius" component={Input} />
                  </FormItem>

                  <Card className="my-2" header="Label">
                    <FormItem label="Label Visible">
                      <Field
                        name="label.visible"
                        component={Checkbox}
                      />
                    </FormItem>
                                        
                    <FormItem
                      label="Background Color"
                      invalid={
                        errors.label?.backgroundColor &&
                        touched.label?.backgroundColor
                      }
                      errorMessage={errors.label?.backgroundColor}
                    >
                      <Field
                        type="text"
                        name="label.backgroundColor"
                        component={Input}
                      />
                    </FormItem>

                    <FormItem
                      label="Format"
                      invalid={
                        errors.label?.format && touched.label?.format
                      }
                      errorMessage={errors.label?.format}
                    >
                      <Field type="text" name="label.format">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={tooltipFormatListOptions}
                            isClearable={true}
                            value={tooltipFormatListOptions.filter(
                              (option) => option.value === values.label.format,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Customize Text"
                      invalid={
                        errors.label?.customizeText && touched.label?.customizeText
                      }
                      errorMessage={errors.label?.customizeText}
                    >
                      <Field
                        type="text"
                        name="label.customizeText"
                        component={Input}
                      />
                    </FormItem>
                  </Card>
                </div>
                <div className="text-right mt-4">
                  <Button block variant="solid" loading={isSubmitting} type="submit">
                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
                  </Button>
                </div>
              </FormContainer>
            </Form>
          )}
        </Formik>
      </Dialog>

      <Dialog
        id="axisOperation"
        width={900}
        contentClassName="pb-2 px-2"
        isOpen={databaseOperationsModalData.isOpen == 'axis'}
        onClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
        onRequestClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
      >
        <h5 className="mb-4">{databaseOperationsModalData.index === -1 ? 'Add' : 'Update'}</h5>

        <Formik
          initialValues={
            databaseOperationsModalData.axisValues ?? {
              grid: {
                color: '#d3d3d3',
                visible: false,
                width: 1,
              },
              name: '',
              position: '',
              title: '',
              valueType: '',
              visible: false,
              width: 0,
              breaks: [
                {
                  startValue: 0,
                  endValue: 0,
                },
              ],
              breakStyle: {
                color: '#ababab',
                line: 'waved',
                width: 5,
              },
              type: '',
              autoBreaksEnabled: false,
              maxAutoBreakCount: 0,
            }
          }
          validationSchema={chartAxisValidationSchema}
          onSubmit={async (values, { setSubmitting }) => {
            setSubmitting(true)
            await putChartJsonItem({
              chartCode: chartValues.chartCode,
              id: chartValues.id,
              index: databaseOperationsModalData.index,
              fieldName: 'axis',
              itemAxis: { ...values },
            })
            toast.push(
              <Notification type="success" duration={2000}>
                {databaseOperationsModalData.index === -1
                  ? 'Kayıt eklendi.'
                  : 'Kayıt Değiştirildi.'}
              </Notification>,
              {
                placement: 'top-center',
              },
            )

            getChartValues()
            setSubmitting(false)
            setDatabaseOperationsModalData(defaultDatabaseOperation)
          }}
        >
          {({ touched, errors, resetForm, isSubmitting, values }) => {
            const breaks = values.breaks

            return (
              <Form>
                <FormContainer>
                  <div className="max-h-96 overflow-y-auto p-2">
                    <FormItem
                      label="Visible"
                      invalid={errors.visible && touched.visible}
                      errorMessage={errors.visible}
                    >
                      <Field name="visible" component={Checkbox} />
                    </FormItem>

                    <FormItem
                      label="Value Type"
                      invalid={errors.valueType && touched.valueType}
                      errorMessage={errors.valueType}
                    >
                      <Field type="text" name="valueType">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={chartArgumentAxisTypeListOptions}
                            isClearable={true}
                            value={chartArgumentAxisTypeListOptions.filter(
                              (option) => option.value === values.valueType,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Type"
                      invalid={errors.type && touched.type}
                      errorMessage={errors.type}
                    >
                      <Field type="text" name="type">
                        {({ field, form }: FieldProps<SelectBoxOption>) => (
                          <Select
                            field={field}
                            form={form}
                            options={chartArgumentAxisTypeListOptions}
                            isClearable={true}
                            value={chartArgumentAxisTypeListOptions.filter(
                              (option) => option.value === values.type,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Position"
                      invalid={errors.position && touched.position}
                      errorMessage={errors.position}
                    >
                      <Field type="text" name="position">
                        {({ field, form }: FieldProps<IdentityRoleDto>) => (
                          <Select
                            field={field}
                            form={form}
                            options={chartArgumentAxisPositionListOptions}
                            isClearable={true}
                            value={chartArgumentAxisPositionListOptions.filter(
                              (option) => option.value === values.position,
                            )}
                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem
                      label="Name"
                      invalid={errors.name && touched.name}
                      errorMessage={errors.name}
                    >
                      <Field type="text" name="name" component={Input} />
                    </FormItem>

                    <FormItem
                      label="Title"
                      invalid={errors.title && touched.title}
                      errorMessage={errors.title}
                    >
                      <Field type="text" name="title" component={Input} />
                    </FormItem>

                    <FormItem
                      label="Width"
                      invalid={errors.width && touched.width}
                      errorMessage={errors.width}
                    >
                      <Field type="number" name="width" component={Input} />
                    </FormItem>

                    <Tabs defaultValue="grid" variant="pill">
                      <TabList>
                        <TabNav value="grid">Grid</TabNav>
                        <TabNav value="breakStyle">Break Style</TabNav>
                        <TabNav value="breaks">Breaks</TabNav>
                      </TabList>
                      <div className="pt-4">
                        <TabContent value="grid">
                          <FormItem
                            label="Visible"
                            invalid={errors.grid?.visible && touched.grid?.visible}
                            errorMessage={errors.grid?.visible}
                          >
                            <Field name="grid.visible" component={Checkbox} />
                          </FormItem>

                          <FormItem
                            label="Color"
                            invalid={errors.grid?.color && touched.grid?.color}
                            errorMessage={errors.grid?.color}
                          >
                            <Field type="text" name="grid.color" component={Input} />
                          </FormItem>

                          <FormItem
                            label="Width"
                            invalid={errors.grid?.width && touched.grid?.width}
                            errorMessage={errors.grid?.width}
                          >
                            <Field type="number" name="grid.width" component={Input} />
                          </FormItem>
                        </TabContent>
                        <TabContent value="breakStyle">
                          <FormItem
                            label="Color"
                            invalid={errors.breakStyle?.color && touched.breakStyle?.color}
                            errorMessage={errors.breakStyle?.color}
                          >
                            <Field type="text" name="breakStyle.color" component={Input} />
                          </FormItem>

                          <FormItem
                            label="Width"
                            invalid={errors.breakStyle?.width && touched.breakStyle?.width}
                            errorMessage={errors.breakStyle?.width}
                          >
                            <Field type="number" name="breakStyle.width" component={Input} />
                          </FormItem>

                          <FormItem
                            label="Line"
                            invalid={errors.breakStyle?.line && touched.breakStyle?.line}
                            errorMessage={errors.breakStyle?.line}
                          >
                            <Field type="text" name="breakStyle.line">
                              {({ field, form }: FieldProps<IdentityRoleDto>) => (
                                <Select
                                  field={field}
                                  form={form}
                                  options={chartBreakStyleLineListOptions}
                                  isClearable={true}
                                  value={chartBreakStyleLineListOptions.filter(
                                    (option) => option.value === values.breakStyle.line,
                                  )}
                                  onChange={(option) =>
                                    form.setFieldValue(field.name, option?.value)
                                  }
                                />
                              )}
                            </Field>
                          </FormItem>
                        </TabContent>
                        <TabContent value="breaks">
                          <FieldArray name="breaks">
                            {({ form, remove, push }) => (
                              <div>
                                {breaks && breaks.length > 0
                                  ? breaks.map((_, index) => {
                                      const startValueFeedBack = fieldFeedback(
                                        form,
                                        `breaks[${index}].startValue`,
                                      )
                                      const endValueFeedBack = fieldFeedback(
                                        form,
                                        `breaks[${index}].endValue`,
                                      )

                                      return (
                                        <div key={index}>
                                          <FormItem
                                            layout="inline"
                                            label="Start Value"
                                            invalid={startValueFeedBack.invalid}
                                            errorMessage={startValueFeedBack.errorMessage}
                                          >
                                            <Field
                                              invalid={startValueFeedBack.invalid}
                                              name={`breaks[${index}].startValue`}
                                              type="number"
                                              component={Input}
                                            />
                                          </FormItem>

                                          <FormItem
                                            layout="inline"
                                            label="End Value"
                                            invalid={endValueFeedBack.invalid}
                                            errorMessage={endValueFeedBack.errorMessage}
                                          >
                                            <Field
                                              invalid={endValueFeedBack.invalid}
                                              name={`breaks[${index}].endValue`}
                                              type="number"
                                              component={Input}
                                            />
                                          </FormItem>

                                          <Button
                                            shape="circle"
                                            type="button"
                                            size="sm"
                                            icon={<HiMinus />}
                                            onClick={() => remove(index)}
                                          />
                                        </div>
                                      )
                                    })
                                  : null}
                                <div>
                                  <Button
                                    type="button"
                                    className="ltr:mr-2 rtl:ml-2"
                                    onClick={() => {
                                      push({
                                        startValue: 0,
                                        endValue: 0,
                                      })
                                    }}
                                  >
                                    Add Break
                                  </Button>
                                </div>
                              </div>
                            )}
                          </FieldArray>
                        </TabContent>
                      </div>
                    </Tabs>
                  </div>
                  <div className="text-right mt-4">
                    <Button block variant="solid" loading={isSubmitting} type="submit">
                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
                    </Button>
                  </div>
                </FormContainer>
              </Form>
            )
          }}
        </Formik>
      </Dialog>

      <Dialog
        id="annotationOperation"
        width={900}
        contentClassName="pb-2 px-2"
        isOpen={databaseOperationsModalData.isOpen == 'annotation'}
        onClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
        onRequestClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
      >
        <h5 className="mb-4">{databaseOperationsModalData.index === -1 ? 'Add' : 'Update'}</h5>

        <Formik
          initialValues={
            databaseOperationsModalData.annotationsValues ?? {
              argument: '',
              border: {
                color: '#d3d3d3',
                cornerRadius: 0,
                dashStyle: 'solid',
                visible: false,
                width: 1,
              },
              color: '',
              description: '',
              font: {
                color: '#FFFFFF',
                family: '"Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif',
                size: 12,
                weight: 400,
              },
              height: 0,
              image: '',
              name: '',
              offsetX: 0,
              offsetY: 0,
              paddingLeftRight: 0,
              paddingTopBottom: 0,
              series: '',
              text: '',
              tooltipEnabled: false,
              type: '',
              value: '',
              width: 0,
              wordWrap: '',
              x: 0,
              y: 0,
            }
          }
          validationSchema={chartAnnotationsValidationSchema}
          onSubmit={async (values, { resetForm, setSubmitting }) => {
            setSubmitting(true)
            await putChartJsonItem({
              chartCode: chartValues.chartCode,
              id: chartValues.id,
              index: databaseOperationsModalData.index,
              fieldName: 'annotation',
              itemAnnotation: { ...values },
            })
            toast.push(
              <Notification type="success" duration={2000}>
                {databaseOperationsModalData.index === -1
                  ? 'Kayıt eklendi.'
                  : 'Kayıt Değiştirildi.'}
              </Notification>,
              {
                placement: 'top-center',
              },
            )

            getChartValues()
            setSubmitting(false)
            setDatabaseOperationsModalData(defaultDatabaseOperation)
          }}
        >
          {({ touched, errors, resetForm, isSubmitting, values }) => (
            <Form>
              <FormContainer>
                <div className="max-h-96 overflow-y-auto p-2">
                  <Tabs defaultValue="annotations_general">
                    <TabList>
                      <TabNav value="annotations_general">General</TabNav>
                      <TabNav value="annotations_border">Border</TabNav>
                    </TabList>
                    <TabContent value="annotations_general">
                      <FormItem
                        label="Tooltip Enabled"
                        invalid={errors.tooltipEnabled && touched.tooltipEnabled}
                        errorMessage={errors.tooltipEnabled}
                      >
                        <Field name="tooltipEnabled" component={Checkbox} />
                      </FormItem>

                      <FormItem
                        label="Type"
                        invalid={errors.type && touched.type}
                        errorMessage={errors.type}
                      >
                        <Field type="text" name="type">
                          {({ field, form }: FieldProps<SelectBoxOption>) => (
                            <Select
                              field={field}
                              form={form}
                              options={chartAnnotationTypeListOptions}
                              isClearable={true}
                              value={chartAnnotationTypeListOptions.filter(
                                (option) => option.value === values.type,
                              )}
                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
                            />
                          )}
                        </Field>
                      </FormItem>

                      <FormItem
                        label="Series"
                        invalid={errors.series && touched.series}
                        errorMessage={errors.series}
                      >
                        <Field type="text" name="type">
                          {({ field, form }: FieldProps<SelectBoxOption>) => (
                            <Select
                              field={field}
                              form={form}
                              options={SeriesList()}
                              isClearable={true}
                              value={SeriesList()?.find((option) => option.value === values.series)}
                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
                            />
                          )}
                        </Field>
                      </FormItem>

                      <FormItem
                        label="Name"
                        invalid={errors.name && touched.name}
                        errorMessage={errors.name}
                      >
                        <Field type="text" name="name" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Text"
                        invalid={errors.text && touched.text}
                        errorMessage={errors.text}
                      >
                        <Field type="text" name="text" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Value"
                        invalid={errors.value && touched.value}
                        errorMessage={errors.value}
                      >
                        <Field type="text" name="value" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Argument"
                        invalid={errors.argument && touched.argument}
                        errorMessage={errors.argument}
                      >
                        <Field name="argument" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Color"
                        invalid={errors.color && touched.color}
                        errorMessage={errors.color}
                      >
                        <Field type="text" name="color" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Word Wrap"
                        invalid={errors.wordWrap && touched.wordWrap}
                        errorMessage={errors.wordWrap}
                      >
                        <Field type="text" name="wordWrap">
                          {({ field, form }: FieldProps<SelectBoxOption>) => (
                            <Select
                              field={field}
                              form={form}
                              options={chartTitleWordWrapListOptions}
                              isClearable={true}
                              value={chartTitleWordWrapListOptions.filter(
                                (option) => option.value === values.wordWrap,
                              )}
                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
                            />
                          )}
                        </Field>
                      </FormItem>

                      <FormItem
                        label="Description"
                        invalid={errors.description && touched.description}
                        errorMessage={errors.description}
                      >
                        <Field type="text" name="description" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Image"
                        invalid={errors.image && touched.image}
                        errorMessage={errors.image}
                      >
                        <Field type="text" name="image" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Width"
                        invalid={errors.width && touched.width}
                        errorMessage={errors.width}
                      >
                        <Field type="number" name="width" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Height"
                        invalid={errors.height && touched.height}
                        errorMessage={errors.height}
                      >
                        <Field type="number" name="height" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Padding Left/Right"
                        invalid={errors.paddingLeftRight && touched.paddingLeftRight}
                        errorMessage={errors.paddingLeftRight}
                      >
                        <Field type="number" name="paddingLeftRight" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Padding Top/Bottom"
                        invalid={errors.paddingTopBottom && touched.paddingTopBottom}
                        errorMessage={errors.paddingTopBottom}
                      >
                        <Field type="number" name="paddingTopBottom" component={Input} />
                      </FormItem>

                      <FormItem label="X" invalid={errors.x && touched.x} errorMessage={errors.x}>
                        <Field type="number" name="x" component={Input} />
                      </FormItem>

                      <FormItem label="Y" invalid={errors.y && touched.y} errorMessage={errors.y}>
                        <Field type="number" name="y" component={Input} />
                      </FormItem>

                      <FormItem
                        label="OffsetX"
                        invalid={errors.offsetX && touched.offsetX}
                        errorMessage={errors.offsetX}
                      >
                        <Field type="number" name="offsetX" component={Input} />
                      </FormItem>

                      <FormItem
                        label="OffsetY"
                        invalid={errors.offsetY && touched.offsetY}
                        errorMessage={errors.offsetY}
                      >
                        <Field type="number" name="offsetY" component={Input} />
                      </FormItem>
                    </TabContent>
                    <TabContent value="annotations_border">
                      <FormItem
                        label="Visible"
                        invalid={errors.border?.visible && touched.border?.visible}
                        errorMessage={errors.border?.visible}
                      >
                        <Field name="border.visible" component={Checkbox} />
                      </FormItem>

                      <FormItem
                        label="Color"
                        invalid={errors.border?.color && touched.border?.color}
                        errorMessage={errors.border?.color}
                      >
                        <Field type="text" name="border.color" component={Input} />
                      </FormItem>

                      <FormItem
                        label="Dash Style"
                        invalid={errors.border?.dashStyle && touched.border?.dashStyle}
                        errorMessage={errors.border?.dashStyle}
                      >
                        <Field type="text" name="border.dashStyle">
                          {({ field, form }: FieldProps<SelectBoxOption>) => (
                            <Select
                              field={field}
                              form={form}
                              options={chartSeriesDashStyleOptions}
                              isClearable={true}
                              value={chartSeriesDashStyleOptions.filter(
                                (option) => option.value === values.border.dashStyle,
                              )}
                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
                            />
                          )}
                        </Field>
                      </FormItem>

                      <FormItem
                        label="Width"
                        invalid={errors.border?.width && touched.border?.width}
                        errorMessage={errors.border?.width}
                      >
                        <Field type="number" name="border.width" component={Input} />
                      </FormItem>
                    </TabContent>
                  </Tabs>
                </div>
                <div className="text-right mt-4">
                  <Button block variant="solid" loading={isSubmitting} type="submit">
                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
                  </Button>
                </div>
              </FormContainer>
            </Form>
          )}
        </Formik>
      </Dialog>

      <Dialog
        id="confirmDelete"
        isOpen={confirmDelete.isOpen}
        onClose={() => setConfirmDelete(defaultConfirmDelete)}
        onRequestClose={() => setConfirmDelete(defaultConfirmDelete)}
      >
        <h5 className="mb-4">Delete</h5>

        <p>Silmek istediğinize emin misiniz?</p>

        <div className="text-right mt-6">
          <Button
            className="ltr:mr-2 rtl:ml-2"
            variant="plain"
            onClick={() => {
              setConfirmDelete(defaultConfirmDelete)
            }}
          >
            Cancel
          </Button>
          <Button
            variant="solid"
            onClick={async () => {
              if (chartCode == null) return

              await deleteChartJsonItem(
                confirmDelete.id,
                chartCode,
                confirmDelete.index,
                confirmDelete.fieldName,
              )

              toast.push(
                <Notification type="success" duration={2000}>
                  {translate('::ListForms.KayitSilindi')}
                </Notification>,
                {
                  placement: 'top-center',
                },
              )

              getChartValues()
              setConfirmDelete(defaultConfirmDelete)
            }}
          >
            Delete
          </Button>
        </div>
      </Dialog>
    </div>
  ) : (
    <></>
  )
}

export default ChartEdit