diff --git a/app/Http/Controllers/Api/Ekosistem/FormBasisDataController.php b/app/Http/Controllers/Api/Ekosistem/FormBasisDataController.php
new file mode 100644
index 0000000..2aca1c6
--- /dev/null
+++ b/app/Http/Controllers/Api/Ekosistem/FormBasisDataController.php
@@ -0,0 +1,140 @@
+<?php
+
+namespace App\Http\Controllers\Api\Ekosistem;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\Facades\DB;
+
+use App\Models\Ekosistem\TabelBasisData;
+use App\Models\Ekosistem\KolomBasisData;
+use App\Models\Core\Program;
+
+
+class FormBasisDataController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request, string $tabelId): JsonResponse
+    {
+        if (!Gate::any(['super_admin', 'admin', 'fasilitator'])) {
+            abort(403);
+        }
+
+        $tabel = TabelBasisData::with('kolom')
+            ->whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->find($tabelId);
+        if (!$tabel) {
+            abort(404, 'Data tabel tidak ditemukan.');
+        }
+        $kolom = KolomBasisData::where('tabel_id', $tabelId)
+            ->where('is_active', true)->get();
+        if ($kolom->isEmpty()) {
+            abort(404, 'Data kolom tidak ditemukan untuk tabel ini.');
+        }
+
+        $program = null;
+        if (app()->has('SystemProgram')) {
+            $program = app('SystemProgram');
+        } else {
+            if ($request->has('program_id') && $request->query('program_id')) {
+                $programId = $request->query('program_id');
+                $program = Program::find($programId);
+            }
+        }
+        if (!$program) {
+            abort(400, 'Program tidak ditemukan.');    
+        }
+
+        $method = $request->query('method', 'add');
+
+        $list_relasi = null;
+        if ($method == 'add' || $method == 'edit') {
+            $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);
+        } elseif ($method == 'view') {
+            $id = $request->query('value_id');
+            if (!$id) {
+                abort(400, 'value_id query parameter diperlukan untuk view method.');
+            }
+
+            $values = ValueBasisData::query()
+                ->where('tabel_id', $tabelId)
+                ->where('value_id', $id)
+                ->where('program_id', $program->id)
+                ->get();
+            if ($values->isEmpty()) {
+                abort(404, 'Data tidak ditemukan.');
+            }
+
+            foreach ($values as $v) {
+                $k = $kolom->where('id', $v->kolom_id)->first();
+                if ($k->tipe == 'foreign_key') {
+                    $v->value_relasi_label = DB::table($k->relasi_tabel)->where($k->relasi_kolom_id, $v->value_relasi)->value($k->relasi_kolom_label);
+                } else if ($k->tipe == 'enum') {
+                    $opsi = collect($k->enum_opsi);
+                    $found = $opsi->first(function ($item) use ($v) {
+                        return (string) $item['value'] === (string) $v->value_enum;
+                    });
+                    $v->value_enum_label = $found['label'] ?? null;
+                }
+            }
+
+            $value_id = $id;
+        }
+
+        
+        $errors = $request->query('errors', null);
+
+        return response()->json($tabel->renderHtml($method, $errors, $list_relasi));
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}
diff --git a/app/Http/Controllers/Api/Ekosistem/TabelBasisDataController.php b/app/Http/Controllers/Api/Ekosistem/TabelBasisDataController.php
new file mode 100644
index 0000000..4f6512d
--- /dev/null
+++ b/app/Http/Controllers/Api/Ekosistem/TabelBasisDataController.php
@@ -0,0 +1,79 @@
+<?php
+
+namespace App\Http\Controllers\Api\Ekosistem;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
+use Illuminate\Http\JsonResponse;
+
+use App\Models\Ekosistem\TabelBasisData;
+
+use App\Http\Resources\Ekosistem\TabelBasisDataResource;
+
+class TabelBasisDataController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request): AnonymousResourceCollection
+    {
+        if (!Gate::any(['super_admin', 'admin', 'fasilitator'])) {
+            abort(403);
+        }
+
+        $perPage = $request->query('per_page', 10); 
+        $search = strtolower($request->query('search', ''));
+
+        $tabel = TabelBasisData::with('kolom')
+            ->whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })
+            ->whereRaw('lower(tabel) LIKE ?', ["%$search%"])
+            ->paginate($perPage);
+
+        return TabelBasisDataResource::collection($tabel);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Request $request, string $id): JsonResponse
+    {
+        if (!Gate::any(['super_admin', 'admin', 'fasilitator'])) {
+            abort(403);
+        }
+
+        $tabel = TabelBasisData::with('kolom')->findOrFail($id);
+
+        return (new TabelBasisDataResource($tabel))
+            ->response()
+            ->setStatusCode(201);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}
diff --git a/app/Http/Controllers/Api/Ekosistem/ValueBasisDataController.php b/app/Http/Controllers/Api/Ekosistem/ValueBasisDataController.php
new file mode 100644
index 0000000..d2134cc
--- /dev/null
+++ b/app/Http/Controllers/Api/Ekosistem/ValueBasisDataController.php
@@ -0,0 +1,367 @@
+<?php
+
+namespace App\Http\Controllers\Api\Ekosistem;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\Facades\DB;
+
+use App\Models\Ekosistem\TabelBasisData;
+use App\Models\Ekosistem\KolomBasisData;
+use App\Models\Ekosistem\ValueBasisData;
+use App\Models\Core\Program;
+
+class ValueBasisDataController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request, string $tabelId): JsonResponse
+    {
+        if (!Gate::any(['super_admin', 'admin', 'fasilitator'])) {
+            abort(403);
+        }
+
+        $perPage = $request->query('per_page', 10); 
+        $search = strtolower($request->query('search', ''));
+
+        $program = null;
+        $programList = Program::get();
+        if (app()->has('SystemProgram')) {
+            $program = app('SystemProgram');
+        } else {
+            if ($request->has('program_id') && $request->query('program_id')) {
+                $programId = $request->query('program_id');
+                $program = Program::find($programId);
+                if (!$program) {
+                    abort(400, 'Program tidak ditemukan.');
+                }
+            }
+        }
+
+        $tabel = TabelBasisData::with('kolom')
+            ->whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })
+            ->find($tabelId);
+        if (!$tabel) {
+            abort(404, 'Data tabel tidak ditemukan.');
+        }
+        $kolom = KolomBasisData::where('tabel_id', $tabelId)
+            ->where('is_active', true)
+            ->when('is_browse', function ($q) {
+                $q->where('is_browse', true);
+            })
+            ->orderBy('urutan', 'asc')
+            ->get();
+        if ($kolom->isEmpty()) {
+            abort(404, 'Data kolom tidak ditemukan untuk tabel ini.');
+        }
+
+        $selects = [];
+        foreach ($kolom as $k) {
+            if ($k->tipe == 'boolean') {
+                $selects[] = "
+                    MAX(
+                        CASE 
+                            WHEN kolom_id = {$k->id} 
+                            THEN CASE 
+                                WHEN value_boolean = true THEN 'Ya' 
+                                WHEN value_boolean = false THEN 'Tidak' 
+                                ELSE NULL 
+                            END
+                            ELSE NULL
+                        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}\"
+                ";
+            } elseif ($k->tipe == 'enum') {
+                $selects[] = "
+                    MAX(
+                        CASE 
+                            WHEN kolom_id = {$k->id} 
+                            THEN (
+                                SELECT elem->>'label'
+                                FROM ekosistem_basis_data_kolom k,
+                                    jsonb_array_elements(k.enum_opsi::jsonb) AS elem
+                                WHERE k.id = kolom_id
+                                AND elem->>'value' = value_enum
+                                LIMIT 1
+                            )
+                            ELSE NULL
+                        END
+                    ) AS \"{$k->kolom}\"
+                ";
+            } else {
+                $selects[] = "
+                    MAX(
+                        CASE 
+                            WHEN kolom_id = {$k->id} 
+                            THEN value_{$k->tipe}
+                            ELSE NULL
+                        END
+                    ) AS \"{$k->kolom}\"
+                ";
+            }
+        }
+
+        $base = ValueBasisData::query()
+            ->join('core_program', 'core_program.id', '=', 'ekosistem_basis_data_value.program_id')
+            ->where('tabel_id', $tabelId)
+            ->when($program, function ($query) use ($program) {
+                $query->where('program_id', $program->id);
+            })
+            ->selectRaw("
+                core_program.id AS program_id,
+                core_program.nama AS program_nama,
+                tabel_id,
+                value_id,
+                " . implode(",\n", $selects) . "
+            ")
+            ->groupBy('core_program.id', 'core_program.nama', 'tabel_id', 'value_id')
+            ->orderBy('value_id', 'asc');
+
+        $values = DB::query()->fromSub($base, 'pivot')
+            ->when($search, function ($query) use ($search, $kolom) {
+                $query->where(function ($q) use ($search, $kolom) {
+                    foreach ($kolom as $k) {
+                        if ($k->tipe == 'text' || $k->tipe == 'varchar') {
+                            $q->orWhereRaw("lower({$k->kolom}) LIKE ?", ["%$search%"]);
+                        }   
+                    }
+                });
+            })
+            ->paginate($perPage);
+
+        return response()->json($values);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request, string $tabelId): JsonResponse
+    {
+        if (!Gate::any(['super_admin', 'admin', 'fasilitator'])) {
+            abort(403);
+        }
+
+        $tabel = TabelBasisData::whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->find($tabelId);
+        if (!$tabel) {
+            abort(404, 'Data tabel tidak ditemukan.');
+        }
+        $kolom = KolomBasisData::where('tabel_id', $tabelId)
+            ->where('is_active', true)->get();
+        if ($kolom->isEmpty()) {
+            abort(404, 'Data kolom tidak ditemukan untuk tabel ini.');
+        }
+        if (app()->has('SystemProgram')) {
+            $program = app('SystemProgram');
+        } else {
+            if ($request->has('program_id') && $request->query('program_id')) {
+                $programId = $request->query('program_id');
+                $program = Program::find($programId);
+                if (!$program) {
+                    abort(400, 'Program tidak ditemukan.');
+                }
+            } else {
+                abort(400, 'Program tidak ditemukan.');    
+            }
+        }
+
+        $validationRules = [];
+        foreach ($kolom as $k) {
+            if ($k->validasi && is_array($k->validasi)) {
+                $validationRules[$k->kolom] = $k->validasi;
+            } else {
+                $validationRules[$k->kolom] = ['nullable'];
+            }
+        }
+        $validated = $request->validate($validationRules);
+
+        DB::transaction(function () use ($program, $tabelId, $validated, $kolom) {
+            $maxId = ValueBasisData::where('tabel_id', $tabelId)
+                ->where('program_id', $program->id)
+                ->whereNotNull('value_id')
+                ->max('value_id');
+            foreach ($kolom as $k) {
+                $values = [ 
+                    'program_id' => $program->id,
+                    'tabel_id' => (int)$tabelId,
+                    'kolom_id' => $k->id,
+                    'value_id' => ($maxId ?? 0) + 1,
+                    'created_by' => auth()->id(),
+                    'updated_by' => auth()->id(),
+                ];
+                if ($k->tipe == 'foreign_key') {
+                    $values['value_relasi'] = $validated[$k->kolom] ?? null;
+                } else {
+                    $values['value_' . $k->tipe] = $validated[$k->kolom] ?? null;
+                }
+                
+                ValueBasisData::create($values);
+            }
+        });
+
+        return response()->json(['message' => 'Data berhasil disimpan.']);
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id): JsonResponse
+    {
+        if (!Gate::any(['super_admin', 'admin', 'fasilitator'])) {
+            abort(403);
+        }
+
+        $tabel = TabelBasisData::whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->find($tabelId);
+        if (!$tabel) {
+            abort(404, 'Data tabel tidak ditemukan.');
+        }
+        $kolom = KolomBasisData::where('tabel_id', $tabelId)
+            ->where('is_active', true)->get();
+        if ($kolom->isEmpty()) {
+            abort(404, 'Data kolom tidak ditemukan untuk tabel ini.');
+        }
+        if (app()->has('SystemProgram')) {
+            $program = app('SystemProgram');
+        } else {
+            if ($request->has('program_id') && $request->query('program_id')) {
+                $programId = $request->query('program_id');
+                $program = Program::find($programId);
+                if (!$program) {
+                    abort(400, 'Program tidak ditemukan.');
+                }
+            } else {
+                abort(400, 'Program tidak ditemukan.');    
+            }
+        }
+
+        $values = ValueBasisData::query()
+            ->where('tabel_id', $tabelId)
+            ->where('value_id', $id)
+            ->where('program_id', $program->id)
+            ->get();
+        if ($values->isEmpty()) {
+            abort(404, 'Data tidak ditemukan.');
+        }
+
+        $validationRules = [];
+        foreach ($kolom as $k) {
+            if ($k->validasi && is_array($k->validasi)) {
+                $validationRules[$k->kolom] = $k->validasi;
+            } else {
+                $validationRules[$k->kolom] = ['nullable'];
+            }
+        }
+        $validated = $request->validate($validationRules);
+
+        DB::transaction(function () use ($program, $tabelId, $validated, $kolom, $id, $values) {
+            foreach ($validated as $kol => $val) {
+                $k = $kolom->where('kolom', $kol)->first();
+                if (!$k) {
+                    continue;
+                }
+                $v = $values->where('kolom_id', $k->id)->first();
+                if (!$v) {
+                    $vals = [ 
+                        'program_id' => $program->id,
+                        'tabel_id' => (int)$tabelId,
+                        'kolom_id' => $k->id,
+                        'value_id' => $id,
+                        'created_by' => auth()->id(),
+                        'updated_by' => auth()->id(),
+                    ];
+                    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 == 'foreign_key' ? 'relasi' : $k->tipe) => $val,
+                        'updated_by' => auth()->id(),
+                    ]);
+                }
+            }
+        });
+
+        return response()->json(['message' => 'Data berhasil diperbarui.']);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $tabelId, string $id): JsonResponse
+    {
+        if (!Gate::any(['super_admin', 'admin', 'fasilitator'])) {
+            abort(403);
+        }
+
+        $tabel = TabelBasisData::whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->find($tabelId);
+        if (!$tabel) {
+            abort(404, 'Data tabel tidak ditemukan.');
+        }
+        $kolom = KolomBasisData::where('tabel_id', $tabelId)->get();
+        if ($kolom->isEmpty()) {
+            abort(404, 'Data kolom tidak ditemukan untuk tabel ini.');
+        }
+        if (app()->has('SystemProgram')) {
+            $program = app('SystemProgram');
+        } else {
+            if ($request->has('program_id') && $request->query('program_id')) {
+                $programId = $request->query('program_id');
+                $program = Program::find($programId);
+                if (!$program) {
+                    abort(400, 'Program tidak ditemukan.');
+                }
+            } else {
+                abort(400, 'Program tidak ditemukan.');    
+            }
+        }
+
+        $values = ValueBasisData::query()
+            ->where('tabel_id', $tabelId)
+            ->where('value_id', $id)
+            ->where('program_id', $program->id)
+            ->get();
+        if ($values->isEmpty()) {
+            abort(404, 'Data tidak ditemukan.');
+        }
+
+        ValueBasisData::query()
+            ->where('tabel_id', $tabelId)
+            ->where('value_id', $id)
+            ->where('program_id', $program->id)
+            ->delete();
+
+        return response()->json(['message' => 'Data berhasil dihapus.']);
+    }
+}
diff --git a/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php b/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php
index 2c5234c..8279d3b 100644
--- a/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php
+++ b/app/Http/Controllers/Web/Ekosistem/ValueBasisDataController.php
@@ -23,7 +23,7 @@ class ValueBasisDataController extends Controller
 {
     public function index(Request $request, string $tabelId): View
     {
-        if (!Gate::any(['super_admin', 'admin'])) {
+        if (!Gate::any(['super_admin', 'admin', 'fasilitator'])) {
             abort(403);
         }
 
@@ -44,13 +44,15 @@ class ValueBasisDataController extends Controller
             }
         }
         
-        $tabel = TabelBasisData::find($tabelId);
+        $tabel = TabelBasisData::with('kolom')
+            ->whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->find($tabelId);
         if (!$tabel) {
             abort(404, 'Data tabel tidak ditemukan.');
         }
-        $kolom = KolomBasisData::where('tabel_id', $tabelId)
+        $kolom = KolomBasisData::where('tabel_id', $tabel->id)
             ->where('is_active', true)
-            ->where('is_browse', true)
             ->get();
         if ($kolom->isEmpty()) {
             abort(404, 'Data kolom tidak ditemukan untuk tabel ini.');
@@ -165,7 +167,10 @@ class ValueBasisDataController extends Controller
             abort(403);
         }
 
-        $tabel = TabelBasisData::find($tabelId);
+        $tabel = TabelBasisData::with('kolom')
+            ->whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->find($tabelId);
         if (!$tabel) {
             abort(404, 'Data tabel tidak ditemukan.');
         }
@@ -213,7 +218,10 @@ class ValueBasisDataController extends Controller
             abort(403);
         }
 
-        $tabel = TabelBasisData::find($tabelId);
+        $tabel = TabelBasisData::with('kolom')
+            ->whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->find($tabelId);
         if (!$tabel) {
             abort(404, 'Data tabel tidak ditemukan.');
         }
@@ -282,7 +290,10 @@ class ValueBasisDataController extends Controller
             abort(403);
         }
 
-        $tabel = TabelBasisData::find($tabelId);
+        $tabel = TabelBasisData::with('kolom')
+            ->whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->find($tabelId);
         if (!$tabel) {
             abort(404, 'Data tabel tidak ditemukan.');
         }
@@ -339,7 +350,10 @@ class ValueBasisDataController extends Controller
             abort(403);
         }
 
-        $tabel = TabelBasisData::find($tabelId);
+        $tabel = TabelBasisData::with('kolom')
+            ->whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->find($tabelId);
         if (!$tabel) {
             abort(404, 'Data tabel tidak ditemukan.');
         }
@@ -402,7 +416,10 @@ class ValueBasisDataController extends Controller
             abort(403);
         }
 
-        $tabel = TabelBasisData::find($tabelId);
+        $tabel = TabelBasisData::with('kolom')
+            ->whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->find($tabelId);
         if (!$tabel) {
             abort(404, 'Data tabel tidak ditemukan.');
         }
diff --git a/app/Http/Controllers/Web/Program/AktivitasController.php b/app/Http/Controllers/Web/Program/AktivitasController.php
index 9c34155..1f88669 100644
--- a/app/Http/Controllers/Web/Program/AktivitasController.php
+++ b/app/Http/Controllers/Web/Program/AktivitasController.php
@@ -54,6 +54,9 @@ class AktivitasController extends Controller
             'jenis_aktivitas' => ['required','string','max:255', Rule::in(['tujuan', 'aktivitas']),],
             'indikator' => ['required','string'],
             'deskripsi' => ['required','string'],
+            'parent_id' => [
+                Rule::requiredIf($request->jenis_aktivitas === 'aktivitas'),
+                'nullable','exists:program_aktivitas,id',],
         ]);
 
         Aktivitas::create([...$validated,
@@ -125,6 +128,9 @@ class AktivitasController extends Controller
             'jenis_aktivitas' => ['required','string','max:255', Rule::in(['tujuan', 'aktivitas']),],
             'indikator' => ['required','string'],
             'deskripsi' => ['required','string'],
+            'parent_id' => [
+                Rule::requiredIf($request->jenis_aktivitas === 'aktivitas'),
+                'nullable','exists:program_aktivitas,id'],
         ]);
 
         $aktivitas->update([...$validated,
diff --git a/app/Http/Controllers/Web/Program/FrameworkController.php b/app/Http/Controllers/Web/Program/FrameworkController.php
index 365d6fe..10df7cc 100644
--- a/app/Http/Controllers/Web/Program/FrameworkController.php
+++ b/app/Http/Controllers/Web/Program/FrameworkController.php
@@ -102,7 +102,8 @@ class FrameworkController extends Controller
             abort(403);
         }
 
-        $framework = Framework::findOrFail($id);
+        $framework = Framework::with('transformasi')->with('transformasi.tujuan')
+            ->findOrFail($id);
         $program = Program::all();
 
         return view('program.framework.edit', compact('framework', 'program'));
diff --git a/app/Http/Controllers/Web/Program/RealisasiController.php b/app/Http/Controllers/Web/Program/RealisasiController.php
new file mode 100644
index 0000000..25eed7d
--- /dev/null
+++ b/app/Http/Controllers/Web/Program/RealisasiController.php
@@ -0,0 +1,125 @@
+<?php
+
+namespace App\Http\Controllers\Web\Program;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\View\View;
+use Illuminate\Http\JsonResponse;
+
+use App\Models\Program\Framework;
+use App\Models\Program\Realisasi;
+
+class RealisasiController extends Controller
+{
+    public function index(Request $request): View
+    {
+        if (!Gate::any(['super_admin', 'admin'])) {
+            abort(403);
+        }
+
+        $framework = Framework::when($request->has('frameworkid'), function ($query) use ($request) {
+            $query->where('id', $request->frameworkid);
+        })->latest()->first();
+        if ($framework == null) {
+            abort(404);
+        }
+        
+        return view('program.realisasi.index', compact('framework'));
+    }
+
+    public function create()
+    {
+        //
+    }
+
+    public function store(Request $request): JsonResponse
+    {
+        if (!Gate::any(['super_admin', 'admin'])) {
+            abort(403);
+        }
+
+        $validated = $request->validate([
+            'target_id' => ['required', 'integer', 'exists:program_target,id'],
+            'realisasi_integer' => ['nullable', 'integer'],
+            'realisasi_float' => ['nullable', 'numeric'],
+            'realisasi_boolean' => ['nullable', 'boolean'],
+        ]);
+
+        $realisasi = Realisasi::create([...$validated, 
+            'created_by' => auth()->id(), 
+            'updated_by' => auth()->id()
+        ]);
+
+        return response()->json([
+            'status' => 'success',
+            'message' => 'Target berhasil ditambahkan.'
+        ], 201);
+    }
+
+    public function show(string $id)
+    {
+        if (!Gate::any(['super_admin', 'admin'])) {
+            abort(403);
+        }
+
+        $realisasi = Realisasi::with('target', 'target.aktivitas', 'target.aktivitas.transformasi')
+            ->find($id);
+        if (!$realisasi) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data realisasi tidak ditemukan.'
+            ], 404);
+        }
+
+        return response()->json([
+            'status' => 'success',
+            'data' => $realisasi
+        ]);
+    }
+
+    public function edit(string $id)
+    {
+        //
+    }
+
+    public function update(Request $request, string $id): JsonResponse
+    {
+        if (!Gate::any(['super_admin', 'admin'])) {
+            abort(403);
+        }
+
+        $realisasi = Realisasi::find($id);
+        if (!$realisasi) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data realisasi tidak ditemukan.'
+            ], 404);
+        }
+
+        $validated = $request->validate([
+            'target_id' => ['required', 'integer', 'exists:program_target,id'],
+            'realisasi_integer' => ['nullable', 'integer'],
+            'realisasi_float' => ['nullable', 'numeric'],
+            'realisasi_boolean' => ['nullable', 'boolean'],
+        ]);
+
+        $realisasi->update([...$validated,
+            'updated_by' => auth()->id(),
+        ]);
+
+        return response()->json([
+            'status' => 'success',
+            'message' => 'Target berhasil diperbarui.'
+        ], 200);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}
diff --git a/app/Http/Controllers/Web/Program/TargetController.php b/app/Http/Controllers/Web/Program/TargetController.php
index b47ee4f..ac4ab67 100644
--- a/app/Http/Controllers/Web/Program/TargetController.php
+++ b/app/Http/Controllers/Web/Program/TargetController.php
@@ -69,6 +69,16 @@ class TargetController extends Controller
                 'nullable',
                 'boolean'
             ],
+            'tipe_realisasi' => [
+                'nullable', 
+                'string',
+                 Rule::in(['manual', 'referensi'])
+            ],
+            'value_query' => [
+                Rule::requiredIf($request->tipe_realisasi === 'referensi'),
+                'nullable',
+                'string'
+            ]
         ]);
     }
 
@@ -77,9 +87,6 @@ class TargetController extends Controller
         
     }
 
-    /**
-     * Store a newly created resource in storage.
-     */
     public function store(Request $request, string $frameworkId, string $transformasiId, string $aktivitasId): JsonResponse
     {
         if (!Gate::any(['super_admin', 'admin'])) {
@@ -109,12 +116,32 @@ class TargetController extends Controller
         ], 201);
     }
 
-    /**
-     * Display the specified resource.
-     */
-    public function show(string $id)
+    public function show(string $frameworkId, string $transformasiId, string $aktivitasId, string $id)
     {
-        //
+        if (!Gate::any(['super_admin', 'admin'])) {
+            abort(403);
+        }
+
+        $target = Target::with('realisasi', 'latestRealisasi')
+            ->whereHas('aktivitas.transformasi', function ($query) use ($frameworkId) {
+                $query->where('framework_id', $frameworkId);
+            })
+            ->whereHas('aktivitas', function ($query) use ($transformasiId) {
+                $query->where('transformasi_id', $transformasiId);
+            })
+            ->where('aktivitas_id', $aktivitasId)->find($id);
+
+        if (!$target) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data target tidak ditemukan.'
+            ], 404);
+        }
+
+        return response()->json([
+            'status' => 'success',
+            'data' => $target
+        ]);
     }
 
     /**
@@ -128,16 +155,67 @@ class TargetController extends Controller
     /**
      * Update the specified resource in storage.
      */
-    public function update(Request $request, string $id)
+    public function update(Request $request, string $frameworkId, string $transformasiId, string $aktivitasId, string $id)
     {
-        //
+        if (!Gate::any(['super_admin', 'admin'])) {
+            abort(403);
+        }
+
+        $target = Target::whereHas('aktivitas.transformasi', function ($query) use ($frameworkId) {
+                $query->where('framework_id', $frameworkId);
+            })
+            ->whereHas('aktivitas', function ($query) use ($transformasiId) {
+                $query->where('transformasi_id', $transformasiId);
+            })
+            ->where('aktivitas_id', $aktivitasId)->find($id);
+
+        if (!$target) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data target tidak ditemukan.'
+            ], 404);
+        }
+
+        $validated = $this->validated($request);
+        $target->update([...$validated,
+            'updated_by'    => auth()->id(),
+        ]);
+
+        return response()->json([
+            'status' => 'success',
+            'message' => 'Target berhasil diperbarui.'
+        ], 200);
     }
 
-    /**
-     * Remove the specified resource from storage.
-     */
-    public function destroy(string $id)
+    public function destroy(string $frameworkId, string $transformasiId, string $aktivitasId, string $id)
     {
-        //
+        if (!Gate::any(['super_admin', 'admin'])) {
+            abort(403);
+        }
+
+        $target = Target::whereHas('aktivitas.transformasi', function ($query) use ($frameworkId) {
+                $query->where('framework_id', $frameworkId);
+            })
+            ->whereHas('aktivitas', function ($query) use ($transformasiId) {
+                $query->where('transformasi_id', $transformasiId);
+            })
+            ->where('aktivitas_id', $aktivitasId)->find($id);
+
+        if (!$target) {
+            return response()->json([
+                'status' => 'error',
+                'message' => 'Data target tidak ditemukan.'
+            ], 404);
+        }
+
+        $target->update([
+            'deleted_by'    => auth()->id(),
+        ]);
+        $target->delete();
+
+        return response()->json([
+            'status' => 'success',
+            'message' => 'Target berhasil dihapus.'
+        ], 200);
     }
 }
diff --git a/app/Http/Controllers/Web/Program/VerifikasiController.php b/app/Http/Controllers/Web/Program/VerifikasiController.php
new file mode 100644
index 0000000..0e52d7e
--- /dev/null
+++ b/app/Http/Controllers/Web/Program/VerifikasiController.php
@@ -0,0 +1,90 @@
+<?php
+
+namespace App\Http\Controllers\Web\Program;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\View\View;
+use Illuminate\Http\JsonResponse;
+
+use App\Models\Program\Framework;
+use App\Models\Program\Realisasi;
+use App\Models\Program\Verifikasi;
+
+class VerifikasiController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request): JsonResponse
+    {
+        if (!Gate::any(['super_admin', 'admin'])) {
+            abort(403);
+        }
+
+        $validated = $request->validate([
+            'realisasi_id' => ['required', 'integer', 'exists:program_realisasi,id'],
+            'dokumen' => ['required', 'string'],
+            'link_dokumen' => ['required', 'url'],
+        ]);
+
+        $verifikasi = Verifikasi::create([...$validated, 
+            'created_by' => auth()->id(), 
+            'updated_by' => auth()->id()
+        ]);
+
+        return response()->json([
+            'status' => 'success',
+            'message' => 'Dokumen bukti berhasil ditambahkan.'
+        ], 201);
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id): JsonResponse
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}
diff --git a/app/Http/Resources/Ekosistem/KolomBasisDataResource.php b/app/Http/Resources/Ekosistem/KolomBasisDataResource.php
new file mode 100644
index 0000000..f156a3d
--- /dev/null
+++ b/app/Http/Resources/Ekosistem/KolomBasisDataResource.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Resources\Ekosistem;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class KolomBasisDataResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'label' => $this->label,
+            'kolom' => $this->kolom,
+            'tipe' => $this->tipe,
+            'validasi' => $this->validasi,
+            'urutan' => $this->urutan,
+            'relasi_tabel' => $this->relasi_tabel,
+            'relasi_kolom_id' => $this->relasi_kolom_id,
+            'relasi_kolom_label' => $this->relasi_kolom_label,
+            'enum_opsi' => $this->enum_opsi,
+            'is_active' => $this->is_active,
+            'is_browse' => $this->is_browse,
+        ];
+    }
+}
diff --git a/app/Http/Resources/Ekosistem/TabelBasisDataResource.php b/app/Http/Resources/Ekosistem/TabelBasisDataResource.php
new file mode 100644
index 0000000..2b2feb6
--- /dev/null
+++ b/app/Http/Resources/Ekosistem/TabelBasisDataResource.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Resources\Ekosistem;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+use App\Models\Ekosistem\TabelBasisData;
+use App\Models\Ekosistem\KolomBasisData;
+use App\Http\Resources\Ekosistem\KolomBasisDataResource;
+
+class TabelBasisDataResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'tabel' => $this->tabel,
+            'label' => $this->label,
+            'menu' => $this->menu,
+            'deskripsi' => $this->deskripsi,
+            // 'group_id' => $this->group_id,
+            'urutan' => $this->urutan,
+            // 'group' => new GroupBasisDataResource($this->whenLoaded('group')),
+            'kolom' => KolomBasisDataResource::collection($this->whenLoaded('kolom')),
+            //'ringkasan' => RingkasanBasisDataResource::collection($this->whenLoaded('ringkasan')),
+        ];
+    }
+}
diff --git a/app/Http/Resources/Ekosistem/ValueBasisDataResource.php b/app/Http/Resources/Ekosistem/ValueBasisDataResource.php
new file mode 100644
index 0000000..b377c8b
--- /dev/null
+++ b/app/Http/Resources/Ekosistem/ValueBasisDataResource.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Resources\Ekosistem;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class ValueBasisDataResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'program_id' => $this->program_id,
+            'tabel_id' => $this->tabel_id,
+            'kolom_id' => $this->kolom_id,
+            'value_id' => $this->value_id,
+            'value_varchar' => $this->value_varchar,
+            'value_integer' => $this->value_integer,
+            'value_float' => $this->value_float,
+            'value_boolean' => $this->value_boolean,
+            'value_date' => $this->value_date,
+            'value_datetime' => $this->value_datetime,
+            'value_text' => $this->value_text,
+            'value_relasi' => $this->value_relasi,
+            'value_enum' => $this->value_enum,
+        ];
+    }
+}
diff --git a/app/Models/Ekosistem/FormBasisData.php b/app/Models/Ekosistem/FormBasisData.php
index d8f7ab4..75ecef6 100644
--- a/app/Models/Ekosistem/FormBasisData.php
+++ b/app/Models/Ekosistem/FormBasisData.php
@@ -65,30 +65,42 @@ class FormBasisData extends Model
         return $this->belongsTo(KolomBasisData::class, 'kolom_id');
     }
 
-    public function renderHtml(string $state, $errors = null, $optionsFK = null, $values = null): string 
+    public function renderHtml(string $state, $errors = null, $optionsFK = null, $values = null, $framework = 'bootstrap'): 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 => ''
-        };
+        if ($framework == 'tailwind') {
+            return match ($this->tipe) {
+                LayoutForm::COLUMN  => '<div className="space-y-2 form-control-validation">'
+                    .$this->childHtml($state, $errors, $optionsFK, $values, $framework).'</div>',
+                LayoutForm::VALUE   => $this->value($state, $errors, $optionsFK, $values, $framework),
+                LayoutForm::SECTION => '<h3 className="font-semibold text-lg text-slate-900">'.$this->section_label.'</h3>',
+                LayoutForm::ROW     => '<div className="grid grid-cols-1 gap-5">'.$this->childHtml($state, $errors, $optionsFK, $values, $framework).'</div>',
+                LayoutForm::HR_LINE => '<hr/>',
+                default => ''
+            };
+        } else {
+            return match ($this->tipe) {
+                LayoutForm::COLUMN  => '<div class="col-'.($this->column_width ?? 3).' mb-4 form-control-validation">'
+                    .$this->childHtml($state, $errors, $optionsFK, $values, $framework).'</div>',
+                LayoutForm::VALUE   => $this->value($state, $errors, $optionsFK, $values, $framework),
+                LayoutForm::SECTION => '<h6 class="mb-3">'.$this->section_label.'</h6>',
+                LayoutForm::ROW     => '<div class="row">'.$this->childHtml($state, $errors, $optionsFK, $values, $framework).'</div>',
+                LayoutForm::HR_LINE => '<hr/>',
+                default => ''
+            };
+        }
     }
 
 
-    private function childHtml(string $state, $errors = null, $optionsFK = null, $values = null): string
+    private function childHtml(string $state, $errors = null, $optionsFK = null, $values = null, $framework = 'bootstrap'): string
     {
         $html = '';
         foreach ($this->form as $form) {
-            $html .= $form->renderHtml($state, $errors, $optionsFK, $values);
+            $html .= $form->renderHtml($state, $errors, $optionsFK, $values, $framework);
         }
         return $html;
     }
 
-    private function value(string $state, $errors = null, $optionsFK = null, $values = null): string
+    private function value(string $state, $errors = null, $optionsFK = null, $values = null, $framework = 'bootstrap'): string
     {
         $html = '';
         if ($this->kolom) {
@@ -97,92 +109,227 @@ class FormBasisData extends Model
             $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 ($framework == 'tailwind') {
+                $html .= '<Label htmlFor="label" className="text-sm font-medium text-slate-700">kolom_required'.$this->kolom->label;
+                $html .= '</Label>';
+            } else {
+                $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" />';
+                if ($framework == 'tailwind') {
+                    $html .= '<Input className="form-control kolom_error h-11" id="value-data-kolom_name" readonly
+                        name="kolom_name" value="kolom_value" />';
+                } else {
+                    $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>';
+                if ($framework == 'tailwind') {
+                    $html .= '<Textarea className="form-control kolom_error h-11" id="value-data-kolom_name" readonly
+                        name="kolom_name">kolom_value</Textarea>';
+                } else {
+                    $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" />';
+                if ($framework == 'tailwind') {
+                    $html .= '<Input type="number" className="form-control kolom_error h-11" id="value-data-kolom_name" readonly
+                        name="kolom_name" step="1" value="kolom_value" />';
+                } else {
+                    $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"  />';
+                if ($framework == 'tailwind') {
+                    $html .= '<Input className="form-control kolom_error h-11" id="value-data-kolom_name" readonly
+                        name="kolom_name" value="kolom_value" step="any"  />';
+                } else {
+                    $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" />';
+                if ($framework == 'tailwind') {
+                    $html .= '<Input type="date" className="form-control kolom_error h-11" id="value-data-kolom_name" readonly
+                        name="kolom_name" value="kolom_value" />';
+                } else {
+                    $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" />';
+                if ($framework == 'tailwind') {
+                    $html .= '<Input type="datetime-local" className="form-control kolom_error h-11" id="value-data-kolom_name" readonly
+                        name="kolom_name" value="kolom_value" />';
+                } else {
+                    $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
+                    if ($framework == 'tailwind') {
+                        $html .= '<Input type="text" className="form-control kolom_error h-11" id="value-data-kolom_name" readonly
                             name="kolom_name" value="kolom_value" />';
+                    } else {
+                        $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>';
+                    if ($framework == 'tailwind') {
+                        $html .= '<Select value="kolom_value">
+                            <SelectTrigger className="border-slate-200 focus:ring-emerald-500 rounded-xl h-11 bg-white text-left">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent className="rounded-xl">
+                                <SelectItem value="1" className="rounded-lg">Ya</SelectItem>
+                                <SelectItem value="0" className="rounded-lg">Tidak</SelectItem>
+                            </SelectContent>
+                            </Select>';
+                    } else {
+                        $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>';
+                    if ($framework == 'tailwind') {
+                        $html .= '<Select value="kolom_value">
+                            <SelectTrigger className="border-slate-200 focus:ring-emerald-500 rounded-xl h-11 bg-white text-left">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent className="rounded-xl">
+                                <SelectItem value="1" className="rounded-lg">Ya</SelectItem>
+                                <SelectItem value="0" className="rounded-lg">Tidak</SelectItem>
+                            </SelectContent>
+                            </Select>';
+                    } else {
+                        $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" />';
+                    if ($framework == 'tailwind') {
+                        $html .= '<Input type="text" className="form-control kolom_error h-11" id="value-data-kolom_name" readonly
+                            name="kolom_name" value="kolom_value" />';
+                    } else {
+                        $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>';
+                    if ($framework == 'tailwind') {
+                        $html .= '<Select value="kolom_value" id="value-data-kolom_name" name="kolom_name" className="form-select tipe-foreign_key kolom_error">
+                            <SelectTrigger className="border-slate-200 focus:ring-emerald-500 rounded-xl h-11 bg-white text-left">
+                                <SelectValue />
+                            </SelectTrigger>';
+                        if ($optionsFK && $optionsFK->where('kolom_id', $k->id)->first() != null) {
+                            foreach ($optionsFK->where('kolom_id', $k->id)->first()['options'] as $option) {
+                                $html .= '<SelectContent className="rounded-xl">
+                                    <SelectItem value="'.$option->value.'" className="rounded-lg">'.$option->label.'</SelectItem>
+                                </SelectContent>';
+                            }
                         }
+                        $html .= '</Select>';
+                    } else {
+                        $html .= '<select class="form-select tipe-foreign_key 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>';
                     }
-                    $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>';
+                    if ($framework == 'tailwind') {
+                        $html .= '<Select value="kolom_value" id="value-data-kolom_name" name="kolom_name" className="form-select tipe-foreign_key kolom_error">
+                            <SelectTrigger className="border-slate-200 focus:ring-emerald-500 rounded-xl h-11 bg-white text-left">
+                                <SelectValue />
+                            </SelectTrigger>';
+                        if ($optionsFK && $optionsFK->where('kolom_id', $k->id)->first() != null) {
+                            foreach ($optionsFK->where('kolom_id', $k->id)->first()['options'] as $option) {
+                                $html .= '<SelectContent className="rounded-xl">
+                                    <SelectItem value="'.$option->value.'" className="rounded-lg" '.(old($k->kolom) ?? ($value ? ($value['value_relasi'] == $option->value) : null) ? 'selected' : '') .'>'.$option->label.'</SelectItem>
+                                </SelectContent>';
+                            }
                         }
+                        $html .= '</Select>';
+                    } else {
+                        $html .= '<select class="form-select tipe-foreign_key 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>';
                     }
-                    $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" />';
+                    if ($framework == 'tailwind') {
+                        $html .= '<Input type="text" className="form-control kolom_error h-11" id="value-data-kolom_name" readonly
+                            name="kolom_name" value="kolom_value" />';
+                    } else {
+                        $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>';
+                    if ($framework == 'tailwind') {
+                        $html .= '<Select value="kolom_value" id="value-data-kolom_name" name="kolom_name" className="form-select tipe-enum kolom_error">
+                            <SelectTrigger className="border-slate-200 focus:ring-emerald-500 rounded-xl h-11 bg-white text-left">
+                                <SelectValue />
+                            </SelectTrigger>';
+                        foreach($k->enum_opsi as $opsi) {
+                            $html .= '<SelectContent className="rounded-xl">
+                                <SelectItem value="'.$opsi['value'].'" className="rounded-lg">'.$opsi['label'].'</SelectItem>
+                            </SelectContent>';
+                        }
+                        $html .= '</Select>';
+                    } else {
+                        $html .= '<select class="form-select tipe-enum 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>';
                     }
-                    $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>';
+                    if ($framework == 'tailwind') {
+                        $html .= '<Select value="kolom_value" id="value-data-kolom_name" name="kolom_name" className="form-select tipe-enum kolom_error">
+                            <SelectTrigger className="border-slate-200 focus:ring-emerald-500 rounded-xl h-11 bg-white text-left">
+                                <SelectValue />
+                            </SelectTrigger>';
+                        foreach($k->enum_opsi as $opsi) {
+                            $html .= '<SelectContent className="rounded-xl">
+                                <SelectItem value="'.$opsi['value'].'" className="rounded-lg">'.$opsi['label'].'</SelectItem>
+                            </SelectContent>';
+                        }
+                        $html .= '</Select>';
+                    } else {
+                        $html .= '<select class="form-select tipe-enum 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>';
                     }
-                    $html .= '</select>';
                 }
             }
             else {
-            $html .= '<input type="text" class="form-control kolom_error" id="value-data-kolom_name" readonly
-                name="kolom_name" value="kolom_value" />';
+                if ($framework == 'tailwind') {
+                    $html .= '<Input type="text" className="form-control kolom_error h-11" id="value-data-kolom_name" readonly
+                        name="kolom_name" value="kolom_value" />';
+                } 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)
diff --git a/app/Models/Program/Aktivitas.php b/app/Models/Program/Aktivitas.php
index 4e471d0..47cd02d 100644
--- a/app/Models/Program/Aktivitas.php
+++ b/app/Models/Program/Aktivitas.php
@@ -23,6 +23,9 @@ class Aktivitas extends Model
         "indikator",
         "deskripsi",
         "transformasi_id",
+        "parent_id",
+        "created_by",
+        "updated_by"
     ];
 
     public function transformasi(): BelongsTo
@@ -32,6 +35,20 @@ class Aktivitas extends Model
 
     public function target(): HasMany
     {
-        return $this->hasMany(Target::class, 'aktivitas_id', 'id');
+        return $this->hasMany(Target::class, 'aktivitas_id', 'id')
+            ->orderBy('id', 'asc');
+    }
+
+    public function parent(): BelongsTo
+    {
+        return $this->belongsTo(Aktivitas::class, 'parent_id', 'id');
+    }
+
+    public function aktivitas(): HasMany
+    {
+        return $this->hasMany(Aktivitas::class, 'parent_id', 'id')
+            ->where('jenis_aktivitas', 'aktivitas')
+            ->orderBy('kode', 'asc')
+            ->orderBy('id', 'asc');
     }
 }
diff --git a/app/Models/Program/Framework.php b/app/Models/Program/Framework.php
index 5740a89..e7d1d2a 100644
--- a/app/Models/Program/Framework.php
+++ b/app/Models/Program/Framework.php
@@ -20,6 +20,8 @@ class Framework extends Model
         "nama",
         "tahun",
         "program_id",
+        "created_by",
+        "updated_by",
     ];
 
     public function program(): BelongsTo
@@ -29,6 +31,8 @@ class Framework extends Model
 
     public function transformasi(): HasMany
     {
-        return $this->hasMany(Transformasi::class, 'framework_id', 'id');
+        return $this->hasMany(Transformasi::class, 'framework_id', 'id')
+            ->orderBy('kode', 'asc')
+            ->orderBy('id', 'asc');
     }
 }
diff --git a/app/Models/Program/Realisasi.php b/app/Models/Program/Realisasi.php
new file mode 100644
index 0000000..ba56efa
--- /dev/null
+++ b/app/Models/Program/Realisasi.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Models\Program;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+use App\Models\Program\Target;
+
+class Realisasi extends Model
+{
+    use SoftDeletes;
+
+    protected $table = 'program_realisasi';
+
+    protected $fillable = [
+        "target_id",
+        "realisasi_integer",
+        "realisasi_float",
+        "realisasi_boolean",
+        "created_by",
+        "updated_by",
+        "deleted_by",
+    ];
+
+    public function target(): BelongsTo
+    {
+        return $this->belongsTo(Target::class, 'target_id', 'id');
+    }
+
+    public function verifikasi(): HasMany
+    {
+        return $this->hasMany(Verifikasi::class, 'realisasi_id', 'id')->oldest();
+    }
+}
diff --git a/app/Models/Program/Target.php b/app/Models/Program/Target.php
index a1a791a..8bf0f80 100644
--- a/app/Models/Program/Target.php
+++ b/app/Models/Program/Target.php
@@ -5,6 +5,8 @@ namespace App\Models\Program;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\HasOne;
 
 use App\Models\Program\Aktivitas;
 
@@ -27,10 +29,25 @@ class Target extends Model
         "realisasi_float",
         "realisasi_boolean",
         "aktivitas_id",
+        "tipe_realisasi", 
+        "value_query",
+        "created_by",
+        "updated_by",
+        "deleted_by",
     ];
 
     public function aktivitas(): BelongsTo
     {
         return $this->belongsTo(Aktivitas::class, 'aktivitas_id', 'id');
     }
+
+    public function realisasi(): HasMany
+    {
+        return $this->hasMany(Realisasi::class, 'target_id', 'id')->latest();
+    }
+
+    public function latestRealisasi(): HasOne
+    {
+        return $this->hasOne(Realisasi::class, 'target_id', 'id')->latest();
+    }
 }
diff --git a/app/Models/Program/Transformasi.php b/app/Models/Program/Transformasi.php
index 9e2bd68..504c5f8 100644
--- a/app/Models/Program/Transformasi.php
+++ b/app/Models/Program/Transformasi.php
@@ -27,8 +27,12 @@ class Transformasi extends Model
         return $this->belongsTo(Framework::class, 'framework_id', 'id');
     }
 
-    public function aktivitas(): HasMany
+    public function tujuan(): HasMany
     {
-        return $this->hasMany(Aktivitas::class, 'transformasi_id', 'id');
+        return $this->hasMany(Aktivitas::class, 'transformasi_id', 'id')
+            ->whereNull('parent_id')
+            ->where('jenis_aktivitas', 'tujuan')
+            ->orderBy('kode', 'asc')
+            ->orderBy('id', 'asc');
     }
 }
diff --git a/app/Models/Program/Verifikasi.php b/app/Models/Program/Verifikasi.php
new file mode 100644
index 0000000..837e48b
--- /dev/null
+++ b/app/Models/Program/Verifikasi.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models\Program;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+use App\Models\Program\Realisasi;
+
+class Verifikasi extends Model
+{
+    use SoftDeletes;
+
+    protected $table = 'program_verifikasi';
+
+    protected $fillable = [
+        "realisasi_id",
+        "dokumen",
+        "link_dokumen",
+        "created_by",
+        "updated_by",
+        "deleted_by",
+    ];
+
+    public function realisasi(): BelongsTo
+    {
+        return $this->belongsTo(Realisasi::class, 'realisasi_id', 'id');
+    }
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index d1ccde5..d8209f0 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -67,7 +67,9 @@ class AppServiceProvider extends ServiceProvider
         });
 
         View::composer('*', function ($view) {
-            $tabel_menu = TabelBasisData::has('kolom')->get();
+            $tabel_menu = TabelBasisData::whereHas('kolom', function ($query) {
+                $query->where('is_active', true);
+            })->get();
 
             $view->with('tabel_menu', $tabel_menu);
         });
diff --git a/database/migrations/2026_05_15_161421_update_frameworks_table.php b/database/migrations/2026_05_15_161421_update_frameworks_table.php
new file mode 100644
index 0000000..dc94b1b
--- /dev/null
+++ b/database/migrations/2026_05_15_161421_update_frameworks_table.php
@@ -0,0 +1,36 @@
+<?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::table('program_aktivitas', function (Blueprint $table) {
+            $table->foreignId('parent_id')->nullable()->constrained('program_aktivitas')->nullOnDelete();
+        });
+
+        Schema::table('program_target', function (Blueprint $table) {
+           $table->enum('tipe_realisasi', ['manual', 'referensi'])->default('manual'); 
+           $table->text('value_query')->nullable();
+        });
+
+        Schema::table('program_verifikasi', function (Blueprint $table) {
+            $table->foreignId('realisasi_id')->nullable()->constrained('program_realisasi')->nullOnDelete();
+            $table->dropColumn('aktivitas_id');
+        }); 
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        
+    }
+};
\ 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 c75a269..d66c836 100644
--- a/resources/views/ekosistem/value-basis-data/add.blade.php
+++ b/resources/views/ekosistem/value-basis-data/add.blade.php
@@ -27,7 +27,7 @@
 <script>
     'use strict';
     $(document).ready(function () {
-        $('#add-data-program,.tipe-boolean, .tipe-fk').select2();
+        $('#add-data-program,.tipe-boolean, .tipe-foreign_key, .tipe-enum').select2();
 
         $('#addNewDataForm').validate({
             rules: {
diff --git a/resources/views/program/aktivitas/add.blade.php b/resources/views/program/aktivitas/add-aktivitas.blade.php
similarity index 85%
rename from resources/views/program/aktivitas/add.blade.php
rename to resources/views/program/aktivitas/add-aktivitas.blade.php
index dcf4a96..21ddf34 100644
--- a/resources/views/program/aktivitas/add.blade.php
+++ b/resources/views/program/aktivitas/add-aktivitas.blade.php
@@ -12,10 +12,12 @@
             aria-label="Tutup"></button>
     </div>
     <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
-        <form class="add-new-aktivitas pt-0" id="addNewAktivitasForm" action="{{ route('framework.transformasi.aktivitas.store', [$framework->id, ':transformasiId']) }}" method="POST">
+        <form class="pt-0" id="addNewAktivitasForm" action="{{ route('framework.transformasi.aktivitas.store', [$framework->id, ':transformasiId']) }}" method="POST">
             @csrf
 
             <input type="hidden" id="add-aktivitas-transformasi-id" name="transformasi_id"/>
+            <input type="hidden" id="add-aktivitas-jenis" name="jenis_aktivitas" value="aktivitas"/>    
+            <input type="hidden" id="add-aktivitas-parent_id" name="parent_id"/>
             
             <div class="mb-6 form-control-validation">
                 <label class="form-label" for="add-aktivitas-kode">Kode<span class="text-danger">*</span></label>
@@ -25,13 +27,6 @@
                 <label class="form-label" for="add-aktivitas-nama">Aktivitas<span class="text-danger">*</span></label>
                 <input type="text" class="form-control" id="add-aktivitas-nama" name="nama" placeholder="Cth: Aktivitas" />
             </div>
-            <div class="mb-6 form-control-validation">
-                <label class="form-label" for="add-aktivitas-jenis">Jenis Aktivitas<span class="text-danger">*</span></label>
-                <select class="form-select" id="add-aktivitas-jenis" name="jenis_aktivitas">
-                    <option value="tujuan">Tujuan Jangka Pendek</option>
-                    <option value="aktivitas">Aktivitas</option>
-                </select>
-            </div>
             <div class="mb-6 form-control-validation">
                 <label class="form-label" for="add-aktivitas-indikator">Indikator<span class="text-danger">*</span></label>
                 <input type="text" class="form-control" id="add-aktivitas-indikator" name="indikator" placeholder="Cth: Indikator" />
@@ -54,7 +49,15 @@
         $(".add-aktivitas").click(function () {
             const id = $(this).data('id');
             console.log('Add aktivitas, transformasi id: ' + id);
+            const parentId = $(this).data('parent-id');
             $('#add-aktivitas-transformasi-id').val(id);
+            console.log('Add aktivitas, parent id: ' + parentId);
+            $('#add-aktivitas-parent_id').val(parentId);
+
+            const addForm = $('#addNewAktivitasForm');
+            addForm.validate().resetForm();
+            addForm.find('.is-invalid').removeClass('is-invalid');
+
             offcanvasAddAktivitas.show();
         });
         $('#addNewAktivitasForm').validate({
diff --git a/resources/views/program/aktivitas/add-tujuan.blade.php b/resources/views/program/aktivitas/add-tujuan.blade.php
new file mode 100644
index 0000000..e2b475b
--- /dev/null
+++ b/resources/views/program/aktivitas/add-tujuan.blade.php
@@ -0,0 +1,106 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasAddTujuan"
+    aria-labelledby="offcanvasAddTujuanLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasAddTujuanLabel" class="offcanvas-title">Tambah Tujuan</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="addNewTujuanForm" action="{{ route('framework.transformasi.aktivitas.store', [$framework->id, ':transformasiId']) }}" method="POST">
+            @csrf
+
+            <input type="hidden" id="add-tujuan-transformasi-id" name="transformasi_id"/>
+            <input type="hidden" id="add-tujuan-jenis" name="jenis_aktivitas" value="tujuan"/>    
+            
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-tujuan-kode">Kode<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="add-tujuan-kode" name="kode" placeholder="Cth: AK1" />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-tujuan-nama">Tujuan Jangka Pendek<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="add-tujuan-nama" name="nama" placeholder="Cth: Tujuan Jangka Pendek" />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-tujuan-indikator">Indikator<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="add-tujuan-indikator" name="indikator" placeholder="Cth: Indikator" />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-tujuan-deskripsi">Deskripsi<span class="text-danger">*</span></label>
+                <textarea class="form-control" id="add-tujuan-deskripsi" name="deskripsi" placeholder="Cth: Deskripsi"></textarea>
+            </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 offcanvasAddTujuan = new bootstrap.Offcanvas(document.getElementById('offcanvasAddTujuan'));
+        $(".add-tujuan").click(function () {
+            const id = $(this).data('id');
+            console.log('Add tujuan, transformasi id: ' + id);
+            $('#add-aktivitas-transformasi-id').val(id);
+
+            const addForm = $('#addNewTujuanForm');
+            addForm.validate().resetForm();
+            addForm.find('.is-invalid').removeClass('is-invalid');
+
+            // $.get("{{ route('framework.transformasi.show', [$framework->id, ':id']) }}".replace(':id', id), function (res) {
+            //     if (res.status === 'success') {
+            //         for(let i = 0; i < res.data.aktivitas.length; i++) {
+            //             $('#add-aktivitas-parent_id').append(`<option value="${res.data.aktivitas[i].id}">${res.data.aktivitas[i].nama}</option>`);
+            //         }
+            //     }
+            // });
+
+            offcanvasAddTujuan.show();
+        });
+        $('#addNewTujuanForm').validate({
+            rules: {
+                kode: { required: true },
+                nama: { required: true }
+            },
+            messages: {
+                kode: { required: "Kode tujuan wajib diisi" },
+                nama: { required: "Tujuan wajib diisi" }
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action').replace(':transformasiId', $('#add-aktivitas-transformasi-id').val()),
+                    type: 'POST',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasAddTujuan.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/program/aktivitas/edit.blade.php b/resources/views/program/aktivitas/edit-aktivitas.blade.php
similarity index 92%
rename from resources/views/program/aktivitas/edit.blade.php
rename to resources/views/program/aktivitas/edit-aktivitas.blade.php
index ac3e5ac..b8d7a44 100644
--- a/resources/views/program/aktivitas/edit.blade.php
+++ b/resources/views/program/aktivitas/edit-aktivitas.blade.php
@@ -18,6 +18,8 @@
 
             <input type="hidden" id="update-aktivitas-transformasi-id" name="transformasi_id"/>
             <input type="hidden" id="update-aktivitas-id" name="id"/>
+            <input type="hidden" id="update-aktivitas-jenis" name="jenis_aktivitas" value="aktivitas"/>
+            <input type="hidden" id="update-aktivitas-parent_id" name="parent_id"/>
 
             <div class="mb-6 form-control-validation">
                 <label class="form-label" for="update-aktivitas-kode">Kode<span class="text-danger">*</span></label>
@@ -27,13 +29,6 @@
                 <label class="form-label" for="update-aktivitas-nama">Aktivitas<span class="text-danger">*</span></label>
                 <input type="text" class="form-control" id="update-aktivitas-nama" name="nama" placeholder="Cth: Aktivitas" />
             </div>
-            <div class="mb-6 form-control-validation">
-                <label class="form-label" for="update-aktivitas-jenis">Jenis Aktivitas<span class="text-danger">*</span></label>
-                <select class="form-select" id="update-aktivitas-jenis" name="jenis_aktivitas">
-                    <option value="tujuan">Tujuan Jangka Pendek</option>
-                    <option value="aktivitas">Aktivitas</option>
-                </select>
-            </div>
             <div class="mb-6 form-control-validation">
                 <label class="form-label" for="update-aktivitas-indikator">Indikator<span class="text-danger">*</span></label>
                 <input type="text" class="form-control" id="update-aktivitas-indikator" name="indikator" placeholder="Cth: Indikator" />
@@ -72,6 +67,7 @@
                     $('#update-aktivitas-jenis').val(res.data.jenis_aktivitas);
                     $('#update-aktivitas-indikator').val(res.data.indikator);
                     $('#update-aktivitas-deskripsi').val(res.data.deskripsi);
+                    $('#update-aktivitas-parent_id').val(res.data.parent_id);
                     offcanvasUpdateAktivitas.show();
                 }
             });
diff --git a/resources/views/program/aktivitas/edit-tujuan.blade.php b/resources/views/program/aktivitas/edit-tujuan.blade.php
new file mode 100644
index 0000000..fe8449a
--- /dev/null
+++ b/resources/views/program/aktivitas/edit-tujuan.blade.php
@@ -0,0 +1,112 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasUpdateTujuan"
+    aria-labelledby="offcanvasUpdateTujuanLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasUpdateTujuanLabel" class="offcanvas-title">Update Tujuan</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="updateTujuanForm" action="{{ route('framework.transformasi.aktivitas.update', [$framework->id, ':transformasiId', ':id']) }}" method="POST">
+            @csrf
+            @method('PUT')
+
+            <input type="hidden" id="update-tujuan-transformasi-id" name="transformasi_id"/>
+            <input type="hidden" id="update-tujuan-id" name="id"/>
+            <input type="hidden" id="update-tujuan-jenis" name="jenis_aktivitas" value="tujuan"/>
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="update-tujuan-kode">Kode<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="update-tujuan-kode" name="kode" placeholder="Cth: AK1" />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="update-tujuan-nama">Aktivitas<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="update-tujuan-nama" name="nama" placeholder="Cth: Aktivitas" />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="update-tujuan-indikator">Indikator<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="update-tujuan-indikator" name="indikator" placeholder="Cth: Indikator" />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="update-tujuan-deskripsi">Deskripsi<span class="text-danger">*</span></label>
+                <textarea class="form-control" id="update-tujuan-deskripsi" name="deskripsi" placeholder="Cth: Deskripsi"></textarea>
+            </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 offcanvasUpdateTujuan = new bootstrap.Offcanvas(document.getElementById('offcanvasUpdateTujuan'));
+        $(".edit-tujuan").click(function () {
+            const id = $(this).data('id');
+            const transformasiId = $(this).data('transformasi-id');
+            console.log('Update aktivitas, aktivitas id: ' + id + ', transformasi id: ' + transformasiId);
+            $('#update-tujuan-id').val(id);
+            $('#update-tujuan-transformasi-id').val(transformasiId);
+
+            const editForm = $('#updateTujuanForm');
+            editForm.validate().resetForm();
+            editForm.find('.is-invalid').removeClass('is-invalid');
+
+            $.get("{{ route('framework.transformasi.aktivitas.show', [$framework->id, ':transformasiId', ':id']) }}"
+                .replace(':transformasiId', transformasiId).replace(':id', id), function (res) {
+                if (res.status === 'success') {
+                    $('#update-tujuan-kode').val(res.data.kode);
+                    $('#update-tujuan-nama').val(res.data.nama);
+                    $('#update-tujuan-jenis').val(res.data.jenis_aktivitas);
+                    $('#update-tujuan-indikator').val(res.data.indikator);
+                    $('#update-tujuan-deskripsi').val(res.data.deskripsi);
+                    offcanvasUpdateTujuan.show();
+                }
+            });
+        });
+        $('#updateTujuanForm').validate({
+            rules: {
+                kode: { required: true },
+                nama: { required: true }
+            },
+            messages: {
+                kode: { required: "Kode tujuan wajib diisi" },
+                nama: { required: "Tujuan wajib diisi" }
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action').replace(':transformasiId', $('#update-tujuan-transformasi-id').val()).replace(':id', $('#update-tujuan-id').val()),
+                    type: 'POST',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasUpdateTujuan.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/program/framework/view-aktivitas.blade.php b/resources/views/program/framework/view-aktivitas.blade.php
new file mode 100644
index 0000000..a8afbef
--- /dev/null
+++ b/resources/views/program/framework/view-aktivitas.blade.php
@@ -0,0 +1,74 @@
+                                    @forelse($tujuan->aktivitas as $aktivitas)
+                                    @forelse($aktivitas->target as $targetAktivitas)
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }} (ID: {{ $transformasi->id }})</span></td>
+                                        <td><span class="{{ $aktivitas->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $aktivitas->kode }} {{ $aktivitas->nama }} (ID: {{ $aktivitas->id }})</span></td>
+                                        <td><span class="text-muted">{{ $aktivitas->deskripsi }}</span></td>
+                                        <td><span class="text-muted">{{ $aktivitas->indikator }}</span></td>
+                                        <td><span class="text-muted">{{ $targetAktivitas->variabel }} (ID: {{ $targetAktivitas->id }}, Tipe: {{ $targetAktivitas->tipe }}, Realiasasi: {{ $targetAktivitas->tipe_realisasi }})</span></td>
+                                        <td>
+                                            @if($targetAktivitas->tipe === 'integer')
+                                                <span class="text-muted">{{ $targetAktivitas->target_integer }}</span>
+                                            @elseif($targetAktivitas->tipe === 'float')
+                                                <span class="text-muted">{{ $targetAktivitas->target_float }}</span>
+                                            @elseif($targetAktivitas->tipe === 'boolean')
+                                                <span class="text-muted">{{ $targetAktivitas->target_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                        </td>
+                                        <td>
+                                            @if($targetAktivitas->tipe === 'integer')
+                                                <span class="text-muted">{{ $targetAktivitas->baseline_integer }}</span>
+                                            @elseif($targetAktivitas->tipe === 'float')
+                                                <span class="text-muted">{{ $targetAktivitas->baseline_float }}</span>
+                                            @elseif($targetAktivitas->tipe === 'boolean')
+                                                <span class="text-muted">{{ $targetAktivitas->baseline_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                        </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">
+                                                    <!-- aktivitas --> 
+                                                    <a class="dropdown-item add-aktivitas" href="javascript:void(0);" data-id="{{ $transformasi->id }}" data-parent-id="{{ $tujuan->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Aktivitas</a>
+                                                    <a class="dropdown-item edit-aktivitas" href="javascript:void(0);" data-id="{{ $aktivitas->id }}" data-tujuan-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit 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 Aktivitas</a>
+                                                    <hr/>
+                                                    <a class="dropdown-item add-target" href="javascript:void(0);" data-id="{{ $targetAktivitas->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Target</a>
+                                                    <a class="dropdown-item edit-target" href="javascript:void(0);" data-id="{{ $targetAktivitas->id }}" data-aktivitas-id="{{ $targetAktivitas->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Target</a>
+                                                    <a class="dropdown-item delete-target" href="javascript:void(0);" data-id="{{ $targetAktivitas->id }}" data-aktivitas-id="{{ $targetAktivitas->id }}" data-transformasi-id="{{ $transformasi->id }}" data-nama="{{ $targetAktivitas->variabel }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Target</a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    @empty
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }} (ID: {{ $transformasi->id }})</span></td>
+                                        <td><span class="{{ $aktivitas->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $aktivitas->kode }} {{ $aktivitas->nama }} (ID: {{ $aktivitas->id }})</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">
+                                                    <!-- aktivitas --> 
+                                                    <a class="dropdown-item add-aktivitas" href="javascript:void(0);" data-id="{{ $transformasi->id }}" data-parent-id="{{ $tujuan->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Aktivitas</a>
+                                                    <a class="dropdown-item edit-aktivitas" href="javascript:void(0);" data-id="{{ $aktivitas->id }}" data-tujuan-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit 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 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 
+                                    @endforelse
+                                    <!-- endforelse tujuan -->
\ No newline at end of file
diff --git a/resources/views/program/framework/view-tujuan.blade.php b/resources/views/program/framework/view-tujuan.blade.php
new file mode 100644
index 0000000..4c0f0c5
--- /dev/null
+++ b/resources/views/program/framework/view-tujuan.blade.php
@@ -0,0 +1,109 @@
+                                    @forelse($transformasi->tujuan as $tujuan)
+                                    @forelse($tujuan->target as $target)
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }} (ID: {{ $transformasi->id }})</span></td>
+                                        <td><span class="{{ $tujuan->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $tujuan->kode }} {{ $tujuan->nama }} (ID: {{ $tujuan->id }})</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->deskripsi }}</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->indikator }}</span></td>
+                                        <td><span class="text-muted">{{ $target->variabel }} (ID: {{ $target->id }}, Tipe: {{ $target->tipe }}, Realiasasi: {{ $target->tipe_realisasi }})</span></td>
+                                        <td>
+                                            @if($target->tipe === 'integer')
+                                                <span class="text-muted">{{ $target->target_integer }}</span>
+                                            @elseif($target->tipe === 'float')
+                                                <span class="text-muted">{{ $target->target_float }}</span>
+                                            @elseif($target->tipe === 'boolean')
+                                                <span class="text-muted">{{ $target->target_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                        </td>
+                                        <td>
+                                            @if($target->tipe === 'integer')
+                                                <span class="text-muted">{{ $target->baseline_integer }}</span>
+                                            @elseif($target->tipe === 'float')
+                                                <span class="text-muted">{{ $target->baseline_float }}</span>
+                                            @elseif($target->tipe === 'boolean')
+                                                <span class="text-muted">{{ $target->baseline_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                        </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/>
+                                                    <!-- tujuan -->
+                                                    <a class="dropdown-item add-tujuan" href="javascript:void(0);" data-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Tujuan</a>
+                                                    <a class="dropdown-item edit-tujuan" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Tujuan</a>
+                                                    <a class="dropdown-item delete-tujuan" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}" data-nama="{{ $tujuan->nama }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Tujuan</a>
+                                                    <hr/>
+                                                    <!-- aktivitas --> 
+                                                    <a class="dropdown-item add-aktivitas" href="javascript:void(0);" data-id="{{ $transformasi->id }}" data-parent-id="{{ $tujuan->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Aktivitas</a>
+                                                    <hr/>
+                                                    <a class="dropdown-item add-target" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Target</a>
+                                                    <a class="dropdown-item edit-target" href="javascript:void(0);" data-id="{{ $target->id }}" data-aktivitas-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Target</a>
+                                                    <a class="dropdown-item delete-target" href="javascript:void(0);" data-id="{{ $target->id }}" data-aktivitas-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}" data-nama="{{ $target->variabel }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Target</a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    @empty
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }} (ID: {{ $transformasi->id }})</span></td>
+                                        <td><span class="{{ $tujuan->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $tujuan->kode }} {{ $tujuan->nama }} (ID: {{ $tujuan->id }})</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->deskripsi }}</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->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/>
+                                                    <!-- tujuan -->
+                                                    <a class="dropdown-item add-tujuan" href="javascript:void(0);" data-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Tujuan</a>
+                                                    <a class="dropdown-item edit-tujuan" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Tujuan</a>
+                                                    <a class="dropdown-item delete-tujuan" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}" data-nama="{{ $tujuan->nama }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Tujuan</a>
+                                                    <hr/>
+                                                    <!-- aktivitas --> 
+                                                    <a class="dropdown-item add-aktivitas" href="javascript:void(0);" data-id="{{ $transformasi->id }}" data-parent-id="{{ $tujuan->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Aktivitas</a>
+                                                    <hr/>
+                                                    <a class="dropdown-item add-target" href="javascript:void(0);" data-id="{{ $tujuan->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 -->
+                                    @include('program.framework.view-aktivitas')
+                                    @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-tujuan" href="javascript:void(0);" data-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Tujuan</a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    @endforelse
+                                    <!-- endforelse tujuan -->
\ No newline at end of file
diff --git a/resources/views/program/framework/view.blade copy.php b/resources/views/program/framework/view.blade copy.php
new file mode 100644
index 0000000..ee5ff29
--- /dev/null
+++ b/resources/views/program/framework/view.blade copy.php	
@@ -0,0 +1,296 @@
+@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">Lihat Kerangka Kerja</h5>
+        </div>
+        
+        <div class="card-body">
+            <form id="viewFrameworkForm">
+                @csrf
+                
+                <h6 class="mb-3">Informasi Kerangka Kerja</h6>
+                <div class="row">
+                    <div class="col-md-3 mb-4 form-control-validation">
+                        <label class="form-label" for="update-framework-nama">Nama Kerangka Kerja<span class="text-danger">*</span></label>
+                        <input type="text" class="form-control" id="update" name="nama" placeholder="Cth: Tabel Pertanian" value="{{ old('nama', $framework->nama) }}"  readonly/>
+                    </div>
+                    <div class="col-md-3 mb-4 form-control-validation">
+                        <label class="form-label" for="update-framework-tahun">Tahun Implementasi<span class="text-danger">*</span></label>
+                        <input type="number" step="1" min="2026" class="form-control" id="update-framework-tahun" name="tahun" placeholder="Cth: 2023" value="{{ old('tahun', $framework->tahun) ?? now()->year }}" readonly/>
+                    </div>
+                    <div class="col-md-6 mb-4 form-control-validation">
+                        <label class="form-label" for="update-framework-program">Untuk Program<span class="text-danger">*</span></label>
+                        <input type="text" class="form-control" id="update-framework-tahun" name="tahun" placeholder="Cth: 2023" value="{{ old('program_id', $framework->program->nama) }}" readonly/>
+                    </div>
+                </div>
+
+                <h6 class="mb-3">Informasi Rencana Kerja</h6>
+
+                <hr class="my-4 mx-n4" />
+                <div class="row mb-4">
+                    <div class="col-md-auto d-flex gap-2">
+                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddTransformasi" >
+                            <i class="ti tabler-plus me-1"></i> Tambah Transformasi
+                        </button>
+                    </div>
+                </div>
+
+                <div class="row mb-4">
+                    <div class="col-md-12 mb-4 form-control-validation">
+                        
+                        <div class="table-responsive text-nowrap mb-4">
+                            <table class="table table-hover">
+                                <thead class="border-top">
+                                    <tr>
+                                        <th>Transformasi</th>
+                                        <th>Tujuan Jangka Pendek/Aktivitas</th>
+                                        <th>Deskripsi</th>
+                                        <th>Indikator</th>
+                                        <th>Variabel</th>
+                                        <th>Target</th>
+                                        <th>Baseline</th>
+                                        <th>Aksi</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    @forelse($framework->transformasi as $transformasi)
+                                    @forelse($transformasi->tujuan as $tujuan)
+                                    @forelse($tujuan->target as $target)
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }}</span></td>
+                                        <td><span class="{{ $tujuan->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $tujuan->nama }}</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->deskripsi }}</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->indikator }}</span></td>
+                                        <td><span class="text-muted">{{ $target->variabel }}</span></td>
+                                        <td>
+                                            @if($target->tipe === 'integer')
+                                                <span class="text-muted">{{ $target->target_integer }}</span>
+                                            @elseif($target->tipe === 'float')
+                                                <span class="text-muted">{{ $target->target_float }}</span>
+                                            @elseif($target->tipe === 'boolean')
+                                                <span class="text-muted">{{ $target->target_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                        </td>
+                                        <td>
+                                            @if($target->tipe === 'integer')
+                                                <span class="text-muted">{{ $target->baseline_integer }}</span>
+                                            @elseif($target->tipe === 'float')
+                                                <span class="text-muted">{{ $target->baseline_float }}</span>
+                                            @elseif($target->tipe === 'boolean')
+                                                <span class="text-muted">{{ $target->baseline_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                        </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/>
+                                                    <!-- tujuan -->
+                                                    <a class="dropdown-item add-tujuan" href="javascript:void(0);" data-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Tujuan</a>
+                                                    <a class="dropdown-item edit-tujuan" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Tujuan</a>
+                                                    <a class="dropdown-item delete-tujuan" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}" data-nama="{{ $tujuan->nama }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Tujuan</a>
+                                                    <hr/>
+                                                    <!-- aktivitas --> 
+                                                    <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 Aktivitas</a>
+                                                    <a class="dropdown-item edit-aktivitas" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Aktivitas</a>
+                                                    <a class="dropdown-item delete-aktivitas" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}" data-nama="{{ $tujuan->nama }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Aktivitas</a>
+                                                    <hr/>
+                                                    <a class="dropdown-item add-target" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Target</a>
+                                                    <a class="dropdown-item edit-target" href="javascript:void(0);" data-id="{{ $target->id }}" data-tujuan-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Target</a>
+                                                    <a class="dropdown-item delete-target" href="javascript:void(0);" data-id="{{ $target->id }}" data-tujuan-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}" data-nama="{{ $target->variabel }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Target</a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    @empty
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }}</span></td>
+                                        <td><span class="{{ $tujuan->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $tujuan->nama }}</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->deskripsi }}</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->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-tujuan" href="javascript:void(0);" data-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Tujuan</a>
+                                                    <a class="dropdown-item edit-tujuan" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Tujuan</a>
+                                                    <a class="dropdown-item delete-tujuan" href="javascript:void(0);" data-id="{{ $tujuan->id }}" data-transformasi-id="{{ $transformasi->id }}" data-nama="{{ $tujuan->nama }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Tujuan</a>
+                                                    <hr/>
+                                                    <a class="dropdown-item add-target" href="javascript:void(0);" data-id="{{ $tujuan->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-tujuan" href="javascript:void(0);" data-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-plus me-1"></i> Tambah Tujuan</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>
+
+                    </div>
+                </div>
+
+                <div class="mt-4 text-end">
+                    <a href="{{ route('framework.index') }}" class="btn btn-label-secondary me-2">Kembali</a>
+                </div>
+            </form>
+        </div>
+    </div>
+    @include('program.transformasi.add')
+    @include('program.transformasi.edit')
+    @include('program.aktivitas.add-tujuan')
+    @include('program.aktivitas.edit')
+    @include('program.target.add')
+</div>
+@endsection
+
+@push('scripts')
+<script>
+    'use strict';
+    $(document).ready(function () {
+
+        $(".delete-transformasi").click(function (e) {
+            e.preventDefault();
+            const id = $(this).data('id');
+            const name = $(this).data('nama');
+
+            Swal.fire({
+                title: 'Hapus?',
+                text: `Transformasi ${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('framework.transformasi.destroy', [$framework->id, ':id']) }}".replace(':id', id),
+                        type: 'DELETE',
+                        data: {
+                            _token: '{{ csrf_token() }}'
+                        },
+                        success: function () {
+                            Swal.fire({ icon: 'success', title: 'Terhapus!', showConfirmButton: false, timer: 1500 })
+                                .then(() => window.location.reload());
+                        }
+                    });
+                }
+            });
+        });
+
+        $(".delete-aktivitas").click(function (e) {
+            e.preventDefault();
+            const id = $(this).data('id');
+            const transformasiId = $(this).data('transformasi-id');
+            const name = $(this).data('nama');
+
+            Swal.fire({
+                title: 'Hapus?',
+                text: `Tujuan/Aktivitas ${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('framework.transformasi.aktivitas.destroy', [$framework->id, ':transformasiId', ':id']) }}"
+                            .replace(':transformasiId', transformasiId).replace(':id', id),
+                        type: 'DELETE',
+                        data: {
+                            _token: '{{ csrf_token() }}'
+                        },
+                        success: function () {
+                            Swal.fire({ icon: 'success', title: 'Terhapus!', showConfirmButton: false, timer: 1500 })
+                                .then(() => window.location.reload());
+                        }
+                    });
+                }
+            });
+        });
+
+        $(".delete-target").click(function (e) {
+            e.preventDefault();
+            const id = $(this).data('id');
+            const aktivitasId = $(this).data('aktivitas-id');
+            const transformasiId = $(this).data('transformasi-id');
+            const name = $(this).data('nama');
+
+            Swal.fire({
+                title: 'Hapus?',
+                text: `Target ${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('framework.transformasi.aktivitas.target.destroy', [$framework->id, ':transformasiId', ':aktivitasId', ':id']) }}"
+                            .replace(':transformasiId', transformasiId)
+                            .replace(':aktivitasId', aktivitasId)
+                            .replace(':id', id),
+                        type: 'DELETE',
+                        data: {
+                            _token: '{{ csrf_token() }}'
+                        },
+                        success: function () {
+                            Swal.fire({ icon: 'success', title: 'Terhapus!', showConfirmButton: false, timer: 1500 })
+                                .then(() => window.location.reload());
+                        }
+                    });
+                }
+            });
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/program/framework/view.blade.php b/resources/views/program/framework/view.blade.php
index ab94244..b5445a1 100644
--- a/resources/views/program/framework/view.blade.php
+++ b/resources/views/program/framework/view.blade.php
@@ -57,106 +57,7 @@
                                 </thead>
                                 <tbody>
                                     @forelse($framework->transformasi as $transformasi)
-                                    @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>
-                                        <td><span class="text-muted">{{ $aktivitas->deskripsi }}</span></td>
-                                        <td><span class="text-muted">{{ $aktivitas->indikator }}</span></td>
-                                        <td><span class="text-muted">{{ $target->variabel }}</span></td>
-                                        <td>
-                                            @if($target->tipe === 'integer')
-                                                <span class="text-muted">{{ $target->target_integer }}</span>
-                                            @elseif($target->tipe === 'float')
-                                                <span class="text-muted">{{ $target->target_float }}</span>
-                                            @elseif($target->tipe === 'boolean')
-                                                <span class="text-muted">{{ $target->target_boolean ? 'Ya' : 'Tidak' }}</span>
-                                            @endif
-                                        </td>
-                                        <td>
-                                            @if($target->tipe === 'integer')
-                                                <span class="text-muted">{{ $target->baseline_integer }}</span>
-                                            @elseif($target->tipe === 'float')
-                                                <span class="text-muted">{{ $target->baseline_float }}</span>
-                                            @elseif($target->tipe === 'boolean')
-                                                <span class="text-muted">{{ $target->baseline_boolean ? 'Ya' : 'Tidak' }}</span>
-                                            @endif
-                                        </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>
-                                                    <a class="dropdown-item edit-target" href="javascript:void(0);" data-id="{{ $target->id }}" data-aktivitas-id="{{ $aktivitas->id }}" data-transformasi-id="{{ $transformasi->id }}"><i class="icon-base ti tabler-edit me-1"></i> Edit Target</a>
-                                                    <a class="dropdown-item delete-target" href="javascript:void(0);" data-id="{{ $target->id }}" data-aktivitas-id="{{ $aktivitas->id }}" data-transformasi-id="{{ $transformasi->id }}" data-nama="{{ $target->variabel }}"><i class="icon-base ti tabler-trash me-1"></i> Hapus Target</a>
-                                                </div>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                    @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 -->
+                                    @include('program.framework.view-tujuan')
                                     @empty
                                     <tr>
                                         <td colspan="4" class="text-center py-4">Tidak ada data ditemukan.</td>
@@ -178,9 +79,12 @@
     </div>
     @include('program.transformasi.add')
     @include('program.transformasi.edit')
-    @include('program.aktivitas.add')
-    @include('program.aktivitas.edit')
+    @include('program.aktivitas.add-tujuan')
+    @include('program.aktivitas.add-aktivitas')
+    @include('program.aktivitas.edit-tujuan')
+    @include('program.aktivitas.edit-aktivitas')
     @include('program.target.add')
+    @include('program.target.edit')
 </div>
 @endsection
 
diff --git a/resources/views/program/realisasi/add.blade.php b/resources/views/program/realisasi/add.blade.php
new file mode 100644
index 0000000..a1c2772
--- /dev/null
+++ b/resources/views/program/realisasi/add.blade.php
@@ -0,0 +1,175 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasAddRealisasi"
+    aria-labelledby="offcanvasAddRealisasiLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasAddRealisasiLabel" class="offcanvas-title">Perbarui Capaian Realisasi</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="t-0" id="addNewRealisasiForm" action="{{ route('realisasi.store') }}" method="POST">
+            @csrf
+
+            <input type="hidden" id="add-target-transformasi-id" name="transformasi_id"/>
+            <input type="hidden" id="add-target-aktivitas-id" name="aktivitas_id"/>
+            <input type="hidden" id="add-target-id" name="target_id"/>
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-target-variabel">Variabel Target<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="add-target-variabel" name="variabel" placeholder="Cth: AK1" readonly />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="add-target-target">Target<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="add-target-target-integer" name="target_integer" placeholder="Cth: 100" readonly />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="add-target-target-float" name="target_float" placeholder="Cth: 100.23" readonly />
+                <div class="form-check form-check-inline" id="add-target-target-boolean-true" style="display: none;">
+                    <input type="radio" name="target_boolean" value="1" readonly />
+                    <label class="form-check-label" for="add-target-target-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="add-target-target-boolean-false" style="display: none;">
+                    <input type="radio" name="target_boolean" value="0" readonly />
+                    <label class="form-check-label" for="add-target-target-boolean-false">Tidak</label>
+                </div>
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="add-target-baseline">Baseline<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="add-target-baseline-integer" name="baseline_integer" placeholder="Cth: 100" readonly />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="add-target-baseline-float" name="baseline_float" placeholder="Cth: 100.23" readonly />
+                <div class="form-check form-check-inline" id="add-target-baseline-boolean-true" style="display: none;">
+                    <input type="radio" name="baseline_boolean" value="1" readonly />
+                    <label class="form-check-label" for="add-target-baseline-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="add-target-baseline-boolean-false" style="display: none;">
+                    <input type="radio" name="baseline_boolean" value="0" readonly />
+                    <label class="form-check-label" for="add-target-baseline-boolean-false">Tidak</label>
+                </div>
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="add-target-realisasi">Capaian Realisasi<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="add-target-realisasi-integer" name="realisasi_integer" placeholder="Cth: 100" />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="add-target-realisasi-float" name="realisasi_float" placeholder="Cth: 100.23" />
+                <div class="form-check form-check-inline" id="add-target-realisasi-boolean-true" style="display: none;">
+                    <input type="radio" name="realisasi_boolean" value="1" />
+                    <label class="form-check-label" for="add-target-realisasi-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="add-target-realisasi-boolean-false" style="display: none;">
+                    <input type="radio" name="realisasi_boolean" value="0" />
+                    <label class="form-check-label" for="add-target-realisasi-boolean-false">Tidak</label>
+                </div>
+            </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 offcanvasAddRealisasi = new bootstrap.Offcanvas(document.getElementById('offcanvasAddRealisasi'));
+
+        $(".add-realisasi").click(function () {
+            const targetId = $(this).data('target-id');
+            const aktivitasId = $(this).data('aktivitas-id');
+            const transformasiId = $(this).data('transformasi-id');
+            console.log('Add target, target id: ' + targetId);
+            $('#add-target-aktivitas-id').val(aktivitasId);
+            $('#add-target-transformasi-id').val(transformasiId);
+            $('#add-target-id').val(targetId);
+            
+            $.get("{{ route('framework.transformasi.aktivitas.target.show', [$framework->id, ':transformasiId', ':aktivitasId', ':id']) }}"
+                .replace(':aktivitasId', aktivitasId)
+                .replace(':transformasiId', transformasiId)
+                .replace(':id', targetId), function (res) {
+                if (res.status === 'success') {
+                    $('#add-target-variabel').val(res.data.variabel);
+
+                    $('#add-target-target-integer').val(res.data.target_integer);
+                    $('#add-target-target-float').val(res.data.target_float);
+                    $('#add-target-target-boolean-true').prop('checked', res.data.target_boolean);
+                    $('#add-target-target-boolean-false').prop('checked', !res.data.target_boolean);
+                    $('#add-target-baseline-integer').val(res.data.baseline_integer);
+                    $('#add-target-baseline-float').val(res.data.baseline_float);
+                    $('#add-target-baseline-boolean-true').prop('checked', res.data.baseline_boolean);
+                    $('#add-target-baseline-boolean-false').prop('checked', !res.data.baseline_boolean);
+
+                    if (res.data.latest_realisasi != null) {
+                        $('#add-target-realisasi-integer').val(res.data.latest_realisasi.realisasi_integer);
+                        $('#add-target-realisasi-float').val(res.data.latest_realisasi.realisasi_float);
+                        $('#add-target-realisasi-boolean-true').prop('checked', res.data.latest_realisasi.realisasi_boolean);
+                        $('#add-target-realisasi-boolean-false').prop('checked', !res.data.latest_realisasi.realisasi_boolean);
+                    } else {
+                        $('#add-target-realisasi-integer').val(res.data.baseline_integer);
+                        $('#add-target-realisasi-float').val(res.data.baseline_float);
+                        $('#add-target-realisasi-boolean-true').prop('checked', res.data.baseline_boolean);
+                        $('#add-target-realisasi-boolean-false').prop('checked', !res.data.baseline_boolean);
+                    }
+                    
+
+                    if (res.data.tipe === 'integer') {
+                        $('#add-target-target-integer').show().prop('disabled', false);
+                        $('#add-target-baseline-integer').show().prop('disabled', false);
+                        $('#add-target-realisasi-integer').show().prop('disabled', false);
+                    } else if (res.data.tipe === 'float') {
+                        $('#add-target-target-float').show().prop('disabled', false);
+                        $('#add-target-baseline-float').show().prop('disabled', false);
+                        $('#add-target-realisasi-float').show().prop('disabled', false);
+                    } else if (res.data.tipe === 'boolean') {
+                        $('#add-target-target-boolean-true, #add-target-target-boolean-false').show().prop('disabled', false);
+                        $('#add-target-baseline-boolean-true, #add-target-baseline-boolean-false').show().prop('disabled', false);
+                        $('#add-target-realisasi-boolean-true, #add-target-realisasi-boolean-false').show().prop('disabled', false);
+                    }
+
+
+                    offcanvasAddRealisasi.show();
+                }
+            });
+        });
+        $('#addNewRealisasiForm').validate({
+            rules: {
+                realisasi_integer: { required: true, number: true, min: 0 },
+                realisasi_float: { required: true, number: true, min: 0 },
+                realisasi_boolean: { required: true }
+            },
+            messages: {
+                realisasi_integer: { required: "Realisasi integer wajib diisi", number: "Harus berupa angka", min: "Harus berupa angka positif" },
+                realisasi_float: { required: "Realisasi float wajib diisi", number: "Harus berupa angka", min: "Harus berupa angka positif" },
+                realisasi_boolean: { required: "Realisasi boolean wajib diisi" }
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action'),
+                    type: 'POST',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasAddRealisasi.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/program/realisasi/edit.blade.php b/resources/views/program/realisasi/edit.blade.php
new file mode 100644
index 0000000..05f9203
--- /dev/null
+++ b/resources/views/program/realisasi/edit.blade.php
@@ -0,0 +1,168 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasEditRealisasi"
+    aria-labelledby="offcanvasEditRealisasiLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasEditRealisasiLabel" class="offcanvas-title">Ubah Capaian Realisasi</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="t-0" id="editRealisasiForm" action="{{ route('realisasi.update', ':id') }}" method="POST">
+            @csrf
+            @method('PUT')
+
+            <input type="hidden" id="edit-target-transformasi-id" name="transformasi_id"/>
+            <input type="hidden" id="edit-target-aktivitas-id" name="aktivitas_id"/>
+            <input type="hidden" id="edit-target-id" name="target_id"/>
+            <input type="hidden" id="edit-target-realisasi-id" name="id"/>
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="edit-target-variabel">Variabel Target<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="edit-target-variabel" name="variabel" placeholder="Cth: AK1" readonly />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="edit-target-target">Target<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="edit-target-target-integer" name="target_integer" placeholder="Cth: 100" readonly />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="edit-target-target-float" name="target_float" placeholder="Cth: 100.23" readonly />
+                <div class="form-check form-check-inline" id="edit-target-target-boolean-true" style="display: none;">
+                    <input type="radio" name="target_boolean" value="1" readonly />
+                    <label class="form-check-label" for="edit-target-target-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="edit-target-target-boolean-false" style="display: none;">
+                    <input type="radio" name="target_boolean" value="0" readonly />
+                    <label class="form-check-label" for="edit-target-target-boolean-false">Tidak</label>
+                </div>
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="edit-target-baseline">Baseline<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="edit-target-baseline-integer" name="baseline_integer" placeholder="Cth: 100" readonly />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="edit-target-baseline-float" name="baseline_float" placeholder="Cth: 100.23" readonly />
+                <div class="form-check form-check-inline" id="edit-target-baseline-boolean-true" style="display: none;">
+                    <input type="radio" name="baseline_boolean" value="1" readonly />
+                    <label class="form-check-label" for="edit-target-baseline-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="edit-target-baseline-boolean-false" style="display: none;">
+                    <input type="radio" name="baseline_boolean" value="0" readonly />
+                    <label class="form-check-label" for="edit-target-baseline-boolean-false">Tidak</label>
+                </div>
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="edit-target-realisasi">Capaian Realisasi<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="edit-target-realisasi-integer" name="realisasi_integer" placeholder="Cth: 100" />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="edit-target-realisasi-float" name="realisasi_float" placeholder="Cth: 100.23" />
+                <div class="form-check form-check-inline" id="edit-target-realisasi-boolean-true" style="display: none;">
+                    <input type="radio" name="realisasi_boolean" value="1" />
+                    <label class="form-check-label" for="edit-target-realisasi-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="edit-target-realisasi-boolean-false" style="display: none;">
+                    <input type="radio" name="realisasi_boolean" value="0" />
+                    <label class="form-check-label" for="edit-target-realisasi-boolean-false">Tidak</label>
+                </div>
+            </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 offcanvasEditRealisasi = new bootstrap.Offcanvas(document.getElementById('offcanvasEditRealisasi'));
+
+        $(".edit-realisasi").click(function () {
+            const targetId = $(this).data('target-id');
+            const aktivitasId = $(this).data('aktivitas-id');
+            const transformasiId = $(this).data('transformasi-id');
+            const id = $(this).data('id');
+            console.log('Edit target, target id: ' + targetId);
+            $('#edit-target-aktivitas-id').val(aktivitasId);
+            $('#edit-target-transformasi-id').val(transformasiId);
+            $('#edit-target-id').val(targetId);
+            $('#edit-target-realisasi-id').val(id);
+
+            $.get("{{ route('realisasi.show', ':id') }}"
+                .replace(':id', id), function (res) {
+                if (res.status === 'success') {
+                    $('#edit-target-variabel').val(res.data.target.variabel);
+
+                    $('#edit-target-target-integer').val(res.data.target.target_integer);
+                    $('#edit-target-target-float').val(res.data.target.target_float);
+                    $('#edit-target-target-boolean-true').prop('checked', res.data.target.target_boolean);
+                    $('#edit-target-target-boolean-false').prop('checked', !res.data.target.target_boolean);
+                    $('#edit-target-baseline-integer').val(res.data.target.baseline_integer);
+                    $('#edit-target-baseline-float').val(res.data.target.baseline_float);
+                    $('#edit-target-baseline-boolean-true').prop('checked', res.data.target.baseline_boolean);
+                    $('#edit-target-baseline-boolean-false').prop('checked', !res.data.target.baseline_boolean);
+
+                    $('#edit-target-realisasi-integer').val(res.data.realisasi_integer);
+                    $('#edit-target-realisasi-float').val(res.data.realisasi_float);
+                    $('#edit-target-realisasi-boolean-true').prop('checked', res.data.realisasi_boolean);
+                    $('#edit-target-realisasi-boolean-false').prop('checked', !res.data.realisasi_boolean);
+
+                    if (res.data.target.tipe === 'integer') {
+                        $('#edit-target-target-integer').show().prop('disabled', false);
+                        $('#edit-target-baseline-integer').show().prop('disabled', false);
+                        $('#edit-target-realisasi-integer').show().prop('disabled', false);
+                    } else if (res.data.target.tipe === 'float') {
+                        $('#edit-target-target-float').show().prop('disabled', false);
+                        $('#edit-target-baseline-float').show().prop('disabled', false);
+                        $('#edit-target-realisasi-float').show().prop('disabled', false);
+                    } else if (res.data.target.tipe === 'boolean') {
+                        $('#edit-target-target-boolean-true, #edit-target-target-boolean-false').show().prop('disabled', false);
+                        $('#edit-target-baseline-boolean-true, #edit-target-baseline-boolean-false').show().prop('disabled', false);
+                        $('#edit-target-realisasi-boolean-true, #edit-target-realisasi-boolean-false').show().prop('disabled', false);
+                    }
+
+                    offcanvasEditRealisasi.show();
+                }
+            });
+        });
+        $('#editRealisasiForm').validate({
+            rules: {
+                realisasi_integer: { required: true, number: true, min: 0 },
+                realisasi_float: { required: true, number: true, min: 0 },
+                realisasi_boolean: { required: true }
+            },
+            messages: {
+                realisasi_integer: { required: "Realisasi integer wajib diisi", number: "Harus berupa angka", min: "Harus berupa angka positif" },
+                realisasi_float: { required: "Realisasi float wajib diisi", number: "Harus berupa angka", min: "Harus berupa angka positif" },
+                realisasi_boolean: { required: "Realisasi boolean wajib diisi" }
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action').replace(':id', $('#edit-target-realisasi-id').val()),
+                    type: 'PUT',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasEditRealisasi.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/program/realisasi/index-aktivitas.blade.php b/resources/views/program/realisasi/index-aktivitas.blade.php
new file mode 100644
index 0000000..45d01b7
--- /dev/null
+++ b/resources/views/program/realisasi/index-aktivitas.blade.php
@@ -0,0 +1,118 @@
+                                    @forelse($tujuan->aktivitas as $aktivitas)
+                                    @forelse($aktivitas->target as $targetAktivitas)
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }} (ID: {{ $transformasi->id }})</span></td>
+                                        <td><span class="{{ $aktivitas->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $aktivitas->kode }} {{ $aktivitas->nama }} (ID: {{ $aktivitas->id }})</span></td>
+                                        <td><span class="text-muted">{{ $aktivitas->deskripsi }}</span></td>
+                                        <td><span class="text-muted">{{ $aktivitas->indikator }}</span></td>
+                                        <td><span class="text-muted">{{ $targetAktivitas->variabel }} (ID: {{ $targetAktivitas->id }}, Tipe: {{ $targetAktivitas->tipe }}, Realiasasi: {{ $targetAktivitas->tipe_realisasi }})</span></td>
+                                        <td>
+                                            @if($targetAktivitas->tipe === 'integer')
+                                                <span class="text-muted">{{ $targetAktivitas->target_integer }}</span>
+                                            @elseif($targetAktivitas->tipe === 'float')
+                                                <span class="text-muted">{{ $targetAktivitas->target_float }}</span>
+                                            @elseif($targetAktivitas->tipe === 'boolean')
+                                                <span class="text-muted">{{ $targetAktivitas->target_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                        </td>
+                                        <td>
+                                            @if($targetAktivitas->tipe === 'integer')
+                                                <span class="text-muted">{{ $targetAktivitas->baseline_integer }}</span>
+                                            @elseif($targetAktivitas->tipe === 'float')
+                                                <span class="text-muted">{{ $targetAktivitas->baseline_float }}</span>
+                                            @elseif($targetAktivitas->tipe === 'boolean')
+                                                <span class="text-muted">{{ $targetAktivitas->baseline_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                        </td>
+                                        <td>
+                                            @if($targetAktivitas->latestRealisasi)
+                                            @if($targetAktivitas->tipe === 'integer')
+                                                <span class="text-muted">{{ $targetAktivitas->latestRealisasi->realisasi_integer }}</span>
+                                                <span class="text-muted {{ $targetAktivitas->latestRealisasi->realisasi_integer / $targetAktivitas->target_integer <= 0.5 ? 'text-danger' : 'text-success' }}">
+                                                    ({{ number_format(($targetAktivitas->latestRealisasi->realisasi_integer / $targetAktivitas->target_integer) * 100, 2) }}%)
+                                                </span>
+                                            @elseif($targetAktivitas->tipe === 'float')
+                                                <span class="text-muted">{{ $targetAktivitas->latestRealisasi->realisasi_float }}</span>
+                                                <span class="text-muted {{ $targetAktivitas->latestRealisasi->realisasi_float / $targetAktivitas->target_float <= 0.5 ? 'text-danger' : 'text-success' }}">
+                                                    ({{ number_format(($targetAktivitas->latestRealisasi->realisasi_float / $targetAktivitas->target_float) * 100, 2) }}%)
+                                                </span>
+                                            @elseif($targetAktivitas->tipe === 'boolean')
+                                                <span class="text-muted">{{ $targetAktivitas->latestRealisasi->realisasi_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                            @if($targetAktivitas->latestRealisasi && $targetAktivitas->latestRealisasi->verifikasi->count() > 0)
+                                                <span class="badge badge-center rounded-pill bg-label-success ms-2" 
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Terverifikasi">
+                                                    <i class="ti tabler-check ti-md"></i>
+                                                </span>
+                                            @else
+                                                <span class="badge badge-center rounded-pill bg-label-danger ms-2" 
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Belum Terverifikasi">
+                                                    <i class="ti tabler-exclamation-mark ti-md"></i>
+                                                </span>
+                                            @endif
+                                            @else
+                                            -
+                                            @endif
+
+                                        </td>
+                                        <td>
+                                            <div class="d-flex align-items-center">
+                                                <a href="javascript:;" class="btn btn-icon btn-text-success rounded-pill add-realisasi" 
+                                                    data-framework-id="{{ $framework->id }}"
+                                                    data-transformasi-id="{{ $transformasi->id }}"
+                                                    data-aktivitas-id="{{ $aktivitas->id }}"
+                                                    data-target-id="{{ $targetAktivitas->id }}"
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Perbarui Realisasi">
+                                                    <i class="ti tabler-chart-dots ti-md"></i>
+                                                </a>
+                                                @if($targetAktivitas->latestRealisasi)
+                                                <a href="javascript:;" class="btn btn-icon btn-text-success rounded-pill edit-realisasi" 
+                                                    data-framework-id="{{ $framework->id }}"
+                                                    data-transformasi-id="{{ $transformasi->id }}"
+                                                    data-aktivitas-id="{{ $aktivitas->id }}"
+                                                    data-target-id="{{ $targetAktivitas->id }}"
+                                                    data-id="{{ $targetAktivitas->latestRealisasi->id }}"
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit Realisasi">
+                                                    <i class="ti tabler-edit-circle ti-md"></i>
+                                                </a>
+                                                <a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill history-realisasi" 
+                                                    data-framework-id="{{ $framework->id }}"
+                                                    data-transformasi-id="{{ $transformasi->id }}"
+                                                    data-aktivitas-id="{{ $aktivitas->id }}"
+                                                    data-target-id="{{ $targetAktivitas->id }}"
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Riwayat Realisasi">
+                                                    <i class="ti tabler-logs ti-md"></i>
+                                                </a>
+                                                <a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill add-verifikasi" 
+                                                    data-framework-id="{{ $framework->id }}"
+                                                    data-transformasi-id="{{ $transformasi->id }}"
+                                                    data-aktivitas-id="{{ $aktivitas->id }}"
+                                                    data-target-id="{{ $targetAktivitas->id }}"
+                                                    data-realisasi-id="{{ $targetAktivitas->latestRealisasi->id }}"
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tambah Dokumen Verifikasi">
+                                                    <i class="ti tabler-file-plus ti-md"></i>
+                                                </a>
+                                                @if($targetAktivitas->latestRealisasi && $targetAktivitas->latestRealisasi->verifikasi->count() == 0)
+                                                @else
+                                                @endif
+                                                @endif
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    @empty
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }} (ID: {{ $transformasi->id }})</span></td>
+                                        <td><span class="{{ $aktivitas->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $aktivitas->kode }} {{ $aktivitas->nama }} (ID: {{ $aktivitas->id }})</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></td>
+                                        <td></td>
+                                    </tr>
+                                    @endforelse 
+                                    <!-- endforelse target -->
+                                    @empty 
+                                    @endforelse
+                                    <!-- endforelse tujuan -->
\ No newline at end of file
diff --git a/resources/views/program/realisasi/index-tujuan.blade.php b/resources/views/program/realisasi/index-tujuan.blade.php
new file mode 100644
index 0000000..0768930
--- /dev/null
+++ b/resources/views/program/realisasi/index-tujuan.blade.php
@@ -0,0 +1,126 @@
+                                    @forelse($transformasi->tujuan as $tujuan)
+                                    @forelse($tujuan->target as $target)
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }} (ID: {{ $transformasi->id }})</span></td>
+                                        <td><span class="{{ $tujuan->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $tujuan->kode }} {{ $tujuan->nama }} (ID: {{ $tujuan->id }})</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->deskripsi }}</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->indikator }}</span></td>
+                                        <td><span class="text-muted">{{ $target->variabel }} (ID: {{ $target->id }}, Tipe: {{ $target->tipe }}, Realiasasi: {{ $target->tipe_realisasi }})</span></td>
+                                        <td>
+                                            @if($target->tipe === 'integer')
+                                                <span class="text-muted">{{ $target->target_integer }}</span>
+                                            @elseif($target->tipe === 'float')
+                                                <span class="text-muted">{{ $target->target_float }}</span>
+                                            @elseif($target->tipe === 'boolean')
+                                                <span class="text-muted">{{ $target->target_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                        </td>
+                                        <td>
+                                            @if($target->tipe === 'integer')
+                                                <span class="text-muted">{{ $target->baseline_integer }}</span>
+                                            @elseif($target->tipe === 'float')
+                                                <span class="text-muted">{{ $target->baseline_float }}</span>
+                                            @elseif($target->tipe === 'boolean')
+                                                <span class="text-muted">{{ $target->baseline_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                        </td>
+                                        <td>
+                                            @if($target->latestRealisasi)
+                                            @if($target->tipe === 'integer')
+                                                <span class="text-muted">{{ $target->latestRealisasi->realisasi_integer }}</span>
+                                                <span class="text-muted {{ $target->latestRealisasi->realisasi_integer / $target->target_integer <= 0.5 ? 'text-danger' : 'text-success' }}">
+                                                    ({{ number_format(($target->latestRealisasi->realisasi_integer / $target->target_integer) * 100, 2) }}%)
+                                                </span>
+                                            @elseif($target->tipe === 'float')
+                                                <span class="text-muted">{{ $target->latestRealisasi->realisasi_float }}</span>
+                                                <span class="text-muted {{ $target->latestRealisasi->realisasi_float / $target->target_float <= 0.5 ? 'text-danger' : 'text-success' }}">
+                                                    ({{ number_format(($target->latestRealisasi->realisasi_float / $target->target_float) * 100, 2) }}%)
+                                                </span>
+                                            @elseif($target->tipe === 'boolean')
+                                                <span class="text-muted">{{ $target->latestRealisasi->realisasi_boolean ? 'Ya' : 'Tidak' }}</span>
+                                            @endif
+                                            @if($target->latestRealisasi && $target->latestRealisasi->verifikasi->count() > 0)
+                                                <span class="badge badge-center rounded-pill bg-label-success ms-2" 
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Terverifikasi">
+                                                    <i class="ti tabler-check ti-md"></i>
+                                                </span>
+                                            @else
+                                                <span class="badge badge-center rounded-pill bg-label-danger ms-2" 
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Belum Terverifikasi">
+                                                    <i class="ti tabler-exclamation-mark ti-md"></i>
+                                                </span>
+                                            @endif
+                                            @else
+                                            -
+                                            @endif
+                                        </td>
+                                        <td>
+                                            <div class="d-flex align-items-center">
+                                                <a href="javascript:;" class="btn btn-icon btn-text-success rounded-pill add-realisasi" 
+                                                    data-framework-id="{{ $framework->id }}"
+                                                    data-transformasi-id="{{ $transformasi->id }}"
+                                                    data-aktivitas-id="{{ $tujuan->id }}"
+                                                    data-target-id="{{ $target->id }}"
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Perbarui Realisasi">
+                                                    <i class="ti tabler-chart-dots ti-md"></i>
+                                                </a>
+                                                @if($target->latestRealisasi)
+                                                <a href="javascript:;" class="btn btn-icon btn-text-success rounded-pill edit-realisasi" 
+                                                    data-framework-id="{{ $framework->id }}"
+                                                    data-transformasi-id="{{ $transformasi->id }}"
+                                                    data-aktivitas-id="{{ $tujuan->id }}"
+                                                    data-target-id="{{ $target->id }}"
+                                                    data-id="{{ $target->latestRealisasi->id }}"
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit Realisasi">
+                                                    <i class="ti tabler-edit-circle ti-md"></i>
+                                                </a>
+                                                <a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill history-realisasi" 
+                                                    data-framework-id="{{ $framework->id }}"
+                                                    data-transformasi-id="{{ $transformasi->id }}"
+                                                    data-aktivitas-id="{{ $tujuan->id }}"
+                                                    data-target-id="{{ $target->id }}"
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Riwayat Realisasi">
+                                                    <i class="ti tabler-logs ti-md"></i>
+                                                </a>
+                                                <a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill add-verifikasi" 
+                                                    data-framework-id="{{ $framework->id }}"
+                                                    data-transformasi-id="{{ $transformasi->id }}"
+                                                    data-aktivitas-id="{{ $tujuan->id }}"
+                                                    data-target-id="{{ $target->id }}"
+                                                    data-realisasi-id="{{ $target->latestRealisasi->id }}"
+                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tambah Dokumen Verifikasi">
+                                                    <i class="ti tabler-file-plus ti-md"></i>
+                                                </a>
+                                                @endif
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    @empty
+                                    <tr>
+                                        <td><span class="text-heading">{{ $transformasi->kode }} {{ $transformasi->nama }} (ID: {{ $transformasi->id }})</span></td>
+                                        <td><span class="{{ $tujuan->jenis_aktivitas == 'tujuan' ? 'text-heading' : 'text-muted' }}">{{ $tujuan->kode }} {{ $tujuan->nama }} (ID: {{ $tujuan->id }})</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->deskripsi }}</span></td>
+                                        <td><span class="text-muted">{{ $tujuan->indikator }}</span></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                    </tr>
+                                    @endforelse 
+                                    <!-- endforelse target -->
+                                    @include('program.realisasi.index-aktivitas')
+                                    @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></td>
+                                        <td></td>
+                                    </tr>
+                                    @endforelse
+                                    <!-- endforelse tujuan -->
\ No newline at end of file
diff --git a/resources/views/program/realisasi/index.blade.php b/resources/views/program/realisasi/index.blade.php
new file mode 100644
index 0000000..0d4bdd0
--- /dev/null
+++ b/resources/views/program/realisasi/index.blade.php
@@ -0,0 +1,101 @@
+@extends('layout.main')
+
+@push('styles')
+<link rel="stylesheet"
+ href="https://cdn.datatables.net/rowgroup/1.4.1/css/rowGroup.dataTables.min.css">
+@endpush
+
+@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">Lihat Realiasi</h5>
+        </div>
+        
+        <div class="card-body">
+            <form id="viewFrameworkForm">
+                @csrf
+                
+                <h6 class="mb-3">Informasi Kerangka Kerja</h6>
+                <div class="row">
+                    <div class="col-md-3 mb-4 form-control-validation">
+                        <label class="form-label" for="update-framework-nama">Nama Kerangka Kerja<span class="text-danger">*</span></label>
+                        <input type="text" class="form-control" id="update" name="nama" placeholder="Cth: Tabel Pertanian" value="{{ old('nama', $framework->nama) }}"  readonly/>
+                    </div>
+                    <div class="col-md-3 mb-4 form-control-validation">
+                        <label class="form-label" for="update-framework-tahun">Tahun Implementasi<span class="text-danger">*</span></label>
+                        <input type="number" step="1" min="2026" class="form-control" id="update-framework-tahun" name="tahun" placeholder="Cth: 2023" value="{{ old('tahun', $framework->tahun) ?? now()->year }}" readonly/>
+                    </div>
+                    <div class="col-md-6 mb-4 form-control-validation">
+                        <label class="form-label" for="update-framework-program">Untuk Program<span class="text-danger">*</span></label>
+                        <input type="text" class="form-control" id="update-framework-tahun" name="tahun" placeholder="Cth: 2023" value="{{ old('program_id', $framework->program->nama) }}" readonly/>
+                    </div>
+                </div>
+
+                <h6 class="mb-3">Informasi Rencana Kerja dan Realisasi</h6>
+
+                <hr class="my-4 mx-n4" />
+
+                <div class="row mb-4">
+                    <div class="col-md-12 mb-4 form-control-validation">
+                        
+                        <div class="table-responsive text-nowrap mb-4">
+                            <table class="table table-hover" id="realisasiTable">
+                                <thead class="border-top">
+                                    <tr>
+                                        <th>Transformasi</th>
+                                        <th>Tujuan Jangka Pendek/Aktivitas</th>
+                                        <th>Deskripsi</th>
+                                        <th>Indikator</th>
+                                        <th>Variabel</th>
+                                        <th>Target</th>
+                                        <th>Baseline</th>
+                                        <th>Capaian Realisasi</th>
+                                        <th>Aksi</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    @forelse($framework->transformasi as $transformasi)
+                                    @include('program.realisasi.index-tujuan')
+                                    @empty
+                                    <tr>
+                                        <td colspan="4" class="text-center py-4">Tidak ada data ditemukan.</td>
+                                    </tr>
+                                    @endforelse
+                                    <!-- endforelse tranformasi -->
+                                </tbody>
+                            </table>
+                        </div>
+
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@include('program.realisasi.add')
+@include('program.realisasi.list')
+@include('program.realisasi.edit')
+@include('program.verifikasi.add')
+@endsection
+
+@push('scripts')
+<script src="https://cdn.datatables.net/rowgroup/1.4.1/js/dataTables.rowGroup.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/datatables-rowsgroup@2.0.0/dataTables.rowsGroup.js"></script>
+<script>
+    'use strict';
+    
+    $(document).ready(function () {
+        $('#realisasiTable').DataTable({
+            "paging": true,
+            "lengthChange": false,
+            "searching": true,
+            "ordering": false,
+            "info": true,
+            "autoWidth": true,
+            "scrollX": true,
+            "rowsGroup": [0]
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/program/realisasi/list.blade.php b/resources/views/program/realisasi/list.blade.php
new file mode 100644
index 0000000..21c9532
--- /dev/null
+++ b/resources/views/program/realisasi/list.blade.php
@@ -0,0 +1,83 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasListRealisasi"
+    aria-labelledby="offcanvasListRealisasiLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasListRealisasiLabel" class="offcanvas-title">Riwayat Capaian Realisasi</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="t-0" id="historyRealisasiForm">
+
+            <input type="hidden" id="list-target-transformasi-id" name="transformasi_id"/>
+            <input type="hidden" id="list-target-aktivitas-id" name="aktivitas_id"/>
+            <input type="hidden" id="list-target-id" name="target_id"/>
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="list-target-variabel">Variabel Target<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="list-target-variabel" name="variabel" placeholder="Cth: AK1" readonly />
+            </div>
+
+            <table class="table table-hover">
+                <thead>
+                    <tr>
+                        <th>Nilai Realisasi</th>
+                        <th>Update</th>
+                    </tr>
+                </thead>
+                <tbody id="historyRealisasiTableBody">
+                </tbody>
+            </table>
+            
+            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Tutup</button>
+        </form>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+    $(document).ready(function() {
+        const offcanvasListRealisasi = new bootstrap.Offcanvas(document.getElementById('offcanvasListRealisasi'));
+
+        $(".history-realisasi").click(function () {
+            const targetId = $(this).data('target-id');
+            const aktivitasId = $(this).data('aktivitas-id');
+            const transformasiId = $(this).data('transformasi-id');
+            console.log('Add target, target id: ' + targetId);
+            $('#list-target-aktivitas-id').val(aktivitasId);
+            $('#list-target-transformasi-id').val(transformasiId);
+            $('#list-target-id').val(targetId);
+            
+            $.get("{{ route('framework.transformasi.aktivitas.target.show', [$framework->id, ':transformasiId', ':aktivitasId', ':id']) }}"
+                .replace(':aktivitasId', aktivitasId)
+                .replace(':transformasiId', transformasiId)
+                .replace(':id', targetId), function (res) {
+                if (res.status === 'success') {
+                    $('#list-target-variabel').val(res.data.variabel);
+                    
+                    let rows = '';
+                    res.data.realisasi.forEach(function (realisasi) {
+                        let realisasiValue = '';
+                        if (res.data.tipe === 'integer') {
+                            realisasiValue = realisasi.realisasi_integer;
+                        } else if (res.data.tipe === 'float') {
+                            realisasiValue = realisasi.realisasi_float;
+                        } else if (res.data.tipe === 'boolean') {
+                            realisasiValue = realisasi.realisasi_boolean ? 'Ya' : 'Tidak';
+                        }
+                        rows += '<tr><td>' + realisasiValue + '</td><td>' + new Date(realisasi.updated_at).toLocaleString() + '</td></tr>';
+                    });
+                    $('#historyRealisasiTableBody').html(rows);
+
+                    offcanvasListRealisasi.show();
+                }
+            });
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/program/target/add.blade.php b/resources/views/program/target/add.blade.php
index dded5ec..cec2eaa 100644
--- a/resources/views/program/target/add.blade.php
+++ b/resources/views/program/target/add.blade.php
@@ -56,6 +56,17 @@
                     <label class="form-check-label" for="add-target-baseline-boolean-false">Tidak</label>
                 </div>
             </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-target-tipe-realisasi">Tipe Perhitungan Nilai Realisasi<span class="text-danger">*</span></label>
+                <select class="form-select" id="add-target-tipe-realisasi" name="tipe_realisasi">
+                    <option value="manual">Input Manual</option>
+                    <option value="referensi">Dihitung Otomatis</option>
+                </select>
+            </div>
+            <div class="mb-6 form-control-validation" id="add-target-value-query-container" style="display: none;">
+                <label class="form-label" for="add-target-value-query">Query Perhitungan Nilai Realisasi</label>
+                <textarea class="form-control" id="add-target-value-query" name="value_query" rows="3"></textarea>
+            </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>
@@ -68,7 +79,7 @@
     $(document).ready(function() {
         const offcanvasAddTarget = new bootstrap.Offcanvas(document.getElementById('offcanvasAddTarget'));
         
-        $('#add-target-tipe').select2({
+        $('#add-target-tipe, #add-target-tipe-realisasi').select2({
             dropdownParent: $('#offcanvasAddTarget'),
             width: '100%',
         });
@@ -91,6 +102,13 @@
                 $('#add-target-baseline-boolean-true, #add-target-baseline-boolean-false').show().prop('disabled', false);
             }
         });
+        $('#add-target-tipe-realisasi').change(function() {
+            const tipe = $(this).val();
+            $('#add-target-value-query-container').hide().prop('disabled', true);
+            if (tipe === 'referensi') {
+                $('#add-target-value-query-container').show().prop('disabled', false);
+            }
+        }); 
 
         $(".add-target").click(function () {
             const id = $(this).data('id');
diff --git a/resources/views/program/target/edit.blade.php b/resources/views/program/target/edit.blade.php
new file mode 100644
index 0000000..4e5e935
--- /dev/null
+++ b/resources/views/program/target/edit.blade.php
@@ -0,0 +1,196 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasUpdateTarget"
+    aria-labelledby="offcanvasUpdateTargetLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasUpdateTargetLabel" class="offcanvas-title">Edit Target</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="updateTargetForm" action="{{ route('framework.transformasi.aktivitas.target.update', [$framework->id, ':transformasiId', ':aktivitasId', ':id']) }}" method="POST">
+            @csrf
+            @method('PUT')
+
+            <input type="hidden" id="update-target-transformasi-id" name="transformasi_id"/>
+            <input type="hidden" id="update-target-aktivitas-id" name="aktivitas_id"/>
+            <input type="hidden" id="update-target-id" name="id"/>
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="update-target-variabel">Variabel Target<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="update-target-variabel" name="variabel" placeholder="Cth: AK1" />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="update-target-tipe">Tipe Data Target<span class="text-danger">*</span></label>
+                <select class="form-select" id="update-target-tipe" name="tipe">
+                    <option value="integer">Integer</option>
+                    <option value="float">Float</option>
+                    <option value="boolean">Boolean</option>
+                </select>
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="update-target-target">Target<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="update-target-target-integer" name="target_integer" placeholder="Cth: 100" />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="update-target-target-float" name="target_float" placeholder="Cth: 100.23" />
+                <div class="form-check form-check-inline" id="update-target-target-boolean-true" style="display: none;">
+                    <input type="radio" name="target_boolean" value="1" />
+                    <label class="form-check-label" for="update-target-target-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="update-target-target-boolean-false" style="display: none;">
+                    <input type="radio" name="target_boolean" value="0" />
+                    <label class="form-check-label" for="update-target-target-boolean-false">Tidak</label>
+                </div>
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="update-target-baseline">Baseline<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="update-target-baseline-integer" name="baseline_integer" placeholder="Cth: 100" />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="update-target-baseline-float" name="baseline_float" placeholder="Cth: 100.23" />
+                <div class="form-check form-check-inline" id="update-target-baseline-boolean-true" style="display: none;">
+                    <input type="radio" name="baseline_boolean" value="1" />
+                    <label class="form-check-label" for="update-target-baseline-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="update-target-baseline-boolean-false" style="display: none;">
+                    <input type="radio" name="baseline_boolean" value="0" />
+                    <label class="form-check-label" for="update-target-baseline-boolean-false">Tidak</label>
+                </div>
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="update-target-tipe-realisasi">Tipe Perhitungan Nilai Realisasi<span class="text-danger">*</span></label>
+                <select class="form-select" id="update-target-tipe-realisasi" name="tipe_realisasi">
+                    <option value="manual">Input Manual</option>
+                    <option value="referensi">Dihitung Otomatis</option>
+                </select>
+            </div>
+            <div class="mb-6 form-control-validation" id="update-target-value-query-container" style="display: none;">
+                <label class="form-label" for="update-target-value-query">Query Perhitungan Nilai Realisasi</label>
+                <textarea class="form-control" id="update-target-value-query" name="value_query" rows="3"></textarea>
+            </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 offcanvasUpdateTarget = new bootstrap.Offcanvas(document.getElementById('offcanvasUpdateTarget'));
+        
+        $('#update-target-tipe, #update-target-tipe-realisasi').select2({
+            dropdownParent: $('#offcanvasUpdateTarget'),
+            width: '100%',
+        });
+        $(".edit-target").click(function () {
+            const id = $(this).data('id');
+            const transformasiId = $(this).data('transformasi-id');
+            const aktivitasId = $(this).data('aktivitas-id');
+            console.log('Add target, aktivitas id: ' + id);
+            $('#update-target-aktivitas-id').val(aktivitasId);
+            $('#update-target-transformasi-id').val(transformasiId);
+            $('#update-target-id').val(id);
+
+            $.get("{{ route('framework.transformasi.aktivitas.target.show', [$framework->id, ':transformasiId', ':aktivitasId', ':id']) }}"
+                .replace(':aktivitasId', aktivitasId)
+                .replace(':transformasiId', transformasiId)
+                .replace(':id', id), function (res) {
+                if (res.status === 'success') {
+                    $('#update-target-variabel').val(res.data.variabel);
+                    $('#update-target-tipe').val(res.data.tipe).trigger('change');
+                    $('#update-target-target-integer').val(res.data.target_integer);
+                    $('#update-target-target-float').val(res.data.target_float);
+                    $('#update-target-target-boolean-true').prop('checked', res.data.target_boolean);
+                    $('#update-target-target-boolean-false').prop('checked', !res.data.target_boolean);
+                    $('#update-target-baseline-integer').val(res.data.baseline_integer);
+                    $('#update-target-baseline-float').val(res.data.baseline_float);
+                    $('#update-target-baseline-boolean-true').prop('checked', res.data.baseline_boolean);
+                    $('#update-target-baseline-boolean-false').prop('checked', !res.data.baseline_boolean);
+                    $('#update-target-tipe-realisasi').val(res.data.tipe_realisasi).trigger('change');
+                    $('#update-target-value-query').val(res.data.value_query);
+                    offcanvasUpdateTarget.show();
+                }
+            });
+        });
+        
+
+        $('#update-target-tipe').change(function() {
+            const tipe = $(this).val();
+            $('#update-target-target-integer, #update-target-target-float, #update-target-target-boolean-true, #update-target-target-boolean-false').hide().prop('disabled', true);
+            if (tipe === 'integer') {
+                $('#update-target-target-integer').show().prop('disabled', false);
+            } else if (tipe === 'float') {
+                $('#update-target-target-float').show().prop('disabled', false);
+            } else if (tipe === 'boolean') {
+                $('#update-target-target-boolean-true, #update-target-target-boolean-false').show().prop('disabled', false);
+            }
+            $('#update-target-baseline-integer, #update-target-baseline-float, #update-target-baseline-boolean-true, #update-target-baseline-boolean-false').hide().prop('disabled', true);
+            if (tipe === 'integer') {
+                $('#update-target-baseline-integer').show().prop('disabled', false);
+            } else if (tipe === 'float') {
+                $('#update-target-baseline-float').show().prop('disabled', false);
+            } else if (tipe === 'boolean') {
+                $('#update-target-baseline-boolean-true, #update-target-baseline-boolean-false').show().prop('disabled', false);
+            }
+        });
+        $('#update-target-tipe-realisasi').change(function() {
+            const tipe = $(this).val();
+            $('#update-target-value-query-container').hide().prop('disabled', true);
+            if (tipe === 'referensi') {
+                $('#update-target-value-query-container').show().prop('disabled', false);
+            }
+        }); 
+
+        
+        $('#updateTargetForm').validate({
+            rules: {
+                variabel: { required: true },
+                tipe: { required: true },
+                target_integer: { required: true, number: true, min: 0 },
+                target_float: { required: true, number: true, min: 0 },
+                target_boolean: { required: true }
+            },
+            messages: {
+                variabel: { required: "Variabel target wajib diisi" },
+                tipe: { required: "Tipe data target wajib diisi" },
+                target_integer: { required: "Target integer wajib diisi", number: "Harus berupa angka", min: "Harus berupa angka positif" },
+                target_float: { required: "Target float wajib diisi", number: "Harus berupa angka", min: "Harus berupa angka positif" },
+                target_boolean: { required: "Target boolean wajib diisi" }
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action')
+                        .replace(':aktivitasId', $('#update-target-aktivitas-id').val())
+                        .replace(':transformasiId', $('#update-target-transformasi-id').val())
+                        .replace(':id', $('#update-target-id').val()),
+                    type: 'PUT',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasUpdateTarget.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/program/verifikasi/add.blade.php b/resources/views/program/verifikasi/add.blade.php
new file mode 100644
index 0000000..69d9bdc
--- /dev/null
+++ b/resources/views/program/verifikasi/add.blade.php
@@ -0,0 +1,176 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasAddVerifikasi"
+    aria-labelledby="offcanvasAddVerifikasiLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasAddVerifikasiLabel" class="offcanvas-title">Tambah Verifikasi</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="t-0" id="addNewVerifikasiForm" action="{{ route('verifikasi.store') }}" method="POST">
+            @csrf
+
+            <input type="hidden" id="add-verifikasi-transformasi-id" name="transformasi_id"/>
+            <input type="hidden" id="add-verifikasi-aktivitas-id" name="aktivitas_id"/>
+            <input type="hidden" id="add-verifikasi-target-id" name="target_id"/>
+            <input type="hidden" id="add-verifikasi-realisasi-id" name="realisasi_id"/>
+
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-verifikasi-variabel">Variabel Target<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="add-verifikasi-variabel" name="variabel" placeholder="Cth: AK1" readonly />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="add-verifikasi-target">Target<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="add-verifikasi-target-integer" name="target_integer" placeholder="Cth: 100" readonly />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="add-verifikasi-target-float" name="target_float" placeholder="Cth: 100.23" readonly />
+                <div class="form-check form-check-inline" id="add-verifikasi-target-boolean-true" style="display: none;">
+                    <input type="radio" name="target_boolean" value="1" readonly />
+                    <label class="form-check-label" for="add-verifikasi-target-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="add-verifikasi-target-boolean-false" style="display: none;">
+                    <input type="radio" name="target_boolean" value="0" readonly />
+                    <label class="form-check-label" for="add-verifikasi-target-boolean-false">Tidak</label>
+                </div>
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="add-verifikasi-baseline">Baseline<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="add-verifikasi-baseline-integer" name="baseline_integer" placeholder="Cth: 100" readonly />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="add-verifikasi-baseline-float" name="baseline_float" placeholder="Cth: 100.23" readonly />
+                <div class="form-check form-check-inline" id="add-verifikasi-baseline-boolean-true" style="display: none;">
+                    <input type="radio" name="baseline_boolean" value="1" readonly />
+                    <label class="form-check-label" for="add-verifikasi-baseline-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="add-verifikasi-baseline-boolean-false" style="display: none;">
+                    <input type="radio" name="baseline_boolean" value="0" readonly />
+                    <label class="form-check-label" for="add-verifikasi-baseline-boolean-false">Tidak</label>
+                </div>
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label form-check-label" for="add-verifikasi-realisasi">Capaian Realisasi<span class="text-danger">*</span></label>
+                <input type="number" step="1" min="0" class="form-control" id="add-verifikasi-realisasi-integer" name="realisasi_integer" placeholder="Cth: 100" readonly />
+                <input type="number" step="any" min="0" class="form-control" style="display: none;" id="add-verifikasi-realisasi-float" name="realisasi_float" placeholder="Cth: 100.23" readonly />
+                <div class="form-check form-check-inline" id="add-verifikasi-realisasi-boolean-true" style="display: none;">
+                    <input type="radio" name="realisasi_boolean" value="1" readonly />
+                    <label class="form-check-label" for="add-verifikasi-realisasi-boolean-true">Ya</label>
+                </div>
+                <div class="form-check form-check-inline" id="add-verifikasi-realisasi-boolean-false" style="display: none;">
+                    <input type="radio" name="realisasi_boolean" value="0" readonly />
+                    <label class="form-check-label" for="add-verifikasi-realisasi-boolean-false">Tidak</label>
+                </div>
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-verifikasi-dokumen">Dokumen Verifikasi<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="add-verifikasi-dokumen" name="dokumen" placeholder="Cth: AK1"  />
+            </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-verifikasi-link-dokumen">Link Dokumen<span class="text-danger">*</span></label>
+                <input type="text" class="form-control" id="add-verifikasi-link-dokumen" name="link_dokumen" placeholder="Cth: https://example.com/dokumen"  />
+            </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 offcanvasAddVerifikasi = new bootstrap.Offcanvas(document.getElementById('offcanvasAddVerifikasi'));
+
+        $(".add-verifikasi").click(function () {
+            const targetId = $(this).data('target-id');
+            const aktivitasId = $(this).data('aktivitas-id');
+            const transformasiId = $(this).data('transformasi-id');
+            const realisasiId = $(this).data('realisasi-id');
+            console.log('Add target, target id: ' + targetId);
+            $('#add-verifikasi-aktivitas-id').val(aktivitasId);
+            $('#add-verifikasi-transformasi-id').val(transformasiId);
+            $('#add-verifikasi-target-id').val(targetId);
+            $('#add-verifikasi-realisasi-id').val(realisasiId);
+            
+            $.get("{{ route('realisasi.show', ':id') }}"
+                .replace(':id', realisasiId), function (res) {
+                if (res.status === 'success') {
+                    $('#add-verifikasi-variabel').val(res.data.target.variabel);
+
+                    $('#add-verifikasi-target-integer').val(res.data.target.target_integer);
+                    $('#add-verifikasi-target-float').val(res.data.target.target_float);
+                    $('#add-verifikasi-target-boolean-true').prop('checked', res.data.target.target_boolean);
+                    $('#add-verifikasi-target-boolean-false').prop('checked', !res.data.target.target_boolean);
+                    $('#add-verifikasi-baseline-integer').val(res.data.target.baseline_integer);
+                    $('#add-verifikasi-baseline-float').val(res.data.target.baseline_float);
+                    $('#add-verifikasi-baseline-boolean-true').prop('checked', res.data.target.baseline_boolean);
+                    $('#add-verifikasi-baseline-boolean-false').prop('checked', !res.data.target.baseline_boolean);
+
+                    $('#add-verifikasi-realisasi-integer').val(res.data.realisasi_integer);
+                    $('#add-verifikasi-realisasi-float').val(res.data.realisasi_float);
+                    $('#add-verifikasi-realisasi-boolean-true').prop('checked', res.data.realisasi_boolean);
+                    $('#add-verifikasi-realisasi-boolean-false').prop('checked', !res.data.realisasi_boolean);
+
+                    if (res.data.target.tipe === 'integer') {
+                        $('#add-verifikasi-target-integer').show().prop('disabled', false);
+                        $('#add-verifikasi-baseline-integer').show().prop('disabled', false);
+                        $('#add-verifikasi-realisasi-integer').show().prop('disabled', false);
+                    } else if (res.data.target.tipe === 'float') {
+                        $('#add-verifikasi-target-float').show().prop('disabled', false);
+                        $('#add-verifikasi-baseline-float').show().prop('disabled', false);
+                        $('#add-verifikasi-realisasi-float').show().prop('disabled', false);
+                    } else if (res.data.target.tipe === 'boolean') {
+                        $('#add-verifikasi-target-boolean-true, #add-verifikasi-target-boolean-false').show().prop('disabled', false);
+                        $('#add-verifikasi-baseline-boolean-true, #add-verifikasi-baseline-boolean-false').show().prop('disabled', false);
+                        $('#add-verifikasi-realisasi-boolean-true, #add-verifikasi-realisasi-boolean-false').show().prop('disabled', false);
+                    }
+
+                    offcanvasAddVerifikasi.show();
+                }
+            });
+        });
+        $('#addNewVerifikasiForm').validate({
+            rules: {
+                realisasi_integer: { required: true, number: true, min: 0 },
+                realisasi_float: { required: true, number: true, min: 0 },
+                realisasi_boolean: { required: true }
+            },
+            messages: {
+                realisasi_integer: { required: "Realisasi integer wajib diisi", number: "Harus berupa angka", min: "Harus berupa angka positif" },
+                realisasi_float: { required: "Realisasi float wajib diisi", number: "Harus berupa angka", min: "Harus berupa angka positif" },
+                realisasi_boolean: { required: "Realisasi boolean wajib diisi" }
+            },
+            submitHandler: function (form) {
+                $.ajax({
+                    url: $(form).attr('action'),
+                    type: 'POST',
+                    data: $(form).serialize(),
+                    success: function () {
+                        offcanvasAddVerifikasi.hide();
+                        form.reset();
+                        Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
+                            .then(() => window.location.reload());
+                    },
+                    error: function (xhr) {
+                        console.error(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/routes/api.php b/routes/api.php
index 957199f..679fa03 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -65,4 +65,15 @@ Route::middleware('auth:sanctum')
     ->group(function () {
         
     Route::apiResource('fasilitator', \App\Http\Controllers\Api\FacilitatorController::class);
-});
\ No newline at end of file
+});
+
+Route::middleware('auth:sanctum')
+    ->name('ekosistem.')
+    ->prefix('ekosistem')
+    ->group(function () {
+        
+    Route::resource('tabel', App\Http\Controllers\Api\Ekosistem\TabelBasisDataController::class)->only(['index', 'show']);
+    Route::resource('tabel.formulir', App\Http\Controllers\Api\Ekosistem\FormBasisDataController::class)->only(['index']);
+    Route::resource('tabel.data', App\Http\Controllers\Api\Ekosistem\ValueBasisDataController::class);
+    
+}); 
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 1675e25..1a68e89 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -134,6 +134,6 @@ Route::middleware('auth')
     Route::resource('framework.transformasi', App\Http\Controllers\Web\Program\TransformasiController::class)->only(['show', 'store', 'update', 'destroy']);
     Route::resource('framework.transformasi.aktivitas', App\Http\Controllers\Web\Program\AktivitasController::class)->only(['show', 'store', 'update', 'destroy']);
     Route::resource('framework.transformasi.aktivitas.target', App\Http\Controllers\Web\Program\TargetController::class)->only(['show', 'store', 'update', 'destroy']);
-
-
+    Route::resource('realisasi', App\Http\Controllers\Web\Program\RealisasiController::class)->only('index', 'store', 'show', 'update', 'destroy');
+    Route::resource('verifikasi', App\Http\Controllers\Web\Program\VerifikasiController::class)->only('store', 'update', 'destroy');
 });
\ No newline at end of file