GridView Select Widgets

2025-09-12 01:21:43 +03:00 · 2025-09-12 01:21:43 +03:00 · 0f12b2e030
commit 0f12b2e030
parent 7c43ed600f
22 changed files with 777 additions and 13 deletions
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridOptionsEditDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridOptionsEditDto.cs
@ -91,14 +91,17 @@ public class GridOptionsEditDto : GridOptionsDto
        set { FormFieldsDefaultValueJson = JsonSerializer.Serialize(value); }
    }

-    //public List<CustomControlBackendDto> CustomControlBackendDto
-    //{
-    //    get
-    //    {
-    //        if (!string.IsNullOrEmpty(base.CustomControlsJson))
-    //            return JsonSerializer.Deserialize<List<CustomControlBackendDto>>(base.CustomControlsJson);
-    //        return new List<CustomControlBackendDto>();
-    //    }
-    //    set { base.CustomControlsJson = JsonSerializer.Serialize(value); }
-    //}
+    [JsonIgnore]
+    public string WidgetsJson { get; set; } // Cagrilacak Widgetlar
+    public List<WidgetEditDto> WidgetsDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(WidgetsJson))
+                return JsonSerializer.Deserialize<List<WidgetEditDto>>(WidgetsJson);
+
+            return [];
+        }
+        set { WidgetsJson = JsonSerializer.Serialize(value); }
+    }
 }
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/WidgetEditDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/WidgetEditDto.cs
@ -0,0 +1,16 @@
+namespace Kurs.Platform.ListForms;
+
+public class WidgetEditDto
+{
+    public int ColGap { get; set; }
+    public int ColSpan { get; set; }
+    public string SqlQuery { get; set; }
+    public string Title { get; set; }
+    public string Value { get; set; }
+    public string ValueClassName { get; set; } = "text-3xl";
+    public string Color { get; set; }
+    public string Icon { get; set; }
+    public string Subtitle { get; set; }
+    public string OnClick { get; set; }
+    public string ClassName { get; set; }
+}
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/ListFormEditTabs.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/ListFormEditTabs.cs
@ -46,6 +46,7 @@ public class ListFormEditTabs
    public const string PagerForm = "pager";
    public const string StateForm = "state";
    public const string SubFormJsonRow = "subForm";
+    public const string WidgetForm = "widget";
    public const string Fields = "fields";
    public const string Customization = "customization";
 }
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/CrudFieldsDefaultValueJsonItemDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/CrudFieldsDefaultValueJsonItemDto.cs
@ -10,4 +10,5 @@ public class CrudFieldsDefaultValueJsonItemDto
    public CommandColumnDto ItemCommandColumn { get; set; }
    public EditingFormDto ItemEditingForm { get; set; }
    public SubFormDto ItemSubForm { get; set; }
+    public WidgetEditDto ItemWidget { get; set; }
 }
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/SelectDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/SelectDto.cs
@ -6,7 +6,7 @@ public class SelectDto
 {
    public SelectDto()
    {
-        LookupDatas = new Dictionary<string, dynamic>();
+        LookupDatas = [];
    }

    public int TotalCount { get; set; }
@ -22,4 +22,6 @@ public class SelectDto
    /// <summary> Sonuc ile ilgili bazi bilgileride gonderir. Ornegin: filtre uygulandı mı? Sunucu filtresi uygulandı mı?
    /// </summary>
    public QueryInfoDto QueryInfos { get; set; }
+
+    public List<WidgetDto> Widgets { get; set; }
 }
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/WidgetDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/WidgetDto.cs
@ -0,0 +1,20 @@
+using System.Collections.Generic;
+
+public class WidgetDto
+{
+    public int ColGap { get; set; }
+    public int ColSpan { get; set; }
+    public List<WidgetItemDto> Items { get; set; }
+}
+
+public class WidgetItemDto
+{
+    public string Title { get; set; }
+    public string Value { get; set; }
+    public string ValueClassName { get; set; } = "text-3xl";
+    public string Color { get; set; }
+    public string Icon { get; set; }
+    public string Subtitle { get; set; }
+    public string OnClick { get; set; }
+    public string ClassName { get; set; }
+}
--- a/api/src/Kurs.Platform.Application/ListForms/Administration/ListFormJsonRowAppService.cs
+++ b/api/src/Kurs.Platform.Application/ListForms/Administration/ListFormJsonRowAppService.cs
@ -40,6 +40,7 @@ public class ListFormJsonRowAppService : PlatformAppService
            ListFormEditTabs.Edit.EditingFormFieldsJsonRow => listForm.EditingFormJson.IsNullOrWhiteSpace() ? [] : JsonSerializer.Deserialize<List<EditingFormDto>>(listForm.EditingFormJson),
            ListFormEditTabs.CommandColumnsJsonRow => listForm.CommandColumnJson.IsNullOrWhiteSpace() ? [] : JsonSerializer.Deserialize<List<CommandColumnDto>>(listForm.CommandColumnJson),
            ListFormEditTabs.SubFormJsonRow => listForm.SubFormsJson.IsNullOrWhiteSpace() ? [] : JsonSerializer.Deserialize<List<SubFormDto>>(listForm.SubFormsJson),
+            ListFormEditTabs.WidgetForm => listForm.WidgetsJson.IsNullOrWhiteSpace() ? [] : JsonSerializer.Deserialize<List<WidgetEditDto>>(listForm.WidgetsJson),
            _ => throw new UserFriendlyException(L[AppErrorCodes.ParameterNotValid]),
        };
    }
@ -73,6 +74,9 @@ public class ListFormJsonRowAppService : PlatformAppService
            case ListFormEditTabs.SubFormJsonRow:
                listForm.SubFormsJson = CreateRow(listForm.SubFormsJson, ObjectMapper.Map<SubFormDto, SubForm>(model.ItemSubForm));
                break;
+            case ListFormEditTabs.WidgetForm:
+                listForm.WidgetsJson = CreateRow(listForm.WidgetsJson, ObjectMapper.Map<WidgetEditDto, Widget>(model.ItemWidget));
+                break;
            default:
                throw new UserFriendlyException(L[AppErrorCodes.ParameterNotValid]);
        }
@ -109,6 +113,9 @@ public class ListFormJsonRowAppService : PlatformAppService
            case ListFormEditTabs.SubFormJsonRow:
                listForm.SubFormsJson = UpdateRow(listForm.SubFormsJson, ObjectMapper.Map<SubFormDto, SubForm>(model.ItemSubForm), model.Index);
                break;
+            case ListFormEditTabs.WidgetForm:
+                listForm.WidgetsJson = UpdateRow(listForm.WidgetsJson, ObjectMapper.Map<WidgetEditDto, Widget>(model.ItemWidget), model.Index);
+                break;
            default:
                throw new UserFriendlyException(L[AppErrorCodes.ParameterNotValid]);
        }
@ -145,6 +152,9 @@ public class ListFormJsonRowAppService : PlatformAppService
            case ListFormEditTabs.SubFormJsonRow:
                listForm.SubFormsJson = DeleteRow<SubForm>(listForm.SubFormsJson, index);
                break;
+            case ListFormEditTabs.WidgetForm:
+                listForm.WidgetsJson = DeleteRow<WidgetEditDto>(listForm.WidgetsJson, index);
+                break;
            default:
                throw new UserFriendlyException(L[AppErrorCodes.ParameterNotValid]);
        }
--- a/api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs
+++ b/api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs
@ -24,6 +24,7 @@ public class ListFormAutoMapperProfile : Profile
        CreateMap<CommandColumnDto, CommandColumn>().ReverseMap();
        CreateMap<SubFormDto, SubForm>().ReverseMap();
        CreateMap<SubFormRelationDto, SubFormRelation>().ReverseMap();
+        CreateMap<WidgetEditDto, Widget>().ReverseMap();

        CreateMap<ListFormImport, ListFormsImportDto>();
        CreateMap<ListFormImportExecute, ListFormImportExecuteDto>();
--- a/api/src/Kurs.Platform.Application/ListForms/ListFormSelectAppService.cs
+++ b/api/src/Kurs.Platform.Application/ListForms/ListFormSelectAppService.cs
@ -214,6 +214,50 @@ public class ListFormSelectAppService : PlatformAppService, IListFormSelectAppSe
            IsAppliedServerFilter = selectQueryManager.IsAppliedServerFilter,
        };

+        //Widgets verileri gösterilecek ise
+        result.Widgets = [];
+
+        if (!listForm.WidgetsJson.IsNullOrWhiteSpace())
+        {
+            var widgetList = JsonSerializer.Deserialize<WidgetEditDto[]>(listForm.WidgetsJson) ?? [];
+            foreach (var widget in widgetList)
+            {
+                if (!string.IsNullOrWhiteSpace(widget.SqlQuery))
+                {
+                    var w = new WidgetDto
+                    {
+                        ColGap = widget.ColGap,
+                        ColSpan = widget.ColSpan,
+                        Items = []
+                    };
+
+                    var items = await dynamicDataRepository.QueryAsync(widget.SqlQuery, connectionString);
+                    if (items != null)
+                    {
+                        foreach (var item in items)
+                        {
+                            if (item is IDictionary<string, object> dynamicItem)
+                            {
+                                w.Items.Add(new WidgetItemDto
+                                {
+                                    Title = dynamicItem.ContainsKey(widget.Title) ? dynamicItem[widget.Title]?.ToString() : string.Empty,
+                                    Value = dynamicItem.ContainsKey(widget.Value) ? dynamicItem[widget.Value]?.ToString() : string.Empty,
+                                    Color = dynamicItem.ContainsKey(widget.Color) ? dynamicItem[widget.Color]?.ToString() : string.Empty,
+                                    Icon = dynamicItem.ContainsKey(widget.Icon) ? dynamicItem[widget.Icon]?.ToString() : string.Empty,
+                                    Subtitle = dynamicItem.ContainsKey(widget.Subtitle) ? dynamicItem[widget.Subtitle]?.ToString() : string.Empty,
+                                    OnClick = dynamicItem.ContainsKey(widget.OnClick) ? dynamicItem[widget.OnClick]?.ToString() : string.Empty,
+                                    ClassName = dynamicItem.ContainsKey(widget.ClassName) ? dynamicItem[widget.ClassName]?.ToString() : string.Empty,
+                                });
+                            }
+                        }
+
+                    }
+
+                    result.Widgets.Add(w);
+                }
+            }
+        }
+
        return result;
    }

--- a/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
+++ b/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
@ -7860,6 +7860,12 @@
            "en": "Sub Forms",
            "tr": "Alt Formlar"
        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.TabWidgets",
+            "en": "Widgets",
+            "tr": "Widget'lar"
+        },
        {
            "resourceName": "Platform",
            "key": "ListForms.ListFormEdit.TabFields",
@ -8370,6 +8376,18 @@
            "en": "Url",
            "tr": "Url"
        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.Widgets",
+            "en": "Widgets",
+            "tr": "Widget'lar"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetsDescription",
+            "en": "Information to display in widgets",
+            "tr": "Widget'larda gösterilecek bilgiler"
+        },
        {
            "resourceName": "Platform",
            "key": "ListForms.ListFormEdit.Editing",
@ -8544,6 +8562,72 @@
            "en": "Child Field Name",
            "tr": "Child Field Name"
        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetColGap",
+            "en": "Column Gap",
+            "tr": "Sütun Boşluğu"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetColSpan",
+            "en": "Column Span",
+            "tr": "Sütun Genişliği"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetTitle",
+            "en": "Title Field Name",
+            "tr": "Başlık Alanı Adı"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetValue",
+            "en": "Value Field Name",
+            "tr": "Değer Alanı Adı"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetValueClassName",
+            "en": "Value Class Name",
+            "tr": "Değer Sütun Sınıf Adı"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetColor",
+            "en": "Color Field Name",
+            "tr": "Renk Alanı Adı"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetIcon",
+            "en": "Icon Field Name",
+            "tr": "İkon Alanı Adı"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetSubtitle",
+            "en": "Subtitle Field Name",
+            "tr": "Alt Başlık Alanı Adı"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetOnClick",
+            "en": "On Click",
+            "tr": "Tıklandığında"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetClassName",
+            "en": "Class Name",
+            "tr": "Sınıf Adı"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.WidgetSqlQuery",
+            "en": "Sql Query",
+            "tr": "T-SQL Sorgu"
+        },
        {
            "resourceName": "Platform",
            "key": "ListForms.ListFormEdit.EditingFormOrder",
--- a/api/src/Kurs.Platform.Domain/Entities/ListForm.cs
+++ b/api/src/Kurs.Platform.Domain/Entities/ListForm.cs
@ -115,4 +115,7 @@ public class ListForm : FullAuditedEntity<Guid>

    /// <summary>Bu listform'un sub listformlarının listesi ve ilişkileri</summary>
    public string SubFormsJson { get; set; }
+
+    /// <summary>bu listform'un üstünde yer alan widgetların listesidir</summary>
+    public string WidgetsJson { get; set; }
 }
--- a/api/src/Kurs.Platform.Domain/Queries/Widget.cs
+++ b/api/src/Kurs.Platform.Domain/Queries/Widget.cs
@ -0,0 +1,34 @@
+using System.Collections.Generic;
+using Volo.Abp.Domain.Values;
+
+namespace Kurs.Platform.Queries;
+
+public class Widget : ValueObject
+{
+    public int ColGap { get; set; }
+    public int ColSpan { get; set; }
+    public string SqlQuery { get; set; }
+    public string Title { get; set; }
+    public string Value { get; set; }
+    public string ValueClassName { get; set; } = "text-3xl";
+    public string Color { get; set; }
+    public string Icon { get; set; }
+    public string Subtitle { get; set; }
+    public string OnClick { get; set; }
+    public string ClassName { get; set; }
+
+    protected override IEnumerable<object> GetAtomicValues()
+    {
+        yield return ColGap;
+        yield return ColSpan;
+        yield return SqlQuery;
+        yield return Title;
+        yield return Value;
+        yield return ValueClassName;
+        yield return Color;
+        yield return Icon;
+        yield return Subtitle;
+        yield return OnClick;
+        yield return ClassName;
+    }
+}
--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250911192105_Initial.Designer.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250911192105_Initial.Designer.cs
@ -13,7 +13,7 @@ using Volo.Abp.EntityFrameworkCore;
 namespace Kurs.Platform.Migrations
 {
    [DbContext(typeof(PlatformDbContext))]
-    [Migration("20250831164324_Initial")]
+    [Migration("20250911192105_Initial")]
    partial class Initial
    {
        /// <inheritdoc />
@ -2926,6 +2926,9 @@ namespace Kurs.Platform.Migrations
                    b.Property<string>("UpdateServiceAddress")
                        .HasColumnType("nvarchar(max)");

+                    b.Property<string>("WidgetsJson")
+                        .HasColumnType("nvarchar(max)");
+
                    b.Property<int?>("Width")
                        .HasColumnType("int");

--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250911192105_Initial.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250911192105_Initial.cs
@ -1239,6 +1239,7 @@ namespace Kurs.Platform.Migrations
                    ListFormType = table.Column<string>(type: "nvarchar(max)", nullable: true),
                    IsSubForm = table.Column<bool>(type: "bit", nullable: false),
                    SubFormsJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    WidgetsJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
                    CreationTime = table.Column<DateTime>(type: "datetime2", nullable: false),
                    CreatorId = table.Column<Guid>(type: "uniqueidentifier", nullable: true),
                    LastModificationTime = table.Column<DateTime>(type: "datetime2", nullable: true),
--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
@ -2923,6 +2923,9 @@ namespace Kurs.Platform.Migrations
                    b.Property<string>("UpdateServiceAddress")
                        .HasColumnType("nvarchar(max)");

+                    b.Property<string>("WidgetsJson")
+                        .HasColumnType("nvarchar(max)");
+
                    b.Property<int?>("Width")
                        .HasColumnType("int");

--- a/ui/dev-dist/sw.js
+++ b/ui/dev-dist/sw.js
@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    "revision": "3ca0b8505b4bec776b69afdba2768812"
  }, {
    "url": "index.html",
-    "revision": "0.1jncqb74048"
+    "revision": "0.buc1mitnpmo"
  }], {});
  workbox.cleanupOutdatedCaches();
  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
--- a/ui/src/proxy/admin/list-form/models.ts
+++ b/ui/src/proxy/admin/list-form/models.ts
@ -4,6 +4,7 @@ import {
  FieldsDefaultValueDto,
  SelectCommandTypeEnum,
  SubFormDto,
+  WidgetEditDto,
 } from '../../form/models'

 export interface ListFormWizardDto {
@ -35,6 +36,7 @@ export interface ListFormJsonRowDto {
  itemCommandColumn?: CommandColumnDto
  itemEditingForm?: EditingFormDto
  itemSubForm?: SubFormDto
+  itemWidget?: WidgetEditDto
 }

 export const ListFormEditTabs = {
@ -73,6 +75,7 @@ export const ListFormEditTabs = {
  PagerForm: 'pager',
  StateForm: 'state',
  SubForm: 'subForm',
+  Widget: 'widget',
  Fields: 'fields',
  Customization: 'customization',
 } as const
--- a/ui/src/proxy/form/models.ts
+++ b/ui/src/proxy/form/models.ts
@ -501,6 +501,8 @@ export interface GridOptionsEditDto extends GridOptionsDto, Record<string, any>
  updateFieldsDefaultValueDto: FieldsDefaultValueDto[]
  formFieldsDefaultValueJson?: string
  formFieldsDefaultValueDto: FieldsDefaultValueDto[]
+  widgetsJson?: string
+  widgetsDto: WidgetEditDto[]
 }

 export interface GridPagerOptionDto {
@ -699,3 +701,17 @@ export enum ColumnSortDirectionEnum {
  'Asc' = 'asc',
  'Desc' = 'desc',
 }
+
+export interface WidgetEditDto {
+  colGap: number
+  colSpan: number
+  sqlQuery?: string
+  title: string
+  value: string
+  valueClassName: string
+  color: string
+  icon: string
+  subTitle: string
+  onClick: string
+  className: string
+}
--- a/ui/src/views/admin/listForm/edit/FormEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/FormEdit.tsx
@ -32,6 +32,7 @@ import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin/models'
 import { getListFormCustomizations } from '@/services/admin/list-form-customization.service'
 import { Container } from '@/components/shared'
 import { ROUTES_ENUM } from '@/routes/route.constant'
+import FormTabWidgets from './FormTabWidgets'

 export interface FormEditProps {
  onSubmit: (
@ -187,6 +188,7 @@ const FormEdit = () => {
          <TabNav value="pager">{translate('::ListForms.ListFormEdit.TabPaging')}</TabNav>
          <TabNav value="state">{translate('::ListForms.ListFormEdit.TabState')}</TabNav>
          <TabNav value="subForms">{translate('::ListForms.ListFormEdit.TabSubForms')}</TabNav>
+          <TabNav value="widget">{translate('::ListForms.ListFormEdit.TabWidgets')}</TabNav>
          <TabNav value="fields">{translate('::ListForms.ListFormEdit.TabFields')}</TabNav>
          <TabNav value="customization">
            {translate('::ListForms.ListFormEdit.TabCustomization')}
@ -231,6 +233,9 @@ const FormEdit = () => {
        <TabContent value="subForms">
          <FormTabSubForm />
        </TabContent>
+        <TabContent value="widget">
+          <FormTabWidgets listFormCode={listFormCode} />
+        </TabContent>
        <TabContent value="fields">
          <FormFields
            listFormCode={listFormCode}
--- a/ui/src/views/admin/listForm/edit/FormTabWidgets.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabWidgets.tsx
@ -0,0 +1,139 @@
+import { Container } from '@/components/shared'
+import { Button, Card, Table } 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 { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { useStoreState } from '@/store'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useState } from 'react'
+import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
+import JsonRowOpDialogEditForm from './json-row-operations/JsonRowOpDialogEditForm'
+import { JsonRowDialogData } from './json-row-operations/types'
+import JsonRowOpDialogWidget from './json-row-operations/JsonRowOpDialogWidget'
+
+function FormTabWidgets(props: { listFormCode: string }) {
+  const [isJsonRowOpDialogOpen, setIsJsonRowOpDialogOpen] = useState(false)
+  const [jsonRowOpModalData, setJsonRowOpModalData] = useState<JsonRowDialogData>()
+  const { translate } = useLocalization()
+
+  const initialValues = useStoreState((s) => s.admin.listFormValues)
+  if (!initialValues) {
+    return null
+  }
+
+  return (
+    <Container>
+      <Card
+        className="my-2"
+        bodyClass="p-0"
+        header={translate('::ListForms.ListFormEdit.Widgets')}
+        headerExtra={translate('::ListForms.ListFormEdit.WidgetsDescription')}
+      >
+        <Table compact>
+          <THead>
+            <Tr>
+              <Th className="text-center">
+                <Button
+                  shape="circle"
+                  variant="plain"
+                  type="button"
+                  size="xs"
+                  title="Add"
+                  icon={<FaFileMedical />}
+                  onClick={async (e) => {
+                    e.preventDefault()
+                    setJsonRowOpModalData({
+                      tabName: ListFormEditTabs.Widget,
+                      operation: 'create',
+                      id: initialValues.id ?? '',
+                      index: -1,
+                    })
+                    setIsJsonRowOpDialogOpen(true)
+                  }}
+                />
+              </Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetColGap')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetColSpan')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetSqlQuery')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetTitle')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetValue')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetValueClassName')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetColor')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetIcon')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetSubtitle')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetOnClick')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetClassName')}</Th>
+            </Tr>
+          </THead>
+          <TBody>
+            {initialValues.widgetsDto.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={<FaEdit />}
+                      onClick={() => {
+                        setJsonRowOpModalData({
+                          tabName: ListFormEditTabs.Widget,
+                          operation: 'update',
+                          id: initialValues.id ?? '',
+                          index,
+                          widgetValues: initialValues.widgetsDto[index],
+                        })
+                        setIsJsonRowOpDialogOpen(true)
+                      }}
+                    />
+                    <Button
+                      shape="circle"
+                      variant="plain"
+                      type="button"
+                      size="xs"
+                      title="Delete"
+                      icon={<FaTrash />}
+                      onClick={() => {
+                        setJsonRowOpModalData({
+                          tabName: ListFormEditTabs.Widget,
+                          operation: 'delete',
+                          id: initialValues.id ?? '',
+                          index,
+                        })
+                        setIsJsonRowOpDialogOpen(true)
+                      }}
+                    />
+                  </div>
+                </Td>
+                <Td>{row.colGap}</Td>
+                <Td>{row.colSpan}</Td>
+                <Td>{row.sqlQuery}</Td>
+                <Td>{row.title}</Td>
+                <Td>{row.value}</Td>
+                <Td>{row.valueClassName}</Td>
+                <Td>{row.color}</Td>
+                <Td>{row.icon}</Td>
+                <Td>{row.subTitle}</Td>
+                <Td>{row.onClick}</Td>
+                <Td>{row.className}</Td>
+              </Tr>
+            ))}
+          </TBody>
+        </Table>
+      </Card>
+      <JsonRowOpDialogWidget
+        isOpen={isJsonRowOpDialogOpen}
+        setIsOpen={setIsJsonRowOpDialogOpen}
+        data={jsonRowOpModalData}
+        setData={setJsonRowOpModalData}
+      />
+    </Container>
+  )
+}
+
+export default FormTabWidgets
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
@ -0,0 +1,373 @@
+import {
+  Button,
+  Dialog,
+  FormContainer,
+  FormItem,
+  Input,
+  Notification,
+  toast,
+} from '@/components/ui'
+import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
+import { SelectBoxOption } from '@/shared/types'
+import { useStoreActions, useStoreState } from '@/store'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { Field, Form, Formik } from 'formik'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { number, object, string } from 'yup'
+import { JsonRowDialogData } from './types'
+import {
+  deleteListFormJsonRow,
+  getListFormJsonRow,
+  postListFormJsonRow,
+  putListFormJsonRow,
+} from '@/services/admin/list-form.service'
+
+const schema = object().shape({
+  colGap: number().required('Column Gap Required'),
+  colSpan: number().required('Column Span Required'),
+  sqlQuery: string().required('SQL Query Required'),
+  title: string().required('Title Required'),
+  value: string().required('Value Required'),
+  valueClassName: string().notRequired(),
+  color: string().notRequired(),
+  icon: string().notRequired(),
+  subTitle: string().notRequired(),
+  onClick: string().notRequired(),
+  className: string().notRequired(),
+})
+
+function JsonRowOpDialogWidget({
+  isOpen,
+  setIsOpen,
+  data,
+  setData,
+}: {
+  isOpen: boolean
+  setIsOpen: Dispatch<SetStateAction<boolean>>
+  data: JsonRowDialogData | undefined
+  setData: Dispatch<SetStateAction<JsonRowDialogData | undefined>>
+}) {
+  const [permissionOptions, setPermissionOptions] = useState<SelectBoxOption[]>([])
+  const { translate } = useLocalization()
+
+  const permissions: Record<string, boolean> | undefined = useStoreState(
+    (state) => state.abpConfig.config?.auth.grantedPolicies,
+  )
+
+  useEffect(() => {
+    if (permissions) {
+      setPermissionOptions(
+        Object.keys(permissions).map((key) => {
+          return {
+            value: key,
+            label: key,
+          }
+        }),
+      )
+    }
+  }, [permissions])
+
+  const { setJsonValue } = useStoreActions((a) => a.admin)
+
+  const handleClose = async (e?: any) => {
+    if (e) {
+      e.preventDefault()
+    }
+
+    if (data) {
+      const resp = await getListFormJsonRow(data.id, data.tabName)
+      setJsonValue({ field: 'widgetsDto', data: resp.data })
+    }
+
+    setData(undefined)
+    setIsOpen(false)
+  }
+
+  if (!data) {
+    return null
+  }
+
+  return (
+    <Dialog
+      id="widgetOperation"
+      isOpen={isOpen}
+      preventScroll={true}
+      onClose={handleClose}
+      onRequestClose={handleClose}
+    >
+      {(data.operation === 'create' || data.operation === 'update') && (
+        <>
+          <h5 className="mb-4">{data.index === -1 ? 'Add' : 'Update'}</h5>
+          <Formik
+            initialValues={
+              data.widgetValues ?? {
+                colGap: 0,
+                colSpan: 0,
+                sqlQuery: '',
+                title: '',
+                value: '',
+                valueClassName: '',
+                color: '',
+                icon: '',
+                subTitle: '',
+                onClick: '',
+                className: '',
+              }
+            }
+            validationSchema={schema}
+            onSubmit={async (values, { setSubmitting }) => {
+              setSubmitting(true)
+              try {
+                const input: ListFormJsonRowDto = {
+                  index: data.index,
+                  fieldName: data.tabName,
+                  itemWidget: values,
+                }
+                if (data.index === -1) {
+                  await postListFormJsonRow(data.id, input)
+                } else {
+                  await putListFormJsonRow(data.id, input)
+                }
+                toast.push(
+                  <Notification type="success">
+                    {data.index === -1 ? 'Kayıt eklendi' : 'Kayıt güncellendi'}
+                  </Notification>,
+                  { placement: 'top-end' },
+                )
+                handleClose()
+              } catch (error: any) {
+                toast.push(
+                  <Notification type="danger">
+                    Hata
+                    <code>{error}</code>
+                  </Notification>,
+                  { placement: 'top-end' },
+                )
+              } finally {
+                setSubmitting(false)
+              }
+            }}
+          >
+            {({ touched, errors, values, isSubmitting }) => (
+              <Form>
+                <FormContainer size="sm">
+                  <div className="max-h-96 overflow-y-auto p-2">
+                    <FormItem
+                      label="Column Gap"
+                      invalid={errors.colGap && touched.colGap}
+                      errorMessage={errors.colGap}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="colGap"
+                        placeholder="Column Gap"
+                        component={Input}
+                      />
+                    </FormItem>
+                    
+                    <FormItem
+                      label="Column Span"
+                      invalid={errors.colSpan && touched.colSpan}
+                      errorMessage={errors.colSpan}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="colSpan"
+                        placeholder="Column Span"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Sql Query"
+                      invalid={errors.sqlQuery && touched.sqlQuery}
+                      errorMessage={errors.sqlQuery}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="sqlQuery"
+                        placeholder="Sql Query"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Title Field"
+                      invalid={errors.title && touched.title}
+                      errorMessage={errors.title}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="title"
+                        placeholder="Title Field"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Value Field"
+                      invalid={errors.value && touched.value}
+                      errorMessage={errors.value}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="value"
+                        placeholder="Value Field"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Value Class Name"
+                      invalid={errors.valueClassName && touched.valueClassName}
+                      errorMessage={errors.valueClassName}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="valueClassName"
+                        placeholder="Value Class Name"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Color"
+                      invalid={errors.color && touched.color}
+                      errorMessage={errors.color}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="color"
+                        placeholder="Color"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Icon"
+                      invalid={errors.icon && touched.icon}
+                      errorMessage={errors.icon}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="icon"
+                        placeholder="Icon"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Sub Title"
+                      invalid={errors.subTitle && touched.subTitle}
+                      errorMessage={errors.subTitle}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="subtitle"
+                        placeholder="Sub Title"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="On Click"
+                      invalid={errors.onClick && touched.onClick}
+                      errorMessage={errors.onClick}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="onClick"
+                        placeholder="On Click"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Class Name"
+                      invalid={errors.className && touched.className}
+                      errorMessage={errors.className}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="className"
+                        placeholder="Class Name"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                  </div>
+                  <div className="text-right mt-4">
+                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="solid" loading={isSubmitting} type="submit">
+                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                    </Button>
+                  </div>
+                </FormContainer>
+              </Form>
+            )}
+          </Formik>
+        </>
+      )}
+      {data.operation === 'delete' && (
+        <>
+          <h5 className="mb-4">Delete</h5>
+          <p>Silmek istediğinize emin misiniz?</p>
+          <Formik
+            initialValues={data}
+            onSubmit={async (values, { setSubmitting }) => {
+              setSubmitting(true)
+              try {
+                await deleteListFormJsonRow(data.id, data.tabName, values.index)
+                toast.push(<Notification type="success">Kayıt silindi </Notification>, {
+                  placement: 'top-end',
+                })
+                handleClose()
+              } catch (error: any) {
+                toast.push(
+                  <Notification type="danger">
+                    Hata
+                    <code>{error}</code>
+                  </Notification>,
+                  { placement: 'top-end' },
+                )
+              } finally {
+                setSubmitting(false)
+              }
+              // getListFormJsonRow()
+            }}
+          >
+            {({ isSubmitting }) => (
+              <Form>
+                <FormContainer size="sm">
+                  <div className="text-right mt-4">
+                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="solid" loading={isSubmitting} type="submit">
+                      {isSubmitting ? 'Deleting' : 'Delete'}
+                    </Button>
+                  </div>
+                </FormContainer>
+              </Form>
+            )}
+          </Formik>
+        </>
+      )}
+    </Dialog>
+  )
+}
+
+export default JsonRowOpDialogWidget
--- a/ui/src/views/admin/listForm/edit/json-row-operations/types.ts
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/types.ts
@ -4,6 +4,7 @@ import {
  EditingFormDto,
  FieldsDefaultValueDto,
  SubFormDto,
+  WidgetEditDto,
 } from '@/proxy/form/models'
 import { ExtractNestedValues } from '@/utils/extractNestedValues'

@ -18,4 +19,5 @@ export interface JsonRowDialogData {
  editFormValues?: EditingFormDto
  commandValues?: CommandColumnDto
  subFormValues?: SubFormDto
+  widgetValues?: WidgetEditDto
 }