trackbugs/resources/views/projects/alerts.blade.php

<x-app-layout>
    @php($currentProject = $project)

    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $project->name }} &mdash; Alert Rules</h2>
    </x-slot>

    <div class="py-8">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8 space-y-6">

            @if(session('status'))
                <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md text-sm">
                    {{ session('status') }}
                </div>
            @endif

            {{-- Alert Rules --}}
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-1">Alert Rules</h3>
                <p class="text-sm text-gray-500 mb-6">Configure when notifications are sent for this project.</p>

                <form method="POST" action="{{ route('projects.alerts.update', $project) }}" class="space-y-6">
                    @csrf
                    @method('PATCH')

                    {{-- New Issue --}}
                    <div class="flex items-center justify-between py-3 border-b border-gray-100">
                        <div>
                            <div class="font-medium text-gray-900">New Issue</div>
                            <div class="text-sm text-gray-500">Notify when a new issue is first seen.</div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="hidden" name="rules[new_issue][enabled]" value="0">
                            <input type="checkbox" name="rules[new_issue][enabled]" value="1" class="sr-only peer" {{ ($rules['new_issue']->enabled ?? true) ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                        </label>
                    </div>

                    {{-- Regression --}}
                    <div class="flex items-center justify-between py-3 border-b border-gray-100">
                        <div>
                            <div class="font-medium text-gray-900">Regression</div>
                            <div class="text-sm text-gray-500">Notify when a resolved issue reappears.</div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="hidden" name="rules[regression][enabled]" value="0">
                            <input type="checkbox" name="rules[regression][enabled]" value="1" class="sr-only peer" {{ ($rules['regression']->enabled ?? true) ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                        </label>
                    </div>

                    {{-- Spike --}}
                    <div class="py-3 border-b border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="font-medium text-gray-900">Event Spike</div>
                                <div class="text-sm text-gray-500">Notify when an issue receives many events in a short window.</div>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="hidden" name="rules[spike][enabled]" value="0">
                                <input type="checkbox" name="rules[spike][enabled]" value="1" class="sr-only peer" {{ ($rules['spike']->enabled ?? true) ? 'checked' : '' }}>
                                <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                            </label>
                        </div>
                        <div class="mt-4 flex items-center gap-4 text-sm">
                            <div class="flex items-center gap-2">
                                <x-input-label for="spike_threshold" value="Threshold" />
                                <x-text-input id="spike_threshold" name="rules[spike][threshold]" type="number" min="1" class="w-20"
                                    :value="$rules['spike']->config['threshold'] ?? 10" />
                                <span class="text-gray-500">events in</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <x-text-input id="spike_window" name="rules[spike][window_minutes]" type="number" min="1" class="w-20"
                                    :value="$rules['spike']->config['window_minutes'] ?? 5" />
                                <span class="text-gray-500">minutes</span>
                            </div>
                        </div>
                    </div>

                    <x-primary-button>Save Alert Rules</x-primary-button>
                </form>
            </div>

            {{-- Personal Notification Preferences --}}
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-1">Your Notification Preferences</h3>
                <p class="text-sm text-gray-500 mb-6">Control how you receive notifications for this project.</p>

                <form method="POST" action="{{ route('projects.alerts.preference', $project) }}" class="space-y-6">
                    @csrf
                    @method('PATCH')

                    <div class="flex items-center justify-between py-3 border-b border-gray-100">
                        <div>
                            <div class="font-medium text-gray-900">Email Notifications</div>
                            <div class="text-sm text-gray-500">Receive alert emails for this project.</div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="hidden" name="email_enabled" value="0">
                            <input type="checkbox" name="email_enabled" value="1" class="sr-only peer" {{ $preference->email_enabled ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                        </label>
                    </div>

                    <div class="flex items-center justify-between py-3 border-b border-gray-100">
                        <div>
                            <div class="font-medium text-gray-900">In-App Notifications</div>
                            <div class="text-sm text-gray-500">Show notifications in the bell icon.</div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="hidden" name="database_enabled" value="0">
                            <input type="checkbox" name="database_enabled" value="1" class="sr-only peer" {{ $preference->database_enabled ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                        </label>
                    </div>

                    <div class="flex items-center justify-between py-3 border-b border-gray-100">
                        <div>
                            <div class="font-medium text-red-600">Mute All</div>
                            <div class="text-sm text-gray-500">Completely suppress all notifications from this project.</div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="hidden" name="muted" value="0">
                            <input type="checkbox" name="muted" value="1" class="sr-only peer" {{ $preference->muted ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-red-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
                        </label>
                    </div>

                    <x-primary-button>Save Preferences</x-primary-button>
                </form>
            </div>

        </div>
    </div>
</x-app-layout>