Bagisto Teaster Notification testing - from frontend (in Vue component) and backend (session flash). Full tutorial: https://ajaxray.com/blog/toast-notifications-in-bagisto-the-complete-guide/

toaster.blade.php

<x-admin::layouts>

    <!-- Title of the page -->
    <x-slot:title>
        Toaster Test
    </x-slot>

    <!-- Page Content -->
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title text-2xl">Toaster Notification Test</h3>
                        </div>
                        <div class="card-body">
                            <p class="mb-4">This is a test page for toaster notifications. Use this page to test different types of notifications and toaster functionalities.</p>
                            
                            <!-- Vue Component for Toaster Testing -->
                            <toaster-test-component></toaster-test-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @pushOnce('scripts')
        <script type="text/x-template" id="toaster-test-component-template">
            <div>
                <div class="flex flex-row gap-4">
                    <div style="width: 30%;">
                        <h4 class="text-lg font-bold">Test Frontend Actions</h4>
                        <div class="grid grid-4 gap-2" role="group">
                            <button type="button" class="primary-button" style="background-color: #009900;" @click="showSuccessToast">
                                Success Notification
                            </button>
                            <button type="button" class="primary-button" style="background-color: #ff9900;" @click="showWarningToast">
                                Warning Notification
                            </button>
                            <button type="button" class="primary-button" style="background-color: #ff0000;" @click="showErrorToast">
                                Error Notification
                            </button>
                            <button type="button" class="primary-button" @click="showInfoToast">
                                Info Notification
                            </button>
                        </div>
                    </div>
                    <div style="width: 70%;">
                        <h4 class="text-lg font-bold">Test Results</h4>
                        <p class="text-muted">Click the buttons to test different toaster notifications. The results will appear as toast messages.</p>
                        <div v-if="lastMessage" class="mt-3">
                            <p class="text-info"><strong>Last triggered:</strong> @{{ lastMessage }}</p>
                        </div>
                    </div>
                </div>

                <hr class="my-4">

                <div class="flex flex-row gap-4">
                    <div style="width: 30%;">
                        <h4 class="text-lg font-bold">Test Backend Actions</h4>
                        <div class="grid grid-4 gap-2" role="group">
                            <button type="button" class="primary-button" style="background-color: #009900;" @click="testSessionFlash">
                                Session Flash Notification
                            </button>
                            <button type="button" class="primary-button" style="background-color: #ff9900;" @click="testAjaxSuccess">
                                Ajax Success Notification
                            </button>
                            <button type="button" class="primary-button" style="background-color: #ff0000;" @click="testAjaxError">
                                Error Response Notification
                            </button>                            
                        </div>
                    </div>
                    <div style="width: 70%;">
                        <h4 class="text-lg font-bold">Test Results</h4>
                        <p class="text-muted">Click the buttons to test different toaster notifications. The results will appear as toast messages.</p>
                        <div v-if="lastMessage" class="mt-3">
                            <p class="text-info"><strong>Last triggered:</strong> @{{ lastMessage }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </script>

        <script type="module">
            app.component('toaster-test-component', {
                template: '#toaster-test-component-template',
                
                data() {
                    return {
                        lastMessage: ''
                    };
                },

                methods: {
                    // Frontend toast methods
                    showSuccessToast() {
                        this.$emitter.emit('add-flash', { type: 'success', message: 'This is a success notification!' });
                        this.lastMessage = 'Frontend Success notification';
                    },

                    showWarningToast() {
                        this.$emitter.emit('add-flash', { type: 'warning', message: 'This is a warning notification!' });
                        this.lastMessage = 'Frontend Warning notification';
                    },

                    showErrorToast() {
                        this.$emitter.emit('add-flash', { type: 'error', message: 'This is an error notification!' });
                        this.lastMessage = 'Frontend Error notification';
                    },

                    showInfoToast() {
                        this.$emitter.emit('add-flash', { type: 'info', message: 'This is an info notification!' });
                        this.lastMessage = 'Frontend Info notification';
                    },

                    // Backend toast methods
                    testSessionFlash() {
                        this.lastMessage = 'Testing Session Flash...';
                        
                        // Create a form and submit it for session flash
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = "{{ route('admin.utils.tests.toaster.session-flash') }}";
                        
                        // Add CSRF token
                        const csrfToken = document.createElement('input');
                        csrfToken.type = 'hidden';
                        csrfToken.name = '_token';
                        csrfToken.value = "{{ csrf_token() }}";
                        form.appendChild(csrfToken);
                        
                        document.body.appendChild(form);
                        form.submit();
                    },

                    async testAjaxSuccess() {
                        this.lastMessage = 'Testing AJAX Success...';
                        const response = await this.$axios.post("{{ route('admin.utils.tests.toaster.ajax-success') }}");

                        try {
                            const response = await this.$axios.post("{{ route('admin.utils.tests.toaster.ajax-success') }}");
                            
                            if (response.data.success) {
                                this.$emitter.emit('add-flash', { 
                                    type: 'success', 
                                    message: response.data.message 
                                });
                                this.lastMessage = 'AJAX Success notification';
                            }
                        } catch (error) {
                            this.$emitter.emit('add-flash', { 
                                type: 'error', 
                                message: 'Failed to test AJAX success' 
                            });
                            this.lastMessage = 'AJAX Success test failed';
                        }
                    },

                    async testAjaxError() {
                        this.lastMessage = 'Testing AJAX Error...';
                        
                        try {
                            await this.$axios.post("{{ route('admin.utils.tests.toaster.ajax-error') }}");
                        } catch (error) {
                            if (error.response && error.response.data && error.response.data.flash) {
                                this.$emitter.emit('add-flash', { 
                                    type: error.response.data.flash.type, 
                                    message: error.response.data.flash.message 
                                });
                                this.lastMessage = 'AJAX Error notification';
                            } else {
                                this.$emitter.emit('add-flash', { 
                                    type: 'error', 
                                    message: 'Unknown error occurred' 
                                });
                                this.lastMessage = 'AJAX Error test failed';
                            }
                        }
                    }
                }
            });
        </script>
    @endpushOnce

</x-admin::layouts>

ToasterController.php

<?php

namespace Company\Utils\Http\Controllers\Admin;

use Illuminate\Routing\Controller;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;

class ToasterController extends Controller
{
    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;

    /**
     * Display the toaster test page.
     *
     * @return \Illuminate\View\View
     */
    public function toasterTest()
    {
        return view('utils::admin.tests.toaster');
    }

    /**
     * Test session flash notification.
     *
     * @return \Illuminate\Http\RedirectResponse
     */
    public function testSessionFlash()
    {
        session()->flash('success', 'This is a session flash success notification!');
        
        return redirect()->back();
    }

    /**
     * Test AJAX success notification.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function testAjaxSuccess()
    {
        return response()->json([
            'success' => true,
            'message' => 'This is an AJAX success notification!'
        ]);
    }

    /**
     * Test AJAX error notification.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function testAjaxError()
    {
        return response()->json([
            'success' => false,
            'flash' => [
                'type' => 'error',
                'message' => 'This is an AJAX error notification!'
            ]
        ], 422);
    }
}