diff --git a/app/Http/Controllers/TetapanController.php b/app/Http/Controllers/TetapanController.php
index b1ccffa..05839a6 100644
--- a/app/Http/Controllers/TetapanController.php
+++ b/app/Http/Controllers/TetapanController.php
@@ -2,43 +2,61 @@
 
 namespace App\Http\Controllers;
 
-use Illuminate\Http\Request;
+use App\Models\User;
+use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Session;
 use Illuminate\Support\Facades\Http;
-use Illuminate\Support\Facades\Storage;
-use Carbon\Carbon;
 
 class TetapanController extends Controller
 {
 
-    public function home(){
+    public function home()
+    {
 
         $auth_user = Auth::user();
 
-        return view('tetapan.home',compact('auth_user'));
+        return view('tetapan.home', compact('auth_user'));
     }
 
-    public function index(){
+    public function index()
+    {
         $api_url = config('api.url');
         $auth_user = Auth::user();
 
-        return view('tetapan.index',compact('api_url','auth_user'));
+        return view('tetapan.index', compact('api_url', 'auth_user'));
     }
 
-    public function margin(){
+    public function margin()
+    {
         $api_url = config('api.url');
         $auth_user = Auth::user();
 
-        return view('tetapan.margin',compact('api_url','auth_user'));
+        return view('tetapan.margin', compact('api_url', 'auth_user'));
     }
 
     public function payableUjrahBranches()
     {
-        $api_url =  config('api.url');
+        $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'));
+        $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'));
+    }
+
+    public function unsoldCommodityNotification()
+    {
+        $api_url = config('api.url');
+        $auth_user = Auth::user();
+
+        $settings = Http::get(config('api.url') . '/api/settings/unsold-commodity-notifications')->json();
+
+        $key = Arr::pluck($settings, 'key');
+        $values = Arr::pluck($settings, 'value');
+        $settings = array_combine($key, $values);
+
+        $days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+        $operasi_users = User::where('cawangan', 'operasi')->get(['id', 'name', 'no_telefon']);
+
+        return view('tetapan.unsold-commodity-notifications', compact('api_url', 'auth_user', 'settings', 'operasi_users', 'days'));
     }
 }
diff --git a/public/img/notifications.png b/public/img/notifications.png
new file mode 100644
index 0000000..97ba7e7
Binary files /dev/null and b/public/img/notifications.png differ
diff --git a/resources/views/tetapan/home.blade.php b/resources/views/tetapan/home.blade.php
index 9871db6..1b50948 100644
--- a/resources/views/tetapan/home.blade.php
+++ b/resources/views/tetapan/home.blade.php
@@ -57,6 +57,11 @@
                 <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Ubah Status Pembayaran Ujrah</h2>
             </a>
 
+            <a href="{{ route('tetapan.unsold-commodity-notifications') }}" 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 ml-5">
+                <img src="{{ asset('img/notifications.png') }}" class="h-40 mx-auto text-center" alt="Windster Logo" img-from="https://www.flaticon.com/free-icons/megaphone">
+                <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Notifikasi Jualan Komoditi</h2>
+            </a>
+
         </div>
 
 
diff --git a/resources/views/tetapan/unsold-commodity-notifications.blade.php b/resources/views/tetapan/unsold-commodity-notifications.blade.php
new file mode 100644
index 0000000..efa61ad
--- /dev/null
+++ b/resources/views/tetapan/unsold-commodity-notifications.blade.php
@@ -0,0 +1,356 @@
+@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' : 'Unsold Commodity Notifications', '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-left">
+                        <div class="p-8 w-full">
+                            <div>
+                                <label for="message" class="block text-lg font-medium text-gray-700 mb-2">Notification Status</label>
+                                <label for="toggle" class="flex items-center cursor-pointer">
+                                    <div class="mr-3 text-gray-700 font-medium">
+                                        OFF
+                                    </div>
+                                    <div class="relative">
+                                        <input type="checkbox" id="toggle" class="sr-only" name="status" {{ $settings['status'] === '1' ? 'checked' : ''}} />
+                                        <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
+                                        <div class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition"></div>
+                                    </div>
+                                    <div class="ml-3 text-gray-700 font-medium">
+                                        ON
+                                    </div>
+                                </label>
+
+                                <div class="w-full max-w-md  flex pt-10">
+                                    <div class="w-1/2 pr-5">
+                                        <label for="start-time" class="block text-lg font-medium text-gray-700 mb-2">Start Time</label>
+                                        <input type="time" id="start-time" name="start-time" class="w-full p-4 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white" value="{{ $settings['start_time'] ?? '' }}">
+                                    </div>
+                                    <div class="w-1/2">
+                                        <label for="end-time" class="block text-lg font-medium text-gray-700 mb-2">End Time</label>
+                                        <input type="time" id="end-time" name="end-time" class="w-full p-4 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white" value="{{ $settings['end_time'] ?? '' }}">
+                                    </div>
+                                </div>
+
+                                <div class="w-full max-w-md pt-10">
+                                    <label for="message" class="block text-lg font-medium text-gray-700 mb-2">Notification Message</label>
+                                    <textarea id="message" name="message" rows="6" class="w-full p-4 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white resize-none">{{ $settings['message'] ?? '' }}</textarea>
+                                </div>
+
+
+                                <div id="person-in-charge-section" class="pt-3">
+                                    <label for="message" class="block text-lg font-medium text-gray-700 mb-2">Person In Charge</label>
+                                    <div id="tabs-1">
+                                        <table class="min-w-full 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">
+                                                        Hari
+                                                    </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">
+                                                        PIC
+                                                    </th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                @foreach($days as $day)
+                                                <tr>
+                                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                                                        <div class="flex items-center">
+                                                            <div class="ml-3">
+                                                                <p class="font-bold whitespace-no-wrap p-2 rounded-lg">{{ $day }}</p>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                                                        <div class="select-container">
+                                                            @php
+                                                                $array = json_decode($settings['pic_' .strtolower($day)]);
+                                                            @endphp
+                                                            @foreach($array as $pic)
+                                                            <div class="ml-3 flex mb-3">
+                                                                <select
+                                                                    name="pic_{{ strtolower($day) }}[]"
+                                                                    class="select-staff-operasi form-select w-full block px-3 py-2 mt-1 text-base leading-6 text-gray-700 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm sm:leading-5"
+                                                                    @php
+                                                                        $pic_id = isset($pic->id) ? $pic->id : '';
+                                                                    @endphp
+                                                                    data-telefon-no-selected="{{ $operasi_users->where('id', $pic_id)->first()->no_telefon ?? '' }}"
+                                                                >
+                                                                    <option value="">Select an option</option>
+                                                                    @foreach($operasi_users as $user)
+                                                                        <option value="{{ $user->id }}" {{ $user->id == $pic_id ? 'selected' : '' }} data-telefon-no="{{ $user->no_telefon }}">{{ $user->name }}</option>
+                                                                    @endforeach
+                                                                </select>
+                                                                @if($loop->index === 0)
+                                                                <button class="add-pic-button flex items-center px-4 font-semibold text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 ml-3">
+                                                                    +
+                                                                </button>
+                                                                @else
+                                                                <button class="remove-pic-button flex items-center px-4 font-semibold text-white bg-red-500 rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 ml-3">
+                                                                    -
+                                                                </button>
+                                                                @endif
+                                                            </div>
+                                                            @endforeach
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                                @endforeach
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+
+
+                                <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded update-notification-setting mt-5">Update Notification Settings</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    @include('layouts.footer')
+    @endsection
+
+    @push('additional_scripts')
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+
+            let button_update_notification_setting = document.querySelector('button.update-notification-setting');
+
+            function sendToApi(data) {
+                let api_url = "{{ $api_url }}";
+
+                return fetch(api_url + '/api/settings/unsold-commodity-notifications', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify(data)
+                    })
+                    .then(response => response.json())
+                    .then(response => {
+                        console.log(response);
+                        return response;
+                    })
+                    .catch((error) => {
+                        console.error('Error:', error);
+                    });
+            }
+
+
+            function handleClick(event) {
+
+                event.preventDefault();
+
+                const status = document.querySelector('input[name="status"]');
+                const startTime = document.querySelector('input[name="start-time"]');
+                const endTime = document.querySelector('input[name="end-time"]');
+                const message = document.querySelector('textarea[name="message"]');
+                const pic_sunday = Array.from(document.querySelectorAll('select[name="pic_sunday[]"]'));
+                const pic_monday = Array.from(document.querySelectorAll('select[name="pic_monday[]"]'));
+                const pic_tuesday = Array.from(document.querySelectorAll('select[name="pic_tuesday[]"]'));
+                const pic_wednesday = Array.from(document.querySelectorAll('select[name="pic_wednesday[]"]'));
+                const pic_thursday = Array.from(document.querySelectorAll('select[name="pic_thursday[]"]'));
+                const pic_friday = Array.from(document.querySelectorAll('select[name="pic_friday[]"]'));
+                const pic_saturday = Array.from(document.querySelectorAll('select[name="pic_saturday[]"]'));
+
+                let extractUserId = function(pic_array) {
+                    return pic_array.reduce((accumulator, nextItem) => {
+
+                        let data_object = {
+                            'id': nextItem.value,
+                            'no_telefon': nextItem.dataset.telefonNoSelected,
+                        };
+
+
+                        if(data_object.id !== ''){
+                            accumulator.push(data_object);
+                            return accumulator;
+                        }
+
+                        return accumulator;
+                    }, []);
+                };
+
+
+                let data = {
+                    'status': status.checked,
+                    'start_time': startTime.value,
+                    'end_time': endTime.value,
+                    'message': message.value,
+                    'pic_sunday': extractUserId(pic_sunday),
+                    'pic_monday': extractUserId(pic_monday),
+                    'pic_tuesday': extractUserId(pic_tuesday),
+                    'pic_wednesday': extractUserId(pic_wednesday),
+                    'pic_thursday': extractUserId(pic_thursday),
+                    'pic_friday': extractUserId(pic_friday),
+                    'pic_saturday': extractUserId(pic_saturday),
+                };
+
+                if (status.checked) {
+
+                    let checkEmpty = x => x.trim() === '';
+
+                    let is_input_incomplete = [startTime.value, endTime.value, message.value].map(x => checkEmpty(x))
+                        .some(x => x === true);
+
+                    if (is_input_incomplete) {
+                        alert('Anda telah pilih untuk buka notifikasi, sila isi maklumat di tempat yang disediakan');
+                        return;
+                    }
+
+                    sendToApi(data).then(x => x === 'success' ? alert('Tetapan berjaya dikemaskin') : alert('Tetapan tidak berjaya dikemaskini'));
+                    return;
+
+
+                }
+
+
+                sendToApi(data).then(x => x === 'success' ? alert('Tetapan berjaya dikemaskin') : alert('Tetapan tidak berjaya dikemaskini'));
+
+
+            }
+
+            button_update_notification_setting.addEventListener('click', function(e) {
+                handleClick(e);
+            });
+
+        });
+    </script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const toggle = document.querySelector('#toggle');
+            const dot = document.querySelector('.dot');
+
+            // input
+            const startTimeInput = document.querySelector('input[name="start-time"]');
+            const endTimeInput = document.querySelector('input[name="end-time"]');
+            const messageInput = document.querySelector('textarea[name="message"]');
+
+            let disableInput = () => {
+                startTimeInput.disabled = true;
+                endTimeInput.disabled = true;
+                messageInput.disabled = true;
+
+                startTimeInput.value = '';
+                endTimeInput.value = '';
+                messageInput.value = '';
+
+                startTimeInput.classList.add('bg-gray-300');
+                endTimeInput.classList.add('bg-gray-300');
+                messageInput.classList.add('bg-gray-300');
+            };
+
+            let enableInput = () => {
+                startTimeInput.disabled = false;
+                endTimeInput.disabled = false;
+                messageInput.disabled = false;
+
+                startTimeInput.classList.remove('bg-gray-300');
+                endTimeInput.classList.remove('bg-gray-300');
+                messageInput.classList.remove('bg-gray-300');
+            };
+
+            let hidePICSection = () => {
+                let pic_section = document.getElementById('person-in-charge-section');
+                pic_section.classList.add('hidden');
+
+            }
+
+            let displayPICSection = () => {
+                let pic_section = document.getElementById('person-in-charge-section');
+                pic_section.classList.remove('hidden');
+
+            }
+
+            toggle.addEventListener('change', function() {
+                if (toggle.checked) {
+                    dot.classList.add('transform', 'translate-x-full', 'bg-green-500');
+                    dot.classList.remove('bg-white');
+                    enableInput();
+                    displayPICSection();
+                } else {
+                    dot.classList.remove('transform', 'translate-x-full', 'bg-green-500');
+                    dot.classList.add('bg-white');
+                    disableInput();
+                    hidePICSection();
+                }
+            });
+
+        });
+    </script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // Get the element
+            const toggle = document.querySelector('#toggle');
+
+            // Function to trigger the change event
+            function triggerChangeEvent() {
+                // Create a new change event
+                const event = new Event('change', {
+                    bubbles: true, // Event bubbles up through the DOM
+                    cancelable: true // Event can be cancelled
+                });
+
+                // Dispatch the event on the input element
+                toggle.dispatchEvent(event);
+            }
+
+            // Call the function to trigger the change event
+            triggerChangeEvent();
+        });
+    </script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            let add_pic_buttons = document.querySelectorAll('button.add-pic-button');
+            let remove_pic_buttons = document.querySelectorAll('button.remove-pic-button');
+
+            let duplicateFields = function(element) {
+                let container = element.closest('div.select-container');
+                let select = element.parentNode.cloneNode(true);
+                select.classList.add('mt-2');
+                let button = select.querySelector('button');
+                button.classList.remove('bg-blue-500');
+                button.classList.remove('hover:bg-blue-700');
+                button.classList.add('bg-red-500');
+                button.classList.add('hover:bg-red-700');
+                button.classList.add('px-4');
+                button.classList.add('py-2');
+                button.addEventListener('click', x => x.target.parentNode.remove());
+                button.textContent = '-';
+                container.appendChild(select);
+            };
+
+            add_pic_buttons.forEach(function(x) {
+                x.addEventListener('click', y => duplicateFields(x))
+            });
+
+            remove_pic_buttons.forEach(function(x) {
+                x.addEventListener('click', y => x.parentNode.remove())
+            });
+        });
+    </script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            let select_staff_operasi = document.querySelectorAll('select.select-staff-operasi')
+
+            select_staff_operasi.forEach(x => {
+                x.addEventListener('input', function(select_element) {
+                    const selectedOption = this.options[this.selectedIndex];
+                    select_element.target.dataset.telefonNoSelected = selectedOption.dataset.telefonNo;
+                })
+            })
+        });
+    </script>
+    @endpush
diff --git a/routes/web.php b/routes/web.php
index 2a2b130..583326d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -158,6 +158,7 @@ Route::get('/tetapan',['as'=>'tetapan','uses'=>'App\Http\Controllers\TetapanCont
 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']);
+Route::get('/tetapan-unsold-commodity-notification',['as'=>'tetapan.unsold-commodity-notifications','uses'=>'App\Http\Controllers\TetapanController@UnsoldCommodityNotification'])->middleware(['roleChecker:null,null,operasi,null,null']);
 
 
 //Pengguna