Atomcms-edit/resources/views/filament/widgets/update-checker.blade.php

<x-filament-widgets::widget>
    <div class="fi-section rounded-xl border-2 {{ $hasAnyUpdate ? 'border-orange-400 dark:border-orange-600' : 'border-green-400 dark:border-green-600' }} bg-white dark:bg-gray-800 shadow-sm p-5 mb-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-full {{ $hasAnyUpdate ? 'bg-orange-100 dark:bg-orange-900/50' : 'bg-green-100 dark:bg-green-900/50' }} flex items-center justify-center text-2xl">
                    {{ $hasAnyUpdate ? '🔄' : '✅' }}
                </div>
                <div class="flex-1">
                    @if($hasAnyUpdate)
                        <div class="font-bold text-lg text-gray-900 dark:text-white">Updates Beschikbaar!</div>
                        <div class="text-gray-500 dark:text-gray-400 text-sm mt-1">Er zijn nieuwe updates beschikbaar</div>
                    @else
                        <div class="font-bold text-lg text-gray-900 dark:text-white">Emulator Status</div>
                        <div class="text-gray-500 dark:text-gray-400 text-sm mt-1">Systeem is up-to-date</div>
                    @endif
                    <div class="flex flex-wrap gap-3 mt-3">
                        @if($emulatorUpdate)
                            <span class="inline-flex items-center gap-2 bg-orange-100 dark:bg-orange-900/30 rounded-lg px-3 py-1.5 text-sm text-orange-700 dark:text-orange-300 font-medium">
                                🖥️ <span class="font-bold">Emulator</span> v{{ $emulatorVersion }} → v{{ $latestEmulatorVersion }}
                            </span>
                        @else
                            <span class="inline-flex items-center gap-2 bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 font-medium">
                                🖥️ <span class="font-bold">Emulator</span> v{{ $emulatorVersion }}
                            </span>
                        @endif
                        @if($nitroUpdate)
                            <span class="inline-flex items-center gap-2 bg-orange-100 dark:bg-orange-900/30 rounded-lg px-3 py-1.5 text-sm text-orange-700 dark:text-orange-300 font-medium">
                                🎮 <span class="font-bold">Client</span> v{{ $nitroVersion }} → v{{ $latestNitroVersion }}
                            </span>
                        @else
                            <span class="inline-flex items-center gap-2 bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 font-medium">
                                🎮 <span class="font-bold">Client</span> v{{ $nitroVersion ?? 'Niet ingesteld' }}
                            </span>
                        @endif
                        <span class="inline-flex items-center gap-2 bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 font-medium">
                            👥 {{ $onlineUsers }} online
                        </span>
                        <span class="inline-flex items-center gap-2 bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 font-medium">
                            💾 {{ $dbSize }} DB
                        </span>
                        <span class="inline-flex items-center gap-2 {{ $sqlPending > 0 ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300' }} rounded-lg px-3 py-1.5 text-sm font-medium">
                            📊 SQL: {{ $sqlApplied }} toegepast{{ $sqlPending > 0 ? ', ' . $sqlPending . ' pending' : '' }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-3 ml-4">
                <a href="/housekeeping/alert-settings" class="inline-flex items-center justify-center rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition">
                    ⚙️ Instellingen
                </a>
                <button wire:click="diagnoseSystem" wire:loading.attr="disabled" class="inline-flex items-center justify-center rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition disabled:opacity-50">
                    <span wire:loading.remove wire:target="diagnoseSystem">🔍 Diagnose</span>
                    <span wire:loading wire:target="diagnoseSystem">⏳...</span>
                </button>
                <button wire:click="repairSystem" wire:loading.attr="disabled" wire:confirm="Systeem repareren? Dit kan eventuele problemen oplossen." class="inline-flex items-center justify-center rounded-lg border border-yellow-500 dark:border-yellow-600 bg-yellow-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-yellow-600 transition disabled:opacity-50">
                    <span wire:loading.remove wire:target="repairSystem">🔧 Reparerer</span>
                    <span wire:loading wire:target="repairSystem">⏳...</span>
                </button>
                @if($hasAnyUpdate)
                    <button wire:click="updateAll" wire:loading.attr="disabled" wire:confirm="Alle updates nu installeren?" class="inline-flex items-center justify-center rounded-lg bg-orange-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-600 transition disabled:opacity-50">
                        <span wire:loading.remove wire:target="updateAll">🔄 Alles Updaten</span>
                        <span wire:loading wire:target="updateAll">⏳ Bezig...</span>
                    </button>
                @else
                    <button wire:click="forceCheck" wire:loading.attr="disabled" class="inline-flex items-center justify-center rounded-lg bg-blue-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 transition disabled:opacity-50">
                        <span wire:loading.remove wire:target="forceCheck">🔍 Check Nu</span>
                        <span wire:loading wire:target="forceCheck">⏳ Bezig...</span>
                    </button>
                @endif
            </div>
        </div>
    </div>
</x-filament-widgets::widget>