From f2652dbb44b22f38938f90f4be17e13e0be4e75c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= <sedat.ozturk@sozsoft.com>
Date: Fri, 27 Feb 2026 23:57:11 +0300
Subject: [PATCH] =?UTF-8?q?Wizard=20Step3=20ve=20Wizard=20Step4=20g=C3=BCn?=
 =?UTF-8?q?cellemesi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Seeds/LanguagesData.json                  |   4 +-
 .../Seeds/MenusData.json                      |   4 +-
 ui/src/views/admin/listForm/Wizard.tsx        |  69 +-
 ui/src/views/admin/listForm/WizardStep3.tsx   | 766 ++++++++++++++++++
 ui/src/views/admin/listForm/WizardStep4.tsx   | 382 +++++++++
 5 files changed, 1203 insertions(+), 22 deletions(-)
 create mode 100644 ui/src/views/admin/listForm/WizardStep3.tsx
 create mode 100644 ui/src/views/admin/listForm/WizardStep4.tsx

diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
index 11e405f..46b6f95 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -1401,8 +1401,8 @@
         {
             "resourceName": "Platform",
             "key": "App.Listforms.Wizard",
-            "en": "Wizard",
-            "tr": "Sihirbaz"
+            "en": "Listform Wizard",
+            "tr": "Listform Sihirbazı"
         },
         {
             "resourceName": "Platform",
diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/MenusData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/MenusData.json
index 47dca34..2912244 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/MenusData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/MenusData.json
@@ -1050,10 +1050,10 @@
             "IsDisabled": false
         },
         {
-            "ParentCode": "App.Administration",
+            "ParentCode": "App.DeveloperKit",
             "Code": "App.Listforms.Wizard",
             "DisplayName": "App.Listforms.Wizard",
-            "Order": 10,
+            "Order": 9,
             "Url": "/admin/listform/wizard",
             "Icon": "FcFlashAuto",
             "RequiredPermissionName": "App.Listforms.Wizard",
diff --git a/ui/src/views/admin/listForm/Wizard.tsx b/ui/src/views/admin/listForm/Wizard.tsx
index 8f72a7b..6f1b554 100644
--- a/ui/src/views/admin/listForm/Wizard.tsx
+++ b/ui/src/views/admin/listForm/Wizard.tsx
@@ -24,6 +24,8 @@ import WizardStep1, {
   findRootCode,
 } from './WizardStep1'
 import WizardStep2, { sqlDataTypeToDbType } from './WizardStep2'
+import WizardStep3, { WizardGroup } from './WizardStep3'
+import WizardStep4 from './WizardStep4'
 import { Container } from '@/components/shared'
 
 // ─── Formik initial values & validation ──────────────────────────────────────
@@ -114,10 +116,14 @@ const Wizard = () => {
   const [isLoadingColumns, setIsLoadingColumns] = useState(false)
   const [selectedColumns, setSelectedColumns] = useState<Set<string>>(new Set())
 
+  // ── Editing Form Groups (Step 3) ──
+  const [editingGroups, setEditingGroups] = useState<WizardGroup[]>([])
+
   const loadColumns = async (dsCode: string, schema: string, name: string) => {
     if (!dsCode || !name) {
       setSelectCommandColumns([])
       setSelectedColumns(new Set())
+      setEditingGroups([])
       return
     }
     setIsLoadingColumns(true)
@@ -126,11 +132,15 @@ const Wizard = () => {
       const cols = res.data ?? []
       setSelectCommandColumns(cols)
       setSelectedColumns(new Set(cols.map((c) => c.columnName)))
+      setEditingGroups([])
       // Auto-select first column as key field
       if (cols.length > 0) {
         const first = cols[0]
         formikRef.current?.setFieldValue('keyFieldName', first.columnName)
-        formikRef.current?.setFieldValue('keyFieldDbSourceType', sqlDataTypeToDbType(first.dataType))
+        formikRef.current?.setFieldValue(
+          'keyFieldDbSourceType',
+          sqlDataTypeToDbType(first.dataType),
+        )
       }
     } catch {
       setSelectCommandColumns([])
@@ -283,6 +293,26 @@ const Wizard = () => {
     setCurrentStep(2)
   }
 
+  const handleDeploy = async () => {
+    if (!formikRef.current) throw new Error('Form bulunamadı')
+    const values = formikRef.current.values
+    await postListFormWizard({ ...values })
+    toast.push(
+      <Notification type="success" duration={2000}>
+        {translate('::ListForms.FormBilgileriKaydedildi')}
+      </Notification>,
+      { placement: 'top-end' },
+    )
+    setTimeout(() => {
+      navigate(
+        ROUTES_ENUM.protected.saas.listFormManagement.edit.replace(
+          ':listFormCode',
+          values.listFormCode,
+        ),
+      )
+    }, 1500)
+  }
+
   return (
     <Container>
       <Helmet
@@ -336,7 +366,7 @@ const Wizard = () => {
       >
         {({ touched, errors, isSubmitting, values }) => (
           <Form>
-            <FormContainer size="sm">
+            <FormContainer size={currentStep === 2 ? undefined : currentStep === 3 ? undefined : 'sm'}>
               {/* ─── Step 1: Basic Info ─────────────────────────────── */}
               {currentStep === 0 && (
                 <WizardStep1
@@ -389,26 +419,29 @@ const Wizard = () => {
 
               {/* ─── Step 3: List Form Fields ───────────────────────────── */}
               {currentStep === 2 && (
-                <div className="flex gap-2 mt-4">
-                  <Button block variant="default" type="button" onClick={() => setCurrentStep(1)}>
-                    {translate('::Back') || 'Back'}
-                  </Button>
-                  <Button block variant="solid" type="button" onClick={() => setCurrentStep(3)}>
-                    {translate('::Next') || 'Next'}
-                  </Button>
-                </div>
+                <WizardStep3
+                  selectedColumns={selectedColumns}
+                  selectCommandColumns={selectCommandColumns}
+                  groups={editingGroups}
+                  onGroupsChange={setEditingGroups}
+                  translate={translate}
+                  onBack={() => setCurrentStep(1)}
+                  onNext={() => setCurrentStep(3)}
+                />
               )}
 
               {/* ─── Step 4: Deploy ───────────────────────────── */}
               {currentStep === 3 && (
-                <div className="flex gap-2 mt-4">
-                  <Button block variant="default" type="button" onClick={() => setCurrentStep(2)}>
-                    {translate('::Back') || 'Back'}
-                  </Button>
-                  <Button block variant="solid" loading={isSubmitting} type="submit">
-                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                  </Button>
-                </div>
+                <WizardStep4
+                  values={values}
+                  wizardName={wizardName}
+                  selectedColumns={selectedColumns}
+                  selectCommandColumns={selectCommandColumns}
+                  groups={editingGroups}
+                  translate={translate}
+                  onBack={() => setCurrentStep(2)}
+                  onSubmit={handleDeploy}
+                />
               )}
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/WizardStep3.tsx b/ui/src/views/admin/listForm/WizardStep3.tsx
new file mode 100644
index 0000000..9437c65
--- /dev/null
+++ b/ui/src/views/admin/listForm/WizardStep3.tsx
@@ -0,0 +1,766 @@
+import { Button, Dialog } from '@/components/ui'
+import { columnEditorTypeListOptions } from '@/views/admin/listForm/edit/options'
+import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
+import { SortableContext, arrayMove, useSortable, rectSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { useEffect, useState } from 'react'
+import { FaGripVertical, FaPlus, FaTimes, FaTrash, FaArrowRight, FaCode } from 'react-icons/fa'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+export interface WizardGroupItem {
+  id: string
+  dataField: string
+  editorType: string
+  editorOptions: string
+  editorScript: string
+  colSpan: number
+  isRequired: boolean
+}
+
+export interface WizardGroup {
+  id: string
+  caption: string
+  colCount: number
+  items: WizardGroupItem[]
+}
+
+export interface WizardStep3Props {
+  selectedColumns: Set<string>
+  selectCommandColumns: DatabaseColumnDto[]
+  groups: WizardGroup[]
+  onGroupsChange: (groups: WizardGroup[]) => void
+  translate: (key: string) => string
+  onBack: () => void
+  onNext: () => void
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function inferEditorType(sqlType: string): string {
+  const t = sqlType?.toLowerCase() ?? ''
+  if (t === 'bit') return 'dxCheckBox'
+  if (
+    [
+      'int',
+      'bigint',
+      'smallint',
+      'tinyint',
+      'decimal',
+      'float',
+      'real',
+      'numeric',
+      'money',
+      'smallmoney',
+    ].includes(t)
+  )
+    return 'dxNumberBox'
+  if (['date', 'datetime', 'datetime2', 'smalldatetime', 'datetimeoffset'].includes(t))
+    return 'dxDateBox'
+  return 'dxTextBox'
+}
+
+function newGroupItem(colName: string, sqlType = ''): WizardGroupItem {
+  return {
+    id: `${colName}_${Date.now()}`,
+    dataField: colName,
+    editorType: inferEditorType(sqlType),
+    editorOptions: '',
+    editorScript: '',
+    colSpan: 1,
+    isRequired: false,
+  }
+}
+
+function newGroup(order: number): WizardGroup {
+  return {
+    id: `grp_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`,
+    caption: `Group ${order}`,
+    colCount: 2,
+    items: [],
+  }
+}
+
+// ─── DnD helper IDs ───────────────────────────────────────────────────────────
+const AV_PREFIX = 'av::'
+const GRP_PREFIX = 'grp::'
+const ITM_PREFIX = 'itm::'
+
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
+function AvailableColumnChip({ colName }: { colName: string }) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `${AV_PREFIX}${colName}`,
+  })
+  return (
+    <div
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+      className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border cursor-grab select-none text-sm transition-all
+        ${
+          isDragging
+            ? 'opacity-40 border-indigo-300 bg-indigo-50 dark:bg-indigo-900/20'
+            : 'border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 hover:border-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-gray-700 dark:text-gray-200'
+        }`}
+    >
+      <FaGripVertical className="text-gray-300 text-xs shrink-0" />
+      <span className="truncate font-medium">{colName}</span>
+    </div>
+  )
+}
+
+interface SortableItemProps {
+  item: WizardGroupItem
+  groupColCount: number
+  onEditorTypeChange: (val: string) => void
+  onEditorOptionsChange: (val: string) => void
+  onEditorScriptChange: (val: string) => void
+  onColSpanChange: (val: number) => void
+  onRequiredChange: (val: boolean) => void
+  onRemove: () => void
+}
+
+function SortableItem({
+  item,
+  groupColCount,
+  onEditorTypeChange,
+  onEditorOptionsChange,
+  onEditorScriptChange,
+  onColSpanChange,
+  onRequiredChange,
+  onRemove,
+}: SortableItemProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: `${ITM_PREFIX}${item.id}`,
+  })
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    gridColumn: `span ${Math.min(item.colSpan, groupColCount)}`,
+  }
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`flex flex-col gap-1 p-2 rounded-lg border group/item transition-all
+        ${
+          isDragging
+            ? 'opacity-40 border-indigo-300 bg-indigo-50 dark:bg-indigo-900/20 z-50'
+            : 'border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 hover:border-indigo-300 dark:hover:border-indigo-600'
+        }`}
+    >
+      {/* Top row: drag handle + field name + remove */}
+      <div className="flex items-center gap-1.5">
+        <button
+          type="button"
+          {...attributes}
+          {...listeners}
+          className="cursor-grab text-gray-300 hover:text-gray-500 shrink-0"
+          tabIndex={-1}
+        >
+          <FaGripVertical className="text-sm" />
+        </button>
+        <span className="flex-1 text-xs font-semibold text-indigo-600 dark:text-indigo-400 truncate">
+          {item.dataField}
+        </span>
+        <button
+          type="button"
+          onClick={onRemove}
+          className="opacity-0 group-hover/item:opacity-100 p-0.5 text-gray-300 hover:text-red-500 shrink-0 transition-opacity"
+          title="Remove"
+        >
+          <FaTimes className="text-[10px]" />
+        </button>
+      </div>
+
+      {/* Editor type select */}
+      <select
+        value={item.editorType}
+        onChange={(e) => onEditorTypeChange(e.target.value)}
+        className="w-full text-xs h-7 px-1.5 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400"
+      >
+        {columnEditorTypeListOptions.map((et) => (
+          <option key={et.value} value={et.value}>
+            {et.label}
+          </option>
+        ))}
+      </select>
+
+      {/* Editor Options */}
+      <div className="flex flex-col gap-0.5">
+        <span className="text-[10px] text-gray-400 font-medium">Editor Options</span>
+        <textarea
+          value={item.editorOptions}
+          onChange={(e) => onEditorOptionsChange(e.target.value)}
+          placeholder='{"readOnly": false}'
+          rows={2}
+          className="w-full text-xs px-1.5 py-1 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400 resize-none font-mono"
+        />
+      </div>
+
+      {/* Editor Script */}
+      <div className="flex flex-col gap-0.5">
+        <span className="text-[10px] text-gray-400 font-medium">Editor Script</span>
+        <input
+          value={item.editorScript}
+          onChange={(e) => onEditorScriptChange(e.target.value)}
+          placeholder="(e) => { /* e.component */ }"
+          className="w-full text-xs px-1.5 py-1 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400 resize-none font-mono"
+        />
+      </div>
+
+      {/* Bottom row: ColSpan + Required */}
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1">
+          <span className="text-[10px] text-gray-400">Span</span>
+          <select
+            value={item.colSpan}
+            onChange={(e) => onColSpanChange(Number(e.target.value))}
+            className="text-xs h-5 w-9 px-0.5 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400"
+          >
+            {Array.from({ length: groupColCount }, (_, i) => i + 1).map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+        </div>
+        <label className="flex items-center gap-1 cursor-pointer ml-auto" title="Required">
+          <input
+            type="checkbox"
+            checked={item.isRequired}
+            onChange={(e) => onRequiredChange(e.target.checked)}
+            className="w-3 h-3 accent-red-500"
+          />
+          <span className="text-[10px] text-gray-400">Required</span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+interface GroupCardProps {
+  group: WizardGroup
+  isOver: boolean
+  hasAvailable: boolean
+  onCaptionChange: (val: string) => void
+  onColCountChange: (val: number) => void
+  onItemChange: (itemId: string, patch: Partial<WizardGroupItem>) => void
+  onRemoveItem: (itemId: string) => void
+  onDeleteGroup: () => void
+  onAddAll: () => void
+}
+
+function GroupCard({
+  group,
+  isOver,
+  hasAvailable,
+  onCaptionChange,
+  onColCountChange,
+  onItemChange,
+  onRemoveItem,
+  onDeleteGroup,
+  onAddAll,
+}: GroupCardProps) {
+  const { setNodeRef } = useDroppable({ id: `${GRP_PREFIX}${group.id}` })
+  const itemIds = group.items.map((i) => `${ITM_PREFIX}${i.id}`)
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={`rounded-xl border-2 transition-all ${
+        isOver
+          ? 'border-indigo-400 bg-indigo-50/60 dark:bg-indigo-900/20'
+          : 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850'
+      }`}
+    >
+      {/* Group Header */}
+      <div className="flex items-center gap-2 px-3 pt-3 pb-2">
+        <input
+          type="text"
+          value={group.caption}
+          onChange={(e) => onCaptionChange(e.target.value)}
+          placeholder="Group caption…"
+          className="flex-1 text-sm font-semibold h-7 px-2 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:border-indigo-400"
+        />
+        {/* ColCount */}
+        <div className="flex items-center gap-1 shrink-0">
+          <span className="text-xs text-gray-400">Cols:</span>
+          {[1, 2, 3, 4].map((n) => (
+            <button
+              key={n}
+              type="button"
+              onClick={() => onColCountChange(n)}
+              className={`w-6 h-6 text-xs rounded font-medium transition-colors ${
+                group.colCount === n
+                  ? 'bg-indigo-500 text-white'
+                  : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/40'
+              }`}
+            >
+              {n}
+            </button>
+          ))}
+        </div>
+        {hasAvailable && (
+          <button
+            type="button"
+            onClick={onAddAll}
+            className="flex items-center gap-1 h-6 px-2 text-[11px] font-medium rounded border border-indigo-200 dark:border-indigo-700 bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-100 dark:hover:bg-indigo-900/40 transition-colors shrink-0"
+            title="Tüm mevcut sütunları bu gruba ekle"
+          >
+            <FaArrowRight className="text-[9px]" />
+            Tümünü Ekle
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={onDeleteGroup}
+          className="p-1.5 text-gray-300 hover:text-red-500 rounded transition-colors"
+          title="Delete group"
+        >
+          <FaTrash className="text-xs" />
+        </button>
+      </div>
+
+      {/* Items drop zone */}
+      <div
+        className={`mx-1 mb-3 min-h-[80px] rounded-lg p-2 transition-all ${
+          isOver
+            ? 'bg-indigo-100/60 dark:bg-indigo-900/30 border border-dashed border-indigo-400'
+            : group.items.length === 0
+              ? 'border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800'
+              : ''
+        }`}
+      >
+        {group.items.length === 0 && !isOver && (
+          <div className="flex items-center justify-center h-12 text-xs text-gray-300 dark:text-gray-600 select-none">
+            Sütunları buraya sürükleyin
+          </div>
+        )}
+        <SortableContext items={itemIds} strategy={rectSortingStrategy}>
+          <div
+            style={{ gridTemplateColumns: `repeat(${group.colCount}, 1fr)` }}
+            className="grid gap-3"
+          >
+            {group.items.map((item) => (
+              <SortableItem
+                key={item.id}
+                item={item}
+                groupColCount={group.colCount}
+                onEditorTypeChange={(val) => onItemChange(item.id, { editorType: val })}
+                onEditorOptionsChange={(val) => onItemChange(item.id, { editorOptions: val })}
+                onEditorScriptChange={(val) => onItemChange(item.id, { editorScript: val })}
+                onColSpanChange={(val) => onItemChange(item.id, { colSpan: val })}
+                onRequiredChange={(val) => onItemChange(item.id, { isRequired: val })}
+                onRemove={() => onRemoveItem(item.id)}
+              />
+            ))}
+          </div>
+        </SortableContext>
+      </div>
+    </div>
+  )
+}
+
+// ─── WizardStep3 ──────────────────────────────────────────────────────────────
+const WizardStep3 = ({
+  selectedColumns,
+  selectCommandColumns,
+  groups,
+  onGroupsChange,
+  translate,
+  onBack,
+  onNext,
+}: WizardStep3Props) => {
+  const [activeId, setActiveId] = useState<string | null>(null)
+  const [overGroupId, setOverGroupId] = useState<string | null>(null)
+  const [isHelperOpen, setIsHelperOpen] = useState(false)
+
+  // ── Sync groups when selectedColumns changes ─────────────────────────────
+  useEffect(() => {
+    if (selectedColumns.size === 0) return
+
+    // 1. Remove items that are no longer in selectedColumns
+    const cleaned = groups.map((g) => ({
+      ...g,
+      items: g.items.filter((i) => selectedColumns.has(i.dataField)),
+    }))
+
+    // 2. Ensure at least one empty group exists for the user to drag into
+    const finalGroups =
+      cleaned.length === 0
+        ? [
+            {
+              id: `grp_default_${Date.now()}`,
+              caption: 'Group 1',
+              colCount: 2,
+              items: [] as WizardGroupItem[],
+            },
+          ]
+        : cleaned
+
+    // 3. Only update if something actually changed
+    const itemsChanged = finalGroups.some(
+      (g, i) => g.items.length !== (groups[i]?.items.length ?? -1),
+    )
+    const countChanged = finalGroups.length !== groups.length
+    if (itemsChanged || countChanged) onGroupsChange(finalGroups)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedColumns])
+
+  // ── Available columns = selected but NOT yet placed ───────────────────────
+  const placedColumns = new Set(groups.flatMap((g) => g.items.map((i) => i.dataField)))
+  const availableColumns = [...selectedColumns].filter((c) => !placedColumns.has(c))
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+  const colMeta = (name: string) =>
+    selectCommandColumns.find((c) => c.columnName === name)?.dataType ?? ''
+
+  const addColumnToGroup = (colName: string, targetGroupId: string) => {
+    onGroupsChange(
+      groups.map((g) =>
+        g.id === targetGroupId
+          ? { ...g, items: [...g.items, newGroupItem(colName, colMeta(colName))] }
+          : g,
+      ),
+    )
+  }
+
+  const removeItemFromGroup = (groupId: string, itemId: string) => {
+    onGroupsChange(
+      groups.map((g) =>
+        g.id === groupId ? { ...g, items: g.items.filter((i) => i.id !== itemId) } : g,
+      ),
+    )
+  }
+
+  const updateItem = (groupId: string, itemId: string, patch: Partial<WizardGroupItem>) => {
+    onGroupsChange(
+      groups.map((g) =>
+        g.id === groupId
+          ? { ...g, items: g.items.map((i) => (i.id === itemId ? { ...i, ...patch } : i)) }
+          : g,
+      ),
+    )
+  }
+
+  const updateGroup = (groupId: string, patch: Partial<WizardGroup>) => {
+    onGroupsChange(groups.map((g) => (g.id === groupId ? { ...g, ...patch } : g)))
+  }
+
+  const deleteGroup = (groupId: string) => {
+    onGroupsChange(groups.filter((g) => g.id !== groupId))
+  }
+
+  const addAllToGroup = (groupId: string) => {
+    const placed = new Set(groups.flatMap((g) => g.items.map((i) => i.dataField)))
+    const toAdd = [...selectedColumns].filter((c) => !placed.has(c))
+    if (toAdd.length === 0) return
+    onGroupsChange(
+      groups.map((g) =>
+        g.id === groupId
+          ? { ...g, items: [...g.items, ...toAdd.map((col) => newGroupItem(col, colMeta(col)))] }
+          : g,
+      ),
+    )
+  }
+
+  const addGroup = () => {
+    onGroupsChange([...groups, newGroup(groups.length + 1)])
+  }
+
+  // ── DnD sensors & handlers ────────────────────────────────────────────────
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
+
+  const findGroupOfItem = (itmId: string): WizardGroup | undefined =>
+    groups.find((g) => g.items.some((i) => i.id === itmId))
+
+  const onDragStart = ({ active }: DragStartEvent) => {
+    setActiveId(String(active.id))
+  }
+
+  const onDragOver = ({ over }: { over: any }) => {
+    if (!over) {
+      setOverGroupId(null)
+      return
+    }
+    const overId = String(over.id)
+    if (overId.startsWith(GRP_PREFIX)) {
+      setOverGroupId(overId.slice(GRP_PREFIX.length))
+    } else if (overId.startsWith(ITM_PREFIX)) {
+      const itmId = overId.slice(ITM_PREFIX.length)
+      setOverGroupId(findGroupOfItem(itmId)?.id ?? null)
+    } else {
+      setOverGroupId(null)
+    }
+  }
+
+  const onDragEnd = ({ active, over }: DragEndEvent) => {
+    setActiveId(null)
+    setOverGroupId(null)
+    if (!over) return
+
+    const activeId = String(active.id)
+    const overId = String(over.id)
+
+    // ── available column dropped onto group or item ───────────────────────
+    if (activeId.startsWith(AV_PREFIX)) {
+      const colName = activeId.slice(AV_PREFIX.length)
+      let targetGroupId: string | null = null
+      if (overId.startsWith(GRP_PREFIX)) {
+        targetGroupId = overId.slice(GRP_PREFIX.length)
+      } else if (overId.startsWith(ITM_PREFIX)) {
+        const itmId = overId.slice(ITM_PREFIX.length)
+        targetGroupId = findGroupOfItem(itmId)?.id ?? null
+      }
+      if (targetGroupId) addColumnToGroup(colName, targetGroupId)
+      return
+    }
+
+    // ── group item being sorted / moved ───────────────────────────────────
+    if (activeId.startsWith(ITM_PREFIX)) {
+      const activeItemId = activeId.slice(ITM_PREFIX.length)
+      const sourceGroup = findGroupOfItem(activeItemId)
+      if (!sourceGroup) return
+
+      let targetGroupId: string = sourceGroup.id
+      let overItemId: string | null = null
+
+      if (overId.startsWith(GRP_PREFIX)) {
+        targetGroupId = overId.slice(GRP_PREFIX.length)
+      } else if (overId.startsWith(ITM_PREFIX)) {
+        overItemId = overId.slice(ITM_PREFIX.length)
+        targetGroupId = findGroupOfItem(overItemId)?.id ?? sourceGroup.id
+      }
+
+      if (targetGroupId === sourceGroup.id) {
+        // reorder within same group
+        const items = sourceGroup.items
+        const oldIndex = items.findIndex((i) => i.id === activeItemId)
+        const newIndex = overItemId ? items.findIndex((i) => i.id === overItemId) : items.length - 1
+        if (oldIndex !== newIndex && newIndex >= 0) {
+          onGroupsChange(
+            groups.map((g) =>
+              g.id === sourceGroup.id ? { ...g, items: arrayMove(items, oldIndex, newIndex) } : g,
+            ),
+          )
+        }
+      } else {
+        // move to different group
+        const draggedItem = sourceGroup.items.find((i) => i.id === activeItemId)
+        if (!draggedItem) return
+        const targetGroup = groups.find((g) => g.id === targetGroupId)
+        if (!targetGroup) return
+
+        const clampedSpan = Math.min(draggedItem.colSpan, targetGroup.colCount)
+        const movedItem = { ...draggedItem, colSpan: clampedSpan }
+        let newItems = targetGroup.items.filter((i) => i.id !== activeItemId)
+        if (overItemId) {
+          const overIdx = newItems.findIndex((i) => i.id === overItemId)
+          newItems = [...newItems.slice(0, overIdx + 1), movedItem, ...newItems.slice(overIdx + 1)]
+        } else {
+          newItems = [...newItems, movedItem]
+        }
+        onGroupsChange(
+          groups.map((g) => {
+            if (g.id === sourceGroup.id)
+              return { ...g, items: g.items.filter((i) => i.id !== activeItemId) }
+            if (g.id === targetGroupId) return { ...g, items: newItems }
+            return g
+          }),
+        )
+      }
+    }
+  }
+
+  // ── Drag overlay content ──────────────────────────────────────────────────
+  const renderOverlay = () => {
+    if (!activeId) return null
+    if (activeId.startsWith(AV_PREFIX)) {
+      const colName = activeId.slice(AV_PREFIX.length)
+      return (
+        <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-indigo-400 bg-indigo-50 text-sm text-indigo-700 shadow-lg cursor-grabbing">
+          <FaGripVertical className="text-indigo-300 text-xs" />
+          <span className="font-medium">{colName}</span>
+        </div>
+      )
+    }
+    if (activeId.startsWith(ITM_PREFIX)) {
+      const itmId = activeId.slice(ITM_PREFIX.length)
+      const item = groups.flatMap((g) => g.items).find((i) => i.id === itmId)
+      if (!item) return null
+      return (
+        <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-indigo-400 bg-indigo-50 text-sm shadow-lg cursor-grabbing">
+          <FaGripVertical className="text-indigo-300 text-xs" />
+          <span className="text-xs font-semibold text-indigo-600 bg-indigo-100 px-2 py-0.5 rounded">
+            {item.dataField}
+          </span>
+          <span className="text-xs text-gray-500">{item.editorType}</span>
+        </div>
+      )
+    }
+    return null
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDragEnd={onDragEnd}
+    >
+      <div className="pb-20">
+        <div className="flex gap-4">
+          {/* ── Left: Available Columns ─────────────────────────────────── */}
+          <div className="w-72 shrink-0">
+            <div className="sticky top-4">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+                  Sütunlar
+                </span>
+                <span className="text-xs text-gray-400">
+                  {availableColumns.length}/{selectedColumns.size}
+                </span>
+              </div>
+              <div className="flex flex-col gap-1.5 max-h-[calc(100vh-280px)] overflow-y-auto pr-1">
+                {availableColumns.length === 0 ? (
+                  <div className="text-xs text-gray-300 dark:text-gray-600 py-4 text-center select-none">
+                    Tüm sütunlar gruplara eklendi
+                  </div>
+                ) : (
+                  availableColumns.map((col) => <AvailableColumnChip key={col} colName={col} />)
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* ── Right: Groups ────────────────────────────────────────────── */}
+          <div className="flex-1 flex flex-col gap-3">
+            {groups.length === 0 && (
+              <div className="rounded-xl border-2 border-dashed border-gray-200 dark:border-gray-700 flex items-center justify-center h-36 text-sm text-gray-300 dark:text-gray-600 select-none">
+                Henüz grup yok — aşağıdan grup ekleyin
+              </div>
+            )}
+
+            {groups.map((group) => (
+              <GroupCard
+                key={group.id}
+                group={group}
+                isOver={overGroupId === group.id}
+                hasAvailable={availableColumns.length > 0}
+                onCaptionChange={(val) => updateGroup(group.id, { caption: val })}
+                onColCountChange={(val) => updateGroup(group.id, { colCount: val })}
+                onItemChange={(itemId, patch) => updateItem(group.id, itemId, patch)}
+                onRemoveItem={(itemId) => removeItemFromGroup(group.id, itemId)}
+                onDeleteGroup={() => deleteGroup(group.id)}
+                onAddAll={() => addAllToGroup(group.id)}
+              />
+            ))}
+
+            {/* Add Group */}
+            <button
+              type="button"
+              onClick={addGroup}
+              className="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl border-2 border-dashed border-gray-200 dark:border-gray-700 text-sm text-gray-400 dark:text-gray-500 hover:border-indigo-400 hover:text-indigo-500 dark:hover:border-indigo-600 dark:hover:text-indigo-400 transition-colors"
+            >
+              <FaPlus className="text-xs" />
+              Grup Ekle
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <DragOverlay>{renderOverlay()}</DragOverlay>
+
+      {/* ── Helper Dialog ────────────────────────────────────────────────── */}
+      <Dialog
+        isOpen={isHelperOpen}
+        onClose={() => setIsHelperOpen(false)}
+        onRequestClose={() => setIsHelperOpen(false)}
+        preventScroll={true}
+        width={1000}
+      >
+        <h5 className="mb-4">Helper</h5>
+
+        <div className="space-y-4 p-4 text-sm font-mono overflow-y-auto max-h-[100vh]">
+          <div>
+            <div className="font-bold">● Editor Script</div>
+            <div className="ml-5 gap-2">
+              <pre>{'• setFormData({...formData, Path: e.value});'}</pre>
+              <pre>{'• UiEvalService.ApiGenerateBackgroundWorkers();'}</pre>
+              <pre>
+                {
+                  "• setFormData({ ...formData, Path: (v => v === '1' ? '1-deneme' : v === '0' ? '0-deneme' : '')(e.value) })"
+                }
+              </pre>
+              <pre>
+                {`• (() => {const d=v=>!v?null:(v instanceof Date?v:new Date(v));const nf={...formData,[editor.dataField]:e?.value};const s=d(nf.StartDate),t=d(nf.EndDate);setFormData({...formData,TotalDays: s&&t?Math.max(0,Math.floor((Date.UTC(t.getFullYear(),t.getMonth(),t.getDate())-Date.UTC(s.getFullYear(),s.getMonth(),s.getDate()))/(24*60*60*1000))+1):null});})(); `}
+              </pre>
+            </div>
+          </div>
+
+          <div>
+            <div className="font-bold">● Editor Options</div>
+            <div className="ml-5 gap-2">
+              <pre>{`• {"showClearButton":true }`}</pre>
+              <pre>{`• {"format": "fixedPoint", "precision": 2}`}</pre>
+              <pre>{`• {"format": "phoneGlobal", "mask":"(000) 000-0000", "maskInvalidMessage":"Lütfen geçerli bir telefon numarası girin", "useMaskedValue":false, "maskRules": { "X": "[1-9]" }, "placeholder": "(555) 123-4567" }`}</pre>
+              <pre>{`• {"tooltip": { "enabled": true }}`}</pre>
+              <pre>{`• {"height":200}`}</pre>
+              <pre>{`• {"type":"date"}`}</pre>
+              <pre>{`• {"type":"datetime"}`}</pre>
+              <pre>
+                {`• {
+  "buttons": [
+    {
+      "name": "custom",
+      "location": "after",
+      "options": {
+        "icon": "plus",
+        "onClick": "function(e) { alert('Value: ' + e.formData[e.fieldName]); }"
+      }
+    }
+  ]
+}`}
+              </pre>
+              <pre>{`• {"toolbar": {"multiline": true, "items": [{"name": "undo"},{"name": "redo"},{"name": "separator"},{"name": "size","acceptedValues": ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"],"options": {"inputAttr": {"aria-label": "Font size"}}},{"name": "font","acceptedValues": ["Arial","Courier New","Georgia","Impact","Lucida Console","Tahoma","Times New Roman","Verdana"],"options": {"inputAttr": {"aria-label": "Font family"}}},{"name": "separator"},{"name": "bold"},{"name": "italic"},{"name": "strike"},{"name": "underline"},{"name": "separator"},{"name": "alignLeft"},{"name": "alignCenter"},{"name": "alignRight"},{"name": "alignJustify"},{"name": "separator"},{"name": "orderedList"},{"name": "bulletList"},{"name": "separator"},{"name": "header","acceptedValues": [false,1,2,3,4,5],"options": {"inputAttr": {"aria-label": "Font family"}}},{"name": "separator"},{"name": "color"},{"name": "background"},{"name": "separator"},{"name": "link"},{"name": "image"},{"name": "separator"},{"name": "clear"},{"name": "codeBlock"},{"name": "blockquote"},{"name": "separator"},{"name": "insertTable"},{"name": "deleteTable"},{"name": "insertRowAbove"},{"name": "insertRowBelow"},{"name": "deleteRow"},{"name": "insertColumnLeft"},{"name": "insertColumnRight"},{"name": "deleteColumn"}]}}`}</pre>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+
+      {/* ── Fixed Footer ─────────────────────────────────────────────────── */}
+      <div className="fixed bottom-0 left-0 right-0 z-10 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 px-6 py-3">
+        <div className="max-w-sm mx-auto flex gap-3">
+          <Button
+            block
+            variant="default"
+            type="button"
+            onClick={() => setIsHelperOpen(true)}
+            title="Helper Codes"
+          >
+            {translate('::Helper Codes') || 'Helper Codes'}
+          </Button>
+          <Button block variant="default" type="button" onClick={onBack}>
+            {translate('::Back') || 'Back'}
+          </Button>
+          <Button block variant="solid" type="button" onClick={onNext}>
+            {translate('::Next') || 'Next'}
+          </Button>
+        </div>
+      </div>
+    </DndContext>
+  )
+}
+
+export default WizardStep3
diff --git a/ui/src/views/admin/listForm/WizardStep4.tsx b/ui/src/views/admin/listForm/WizardStep4.tsx
new file mode 100644
index 0000000..ed00066
--- /dev/null
+++ b/ui/src/views/admin/listForm/WizardStep4.tsx
@@ -0,0 +1,382 @@
+import { Button } from '@/components/ui'
+import type { ListFormWizardDto } from '@/proxy/admin/list-form/models'
+import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
+import type { WizardGroup } from './WizardStep3'
+import { useState } from 'react'
+import {
+  FaCheckCircle,
+  FaChevronDown,
+  FaChevronRight,
+  FaCircle,
+  FaExclamationCircle,
+  FaRocket,
+  FaSpinner,
+} from 'react-icons/fa'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface WizardStep4Props {
+  values: ListFormWizardDto
+  wizardName: string
+  selectedColumns: Set<string>
+  selectCommandColumns: DatabaseColumnDto[]
+  groups: WizardGroup[]
+  translate: (key: string) => string
+  onBack: () => void
+  onSubmit: () => Promise<void>
+}
+
+type LogStatus = 'pending' | 'running' | 'success' | 'error'
+
+interface LogEntry {
+  id: number
+  label: string
+  status: LogStatus
+  detail?: string
+}
+
+// ─── Deploy log steps ─────────────────────────────────────────────────────────
+
+function buildLogSteps(values: ListFormWizardDto, groups: WizardGroup[]): Omit<LogEntry, 'status'>[] {
+  const totalFields = groups.reduce((acc, g) => acc + g.items.length, 0)
+  return [
+    { id: 1, label: 'Konfigürasyon doğrulanıyor…' },
+    { id: 2, label: `Menü oluşturuluyor: ${values.menuCode}`, detail: `Parent: ${values.menuParentCode}` },
+    { id: 3, label: 'Dil metinleri kaydediliyor', detail: `EN: ${values.languageTextMenuEn} / TR: ${values.languageTextMenuTr}` },
+    { id: 4, label: `İzin grubu yapılandırılıyor: ${values.permissionGroupName}` },
+    { id: 5, label: `Veri kaynağı bağlanıyor: ${values.dataSourceCode}` },
+    { id: 6, label: `ListForm oluşturuluyor: ${values.listFormCode}`, detail: `Key: ${values.keyFieldName}` },
+    { id: 7, label: `Form grupları kaydediliyor (${groups.length} grup, ${totalFields} alan)` },
+    { id: 8, label: 'Sunucuya deploy ediliyor…' },
+    { id: 9, label: 'Tamamlandı ✓' },
+  ]
+}
+
+// ─── Mini-components ──────────────────────────────────────────────────────────
+
+function LogIcon({ status }: { status: LogStatus }) {
+  if (status === 'running') return <FaSpinner className="text-indigo-500 animate-spin shrink-0" />
+  if (status === 'success') return <FaCheckCircle className="text-emerald-500 shrink-0" />
+  if (status === 'error') return <FaExclamationCircle className="text-red-500 shrink-0" />
+  return <FaCircle className="text-gray-300 dark:text-gray-600 shrink-0 text-[8px] mt-1" />
+}
+
+interface SectionProps {
+  title: string
+  badge?: string | number
+  children: React.ReactNode
+  defaultOpen?: boolean
+}
+
+function Section({ title, badge, children, defaultOpen = true }: SectionProps) {
+  const [open, setOpen] = useState(defaultOpen)
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center justify-between px-4 py-2.5 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          {open ? (
+            <FaChevronDown className="text-gray-400 text-xs" />
+          ) : (
+            <FaChevronRight className="text-gray-400 text-xs" />
+          )}
+          <span className="text-sm font-semibold text-gray-700 dark:text-gray-200">{title}</span>
+        </div>
+        {badge !== undefined && (
+          <span className="text-xs bg-indigo-100 dark:bg-indigo-900/40 text-indigo-600 dark:text-indigo-400 px-2 py-0.5 rounded-full font-medium">
+            {badge}
+          </span>
+        )}
+      </button>
+      {open && <div className="px-4 py-3 bg-white dark:bg-gray-900">{children}</div>}
+    </div>
+  )
+}
+
+function Row({ label, value }: { label: string; value?: string | number }) {
+  if (!value && value !== 0) return null
+  return (
+    <div className="flex gap-2 py-1 border-b border-gray-100 dark:border-gray-800 last:border-0">
+      <span className="text-xs text-gray-400 w-40 shrink-0">{label}</span>
+      <span className="text-xs text-gray-700 dark:text-gray-200 font-medium break-all">{value}</span>
+    </div>
+  )
+}
+
+// ─── WizardStep4 ──────────────────────────────────────────────────────────────
+
+const WizardStep4 = ({
+  values,
+  wizardName,
+  selectedColumns,
+  selectCommandColumns,
+  groups,
+  translate,
+  onBack,
+  onSubmit,
+}: WizardStep4Props) => {
+  const [logs, setLogs] = useState<LogEntry[]>([])
+  const [isDeploying, setIsDeploying] = useState(false)
+  const [isDone, setIsDone] = useState(false)
+  const [hasError, setHasError] = useState(false)
+
+  const steps = buildLogSteps(values, groups)
+
+  const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+  const runDeploy = async () => {
+    if (isDeploying) return
+    setIsDeploying(true)
+    setHasError(false)
+    setIsDone(false)
+
+    // Initialize all as pending
+    setLogs(steps.map((s) => ({ ...s, status: 'pending' })))
+
+    const setStatus = (id: number, status: LogStatus) =>
+      setLogs((prev) => prev.map((l) => (l.id === id ? { ...l, status } : l)))
+
+    // Steps 1-7: pre-deploy simulation (fast)
+    for (let i = 0; i < steps.length - 2; i++) {
+      const step = steps[i]
+      setStatus(step.id, 'running')
+      await sleep(300 + Math.random() * 200)
+      setStatus(step.id, 'success')
+    }
+
+    // Step 8: actual API call
+    const deployStep = steps[steps.length - 2]
+    setStatus(deployStep.id, 'running')
+    try {
+      await onSubmit()
+      setStatus(deployStep.id, 'success')
+      await sleep(200)
+      // Step 9: done
+      const doneStep = steps[steps.length - 1]
+      setStatus(doneStep.id, 'running')
+      await sleep(300)
+      setStatus(doneStep.id, 'success')
+      setIsDone(true)
+    } catch (err: any) {
+      setStatus(deployStep.id, 'error')
+      setLogs((prev) => [
+        ...prev,
+        {
+          id: 999,
+          label: `Hata: ${err?.message ?? 'Bilinmeyen hata'}`,
+          status: 'error',
+        },
+      ])
+      setHasError(true)
+    } finally {
+      setIsDeploying(false)
+    }
+  }
+
+  const totalFields = groups.reduce((acc, g) => acc + g.items.length, 0)
+
+  return (
+    <div className="flex gap-6 pb-24">
+      {/* ── Left: Summary ────────────────────────────────────────────── */}
+      <div className="flex-1 flex flex-col gap-3 overflow-y-auto max-h-[calc(100vh-220px)]">
+        <h6 className="text-sm font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wide mb-1">
+          Özet
+        </h6>
+
+        {/* Step 1 Summary */}
+        <Section title="Menü Bilgileri">
+          <Row label="Wizard Adı" value={wizardName} />
+          <Row label="Menu Code" value={values.menuCode} />
+          <Row label="Menu Parent" value={values.menuParentCode} />
+          <Row label="İzin Grubu" value={values.permissionGroupName} />
+          <Row label="İkon" value={values.menuIcon} />
+          <Row label="Menü (TR)" value={values.languageTextMenuTr} />
+          <Row label="Menü (EN)" value={values.languageTextMenuEn} />
+          <Row label="Menü Parent (TR)" value={values.languageTextMenuParentTr} />
+          <Row label="Menü Parent (EN)" value={values.languageTextMenuParentEn} />
+        </Section>
+
+        {/* Step 2 Summary */}
+        <Section title="ListForm Ayarları">
+          <Row label="ListForm Code" value={values.listFormCode} />
+          <Row label="Başlık (TR)" value={values.languageTextTitleTr} />
+          <Row label="Başlık (EN)" value={values.languageTextTitleEn} />
+          <Row label="Açıklama (TR)" value={values.languageTextDescTr} />
+          <Row label="Açıklama (EN)" value={values.languageTextDescEn} />
+          <Row label="Veri Kaynağı" value={values.dataSourceCode} />
+          <Row label="Connection String" value={values.dataSourceConnectionString} />
+          <Row label="Komut Tipi" value={values.selectCommandType} />
+          <Row label="Select Command" value={values.selectCommand} />
+          <Row label="Key Field" value={values.keyFieldName} />
+          <Row label="Key Field Tipi" value={String(values.keyFieldDbSourceType)} />
+        </Section>
+
+        {/* Columns */}
+        <Section title="Seçili Sütunlar" badge={selectedColumns.size}>
+          <div className="flex flex-wrap gap-1.5">
+            {[...selectedColumns].map((col) => {
+              const meta = selectCommandColumns.find((c) => c.columnName === col)
+              return (
+                <span
+                  key={col}
+                  className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-700"
+                >
+                  {col}
+                  {meta?.dataType && (
+                    <span className="text-[10px] text-indigo-400">{meta.dataType}</span>
+                  )}
+                </span>
+              )
+            })}
+          </div>
+        </Section>
+
+        {/* Step 3 – Groups */}
+        <Section title="Form Grupları" badge={groups.length} defaultOpen={true}>
+          <div className="flex flex-col gap-3">
+            {groups.map((g) => (
+              <Section key={g.id} title={g.caption || '(Grup)'} badge={`${g.items.length} alan · ${g.colCount} sütun`} defaultOpen={false}>
+                <div className="flex flex-col gap-0.5">
+                  {g.items.length === 0 ? (
+                    <span className="text-xs text-gray-300 italic">Alan yok</span>
+                  ) : (
+                    g.items.map((item) => (
+                      <div
+                        key={item.id}
+                        className="flex items-center gap-2 py-1 border-b border-gray-100 dark:border-gray-800 last:border-0"
+                      >
+                        <span className="text-xs font-medium text-indigo-600 dark:text-indigo-400 w-36 shrink-0 truncate">
+                          {item.dataField}
+                        </span>
+                        <span className="text-[10px] text-gray-400 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+                          {item.editorType}
+                        </span>
+                        <span className="text-[10px] text-gray-400 ml-auto">
+                          span:{item.colSpan}
+                          {item.isRequired && (
+                            <span className="ml-1 text-red-400 font-semibold">*</span>
+                          )}
+                        </span>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </Section>
+            ))}
+          </div>
+        </Section>
+      </div>
+
+      {/* ── Right: Deploy ────────────────────────────────────────────── */}
+      <div className="w-96 shrink-0 flex flex-col gap-4">
+        {/* Stats bar */}
+        <div className="grid grid-cols-3 gap-2">
+          {[
+            { label: 'Grup', value: groups.length },
+            { label: 'Alan', value: totalFields },
+            { label: 'Sütun', value: selectedColumns.size },
+          ].map((s) => (
+            <div
+              key={s.label}
+              className="rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-3 text-center"
+            >
+              <div className="text-xl font-bold text-indigo-600 dark:text-indigo-400">{s.value}</div>
+              <div className="text-xs text-gray-400 mt-0.5">{s.label}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* Log panel */}
+        <div className="rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col flex-1">
+          <div className="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+            <span className="text-sm font-semibold text-gray-700 dark:text-gray-200">Deploy Log</span>
+            {isDone && (
+              <span className="text-xs text-emerald-500 font-semibold flex items-center gap-1">
+                <FaCheckCircle /> Başarılı
+              </span>
+            )}
+            {hasError && (
+              <span className="text-xs text-red-500 font-semibold flex items-center gap-1">
+                <FaExclamationCircle /> Hata
+              </span>
+            )}
+          </div>
+
+          <div className="flex-1 min-h-[280px] max-h-[calc(100vh-380px)] overflow-y-auto p-3 bg-gray-950 dark:bg-black font-mono">
+            {logs.length === 0 ? (
+              <div className="text-xs text-gray-500 italic py-4 text-center select-none">
+                Deploy başlatmak için butona tıklayın
+              </div>
+            ) : (
+              <div className="flex flex-col gap-1.5">
+                {logs.map((log) => (
+                  <div key={log.id} className="flex items-start gap-2">
+                    <LogIcon status={log.status} />
+                    <div>
+                      <span
+                        className={`text-xs ${
+                          log.status === 'success'
+                            ? 'text-emerald-400'
+                            : log.status === 'error'
+                              ? 'text-red-400'
+                              : log.status === 'running'
+                                ? 'text-indigo-300'
+                                : 'text-gray-500'
+                        }`}
+                      >
+                        {log.label}
+                      </span>
+                      {log.detail && (
+                        <div className="text-[10px] text-gray-600 mt-0.5">{log.detail}</div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {isDone && (
+          <div className="rounded-xl border border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-900/20 p-4 text-sm text-emerald-700 dark:text-emerald-300 text-center font-medium">
+            🎉 ListForm başarıyla oluşturuldu ve deploy edildi!
+          </div>
+        )}
+      </div>
+
+      {/* ── Fixed Footer ─────────────────────────────────────────────── */}
+      <div className="fixed bottom-0 left-0 right-0 z-10 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 px-6 py-3">
+        <div className="max-w-5xl mx-auto flex gap-3">
+          <Button
+            variant="default"
+            type="button"
+            onClick={onBack}
+            disabled={isDeploying}
+          >
+            {translate('::Back') || 'Back'}
+          </Button>
+          <Button
+            block
+            variant="solid"
+            type="button"
+            icon={<FaRocket />}
+            loading={isDeploying}
+            disabled={isDeploying || isDone}
+            onClick={runDeploy}
+          >
+            {isDeploying
+              ? 'Deploy ediliyor…'
+              : isDone
+                ? 'Tamamlandı'
+                : translate('::Save') || 'Deploy & Save'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WizardStep4