GridView Select Widgets

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
+    [JsonIgnore]
-    //{
+    public string WidgetsJson { get; set; } // Cagrilacak Widgetlar
-    //    get
+    public List<WidgetEditDto> WidgetsDto
-    //    {
+    {
-    //        if (!string.IsNullOrEmpty(base.CustomControlsJson))
+        get
-    //            return JsonSerializer.Deserialize<List<CustomControlBackendDto>>(base.CustomControlsJson);
+        {
-    //        return new List<CustomControlBackendDto>();
+            if (!string.IsNullOrEmpty(WidgetsJson))
-    //    }
+                return JsonSerializer.Deserialize<List<WidgetEditDto>>(WidgetsJson);
-    //    set { base.CustomControlsJson = JsonSerializer.Serialize(value); }
+
-    //}
+            return [];
+        }
+        set { WidgetsJson = JsonSerializer.Serialize(value); }
+    }
 }

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; }
+}

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";
 }

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

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

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; }
+}

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]);
         }

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

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

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",

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

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;
+    }
+}

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");
 

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

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");
 

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"), {

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

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

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}

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

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

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
 }