diff --git a/app/Enums/LayoutForm.php b/app/Enums/LayoutForm.php
new file mode 100644
index 0000000..434d90a
--- /dev/null
+++ b/app/Enums/LayoutForm.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Enums;
+
+enum LayoutForm: string
+{
+    case ROW = 'form-row';
+    case COLUMN = 'form-column';
+    case VALUE = 'form-value';
+    case SECTION = 'form-section';
+    case HR_LINE = 'form-hr-line';
+
+    public function label(): string
+    {
+        return match($this) {
+            self::ROW => 'Row',
+            self::COLUMN => 'Column',
+            self::VALUE => 'Value',
+            self::SECTION => 'Section',
+            self::HR_LINE => 'HR Line',
+        };
+    }
+
+    public static function options(): array
+    {
+        return collect(self::cases())->map(fn ($case) => [
+            'value' => $case->value,
+            'label' => $case->label(),
+        ])->toArray();
+    }
+}
diff --git a/app/Http/Controllers/Web/Ekosistem/FormBasisDataController.php b/app/Http/Controllers/Web/Ekosistem/FormBasisDataController.php
new file mode 100644
index 0000000..4d03593
--- /dev/null
+++ b/app/Http/Controllers/Web/Ekosistem/FormBasisDataController.php
@@ -0,0 +1,295 @@
+<?php
+
+namespace App\Http\Controllers\Web\Ekosistem;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\View\View;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
+
+use App\Models\Ekosistem\TabelBasisData;
+use App\Models\Ekosistem\FormBasisData;
+use App\Enums\LayoutForm;
+
+class FormBasisDataController extends Controller
+{
+    public function index(Request $request, string $tabelId): View
+    {
+        Gate::authorize('super_admin');
+
+        $tabel = TabelBasisData::find($tabelId);
+        if (!$tabel) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data tabel tidak ditemukan.'
+            ], 404);   
+        }
+        
+        $listEnum = LayoutForm::options();
+
+        $tab = $request->tab ?? 'form';
+        $tabel->state = 'preview';
+
+        return view('ekosistem.form-basis-data.index', compact('tabel', 'listEnum', 'tab'));
+    }
+
+    public function create()
+    {
+        //
+    }
+
+    public function store(Request $request, string $tabelId): JsonResponse
+    {
+        Gate::authorize('super_admin');
+
+        $tabel = TabelBasisData::find($tabelId);
+        if (!$tabel) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data tabel tidak ditemukan.'
+            ], 404);   
+        }
+
+        $validated = $request->validate([
+            'parent_id' => ['nullable', 'exists:ekosistem_basis_data_form,id'],
+            'tipe' => ['required', Rule::enum(LayoutForm::class)],
+            'column_width' => [
+                Rule::requiredIf($request->tipe === LayoutForm::COLUMN->value),
+                'nullable', 'integer', 'min:1', 'max:12'],
+            'kolom_id' => [
+                Rule::requiredIf($request->tipe === LayoutForm::VALUE->value),
+                'nullable', 'exists:ekosistem_basis_data_kolom,id'],
+            'section_label' => [
+                Rule::requiredIf($request->tipe === LayoutForm::SECTION->value),
+                'nullable', 'string'],
+        ]);
+
+        FormBasisData::create([...$validated,
+            'tabel_id' => $tabelId,
+            'created_by' => auth()->user()->id,
+            'updated_by' => auth()->user()->id
+        ]);
+
+        return response()->json([
+            'status' => 'success',
+            'message' => 'Form basis data berhasil ditambahkan.'
+        ], 201);
+    }
+
+    public function show(string $tabelId, string $id): JsonResponse
+    {
+        Gate::authorize('super_admin');
+
+        $form = FormBasisData::where('tabel_id', $tabelId)->find($id);
+        if (!$form) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data formulir basis data tidak ditemukan.'
+            ], 404);   
+        }
+        return response()->json([
+            'status' => 'success',
+            'data' => $form
+        ], 200);
+    }
+
+    public function edit(string $id)
+    {
+        //
+    }
+
+    public function update(Request $request, string $tabelId, string $id)
+    {
+        Gate::authorize('super_admin');
+
+        $form = FormBasisData::where('tabel_id', $tabelId)->find($id);
+        if (!$form) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data formulir basis data tidak ditemukan.'
+            ], 404);   
+        }
+        
+        $validated = $request->validate([
+            'parent_id' => ['nullable', 'exists:ekosistem_basis_data_form,id'],
+            'tipe' => ['required', Rule::enum(LayoutForm::class)],
+            'column_width' => [
+                Rule::requiredIf($request->tipe === LayoutForm::COLUMN->value),
+                'nullable', 'integer', 'min:1', 'max:12'],
+            'kolom_id' => [
+                Rule::requiredIf($request->tipe === LayoutForm::VALUE->value),
+                'nullable', 'exists:ekosistem_basis_data_kolom,id'],
+            'section_label' => [
+                Rule::requiredIf($request->tipe === LayoutForm::SECTION->value),
+                'nullable', 'string'],
+        ]);
+
+        $form->update([...$validated,
+            'updated_by' => auth()->user()->id
+        ]);
+
+        return response()->json([
+            'status' => 'success',
+            'message' => 'Form basis data berhasil diubah.'
+        ]);
+    }
+
+    public function destroy(string $tabelId, string $id): JsonResponse
+    {
+        Gate::authorize('super_admin');
+
+        $form = FormBasisData::where('tabel_id', $tabelId)->find($id);
+        if (!$form) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data form basis data tidak ditemukan.'
+            ], 404);   
+        }
+        if ($form->form->count() > 0) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Tidak dapat menghapus formulir basis data yang memiliki formulir.'
+            ], 400);
+        }
+        $form->update([
+            'deleted_by' => auth()->user()->id
+        ]);
+        $form->delete();
+
+        return response()->json([
+            'status' => 'success',
+            'message' => 'Form basis data berhasil dihapus.'
+        ], 200);
+    }
+
+    public function generate(Request $request, string $tabelId): RedirectResponse
+    {
+        Gate::authorize('super_admin');
+
+        $tabel = TabelBasisData::find($tabelId);
+        if (!$tabel) {
+            return redirect()->route('tabel.formulir.index', $tabelId)->with('error', 'Tabel basis data tidak ditemukan.');
+        }
+
+        DB::transaction(function () use ($tabel) {
+        
+            FormBasisData::where('tabel_id', $tabel->id)->delete();
+
+            FormBasisData::create([
+                'tabel_id' => $tabel->id,
+                'tipe' => LayoutForm::SECTION,
+                'section_label' => $tabel->label,
+                'created_by' => auth()->user()->id,
+                'updated_by' => auth()->user()->id
+            ]);
+
+            FormBasisData::create([
+                'tabel_id' => $tabel->id,
+                'tipe' => LayoutForm::HR_LINE,
+                'created_by' => auth()->user()->id,
+                'updated_by' => auth()->user()->id
+            ]);
+
+            $chunks = $tabel->kolom->chunk(4);
+
+            foreach ($chunks as $chunk) {
+                
+                $row = FormBasisData::create([
+                    'tabel_id' => $tabel->id,
+                    'tipe' => LayoutForm::ROW,
+                    'created_by' => auth()->user()->id,
+                    'updated_by' => auth()->user()->id
+                ]);
+
+                foreach ($chunk as $kolom) {
+                    $column = FormBasisData::create([
+                        'tabel_id' => $tabel->id,
+                        'tipe' => LayoutForm::COLUMN,
+                        'column_width' => 3,
+                        'parent_id' => $row->id,
+                        'created_by' => auth()->user()->id,
+                        'updated_by' => auth()->user()->id
+                    ]);
+
+                    FormBasisData::create([
+                        'tabel_id' => $tabel->id,
+                        'tipe' => LayoutForm::VALUE,
+                        'parent_id' => $column->id,
+                        'kolom_id' => $kolom->id,
+                        'created_by' => auth()->user()->id,
+                        'updated_by' => auth()->user()->id
+                    ]);
+                }
+            }
+
+        });
+
+        return redirect()->route('tabel.formulir.index', $tabelId)->with('success', 'Formulir berhasil dibuat.');
+    }
+
+    public function moveUp(Request $request, string $tabelId, string $id): JsonResponse
+    {
+        Gate::authorize('super_admin');
+
+        $current = FormBasisData::where('tabel_id', $tabelId)->find($id);
+        if (!$current) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data formulir tidak ditemukan.'
+            ], 404);
+        }
+
+        $prev = FormBasisData::where('tabel_id', $tabelId)
+            ->where('urutan', '<', $current->urutan)
+            ->where('parent_id', $current->parent_id)
+            ->orderBy('urutan', 'desc')
+            ->first();
+
+        if ($prev) {
+            // swap
+            [$current->urutan, $prev->urutan] = [$prev->urutan, $current->urutan];
+            $current->save();
+            $prev->save();
+        }
+
+        return response()->json([
+            'status' => 'success',
+            'message' => 'Formulir basis data berhasil diperbarui.'
+        ], 200);
+    }
+
+    public function moveDown(Request $request, string $tabelId, string $id): JsonResponse
+    {
+        Gate::authorize('super_admin');
+
+        $current = FormBasisData::where('tabel_id', $tabelId)->find($id);
+        if (!$current) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data formulir tidak ditemukan.'
+            ], 404);
+        }
+
+        $next = FormBasisData::where('tabel_id', $tabelId)
+            ->where('urutan', '>', $current->urutan)
+            ->where('parent_id', $current->parent_id)
+            ->orderBy('urutan', 'asc')
+            ->first();
+
+        if ($next) {
+            // swap
+            [$current->urutan, $next->urutan] = [$next->urutan, $current->urutan];
+            $current->save();
+            $next->save();
+        }
+
+        return response()->json([
+            'status' => 'success',
+            'message' => 'Formulir basis data berhasil diperbarui.'
+        ], 200);
+    }
+}
diff --git a/app/Http/Controllers/Web/Ekosistem/KolomBasisDataController.php b/app/Http/Controllers/Web/Ekosistem/KolomBasisDataController.php
index 3813976..d29fb2c 100644
--- a/app/Http/Controllers/Web/Ekosistem/KolomBasisDataController.php
+++ b/app/Http/Controllers/Web/Ekosistem/KolomBasisDataController.php
@@ -188,7 +188,7 @@ class KolomBasisDataController extends Controller
             ], 404);
         }
 
-        $prev = KolomBasisData::where('tabel_id', $current->tabel_id)
+        $prev = KolomBasisData::where('tabel_id', $tabelId)
             ->where('urutan', '<', $current->urutan)
             ->orderBy('urutan', 'desc')
             ->first();
@@ -218,7 +218,7 @@ class KolomBasisDataController extends Controller
             ], 404);
         }
 
-        $next = KolomBasisData::where('tabel_id', $current->tabel_id)
+        $next = KolomBasisData::where('tabel_id', $tabelId)
             ->where('urutan', '>', $current->urutan)
             ->orderBy('urutan', 'asc')
             ->first();
diff --git a/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php b/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php
index 84828cb..2c5234c 100644
--- a/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php
+++ b/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php
@@ -8,6 +8,10 @@ use Illuminate\Support\Facades\Gate;
 use Illuminate\View\View;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Str;
 
 use App\Models\Ekosistem\TabelBasisData;
 use App\Models\Ekosistem\KolomBasisData;
@@ -199,8 +203,7 @@ class ValueBasisDataController extends Controller
             }
         }
         $list_relasi = collect($list_relasi);
-        // dd($kolom->where('tipe', 'enum')->first()?->enum_opsi);
-
+        
         return view('ekosistem.value-basis-data.add', compact('tabel', 'kolom', 'program', 'list_relasi'));
     }
 
diff --git a/app/Models/Ekosistem/FormBasisData.php b/app/Models/Ekosistem/FormBasisData.php
new file mode 100644
index 0000000..d8f7ab4
--- /dev/null
+++ b/app/Models/Ekosistem/FormBasisData.php
@@ -0,0 +1,236 @@
+<?php
+
+namespace App\Models\Ekosistem;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Casts\Attribute;
+use Illuminate\Support\Str;
+
+use App\Models\Ekosistem\TabelBasisData;
+use App\Enums\LayoutForm;
+
+class FormBasisData extends Model
+{
+    use SoftDeletes;
+
+    protected $table = 'ekosistem_basis_data_form';
+
+    protected $fillable = [
+        'tabel_id',
+        'parent_id',
+        'tipe',
+        'column_width',
+        'kolom_id',
+        'section_label',
+        'urutan',
+        'created_by',
+        'updated_by',
+        'deleted_by',
+    ];
+
+    protected $casts = [
+        'tipe' => LayoutForm::class
+    ];
+
+    protected static function booted()
+    {
+        static::creating(function ($model) {
+            $max = self::where('tabel_id', $model->tabel_id)->max('urutan');
+            $model->urutan = ($max ?? 0) + 1;
+        });
+        static::addGlobalScope('order', function (Builder $builder) {
+            $builder->orderBy('urutan');
+        });
+    }
+
+
+    public function tabel(): BelongsTo
+    {
+        return $this->belongsTo(TabelBasisData::class, 'tabel_id');
+    }
+
+    public function form(): HasMany
+    {
+        return $this->hasMany(FormBasisData::class, 'parent_id')
+            ->with('form')
+            ->orderBy('urutan');
+    }
+
+    public function kolom(): BelongsTo
+    {
+        return $this->belongsTo(KolomBasisData::class, 'kolom_id');
+    }
+
+    public function renderHtml(string $state, $errors = null, $optionsFK = null, $values = null): string 
+    {
+        return match ($this->tipe) {
+            LayoutForm::COLUMN  => '<div class="col-'.($this->column_width ?? 3).' mb-4 form-control-validation">'
+                .$this->childHtml($state, $errors, $optionsFK, $values).'</div>',
+            LayoutForm::VALUE   => $this->value($state, $errors, $optionsFK, $values),
+            LayoutForm::SECTION => '<h6 class="mb-3">'.$this->section_label.'</h6>',
+            LayoutForm::ROW     => '<div class="row">'.$this->childHtml($state, $errors, $optionsFK, $values).'</div>',
+            LayoutForm::HR_LINE => '<hr/>',
+            default => ''
+        };
+    }
+
+
+    private function childHtml(string $state, $errors = null, $optionsFK = null, $values = null): string
+    {
+        $html = '';
+        foreach ($this->form as $form) {
+            $html .= $form->renderHtml($state, $errors, $optionsFK, $values);
+        }
+        return $html;
+    }
+
+    private function value(string $state, $errors = null, $optionsFK = null, $values = null): string
+    {
+        $html = '';
+        if ($this->kolom) {
+            $k = $this->kolom;
+
+            $value = $values ? $values->where('kolom_id', $k->id)->first() : null;
+            $oldValue = old($k->kolom);
+
+            $html .= '<label class="form-label" for="value-data-kolom_name">kolom_required'.$this->kolom->label;
+            $html .= '</label>';
+
+            if($k->tipe == 'varchar') {
+            $html .= '<input type="text" class="form-control kolom_error" id="value-data-kolom_name" readonly
+                name="kolom_name" value="kolom_value" />';
+            }
+            elseif($k->tipe == 'text') {
+            $html .= '<textarea class="form-control kolom_error" id="value-data-kolom_name" readonly
+                    name="kolom_name">kolom_value</textarea>';
+            }
+            elseif($k->tipe == 'integer') {
+            $html .= '<input type="number" class="form-control" id="value-data-kolom_name" readonly
+                name="kolom_name" step="1" value="kolom_value" />';
+            }
+            elseif($k->tipe == 'float') {
+            $html .= '<input type="number" class="form-control kolom_error" id="add-data-kolom_name" readonly
+                name="kolom_name" value="kolom_value" step="any"  />';
+            }
+            elseif($k->tipe == 'date') {
+            $html .= '<input type="date" class="form-control kolom_error" id="value-data-kolom_name" readonly
+                name="kolom_name" value="kolom_value" />';
+            }   
+            elseif($k->tipe == 'datetime'){ 
+            $html .= '<input type="datetime-local" class="form-control kolom_error" id="value-data-kolom_name" readonly
+                name="kolom_name" value="kolom_value" />';
+            }
+            elseif($k->tipe == 'boolean') {
+                if ($state == 'preview' || $state == 'view') {
+                    $html .= '<input type="text" class="form-control kolom_error" id="value-data-kolom_name" readonly
+                            name="kolom_name" value="kolom_value" />';
+                } elseif ($state == 'add') {
+                    $html .= '<select class="form-select tipe-boolean kolom_error id="value-data-kolom_name" name="kolom_name">
+                        <option value="1" '. (old($k->kolom) == 1 ? 'selected' : '') .'>Ya</option>
+                        <option value="0" '. (old($k->kolom) == 0 ? 'selected' : '') .'>Tidak</option>
+                    </select>';
+                } elseif ($state == 'edit') {
+                    $html .= '<select class="form-select tipe-boolean kolom_error id="value-data-kolom_name" name="kolom_name">
+                        <option value="1" '. ((old($k->kolom) ?? (($value ? $value['value_'.$k->tipe] : null) ?? null) == 1) ? 'selected' : '') .'>Ya</option>
+                        <option value="0" '. ((old($k->kolom) ?? (($value ? $value['value_'.$k->tipe] : null) ?? null) == 0) ? 'selected' : '') .'>Tidak</option>
+                    </select>';
+                }
+            }
+            elseif($k->tipe == 'foreign_key') {
+                if ($state == 'preview' || $state == 'view') {
+                    $html .= '<input type="text" class="form-control kolom_error" id="value-data-kolom_name" readonly
+                        name="kolom_name" value="kolom_value" />';
+                } elseif ($state == 'add') {
+                    $html .= '<select class="form-select tipe-boolean kolom_error id="value-data-kolom_name" name="kolom_name">';
+                    if ($optionsFK && $optionsFK->where('kolom_id', $k->id)->first() != null) {
+                        foreach ($optionsFK->where('kolom_id', $k->id)->first()['options'] as $option) {
+                            $html .= '<option value="'.$option->value.'" '.(old($k->kolom) == $option->value ? 'selected' : '').'>'.$option->label.'</option>';
+                        }
+                    }
+                    $html .= '</select>';
+                } elseif ($state == 'edit') {
+                    $html .= '<select class="form-select tipe-boolean kolom_error id="value-data-kolom_name" name="kolom_name">';
+                    if ($optionsFK && $optionsFK->where('kolom_id', $k->id)->first() != null) {
+                        foreach ($optionsFK->where('kolom_id', $k->id)->first()['options'] as $option) {
+                            $html .= '<option value="'.$option->value.'" '.(old($k->kolom) ?? ($value ? $value['value_relasi'] : null) == $option->value ? 'selected' : '').'>'.$option->label.'</option>';
+                        }
+                    }
+                    $html .= '</select>';
+                }
+            }
+            elseif($k->tipe == 'enum') {
+                if ($state == 'preview' || $state == 'view') {
+                    $html .= '<input type="text" class="form-control kolom_error" id="value-data-kolom_name" readonly
+                        name="kolom_name" value="kolom_value" />';
+                } elseif ($state == 'add') {
+                    $html .= '<select class="form-select tipe-boolean kolom_error id="value-data-kolom_name" name="kolom_name">';
+                    foreach($k->enum_opsi as $opsi) {
+                        $html .= '<option value="' .$opsi['value']. '" ' .(old($k->kolom) == $opsi['value'] ? 'selected' : ''). '>' .$opsi['label']. '</option>';
+                    }
+                    $html .= '</select>';
+                } elseif ($state == 'edit') {
+                    $html .= '<select class="form-select tipe-boolean kolom_error id="value-data-kolom_name" name="kolom_name">';
+                    foreach($k->enum_opsi as $opsi) {
+                        $html .= '<option value="' .$opsi['value']. '" ' .(old($k->kolom) ?? ($value ? $value['value_'.$k->tipe] : null) == $opsi['value'] ? 'selected' : ''). '>' .$opsi['label']. '</option>';
+                    }
+                    $html .= '</select>';
+                }
+            }
+            else {
+            $html .= '<input type="text" class="form-control kolom_error" id="value-data-kolom_name" readonly
+                name="kolom_name" value="kolom_value" />';
+            }
+
+            $errorClass = $errors && $errors->has($k->kolom)
+                ? 'is-invalid'
+                : '';
+
+            if ($state == 'preview') {
+                $html = Str::of($html)
+                    ->replace('kolom_value', '')
+                    ->replace('kolom_name', $k->kolom)
+                    ->replace('kolom_error', '')
+                    ->replace('kolom_required', '');
+            } elseif ($state == 'add') {
+                $html = Str::of($html)
+                    ->replace('kolom_value', e($oldValue))
+                    ->replace('kolom_name', $k->kolom)
+                    ->replace('kolom_error', $errorClass)
+                    ->replace('kolom_required', '')
+                    ->replace('readonly', '');
+            } elseif ($state == 'edit') {
+                $html = Str::of($html)
+                    ->replace('kolom_value', e($oldValue ?? ($value ? ($value['value_'.$k->tipe]) : null)))
+                    ->replace('kolom_name', $k->kolom)
+                    ->replace('kolom_error', $errorClass)
+                    ->replace('kolom_required', '')
+                    ->replace('readonly', '');
+            } elseif ($state == 'view') {
+                $html = Str::of($html)
+                    ->replace('kolom_name', $k->kolom)
+                    ->replace('kolom_error', '')
+                    ->replace('kolom_required', '');
+                
+                if ($k->tipe == 'boolean') {
+                    $html = Str::of($html)
+                        ->replace('kolom_value', e($value ? ($value['value_'.$k->tipe] == 1 ? 'Ya' : 'Tidak') : null));
+                } elseif($k->tipe == 'foreign_key') {
+                    $html = Str::of($html)
+                        ->replace('kolom_value', e($value ? $value['value_relasi_label'] : null));
+                } elseif($k->tipe == 'enum') {
+                    $html = Str::of($html)
+                        ->replace('kolom_value', e($value ? $value['value_enum_label'] : null));
+                } else {
+                    $html = Str::of($html)
+                        ->replace('kolom_value', e($value ? $value['value_'.$k->tipe] : null));
+                }
+            } 
+        }
+        
+        return $html;
+    }
+}
diff --git a/app/Models/Ekosistem/TabelBasisData.php b/app/Models/Ekosistem/TabelBasisData.php
index b238269..5d04b2e 100644
--- a/app/Models/Ekosistem/TabelBasisData.php
+++ b/app/Models/Ekosistem/TabelBasisData.php
@@ -7,10 +7,14 @@ use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasOne;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 
 use App\Models\Ekosistem\KolomBasisData;
 use App\Models\Ekosistem\GroupBasisData;
 use App\Models\Ekosistem\RingkasanBasisData;
+use App\Models\Ekosistem\FormBasisData;
 
 class TabelBasisData extends Model
 {
@@ -53,4 +57,20 @@ class TabelBasisData extends Model
     {
         return $this->hasMany(RingkasanBasisData::class, 'tabel_id')->orderBy('urutan');
     }
+
+    public function form(): HasMany
+    {
+        return $this->hasMany(FormBasisData::class, 'tabel_id')
+            ->whereNull('parent_id')
+            ->orderBy('urutan');
+    }
+
+    public function renderHtml(string $state, $errors = null, $optionsFK = null, $values = null): string 
+    {
+        $html = '';
+        foreach ($this->form as $form) {
+            $html .= $form->renderHtml($state, $errors, $optionsFK, $values);
+        }
+        return $html;
+    }
 }
diff --git a/database/migrations/2026_05_08_161821_create_form_basis_data_table.php b/database/migrations/2026_05_08_161821_create_form_basis_data_table.php
new file mode 100644
index 0000000..2502189
--- /dev/null
+++ b/database/migrations/2026_05_08_161821_create_form_basis_data_table.php
@@ -0,0 +1,47 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('ekosistem_basis_data_form', function (Blueprint $table) {
+            $table->id();
+
+            $table->foreignId('tabel_id')->constrained('ekosistem_basis_data_tabel')->restrictOnDelete();
+
+            $table->foreignId('parent_id')->nullable()->constrained('ekosistem_basis_data_form')->restrictOnDelete();
+
+            $table->enum('tipe', ['form-row', 'form-column', 'form-value', 'form-section', 'form-hr-line'])->default('form-value');
+
+            $table->integer('column_width')->nullable();
+            
+            $table->foreignId('kolom_id')->nullable()->constrained('ekosistem_basis_data_kolom')->nullOnDelete();
+            
+            $table->string('section_label')->nullable();
+
+            $table->integer('urutan')->default(1);
+
+            $table->foreignId('created_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('updated_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('deleted_by')->nullable()->constrained('users')->onDelete('set null');
+
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('ekosistem_basis_data_form');
+    }
+};
diff --git a/resources/views/ekosistem/form-basis-data/add-column.blade.php b/resources/views/ekosistem/form-basis-data/add-column.blade.php
new file mode 100644
index 0000000..7ab57e1
--- /dev/null
+++ b/resources/views/ekosistem/form-basis-data/add-column.blade.php
@@ -0,0 +1,81 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasAddColumn"
+    aria-labelledby="offcanvasAddColumnLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasAddColumnLabel" class="offcanvas-title">Tambah Kolom</h5>
+        <button
+            type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Tutup"></button>
+    </div>
+    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
+        <form class="add-new-column pt-0" id="addColumnForm" action="{{ route('tabel.formulir.store', $tabel->id) }}" method="POST">
+            @csrf
+            
+            <input type="hidden" id="add-column-tipe" name="tipe" value="form-column" />
+            <input type="hidden" id="add-column-parent" name="parent_id" value="" />
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-column-width">Lebar Kolom (1-12)</label>
+                <input type="number" min="1" max="12" step="1" value="3"
+                    class="form-control" id="add-column-width" name="column_width" placeholder="Cth: 3" />
+            </div>
+
+            <button type="submit" class="btn btn-success me-3 data-submit">Simpan</button>
+            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Batal</button>
+        </form>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+    $(document).ready(function() {
+
+        const offcanvasAddColumn = new bootstrap.Offcanvas(document.getElementById('offcanvasAddColumn'));
+        $('#addColumnForm').validate({
+            rules: {
+                column_width: { required: true, number: true },
+            },
+            messages: {
+                column_width: { required: "Lebar kolom wajib diisi" },
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action'),
+                    type: 'POST',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasAddColumn.hide();
+                        form.reset();
+                        Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
+                            .then(() => window.location.reload());
+                    },
+                    error: function (xhr) {
+                        Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+                    }
+                });
+            },
+            errorElement: 'div',
+            errorPlacement: function (error, element) {
+                error.addClass('invalid-feedback');
+                element.closest('.mb-6, .form-control-validation').append(error);
+            },
+            highlight: function (element) {
+                $(element).addClass('is-invalid');
+            },
+            unhighlight: function (element) {
+                $(element).removeClass('is-invalid');
+            }
+        });
+        
+        $('.add-column').click(function(e) {
+            e.preventDefault();
+            $('#add-column-parent').val($(this).data('parent'));
+            offcanvasAddColumn.show();
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/form-basis-data/add-hr-line.blade.php b/resources/views/ekosistem/form-basis-data/add-hr-line.blade.php
new file mode 100644
index 0000000..22475be
--- /dev/null
+++ b/resources/views/ekosistem/form-basis-data/add-hr-line.blade.php
@@ -0,0 +1,27 @@
+@push('scripts')
+<script>
+    $(document).ready(function() {
+        function addForm(tipe) {
+            $.ajax({
+                url: '{{ route('tabel.formulir.store', [$tabel->id]) }}',
+                type: 'POST',
+                data: {
+                    tipe: tipe,
+                    _token: '{{ csrf_token() }}',
+                },
+                success: function () {
+                    Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
+                        .then(() => window.location.reload());
+                },
+                error: function (xhr) {
+                    Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+                }
+            });
+        }
+        $(".add-hr-line").click(function (e) {
+            e.preventDefault();
+            addForm('form-hr-line');
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/form-basis-data/add-row.blade.php b/resources/views/ekosistem/form-basis-data/add-row.blade.php
new file mode 100644
index 0000000..8693842
--- /dev/null
+++ b/resources/views/ekosistem/form-basis-data/add-row.blade.php
@@ -0,0 +1,27 @@
+@push('scripts')
+<script>
+    $(document).ready(function() {
+        function addForm(tipe) {
+            $.ajax({
+                url: '{{ route('tabel.formulir.store', [$tabel->id]) }}',
+                type: 'POST',
+                data: {
+                    tipe: tipe,
+                    _token: '{{ csrf_token() }}',
+                },
+                success: function () {
+                    Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
+                        .then(() => window.location.reload());
+                },
+                error: function (xhr) {
+                    Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+                }
+            });
+        }
+        $(".add-row").click(function (e) {
+            e.preventDefault();
+            addForm('form-row');
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/form-basis-data/add-section.blade.php b/resources/views/ekosistem/form-basis-data/add-section.blade.php
new file mode 100644
index 0000000..a9837ec
--- /dev/null
+++ b/resources/views/ekosistem/form-basis-data/add-section.blade.php
@@ -0,0 +1,77 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasAddSection"
+    aria-labelledby="offcanvasAddSectionLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasAddSectionLabel" class="offcanvas-title">Tambah Section</h5>
+        <button
+            type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Tutup"></button>
+    </div>
+    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
+        <form class="add-new-section pt-0" id="addSectionForm" action="{{ route('tabel.formulir.store', $tabel->id) }}" method="POST">
+            @csrf
+            
+            <input type="hidden" id="add-section-tipe" name="tipe" value="form-section" />
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-section-label">Label Section</label>
+                <input type="text" class="form-control" id="add-section-label" name="section_label" placeholder="Cth: Nama Petani" />
+            </div>
+
+            <button type="submit" class="btn btn-success me-3 data-submit">Simpan</button>
+            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Batal</button>
+        </form>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+    $(document).ready(function() {
+
+        const offcanvasAddSection = new bootstrap.Offcanvas(document.getElementById('offcanvasAddSection'));
+        $('#addSectionForm').validate({
+            rules: {
+                section_label: { required: true }
+            },
+            messages: {
+                section_label: { required: "Label wajib diisi" }
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action'),
+                    type: 'POST',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasAddSection.hide();
+                        form.reset();
+                        Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
+                            .then(() => window.location.reload());
+                    },
+                    error: function (xhr) {
+                        Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+                    }
+                });
+            },
+            errorElement: 'div',
+            errorPlacement: function (error, element) {
+                error.addClass('invalid-feedback');
+                element.closest('.mb-6, .form-control-validation').append(error);
+            },
+            highlight: function (element) {
+                $(element).addClass('is-invalid');
+            },
+            unhighlight: function (element) {
+                $(element).removeClass('is-invalid');
+            }
+        });
+        
+        $('.add-section').click(function(e) {
+            e.preventDefault();
+            offcanvasAddSection.show();
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/form-basis-data/add-value.blade.php b/resources/views/ekosistem/form-basis-data/add-value.blade.php
new file mode 100644
index 0000000..f80e27a
--- /dev/null
+++ b/resources/views/ekosistem/form-basis-data/add-value.blade.php
@@ -0,0 +1,85 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasAddValue"
+    aria-labelledby="offcanvasAddValueLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasAddValueLabel" class="offcanvas-title">Tambah Formulir Nilai</h5>
+        <button
+            type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Tutup"></button>
+    </div>
+    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
+        <form class="add-new-value pt-0" id="addValueForm" action="{{ route('tabel.formulir.store', $tabel->id) }}" method="POST">
+            @csrf
+            
+            <input type="hidden" id="add-value-tipe" name="tipe" value="form-value" />
+            <input type="hidden" id="add-value-parent" name="parent_id" value="" />
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-value-kolom">Kolom</label>
+                <select class="form-select" id="add-value-kolom" name="kolom_id">
+                    <option value="">Pilih Kolom</option>
+                    @foreach ($tabel->kolom as $kolom)
+                    <option value="{{ $kolom->id }}">{{ $kolom->label }}</option>
+                    @endforeach
+                </select>
+            </div>
+
+            <button type="submit" class="btn btn-success me-3 data-submit">Simpan</button>
+            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Batal</button>
+        </form>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+    $(document).ready(function() {
+
+        const offcanvasAddValue = new bootstrap.Offcanvas(document.getElementById('offcanvasAddValue'));
+        $('#addValueForm').validate({
+            rules: {
+                kolom_id: { required: true },
+            },
+            messages: {
+                kolom_id: { required: "Kolom wajib dipilih" },
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action'),
+                    type: 'POST',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasAddValue.hide();
+                        form.reset();
+                        Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
+                            .then(() => window.location.reload());
+                    },
+                    error: function (xhr) {
+                        Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+                    }
+                });
+            },
+            errorElement: 'div',
+            errorPlacement: function (error, element) {
+                error.addClass('invalid-feedback');
+                element.closest('.mb-6, .form-control-validation').append(error);
+            },
+            highlight: function (element) {
+                $(element).addClass('is-invalid');
+            },
+            unhighlight: function (element) {
+                $(element).removeClass('is-invalid');
+            }
+        });
+        
+        $('.add-value').click(function(e) {
+            e.preventDefault();
+            $('#add-value-parent').val($(this).data('parent'));
+            offcanvasAddValue.show();
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/form-basis-data/edit-column.blade.php b/resources/views/ekosistem/form-basis-data/edit-column.blade.php
new file mode 100644
index 0000000..99d8e01
--- /dev/null
+++ b/resources/views/ekosistem/form-basis-data/edit-column.blade.php
@@ -0,0 +1,94 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasEditColumn"
+    aria-labelledby="offcanvasEditColumnLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasEditColumnLabel" class="offcanvas-title">Edit Kolom</h5>
+        <button
+            type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Tutup"></button>
+    </div>
+    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
+        <form class="pt-0" id="editColumnForm" action="{{ route('tabel.formulir.update', [$tabel->id, ':id']) }}" method="POST">
+            @csrf
+            @method('PUT')
+            
+            <input type="hidden" id="edit-column-id" name="id" />
+            <input type="hidden" id="edit-column-tipe" name="tipe" value="form-column" />
+            <input type="hidden" id="edit-column-parent" name="parent_id" value="" />
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="edit-column-width">Lebar Kolom (1-12)</label>
+                <input type="number" min="1" max="12" step="1" value="3"
+                    class="form-control" id="edit-column-width" name="column_width" placeholder="Cth: 3" />
+            </div>
+
+            <button type="submit" class="btn btn-success me-3 data-submit">Simpan</button>
+            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Batal</button>
+        </form>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+    $(document).ready(function() {
+
+        const offcanvasEditColumn = new bootstrap.Offcanvas(document.getElementById('offcanvasEditColumn'));
+        $('.edit-column').click(function(e) {
+            console.log('edit column');
+            e.preventDefault();
+            const id = $(this).data('id');
+            $.get("{{ route('tabel.formulir.show', [$tabel->id, ':id']) }}".replace(':id', id), function (res) {
+                if (res.status !== 'success') {
+                    return;
+                }
+                $('#edit-column-id').val(res.data.id);
+                $('#edit-column-parent').val(res.data.parent_id);
+                $('#edit-column-width').val(res.data.column_width);
+                offcanvasEditColumn.show();
+            }).fail(function (xhr) {
+                Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+            });
+        });
+        $('#editColumnForm').validate({
+            rules: {
+                column_width: { required: true, number: true },
+            },
+            messages: {
+                column_width: { required: "Lebar kolom wajib diisi" },
+            },
+            submitHandler: function (form) {
+                console.log($('#edit-column-id').val());
+                $.ajax({
+                    url: $(form).attr('action').replace(':id', $('#edit-column-id').val()),
+                    type: 'PUT',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasEditColumn.hide();
+                        form.reset();
+                        Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
+                            .then(() => window.location.reload());
+                    },
+                    error: function (xhr) {
+                        Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+                    }
+                });
+            },
+            errorElement: 'div',
+            errorPlacement: function (error, element) {
+                error.addClass('invalid-feedback');
+                element.closest('.mb-6, .form-control-validation').append(error);
+            },
+            highlight: function (element) {
+                $(element).addClass('is-invalid');
+            },
+            unhighlight: function (element) {
+                $(element).removeClass('is-invalid');
+            }
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/form-basis-data/edit-section.blade.php b/resources/views/ekosistem/form-basis-data/edit-section.blade.php
new file mode 100644
index 0000000..509079a
--- /dev/null
+++ b/resources/views/ekosistem/form-basis-data/edit-section.blade.php
@@ -0,0 +1,89 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasEditSection"
+    aria-labelledby="offcanvasEditSectionLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasEditSectionLabel" class="offcanvas-title">Edit Section</h5>
+        <button
+            type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Tutup"></button>
+    </div>
+    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
+        <form class="pt-0" id="editSectionForm" action="{{ route('tabel.formulir.update', [$tabel->id, ':id']) }}" method="POST">
+            @csrf
+            @method('PUT')
+            
+            <input type="hidden" id="edit-section-id" name="id" />
+            <input type="hidden" id="edit-section-tipe" name="tipe" value="form-section" />
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="edit-section-label">Label Section</label>
+                <input type="text" class="form-control" id="edit-section-label" name="section_label" placeholder="Cth: Nama Petani" />
+            </div>
+
+            <button type="submit" class="btn btn-success me-3 data-submit">Simpan</button>
+            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Batal</button>
+        </form>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+    $(document).ready(function() {
+
+        const offcanvasEditSection = new bootstrap.Offcanvas(document.getElementById('offcanvasEditSection'));
+        $('.edit-section').click(function(e) {
+            console.log('edit section');
+            e.preventDefault();
+            const id = $(this).data('id');
+            $.get("{{ route('tabel.formulir.show', [$tabel->id, ':id']) }}".replace(':id', id), function (res) {
+                if (res.status !== 'success') {
+                    return;
+                }
+                $('#edit-section-id').val(res.data.id);
+                $('#edit-section-label').val(res.data.section_label);
+                offcanvasEditSection.show();
+            }).fail(function (xhr) {
+                Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+            });
+        });
+        $('#editSectionForm').validate({
+            rules: {
+                section_label: { required: true }
+            },
+            messages: {
+                section_label: { required: "Label wajib diisi" }
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action').replace(':id', $('#edit-section-id').val()),
+                    type: 'PUT',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasEditSection.hide();
+                        form.reset();
+                        Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
+                            .then(() => window.location.reload());
+                    },
+                    error: function (xhr) {
+                        Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+                    }
+                });
+            },
+            errorElement: 'div',
+            errorPlacement: function (error, element) {
+                error.addClass('invalid-feedback');
+                element.closest('.mb-6, .form-control-validation').append(error);
+            },
+            highlight: function (element) {
+                $(element).addClass('is-invalid');
+            },
+            unhighlight: function (element) {
+                $(element).removeClass('is-invalid');
+            }
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/form-basis-data/edit-value.blade.php b/resources/views/ekosistem/form-basis-data/edit-value.blade.php
new file mode 100644
index 0000000..14384e9
--- /dev/null
+++ b/resources/views/ekosistem/form-basis-data/edit-value.blade.php
@@ -0,0 +1,97 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasEditValue"
+    aria-labelledby="offcanvasEditValueLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasEditValueLabel" class="offcanvas-title">Edit Formulir Nilai</h5>
+        <button
+            type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Tutup"></button>
+    </div>
+    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
+        <form class="pt-0" id="editValueForm" action="{{ route('tabel.formulir.update', [$tabel->id, ':id']) }}" method="POST">
+            @csrf
+            @method('PUT')
+            
+            <input type="hidden" id="edit-value-id" name="id" />
+            <input type="hidden" id="edit-value-tipe" name="tipe" value="form-value" />
+            <input type="hidden" id="edit-value-parent" name="parent_id" value="" />
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="edit-value-kolom">Kolom</label>
+                <select class="form-select" id="edit-value-kolom" name="kolom_id">
+                    <option value="">Pilih Kolom</option>
+                    @foreach ($tabel->kolom as $kolom)
+                    <option value="{{ $kolom->id }}">{{ $kolom->label }}</option>
+                    @endforeach
+                </select>
+            </div>
+
+            <button type="submit" class="btn btn-success me-3 data-submit">Simpan</button>
+            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Batal</button>
+        </form>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+    $(document).ready(function() {
+
+        const offcanvasEditValue = new bootstrap.Offcanvas(document.getElementById('offcanvasEditValue'));
+        $('.edit-value').click(function(e) {
+            console.log('edit value');
+            e.preventDefault();
+            const id = $(this).data('id');
+            $.get("{{ route('tabel.formulir.show', [$tabel->id, ':id']) }}".replace(':id', id), function (res) {
+                if (res.status !== 'success') {
+                    return;
+                }
+                $('#edit-value-id').val(res.data.id);
+                $('#edit-value-parent').val(res.data.parent_id);
+                $('#edit-value-kolom').val(res.data.kolom_id);
+                offcanvasEditValue.show();
+            }).fail(function (xhr) {
+                Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+            });
+        });
+        $('#editValueForm').validate({
+            rules: {
+                kolom_id: { required: true },
+            },
+            messages: {
+                kolom_id: { required: "Kolom wajib dipilih" },
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action').replace(':id', $('#edit-value-id').val()),
+                    type: 'PUT',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasEditValue.hide();
+                        form.reset();
+                        Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
+                            .then(() => window.location.reload());
+                    },
+                    error: function (xhr) {
+                        Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+                    }
+                });
+            },
+            errorElement: 'div',
+            errorPlacement: function (error, element) {
+                error.addClass('invalid-feedback');
+                element.closest('.mb-6, .form-control-validation').append(error);
+            },
+            highlight: function (element) {
+                $(element).addClass('is-invalid');
+            },
+            unhighlight: function (element) {
+                $(element).removeClass('is-invalid');
+            }
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/form-basis-data/index.blade.php b/resources/views/ekosistem/form-basis-data/index.blade.php
new file mode 100644
index 0000000..27fceeb
--- /dev/null
+++ b/resources/views/ekosistem/form-basis-data/index.blade.php
@@ -0,0 +1,283 @@
+@extends('layout.main')
+
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="card">
+        <div class="card-header border-bottom d-flex justify-content-between align-items-center">
+            <h5 class="card-title mb-0">Formulir untuk Tabel Basis Data Ekosistem: {{ $tabel->label }}</h5>
+            
+            <div class="d-flex gap-2">
+                <form action="{{ route('tabel.formulir.generate', $tabel->id) }}" method="POST">
+                    @csrf
+                    <button class="btn btn-sm btn-label-primary" type="submit">
+                        <i class="ti tabler-automation me-1"></i> Generate Formulir
+                    </button>
+                </form>
+                
+            </div>
+        </div>
+
+        <div class="card-body">
+            <div class="nav-align-top pt-4">
+                <ul class="nav nav-pills" role="tablist">
+                    <li class="nav-item">
+                        <button
+                            type="button"
+                            class="nav-link active"
+                            role="tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#navs-pills-form"
+                            aria-controls="navs-pills-form"
+                            aria-selected="true">
+                            <i class="ti tabler-forms me-1"></i> Rancangan
+                        </button>
+                    </li>
+                    <li class="nav-item">
+                        <button
+                            type="button"
+                            class="nav-link"
+                            role="tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#navs-pills-preview"
+                            aria-controls="navs-pills-preview"
+                            aria-selected="false">
+                            <i class="ti tabler-eye me-1"></i> Pratinjau
+                        </button>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="tab-content p-0">
+                <div class="tab-pane fade show active" id="navs-pills-form" role="tabpanel">
+                    <div class="row pt-4">  
+                        <div class="col-6 mb-4">
+                            <h6>Rancangan Form</h6>
+                            <ul class="list-group list-group-flush" id="list-form">
+                                <li class="list-group-item drag-item cursor-move ">
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <span class="lead"><strong>Formulir: {{ $tabel->label }}</strong></span>
+                                        <div class="align-text-bottom">
+                                            <a href="javascript:;" class="btn btn-icon btn-text-primary rounded-pill add-row"
+                                                data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tambah Baris">
+                                                <i class="ti tabler-row-insert-bottom ti-md"></i></a>
+                                            <a href="javascript:;" class="btn btn-icon btn-text-primary rounded-pill add-section"
+                                                data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tambah Section">
+                                                <i class="ti tabler-new-section ti-md"></i></a>
+                                            <a href="javascript:;" class="btn btn-icon btn-text-primary rounded-pill add-hr-line"
+                                                data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tambah Garis Pembatas">
+                                                <i class="ti tabler-separator ti-md"></i></a>
+                                        </div>
+                                    </div>
+                                </li>
+                                @foreach($tabel->form as $form)
+                                <li class="list-group-item drag-item cursor-move pl-4">
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <span>{{ $form->tipe->label() }}
+                                            @if($form->tipe->value == 'form-section')
+                                            : {{ $form->section_label }}
+                                            @endif
+                                        </span>
+                                        <div class="align-text-bottom">
+                                            @if (!$loop->first)
+                                            <button type="button" 
+                                                class="btn btn-icon btn-text-secondary move-up" 
+                                                data-id="{{ $form->id }}" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Pindah ke Urutan Sebelumnya">
+                                                <i class="ti tabler-arrow-up"></i>
+                                            </button>
+                                            @endif
+                                            @if (!$loop->last)
+                                            <button type="button" 
+                                                class="btn btn-icon btn-text-secondary move-down" 
+                                                data-id="{{ $form->id }}" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Pindah ke Urutan Selanjutnya">
+                                                <i class="ti tabler-arrow-down"></i>
+                                            </button>
+                                            @endif
+                                            @if($form->tipe->value == 'form-row')
+                                            <a href="javascript:;" class="btn btn-icon btn-text-primary rounded-pill add-column"
+                                                data-parent="{{ $form->id }}"
+                                                data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tambah Kolom">
+                                                <i class="ti tabler-column-insert-right ti-md"></i></a>
+                                            @elseif($form->tipe->value == 'form-section')
+                                            <a href="javascript:;" class="btn btn-icon btn-text-primary rounded-pill edit-section" data-id="{{ $form->id }}"
+                                                data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit Section">
+                                                <i class="ti tabler-section ti-md"></i></a>
+                                            @endif
+                                            <a href="javascript:;" class="btn btn-icon btn-text-danger rounded-pill delete-record" 
+                                                data-id="{{ $form->id }}" data-nama="{{ $form->tipe->label() }}"
+                                                data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Hapus">
+                                                <i class="ti tabler-trash ti-md"></i></a>
+                                        </div>
+                                    </div>
+                                    @if($form->tipe->value == 'form-row')
+                                    <ul class="list-group list-group-flush nested-list">
+                                        @foreach($form->form as $childForm)
+                                        <li class="list-group-item drag-item cursor-move">
+                                            <div class="d-flex justify-content-between align-items-center">
+                                                <span>{{ $childForm->tipe->label() }} 
+                                                    @if($childForm->tipe->value == 'form-column')
+                                                    : col-{{ $childForm->column_width }}
+                                                    @endif
+                                                </span>
+                                                <div class="align-text-bottom">
+                                                    @if (!$loop->first)
+                                                    <button type="button" 
+                                                        class="btn btn-icon btn-text-secondary move-up" 
+                                                        data-id="{{ $childForm->id }}" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Pindah ke Urutan Sebelumnya">
+                                                        <i class="ti tabler-arrow-up"></i>
+                                                    </button>
+                                                    @endif
+                                                    @if (!$loop->last)
+                                                    <button type="button" 
+                                                        class="btn btn-icon btn-text-secondary move-down" 
+                                                        data-id="{{ $childForm->id }}" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Pindah ke Urutan Selanjutnya">
+                                                        <i class="ti tabler-arrow-down"></i>
+                                                    </button>
+                                                    @endif
+                                                    @if($childForm->tipe->value == 'form-column')
+                                                    <a href="javascript:;" class="btn btn-icon btn-text-primary rounded-pill edit-column"
+                                                        data-parent="{{ $form->id }}" data-id="{{ $childForm->id }}"
+                                                        data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit Kolom">
+                                                        <i class="ti tabler-columns ti-md"></i></a>
+                                                    <a href="javascript:;" class="btn btn-icon btn-text-primary rounded-pill move-column"
+                                                        data-parent="{{ $form->id }}" data-id="{{ $childForm->id }}"
+                                                        data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Pindah Kolom ke Row Berbeda">
+                                                        <i class="ti tabler-transition-top ti-md"></i></a>
+                                                    <a href="javascript:;" class="btn btn-icon btn-text-primary rounded-pill add-value"
+                                                        data-parent="{{ $childForm->id }}"
+                                                        data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tambah Form Nilai">
+                                                        <i class="ti tabler-file-plus ti-md"></i></a>
+                                                    @endif
+                                                    <a href="javascript:;" class="btn btn-icon btn-text-danger rounded-pill delete-record" 
+                                                        data-id="{{ $childForm->id }}" data-nama="{{ $childForm->tipe->label() }}"
+                                                        data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Hapus">
+                                                        <i class="ti tabler-trash ti-md"></i></a>
+                                                </div>
+                                            </div>
+                                            @if($childForm->tipe->value == 'form-column')
+                                            <ul class="list-group list-group-flush nested-list">
+                                                @foreach($childForm->form as $grandchildForm)
+                                                <li class="list-group-item drag-item cursor-move">
+                                                    <div class="d-flex justify-content-between align-items-center">
+                                                        <span>{{ $grandchildForm->tipe->label() }}
+                                                            @if($grandchildForm->tipe->value == 'form-value')
+                                                            : {{ $grandchildForm->kolom->label }}
+                                                            @endif
+                                                        </span>
+                                                        <div class="align-text-bottom">
+                                                            <a href="javascript:;" class="btn btn-icon btn-text-primary rounded-pill edit-value"
+                                                                data-parent="{{ $childForm->id }}" data-id="{{ $grandchildForm->id }}"
+                                                                data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit Form Nilai">
+                                                                <i class="ti tabler-file-text ti-md"></i></a>
+                                                            <a href="javascript:;" class="btn btn-icon btn-text-danger rounded-pill delete-record" 
+                                                                data-id="{{ $grandchildForm->id }}" data-nama="{{ $grandchildForm->tipe->label() }}"
+                                                                data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Hapus">
+                                                                <i class="ti tabler-trash ti-md"></i></a>
+                                                        </div>
+                                                    </div>
+                                                </li>
+                                                @endforeach
+                                            </ul>
+                                            @endif
+                                        </li>
+                                        @endforeach
+                                    </ul>
+                                    @endif
+                                </li>
+                                @endforeach            
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="tab-pane fade" id="navs-pills-preview" role="tabpanel">
+                    <div class="row pt-4">  
+                        <div class="col-12 mb-4">
+                            <h6>Pratinjau Formulir</h6>
+                            {!! $tabel->renderHtml('preview') !!}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="mt-4 text-end">
+                <a href="{{ route('tabel.show', $tabel->id) }}" class="btn btn-label-secondary me-2">Kembali</a>
+            </div>
+        </div>
+    </div>
+</div>
+@include('ekosistem.form-basis-data.add-row')
+@include('ekosistem.form-basis-data.add-section')
+@include('ekosistem.form-basis-data.edit-section')
+@include('ekosistem.form-basis-data.add-hr-line')
+@include('ekosistem.form-basis-data.add-column')
+@include('ekosistem.form-basis-data.edit-column')
+@include('ekosistem.form-basis-data.move-column')
+@include('ekosistem.form-basis-data.add-value')
+@include('ekosistem.form-basis-data.edit-value')
+@endsection
+
+@push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.7/Sortable.min.js"></script>
+
+<script>
+    $(document).ready(function() {
+        $(".move-up").click(function (e) {
+            e.preventDefault();
+            let id = $(this).data('id');
+
+            $.post("{{ route('tabel.formulir.move-up', [$tabel->id, ':id']) }}".replace(':id', id), {
+                _token: '{{ csrf_token() }}',
+                _method: 'PUT'
+            }, function (res) {
+                if (res.status === 'success') {
+                    location.reload();
+                }
+            });
+        });
+
+        $(".move-down").click(function (e) {
+            e.preventDefault();
+            let id = $(this).data('id');
+
+            $.post("{{ route('tabel.formulir.move-down', [$tabel->id, ':id']) }}".replace(':id', id), {
+                _token: '{{ csrf_token() }}',
+                _method: 'PUT'
+            }, function (res) {
+                if (res.status === 'success') {
+                    location.reload();
+                }
+            });
+        });
+
+        $(".delete-record").click(function (e) {
+            e.preventDefault();
+            const id = $(this).data('id');
+            const name = $(this).data('nama');
+
+            Swal.fire({
+                title: 'Hapus?',
+                text: `Form ${name} akan dihapus!`,
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonText: 'Ya, Hapus!',
+                customClass: { confirmButton: 'btn btn-danger me-3', cancelButton: 'btn btn-label-secondary' },
+                buttonsStyling: false
+            }).then(function (result) {
+                if (result.value) {
+                    $.ajax({
+                        url: "{{ route('tabel.formulir.destroy', [$tabel->id, ':id']) }}".replace(':id', id),
+                        type: 'POST',
+                        data: {
+                            _token: '{{ csrf_token() }}',
+                            _method: 'DELETE'
+                        },
+                        success: function () {
+                            Swal.fire({ icon: 'success', title: 'Terhapus!', showConfirmButton: false, timer: 1500 })
+                                .then(() => location.reload());
+                        }
+                    });
+                }
+            });
+        });   
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/form-basis-data/move-column.blade.php b/resources/views/ekosistem/form-basis-data/move-column.blade.php
new file mode 100644
index 0000000..ad27ef6
--- /dev/null
+++ b/resources/views/ekosistem/form-basis-data/move-column.blade.php
@@ -0,0 +1,98 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasMoveColumn"
+    aria-labelledby="offcanvasMoveColumnLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasMoveColumnLabel" class="offcanvas-title">Edit Kolom</h5>
+        <button
+            type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Tutup"></button>
+    </div>
+    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
+        <form class="pt-0" id="moveColumnForm" action="{{ route('tabel.formulir.update', [$tabel->id, ':id']) }}" method="POST">
+            @csrf
+            @method('PUT')
+            
+            <input type="hidden" id="move-column-id" name="id" />
+            <input type="hidden" id="move-column-tipe" name="tipe" value="form-column" />
+            <input type="hidden" id="move-column-width" name="column_width" value="" />
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="move-column-parent">Row Induk</label>
+                <select class="form-select" id="move-column-parent" name="parent_id">
+                    <option value="">Pilih Row Induk</option>
+                    @foreach ($tabel->form->where('tipe', \App\Enums\LayoutForm::ROW) as $row)
+                    <option value="{{ $row->id }}">Row: {{ $row->urutan }}</option>
+                    @endforeach
+                </select>
+            </div>
+
+            <button type="submit" class="btn btn-success me-3 data-submit">Simpan</button>
+            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Batal</button>
+        </form>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+    $(document).ready(function() {
+
+        const offcanvasMoveColumn = new bootstrap.Offcanvas(document.getElementById('offcanvasMoveColumn'));
+        $('.move-column').click(function(e) {
+            console.log('move column');
+            e.preventDefault();
+            const id = $(this).data('id');
+            $.get("{{ route('tabel.formulir.show', [$tabel->id, ':id']) }}".replace(':id', id), function (res) {
+                if (res.status !== 'success') {
+                    return;
+                }
+                $('#move-column-id').val(res.data.id);
+                $('#move-column-parent').val(res.data.parent_id);
+                $('#move-column-width').val(res.data.column_width);
+                offcanvasMoveColumn.show();
+            }).fail(function (xhr) {
+                Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+            });
+        });
+        $('#moveColumnForm').validate({
+            rules: {
+                parent_id: { required: true },
+            },
+            messages: {
+                parent_id: { required: "Row induk wajib diisi" },
+            },
+            submitHandler: function (form) {
+                console.log($('#move-column-id').val());
+                $.ajax({
+                    url: $(form).attr('action').replace(':id', $('#move-column-id').val()),
+                    type: 'PUT',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasMoveColumn.hide();
+                        form.reset();
+                        Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
+                            .then(() => window.location.reload());
+                    },
+                    error: function (xhr) {
+                        Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
+                    }
+                });
+            },
+            errorElement: 'div',
+            errorPlacement: function (error, element) {
+                error.addClass('invalid-feedback');
+                element.closest('.mb-6, .form-control-validation').append(error);
+            },
+            highlight: function (element) {
+                $(element).addClass('is-invalid');
+            },
+            unhighlight: function (element) {
+                $(element).removeClass('is-invalid');
+            }
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/tabel-basis-data/view.blade.php b/resources/views/ekosistem/tabel-basis-data/view.blade.php
index 3eb64f1..3c90a9b 100644
--- a/resources/views/ekosistem/tabel-basis-data/view.blade.php
+++ b/resources/views/ekosistem/tabel-basis-data/view.blade.php
@@ -159,6 +159,24 @@
                     </div>
                 </div>
 
+                <h6 class="mb-3">Informasi Formulir Tabel</h6>
+
+                <hr class="my-4 mx-n4" />
+                <div class="row mb-4">
+                    <div class="col-md-auto d-flex gap-2">
+                        <a href="{{ route('tabel.formulir.index', ['tabel' => $tabel->id]) }}"  class="btn btn-sm btn-primary" >
+                            <i class="ti tabler-edit me-1"></i> Edit
+                        </a>
+                    </div>
+                </div>
+                
+                <div class="row mb-4">  
+                    <div class="col-12">
+                        <h6>Pratinjau Formulir</h6>
+                        {!! $tabel->renderHtml('preview') !!}
+                    </div>
+                </div>
+
                 <div class="mt-4 text-end">
                     <a href="{{ route('tabel.index') }}" class="btn btn-label-secondary me-2">Kembali</a>
                 </div>
diff --git a/resources/views/ekosistem/value-basis-data/add-ref.blade.php b/resources/views/ekosistem/value-basis-data/add-ref.blade.php
new file mode 100644
index 0000000..22bce66
--- /dev/null
+++ b/resources/views/ekosistem/value-basis-data/add-ref.blade.php
@@ -0,0 +1,107 @@
+@extends('layout.main')
+
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="card">
+        <div class="card-header border-bottom mb-4">
+            <h5 class="card-title mb-0">Tambah Data {{ $tabel->label }}</h5>
+        </div>
+        
+        <div class="card-body">
+            <form id="addNewDataForm" action="{{ route('tabel.data.store', [$tabel->id, 'program_id' => $program->id]) }}" method="POST" >
+                @csrf
+
+                <h6 class="mb-3">Informasi {{ $tabel->label }}</h6>
+                <div class="row">
+                    @foreach($kolom as $k)
+                    <div class="col-md-3 mb-4 form-control-validation">
+                        <label class="form-label" for="add-data-{{ $k->kolom }}">{{ $k->label }}<span class="text-danger">*</span></label>
+                        @if($k->tipe == 'varchar')
+                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" />
+                        @elseif($k->tipe == 'text')
+                        <textarea class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}">{{ old($k->kolom) }}</textarea>
+                        @elseif($k->tipe == 'integer')
+                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" step="1" />
+                        @elseif($k->tipe == 'float')
+                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" step="any" />
+                        @elseif($k->tipe == 'date')
+                        <input type="date" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" />    
+                        @elseif($k->tipe == 'datetime') 
+                        <input type="datetime-local" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" />
+                        @elseif($k->tipe == 'boolean')
+                        <select class="form-select tipe-boolean @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
+                            <option value="1" {{ old($k->kolom) == 1 ? 'selected' : '' }}>Ya</option>
+                            <option value="0" {{ old($k->kolom) == 0 ? 'selected' : '' }}>Tidak</option>
+                        </select>
+                        @elseif($k->tipe == 'foreign_key')
+                        <select class="form-select tipe-fk @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
+                            @if ($list_relasi->where('kolom_id', $k->id)->first() != null)
+                            @foreach($list_relasi->where('kolom_id', $k->id)->first()['options'] as $opsi_relasi)
+                            <option value="{{ $opsi_relasi->value }}" {{ old($k->kolom) == $opsi_relasi->value ? 'selected' : '' }}>{{ $opsi_relasi->label }}</option>
+                            @endforeach 
+                            @endif
+                        </select>
+                        @elseif($k->tipe == 'enum')
+                        <select class="form-select tipe-fk @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
+                            @foreach($k->enum_opsi as $opsi)
+                            <option value="{{ $opsi['value'] }}" {{ old($k->kolom) == $opsi['value'] ? 'selected' : '' }}>{{ $opsi['label'] }}</option>
+                            @endforeach 
+                        </select>
+                        @else
+                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" />  
+                        @endif
+                        @error($k->kolom)<div class="error invalid-feedback">{{ $message }}</div>@enderror
+                    </div>
+                    @endforeach
+                </div>
+                    
+
+                <div class="mt-4 text-end">
+                    <a href="{{ route('tabel.data.index', [$tabel->id, 'program_id' => $program->id]) }}" class="btn btn-label-secondary me-2">Kembali</a>
+                    <button type="submit" class="btn btn-success data-submit">Simpan Data</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+    'use strict';
+    $(document).ready(function () {
+        $('#add-data-program,.tipe-boolean, .tipe-fk').select2();
+
+        $('#addNewDataForm').validate({
+            rules: {
+                tabel: { required: true, snakecase: true },
+                label: { required: true },
+                menu: { required: true }
+            },
+            messages: {
+                tabel: { required: "Nama tabel wajib diisi", snakecase: "Gunakan format snake_case (huruf kecil dan underscore)" },
+                label: { required: "Label wajib diisi" },
+                menu: { required: "Judul menu wajib diisi" }
+            },
+            errorElement: 'div',
+            errorPlacement: function (error, element) {
+                error.addClass('invalid-feedback');
+                element.closest('.mb-6, .form-control-validation').append(error);
+            },
+            highlight: function (element) {
+                $(element).addClass('is-invalid');
+            },
+            unhighlight: function (element) {
+                $(element).removeClass('is-invalid');
+            }
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/value-basis-data/add.blade.php b/resources/views/ekosistem/value-basis-data/add.blade.php
index 22bce66..c75a269 100644
--- a/resources/views/ekosistem/value-basis-data/add.blade.php
+++ b/resources/views/ekosistem/value-basis-data/add.blade.php
@@ -10,58 +10,8 @@
         <div class="card-body">
             <form id="addNewDataForm" action="{{ route('tabel.data.store', [$tabel->id, 'program_id' => $program->id]) }}" method="POST" >
                 @csrf
-
-                <h6 class="mb-3">Informasi {{ $tabel->label }}</h6>
-                <div class="row">
-                    @foreach($kolom as $k)
-                    <div class="col-md-3 mb-4 form-control-validation">
-                        <label class="form-label" for="add-data-{{ $k->kolom }}">{{ $k->label }}<span class="text-danger">*</span></label>
-                        @if($k->tipe == 'varchar')
-                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" />
-                        @elseif($k->tipe == 'text')
-                        <textarea class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}">{{ old($k->kolom) }}</textarea>
-                        @elseif($k->tipe == 'integer')
-                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" step="1" />
-                        @elseif($k->tipe == 'float')
-                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" step="any" />
-                        @elseif($k->tipe == 'date')
-                        <input type="date" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" />    
-                        @elseif($k->tipe == 'datetime') 
-                        <input type="datetime-local" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" />
-                        @elseif($k->tipe == 'boolean')
-                        <select class="form-select tipe-boolean @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
-                            <option value="1" {{ old($k->kolom) == 1 ? 'selected' : '' }}>Ya</option>
-                            <option value="0" {{ old($k->kolom) == 0 ? 'selected' : '' }}>Tidak</option>
-                        </select>
-                        @elseif($k->tipe == 'foreign_key')
-                        <select class="form-select tipe-fk @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
-                            @if ($list_relasi->where('kolom_id', $k->id)->first() != null)
-                            @foreach($list_relasi->where('kolom_id', $k->id)->first()['options'] as $opsi_relasi)
-                            <option value="{{ $opsi_relasi->value }}" {{ old($k->kolom) == $opsi_relasi->value ? 'selected' : '' }}>{{ $opsi_relasi->label }}</option>
-                            @endforeach 
-                            @endif
-                        </select>
-                        @elseif($k->tipe == 'enum')
-                        <select class="form-select tipe-fk @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
-                            @foreach($k->enum_opsi as $opsi)
-                            <option value="{{ $opsi['value'] }}" {{ old($k->kolom) == $opsi['value'] ? 'selected' : '' }}>{{ $opsi['label'] }}</option>
-                            @endforeach 
-                        </select>
-                        @else
-                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) }}" />  
-                        @endif
-                        @error($k->kolom)<div class="error invalid-feedback">{{ $message }}</div>@enderror
-                    </div>
-                    @endforeach
-                </div>
-                    
+                
+                {!! $tabel->renderHtml('add', $errors, $list_relasi) !!}
 
                 <div class="mt-4 text-end">
                     <a href="{{ route('tabel.data.index', [$tabel->id, 'program_id' => $program->id]) }}" class="btn btn-label-secondary me-2">Kembali</a>
diff --git a/resources/views/ekosistem/value-basis-data/edit-ref.blade.php b/resources/views/ekosistem/value-basis-data/edit-ref.blade.php
new file mode 100644
index 0000000..6963d01
--- /dev/null
+++ b/resources/views/ekosistem/value-basis-data/edit-ref.blade.php
@@ -0,0 +1,124 @@
+@extends('layout.main')
+
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="card">
+        <div class="card-header border-bottom mb-4">
+            <h5 class="card-title mb-0">Tambah Data {{ $tabel->label }}</h5>
+        </div>
+        
+        <div class="card-body">
+            <form id="addUpdateDataForm" action="{{ route('tabel.data.update', [$tabel->id, $value_id, 'program_id' => $program->id]) }}" method="POST" >
+                @csrf
+                @method('PUT')
+
+                <h6 class="mb-3">Informasi {{ $tabel->label }}</h6>
+                @if (!$program)
+                <div class="row">
+                    <div class="col-md-3 mb-4 form-control-validation">
+                        <label class="form-label" for="add-data-program">Program<span class="text-danger">*</span></label>
+                        <select name="program_id" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
+                            <option value="">Pilih Program</option>
+                            @foreach($programList as $prog)
+                                <option value="{{ $prog->id }}" {{ request('program_id') == $prog->id ? 'selected' : '' }}>{{ $prog->nama }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                </div>
+                @endif
+                <div class="row">
+                    @foreach($kolom as $k)
+                    <?php 
+                        $value = $values->where('kolom_id', $k->id)->first();
+                    ?> 
+                    <div class="col-md-3 mb-4 form-control-validation">
+                        <label class="form-label" for="add-data-{{ $k->kolom }}">{{ $k->label }}<span class="text-danger">*</span></label>
+                        @if($k->tipe == 'varchar')
+                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />
+                        @elseif($k->tipe == 'text')
+                        <textarea class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}">{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}</textarea>
+                        @elseif($k->tipe == 'integer')
+                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" step="1" />
+                        @elseif($k->tipe == 'float')
+                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" step="any"  />
+                        @elseif($k->tipe == 'date')
+                        <input type="date" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />    
+                        @elseif($k->tipe == 'datetime') 
+                        <input type="datetime-local" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />
+                        @elseif($k->tipe == 'boolean')
+                        <select class="form-select tipe-boolean @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
+                            <option value="1" {{ (old($k->kolom) ?? ($value['value_'.$k->tipe] ?? null)) == 1 ? 'selected' : '' }}>Ya</option>
+                            <option value="0" {{ (old($k->kolom) ?? ($value['value_'.$k->tipe] ?? null)) == 0 ? 'selected' : '' }}>Tidak</option>
+                        </select>
+                        @elseif($k->tipe == 'foreign_key')
+                        <select class="form-select tipe-fk @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
+                            @if ($list_relasi->where('kolom_id', $k->id)->first() != null)
+                            @foreach($list_relasi->where('kolom_id', $k->id)->first()['options'] as $opsi_relasi)
+                            <option value="{{ $opsi_relasi->value }}" {{ old($k->kolom) ?? $value['value_'.$k->tipe] == $opsi_relasi->value ? 'selected' : '' }}>{{ $opsi_relasi->label }}</option>
+                            @endforeach 
+                            @endif
+                        </select>
+                        @elseif($k->tipe == 'enum')
+                        <select class="form-select tipe-fk @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
+                            @foreach($k->enum_opsi as $opsi)
+                            <option value="{{ $opsi['value'] }}" {{ old($k->kolom) ?? $value['value_'.$k->tipe] == $opsi['value'] ? 'selected' : '' }}>{{ $opsi['label'] }}</option>
+                            @endforeach 
+                        </select>
+                        @else
+                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />  
+                        @endif
+                        @error($k->kolom)<div class="error invalid-feedback">{{ $message }}</div>@enderror
+                    </div>
+                    @endforeach
+                </div>
+                    
+
+                <div class="mt-4 text-end">
+                    <a href="{{ route('tabel.data.index', [$tabel->id, 'program_id' => $program->id]) }}" class="btn btn-label-secondary me-2">Kembali</a>
+                    <button type="submit" class="btn btn-success data-submit">Simpan Data</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+    'use strict';
+    $(document).ready(function () {
+        $('#add-data-program,.tipe-boolean, .tipe-fk').select2();
+
+        $('#addNewDataForm').validate({
+            rules: {
+                tabel: { required: true, snakecase: true },
+                label: { required: true },
+                menu: { required: true }
+            },
+            messages: {
+                tabel: { required: "Nama tabel wajib diisi", snakecase: "Gunakan format snake_case (huruf kecil dan underscore)" },
+                label: { required: "Label wajib diisi" },
+                menu: { required: "Judul menu wajib diisi" }
+            },
+            errorElement: 'div',
+            errorPlacement: function (error, element) {
+                error.addClass('invalid-feedback');
+                element.closest('.mb-6, .form-control-validation').append(error);
+            },
+            highlight: function (element) {
+                $(element).addClass('is-invalid');
+            },
+            unhighlight: function (element) {
+                $(element).removeClass('is-invalid');
+            }
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/ekosistem/value-basis-data/edit.blade.php b/resources/views/ekosistem/value-basis-data/edit.blade.php
index 6963d01..ae3326f 100644
--- a/resources/views/ekosistem/value-basis-data/edit.blade.php
+++ b/resources/views/ekosistem/value-basis-data/edit.blade.php
@@ -10,76 +10,10 @@
         <div class="card-body">
             <form id="addUpdateDataForm" action="{{ route('tabel.data.update', [$tabel->id, $value_id, 'program_id' => $program->id]) }}" method="POST" >
                 @csrf
-                @method('PUT')
+                @method('PUT') 
 
-                <h6 class="mb-3">Informasi {{ $tabel->label }}</h6>
-                @if (!$program)
-                <div class="row">
-                    <div class="col-md-3 mb-4 form-control-validation">
-                        <label class="form-label" for="add-data-program">Program<span class="text-danger">*</span></label>
-                        <select name="program_id" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
-                            <option value="">Pilih Program</option>
-                            @foreach($programList as $prog)
-                                <option value="{{ $prog->id }}" {{ request('program_id') == $prog->id ? 'selected' : '' }}>{{ $prog->nama }}</option>
-                            @endforeach
-                        </select>
-                    </div>
-                </div>
-                @endif
-                <div class="row">
-                    @foreach($kolom as $k)
-                    <?php 
-                        $value = $values->where('kolom_id', $k->id)->first();
-                    ?> 
-                    <div class="col-md-3 mb-4 form-control-validation">
-                        <label class="form-label" for="add-data-{{ $k->kolom }}">{{ $k->label }}<span class="text-danger">*</span></label>
-                        @if($k->tipe == 'varchar')
-                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />
-                        @elseif($k->tipe == 'text')
-                        <textarea class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}">{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}</textarea>
-                        @elseif($k->tipe == 'integer')
-                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" step="1" />
-                        @elseif($k->tipe == 'float')
-                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" step="any"  />
-                        @elseif($k->tipe == 'date')
-                        <input type="date" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />    
-                        @elseif($k->tipe == 'datetime') 
-                        <input type="datetime-local" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />
-                        @elseif($k->tipe == 'boolean')
-                        <select class="form-select tipe-boolean @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
-                            <option value="1" {{ (old($k->kolom) ?? ($value['value_'.$k->tipe] ?? null)) == 1 ? 'selected' : '' }}>Ya</option>
-                            <option value="0" {{ (old($k->kolom) ?? ($value['value_'.$k->tipe] ?? null)) == 0 ? 'selected' : '' }}>Tidak</option>
-                        </select>
-                        @elseif($k->tipe == 'foreign_key')
-                        <select class="form-select tipe-fk @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
-                            @if ($list_relasi->where('kolom_id', $k->id)->first() != null)
-                            @foreach($list_relasi->where('kolom_id', $k->id)->first()['options'] as $opsi_relasi)
-                            <option value="{{ $opsi_relasi->value }}" {{ old($k->kolom) ?? $value['value_'.$k->tipe] == $opsi_relasi->value ? 'selected' : '' }}>{{ $opsi_relasi->label }}</option>
-                            @endforeach 
-                            @endif
-                        </select>
-                        @elseif($k->tipe == 'enum')
-                        <select class="form-select tipe-fk @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
-                            @foreach($k->enum_opsi as $opsi)
-                            <option value="{{ $opsi['value'] }}" {{ old($k->kolom) ?? $value['value_'.$k->tipe] == $opsi['value'] ? 'selected' : '' }}>{{ $opsi['label'] }}</option>
-                            @endforeach 
-                        </select>
-                        @else
-                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />  
-                        @endif
-                        @error($k->kolom)<div class="error invalid-feedback">{{ $message }}</div>@enderror
-                    </div>
-                    @endforeach
-                </div>
+                {!! $tabel->renderHtml('edit', $errors, $list_relasi, $values) !!}
                     
-
                 <div class="mt-4 text-end">
                     <a href="{{ route('tabel.data.index', [$tabel->id, 'program_id' => $program->id]) }}" class="btn btn-label-secondary me-2">Kembali</a>
                     <button type="submit" class="btn btn-success data-submit">Simpan Data</button>
diff --git a/resources/views/ekosistem/value-basis-data/view.blade.php b/resources/views/ekosistem/value-basis-data/view.blade.php
index 6716131..bdc2da3 100644
--- a/resources/views/ekosistem/value-basis-data/view.blade.php
+++ b/resources/views/ekosistem/value-basis-data/view.blade.php
@@ -12,63 +12,7 @@
                 @csrf
                 @method('PUT')
 
-                <h6 class="mb-3">Informasi {{ $tabel->label }}</h6>
-                @if (!$program)
-                <div class="row">
-                    <div class="col-md-3 mb-4 form-control-validation">
-                        <label class="form-label" for="add-data-program">Program<span class="text-danger">*</span></label>
-                        <select name="program_id" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
-                            <option value="">Pilih Program</option>
-                            @foreach($programList as $prog)
-                                <option value="{{ $prog->id }}" {{ request('program_id') == $prog->id ? 'selected' : '' }}>{{ $prog->nama }}</option>
-                            @endforeach
-                        </select>
-                    </div>
-                </div>
-                @endif
-                <div class="row">
-                    @foreach($kolom as $k)
-                    <?php 
-                        $value = $values->where('kolom_id', $k->id)->first();
-                    ?> 
-                    <div class="col-md-3 mb-4 form-control-validation">
-                        <label class="form-label" for="add-data-{{ $k->kolom }}">{{ $k->label }}<span class="text-danger">*</span></label>
-                        @if($k->tipe == 'varchar')
-                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" readonly
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />
-                        @elseif($k->tipe == 'text')
-                        <textarea class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" readonly
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}">{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}</textarea>
-                        @elseif($k->tipe == 'integer')
-                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" readonly
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" step="1" />
-                        @elseif($k->tipe == 'float')
-                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" readonly
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" step="any"  />
-                        @elseif($k->tipe == 'date')
-                        <input type="date" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" readonly
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />    
-                        @elseif($k->tipe == 'datetime') 
-                        <input type="datetime-local" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" readonly
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />
-                        @elseif($k->tipe == 'boolean')
-                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" readonly
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ (old($k->kolom) ?? $value['value_'.$k->tipe]) == 1 ? 'Ya' : 'Tidak' }}" />
-                        @elseif($k->tipe == 'foreign_key')
-                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" readonly
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ (old($k->kolom) ?? $value['value_relasi_label'])  }}" />
-                        @elseif($k->tipe == 'enum')
-                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" readonly
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ (old($k->kolom) ?? $value['value_enum_label'])  }}" />
-                        @else
-                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" readonly
-                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />  
-                        @endif
-                        @error($k->kolom)<div class="error invalid-feedback">{{ $message }}</div>@enderror
-                    </div>
-                    @endforeach
-                </div>
-                    
+                {!! $tabel->renderHtml('view', $errors, null, $values) !!}
 
                 <div class="mt-4 text-end">
                     <a href="{{ route('tabel.data.index', [$tabel->id, 'program_id' => $program->id]) }}" class="btn btn-label-secondary me-2">Kembali</a>
diff --git a/routes/web.php b/routes/web.php
index 9ceb9fb..1675e25 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -118,9 +118,13 @@ Route::middleware('auth')
     Route::put('tabel/{tabelId}/kolom/{id}/move-down', [App\Http\Controllers\Web\Ekosistem\KolomBasisDataController::class, 'moveDown'])->name('tabel.kolom.move-down');
     Route::resource('tabel.kolom', App\Http\Controllers\Web\Ekosistem\KolomBasisDataController::class)->only(['show', 'store', 'update', 'destroy']);
     Route::resource('tabel.data', App\Http\Controllers\Web\Ekosistem\ValueBasisDataController::class);
-    Route::resource('tabel.ringkasan', App\Http\Controllers\Web\Ekosistem\RingkasanBasisDataController::class);
     Route::put('tabel/{tabelId}/ringkasan/{id}/move-up', [App\Http\Controllers\Web\Ekosistem\RingkasanBasisDataController::class, 'moveUp'])->name('tabel.ringkasan.move-up');
     Route::put('tabel/{tabelId}/ringkasan/{id}/move-down', [App\Http\Controllers\Web\Ekosistem\RingkasanBasisDataController::class, 'moveDown'])->name('tabel.ringkasan.move-down');
+    Route::resource('tabel.ringkasan', App\Http\Controllers\Web\Ekosistem\RingkasanBasisDataController::class);
+    Route::post('tabel/{tabelId}/formulir/generate', [App\Http\Controllers\Web\Ekosistem\FormBasisDataController::class, 'generate'])->name('tabel.formulir.generate');
+    Route::put('tabel/{tabelId}/formulir/{id}/move-up', [App\Http\Controllers\Web\Ekosistem\FormBasisDataController::class, 'moveUp'])->name('tabel.formulir.move-up');
+    Route::put('tabel/{tabelId}/formulir/{id}/move-down', [App\Http\Controllers\Web\Ekosistem\FormBasisDataController::class, 'moveDown'])->name('tabel.formulir.move-down');
+    Route::resource('tabel.formulir', App\Http\Controllers\Web\Ekosistem\FormBasisDataController::class);
 
     Route::resource('petani-cpm', App\Http\Controllers\Web\Ekosistem\PetaniCPMController::class);
     Route::get('petani-cpm/summary/{tipe}', [App\Http\Controllers\Web\Ekosistem\PetaniCPMController::class, 'summary'])->name('petani-cpm.summary');