diff --git a/app/Http/Controllers/Web/Ekosistem/KolomBasisDataController.php b/app/Http/Controllers/Web/Ekosistem/KolomBasisDataController.php
index 9c76681..0167462 100644
--- a/app/Http/Controllers/Web/Ekosistem/KolomBasisDataController.php
+++ b/app/Http/Controllers/Web/Ekosistem/KolomBasisDataController.php
@@ -54,8 +54,11 @@ class KolomBasisDataController extends Controller
                 })
             ],
             'label' => ['required', 'string'],
-            'tipe' => ['required', 'string', Rule::in(['varchar', 'integer', 'text', 'date', 'boolean', 'datetime', 'float'])],
+            'tipe' => ['required', 'string', Rule::in(['varchar', 'integer', 'text', 'date', 'boolean', 'datetime', 'float', 'foreign_key'])],
             'validasi' => ['nullable', 'json'],
+            'relasi_tabel' => ['nullable', 'string'],
+            'relasi_kolom_id' => ['nullable', 'string'],
+            'relasi_kolom_label' => ['nullable', 'string'],
         ]);
 
         KolomBasisData::create([...$validated,
@@ -120,8 +123,11 @@ class KolomBasisDataController extends Controller
                 })
             ],
             'label' => ['required', 'string'],
-            'tipe' => ['required', 'string', Rule::in(['varchar', 'integer', 'text', 'date', 'boolean', 'datetime', 'float'])],
+            'tipe' => ['required', 'string', Rule::in(['varchar', 'integer', 'text', 'date', 'boolean', 'datetime', 'float', 'foreign_key'])],
             'validasi' => ['nullable', 'json'],
+            'relasi_tabel' => ['nullable', 'string'],
+            'relasi_kolom_id' => ['nullable', 'string'],
+            'relasi_kolom_label' => ['nullable', 'string'],
         ]);
 
         $kolom->update([...$validated,
diff --git a/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php b/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php
index 07510f2..0048cc8 100644
--- a/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php
+++ b/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php
@@ -17,9 +17,6 @@ use App\Models\Core\Program;
 
 class ValueBasisDataController extends Controller
 {
-    /**
-     * Display a listing of the resource.
-     */
     public function index(Request $request, string $tabelId): View
     {
         if (!Gate::any(['super_admin', 'admin'])) {
@@ -68,6 +65,16 @@ class ValueBasisDataController extends Controller
                         END
                     ) AS \"{$k->kolom}\"
                 ";
+            } elseif ($k->tipe == 'foreign_key') {
+                $selects[] = "
+                    MAX(
+                        CASE 
+                            WHEN kolom_id = {$k->id} 
+                            THEN (select {$k->relasi_kolom_label} from {$k->relasi_tabel} where {$k->relasi_kolom_id} = value_relasi)
+                            ELSE NULL
+                        END
+                    ) AS \"{$k->kolom}\"
+                ";
             } else {
                 $selects[] = "
                     MAX(
@@ -128,9 +135,6 @@ class ValueBasisDataController extends Controller
         return view('ekosistem.value-basis-data.index', compact('programList', 'program', 'tabel', 'kolom', 'values', 'ringkasan'));
     }
 
-    /**
-     * Show the form for creating a new resource.
-     */
     public function create(Request $request, string $tabelId): View
     {
         if (!Gate::any(['super_admin', 'admin'])) {
@@ -158,12 +162,25 @@ class ValueBasisDataController extends Controller
             abort(400, 'Program tidak ditemukan.');    
         }
 
-        return view('ekosistem.value-basis-data.add', compact('tabel', 'kolom', 'program'));
+        $list_relasi = [];
+        foreach ($kolom as $k) {
+            if ($k->tipe == 'foreign_key') {
+                $relasi['kolom_id'] = $k->id;
+                try {
+                    $options_kolom = DB::table($k->relasi_tabel)->selectRaw($k->relasi_kolom_label . ' as label, ' . $k->relasi_kolom_id . ' as value')->whereNull('deleted_at');
+                    $relasi['options'] = $options_kolom->get();
+                    $relasi['sql'] = $options_kolom->toSql();
+                } catch (\Throwable $th) {
+                    $relasi['options'] = [];
+                }
+                $list_relasi[] = $relasi;
+            }
+        }
+        $list_relasi = collect($list_relasi);
+
+        return view('ekosistem.value-basis-data.add', compact('tabel', 'kolom', 'program', 'list_relasi'));
     }
 
-    /**
-     * Store a newly created resource in storage.
-     */
     public function store(Request $request, string $tabelId): RedirectResponse
     {
         if (!Gate::any(['super_admin', 'admin'])) {
@@ -216,7 +233,12 @@ class ValueBasisDataController extends Controller
                     'created_by' => auth()->id(),
                     'updated_by' => auth()->id(),
                 ];
-                $values['value_' . $k->tipe] = $validated[$k->kolom] ?? null;
+                if ($k->tipe == 'foreign_key') {
+                    $values['value_relasi'] = $validated[$k->kolom] ?? null;
+                } else {
+                    $values['value_' . $k->tipe] = $validated[$k->kolom] ?? null;
+                }
+                
                 ValueBasisData::create($values);
             }
         });
@@ -232,9 +254,6 @@ class ValueBasisDataController extends Controller
         //
     }
 
-    /**
-     * Show the form for editing the specified resource.
-     */
     public function edit(Request $request, string $tabelId, string $id)
     {
         if (!Gate::any(['super_admin', 'admin'])) {
@@ -275,7 +294,23 @@ class ValueBasisDataController extends Controller
 
         $value_id = $id;
 
-        return view('ekosistem.value-basis-data.edit', compact('tabel', 'kolom', 'program', 'values', 'value_id'));
+        $list_relasi = [];
+        foreach ($kolom as $k) {
+            if ($k->tipe == 'foreign_key') {
+                $relasi['kolom_id'] = $k->id;
+                try {
+                    $options_kolom = DB::table($k->relasi_tabel)->selectRaw($k->relasi_kolom_label . ' as label, ' . $k->relasi_kolom_id . ' as value')->whereNull('deleted_at');
+                    $relasi['options'] = $options_kolom->get();
+                    $relasi['sql'] = $options_kolom->toSql();
+                } catch (\Throwable $th) {
+                    $relasi['options'] = [];
+                }
+                $list_relasi[] = $relasi;
+            }
+        }
+        $list_relasi = collect($list_relasi);
+
+        return view('ekosistem.value-basis-data.edit', compact('tabel', 'kolom', 'program', 'values', 'value_id', 'list_relasi'));
     }
 
     /**
@@ -344,11 +379,15 @@ class ValueBasisDataController extends Controller
                         'created_by' => auth()->id(),
                         'updated_by' => auth()->id(),
                     ];
-                    $vals['value_' . $k->tipe] = $validated[$k->kolom] ?? null;
+                    if ($k->tipe == 'foreign_key') {
+                        $vals['value_relasi'] = $validated[$k->kolom] ?? null;
+                    } else {
+                        $vals['value_' . $k->tipe] = $validated[$k->kolom] ?? null;
+                    }
                     ValueBasisData::create($vals);
                 } else {
                     $v->update([
-                        'value_' . $k->tipe => $val,
+                        'value_' . ($k->tipe == 'foreign_key' ? 'relasi' : $k->tipe) => $val,
                         'updated_by' => auth()->id(),
                     ]);
                 }
diff --git a/app/Models/Ekosistem/KolomBasisData.php b/app/Models/Ekosistem/KolomBasisData.php
index a76a647..d472ad3 100644
--- a/app/Models/Ekosistem/KolomBasisData.php
+++ b/app/Models/Ekosistem/KolomBasisData.php
@@ -22,6 +22,9 @@ class KolomBasisData extends Model
         'tipe',
         'validasi',
         'urutan',
+        'relasi_tabel',
+        'relasi_kolom_id',
+        'relasi_kolom_label',
     ];
 
     protected $casts = [
diff --git a/app/Models/Ekosistem/ValueBasisData.php b/app/Models/Ekosistem/ValueBasisData.php
index 33075c1..56ff78c 100644
--- a/app/Models/Ekosistem/ValueBasisData.php
+++ b/app/Models/Ekosistem/ValueBasisData.php
@@ -30,6 +30,7 @@ class ValueBasisData extends Model
         'created_by',
         'updated_by',
         'deleted_by',
+        'value_relasi',
     ];
 
     public function tabel(): BelongsTo
diff --git a/database/migrations/2026_05_05_103739_update_basis_data_table.php b/database/migrations/2026_05_05_103739_update_basis_data_table.php
new file mode 100644
index 0000000..d5048db
--- /dev/null
+++ b/database/migrations/2026_05_05_103739_update_basis_data_table.php
@@ -0,0 +1,47 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Support\Facades\DB;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('ekosistem_basis_data_kolom', function (Blueprint $table) {
+            $table->string('relasi_tabel')->nullable();
+            $table->string('relasi_kolom_id')->nullable();  
+            $table->string('relasi_kolom_label')->nullable();
+        });
+
+        DB::statement("alter table public.ekosistem_basis_data_kolom drop constraint ekosistem_basis_data_kolom_tipe_check;");
+        DB::statement("
+            alter table public.ekosistem_basis_data_kolom add constraint ekosistem_basis_data_kolom_tipe_check check (((tipe)::text = any 
+                ((array[
+                'varchar'::character varying,
+                'integer'::character varying,
+                'float'::character varying,
+                'boolean'::character varying,
+                'date'::character varying,
+                'datetime'::character varying,
+                'text'::character varying,
+                'foreign_key'::character varying
+                ])::text[])))
+        ");
+
+        Schema::table('ekosistem_basis_data_value', function (Blueprint $table) {
+            $table->integer('value_relasi')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+    }
+};
diff --git a/resources/views/core/program/index.blade.php b/resources/views/core/program/index.blade.php
index 89b8a8c..3b6b6a4 100644
--- a/resources/views/core/program/index.blade.php
+++ b/resources/views/core/program/index.blade.php
@@ -3,7 +3,11 @@
 @section('content')
 <div class="container-xxl flex-grow-1 container-p-y">
     <div class="card">
-        <div class="card-body border-bottom">
+        <div class="card-header border-bottom">
+            <h5 class="card-title mb-0">Program Transformasi</h5>
+        </div>
+
+        <div class="card-body border-bottom pt-4">
             <form method="GET" action="{{ route('program.index') }}" class="d-flex justify-content-between align-items-center row gap-3 gap-md-0">
                 <div class="col-md-auto">
                     <div class="d-flex align-items-center">
diff --git a/resources/views/ekosistem/group-basis-data/index.blade.php b/resources/views/ekosistem/group-basis-data/index.blade.php
index 4feab02..88231ae 100644
--- a/resources/views/ekosistem/group-basis-data/index.blade.php
+++ b/resources/views/ekosistem/group-basis-data/index.blade.php
@@ -3,7 +3,11 @@
 @section('content')
 <div class="container-xxl flex-grow-1 container-p-y">
     <div class="card">
-        <div class="card-body border-bottom">
+        <div class="card-header border-bottom">
+            <h5 class="card-title mb-0">Kelompok Basis Data</h5>
+        </div>
+
+        <div class="card-body border-bottom pt-4">
             <form method="GET" action="{{ route('tabel.index') }}" class="d-flex justify-content-between align-items-center row gap-3 gap-md-0">
                 <div class="col-md-auto">
                     <div class="d-flex align-items-center">
diff --git a/resources/views/ekosistem/kolom-basis-data/add.blade.php b/resources/views/ekosistem/kolom-basis-data/add.blade.php
index fe91c9a..235ff25 100644
--- a/resources/views/ekosistem/kolom-basis-data/add.blade.php
+++ b/resources/views/ekosistem/kolom-basis-data/add.blade.php
@@ -34,8 +34,21 @@
                     <option value="date">Date</option>
                     <option value="datetime">Datetime</option>
                     <option value="text">Text</option>
+                    <option value="foreign_key">Relasi</option>
                 </select>
             </div>
+            <div class="mb-6 form-control-validation" id="relasi-form-tabel" style="display: none;">
+                <label class="form-label" for="add-kolom-relasi-tabel">Tabel Relasi<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="add-kolom-relasi-tabel" name="relasi_tabel" placeholder="Cth: Nama Petani" />
+            </div>
+            <div class="mb-6 form-control-validation" id="relasi-form-kolom" style="display: none;">
+                <label class="form-label" for="add-kolom-relasi-kolom-id">Kolom Relasi (ID)<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="add-kolom-relasi-kolom-id" name="relasi_kolom_id" placeholder="Cth: Nama Petani" />
+            </div>
+            <div class="mb-6 form-control-validation" id="relasi-form-kolom-label" style="display: none;">
+                <label class="form-label" for="add-kolom-relasi-kolom-label">Kolom Relasi (Label)<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="add-kolom-relasi-kolom-label" name="relasi_kolom_label" placeholder="Cth: Nama Petani" />
+            </div>
             <div class="mb-6 form-control-validation">
                 <label class="form-label" for="add-kolom-validasi">Validasi<span class="text-danger">*</span></label>
                 <textarea class="form-control" id="add-kolom-validasi" name="validasi" value="1" placeholder="Cth: required"></textarea>
@@ -55,6 +68,18 @@
             width: '100%',
         });
 
+        $('#add-kolom-jenis_data').on('change', function() {
+            if ($(this).val() === 'foreign_key') {
+                $('#relasi-form-tabel').show();
+                $('#relasi-form-kolom').show();
+                $('#relasi-form-kolom-label').show();
+            } else {
+                $('#relasi-form-tabel').hide();
+                $('#relasi-form-kolom').hide();
+                $('#relasi-form-kolom-label').hide();
+            }
+        });
+
         $.validator.addMethod("snakecase", function(value, element) {
             return this.optional(element) || /^[a-z0-9]+(_[a-z0-9]+)*$/.test(value);
         }, "Gunakan format snake_case (huruf kecil dan underscore)");
diff --git a/resources/views/ekosistem/kolom-basis-data/edit.blade.php b/resources/views/ekosistem/kolom-basis-data/edit.blade.php
index 976a816..bb03cd3 100644
--- a/resources/views/ekosistem/kolom-basis-data/edit.blade.php
+++ b/resources/views/ekosistem/kolom-basis-data/edit.blade.php
@@ -37,8 +37,21 @@
                     <option value="date">Date</option>
                     <option value="datetime">Datetime</option>
                     <option value="text">Text</option>
+                    <option value="foreign_key">Relasi</option>
                 </select>
             </div>
+            <div class="mb-6 form-control-validation" id="relasi-form-tabel-update" style="display: none;">
+                <label class="form-label" for="update-kolom-relasi-tabel">Tabel Relasi<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="update-kolom-relasi-tabel" name="relasi_tabel" placeholder="Cth: Nama Petani" />
+            </div>
+            <div class="mb-6 form-control-validation" id="relasi-form-kolom-update" style="display: none;">
+                <label class="form-label" for="update-kolom-relasi-kolom-id">Kolom Relasi (ID)<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="update-kolom-relasi-kolom-id" name="relasi_kolom_id" placeholder="Cth: Nama Petani" />
+            </div>
+            <div class="mb-6 form-control-validation" id="relasi-form-kolom-label-update" style="display: none;">
+                <label class="form-label" for="update-kolom-relasi-kolom-label">Kolom Relasi (Label)<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="update-kolom-relasi-kolom-label" name="relasi_kolom_label" placeholder="Cth: Nama Petani" />
+            </div>
             <div class="mb-6 form-control-validation">
                 <label class="form-label" for="update-kolom-validasi">Validasi<span class="text-danger">*</span></label>
                 <textarea class="form-control" id="update-kolom-validasi" name="validasi" value="1" placeholder="Cth: required"></textarea>
@@ -81,6 +94,19 @@
                     $('#update-kolom-label').val(res.data.label);
                     $('#update-kolom-jenis_data').val(res.data.tipe).trigger('change');
                     $('#update-kolom-validasi').val(res.data.required ? 'required' : '');
+                    if (res.data.tipe === 'foreign_key') {
+                        console.log("Data relasi:", res.data);
+                        $('#update-kolom-relasi-tabel').val(res.data.relasi_tabel);
+                        $('#update-kolom-relasi-kolom-id').val(res.data.relasi_kolom_id);
+                        $('#update-kolom-relasi-kolom-label').val(res.data.relasi_kolom_label);
+                        $('#relasi-form-tabel-update').show();
+                        $('#relasi-form-kolom-update').show();
+                        $('#relasi-form-kolom-label-update').show();
+                    } else {
+                        $('#relasi-form-tabel-update').hide();
+                        $('#relasi-form-kolom-update').hide();
+                        $('#relasi-form-kolom-label-update').hide();
+                    }
                     offcanvasUpdate.show();
                 }
             });
diff --git a/resources/views/ekosistem/value-basis-data/add.blade.php b/resources/views/ekosistem/value-basis-data/add.blade.php
index 0e6ac62..fce3dbd 100644
--- a/resources/views/ekosistem/value-basis-data/add.blade.php
+++ b/resources/views/ekosistem/value-basis-data/add.blade.php
@@ -32,13 +32,21 @@
                         <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" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                        <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>
                         @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) }}" />  
@@ -63,7 +71,7 @@
 <script>
     'use strict';
     $(document).ready(function () {
-        $('#add-data-program,.tipe-boolean').select2();
+        $('#add-data-program,.tipe-boolean, .tipe-fk').select2();
 
         $('#addNewDataForm').validate({
             rules: {
diff --git a/resources/views/ekosistem/value-basis-data/edit.blade.php b/resources/views/ekosistem/value-basis-data/edit.blade.php
index 4b77a61..61310ec 100644
--- a/resources/views/ekosistem/value-basis-data/edit.blade.php
+++ b/resources/views/ekosistem/value-basis-data/edit.blade.php
@@ -49,13 +49,21 @@
                         <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" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
+                        <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 @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
+                        <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>
                         @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] }}" />  
@@ -80,6 +88,7 @@
 <script>
     'use strict';
     $(document).ready(function () {
+        $('#add-data-program,.tipe-boolean, .tipe-fk').select2();
 
         $('#addNewDataForm').validate({
             rules: {
diff --git a/resources/views/program/framework/index.blade.php b/resources/views/program/framework/index.blade.php
index 56cd1cd..cf800e7 100644
--- a/resources/views/program/framework/index.blade.php
+++ b/resources/views/program/framework/index.blade.php
@@ -3,7 +3,11 @@
 @section('content')
 <div class="container-xxl flex-grow-1 container-p-y">
     <div class="card">
-        <div class="card-body border-bottom">
+        <div class="card-header border-bottom">
+            <h5 class="card-title mb-0">Kerangka Kerja Transformasi</h5>
+        </div>
+
+        <div class="card-body border-bottom pt-4">
             <form method="GET" action="{{ route('tabel.index') }}" class="d-flex justify-content-between align-items-center row gap-3 gap-md-0">
                 <div class="col-md-auto">
                     <div class="d-flex align-items-center">
diff --git a/resources/views/program/framework/view.blade.php b/resources/views/program/framework/view.blade.php
index f97466b..ab94244 100644
--- a/resources/views/program/framework/view.blade.php
+++ b/resources/views/program/framework/view.blade.php
@@ -4,7 +4,7 @@
 <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">Edit Kerangka Kerja</h5>
+            <h5 class="card-title mb-0">Lihat Kerangka Kerja</h5>
         </div>
         
         <div class="card-body">
@@ -57,8 +57,8 @@
                                 </thead>
                                 <tbody>
                                     @forelse($framework->transformasi as $transformasi)
-                                    @foreach($transformasi->aktivitas as $aktivitas)
-                                    @foreach($aktivitas->target as $target)
+                                    @forelse($transformasi->aktivitas as $aktivitas)
+                                    @forelse($aktivitas->target as $target)
                                     <tr>
                                         <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }}</span></td>
                                         <td><span class="{{ $aktivitas->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $aktivitas->nama }}</span></td>
@@ -103,13 +103,66 @@
                                             </div>
                                         </td>
                                     </tr>
-                                    @endforeach
-                                    @endforeach
+                                    @empty
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }}</span></td>
+                                        <td><span class="{{ $aktivitas->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $aktivitas->nama }}</span></td>
+                                        <td><span class="text-muted">{{ $aktivitas->deskripsi }}</span></td>
+                                        <td><span class="text-muted">{{ $aktivitas->indikator }}</span></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td>
+                                            <div class="dropdown">
+                                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
+                                                    <i class="icon-base ti tabler-dots-vertical"></i>
+                                                </button>
+                                                <div class="dropdown-menu">
+                                                    <a class="dropdown-item edit-transformasi" href="javascript:void(0);" data-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Transformasi</a>
+                                                    <a class="dropdown-item delete-transformasi" href="javascript:void(0);" data-id="{{ $transformasi->id }}" data-nama="{{ $transformasi->nama }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Transformasi</a>
+                                                    <hr/>
+                                                    <a class="dropdown-item add-aktivitas" href="javascript:void(0);" data-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Tujuan/Aktivitas</a>
+                                                    <a class="dropdown-item edit-aktivitas" href="javascript:void(0);" data-id="{{ $aktivitas->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Tujuan/Aktivitas</a>
+                                                    <a class="dropdown-item delete-aktivitas" href="javascript:void(0);" data-id="{{ $aktivitas->id }}" data-transformasi-id="{{ $transformasi->id }}" data-nama="{{ $aktivitas->nama }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Tujuan/Aktivitas</a>
+                                                    <hr/>
+                                                    <a class="dropdown-item add-target" href="javascript:void(0);" data-id="{{ $aktivitas->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Target</a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    @endforelse 
+                                    <!-- endforelse target -->
+                                    @empty 
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }}</span></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td>
+                                            <div class="dropdown">
+                                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
+                                                    <i class="icon-base ti tabler-dots-vertical"></i>
+                                                </button>
+                                                <div class="dropdown-menu">
+                                                    <a class="dropdown-item edit-transformasi" href="javascript:void(0);" data-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Transformasi</a>
+                                                    <a class="dropdown-item delete-transformasi" href="javascript:void(0);" data-id="{{ $transformasi->id }}" data-nama="{{ $transformasi->nama }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Transformasi</a>
+                                                    <hr/>
+                                                    <a class="dropdown-item add-aktivitas" href="javascript:void(0);" data-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Tujuan/Aktivitas</a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    @endforelse
+                                    <!-- endforelse aktivitas -->
                                     @empty
                                     <tr>
                                         <td colspan="4" class="text-center py-4">Tidak ada data ditemukan.</td>
                                     </tr>
                                     @endforelse
+                                    <!-- endforelse tranformasi -->
                                 </tbody>
                             </table>
                         </div>