diff --git a/app/Http/Controllers/TetapanController.php b/app/Http/Controllers/TetapanController.php
index 6f39440..b1ccffa 100644
--- a/app/Http/Controllers/TetapanController.php
+++ b/app/Http/Controllers/TetapanController.php
@@ -11,7 +11,7 @@ use Carbon\Carbon;
 
 class TetapanController extends Controller
 {
-    
+
     public function home(){
 
         $auth_user = Auth::user();
@@ -32,4 +32,13 @@ class TetapanController extends Controller
 
         return view('tetapan.margin',compact('api_url','auth_user'));
     }
+
+    public function payableUjrahBranches()
+    {
+        $api_url =  config('api.url');
+        $auth_user = Auth::user();
+
+        $payable_cawangan = json_decode( Http::get(config('api.url').'/api/payable-ujrah-branches')->json() );
+        return view('tetapan.payable-ujrah-branches',compact('api_url','auth_user', 'payable_cawangan'));
+    }
 }
diff --git a/resources/views/tetapan/home.blade.php b/resources/views/tetapan/home.blade.php
index d9efb32..9871db6 100644
--- a/resources/views/tetapan/home.blade.php
+++ b/resources/views/tetapan/home.blade.php
@@ -6,10 +6,10 @@
    <main>
 
       <div class="pt-6 px-4">
-          
+
          <breadcrumb :items="[{'title' : 'Tetapan', 'icon' : 'fas fa-file-invoice'}]"></breadcrumb>
 
-         
+
          @if (Session::has('type'))
          <div class="@if(Session::get('type') == 'error') bg-red-100 border-red-500 text-red-900 @else bg-yellow-100 border-green-500 text-green-900 @endif  border-t-4 rounded-b px-4 py-3 shadow-md w-96 mx-auto mb-5" role="alert">
             <div class="flex">
@@ -29,28 +29,37 @@
             </div>
           </div>
          @endif
-        
+
 
 
          <div class=" flex justify-center items-center mx-auto">
-         
+
             <a href="{{ route('tetapan') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 mr-3 hover:bg-yellow-300 hover:transition-all cursor-pointer transition transform hover:-translate-y-1 ">
                 <img src="{{ asset('img/barcode.png') }}"  class="h-40 mx-auto text-center" alt="Windster Logo">
                 <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Scan Barcode</h2>
             </a>
 
-            @if ($auth_user->id == 355)            
+            @if ($auth_user->id == 355)
             <a href="{{ route('tetapan.margin') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 hover:bg-yellow-300 hover:transition-all cursor-pointer  transition transform hover:-translate-y-1 ">
                 <img src="{{ asset('img/margin.png') }}" class="h-40 mx-auto text-center" alt="Windster Logo">
                 <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Ubah Margin</h2>
             </a>
             @else
-                
+
             @endif
-           
+
          </div>
 
 
+         <div class=" flex justify-center items-center mx-auto pt-5 mr- 3">
+            <a href="{{ route('tetapan.payable-ujrah-branches') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 hover:bg-yellow-300 hover:transition-all cursor-pointer  transition transform hover:-translate-y-1 ">
+                <img src="{{ asset('img/shop-branches.png') }}" class="h-40 mx-auto text-center" alt="Windster Logo">
+                <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Ubah Status Pembayaran Ujrah</h2>
+            </a>
+
+        </div>
+
+
       </div>
    </main>
    @include('layouts.footer')
diff --git a/resources/views/tetapan/index.blade.php b/resources/views/tetapan/index.blade.php
index 1678963..5074d06 100644
--- a/resources/views/tetapan/index.blade.php
+++ b/resources/views/tetapan/index.blade.php
@@ -1,18 +1,17 @@
-
 @extends('layouts.app')
 
 @section('content')
 <div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
 <div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
-   <main>
+    <main>
 
-      <div class="pt-6 px-4">
-          
-      <breadcrumb :items="[{ 'title' : 'Tetapan', 'icon' : 'fas fa-globe-asia' }]"></breadcrumb>
+        <div class="pt-6 px-4">
 
-      <tetapan-component></tetapan-component>
+            <breadcrumb :items="[{ 'title' : 'Tetapan', 'icon' : 'fas fa-globe-asia' }]"></breadcrumb>
 
-      </div>
-   </main>
-   @include('layouts.footer')
-@endsection
+            <tetapan-component></tetapan-component>
+
+        </div>
+    </main>
+    @include('layouts.footer')
+    @endsection
diff --git a/resources/views/tetapan/payable-ujrah-branches.blade.php b/resources/views/tetapan/payable-ujrah-branches.blade.php
new file mode 100644
index 0000000..3e7f6ec
--- /dev/null
+++ b/resources/views/tetapan/payable-ujrah-branches.blade.php
@@ -0,0 +1,185 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
+<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
+    <main>
+
+        <div class="pt-6 px-4">
+
+            <breadcrumb :items="[{ 'title' : 'Payable Ujrah Branches', 'icon' : 'fas fa-globe-asia' }]"></breadcrumb>
+
+            <div class="flex justify-center">
+                <div class="w-1/2 bg-white rounded-xl shadow-md overflow-hidden mb-5">
+                    <div class="flex justify-end">
+                        <div class="p-8">
+                            <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded update-ujrah-payable-branches">Update Ujrah Payable Branches</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="tabs-1" class="flex justify-center">
+                <table class="w-1/2 leading-normal">
+                    <thead class="text-center">
+                        <tr>
+                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-2/12">
+                                Cawangan Name
+                            </th>
+                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-2/12">
+                                Cawangan Code
+                            </th>
+                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-2/12">
+                                Gadaian Ujrah Payable
+                            </th>
+                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-2/12">
+                                Tawarruq Version
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach($payable_cawangan as $cawangan)
+                        <tr>
+                            <td class="px-5 py-2 border-b border-gray-200 bg-white text-sm">
+                                <div class="flex items-center">
+                                    <div class="ml-3">
+                                        <p class="text-gray-900 whitespace-no-wrap">{{ $cawangan->details_caw }}</p>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-5 py-2 border-b border-gray-200 bg-white text-sm">
+                                <div class="flex items-center">
+                                    <div class="ml-3">
+                                        <p class="text-gray-900 whitespace-no-wrap">{{ $cawangan->kodcaw }}</p>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-5 py-2 border-b border-gray-200 bg-white text-sm">
+                                <div class="flex items-center">
+                                    <div class="ml-3">
+                                        <div class="flex items-center">
+                                            <input {{ $cawangan->gadaian_ujrah_payable === 1 ? 'checked' : '' }} name="checkbox-gadai-ujrah-payable" data-gadai-ujrah-payable-branch="{{ $cawangan->kodcaw }}" id="checked-checkbox" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-5 py-2 border-b border-gray-200 bg-white text-sm">
+                                <div class="flex items-center">
+                                    <div class="ml-3">
+                                        <div class="flex items-center">
+                                            @php
+                                            $selected = $cawangan->cawangan_information->version;
+                                            @endphp
+                                            <select name="version_tawarruq" data-tawarruq-version-branch="{{ $cawangan->kodcaw }}" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                                                <option {{ $selected === 'v1' ? 'selected' : '' }} value="v1">v1</option>
+                                                <option {{ $selected === 'v2' ? 'selected' : '' }} value="v2">v2</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+
+
+            <div class="flex justify-center mt-5">
+                <div class="w-1/2 bg-white rounded-xl shadow-md overflow-hidden mb-5">
+                    <div class="md:flex justify-end">
+                        <div class="p-8">
+                            <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded update-ujrah-payable-branches">Update Ujrah Payable Branches</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </main>
+    @include('layouts.footer')
+    @endsection
+
+    @push('additional_scripts')
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+
+            let button_update_ujrah_payable_branches = document.querySelectorAll('button.update-ujrah-payable-branches');
+
+            function sendToApi(data) {
+                let api_url = "{{ $api_url }}";
+
+                return fetch(api_url + '/api/payable-ujrah-branches/sync-status', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify(data)
+                    })
+                    .then(response => response.json())
+                    .catch((error) => {
+                        console.error('Error:', error);
+                    });
+            }
+
+            function showApiResponse(response) {
+                let updated_payable_ujrah_exist = response.updates_done.updated_payable_ujrah.length !== 0;
+                let updated_branch_tawarruq_exist = response.updates_done.updated_branch_tawarruq_version.length !== 0;
+
+                let generateResponseMessage = x => {
+                    const jsonArray = Array.from(Object.values(x));
+                    const resultString = jsonArray.reduce((accumulator, nextItem) => accumulator + nextItem + '\n\n', '')
+                    return resultString;
+                };
+
+
+                if (updated_payable_ujrah_exist) {
+                    const resultString = generateResponseMessage(response.updates_done.updated_payable_ujrah);
+                    alert(resultString);
+                }
+
+                if (updated_branch_tawarruq_exist) {
+                    const resultString = generateResponseMessage(response.updates_done.updated_branch_tawarruq_version);
+                    alert(resultString);
+                }
+
+            }
+
+            function handleClick(event) {
+                event.preventDefault();
+
+                let selected_checkbox = document.querySelectorAll("input[name='checkbox-gadai-ujrah-payable']");
+                let gadai_ujrah_payable_branches = Array.from(selected_checkbox).map(x => {
+                    return {
+                        "branch": x.getAttribute("data-gadai-ujrah-payable-branch"),
+                        "gadaian_ujrah_payable": x.checked ? 1 : 0,
+                    }
+                });
+
+                let selected_version_tawarruq = document.querySelectorAll("select[name='version_tawarruq']");
+                let branch_version_tawarruq = Array.from(selected_version_tawarruq).map(x => {
+                    return {
+                        "branch": x.getAttribute("data-tawarruq-version-branch"),
+                        "tawarruq_version": x.value,
+                    }
+                });
+
+                let data = {
+                    'gadai_ujrah_payable_branches': gadai_ujrah_payable_branches,
+                    'branch_tawarruq_version': branch_version_tawarruq
+                };
+
+                sendToApi(data).then(x => showApiResponse(x));
+
+            }
+
+            // Attach the event handler to each anchor element
+            button_update_ujrah_payable_branches.forEach(button => {
+                button.addEventListener('click', handleClick);
+            });
+
+        });
+    </script>
+    @endpush
diff --git a/routes/web.php b/routes/web.php
index e9b1ee2..2a2b130 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -157,6 +157,7 @@ Route::get('/audit/cetakan', ['as'=>'audit.cetak','uses'=>'App\Http\Controllers\
 Route::get('/tetapan',['as'=>'tetapan','uses'=>'App\Http\Controllers\TetapanController@index'])->middleware(['roleChecker:null,null,operasi,null,null']);
 Route::get('/tetapanhome',['as'=>'tetapan.home','uses'=>'App\Http\Controllers\TetapanController@home'])->middleware(['roleChecker:null,null,operasi,null,null']);
 Route::get('/tetapanmargin',['as'=>'tetapan.margin','uses'=>'App\Http\Controllers\TetapanController@margin'])->middleware(['roleChecker:null,null,operasi,null,null']);
+Route::get('/tetapan-payable-ujrah-branches',['as'=>'tetapan.payable-ujrah-branches','uses'=>'App\Http\Controllers\TetapanController@PayableUjrahBranches'])->middleware(['roleChecker:null,null,operasi,null,null']);
 
 
 //Pengguna