Skip to content

E
El-Captain Sports Management
Commit 1e55b9c5 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

Full UX overhaul: tap feedback, close buttons, active states 

Problems fixed:
- -webkit-tap-highlight-color:transparent killed OS default feedback
  but no custom active states existed → users got zero confirmation
  of their taps on mobile. Now ALL buttons/links get scale(0.97) on
  :active via CSS base layer, plus explicit active:bg-* on key buttons.
- No modal/dropdown had a visible X close button → users couldn't
  discover how to dismiss on touch. Added X buttons to: sidebar (mobile),
  topbar user menu, global search dropdown, POS receipt modal, and all
  confirmation modals (enrollment cancel, waitlist, freeze, status change,
  reschedule, evaluation criteria form).
- Sidebar nav links had no hover/press states → added hover:bg-white/10
  and active:bg-white/20 + active:scale-[0.97].
- POS terminal: program cards, quantity +/-, checkout, split-add, mobile
  pay bar all now have active:scale and active:bg-* feedback.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 519e8625
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 78 deletions
resources/css/app.css
View file @ 1e55b9c5
......@@ -3,6 +3,8 @@
@layer base {
html {
direction: rtl;
scroll-behavior: smooth;
-webkit-tap-highlight-color: transparent;
}
/* Touch-friendly minimum heights */
......@@ -12,10 +14,29 @@
min-height: 44px;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
/* Universal button/link press feedback */
button:not(:disabled),
[role="button"],
a[href],
summary {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
button:not(:disabled):active,
[role="button"]:active,
a[href]:active,
summary:active {
transform: scale(0.97);
transition: transform 0.1s ease;
}
/* Prevent stuck hover on touch devices */
@media (hover: none) {
button:hover,
a:hover {
background-color: inherit;
}
}
}
......@@ -26,6 +47,11 @@
.safe-top {
padding-top: env(safe-area-inset-top, 0px);
}
/* Press feedback utility — stronger scale for primary actions */
.press-feedback:active {
transform: scale(0.95) !important;
opacity: 0.9;
}
}
/* Print: hide all app chrome */
......
resources/views/components/layouts/sidebar.blade.php
View file @ 1e55b9c5
......@@ -131,15 +131,20 @@
:class="sidebarOpen ? 'translate-x-0' : 'translate-x-full lg:translate-x-0'"
class="fixed top-0 start-0 h-screen w-64 flex flex-col z-40 overflow-hidden transition-transform duration-300 ease-in-out lg:translate-x-0"
style="background-color: var(--brand-sidebar-bg, #0f172a); color: var(--brand-sidebar-text, #e2e8f0);">
{{-- Logo --}}
<div class="flex items-center justify-center h-16 border-b border-white/10 px-4 shrink-0">
@if(isset($brandLogoDark) && $brandLogoDark && isset($showLogoSidebar) && $showLogoSidebar)
<img src="{{ Storage::disk('public')->url($brandLogoDark) }}" alt="" class="h-10 max-w-[140px] object-contain">
@elseif(isset($brandLogo) && $brandLogo && isset($showLogoSidebar) && $showLogoSidebar)
<img src="{{ Storage::disk('public')->url($brandLogo) }}" alt="" class="h-10 max-w-[140px] object-contain">
@else
<h1 class="text-xl font-bold">الكابتن</h1>
@endif
{{-- Logo + Mobile Close --}}
<div class="flex items-center justify-between h-16 border-b border-white/10 px-4 shrink-0">
<div class="flex items-center justify-center flex-1">
@if(isset($brandLogoDark) && $brandLogoDark && isset($showLogoSidebar) && $showLogoSidebar)
<img src="{{ Storage::disk('public')->url($brandLogoDark) }}" alt="" class="h-10 max-w-[140px] object-contain">
@elseif(isset($brandLogo) && $brandLogo && isset($showLogoSidebar) && $showLogoSidebar)
<img src="{{ Storage::disk('public')->url($brandLogo) }}" alt="" class="h-10 max-w-[140px] object-contain">
@else
<h1 class="text-xl font-bold">الكابتن</h1>
@endif
</div>
<button @click="sidebarOpen = false" class="lg:hidden flex items-center justify-center w-10 h-10 rounded-lg text-white/70 hover:text-white hover:bg-white/10 active:bg-white/20 transition-colors" aria-label="{{ __('إغلاق القائمة') }}">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
{{-- Navigation --}}
......@@ -149,7 +154,7 @@ class="fixed top-0 start-0 h-screen w-64 flex flex-col z-40 overflow-hidden tran
@if(isset($item['route']))
@if(Route::has($item['route']) && $userCan($item['permission']))
<a href="{{ route($item['route']) }}"
class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-150"
class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-150 hover:bg-white/10 active:bg-white/20 active:scale-[0.97]"
style="{{ request()->routeIs($item['route'] . '*') ? 'background-color: var(--brand-sidebar-active, #2563eb); color: #fff;' : 'color: var(--brand-sidebar-text, #e2e8f0);' }}">
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">{!! $icons[$item['icon']] ?? '' !!}</svg>
<span>{{ $item['label'] }}</span>
......@@ -171,7 +176,7 @@ class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transi
@foreach($visibleItems as $child)
<a href="{{ route($child['route']) }}"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-150"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:bg-white/10 active:bg-white/20 active:scale-[0.97]"
style="{{ request()->routeIs(Str::before($child['route'], '.index') . '.*') ? 'background-color: var(--brand-sidebar-active, #2563eb); color: #fff;' : 'color: var(--brand-sidebar-text, #e2e8f0);' }}">
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">{!! $icons[$child['icon']] ?? '' !!}</svg>
<span>{{ $child['label'] }}</span>
......@@ -194,7 +199,7 @@ class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transiti
</div>
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit" class="text-slate-400 hover:text-red-400 transition-colors" title="{{ __('تسجيل الخروج') }}">
<button type="submit" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-400 hover:text-red-400 hover:bg-white/10 active:bg-white/20 transition-colors" title="{{ __('تسجيل الخروج') }}">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
</button>
</form>
......
resources/views/components/layouts/topbar.blade.php
View file @ 1e55b9c5
<header class="sticky top-0 z-30 bg-white border-b border-gray-200 safe-top" data-topbar>
<div class="flex items-center justify-between h-14 sm:h-16 px-3 sm:px-6 lg:px-8">
<!-- Mobile menu button -->
<button @click="sidebarOpen = !sidebarOpen" class="lg:hidden p-2 -ms-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
<button @click="sidebarOpen = !sidebarOpen" class="lg:hidden p-2 -ms-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
......@@ -25,7 +25,7 @@
</div>
<!-- Notifications (icon only on mobile) -->
<a href="{{ route('notifications.center') }}" class="relative p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
<a href="{{ route('notifications.center') }}" class="relative p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
</a>
......@@ -37,15 +37,22 @@
<!-- User Menu -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center gap-2 p-1.5 rounded-lg hover:bg-gray-100 transition-colors">
<button @click="open = !open" class="flex items-center gap-2 p-1.5 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
<div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style="background-color: var(--brand-primary, #2563eb);">
<span class="text-xs font-medium text-white">{{ mb_substr(auth()->user()->name_ar ?? auth()->user()->name, 0, 1) }}</span>
</div>
<span class="hidden sm:inline text-sm text-gray-700 max-w-[100px] truncate">{{ auth()->user()->name_ar ?? auth()->user()->name }}</span>
<svg class="w-4 h-4 text-gray-400 hidden sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
<svg class="w-4 h-4 text-gray-400 hidden sm:block transition-transform" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</button>
<div x-show="open" @click.outside="open = false" x-transition
class="absolute end-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray-200 z-50 py-2">
<!-- Close button (touch-friendly) -->
<div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 mb-1">
<span class="text-xs font-medium text-gray-500">{{ __('القائمة') }}</span>
<button @click="open = false" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="{{ __('إغلاق') }}">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<!-- Mobile-only items inside menu -->
<div class="sm:hidden px-4 py-2 border-b border-gray-100 mb-1">
@livewire('branch-switcher')
......@@ -54,18 +61,18 @@ class="absolute end-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray
@livewire('components.language-switcher')
@livewire('components.dark-mode-toggle')
</div>
<a href="{{ route('profile') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">
<a href="{{ route('profile') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-colors">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
{{ __('الملف الشخصي') }}
</a>
<a href="{{ route('profile.notifications') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">
<a href="{{ route('profile.notifications') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-colors">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
{{ __('تفضيلات الإشعارات') }}
</a>
<div class="border-t border-gray-100 mt-1 pt-1">
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit" class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50">
<button type="submit" class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 active:bg-red-100 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
{{ __('تسجيل الخروج') }}
</button>
......
resources/views/components/ui/print-receipt-button.blade.php
View file @ 1e55b9c5
......@@ -17,7 +17,7 @@
win.focus();
}
"
{{ $attributes->merge(['class' => "inline-flex items-center justify-center {$sizeClasses} bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"]) }}
{{ $attributes->merge(['class' => "inline-flex items-center justify-center {$sizeClasses} bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 active:bg-green-800 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all"]) }}
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
......
resources/views/livewire/assignments/assignment-list.blade.php
View file @ 1e55b9c5
......@@ -4,7 +4,7 @@
<h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('التكليفات') }}</h1>
@can('assignments.create')
<a href="{{ route('assignments.create') }}" wire:navigate
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 text-sm font-medium transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
<span class="hidden sm:inline">{{ __('تكليف جديد') }}</span>
</a>
......@@ -140,7 +140,7 @@ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 f
<button wire:click="suspend('{{ $assignment->uuid }}')"
wire:loading.attr="disabled"
wire:target="suspend('{{ $assignment->uuid }}')"
class="text-amber-600 hover:text-amber-800 text-sm"
class="text-amber-600 hover:text-amber-800 active:text-amber-900 text-sm"
title="{{ __('تعليق') }}">
<span wire:loading.remove wire:target="suspend('{{ $assignment->uuid }}')">{{ __('تعليق') }}</span>
<span wire:loading wire:target="suspend('{{ $assignment->uuid }}')">...</span>
......@@ -150,7 +150,7 @@ class="text-amber-600 hover:text-amber-800 text-sm"
<button wire:click="activate('{{ $assignment->uuid }}')"
wire:loading.attr="disabled"
wire:target="activate('{{ $assignment->uuid }}')"
class="text-green-600 hover:text-green-800 text-sm"
class="text-green-600 hover:text-green-800 active:text-green-900 text-sm"
title="{{ __('تنشيط') }}">
<span wire:loading.remove wire:target="activate('{{ $assignment->uuid }}')">{{ __('تنشيط') }}</span>
<span wire:loading wire:target="activate('{{ $assignment->uuid }}')">...</span>
......@@ -161,7 +161,7 @@ class="text-green-600 hover:text-green-800 text-sm"
wire:loading.attr="disabled"
wire:target="cancel('{{ $assignment->uuid }}')"
wire:confirm="{{ __('هل أنت متأكد من إلغاء هذا التكليف؟') }}"
class="text-red-600 hover:text-red-800 text-sm"
class="text-red-600 hover:text-red-800 active:text-red-900 text-sm"
title="{{ __('إلغاء') }}">
<span wire:loading.remove wire:target="cancel('{{ $assignment->uuid }}')">{{ __('إلغاء') }}</span>
<span wire:loading wire:target="cancel('{{ $assignment->uuid }}')">...</span>
......@@ -181,7 +181,7 @@ class="text-red-600 hover:text-red-800 text-sm"
<p class="text-gray-500 text-sm">{{ __('لا يوجد تكليفات') }}</p>
@can('assignments.create')
<a href="{{ route('assignments.create') }}" wire:navigate
class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
class="mt-2 text-blue-600 hover:text-blue-800 active:text-blue-900 text-sm font-medium">
{{ __('إنشاء أول تكليف') }}
</a>
@endcan
......@@ -283,7 +283,7 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
<button wire:click="suspend('{{ $assignment->uuid }}')"
wire:loading.attr="disabled"
wire:target="suspend('{{ $assignment->uuid }}')"
class="py-2 text-amber-600 hover:text-amber-800 text-sm font-medium"
class="py-2 text-amber-600 hover:text-amber-800 active:text-amber-900 text-sm font-medium"
title="{{ __('تعليق') }}">
<span wire:loading.remove wire:target="suspend('{{ $assignment->uuid }}')">{{ __('تعليق') }}</span>
<span wire:loading wire:target="suspend('{{ $assignment->uuid }}')">...</span>
......@@ -293,7 +293,7 @@ class="py-2 text-amber-600 hover:text-amber-800 text-sm font-medium"
<button wire:click="activate('{{ $assignment->uuid }}')"
wire:loading.attr="disabled"
wire:target="activate('{{ $assignment->uuid }}')"
class="py-2 text-green-600 hover:text-green-800 text-sm font-medium"
class="py-2 text-green-600 hover:text-green-800 active:text-green-900 text-sm font-medium"
title="{{ __('تنشيط') }}">
<span wire:loading.remove wire:target="activate('{{ $assignment->uuid }}')">{{ __('تنشيط') }}</span>
<span wire:loading wire:target="activate('{{ $assignment->uuid }}')">...</span>
......@@ -304,7 +304,7 @@ class="py-2 text-green-600 hover:text-green-800 text-sm font-medium"
wire:loading.attr="disabled"
wire:target="cancel('{{ $assignment->uuid }}')"
wire:confirm="{{ __('هل أنت متأكد من إلغاء هذا التكليف؟') }}"
class="py-2 text-red-600 hover:text-red-800 text-sm font-medium"
class="py-2 text-red-600 hover:text-red-800 active:text-red-900 text-sm font-medium"
title="{{ __('إلغاء') }}">
<span wire:loading.remove wire:target="cancel('{{ $assignment->uuid }}')">{{ __('إلغاء') }}</span>
<span wire:loading wire:target="cancel('{{ $assignment->uuid }}')">...</span>
......@@ -322,7 +322,7 @@ class="py-2 text-red-600 hover:text-red-800 text-sm font-medium"
<p class="text-gray-500 text-sm">{{ __('لا يوجد تكليفات') }}</p>
@can('assignments.create')
<a href="{{ route('assignments.create') }}" wire:navigate
class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
class="mt-2 text-blue-600 hover:text-blue-800 active:text-blue-900 text-sm font-medium">
{{ __('إنشاء أول تكليف') }}
</a>
@endcan
......
resources/views/livewire/enrollments/enrollment-list.blade.php
View file @ 1e55b9c5
......@@ -137,7 +137,12 @@ class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
@keydown.escape.window="showCancel = false">
<div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md mx-4"
@click.outside="showCancel = false">
<h3 class="text-lg font-bold text-gray-800 mb-4">{{ __('تأكيد إلغاء التسجيل') }}</h3>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-gray-800">{{ __('تأكيد إلغاء التسجيل') }}</h3>
<button @click="showCancel = false" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<p class="text-sm text-gray-600 mb-4">
{{ __('هل أنت متأكد من إلغاء تسجيل') }}
<strong>{{ $enrollment->participant?->person?->name_ar }}</strong>؟
......@@ -148,11 +153,11 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focu
placeholder="{{ __('سبب الإلغاء (مطلوب)...') }}"></textarea>
<div class="flex items-center justify-end gap-3">
<button @click="showCancel = false"
class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg">
class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-gray-200 rounded-lg">
{{ __('تراجع') }}
</button>
<button @click="if(reason.trim()) { $wire.cancelEnrollment({{ $enrollment->id }}, reason); showCancel = false; }"
class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 active:bg-red-800 disabled:opacity-50"
:disabled="!reason.trim()">
<span wire:loading.remove wire:target="cancelEnrollment">{{ __('تأكيد الإلغاء') }}</span>
<span wire:loading wire:target="cancelEnrollment">{{ __('جارٍ الإلغاء...') }}</span>
......@@ -265,7 +270,12 @@ class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
@keydown.escape.window="showCancel = false">
<div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md mx-4"
@click.outside="showCancel = false">
<h3 class="text-lg font-bold text-gray-800 mb-4">{{ __('تأكيد إلغاء التسجيل') }}</h3>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-gray-800">{{ __('تأكيد إلغاء التسجيل') }}</h3>
<button @click="showCancel = false" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<p class="text-sm text-gray-600 mb-4">
{{ __('هل أنت متأكد من إلغاء تسجيل') }}
<strong>{{ $enrollment->participant?->person?->name_ar }}</strong>؟
......@@ -276,11 +286,11 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focu
placeholder="{{ __('سبب الإلغاء (مطلوب)...') }}"></textarea>
<div class="flex items-center justify-end gap-3">
<button @click="showCancel = false"
class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg">
class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-gray-200 rounded-lg">
{{ __('تراجع') }}
</button>
<button @click="if(reason.trim()) { $wire.cancelEnrollment({{ $enrollment->id }}, reason); showCancel = false; }"
class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 active:bg-red-800 disabled:opacity-50"
:disabled="!reason.trim()">
<span wire:loading.remove wire:target="cancelEnrollment">{{ __('تأكيد الإلغاء') }}</span>
<span wire:loading wire:target="cancelEnrollment">{{ __('جارٍ الإلغاء...') }}</span>
......
resources/views/livewire/enrollments/waitlist-manager.blade.php
View file @ 1e55b9c5
......@@ -108,7 +108,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<button wire:click="promote({{ $enrollment->id }})"
wire:loading.attr="disabled"
wire:target="promote({{ $enrollment->id }})"
class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium bg-green-600 text-white rounded-lg hover:bg-green-700 active:bg-green-800 disabled:opacity-50"
title="{{ __('ترقية إلى معلق') }}">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
<span wire:loading.remove wire:target="promote({{ $enrollment->id }})">{{ __('ترقية') }}</span>
......@@ -118,7 +118,7 @@ class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium bg-green-6
@can('enrollments.cancel')
<button @click="showCancel = true"
class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100">
class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 active:bg-red-200">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
{{ __('إلغاء') }}
</button>
......@@ -129,7 +129,12 @@ class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
@keydown.escape.window="showCancel = false">
<div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md mx-4"
@click.outside="showCancel = false">
<h3 class="text-lg font-bold text-gray-800 mb-4">{{ __('تأكيد إلغاء الانتظار') }}</h3>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-gray-800">{{ __('تأكيد إلغاء الانتظار') }}</h3>
<button @click="showCancel = false" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<p class="text-sm text-gray-600 mb-4">
{{ __('هل أنت متأكد من إلغاء انتظار') }}
<strong>{{ $enrollment->participant?->person?->name_ar }}</strong>؟
......@@ -140,11 +145,11 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focu
placeholder="{{ __('سبب الإلغاء (مطلوب)...') }}"></textarea>
<div class="flex items-center justify-end gap-3">
<button @click="showCancel = false"
class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg">
class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-gray-200 rounded-lg">
{{ __('تراجع') }}
</button>
<button @click="if(reason.trim()) { $wire.cancel({{ $enrollment->id }}, reason); showCancel = false; }"
class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 active:bg-red-800 disabled:opacity-50"
:disabled="!reason.trim()">
<span wire:loading.remove wire:target="cancel">{{ __('تأكيد الإلغاء') }}</span>
<span wire:loading wire:target="cancel">{{ __('جارٍ الإلغاء...') }}</span>
......
resources/views/livewire/evaluations/evaluation-criteria-list.blade.php
View file @ 1e55b9c5
......@@ -8,7 +8,7 @@
<button
type="button"
wire:click="openForm"
class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
{{ __('معيار جديد') }}
</button>
......@@ -32,9 +32,14 @@ class="w-full max-w-sm rounded-lg border-gray-300 shadow-sm focus:border-blue-50
<!-- Form Modal -->
@if($showForm)
<div class="mb-6 bg-white border border-gray-200 rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">
{{ $editingId ? __('تعديل المعيار') : __('إضافة معيار جديد') }}
</h3>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-gray-800">
{{ $editingId ? __('تعديل المعيار') : __('إضافة معيار جديد') }}
</h3>
<button wire:click="closeForm" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div class="sm:col-span-2 lg:col-span-1">
......@@ -85,12 +90,12 @@ class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<div class="mt-4 flex items-center gap-3">
<button type="button" wire:click="save" wire:loading.attr="disabled" wire:target="save"
class="px-5 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
class="px-5 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 active:bg-blue-800 disabled:bg-blue-400 transition-colors">
<span wire:loading.remove wire:target="save">{{ __('حفظ') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button>
<button type="button" wire:click="closeForm"
class="px-5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
class="px-5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-200 transition-colors">
{{ __('إلغاء') }}
</button>
</div>
......@@ -144,13 +149,13 @@ class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full bo
<td class="px-4 py-3 whitespace-nowrap">
<div class="flex items-center gap-2">
<button type="button" wire:click="openForm({{ $criterion->id }})"
class="text-blue-600 hover:text-blue-800 text-xs font-medium">
class="text-blue-600 hover:text-blue-800 active:text-blue-900 text-xs font-medium">
{{ __('تعديل') }}
</button>
<button type="button"
wire:click="delete({{ $criterion->id }})"
wire:confirm="{{ __('هل أنت متأكد من حذف هذا المعيار؟') }}"
class="text-red-600 hover:text-red-800 text-xs font-medium">
class="text-red-600 hover:text-red-800 active:text-red-900 text-xs font-medium">
{{ __('حذف') }}
</button>
</div>
......
resources/views/livewire/global-search.blade.php
View file @ 1e55b9c5
......@@ -12,12 +12,19 @@ class="w-full sm:w-64 px-4 py-2 ps-10 text-sm border border-gray-300 rounded-lg
<div x-show="open" x-transition
class="absolute top-full mt-2 w-full sm:w-96 bg-white rounded-xl shadow-xl border border-gray-200 z-50 max-h-96 overflow-y-auto">
{{-- Close button for touch --}}
<div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 sticky top-0 bg-white z-10">
<span class="text-xs font-medium text-gray-500">{{ __('نتائج البحث') }}</span>
<button @click="open = false; $wire.set('query', '')" class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="{{ __('إغلاق') }}">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
@if(empty($results))
<div class="p-4 text-center text-gray-400 text-sm">{{ __('لا توجد نتائج') }}</div>
@else
@foreach($results as $result)
<button wire:click="selectResult('{{ $result['url'] }}')"
class="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition text-start border-b border-gray-100 last:border-0">
class="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-50 active:bg-blue-50 transition-colors text-start border-b border-gray-100 last:border-0">
<div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
{{ $result['type'] === 'participant' ? 'bg-blue-100 text-blue-600' :
($result['type'] === 'invoice' ? 'bg-green-100 text-green-600' : 'bg-purple-100 text-purple-600') }}">
......
resources/views/livewire/invoices/invoice-show.blade.php
View file @ 1e55b9c5
......@@ -294,7 +294,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<button type="button" wire:click="recordPayment"
wire:loading.attr="disabled"
wire:target="recordPayment"
class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed">
class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 active:bg-green-800 active:scale-[0.97] font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-all">
<span wire:loading.remove wire:target="recordPayment">{{ __('تسجيل الدفعة') }}</span>
<span wire:loading wire:target="recordPayment">
<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
......@@ -314,7 +314,7 @@ class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 te
wire:loading.attr="disabled"
wire:target="cancelInvoice"
wire:confirm="{{ __('هل أنت متأكد من إلغاء هذه الفاتورة؟') }}"
class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-red-50 text-red-600 border border-red-200 rounded-lg hover:bg-red-100 font-medium text-sm disabled:opacity-50">
class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-red-50 text-red-600 border border-red-200 rounded-lg hover:bg-red-100 active:bg-red-200 active:scale-[0.97] font-medium text-sm disabled:opacity-50 transition-all">
<span wire:loading.remove wire:target="cancelInvoice">{{ __('إلغاء الفاتورة') }}</span>
<span wire:loading wire:target="cancelInvoice">{{ __('جارٍ الإلغاء...') }}</span>
</button>
......
resources/views/livewire/participants/freeze-participant.blade.php
View file @ 1e55b9c5
......@@ -12,9 +12,14 @@
@if($showModal)
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" wire:click.self="$set('showModal', false)">
<div class="bg-white rounded-xl shadow-xl w-full max-w-md p-4 sm:p-6">
<h3 class="text-base sm:text-lg font-bold text-gray-800 mb-4">
{{ $action === 'freeze' ? __('تجميد المشترك') : __('إلغاء تجميد المشترك') }}
</h3>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-gray-800">
{{ $action === 'freeze' ? __('تجميد المشترك') : __('إلغاء تجميد المشترك') }}
</h3>
<button wire:click="$set('showModal', false)" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<p class="text-sm text-gray-600 mb-4">
{{ $action === 'freeze'
? __('سيتم تعليق جميع الأنشطة للمشترك. يمكن إلغاء التجميد لاحقاً.')
......@@ -28,11 +33,11 @@
@error('reason') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
</div>
<div class="flex flex-col-reverse sm:flex-row gap-3 sm:justify-end">
<button wire:click="$set('showModal', false)" class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800">
<button wire:click="$set('showModal', false)" class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800 active:bg-gray-200 rounded-lg">
{{ __('إلغاء') }}
</button>
<button wire:click="confirm" wire:loading.attr="disabled"
class="w-full sm:w-auto px-4 py-2.5 text-sm text-white rounded-lg {{ $action === 'freeze' ? 'bg-blue-600 hover:bg-blue-700' : 'bg-green-600 hover:bg-green-700' }} disabled:opacity-50">
class="w-full sm:w-auto px-4 py-2.5 text-sm text-white rounded-lg {{ $action === 'freeze' ? 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800' : 'bg-green-600 hover:bg-green-700 active:bg-green-800' }} disabled:opacity-50">
<span wire:loading.remove wire:target="confirm">{{ __('تأكيد') }}</span>
<span wire:loading wire:target="confirm">{{ __('جارٍ...') }}</span>
</button>
......
resources/views/livewire/participants/participant-show.blade.php
View file @ 1e55b9c5
......@@ -685,9 +685,14 @@ class="px-3 py-1.5 text-xs font-medium bg-{{ $transColor }}-50 text-{{ $transCol
<div class="fixed inset-0 z-50 flex items-center justify-center" x-data>
<div class="fixed inset-0 bg-black/50" wire:click="closeStatusModal"></div>
<div class="relative bg-white rounded-xl shadow-xl w-full max-w-md mx-4 p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">
{{ __('تغيير الحالة إلى') }}: {{ __($statusLabels[$newStatus] ?? $newStatus) }}
</h3>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-gray-800">
{{ __('تغيير الحالة إلى') }}: {{ __($statusLabels[$newStatus] ?? $newStatus) }}
</h3>
<button wire:click="closeStatusModal" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<form wire:submit="changeStatus">
<div class="mb-4">
......@@ -700,13 +705,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div class="flex items-center justify-end gap-3">
<button type="button" wire:click="closeStatusModal"
class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm">
class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 active:bg-gray-200 text-sm">
{{ __('إلغاء') }}
</button>
<button type="submit"
wire:loading.attr="disabled"
wire:target="changeStatus"
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 disabled:opacity-50 text-sm font-medium">
<span wire:loading.remove wire:target="changeStatus">{{ __('تأكيد') }}</span>
<span wire:loading wire:target="changeStatus">{{ __('جارٍ التنفيذ...') }}</span>
</button>
......
resources/views/livewire/training/reschedule-session.blade.php
View file @ 1e55b9c5
<div>
@if($session->status === 'scheduled')
<button wire:click="open" class="px-3 py-2.5 text-xs bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200">
<button wire:click="open" class="px-3 py-2.5 text-xs bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200 active:bg-yellow-300 transition-colors">
{{ __('إعادة جدولة') }}
</button>
@endif
......@@ -8,7 +8,12 @@
@if($showModal)
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" wire:click.self="$set('showModal', false)">
<div class="bg-white rounded-xl shadow-xl w-full max-w-md p-4 sm:p-6">
<h3 class="text-base sm:text-lg font-bold text-gray-800 mb-4">{{ __('إعادة جدولة الحصة') }}</h3>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-gray-800">{{ __('إعادة جدولة الحصة') }}</h3>
<button wire:click="$set('showModal', false)" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<div class="space-y-4">
<div>
......@@ -39,11 +44,11 @@
</div>
<div class="flex flex-col-reverse sm:flex-row gap-2 sm:gap-2 sm:justify-end mt-6">
<button wire:click="$set('showModal', false)" class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800 rounded-lg hover:bg-gray-100">
<button wire:click="$set('showModal', false)" class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
{{ __('إلغاء') }}
</button>
<button wire:click="reschedule" wire:loading.attr="disabled"
class="w-full sm:w-auto px-4 py-2.5 text-sm text-white bg-yellow-600 rounded-lg hover:bg-yellow-700 disabled:opacity-50">
class="w-full sm:w-auto px-4 py-2.5 text-sm text-white bg-yellow-600 rounded-lg hover:bg-yellow-700 active:bg-yellow-800 disabled:opacity-50 transition-colors">
<span wire:loading.remove wire:target="reschedule">{{ __('تأكيد') }}</span>
<span wire:loading wire:target="reschedule">{{ __('جارٍ...') }}</span>
</button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment