Skip to content

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

Comprehensive mobile-first responsive overhaul of entire UI 

- All 96 blade views optimized for mobile (touch targets, responsive
  grids, stacked layouts)
- Guest/login layout: respects branding CSS vars, touch-friendly inputs
- Sidebar: RTL-correct mobile slide-in with backdrop blur
- Topbar: compact mobile layout, overflow actions in user dropdown
- All list views: dual layout (desktop table + mobile cards)
- All forms: responsive padding, stacked submit buttons, 44px inputs
- Attendance: 4-col action grid on mobile for quick marking
- POS terminal: sticky bottom cart bar, radio card payment methods
- Dashboard/receptionist: 2x2 stat grids, large action cards
- app.css: safe-area utilities, print styles, touch min-heights
- Zero RTL violations (logical properties only: ms/me/ps/pe/start/end)
- Branding CSS vars respected throughout (--brand-primary etc.)
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent f00b5c97
Hide whitespace changes
Inline Side-by-side
Showing with 2620 additions and 1576 deletions
resources/css/app.css
View file @ 944501f1
...@@ -4,4 +4,44 @@ ...@@ -4,4 +4,44 @@
html { html {
direction: rtl; direction: rtl;
} }
/* Touch-friendly minimum heights */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
min-height: 44px;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
-webkit-tap-highlight-color: transparent;
}
}
@layer utilities {
.safe-bottom {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.safe-top {
padding-top: env(safe-area-inset-top, 0px);
}
}
/* Print: hide all app chrome */
@media print {
aside, nav, header, .no-print, [data-topbar], .print\:hidden {
display: none !important;
}
main {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
body {
background: white !important;
}
.lg\:ms-64 {
margin-inline-start: 0 !important;
}
} }
resources/views/components/layouts/sidebar.blade.php
View file @ 944501f1
...@@ -127,7 +127,10 @@ ...@@ -127,7 +127,10 @@
}; };
@endphp @endphp
<aside dir="rtl" class="fixed top-0 start-0 h-screen w-64 flex flex-col z-40 overflow-hidden" style="background-color: var(--brand-sidebar-bg, #0f172a); color: var(--brand-sidebar-text, #e2e8f0);"> <aside dir="rtl"
: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 --}} {{-- Logo --}}
<div class="flex items-center justify-center h-16 border-b border-white/10 px-4 shrink-0"> <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) @if(isset($brandLogoDark) && $brandLogoDark && isset($showLogoSidebar) && $showLogoSidebar)
......
resources/views/components/layouts/topbar.blade.php
View file @ 944501f1
<header class="sticky top-0 z-30 bg-white border-b border-gray-200"> <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-16 px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-14 sm:h-16 px-3 sm:px-6 lg:px-8">
<!-- Mobile menu button --> <!-- Mobile menu button -->
<button @click="sidebarOpen = !sidebarOpen" class="lg:hidden text-gray-500 hover:text-gray-700"> <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">
<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> <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> </button>
<!-- Academy name --> <!-- Academy name -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 min-w-0">
<h2 class="text-lg font-semibold text-gray-800"> <h2 class="text-sm sm:text-lg font-semibold text-gray-800 truncate">
{{ app()->bound('current_academy') ? app('current_academy')->name_ar : 'الكابتن' }} {{ app()->bound('current_academy') ? app('current_academy')->name_ar : 'الكابتن' }}
</h2> </h2>
</div> </div>
<!-- Center: Global Search --> <!-- Center: Global Search (hidden on mobile) -->
<div class="hidden md:block flex-1 max-w-md mx-4"> <div class="hidden md:block flex-1 max-w-md mx-4">
@livewire('global-search') @livewire('global-search')
</div> </div>
<!-- Right side --> <!-- Right side: Desktop actions -->
<div class="flex items-center gap-4"> <div class="flex items-center gap-2 sm:gap-4">
<!-- Branch Switcher --> <!-- Branch Switcher (always visible — compact on mobile) -->
@livewire('branch-switcher') <div class="hidden sm:block">
@livewire('branch-switcher')
</div>
<!-- Notifications --> <!-- Notifications (icon only on mobile) -->
<a href="{{ route('notifications.center') }}" class="relative text-gray-500 hover:text-gray-700"> <a href="{{ route('notifications.center') }}" class="relative p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 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="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> <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> </a>
<!-- Language Switcher --> <!-- Desktop-only: Language + Dark Mode -->
@livewire('components.language-switcher') <div class="hidden lg:flex items-center gap-2">
@livewire('components.language-switcher')
<!-- Dark Mode --> @livewire('components.dark-mode-toggle')
@livewire('components.dark-mode-toggle') </div>
<!-- User Menu --> <!-- User Menu -->
<div x-data="{ open: false }" class="relative"> <div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center gap-2 text-sm text-gray-700 hover:text-gray-900"> <button @click="open = !open" class="flex items-center gap-2 p-1.5 rounded-lg hover:bg-gray-100 transition-colors">
<span class="hidden sm:inline">{{ auth()->user()->name_ar ?? auth()->user()->name }}</span> <div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style="background-color: var(--brand-primary, #2563eb);">
<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="M19 9l-7 7-7-7"/></svg> <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>
</button> </button>
<div x-show="open" @click.outside="open = false" x-transition <div x-show="open" @click.outside="open = false" x-transition
class="absolute end-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50 py-1"> class="absolute end-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray-200 z-50 py-2">
<a href="{{ route('profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">{{ __('الملف الشخصي') }}</a> <!-- Mobile-only items inside menu -->
<a href="{{ route('profile.notifications') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">{{ __('تفضيلات الإشعارات') }}</a> <div class="sm:hidden px-4 py-2 border-b border-gray-100 mb-1">
<form method="POST" action="{{ route('logout') }}"> @livewire('branch-switcher')
@csrf </div>
<button type="submit" class="w-full text-start px-4 py-2 text-sm text-red-600 hover:bg-red-50">{{ __('تسجيل الخروج') }}</button> <div class="lg:hidden px-4 py-2 border-b border-gray-100 mb-1 flex items-center gap-3">
</form> @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">
<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">
<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">
<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>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>
......
resources/views/layouts/app.blade.php
View file @ 944501f1
...@@ -50,33 +50,34 @@ ...@@ -50,33 +50,34 @@
</style> </style>
</head> </head>
<body class="h-full bg-gray-50"> <body class="h-full bg-gray-50">
<div x-data="{ sidebarOpen: false }" class="min-h-full"> <div x-data="{ sidebarOpen: false }" class="min-h-full" @keydown.escape.window="sidebarOpen = false">
<!-- Mobile sidebar overlay --> <!-- Mobile sidebar overlay -->
<div x-show="sidebarOpen" x-transition:enter="transition-opacity ease-linear duration-300" <div x-show="sidebarOpen" x-cloak
x-transition:enter="transition-opacity ease-linear duration-300"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave="transition-opacity ease-linear duration-300"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
class="fixed inset-0 z-30 bg-gray-600/75 lg:hidden" @click="sidebarOpen = false"> class="fixed inset-0 z-30 bg-gray-900/60 backdrop-blur-sm lg:hidden" @click="sidebarOpen = false">
</div> </div>
<!-- Sidebar (sidebar.blade.php owns its own positioning) --> <!-- Sidebar -->
@include('components.layouts.sidebar') @include('components.layouts.sidebar')
<!-- Main content area --> <!-- Main content area -->
<div class="lg:ms-64"> <div class="lg:ms-64 min-h-screen flex flex-col">
<!-- Topbar --> <!-- Topbar -->
@include('components.layouts.topbar') @include('components.layouts.topbar')
<!-- Page content --> <!-- Page content -->
<main class="p-4 sm:p-6 lg:p-8"> <main class="flex-1 p-3 sm:p-5 lg:p-8 pb-20 sm:pb-8">
<!-- Flash messages --> <!-- Flash messages -->
@if(session('success')) @if(session('success'))
<div class="mb-4 rounded-md bg-green-50 p-4 border border-green-200"> <div class="mb-4 rounded-lg bg-green-50 p-3 sm:p-4 border border-green-200">
<p class="text-sm text-green-700">{{ session('success') }}</p> <p class="text-sm text-green-700">{{ session('success') }}</p>
</div> </div>
@endif @endif
@if(session('error')) @if(session('error'))
<div class="mb-4 rounded-md bg-red-50 p-4 border border-red-200"> <div class="mb-4 rounded-lg bg-red-50 p-3 sm:p-4 border border-red-200">
<p class="text-sm text-red-700">{{ session('error') }}</p> <p class="text-sm text-red-700">{{ session('error') }}</p>
</div> </div>
@endif @endif
......
resources/views/layouts/guest.blade.php
View file @ 944501f1
@php
$branding = app(\App\Domain\Shared\Services\SettingsService::class);
$brandPrimary = $branding->get('branding.primary_color', '#2563eb');
$brandSecondary = $branding->get('branding.secondary_color', '#7c3aed');
$brandFontAr = $branding->get('branding.font_family_ar', 'Cairo');
$brandFontEn = $branding->get('branding.font_family_en', 'Inter');
$brandLogo = $branding->get('branding.logo');
@endphp
<!DOCTYPE html> <!DOCTYPE html>
<html dir="rtl" lang="ar" class="h-full"> <html dir="rtl" lang="ar" class="h-full">
<head> <head>
...@@ -5,16 +13,25 @@ ...@@ -5,16 +13,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}"> <meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ $title ?? 'تسجيل الدخول' }} - الكابتن</title> <title>{{ $title ?? 'تسجيل الدخول' }} - الكابتن</title>
@if($favicon = $branding->get('branding.favicon'))
<link rel="icon" href="{{ Storage::disk('public')->url($favicon) }}" type="image/png">
@endif
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family={{ urlencode($brandFontAr) }}:wght@300;400;500;600;700;800&family={{ urlencode($brandFontEn) }}:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles @livewireStyles
<style> <style>
body { font-family: 'Cairo', sans-serif; } :root {
--brand-primary: {{ $brandPrimary }};
--brand-secondary: {{ $brandSecondary }};
}
body {
font-family: '{{ $brandFontAr }}', '{{ $brandFontEn }}', sans-serif;
}
</style> </style>
</head> </head>
<body class="h-full bg-gray-100"> <body class="h-full bg-gray-100">
<div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="min-h-full flex items-center justify-center py-6 sm:py-12 px-4 sm:px-6 lg:px-8 safe-top safe-bottom">
<div class="w-full max-w-md"> <div class="w-full max-w-md">
{{ $slot }} {{ $slot }}
</div> </div>
......
resources/views/livewire/activities/activity-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل النشاط') : __('إضافة نشاط جديد') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل النشاط') : __('إضافة نشاط جديد') }}</h1>
<a href="{{ route('activities.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a> <a href="{{ route('activities.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a>
</div> </div>
...@@ -12,13 +12,13 @@ ...@@ -12,13 +12,13 @@
@endif @endif
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
{{-- Name AR --}} {{-- Name AR --}}
<div> <div>
<label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم النشاط بالعربية') }} *</label> <label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم النشاط بالعربية') }} *</label>
<input type="text" id="name_ar" wire:model="name_ar" <input type="text" id="name_ar" wire:model="name_ar"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -26,7 +26,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -26,7 +26,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم النشاط بالإنجليزية') }} *</label> <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم النشاط بالإنجليزية') }} *</label>
<input type="text" id="name" wire:model="name" dir="ltr" <input type="text" id="name" wire:model="name" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
@error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -34,7 +34,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -34,7 +34,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="slug" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المعرف (slug)') }}</label> <label for="slug" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المعرف (slug)') }}</label>
<input type="text" id="slug" wire:model="slug" dir="ltr" <input type="text" id="slug" wire:model="slug" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="auto-generated"> placeholder="auto-generated">
<p class="mt-1 text-xs text-gray-400">{{ __('يُولّد تلقائيًا إن تُرك فارغًا') }}</p> <p class="mt-1 text-xs text-gray-400">{{ __('يُولّد تلقائيًا إن تُرك فارغًا') }}</p>
</div> </div>
...@@ -43,7 +43,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -43,7 +43,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="category" class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيف') }} *</label> <label for="category" class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيف') }} *</label>
<select id="category" wire:model="category" <select id="category" wire:model="category"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('category') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('category') border-red-500 @enderror">
<option value="sport">{{ __('رياضة') }}</option> <option value="sport">{{ __('رياضة') }}</option>
<option value="art">{{ __('فنون') }}</option> <option value="art">{{ __('فنون') }}</option>
<option value="academic">{{ __('أكاديمي') }}</option> <option value="academic">{{ __('أكاديمي') }}</option>
...@@ -60,7 +60,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -60,7 +60,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<input type="color" wire:model.live="color" <input type="color" wire:model.live="color"
class="w-10 h-10 rounded border border-gray-300 cursor-pointer p-0.5"> class="w-10 h-10 rounded border border-gray-300 cursor-pointer p-0.5">
<input type="text" wire:model.live="color" dir="ltr" <input type="text" wire:model.live="color" dir="ltr"
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" class="flex-1 text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="#3B82F6"> placeholder="#3B82F6">
</div> </div>
</div> </div>
...@@ -69,28 +69,28 @@ class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -69,28 +69,28 @@ class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="sort_order" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الترتيب') }}</label> <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الترتيب') }}</label>
<input type="number" id="sort_order" wire:model="sort_order" min="0" dir="ltr" <input type="number" id="sort_order" wire:model="sort_order" min="0" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sort_order') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sort_order') border-red-500 @enderror">
@error('sort_order') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('sort_order') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
{{-- Description AR --}} {{-- Description AR --}}
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label for="description_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالعربية') }}</label> <label for="description_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالعربية') }}</label>
<textarea id="description_ar" wire:model="description_ar" rows="2" <textarea id="description_ar" wire:model="description_ar" rows="2"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
</div> </div>
{{-- Description EN --}} {{-- Description EN --}}
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label for="description" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالإنجليزية') }}</label> <label for="description" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالإنجليزية') }}</label>
<textarea id="description" wire:model="description" rows="2" dir="ltr" <textarea id="description" wire:model="description" rows="2" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
</div> </div>
</div> </div>
{{-- Is Active --}} {{-- Is Active --}}
<div class="mt-4"> <div class="mt-4">
<label class="flex items-center gap-2 cursor-pointer"> <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="is_active" <input type="checkbox" wire:model="is_active"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('نشط') }}</span> <span class="text-sm text-gray-700">{{ __('نشط') }}</span>
...@@ -99,14 +99,14 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -99,14 +99,14 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
</div> </div>
{{-- Actions --}} {{-- Actions --}}
<div class="flex items-center gap-4"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('activities.list') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">{{ __('إلغاء') }}</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors text-sm">
<span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء النشاط') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء النشاط') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<a href="{{ route('activities.list') }}" wire:navigate
class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/activities/activity-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('الأنشطة') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('الأنشطة') }}</h1>
@permission('participants.create') @permission('participants.create')
<a href="{{ route('activities.create') }}" wire:navigate <a href="{{ route('activities.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 text-sm font-medium">
......
resources/views/livewire/admin/activity-log.blade.php
View file @ 944501f1
<div> <div>
{{-- Page Header --}} {{-- Page Header --}}
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<div> <div>
<h1 class="text-2xl font-bold text-gray-800">{{ __('سجل النشاطات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('سجل النشاطات') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('متابعة جميع التغييرات والإجراءات في النظام') }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('متابعة جميع التغييرات والإجراءات في النظام') }}</p>
</div> </div>
@if($search || $actionFilter || $dateFrom || $dateTo || $userFilter) @if($search || $actionFilter || $dateFrom || $dateTo || $userFilter)
<button wire:click="resetFilters" class="inline-flex items-center gap-1.5 px-3 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"> <button wire:click="resetFilters" class="inline-flex items-center justify-center gap-1.5 px-3 py-2.5 w-full sm:w-auto text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg> </svg>
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</div> </div>
{{-- Filters --}} {{-- Filters --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
{{-- Search --}} {{-- Search --}}
<div class="sm:col-span-2 lg:col-span-2"> <div class="sm:col-span-2 lg:col-span-2">
...@@ -76,6 +76,70 @@ class="w-full px-2 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -76,6 +76,70 @@ class="w-full px-2 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{-- Table --}} {{-- Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div wire:loading.class="opacity-50 pointer-events-none"> <div wire:loading.class="opacity-50 pointer-events-none">
{{-- Mobile cards --}}
<div class="md:hidden divide-y divide-gray-100">
@forelse($logs as $log)
<div class="p-4 space-y-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center shrink-0">
@if($log->user?->avatar_path)
<img src="{{ Storage::disk('public')->url($log->user->avatar_path) }}" alt="{{ $log->user->name_ar }}" class="w-7 h-7 rounded-full object-cover">
@else
<span class="text-[10px] font-bold text-gray-500">{{ mb_substr($log->user?->name_ar ?? $log->user?->name ?? '?', 0, 1) }}</span>
@endif
</div>
<span class="text-sm text-gray-800 truncate max-w-[120px]">{{ $log->user?->name_ar ?? $log->user?->name ?? __('نظام') }}</span>
</div>
@php
$actionConfig = [
'created' => ['color' => 'bg-green-100 text-green-700', 'label' => 'إنشاء'],
'updated' => ['color' => 'bg-yellow-100 text-yellow-700', 'label' => 'تعديل'],
'deleted' => ['color' => 'bg-red-100 text-red-700', 'label' => 'حذف'],
'restored' => ['color' => 'bg-purple-100 text-purple-700', 'label' => 'استعادة'],
];
$config = $actionConfig[$log->action] ?? ['color' => 'bg-gray-100 text-gray-700', 'label' => $log->action];
@endphp
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $config['color'] }}">{{ __($config['label']) }}</span>
</div>
<div class="flex items-center justify-between text-xs text-gray-500">
<span>{{ \App\Livewire\Admin\ActivityLog::translateEntityType($log->auditable_type) }} <span dir="ltr">#{{ $log->auditable_id }}</span></span>
<span>{{ $log->created_at->diffForHumans() }}</span>
</div>
<button wire:click="toggleExpand({{ $log->id }})"
class="w-full text-center py-2 text-xs font-medium rounded-md transition-colors
{{ $expandedRow === $log->id ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700' }}">
{{ $expandedRow === $log->id ? __('إخفاء التفاصيل') : __('عرض التفاصيل') }}
</button>
@if($expandedRow === $log->id)
<div class="mt-2 bg-slate-50 rounded-lg p-3 text-xs">
@if($log->action === 'updated' && $log->old_values && $log->new_values)
@foreach(array_slice(array_keys($log->new_values), 0, 5) as $key)
<div class="flex justify-between py-1 border-b border-gray-100 last:border-0">
<span class="text-gray-600">{{ $key }}</span>
<span class="text-green-600 truncate max-w-[120px]">{{ is_array($log->new_values[$key]) ? json_encode($log->new_values[$key], JSON_UNESCAPED_UNICODE) : Str::limit((string)$log->new_values[$key], 20) }}</span>
</div>
@endforeach
@elseif($log->action === 'created' && $log->new_values)
<span class="text-green-600">{{ implode(', ', array_slice(array_keys($log->new_values), 0, 5)) }}</span>
@elseif($log->action === 'deleted')
<span class="text-red-500">{{ __('تم حذف') }} {{ count($log->old_values ?? []) }} {{ __('حقل') }}</span>
@endif
@if($log->ip_address)
<div class="mt-2 pt-2 border-t border-gray-200 text-gray-400" dir="ltr">IP: {{ $log->ip_address }}</div>
@endif
</div>
@endif
</div>
@empty
<div class="p-8 text-center">
<p class="text-gray-500 text-sm">{{ __('لا توجد سجلات نشاط') }}</p>
</div>
@endforelse
</div>
{{-- Desktop table --}}
<div class="hidden md:block overflow-x-auto">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
<tr> <tr>
...@@ -383,6 +447,7 @@ class="px-3 py-1.5 rounded-md text-xs font-medium border transition-colors"> ...@@ -383,6 +447,7 @@ class="px-3 py-1.5 rounded-md text-xs font-medium border transition-colors">
@endforelse @endforelse
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
{{-- Pagination --}} {{-- Pagination --}}
......
resources/views/livewire/admin/super-admin-panel.blade.php
View file @ 944501f1
<div> <div>
<!-- Header --> <!-- Header -->
<div class="mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-900">{{ __('لوحة المدير العام') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('لوحة المدير العام') }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('نظرة عامة على جميع الأكاديميات') }}</p> <p class="mt-1 text-sm text-gray-500">{{ __('نظرة عامة على جميع الأكاديميات') }}</p>
</div> </div>
<!-- Stats Cards --> <!-- Stats Cards -->
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 mb-8"> <div class="grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mb-6 sm:mb-8">
<!-- Total Academies --> <!-- Total Academies -->
<div class="bg-white border border-gray-200 rounded-lg p-6"> <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"> <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg> <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
</div> </div>
<div> <div>
<p class="text-xs font-medium text-gray-500 uppercase">{{ __('إجمالي الأكاديميات') }}</p> <p class="text-xs font-medium text-gray-500 uppercase">{{ __('إجمالي الأكاديميات') }}</p>
<p class="text-2xl font-bold text-gray-900" dir="ltr">{{ $totalAcademies }}</p> <p class="text-xl sm:text-2xl font-bold text-gray-900" dir="ltr">{{ $totalAcademies }}</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Total Users --> <!-- Total Users -->
<div class="bg-white border border-gray-200 rounded-lg p-6"> <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center"> <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg> <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</div> </div>
<div> <div>
<p class="text-xs font-medium text-gray-500 uppercase">{{ __('إجمالي المستخدمين') }}</p> <p class="text-xs font-medium text-gray-500 uppercase">{{ __('إجمالي المستخدمين') }}</p>
<p class="text-2xl font-bold text-gray-900" dir="ltr">{{ $totalUsers }}</p> <p class="text-xl sm:text-2xl font-bold text-gray-900" dir="ltr">{{ $totalUsers }}</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Average Users Per Academy --> <!-- Average Users Per Academy -->
<div class="bg-white border border-gray-200 rounded-lg p-6"> <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center"> <div class="flex-shrink-0 w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg> <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
</div> </div>
<div> <div>
<p class="text-xs font-medium text-gray-500 uppercase">{{ __('متوسط المستخدمين') }}</p> <p class="text-xs font-medium text-gray-500 uppercase">{{ __('متوسط المستخدمين') }}</p>
<p class="text-2xl font-bold text-gray-900" dir="ltr">{{ $totalAcademies > 0 ? number_format($totalUsers / $totalAcademies, 1) : 0 }}</p> <p class="text-xl sm:text-2xl font-bold text-gray-900" dir="ltr">{{ $totalAcademies > 0 ? number_format($totalUsers / $totalAcademies, 1) : 0 }}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -49,8 +49,8 @@ ...@@ -49,8 +49,8 @@
<!-- Academies Table --> <!-- Academies Table -->
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden"> <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200"> <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">{{ __('الأكاديميات') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-900">{{ __('الأكاديميات') }}</h2>
</div> </div>
@if($academies->isEmpty()) @if($academies->isEmpty())
...@@ -59,7 +59,37 @@ ...@@ -59,7 +59,37 @@
<p class="mt-4 text-sm text-gray-500">{{ __('لا توجد أكاديميات مسجلة') }}</p> <p class="mt-4 text-sm text-gray-500">{{ __('لا توجد أكاديميات مسجلة') }}</p>
</div> </div>
@else @else
<div class="overflow-x-auto"> {{-- Mobile cards --}}
<div class="md:hidden divide-y divide-gray-100">
@foreach($academies as $academy)
<div class="p-4 space-y-2">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-900">{{ $academy->name_ar ?? $academy->name }}</span>
@php
$statusBadge = match($academy->status) {
'active' => 'bg-green-100 text-green-800',
'inactive' => 'bg-gray-100 text-gray-800',
'suspended' => 'bg-red-100 text-red-800',
default => 'bg-gray-100 text-gray-800',
};
$statusLabel = match($academy->status) {
'active' => __('نشط'),
'inactive' => __('غير نشط'),
'suspended' => __('موقوف'),
default => $academy->status ?? __('غير محدد'),
};
@endphp
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $statusBadge }}">{{ $statusLabel }}</span>
</div>
<div class="flex items-center justify-between text-xs text-gray-500">
<span>{{ __('المستخدمين') }}: <span class="font-medium text-gray-700">{{ $academy->users_count ?? 0 }}</span></span>
<span dir="ltr">{{ $academy->created_at?->format('Y-m-d') }}</span>
</div>
</div>
@endforeach
</div>
<div class="hidden md:block overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
......
resources/views/livewire/admin/system-settings.blade.php
View file @ 944501f1
<div> <div>
{{-- Header --}} {{-- Header --}}
<div class="mb-6"> <div class="mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-900">{{ __('إعدادات النظام') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('إعدادات النظام') }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('إدارة الإعدادات العامة والمالية والحضور والإشعارات والتسجيل') }}</p> <p class="mt-1 text-sm text-gray-500">{{ __('إدارة الإعدادات العامة والمالية والحضور والإشعارات والتسجيل') }}</p>
</div> </div>
...@@ -15,12 +15,12 @@ ...@@ -15,12 +15,12 @@
{{-- Tabs --}} {{-- Tabs --}}
<div class="mb-6"> <div class="mb-6">
<div class="border-b border-gray-200"> <div class="border-b border-gray-200">
<nav class="flex gap-1 -mb-px overflow-x-auto" aria-label="{{ __('أقسام الإعدادات') }}"> <nav class="flex gap-1 -mb-px overflow-x-auto scrollbar-hide" aria-label="{{ __('أقسام الإعدادات') }}">
@foreach($tabs as $key => $label) @foreach($tabs as $key => $label)
<button <button
type="button" type="button"
wire:click="$set('activeTab', '{{ $key }}')" wire:click="$set('activeTab', '{{ $key }}')"
class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-colors class="shrink-0 px-3 sm:px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-colors
{{ $activeTab === $key {{ $activeTab === $key
? 'border-blue-600 text-blue-700' ? 'border-blue-600 text-blue-700'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}" : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}"
...@@ -34,7 +34,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c ...@@ -34,7 +34,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c
{{-- Settings Form --}} {{-- Settings Form --}}
<form wire:submit="save"> <form wire:submit="save">
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm"> <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6 shadow-sm">
@if(empty($schema)) @if(empty($schema))
<div class="p-8 text-center"> <div class="p-8 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
...@@ -46,7 +46,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c ...@@ -46,7 +46,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c
@else @else
<div class="space-y-6"> <div class="space-y-6">
@foreach($schema as $key => $config) @foreach($schema as $key => $config)
<div class="max-w-lg"> <div class="max-w-lg w-full">
<label for="setting-{{ $key }}" class="block text-sm font-medium text-gray-700 mb-1.5"> <label for="setting-{{ $key }}" class="block text-sm font-medium text-gray-700 mb-1.5">
{{ __($config['label']) }} {{ __($config['label']) }}
</label> </label>
...@@ -120,12 +120,12 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -120,12 +120,12 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
{{-- Save button --}} {{-- Save button --}}
@if(!empty($schema)) @if(!empty($schema))
<div class="mt-6"> <div class="mt-6 flex flex-col-reverse sm:flex-row gap-3">
<button <button
type="submit" type="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="save" wire:target="save"
class="inline-flex items-center px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-blue-400 disabled:cursor-not-allowed transition-colors" class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-blue-400 disabled:cursor-not-allowed transition-colors"
> >
<span wire:loading.remove wire:target="save">{{ __('حفظ الإعدادات') }}</span> <span wire:loading.remove wire:target="save">{{ __('حفظ الإعدادات') }}</span>
<span wire:loading wire:target="save" class="inline-flex items-center"> <span wire:loading wire:target="save" class="inline-flex items-center">
......
resources/views/livewire/assignments/assignment-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('تكليف جديد') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تكليف جديد') }}</h1>
<a href="{{ route('assignments.list') }}" wire:navigate <a href="{{ route('assignments.list') }}" wire:navigate
class="inline-flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium"> class="inline-flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium">
<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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg> <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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
...@@ -17,17 +17,17 @@ class="inline-flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounde ...@@ -17,17 +17,17 @@ class="inline-flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounde
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
{{-- Main Info Card --}} {{-- Main Info Card --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('بيانات التكليف') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('بيانات التكليف') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
{{-- User Selection --}} {{-- User Selection --}}
<div> <div>
<label for="user_id" class="block text-sm font-medium text-gray-700 mb-1"> <label for="user_id" class="block text-sm font-medium text-gray-700 mb-1">
{{ __('المستخدم') }} <span class="text-red-500">*</span> {{ __('المستخدم') }} <span class="text-red-500">*</span>
</label> </label>
<select wire:model="user_id" id="user_id" <select wire:model="user_id" id="user_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('اختر المستخدم...') }}</option> <option value="">{{ __('اختر المستخدم...') }}</option>
@foreach($users as $user) @foreach($users as $user)
<option value="{{ $user->id }}">{{ $user->name_ar ?? $user->name }}</option> <option value="{{ $user->id }}">{{ $user->name_ar ?? $user->name }}</option>
...@@ -44,7 +44,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -44,7 +44,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{ __('نوع التكليف') }} <span class="text-red-500">*</span> {{ __('نوع التكليف') }} <span class="text-red-500">*</span>
</label> </label>
<select wire:model.live="assignable_type" id="assignable_type" <select wire:model.live="assignable_type" id="assignable_type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="group">{{ __('مجموعة تدريبية') }}</option> <option value="group">{{ __('مجموعة تدريبية') }}</option>
<option value="session">{{ __('حصة تدريبية') }}</option> <option value="session">{{ __('حصة تدريبية') }}</option>
</select> </select>
...@@ -59,7 +59,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -59,7 +59,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{ $assignable_type === 'group' ? __('المجموعة') : __('الحصة') }} <span class="text-red-500">*</span> {{ $assignable_type === 'group' ? __('المجموعة') : __('الحصة') }} <span class="text-red-500">*</span>
</label> </label>
<select wire:model="assignable_id" id="assignable_id" <select wire:model="assignable_id" id="assignable_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('اختر...') }}</option> <option value="">{{ __('اختر...') }}</option>
@foreach($assignableOptions as $id => $label) @foreach($assignableOptions as $id => $label)
<option value="{{ $id }}">{{ $label }}</option> <option value="{{ $id }}">{{ $label }}</option>
...@@ -76,7 +76,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -76,7 +76,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{ __('نطاق التكليف') }} <span class="text-red-500">*</span> {{ __('نطاق التكليف') }} <span class="text-red-500">*</span>
</label> </label>
<select wire:model="scope" id="scope" <select wire:model="scope" id="scope"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@foreach($scopeOptions as $value => $label) @foreach($scopeOptions as $value => $label)
<option value="{{ $value }}">{{ $label }}</option> <option value="{{ $value }}">{{ $label }}</option>
@endforeach @endforeach
...@@ -93,14 +93,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -93,14 +93,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</label> </label>
<input type="text" wire:model="role_label" id="role_label" <input type="text" wire:model="role_label" id="role_label"
placeholder="{{ __('مثال: مدرب رئيسي، مساعد مدرب...') }}" placeholder="{{ __('مثال: مدرب رئيسي، مساعد مدرب...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('role_label') @error('role_label')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p> <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror @enderror
</div> </div>
{{-- Is Primary --}} {{-- Is Primary --}}
<div class="flex items-center gap-3 pt-6"> <div class="min-h-[44px] flex items-center gap-3 pt-6">
<input type="checkbox" wire:model="is_primary" id="is_primary" <input type="checkbox" wire:model="is_primary" id="is_primary"
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<label for="is_primary" class="text-sm font-medium text-gray-700"> <label for="is_primary" class="text-sm font-medium text-gray-700">
...@@ -111,17 +111,17 @@ class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> ...@@ -111,17 +111,17 @@ class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
</div> </div>
{{-- Schedule Card --}} {{-- Schedule Card --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('الجدول الزمني') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('الجدول الزمني') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
{{-- Start Date --}} {{-- Start Date --}}
<div> <div>
<label for="start_date" class="block text-sm font-medium text-gray-700 mb-1"> <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">
{{ __('تاريخ البداية') }} <span class="text-red-500">*</span> {{ __('تاريخ البداية') }} <span class="text-red-500">*</span>
</label> </label>
<input type="date" wire:model="start_date" id="start_date" dir="ltr" <input type="date" wire:model="start_date" id="start_date" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('start_date') @error('start_date')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p> <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror @enderror
...@@ -133,7 +133,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -133,7 +133,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{ __('تاريخ النهاية') }} {{ __('تاريخ النهاية') }}
</label> </label>
<input type="date" wire:model="end_date" id="end_date" dir="ltr" <input type="date" wire:model="end_date" id="end_date" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('end_date') @error('end_date')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p> <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror @enderror
...@@ -145,7 +145,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -145,7 +145,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{ __('وقت البداية') }} {{ __('وقت البداية') }}
</label> </label>
<input type="time" wire:model="start_time" id="start_time" dir="ltr" <input type="time" wire:model="start_time" id="start_time" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('start_time') @error('start_time')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p> <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror @enderror
...@@ -157,7 +157,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -157,7 +157,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{ __('وقت النهاية') }} {{ __('وقت النهاية') }}
</label> </label>
<input type="time" wire:model="end_time" id="end_time" dir="ltr" <input type="time" wire:model="end_time" id="end_time" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('end_time') @error('end_time')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p> <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror @enderror
...@@ -165,13 +165,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -165,13 +165,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Schedule Days --}} {{-- Schedule Days --}}
<div class="mt-6"> <div class="mt-4 sm:mt-6">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">
{{ __('أيام التكليف') }} {{ __('أيام التكليف') }}
</label> </label>
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-2 sm:gap-3">
@foreach($dayLabels as $dayNum => $dayName) @foreach($dayLabels as $dayNum => $dayName)
<label class="inline-flex items-center gap-2 px-3 py-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 has-[:checked]:bg-blue-50 has-[:checked]:border-blue-300"> <label class="min-h-[44px] inline-flex items-center gap-2 px-3 py-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 has-[:checked]:bg-blue-50 has-[:checked]:border-blue-300">
<input type="checkbox" wire:model="schedule_days" value="{{ $dayNum }}" <input type="checkbox" wire:model="schedule_days" value="{{ $dayNum }}"
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ $dayName }}</span> <span class="text-sm text-gray-700">{{ $dayName }}</span>
...@@ -185,26 +185,26 @@ class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> ...@@ -185,26 +185,26 @@ class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
</div> </div>
{{-- Notes Card --}} {{-- Notes Card --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('ملاحظات') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('ملاحظات') }}</h2>
<textarea wire:model="notes" rows="3" <textarea wire:model="notes" rows="3"
placeholder="{{ __('ملاحظات إضافية...') }}" placeholder="{{ __('ملاحظات إضافية...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
@error('notes') @error('notes')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p> <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror @enderror
</div> </div>
{{-- Submit --}} {{-- Submit --}}
<div class="flex items-center justify-end gap-3"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('assignments.list') }}" wire:navigate <a href="{{ route('assignments.list') }}" wire:navigate
class="px-6 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium"> class="text-center px-4 sm:px-6 py-2.5 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</a> </a>
<button type="submit" <button type="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="save" wire:target="save"
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
<span wire:loading.remove wire:target="save">{{ __('حفظ التكليف') }}</span> <span wire:loading.remove wire:target="save">{{ __('حفظ التكليف') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
......
resources/views/livewire/assignments/assignment-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('التكليفات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('التكليفات') }}</h1>
@can('assignments.create') @can('assignments.create')
<a href="{{ route('assignments.create') }}" wire:navigate <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 text-sm font-medium">
......
resources/views/livewire/attendance/attendance-list.blade.php
View file @ 944501f1
<div> <div>
<!-- Header --> <!-- Header -->
<div class="mb-6"> <div class="mb-6">
<h1 class="text-2xl font-bold text-gray-900">{{ __('سجل الحضور') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('سجل الحضور') }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('عرض جلسات التدريب ونسب الحضور') }}</p> <p class="mt-1 text-sm text-gray-500">{{ __('عرض جلسات التدريب ونسب الحضور') }}</p>
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="mb-6 p-4 bg-white border border-gray-200 rounded-lg"> <div class="mb-6 p-3 sm:p-4 bg-white border border-gray-200 rounded-lg">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3"> <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
<!-- Search --> <!-- Search -->
<div> <div class="col-span-2 md:col-span-1">
<label for="search" class="block text-sm font-medium text-gray-700 mb-1">{{ __('بحث بالمجموعة') }}</label> <label for="search" class="block text-sm font-medium text-gray-700 mb-1">{{ __('بحث بالمجموعة') }}</label>
<input <input
type="text" type="text"
...@@ -43,7 +43,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -43,7 +43,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
</div> </div>
</div> </div>
<!-- Sessions Table --> <!-- Sessions -->
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden" wire:loading.class="opacity-50 pointer-events-none"> <div class="bg-white border border-gray-200 rounded-lg overflow-hidden" wire:loading.class="opacity-50 pointer-events-none">
@if($sessions->isEmpty()) @if($sessions->isEmpty())
<div class="p-12 text-center"> <div class="p-12 text-center">
...@@ -51,7 +51,8 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -51,7 +51,8 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
<p class="mt-4 text-sm text-gray-500">{{ __('لا توجد جلسات في هذه الفترة') }}</p> <p class="mt-4 text-sm text-gray-500">{{ __('لا توجد جلسات في هذه الفترة') }}</p>
</div> </div>
@else @else
<div class="overflow-x-auto"> <!-- Desktop Table -->
<div class="hidden md:block overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
...@@ -140,6 +141,73 @@ class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue- ...@@ -140,6 +141,73 @@ class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue-
</table> </table>
</div> </div>
<!-- Mobile Cards -->
<div class="md:hidden space-y-3 p-3">
@foreach($sessions as $session)
@php
$total = $session->attendance_records_count;
$presentCount = $session->present_count;
$absentCount = $session->absent_count;
$rate = $total > 0 ? round(($presentCount / $total) * 100, 0) : 0;
@endphp
<div class="border border-gray-200 rounded-lg p-3">
<!-- Card Header: Group Name + Date -->
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-medium text-gray-900">
{{ $session->group?->name_ar ?? '-' }}
</h3>
<span class="text-xs text-gray-500" dir="ltr">
{{ $session->session_date->format('Y-m-d') }}
</span>
</div>
<!-- Time -->
<p class="text-xs text-gray-500 mb-3" dir="ltr">
{{ $session->start_time }} - {{ $session->end_time }}
</p>
<!-- Stats Row -->
<div class="flex items-center gap-2 flex-wrap mb-3">
<!-- Total -->
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700" dir="ltr">
{{ __('الإجمالي') }}: {{ $total }}
</span>
<!-- Present/Late -->
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800" dir="ltr">
{{ __('حاضر') }}: {{ $presentCount }}
</span>
<!-- Absent -->
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800" dir="ltr">
{{ __('غائب') }}: {{ $absentCount }}
</span>
<!-- Attendance Rate -->
@if($total > 0)
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
@if($rate >= 90) bg-green-100 text-green-800
@elseif($rate >= 75) bg-amber-100 text-amber-800
@else bg-red-100 text-red-800
@endif
" dir="ltr">
{{ $rate }}%
</span>
@endif
</div>
<!-- Action -->
@can('attendance.mark')
<a href="{{ route('attendance.take', $session) }}"
class="inline-flex items-center justify-center gap-1 w-full px-3 py-2 text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100">
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
{{ __('تسجيل') }}
</a>
@endcan
</div>
@endforeach
</div>
<!-- Pagination --> <!-- Pagination -->
<div class="px-4 py-3 border-t border-gray-200"> <div class="px-4 py-3 border-t border-gray-200">
{{ $sessions->links() }} {{ $sessions->links() }}
......
resources/views/livewire/attendance/quick-attendance.blade.php
View file @ 944501f1
<div class="max-w-4xl mx-auto px-4 py-6"> <div class="max-w-4xl mx-auto px-3 sm:px-4 py-4 sm:py-6">
{{-- Page Header --}} {{-- Page Header --}}
<div class="mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ __('حضور سريع') }}</h1> <div>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ __('اختر الحصة وسجّل الحضور بسرعة') }}</p> <h1 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">{{ __('حضور سريع') }}</h1>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ __('اختر الحصة وسجّل الحضور بسرعة') }}</p>
</div>
</div> </div>
{{-- Flash Message --}} {{-- Flash Message --}}
...@@ -14,7 +16,7 @@ ...@@ -14,7 +16,7 @@
{{-- Session Selection --}} {{-- Session Selection --}}
<div class="mb-6"> <div class="mb-6">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">{{ __('حصص اليوم') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">{{ __('حصص اليوم') }}</h2>
@if ($todaySessions->isEmpty()) @if ($todaySessions->isEmpty())
<div class="rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-8 text-center"> <div class="rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-8 text-center">
...@@ -24,7 +26,7 @@ ...@@ -24,7 +26,7 @@
<p class="mt-2 text-gray-600 dark:text-gray-400">{{ __('لا توجد حصص مجدولة لك اليوم') }}</p> <p class="mt-2 text-gray-600 dark:text-gray-400">{{ __('لا توجد حصص مجدولة لك اليوم') }}</p>
</div> </div>
@else @else
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3"> <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
@foreach ($todaySessions as $session) @foreach ($todaySessions as $session)
<button <button
wire:click="selectSession({{ $session->id }})" wire:click="selectSession({{ $session->id }})"
...@@ -63,7 +65,7 @@ class="text-start rounded-lg border-2 p-4 transition-all ...@@ -63,7 +65,7 @@ class="text-start rounded-lg border-2 p-4 transition-all
@if ($selectedSessionId) @if ($selectedSessionId)
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"> <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
{{-- Summary Bar --}} {{-- Summary Bar --}}
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 px-4 py-3"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-gray-200 dark:border-gray-700 p-4 sm:p-6">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300"> <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
{{ __('الحضور:') }} {{ __('الحضور:') }}
...@@ -105,7 +107,7 @@ class="inline-flex items-center gap-1.5 rounded-md bg-green-50 dark:bg-green-900 ...@@ -105,7 +107,7 @@ class="inline-flex items-center gap-1.5 rounded-md bg-green-50 dark:bg-green-900
@endphp @endphp
<li <li
wire:click="toggleAbsent({{ $record->id }})" wire:click="toggleAbsent({{ $record->id }})"
class="flex items-center justify-between px-4 py-3 cursor-pointer select-none transition-colors class="flex items-center justify-between px-4 py-3.5 min-h-[48px] cursor-pointer select-none transition-colors
{{ $isPresent {{ $isPresent
? 'hover:bg-gray-50 dark:hover:bg-gray-700/50' ? 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
: 'bg-red-50 dark:bg-red-900/10 hover:bg-red-100 dark:hover:bg-red-900/20' }}" : 'bg-red-50 dark:bg-red-900/10 hover:bg-red-100 dark:hover:bg-red-900/20' }}"
...@@ -145,7 +147,7 @@ class="flex items-center justify-between px-4 py-3 cursor-pointer select-none tr ...@@ -145,7 +147,7 @@ class="flex items-center justify-between px-4 py-3 cursor-pointer select-none tr
{{-- Save Button --}} {{-- Save Button --}}
@if ($records->isNotEmpty()) @if ($records->isNotEmpty())
<div class="border-t border-gray-200 dark:border-gray-700 px-4 py-4"> <div class="border-t border-gray-200 dark:border-gray-700 p-4 sm:p-6">
<button <button
wire:click="save" wire:click="save"
wire:loading.attr="disabled" wire:loading.attr="disabled"
......
resources/views/livewire/attendance/take-attendance.blade.php
View file @ 944501f1
<div> <div>
<!-- Header --> <!-- Header -->
<div class="mb-6"> <div class="mb-4 sm:mb-6">
<div class="flex items-center justify-between"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div> <div>
<h1 class="text-2xl font-bold text-gray-900">{{ __('تسجيل الحضور') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('تسجيل الحضور') }}</h1>
<p class="mt-1 text-sm text-gray-500"> <p class="mt-1 text-sm text-gray-500">
{{ $session->group?->name_ar ?? '-' }} &mdash; {{ $session->group?->name_ar ?? '-' }} &mdash;
{{ $session->session_date->format('Y-m-d') }} {{ $session->session_date->format('Y-m-d') }}
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</p> </p>
</div> </div>
<a href="{{ route('attendance.list') }}" <a href="{{ route('attendance.list') }}"
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"> class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
<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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg> <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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
{{ __('العودة') }} {{ __('العودة') }}
</a> </a>
...@@ -19,35 +19,35 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70 ...@@ -19,35 +19,35 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70
</div> </div>
<!-- Summary Cards --> <!-- Summary Cards -->
<div class="grid grid-cols-2 gap-4 mb-6 sm:grid-cols-3 lg:grid-cols-6"> <div class="grid grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-4 mb-4 sm:mb-6">
<div class="p-4 bg-white border border-gray-200 rounded-lg"> <div class="p-3 sm:p-4 bg-white border border-gray-200 rounded-lg">
<p class="text-sm text-gray-500">{{ __('الإجمالي') }}</p> <p class="text-sm text-gray-500">{{ __('الإجمالي') }}</p>
<p class="text-2xl font-bold text-gray-900" dir="ltr">{{ $summary['total'] }}</p> <p class="text-xl sm:text-2xl font-bold text-gray-900" dir="ltr">{{ $summary['total'] }}</p>
</div> </div>
<div class="p-4 bg-green-50 border border-green-200 rounded-lg"> <div class="p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg">
<p class="text-sm text-green-700">{{ __('حاضر') }}</p> <p class="text-sm text-green-700">{{ __('حاضر') }}</p>
<p class="text-2xl font-bold text-green-700" dir="ltr">{{ $summary['present'] }}</p> <p class="text-xl sm:text-2xl font-bold text-green-700" dir="ltr">{{ $summary['present'] }}</p>
</div> </div>
<div class="p-4 bg-amber-50 border border-amber-200 rounded-lg"> <div class="p-3 sm:p-4 bg-amber-50 border border-amber-200 rounded-lg">
<p class="text-sm text-amber-700">{{ __('متأخر') }}</p> <p class="text-sm text-amber-700">{{ __('متأخر') }}</p>
<p class="text-2xl font-bold text-amber-700" dir="ltr">{{ $summary['late'] }}</p> <p class="text-xl sm:text-2xl font-bold text-amber-700" dir="ltr">{{ $summary['late'] }}</p>
</div> </div>
<div class="p-4 bg-red-50 border border-red-200 rounded-lg"> <div class="p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg">
<p class="text-sm text-red-700">{{ __('غائب') }}</p> <p class="text-sm text-red-700">{{ __('غائب') }}</p>
<p class="text-2xl font-bold text-red-700" dir="ltr">{{ $summary['absent'] }}</p> <p class="text-xl sm:text-2xl font-bold text-red-700" dir="ltr">{{ $summary['absent'] }}</p>
</div> </div>
<div class="p-4 bg-gray-50 border border-gray-200 rounded-lg"> <div class="p-3 sm:p-4 bg-gray-50 border border-gray-200 rounded-lg">
<p class="text-sm text-gray-500">{{ __('متبقي') }}</p> <p class="text-sm text-gray-500">{{ __('متبقي') }}</p>
<p class="text-2xl font-bold text-gray-700" dir="ltr">{{ $summary['expected'] }}</p> <p class="text-xl sm:text-2xl font-bold text-gray-700" dir="ltr">{{ $summary['expected'] }}</p>
</div> </div>
<div class="p-4 bg-blue-50 border border-blue-200 rounded-lg"> <div class="p-3 sm:p-4 bg-blue-50 border border-blue-200 rounded-lg">
<p class="text-sm text-blue-700">{{ __('معذور') }}</p> <p class="text-sm text-blue-700">{{ __('معذور') }}</p>
<p class="text-2xl font-bold text-blue-700" dir="ltr">{{ $summary['excused'] }}</p> <p class="text-xl sm:text-2xl font-bold text-blue-700" dir="ltr">{{ $summary['excused'] }}</p>
</div> </div>
</div> </div>
<!-- Session Notes --> <!-- Session Notes -->
<div class="mb-6 bg-white border border-gray-200 rounded-lg p-4"> <div class="mb-4 sm:mb-6 bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
<label for="sessionNotes" class="block text-sm font-medium text-gray-700 mb-2">{{ __('ملاحظات الجلسة') }}</label> <label for="sessionNotes" class="block text-sm font-medium text-gray-700 mb-2">{{ __('ملاحظات الجلسة') }}</label>
<textarea <textarea
id="sessionNotes" id="sessionNotes"
...@@ -61,7 +61,7 @@ class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 ...@@ -61,7 +61,7 @@ class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500
wire:click="saveNotes" wire:click="saveNotes"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="saveNotes" wire:target="saveNotes"
class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"> class="inline-flex items-center gap-2 px-3 py-2.5 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed">
<span wire:loading.remove wire:target="saveNotes">{{ __('حفظ الملاحظات') }}</span> <span wire:loading.remove wire:target="saveNotes">{{ __('حفظ الملاحظات') }}</span>
<span wire:loading wire:target="saveNotes">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="saveNotes">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
...@@ -78,7 +78,7 @@ class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-white ...@@ -78,7 +78,7 @@ class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-white
wire:click="markAllPresent" wire:click="markAllPresent"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="markAllPresent" wire:target="markAllPresent"
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"> class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed">
<span wire:loading.remove wire:target="markAllPresent"> <span wire:loading.remove wire:target="markAllPresent">
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</span> </span>
...@@ -99,7 +99,66 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white b ...@@ -99,7 +99,66 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white b
<p class="mt-4 text-sm text-gray-500">{{ __('لا توجد سجلات حضور لهذه الجلسة') }}</p> <p class="mt-4 text-sm text-gray-500">{{ __('لا توجد سجلات حضور لهذه الجلسة') }}</p>
</div> </div>
@else @else
<div class="overflow-x-auto"> {{-- Mobile cards --}}
<div class="md:hidden space-y-2 p-3">
@foreach($records as $record)
<div class="bg-white border border-gray-200 rounded-lg p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-sm font-medium text-gray-900">
@if($record->subject_type === \App\Domain\Participant\Models\Participant::class)
{{ $record->subject?->person?->name_ar ?? '-' }}
@else
{{ $record->subject?->name_ar ?? $record->subject?->name ?? '-' }}
@endif
</span>
@php $color = $record->status->color(); @endphp
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
@switch($color)
@case('green') bg-green-100 text-green-800 @break
@case('amber') bg-amber-100 text-amber-800 @break
@case('red') bg-red-100 text-red-800 @break
@case('blue') bg-blue-100 text-blue-800 @break
@case('orange') bg-orange-100 text-orange-800 @break
@case('yellow') bg-yellow-100 text-yellow-800 @break
@case('purple') bg-purple-100 text-purple-800 @break
@default bg-gray-100 text-gray-800
@endswitch
">
{{ $record->status->label() }}
</span>
</div>
<div class="grid grid-cols-4 gap-1.5">
<button wire:click="markAs({{ $record->id }}, 'present')" wire:loading.attr="disabled" wire:target="markAs({{ $record->id }}, 'present')"
class="py-2.5 text-xs font-medium rounded border text-center
{{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Present ? 'bg-green-600 text-white border-green-600' : 'text-green-700 border-green-300 hover:bg-green-50' }} disabled:opacity-50">
<span wire:loading.remove wire:target="markAs({{ $record->id }}, 'present')">{{ __('حاضر') }}</span>
<span wire:loading wire:target="markAs({{ $record->id }}, 'present')">...</span>
</button>
<button wire:click="markAs({{ $record->id }}, 'late')" wire:loading.attr="disabled" wire:target="markAs({{ $record->id }}, 'late')"
class="py-2.5 text-xs font-medium rounded border text-center
{{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Late ? 'bg-amber-600 text-white border-amber-600' : 'text-amber-700 border-amber-300 hover:bg-amber-50' }} disabled:opacity-50">
<span wire:loading.remove wire:target="markAs({{ $record->id }}, 'late')">{{ __('متأخر') }}</span>
<span wire:loading wire:target="markAs({{ $record->id }}, 'late')">...</span>
</button>
<button wire:click="markAs({{ $record->id }}, 'absent')" wire:loading.attr="disabled" wire:target="markAs({{ $record->id }}, 'absent')"
class="py-2.5 text-xs font-medium rounded border text-center
{{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Absent ? 'bg-red-600 text-white border-red-600' : 'text-red-700 border-red-300 hover:bg-red-50' }} disabled:opacity-50">
<span wire:loading.remove wire:target="markAs({{ $record->id }}, 'absent')">{{ __('غائب') }}</span>
<span wire:loading wire:target="markAs({{ $record->id }}, 'absent')">...</span>
</button>
<button wire:click="markAs({{ $record->id }}, 'excused')" wire:loading.attr="disabled" wire:target="markAs({{ $record->id }}, 'excused')"
class="py-2.5 text-xs font-medium rounded border text-center
{{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Excused ? 'bg-blue-600 text-white border-blue-600' : 'text-blue-700 border-blue-300 hover:bg-blue-50' }} disabled:opacity-50">
<span wire:loading.remove wire:target="markAs({{ $record->id }}, 'excused')">{{ __('معذور') }}</span>
<span wire:loading wire:target="markAs({{ $record->id }}, 'excused')">...</span>
</button>
</div>
</div>
@endforeach
</div>
{{-- Desktop table --}}
<div class="hidden md:block overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
......
resources/views/livewire/audit/audit-log-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('سجل التدقيق') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('سجل التدقيق') }}</h1>
</div> </div>
{{-- Filters --}} {{-- Filters --}}
......
resources/views/livewire/auth/login.blade.php
View file @ 944501f1
<div> <div>
<div class="bg-white rounded-xl shadow-lg p-8"> <div class="bg-white rounded-xl shadow-lg p-6 sm:p-8">
<!-- Logo/Title --> <!-- Logo/Title -->
<div class="text-center mb-8"> <div class="text-center mb-6 sm:mb-8">
<h1 class="text-3xl font-bold text-blue-700 mb-2">الكابتن</h1> @php
<p class="text-gray-500">إدارة الأكاديميات الرياضية</p> $branding = app(\App\Domain\Shared\Services\SettingsService::class);
$logo = $branding->get('branding.logo');
@endphp
@if($logo)
<img src="{{ Storage::disk('public')->url($logo) }}" alt="{{ __('الكابتن') }}" class="h-14 sm:h-16 mx-auto mb-3">
@else
<h1 class="text-2xl sm:text-3xl font-bold mb-2" style="color: var(--brand-primary, #2563eb);">{{ __('الكابتن') }}</h1>
@endif
<p class="text-sm sm:text-base text-gray-500">{{ __('إدارة الأكاديميات الرياضية') }}</p>
</div> </div>
<!-- Error message --> <!-- Error message -->
@if($errorMessage) @if($errorMessage)
<div class="mb-4 rounded-md bg-red-50 p-4 border border-red-200"> <div class="mb-4 rounded-lg bg-red-50 p-3 sm:p-4 border border-red-200">
<p class="text-sm text-red-700">{{ $errorMessage }}</p> <p class="text-sm text-red-700">{{ $errorMessage }}</p>
</div> </div>
@endif @endif
...@@ -16,46 +24,49 @@ ...@@ -16,46 +24,49 @@
<form wire:submit="login"> <form wire:submit="login">
<!-- Email --> <!-- Email -->
<div class="mb-4"> <div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label> <label for="email" class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label>
<input type="email" id="email" wire:model="email" <input type="email" id="email" wire:model="email"
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('email') border-red-500 @enderror" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent text-sm sm:text-base @error('email') border-red-500 @enderror"
placeholder="admin@example.com" dir="ltr" required autofocus> style="--tw-ring-color: var(--brand-primary, #2563eb);"
placeholder="admin@example.com" dir="ltr" required autofocus inputmode="email" autocomplete="email">
@error('email') @error('email')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p> <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror @enderror
</div> </div>
<!-- Password --> <!-- Password -->
<div class="mb-6"> <div class="mb-5 sm:mb-6">
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">كلمة المرور</label> <label for="password" class="block text-sm font-medium text-gray-700 mb-1">{{ __('كلمة المرور') }}</label>
<input type="password" id="password" wire:model="password" <input type="password" id="password" wire:model="password"
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('password') border-red-500 @enderror" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent text-sm sm:text-base @error('password') border-red-500 @enderror"
placeholder="••••••••" required> style="--tw-ring-color: var(--brand-primary, #2563eb);"
placeholder="••••••••" required autocomplete="current-password">
@error('password') @error('password')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p> <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror @enderror
</div> </div>
<!-- Remember me --> <!-- Remember me -->
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-5 sm:mb-6">
<label class="flex items-center gap-2 cursor-pointer"> <label class="flex items-center gap-2 cursor-pointer min-h-[44px]">
<input type="checkbox" wire:model="remember" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> <input type="checkbox" wire:model="remember" class="w-5 h-5 rounded border-gray-300 focus:ring-2" style="color: var(--brand-primary, #2563eb); --tw-ring-color: var(--brand-primary, #2563eb);">
<span class="text-sm text-gray-600">تذكرني</span> <span class="text-sm text-gray-600">{{ __('تذكرني') }}</span>
</label> </label>
</div> </div>
<!-- Submit --> <!-- Submit -->
<button type="submit" <button type="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
class="w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium rounded-lg transition-colors"> class="w-full py-3 px-4 text-white font-medium rounded-lg transition-colors disabled:opacity-60 text-sm sm:text-base"
<span wire:loading.remove>تسجيل الدخول</span> style="background-color: var(--brand-primary, #2563eb);">
<span wire:loading>جارٍ الدخول...</span> <span wire:loading.remove wire:target="login">{{ __('تسجيل الدخول') }}</span>
<span wire:loading wire:target="login">{{ __('جارٍ الدخول...') }}</span>
</button> </button>
</form> </form>
</div> </div>
<!-- Footer --> <!-- Footer -->
<p class="text-center text-sm text-gray-400 mt-6"> <p class="text-center text-xs sm:text-sm text-gray-400 mt-4 sm:mt-6">
El Captain Sports Management &copy; {{ date('Y') }} El Captain Sports Management &copy; {{ date('Y') }}
</p> </p>
</div> </div>
resources/views/livewire/branches/branch-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $editing ? 'تعديل الفرع' : 'إضافة فرع جديد' }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? 'تعديل الفرع' : 'إضافة فرع جديد' }}</h1>
<a href="{{ route('branches.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700"> <a href="{{ route('branches.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">
← العودة للقائمة ← العودة للقائمة
</a> </a>
...@@ -8,27 +8,27 @@ ...@@ -8,27 +8,27 @@
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
<!-- Basic Info --> <!-- Basic Info -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">المعلومات الأساسية</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">المعلومات الأساسية</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالعربية *</label> <label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالعربية *</label>
<input type="text" wire:model="name_ar" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name_ar') border-red-500 @enderror"> <input type="text" wire:model="name_ar" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالإنجليزية *</label> <label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالإنجليزية *</label>
<input type="text" wire:model="name" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror"> <input type="text" wire:model="name" dir="ltr" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror">
@error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">كود الفرع *</label> <label class="block text-sm font-medium text-gray-700 mb-1">كود الفرع *</label>
<input type="text" wire:model="code" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('code') border-red-500 @enderror" placeholder="e.g. BR001"> <input type="text" wire:model="code" dir="ltr" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('code') border-red-500 @enderror" placeholder="e.g. BR001">
@error('code') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('code') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">المدير</label> <label class="block text-sm font-medium text-gray-700 mb-1">المدير</label>
<select wire:model="manager_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> <select wire:model="manager_id" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">— بدون مدير —</option> <option value="">— بدون مدير —</option>
@foreach($managers as $manager) @foreach($managers as $manager)
<option value="{{ $manager->id }}">{{ $manager->name_ar ?? $manager->name }}</option> <option value="{{ $manager->id }}">{{ $manager->name_ar ?? $manager->name }}</option>
...@@ -37,12 +37,12 @@ ...@@ -37,12 +37,12 @@
</div> </div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 mt-4">
<label class="flex items-center gap-2 cursor-pointer"> <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="is_main" class="w-4 h-4 rounded border-gray-300 text-blue-600"> <input type="checkbox" wire:model="is_main" class="w-4 h-4 rounded border-gray-300 text-blue-600">
<span class="text-sm text-gray-700">فرع رئيسي</span> <span class="text-sm text-gray-700">فرع رئيسي</span>
</label> </label>
<label class="flex items-center gap-2 cursor-pointer"> <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="is_active" class="w-4 h-4 rounded border-gray-300 text-blue-600"> <input type="checkbox" wire:model="is_active" class="w-4 h-4 rounded border-gray-300 text-blue-600">
<span class="text-sm text-gray-700">نشط</span> <span class="text-sm text-gray-700">نشط</span>
</label> </label>
...@@ -50,49 +50,49 @@ ...@@ -50,49 +50,49 @@
</div> </div>
<!-- Contact Info --> <!-- Contact Info -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">معلومات الاتصال</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">معلومات الاتصال</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">الهاتف</label> <label class="block text-sm font-medium text-gray-700 mb-1">الهاتف</label>
<input type="text" wire:model="phone" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> <input type="text" wire:model="phone" dir="ltr" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label> <label class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label>
<input type="email" wire:model="email" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> <input type="email" wire:model="email" dir="ltr" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
@error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">العنوان</label> <label class="block text-sm font-medium text-gray-700 mb-1">العنوان</label>
<input type="text" wire:model="address" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> <input type="text" wire:model="address" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">المدينة</label> <label class="block text-sm font-medium text-gray-700 mb-1">المدينة</label>
<input type="text" wire:model="city" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> <input type="text" wire:model="city" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
</div> </div>
</div> </div>
</div> </div>
<!-- Location --> <!-- Location -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">الموقع الجغرافي</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">الموقع الجغرافي</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">خط العرض</label> <label class="block text-sm font-medium text-gray-700 mb-1">خط العرض</label>
<input type="text" wire:model="latitude" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="30.0444"> <input type="text" wire:model="latitude" dir="ltr" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="30.0444">
@error('latitude') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('latitude') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">خط الطول</label> <label class="block text-sm font-medium text-gray-700 mb-1">خط الطول</label>
<input type="text" wire:model="longitude" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="31.2357"> <input type="text" wire:model="longitude" dir="ltr" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="31.2357">
@error('longitude') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('longitude') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
</div> </div>
<!-- Operating Hours --> <!-- Operating Hours -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">ساعات العمل</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">ساعات العمل</h2>
<div class="space-y-3"> <div class="space-y-3">
@php @php
$dayNames = [ $dayNames = [
...@@ -106,8 +106,8 @@ ...@@ -106,8 +106,8 @@
]; ];
@endphp @endphp
@foreach($dayNames as $key => $dayLabel) @foreach($dayNames as $key => $dayLabel)
<div class="flex items-center gap-4 py-2 border-b border-gray-100 last:border-0"> <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 py-2 border-b border-gray-100 last:border-0">
<label class="flex items-center gap-2 w-32"> <label class="min-h-[44px] flex items-center gap-2 w-32">
<input type="checkbox" <input type="checkbox"
wire:model="operating_hours.{{ $key }}.closed" wire:model="operating_hours.{{ $key }}.closed"
class="w-4 h-4 rounded border-gray-300 text-red-600" class="w-4 h-4 rounded border-gray-300 text-red-600"
...@@ -116,10 +116,10 @@ class="w-4 h-4 rounded border-gray-300 text-red-600" ...@@ -116,10 +116,10 @@ class="w-4 h-4 rounded border-gray-300 text-red-600"
</label> </label>
<div class="flex items-center gap-2" x-show="!$wire.operating_hours?.{{ $key }}?.closed"> <div class="flex items-center gap-2" x-show="!$wire.operating_hours?.{{ $key }}?.closed">
<input type="time" wire:model="operating_hours.{{ $key }}.open" dir="ltr" <input type="time" wire:model="operating_hours.{{ $key }}.open" dir="ltr"
class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"> class="px-3 py-2.5 sm:py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
<span class="text-gray-400 text-sm">—</span> <span class="text-gray-400 text-sm">—</span>
<input type="time" wire:model="operating_hours.{{ $key }}.close" dir="ltr" <input type="time" wire:model="operating_hours.{{ $key }}.close" dir="ltr"
class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"> class="px-3 py-2.5 sm:py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
</div> </div>
<span class="text-sm text-red-500" x-show="$wire.operating_hours?.{{ $key }}?.closed">مغلق</span> <span class="text-sm text-red-500" x-show="$wire.operating_hours?.{{ $key }}?.closed">مغلق</span>
</div> </div>
...@@ -128,15 +128,15 @@ class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus: ...@@ -128,15 +128,15 @@ class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:
</div> </div>
<!-- Submit --> <!-- Submit -->
<div class="flex items-center gap-4"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('branches.list') }}" wire:navigate class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">
إلغاء
</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 text-sm">
<span wire:loading.remove wire:target="save">{{ $editing ? 'حفظ التعديلات' : 'إنشاء الفرع' }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? 'حفظ التعديلات' : 'إنشاء الفرع' }}</span>
<span wire:loading wire:target="save">جارٍ الحفظ...</span> <span wire:loading wire:target="save">جارٍ الحفظ...</span>
</button> </button>
<a href="{{ route('branches.list') }}" wire:navigate class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
إلغاء
</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/branches/branch-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">الفروع</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">الفروع</h1>
@can('branches.create') @can('branches.create')
<a href="{{ route('branches.create') }}" wire:navigate <a href="{{ route('branches.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 text-sm font-medium">
......
resources/views/livewire/cash-sessions/cash-session-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('الورديات النقدية') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('الورديات النقدية') }}</h1>
@can('cash_sessions.manage') @can('cash_sessions.manage')
<a href="{{ route('cash-sessions.manage') }}" wire:navigate <a href="{{ route('cash-sessions.manage') }}" 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 justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
<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> <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> </a>
@endcan @endcan
</div> </div>
{{-- Flash Messages --}} {{-- Flash Messages --}}
@if(session('success')) @if(session('success'))
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm"> <div class="mb-4 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
{{ session('success') }} {{ session('success') }}
</div> </div>
@endif @endif
{{-- Filters --}} {{-- Filters --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
<select wire:model.live="status" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="status" class="px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل الحالات') }}</option> <option value="">{{ __('كل الحالات') }}</option>
@foreach($statusOptions as $value => $label) @foreach($statusOptions as $value => $label)
<option value="{{ $value }}">{{ $label }}</option> <option value="{{ $value }}">{{ $label }}</option>
...@@ -29,9 +29,9 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -29,9 +29,9 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
</div> </div>
</div> </div>
{{-- Table --}} {{-- Desktop Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div wire:loading.class="opacity-50 pointer-events-none"> <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
<tr> <tr>
...@@ -109,4 +109,68 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -109,4 +109,68 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
</div> </div>
@endif @endif
</div> </div>
{{-- Mobile Cards --}}
<div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
@forelse($sessions as $session)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
<div class="flex items-center justify-between mb-3">
<span class="font-medium text-gray-800 text-sm">
{{ $session->user?->name_ar ?? $session->user?->name ?? '—' }}
</span>
@php
$statusColors = [
'open' => 'green',
'closed' => 'gray',
'suspended' => 'amber',
];
$color = $statusColors[$session->status] ?? 'gray';
@endphp
<span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full">
{{ $statusOptions[$session->status] ?? $session->status }}
</span>
</div>
<div class="text-xs text-gray-500 mb-3">
{{ $session->branch?->name_ar ?? '—' }}
</div>
<div class="grid grid-cols-2 gap-3 text-sm">
<div>
<span class="text-gray-500 text-xs block mb-0.5">{{ __('رصيد الافتتاح') }}</span>
<span class="font-mono text-gray-700" dir="ltr">{{ number_format($session->opening_balance / 100, 2) }}</span>
</div>
<div>
<span class="text-gray-500 text-xs block mb-0.5">{{ __('الفرق') }}</span>
<span class="font-mono {{ ($session->variance ?? 0) < 0 ? 'text-red-700' : (($session->variance ?? 0) > 0 ? 'text-amber-700' : 'text-gray-700') }}" dir="ltr">
@if($session->variance !== null)
{{ $session->variance >= 0 ? '+' : '' }}{{ number_format($session->variance / 100, 2) }}
@else
—
@endif
</span>
</div>
</div>
<div class="mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500" dir="ltr">
{{ $session->opened_at?->format('Y-m-d H:i') ?? '—' }}
</div>
</div>
@empty
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
<div class="flex flex-col items-center">
<svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
<p class="text-gray-500 text-sm">{{ __('لا توجد ورديات') }}</p>
</div>
</div>
@endforelse
@if($sessions->hasPages())
<div class="mt-3">
{{ $sessions->links() }}
</div>
@endif
</div>
</div> </div>
resources/views/livewire/cash-sessions/cash-session-manage.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('إدارة الوردية') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إدارة الوردية') }}</h1>
<a href="{{ route('cash-sessions.list') }}" wire:navigate <a href="{{ route('cash-sessions.list') }}" wire:navigate
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium"> class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium w-full sm:w-auto justify-center">
<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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg> <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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
{{ __('عودة للقائمة') }} {{ __('عودة للقائمة') }}
</a> </a>
...@@ -22,28 +22,28 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde ...@@ -22,28 +22,28 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde
@if($currentSession) @if($currentSession)
{{-- Current Open Session Info --}} {{-- Current Open Session Info --}}
<div class="bg-white rounded-xl shadow-sm border border-green-200 p-6 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-green-200 p-4 sm:p-6 mb-4 sm:mb-6">
<div class="flex items-center gap-2 mb-4"> <div class="flex items-center gap-2 mb-4">
<div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div> <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
<h3 class="text-lg font-semibold text-gray-800">{{ __('وردية مفتوحة حالياً') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('وردية مفتوحة حالياً') }}</h3>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6">
<div> <div>
<p class="text-sm text-gray-500 mb-1">{{ __('رصيد الافتتاح') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('رصيد الافتتاح') }}</p>
<p class="text-xl font-bold text-gray-800" dir="ltr"> <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">
{{ number_format($currentSession->opening_balance / 100, 2) }} {{ __('ج.م') }} {{ number_format($currentSession->opening_balance / 100, 2) }} {{ __('ج.م') }}
</p> </p>
</div> </div>
<div> <div>
<p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الوارد') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الوارد') }}</p>
<p class="text-xl font-bold text-green-700" dir="ltr"> <p class="text-lg sm:text-xl font-bold text-green-700" dir="ltr">
+{{ number_format(($currentSession->total_cash_in ?? 0) / 100, 2) }} {{ __('ج.م') }} +{{ number_format(($currentSession->total_cash_in ?? 0) / 100, 2) }} {{ __('ج.م') }}
</p> </p>
</div> </div>
<div> <div>
<p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الصادر') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الصادر') }}</p>
<p class="text-xl font-bold text-red-700" dir="ltr"> <p class="text-lg sm:text-xl font-bold text-red-700" dir="ltr">
-{{ number_format(($currentSession->total_cash_out ?? 0) / 100, 2) }} {{ __('ج.م') }} -{{ number_format(($currentSession->total_cash_out ?? 0) / 100, 2) }} {{ __('ج.م') }}
</p> </p>
</div> </div>
...@@ -52,13 +52,13 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde ...@@ -52,13 +52,13 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde
@php @php
$expected = $currentSession->opening_balance + ($currentSession->total_cash_in ?? 0) - ($currentSession->total_cash_out ?? 0); $expected = $currentSession->opening_balance + ($currentSession->total_cash_in ?? 0) - ($currentSession->total_cash_out ?? 0);
@endphp @endphp
<p class="text-xl font-bold text-blue-700" dir="ltr"> <p class="text-lg sm:text-xl font-bold text-blue-700" dir="ltr">
{{ number_format($expected / 100, 2) }} {{ __('ج.م') }} {{ number_format($expected / 100, 2) }} {{ __('ج.م') }}
</p> </p>
</div> </div>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4 pt-4 border-t border-gray-100"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 mt-4 pt-4 border-t border-gray-100">
<div> <div>
<p class="text-sm text-gray-500">{{ __('الفرع') }}</p> <p class="text-sm text-gray-500">{{ __('الفرع') }}</p>
<p class="text-sm font-medium text-gray-800">{{ $currentSession->branch?->name_ar ?? '—' }}</p> <p class="text-sm font-medium text-gray-800">{{ $currentSession->branch?->name_ar ?? '—' }}</p>
...@@ -75,8 +75,8 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde ...@@ -75,8 +75,8 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde
</div> </div>
{{-- Close Session Form --}} {{-- Close Session Form --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('إغلاق الوردية') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('إغلاق الوردية') }}</h3>
<form wire:submit="closeSession" class="space-y-4"> <form wire:submit="closeSession" class="space-y-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رصيد الإغلاق الفعلي (ج.م)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رصيد الإغلاق الفعلي (ج.م)') }}</label>
...@@ -119,7 +119,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -119,7 +119,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
@endif @endif
<button type="submit" wire:loading.attr="disabled" wire:target="closeSession" <button type="submit" wire:loading.attr="disabled" wire:target="closeSession"
class="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 font-medium text-sm"> class="w-full px-4 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 font-medium text-sm">
<span wire:loading.remove wire:target="closeSession">{{ __('إغلاق الوردية') }}</span> <span wire:loading.remove wire:target="closeSession">{{ __('إغلاق الوردية') }}</span>
<span wire:loading wire:target="closeSession">{{ __('جارٍ الإغلاق...') }}</span> <span wire:loading wire:target="closeSession">{{ __('جارٍ الإغلاق...') }}</span>
</button> </button>
...@@ -127,8 +127,8 @@ class="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabl ...@@ -127,8 +127,8 @@ class="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabl
</div> </div>
@else @else
{{-- Open New Session Form --}} {{-- Open New Session Form --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('فتح وردية جديدة') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('فتح وردية جديدة') }}</h3>
<form wire:submit="openSession" class="space-y-4"> <form wire:submit="openSession" class="space-y-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
...@@ -154,7 +154,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -154,7 +154,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
</div> </div>
<button type="submit" wire:loading.attr="disabled" wire:target="openSession" <button type="submit" wire:loading.attr="disabled" wire:target="openSession"
class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 font-medium text-sm"> class="w-full px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 font-medium text-sm">
<span wire:loading.remove wire:target="openSession">{{ __('فتح الوردية') }}</span> <span wire:loading.remove wire:target="openSession">{{ __('فتح الوردية') }}</span>
<span wire:loading wire:target="openSession">{{ __('جارٍ الفتح...') }}</span> <span wire:loading wire:target="openSession">{{ __('جارٍ الفتح...') }}</span>
</button> </button>
......
resources/views/livewire/dashboard.blade.php
View file @ 944501f1
<div> <div>
<div class="mb-6"> <div class="mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('لوحة التحكم') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('لوحة التحكم') }}</h1>
<p class="text-gray-500 mt-1">{{ __('مرحباً') }} {{ auth()->user()->name_ar ?? auth()->user()->name }}</p> <p class="text-gray-500 text-sm mt-1">{{ __('مرحباً') }} {{ auth()->user()->name_ar ?? auth()->user()->name }}</p>
</div> </div>
<!-- Row 1: Key Stats --> <!-- Row 1: Key Stats — 2-col on mobile, 4-col on desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
<!-- Active Participants --> <!-- Active Participants -->
<div class="bg-white rounded-xl shadow-sm border border-green-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-green-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<div class="flex-shrink-0 w-12 h-12 bg-green-50 rounded-lg flex items-center justify-center"> <div class="shrink-0 w-9 h-9 sm:w-12 sm:h-12 bg-green-50 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<p class="text-3xl font-bold text-green-600" dir="ltr">{{ number_format($stats['active_participants']) }}</p> <p class="text-xl sm:text-3xl font-bold text-green-600" dir="ltr">{{ number_format($stats['active_participants']) }}</p>
<p class="text-sm text-gray-500 mt-1">{{ __('المشتركون النشطون') }}</p> <p class="text-xs sm:text-sm text-gray-500 truncate">{{ __('المشتركون النشطون') }}</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Active Enrollments --> <!-- Active Enrollments -->
<div class="bg-white rounded-xl shadow-sm border border-blue-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-blue-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<div class="flex-shrink-0 w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center"> <div class="shrink-0 w-9 h-9 sm:w-12 sm:h-12 bg-blue-50 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<p class="text-3xl font-bold text-blue-600" dir="ltr">{{ number_format($stats['active_enrollments']) }}</p> <p class="text-xl sm:text-3xl font-bold text-blue-600" dir="ltr">{{ number_format($stats['active_enrollments']) }}</p>
<p class="text-sm text-gray-500 mt-1">{{ __('التسجيلات النشطة') }}</p> <p class="text-xs sm:text-sm text-gray-500 truncate">{{ __('التسجيلات النشطة') }}</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Active Groups --> <!-- Active Groups -->
<div class="bg-white rounded-xl shadow-sm border border-purple-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-purple-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<div class="flex-shrink-0 w-12 h-12 bg-purple-50 rounded-lg flex items-center justify-center"> <div class="shrink-0 w-9 h-9 sm:w-12 sm:h-12 bg-purple-50 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<p class="text-3xl font-bold text-purple-600" dir="ltr">{{ number_format($stats['active_groups']) }}</p> <p class="text-xl sm:text-3xl font-bold text-purple-600" dir="ltr">{{ number_format($stats['active_groups']) }}</p>
<p class="text-sm text-gray-500 mt-1">{{ __('المجموعات النشطة') }}</p> <p class="text-xs sm:text-sm text-gray-500 truncate">{{ __('المجموعات النشطة') }}</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Today Sessions --> <!-- Today Sessions -->
<div class="bg-white rounded-xl shadow-sm border border-amber-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-amber-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<div class="flex-shrink-0 w-12 h-12 bg-amber-50 rounded-lg flex items-center justify-center"> <div class="shrink-0 w-9 h-9 sm:w-12 sm:h-12 bg-amber-50 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<p class="text-3xl font-bold text-amber-600" dir="ltr">{{ number_format($stats['today_sessions']) }}</p> <p class="text-xl sm:text-3xl font-bold text-amber-600" dir="ltr">{{ number_format($stats['today_sessions']) }}</p>
<p class="text-sm text-gray-500 mt-1">{{ __('جلسات اليوم') }}</p> <p class="text-xs sm:text-sm text-gray-500 truncate">{{ __('جلسات اليوم') }}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Row 2: Financial Summary --> <!-- Row 2: Financial Summary -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
<!-- Revenue This Month --> <!-- Revenue This Month -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div class="flex items-center gap-3 mb-3"> <div class="flex items-center gap-3 mb-2 sm:mb-3">
<div class="flex-shrink-0 w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center"> <div class="shrink-0 w-9 h-9 sm:w-10 sm:h-10 bg-emerald-50 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 sm:w-5 sm:h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
</div> </div>
<h3 class="text-sm font-medium text-gray-500">{{ __('إيرادات الشهر') }}</h3> <h3 class="text-xs sm:text-sm font-medium text-gray-500">{{ __('إيرادات الشهر') }}</h3>
</div> </div>
<p class="text-2xl font-bold text-gray-800" dir="ltr">{{ number_format($financial['revenue_this_month'] / 100, 2) }} {{ __('ج.م') }}</p> <p class="text-lg sm:text-2xl font-bold text-gray-800" dir="ltr">{{ number_format($financial['revenue_this_month'] / 100, 2) }} {{ __('ج.م') }}</p>
<p class="text-sm text-gray-500 mt-2"> <p class="text-xs sm:text-sm text-gray-500 mt-1 sm:mt-2">
{{ __('مبيعات اليوم:') }} {{ __('مبيعات اليوم:') }}
<span dir="ltr" class="font-medium">{{ number_format($financial['pos_today_count']) }}</span> <span dir="ltr" class="font-medium">{{ number_format($financial['pos_today_count']) }}</span>
{{ __('عملية بقيمة') }} {{ __('عملية بقيمة') }}
...@@ -89,45 +89,45 @@ ...@@ -89,45 +89,45 @@
</div> </div>
<!-- Outstanding Invoices --> <!-- Outstanding Invoices -->
<div class="bg-white rounded-xl shadow-sm border {{ $financial['outstanding_invoices'] > 0 ? 'border-red-200' : 'border-gray-200' }} p-6"> <div class="bg-white rounded-xl shadow-sm border {{ $financial['outstanding_invoices'] > 0 ? 'border-red-200' : 'border-gray-200' }} p-4 sm:p-6">
<div class="flex items-center gap-3 mb-3"> <div class="flex items-center gap-3 mb-2 sm:mb-3">
<div class="flex-shrink-0 w-10 h-10 {{ $financial['outstanding_invoices'] > 0 ? 'bg-red-50' : 'bg-gray-50' }} rounded-lg flex items-center justify-center"> <div class="shrink-0 w-9 h-9 sm:w-10 sm:h-10 {{ $financial['outstanding_invoices'] > 0 ? 'bg-red-50' : 'bg-gray-50' }} rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 {{ $financial['outstanding_invoices'] > 0 ? 'text-red-600' : 'text-gray-600' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 sm:w-5 sm:h-5 {{ $financial['outstanding_invoices'] > 0 ? 'text-red-600' : 'text-gray-600' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg> </svg>
</div> </div>
<h3 class="text-sm font-medium text-gray-500">{{ __('الفواتير المعلقة') }}</h3> <h3 class="text-xs sm:text-sm font-medium text-gray-500">{{ __('الفواتير المعلقة') }}</h3>
</div> </div>
<p class="text-2xl font-bold {{ $financial['outstanding_invoices'] > 0 ? 'text-red-600' : 'text-gray-800' }}" dir="ltr">{{ number_format($financial['outstanding_invoices'] / 100, 2) }} {{ __('ج.م') }}</p> <p class="text-lg sm:text-2xl font-bold {{ $financial['outstanding_invoices'] > 0 ? 'text-red-600' : 'text-gray-800' }}" dir="ltr">{{ number_format($financial['outstanding_invoices'] / 100, 2) }} {{ __('ج.م') }}</p>
</div> </div>
</div> </div>
<!-- Row 3: Attendance Summary --> <!-- Row 3: Attendance Summary -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-3 sm:mb-4">
<h3 class="text-lg font-semibold text-gray-800">{{ __('حضور اليوم') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('حضور اليوم') }}</h3>
<span class="text-2xl font-bold {{ $attendance['rate'] >= 90 ? 'text-green-600' : ($attendance['rate'] >= 75 ? 'text-amber-600' : 'text-red-600') }}" dir="ltr">{{ $attendance['rate'] }}%</span> <span class="text-xl sm:text-2xl font-bold {{ $attendance['rate'] >= 90 ? 'text-green-600' : ($attendance['rate'] >= 75 ? 'text-amber-600' : 'text-red-600') }}" dir="ltr">{{ $attendance['rate'] }}%</span>
</div> </div>
<!-- Progress bar --> <!-- Progress bar -->
<div class="w-full bg-gray-200 rounded-full h-4 mb-4"> <div class="w-full bg-gray-200 rounded-full h-3 sm:h-4 mb-3 sm:mb-4">
<div class="h-4 rounded-full transition-all duration-300 {{ $attendance['rate'] >= 90 ? 'bg-green-500' : ($attendance['rate'] >= 75 ? 'bg-amber-500' : 'bg-red-500') }}" <div class="h-3 sm:h-4 rounded-full transition-all duration-300 {{ $attendance['rate'] >= 90 ? 'bg-green-500' : ($attendance['rate'] >= 75 ? 'bg-amber-500' : 'bg-red-500') }}"
style="width: {{ $attendance['rate'] }}%"></div> style="width: {{ $attendance['rate'] }}%"></div>
</div> </div>
<div class="flex items-center gap-6 text-sm text-gray-600"> <div class="flex flex-wrap items-center gap-3 sm:gap-6 text-xs sm:text-sm text-gray-600">
<span>{{ __('الحاضرون:') }} <span dir="ltr" class="font-medium">{{ number_format($attendance['present']) }}</span> {{ __('من') }} <span dir="ltr" class="font-medium">{{ number_format($attendance['expected']) }}</span></span> <span>{{ __('الحاضرون:') }} <span dir="ltr" class="font-medium">{{ number_format($attendance['present']) }}</span> {{ __('من') }} <span dir="ltr" class="font-medium">{{ number_format($attendance['expected']) }}</span></span>
<span class="text-gray-300">|</span> <span class="text-gray-300 hidden sm:inline">|</span>
<span>{{ __('الغائبون:') }} <span dir="ltr" class="font-medium text-red-600">{{ number_format($attendance['absent']) }}</span></span> <span>{{ __('الغائبون:') }} <span dir="ltr" class="font-medium text-red-600">{{ number_format($attendance['absent']) }}</span></span>
</div> </div>
</div> </div>
<!-- Row 4: Alert Badges --> <!-- Row 4: Alert Badges -->
@if($lowStockCount > 0 || $nearFullGroups > 0 || $recentEnrollments > 0) @if($lowStockCount > 0 || $nearFullGroups > 0 || $recentEnrollments > 0)
<div class="flex flex-wrap gap-4 mb-6"> <div class="flex flex-wrap gap-2 sm:gap-4 mb-4 sm:mb-6">
@if($lowStockCount > 0) @if($lowStockCount > 0)
<div class="inline-flex items-center gap-2 bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded-lg text-sm font-medium"> <div class="inline-flex items-center gap-2 bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-lg text-xs sm:text-sm font-medium">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
</svg> </svg>
<span dir="ltr" class="font-bold">{{ $lowStockCount }}</span> {{ __('منتج تحت الحد الأدنى') }} <span dir="ltr" class="font-bold">{{ $lowStockCount }}</span> {{ __('منتج تحت الحد الأدنى') }}
...@@ -135,8 +135,8 @@ ...@@ -135,8 +135,8 @@
@endif @endif
@if($nearFullGroups > 0) @if($nearFullGroups > 0)
<div class="inline-flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-700 px-4 py-2 rounded-lg text-sm font-medium"> <div class="inline-flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-700 px-3 py-2 rounded-lg text-xs sm:text-sm font-medium">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
<span dir="ltr" class="font-bold">{{ $nearFullGroups }}</span> {{ __('مجموعة شبه ممتلئة') }} <span dir="ltr" class="font-bold">{{ $nearFullGroups }}</span> {{ __('مجموعة شبه ممتلئة') }}
...@@ -144,8 +144,8 @@ ...@@ -144,8 +144,8 @@
@endif @endif
@if($recentEnrollments > 0) @if($recentEnrollments > 0)
<div class="inline-flex items-center gap-2 bg-green-50 border border-green-200 text-green-700 px-4 py-2 rounded-lg text-sm font-medium"> <div class="inline-flex items-center gap-2 bg-green-50 border border-green-200 text-green-700 px-3 py-2 rounded-lg text-xs sm:text-sm font-medium">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
</svg> </svg>
<span dir="ltr" class="font-bold">{{ $recentEnrollments }}</span> {{ __('تسجيل جديد (٧ أيام)') }} <span dir="ltr" class="font-bold">{{ $recentEnrollments }}</span> {{ __('تسجيل جديد (٧ أيام)') }}
...@@ -155,24 +155,24 @@ ...@@ -155,24 +155,24 @@
@endif @endif
<!-- Row 5: Today's Schedule + Overdue Invoices --> <!-- Row 5: Today's Schedule + Overdue Invoices -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
<!-- Today's Schedule --> <!-- Today's Schedule -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('جدول اليوم') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">{{ __('جدول اليوم') }}</h3>
@if($todaySchedule->isEmpty()) @if($todaySchedule->isEmpty())
<p class="text-gray-400 text-sm">{{ __('لا توجد جلسات مجدولة اليوم') }}</p> <p class="text-gray-400 text-sm">{{ __('لا توجد جلسات مجدولة اليوم') }}</p>
@else @else
<div class="space-y-3 max-h-64 overflow-y-auto"> <div class="space-y-2 sm:space-y-3 max-h-64 overflow-y-auto">
@foreach($todaySchedule as $session) @foreach($todaySchedule as $session)
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"> <div class="flex items-center gap-3 p-2.5 sm:p-3 bg-gray-50 rounded-lg">
<div class="text-center min-w-[50px]"> <div class="text-center min-w-[44px]">
<span class="text-sm font-bold text-blue-600" dir="ltr">{{ $session->start_time?->format('H:i') }}</span> <span class="text-xs sm:text-sm font-bold text-blue-600" dir="ltr">{{ $session->start_time?->format('H:i') }}</span>
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-800 truncate">{{ $session->group?->name_ar ?? '' }}</p> <p class="text-xs sm:text-sm font-medium text-gray-800 truncate">{{ $session->group?->name_ar ?? '' }}</p>
<p class="text-xs text-gray-500">{{ $session->group?->program?->name_ar ?? '' }}</p> <p class="text-xs text-gray-500 truncate">{{ $session->group?->program?->name_ar ?? '' }}</p>
</div> </div>
<span class="text-xs px-2 py-1 rounded-full <span class="text-xs px-2 py-1 rounded-full whitespace-nowrap
{{ $session->status === 'completed' ? 'bg-green-100 text-green-700' : {{ $session->status === 'completed' ? 'bg-green-100 text-green-700' :
($session->status === 'in_progress' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600') }}"> ($session->status === 'in_progress' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600') }}">
{{ $session->status === 'completed' ? __('مكتملة') : {{ $session->status === 'completed' ? __('مكتملة') :
...@@ -185,19 +185,19 @@ ...@@ -185,19 +185,19 @@
</div> </div>
<!-- Overdue Invoices --> <!-- Overdue Invoices -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('فواتير متأخرة') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">{{ __('فواتير متأخرة') }}</h3>
@if($overdueInvoices->isEmpty()) @if($overdueInvoices->isEmpty())
<p class="text-gray-400 text-sm">{{ __('لا توجد فواتير متأخرة') }}</p> <p class="text-gray-400 text-sm">{{ __('لا توجد فواتير متأخرة') }}</p>
@else @else
<div class="space-y-3 max-h-64 overflow-y-auto"> <div class="space-y-2 sm:space-y-3 max-h-64 overflow-y-auto">
@foreach($overdueInvoices as $inv) @foreach($overdueInvoices as $inv)
<a href="{{ route('invoices.show', $inv) }}" class="flex items-center justify-between p-3 bg-red-50 rounded-lg hover:bg-red-100 transition"> <a href="{{ route('invoices.show', $inv) }}" class="flex items-center justify-between p-2.5 sm:p-3 bg-red-50 rounded-lg hover:bg-red-100 transition-colors">
<div> <div class="min-w-0 flex-1 me-2">
<p class="text-sm font-medium text-gray-800">{{ $inv->participant?->person?->name_ar ?? $inv->invoice_number }}</p> <p class="text-xs sm:text-sm font-medium text-gray-800 truncate">{{ $inv->participant?->person?->name_ar ?? $inv->invoice_number }}</p>
<p class="text-xs text-red-600">{{ __('استحقاق:') }} {{ $inv->due_date?->format('Y-m-d') }}</p> <p class="text-xs text-red-600">{{ __('استحقاق:') }} {{ $inv->due_date?->format('Y-m-d') }}</p>
</div> </div>
<span class="text-sm font-bold text-red-700" dir="ltr">{{ number_format(($inv->total_amount - $inv->paid_amount) / 100, 2) }} {{ __('ج.م') }}</span> <span class="text-xs sm:text-sm font-bold text-red-700 whitespace-nowrap" dir="ltr">{{ number_format(($inv->total_amount - $inv->paid_amount) / 100, 2) }} {{ __('ج.م') }}</span>
</a> </a>
@endforeach @endforeach
</div> </div>
...@@ -206,21 +206,21 @@ ...@@ -206,21 +206,21 @@
</div> </div>
<!-- Row 6: Recent Payments + Upcoming Birthdays --> <!-- Row 6: Recent Payments + Upcoming Birthdays -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4">
<!-- Recent Payments --> <!-- Recent Payments -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('آخر المدفوعات') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">{{ __('آخر المدفوعات') }}</h3>
@if($recentPayments->isEmpty()) @if($recentPayments->isEmpty())
<p class="text-gray-400 text-sm">{{ __('لا توجد مدفوعات حديثة') }}</p> <p class="text-gray-400 text-sm">{{ __('لا توجد مدفوعات حديثة') }}</p>
@else @else
<div class="space-y-3 max-h-64 overflow-y-auto"> <div class="space-y-2 sm:space-y-3 max-h-64 overflow-y-auto">
@foreach($recentPayments as $payment) @foreach($recentPayments as $payment)
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> <div class="flex items-center justify-between p-2.5 sm:p-3 bg-gray-50 rounded-lg">
<div> <div class="min-w-0 flex-1 me-2">
<p class="text-sm font-medium text-gray-800">{{ $payment->reference ?? '-' }}</p> <p class="text-xs sm:text-sm font-medium text-gray-800 truncate">{{ $payment->reference ?? '-' }}</p>
<p class="text-xs text-gray-500">{{ $payment->created_at?->diffForHumans() }} — {{ $payment->createdBy?->name ?? '' }}</p> <p class="text-xs text-gray-500 truncate">{{ $payment->created_at?->diffForHumans() }} — {{ $payment->creator?->name ?? '' }}</p>
</div> </div>
<span class="text-sm font-bold text-emerald-600" dir="ltr">{{ number_format($payment->amount / 100, 2) }} {{ __('ج.م') }}</span> <span class="text-xs sm:text-sm font-bold text-emerald-600 whitespace-nowrap" dir="ltr">{{ number_format($payment->amount / 100, 2) }} {{ __('ج.م') }}</span>
</div> </div>
@endforeach @endforeach
</div> </div>
...@@ -228,21 +228,21 @@ ...@@ -228,21 +228,21 @@
</div> </div>
<!-- Upcoming Birthdays --> <!-- Upcoming Birthdays -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('أعياد ميلاد قادمة') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">{{ __('أعياد ميلاد قادمة') }}</h3>
@if($upcomingBirthdays->isEmpty()) @if($upcomingBirthdays->isEmpty())
<p class="text-gray-400 text-sm">{{ __('لا توجد أعياد ميلاد قريبة') }}</p> <p class="text-gray-400 text-sm">{{ __('لا توجد أعياد ميلاد قريبة') }}</p>
@else @else
<div class="space-y-3 max-h-64 overflow-y-auto"> <div class="space-y-2 sm:space-y-3 max-h-64 overflow-y-auto">
@foreach($upcomingBirthdays as $person) @foreach($upcomingBirthdays as $person)
<div class="flex items-center gap-3 p-3 bg-pink-50 rounded-lg"> <div class="flex items-center gap-3 p-2.5 sm:p-3 bg-pink-50 rounded-lg">
<div class="flex-shrink-0 w-8 h-8 bg-pink-200 rounded-full flex items-center justify-center"> <div class="shrink-0 w-8 h-8 bg-pink-200 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0A1.75 1.75 0 003 15.546V12a9 9 0 0118 0v3.546z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0A1.75 1.75 0 003 15.546V12a9 9 0 0118 0v3.546z"/>
</svg> </svg>
</div> </div>
<div class="flex-1"> <div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-800">{{ $person->name_ar ?? $person->name }}</p> <p class="text-xs sm:text-sm font-medium text-gray-800 truncate">{{ $person->name_ar ?? $person->name }}</p>
<p class="text-xs text-gray-500">{{ $person->date_of_birth?->format('d/m') }}</p> <p class="text-xs text-gray-500">{{ $person->date_of_birth?->format('d/m') }}</p>
</div> </div>
</div> </div>
......
resources/views/livewire/enrollments/enrollment-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('تسجيل في مجموعة') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تسجيل في مجموعة') }}</h1>
<a href="{{ route('enrollments.list') }}" wire:navigate <a href="{{ route('enrollments.list') }}" wire:navigate
class="text-sm text-gray-600 hover:text-gray-800"> class="text-sm text-gray-600 hover:text-gray-800">
{{ __('العودة للقائمة') }} {{ __('العودة للقائمة') }}
...@@ -14,7 +14,7 @@ class="text-sm text-gray-600 hover:text-gray-800"> ...@@ -14,7 +14,7 @@ class="text-sm text-gray-600 hover:text-gray-800">
</div> </div>
@endif @endif
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
{{-- Participant Selection --}} {{-- Participant Selection --}}
<div> <div>
...@@ -22,7 +22,7 @@ class="text-sm text-gray-600 hover:text-gray-800"> ...@@ -22,7 +22,7 @@ class="text-sm text-gray-600 hover:text-gray-800">
{{ __('المشترك') }} <span class="text-red-500">*</span> {{ __('المشترك') }} <span class="text-red-500">*</span>
</label> </label>
<select wire:model="participant_id" id="participant_id" <select wire:model="participant_id" id="participant_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('participant_id') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('participant_id') border-red-500 @enderror">
<option value="">{{ __('اختر المشترك...') }}</option> <option value="">{{ __('اختر المشترك...') }}</option>
@foreach($participants as $participant) @foreach($participants as $participant)
<option value="{{ $participant->id }}"> <option value="{{ $participant->id }}">
...@@ -44,7 +44,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -44,7 +44,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{ __('المجموعة') }} <span class="text-red-500">*</span> {{ __('المجموعة') }} <span class="text-red-500">*</span>
</label> </label>
<select wire:model="training_group_id" id="training_group_id" <select wire:model="training_group_id" id="training_group_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('training_group_id') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('training_group_id') border-red-500 @enderror">
<option value="">{{ __('اختر المجموعة...') }}</option> <option value="">{{ __('اختر المجموعة...') }}</option>
@foreach($groups as $group) @foreach($groups as $group)
<option value="{{ $group->id }}"> <option value="{{ $group->id }}">
...@@ -67,7 +67,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -67,7 +67,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{ __('تاريخ البدء') }} {{ __('تاريخ البدء') }}
</label> </label>
<input type="date" wire:model="start_date" id="start_date" dir="ltr" <input type="date" wire:model="start_date" id="start_date" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('start_date') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('start_date') border-red-500 @enderror">
<p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً لاستخدام تاريخ بدء المجموعة') }}</p> <p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً لاستخدام تاريخ بدء المجموعة') }}</p>
@error('start_date') @error('start_date')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p> <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
...@@ -80,7 +80,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -80,7 +80,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{ __('حالة الدفع') }} <span class="text-red-500">*</span> {{ __('حالة الدفع') }} <span class="text-red-500">*</span>
</label> </label>
<select wire:model="payment_status" id="payment_status" <select wire:model="payment_status" id="payment_status"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('payment_status') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('payment_status') border-red-500 @enderror">
@foreach($paymentOptions as $value => $label) @foreach($paymentOptions as $value => $label)
<option value="{{ $value }}">{{ __($label) }}</option> <option value="{{ $value }}">{{ __($label) }}</option>
@endforeach @endforeach
...@@ -96,7 +96,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -96,7 +96,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{ __('ملاحظات') }} {{ __('ملاحظات') }}
</label> </label>
<textarea wire:model="notes" id="notes" rows="3" <textarea wire:model="notes" id="notes" rows="3"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('notes') border-red-500 @enderror" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('notes') border-red-500 @enderror"
placeholder="{{ __('ملاحظات إضافية...') }}"></textarea> placeholder="{{ __('ملاحظات إضافية...') }}"></textarea>
@error('notes') @error('notes')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p> <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
...@@ -104,15 +104,15 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -104,15 +104,15 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Submit --}} {{-- Submit --}}
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-4 border-t border-gray-200">
<a href="{{ route('enrollments.list') }}" wire:navigate <a href="{{ route('enrollments.list') }}" wire:navigate
class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg"> class="text-center px-4 sm:px-6 py-2.5 text-sm text-gray-700 hover:bg-gray-100 rounded-lg border border-gray-300 font-medium">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</a> </a>
<button type="submit" <button type="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="save" wire:target="save"
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
<span wire:loading.remove wire:target="save">{{ __('تسجيل') }}</span> <span wire:loading.remove wire:target="save">{{ __('تسجيل') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ التسجيل...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ التسجيل...') }}</span>
</button> </button>
......
resources/views/livewire/enrollments/enrollment-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('التسجيلات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('التسجيلات') }}</h1>
@can('enrollments.create') @can('enrollments.create')
<a href="{{ route('enrollments.create') }}" wire:navigate <a href="{{ route('enrollments.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 text-sm font-medium">
<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> <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> </a>
@endcan @endcan
</div> </div>
{{-- Flash Messages --}} {{-- Flash Messages --}}
@if(session('success')) @if(session('success'))
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm"> <div class="mb-4 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
{{ session('success') }} {{ session('success') }}
</div> </div>
@endif @endif
@if(session('error')) @if(session('error'))
<div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm"> <div class="mb-4 p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
{{ session('error') }} {{ session('error') }}
</div> </div>
@endif @endif
{{-- Filters --}} {{-- Filters --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
<div class="grid grid-cols-1 sm:grid-cols-5 gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
<div class="sm:col-span-2"> <div class="col-span-2 md:col-span-1 lg:col-span-2">
<input type="text" wire:model.live.debounce.300ms="search" <input type="text" wire:model.live.debounce.300ms="search"
placeholder="{{ __('بحث بالاسم أو رقم المشترك...') }}" placeholder="{{ __('بحث بالاسم أو رقم المشترك...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<select wire:model.live="status" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="status" class="text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل الحالات') }}</option> <option value="">{{ __('كل الحالات') }}</option>
@foreach($statusOptions as $value => $label) @foreach($statusOptions as $value => $label)
<option value="{{ $value }}">{{ __($label) }}</option> <option value="{{ $value }}">{{ __($label) }}</option>
@endforeach @endforeach
</select> </select>
<select wire:model.live="groupFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="groupFilter" class="text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل المجموعات') }}</option> <option value="">{{ __('كل المجموعات') }}</option>
@foreach($groups as $group) @foreach($groups as $group)
<option value="{{ $group->id }}">{{ $group->name_ar }}</option> <option value="{{ $group->id }}">{{ $group->name_ar }}</option>
@endforeach @endforeach
</select> </select>
<select wire:model.live="paymentFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="paymentFilter" class="text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل حالات الدفع') }}</option> <option value="">{{ __('كل حالات الدفع') }}</option>
@foreach($paymentOptions as $value => $label) @foreach($paymentOptions as $value => $label)
<option value="{{ $value }}">{{ __($label) }}</option> <option value="{{ $value }}">{{ __($label) }}</option>
...@@ -52,9 +52,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -52,9 +52,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
</div> </div>
{{-- Table --}} {{-- Desktop Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div wire:loading.class="opacity-50 pointer-events-none"> <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
<tr> <tr>
...@@ -127,7 +127,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -127,7 +127,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
@can('enrollments.cancel') @can('enrollments.cancel')
@if(in_array($statusValue, ['pending', 'active'])) @if(in_array($statusValue, ['pending', 'active']))
<button @click="showCancel = true" <button @click="showCancel = true"
class="text-red-600 hover:text-red-800 text-sm"> class="text-red-600 hover:text-red-800 text-sm py-2">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</button> </button>
...@@ -175,7 +175,7 @@ class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disab ...@@ -175,7 +175,7 @@ class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disab
<p class="text-gray-500 text-sm">{{ __('لا يوجد تسجيلات') }}</p> <p class="text-gray-500 text-sm">{{ __('لا يوجد تسجيلات') }}</p>
@can('enrollments.create') @can('enrollments.create')
<a href="{{ route('enrollments.create') }}" wire:navigate <a href="{{ route('enrollments.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 text-sm font-medium py-2">
{{ __('إضافة أول تسجيل') }} {{ __('إضافة أول تسجيل') }}
</a> </a>
@endcan @endcan
...@@ -193,4 +193,124 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium"> ...@@ -193,4 +193,124 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
</div> </div>
@endif @endif
</div> </div>
{{-- Mobile Cards --}}
<div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
@forelse($enrollments as $enrollment)
@php
$statusValue = $enrollment->status->value ?? $enrollment->status;
$statusColors = [
'pending' => 'amber',
'active' => 'green',
'completed' => 'blue',
'cancelled' => 'red',
'expired' => 'gray',
'waitlisted' => 'purple',
];
$color = $statusColors[$statusValue] ?? 'gray';
$paymentValue = $enrollment->payment_status->value ?? $enrollment->payment_status;
$paymentColors = [
'paid' => 'green',
'pending' => 'amber',
'partial' => 'blue',
'overdue' => 'red',
'waived' => 'gray',
];
$pColor = $paymentColors[$paymentValue] ?? 'gray';
@endphp
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
<div class="flex items-start justify-between gap-3 mb-3">
<div class="min-w-0 flex-1">
<h3 class="font-medium text-gray-800 truncate">
{{ $enrollment->participant?->person?->name_ar ?? '—' }}
</h3>
@if($enrollment->participant?->participant_number)
<p class="text-xs text-gray-500 mt-0.5" dir="ltr">
{{ $enrollment->participant->participant_number }}
</p>
@endif
</div>
<div class="flex items-center gap-2 flex-shrink-0">
<span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full">
{{ __($statusOptions[$statusValue] ?? $statusValue) }}
</span>
<span class="px-2 py-0.5 text-xs bg-{{ $pColor }}-100 text-{{ $pColor }}-700 rounded-full">
{{ __($paymentOptions[$paymentValue] ?? $paymentValue) }}
</span>
</div>
</div>
<div class="flex items-center gap-4 text-sm text-gray-600 mb-3">
@if($enrollment->group?->name_ar)
<span class="truncate">{{ $enrollment->group->name_ar }}</span>
@endif
@if($enrollment->enrollment_date)
<span class="flex-shrink-0" dir="ltr">{{ $enrollment->enrollment_date->format('Y-m-d') }}</span>
@endif
</div>
{{-- Mobile Cancel Action --}}
<div x-data="{ showCancel: false, reason: '' }">
@can('enrollments.cancel')
@if(in_array($statusValue, ['pending', 'active']))
<button @click="showCancel = true"
class="text-red-600 hover:text-red-800 text-sm font-medium py-2">
{{ __('إلغاء التسجيل') }}
</button>
{{-- Cancel Confirmation Modal --}}
<div x-show="showCancel" x-cloak
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>
<p class="text-sm text-gray-600 mb-4">
{{ __('هل أنت متأكد من إلغاء تسجيل') }}
<strong>{{ $enrollment->participant?->person?->name_ar }}</strong>؟
</p>
<textarea x-model="reason"
class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focus:ring-red-500 focus:border-red-500"
rows="3"
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">
{{ __('تراجع') }}
</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"
:disabled="!reason.trim()">
<span wire:loading.remove wire:target="cancelEnrollment">{{ __('تأكيد الإلغاء') }}</span>
<span wire:loading wire:target="cancelEnrollment">{{ __('جارٍ الإلغاء...') }}</span>
</button>
</div>
</div>
</div>
@endif
@endcan
</div>
</div>
@empty
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
<svg class="w-12 h-12 text-gray-300 mb-3 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
</svg>
<p class="text-gray-500 text-sm">{{ __('لا يوجد تسجيلات') }}</p>
@can('enrollments.create')
<a href="{{ route('enrollments.create') }}" wire:navigate
class="mt-2 inline-block text-blue-600 hover:text-blue-800 text-sm font-medium py-2">
{{ __('إضافة أول تسجيل') }}
</a>
@endcan
</div>
@endforelse
@if($enrollments->hasPages())
<div class="mt-4">
{{ $enrollments->links() }}
</div>
@endif
</div>
</div> </div>
resources/views/livewire/enrollments/transfer-group.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('نقل إلى مجموعة') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('نقل إلى مجموعة') }}</h1>
<a href="{{ route('enrollments.list') }}" wire:navigate <a href="{{ route('enrollments.list') }}" wire:navigate
class="text-sm text-gray-600 hover:text-gray-800"> class="text-sm text-gray-600 hover:text-gray-800">
{{ __('العودة للقائمة') }} {{ __('العودة للقائمة') }}
...@@ -20,7 +20,7 @@ class="text-sm text-gray-600 hover:text-gray-800"> ...@@ -20,7 +20,7 @@ class="text-sm text-gray-600 hover:text-gray-800">
</div> </div>
@endif @endif
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 space-y-6">
{{-- Step 1: Search Participant --}} {{-- Step 1: Search Participant --}}
<div> <div>
...@@ -31,7 +31,7 @@ class="text-sm text-gray-600 hover:text-gray-800"> ...@@ -31,7 +31,7 @@ class="text-sm text-gray-600 hover:text-gray-800">
wire:model.live.debounce.300ms="search" wire:model.live.debounce.300ms="search"
id="search" id="search"
placeholder="{{ __('ابحث بالاسم أو رقم المشترك...') }}" placeholder="{{ __('ابحث بالاسم أو رقم المشترك...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
{{-- Search Results --}} {{-- Search Results --}}
@if(strlen($search) >= 2 && $participants->isNotEmpty() && !$participant_id) @if(strlen($search) >= 2 && $participants->isNotEmpty() && !$participant_id)
...@@ -64,7 +64,7 @@ class="w-full px-4 py-3 text-start hover:bg-blue-50 flex items-center justify-be ...@@ -64,7 +64,7 @@ class="w-full px-4 py-3 text-start hover:bg-blue-50 flex items-center justify-be
?? \App\Domain\Participant\Models\Participant::with('person')->find($participant_id); ?? \App\Domain\Participant\Models\Participant::with('person')->find($participant_id);
@endphp @endphp
@if($selectedParticipant) @if($selectedParticipant)
<div class="p-4 bg-blue-50 border border-blue-200 rounded-lg flex items-center justify-between"> <div class="p-3 sm:p-4 bg-blue-50 border border-blue-200 rounded-lg flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<div> <div>
<span class="text-sm font-medium text-blue-800">{{ __('المشترك المختار:') }}</span> <span class="text-sm font-medium text-blue-800">{{ __('المشترك المختار:') }}</span>
<span class="text-sm text-blue-700 ms-1">{{ $selectedParticipant->person?->name_ar }}</span> <span class="text-sm text-blue-700 ms-1">{{ $selectedParticipant->person?->name_ar }}</span>
...@@ -72,7 +72,7 @@ class="w-full px-4 py-3 text-start hover:bg-blue-50 flex items-center justify-be ...@@ -72,7 +72,7 @@ class="w-full px-4 py-3 text-start hover:bg-blue-50 flex items-center justify-be
<span class="text-xs text-blue-600 ms-2">#{{ $selectedParticipant->participant_number }}</span> <span class="text-xs text-blue-600 ms-2">#{{ $selectedParticipant->participant_number }}</span>
@endif @endif
</div> </div>
<button type="button" wire:click="$set('participant_id', null)" class="text-blue-600 hover:text-blue-800 text-xs"> <button type="button" wire:click="$set('participant_id', null)" class="text-blue-600 hover:text-blue-800 text-xs self-start sm:self-auto">
{{ __('تغيير') }} {{ __('تغيير') }}
</button> </button>
</div> </div>
...@@ -89,23 +89,23 @@ class="w-full px-4 py-3 text-start hover:bg-blue-50 flex items-center justify-be ...@@ -89,23 +89,23 @@ class="w-full px-4 py-3 text-start hover:bg-blue-50 flex items-center justify-be
@else @else
<div class="space-y-2"> <div class="space-y-2">
@foreach($activeEnrollments as $enrollment) @foreach($activeEnrollments as $enrollment)
<label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition <label class="flex items-start sm:items-center gap-3 p-3 border rounded-lg cursor-pointer transition
{{ $enrollment_id === $enrollment->id ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300' }}"> {{ $enrollment_id === $enrollment->id ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300' }}">
<input type="radio" <input type="radio"
wire:click="selectEnrollment({{ $enrollment->id }})" wire:click="selectEnrollment({{ $enrollment->id }})"
name="enrollment_selection" name="enrollment_selection"
value="{{ $enrollment->id }}" value="{{ $enrollment->id }}"
@checked($enrollment_id === $enrollment->id) @checked($enrollment_id === $enrollment->id)
class="text-blue-600 focus:ring-blue-500"> class="text-blue-600 focus:ring-blue-500 mt-1 sm:mt-0">
<div class="flex-1"> <div class="flex-1 min-w-0">
<span class="text-sm font-medium text-gray-800">{{ $enrollment->group?->name_ar }}</span> <span class="text-sm font-medium text-gray-800">{{ $enrollment->group?->name_ar }}</span>
@if($enrollment->program) @if($enrollment->program)
<span class="text-xs text-gray-500 ms-2">— {{ $enrollment->program->name_ar }}</span> <span class="text-xs text-gray-500 ms-2">— {{ $enrollment->program->name_ar }}</span>
@endif @endif
<div class="text-xs text-gray-500 mt-0.5"> <div class="text-xs text-gray-500 mt-0.5 flex flex-wrap gap-x-3 gap-y-0.5">
{{ __('تاريخ التسجيل:') }} {{ $enrollment->enrollment_date?->format('Y-m-d') }} <span>{{ __('تاريخ التسجيل:') }} {{ $enrollment->enrollment_date?->format('Y-m-d') }}</span>
@if($enrollment->group) @if($enrollment->group)
<span class="ms-3">{{ __('السعة:') }} {{ $enrollment->group->current_count }}/{{ $enrollment->group->max_capacity }}</span> <span>{{ __('السعة:') }} {{ $enrollment->group->current_count }}/{{ $enrollment->group->max_capacity }}</span>
@endif @endif
</div> </div>
</div> </div>
...@@ -129,7 +129,7 @@ class="text-blue-600 focus:ring-blue-500"> ...@@ -129,7 +129,7 @@ class="text-blue-600 focus:ring-blue-500">
<p class="text-sm text-gray-500 p-3 bg-gray-50 rounded-lg">{{ __('لا توجد مجموعات متاحة بها أماكن شاغرة') }}</p> <p class="text-sm text-gray-500 p-3 bg-gray-50 rounded-lg">{{ __('لا توجد مجموعات متاحة بها أماكن شاغرة') }}</p>
@else @else
<select wire:model="destination_group_id" id="destination_group_id" <select wire:model="destination_group_id" id="destination_group_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('destination_group_id') border-red-500 @enderror"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm @error('destination_group_id') border-red-500 @enderror">
<option value="">{{ __('اختر المجموعة الجديدة...') }}</option> <option value="">{{ __('اختر المجموعة الجديدة...') }}</option>
@foreach($destinationGroups as $group) @foreach($destinationGroups as $group)
<option value="{{ $group->id }}"> <option value="{{ $group->id }}">
...@@ -150,9 +150,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -150,9 +150,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{-- Submit --}} {{-- Submit --}}
@if($enrollment_id && $destinationGroups->isNotEmpty()) @if($enrollment_id && $destinationGroups->isNotEmpty())
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-4 border-t border-gray-200">
<a href="{{ route('enrollments.list') }}" wire:navigate <a href="{{ route('enrollments.list') }}" wire:navigate
class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg"> class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 rounded-lg text-center">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</a> </a>
<button type="button" <button type="button"
...@@ -160,7 +160,7 @@ class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg"> ...@@ -160,7 +160,7 @@ class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg">
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="transfer" wire:target="transfer"
wire:confirm="{{ __('هل أنت متأكد من نقل المشترك إلى المجموعة الجديدة؟') }}" wire:confirm="{{ __('هل أنت متأكد من نقل المشترك إلى المجموعة الجديدة؟') }}"
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50"> class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
<span wire:loading.remove wire:target="transfer">{{ __('نقل') }}</span> <span wire:loading.remove wire:target="transfer">{{ __('نقل') }}</span>
<span wire:loading wire:target="transfer">{{ __('جارٍ النقل...') }}</span> <span wire:loading wire:target="transfer">{{ __('جارٍ النقل...') }}</span>
</button> </button>
......
resources/views/livewire/enrollments/waitlist-manager.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('قائمة الانتظار') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('قائمة الانتظار') }}</h1>
<a href="{{ route('enrollments.list') }}" wire:navigate <a href="{{ route('enrollments.list') }}" wire:navigate
class="inline-flex items-center gap-2 px-4 py-2 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium"> class="inline-flex items-center gap-2 px-4 py-2 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium">
<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="M11 17l-5-5m0 0l5-5m-5 5h12"/></svg> <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="M11 17l-5-5m0 0l5-5m-5 5h12"/></svg>
......
resources/views/livewire/evaluations/evaluation-criteria-list.blade.php
View file @ 944501f1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<!-- Header --> <!-- Header -->
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<div> <div>
<h1 class="text-2xl font-bold text-gray-900">{{ __('معايير التقييم') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('معايير التقييم') }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('إدارة معايير تقييم المشتركين') }}</p> <p class="mt-1 text-sm text-gray-500">{{ __('إدارة معايير تقييم المشتركين') }}</p>
</div> </div>
<button <button
......
resources/views/livewire/evaluations/evaluation-form.blade.php
View file @ 944501f1
<div> <div>
<!-- Header --> <!-- Header -->
<div class="mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-900">{{ $evaluation ? __('تعديل التقييم') : __('تقييم جديد') }}</h1> <div>
<p class="mt-1 text-sm text-gray-500">{{ __('تقييم أداء المشترك في المجموعة التدريبية') }}</p> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ $evaluation ? __('تعديل التقييم') : __('تقييم جديد') }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('تقييم أداء المشترك في المجموعة التدريبية') }}</p>
</div>
</div> </div>
@if(session('error')) @if(session('error'))
...@@ -13,16 +15,16 @@ ...@@ -13,16 +15,16 @@
<div class="space-y-6"> <div class="space-y-6">
<!-- Basic Info --> <!-- Basic Info -->
<div class="bg-white border border-gray-200 rounded-lg p-6"> <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('المعلومات الأساسية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">{{ __('المعلومات الأساسية') }}</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> <div class="grid grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-2 lg:grid-cols-3">
<!-- Participant --> <!-- Participant -->
<div> <div>
<label for="participant_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المشترك') }} *</label> <label for="participant_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المشترك') }} *</label>
<select <select
id="participant_id" id="participant_id"
wire:model="participant_id" wire:model="participant_id"
class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm @error('participant_id') border-red-500 @enderror"> class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 @error('participant_id') border-red-500 @enderror">
<option value="">{{ __('اختر المشترك') }}</option> <option value="">{{ __('اختر المشترك') }}</option>
@foreach($participants as $participant) @foreach($participants as $participant)
<option value="{{ $participant->id }}">{{ $participant->person?->name_ar ?? $participant->person?->name }}</option> <option value="{{ $participant->id }}">{{ $participant->person?->name_ar ?? $participant->person?->name }}</option>
...@@ -37,7 +39,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -37,7 +39,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
<select <select
id="training_group_id" id="training_group_id"
wire:model="training_group_id" wire:model="training_group_id"
class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm @error('training_group_id') border-red-500 @enderror"> class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 @error('training_group_id') border-red-500 @enderror">
<option value="">{{ __('اختر المجموعة') }}</option> <option value="">{{ __('اختر المجموعة') }}</option>
@foreach($groups as $group) @foreach($groups as $group)
<option value="{{ $group->id }}">{{ $group->name_ar }}</option> <option value="{{ $group->id }}">{{ $group->name_ar }}</option>
...@@ -54,7 +56,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -54,7 +56,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
id="evaluation_date" id="evaluation_date"
wire:model="evaluation_date" wire:model="evaluation_date"
dir="ltr" dir="ltr"
class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm @error('evaluation_date') border-red-500 @enderror"> class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 @error('evaluation_date') border-red-500 @enderror">
@error('evaluation_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('evaluation_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -66,7 +68,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -66,7 +68,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
id="period_from" id="period_from"
wire:model="period_from" wire:model="period_from"
dir="ltr" dir="ltr"
class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5">
</div> </div>
<!-- Period To --> <!-- Period To -->
...@@ -77,15 +79,15 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -77,15 +79,15 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
id="period_to" id="period_to"
wire:model="period_to" wire:model="period_to"
dir="ltr" dir="ltr"
class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm @error('period_to') border-red-500 @enderror"> class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 @error('period_to') border-red-500 @enderror">
@error('period_to') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('period_to') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
</div> </div>
<!-- Criteria Scores --> <!-- Criteria Scores -->
<div class="bg-white border border-gray-200 rounded-lg p-6"> <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('الدرجات') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">{{ __('الدرجات') }}</h2>
@if($criteria->isEmpty()) @if($criteria->isEmpty())
<div class="p-6 text-center text-sm text-gray-500"> <div class="p-6 text-center text-sm text-gray-500">
...@@ -122,7 +124,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -122,7 +124,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
step="0.5" step="0.5"
dir="ltr" dir="ltr"
placeholder="0" placeholder="0"
class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm text-center"> class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 text-center">
</div> </div>
<span class="text-xs text-gray-500 whitespace-nowrap" dir="ltr">/ {{ $criterion->max_score }}</span> <span class="text-xs text-gray-500 whitespace-nowrap" dir="ltr">/ {{ $criterion->max_score }}</span>
</div> </div>
...@@ -141,8 +143,8 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -141,8 +143,8 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
</div> </div>
<!-- Overall Notes --> <!-- Overall Notes -->
<div class="bg-white border border-gray-200 rounded-lg p-6"> <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('ملاحظات عامة') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">{{ __('ملاحظات عامة') }}</h2>
<textarea <textarea
wire:model="overall_notes" wire:model="overall_notes"
rows="4" rows="4"
...@@ -152,13 +154,18 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -152,13 +154,18 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex items-center gap-3"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('evaluations.list') }}"
class="px-5 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-center w-full sm:w-auto">
{{ __('إلغاء') }}
</a>
<button <button
type="button" type="button"
wire:click="saveDraft" wire:click="saveDraft"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="saveDraft" wire:target="saveDraft"
class="px-5 py-2.5 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 disabled:bg-gray-400 transition-colors"> class="px-5 py-2.5 sm:py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 disabled:bg-gray-400 transition-colors w-full sm:w-auto">
<span wire:loading.remove wire:target="saveDraft">{{ __('حفظ كمسودة') }}</span> <span wire:loading.remove wire:target="saveDraft">{{ __('حفظ كمسودة') }}</span>
<span wire:loading wire:target="saveDraft">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="saveDraft">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
...@@ -168,15 +175,10 @@ class="px-5 py-2.5 bg-gray-600 text-white text-sm font-medium rounded-lg hover:b ...@@ -168,15 +175,10 @@ class="px-5 py-2.5 bg-gray-600 text-white text-sm font-medium rounded-lg hover:b
wire:click="submit" wire:click="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="submit" wire:target="submit"
class="px-5 py-2.5 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.5 sm:py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors w-full sm:w-auto">
<span wire:loading.remove wire:target="submit">{{ __('تقديم') }}</span> <span wire:loading.remove wire:target="submit">{{ __('تقديم') }}</span>
<span wire:loading wire:target="submit">{{ __('جارٍ التقديم...') }}</span> <span wire:loading wire:target="submit">{{ __('جارٍ التقديم...') }}</span>
</button> </button>
<a href="{{ route('evaluations.list') }}"
class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
{{ __('إلغاء') }}
</a>
</div> </div>
</div> </div>
</div> </div>
resources/views/livewire/evaluations/evaluation-list.blade.php
View file @ 944501f1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<!-- Header --> <!-- Header -->
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<div> <div>
<h1 class="text-2xl font-bold text-gray-900">{{ __('التقييمات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('التقييمات') }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('إدارة تقييمات المشتركين') }}</p> <p class="mt-1 text-sm text-gray-500">{{ __('إدارة تقييمات المشتركين') }}</p>
</div> </div>
@can('evaluations.create') @can('evaluations.create')
......
resources/views/livewire/evaluations/evaluation-show.blade.php
View file @ 944501f1
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
@endif @endif
<!-- Header --> <!-- Header -->
<div class="mb-6 flex items-center justify-between"> <div class="mb-4 sm:mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div> <div>
<h1 class="text-2xl font-bold text-gray-900">{{ __('عرض التقييم') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('عرض التقييم') }}</h1>
<p class="mt-1 text-sm text-gray-500"> <p class="mt-1 text-sm text-gray-500">
{{ $evaluation->participant?->person?->name_ar ?? '-' }} {{ $evaluation->participant?->person?->name_ar ?? '-' }}
&mdash; {{ $evaluation->evaluation_date?->format('Y-m-d') }} &mdash; {{ $evaluation->evaluation_date?->format('Y-m-d') }}
...@@ -24,29 +24,29 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70 ...@@ -24,29 +24,29 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70
</div> </div>
<!-- Info Cards --> <!-- Info Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4 mb-4 sm:mb-6">
<!-- Participant --> <!-- Participant -->
<div class="bg-white rounded-lg border border-gray-200 p-4"> <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
<p class="text-sm text-gray-500">{{ __('المشترك') }}</p> <p class="text-sm text-gray-500">{{ __('المشترك') }}</p>
<p class="font-medium text-gray-900">{{ $evaluation->participant?->person?->name_ar ?? '-' }}</p> <p class="font-medium text-gray-900">{{ $evaluation->participant?->person?->name_ar ?? '-' }}</p>
</div> </div>
<!-- Group --> <!-- Group -->
<div class="bg-white rounded-lg border border-gray-200 p-4"> <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
<p class="text-sm text-gray-500">{{ __('المجموعة') }}</p> <p class="text-sm text-gray-500">{{ __('المجموعة') }}</p>
<p class="font-medium text-gray-900">{{ $evaluation->group?->name_ar ?? __('بدون مجموعة') }}</p> <p class="font-medium text-gray-900">{{ $evaluation->group?->name_ar ?? __('بدون مجموعة') }}</p>
</div> </div>
<!-- Evaluator --> <!-- Evaluator -->
<div class="bg-white rounded-lg border border-gray-200 p-4"> <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
<p class="text-sm text-gray-500">{{ __('المقيّم') }}</p> <p class="text-sm text-gray-500">{{ __('المقيّم') }}</p>
<p class="font-medium text-gray-900">{{ $evaluation->evaluator?->name_ar ?? $evaluation->evaluator?->name ?? '-' }}</p> <p class="font-medium text-gray-900">{{ $evaluation->evaluator?->name_ar ?? $evaluation->evaluator?->name ?? '-' }}</p>
</div> </div>
</div> </div>
<!-- Status & Dates Row --> <!-- Status & Dates Row -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
<div class="bg-white rounded-lg border border-gray-200 p-4"> <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
<p class="text-sm text-gray-500">{{ __('الحالة') }}</p> <p class="text-sm text-gray-500">{{ __('الحالة') }}</p>
@php $statusColor = $evaluation->status->color(); @endphp @php $statusColor = $evaluation->status->color(); @endphp
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium mt-1 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium mt-1
...@@ -59,13 +59,13 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70 ...@@ -59,13 +59,13 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70
">{{ $evaluation->status->label() }}</span> ">{{ $evaluation->status->label() }}</span>
</div> </div>
<div class="bg-white rounded-lg border border-gray-200 p-4"> <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
<p class="text-sm text-gray-500">{{ __('تاريخ التقييم') }}</p> <p class="text-sm text-gray-500">{{ __('تاريخ التقييم') }}</p>
<p class="font-medium text-gray-900" dir="ltr">{{ $evaluation->evaluation_date?->format('Y-m-d') }}</p> <p class="font-medium text-gray-900" dir="ltr">{{ $evaluation->evaluation_date?->format('Y-m-d') }}</p>
</div> </div>
@if($evaluation->period_from || $evaluation->period_to) @if($evaluation->period_from || $evaluation->period_to)
<div class="bg-white rounded-lg border border-gray-200 p-4"> <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
<p class="text-sm text-gray-500">{{ __('فترة التقييم') }}</p> <p class="text-sm text-gray-500">{{ __('فترة التقييم') }}</p>
<p class="font-medium text-gray-900" dir="ltr"> <p class="font-medium text-gray-900" dir="ltr">
{{ $evaluation->period_from?->format('Y-m-d') ?? '-' }} {{ __('إلى') }} {{ $evaluation->period_to?->format('Y-m-d') ?? '-' }} {{ $evaluation->period_from?->format('Y-m-d') ?? '-' }} {{ __('إلى') }} {{ $evaluation->period_to?->format('Y-m-d') ?? '-' }}
...@@ -73,14 +73,14 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70 ...@@ -73,14 +73,14 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70
</div> </div>
@endif @endif
<div class="bg-white rounded-lg border border-gray-200 p-4"> <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
<p class="text-sm text-gray-500">{{ __('الدرجة الكلية') }}</p> <p class="text-sm text-gray-500">{{ __('الدرجة الكلية') }}</p>
<p class="text-2xl font-bold text-blue-600" dir="ltr">{{ $evaluation->overall_score ? number_format($evaluation->overall_score, 1) : '-' }}</p> <p class="text-2xl font-bold text-blue-600" dir="ltr">{{ $evaluation->overall_score ? number_format($evaluation->overall_score, 1) : '-' }}</p>
</div> </div>
</div> </div>
<!-- Scores Table --> <!-- Scores Table -->
<div class="bg-white rounded-lg border border-gray-200 overflow-hidden mb-6"> <div class="bg-white rounded-lg border border-gray-200 overflow-hidden overflow-x-auto mb-4 sm:mb-6">
<div class="px-4 py-3 border-b border-gray-200 bg-gray-50"> <div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
<h3 class="text-sm font-semibold text-gray-700">{{ __('درجات المعايير') }}</h3> <h3 class="text-sm font-semibold text-gray-700">{{ __('درجات المعايير') }}</h3>
</div> </div>
...@@ -120,14 +120,14 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70 ...@@ -120,14 +120,14 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70
<!-- Overall Notes --> <!-- Overall Notes -->
@if($evaluation->overall_notes) @if($evaluation->overall_notes)
<div class="bg-white rounded-lg border border-gray-200 p-4 mb-6"> <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4 mb-4 sm:mb-6">
<h3 class="text-sm font-semibold text-gray-700 mb-2">{{ __('ملاحظات عامة') }}</h3> <h3 class="text-sm font-semibold text-gray-700 mb-2">{{ __('ملاحظات عامة') }}</h3>
<p class="text-gray-600">{{ $evaluation->overall_notes }}</p> <p class="text-gray-600">{{ $evaluation->overall_notes }}</p>
</div> </div>
@endif @endif
<!-- Actions --> <!-- Actions -->
<div class="flex items-center gap-3"> <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
@can('evaluations.approve') @can('evaluations.approve')
@if($evaluation->status->value === 'submitted') @if($evaluation->status->value === 'submitted')
<button <button
......
resources/views/livewire/facilities/facility-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل منشأة') : __('إضافة منشأة جديدة') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل منشأة') : __('إضافة منشأة جديدة') }}</h1>
<a href="{{ route('facilities.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a> <a href="{{ route('facilities.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a>
</div> </div>
...@@ -13,14 +13,14 @@ ...@@ -13,14 +13,14 @@
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
{{-- Basic Info --}} {{-- Basic Info --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('المعلومات الأساسية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('المعلومات الأساسية') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
{{-- Name AR --}} {{-- Name AR --}}
<div> <div>
<label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label> <label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label>
<input type="text" id="name_ar" wire:model="name_ar" <input type="text" id="name_ar" wire:model="name_ar"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -28,7 +28,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -28,7 +28,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label> <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
<input type="text" id="name" wire:model="name" dir="ltr" <input type="text" id="name" wire:model="name" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
@error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -36,7 +36,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -36,7 +36,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="code" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الكود') }}</label> <label for="code" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الكود') }}</label>
<input type="text" id="code" wire:model="code" dir="ltr" <input type="text" id="code" wire:model="code" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('code') border-red-500 @enderror" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('code') border-red-500 @enderror"
placeholder="{{ __('اختياري') }}"> placeholder="{{ __('اختياري') }}">
@error('code') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('code') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -45,7 +45,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -45,7 +45,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="branch_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }} *</label> <label for="branch_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }} *</label>
<select id="branch_id" wire:model="branch_id" <select id="branch_id" wire:model="branch_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('branch_id') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('branch_id') border-red-500 @enderror">
<option value="">{{ __('اختر الفرع') }}</option> <option value="">{{ __('اختر الفرع') }}</option>
@foreach($branches as $branch) @foreach($branches as $branch)
<option value="{{ $branch->id }}">{{ $branch->name_ar }}</option> <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
...@@ -58,7 +58,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -58,7 +58,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('النوع') }} *</label> <label for="type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('النوع') }} *</label>
<select id="type" wire:model="type" <select id="type" wire:model="type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror">
@foreach($typeOptions as $key => $label) @foreach($typeOptions as $key => $label)
<option value="{{ $key }}">{{ $label }}</option> <option value="{{ $key }}">{{ $label }}</option>
@endforeach @endforeach
...@@ -70,7 +70,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -70,7 +70,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="status" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحالة') }} *</label> <label for="status" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحالة') }} *</label>
<select id="status" wire:model="status" <select id="status" wire:model="status"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('status') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('status') border-red-500 @enderror">
@foreach($statusOptions as $key => $label) @foreach($statusOptions as $key => $label)
<option value="{{ $key }}">{{ $label }}</option> <option value="{{ $key }}">{{ $label }}</option>
@endforeach @endforeach
...@@ -79,30 +79,30 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -79,30 +79,30 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Description AR --}} {{-- Description AR --}}
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label for="description_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالعربية') }}</label> <label for="description_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالعربية') }}</label>
<textarea id="description_ar" wire:model="description_ar" rows="2" <textarea id="description_ar" wire:model="description_ar" rows="2"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
</div> </div>
{{-- Description EN --}} {{-- Description EN --}}
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label for="description" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالإنجليزية') }}</label> <label for="description" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالإنجليزية') }}</label>
<textarea id="description" wire:model="description" rows="2" dir="ltr" <textarea id="description" wire:model="description" rows="2" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
</div> </div>
</div> </div>
</div> </div>
{{-- Specifications --}} {{-- Specifications --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('المواصفات') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('المواصفات') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
{{-- Capacity --}} {{-- Capacity --}}
<div> <div>
<label for="capacity" class="block text-sm font-medium text-gray-700 mb-1">{{ __('السعة') }}</label> <label for="capacity" class="block text-sm font-medium text-gray-700 mb-1">{{ __('السعة') }}</label>
<input type="number" id="capacity" wire:model="capacity" min="1" dir="ltr" <input type="number" id="capacity" wire:model="capacity" min="1" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('capacity') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('capacity') border-red-500 @enderror">
@error('capacity') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('capacity') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -110,7 +110,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -110,7 +110,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="surface_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع السطح') }}</label> <label for="surface_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع السطح') }}</label>
<input type="text" id="surface_type" wire:model="surface_type" <input type="text" id="surface_type" wire:model="surface_type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="{{ __('مثال: نجيل صناعي') }}"> placeholder="{{ __('مثال: نجيل صناعي') }}">
</div> </div>
...@@ -118,7 +118,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -118,7 +118,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="area_sqm" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المساحة (م²)') }}</label> <label for="area_sqm" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المساحة (م²)') }}</label>
<input type="number" id="area_sqm" wire:model="area_sqm" min="0" step="0.01" dir="ltr" <input type="number" id="area_sqm" wire:model="area_sqm" min="0" step="0.01" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('area_sqm') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('area_sqm') border-red-500 @enderror">
@error('area_sqm') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('area_sqm') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -126,7 +126,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -126,7 +126,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="length_m" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الطول (م)') }}</label> <label for="length_m" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الطول (م)') }}</label>
<input type="number" id="length_m" wire:model="length_m" min="0" step="0.01" dir="ltr" <input type="number" id="length_m" wire:model="length_m" min="0" step="0.01" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('length_m') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('length_m') border-red-500 @enderror">
@error('length_m') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('length_m') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -134,7 +134,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -134,7 +134,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="width_m" class="block text-sm font-medium text-gray-700 mb-1">{{ __('العرض (م)') }}</label> <label for="width_m" class="block text-sm font-medium text-gray-700 mb-1">{{ __('العرض (م)') }}</label>
<input type="number" id="width_m" wire:model="width_m" min="0" step="0.01" dir="ltr" <input type="number" id="width_m" wire:model="width_m" min="0" step="0.01" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('width_m') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('width_m') border-red-500 @enderror">
@error('width_m') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('width_m') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -142,7 +142,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -142,7 +142,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="rental_cost_display" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تكلفة الإيجار/ساعة (ج.م)') }}</label> <label for="rental_cost_display" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تكلفة الإيجار/ساعة (ج.م)') }}</label>
<input type="number" id="rental_cost_display" wire:model="rental_cost_display" min="0" step="0.01" dir="ltr" <input type="number" id="rental_cost_display" wire:model="rental_cost_display" min="0" step="0.01" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('rental_cost_display') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('rental_cost_display') border-red-500 @enderror">
@error('rental_cost_display') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('rental_cost_display') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -150,7 +150,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -150,7 +150,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="monthly_rental_cost_display" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الإيجار الشهري (ج.م)') }}</label> <label for="monthly_rental_cost_display" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الإيجار الشهري (ج.م)') }}</label>
<input type="number" id="monthly_rental_cost_display" wire:model="monthly_rental_cost_display" min="0" step="0.01" dir="ltr" <input type="number" id="monthly_rental_cost_display" wire:model="monthly_rental_cost_display" min="0" step="0.01" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('monthly_rental_cost_display') border-red-500 @enderror" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('monthly_rental_cost_display') border-red-500 @enderror"
placeholder="{{ __('المبلغ الذي تدفعه شهرياً لاستئجار هذه المنشأة') }}"> placeholder="{{ __('المبلغ الذي تدفعه شهرياً لاستئجار هذه المنشأة') }}">
@error('monthly_rental_cost_display') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('monthly_rental_cost_display') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -177,14 +177,14 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -177,14 +177,14 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
</div> </div>
{{-- Operating Hours & Location --}} {{-- Operating Hours & Location --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('ساعات العمل والموقع') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('ساعات العمل والموقع') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
{{-- Operating Start --}} {{-- Operating Start --}}
<div> <div>
<label for="operating_start" class="block text-sm font-medium text-gray-700 mb-1">{{ __('وقت بداية التشغيل') }}</label> <label for="operating_start" class="block text-sm font-medium text-gray-700 mb-1">{{ __('وقت بداية التشغيل') }}</label>
<input type="time" id="operating_start" wire:model="operating_start" dir="ltr" <input type="time" id="operating_start" wire:model="operating_start" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('operating_start') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('operating_start') border-red-500 @enderror">
@error('operating_start') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('operating_start') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -192,15 +192,15 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -192,15 +192,15 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="operating_end" class="block text-sm font-medium text-gray-700 mb-1">{{ __('وقت نهاية التشغيل') }}</label> <label for="operating_end" class="block text-sm font-medium text-gray-700 mb-1">{{ __('وقت نهاية التشغيل') }}</label>
<input type="time" id="operating_end" wire:model="operating_end" dir="ltr" <input type="time" id="operating_end" wire:model="operating_end" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('operating_end') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('operating_end') border-red-500 @enderror">
@error('operating_end') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('operating_end') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
{{-- Address --}} {{-- Address --}}
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label for="address" class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنوان') }}</label> <label for="address" class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنوان') }}</label>
<input type="text" id="address" wire:model="address" <input type="text" id="address" wire:model="address"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('address') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('address') border-red-500 @enderror">
@error('address') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('address') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -208,7 +208,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -208,7 +208,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="latitude" class="block text-sm font-medium text-gray-700 mb-1">{{ __('خط العرض') }}</label> <label for="latitude" class="block text-sm font-medium text-gray-700 mb-1">{{ __('خط العرض') }}</label>
<input type="number" id="latitude" wire:model="latitude" step="0.0000001" dir="ltr" <input type="number" id="latitude" wire:model="latitude" step="0.0000001" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('latitude') border-red-500 @enderror" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('latitude') border-red-500 @enderror"
placeholder="30.0444196"> placeholder="30.0444196">
@error('latitude') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('latitude') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -217,7 +217,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -217,7 +217,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="longitude" class="block text-sm font-medium text-gray-700 mb-1">{{ __('خط الطول') }}</label> <label for="longitude" class="block text-sm font-medium text-gray-700 mb-1">{{ __('خط الطول') }}</label>
<input type="number" id="longitude" wire:model="longitude" step="0.0000001" dir="ltr" <input type="number" id="longitude" wire:model="longitude" step="0.0000001" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('longitude') border-red-500 @enderror" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('longitude') border-red-500 @enderror"
placeholder="31.2357116"> placeholder="31.2357116">
@error('longitude') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('longitude') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -233,14 +233,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -233,14 +233,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Actions --}} {{-- Actions --}}
<div class="flex items-center gap-4"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('facilities.list') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">{{ __('إلغاء') }}</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors text-sm">
<span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المنشأة') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المنشأة') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<a href="{{ route('facilities.list') }}" wire:navigate
class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/facilities/facility-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('المنشآت') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('المنشآت') }}</h1>
@permission('facilities.create') @permission('facilities.create')
<a href="{{ route('facilities.create') }}" wire:navigate <a href="{{ route('facilities.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 text-sm font-medium">
......
resources/views/livewire/facilities/space-assignment-wizard.blade.php
View file @ 944501f1
<div x-data="{ confirmSave: false }"> <div x-data="{ confirmSave: false }">
<!-- Header with stepper --> <!-- Header with stepper -->
<div class="mb-8"> <div class="mb-8">
<h1 class="text-2xl font-bold text-gray-900">{{ __('تعيين المجموعات على الملاعب') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('تعيين المجموعات على الملاعب') }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('اختر المجموعة، حدد الجدول، ثم انقر على القطع المطلوبة من الملعب') }}</p> <p class="mt-1 text-sm text-gray-500">{{ __('اختر المجموعة، حدد الجدول، ثم انقر على القطع المطلوبة من الملعب') }}</p>
<!-- Progress Steps --> <!-- Progress Steps -->
......
resources/views/livewire/facilities/space-layout-manager.blade.php
View file @ 944501f1
<div> <div>
<!-- Header --> <!-- Header -->
<div class="mb-6 flex items-center justify-between"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<div> <div>
<h1 class="text-2xl font-bold text-gray-900">{{ __('تخطيط المنشأة') }}: {{ $facility->name_ar }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('تخطيط المنشأة') }}: {{ $facility->name_ar }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('إدارة تقسيمات الملعب (شبكة، حارات، مناطق)') }}</p> <p class="mt-1 text-sm text-gray-500">{{ __('إدارة تقسيمات الملعب (شبكة، حارات، مناطق)') }}</p>
</div> </div>
<button wire:click="openCreateForm" type="button" <button wire:click="openCreateForm" type="button"
class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors flex items-center gap-2"> class="w-full sm:w-auto px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
<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="M12 4v16m8-8H4"/></svg> <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="M12 4v16m8-8H4"/></svg>
{{ __('تخطيط جديد') }} {{ __('تخطيط جديد') }}
</button> </button>
...@@ -21,19 +21,19 @@ class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-7 ...@@ -21,19 +21,19 @@ class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-7
<!-- Create/Edit Form --> <!-- Create/Edit Form -->
@if($showForm) @if($showForm)
<div class="mb-6 bg-white rounded-2xl border border-gray-200 p-6 shadow-sm"> <div class="mb-6 bg-white rounded-2xl border border-gray-200 p-4 sm:p-6 shadow-sm">
<h3 class="text-lg font-bold text-gray-900 mb-4">{{ $editingLayoutId ? __('تعديل التخطيط') : __('تخطيط جديد') }}</h3> <h3 class="text-base sm:text-lg font-bold text-gray-900 mb-4">{{ $editingLayoutId ? __('تعديل التخطيط') : __('تخطيط جديد') }}</h3>
<form wire:submit="save" class="space-y-5"> <form wire:submit="save" class="space-y-5">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label>
<input type="text" wire:model="name_ar" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="{{ __('مثال: تقسيم صباحي') }}"> <input type="text" wire:model="name_ar" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 py-2.5" placeholder="{{ __('مثال: تقسيم صباحي') }}">
@error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }} *</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }} *</label>
<input type="text" wire:model="name" dir="ltr" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Morning layout"> <input type="text" wire:model="name" dir="ltr" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 py-2.5" placeholder="Morning layout">
@error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
...@@ -61,34 +61,34 @@ class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-7 ...@@ -61,34 +61,34 @@ class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-7
<!-- Config based on type --> <!-- Config based on type -->
@if($layout_type === 'grid') @if($layout_type === 'grid')
<div class="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded-xl"> <div class="grid grid-cols-2 gap-3 sm:gap-4 p-4 bg-gray-50 rounded-xl">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عدد الصفوف') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عدد الصفوف') }}</label>
<input type="number" wire:model="grid_rows" min="1" max="10" dir="ltr" class="w-full border-gray-300 rounded-lg"> <input type="number" wire:model="grid_rows" min="1" max="10" dir="ltr" class="w-full border-gray-300 rounded-lg py-2.5">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عدد الأعمدة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عدد الأعمدة') }}</label>
<input type="number" wire:model="grid_columns" min="1" max="10" dir="ltr" class="w-full border-gray-300 rounded-lg"> <input type="number" wire:model="grid_columns" min="1" max="10" dir="ltr" class="w-full border-gray-300 rounded-lg py-2.5">
</div> </div>
<p class="col-span-2 text-xs text-gray-500">{{ __('سيتم إنشاء') }} {{ $grid_rows * $grid_columns }} {{ __('قطعة') }}</p> <p class="col-span-2 text-xs text-gray-500">{{ __('سيتم إنشاء') }} {{ $grid_rows * $grid_columns }} {{ __('قطعة') }}</p>
</div> </div>
@elseif($layout_type === 'lanes') @elseif($layout_type === 'lanes')
<div class="p-4 bg-gray-50 rounded-xl"> <div class="p-4 bg-gray-50 rounded-xl">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عدد الحارات') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عدد الحارات') }}</label>
<input type="number" wire:model="lane_count" min="1" max="20" dir="ltr" class="w-32 border-gray-300 rounded-lg"> <input type="number" wire:model="lane_count" min="1" max="20" dir="ltr" class="w-32 border-gray-300 rounded-lg py-2.5">
</div> </div>
@elseif($layout_type === 'zones' || $layout_type === 'custom') @elseif($layout_type === 'zones' || $layout_type === 'custom')
<div class="p-4 bg-gray-50 rounded-xl space-y-3"> <div class="p-4 bg-gray-50 rounded-xl space-y-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<label class="text-sm font-medium text-gray-700">{{ __('المناطق') }}</label> <label class="text-sm font-medium text-gray-700">{{ __('المناطق') }}</label>
<button wire:click="addZone" type="button" class="text-xs px-3 py-1 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200">+ {{ __('إضافة منطقة') }}</button> <button wire:click="addZone" type="button" class="text-xs px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200">+ {{ __('إضافة منطقة') }}</button>
</div> </div>
@foreach($zone_definitions as $index => $zone) @foreach($zone_definitions as $index => $zone)
<div class="flex items-center gap-2 p-2 bg-white rounded-lg border"> <div class="flex flex-wrap sm:flex-nowrap items-center gap-2 p-2 bg-white rounded-lg border">
<input type="text" wire:model="zone_definitions.{{ $index }}.code" dir="ltr" placeholder="Z1" class="w-16 text-xs border-gray-300 rounded"> <input type="text" wire:model="zone_definitions.{{ $index }}.code" dir="ltr" placeholder="Z1" class="w-16 text-xs border-gray-300 rounded py-2.5">
<input type="text" wire:model="zone_definitions.{{ $index }}.name_ar" placeholder="{{ __('اسم المنطقة') }}" class="flex-1 text-sm border-gray-300 rounded"> <input type="text" wire:model="zone_definitions.{{ $index }}.name_ar" placeholder="{{ __('اسم المنطقة') }}" class="flex-1 min-w-0 text-sm border-gray-300 rounded py-2.5">
<input type="number" wire:model="zone_definitions.{{ $index }}.capacity" placeholder="{{ __('السعة') }}" dir="ltr" class="w-20 text-xs border-gray-300 rounded"> <input type="number" wire:model="zone_definitions.{{ $index }}.capacity" placeholder="{{ __('السعة') }}" dir="ltr" class="w-20 text-xs border-gray-300 rounded py-2.5">
<button wire:click="removeZone({{ $index }})" type="button" class="text-red-500 hover:text-red-700 p-1"> <button wire:click="removeZone({{ $index }})" type="button" class="text-red-500 hover:text-red-700 p-2">
<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> <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> </button>
</div> </div>
...@@ -97,18 +97,18 @@ class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-7 ...@@ -97,18 +97,18 @@ class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-7
@endif @endif
<!-- Time & Scheduling --> <!-- Time & Scheduling -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من الساعة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من الساعة') }}</label>
<input type="time" wire:model="start_time" dir="ltr" class="w-full border-gray-300 rounded-lg"> <input type="time" wire:model="start_time" dir="ltr" class="w-full border-gray-300 rounded-lg py-2.5">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إلى الساعة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إلى الساعة') }}</label>
<input type="time" wire:model="end_time" dir="ltr" class="w-full border-gray-300 rounded-lg"> <input type="time" wire:model="end_time" dir="ltr" class="w-full border-gray-300 rounded-lg py-2.5">
</div> </div>
<div> <div class="sm:col-span-2 md:col-span-1">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع الجدولة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع الجدولة') }}</label>
<select wire:model.live="is_recurring" class="w-full border-gray-300 rounded-lg"> <select wire:model.live="is_recurring" class="w-full border-gray-300 rounded-lg py-2.5">
<option value="1">{{ __('متكرر (يوم محدد)') }}</option> <option value="1">{{ __('متكرر (يوم محدد)') }}</option>
<option value="0">{{ __('تاريخ محدد') }}</option> <option value="0">{{ __('تاريخ محدد') }}</option>
</select> </select>
...@@ -118,7 +118,7 @@ class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-7 ...@@ -118,7 +118,7 @@ class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-7
@if($is_recurring) @if($is_recurring)
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('يوم الأسبوع') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('يوم الأسبوع') }}</label>
<select wire:model="effective_day_of_week" class="w-full max-w-xs border-gray-300 rounded-lg"> <select wire:model="effective_day_of_week" class="w-full sm:max-w-xs border-gray-300 rounded-lg py-2.5">
@foreach(['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'] as $i => $day) @foreach(['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'] as $i => $day)
<option value="{{ $i }}">{{ $day }}</option> <option value="{{ $i }}">{{ $day }}</option>
@endforeach @endforeach
...@@ -127,20 +127,20 @@ class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-7 ...@@ -127,20 +127,20 @@ class="px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-7
@else @else
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التاريخ') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التاريخ') }}</label>
<input type="date" wire:model="effective_date" dir="ltr" class="w-full max-w-xs border-gray-300 rounded-lg"> <input type="date" wire:model="effective_date" dir="ltr" class="w-full sm:max-w-xs border-gray-300 rounded-lg py-2.5">
</div> </div>
@endif @endif
<div class="flex gap-3 pt-2"> <div class="flex flex-col-reverse sm:flex-row gap-3 pt-2">
<button wire:click="$set('showForm', false)" type="button"
class="w-full sm:w-auto px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition-colors">
{{ __('إلغاء') }}
</button>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 disabled:bg-blue-400 transition-colors"> class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
<span wire:loading.remove wire:target="save">{{ $editingLayoutId ? __('تحديث') : __('إنشاء') }}</span> <span wire:loading.remove wire:target="save">{{ $editingLayoutId ? __('تحديث') : __('إنشاء') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<button wire:click="$set('showForm', false)" type="button"
class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition-colors">
{{ __('إلغاء') }}
</button>
</div> </div>
</form> </form>
</div> </div>
...@@ -148,11 +148,11 @@ class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gra ...@@ -148,11 +148,11 @@ class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gra
<!-- Existing Layouts --> <!-- Existing Layouts -->
@if(empty($layouts) && !$showForm) @if(empty($layouts) && !$showForm)
<div class="bg-white rounded-2xl border border-gray-200 p-12 text-center"> <div class="bg-white rounded-2xl border border-gray-200 p-8 sm:p-12 text-center">
<svg class="mx-auto h-16 w-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg> <svg class="mx-auto h-12 w-12 sm:h-16 sm:w-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
<p class="font-medium text-gray-700 mb-2">{{ __('لا توجد تخطيطات بعد') }}</p> <p class="font-medium text-gray-700 mb-2">{{ __('لا توجد تخطيطات بعد') }}</p>
<p class="text-sm text-gray-500 mb-4">{{ __('أنشئ أول تخطيط لهذه المنشأة لبدء تعيين المجموعات') }}</p> <p class="text-sm text-gray-500 mb-4">{{ __('أنشئ أول تخطيط لهذه المنشأة لبدء تعيين المجموعات') }}</p>
<button wire:click="openCreateForm" type="button" class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors"> <button wire:click="openCreateForm" type="button" class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors">
{{ __('إنشاء تخطيط') }} {{ __('إنشاء تخطيط') }}
</button> </button>
</div> </div>
...@@ -161,18 +161,18 @@ class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gra ...@@ -161,18 +161,18 @@ class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gra
@foreach($layouts as $layout) @foreach($layouts as $layout)
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
<!-- Layout header --> <!-- Layout header -->
<div class="p-4 flex items-center justify-between border-b border-gray-100"> <div class="p-3 sm:p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-gray-100">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3 min-w-0">
<div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center"> <div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0">
@if($layout['layout_type'] === 'grid') @if($layout['layout_type'] === 'grid')
<svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg> <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
@else @else
<svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg> <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
@endif @endif
</div> </div>
<div> <div class="min-w-0">
<h4 class="font-semibold text-gray-900">{{ $layout['name_ar'] }}</h4> <h4 class="font-semibold text-gray-900 truncate">{{ $layout['name_ar'] }}</h4>
<div class="flex items-center gap-2 text-xs text-gray-500"> <div class="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
<span class="px-1.5 py-0.5 bg-gray-100 rounded">{{ $layout['layout_type'] }}</span> <span class="px-1.5 py-0.5 bg-gray-100 rounded">{{ $layout['layout_type'] }}</span>
<span>{{ $layout['start_time'] }} - {{ $layout['end_time'] }}</span> <span>{{ $layout['start_time'] }} - {{ $layout['end_time'] }}</span>
@if($layout['is_recurring']) @if($layout['is_recurring'])
...@@ -184,7 +184,7 @@ class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gra ...@@ -184,7 +184,7 @@ class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gra
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 self-end sm:self-auto">
<button wire:click="editLayout({{ $layout['id'] }})" class="p-2 text-gray-400 hover:text-blue-600 rounded-lg hover:bg-blue-50 transition-colors"> <button wire:click="editLayout({{ $layout['id'] }})" class="p-2 text-gray-400 hover:text-blue-600 rounded-lg hover:bg-blue-50 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg> <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
</button> </button>
...@@ -197,17 +197,17 @@ class="p-2 text-gray-400 hover:text-red-600 rounded-lg hover:bg-red-50 transitio ...@@ -197,17 +197,17 @@ class="p-2 text-gray-400 hover:text-red-600 rounded-lg hover:bg-red-50 transitio
<!-- Visual segments preview --> <!-- Visual segments preview -->
@if(!empty($layout['segments'])) @if(!empty($layout['segments']))
<div class="p-4"> <div class="p-3 sm:p-4 overflow-x-auto">
@if($layout['layout_type'] === 'grid') @if($layout['layout_type'] === 'grid')
@php @php
$config = $layout['layout_config'] ?? []; $config = $layout['layout_config'] ?? [];
$cols = $config['columns'] ?? 3; $cols = $config['columns'] ?? 3;
@endphp @endphp
<div class="grid gap-2" style="grid-template-columns: repeat({{ $cols }}, 1fr);"> <div class="grid gap-2 min-w-[280px]" style="grid-template-columns: repeat({{ $cols }}, 1fr);">
@foreach($layout['segments'] as $seg) @foreach($layout['segments'] as $seg)
<button wire:click="toggleSegmentAvailability({{ $seg['id'] }})" type="button" <button wire:click="toggleSegmentAvailability({{ $seg['id'] }})" type="button"
@class([ @class([
'p-2 rounded-lg text-center text-xs font-medium border transition-colors', 'p-2 rounded-lg text-center text-xs font-medium border transition-colors min-h-[44px]',
'bg-white border-gray-200 text-gray-700 hover:border-blue-300' => $seg['is_available'], 'bg-white border-gray-200 text-gray-700 hover:border-blue-300' => $seg['is_available'],
'bg-gray-100 border-gray-300 text-gray-400 line-through' => !$seg['is_available'], 'bg-gray-100 border-gray-300 text-gray-400 line-through' => !$seg['is_available'],
]) ])
...@@ -221,7 +221,7 @@ class="p-2 text-gray-400 hover:text-red-600 rounded-lg hover:bg-red-50 transitio ...@@ -221,7 +221,7 @@ class="p-2 text-gray-400 hover:text-red-600 rounded-lg hover:bg-red-50 transitio
@foreach($layout['segments'] as $seg) @foreach($layout['segments'] as $seg)
<button wire:click="toggleSegmentAvailability({{ $seg['id'] }})" type="button" <button wire:click="toggleSegmentAvailability({{ $seg['id'] }})" type="button"
@class([ @class([
'px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors', 'px-3 py-2.5 rounded-lg text-xs font-medium border transition-colors',
'bg-white border-gray-200 text-gray-700 hover:border-blue-300' => $seg['is_available'], 'bg-white border-gray-200 text-gray-700 hover:border-blue-300' => $seg['is_available'],
'bg-gray-100 border-gray-300 text-gray-400 line-through' => !$seg['is_available'], 'bg-gray-100 border-gray-300 text-gray-400 line-through' => !$seg['is_available'],
])> ])>
......
resources/views/livewire/financial/financial-overview.blade.php
View file @ 944501f1
<div> <div>
{{-- Header --}} {{-- Header --}}
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6"> <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<div> <div>
<h1 class="text-2xl font-bold text-gray-800">{{ __('النظرة المالية العامة') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('النظرة المالية العامة') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('ملخص الإيرادات والمصروفات والأرباح') }} — {{ $periodLabel }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('ملخص الإيرادات والمصروفات والأرباح') }} — {{ $periodLabel }}</p>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 w-full sm:w-auto">
<select wire:model.live="branch_id" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="branch_id" class="w-full sm:w-auto px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل الفروع') }}</option> <option value="">{{ __('كل الفروع') }}</option>
@foreach($branches as $branch) @foreach($branches as $branch)
<option value="{{ $branch->id }}">{{ $branch->name_ar }}</option> <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
@endforeach @endforeach
</select> </select>
<select wire:model.live="period" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="period" class="w-full sm:w-auto px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="today">{{ __('اليوم') }}</option> <option value="today">{{ __('اليوم') }}</option>
<option value="this_week">{{ __('هذا الأسبوع') }}</option> <option value="this_week">{{ __('هذا الأسبوع') }}</option>
<option value="this_month">{{ __('هذا الشهر') }}</option> <option value="this_month">{{ __('هذا الشهر') }}</option>
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
<div wire:loading.class="opacity-50 pointer-events-none" class="transition-opacity"> <div wire:loading.class="opacity-50 pointer-events-none" class="transition-opacity">
{{-- Row 1: Summary Cards --}} {{-- Row 1: Summary Cards --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
{{-- Total Revenue --}} {{-- Total Revenue --}}
<div class="bg-white rounded-xl shadow-sm border border-emerald-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-emerald-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-11 h-11 bg-emerald-50 rounded-lg flex items-center justify-center shrink-0"> <div class="w-11 h-11 bg-emerald-50 rounded-lg flex items-center justify-center shrink-0">
<svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
...@@ -38,14 +38,14 @@ ...@@ -38,14 +38,14 @@
</div> </div>
<div class="min-w-0"> <div class="min-w-0">
<p class="text-xs text-gray-500">{{ __('الإيرادات') }}</p> <p class="text-xs text-gray-500">{{ __('الإيرادات') }}</p>
<p class="text-xl font-bold text-emerald-700 truncate" dir="ltr">{{ number_format($revenue['total'] / 100, 2) }} <span class="text-sm font-normal">{{ __('ج.م') }}</span></p> <p class="text-lg sm:text-xl font-bold text-emerald-700 truncate" dir="ltr">{{ number_format($revenue['total'] / 100, 2) }} <span class="text-sm font-normal">{{ __('ج.م') }}</span></p>
</div> </div>
</div> </div>
<p class="text-xs text-gray-400 mt-2" dir="ltr">{{ number_format($revenue['transaction_count']) }} {{ __('عملية') }}</p> <p class="text-xs text-gray-400 mt-2" dir="ltr">{{ number_format($revenue['transaction_count']) }} {{ __('عملية') }}</p>
</div> </div>
{{-- Total Expenses --}} {{-- Total Expenses --}}
<div class="bg-white rounded-xl shadow-sm border border-red-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-red-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-11 h-11 bg-red-50 rounded-lg flex items-center justify-center shrink-0"> <div class="w-11 h-11 bg-red-50 rounded-lg flex items-center justify-center shrink-0">
<svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</div> </div>
<div class="min-w-0"> <div class="min-w-0">
<p class="text-xs text-gray-500">{{ __('المصروفات') }}</p> <p class="text-xs text-gray-500">{{ __('المصروفات') }}</p>
<p class="text-xl font-bold text-red-700 truncate" dir="ltr">{{ number_format($expenses['total'] / 100, 2) }} <span class="text-sm font-normal">{{ __('ج.م') }}</span></p> <p class="text-lg sm:text-xl font-bold text-red-700 truncate" dir="ltr">{{ number_format($expenses['total'] / 100, 2) }} <span class="text-sm font-normal">{{ __('ج.م') }}</span></p>
</div> </div>
</div> </div>
<p class="text-xs text-gray-400 mt-2">{{ __('إيجارات + مشتريات + مدفوعات') }}</p> <p class="text-xs text-gray-400 mt-2">{{ __('إيجارات + مشتريات + مدفوعات') }}</p>
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
{{-- Net Profit/Loss --}} {{-- Net Profit/Loss --}}
@php $netProfit = $revenue['total'] - $expenses['total']; @endphp @php $netProfit = $revenue['total'] - $expenses['total']; @endphp
<div class="bg-white rounded-xl shadow-sm border {{ $netProfit >= 0 ? 'border-blue-200' : 'border-orange-200' }} p-5"> <div class="bg-white rounded-xl shadow-sm border {{ $netProfit >= 0 ? 'border-blue-200' : 'border-orange-200' }} p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-11 h-11 {{ $netProfit >= 0 ? 'bg-blue-50' : 'bg-orange-50' }} rounded-lg flex items-center justify-center shrink-0"> <div class="w-11 h-11 {{ $netProfit >= 0 ? 'bg-blue-50' : 'bg-orange-50' }} rounded-lg flex items-center justify-center shrink-0">
<svg class="w-5 h-5 {{ $netProfit >= 0 ? 'text-blue-600' : 'text-orange-600' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 {{ $netProfit >= 0 ? 'text-blue-600' : 'text-orange-600' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
</div> </div>
<div class="min-w-0"> <div class="min-w-0">
<p class="text-xs text-gray-500">{{ __('صافي الربح/الخسارة') }}</p> <p class="text-xs text-gray-500">{{ __('صافي الربح/الخسارة') }}</p>
<p class="text-xl font-bold {{ $netProfit >= 0 ? 'text-blue-700' : 'text-orange-700' }} truncate" dir="ltr"> <p class="text-lg sm:text-xl font-bold {{ $netProfit >= 0 ? 'text-blue-700' : 'text-orange-700' }} truncate" dir="ltr">
{{ $netProfit >= 0 ? '+' : '' }}{{ number_format($netProfit / 100, 2) }} <span class="text-sm font-normal">{{ __('ج.م') }}</span> {{ $netProfit >= 0 ? '+' : '' }}{{ number_format($netProfit / 100, 2) }} <span class="text-sm font-normal">{{ __('ج.م') }}</span>
</p> </p>
</div> </div>
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
</div> </div>
{{-- Collection Rate --}} {{-- Collection Rate --}}
<div class="bg-white rounded-xl shadow-sm border border-purple-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-purple-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-11 h-11 bg-purple-50 rounded-lg flex items-center justify-center shrink-0"> <div class="w-11 h-11 bg-purple-50 rounded-lg flex items-center justify-center shrink-0">
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
</div> </div>
<div class="min-w-0"> <div class="min-w-0">
<p class="text-xs text-gray-500">{{ __('نسبة التحصيل') }}</p> <p class="text-xs text-gray-500">{{ __('نسبة التحصيل') }}</p>
<p class="text-xl font-bold text-purple-700" dir="ltr">{{ $collectionRate['rate'] }}%</p> <p class="text-lg sm:text-xl font-bold text-purple-700" dir="ltr">{{ $collectionRate['rate'] }}%</p>
</div> </div>
</div> </div>
@if($collectionRate['overdue_count'] > 0) @if($collectionRate['overdue_count'] > 0)
...@@ -100,10 +100,10 @@ ...@@ -100,10 +100,10 @@
</div> </div>
{{-- Row 2: Break-Even + Expense Breakdown --}} {{-- Row 2: Break-Even + Expense Breakdown --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
{{-- Break-Even Gauge --}} {{-- Break-Even Gauge --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('نقطة التعادل') }}</h3> <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('نقطة التعادل') }}</h3>
@if($breakEven['has_data']) @if($breakEven['has_data'])
<div class="relative"> <div class="relative">
{{-- Progress ring visual --}} {{-- Progress ring visual --}}
...@@ -159,8 +159,8 @@ ...@@ -159,8 +159,8 @@
</div> </div>
{{-- Expense Breakdown --}} {{-- Expense Breakdown --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('تفاصيل المصروفات') }}</h3> <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('تفاصيل المصروفات') }}</h3>
@if($expenses['total'] > 0) @if($expenses['total'] > 0)
<div class="space-y-4"> <div class="space-y-4">
{{-- Facility Costs --}} {{-- Facility Costs --}}
...@@ -219,8 +219,8 @@ ...@@ -219,8 +219,8 @@
</div> </div>
{{-- Row 3: Monthly P&L Chart --}} {{-- Row 3: Monthly P&L Chart --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('الأرباح والخسائر — آخر ٦ أشهر') }}</h3> <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('الأرباح والخسائر — آخر ٦ أشهر') }}</h3>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="min-w-[600px]"> <div class="min-w-[600px]">
{{-- Chart header --}} {{-- Chart header --}}
...@@ -256,11 +256,11 @@ ...@@ -256,11 +256,11 @@
</div> </div>
{{-- Row 4: Facility Costs Table + Revenue Sources --}} {{-- Row 4: Facility Costs Table + Revenue Sources --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
{{-- Facility Costs Detail --}} {{-- Facility Costs Detail --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<h3 class="text-base font-semibold text-gray-800">{{ __('تكاليف المنشآت') }}</h3> <h3 class="text-sm sm:text-base font-semibold text-gray-800">{{ __('تكاليف المنشآت') }}</h3>
<span class="text-sm font-medium text-gray-500" dir="ltr">{{ number_format($facilityCosts['total_monthly'] / 100, 0) }} {{ __('ج.م/شهر') }}</span> <span class="text-sm font-medium text-gray-500" dir="ltr">{{ number_format($facilityCosts['total_monthly'] / 100, 0) }} {{ __('ج.م/شهر') }}</span>
</div> </div>
@if(count($facilityCosts['facilities']) > 0) @if(count($facilityCosts['facilities']) > 0)
...@@ -303,8 +303,8 @@ ...@@ -303,8 +303,8 @@
</div> </div>
{{-- Revenue by Source --}} {{-- Revenue by Source --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('مصادر الإيرادات') }}</h3> <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('مصادر الإيرادات') }}</h3>
@if(count($revenueBySource) > 0) @if(count($revenueBySource) > 0)
<div class="space-y-3"> <div class="space-y-3">
@php $maxSource = max(1, collect($revenueBySource)->max('total')); @endphp @php $maxSource = max(1, collect($revenueBySource)->max('total')); @endphp
...@@ -351,20 +351,20 @@ ...@@ -351,20 +351,20 @@
</div> </div>
{{-- Row 5: Collection Rate Progress --}} {{-- Row 5: Collection Rate Progress --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('معدل تحصيل الفواتير') }}</h3> <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('معدل تحصيل الفواتير') }}</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="grid grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
<div class="text-center"> <div class="text-center">
<p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الفوترة') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الفوترة') }}</p>
<p class="text-2xl font-bold text-gray-800" dir="ltr">{{ number_format($collectionRate['invoiced'] / 100, 0) }} <span class="text-sm font-normal text-gray-500">{{ __('ج.م') }}</span></p> <p class="text-xl sm:text-2xl font-bold text-gray-800" dir="ltr">{{ number_format($collectionRate['invoiced'] / 100, 0) }} <span class="text-sm font-normal text-gray-500">{{ __('ج.م') }}</span></p>
</div> </div>
<div class="text-center"> <div class="text-center">
<p class="text-sm text-gray-500 mb-1">{{ __('تم تحصيله') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('تم تحصيله') }}</p>
<p class="text-2xl font-bold text-emerald-600" dir="ltr">{{ number_format($collectionRate['collected'] / 100, 0) }} <span class="text-sm font-normal text-gray-500">{{ __('ج.م') }}</span></p> <p class="text-xl sm:text-2xl font-bold text-emerald-600" dir="ltr">{{ number_format($collectionRate['collected'] / 100, 0) }} <span class="text-sm font-normal text-gray-500">{{ __('ج.م') }}</span></p>
</div> </div>
<div class="text-center"> <div class="text-center">
<p class="text-sm text-gray-500 mb-1">{{ __('نسبة التحصيل') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('نسبة التحصيل') }}</p>
<p class="text-2xl font-bold {{ $collectionRate['rate'] >= 80 ? 'text-emerald-600' : ($collectionRate['rate'] >= 50 ? 'text-amber-600' : 'text-red-600') }}" dir="ltr">{{ $collectionRate['rate'] }}%</p> <p class="text-xl sm:text-2xl font-bold {{ $collectionRate['rate'] >= 80 ? 'text-emerald-600' : ($collectionRate['rate'] >= 50 ? 'text-amber-600' : 'text-red-600') }}" dir="ltr">{{ $collectionRate['rate'] }}%</p>
</div> </div>
</div> </div>
{{-- Progress bar --}} {{-- Progress bar --}}
......
resources/views/livewire/financial/payment-plan-create.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('إنشاء خطة دفع') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إنشاء خطة دفع') }}</h1>
</div> </div>
@if(session('success')) @if(session('success'))
<div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">{{ session('success') }}</div> <div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">{{ session('success') }}</div>
@endif @endif
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4">
<!-- Configuration --> <!-- Configuration -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('إعدادات الخطة') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('إعدادات الخطة') }}</h3>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('الفاتورة') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('الفاتورة') }}</label>
<select wire:model.live="invoiceId" class="w-full rounded-lg border-gray-300 text-sm"> <select wire:model.live="invoiceId" class="w-full rounded-lg border-gray-300 text-sm py-2.5">
<option value="">{{ __('اختر فاتورة') }}</option> <option value="">{{ __('اختر فاتورة') }}</option>
@foreach($invoices as $inv) @foreach($invoices as $inv)
<option value="{{ $inv->id }}"> <option value="{{ $inv->id }}">
...@@ -35,18 +35,18 @@ ...@@ -35,18 +35,18 @@
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('دفعة مقدمة (ج.م)') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('دفعة مقدمة (ج.م)') }}</label>
<input type="number" wire:model.live.debounce.500ms="downPayment" dir="ltr" min="0" <input type="number" wire:model.live.debounce.500ms="downPayment" dir="ltr" min="0"
class="w-full rounded-lg border-gray-300 text-sm"> class="w-full rounded-lg border-gray-300 text-sm py-2.5">
</div> </div>
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('عدد الأقساط') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('عدد الأقساط') }}</label>
<input type="number" wire:model.live="installmentCount" dir="ltr" min="2" max="24" <input type="number" wire:model.live="installmentCount" dir="ltr" min="2" max="24"
class="w-full rounded-lg border-gray-300 text-sm"> class="w-full rounded-lg border-gray-300 text-sm py-2.5">
</div> </div>
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('التكرار') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('التكرار') }}</label>
<select wire:model.live="frequency" class="w-full rounded-lg border-gray-300 text-sm"> <select wire:model.live="frequency" class="w-full rounded-lg border-gray-300 text-sm py-2.5">
<option value="weekly">{{ __('أسبوعي') }}</option> <option value="weekly">{{ __('أسبوعي') }}</option>
<option value="biweekly">{{ __('كل أسبوعين') }}</option> <option value="biweekly">{{ __('كل أسبوعين') }}</option>
<option value="monthly">{{ __('شهري') }}</option> <option value="monthly">{{ __('شهري') }}</option>
...@@ -56,14 +56,14 @@ class="w-full rounded-lg border-gray-300 text-sm"> ...@@ -56,14 +56,14 @@ class="w-full rounded-lg border-gray-300 text-sm">
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('تاريخ أول قسط') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('تاريخ أول قسط') }}</label>
<input type="date" wire:model.live="startDate" dir="ltr" <input type="date" wire:model.live="startDate" dir="ltr"
class="w-full rounded-lg border-gray-300 text-sm"> class="w-full rounded-lg border-gray-300 text-sm py-2.5">
</div> </div>
</div> </div>
</div> </div>
<!-- Preview --> <!-- Preview -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('معاينة الأقساط') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('معاينة الأقساط') }}</h3>
@if(count($installments) > 0) @if(count($installments) > 0)
<div class="space-y-2"> <div class="space-y-2">
...@@ -93,7 +93,7 @@ class="w-full rounded-lg border-gray-300 text-sm"> ...@@ -93,7 +93,7 @@ class="w-full rounded-lg border-gray-300 text-sm">
</div> </div>
<button wire:click="save" wire:loading.attr="disabled" <button wire:click="save" wire:loading.attr="disabled"
class="w-full mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium"> class="w-full mt-6 px-6 py-2.5 sm:py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
<span wire:loading.remove wire:target="save">{{ __('إنشاء خطة الدفع') }}</span> <span wire:loading.remove wire:target="save">{{ __('إنشاء خطة الدفع') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الإنشاء...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الإنشاء...') }}</span>
</button> </button>
......
resources/views/livewire/groups/group-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل المجموعة') : __('إنشاء مجموعة جديدة') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل المجموعة') : __('إنشاء مجموعة جديدة') }}</h1>
<a href="{{ route('groups.list') }}" wire:navigate <a href="{{ route('groups.list') }}" wire:navigate
class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للقائمة') }}</a> class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للقائمة') }}</a>
</div> </div>
...@@ -10,12 +10,12 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -10,12 +10,12 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
@endif @endif
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('بيانات المجموعة') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('بيانات المجموعة') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البرنامج') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البرنامج') }} <span class="text-red-500">*</span></label>
<select wire:model.live="program_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="program_id" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('اختر البرنامج') }}</option> <option value="">{{ __('اختر البرنامج') }}</option>
@foreach($programs as $program) @foreach($programs as $program)
<option value="{{ $program->id }}">{{ $program->name_ar }}</option> <option value="{{ $program->id }}">{{ $program->name_ar }}</option>
...@@ -25,7 +25,7 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -25,7 +25,7 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
<select wire:model="branch_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model="branch_id" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('اختر الفرع') }}</option> <option value="">{{ __('اختر الفرع') }}</option>
@foreach($branches as $branch) @foreach($branches as $branch)
<option value="{{ $branch->id }}">{{ $branch->name_ar }}</option> <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
...@@ -35,22 +35,22 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -35,22 +35,22 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المجموعة بالعربية') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المجموعة بالعربية') }} <span class="text-red-500">*</span></label>
<input type="text" wire:model="name_ar" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="text" wire:model="name_ar" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المجموعة بالإنجليزية') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المجموعة بالإنجليزية') }} <span class="text-red-500">*</span></label>
<input type="text" wire:model="name" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="text" wire:model="name" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الكود') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الكود') }}</label>
<input type="text" wire:model="code" dir="ltr" placeholder="GRP-001" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="text" wire:model="code" dir="ltr" placeholder="GRP-001" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('code') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('code') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المدرب الرئيسي') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المدرب الرئيسي') }}</label>
<select wire:model="head_trainer_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model="head_trainer_id" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('اختر المدرب') }}</option> <option value="">{{ __('اختر المدرب') }}</option>
@foreach($trainers as $trainer) @foreach($trainers as $trainer)
<option value="{{ $trainer->id }}">{{ $trainer->name_ar ?: $trainer->name }}</option> <option value="{{ $trainer->id }}">{{ $trainer->name_ar ?: $trainer->name }}</option>
...@@ -60,41 +60,41 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -60,41 +60,41 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للسعة') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للسعة') }} <span class="text-red-500">*</span></label>
<input type="number" wire:model="max_capacity" min="1" max="500" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="number" wire:model="max_capacity" min="1" max="500" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('max_capacity') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('max_capacity') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الموسم') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الموسم') }}</label>
<input type="text" wire:model="season" placeholder="{{ __('صيف 2025') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="text" wire:model="season" placeholder="{{ __('صيف 2025') }}" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البداية') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البداية') }}</label>
<input type="date" wire:model="start_date" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="date" wire:model="start_date" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('start_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('start_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الانتهاء') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الانتهاء') }}</label>
<input type="date" wire:model="end_date" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="date" wire:model="end_date" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('end_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('end_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label>
<textarea wire:model="notes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> <textarea wire:model="notes" rows="3" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
@error('notes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('notes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('groups.list') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 font-medium text-sm">
{{ __('إلغاء') }}
</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50">
<span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث المجموعة') : __('إنشاء المجموعة') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث المجموعة') : __('إنشاء المجموعة') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<a href="{{ route('groups.list') }}" wire:navigate
class="px-6 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 font-medium text-sm">
{{ __('إلغاء') }}
</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/groups/group-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('المجموعات التدريبية') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('المجموعات التدريبية') }}</h1>
@can('groups.create') @can('groups.create')
<a href="{{ route('groups.create') }}" wire:navigate <a href="{{ route('groups.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 text-sm font-medium">
......
resources/views/livewire/guardian/guardian-dashboard.blade.php
View file @ 944501f1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{{-- Header --}} {{-- Header --}}
<div class="flex items-center justify-between mb-8"> <div class="flex items-center justify-between mb-8">
<div> <div>
<h1 class="text-2xl font-bold text-gray-800">{{ __('بوابة ولي الأمر') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('بوابة ولي الأمر') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('متابعة أبنائك ومعلوماتهم') }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('متابعة أبنائك ومعلوماتهم') }}</p>
</div> </div>
</div> </div>
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
@else @else
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@foreach($children as $child) @foreach($children as $child)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
{{-- Child Header --}} {{-- Child Header --}}
<div class="flex items-start justify-between mb-4"> <div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
......
resources/views/livewire/inventory/movement-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('حركة المخزون') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('حركة المخزون') }}</h1>
</div> </div>
{{-- Filters --}} {{-- Filters --}}
......
resources/views/livewire/inventory/product-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل المنتج') : __('إضافة منتج جديد') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل المنتج') : __('إضافة منتج جديد') }}</h1>
<a href="{{ route('inventory.products') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a> <a href="{{ route('inventory.products') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a>
</div> </div>
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
@endif @endif
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('البيانات الأساسية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('البيانات الأساسية') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
{{-- Name AR --}} {{-- Name AR --}}
<div> <div>
<label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنتج بالعربية') }} *</label> <label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنتج بالعربية') }} *</label>
...@@ -75,9 +75,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -75,9 +75,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Pricing Section --}} {{-- Pricing Section --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('التسعير') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('التسعير') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
{{-- Selling Price --}} {{-- Selling Price --}}
<div> <div>
<label for="selling_price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر البيع (ج.م)') }} *</label> <label for="selling_price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر البيع (ج.م)') }} *</label>
...@@ -105,9 +105,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -105,9 +105,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Inventory Section --}} {{-- Inventory Section --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('إعدادات المخزون') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('إعدادات المخزون') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
{{-- Track Inventory --}} {{-- Track Inventory --}}
<div class="flex items-center md:col-span-3"> <div class="flex items-center md:col-span-3">
<label class="flex items-center gap-2 cursor-pointer"> <label class="flex items-center gap-2 cursor-pointer">
...@@ -138,7 +138,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -138,7 +138,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Description --}} {{-- Description --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div> <div>
<label for="description_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف') }}</label> <label for="description_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف') }}</label>
<textarea id="description_ar" wire:model="description_ar" rows="3" <textarea id="description_ar" wire:model="description_ar" rows="3"
...@@ -157,14 +157,14 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -157,14 +157,14 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
</div> </div>
{{-- Actions --}} {{-- Actions --}}
<div class="flex items-center gap-4"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('inventory.products') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
<span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المنتج') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المنتج') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<a href="{{ route('inventory.products') }}" wire:navigate
class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/inventory/product-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('المنتجات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('المنتجات') }}</h1>
@can('inventory.create') @can('inventory.create')
<a href="{{ route('inventory.products.create') }}" wire:navigate <a href="{{ route('inventory.products.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 text-sm font-medium">
......
resources/views/livewire/inventory/stock-adjustment.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('تسوية المخزون') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تسوية المخزون') }}</h1>
</div> </div>
{{-- Flash Messages --}} {{-- Flash Messages --}}
...@@ -15,15 +15,15 @@ ...@@ -15,15 +15,15 @@
</div> </div>
@endif @endif
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-4 sm:space-y-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('بيانات التسوية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('بيانات التسوية') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
{{-- Product --}} {{-- Product --}}
<div> <div>
<label for="product_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المنتج') }} *</label> <label for="product_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المنتج') }} *</label>
<select id="product_id" wire:model="product_id" <select id="product_id" wire:model="product_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('product_id') border-red-500 @enderror"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm @error('product_id') border-red-500 @enderror">
<option value="">{{ __('-- اختر المنتج --') }}</option> <option value="">{{ __('-- اختر المنتج --') }}</option>
@foreach($products as $product) @foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->name_ar }} ({{ $product->sku }})</option> <option value="{{ $product->id }}">{{ $product->name_ar }} ({{ $product->sku }})</option>
...@@ -36,7 +36,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -36,7 +36,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="warehouse_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المستودع') }} *</label> <label for="warehouse_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المستودع') }} *</label>
<select id="warehouse_id" wire:model="warehouse_id" <select id="warehouse_id" wire:model="warehouse_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('warehouse_id') border-red-500 @enderror"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm @error('warehouse_id') border-red-500 @enderror">
<option value="">{{ __('-- اختر المستودع --') }}</option> <option value="">{{ __('-- اختر المستودع --') }}</option>
@foreach($warehouses as $warehouse) @foreach($warehouses as $warehouse)
<option value="{{ $warehouse->id }}">{{ $warehouse->name_ar }} ({{ $warehouse->code }})</option> <option value="{{ $warehouse->id }}">{{ $warehouse->name_ar }} ({{ $warehouse->code }})</option>
...@@ -49,7 +49,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -49,7 +49,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="adjustment_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع التسوية') }} *</label> <label for="adjustment_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع التسوية') }} *</label>
<select id="adjustment_type" wire:model="adjustment_type" <select id="adjustment_type" wire:model="adjustment_type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('adjustment_type') border-red-500 @enderror"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm @error('adjustment_type') border-red-500 @enderror">
<option value="adjustment_up">{{ __('تسوية بالزيادة (إضافة)') }}</option> <option value="adjustment_up">{{ __('تسوية بالزيادة (إضافة)') }}</option>
<option value="adjustment_down">{{ __('تسوية بالنقص (خصم)') }}</option> <option value="adjustment_down">{{ __('تسوية بالنقص (خصم)') }}</option>
</select> </select>
...@@ -60,7 +60,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -60,7 +60,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="quantity" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الكمية') }} *</label> <label for="quantity" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الكمية') }} *</label>
<input type="number" id="quantity" wire:model="quantity" min="1" dir="ltr" <input type="number" id="quantity" wire:model="quantity" min="1" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('quantity') border-red-500 @enderror"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm @error('quantity') border-red-500 @enderror">
@error('quantity') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('quantity') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -68,7 +68,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -68,7 +68,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="reference_number" class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم مرجعي') }}</label> <label for="reference_number" class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم مرجعي') }}</label>
<input type="text" id="reference_number" wire:model="reference_number" dir="ltr" <input type="text" id="reference_number" wire:model="reference_number" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('reference_number') border-red-500 @enderror" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm @error('reference_number') border-red-500 @enderror"
placeholder="{{ __('اختياري') }}"> placeholder="{{ __('اختياري') }}">
@error('reference_number') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('reference_number') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -77,7 +77,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -77,7 +77,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div class="md:col-span-2"> <div class="md:col-span-2">
<label for="reason" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سبب التسوية') }} *</label> <label for="reason" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سبب التسوية') }} *</label>
<textarea id="reason" wire:model="reason" rows="3" <textarea id="reason" wire:model="reason" rows="3"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('reason') border-red-500 @enderror" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm @error('reason') border-red-500 @enderror"
placeholder="{{ __('أدخل سبب التسوية...') }}"></textarea> placeholder="{{ __('أدخل سبب التسوية...') }}"></textarea>
@error('reason') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('reason') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -85,9 +85,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -85,9 +85,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Actions --}} {{-- Actions --}}
<div class="flex items-center gap-4"> <div class="flex flex-col-reverse sm:flex-row gap-3">
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors"> class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors text-sm">
<span wire:loading.remove wire:target="save">{{ __('تنفيذ التسوية') }}</span> <span wire:loading.remove wire:target="save">{{ __('تنفيذ التسوية') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ التنفيذ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ التنفيذ...') }}</span>
</button> </button>
......
resources/views/livewire/inventory/warehouse-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل المستودع') : __('إضافة مستودع جديد') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل المستودع') : __('إضافة مستودع جديد') }}</h1>
<a href="{{ route('inventory.warehouses') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a> <a href="{{ route('inventory.warehouses') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a>
</div> </div>
...@@ -12,13 +12,13 @@ ...@@ -12,13 +12,13 @@
@endif @endif
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
{{-- Name AR --}} {{-- Name AR --}}
<div> <div>
<label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المستودع بالعربية') }} *</label> <label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المستودع بالعربية') }} *</label>
<input type="text" id="name_ar" wire:model="name_ar" <input type="text" id="name_ar" wire:model="name_ar"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -26,7 +26,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -26,7 +26,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المستودع بالإنجليزية') }}</label> <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المستودع بالإنجليزية') }}</label>
<input type="text" id="name" wire:model="name" dir="ltr" <input type="text" id="name" wire:model="name" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
@error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -34,7 +34,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -34,7 +34,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="code" class="block text-sm font-medium text-gray-700 mb-1">{{ __('كود المستودع') }} *</label> <label for="code" class="block text-sm font-medium text-gray-700 mb-1">{{ __('كود المستودع') }} *</label>
<input type="text" id="code" wire:model="code" dir="ltr" <input type="text" id="code" wire:model="code" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('code') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('code') border-red-500 @enderror">
@error('code') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('code') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -42,7 +42,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -42,7 +42,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع المستودع') }} *</label> <label for="type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع المستودع') }} *</label>
<select id="type" wire:model="type" <select id="type" wire:model="type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror">
@foreach($typeOptions as $value => $label) @foreach($typeOptions as $value => $label)
<option value="{{ $value }}">{{ __($label) }}</option> <option value="{{ $value }}">{{ __($label) }}</option>
@endforeach @endforeach
...@@ -54,7 +54,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -54,7 +54,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="branch_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label> <label for="branch_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
<select id="branch_id" wire:model="branch_id" <select id="branch_id" wire:model="branch_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('branch_id') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('branch_id') border-red-500 @enderror">
<option value="">{{ __('-- اختر الفرع --') }}</option> <option value="">{{ __('-- اختر الفرع --') }}</option>
@foreach($branches as $branch) @foreach($branches as $branch)
<option value="{{ $branch->id }}">{{ $branch->name_ar }}</option> <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
...@@ -67,7 +67,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -67,7 +67,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="manager_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المدير المسؤول') }}</label> <label for="manager_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المدير المسؤول') }}</label>
<select id="manager_id" wire:model="manager_id" <select id="manager_id" wire:model="manager_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('manager_id') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('manager_id') border-red-500 @enderror">
<option value="">{{ __('-- اختر المدير --') }}</option> <option value="">{{ __('-- اختر المدير --') }}</option>
@foreach($managers as $manager) @foreach($managers as $manager)
<option value="{{ $manager->id }}">{{ $manager->name_ar ?? $manager->name }}</option> <option value="{{ $manager->id }}">{{ $manager->name_ar ?? $manager->name }}</option>
...@@ -77,16 +77,16 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -77,16 +77,16 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Address --}} {{-- Address --}}
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label for="address" class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنوان') }}</label> <label for="address" class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنوان') }}</label>
<textarea id="address" wire:model="address" rows="2" <textarea id="address" wire:model="address" rows="2"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('address') border-red-500 @enderror"></textarea> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('address') border-red-500 @enderror"></textarea>
@error('address') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('address') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
{{-- Is Active --}} {{-- Is Active --}}
<div class="mt-4"> <div class="mt-4 min-h-[44px] flex items-center">
<label class="flex items-center gap-2 cursor-pointer"> <label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="is_active" <input type="checkbox" wire:model="is_active"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
...@@ -96,14 +96,14 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -96,14 +96,14 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
</div> </div>
{{-- Actions --}} {{-- Actions --}}
<div class="flex items-center gap-4"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('inventory.warehouses') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
<span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المستودع') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المستودع') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<a href="{{ route('inventory.warehouses') }}" wire:navigate
class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/inventory/warehouse-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('المستودعات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('المستودعات') }}</h1>
@can('inventory.create') @can('inventory.create')
<a href="{{ route('inventory.warehouses.create') }}" wire:navigate <a href="{{ route('inventory.warehouses.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 text-sm font-medium">
......
resources/views/livewire/invoices/invoice-create.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('إنشاء فاتورة') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إنشاء فاتورة') }}</h1>
<a href="{{ route('invoices.list') }}" wire:navigate <a href="{{ route('invoices.list') }}" wire:navigate
class="text-gray-600 hover:text-gray-800 text-sm font-medium"> class="text-gray-600 hover:text-gray-800 text-sm font-medium">
{{ __('العودة للفواتير') }} {{ __('العودة للفواتير') }}
...@@ -15,17 +15,17 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium"> ...@@ -15,17 +15,17 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium">
@endif @endif
<form wire:submit="save"> <form wire:submit="save">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4">
{{-- Main Form --}} {{-- Main Form --}}
<div class="lg:col-span-2 space-y-6"> <div class="lg:col-span-2 space-y-4 sm:space-y-6">
{{-- Client Info --}} {{-- Client Info --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('بيانات العميل') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('بيانات العميل') }}</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المشترك') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المشترك') }}</label>
<select wire:model.live="participant_id" <select wire:model.live="participant_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="">{{ __('اختر مشترك (اختياري)') }}</option> <option value="">{{ __('اختر مشترك (اختياري)') }}</option>
@foreach($participants as $participant) @foreach($participants as $participant)
<option value="{{ $participant->id }}"> <option value="{{ $participant->id }}">
...@@ -40,23 +40,23 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -40,23 +40,23 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم العميل') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم العميل') }} <span class="text-red-500">*</span></label>
<input type="text" wire:model="contact_name" <input type="text" wire:model="contact_name"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder="{{ __('اسم العميل') }}"> placeholder="{{ __('اسم العميل') }}">
@error('contact_name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('contact_name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم الهاتف') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم الهاتف') }}</label>
<input type="text" wire:model="contact_phone" dir="ltr" <input type="text" wire:model="contact_phone" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder="01xxxxxxxxx"> placeholder="01xxxxxxxxx">
</div> </div>
</div> </div>
</div> </div>
{{-- Items --}} {{-- Items --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-800">{{ __('عناصر الفاتورة') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('عناصر الفاتورة') }}</h2>
<button type="button" wire:click="addItem" <button type="button" wire:click="addItem"
class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 text-sm font-medium"> class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 text-sm font-medium">
<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> <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>
...@@ -66,25 +66,25 @@ class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 text-blue-600 round ...@@ -66,25 +66,25 @@ class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 text-blue-600 round
<div class="space-y-3"> <div class="space-y-3">
@foreach($items as $index => $item) @foreach($items as $index => $item)
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg" wire:key="item-{{ $index }}"> <div class="flex flex-col sm:flex-row items-start gap-3 p-3 bg-gray-50 rounded-lg" wire:key="item-{{ $index }}">
<div class="flex-1 grid grid-cols-1 sm:grid-cols-6 gap-3"> <div class="flex-1 w-full grid grid-cols-1 sm:grid-cols-6 gap-3">
<div class="sm:col-span-3"> <div class="sm:col-span-3">
<label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الوصف') }}</label> <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الوصف') }}</label>
<input type="text" wire:model="items.{{ $index }}.description" <input type="text" wire:model="items.{{ $index }}.description"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder="{{ __('وصف العنصر') }}"> placeholder="{{ __('وصف العنصر') }}">
@error("items.{$index}.description") <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error("items.{$index}.description") <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الكمية') }}</label> <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الكمية') }}</label>
<input type="number" wire:model="items.{{ $index }}.quantity" min="1" dir="ltr" <input type="number" wire:model="items.{{ $index }}.quantity" min="1" dir="ltr"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"> class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
@error("items.{$index}.quantity") <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error("items.{$index}.quantity") <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<label class="block text-xs font-medium text-gray-500 mb-1">{{ __('سعر الوحدة (ج.م)') }}</label> <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('سعر الوحدة (ج.م)') }}</label>
<input type="number" wire:model="items.{{ $index }}.unit_price" min="0" step="0.01" dir="ltr" <input type="number" wire:model="items.{{ $index }}.unit_price" min="0" step="0.01" dir="ltr"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder="0.00"> placeholder="0.00">
@error("items.{$index}.unit_price") <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error("items.{$index}.unit_price") <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -102,25 +102,25 @@ class="mt-6 p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded"> ...@@ -102,25 +102,25 @@ class="mt-6 p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded">
</div> </div>
{{-- Dates & Notes --}} {{-- Dates & Notes --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('التواريخ والملاحظات') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('التواريخ والملاحظات') }}</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الإصدار') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الإصدار') }} <span class="text-red-500">*</span></label>
<input type="date" wire:model="issue_date" dir="ltr" <input type="date" wire:model="issue_date" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
@error('issue_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('issue_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الاستحقاق') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الاستحقاق') }} <span class="text-red-500">*</span></label>
<input type="date" wire:model="due_date" dir="ltr" <input type="date" wire:model="due_date" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
@error('due_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('due_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label>
<textarea wire:model="notes" rows="3" <textarea wire:model="notes" rows="3"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder="{{ __('ملاحظات إضافية...') }}"></textarea> placeholder="{{ __('ملاحظات إضافية...') }}"></textarea>
</div> </div>
</div> </div>
...@@ -129,8 +129,8 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -129,8 +129,8 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{-- Sidebar Summary --}} {{-- Sidebar Summary --}}
<div class="lg:col-span-1"> <div class="lg:col-span-1">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 sticky top-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 sticky top-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('ملخص الفاتورة') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('ملخص الفاتورة') }}</h2>
<div class="space-y-3"> <div class="space-y-3">
<div class="flex justify-between text-sm"> <div class="flex justify-between text-sm">
...@@ -141,14 +141,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -141,14 +141,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الخصم (ج.م)') }}</label> <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الخصم (ج.م)') }}</label>
<input type="number" wire:model.live="discount_amount" min="0" step="0.01" dir="ltr" <input type="number" wire:model.live="discount_amount" min="0" step="0.01" dir="ltr"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder="0.00"> placeholder="0.00">
</div> </div>
<div> <div>
<label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الضريبة (ج.م)') }}</label> <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الضريبة (ج.م)') }}</label>
<input type="number" wire:model.live="tax_amount" min="0" step="0.01" dir="ltr" <input type="number" wire:model.live="tax_amount" min="0" step="0.01" dir="ltr"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder="0.00"> placeholder="0.00">
</div> </div>
......
resources/views/livewire/invoices/invoice-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('الفواتير') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('الفواتير') }}</h1>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<a href="{{ route('export.invoices', ['status' => $status ?? '']) }}" <a href="{{ route('export.invoices', ['status' => $status ?? '']) }}"
class="inline-flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium"> class="inline-flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium">
......
resources/views/livewire/invoices/invoice-show.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('فاتورة') }} #{{ $invoice->number }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('فاتورة') }} #{{ $invoice->number }}</h1>
<a href="{{ route('invoices.list') }}" wire:navigate <a href="{{ route('invoices.list') }}" wire:navigate
class="text-gray-600 hover:text-gray-800 text-sm font-medium"> class="text-gray-600 hover:text-gray-800 text-sm font-medium">
{{ __('العودة للفواتير') }} {{ __('العودة للفواتير') }}
...@@ -19,12 +19,12 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium"> ...@@ -19,12 +19,12 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium">
</div> </div>
@endif @endif
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
{{-- Main Content --}} {{-- Main Content --}}
<div class="lg:col-span-2 space-y-6"> <div class="lg:col-span-2 space-y-6">
{{-- Invoice Header --}} {{-- Invoice Header --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div class="flex items-start justify-between mb-4"> <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-3 mb-4">
<div> <div>
<p class="text-sm text-gray-500">{{ __('رقم الفاتورة') }}</p> <p class="text-sm text-gray-500">{{ __('رقم الفاتورة') }}</p>
<p class="text-lg font-bold text-gray-800" dir="ltr">{{ $invoice->number }}</p> <p class="text-lg font-bold text-gray-800" dir="ltr">{{ $invoice->number }}</p>
...@@ -84,8 +84,8 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium"> ...@@ -84,8 +84,8 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium">
</div> </div>
{{-- Items Table --}} {{-- Items Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden overflow-x-auto">
<div class="px-6 py-4 border-b border-gray-200"> <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-800">{{ __('عناصر الفاتورة') }}</h2> <h2 class="text-lg font-semibold text-gray-800">{{ __('عناصر الفاتورة') }}</h2>
</div> </div>
<table class="w-full text-sm"> <table class="w-full text-sm">
...@@ -141,8 +141,8 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium"> ...@@ -141,8 +141,8 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium">
</div> </div>
{{-- Payments History --}} {{-- Payments History --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden overflow-x-auto">
<div class="px-6 py-4 border-b border-gray-200"> <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-800">{{ __('سجل المدفوعات') }}</h2> <h2 class="text-lg font-semibold text-gray-800">{{ __('سجل المدفوعات') }}</h2>
</div> </div>
@if($invoice->payments->count() > 0) @if($invoice->payments->count() > 0)
...@@ -222,7 +222,7 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium"> ...@@ -222,7 +222,7 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium">
{{-- Sidebar --}} {{-- Sidebar --}}
<div class="lg:col-span-1 space-y-6"> <div class="lg:col-span-1 space-y-6">
{{-- Financial Summary --}} {{-- Financial Summary --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('الملخص المالي') }}</h2> <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('الملخص المالي') }}</h2>
<div class="space-y-3"> <div class="space-y-3">
<div class="flex justify-between text-sm"> <div class="flex justify-between text-sm">
...@@ -246,7 +246,7 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium"> ...@@ -246,7 +246,7 @@ class="text-gray-600 hover:text-gray-800 text-sm font-medium">
{{-- Record Payment Form --}} {{-- Record Payment Form --}}
@if($this->canRecordPayment) @if($this->canRecordPayment)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6" x-data="{ showPayment: false }"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6" x-data="{ showPayment: false }">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-800">{{ __('تسجيل دفعة') }}</h2> <h2 class="text-lg font-semibold text-gray-800">{{ __('تسجيل دفعة') }}</h2>
<button type="button" @click="showPayment = !showPayment" <button type="button" @click="showPayment = !showPayment"
...@@ -308,7 +308,7 @@ class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 te ...@@ -308,7 +308,7 @@ class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 te
{{-- Actions --}} {{-- Actions --}}
@if($this->canCancel) @if($this->canCancel)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('إجراءات') }}</h2> <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('إجراءات') }}</h2>
<button type="button" wire:click="cancelInvoice" <button type="button" wire:click="cancelInvoice"
wire:loading.attr="disabled" wire:loading.attr="disabled"
......
resources/views/livewire/messaging/bulk-message.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('رسائل جماعية') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('رسائل جماعية') }}</h1>
</div> </div>
{{-- Flash Messages --}} {{-- Flash Messages --}}
...@@ -20,31 +20,31 @@ ...@@ -20,31 +20,31 @@
</div> </div>
@endif @endif
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
{{-- Selection Panel --}} {{-- Selection Panel --}}
<div class="lg:col-span-2"> <div class="lg:col-span-2">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('اختيار المستلمين') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('اختيار المستلمين') }}</h2>
{{-- Selection Mode Tabs --}} {{-- Selection Mode Tabs --}}
<div class="flex flex-wrap gap-2 mb-6" x-data="{ mode: @entangle('selectionMode') }"> <div class="grid grid-cols-2 sm:flex sm:flex-wrap gap-2 mb-6" x-data="{ mode: @entangle('selectionMode') }">
<button type="button" wire:click="$set('selectionMode', 'group')" <button type="button" wire:click="$set('selectionMode', 'group')"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors" class="px-3 sm:px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
:class="mode === 'group' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"> :class="mode === 'group' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
{{ __('حسب المجموعة') }} {{ __('حسب المجموعة') }}
</button> </button>
<button type="button" wire:click="$set('selectionMode', 'status')" <button type="button" wire:click="$set('selectionMode', 'status')"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors" class="px-3 sm:px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
:class="mode === 'status' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"> :class="mode === 'status' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
{{ __('حسب الحالة') }} {{ __('حسب الحالة') }}
</button> </button>
<button type="button" wire:click="$set('selectionMode', 'membership')" <button type="button" wire:click="$set('selectionMode', 'membership')"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors" class="px-3 sm:px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
:class="mode === 'membership' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"> :class="mode === 'membership' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
{{ __('حسب العضوية') }} {{ __('حسب العضوية') }}
</button> </button>
<button type="button" wire:click="$set('selectionMode', 'custom')" <button type="button" wire:click="$set('selectionMode', 'custom')"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors" class="px-3 sm:px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
:class="mode === 'custom' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"> :class="mode === 'custom' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
{{ __('اختيار يدوي') }} {{ __('اختيار يدوي') }}
</button> </button>
...@@ -55,7 +55,7 @@ class="px-4 py-2 rounded-lg text-sm font-medium transition-colors" ...@@ -55,7 +55,7 @@ class="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
<div> <div>
<label for="selectedGroup" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المجموعة التدريبية') }} <span class="text-red-500">*</span></label> <label for="selectedGroup" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المجموعة التدريبية') }} <span class="text-red-500">*</span></label>
<select wire:model.live="selectedGroup" id="selectedGroup" <select wire:model.live="selectedGroup" id="selectedGroup"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="">{{ __('اختر مجموعة') }}</option> <option value="">{{ __('اختر مجموعة') }}</option>
@foreach($groups as $group) @foreach($groups as $group)
<option value="{{ $group->id }}">{{ $group->name_ar ?: $group->name }} ({{ $group->current_count }} {{ __('مشترك') }})</option> <option value="{{ $group->id }}">{{ $group->name_ar ?: $group->name }} ({{ $group->current_count }} {{ __('مشترك') }})</option>
...@@ -70,7 +70,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -70,7 +70,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="selectedStatus" class="block text-sm font-medium text-gray-700 mb-1">{{ __('حالة المشترك') }} <span class="text-red-500">*</span></label> <label for="selectedStatus" class="block text-sm font-medium text-gray-700 mb-1">{{ __('حالة المشترك') }} <span class="text-red-500">*</span></label>
<select wire:model.live="selectedStatus" id="selectedStatus" <select wire:model.live="selectedStatus" id="selectedStatus"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="">{{ __('اختر حالة') }}</option> <option value="">{{ __('اختر حالة') }}</option>
@foreach($statuses as $status) @foreach($statuses as $status)
<option value="{{ $status->value }}">{{ __($status->value) }}</option> <option value="{{ $status->value }}">{{ __($status->value) }}</option>
...@@ -85,7 +85,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -85,7 +85,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="selectedMembership" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العضوية') }} <span class="text-red-500">*</span></label> <label for="selectedMembership" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العضوية') }} <span class="text-red-500">*</span></label>
<select wire:model.live="selectedMembership" id="selectedMembership" <select wire:model.live="selectedMembership" id="selectedMembership"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="">{{ __('اختر نوع العضوية') }}</option> <option value="">{{ __('اختر نوع العضوية') }}</option>
@foreach($membershipTypes as $type) @foreach($membershipTypes as $type)
<option value="{{ $type->value }}">{{ $type->label() }}</option> <option value="{{ $type->value }}">{{ $type->label() }}</option>
...@@ -120,7 +120,7 @@ class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> ...@@ -120,7 +120,7 @@ class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
{{-- Preview Button --}} {{-- Preview Button --}}
<div class="mt-6"> <div class="mt-6">
<button type="button" wire:click="preview" wire:loading.attr="disabled" wire:target="preview" <button type="button" wire:click="preview" wire:loading.attr="disabled" wire:target="preview"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"> class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gray-600 text-white rounded-lg hover:bg-gray-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
<span wire:loading.remove wire:target="preview">{{ __('معاينة عدد المستلمين') }}</span> <span wire:loading.remove wire:target="preview">{{ __('معاينة عدد المستلمين') }}</span>
<span wire:loading wire:target="preview">{{ __('جارٍ الحساب...') }}</span> <span wire:loading wire:target="preview">{{ __('جارٍ الحساب...') }}</span>
</button> </button>
...@@ -130,7 +130,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-l ...@@ -130,7 +130,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-l
@if($showPreview) @if($showPreview)
<div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg"> <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 text-blue-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg> </svg>
<span class="text-sm font-medium text-blue-800"> <span class="text-sm font-medium text-blue-800">
...@@ -147,8 +147,8 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-l ...@@ -147,8 +147,8 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-l
{{-- Message Compose Panel --}} {{-- Message Compose Panel --}}
<div class="lg:col-span-1"> <div class="lg:col-span-1">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 sticky top-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 lg:sticky lg:top-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('كتابة الرسالة') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('كتابة الرسالة') }}</h2>
{{-- Message Body --}} {{-- Message Body --}}
<div class="mb-4"> <div class="mb-4">
...@@ -156,7 +156,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-l ...@@ -156,7 +156,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-l
<textarea wire:model="messageBody" id="messageBody" rows="6" <textarea wire:model="messageBody" id="messageBody" rows="6"
placeholder="{{ __('اكتب رسالتك هنا...') }}" placeholder="{{ __('اكتب رسالتك هنا...') }}"
maxlength="640" maxlength="640"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"></textarea> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none text-sm"></textarea>
<div class="flex justify-between mt-1"> <div class="flex justify-between mt-1">
@error('messageBody') <p class="text-xs text-red-600">{{ $message }}</p> @enderror @error('messageBody') <p class="text-xs text-red-600">{{ $message }}</p> @enderror
<span class="text-xs text-gray-400 ms-auto" dir="ltr">{{ mb_strlen($messageBody) }}/640</span> <span class="text-xs text-gray-400 ms-auto" dir="ltr">{{ mb_strlen($messageBody) }}/640</span>
...@@ -184,7 +184,7 @@ class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> ...@@ -184,7 +184,7 @@ class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
{{-- Send Button --}} {{-- Send Button --}}
<button type="button" wire:click="send" wire:loading.attr="disabled" wire:target="send" <button type="button" wire:click="send" wire:loading.attr="disabled" wire:target="send"
@if(!$showPreview || $recipientCount === 0 || mb_strlen($messageBody) === 0) disabled @endif @if(!$showPreview || $recipientCount === 0 || mb_strlen($messageBody) === 0) disabled @endif
class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"> class="w-full inline-flex items-center justify-center gap-2 px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
<span wire:loading.remove wire:target="send"> <span wire:loading.remove wire:target="send">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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 19l9 2-9-18-9 18 9-2zm0 0v-8"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
...@@ -211,7 +211,7 @@ class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-60 ...@@ -211,7 +211,7 @@ class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-60
</div> </div>
<button type="button" wire:click="resetForm" <button type="button" wire:click="resetForm"
class="w-full mt-3 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium"> class="w-full mt-3 px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium">
{{ __('رسالة جديدة') }} {{ __('رسالة جديدة') }}
</button> </button>
@endif @endif
......
resources/views/livewire/notifications/notification-center.blade.php
View file @ 944501f1
<div> <div>
{{-- Header --}} {{-- Header --}}
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<h1 class="text-2xl font-bold text-gray-800">{{ __('الإشعارات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('الإشعارات') }}</h1>
@if($unreadCount > 0) @if($unreadCount > 0)
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700"> <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
{{ $unreadCount }} {{ $unreadCount }}
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</div> </div>
@if($unreadCount > 0) @if($unreadCount > 0)
<button wire:click="markAllAsRead" wire:loading.attr="disabled" wire:target="markAllAsRead" <button wire:click="markAllAsRead" wire:loading.attr="disabled" wire:target="markAllAsRead"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium transition-colors"> class="inline-flex items-center gap-2 px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium transition-colors w-full sm:w-auto justify-center">
<span wire:loading.remove wire:target="markAllAsRead"> <span wire:loading.remove wire:target="markAllAsRead">
<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="M5 13l4 4L19 7"/></svg> <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="M5 13l4 4L19 7"/></svg>
</span> </span>
...@@ -26,11 +26,11 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde ...@@ -26,11 +26,11 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde
{{-- Filter Tabs --}} {{-- Filter Tabs --}}
<div class="flex gap-2 mb-4"> <div class="flex gap-2 mb-4">
<button wire:click="$set('filter', 'all')" <button wire:click="$set('filter', 'all')"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $filter === 'all' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-50' }}"> class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ $filter === 'all' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-50' }}">
{{ __('الكل') }} {{ __('الكل') }}
</button> </button>
<button wire:click="$set('filter', 'unread')" <button wire:click="$set('filter', 'unread')"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $filter === 'unread' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-50' }}"> class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ $filter === 'unread' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-50' }}">
{{ __('غير مقروء') }} {{ __('غير مقروء') }}
@if($unreadCount > 0) @if($unreadCount > 0)
<span class="inline-flex items-center justify-center ms-1 px-1.5 py-0.5 rounded-full text-xs {{ $filter === 'unread' ? 'bg-blue-500 text-white' : 'bg-red-100 text-red-700' }}"> <span class="inline-flex items-center justify-center ms-1 px-1.5 py-0.5 rounded-full text-xs {{ $filter === 'unread' ? 'bg-blue-500 text-white' : 'bg-red-100 text-red-700' }}">
...@@ -44,8 +44,8 @@ class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $filter === ...@@ -44,8 +44,8 @@ class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $filter ===
<div class="space-y-3" wire:loading.class="opacity-50 pointer-events-none"> <div class="space-y-3" wire:loading.class="opacity-50 pointer-events-none">
@forelse($notifications as $notification) @forelse($notifications as $notification)
<div wire:click="markAsRead({{ $notification->id }})" <div wire:click="markAsRead({{ $notification->id }})"
class="bg-white rounded-xl border {{ $notification->status->value === 'sent' ? 'border-blue-200 bg-blue-50/30' : 'border-gray-200' }} p-4 cursor-pointer hover:shadow-sm transition-all"> class="bg-white rounded-xl border {{ $notification->status->value === 'sent' ? 'border-blue-200 bg-blue-50/30' : 'border-gray-200' }} p-3 sm:p-4 cursor-pointer hover:shadow-sm transition-all">
<div class="flex items-start gap-3"> <div class="flex items-start gap-2 sm:gap-3">
{{-- Unread Indicator --}} {{-- Unread Indicator --}}
<div class="flex-shrink-0 pt-1"> <div class="flex-shrink-0 pt-1">
@if($notification->status->value === 'sent') @if($notification->status->value === 'sent')
...@@ -57,7 +57,7 @@ class="bg-white rounded-xl border {{ $notification->status->value === 'sent' ? ' ...@@ -57,7 +57,7 @@ class="bg-white rounded-xl border {{ $notification->status->value === 'sent' ? '
{{-- Content --}} {{-- Content --}}
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1"> <div class="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-1">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600"> <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">
{{ $notification->event_type }} {{ $notification->event_type }}
</span> </span>
...@@ -81,8 +81,8 @@ class="bg-white rounded-xl border {{ $notification->status->value === 'sent' ? ' ...@@ -81,8 +81,8 @@ class="bg-white rounded-xl border {{ $notification->status->value === 'sent' ? '
</div> </div>
</div> </div>
@empty @empty
<div class="bg-white rounded-xl border border-gray-200 p-12 text-center"> <div class="bg-white rounded-xl border border-gray-200 p-8 sm:p-12 text-center">
<svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-12 h-12 sm:w-16 sm:h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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> </svg>
<p class="text-gray-500 text-sm">{{ $filter === 'unread' ? __('لا توجد إشعارات غير مقروءة') : __('لا توجد إشعارات') }}</p> <p class="text-gray-500 text-sm">{{ $filter === 'unread' ? __('لا توجد إشعارات غير مقروءة') : __('لا توجد إشعارات') }}</p>
......
resources/views/livewire/notifications/notification-log-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('سجل الإشعارات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('سجل الإشعارات') }}</h1>
</div> </div>
{{-- Filters --}} {{-- Filters --}}
......
resources/views/livewire/notifications/notification-template-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800"> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
{{ $template ? __('تعديل قالب الإشعار') : __('إنشاء قالب إشعار') }} {{ $template ? __('تعديل قالب الإشعار') : __('إنشاء قالب إشعار') }}
</h1> </h1>
<a href="{{ route('notifications.templates') }}" wire:navigate <a href="{{ route('notifications.templates') }}" wire:navigate
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium"> class="inline-flex items-center gap-2 px-4 py-2.5 sm:py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium w-full sm:w-auto justify-center">
<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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg> <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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
{{ __('رجوع') }} {{ __('رجوع') }}
</a> </a>
</div> </div>
<form wire:submit="save" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <form wire:submit="save" class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
{{-- Event Type --}} {{-- Event Type --}}
<div> <div>
<label for="event_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع الحدث') }} <span class="text-red-500">*</span></label> <label for="event_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع الحدث') }} <span class="text-red-500">*</span></label>
<select wire:model.live="event_type" id="event_type" <select wire:model.live="event_type" id="event_type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="">{{ __('اختر نوع الحدث') }}</option> <option value="">{{ __('اختر نوع الحدث') }}</option>
@foreach($this->eventTypes as $value => $label) @foreach($this->eventTypes as $value => $label)
<option value="{{ $value }}">{{ $label }}</option> <option value="{{ $value }}">{{ $label }}</option>
...@@ -29,7 +29,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -29,7 +29,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="channel" class="block text-sm font-medium text-gray-700 mb-1">{{ __('القناة') }} <span class="text-red-500">*</span></label> <label for="channel" class="block text-sm font-medium text-gray-700 mb-1">{{ __('القناة') }} <span class="text-red-500">*</span></label>
<select wire:model="channel" id="channel" <select wire:model="channel" id="channel"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="">{{ __('اختر القناة') }}</option> <option value="">{{ __('اختر القناة') }}</option>
@foreach($channels as $ch) @foreach($channels as $ch)
<option value="{{ $ch->value }}">{{ $ch->label() }}</option> <option value="{{ $ch->value }}">{{ $ch->label() }}</option>
...@@ -39,26 +39,26 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -39,26 +39,26 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Subject (for email) --}} {{-- Subject (for email) --}}
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الموضوع') }} <span class="text-xs text-gray-400">({{ __('للبريد الإلكتروني') }})</span></label> <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الموضوع') }} <span class="text-xs text-gray-400">({{ __('للبريد الإلكتروني') }})</span></label>
<input type="text" wire:model="subject" id="subject" <input type="text" wire:model="subject" id="subject"
placeholder="{{ __('موضوع الإشعار (يدعم {{متغيرات}})') }}" placeholder="{{ __('موضوع الإشعار (يدعم {{متغيرات}})') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
@error('subject') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('subject') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
{{-- Body --}} {{-- Body --}}
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label for="body" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نص الإشعار') }} <span class="text-red-500">*</span></label> <label for="body" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نص الإشعار') }} <span class="text-red-500">*</span></label>
<textarea wire:model="body" id="body" rows="5" <textarea wire:model="body" id="body" rows="5"
placeholder="{{ __('نص الإشعار — استخدم {{اسم_المتغير}} للقيم الديناميكية') }}" placeholder="{{ __('نص الإشعار — استخدم {{اسم_المتغير}} للقيم الديناميكية') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"></textarea>
@error('body') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('body') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
{{-- Available Variables Hint --}} {{-- Available Variables Hint --}}
@if(!empty($this->availableVariables)) @if(!empty($this->availableVariables))
<div class="md:col-span-2"> <div class="sm:col-span-2">
<div class="p-3 bg-blue-50 border border-blue-200 rounded-lg"> <div class="p-3 bg-blue-50 border border-blue-200 rounded-lg">
<p class="text-xs font-medium text-blue-700 mb-1">{{ __('المتغيرات المتاحة لهذا الحدث:') }}</p> <p class="text-xs font-medium text-blue-700 mb-1">{{ __('المتغيرات المتاحة لهذا الحدث:') }}</p>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
...@@ -71,11 +71,11 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -71,11 +71,11 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
@endif @endif
{{-- Variables (comma-separated) --}} {{-- Variables (comma-separated) --}}
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label for="variables_text" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المتغيرات المطلوبة') }} <span class="text-xs text-gray-400">({{ __('مفصولة بفاصلة') }})</span></label> <label for="variables_text" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المتغيرات المطلوبة') }} <span class="text-xs text-gray-400">({{ __('مفصولة بفاصلة') }})</span></label>
<input type="text" wire:model="variables_text" id="variables_text" dir="ltr" <input type="text" wire:model="variables_text" id="variables_text" dir="ltr"
placeholder="participant_name, amount, due_date" placeholder="participant_name, amount, due_date"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
@error('variables_text') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('variables_text') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
<p class="mt-1 text-xs text-gray-500">{{ __('أسماء المتغيرات التي يجب توفيرها عند إرسال هذا الإشعار') }}</p> <p class="mt-1 text-xs text-gray-500">{{ __('أسماء المتغيرات التي يجب توفيرها عند إرسال هذا الإشعار') }}</p>
</div> </div>
...@@ -84,7 +84,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -84,7 +84,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="locale" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اللغة') }}</label> <label for="locale" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اللغة') }}</label>
<select wire:model="locale" id="locale" <select wire:model="locale" id="locale"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="ar">{{ __('العربية') }}</option> <option value="ar">{{ __('العربية') }}</option>
<option value="en">{{ __('English') }}</option> <option value="en">{{ __('English') }}</option>
</select> </select>
...@@ -92,7 +92,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -92,7 +92,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Active --}} {{-- Active --}}
<div class="flex items-center gap-3 pt-6"> <div class="min-h-[44px] flex items-center gap-3 pt-6">
<label class="relative inline-flex items-center cursor-pointer"> <label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" wire:model="is_active" class="sr-only peer"> <input type="checkbox" wire:model="is_active" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full rtl: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-blue-600"></div> <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full rtl: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-blue-600"></div>
...@@ -102,16 +102,16 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -102,16 +102,16 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Submit --}} {{-- Submit --}}
<div class="mt-6 flex items-center gap-3 pt-4 border-t border-gray-200"> <div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-4 border-t border-gray-200">
<a href="{{ route('notifications.templates') }}" wire:navigate
class="px-6 py-2.5 sm:py-2 text-gray-700 rounded-lg hover:bg-gray-100 text-sm font-medium text-center w-full sm:w-auto">
{{ __('إلغاء') }}
</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"> class="inline-flex items-center justify-center gap-2 px-6 py-2.5 sm:py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed w-full sm:w-auto">
<span wire:loading.remove wire:target="save">{{ __('حفظ') }}</span> <span wire:loading.remove wire:target="save">{{ __('حفظ') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<a href="{{ route('notifications.templates') }}" wire:navigate
class="px-6 py-2.5 text-gray-700 rounded-lg hover:bg-gray-100 text-sm font-medium">
{{ __('إلغاء') }}
</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/notifications/notification-template-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('قوالب الإشعارات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('قوالب الإشعارات') }}</h1>
<a href="{{ route('notifications.templates.create') }}" wire:navigate <a href="{{ route('notifications.templates.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 text-sm font-medium">
<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> <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>
......
resources/views/livewire/participants/bulk-status-change.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('تغيير حالة جماعي') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تغيير حالة جماعي') }}</h1>
<a href="{{ route('participants.list') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة') }}</a> <a href="{{ route('participants.list') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة') }}</a>
</div> </div>
...@@ -11,11 +11,11 @@ ...@@ -11,11 +11,11 @@
<div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">{{ session('error') }}</div> <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">{{ session('error') }}</div>
@endif @endif
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4">
<div class="flex flex-wrap items-end gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4 items-end">
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('الحالة الحالية') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('الحالة الحالية') }}</label>
<select wire:model.live="currentFilter" class="rounded-lg border-gray-300 text-sm"> <select wire:model.live="currentFilter" class="w-full rounded-lg border-gray-300 text-sm py-2.5">
<option value="active">{{ __('active') }}</option> <option value="active">{{ __('active') }}</option>
<option value="frozen">{{ __('frozen') }}</option> <option value="frozen">{{ __('frozen') }}</option>
<option value="suspended">{{ __('suspended') }}</option> <option value="suspended">{{ __('suspended') }}</option>
...@@ -24,62 +24,90 @@ ...@@ -24,62 +24,90 @@
</div> </div>
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('التغيير إلى') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('التغيير إلى') }}</label>
<select wire:model="targetStatus" class="rounded-lg border-gray-300 text-sm"> <select wire:model="targetStatus" class="w-full rounded-lg border-gray-300 text-sm py-2.5">
<option value="">{{ __('اختر') }}</option> <option value="">{{ __('اختر') }}</option>
@foreach($availableTargets as $target) @foreach($availableTargets as $target)
<option value="{{ $target }}">{{ __($target) }}</option> <option value="{{ $target }}">{{ __($target) }}</option>
@endforeach @endforeach
</select> </select>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2 col-span-2 md:col-span-1">
<button wire:click="selectAll" class="px-3 py-2 text-xs bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"> <button wire:click="selectAll" class="flex-1 md:flex-none px-3 py-2.5 text-xs bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
{{ __('تحديد الكل') }} {{ __('تحديد الكل') }}
</button> </button>
<button wire:click="deselectAll" class="px-3 py-2 text-xs bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"> <button wire:click="deselectAll" class="flex-1 md:flex-none px-3 py-2.5 text-xs bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
{{ __('إلغاء التحديد') }} {{ __('إلغاء التحديد') }}
</button> </button>
</div> </div>
<button wire:click="openConfirm" @disabled(empty($selectedIds) || empty($targetStatus)) <div class="col-span-2 md:col-span-3 lg:col-span-2">
class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"> <button wire:click="openConfirm" @disabled(empty($selectedIds) || empty($targetStatus))
{{ __('تنفيذ') }} ({{ count($selectedIds) }}) class="w-full sm:w-auto px-4 py-2.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50">
</button> {{ __('تنفيذ') }} ({{ count($selectedIds) }})
</button>
</div>
</div>
</div>
{{-- Desktop Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hidden md:block">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500 w-10"></th>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('الاسم') }}</th>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('الحالة') }}</th>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('تاريخ التسجيل') }}</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
@forelse($participants as $p)
<tr class="hover:bg-gray-50">
<td class="px-4 py-3">
<input type="checkbox" wire:model="selectedIds" value="{{ $p->id }}"
class="w-4 h-4 text-blue-600 rounded border-gray-300">
</td>
<td class="px-4 py-3 text-sm text-gray-800">{{ $p->full_name_ar }}</td>
<td class="px-4 py-3">
<span class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600">{{ __($p->status) }}</span>
</td>
<td class="px-4 py-3 text-sm text-gray-500" dir="ltr">{{ $p->created_at?->format('Y-m-d') }}</td>
</tr>
@empty
<tr><td colspan="4" class="px-4 py-8 text-center text-sm text-gray-500">{{ __('لا يوجد مشتركين') }}</td></tr>
@endforelse
</tbody>
</table>
</div> </div>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> {{-- Mobile Cards --}}
<table class="w-full"> <div class="md:hidden space-y-3">
<thead class="bg-gray-50"> @forelse($participants as $p)
<tr> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500 w-10"></th> <div class="flex items-center gap-3">
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('الاسم') }}</th> <input type="checkbox" wire:model="selectedIds" value="{{ $p->id }}"
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('الحالة') }}</th> class="w-4 h-4 text-blue-600 rounded border-gray-300 shrink-0">
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('تاريخ التسجيل') }}</th> <div class="flex-1 min-w-0">
</tr> <p class="text-sm font-medium text-gray-800 truncate">{{ $p->full_name_ar }}</p>
</thead> <div class="flex items-center gap-2 mt-1">
<tbody class="divide-y divide-gray-100">
@forelse($participants as $p)
<tr class="hover:bg-gray-50">
<td class="px-4 py-3">
<input type="checkbox" wire:model="selectedIds" value="{{ $p->id }}"
class="w-4 h-4 text-blue-600 rounded border-gray-300">
</td>
<td class="px-4 py-3 text-sm text-gray-800">{{ $p->full_name_ar }}</td>
<td class="px-4 py-3">
<span class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600">{{ __($p->status) }}</span> <span class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600">{{ __($p->status) }}</span>
</td> <span class="text-xs text-gray-500" dir="ltr">{{ $p->created_at?->format('Y-m-d') }}</span>
<td class="px-4 py-3 text-sm text-gray-500" dir="ltr">{{ $p->created_at?->format('Y-m-d') }}</td> </div>
</tr> </div>
@empty </div>
<tr><td colspan="4" class="px-4 py-8 text-center text-sm text-gray-500">{{ __('لا يوجد مشتركين') }}</td></tr> </div>
@endforelse @empty
</tbody> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center text-sm text-gray-500">
</table> {{ __('لا يوجد مشتركين') }}
</div>
@endforelse
</div> </div>
@if($confirmModal) @if($confirmModal)
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"> <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6"> <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-4 sm:p-6">
<h3 class="text-lg font-bold text-gray-800 mb-2">{{ __('تأكيد التغيير') }}</h3> <h3 class="text-base sm:text-lg font-bold text-gray-800 mb-2">{{ __('تأكيد التغيير') }}</h3>
<p class="text-sm text-gray-600 mb-4"> <p class="text-sm text-gray-600 mb-4">
{{ __('سيتم تغيير حالة :count مشترك من :from إلى :to', [ {{ __('سيتم تغيير حالة :count مشترك من :from إلى :to', [
'count' => count($selectedIds), 'count' => count($selectedIds),
...@@ -89,12 +117,12 @@ class="w-4 h-4 text-blue-600 rounded border-gray-300"> ...@@ -89,12 +117,12 @@ class="w-4 h-4 text-blue-600 rounded border-gray-300">
</p> </p>
<div class="mb-4"> <div class="mb-4">
<label class="block text-sm text-gray-600 mb-1">{{ __('السبب') }} *</label> <label class="block text-sm text-gray-600 mb-1">{{ __('السبب') }} *</label>
<textarea wire:model="reason" rows="2" class="w-full rounded-lg border-gray-300 text-sm"></textarea> <textarea wire:model="reason" rows="2" class="w-full rounded-lg border-gray-300 text-sm py-2.5"></textarea>
@error('reason') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror @error('reason') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
</div> </div>
<div class="flex gap-2 justify-end"> <div class="flex flex-col-reverse sm:flex-row gap-3 sm:justify-end">
<button wire:click="$set('confirmModal', false)" class="px-4 py-2 text-sm text-gray-600">{{ __('إلغاء') }}</button> <button wire:click="$set('confirmModal', false)" class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800">{{ __('إلغاء') }}</button>
<button wire:click="execute" class="px-4 py-2 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700">{{ __('تأكيد') }}</button> <button wire:click="execute" class="w-full sm:w-auto px-4 py-2.5 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700">{{ __('تأكيد') }}</button>
</div> </div>
</div> </div>
</div> </div>
......
resources/views/livewire/participants/enrollment-history.blade.php
View file @ 944501f1
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="p-4 border-b border-gray-200 flex items-center justify-between"> <div class="p-4 sm:p-6 border-b border-gray-200 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<h3 class="text-lg font-semibold text-gray-800">{{ __('سجل التسجيل') }} ({{ $totalCount }})</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('سجل التسجيل') }} ({{ $totalCount }})</h3>
</div> </div>
@if($enrollments->isEmpty()) @if($enrollments->isEmpty())
...@@ -8,18 +8,18 @@ ...@@ -8,18 +8,18 @@
@else @else
<div class="divide-y divide-gray-100"> <div class="divide-y divide-gray-100">
@foreach($enrollments as $enrollment) @foreach($enrollments as $enrollment)
<div class="p-4 hover:bg-gray-50"> <div class="p-3 sm:p-4 hover:bg-gray-50">
<div class="flex items-center justify-between"> <div class="flex items-start sm:items-center justify-between gap-2">
<div> <div class="min-w-0 flex-1">
<p class="text-sm font-medium text-gray-800"> <p class="text-sm font-medium text-gray-800 truncate">
{{ $enrollment->trainingGroup?->program?->name_ar ?? '-' }} {{ $enrollment->trainingGroup?->program?->name_ar ?? '-' }}
</p> </p>
<p class="text-xs text-gray-500 mt-1"> <p class="text-xs text-gray-500 mt-1">
{{ $enrollment->trainingGroup?->name_ar ?? '-' }} {{ $enrollment->trainingGroup?->name_ar ?? '-' }}
&bull; {{ $enrollment->created_at->format('Y-m-d') }} &bull; <span dir="ltr">{{ $enrollment->created_at->format('Y-m-d') }}</span>
</p> </p>
</div> </div>
<span class="px-2 py-1 text-xs rounded-full font-medium <span class="px-2 py-1 text-xs rounded-full font-medium shrink-0
@switch($enrollment->status) @switch($enrollment->status)
@case('active') bg-green-100 text-green-700 @break @case('active') bg-green-100 text-green-700 @break
@case('completed') bg-blue-100 text-blue-700 @break @case('completed') bg-blue-100 text-blue-700 @break
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
@if($totalCount > 5) @if($totalCount > 5)
<div class="p-3 border-t border-gray-200 text-center"> <div class="p-3 border-t border-gray-200 text-center">
<button wire:click="toggleShowAll" class="text-sm text-blue-600 hover:text-blue-800"> <button wire:click="toggleShowAll" class="text-sm text-blue-600 hover:text-blue-800 py-2">
{{ $showAll ? __('عرض أقل') : __('عرض الكل') . " ({$totalCount})" }} {{ $showAll ? __('عرض أقل') : __('عرض الكل') . " ({$totalCount})" }}
</button> </button>
</div> </div>
......
resources/views/livewire/participants/freeze-participant.blade.php
View file @ 944501f1
<div> <div>
@if($participant->status === 'active') @if($participant->status === 'active')
<button wire:click="openFreeze" class="px-3 py-1.5 text-xs bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200"> <button wire:click="openFreeze" class="px-3 py-2.5 text-xs bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200">
{{ __('تجميد') }} {{ __('تجميد') }}
</button> </button>
@elseif($participant->status === 'frozen') @elseif($participant->status === 'frozen')
<button wire:click="openUnfreeze" class="px-3 py-1.5 text-xs bg-green-100 text-green-700 rounded-lg hover:bg-green-200"> <button wire:click="openUnfreeze" class="px-3 py-2.5 text-xs bg-green-100 text-green-700 rounded-lg hover:bg-green-200">
{{ __('إلغاء التجميد') }} {{ __('إلغاء التجميد') }}
</button> </button>
@endif @endif
@if($showModal) @if($showModal)
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" wire:click.self="$set('showModal', false)"> <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-6"> <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-4 sm:p-6">
<h3 class="text-lg font-bold text-gray-800 mb-4"> <h3 class="text-base sm:text-lg font-bold text-gray-800 mb-4">
{{ $action === 'freeze' ? __('تجميد المشترك') : __('إلغاء تجميد المشترك') }} {{ $action === 'freeze' ? __('تجميد المشترك') : __('إلغاء تجميد المشترك') }}
</h3> </h3>
<p class="text-sm text-gray-600 mb-4"> <p class="text-sm text-gray-600 mb-4">
...@@ -23,16 +23,16 @@ ...@@ -23,16 +23,16 @@
</p> </p>
<div class="mb-4"> <div class="mb-4">
<label class="block text-sm text-gray-600 mb-1">{{ __('السبب') }} *</label> <label class="block text-sm text-gray-600 mb-1">{{ __('السبب') }} *</label>
<textarea wire:model="reason" rows="3" class="w-full rounded-lg border-gray-300 text-sm" <textarea wire:model="reason" rows="3" class="w-full rounded-lg border-gray-300 text-sm py-2.5"
placeholder="{{ __('أدخل سبب الإجراء') }}"></textarea> placeholder="{{ __('أدخل سبب الإجراء') }}"></textarea>
@error('reason') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror @error('reason') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
</div> </div>
<div class="flex gap-2 justify-end"> <div class="flex flex-col-reverse sm:flex-row gap-3 sm:justify-end">
<button wire:click="$set('showModal', false)" class="px-4 py-2 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">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</button> </button>
<button wire:click="confirm" wire:loading.attr="disabled" <button wire:click="confirm" wire:loading.attr="disabled"
class="px-4 py-2 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' : 'bg-green-600 hover:bg-green-700' }} disabled:opacity-50">
<span wire:loading.remove wire:target="confirm">{{ __('تأكيد') }}</span> <span wire:loading.remove wire:target="confirm">{{ __('تأكيد') }}</span>
<span wire:loading wire:target="confirm">{{ __('جارٍ...') }}</span> <span wire:loading wire:target="confirm">{{ __('جارٍ...') }}</span>
</button> </button>
......
resources/views/livewire/participants/participant-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800"> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
{{ $editing ? __('تعديل بيانات المشترك') : __('تسجيل مشترك جديد') }} {{ $editing ? __('تعديل بيانات المشترك') : __('تسجيل مشترك جديد') }}
</h1> </h1>
<a href="{{ route('participants.list') }}" wire:navigate <a href="{{ route('participants.list') }}" wire:navigate
...@@ -20,14 +20,14 @@ class="text-gray-600 hover:text-gray-800 text-sm"> ...@@ -20,14 +20,14 @@ class="text-gray-600 hover:text-gray-800 text-sm">
{{-- Section 1: Person Info (only for new participants without existing person) --}} {{-- Section 1: Person Info (only for new participants without existing person) --}}
@if(!$editing && !$person_id) @if(!$editing && !$person_id)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الشخصية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الشخصية') }}</h2>
{{-- Link existing person option --}} {{-- Link existing person option --}}
@if($existingPeople->isNotEmpty()) @if($existingPeople->isNotEmpty())
<div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-100"> <div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-100">
<label class="block text-sm font-medium text-gray-700 mb-2">{{ __('أو اختر شخص موجود بالفعل') }}</label> <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('أو اختر شخص موجود بالفعل') }}</label>
<select wire:model.live="person_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="person_id" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('— تسجيل شخص جديد —') }}</option> <option value="">{{ __('— تسجيل شخص جديد —') }}</option>
@foreach($existingPeople as $person) @foreach($existingPeople as $person)
<option value="{{ $person->id }}"> <option value="{{ $person->id }}">
...@@ -39,34 +39,34 @@ class="text-gray-600 hover:text-gray-800 text-sm"> ...@@ -39,34 +39,34 @@ class="text-gray-600 hover:text-gray-800 text-sm">
</div> </div>
@endif @endif
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} <span class="text-red-500">*</span></label>
<input type="text" wire:model="name_ar" <input type="text" wire:model="name_ar"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('name_ar') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }} <span class="text-red-500">*</span></label>
<input type="text" wire:model="name" dir="ltr" <input type="text" wire:model="name" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
@error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
<input type="text" wire:model="national_id" dir="ltr" <input type="text" wire:model="national_id" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label>
<input type="date" wire:model="date_of_birth" dir="ltr" <input type="date" wire:model="date_of_birth" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('date_of_birth') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('date_of_birth') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} <span class="text-red-500">*</span></label>
<select wire:model="gender" <select wire:model="gender"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('gender') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('gender') border-red-500 @enderror">
<option value="male">{{ __('ذكر') }}</option> <option value="male">{{ __('ذكر') }}</option>
<option value="female">{{ __('أنثى') }}</option> <option value="female">{{ __('أنثى') }}</option>
</select> </select>
...@@ -75,21 +75,21 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -75,21 +75,21 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label>
<input type="text" wire:model="phone" dir="ltr" <input type="text" wire:model="phone" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label>
<input type="email" wire:model="email" dir="ltr" <input type="email" wire:model="email" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
</div> </div>
@elseif(!$editing && $person_id) @elseif(!$editing && $person_id)
{{-- Show selected person info --}} {{-- Show selected person info --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<h2 class="text-lg font-semibold text-gray-800">{{ __('الشخص المحدد') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('الشخص المحدد') }}</h2>
<button type="button" wire:click="$set('person_id', null)" class="text-sm text-red-600 hover:text-red-800"> <button type="button" wire:click="$set('person_id', null)" class="text-sm text-red-600 hover:text-red-800">
{{ __('تغيير') }} {{ __('تغيير') }}
</button> </button>
...@@ -99,14 +99,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -99,14 +99,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
@endif @endif
{{-- Section 2: Participant Info --}} {{-- Section 2: Participant Info --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('بيانات الاشتراك') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('بيانات الاشتراك') }}</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مصدر التسجيل') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مصدر التسجيل') }} <span class="text-red-500">*</span></label>
<select wire:model="registration_source" <select wire:model="registration_source"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('registration_source') border-red-500 @enderror" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('registration_source') border-red-500 @enderror"
@if($editing) disabled @endif> @if($editing) disabled @endif>
<option value="walk_in">{{ __('حضور مباشر') }}</option> <option value="walk_in">{{ __('حضور مباشر') }}</option>
<option value="online">{{ __('عبر الإنترنت') }}</option> <option value="online">{{ __('عبر الإنترنت') }}</option>
...@@ -121,7 +121,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -121,7 +121,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('النشاط الأساسي') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('النشاط الأساسي') }}</label>
<select wire:model="primary_activity_id" <select wire:model="primary_activity_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('— اختر نشاط —') }}</option> <option value="">{{ __('— اختر نشاط —') }}</option>
@foreach($activities as $act) @foreach($activities as $act)
<option value="{{ $act->id }}">{{ $act->name_ar }}</option> <option value="{{ $act->id }}">{{ $act->name_ar }}</option>
...@@ -131,7 +131,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -131,7 +131,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المستوى') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المستوى') }}</label>
<select wire:model="skill_level" <select wire:model="skill_level"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('— غير محدد —') }}</option> <option value="">{{ __('— غير محدد —') }}</option>
<option value="beginner">{{ __('مبتدئ') }}</option> <option value="beginner">{{ __('مبتدئ') }}</option>
<option value="intermediate">{{ __('متوسط') }}</option> <option value="intermediate">{{ __('متوسط') }}</option>
...@@ -142,7 +142,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -142,7 +142,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العضوية') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العضوية') }} <span class="text-red-500">*</span></label>
<select wire:model.live="membership_type" <select wire:model.live="membership_type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('— غير محدد —') }}</option> <option value="">{{ __('— غير محدد —') }}</option>
<option value="member">{{ __('عضو') }}</option> <option value="member">{{ __('عضو') }}</option>
<option value="non_member">{{ __('غير عضو') }}</option> <option value="non_member">{{ __('غير عضو') }}</option>
...@@ -153,7 +153,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -153,7 +153,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم عضوية النادي') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم عضوية النادي') }} <span class="text-red-500">*</span></label>
<input type="text" wire:model="membership_id" dir="ltr" <input type="text" wire:model="membership_id" dir="ltr"
placeholder="{{ __('أدخل رقم العضوية') }}" placeholder="{{ __('أدخل رقم العضوية') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('membership_id') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('membership_id') border-red-500 @enderror">
@error('membership_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('membership_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
@endif @endif
...@@ -161,42 +161,42 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -161,42 +161,42 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Section 3: Physical Attributes --}} {{-- Section 3: Physical Attributes --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الجسدية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الجسدية') }}</h2>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الطول (سم)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الطول (سم)') }}</label>
<input type="number" wire:model="height_cm" dir="ltr" step="0.1" min="50" max="250" <input type="number" wire:model="height_cm" dir="ltr" step="0.1" min="50" max="250"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('height_cm') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('height_cm') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوزن (كجم)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوزن (كجم)') }}</label>
<input type="number" wire:model="weight_kg" dir="ltr" step="0.1" min="10" max="200" <input type="number" wire:model="weight_kg" dir="ltr" step="0.1" min="10" max="200"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('weight_kg') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('weight_kg') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم القميص') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم القميص') }}</label>
<input type="number" wire:model="jersey_number" dir="ltr" min="0" max="999" <input type="number" wire:model="jersey_number" dir="ltr" min="0" max="999"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('jersey_number') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('jersey_number') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مقاس القميص') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مقاس القميص') }}</label>
<input type="text" wire:model="jersey_size" dir="ltr" placeholder="XL" <input type="text" wire:model="jersey_size" dir="ltr" placeholder="XL"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مقاس الحذاء') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مقاس الحذاء') }}</label>
<input type="text" wire:model="shoe_size" dir="ltr" placeholder="42" <input type="text" wire:model="shoe_size" dir="ltr" placeholder="42"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اليد المسيطرة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اليد المسيطرة') }}</label>
<select wire:model="dominant_hand" <select wire:model="dominant_hand"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('— غير محدد —') }}</option> <option value="">{{ __('— غير محدد —') }}</option>
<option value="right">{{ __('يمنى') }}</option> <option value="right">{{ __('يمنى') }}</option>
<option value="left">{{ __('يسرى') }}</option> <option value="left">{{ __('يسرى') }}</option>
...@@ -206,7 +206,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -206,7 +206,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('القدم المسيطرة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('القدم المسيطرة') }}</label>
<select wire:model="dominant_foot" <select wire:model="dominant_foot"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('— غير محدد —') }}</option> <option value="">{{ __('— غير محدد —') }}</option>
<option value="right">{{ __('يمنى') }}</option> <option value="right">{{ __('يمنى') }}</option>
<option value="left">{{ __('يسرى') }}</option> <option value="left">{{ __('يسرى') }}</option>
...@@ -217,11 +217,11 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -217,11 +217,11 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Section 4: Medical --}} {{-- Section 4: Medical --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الطبية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الطبية') }}</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div class="flex items-center gap-3"> <div class="min-h-[44px] flex items-center gap-3">
<input type="checkbox" wire:model="medical_clearance" id="medical_clearance" <input type="checkbox" wire:model="medical_clearance" id="medical_clearance"
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<label for="medical_clearance" class="text-sm font-medium text-gray-700">{{ __('موافقة طبية') }}</label> <label for="medical_clearance" class="text-sm font-medium text-gray-700">{{ __('موافقة طبية') }}</label>
...@@ -229,20 +229,20 @@ class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> ...@@ -229,20 +229,20 @@ class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ انتهاء الموافقة الطبية') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ انتهاء الموافقة الطبية') }}</label>
<input type="date" wire:model="medical_clearance_expires" dir="ltr" <input type="date" wire:model="medical_clearance_expires" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('medical_clearance_expires') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('medical_clearance_expires') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
</div> </div>
{{-- Section 5: Guardian Assignment --}} {{-- Section 5: Guardian Assignment --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('ولي الأمر') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('ولي الأمر') }}</h2>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ولي الأمر الأساسي') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ولي الأمر الأساسي') }}</label>
<select wire:model="primary_guardian_id" <select wire:model="primary_guardian_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('— بدون ولي أمر —') }}</option> <option value="">{{ __('— بدون ولي أمر —') }}</option>
@foreach($guardians as $guardian) @foreach($guardians as $guardian)
<option value="{{ $guardian->id }}"> <option value="{{ $guardian->id }}">
...@@ -255,24 +255,24 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -255,24 +255,24 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Section 6: Notes --}} {{-- Section 6: Notes --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('ملاحظات') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('ملاحظات') }}</h2>
<textarea wire:model="notes" rows="3" <textarea wire:model="notes" rows="3"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="{{ __('ملاحظات إضافية...') }}"></textarea> placeholder="{{ __('ملاحظات إضافية...') }}"></textarea>
</div> </div>
{{-- Submit --}} {{-- Submit --}}
<div class="flex items-center justify-end gap-3"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('participants.list') }}" wire:navigate <a href="{{ route('participants.list') }}" wire:navigate
class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm font-medium"> class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm font-medium">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</a> </a>
<button type="submit" <button type="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="save" wire:target="save"
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
<span wire:loading.remove wire:target="save"> <span wire:loading.remove wire:target="save">
{{ $editing ? __('حفظ التعديلات') : __('تسجيل المشترك') }} {{ $editing ? __('حفظ التعديلات') : __('تسجيل المشترك') }}
</span> </span>
......
resources/views/livewire/participants/participant-import.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('استيراد مشتركين من CSV') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('استيراد مشتركين من CSV') }}</h1>
<a href="{{ route('participants.list') }}" wire:navigate <a href="{{ route('participants.list') }}" wire:navigate
class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للقائمة') }}</a> class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للقائمة') }}</a>
</div> </div>
......
resources/views/livewire/participants/participant-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <!-- Header -->
<h1 class="text-2xl font-bold text-gray-800">{{ __('المشتركين') }}</h1> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('المشتركين') }}</h1>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<a href="{{ route('export.participants', ['status' => $status ?? '']) }}" <a href="{{ route('export.participants', ['status' => $status ?? '']) }}"
class="inline-flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium"> class="inline-flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-xs sm: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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> <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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
{{ __('تصدير CSV') }} <span class="hidden sm:inline">{{ __('تصدير CSV') }}</span>
</a> </a>
@can('participants.create') @can('participants.create')
<a href="{{ route('participants.create') }}" wire:navigate <a href="{{ route('participants.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-3 sm:px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-xs sm: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> <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>
{{ __('تسجيل مشترك') }} {{ __('تسجيل مشترك') }}
</a> </a>
...@@ -19,32 +20,32 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -19,32 +20,32 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
{{-- Flash Messages --}} {{-- Flash Messages --}}
@if(session('success')) @if(session('success'))
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm"> <div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
{{ session('success') }} {{ session('success') }}
</div> </div>
@endif @endif
{{-- Filters --}} {{-- Filters --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
<div class="grid grid-cols-1 sm:grid-cols-5 gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
<div class="sm:col-span-2"> <div class="col-span-2 md:col-span-1 lg:col-span-2">
<input type="text" wire:model.live.debounce.300ms="search" <input type="text" wire:model.live.debounce.300ms="search"
placeholder="{{ __('بحث بالاسم، رقم المشترك، أو الهاتف...') }}" placeholder="{{ __('بحث بالاسم، رقم المشترك، أو الهاتف...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
</div> </div>
<select wire:model.live="status" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="status" class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="">{{ __('كل الحالات') }}</option> <option value="">{{ __('كل الحالات') }}</option>
@foreach($statusOptions as $value => $label) @foreach($statusOptions as $value => $label)
<option value="{{ $value }}">{{ __($label) }}</option> <option value="{{ $value }}">{{ __($label) }}</option>
@endforeach @endforeach
</select> </select>
<select wire:model.live="activity" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="activity" class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="">{{ __('كل الأنشطة') }}</option> <option value="">{{ __('كل الأنشطة') }}</option>
@foreach($activities as $act) @foreach($activities as $act)
<option value="{{ $act->id }}">{{ $act->name_ar }}</option> <option value="{{ $act->id }}">{{ $act->name_ar }}</option>
@endforeach @endforeach
</select> </select>
<select wire:model.live="skillLevel" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="skillLevel" class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="">{{ __('كل المستويات') }}</option> <option value="">{{ __('كل المستويات') }}</option>
@foreach($skillLevelOptions as $value => $label) @foreach($skillLevelOptions as $value => $label)
<option value="{{ $value }}">{{ __($label) }}</option> <option value="{{ $value }}">{{ __($label) }}</option>
...@@ -53,93 +54,78 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -53,93 +54,78 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
</div> </div>
{{-- Table --}} {{-- Desktop Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hidden md:block">
<div wire:loading.class="opacity-50 pointer-events-none"> <div wire:loading.class="opacity-50 pointer-events-none">
<table class="w-full text-sm"> <div class="overflow-x-auto">
<thead class="bg-gray-50 border-b border-gray-200"> <table class="w-full text-sm">
<tr> <thead class="bg-gray-50 border-b border-gray-200">
<th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('رقم المشترك') }}</th> <tr>
<th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('الاسم') }}</th> <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('رقم المشترك') }}</th>
<th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('النشاط') }}</th> <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('الاسم') }}</th>
<th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الحالة') }}</th> <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('النشاط') }}</th>
<th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('تاريخ التسجيل') }}</th> <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الحالة') }}</th>
<th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('إجراءات') }}</th> <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('تاريخ التسجيل') }}</th>
</tr> <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('إجراءات') }}</th>
</thead> </tr>
<tbody class="divide-y divide-gray-100"> </thead>
@forelse($participants as $participant) <tbody class="divide-y divide-gray-100">
<tr class="hover:bg-gray-50"> @forelse($participants as $participant)
<td class="px-4 py-3 font-mono text-gray-600" dir="ltr"> <tr class="hover:bg-gray-50">
{{ $participant->participant_number }} <td class="px-4 py-3 font-mono text-gray-600" dir="ltr">
</td> {{ $participant->participant_number }}
<td class="px-4 py-3"> </td>
<span class="font-medium text-gray-800"> <td class="px-4 py-3">
{{ $participant->person?->name_ar }} <span class="font-medium text-gray-800">{{ $participant->person?->name_ar }}</span>
</span> @if($participant->person?->name)
@if($participant->person?->name) <p class="text-xs text-gray-500" dir="ltr">{{ $participant->person->name }}</p>
<p class="text-xs text-gray-500" dir="ltr"> @endif
{{ $participant->person->name }} </td>
</p> <td class="px-4 py-3 text-gray-600">{{ $participant->primaryActivity?->name_ar ?? '—' }}</td>
@endif <td class="px-4 py-3 text-center">
</td> @php
<td class="px-4 py-3 text-gray-600"> $statusValue = $participant->status->value ?? $participant->status;
{{ $participant->primaryActivity?->name_ar ?? '—' }} $statusColors = [
</td> 'registered' => 'blue', 'active' => 'green', 'frozen' => 'cyan',
<td class="px-4 py-3 text-center"> 'suspended' => 'red', 'inactive' => 'gray', 'graduated' => 'purple',
@php 'transferred' => 'amber', 'withdrawn' => 'orange', 'blacklisted' => 'rose',
$statusValue = $participant->status->value ?? $participant->status; ];
$statusColors = [ $color = $statusColors[$statusValue] ?? 'gray';
'registered' => 'blue', @endphp
'active' => 'green', <span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full">
'frozen' => 'cyan', {{ __($statusOptions[$statusValue] ?? $statusValue) }}
'suspended' => 'red', </span>
'inactive' => 'gray', </td>
'graduated' => 'purple', <td class="px-4 py-3 text-center text-gray-600" dir="ltr">{{ $participant->registration_date?->format('Y-m-d') ?? '—' }}</td>
'transferred' => 'amber', <td class="px-4 py-3 text-center">
'withdrawn' => 'orange', <div class="flex items-center justify-center gap-3">
'blacklisted' => 'rose', @can('participants.view')
]; <a href="{{ route('participants.show', $participant) }}" wire:navigate class="text-blue-600 hover:text-blue-800 text-sm font-medium">{{ __('عرض') }}</a>
$color = $statusColors[$statusValue] ?? 'gray'; @endcan
@endphp @can('participants.update')
<span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full"> <a href="{{ route('participants.edit', $participant) }}" wire:navigate class="text-green-600 hover:text-green-800 text-sm font-medium">{{ __('تعديل') }}</a>
{{ __($statusOptions[$statusValue] ?? $statusValue) }} @endcan
</span> </div>
</td> </td>
<td class="px-4 py-3 text-center text-gray-600" dir="ltr"> </tr>
{{ $participant->registration_date?->format('Y-m-d') ?? '—' }} @empty
</td> <tr>
<td class="px-4 py-3 text-center space-x-2 space-x-reverse"> <td colspan="6" class="px-4 py-12 text-center">
@can('participants.view') <div class="flex flex-col items-center">
<a href="{{ route('participants.show', $participant) }}" wire:navigate <svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
class="text-blue-600 hover:text-blue-800 text-sm">{{ __('عرض') }}</a> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
@endcan </svg>
@can('participants.update') <p class="text-gray-500 text-sm">{{ __('لا يوجد مشتركين') }}</p>
<a href="{{ route('participants.edit', $participant) }}" wire:navigate @can('participants.create')
class="text-green-600 hover:text-green-800 text-sm">{{ __('تعديل') }}</a> <a href="{{ route('participants.create') }}" wire:navigate class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">{{ __('تسجيل أول مشترك') }}</a>
@endcan @endcan
</td> </div>
</tr> </td>
@empty </tr>
<tr> @endforelse
<td colspan="6" class="px-4 py-12 text-center"> </tbody>
<div class="flex flex-col items-center"> </table>
<svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> </div>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
<p class="text-gray-500 text-sm">{{ __('لا يوجد مشتركين') }}</p>
@can('participants.create')
<a href="{{ route('participants.create') }}" wire:navigate
class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
{{ __('تسجيل أول مشترك') }}
</a>
@endcan
</div>
</td>
</tr>
@endforelse
</tbody>
</table>
</div> </div>
@if($participants->hasPages()) @if($participants->hasPages())
...@@ -148,4 +134,70 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium"> ...@@ -148,4 +134,70 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
</div> </div>
@endif @endif
</div> </div>
{{-- Mobile Card List --}}
<div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
@forelse($participants as $participant)
@php
$statusValue = $participant->status->value ?? $participant->status;
$statusColors = [
'registered' => 'blue', 'active' => 'green', 'frozen' => 'cyan',
'suspended' => 'red', 'inactive' => 'gray', 'graduated' => 'purple',
'transferred' => 'amber', 'withdrawn' => 'orange', 'blacklisted' => 'rose',
];
$color = $statusColors[$statusValue] ?? 'gray';
@endphp
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
<div class="flex items-start justify-between gap-3">
<div class="flex-1 min-w-0">
<p class="font-semibold text-gray-800 truncate">{{ $participant->person?->name_ar }}</p>
<p class="text-xs text-gray-500 font-mono mt-0.5" dir="ltr">{{ $participant->participant_number }}</p>
</div>
<span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full whitespace-nowrap">
{{ __($statusOptions[$statusValue] ?? $statusValue) }}
</span>
</div>
<div class="mt-3 flex items-center gap-4 text-xs text-gray-500">
@if($participant->primaryActivity?->name_ar)
<span class="truncate">{{ $participant->primaryActivity->name_ar }}</span>
@endif
@if($participant->registration_date)
<span dir="ltr" class="whitespace-nowrap">{{ $participant->registration_date->format('Y-m-d') }}</span>
@endif
</div>
<div class="mt-3 pt-3 border-t border-gray-100 flex items-center gap-4">
@can('participants.view')
<a href="{{ route('participants.show', $participant) }}" wire:navigate
class="flex-1 text-center py-2 text-sm font-medium text-blue-600 hover:text-blue-800 bg-blue-50 rounded-lg transition-colors">
{{ __('عرض') }}
</a>
@endcan
@can('participants.update')
<a href="{{ route('participants.edit', $participant) }}" wire:navigate
class="flex-1 text-center py-2 text-sm font-medium text-green-600 hover:text-green-800 bg-green-50 rounded-lg transition-colors">
{{ __('تعديل') }}
</a>
@endcan
</div>
</div>
@empty
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
<svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
<p class="text-gray-500 text-sm">{{ __('لا يوجد مشتركين') }}</p>
@can('participants.create')
<a href="{{ route('participants.create') }}" wire:navigate class="mt-2 inline-block text-blue-600 hover:text-blue-800 text-sm font-medium">{{ __('تسجيل أول مشترك') }}</a>
@endcan
</div>
@endforelse
@if($participants->hasPages())
<div class="mt-4">
{{ $participants->links() }}
</div>
@endif
</div>
</div> </div>
resources/views/livewire/participants/participant-show.blade.php
View file @ 944501f1
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
@endif @endif
{{-- Header --}} {{-- Header --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<div class="flex items-start justify-between"> <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center"> <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center">
<span class="text-xl font-bold text-blue-700"> <span class="text-xl font-bold text-blue-700">
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 self-start sm:self-auto">
@can('participants.update') @can('participants.update')
<a href="{{ route('participants.edit', $participant) }}" wire:navigate <a href="{{ route('participants.edit', $participant) }}" wire:navigate
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium"> class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium">
...@@ -68,7 +68,7 @@ class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm"> ...@@ -68,7 +68,7 @@ class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
</div> </div>
{{-- Quick Stats Bar --}} {{-- Quick Stats Bar --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> <div class="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
{{-- Attendance Rate --}} {{-- Attendance Rate --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
...@@ -137,7 +137,7 @@ class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm"> ...@@ -137,7 +137,7 @@ class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
</div> </div>
{{-- Quick Action Buttons --}} {{-- Quick Action Buttons --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4 sm:mb-6">
<div class="flex flex-wrap items-center gap-3"> <div class="flex flex-wrap items-center gap-3">
<span class="text-sm font-medium text-gray-600 me-2">{{ __('إجراءات سريعة') }}:</span> <span class="text-sm font-medium text-gray-600 me-2">{{ __('إجراءات سريعة') }}:</span>
...@@ -190,7 +190,7 @@ class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-blue- ...@@ -190,7 +190,7 @@ class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-blue-
{{-- Tabs --}} {{-- Tabs --}}
<div x-data="{ activeTab: @entangle('activeTab') }"> <div x-data="{ activeTab: @entangle('activeTab') }">
<div class="border-b border-gray-200 mb-6"> <div class="border-b border-gray-200 mb-6">
<nav class="flex gap-6 -mb-px overflow-x-auto"> <nav class="flex gap-2 sm:gap-6 -mb-px overflow-x-auto pb-1">
<button @click="activeTab = 'info'" <button @click="activeTab = 'info'"
:class="activeTab === 'info' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'" :class="activeTab === 'info' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap"> class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
...@@ -228,7 +228,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap"> ...@@ -228,7 +228,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
<div x-show="activeTab === 'info'" x-cloak> <div x-show="activeTab === 'info'" x-cloak>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
{{-- Personal Info Card --}} {{-- Personal Info Card --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('البيانات الشخصية') }}</h3> <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('البيانات الشخصية') }}</h3>
<dl class="space-y-3"> <dl class="space-y-3">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -259,7 +259,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap"> ...@@ -259,7 +259,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
</div> </div>
{{-- Participant Info Card --}} {{-- Participant Info Card --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('بيانات الاشتراك') }}</h3> <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('بيانات الاشتراك') }}</h3>
<dl class="space-y-3"> <dl class="space-y-3">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -317,7 +317,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap"> ...@@ -317,7 +317,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
</div> </div>
{{-- Physical Attributes Card --}} {{-- Physical Attributes Card --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('البيانات الجسدية') }}</h3> <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('البيانات الجسدية') }}</h3>
<dl class="space-y-3"> <dl class="space-y-3">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -359,7 +359,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap"> ...@@ -359,7 +359,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
{{-- Notes Card --}} {{-- Notes Card --}}
@if($participant->notes) @if($participant->notes)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('ملاحظات') }}</h3> <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('ملاحظات') }}</h3>
<p class="text-sm text-gray-600 whitespace-pre-line">{{ $participant->notes }}</p> <p class="text-sm text-gray-600 whitespace-pre-line">{{ $participant->notes }}</p>
</div> </div>
...@@ -369,7 +369,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap"> ...@@ -369,7 +369,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
{{-- Guardians Tab --}} {{-- Guardians Tab --}}
<div x-show="activeTab === 'guardians'" x-cloak> <div x-show="activeTab === 'guardians'" x-cloak>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden overflow-x-auto">
@if($participant->guardians->isNotEmpty()) @if($participant->guardians->isNotEmpty())
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
...@@ -434,7 +434,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap"> ...@@ -434,7 +434,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
{{-- Attendance Tab --}} {{-- Attendance Tab --}}
<div x-show="activeTab === 'attendance'" x-cloak> <div x-show="activeTab === 'attendance'" x-cloak>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('ملخص الحضور') }}</h3> <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('ملخص الحضور') }}</h3>
@if($totalSessions > 0) @if($totalSessions > 0)
...@@ -562,7 +562,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap"> ...@@ -562,7 +562,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
{{-- Payments Tab --}} {{-- Payments Tab --}}
<div x-show="activeTab === 'payments'" x-cloak> <div x-show="activeTab === 'payments'" x-cloak>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="p-4 border-b border-gray-100 flex items-center justify-between"> <div class="p-4 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<h3 class="text-base font-semibold text-gray-800">{{ __('سجل المدفوعات') }}</h3> <h3 class="text-base font-semibold text-gray-800">{{ __('سجل المدفوعات') }}</h3>
@if($wallet) @if($wallet)
<div class="flex items-center gap-2 px-3 py-1.5 bg-amber-50 rounded-lg"> <div class="flex items-center gap-2 px-3 py-1.5 bg-amber-50 rounded-lg">
...@@ -641,7 +641,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap"> ...@@ -641,7 +641,7 @@ class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
{{-- Status Tab --}} {{-- Status Tab --}}
<div x-show="activeTab === 'status'" x-cloak> <div x-show="activeTab === 'status'" x-cloak>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('تغيير الحالة') }}</h3> <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('تغيير الحالة') }}</h3>
<div class="mb-4"> <div class="mb-4">
......
resources/views/livewire/participants/status-timeline.blade.php
View file @ 944501f1
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-sm font-semibold text-gray-700 mb-4">{{ __('سجل الحالات') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('سجل الحالات') }}</h3>
@if($history->isEmpty()) @if($history->isEmpty())
<p class="text-sm text-gray-400 text-center py-4">{{ __('لا يوجد تغييرات') }}</p> <p class="text-sm text-gray-400 text-center py-4">{{ __('لا يوجد تغييرات') }}</p>
...@@ -7,9 +7,9 @@ ...@@ -7,9 +7,9 @@
<div class="relative"> <div class="relative">
<div class="absolute top-0 bottom-0 start-3 w-0.5 bg-gray-200"></div> <div class="absolute top-0 bottom-0 start-3 w-0.5 bg-gray-200"></div>
<div class="space-y-4"> <div class="space-y-3 sm:space-y-4">
@foreach($history as $item) @foreach($history as $item)
<div class="flex items-start gap-3 relative"> <div class="flex items-start gap-2 sm:gap-3 relative">
<div class="w-6 h-6 rounded-full border-2 border-white shadow-sm z-10 shrink-0 <div class="w-6 h-6 rounded-full border-2 border-white shadow-sm z-10 shrink-0
@switch($item['to']) @switch($item['to'])
@case('active') bg-green-500 @break @case('active') bg-green-500 @break
...@@ -22,14 +22,14 @@ ...@@ -22,14 +22,14 @@
@endswitch @endswitch
"></div> "></div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-2 flex-wrap"> <div class="flex items-center gap-1.5 sm:gap-2 flex-wrap">
@if($item['from']) @if($item['from'])
<span class="text-xs text-gray-500">{{ __($item['from']) }}</span> <span class="text-xs text-gray-500">{{ __($item['from']) }}</span>
<svg class="w-3 h-3 text-gray-400 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg> <svg class="w-3 h-3 text-gray-400 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
@endif @endif
<span class="text-xs font-medium text-gray-800">{{ __($item['to']) }}</span> <span class="text-xs font-medium text-gray-800">{{ __($item['to']) }}</span>
</div> </div>
<p class="text-[11px] text-gray-400 mt-0.5"> <p class="text-[11px] text-gray-400 mt-0.5 truncate">
{{ $item['user'] }} &bull; {{ \Carbon\Carbon::parse($item['date'])->diffForHumans() }} {{ $item['user'] }} &bull; {{ \Carbon\Carbon::parse($item['date'])->diffForHumans() }}
</p> </p>
</div> </div>
......
resources/views/livewire/people/person-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل بيانات الشخص') : __('إضافة شخص جديد') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل بيانات الشخص') : __('إضافة شخص جديد') }}</h1>
<a href="{{ route('people.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة للقائمة') }}</a> <a href="{{ route('people.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة للقائمة') }}</a>
</div> </div>
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
<!-- Names --> <!-- Names -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('الاسم') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('الاسم') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label>
<input type="text" wire:model="name_ar" <input type="text" wire:model="name_ar"
...@@ -31,9 +31,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -31,9 +31,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
<!-- Identity --> <!-- Identity -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('الهوية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('الهوية') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
<input type="text" wire:model.live.debounce.500ms="national_id" dir="ltr" maxlength="14" <input type="text" wire:model.live.debounce.500ms="national_id" dir="ltr" maxlength="14"
...@@ -60,9 +60,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -60,9 +60,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
<!-- Contact --> <!-- Contact -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('الاتصال') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('الاتصال') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label>
<input type="text" wire:model="phone" dir="ltr" <input type="text" wire:model="phone" dir="ltr"
...@@ -99,9 +99,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -99,9 +99,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
<!-- Emergency Contact --> <!-- Emergency Contact -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('جهة اتصال الطوارئ') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('جهة اتصال الطوارئ') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم') }}</label>
<input type="text" wire:model="emergency_contact_name" <input type="text" wire:model="emergency_contact_name"
...@@ -123,9 +123,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -123,9 +123,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
<!-- Additional --> <!-- Additional -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('معلومات إضافية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('معلومات إضافية') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنسية') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنسية') }}</label>
<input type="text" wire:model="nationality" <input type="text" wire:model="nationality"
...@@ -177,14 +177,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -177,14 +177,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
<!-- Submit --> <!-- Submit -->
<div class="flex items-center gap-4"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('people.list') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">{{ __('إلغاء') }}</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 text-sm">
<span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إضافة الشخص') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إضافة الشخص') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<a href="{{ route('people.list') }}" wire:navigate
class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">{{ __('إلغاء') }}</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/people/person-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('السجل العام') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('السجل العام') }}</h1>
@can('participants.create') @can('participants.create')
<a href="{{ route('people.create') }}" wire:navigate <a href="{{ route('people.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 text-sm font-medium">
......
resources/views/livewire/people/person-show.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $person->name_ar }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $person->name_ar }}</h1>
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3">
@can('participants.update') @can('participants.update')
<a href="{{ route('people.edit', $person) }}" wire:navigate <a href="{{ route('people.edit', $person) }}" 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 text-sm font-medium">
...@@ -12,12 +12,12 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -12,12 +12,12 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
</div> </div>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
<!-- Main Info --> <!-- Main Info -->
<div class="lg:col-span-2 space-y-6"> <div class="lg:col-span-2 space-y-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('المعلومات الأساسية') }}</h2> <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('المعلومات الأساسية') }}</h2>
<dl class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<dt class="text-sm text-gray-500">{{ __('الاسم بالعربية') }}</dt> <dt class="text-sm text-gray-500">{{ __('الاسم بالعربية') }}</dt>
<dd class="font-medium text-gray-800">{{ $person->name_ar }}</dd> <dd class="font-medium text-gray-800">{{ $person->name_ar }}</dd>
...@@ -70,9 +70,9 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -70,9 +70,9 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
</div> </div>
<!-- Contact --> <!-- Contact -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('الاتصال') }}</h2> <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('الاتصال') }}</h2>
<dl class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<dt class="text-sm text-gray-500">{{ __('الهاتف') }}</dt> <dt class="text-sm text-gray-500">{{ __('الهاتف') }}</dt>
<dd class="font-medium text-gray-800" dir="ltr">{{ $person->phone ?? '—' }}</dd> <dd class="font-medium text-gray-800" dir="ltr">{{ $person->phone ?? '—' }}</dd>
...@@ -102,9 +102,9 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -102,9 +102,9 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
<!-- Emergency Contact --> <!-- Emergency Contact -->
@if($person->emergency_contact_name || $person->emergency_contact_phone) @if($person->emergency_contact_name || $person->emergency_contact_phone)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('جهة اتصال الطوارئ') }}</h2> <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('جهة اتصال الطوارئ') }}</h2>
<dl class="grid grid-cols-1 sm:grid-cols-3 gap-4"> <dl class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
<div> <div>
<dt class="text-sm text-gray-500">{{ __('الاسم') }}</dt> <dt class="text-sm text-gray-500">{{ __('الاسم') }}</dt>
<dd class="font-medium text-gray-800">{{ $person->emergency_contact_name ?? '—' }}</dd> <dd class="font-medium text-gray-800">{{ $person->emergency_contact_name ?? '—' }}</dd>
...@@ -126,7 +126,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -126,7 +126,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
<div class="space-y-6"> <div class="space-y-6">
<!-- Guardian Info --> <!-- Guardian Info -->
@if($person->guardian) @if($person->guardian)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('بيانات ولي الأمر') }}</h2> <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('بيانات ولي الأمر') }}</h2>
<div class="space-y-2"> <div class="space-y-2">
<p class="text-sm"> <p class="text-sm">
...@@ -167,7 +167,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -167,7 +167,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
<!-- Medical --> <!-- Medical -->
@if($person->blood_type || $person->medical_notes) @if($person->blood_type || $person->medical_notes)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('معلومات طبية') }}</h2> <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('معلومات طبية') }}</h2>
@if($person->blood_type) @if($person->blood_type)
<p class="text-sm"><span class="text-gray-500">{{ __('فصيلة الدم') }}:</span> <span class="font-medium">{{ $person->blood_type }}</span></p> <p class="text-sm"><span class="text-gray-500">{{ __('فصيلة الدم') }}:</span> <span class="font-medium">{{ $person->blood_type }}</span></p>
...@@ -180,7 +180,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -180,7 +180,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
<!-- Notes --> <!-- Notes -->
@if($person->notes) @if($person->notes)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('ملاحظات') }}</h2> <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('ملاحظات') }}</h2>
<p class="text-sm text-gray-700">{{ $person->notes }}</p> <p class="text-sm text-gray-700">{{ $person->notes }}</p>
</div> </div>
......
resources/views/livewire/pos/pos-history.blade.php
View file @ 944501f1
<div> <div>
{{-- Header --}} {{-- Header --}}
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('سجل المبيعات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('سجل المبيعات') }}</h1>
@can('pos.sell') @can('pos.sell')
<a href="{{ route('pos.terminal') }}" <a href="{{ route('pos.terminal') }}"
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 transition-colors"> class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition-colors w-full sm:w-auto justify-center">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg> </svg>
...@@ -14,10 +14,10 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -14,10 +14,10 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
</div> </div>
{{-- Filters --}} {{-- Filters --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div class="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
{{-- Search --}} {{-- Search --}}
<div> <div class="col-span-2 md:col-span-1">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('بحث') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('بحث') }}</label>
<input type="text" <input type="text"
wire:model.live.debounce.300ms="search" wire:model.live.debounce.300ms="search"
...@@ -61,7 +61,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -61,7 +61,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{-- Transactions Table --}} {{-- Transactions Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none"> <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
<table class="w-full text-sm"> <table class="w-full text-sm hidden md:table">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
<tr> <tr>
<th class="px-4 py-3 text-start text-xs font-semibold text-gray-500 uppercase">{{ __('رقم الإيصال') }}</th> <th class="px-4 py-3 text-start text-xs font-semibold text-gray-500 uppercase">{{ __('رقم الإيصال') }}</th>
...@@ -134,6 +134,55 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -134,6 +134,55 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</table> </table>
</div> </div>
{{-- Mobile Cards --}}
<div class="md:hidden" wire:loading.class="opacity-50 pointer-events-none">
@forelse($transactions as $transaction)
<div class="p-3 border-b border-gray-100 last:border-0">
{{-- Top row: receipt number + payment badge --}}
<div class="flex justify-between items-center mb-1">
<span class="font-mono text-xs font-medium text-gray-800" dir="ltr">{{ $transaction->receipt_number }}</span>
@php
$methodValue = $transaction->payment_method instanceof \BackedEnum ? $transaction->payment_method->value : $transaction->payment_method;
@endphp
@switch($methodValue)
@case('cash')
<span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">{{ __('نقدي') }}</span>
@break
@case('card')
<span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">{{ __('بطاقة') }}</span>
@break
@case('wallet')
<span class="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">{{ __('محفظة') }}</span>
@break
@case('split')
<span class="px-2 py-0.5 text-xs bg-amber-100 text-amber-700 rounded-full">{{ __('تقسيم') }}</span>
@break
@endswitch
</div>
{{-- Middle: participant name --}}
<div class="mb-1">
@if($transaction->participant && $transaction->participant->person)
<span class="text-gray-800 font-medium text-sm">{{ $transaction->participant->person->name_ar }}</span>
@else
<span class="text-gray-400 italic text-sm">{{ __('عميل عابر') }}</span>
@endif
</div>
{{-- Bottom row: total + date --}}
<div class="flex justify-between items-center">
<span class="font-bold text-gray-800 text-sm" dir="ltr">{{ number_format($transaction->total_amount / 100, 2) }} {{ __('ج.م') }}</span>
<span class="text-xs text-gray-500" dir="ltr">{{ $transaction->processed_at?->format('Y-m-d H:i') }}</span>
</div>
</div>
@empty
<div class="px-4 py-12 text-center">
<svg class="w-12 h-12 text-gray-200 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<p class="text-gray-400 text-sm">{{ __('لا توجد عمليات بيع في هذه الفترة') }}</p>
</div>
@endforelse
</div>
{{-- Pagination --}} {{-- Pagination --}}
@if($transactions->hasPages()) @if($transactions->hasPages())
<div class="border-t border-gray-200 px-4 py-3"> <div class="border-t border-gray-200 px-4 py-3">
......
resources/views/livewire/pos/pos-terminal.blade.php
View file @ 944501f1
<div x-data="{ <div x-data="{
activeTab: 'programs', activeTab: 'programs',
showParticipantResults: false, showParticipantResults: false,
mobileCartOpen: false,
}" class="min-h-[calc(100vh-4rem)]"> }" class="min-h-[calc(100vh-4rem)]">
{{-- No Open Cash Session Guard --}} {{-- No Open Cash Session Guard --}}
@if(!$hasOpenSession) @if(!$hasOpenSession)
<div class="flex flex-col items-center justify-center min-h-[60vh] p-8"> <div class="flex flex-col items-center justify-center min-h-[60vh] p-4 sm:p-8">
<div class="bg-amber-50 border border-amber-200 rounded-xl p-8 text-center max-w-md"> <div class="bg-amber-50 border border-amber-200 rounded-xl p-6 sm:p-8 text-center max-w-md w-full">
<svg class="w-16 h-16 text-amber-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-12 h-12 sm:w-16 sm:h-16 text-amber-500 mx-auto mb-3 sm:mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
</svg> </svg>
<h3 class="text-lg font-bold text-amber-800 mb-2">{{ __('يجب فتح وردية أولاً') }}</h3> <h3 class="text-base sm:text-lg font-bold text-amber-800 mb-2">{{ __('يجب فتح وردية أولاً') }}</h3>
<p class="text-amber-700 text-sm mb-4">{{ __('لا يمكن إجراء عمليات بيع بدون وردية مفتوحة') }}</p> <p class="text-amber-700 text-xs sm:text-sm mb-4">{{ __('لا يمكن إجراء عمليات بيع بدون وردية مفتوحة') }}</p>
<a href="{{ route('cash-sessions.manage') }}" <a href="{{ route('cash-sessions.manage') }}"
class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 text-sm font-medium transition-colors"> class="inline-flex items-center gap-2 px-4 py-2.5 min-h-[44px] bg-amber-600 text-white rounded-lg hover:bg-amber-700 text-xs sm:text-sm font-medium transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg> </svg>
...@@ -24,24 +25,24 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 text-white rounded- ...@@ -24,24 +25,24 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 text-white rounded-
@else @else
{{-- Main POS Layout --}} {{-- Main POS Layout --}}
<div class="flex flex-col lg:flex-row gap-4 p-4 h-full"> <div class="flex flex-col lg:flex-row gap-3 sm:gap-4 p-3 sm:p-4 h-full pb-20 lg:pb-4">
{{-- LEFT PANEL: Catalog & Items (60%) --}} {{-- LEFT PANEL: Catalog & Items (60%) --}}
<div class="lg:w-3/5 space-y-4"> <div class="w-full lg:w-3/5 space-y-3 sm:space-y-4">
{{-- Participant Search --}} {{-- Participant Search --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 text-gray-400 shrink-0" 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"/> <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> </svg>
@if($participantId) @if($participantId)
<div class="flex items-center gap-2 flex-1"> <div class="flex items-center gap-2 flex-1 min-w-0">
<span class="px-3 py-1 bg-blue-50 text-blue-700 rounded-lg text-sm font-medium"> <span class="px-3 py-1.5 min-h-[44px] flex items-center bg-blue-50 text-blue-700 rounded-lg text-xs sm:text-sm font-medium truncate">
{{ $participantName }} {{ $participantName }}
</span> </span>
<button wire:click="clearParticipant" class="text-gray-400 hover:text-red-500 transition-colors"> <button wire:click="clearParticipant" class="min-w-[44px] min-h-[44px] flex items-center justify-center text-gray-400 hover:text-red-500 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg> </svg>
...@@ -54,7 +55,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 text-white rounded- ...@@ -54,7 +55,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 text-white rounded-
@focus="showParticipantResults = true" @focus="showParticipantResults = true"
@click.away="showParticipantResults = false" @click.away="showParticipantResults = false"
placeholder="{{ __('بحث عن مشترك بالاسم أو رقم الهاتف...') }}" placeholder="{{ __('بحث عن مشترك بالاسم أو رقم الهاتف...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"> class="w-full px-3 sm:px-4 py-2.5 min-h-[44px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-xs sm:text-sm">
{{-- Search Results Dropdown --}} {{-- Search Results Dropdown --}}
@if(count($searchResults) > 0) @if(count($searchResults) > 0)
...@@ -64,8 +65,8 @@ class="absolute z-50 top-full mt-1 w-full bg-white border border-gray-200 rounde ...@@ -64,8 +65,8 @@ class="absolute z-50 top-full mt-1 w-full bg-white border border-gray-200 rounde
@foreach($searchResults as $result) @foreach($searchResults as $result)
<button wire:click="selectParticipant({{ $result['id'] }})" <button wire:click="selectParticipant({{ $result['id'] }})"
@click="showParticipantResults = false" @click="showParticipantResults = false"
class="w-full text-start px-4 py-2 hover:bg-gray-50 flex items-center justify-between border-b border-gray-100 last:border-b-0"> class="w-full text-start px-3 sm:px-4 py-2.5 min-h-[44px] hover:bg-gray-50 flex items-center justify-between border-b border-gray-100 last:border-b-0">
<span class="text-sm font-medium text-gray-700">{{ $result['name'] }}</span> <span class="text-xs sm:text-sm font-medium text-gray-700">{{ $result['name'] }}</span>
@if($result['phone']) @if($result['phone'])
<span class="text-xs text-gray-400" dir="ltr">{{ $result['phone'] }}</span> <span class="text-xs text-gray-400" dir="ltr">{{ $result['phone'] }}</span>
@endif @endif
...@@ -83,39 +84,39 @@ class="w-full text-start px-4 py-2 hover:bg-gray-50 flex items-center justify-be ...@@ -83,39 +84,39 @@ class="w-full text-start px-4 py-2 hover:bg-gray-50 flex items-center justify-be
<div class="flex border-b border-gray-200"> <div class="flex border-b border-gray-200">
<button @click="activeTab = 'programs'" <button @click="activeTab = 'programs'"
:class="activeTab === 'programs' ? 'border-b-2 border-blue-600 text-blue-700 bg-blue-50/50' : 'text-gray-500 hover:text-gray-700'" :class="activeTab === 'programs' ? 'border-b-2 border-blue-600 text-blue-700 bg-blue-50/50' : 'text-gray-500 hover:text-gray-700'"
class="flex-1 px-4 py-3 text-sm font-medium transition-colors"> class="flex-1 px-3 sm:px-4 py-3 min-h-[44px] text-xs sm:text-sm font-medium transition-colors">
{{ __('البرامج') }} {{ __('البرامج') }}
</button> </button>
<button @click="activeTab = 'manual'" <button @click="activeTab = 'manual'"
:class="activeTab === 'manual' ? 'border-b-2 border-blue-600 text-blue-700 bg-blue-50/50' : 'text-gray-500 hover:text-gray-700'" :class="activeTab === 'manual' ? 'border-b-2 border-blue-600 text-blue-700 bg-blue-50/50' : 'text-gray-500 hover:text-gray-700'"
class="flex-1 px-4 py-3 text-sm font-medium transition-colors"> class="flex-1 px-3 sm:px-4 py-3 min-h-[44px] text-xs sm:text-sm font-medium transition-colors">
{{ __('عنصر يدوي') }} {{ __('عنصر يدوي') }}
</button> </button>
</div> </div>
{{-- Programs Tab --}} {{-- Programs Tab --}}
<div x-show="activeTab === 'programs'" class="p-4"> <div x-show="activeTab === 'programs'" class="p-3 sm:p-4">
@if($programs->isEmpty()) @if($programs->isEmpty())
<div class="text-center py-8"> <div class="text-center py-6 sm:py-8">
<svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg> </svg>
<p class="text-gray-500 text-sm">{{ __('لا توجد برامج متاحة') }}</p> <p class="text-gray-500 text-xs sm:text-sm">{{ __('لا توجد برامج متاحة') }}</p>
</div> </div>
@else @else
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3" wire:loading.class="opacity-50 pointer-events-none" wire:target="addProgram"> <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 gap-2 sm:gap-3" wire:loading.class="opacity-50 pointer-events-none" wire:target="addProgram">
@foreach($programs as $program) @foreach($programs as $program)
<button wire:click="addProgram({{ $program->id }})" <button wire:click="addProgram({{ $program->id }})"
class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50/50 transition-all text-start group"> class="flex items-center gap-2 sm:gap-3 p-2.5 sm:p-3 min-h-[44px] border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50/50 transition-all text-start group">
<div class="w-10 h-10 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center shrink-0 group-hover:bg-blue-200 transition-colors"> <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center shrink-0 group-hover:bg-blue-200 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg> </svg>
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-800 truncate">{{ $program->name_ar }}</p> <p class="text-xs sm:text-sm font-medium text-gray-800 truncate">{{ $program->name_ar }}</p>
</div> </div>
<svg class="w-4 h-4 text-gray-400 group-hover:text-blue-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 text-gray-400 group-hover:text-blue-500 transition-colors shrink-0 hidden sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg> </svg>
</button> </button>
...@@ -125,38 +126,38 @@ class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg hover:borde ...@@ -125,38 +126,38 @@ class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg hover:borde
</div> </div>
{{-- Manual Item Tab --}} {{-- Manual Item Tab --}}
<div x-show="activeTab === 'manual'" class="p-4"> <div x-show="activeTab === 'manual'" class="p-3 sm:p-4">
<div class="space-y-3"> <div class="space-y-3">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم العنصر') }}</label> <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">{{ __('اسم العنصر') }}</label>
<input type="text" <input type="text"
wire:model="manualItemName" wire:model="manualItemName"
placeholder="{{ __('مثال: رسوم إضافية') }}" placeholder="{{ __('مثال: رسوم إضافية') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"> class="w-full px-3 sm:px-4 py-2.5 min-h-[44px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-xs sm:text-sm">
</div> </div>
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-2 sm:gap-3">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('السعر (ج.م)') }}</label> <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">{{ __('السعر (ج.م)') }}</label>
<input type="number" <input type="number"
wire:model="manualItemPrice" wire:model="manualItemPrice"
min="0" min="0"
step="0.01" step="0.01"
dir="ltr" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"> class="w-full px-3 sm:px-4 py-2.5 min-h-[44px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-xs sm:text-sm">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الكمية') }}</label> <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">{{ __('الكمية') }}</label>
<input type="number" <input type="number"
wire:model="manualItemQty" wire:model="manualItemQty"
min="1" min="1"
dir="ltr" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"> class="w-full px-3 sm:px-4 py-2.5 min-h-[44px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-xs sm:text-sm">
</div> </div>
</div> </div>
<button wire:click="addManualItem" <button wire:click="addManualItem"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="addManualItem" wire:target="addManualItem"
class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition-colors disabled:opacity-50"> class="w-full px-4 py-2.5 min-h-[44px] bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-xs sm:text-sm font-medium transition-colors disabled:opacity-50">
<span wire:loading.remove wire:target="addManualItem">{{ __('إضافة للسلة') }}</span> <span wire:loading.remove wire:target="addManualItem">{{ __('إضافة للسلة') }}</span>
<span wire:loading wire:target="addManualItem">{{ __('جارٍ الإضافة...') }}</span> <span wire:loading wire:target="addManualItem">{{ __('جارٍ الإضافة...') }}</span>
</button> </button>
...@@ -165,17 +166,17 @@ class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text ...@@ -165,17 +166,17 @@ class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text
</div> </div>
{{-- Coupon --}} {{-- Coupon --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4">
<label class="block text-sm font-medium text-gray-700 mb-2">{{ __('كود الخصم') }}</label> <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">{{ __('كود الخصم') }}</label>
<div class="flex gap-2"> <div class="flex gap-2">
<input type="text" <input type="text"
wire:model="couponCode" wire:model="couponCode"
placeholder="{{ __('أدخل كود الخصم') }}" placeholder="{{ __('أدخل كود الخصم') }}"
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" class="flex-1 px-3 sm:px-4 py-2.5 min-h-[44px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-xs sm:text-sm"
dir="ltr"> dir="ltr">
@if($couponCode) @if($couponCode)
<button wire:click="$set('couponCode', '')" <button wire:click="$set('couponCode', '')"
class="px-3 py-2 text-gray-400 hover:text-red-500 transition-colors"> class="min-w-[44px] min-h-[44px] flex items-center justify-center text-gray-400 hover:text-red-500 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg> </svg>
...@@ -186,12 +187,13 @@ class="px-3 py-2 text-gray-400 hover:text-red-500 transition-colors"> ...@@ -186,12 +187,13 @@ class="px-3 py-2 text-gray-400 hover:text-red-500 transition-colors">
</div> </div>
{{-- RIGHT PANEL: Cart (40%) --}} {{-- RIGHT PANEL: Cart (40%) --}}
<div class="lg:w-2/5"> <div id="cart-section" class="w-full lg:w-2/5">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 flex flex-col lg:sticky lg:top-4 lg:max-h-[calc(100vh-6rem)]"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 flex flex-col lg:sticky lg:top-4 lg:max-h-[calc(100vh-6rem)]"
:class="{ 'hidden lg:flex': !mobileCartOpen, 'flex': mobileCartOpen }">
{{-- Cart Header --}} {{-- Cart Header --}}
<div class="flex items-center justify-between p-4 border-b border-gray-200"> <div class="flex items-center justify-between p-3 sm:p-4 border-b border-gray-200">
<h2 class="text-lg font-bold text-gray-800 flex items-center gap-2"> <h2 class="text-base sm:text-lg font-bold text-gray-800 flex items-center gap-2">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/>
</svg> </svg>
...@@ -200,21 +202,30 @@ class="px-3 py-2 text-gray-400 hover:text-red-500 transition-colors"> ...@@ -200,21 +202,30 @@ class="px-3 py-2 text-gray-400 hover:text-red-500 transition-colors">
<span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">{{ count($cart) }}</span> <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">{{ count($cart) }}</span>
@endif @endif
</h2> </h2>
@if(count($cart) > 0) <div class="flex items-center gap-2">
<button wire:click="newTransaction" @if(count($cart) > 0)
wire:loading.attr="disabled" <button wire:click="newTransaction"
class="text-xs text-red-500 hover:text-red-700 transition-colors"> wire:loading.attr="disabled"
{{ __('مسح الكل') }} class="text-xs text-red-500 hover:text-red-700 transition-colors min-h-[44px] flex items-center px-2">
{{ __('مسح الكل') }}
</button>
@endif
{{-- Mobile close button --}}
<button @click="mobileCartOpen = false"
class="lg:hidden min-w-[44px] min-h-[44px] flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors">
<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> </button>
@endif </div>
</div> </div>
{{-- Cart Items --}} {{-- Cart Items --}}
<div class="flex-1 overflow-y-auto p-4 space-y-3" wire:loading.class="opacity-50 pointer-events-none" wire:target="removeItem,updateQuantity"> <div class="flex-1 overflow-y-auto p-3 sm:p-4 space-y-2 sm:space-y-3" wire:loading.class="opacity-50 pointer-events-none" wire:target="removeItem,updateQuantity">
@forelse($cart as $index => $item) @forelse($cart as $index => $item)
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg"> <div class="flex items-start gap-2 sm:gap-3 p-2.5 sm:p-3 bg-gray-50 rounded-lg">
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-800 truncate">{{ $item['item_name_ar'] }}</p> <p class="text-xs sm:text-sm font-medium text-gray-800 truncate">{{ $item['item_name_ar'] }}</p>
<div class="flex items-center gap-2 mt-1"> <div class="flex items-center gap-2 mt-1">
<span class="text-xs text-gray-500" dir="ltr">{{ number_format($item['unit_price'] / 100, 2) }} {{ __('ج.م') }}</span> <span class="text-xs text-gray-500" dir="ltr">{{ number_format($item['unit_price'] / 100, 2) }} {{ __('ج.م') }}</span>
@if($item['discount_amount'] > 0) @if($item['discount_amount'] > 0)
...@@ -226,35 +237,35 @@ class="text-xs text-red-500 hover:text-red-700 transition-colors"> ...@@ -226,35 +237,35 @@ class="text-xs text-red-500 hover:text-red-700 transition-colors">
{{-- Quantity Controls --}} {{-- Quantity Controls --}}
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<button wire:click="updateQuantity({{ $index }}, {{ $item['quantity'] - 1 }})" <button wire:click="updateQuantity({{ $index }}, {{ $item['quantity'] - 1 }})"
class="w-6 h-6 flex items-center justify-center rounded bg-gray-200 text-gray-600 hover:bg-gray-300 text-xs transition-colors"> class="w-7 h-7 sm:w-6 sm:h-6 flex items-center justify-center rounded bg-gray-200 text-gray-600 hover:bg-gray-300 text-xs transition-colors">
- -
</button> </button>
<span class="w-8 text-center text-sm font-medium" dir="ltr">{{ $item['quantity'] }}</span> <span class="w-8 text-center text-xs sm:text-sm font-medium" dir="ltr">{{ $item['quantity'] }}</span>
<button wire:click="updateQuantity({{ $index }}, {{ $item['quantity'] + 1 }})" <button wire:click="updateQuantity({{ $index }}, {{ $item['quantity'] + 1 }})"
class="w-6 h-6 flex items-center justify-center rounded bg-gray-200 text-gray-600 hover:bg-gray-300 text-xs transition-colors"> class="w-7 h-7 sm:w-6 sm:h-6 flex items-center justify-center rounded bg-gray-200 text-gray-600 hover:bg-gray-300 text-xs transition-colors">
+ +
</button> </button>
</div> </div>
{{-- Line Total --}} {{-- Line Total --}}
<div class="text-end shrink-0"> <div class="text-end shrink-0">
<p class="text-sm font-bold text-gray-800" dir="ltr">{{ number_format($item['line_total'] / 100, 2) }}</p> <p class="text-xs sm:text-sm font-bold text-gray-800" dir="ltr">{{ number_format($item['line_total'] / 100, 2) }}</p>
</div> </div>
{{-- Remove --}} {{-- Remove --}}
<button wire:click="removeItem({{ $index }})" <button wire:click="removeItem({{ $index }})"
class="text-gray-400 hover:text-red-500 transition-colors shrink-0"> class="min-w-[44px] min-h-[44px] flex items-center justify-center text-gray-400 hover:text-red-500 transition-colors shrink-0 -me-2 -my-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg> </svg>
</button> </button>
</div> </div>
@empty @empty
<div class="text-center py-12"> <div class="text-center py-8 sm:py-12">
<svg class="w-16 h-16 text-gray-200 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-12 h-12 sm:w-16 sm:h-16 text-gray-200 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/>
</svg> </svg>
<p class="text-gray-400 text-sm">{{ __('السلة فارغة') }}</p> <p class="text-gray-400 text-xs sm:text-sm">{{ __('السلة فارغة') }}</p>
<p class="text-gray-300 text-xs mt-1">{{ __('أضف عناصر من القائمة') }}</p> <p class="text-gray-300 text-xs mt-1">{{ __('أضف عناصر من القائمة') }}</p>
</div> </div>
@endforelse @endforelse
...@@ -262,26 +273,26 @@ class="text-gray-400 hover:text-red-500 transition-colors shrink-0"> ...@@ -262,26 +273,26 @@ class="text-gray-400 hover:text-red-500 transition-colors shrink-0">
{{-- Cart Footer: Totals & Checkout --}} {{-- Cart Footer: Totals & Checkout --}}
@if(count($cart) > 0) @if(count($cart) > 0)
<div class="border-t border-gray-200 p-4 space-y-3"> <div class="border-t border-gray-200 p-3 sm:p-4 space-y-3">
{{-- Totals --}} {{-- Totals --}}
<div class="space-y-1"> <div class="space-y-1">
@if($cartDiscount > 0) @if($cartDiscount > 0)
<div class="flex justify-between text-sm"> <div class="flex justify-between text-xs sm:text-sm">
<span class="text-gray-500">{{ __('المجموع الفرعي') }}</span> <span class="text-gray-500">{{ __('المجموع الفرعي') }}</span>
<span class="text-gray-700" dir="ltr">{{ number_format($cartSubtotal / 100, 2) }} {{ __('ج.م') }}</span> <span class="text-gray-700" dir="ltr">{{ number_format($cartSubtotal / 100, 2) }} {{ __('ج.م') }}</span>
</div> </div>
<div class="flex justify-between text-sm"> <div class="flex justify-between text-xs sm:text-sm">
<span class="text-green-600">{{ __('الخصم') }}</span> <span class="text-green-600">{{ __('الخصم') }}</span>
<span class="text-green-600" dir="ltr">-{{ number_format($cartDiscount / 100, 2) }} {{ __('ج.م') }}</span> <span class="text-green-600" dir="ltr">-{{ number_format($cartDiscount / 100, 2) }} {{ __('ج.م') }}</span>
</div> </div>
@endif @endif
@if($serviceFee > 0) @if($serviceFee > 0)
<div class="flex justify-between text-sm"> <div class="flex justify-between text-xs sm:text-sm">
<span class="text-amber-600">{{ __('مصاريف خدمة') }}</span> <span class="text-amber-600">{{ __('مصاريف خدمة') }}</span>
<span class="text-amber-600" dir="ltr">{{ number_format($serviceFee / 100, 2) }} {{ __('ج.م') }}</span> <span class="text-amber-600" dir="ltr">{{ number_format($serviceFee / 100, 2) }} {{ __('ج.م') }}</span>
</div> </div>
@endif @endif
<div class="flex justify-between text-base font-bold pt-1 border-t border-gray-100"> <div class="flex justify-between text-sm sm:text-base font-bold pt-1 border-t border-gray-100">
<span class="text-gray-800">{{ __('الإجمالي') }}</span> <span class="text-gray-800">{{ __('الإجمالي') }}</span>
<span class="text-blue-700" dir="ltr">{{ number_format($cartGrandTotal / 100, 2) }} {{ __('ج.م') }}</span> <span class="text-blue-700" dir="ltr">{{ number_format($cartGrandTotal / 100, 2) }} {{ __('ج.م') }}</span>
</div> </div>
...@@ -289,20 +300,24 @@ class="text-gray-400 hover:text-red-500 transition-colors shrink-0"> ...@@ -289,20 +300,24 @@ class="text-gray-400 hover:text-red-500 transition-colors shrink-0">
{{-- Payment Method --}} {{-- Payment Method --}}
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('طريقة الدفع') }}</label> <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">{{ __('طريقة الدفع') }}</label>
<select wire:model.live="paymentMethod" <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
@foreach($paymentMethods as $method) @foreach($paymentMethods as $method)
<option value="{{ $method->value }}"> <label class="relative flex items-center justify-center gap-2 p-2.5 min-h-[44px] border rounded-lg cursor-pointer transition-all text-xs sm:text-sm font-medium
{{ $paymentMethod === $method->value ? 'border-blue-500 bg-blue-50 text-blue-700 ring-2 ring-blue-200' : 'border-gray-200 text-gray-600 hover:border-gray-300' }}">
<input type="radio"
wire:model.live="paymentMethod"
value="{{ $method->value }}"
class="sr-only">
@switch($method->value) @switch($method->value)
@case('cash') {{ __('نقدي') }} @break @case('cash') {{ __('نقدي') }} @break
@case('card') {{ __('بطاقة') }} @break @case('card') {{ __('بطاقة') }} @break
@case('wallet') {{ __('محفظة') }} @break @case('wallet') {{ __('محفظة') }} @break
@case('split') {{ __('تقسيم') }} @break @case('split') {{ __('تقسيم') }} @break
@endswitch @endswitch
</option> </label>
@endforeach @endforeach
</select> </div>
</div> </div>
{{-- Split Payment Builder --}} {{-- Split Payment Builder --}}
...@@ -311,7 +326,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -311,7 +326,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<p class="text-xs font-medium text-gray-600">{{ __('تقسيم الدفع') }}</p> <p class="text-xs font-medium text-gray-600">{{ __('تقسيم الدفع') }}</p>
@foreach($splitPayments as $index => $sp) @foreach($splitPayments as $index => $sp)
<div class="flex items-center gap-2 bg-white rounded px-2 py-1"> <div class="flex items-center gap-2 bg-white rounded px-2 py-1.5 min-h-[40px]">
<span class="text-xs text-gray-600 flex-1"> <span class="text-xs text-gray-600 flex-1">
@switch($sp['method']) @switch($sp['method'])
@case('cash') {{ __('نقدي') }} @break @case('cash') {{ __('نقدي') }} @break
...@@ -320,8 +335,8 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -320,8 +335,8 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
@endswitch @endswitch
</span> </span>
<span class="text-xs font-bold" dir="ltr">{{ number_format($sp['amount'] / 100, 2) }}</span> <span class="text-xs font-bold" dir="ltr">{{ number_format($sp['amount'] / 100, 2) }}</span>
<button wire:click="removeSplitPayment({{ $index }})" class="text-red-400 hover:text-red-600"> <button wire:click="removeSplitPayment({{ $index }})" class="min-w-[44px] min-h-[44px] flex items-center justify-center text-red-400 hover:text-red-600 -me-2 -my-1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg> </svg>
</button> </button>
...@@ -329,7 +344,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -329,7 +344,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
@endforeach @endforeach
<div class="flex gap-2"> <div class="flex gap-2">
<select wire:model="splitMethod" class="flex-1 px-2 py-1 border border-gray-300 rounded text-xs"> <select wire:model="splitMethod" class="flex-1 px-2 py-2 min-h-[44px] border border-gray-300 rounded text-xs">
<option value="cash">{{ __('نقدي') }}</option> <option value="cash">{{ __('نقدي') }}</option>
<option value="card">{{ __('بطاقة') }}</option> <option value="card">{{ __('بطاقة') }}</option>
<option value="wallet">{{ __('محفظة') }}</option> <option value="wallet">{{ __('محفظة') }}</option>
...@@ -340,9 +355,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -340,9 +355,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
step="0.01" step="0.01"
placeholder="{{ __('المبلغ') }}" placeholder="{{ __('المبلغ') }}"
dir="ltr" dir="ltr"
class="w-24 px-2 py-1 border border-gray-300 rounded text-xs"> class="w-24 px-2 py-2 min-h-[44px] border border-gray-300 rounded text-xs">
<button wire:click="addSplitPayment" <button wire:click="addSplitPayment"
class="px-2 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700 transition-colors"> class="min-w-[44px] min-h-[44px] px-3 bg-blue-600 text-white rounded text-xs hover:bg-blue-700 transition-colors font-bold">
+ +
</button> </button>
</div> </div>
...@@ -364,7 +379,7 @@ class="px-2 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700 transi ...@@ -364,7 +379,7 @@ class="px-2 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700 transi
<input type="text" <input type="text"
wire:model="notes" wire:model="notes"
placeholder="{{ __('ملاحظات (اختياري)') }}" placeholder="{{ __('ملاحظات (اختياري)') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"> class="w-full px-3 sm:px-4 py-2.5 min-h-[44px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-xs sm:text-sm">
</div> </div>
{{-- Checkout Button --}} {{-- Checkout Button --}}
...@@ -372,7 +387,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -372,7 +387,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="checkout" wire:target="checkout"
@if($paymentMethod === 'split' && collect($splitPayments)->sum(fn ($sp) => $sp['amount']) !== $cartTotal) disabled @endif @if($paymentMethod === 'split' && collect($splitPayments)->sum(fn ($sp) => $sp['amount']) !== $cartTotal) disabled @endif
class="w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-bold transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"> class="w-full px-4 py-3 min-h-[48px] bg-green-600 text-white rounded-lg hover:bg-green-700 text-xs sm:text-sm font-bold transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
<span wire:loading.remove wire:target="checkout"> <span wire:loading.remove wire:target="checkout">
<svg class="w-5 h-5 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
...@@ -387,34 +402,72 @@ class="w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 te ...@@ -387,34 +402,72 @@ class="w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 te
</div> </div>
</div> </div>
{{-- Mobile Sticky Bottom Bar (visible only on mobile when cart has items) --}}
@if(count($cart) > 0)
<div class="fixed bottom-0 inset-x-0 z-40 lg:hidden bg-white border-t border-gray-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]"
x-show="!mobileCartOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="translate-y-full"
x-transition:enter-end="translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="translate-y-0"
x-transition:leave-end="translate-y-full">
<div class="flex items-center gap-3 p-3 max-w-screen-sm mx-auto">
{{-- Cart summary --}}
<button @click="mobileCartOpen = true; $nextTick(() => { document.getElementById('cart-section').scrollIntoView({ behavior: 'smooth' }) })"
class="flex-1 flex items-center gap-3 min-h-[48px]">
<div class="relative">
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/>
</svg>
<span class="absolute -top-1.5 -end-1.5 w-5 h-5 flex items-center justify-center bg-blue-600 text-white text-[10px] font-bold rounded-full">{{ count($cart) }}</span>
</div>
<div class="text-start">
<p class="text-xs text-gray-500">{{ __('الإجمالي') }}</p>
<p class="text-sm font-bold text-gray-800" dir="ltr">{{ number_format($cartGrandTotal / 100, 2) }} {{ __('ج.م') }}</p>
</div>
</button>
{{-- Pay button --}}
<button @click="mobileCartOpen = true; $nextTick(() => { document.getElementById('cart-section').scrollIntoView({ behavior: 'smooth' }) })"
class="px-5 py-3 min-h-[48px] bg-green-600 text-white rounded-lg text-sm font-bold hover:bg-green-700 transition-colors flex items-center gap-2 shrink-0">
<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 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
{{ __('ادفع') }}
</button>
</div>
</div>
@endif
{{-- Receipt Modal --}} {{-- Receipt Modal --}}
@if($showReceipt) @if($showReceipt)
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" x-data x-transition> <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-0 sm:p-4" x-data x-transition>
<div class="bg-white rounded-xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden"> <div class="bg-white sm:rounded-xl shadow-2xl w-full h-full sm:h-auto sm:max-w-sm overflow-hidden flex flex-col sm:block">
<div class="p-6 text-center"> <div class="p-4 sm:p-6 text-center flex-1 flex flex-col items-center justify-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div class="w-14 h-14 sm:w-16 sm:h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-7 h-7 sm:w-8 sm:h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg> </svg>
</div> </div>
<h3 class="text-lg font-bold text-gray-800 mb-2">{{ __('تمت العملية بنجاح') }}</h3> <h3 class="text-base sm:text-lg font-bold text-gray-800 mb-2">{{ __('تمت العملية بنجاح') }}</h3>
<div class="bg-gray-50 rounded-lg p-4 my-4 space-y-2"> <div class="bg-gray-50 rounded-lg p-3 sm:p-4 my-3 sm:my-4 space-y-2 w-full">
<div class="flex justify-between text-sm"> <div class="flex justify-between text-xs sm:text-sm">
<span class="text-gray-500">{{ __('رقم الإيصال') }}</span> <span class="text-gray-500">{{ __('رقم الإيصال') }}</span>
<span class="font-mono font-bold text-gray-800" dir="ltr">{{ $lastReceiptNumber }}</span> <span class="font-mono font-bold text-gray-800" dir="ltr">{{ $lastReceiptNumber }}</span>
</div> </div>
<div class="flex justify-between text-sm"> <div class="flex justify-between text-xs sm:text-sm">
<span class="text-gray-500">{{ __('المبلغ') }}</span> <span class="text-gray-500">{{ __('المبلغ') }}</span>
<span class="font-bold text-green-700" dir="ltr">{{ number_format($lastTransactionTotal / 100, 2) }} {{ __('ج.م') }}</span> <span class="font-bold text-green-700" dir="ltr">{{ number_format($lastTransactionTotal / 100, 2) }} {{ __('ج.م') }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="border-t border-gray-200 p-4 flex gap-3"> <div class="border-t border-gray-200 p-3 sm:p-4 flex gap-3">
@if($lastTransactionUuid) @if($lastTransactionUuid)
<x-ui.print-receipt-button :route="route('receipts.pos.print', $lastTransactionUuid)" class="flex-1" /> <x-ui.print-receipt-button :route="route('receipts.pos.print', $lastTransactionUuid)" class="flex-1" />
@endif @endif
<button wire:click="closeReceipt" <button wire:click="closeReceipt"
class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"> class="flex-1 px-4 py-2.5 min-h-[44px] bg-blue-600 text-white rounded-lg text-xs sm:text-sm font-medium hover:bg-blue-700 transition-colors">
{{ __('عملية جديدة') }} {{ __('عملية جديدة') }}
</button> </button>
</div> </div>
......
resources/views/livewire/pricing/base-price-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800"> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
{{ $editing ? __('تعديل السعر الأساسي') : __('إضافة سعر أساسي') }} {{ $editing ? __('تعديل السعر الأساسي') : __('إضافة سعر أساسي') }}
</h1> </h1>
<a href="{{ route('pricing.base-prices') }}" wire:navigate <a href="{{ route('pricing.base-prices') }}" wire:navigate
...@@ -14,14 +14,14 @@ class="text-gray-600 hover:text-gray-800 text-sm">{{ __('رجوع للقائمة ...@@ -14,14 +14,14 @@ class="text-gray-600 hover:text-gray-800 text-sm">{{ __('رجوع للقائمة
</div> </div>
@endif @endif
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<form wire:submit="save"> <form wire:submit="save">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
{{-- Name Arabic --}} {{-- Name Arabic --}}
<div> <div>
<label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} <span class="text-red-500">*</span></label> <label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} <span class="text-red-500">*</span></label>
<input type="text" id="name_ar" wire:model="name_ar" <input type="text" id="name_ar" wire:model="name_ar"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -29,14 +29,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -29,14 +29,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label> <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
<input type="text" id="name" wire:model="name" dir="ltr" <input type="text" id="name" wire:model="name" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
{{-- Priceable Type --}} {{-- Priceable Type --}}
<div> <div>
<label for="priceable_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العنصر') }} <span class="text-red-500">*</span></label> <label for="priceable_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العنصر') }} <span class="text-red-500">*</span></label>
<select id="priceable_type" wire:model.live="priceable_type" <select id="priceable_type" wire:model.live="priceable_type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('priceable_type') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('priceable_type') border-red-500 @enderror">
<option value="">{{ __('اختر نوع العنصر') }}</option> <option value="">{{ __('اختر نوع العنصر') }}</option>
<option value="training_program">{{ __('برنامج تدريبي') }}</option> <option value="training_program">{{ __('برنامج تدريبي') }}</option>
<option value="activity">{{ __('نشاط') }}</option> <option value="activity">{{ __('نشاط') }}</option>
...@@ -48,7 +48,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -48,7 +48,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="priceable_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنصر') }} <span class="text-red-500">*</span></label> <label for="priceable_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنصر') }} <span class="text-red-500">*</span></label>
<select id="priceable_id" wire:model="priceable_id" <select id="priceable_id" wire:model="priceable_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('priceable_id') border-red-500 @enderror" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('priceable_id') border-red-500 @enderror"
{{ empty($priceable_type) ? 'disabled' : '' }}> {{ empty($priceable_type) ? 'disabled' : '' }}>
<option value="">{{ __('اختر العنصر') }}</option> <option value="">{{ __('اختر العنصر') }}</option>
@foreach($priceableOptions as $id => $label) @foreach($priceableOptions as $id => $label)
...@@ -62,7 +62,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -62,7 +62,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="branch_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label> <label for="branch_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
<select id="branch_id" wire:model="branch_id" <select id="branch_id" wire:model="branch_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
<option value="">{{ __('كل الفروع') }}</option> <option value="">{{ __('كل الفروع') }}</option>
@foreach($branches as $branch) @foreach($branches as $branch)
<option value="{{ $branch->id }}">{{ $branch->name_ar }}</option> <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
...@@ -75,7 +75,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -75,7 +75,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="amount" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المبلغ (ج.م)') }} <span class="text-red-500">*</span></label> <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المبلغ (ج.م)') }} <span class="text-red-500">*</span></label>
<input type="number" id="amount" wire:model="amount" step="0.01" min="0.01" dir="ltr" <input type="number" id="amount" wire:model="amount" step="0.01" min="0.01" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('amount') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('amount') border-red-500 @enderror">
@error('amount') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('amount') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -83,7 +83,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -83,7 +83,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="effective_from" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البداية') }} <span class="text-red-500">*</span></label> <label for="effective_from" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البداية') }} <span class="text-red-500">*</span></label>
<input type="date" id="effective_from" wire:model="effective_from" dir="ltr" <input type="date" id="effective_from" wire:model="effective_from" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('effective_from') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('effective_from') border-red-500 @enderror">
@error('effective_from') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('effective_from') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -91,7 +91,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -91,7 +91,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="effective_to" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ النهاية') }}</label> <label for="effective_to" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ النهاية') }}</label>
<input type="date" id="effective_to" wire:model="effective_to" dir="ltr" <input type="date" id="effective_to" wire:model="effective_to" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('effective_to') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('effective_to') border-red-500 @enderror">
<p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً للسعر المفتوح') }}</p> <p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً للسعر المفتوح') }}</p>
@error('effective_to') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('effective_to') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -100,39 +100,39 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -100,39 +100,39 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="priority" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الأولوية') }}</label> <label for="priority" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الأولوية') }}</label>
<input type="number" id="priority" wire:model="priority" min="0" dir="ltr" <input type="number" id="priority" wire:model="priority" min="0" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
<p class="mt-1 text-xs text-gray-500">{{ __('الأولوية الأعلى تُطبّق أولاً') }}</p> <p class="mt-1 text-xs text-gray-500">{{ __('الأولوية الأعلى تُطبّق أولاً') }}</p>
</div> </div>
{{-- Is Active --}} {{-- Is Active --}}
<div class="flex items-center gap-3 pt-6"> <div class="min-h-[44px] flex items-center gap-3 pt-6">
<input type="checkbox" id="is_active" wire:model="is_active" <input type="checkbox" id="is_active" wire:model="is_active"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<label for="is_active" class="text-sm font-medium text-gray-700">{{ __('نشط') }}</label> <label for="is_active" class="text-sm font-medium text-gray-700">{{ __('نشط') }}</label>
</div> </div>
{{-- Notes --}} {{-- Notes --}}
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label for="notes" class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label> <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label>
<textarea id="notes" wire:model="notes" rows="3" <textarea id="notes" wire:model="notes" rows="3"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"</textarea>
@error('notes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('notes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
{{-- Submit --}} {{-- Submit --}}
<div class="mt-6 flex items-center gap-3"> <div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('pricing.base-prices') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium text-sm">
{{ __('إلغاء') }}
</a>
<button type="submit" <button type="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="save" wire:target="save"
class="inline-flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50">
<span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث') : __('حفظ') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث') : __('حفظ') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<a href="{{ route('pricing.base-prices') }}" wire:navigate
class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium text-sm">
{{ __('إلغاء') }}
</a>
</div> </div>
</form> </form>
</div> </div>
......
resources/views/livewire/pricing/base-price-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('الأسعار الأساسية') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('الأسعار الأساسية') }}</h1>
@can('pricing.create') @can('pricing.create')
<a href="{{ route('pricing.base-prices.create') }}" wire:navigate <a href="{{ route('pricing.base-prices.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 text-sm font-medium">
<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> <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> </a>
@endcan @endcan
</div> </div>
{{-- Flash Messages --}} {{-- Flash Messages --}}
@if(session('success')) @if(session('success'))
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm"> <div class="mb-4 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
{{ session('success') }} {{ session('success') }}
</div> </div>
@endif @endif
@if(session('error')) @if(session('error'))
<div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm"> <div class="mb-4 p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
{{ session('error') }} {{ session('error') }}
</div> </div>
@endif @endif
{{-- Filters --}} {{-- Filters --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
<div class="sm:col-span-2"> <div class="col-span-2 md:col-span-2">
<input type="text" wire:model.live.debounce.300ms="search" <input type="text" wire:model.live.debounce.300ms="search"
placeholder="{{ __('بحث بالاسم...') }}" placeholder="{{ __('بحث بالاسم...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<select wire:model.live="activeFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="activeFilter" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('الكل') }}</option> <option value="">{{ __('الكل') }}</option>
<option value="1">{{ __('نشط') }}</option> <option value="1">{{ __('نشط') }}</option>
<option value="0">{{ __('غير نشط') }}</option> <option value="0">{{ __('غير نشط') }}</option>
...@@ -38,9 +38,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -38,9 +38,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
</div> </div>
{{-- Table --}} {{-- Desktop Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div wire:loading.class="opacity-50 pointer-events-none"> <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
<tr> <tr>
...@@ -125,4 +125,86 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium"> ...@@ -125,4 +125,86 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
</div> </div>
@endif @endif
</div> </div>
{{-- Mobile Cards --}}
<div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
@forelse($prices as $price)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
<div class="flex items-start justify-between gap-2 mb-3">
<div>
<span class="font-medium text-gray-800">{{ $price->name_ar }}</span>
@if($price->priority > 0)
<span class="ms-1 text-xs text-gray-400">({{ $price->priority }})</span>
@endif
</div>
<button wire:click="toggleActive('{{ $price->uuid }}')"
wire:loading.attr="disabled"
class="px-2 py-0.5 text-xs rounded-full shrink-0 {{ $price->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
{{ $price->is_active ? __('نشط') : __('غير نشط') }}
</button>
</div>
<div class="space-y-1.5 text-sm text-gray-600">
@if($price->priceable)
<div class="flex items-center gap-2">
<span class="text-gray-400">{{ __('العنصر') }}:</span>
<span>{{ $price->priceable->name_ar ?? '-' }}</span>
</div>
@endif
<div class="flex items-center gap-2">
<span class="text-gray-400">{{ __('الفرع') }}:</span>
<span>{{ $price->branch?->name_ar ?? __('الكل') }}</span>
</div>
<div class="flex items-center gap-2">
<span class="text-gray-400">{{ __('المبلغ') }}:</span>
<span class="font-bold text-gray-800" dir="ltr">{{ number_format($price->amount / 100, 2) }} {{ __('ج.م') }}</span>
</div>
<div class="flex items-center gap-2">
<span class="text-gray-400">{{ __('الفترة') }}:</span>
<span dir="ltr">
{{ $price->effective_from?->format('Y-m-d') }}
@if($price->effective_to)
- {{ $price->effective_to->format('Y-m-d') }}
@else
<span class="text-green-600">({{ __('مفتوح') }})</span>
@endif
</span>
</div>
</div>
@can('pricing.update')
<div class="mt-3 pt-3 border-t border-gray-100">
<a href="{{ route('pricing.base-prices.edit', $price) }}" wire:navigate
class="inline-flex items-center gap-1 py-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
{{ __('تعديل') }}
</a>
</div>
@endcan
</div>
@empty
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
<div class="flex flex-col items-center">
<svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<p class="text-gray-500 text-sm">{{ __('لا توجد أسعار أساسية') }}</p>
@can('pricing.create')
<a href="{{ route('pricing.base-prices.create') }}" wire:navigate
class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
{{ __('إضافة أول سعر') }}
</a>
@endcan
</div>
</div>
@endforelse
@if($prices->hasPages())
<div class="mt-4">
{{ $prices->links() }}
</div>
@endif
</div>
</div> </div>
resources/views/livewire/pricing/pricing-rule-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800"> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
{{ $editing ? __('تعديل قاعدة التسعير') : __('إضافة قاعدة تسعير') }} {{ $editing ? __('تعديل قاعدة التسعير') : __('إضافة قاعدة تسعير') }}
</h1> </h1>
<a href="{{ route('pricing.rules') }}" wire:navigate <a href="{{ route('pricing.rules') }}" wire:navigate
...@@ -14,14 +14,14 @@ class="text-gray-600 hover:text-gray-800 text-sm">{{ __('رجوع للقائمة ...@@ -14,14 +14,14 @@ class="text-gray-600 hover:text-gray-800 text-sm">{{ __('رجوع للقائمة
</div> </div>
@endif @endif
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<form wire:submit="save"> <form wire:submit="save">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
{{-- Name Arabic --}} {{-- Name Arabic --}}
<div> <div>
<label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} <span class="text-red-500">*</span></label> <label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} <span class="text-red-500">*</span></label>
<input type="text" id="name_ar" wire:model="name_ar" <input type="text" id="name_ar" wire:model="name_ar"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -29,14 +29,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -29,14 +29,14 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label> <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
<input type="text" id="name" wire:model="name" dir="ltr" <input type="text" id="name" wire:model="name" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
{{-- Rule Type --}} {{-- Rule Type --}}
<div> <div>
<label for="rule_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع القاعدة') }} <span class="text-red-500">*</span></label> <label for="rule_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع القاعدة') }} <span class="text-red-500">*</span></label>
<select id="rule_type" wire:model.live="rule_type" <select id="rule_type" wire:model.live="rule_type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('rule_type') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('rule_type') border-red-500 @enderror">
<option value="">{{ __('اختر نوع القاعدة') }}</option> <option value="">{{ __('اختر نوع القاعدة') }}</option>
@foreach($ruleTypes as $value => $label) @foreach($ruleTypes as $value => $label)
<option value="{{ $value }}">{{ $label }}</option> <option value="{{ $value }}">{{ $label }}</option>
...@@ -49,7 +49,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -49,7 +49,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="adjustment_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع التعديل') }} <span class="text-red-500">*</span></label> <label for="adjustment_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع التعديل') }} <span class="text-red-500">*</span></label>
<select id="adjustment_type" wire:model.live="adjustment_type" <select id="adjustment_type" wire:model.live="adjustment_type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('adjustment_type') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('adjustment_type') border-red-500 @enderror">
<option value="">{{ __('اختر نوع التعديل') }}</option> <option value="">{{ __('اختر نوع التعديل') }}</option>
@foreach($adjustmentTypes as $value => $label) @foreach($adjustmentTypes as $value => $label)
<option value="{{ $value }}">{{ $label }}</option> <option value="{{ $value }}">{{ $label }}</option>
...@@ -69,7 +69,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -69,7 +69,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
@endif @endif
</label> </label>
<input type="number" id="adjustment_value" wire:model="adjustment_value" step="0.01" min="0.01" dir="ltr" <input type="number" id="adjustment_value" wire:model="adjustment_value" step="0.01" min="0.01" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('adjustment_value') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('adjustment_value') border-red-500 @enderror">
@error('adjustment_value') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('adjustment_value') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -77,7 +77,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -77,7 +77,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="branch_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label> <label for="branch_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
<select id="branch_id" wire:model="branch_id" <select id="branch_id" wire:model="branch_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
<option value="">{{ __('كل الفروع') }}</option> <option value="">{{ __('كل الفروع') }}</option>
@foreach($branches as $branch) @foreach($branches as $branch)
<option value="{{ $branch->id }}">{{ $branch->name_ar }}</option> <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
...@@ -89,7 +89,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -89,7 +89,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="priority" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الأولوية') }}</label> <label for="priority" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الأولوية') }}</label>
<input type="number" id="priority" wire:model="priority" min="0" dir="ltr" <input type="number" id="priority" wire:model="priority" min="0" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
<p class="mt-1 text-xs text-gray-500">{{ __('الرقم الأقل يُطبّق أولاً') }}</p> <p class="mt-1 text-xs text-gray-500">{{ __('الرقم الأقل يُطبّق أولاً') }}</p>
</div> </div>
...@@ -97,7 +97,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -97,7 +97,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="max_discount_percent" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للخصم %') }}</label> <label for="max_discount_percent" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للخصم %') }}</label>
<input type="number" id="max_discount_percent" wire:model="max_discount_percent" min="1" max="100" dir="ltr" <input type="number" id="max_discount_percent" wire:model="max_discount_percent" min="1" max="100" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('max_discount_percent') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('max_discount_percent') border-red-500 @enderror">
<p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً لعدم وجود حد') }}</p> <p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً لعدم وجود حد') }}</p>
@error('max_discount_percent') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('max_discount_percent') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -106,7 +106,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -106,7 +106,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="usage_limit" class="block text-sm font-medium text-gray-700 mb-1">{{ __('حد الاستخدام') }}</label> <label for="usage_limit" class="block text-sm font-medium text-gray-700 mb-1">{{ __('حد الاستخدام') }}</label>
<input type="number" id="usage_limit" wire:model="usage_limit" min="1" dir="ltr" <input type="number" id="usage_limit" wire:model="usage_limit" min="1" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
<p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً لاستخدام غير محدود') }}</p> <p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً لاستخدام غير محدود') }}</p>
</div> </div>
...@@ -114,7 +114,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -114,7 +114,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="effective_from" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البداية') }} <span class="text-red-500">*</span></label> <label for="effective_from" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البداية') }} <span class="text-red-500">*</span></label>
<input type="date" id="effective_from" wire:model="effective_from" dir="ltr" <input type="date" id="effective_from" wire:model="effective_from" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('effective_from') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('effective_from') border-red-500 @enderror">
@error('effective_from') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('effective_from') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -122,19 +122,19 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -122,19 +122,19 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="effective_to" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ النهاية') }}</label> <label for="effective_to" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ النهاية') }}</label>
<input type="date" id="effective_to" wire:model="effective_to" dir="ltr" <input type="date" id="effective_to" wire:model="effective_to" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('effective_to') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('effective_to') border-red-500 @enderror">
@error('effective_to') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('effective_to') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
{{-- Is Stackable --}} {{-- Is Stackable --}}
<div class="flex items-center gap-3 pt-6"> <div class="min-h-[44px] flex items-center gap-3 pt-6">
<input type="checkbox" id="is_stackable" wire:model="is_stackable" <input type="checkbox" id="is_stackable" wire:model="is_stackable"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<label for="is_stackable" class="text-sm font-medium text-gray-700">{{ __('قابل للتكديس مع قواعد أخرى') }}</label> <label for="is_stackable" class="text-sm font-medium text-gray-700">{{ __('قابل للتكديس مع قواعد أخرى') }}</label>
</div> </div>
{{-- Is Active --}} {{-- Is Active --}}
<div class="flex items-center gap-3 pt-6"> <div class="min-h-[44px] flex items-center gap-3 pt-6">
<input type="checkbox" id="is_active" wire:model="is_active" <input type="checkbox" id="is_active" wire:model="is_active"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<label for="is_active" class="text-sm font-medium text-gray-700">{{ __('نشط') }}</label> <label for="is_active" class="text-sm font-medium text-gray-700">{{ __('نشط') }}</label>
...@@ -144,7 +144,7 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -144,7 +144,7 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
{{-- Conditions Section --}} {{-- Conditions Section --}}
@if($rule_type) @if($rule_type)
<div class="mt-6 border-t border-gray-200 pt-6"> <div class="mt-6 border-t border-gray-200 pt-6">
<h3 class="text-lg font-medium text-gray-800 mb-4">{{ __('الشروط') }}</h3> <h3 class="text-base sm:text-lg font-medium text-gray-800 mb-4">{{ __('الشروط') }}</h3>
<div class="bg-gray-50 rounded-lg p-4" x-data="{ conditions: @entangle('conditions') }"> <div class="bg-gray-50 rounded-lg p-4" x-data="{ conditions: @entangle('conditions') }">
@switch($rule_type) @switch($rule_type)
@case('age') @case('age')
...@@ -153,13 +153,13 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -153,13 +153,13 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأدنى') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأدنى') }}</label>
<input type="number" min="0" dir="ltr" <input type="number" min="0" dir="ltr"
x-model.number="conditions.min_age" x-model.number="conditions.min_age"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأقصى') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأقصى') }}</label>
<input type="number" min="0" dir="ltr" <input type="number" min="0" dir="ltr"
x-model.number="conditions.max_age" x-model.number="conditions.max_age"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
</div> </div>
@break @break
...@@ -170,13 +170,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -170,13 +170,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى (أشهر)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى (أشهر)') }}</label>
<input type="number" min="0" dir="ltr" <input type="number" min="0" dir="ltr"
x-model.number="conditions.min_months" x-model.number="conditions.min_months"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى (أشهر)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى (أشهر)') }}</label>
<input type="number" min="0" dir="ltr" <input type="number" min="0" dir="ltr"
x-model.number="conditions.max_months" x-model.number="conditions.max_months"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
</div> </div>
@break @break
...@@ -187,13 +187,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -187,13 +187,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى لحجم الأسرة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى لحجم الأسرة') }}</label>
<input type="number" min="1" dir="ltr" <input type="number" min="1" dir="ltr"
x-model.number="conditions.min_family_size" x-model.number="conditions.min_family_size"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى لحجم الأسرة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى لحجم الأسرة') }}</label>
<input type="number" min="1" dir="ltr" <input type="number" min="1" dir="ltr"
x-model.number="conditions.max_family_size" x-model.number="conditions.max_family_size"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
</div> </div>
@break @break
...@@ -247,13 +247,13 @@ class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -247,13 +247,13 @@ class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التسجيل قبل تاريخ') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التسجيل قبل تاريخ') }}</label>
<input type="date" dir="ltr" <input type="date" dir="ltr"
x-model="conditions.before_date" x-model="conditions.before_date"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('خلال أول (أيام)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('خلال أول (أيام)') }}</label>
<input type="number" min="1" dir="ltr" <input type="number" min="1" dir="ltr"
x-model.number="conditions.within_days" x-model.number="conditions.within_days"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
</div> </div>
@break @break
...@@ -273,13 +273,13 @@ class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 ...@@ -273,13 +273,13 @@ class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من تاريخ') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من تاريخ') }}</label>
<input type="date" dir="ltr" <input type="date" dir="ltr"
x-model="conditions.season_start" x-model="conditions.season_start"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إلى تاريخ') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إلى تاريخ') }}</label>
<input type="date" dir="ltr" <input type="date" dir="ltr"
x-model="conditions.season_end" x-model="conditions.season_end"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
</div> </div>
@break @break
...@@ -304,13 +304,13 @@ class="w-3 h-3 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -304,13 +304,13 @@ class="w-3 h-3 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من الساعة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من الساعة') }}</label>
<input type="time" dir="ltr" <input type="time" dir="ltr"
x-model="conditions.start_time" x-model="conditions.start_time"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إلى الساعة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إلى الساعة') }}</label>
<input type="time" dir="ltr" <input type="time" dir="ltr"
x-model="conditions.end_time" x-model="conditions.end_time"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
</div> </div>
</div> </div>
...@@ -355,18 +355,18 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -355,18 +355,18 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
@endif @endif
{{-- Submit --}} {{-- Submit --}}
<div class="mt-6 flex items-center gap-3"> <div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('pricing.rules') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium text-sm">
{{ __('إلغاء') }}
</a>
<button type="submit" <button type="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="save" wire:target="save"
class="inline-flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50">
<span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث') : __('حفظ') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث') : __('حفظ') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<a href="{{ route('pricing.rules') }}" wire:navigate
class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium text-sm">
{{ __('إلغاء') }}
</a>
</div> </div>
</form> </form>
</div> </div>
......
resources/views/livewire/pricing/pricing-rule-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('قواعد التسعير') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('قواعد التسعير') }}</h1>
@can('pricing.create') @can('pricing.create')
<a href="{{ route('pricing.rules.create') }}" wire:navigate <a href="{{ route('pricing.rules.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 text-sm font-medium">
......
resources/views/livewire/pricing/promotion-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800"> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
{{ $editing ? __('تعديل العرض') : __('إضافة عرض / كوبون') }} {{ $editing ? __('تعديل العرض') : __('إضافة عرض / كوبون') }}
</h1> </h1>
<a href="{{ route('pricing.promotions') }}" wire:navigate <a href="{{ route('pricing.promotions') }}" wire:navigate
...@@ -14,7 +14,7 @@ class="text-gray-600 hover:text-gray-800 text-sm">{{ __('رجوع للقائمة ...@@ -14,7 +14,7 @@ class="text-gray-600 hover:text-gray-800 text-sm">{{ __('رجوع للقائمة
</div> </div>
@endif @endif
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<form wire:submit="save"> <form wire:submit="save">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
{{-- Name Arabic --}} {{-- Name Arabic --}}
......
resources/views/livewire/pricing/promotion-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('العروض والكوبونات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('العروض والكوبونات') }}</h1>
@can('pricing.create') @can('pricing.create')
<a href="{{ route('pricing.promotions.create') }}" wire:navigate <a href="{{ route('pricing.promotions.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 text-sm font-medium">
......
resources/views/livewire/profile/notification-preferences.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('تفضيلات الإشعارات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تفضيلات الإشعارات') }}</h1>
<a href="{{ route('profile') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للملف الشخصي') }}</a> <a href="{{ route('profile') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للملف الشخصي') }}</a>
</div> </div>
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
@endif @endif
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="p-4 bg-gray-50 border-b"> {{-- Desktop grid header --}}
<div class="hidden md:block p-4 bg-gray-50 border-b">
<div class="grid grid-cols-4 gap-4 text-sm font-medium text-gray-600"> <div class="grid grid-cols-4 gap-4 text-sm font-medium text-gray-600">
<div class="col-span-1">{{ __('نوع الإشعار') }}</div> <div class="col-span-1">{{ __('نوع الإشعار') }}</div>
<div class="text-center">{{ __('بريد') }}</div> <div class="text-center">{{ __('بريد') }}</div>
...@@ -18,7 +19,8 @@ ...@@ -18,7 +19,8 @@
</div> </div>
</div> </div>
<div class="divide-y"> {{-- Desktop grid rows --}}
<div class="hidden md:block divide-y">
@foreach($eventTypes as $type => $label) @foreach($eventTypes as $type => $label)
<div class="grid grid-cols-4 gap-4 p-4 items-center hover:bg-gray-50"> <div class="grid grid-cols-4 gap-4 p-4 items-center hover:bg-gray-50">
<div class="col-span-1 text-sm text-gray-800">{{ $label }}</div> <div class="col-span-1 text-sm text-gray-800">{{ $label }}</div>
...@@ -38,10 +40,36 @@ class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" disabl ...@@ -38,10 +40,36 @@ class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" disabl
@endforeach @endforeach
</div> </div>
{{-- Mobile card layout --}}
<div class="md:hidden divide-y">
@foreach($eventTypes as $type => $label)
<div class="p-4 space-y-3">
<div class="text-sm font-medium text-gray-800">{{ $label }}</div>
<div class="flex items-center gap-5">
<label class="flex items-center gap-1.5 text-xs text-gray-600">
<input type="checkbox" wire:model="preferences.{{ $type }}.email"
class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
{{ __('بريد') }}
</label>
<label class="flex items-center gap-1.5 text-xs text-gray-600">
<input type="checkbox" wire:model="preferences.{{ $type }}.sms"
class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
{{ __('SMS') }}
</label>
<label class="flex items-center gap-1.5 text-xs text-gray-600">
<input type="checkbox" wire:model="preferences.{{ $type }}.in_app"
class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" disabled>
{{ __('داخلي') }}
</label>
</div>
</div>
@endforeach
</div>
<div class="p-4 bg-gray-50 border-t"> <div class="p-4 bg-gray-50 border-t">
<p class="text-xs text-gray-500 mb-3">{{ __('الإشعارات الداخلية لا يمكن تعطيلها') }}</p> <p class="text-xs text-gray-500 mb-3">{{ __('الإشعارات الداخلية لا يمكن تعطيلها') }}</p>
<button wire:click="save" wire:loading.attr="disabled" <button wire:click="save" wire:loading.attr="disabled"
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium"> class="px-6 py-2.5 w-full sm:w-auto bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
<span wire:loading.remove wire:target="save">{{ __('حفظ التفضيلات') }}</span> <span wire:loading.remove wire:target="save">{{ __('حفظ التفضيلات') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
......
resources/views/livewire/profile/user-profile.blade.php
View file @ 944501f1
<div> <div class="max-w-3xl">
<h1 class="text-2xl font-bold text-gray-800 mb-6">{{ __('الملف الشخصي') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6">{{ __('الملف الشخصي') }}</h1>
{{-- Profile Info --}} {{-- Profile Info --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('المعلومات الشخصية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">{{ __('المعلومات الشخصية') }}</h2>
@if(session('success')) @if(session('success'))
<div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">{{ session('success') }}</div> <div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">{{ session('success') }}</div>
@endif @endif
<form wire:submit="updateProfile" class="space-y-4"> <form wire:submit="updateProfile" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }}</label>
<input type="text" wire:model="name_ar" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="text" wire:model="name_ar" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('name_ar') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('name_ar') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
<input type="text" wire:model="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="text" wire:model="name" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label>
<input type="email" wire:model="email" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="email" wire:model="email" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
<button type="submit" wire:loading.attr="disabled" wire:target="updateProfile" <button type="submit" wire:loading.attr="disabled" wire:target="updateProfile"
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium"> class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
<span wire:loading.remove wire:target="updateProfile">{{ __('حفظ التغييرات') }}</span> <span wire:loading.remove wire:target="updateProfile">{{ __('حفظ التغييرات') }}</span>
<span wire:loading wire:target="updateProfile">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="updateProfile">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
...@@ -36,8 +36,8 @@ class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:op ...@@ -36,8 +36,8 @@ class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:op
</div> </div>
{{-- Change Password --}} {{-- Change Password --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('تغيير كلمة المرور') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">{{ __('تغيير كلمة المرور') }}</h2>
@if(session('password_success')) @if(session('password_success'))
<div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">{{ session('password_success') }}</div> <div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">{{ session('password_success') }}</div>
......
resources/views/livewire/programs/program-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل البرنامج') : __('إنشاء برنامج جديد') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل البرنامج') : __('إنشاء برنامج جديد') }}</h1>
<a href="{{ route('programs.list') }}" wire:navigate <a href="{{ route('programs.list') }}" wire:navigate
class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للقائمة') }}</a> class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للقائمة') }}</a>
</div> </div>
...@@ -13,22 +13,22 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -13,22 +13,22 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
{{-- Basic Info --}} {{-- Basic Info --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('المعلومات الأساسية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('المعلومات الأساسية') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم البرنامج بالعربية') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم البرنامج بالعربية') }} <span class="text-red-500">*</span></label>
<input type="text" wire:model="name_ar" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="text" wire:model="name_ar" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم البرنامج بالإنجليزية') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم البرنامج بالإنجليزية') }} <span class="text-red-500">*</span></label>
<input type="text" wire:model="name" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="text" wire:model="name" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('النشاط') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('النشاط') }} <span class="text-red-500">*</span></label>
<select wire:model="activity_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model="activity_id" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('اختر النشاط') }}</option> <option value="">{{ __('اختر النشاط') }}</option>
@foreach($activities as $activity) @foreach($activities as $activity)
<option value="{{ $activity->id }}">{{ $activity->name_ar }}</option> <option value="{{ $activity->id }}">{{ $activity->name_ar }}</option>
...@@ -38,7 +38,7 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -38,7 +38,7 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
<select wire:model="branch_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model="branch_id" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل الفروع') }}</option> <option value="">{{ __('كل الفروع') }}</option>
@foreach($branches as $branch) @foreach($branches as $branch)
<option value="{{ $branch->id }}">{{ $branch->name_ar }}</option> <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
...@@ -46,20 +46,20 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -46,20 +46,20 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</select> </select>
@error('branch_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('branch_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالعربية') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالعربية') }}</label>
<textarea wire:model="description_ar" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> <textarea wire:model="description_ar" rows="3" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
</div> </div>
</div> </div>
</div> </div>
{{-- Configuration --}} {{-- Configuration --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('إعدادات البرنامج') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('إعدادات البرنامج') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مستوى المهارة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مستوى المهارة') }}</label>
<select wire:model="skill_level" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model="skill_level" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="all">{{ __('الكل') }}</option> <option value="all">{{ __('الكل') }}</option>
<option value="beginner">{{ __('مبتدئ') }}</option> <option value="beginner">{{ __('مبتدئ') }}</option>
<option value="intermediate">{{ __('متوسط') }}</option> <option value="intermediate">{{ __('متوسط') }}</option>
...@@ -69,7 +69,7 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -69,7 +69,7 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }}</label>
<select wire:model="gender" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model="gender" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="all">{{ __('الكل') }}</option> <option value="all">{{ __('الكل') }}</option>
<option value="male">{{ __('ذكور') }}</option> <option value="male">{{ __('ذكور') }}</option>
<option value="female">{{ __('إناث') }}</option> <option value="female">{{ __('إناث') }}</option>
...@@ -77,7 +77,7 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -77,7 +77,7 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سياسة التجديد') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سياسة التجديد') }}</label>
<select wire:model="renewal_policy" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model="renewal_policy" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="manual_renew">{{ __('تجديد يدوي') }}</option> <option value="manual_renew">{{ __('تجديد يدوي') }}</option>
<option value="auto_renew">{{ __('تجديد تلقائي') }}</option> <option value="auto_renew">{{ __('تجديد تلقائي') }}</option>
<option value="one_time">{{ __('مرة واحدة') }}</option> <option value="one_time">{{ __('مرة واحدة') }}</option>
...@@ -85,48 +85,48 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -85,48 +85,48 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأدنى') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأدنى') }}</label>
<input type="number" wire:model="age_min" min="1" max="99" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="number" wire:model="age_min" min="1" max="99" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأقصى') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأقصى') }}</label>
<input type="number" wire:model="age_max" min="1" max="99" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="number" wire:model="age_max" min="1" max="99" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('حصص/أسبوع') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('حصص/أسبوع') }} <span class="text-red-500">*</span></label>
<input type="number" wire:model="sessions_per_week" min="1" max="7" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="number" wire:model="sessions_per_week" min="1" max="7" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('sessions_per_week') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('sessions_per_week') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مدة الحصة (دقيقة)') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مدة الحصة (دقيقة)') }} <span class="text-red-500">*</span></label>
<input type="number" wire:model="session_duration_minutes" min="15" max="240" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="number" wire:model="session_duration_minutes" min="15" max="240" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('session_duration_minutes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('session_duration_minutes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إجمالي الحصص') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إجمالي الحصص') }}</label>
<input type="number" wire:model="total_sessions" min="1" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="number" wire:model="total_sessions" min="1" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مدة البرنامج (أسابيع)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مدة البرنامج (أسابيع)') }}</label>
<input type="number" wire:model="program_duration_weeks" min="1" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="number" wire:model="program_duration_weeks" min="1" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
</div> </div>
</div> </div>
{{-- Capacity --}} {{-- Capacity --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('السعة') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('السعة') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى') }} <span class="text-red-500">*</span></label>
<input type="number" wire:model="min_participants" min="1" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="number" wire:model="min_participants" min="1" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('min_participants') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('min_participants') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى') }} <span class="text-red-500">*</span></label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى') }} <span class="text-red-500">*</span></label>
<input type="number" wire:model="max_participants" min="1" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="number" wire:model="max_participants" min="1" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('max_participants') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror @error('max_participants') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div class="flex items-end"> <div class="min-h-[44px] flex items-center">
<label class="flex items-center gap-2 cursor-pointer"> <label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="allow_waitlist" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> <input type="checkbox" wire:model="allow_waitlist" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('تفعيل قائمة الانتظار') }}</span> <span class="text-sm text-gray-700">{{ __('تفعيل قائمة الانتظار') }}</span>
...@@ -134,9 +134,9 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -134,9 +134,9 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نسبة الحضور المطلوبة %') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نسبة الحضور المطلوبة %') }}</label>
<input type="number" wire:model="attendance_requirement_percent" min="0" max="100" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="number" wire:model="attendance_requirement_percent" min="0" max="100" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div class="flex items-end"> <div class="min-h-[44px] flex items-center">
<label class="flex items-center gap-2 cursor-pointer"> <label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="assessment_required" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> <input type="checkbox" wire:model="assessment_required" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('يتطلب تقييم') }}</span> <span class="text-sm text-gray-700">{{ __('يتطلب تقييم') }}</span>
...@@ -146,28 +146,28 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -146,28 +146,28 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</div> </div>
{{-- Dates --}} {{-- Dates --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('التواريخ') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('التواريخ') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ بداية البرنامج') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ بداية البرنامج') }}</label>
<input type="date" wire:model="program_start_date" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="date" wire:model="program_start_date" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ نهاية البرنامج') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ نهاية البرنامج') }}</label>
<input type="date" wire:model="program_end_date" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="date" wire:model="program_end_date" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('آخر موعد للتسجيل') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('آخر موعد للتسجيل') }}</label>
<input type="date" wire:model="registration_deadline" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="date" wire:model="registration_deadline" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div class="flex items-end"> <div class="min-h-[44px] flex items-center">
<label class="flex items-center gap-2 cursor-pointer"> <label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="registration_open" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> <input type="checkbox" wire:model="registration_open" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('التسجيل مفتوح') }}</span> <span class="text-sm text-gray-700">{{ __('التسجيل مفتوح') }}</span>
</label> </label>
</div> </div>
<div class="flex items-end"> <div class="min-h-[44px] flex items-center">
<label class="flex items-center gap-2 cursor-pointer"> <label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="featured" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> <input type="checkbox" wire:model="featured" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('برنامج مميز') }}</span> <span class="text-sm text-gray-700">{{ __('برنامج مميز') }}</span>
...@@ -177,14 +177,14 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق ...@@ -177,14 +177,14 @@ class="text-sm text-gray-600 hover:text-gray-800">{{ __('← العودة للق
</div> </div>
{{-- Pricing --}} {{-- Pricing --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('الأسعار') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('الأسعار') }}</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر العضو (ج.م)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر العضو (ج.م)') }}</label>
<input type="number" wire:model="member_price" dir="ltr" step="0.01" min="0" <input type="number" wire:model="member_price" dir="ltr" step="0.01" min="0"
placeholder="0.00" placeholder="0.00"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('member_price') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('member_price') border-red-500 @enderror">
@error('member_price') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('member_price') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
<p class="text-xs text-gray-500 mt-1">{{ __('السعر لأعضاء النادي') }}</p> <p class="text-xs text-gray-500 mt-1">{{ __('السعر لأعضاء النادي') }}</p>
</div> </div>
...@@ -192,7 +192,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -192,7 +192,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر غير العضو (ج.م)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر غير العضو (ج.م)') }}</label>
<input type="number" wire:model="non_member_price" dir="ltr" step="0.01" min="0" <input type="number" wire:model="non_member_price" dir="ltr" step="0.01" min="0"
placeholder="0.00" placeholder="0.00"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('non_member_price') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('non_member_price') border-red-500 @enderror">
@error('non_member_price') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('non_member_price') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
<p class="text-xs text-gray-500 mt-1">{{ __('السعر لغير الأعضاء') }}</p> <p class="text-xs text-gray-500 mt-1">{{ __('السعر لغير الأعضاء') }}</p>
</div> </div>
...@@ -200,16 +200,16 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -200,16 +200,16 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
{{-- Submit --}} {{-- Submit --}}
<div class="flex items-center gap-3"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('programs.list') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 font-medium text-sm">
{{ __('إلغاء') }}
</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50">
<span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث البرنامج') : __('إنشاء البرنامج') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث البرنامج') : __('إنشاء البرنامج') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
<a href="{{ route('programs.list') }}" wire:navigate
class="px-6 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 font-medium text-sm">
{{ __('إلغاء') }}
</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/programs/program-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('البرامج التدريبية') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('البرامج التدريبية') }}</h1>
@permission('programs.create') @permission('programs.create')
<a href="{{ route('programs.create') }}" wire:navigate <a href="{{ route('programs.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 text-sm font-medium">
<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> <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> </a>
@endpermission @endpermission
</div> </div>
{{-- Flash Messages --}} {{-- Flash Messages --}}
@if(session('success')) @if(session('success'))
<div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm"> <div class="mb-4 p-3 sm:p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm">
{{ session('success') }} {{ session('success') }}
</div> </div>
@endif @endif
@if(session('error')) @if(session('error'))
<div class="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"> <div class="mb-4 p-3 sm:p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
{{ session('error') }} {{ session('error') }}
</div> </div>
@endif @endif
<!-- Filters --> <!-- Filters -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
<div class="flex flex-col sm:flex-row gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
<div class="flex-1"> <div class="col-span-2 md:col-span-1">
<input type="text" wire:model.live.debounce.300ms="search" <input type="text" wire:model.live.debounce.300ms="search"
placeholder="{{ __('بحث بالاسم...') }}" placeholder="{{ __('بحث بالاسم...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<select wire:model.live="activityFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="activityFilter" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل الأنشطة') }}</option> <option value="">{{ __('كل الأنشطة') }}</option>
@foreach($activities as $activity) @foreach($activities as $activity)
<option value="{{ $activity->id }}">{{ $activity->name_ar }}</option> <option value="{{ $activity->id }}">{{ $activity->name_ar }}</option>
@endforeach @endforeach
</select> </select>
<select wire:model.live="status" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="status" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل الحالات') }}</option> <option value="">{{ __('كل الحالات') }}</option>
@foreach($statusOptions as $key => $label) @foreach($statusOptions as $key => $label)
<option value="{{ $key }}">{{ $label }}</option> <option value="{{ $key }}">{{ $label }}</option>
...@@ -45,8 +45,8 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -45,8 +45,8 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
</div> </div>
<!-- Table --> <!-- Desktop Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none"> <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
...@@ -145,4 +145,73 @@ class="text-red-600 hover:text-red-800 text-sm font-medium"> ...@@ -145,4 +145,73 @@ class="text-red-600 hover:text-red-800 text-sm font-medium">
</div> </div>
@endif @endif
</div> </div>
<!-- Mobile Cards -->
<div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
@forelse($programs as $program)
@php
$statusValue = $program->status->value ?? $program->status;
$statusColors = [
'draft' => 'bg-gray-100 text-gray-700',
'active' => 'bg-green-100 text-green-700',
'full' => 'bg-yellow-100 text-yellow-700',
'closed' => 'bg-red-100 text-red-700',
'archived' => 'bg-purple-100 text-purple-700',
];
@endphp
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
<div class="flex items-start justify-between gap-3 mb-3">
<div class="min-w-0 flex-1">
<p class="font-medium text-gray-800 truncate">{{ $program->name_ar }}</p>
@if($program->name)
<p class="text-xs text-gray-400 truncate" dir="ltr">{{ $program->name }}</p>
@endif
</div>
<span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium shrink-0 {{ $statusColors[$statusValue] ?? 'bg-gray-100 text-gray-700' }}">
{{ $statusOptions[$statusValue] ?? $statusValue }}
</span>
</div>
<div class="flex items-center gap-4 text-sm text-gray-600 mb-3">
<span>{{ $program->activity?->name_ar ?? '-' }}</span>
<span class="text-gray-300">|</span>
<span class="inline-flex items-center gap-1">
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-50 text-blue-700 text-xs font-semibold">{{ $program->groups_count }}</span>
{{ __('مجموعات') }}
</span>
</div>
<div class="flex items-center justify-end gap-4 border-t border-gray-100 pt-3">
@permission('programs.update')
<a href="{{ route('programs.edit', $program) }}" wire:navigate
class="inline-flex items-center gap-1 py-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
{{ __('تعديل') }}
</a>
@endpermission
@permission('programs.delete')
<button wire:click="delete('{{ $program->uuid }}')"
wire:confirm="{{ __('هل أنت متأكد من حذف هذا البرنامج؟') }}"
wire:loading.attr="disabled"
class="inline-flex items-center gap-1 py-2 text-red-600 hover:text-red-800 text-sm font-medium">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
{{ __('حذف') }}
</button>
@endpermission
</div>
</div>
@empty
<div class="bg-white rounded-xl shadow-sm border border-gray-200 px-4 py-12 text-center">
<svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
<p class="text-lg font-medium text-gray-500">{{ __('لا توجد برامج تدريبية') }}</p>
<p class="text-sm text-gray-400 mt-1">{{ __('ابدأ بإضافة برنامج جديد') }}</p>
</div>
@endforelse
@if($programs->hasPages())
<div class="mt-4">
{{ $programs->links() }}
</div>
@endif
</div>
</div> </div>
resources/views/livewire/receptionist/collect-payment-wizard.blade.php
View file @ 944501f1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{{-- Header --}} {{-- Header --}}
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<div> <div>
<h1 class="text-2xl font-bold text-gray-800">{{ __('تحصيل مدفوعات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تحصيل مدفوعات') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('تحصيل مدفوعات من فواتير مستحقة') }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('تحصيل مدفوعات من فواتير مستحقة') }}</p>
</div> </div>
<a href="{{ route('receptionist.dashboard') }}" wire:navigate <a href="{{ route('receptionist.dashboard') }}" wire:navigate
...@@ -67,7 +67,7 @@ class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'curs ...@@ -67,7 +67,7 @@ class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'curs
@endif @endif
{{-- Step Content --}} {{-- Step Content --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
{{-- Step 1: Search Participant --}} {{-- Step 1: Search Participant --}}
@if($currentStep === 1) @if($currentStep === 1)
<div> <div>
......
resources/views/livewire/receptionist/dashboard.blade.php
View file @ 944501f1
<div> <div>
{{-- Header --}} {{-- Header --}}
<div class="flex items-center justify-between mb-8"> <div class="flex items-center justify-between mb-4 sm:mb-8">
<div> <div>
<h1 class="text-2xl font-bold text-gray-800">{{ __('مكتب الاستقبال') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('مكتب الاستقبال') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('اليوم') }}: {{ now()->translatedFormat('l j F Y') }}</p> <p class="text-xs sm:text-sm text-gray-500 mt-1">{{ __('اليوم') }}: {{ now()->translatedFormat('l j F Y') }}</p>
</div> </div>
</div> </div>
{{-- Flash Messages --}} {{-- Flash Messages --}}
@if(session('success')) @if(session('success'))
<div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-green-700 text-sm"> <div class="mb-4 sm:mb-6 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-xl text-green-700 text-sm">
{{ session('success') }} {{ session('success') }}
</div> </div>
@endif @endif
{{-- Today's Stats --}} {{-- Today's Stats — 2x2 on mobile --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center"> <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-blue-100 flex items-center justify-center shrink-0">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<p class="text-xs text-gray-500">{{ __('تسجيلات اليوم') }}</p> <p class="text-xs text-gray-500 truncate">{{ __('تسجيلات اليوم') }}</p>
<p class="text-xl font-bold text-gray-800" dir="ltr">{{ $stats['registrations_today'] }}</p> <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ $stats['registrations_today'] }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center"> <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-green-100 flex items-center justify-center shrink-0">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<p class="text-xs text-gray-500">{{ __('مدفوعات اليوم') }}</p> <p class="text-xs text-gray-500 truncate">{{ __('مدفوعات اليوم') }}</p>
<p class="text-xl font-bold text-gray-800" dir="ltr">{{ number_format($stats['payments_today'] / 100, 2) }} {{ __('ج.م') }}</p> <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ number_format($stats['payments_today'] / 100, 2) }}</p>
<p class="text-xs text-gray-400" dir="ltr">{{ $stats['payments_count'] }} {{ __('عملية') }}</p> <p class="text-xs text-gray-400" dir="ltr">{{ $stats['payments_count'] }} {{ __('عملية') }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<div class="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center"> <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-amber-100 flex items-center justify-center shrink-0">
<svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<p class="text-xs text-gray-500">{{ __('حصص اليوم') }}</p> <p class="text-xs text-gray-500 truncate">{{ __('حصص اليوم') }}</p>
<p class="text-xl font-bold text-gray-800" dir="ltr">{{ $stats['sessions_in_progress'] }} / {{ $stats['sessions_today'] }}</p> <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ $stats['sessions_in_progress'] }} / {{ $stats['sessions_today'] }}</p>
<p class="text-xs text-gray-400">{{ __('جارية / إجمالي') }}</p> <p class="text-xs text-gray-400 hidden sm:block">{{ __('جارية / إجمالي') }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<div class="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center"> <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-purple-100 flex items-center justify-center shrink-0">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<p class="text-xs text-gray-500">{{ __('الحضور') }}</p> <p class="text-xs text-gray-500 truncate">{{ __('الحضور') }}</p>
<p class="text-xl font-bold text-gray-800" dir="ltr">{{ $stats['checked_in'] }}</p> <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ $stats['checked_in'] }}</p>
<p class="text-xs text-gray-400">{{ __('حاضر') }} / {{ $stats['expected_today'] }} {{ __('متوقع') }}</p> <p class="text-xs text-gray-400" dir="ltr">/ {{ $stats['expected_today'] }} {{ __('متوقع') }}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{{-- Quick Actions --}} {{-- Quick Actions — 2-col grid on mobile for large touch targets --}}
<h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('إجراءات سريعة') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-3 sm:mb-4">{{ __('إجراءات سريعة') }}</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5"> <div class="grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-5">
{{-- New Registration --}} {{-- New Registration --}}
@can('participants.create') @can('participants.create')
<a href="{{ route('receptionist.new-registration') }}" wire:navigate <a href="{{ route('receptionist.new-registration') }}" wire:navigate
class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-blue-300 transition-all min-h-16"> class="group bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 hover:shadow-md hover:border-blue-300 transition-all active:scale-[0.97]">
<div class="flex items-center gap-4"> <div class="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 text-center sm:text-start">
<div class="w-14 h-14 rounded-xl bg-blue-600 flex items-center justify-center group-hover:scale-110 transition-transform"> <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-blue-600 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<h3 class="font-bold text-gray-800 text-lg">{{ __('تسجيل جديد') }}</h3> <h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('تسجيل جديد') }}</h3>
<p class="text-sm text-gray-500">{{ __('تسجيل مشترك جديد + ولي أمر + برنامج') }}</p> <p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('تسجيل مشترك جديد + ولي أمر + برنامج') }}</p>
</div> </div>
</div> </div>
</a> </a>
...@@ -100,16 +100,16 @@ class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shad ...@@ -100,16 +100,16 @@ class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shad
{{-- Enroll Existing --}} {{-- Enroll Existing --}}
@can('enrollments.create') @can('enrollments.create')
<a href="{{ route('receptionist.enroll-existing') }}" wire:navigate <a href="{{ route('receptionist.enroll-existing') }}" wire:navigate
class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-emerald-300 transition-all min-h-16"> class="group bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 hover:shadow-md hover:border-emerald-300 transition-all active:scale-[0.97]">
<div class="flex items-center gap-4"> <div class="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 text-center sm:text-start">
<div class="w-14 h-14 rounded-xl bg-emerald-600 flex items-center justify-center group-hover:scale-110 transition-transform"> <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-emerald-600 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<h3 class="font-bold text-gray-800 text-lg">{{ __('تسجيل في برنامج') }}</h3> <h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('تسجيل في برنامج') }}</h3>
<p class="text-sm text-gray-500">{{ __('تسجيل مشترك حالي في برنامج جديد') }}</p> <p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('تسجيل مشترك حالي في برنامج جديد') }}</p>
</div> </div>
</div> </div>
</a> </a>
...@@ -118,16 +118,16 @@ class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shad ...@@ -118,16 +118,16 @@ class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shad
{{-- Collect Payment --}} {{-- Collect Payment --}}
@can('invoices.create') @can('invoices.create')
<a href="{{ route('receptionist.collect-payment') }}" wire:navigate <a href="{{ route('receptionist.collect-payment') }}" wire:navigate
class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-amber-300 transition-all min-h-16"> class="group bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 hover:shadow-md hover:border-amber-300 transition-all active:scale-[0.97]">
<div class="flex items-center gap-4"> <div class="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 text-center sm:text-start">
<div class="w-14 h-14 rounded-xl bg-amber-600 flex items-center justify-center group-hover:scale-110 transition-transform"> <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-amber-600 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<h3 class="font-bold text-gray-800 text-lg">{{ __('تحصيل مدفوعات') }}</h3> <h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('تحصيل مدفوعات') }}</h3>
<p class="text-sm text-gray-500">{{ __('تحصيل مدفوعات من فواتير مستحقة') }}</p> <p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('تحصيل مدفوعات من فواتير مستحقة') }}</p>
</div> </div>
</div> </div>
</a> </a>
...@@ -136,16 +136,16 @@ class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shad ...@@ -136,16 +136,16 @@ class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shad
{{-- Product Sale (POS) --}} {{-- Product Sale (POS) --}}
@can('pos.sell') @can('pos.sell')
<a href="{{ route('pos.terminal') }}" wire:navigate <a href="{{ route('pos.terminal') }}" wire:navigate
class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-rose-300 transition-all min-h-16"> class="group bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 hover:shadow-md hover:border-rose-300 transition-all active:scale-[0.97]">
<div class="flex items-center gap-4"> <div class="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 text-center sm:text-start">
<div class="w-14 h-14 rounded-xl bg-rose-600 flex items-center justify-center group-hover:scale-110 transition-transform"> <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-rose-600 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<h3 class="font-bold text-gray-800 text-lg">{{ __('بيع منتج') }}</h3> <h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('بيع منتج') }}</h3>
<p class="text-sm text-gray-500">{{ __('نقطة البيع — بيع سريع') }}</p> <p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('نقطة البيع — بيع سريع') }}</p>
</div> </div>
</div> </div>
</a> </a>
...@@ -154,16 +154,16 @@ class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shad ...@@ -154,16 +154,16 @@ class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shad
{{-- Check-in --}} {{-- Check-in --}}
@can('attendance.mark') @can('attendance.mark')
<a href="{{ route('attendance.list') }}" wire:navigate <a href="{{ route('attendance.list') }}" wire:navigate
class="group bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-purple-300 transition-all min-h-16"> class="group bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 hover:shadow-md hover:border-purple-300 transition-all active:scale-[0.97]">
<div class="flex items-center gap-4"> <div class="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 text-center sm:text-start">
<div class="w-14 h-14 rounded-xl bg-purple-600 flex items-center justify-center group-hover:scale-110 transition-transform"> <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-purple-600 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<h3 class="font-bold text-gray-800 text-lg">{{ __('تسجيل حضور') }}</h3> <h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('تسجيل حضور') }}</h3>
<p class="text-sm text-gray-500">{{ __('بحث عن مشترك وتسجيل حضوره') }}</p> <p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('بحث عن مشترك وتسجيل حضوره') }}</p>
</div> </div>
</div> </div>
</a> </a>
......
resources/views/livewire/receptionist/enroll-existing-wizard.blade.php
View file @ 944501f1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{{-- Header --}} {{-- Header --}}
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<div> <div>
<h1 class="text-2xl font-bold text-gray-800">{{ __('تسجيل في برنامج') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تسجيل في برنامج') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('تسجيل مشترك حالي في برنامج جديد') }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('تسجيل مشترك حالي في برنامج جديد') }}</p>
</div> </div>
<a href="{{ route('receptionist.dashboard') }}" wire:navigate <a href="{{ route('receptionist.dashboard') }}" wire:navigate
...@@ -66,7 +66,7 @@ class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'curs ...@@ -66,7 +66,7 @@ class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'curs
@endif @endif
{{-- Step Content --}} {{-- Step Content --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
{{-- Step 1: Search Participant --}} {{-- Step 1: Search Participant --}}
@if($currentStep === 1) @if($currentStep === 1)
<div> <div>
......
resources/views/livewire/receptionist/new-registration-wizard.blade.php
View file @ 944501f1
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
{{-- Header --}} {{-- Header --}}
<div class="flex items-center justify-between mb-6 print:hidden"> <div class="flex items-center justify-between mb-6 print:hidden">
<div> <div>
<h1 class="text-2xl font-bold text-gray-800">{{ __('تسجيل جديد') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تسجيل جديد') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('تسجيل مشترك جديد مع ولي الأمر والبرنامج') }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('تسجيل مشترك جديد مع ولي الأمر والبرنامج') }}</p>
</div> </div>
<a href="{{ route('receptionist.dashboard') }}" wire:navigate <a href="{{ route('receptionist.dashboard') }}" wire:navigate
...@@ -106,7 +106,7 @@ class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'curs ...@@ -106,7 +106,7 @@ class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'curs
@endif @endif
{{-- Step Content --}} {{-- Step Content --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
{{-- Step 1: Guardian Info --}} {{-- Step 1: Guardian Info --}}
@if($currentStep === 1) @if($currentStep === 1)
<div> <div>
......
resources/views/livewire/reports/attendance-report.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('تقرير الحضور') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تقرير الحضور') }}</h1>
<a href="{{ route('reports.view') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للتقارير') }}</a> <a href="{{ route('reports.view') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للتقارير') }}</a>
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<div class="flex flex-wrap items-end gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('البرنامج') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('البرنامج') }}</label>
<select wire:model.live="programFilter" class="rounded-lg border-gray-300 text-sm min-w-[180px]"> <select wire:model.live="programFilter" class="w-full rounded-lg border-gray-300 text-sm">
<option value="">{{ __('كل البرامج') }}</option> <option value="">{{ __('كل البرامج') }}</option>
@foreach($programs as $program) @foreach($programs as $program)
<option value="{{ $program->id }}">{{ $program->name_ar }}</option> <option value="{{ $program->id }}">{{ $program->name_ar }}</option>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</div> </div>
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('المجموعة') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('المجموعة') }}</label>
<select wire:model.live="groupFilter" class="rounded-lg border-gray-300 text-sm min-w-[180px]"> <select wire:model.live="groupFilter" class="w-full rounded-lg border-gray-300 text-sm">
<option value="">{{ __('كل المجموعات') }}</option> <option value="">{{ __('كل المجموعات') }}</option>
@foreach($groups as $group) @foreach($groups as $group)
<option value="{{ $group->id }}">{{ $group->name_ar }}</option> <option value="{{ $group->id }}">{{ $group->name_ar }}</option>
...@@ -27,18 +27,19 @@ ...@@ -27,18 +27,19 @@
</div> </div>
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('من') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('من') }}</label>
<input type="date" wire:model.live="dateFrom" dir="ltr" class="rounded-lg border-gray-300 text-sm"> <input type="date" wire:model.live="dateFrom" dir="ltr" class="w-full rounded-lg border-gray-300 text-sm">
</div> </div>
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('إلى') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('إلى') }}</label>
<input type="date" wire:model.live="dateTo" dir="ltr" class="rounded-lg border-gray-300 text-sm"> <input type="date" wire:model.live="dateTo" dir="ltr" class="w-full rounded-lg border-gray-300 text-sm">
</div> </div>
<div> <div class="col-span-2 md:col-span-1">
<label class="block text-sm text-gray-600 mb-1 invisible">{{ __('تصدير') }}</label>
<button <button
wire:click="export" wire:click="export"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="export" wire:target="export"
class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition disabled:opacity-50" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition disabled:opacity-50"
> >
<span wire:loading.remove wire:target="export"> <span wire:loading.remove wire:target="export">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
...@@ -53,22 +54,22 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm ...@@ -53,22 +54,22 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm
</div> </div>
<!-- Summary Cards --> <!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<p class="text-sm text-gray-500">{{ __('نسبة الحضور الإجمالية') }}</p> <p class="text-sm text-gray-500">{{ __('نسبة الحضور الإجمالية') }}</p>
<p class="text-2xl font-bold mt-1 {{ $summary->overall_rate >= 85 ? 'text-green-600' : ($summary->overall_rate >= 75 ? 'text-amber-600' : 'text-red-600') }}"> <p class="text-xl sm:text-2xl font-bold mt-1 {{ $summary->overall_rate >= 85 ? 'text-green-600' : ($summary->overall_rate >= 75 ? 'text-amber-600' : 'text-red-600') }}">
{{ $summary->overall_rate }}% {{ $summary->overall_rate }}%
</p> </p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<p class="text-sm text-gray-500">{{ __('إجمالي الحصص') }}</p> <p class="text-sm text-gray-500">{{ __('إجمالي الحصص') }}</p>
<p class="text-2xl font-bold text-blue-600 mt-1">{{ $summary->total_sessions }}</p> <p class="text-xl sm:text-2xl font-bold text-blue-600 mt-1">{{ $summary->total_sessions }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<p class="text-sm text-gray-500">{{ __('متوسط الحاضرين لكل حصة') }}</p> <p class="text-sm text-gray-500">{{ __('متوسط الحاضرين لكل حصة') }}</p>
<p class="text-2xl font-bold text-indigo-600 mt-1">{{ $summary->avg_present_per_session }}</p> <p class="text-xl sm:text-2xl font-bold text-indigo-600 mt-1">{{ $summary->avg_present_per_session }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div> <div>
<p class="text-sm text-gray-500">{{ __('أفضل يوم') }}</p> <p class="text-sm text-gray-500">{{ __('أفضل يوم') }}</p>
...@@ -95,7 +96,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm ...@@ -95,7 +96,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm
<!-- Participant Attendance Table --> <!-- Participant Attendance Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden" wire:loading.class="opacity-50 pointer-events-none"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden" wire:loading.class="opacity-50 pointer-events-none">
@if($participantStats->isNotEmpty()) @if($participantStats->isNotEmpty())
<div class="overflow-x-auto"> <div class="hidden md:block overflow-x-auto">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
<tr> <tr>
...@@ -186,6 +187,47 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm ...@@ -186,6 +187,47 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm
</tbody> </tbody>
</table> </table>
</div> </div>
{{-- Mobile Cards --}}
<div class="md:hidden divide-y divide-gray-100">
@foreach($participantStats as $stat)
<div class="p-4">
<div class="flex items-center justify-between mb-2">
<div>
<div class="font-medium text-sm text-gray-800">{{ $stat->name }}</div>
@if($stat->participant_number)
<div class="text-xs text-gray-400" dir="ltr">#{{ $stat->participant_number }}</div>
@endif
</div>
@php
$rateColor = $stat->rate >= 85 ? 'text-green-600' : ($stat->rate >= 75 ? 'text-amber-600' : 'text-red-600');
$rateBg = $stat->rate >= 85 ? 'bg-green-50' : ($stat->rate >= 75 ? 'bg-amber-50' : 'bg-red-50');
@endphp
<span class="inline-flex items-center px-2 py-1 rounded-lg text-sm font-bold {{ $rateColor }} {{ $rateBg }}">
{{ $stat->rate }}%
</span>
</div>
<div class="grid grid-cols-4 gap-2 text-center text-xs">
<div>
<span class="inline-flex items-center justify-center min-w-[24px] px-1.5 py-0.5 rounded-full font-medium bg-green-100 text-green-700">{{ $stat->present_count }}</span>
<p class="mt-1 text-gray-400">{{ __('حاضر') }}</p>
</div>
<div>
<span class="inline-flex items-center justify-center min-w-[24px] px-1.5 py-0.5 rounded-full font-medium bg-amber-100 text-amber-700">{{ $stat->late_count }}</span>
<p class="mt-1 text-gray-400">{{ __('متأخر') }}</p>
</div>
<div>
<span class="inline-flex items-center justify-center min-w-[24px] px-1.5 py-0.5 rounded-full font-medium bg-red-100 text-red-700">{{ $stat->absent_count }}</span>
<p class="mt-1 text-gray-400">{{ __('غائب') }}</p>
</div>
<div>
<span class="inline-flex items-center justify-center min-w-[24px] px-1.5 py-0.5 rounded-full font-medium bg-blue-100 text-blue-700">{{ $stat->excused_count }}</span>
<p class="mt-1 text-gray-400">{{ __('معذور') }}</p>
</div>
</div>
</div>
@endforeach
</div>
@else @else
<!-- Empty State --> <!-- Empty State -->
<div class="flex flex-col items-center justify-center py-16 px-4"> <div class="flex flex-col items-center justify-center py-16 px-4">
......
resources/views/livewire/reports/financial-report.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('التقرير المالي') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('التقرير المالي') }}</h1>
<a href="{{ route('reports.view') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للتقارير') }}</a> <a href="{{ route('reports.view') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للتقارير') }}</a>
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<div class="flex flex-wrap items-end gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('الفترة') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('الفترة') }}</label>
<select wire:model.live="period" class="rounded-lg border-gray-300 text-sm"> <select wire:model.live="period" class="rounded-lg border-gray-300 text-sm">
...@@ -30,29 +30,29 @@ ...@@ -30,29 +30,29 @@
</div> </div>
<!-- Summary Cards --> <!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<p class="text-sm text-gray-500">{{ __('إجمالي الإيرادات') }}</p> <p class="text-sm text-gray-500">{{ __('إجمالي الإيرادات') }}</p>
<p class="text-2xl font-bold text-green-600 mt-1" dir="ltr">{{ format_money($totalRevenue) }}</p> <p class="text-xl sm:text-2xl font-bold text-green-600 mt-1" dir="ltr">{{ format_money($totalRevenue) }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<p class="text-sm text-gray-500">{{ __('إجمالي الفواتير') }}</p> <p class="text-sm text-gray-500">{{ __('إجمالي الفواتير') }}</p>
<p class="text-2xl font-bold text-blue-600 mt-1" dir="ltr">{{ format_money($totalInvoiced) }}</p> <p class="text-xl sm:text-2xl font-bold text-blue-600 mt-1" dir="ltr">{{ format_money($totalInvoiced) }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<p class="text-sm text-gray-500">{{ __('المستحقات المعلقة') }}</p> <p class="text-sm text-gray-500">{{ __('المستحقات المعلقة') }}</p>
<p class="text-2xl font-bold text-orange-600 mt-1" dir="ltr">{{ format_money($totalOutstanding) }}</p> <p class="text-xl sm:text-2xl font-bold text-orange-600 mt-1" dir="ltr">{{ format_money($totalOutstanding) }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<p class="text-sm text-gray-500">{{ __('فواتير متأخرة') }}</p> <p class="text-sm text-gray-500">{{ __('فواتير متأخرة') }}</p>
<p class="text-2xl font-bold text-red-600 mt-1">{{ $overdueCount }}</p> <p class="text-xl sm:text-2xl font-bold text-red-600 mt-1">{{ $overdueCount }}</p>
</div> </div>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6">
<!-- Payment Methods Breakdown --> <!-- Payment Methods Breakdown -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('طرق الدفع') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('طرق الدفع') }}</h3>
@forelse($paymentsByMethod as $method => $amount) @forelse($paymentsByMethod as $method => $amount)
<div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0"> <div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
<span class="text-sm text-gray-700">{{ __($method) }}</span> <span class="text-sm text-gray-700">{{ __($method) }}</span>
...@@ -69,8 +69,8 @@ ...@@ -69,8 +69,8 @@
</div> </div>
<!-- Daily Revenue Chart (simple bars) --> <!-- Daily Revenue Chart (simple bars) -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('الإيرادات اليومية') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('الإيرادات اليومية') }}</h3>
@if(count($dailyRevenue) > 0) @if(count($dailyRevenue) > 0)
@php $maxDaily = max($dailyRevenue) ?: 1; @endphp @php $maxDaily = max($dailyRevenue) ?: 1; @endphp
<div class="space-y-2 max-h-64 overflow-y-auto"> <div class="space-y-2 max-h-64 overflow-y-auto">
...@@ -98,32 +98,54 @@ ...@@ -98,32 +98,54 @@
<!-- Top Programs by Revenue --> <!-- Top Programs by Revenue -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="p-4 border-b border-gray-200"> <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
<h3 class="text-lg font-semibold text-gray-800">{{ __('أعلى البرامج إيراداً') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('أعلى البرامج إيراداً') }}</h3>
</div>
{{-- Desktop Table --}}
<div class="hidden md:block overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">#</th>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('البرنامج') }}</th>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('عدد المبيعات') }}</th>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('الإيرادات') }}</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
@forelse($topPrograms as $i => $program)
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 text-sm text-gray-500">{{ $i + 1 }}</td>
<td class="px-4 py-3 text-sm text-gray-800">{{ $program->description }}</td>
<td class="px-4 py-3 text-sm text-gray-600">{{ $program->count }}</td>
<td class="px-4 py-3 text-sm font-medium text-green-600" dir="ltr">{{ format_money($program->revenue) }}</td>
</tr>
@empty
<tr>
<td colspan="4" class="px-4 py-8 text-center text-sm text-gray-500">{{ __('لا توجد بيانات') }}</td>
</tr>
@endforelse
</tbody>
</table>
</div>
{{-- Mobile Cards --}}
<div class="md:hidden divide-y divide-gray-100">
@forelse($topPrograms as $i => $program)
<div class="p-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="text-sm text-gray-400 font-medium">{{ $i + 1 }}</span>
<div>
<p class="text-sm font-medium text-gray-800">{{ $program->description }}</p>
<p class="text-xs text-gray-500">{{ $program->count }} {{ __('مبيعات') }}</p>
</div>
</div>
<span class="text-sm font-medium text-green-600" dir="ltr">{{ format_money($program->revenue) }}</span>
</div>
@empty
<div class="p-8 text-center text-sm text-gray-500">{{ __('لا توجد بيانات') }}</div>
@endforelse
</div> </div>
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">#</th>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('البرنامج') }}</th>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('عدد المبيعات') }}</th>
<th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('الإيرادات') }}</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
@forelse($topPrograms as $i => $program)
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 text-sm text-gray-500">{{ $i + 1 }}</td>
<td class="px-4 py-3 text-sm text-gray-800">{{ $program->description }}</td>
<td class="px-4 py-3 text-sm text-gray-600">{{ $program->count }}</td>
<td class="px-4 py-3 text-sm font-medium text-green-600" dir="ltr">{{ format_money($program->revenue) }}</td>
</tr>
@empty
<tr>
<td colspan="4" class="px-4 py-8 text-center text-sm text-gray-500">{{ __('لا توجد بيانات') }}</td>
</tr>
@endforelse
</tbody>
</table>
</div> </div>
</div> </div>
resources/views/livewire/reports/reports-page.blade.php
View file @ 944501f1
<div> <div>
<div class="mb-6"> <div class="mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('التقارير') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('التقارير') }}</h1>
</div> </div>
<!-- Report Type Tabs --> <!-- Report Type Tabs -->
...@@ -163,7 +163,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus ...@@ -163,7 +163,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus
<!-- By Membership Type --> <!-- By Membership Type -->
@if(!empty($reportData['by_membership_type'])) @if(!empty($reportData['by_membership_type']))
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('حسب نوع العضوية') }}</h3> <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('حسب نوع العضوية') }}</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
@foreach($reportData['by_membership_type'] as $type => $count) @foreach($reportData['by_membership_type'] as $type => $count)
......
resources/views/livewire/roles/role-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $editing ? 'تعديل الدور' : 'إضافة دور جديد' }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? 'تعديل الدور' : 'إضافة دور جديد' }}</h1>
<a href="{{ route('roles.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">&larr; العودة</a> <a href="{{ route('roles.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">&larr; العودة</a>
</div> </div>
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">معلومات الدور</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">معلومات الدور</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالعربية *</label> <label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالعربية *</label>
<input type="text" wire:model="name_ar" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name_ar') border-red-500 @enderror"> <input type="text" wire:model="name_ar" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالإنجليزية *</label> <label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالإنجليزية *</label>
<input type="text" wire:model="name" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror"> <input type="text" wire:model="name" dir="ltr" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror">
@error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">المعرف (slug) *</label> <label class="block text-sm font-medium text-gray-700 mb-1">المعرف (slug) *</label>
<input type="text" wire:model="slug" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('slug') border-red-500 @enderror" placeholder="custom_role"> <input type="text" wire:model="slug" dir="ltr" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('slug') border-red-500 @enderror" placeholder="custom_role">
@error('slug') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('slug') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">المستوى (0-99) *</label> <label class="block text-sm font-medium text-gray-700 mb-1">المستوى (0-99) *</label>
<input type="number" wire:model="level" min="0" max="99" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('level') border-red-500 @enderror"> <input type="number" wire:model="level" min="0" max="99" dir="ltr" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('level') border-red-500 @enderror">
@error('level') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('level') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div class="md:col-span-2"> <div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">الوصف</label> <label class="block text-sm font-medium text-gray-700 mb-1">الوصف</label>
<textarea wire:model="description" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea> <textarea wire:model="description" rows="2" class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea>
</div> </div>
</div> </div>
</div> </div>
<!-- Permissions --> <!-- Permissions -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">الصلاحيات</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">الصلاحيات</h2>
<div class="space-y-6"> <div class="space-y-6">
@foreach($permissionGroups as $module => $permissions) @foreach($permissionGroups as $module => $permissions)
<div> <div>
<h3 class="text-sm font-semibold text-gray-600 mb-2 capitalize">{{ $module }}</h3> <h3 class="text-sm font-semibold text-gray-600 mb-2 capitalize">{{ $module }}</h3>
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-3">
@foreach($permissions as $perm) @foreach($permissions as $perm)
<label class="flex items-center gap-1.5 cursor-pointer"> <label class="min-h-[44px] flex items-center gap-1.5 cursor-pointer">
<input type="checkbox" wire:model="selectedPermissions" value="{{ $perm->id }}" <input type="checkbox" wire:model="selectedPermissions" value="{{ $perm->id }}"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ $perm->action }}</span> <span class="text-sm text-gray-700">{{ $perm->action }}</span>
...@@ -56,13 +56,13 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -56,13 +56,13 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
</div> </div>
</div> </div>
<div class="flex items-center gap-4"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('roles.list') }}" wire:navigate class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">إلغاء</a>
<button type="submit" wire:loading.attr="disabled" <button type="submit" wire:loading.attr="disabled"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 text-sm">
<span wire:loading.remove wire:target="save">{{ $editing ? 'حفظ التعديلات' : 'إنشاء الدور' }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? 'حفظ التعديلات' : 'إنشاء الدور' }}</span>
<span wire:loading wire:target="save">جارٍ الحفظ...</span> <span wire:loading wire:target="save">جارٍ الحفظ...</span>
</button> </button>
<a href="{{ route('roles.list') }}" wire:navigate class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">إلغاء</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/roles/role-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">الأدوار والصلاحيات</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">الأدوار والصلاحيات</h1>
@can('roles.create') @can('roles.create')
<a href="{{ route('roles.create') }}" wire:navigate <a href="{{ route('roles.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 text-sm font-medium">
<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> <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> </a>
@endcan @endcan
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
@foreach($roles as $role) @foreach($roles as $role)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5">
<div class="flex items-start justify-between mb-3"> <div class="flex items-start justify-between mb-3">
<div> <div>
<h3 class="font-semibold text-gray-800">{{ $role->name_ar }}</h3> <h3 class="font-semibold text-gray-800 text-sm sm:text-base">{{ $role->name_ar }}</h3>
<p class="text-xs text-gray-500 font-mono">{{ $role->slug }}</p> <p class="text-xs text-gray-500 font-mono">{{ $role->slug }}</p>
</div> </div>
<span class="px-2 py-0.5 text-xs rounded-full {{ $role->is_system ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700' }}"> <span class="px-2 py-0.5 text-xs rounded-full ms-2 {{ $role->is_system ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700' }}">
{{ $role->is_system ? 'نظام' : 'مخصص' }} {{ $role->is_system ? 'نظام' : 'مخصص' }}
</span> </span>
</div> </div>
<div class="flex items-center justify-between text-sm text-gray-600"> <div class="flex items-center justify-between text-xs sm:text-sm text-gray-600">
<span>المستوى: {{ $role->level }}</span> <span>المستوى: {{ $role->level }}</span>
<span>{{ $role->users_count }} مستخدم</span> <span>{{ $role->users_count }} مستخدم</span>
</div> </div>
@if(!$role->is_system) @if(!$role->is_system)
@can('roles.update') @can('roles.update')
<div class="mt-3 pt-3 border-t border-gray-100"> <div class="mt-3 pt-3 border-t border-gray-100">
<a href="{{ route('roles.edit', $role) }}" wire:navigate class="text-blue-600 hover:text-blue-800 text-sm">تعديل الصلاحيات</a> <a href="{{ route('roles.edit', $role) }}" wire:navigate class="text-blue-600 hover:text-blue-800 text-sm py-2 inline-block">تعديل الصلاحيات</a>
</div> </div>
@endcan @endcan
@endif @endif
......
resources/views/livewire/schedule/weekly-schedule.blade.php
View file @ 944501f1
<div> <div>
<!-- Header --> <!-- Header -->
<div class="mb-6 flex flex-wrap items-center justify-between gap-4"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<div> <div>
<h1 class="text-2xl font-bold text-gray-900">{{ __('الجدول الأسبوعي') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('الجدول الأسبوعي') }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('عرض جلسات التدريب للأسبوع الحالي') }}</p> <p class="mt-1 text-sm text-gray-500">{{ __('عرض جلسات التدريب للأسبوع الحالي') }}</p>
</div> </div>
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
wire:click="previousWeek" wire:click="previousWeek"
class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
> >
<svg class="h-4 w-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="h-4 w-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
...@@ -20,14 +20,14 @@ class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 ...@@ -20,14 +20,14 @@ class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3
<button <button
wire:click="goToToday" wire:click="goToToday"
class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
> >
{{ __('اليوم') }} {{ __('اليوم') }}
</button> </button>
<button <button
wire:click="nextWeek" wire:click="nextWeek"
class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
> >
<span class="me-1">{{ __('التالي') }}</span> <span class="me-1">{{ __('التالي') }}</span>
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
...@@ -38,8 +38,8 @@ class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 ...@@ -38,8 +38,8 @@ class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="mb-6 rounded-lg border border-gray-200 bg-white p-4"> <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 sm:p-6">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div class="grid grid-cols-2 gap-3 sm:gap-4">
<!-- Program Filter --> <!-- Program Filter -->
<div> <div>
<label for="programFilter" class="mb-1 block text-sm font-medium text-gray-700">{{ __('البرنامج') }}</label> <label for="programFilter" class="mb-1 block text-sm font-medium text-gray-700">{{ __('البرنامج') }}</label>
...@@ -74,7 +74,7 @@ class="w-full rounded-lg border-gray-300 text-sm shadow-sm focus:border-blue-500 ...@@ -74,7 +74,7 @@ class="w-full rounded-lg border-gray-300 text-sm shadow-sm focus:border-blue-500
<!-- Week Label --> <!-- Week Label -->
<div class="mb-4 text-center"> <div class="mb-4 text-center">
<span class="text-lg font-semibold text-gray-800"> <span class="text-base sm:text-lg font-semibold text-gray-800">
{{ \Carbon\Carbon::parse($weekStart)->format('Y/m/d') }} {{ \Carbon\Carbon::parse($weekStart)->format('Y/m/d') }}
— —
{{ \Carbon\Carbon::parse($weekStart)->addDays(5)->format('Y/m/d') }} {{ \Carbon\Carbon::parse($weekStart)->addDays(5)->format('Y/m/d') }}
...@@ -161,7 +161,7 @@ class="mb-1 overflow-hidden rounded-md border-s-4 p-1.5 text-xs {{ $colorClass } ...@@ -161,7 +161,7 @@ class="mb-1 overflow-hidden rounded-md border-s-4 p-1.5 text-xs {{ $colorClass }
<!-- Empty State --> <!-- Empty State -->
@if($sessionsByDate->isEmpty()) @if($sessionsByDate->isEmpty())
<div class="mt-4 rounded-lg border border-gray-200 bg-white p-12 text-center"> <div class="mt-4 rounded-lg border border-gray-200 bg-white p-8 sm:p-12 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg> </svg>
...@@ -171,7 +171,7 @@ class="mb-1 overflow-hidden rounded-md border-s-4 p-1.5 text-xs {{ $colorClass } ...@@ -171,7 +171,7 @@ class="mb-1 overflow-hidden rounded-md border-s-4 p-1.5 text-xs {{ $colorClass }
<!-- Legend --> <!-- Legend -->
@if($sessionsByDate->isNotEmpty()) @if($sessionsByDate->isNotEmpty())
<div class="mt-4 rounded-lg border border-gray-200 bg-white p-4"> <div class="mt-4 rounded-lg border border-gray-200 bg-white p-4 sm:p-6">
<h3 class="mb-2 text-sm font-medium text-gray-700">{{ __('دليل الألوان') }}</h3> <h3 class="mb-2 text-sm font-medium text-gray-700">{{ __('دليل الألوان') }}</h3>
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-3">
@foreach($programColors as $programId => $colorClass) @foreach($programColors as $programId => $colorClass)
......
resources/views/livewire/settings/academy-settings.blade.php
View file @ 944501f1
<div> <div>
<div class="mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">إعدادات الأكاديمية</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">إعدادات الأكاديمية</h1>
</div> </div>
@if(session('success')) @if(session('success'))
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
@endif @endif
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">اسم الأكاديمية بالعربية *</label> <label class="block text-sm font-medium text-gray-700 mb-1">اسم الأكاديمية بالعربية *</label>
<input type="text" wire:model="name_ar" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name_ar') border-red-500 @enderror"> <input type="text" wire:model="name_ar" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name_ar') border-red-500 @enderror">
...@@ -54,10 +54,12 @@ ...@@ -54,10 +54,12 @@
</div> </div>
</div> </div>
<button type="submit" wire:loading.attr="disabled" <div class="flex flex-col-reverse sm:flex-row gap-3 mt-4 sm:mt-6">
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400"> <button type="submit" wire:loading.attr="disabled"
<span wire:loading.remove wire:target="save">حفظ الإعدادات</span> class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400">
<span wire:loading wire:target="save">جارٍ الحفظ...</span> <span wire:loading.remove wire:target="save">حفظ الإعدادات</span>
</button> <span wire:loading wire:target="save">جارٍ الحفظ...</span>
</button>
</div>
</form> </form>
</div> </div>
resources/views/livewire/settings/branding-settings.blade.php
View file @ 944501f1
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
} }
}"> }">
<!-- Header --> <!-- Header -->
<div class="mb-8"> <div class="mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-900">{{ __('الهوية البصرية') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('الهوية البصرية') }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('تخصيص مظهر النظام والشعارات والألوان والخطوط') }}</p> <p class="mt-1 text-sm text-gray-500">{{ __('تخصيص مظهر النظام والشعارات والألوان والخطوط') }}</p>
</div> </div>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<!-- Tabs --> <!-- Tabs -->
<div class="mb-6 border-b border-gray-200"> <div class="mb-6 border-b border-gray-200">
<nav class="flex gap-1 -mb-px"> <nav class="flex gap-1 -mb-px overflow-x-auto">
@foreach([ @foreach([
'logo' => 'الشعارات والصور', 'logo' => 'الشعارات والصور',
'colors' => 'الألوان', 'colors' => 'الألوان',
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
:class="activeTab === '{{ $key }}' :class="activeTab === '{{ $key }}'
? 'border-blue-600 text-blue-700 bg-blue-50/50' ? 'border-blue-600 text-blue-700 bg-blue-50/50'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all rounded-t-lg"> class="px-3 sm:px-5 py-2.5 sm:py-3 text-xs sm:text-sm font-medium whitespace-nowrap border-b-2 transition-all rounded-t-lg">
{{ __($label) }} {{ __($label) }}
</button> </button>
@endforeach @endforeach
...@@ -46,9 +46,9 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -46,9 +46,9 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
<form wire:submit="save"> <form wire:submit="save">
<!-- Logo & Images Tab --> <!-- Logo & Images Tab -->
<div x-show="activeTab === 'logo'" x-transition> <div x-show="activeTab === 'logo'" x-transition>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
<!-- Main Logo --> <!-- Main Logo -->
<div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
<div> <div>
<h3 class="font-semibold text-gray-900">{{ __('الشعار الرئيسي') }}</h3> <h3 class="font-semibold text-gray-900">{{ __('الشعار الرئيسي') }}</h3>
<p class="text-xs text-gray-500 mt-1">{{ __('يظهر في الشريط الجانبي وصفحة تسجيل الدخول. PNG أو SVG، أقصى 2 ميجا') }}</p> <p class="text-xs text-gray-500 mt-1">{{ __('يظهر في الشريط الجانبي وصفحة تسجيل الدخول. PNG أو SVG، أقصى 2 ميجا') }}</p>
...@@ -75,7 +75,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -75,7 +75,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
</div> </div>
<!-- Dark Logo --> <!-- Dark Logo -->
<div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
<div> <div>
<h3 class="font-semibold text-gray-900">{{ __('الشعار (الوضع الداكن)') }}</h3> <h3 class="font-semibold text-gray-900">{{ __('الشعار (الوضع الداكن)') }}</h3>
<p class="text-xs text-gray-500 mt-1">{{ __('نسخة فاتحة للخلفيات الداكنة. اختياري') }}</p> <p class="text-xs text-gray-500 mt-1">{{ __('نسخة فاتحة للخلفيات الداكنة. اختياري') }}</p>
...@@ -98,7 +98,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -98,7 +98,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
</div> </div>
<!-- Favicon --> <!-- Favicon -->
<div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
<div> <div>
<h3 class="font-semibold text-gray-900">{{ __('الأيقونة المصغرة (Favicon)') }}</h3> <h3 class="font-semibold text-gray-900">{{ __('الأيقونة المصغرة (Favicon)') }}</h3>
<p class="text-xs text-gray-500 mt-1">{{ __('تظهر في تبويب المتصفح. 32x32 أو 64x64 بكسل. أقصى 512 كيلو') }}</p> <p class="text-xs text-gray-500 mt-1">{{ __('تظهر في تبويب المتصفح. 32x32 أو 64x64 بكسل. أقصى 512 كيلو') }}</p>
...@@ -121,7 +121,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -121,7 +121,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
</div> </div>
<!-- Signature --> <!-- Signature -->
<div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
<div> <div>
<h3 class="font-semibold text-gray-900">{{ __('التوقيع الرسمي') }}</h3> <h3 class="font-semibold text-gray-900">{{ __('التوقيع الرسمي') }}</h3>
<p class="text-xs text-gray-500 mt-1">{{ __('يظهر في الفواتير والشهادات. صورة شفافة PNG مفضلة') }}</p> <p class="text-xs text-gray-500 mt-1">{{ __('يظهر في الفواتير والشهادات. صورة شفافة PNG مفضلة') }}</p>
...@@ -144,7 +144,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -144,7 +144,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
</div> </div>
<!-- Login Background --> <!-- Login Background -->
<div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
<div> <div>
<h3 class="font-semibold text-gray-900">{{ __('خلفية صفحة الدخول') }}</h3> <h3 class="font-semibold text-gray-900">{{ __('خلفية صفحة الدخول') }}</h3>
<p class="text-xs text-gray-500 mt-1">{{ __('صورة خلفية لشاشة تسجيل الدخول. أقصى 5 ميجا') }}</p> <p class="text-xs text-gray-500 mt-1">{{ __('صورة خلفية لشاشة تسجيل الدخول. أقصى 5 ميجا') }}</p>
...@@ -167,7 +167,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -167,7 +167,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
</div> </div>
<!-- Invoice Header --> <!-- Invoice Header -->
<div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
<div> <div>
<h3 class="font-semibold text-gray-900">{{ __('رأس الفاتورة') }}</h3> <h3 class="font-semibold text-gray-900">{{ __('رأس الفاتورة') }}</h3>
<p class="text-xs text-gray-500 mt-1">{{ __('صورة تظهر أعلى الفاتورة. يفضل بعرض 800 بكسل') }}</p> <p class="text-xs text-gray-500 mt-1">{{ __('صورة تظهر أعلى الفاتورة. يفضل بعرض 800 بكسل') }}</p>
...@@ -193,11 +193,11 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -193,11 +193,11 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
<!-- Colors Tab --> <!-- Colors Tab -->
<div x-show="activeTab === 'colors'" x-transition> <div x-show="activeTab === 'colors'" x-transition>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
<!-- Color Pickers --> <!-- Color Pickers -->
<div class="lg:col-span-2 space-y-6"> <div class="lg:col-span-2 space-y-6">
<!-- Main Colors --> <!-- Main Colors -->
<div class="bg-white rounded-xl border border-gray-200 p-6"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6">
<h3 class="font-semibold text-gray-900 mb-4">{{ __('الألوان الرئيسية') }}</h3> <h3 class="font-semibold text-gray-900 mb-4">{{ __('الألوان الرئيسية') }}</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
@foreach([ @foreach([
...@@ -217,7 +217,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -217,7 +217,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
</div> </div>
<!-- Sidebar Colors --> <!-- Sidebar Colors -->
<div class="bg-white rounded-xl border border-gray-200 p-6"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6">
<h3 class="font-semibold text-gray-900 mb-4">{{ __('ألوان الشريط الجانبي') }}</h3> <h3 class="font-semibold text-gray-900 mb-4">{{ __('ألوان الشريط الجانبي') }}</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
@foreach([ @foreach([
...@@ -237,7 +237,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -237,7 +237,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
</div> </div>
<!-- Status Colors --> <!-- Status Colors -->
<div class="bg-white rounded-xl border border-gray-200 p-6"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6">
<h3 class="font-semibold text-gray-900 mb-4">{{ __('ألوان الحالات') }}</h3> <h3 class="font-semibold text-gray-900 mb-4">{{ __('ألوان الحالات') }}</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
@foreach([ @foreach([
...@@ -378,7 +378,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -378,7 +378,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
<!-- Typography Tab --> <!-- Typography Tab -->
<div x-show="activeTab === 'typography'" x-transition> <div x-show="activeTab === 'typography'" x-transition>
<div class="bg-white rounded-xl border border-gray-200 p-6 max-w-2xl"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 max-w-2xl">
<h3 class="font-semibold text-gray-900 mb-6">{{ __('إعدادات الخطوط') }}</h3> <h3 class="font-semibold text-gray-900 mb-6">{{ __('إعدادات الخطوط') }}</h3>
<div class="space-y-6"> <div class="space-y-6">
<div> <div>
...@@ -427,7 +427,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -427,7 +427,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
<!-- Invoice/Print Tab --> <!-- Invoice/Print Tab -->
<div x-show="activeTab === 'invoice'" x-transition> <div x-show="activeTab === 'invoice'" x-transition>
<div class="bg-white rounded-xl border border-gray-200 p-6 max-w-3xl space-y-6"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 max-w-3xl space-y-6">
<h3 class="font-semibold text-gray-900">{{ __('نصوص الفواتير والإيصالات') }}</h3> <h3 class="font-semibold text-gray-900">{{ __('نصوص الفواتير والإيصالات') }}</h3>
<div> <div>
...@@ -455,7 +455,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -455,7 +455,7 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
<!-- Display Options Tab --> <!-- Display Options Tab -->
<div x-show="activeTab === 'display'" x-transition> <div x-show="activeTab === 'display'" x-transition>
<div class="bg-white rounded-xl border border-gray-200 p-6 max-w-2xl"> <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 max-w-2xl">
<h3 class="font-semibold text-gray-900 mb-6">{{ __('خيارات العرض') }}</h3> <h3 class="font-semibold text-gray-900 mb-6">{{ __('خيارات العرض') }}</h3>
<div class="space-y-5"> <div class="space-y-5">
@foreach([ @foreach([
...@@ -480,9 +480,9 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all ...@@ -480,9 +480,9 @@ class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-all
</div> </div>
<!-- Save Button (always visible) --> <!-- Save Button (always visible) -->
<div class="mt-8 flex items-center gap-4 border-t border-gray-200 pt-6"> <div class="mt-6 sm:mt-8 flex flex-col-reverse sm:flex-row sm:items-center gap-3 sm:gap-4 border-t border-gray-200 pt-4 sm:pt-6">
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-8 py-3 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 disabled:bg-blue-400 transition-all shadow-sm hover:shadow-md"> class="w-full sm:w-auto px-6 sm:px-8 py-2.5 sm:py-3 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 disabled:bg-blue-400 transition-all shadow-sm hover:shadow-md">
<span wire:loading.remove wire:target="save">{{ __('حفظ التغييرات') }}</span> <span wire:loading.remove wire:target="save">{{ __('حفظ التغييرات') }}</span>
<span wire:loading wire:target="save" class="flex items-center gap-2"> <span wire:loading wire:target="save" class="flex items-center gap-2">
<svg class="animate-spin h-4 w-4" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/></svg> <svg class="animate-spin h-4 w-4" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/></svg>
......
resources/views/livewire/settings/receipt-settings.blade.php
View file @ 944501f1
<div class="space-y-6"> <div class="space-y-6">
{{-- Page Header --}} {{-- Page Header --}}
<div class="flex items-center justify-between"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-900">{{ __('إعدادات الإيصال') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('إعدادات الإيصال') }}</h1>
<div class="flex items-center gap-3"> <div class="w-full sm:w-auto flex flex-col-reverse sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
<button wire:click="resetToDefaults" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"> <button wire:click="resetToDefaults" class="w-full sm:w-auto py-2.5 text-center px-4 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
{{ __('استعادة الافتراضي') }} {{ __('استعادة الافتراضي') }}
</button> </button>
<button wire:click="save" wire:loading.attr="disabled" wire:target="save" <button wire:click="save" wire:loading.attr="disabled" wire:target="save"
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50"> class="w-full sm:w-auto py-2.5 text-center px-4 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
<span wire:loading.remove wire:target="save">{{ __('حفظ الإعدادات') }}</span> <span wire:loading.remove wire:target="save">{{ __('حفظ الإعدادات') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
...@@ -25,7 +25,7 @@ class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg- ...@@ -25,7 +25,7 @@ class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-
@enderror @enderror
{{-- Branch Selector --}} {{-- Branch Selector --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<label class="block text-sm font-medium text-gray-700 mb-2">{{ __('الفرع') }}</label> <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('الفرع') }}</label>
<select wire:model.live="selectedBranchId" class="w-full max-w-sm rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="selectedBranchId" class="w-full max-w-sm rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('-- اختر الفرع --') }}</option> <option value="">{{ __('-- اختر الفرع --') }}</option>
...@@ -36,10 +36,10 @@ class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg- ...@@ -36,10 +36,10 @@ class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-
</div> </div>
@if($selectedBranchId) @if($selectedBranchId)
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
{{-- Sections Order --}} {{-- Sections Order --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('ترتيب الأقسام') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">{{ __('ترتيب الأقسام') }}</h2>
<div class="space-y-2"> <div class="space-y-2">
@foreach($sections as $index => $section) @foreach($sections as $index => $section)
<div class="flex items-center gap-3 p-3 rounded-lg border {{ $section['enabled'] ? 'border-blue-200 bg-blue-50' : 'border-gray-200 bg-gray-50' }}"> <div class="flex items-center gap-3 p-3 rounded-lg border {{ $section['enabled'] ? 'border-blue-200 bg-blue-50' : 'border-gray-200 bg-gray-50' }}">
...@@ -66,8 +66,8 @@ class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 ms-2"> ...@@ -66,8 +66,8 @@ class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 ms-2">
</div> </div>
{{-- Field Toggles --}} {{-- Field Toggles --}}
<div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('الحقول المعروضة') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">{{ __('الحقول المعروضة') }}</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
@foreach($fieldLabels as $key => $label) @foreach($fieldLabels as $key => $label)
<label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors
...@@ -82,9 +82,9 @@ class="rounded border-gray-300 text-green-600 focus:ring-green-500"> ...@@ -82,9 +82,9 @@ class="rounded border-gray-300 text-green-600 focus:ring-green-500">
</div> </div>
{{-- Receipt Settings --}} {{-- Receipt Settings --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('إعدادات المظهر') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">{{ __('إعدادات المظهر') }}</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عرض الورق') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عرض الورق') }}</label>
<select wire:model="settings.paper_width" class="w-full rounded-lg border-gray-300 focus:ring-blue-500"> <select wire:model="settings.paper_width" class="w-full rounded-lg border-gray-300 focus:ring-blue-500">
......
resources/views/livewire/settings/system-settings-form.blade.php
View file @ 944501f1
<div> <div>
<!-- Header --> <!-- Header -->
<div class="mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-900">{{ __('إعدادات النظام') }}</h1> <div>
<p class="mt-1 text-sm text-gray-500">{{ __('إدارة إعدادات النظام المختلفة حسب المجموعة') }}</p> <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('إعدادات النظام') }}</h1>
<p class="mt-1 text-sm text-gray-500">{{ __('إدارة إعدادات النظام المختلفة حسب المجموعة') }}</p>
</div>
</div> </div>
@if(session('success')) @if(session('success'))
...@@ -45,7 +47,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c ...@@ -45,7 +47,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c
<!-- Settings Form --> <!-- Settings Form -->
<form wire:submit="save"> <form wire:submit="save">
<div class="bg-white border border-gray-200 rounded-lg p-6" wire:loading.class="opacity-50 pointer-events-none" wire:target="updatedActiveGroup"> <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6" wire:loading.class="opacity-50 pointer-events-none" wire:target="updatedActiveGroup">
@if(empty($settings)) @if(empty($settings))
<div class="p-8 text-center"> <div class="p-8 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
...@@ -65,7 +67,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c ...@@ -65,7 +67,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c
</label> </label>
@if($type === 'boolean') @if($type === 'boolean')
<label class="relative inline-flex items-center cursor-pointer"> <label class="relative inline-flex items-center cursor-pointer min-h-[44px]">
<input <input
type="checkbox" type="checkbox"
id="setting-{{ $key }}" id="setting-{{ $key }}"
...@@ -82,7 +84,7 @@ class="sr-only peer"> ...@@ -82,7 +84,7 @@ class="sr-only peer">
wire:model="settings.{{ $key }}" wire:model="settings.{{ $key }}"
dir="ltr" dir="ltr"
step="{{ $type === 'float' ? '0.01' : '1' }}" step="{{ $type === 'float' ? '0.01' : '1' }}"
class="w-full max-w-xs rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> class="w-full max-w-xs rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5">
@elseif($type === 'json') @elseif($type === 'json')
<textarea <textarea
id="setting-{{ $key }}" id="setting-{{ $key }}"
...@@ -95,7 +97,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -95,7 +97,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
type="text" type="text"
id="setting-{{ $key }}" id="setting-{{ $key }}"
wire:model="settings.{{ $key }}" wire:model="settings.{{ $key }}"
class="w-full max-w-md rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> class="w-full max-w-md rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5">
@endif @endif
@if($description) @if($description)
...@@ -108,9 +110,9 @@ class="w-full max-w-md rounded-lg border-gray-300 shadow-sm focus:border-blue-50 ...@@ -108,9 +110,9 @@ class="w-full max-w-md rounded-lg border-gray-300 shadow-sm focus:border-blue-50
</div> </div>
@if(!empty($settings)) @if(!empty($settings))
<div class="mt-4"> <div class="mt-4 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors"> class="px-6 py-2.5 sm:py-2 w-full sm:w-auto bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
<span wire:loading.remove wire:target="save">{{ __('حفظ الإعدادات') }}</span> <span wire:loading.remove wire:target="save">{{ __('حفظ الإعدادات') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
......
resources/views/livewire/trainer/trainer-dashboard.blade.php
View file @ 944501f1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{{-- Header --}} {{-- Header --}}
<div class="flex items-center justify-between mb-8"> <div class="flex items-center justify-between mb-8">
<div> <div>
<h1 class="text-2xl font-bold text-gray-800">{{ __('لوحة المدرب') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('لوحة المدرب') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('اليوم') }}: {{ now()->translatedFormat('l j F Y') }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('اليوم') }}: {{ now()->translatedFormat('l j F Y') }}</p>
</div> </div>
</div> </div>
......
resources/views/livewire/training/reschedule-session.blade.php
View file @ 944501f1
<div> <div>
@if($session->status === 'scheduled') @if($session->status === 'scheduled')
<button wire:click="open" class="px-3 py-1.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">
{{ __('إعادة جدولة') }} {{ __('إعادة جدولة') }}
</button> </button>
@endif @endif
@if($showModal) @if($showModal)
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" wire:click.self="$set('showModal', false)"> <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-6"> <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-4 sm:p-6">
<h3 class="text-lg font-bold text-gray-800 mb-4">{{ __('إعادة جدولة الحصة') }}</h3> <h3 class="text-base sm:text-lg font-bold text-gray-800 mb-4">{{ __('إعادة جدولة الحصة') }}</h3>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('التاريخ الجديد') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('التاريخ الجديد') }}</label>
<input type="date" wire:model="newDate" dir="ltr" class="w-full rounded-lg border-gray-300 text-sm"> <input type="date" wire:model="newDate" dir="ltr" class="w-full rounded-lg border-gray-300 text-sm py-2.5">
@error('newDate') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror @error('newDate') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
</div> </div>
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('من') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('من') }}</label>
<input type="time" wire:model="newStartTime" dir="ltr" class="w-full rounded-lg border-gray-300 text-sm"> <input type="time" wire:model="newStartTime" dir="ltr" class="w-full rounded-lg border-gray-300 text-sm py-2.5">
@error('newStartTime') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror @error('newStartTime') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('إلى') }}</label> <label class="block text-sm text-gray-600 mb-1">{{ __('إلى') }}</label>
<input type="time" wire:model="newEndTime" dir="ltr" class="w-full rounded-lg border-gray-300 text-sm"> <input type="time" wire:model="newEndTime" dir="ltr" class="w-full rounded-lg border-gray-300 text-sm py-2.5">
@error('newEndTime') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror @error('newEndTime') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
<div> <div>
<label class="block text-sm text-gray-600 mb-1">{{ __('السبب') }} *</label> <label class="block text-sm text-gray-600 mb-1">{{ __('السبب') }} *</label>
<textarea wire:model="reason" rows="2" class="w-full rounded-lg border-gray-300 text-sm" <textarea wire:model="reason" rows="2" class="w-full rounded-lg border-gray-300 text-sm py-2.5"
placeholder="{{ __('سبب إعادة الجدولة') }}"></textarea> placeholder="{{ __('سبب إعادة الجدولة') }}"></textarea>
@error('reason') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror @error('reason') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
<div class="flex gap-2 justify-end mt-6"> <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="px-4 py-2 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 rounded-lg hover:bg-gray-100">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</button> </button>
<button wire:click="reschedule" wire:loading.attr="disabled" <button wire:click="reschedule" wire:loading.attr="disabled"
class="px-4 py-2 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 disabled:opacity-50">
<span wire:loading.remove wire:target="reschedule">{{ __('تأكيد') }}</span> <span wire:loading.remove wire:target="reschedule">{{ __('تأكيد') }}</span>
<span wire:loading wire:target="reschedule">{{ __('جارٍ...') }}</span> <span wire:loading wire:target="reschedule">{{ __('جارٍ...') }}</span>
</button> </button>
......
resources/views/livewire/users/user-form.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ $editing ? 'تعديل المستخدم' : 'إضافة مستخدم جديد' }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? 'تعديل المستخدم' : 'إضافة مستخدم جديد' }}</h1>
<a href="{{ route('users.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">&larr; العودة</a> <a href="{{ route('users.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">&larr; العودة</a>
</div> </div>
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-gray-700 mb-4">معلومات المستخدم</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">معلومات المستخدم</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالعربية *</label> <label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالعربية *</label>
<input type="text" wire:model="name_ar" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name_ar') border-red-500 @enderror"> <input type="text" wire:model="name_ar" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالإنجليزية *</label> <label class="block text-sm font-medium text-gray-700 mb-1">الاسم بالإنجليزية *</label>
<input type="text" wire:model="name" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror"> <input type="text" wire:model="name" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror">
@error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني *</label> <label class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني *</label>
<input type="email" wire:model="email" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('email') border-red-500 @enderror"> <input type="email" wire:model="email" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('email') border-red-500 @enderror">
@error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">الدور</label> <label class="block text-sm font-medium text-gray-700 mb-1">الدور</label>
<select wire:model="role_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> <select wire:model="role_id" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">— بدون دور —</option> <option value="">— بدون دور —</option>
@foreach($roles as $r) @foreach($roles as $r)
<option value="{{ $r->id }}">{{ $r->name_ar }} ({{ $r->slug }})</option> <option value="{{ $r->id }}">{{ $r->name_ar }} ({{ $r->slug }})</option>
...@@ -34,17 +34,17 @@ ...@@ -34,17 +34,17 @@
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ $editing ? 'كلمة مرور جديدة (اتركها فارغة للإبقاء)' : 'كلمة المرور *' }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ $editing ? 'كلمة مرور جديدة (اتركها فارغة للإبقاء)' : 'كلمة المرور *' }}</label>
<input type="password" wire:model="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('password') border-red-500 @enderror"> <input type="password" wire:model="password" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('password') border-red-500 @enderror">
@error('password') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('password') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">تأكيد كلمة المرور</label> <label class="block text-sm font-medium text-gray-700 mb-1">تأكيد كلمة المرور</label>
<input type="password" wire:model="password_confirmation" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> <input type="password" wire:model="password_confirmation" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">الحالة</label> <label class="block text-sm font-medium text-gray-700 mb-1">الحالة</label>
<select wire:model="status" class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> <select wire:model="status" class="w-full max-w-xs px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="active">نشط</option> <option value="active">نشط</option>
<option value="inactive">غير نشط</option> <option value="inactive">غير نشط</option>
<option value="suspended">موقوف</option> <option value="suspended">موقوف</option>
...@@ -53,13 +53,13 @@ ...@@ -53,13 +53,13 @@
</div> </div>
</div> </div>
<div class="flex items-center gap-4"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('users.list') }}" wire:navigate class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">إلغاء</a>
<button type="submit" wire:loading.attr="disabled" <button type="submit" wire:loading.attr="disabled"
class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 text-sm">
<span wire:loading.remove wire:target="save">{{ $editing ? 'حفظ التعديلات' : 'إنشاء المستخدم' }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? 'حفظ التعديلات' : 'إنشاء المستخدم' }}</span>
<span wire:loading wire:target="save">جارٍ الحفظ...</span> <span wire:loading wire:target="save">جارٍ الحفظ...</span>
</button> </button>
<a href="{{ route('users.list') }}" wire:navigate class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">إلغاء</a>
</div> </div>
</form> </form>
</div> </div>
resources/views/livewire/users/user-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <!-- Header -->
<h1 class="text-2xl font-bold text-gray-800">المستخدمين</h1> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-xl sm:text-2xl font-bold text-gray-800">المستخدمين</h1>
@can('users.create') @can('users.create')
<a href="{{ route('users.create') }}" wire:navigate <a href="{{ route('users.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 justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium min-h-[44px]">
<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> <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> </a>
@endcan @endcan
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
<div class="grid grid-cols-1 sm:grid-cols-4 gap-4"> <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<div class="sm:col-span-2"> <div class="col-span-2">
<input type="text" wire:model.live.debounce.300ms="search" <input type="text" wire:model.live.debounce.300ms="search"
placeholder="بحث بالاسم أو البريد..." placeholder="بحث بالاسم أو البريد..."
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
</div> </div>
<select wire:model.live="role" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> <select wire:model.live="role" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">كل الأدوار</option> <option value="">كل الأدوار</option>
@foreach($roles as $r) @foreach($roles as $r)
<option value="{{ $r->id }}">{{ $r->name_ar }}</option> <option value="{{ $r->id }}">{{ $r->name_ar }}</option>
...@@ -31,61 +32,107 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -31,61 +32,107 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
</div> </div>
<!-- Table --> <!-- Desktop Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<table class="w-full text-sm" wire:loading.class="opacity-50 pointer-events-none"> <div class="overflow-x-auto">
<thead class="bg-gray-50 border-b border-gray-200"> <table class="w-full text-sm" wire:loading.class="opacity-50 pointer-events-none">
<tr> <thead class="bg-gray-50 border-b border-gray-200">
<th class="px-4 py-3 text-start font-medium text-gray-600">المستخدم</th> <tr>
<th class="px-4 py-3 text-start font-medium text-gray-600">البريد</th> <th class="px-4 py-3 text-start font-medium text-gray-600">المستخدم</th>
<th class="px-4 py-3 text-start font-medium text-gray-600">الدور</th> <th class="px-4 py-3 text-start font-medium text-gray-600">البريد</th>
<th class="px-4 py-3 text-center font-medium text-gray-600">الحالة</th> <th class="px-4 py-3 text-start font-medium text-gray-600">الدور</th>
<th class="px-4 py-3 text-center font-medium text-gray-600">إجراءات</th> <th class="px-4 py-3 text-center font-medium text-gray-600">الحالة</th>
</tr> <th class="px-4 py-3 text-center font-medium text-gray-600">إجراءات</th>
</thead> </tr>
<tbody class="divide-y divide-gray-100"> </thead>
@forelse($users as $u) <tbody class="divide-y divide-gray-100">
<tr class="hover:bg-gray-50"> @forelse($users as $u)
<td class="px-4 py-3"> <tr class="hover:bg-gray-50">
<div class="flex items-center gap-3"> <td class="px-4 py-3">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> <div class="flex items-center gap-3">
<span class="text-xs font-medium text-blue-700">{{ mb_substr($u->name_ar ?? $u->name, 0, 1) }}</span> <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
<span class="text-xs font-medium text-blue-700">{{ mb_substr($u->name_ar ?? $u->name, 0, 1) }}</span>
</div>
<div>
<p class="font-medium text-gray-800">{{ $u->name_ar ?? $u->name }}</p>
@if($u->is_super_admin)
<span class="text-xs text-red-600 font-medium">Super Admin</span>
@endif
</div>
</div> </div>
<div> </td>
<p class="font-medium text-gray-800">{{ $u->name_ar ?? $u->name }}</p> <td class="px-4 py-3 text-gray-600" dir="ltr">{{ $u->email }}</td>
@if($u->is_super_admin) <td class="px-4 py-3 text-gray-600">{{ $u->primaryRole?->name_ar ?? '—' }}</td>
<span class="text-xs text-red-600 font-medium">Super Admin</span> <td class="px-4 py-3 text-center">
@endif @if($u->status === 'active')
</div> <span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">نشط</span>
</div> @elseif($u->status === 'suspended')
</td> <span class="px-2 py-0.5 text-xs bg-amber-100 text-amber-700 rounded-full">موقوف</span>
<td class="px-4 py-3 text-gray-600" dir="ltr">{{ $u->email }}</td> @else
<td class="px-4 py-3 text-gray-600">{{ $u->primaryRole?->name_ar ?? '—' }}</td> <span class="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">غير نشط</span>
<td class="px-4 py-3 text-center"> @endif
@if($u->status === 'active') </td>
<span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">نشط</span> <td class="px-4 py-3 text-center">
@elseif($u->status === 'suspended') @can('users.update')
<span class="px-2 py-0.5 text-xs bg-amber-100 text-amber-700 rounded-full">موقوف</span> <a href="{{ route('users.edit', $u) }}" wire:navigate
@else class="inline-flex items-center justify-center text-blue-600 hover:text-blue-800 text-sm py-2 min-h-[44px]">تعديل</a>
<span class="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">غير نشط</span> @endcan
@endif </td>
</td> </tr>
<td class="px-4 py-3 text-center"> @empty
@can('users.update') <tr>
<a href="{{ route('users.edit', $u) }}" wire:navigate class="text-blue-600 hover:text-blue-800 text-sm">تعديل</a> <td colspan="5" class="px-4 py-8 text-center text-gray-500">لا يوجد مستخدمين</td>
@endcan </tr>
</td> @endforelse
</tr> </tbody>
@empty </table>
<tr> </div>
<td colspan="5" class="px-4 py-8 text-center text-gray-500">لا يوجد مستخدمين</td>
</tr>
@endforelse
</tbody>
</table>
@if($users->hasPages()) @if($users->hasPages())
<div class="px-4 py-3 border-t border-gray-200">{{ $users->links() }}</div> <div class="px-4 py-3 border-t border-gray-200">{{ $users->links() }}</div>
@endif @endif
</div> </div>
<!-- Mobile Cards -->
<div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
@forelse($users as $u)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
<span class="text-sm font-medium text-blue-700">{{ mb_substr($u->name_ar ?? $u->name, 0, 1) }}</span>
</div>
<div>
<p class="font-medium text-gray-800 text-sm">{{ $u->name_ar ?? $u->name }}</p>
<p class="text-xs text-gray-500">{{ $u->primaryRole?->name_ar ?? '—' }}</p>
@if($u->is_super_admin)
<span class="text-xs text-red-600 font-medium">Super Admin</span>
@endif
</div>
</div>
<div class="flex items-center gap-3">
@if($u->status === 'active')
<span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">نشط</span>
@elseif($u->status === 'suspended')
<span class="px-2 py-0.5 text-xs bg-amber-100 text-amber-700 rounded-full">موقوف</span>
@else
<span class="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">غير نشط</span>
@endif
@can('users.update')
<a href="{{ route('users.edit', $u) }}" wire:navigate
class="inline-flex items-center justify-center text-blue-600 hover:text-blue-800 text-sm py-2 min-h-[44px]">تعديل</a>
@endcan
</div>
</div>
</div>
@empty
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center text-gray-500">
لا يوجد مستخدمين
</div>
@endforelse
@if($users->hasPages())
<div class="mt-4">{{ $users->links() }}</div>
@endif
</div>
</div> </div>
resources/views/livewire/wallets/wallet-list.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('المحافظ') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('المحافظ') }}</h1>
</div> </div>
{{-- Flash Messages --}} {{-- Flash Messages --}}
@if(session('success')) @if(session('success'))
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm"> <div class="mb-4 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
{{ session('success') }} {{ session('success') }}
</div> </div>
@endif @endif
{{-- Filters --}} {{-- Filters --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
<div class="sm:col-span-2"> <div class="col-span-2 md:col-span-2">
<input type="text" wire:model.live.debounce.300ms="search" <input type="text" wire:model.live.debounce.300ms="search"
placeholder="{{ __('بحث بالاسم...') }}" placeholder="{{ __('بحث بالاسم...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<select wire:model.live="activeFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="activeFilter" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('الكل') }}</option> <option value="">{{ __('الكل') }}</option>
<option value="1">{{ __('نشطة') }}</option> <option value="1">{{ __('نشطة') }}</option>
<option value="0">{{ __('غير نشطة') }}</option> <option value="0">{{ __('غير نشطة') }}</option>
...@@ -26,9 +26,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -26,9 +26,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
</div> </div>
{{-- Table --}} {{-- Desktop Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div wire:loading.class="opacity-50 pointer-events-none"> <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
<tr> <tr>
...@@ -101,4 +101,66 @@ class="text-blue-600 hover:text-blue-800 text-sm">{{ __('عرض') }}</a> ...@@ -101,4 +101,66 @@ class="text-blue-600 hover:text-blue-800 text-sm">{{ __('عرض') }}</a>
</div> </div>
@endif @endif
</div> </div>
{{-- Mobile Cards --}}
<div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
@forelse($wallets as $wallet)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
<div class="flex items-start justify-between gap-3 mb-3">
<div class="min-w-0 flex-1">
<p class="font-medium text-gray-800 text-sm truncate">
@if($wallet->owner && method_exists($wallet->owner, 'person') && $wallet->owner->person)
{{ $wallet->owner->person->name_ar }}
@elseif($wallet->owner)
{{ $wallet->owner->name_ar ?? $wallet->owner->name ?? '—' }}
@else
—
@endif
</p>
<p class="text-xs text-gray-500 mt-0.5">
@php
$typeLabels = [
'App\\Domain\\Participant\\Models\\Participant' => 'مشترك',
];
$ownerType = $wallet->owner_type;
@endphp
{{ $typeLabels[$ownerType] ?? class_basename($ownerType) }}
</p>
</div>
@if($wallet->is_active)
<span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full shrink-0">{{ __('نشطة') }}</span>
@else
<span class="px-2 py-0.5 text-xs bg-gray-100 text-gray-700 rounded-full shrink-0">{{ __('غير نشطة') }}</span>
@endif
</div>
<div class="flex items-center justify-between">
<span class="font-mono text-sm {{ $wallet->balance > 0 ? 'text-green-700' : 'text-gray-600' }}" dir="ltr">
{{ number_format($wallet->balance / 100, 2) }} {{ __('ج.م') }}
</span>
@can('wallets.view')
<a href="{{ route('wallets.show', $wallet) }}" wire:navigate
class="inline-flex items-center justify-center py-2 px-3 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors">
{{ __('عرض') }}
</a>
@endcan
</div>
</div>
@empty
<div class="bg-white rounded-xl shadow-sm border border-gray-200 px-4 py-12">
<div class="flex flex-col items-center">
<svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
</svg>
<p class="text-gray-500 text-sm">{{ __('لا توجد محافظ') }}</p>
</div>
</div>
@endforelse
@if($wallets->hasPages())
<div class="mt-4">
{{ $wallets->links() }}
</div>
@endif
</div>
</div> </div>
resources/views/livewire/wallets/wallet-show.blade.php
View file @ 944501f1
<div> <div>
<div class="flex items-center justify-between mb-6"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-2xl font-bold text-gray-800">{{ __('تفاصيل المحفظة') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تفاصيل المحفظة') }}</h1>
<a href="{{ route('wallets.list') }}" wire:navigate <a href="{{ route('wallets.list') }}" wire:navigate
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium"> class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium">
<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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg> <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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
...@@ -21,8 +21,8 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde ...@@ -21,8 +21,8 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde
@endif @endif
{{-- Wallet Info Card --}} {{-- Wallet Info Card --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
<div> <div>
<p class="text-sm text-gray-500 mb-1">{{ __('صاحب المحفظة') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('صاحب المحفظة') }}</p>
<p class="text-lg font-semibold text-gray-800"> <p class="text-lg font-semibold text-gray-800">
...@@ -54,9 +54,9 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde ...@@ -54,9 +54,9 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounde
{{-- Deposit & Withdraw Forms --}} {{-- Deposit & Withdraw Forms --}}
@if($wallet->is_active) @if($wallet->is_active)
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6">
{{-- Deposit Form --}} {{-- Deposit Form --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('إيداع') }}</h3> <h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('إيداع') }}</h3>
<form wire:submit="deposit" class="space-y-4"> <form wire:submit="deposit" class="space-y-4">
<div> <div>
...@@ -81,7 +81,7 @@ class="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 di ...@@ -81,7 +81,7 @@ class="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 di
</div> </div>
{{-- Withdraw Form --}} {{-- Withdraw Form --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('سحب') }}</h3> <h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('سحب') }}</h3>
<form wire:submit="withdraw" class="space-y-4"> <form wire:submit="withdraw" class="space-y-4">
<div> <div>
...@@ -108,8 +108,8 @@ class="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabl ...@@ -108,8 +108,8 @@ class="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabl
@endif @endif
{{-- Transaction History --}} {{-- Transaction History --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden overflow-x-auto">
<div class="px-6 py-4 border-b border-gray-200"> <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
<h3 class="text-lg font-semibold text-gray-800">{{ __('سجل المعاملات') }}</h3> <h3 class="text-lg font-semibold text-gray-800">{{ __('سجل المعاملات') }}</h3>
</div> </div>
<div wire:loading.class="opacity-50 pointer-events-none"> <div wire:loading.class="opacity-50 pointer-events-none">
......
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