complete story 9.9 with qa test
This commit is contained in:
@@ -184,7 +184,7 @@ new class extends Component
|
||||
}; ?>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<flux:heading size="xl" class="mb-6">{{ __('booking.request_consultation') }}</flux:heading>
|
||||
<flux:heading size="xl" class="mb-6 text-xl sm:text-2xl">{{ __('booking.request_consultation') }}</flux:heading>
|
||||
|
||||
{{-- Booking Status Banner --}}
|
||||
<div class="mb-6 rounded-lg border p-4 {{ $canBookToday ? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20' : 'border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20' }}">
|
||||
@@ -275,7 +275,7 @@ new class extends Component
|
||||
|
||||
<flux:button
|
||||
wire:click="showConfirm"
|
||||
class="mt-4"
|
||||
class="mt-4 w-full sm:w-auto min-h-[44px]"
|
||||
wire:loading.attr="disabled"
|
||||
>
|
||||
<span wire:loading.remove wire:target="showConfirm">{{ __('booking.continue') }}</span>
|
||||
@@ -301,14 +301,15 @@ new class extends Component
|
||||
</div>
|
||||
</flux:callout>
|
||||
|
||||
<div class="flex gap-3 mt-4">
|
||||
<flux:button wire:click="$set('showConfirmation', false)">
|
||||
<div class="flex flex-col sm:flex-row gap-3 mt-4">
|
||||
<flux:button wire:click="$set('showConfirmation', false)" class="w-full sm:w-auto min-h-[44px] justify-center">
|
||||
{{ __('common.back') }}
|
||||
</flux:button>
|
||||
<flux:button
|
||||
wire:click="submit"
|
||||
variant="primary"
|
||||
wire:loading.attr="disabled"
|
||||
class="w-full sm:w-auto min-h-[44px] justify-center"
|
||||
>
|
||||
<span wire:loading.remove wire:target="submit">{{ __('booking.submit_request') }}</span>
|
||||
<span wire:loading wire:target="submit">{{ __('common.submitting') }}</span>
|
||||
|
||||
@@ -43,11 +43,11 @@ new class extends Component
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div class="space-y-6 sm:space-y-8">
|
||||
{{-- Header --}}
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<flux:heading size="xl">{{ __('booking.my_consultations') }}</flux:heading>
|
||||
<flux:button href="{{ route('client.consultations.book') }}" variant="primary" wire:navigate>
|
||||
<div class="page-header">
|
||||
<flux:heading size="xl" class="text-xl sm:text-2xl">{{ __('booking.my_consultations') }}</flux:heading>
|
||||
<flux:button href="{{ route('client.consultations.book') }}" variant="primary" wire:navigate class="w-full sm:w-auto justify-center">
|
||||
{{ __('booking.request_consultation') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
@@ -60,12 +60,12 @@ new class extends Component
|
||||
|
||||
{{-- Upcoming Consultations Section --}}
|
||||
<section>
|
||||
<flux:heading size="lg" class="mb-4">{{ __('booking.upcoming_consultations') }}</flux:heading>
|
||||
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">{{ __('booking.upcoming_consultations') }}</flux:heading>
|
||||
|
||||
@if($upcoming->isNotEmpty())
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
@foreach($upcoming as $consultation)
|
||||
<div wire:key="upcoming-{{ $consultation->id }}" class="bg-white dark:bg-zinc-800 rounded-lg p-4 border border-zinc-200 dark:border-zinc-700">
|
||||
<div wire:key="upcoming-{{ $consultation->id }}" class="bg-white dark:bg-zinc-800 rounded-lg p-3 sm:p-4 border border-zinc-200 dark:border-zinc-700">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
@@ -101,11 +101,12 @@ new class extends Component
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex-shrink-0 w-full sm:w-auto">
|
||||
<flux:button
|
||||
size="sm"
|
||||
href="{{ route('client.consultations.calendar', $consultation) }}"
|
||||
icon="calendar-days"
|
||||
class="w-full sm:w-auto justify-center"
|
||||
>
|
||||
{{ __('booking.add_to_calendar') }}
|
||||
</flux:button>
|
||||
@@ -115,11 +116,11 @@ new class extends Component
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="bg-zinc-50 dark:bg-zinc-800/50 rounded-lg p-8 text-center">
|
||||
<flux:icon name="calendar-days" class="w-12 h-12 mx-auto text-zinc-300 dark:text-zinc-600 mb-3" />
|
||||
<div class="empty-state bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
|
||||
<flux:icon name="calendar-days" class="empty-state-icon text-zinc-300 dark:text-zinc-600" />
|
||||
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('booking.no_upcoming_consultations') }}</flux:text>
|
||||
<div class="mt-4">
|
||||
<flux:button href="{{ route('client.consultations.book') }}" variant="primary" size="sm" wire:navigate>
|
||||
<flux:button href="{{ route('client.consultations.book') }}" variant="primary" size="sm" wire:navigate class="w-full sm:w-auto">
|
||||
{{ __('booking.book_consultation') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
@@ -129,12 +130,12 @@ new class extends Component
|
||||
|
||||
{{-- Pending Requests Section --}}
|
||||
<section>
|
||||
<flux:heading size="lg" class="mb-4">{{ __('booking.pending_requests') }}</flux:heading>
|
||||
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">{{ __('booking.pending_requests') }}</flux:heading>
|
||||
|
||||
@if($pending->isNotEmpty())
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
@foreach($pending as $consultation)
|
||||
<div wire:key="pending-{{ $consultation->id }}" class="bg-white dark:bg-zinc-800 rounded-lg p-4 border border-zinc-200 dark:border-zinc-700">
|
||||
<div wire:key="pending-{{ $consultation->id }}" class="bg-white dark:bg-zinc-800 rounded-lg p-3 sm:p-4 border border-zinc-200 dark:border-zinc-700">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
@@ -166,8 +167,8 @@ new class extends Component
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="bg-zinc-50 dark:bg-zinc-800/50 rounded-lg p-8 text-center">
|
||||
<flux:icon name="inbox" class="w-12 h-12 mx-auto text-zinc-300 dark:text-zinc-600 mb-3" />
|
||||
<div class="empty-state bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
|
||||
<flux:icon name="inbox" class="empty-state-icon text-zinc-300 dark:text-zinc-600" />
|
||||
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('booking.no_pending_requests') }}</flux:text>
|
||||
</div>
|
||||
@endif
|
||||
@@ -175,12 +176,12 @@ new class extends Component
|
||||
|
||||
{{-- Past Consultations Section --}}
|
||||
<section>
|
||||
<flux:heading size="lg" class="mb-4">{{ __('booking.past_consultations') }}</flux:heading>
|
||||
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">{{ __('booking.past_consultations') }}</flux:heading>
|
||||
|
||||
@if($past->isNotEmpty())
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
@foreach($past as $consultation)
|
||||
<div wire:key="past-{{ $consultation->id }}" class="bg-white dark:bg-zinc-800 rounded-lg p-4 border border-zinc-200 dark:border-zinc-700">
|
||||
<div wire:key="past-{{ $consultation->id }}" class="bg-white dark:bg-zinc-800 rounded-lg p-3 sm:p-4 border border-zinc-200 dark:border-zinc-700">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
@@ -225,8 +226,8 @@ new class extends Component
|
||||
{{ $past->links() }}
|
||||
</div>
|
||||
@else
|
||||
<div class="bg-zinc-50 dark:bg-zinc-800/50 rounded-lg p-8 text-center">
|
||||
<flux:icon name="archive-box" class="w-12 h-12 mx-auto text-zinc-300 dark:text-zinc-600 mb-3" />
|
||||
<div class="empty-state bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
|
||||
<flux:icon name="archive-box" class="empty-state-icon text-zinc-300 dark:text-zinc-600" />
|
||||
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('booking.no_past_consultations') }}</flux:text>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -31,22 +31,22 @@ new class extends Component {
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="space-y-6 p-6">
|
||||
<div class="space-y-6 p-4 sm:p-6">
|
||||
{{-- Welcome Section --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-[#0A1F44] p-6 text-white dark:border-zinc-700">
|
||||
<flux:heading size="xl" class="text-white">
|
||||
<div class="rounded-lg border border-zinc-200 bg-[#0A1F44] p-4 sm:p-6 text-white dark:border-zinc-700">
|
||||
<flux:heading size="xl" class="text-white text-lg sm:text-xl lg:text-2xl">
|
||||
{{ __('client.dashboard.welcome', ['name' => auth()->user()->full_name]) }}
|
||||
</flux:heading>
|
||||
<flux:text class="mt-1 text-zinc-300">
|
||||
<flux:text class="mt-1 text-zinc-300 text-sm sm:text-base">
|
||||
{{ now()->locale(app()->getLocale())->translatedFormat(app()->getLocale() === 'ar' ? 'l، j F Y' : 'l, F j, Y') }}
|
||||
</flux:text>
|
||||
</div>
|
||||
|
||||
{{-- Widgets Grid --}}
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
<div class="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2">
|
||||
{{-- Upcoming Consultation Widget --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:heading size="lg" class="mb-4">
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">
|
||||
{{ __('client.dashboard.upcoming_consultation') }}
|
||||
</flux:heading>
|
||||
|
||||
@@ -106,8 +106,8 @@ new class extends Component {
|
||||
</div>
|
||||
|
||||
{{-- Active Cases Widget --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:heading size="lg" class="mb-4">
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">
|
||||
{{ __('client.dashboard.active_cases') }}
|
||||
</flux:heading>
|
||||
|
||||
@@ -152,8 +152,8 @@ new class extends Component {
|
||||
</div>
|
||||
|
||||
{{-- Recent Updates Widget --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:heading size="lg" class="mb-4">
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">
|
||||
{{ __('client.dashboard.recent_updates') }}
|
||||
</flux:heading>
|
||||
|
||||
@@ -193,8 +193,8 @@ new class extends Component {
|
||||
</div>
|
||||
|
||||
{{-- Booking Status Widget --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:heading size="lg" class="mb-4">
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">
|
||||
{{ __('client.dashboard.booking_status') }}
|
||||
</flux:heading>
|
||||
|
||||
|
||||
@@ -29,31 +29,31 @@ new class extends Component
|
||||
}; ?>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<flux:heading size="xl" class="mb-6">{{ __('client.my_cases') }}</flux:heading>
|
||||
<flux:heading size="xl" class="mb-6 text-xl sm:text-2xl">{{ __('client.my_cases') }}</flux:heading>
|
||||
|
||||
{{-- Active Timelines --}}
|
||||
@if($activeTimelines->total() > 0)
|
||||
<div class="mb-8">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">{{ __('client.active_cases') }}</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="mb-6 sm:mb-8">
|
||||
<h2 class="text-base sm:text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">{{ __('client.active_cases') }}</h2>
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
@foreach($activeTimelines as $timeline)
|
||||
<div wire:key="timeline-{{ $timeline->id }}" class="bg-white dark:bg-zinc-800 p-4 rounded-lg border-s-4 border-amber-500 shadow-sm">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="font-medium text-zinc-900 dark:text-zinc-100">{{ $timeline->case_name }}</h3>
|
||||
<div wire:key="timeline-{{ $timeline->id }}" class="bg-white dark:bg-zinc-800 p-3 sm:p-4 rounded-lg border-s-4 border-amber-500 shadow-sm">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-medium text-zinc-900 dark:text-zinc-100 truncate">{{ $timeline->case_name }}</h3>
|
||||
@if($timeline->case_reference)
|
||||
<p class="text-sm text-zinc-600 dark:text-zinc-400">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
|
||||
@endif
|
||||
<p class="text-sm text-zinc-500 dark:text-zinc-500 mt-1">
|
||||
<p class="text-xs sm:text-sm text-zinc-500 dark:text-zinc-500 mt-1">
|
||||
{{ __('client.updates') }}: {{ $timeline->updates_count }}
|
||||
@if($timeline->updates->first())
|
||||
· {{ __('client.last_update') }}: {{ $timeline->updates->first()->created_at->diffForHumans() }}
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-2 flex-shrink-0">
|
||||
<flux:badge variant="success">{{ __('client.active') }}</flux:badge>
|
||||
<flux:button size="sm" href="{{ route('client.timelines.show', $timeline) }}">
|
||||
<flux:button size="sm" href="{{ route('client.timelines.show', $timeline) }}" class="min-h-[44px]">
|
||||
{{ __('client.view') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
@@ -72,23 +72,23 @@ new class extends Component
|
||||
{{-- Archived Timelines --}}
|
||||
@if($archivedTimelines->total() > 0)
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-zinc-600 dark:text-zinc-400 mb-4">{{ __('client.archived_cases') }}</h2>
|
||||
<div class="space-y-4 opacity-75">
|
||||
<h2 class="text-base sm:text-lg font-semibold text-zinc-600 dark:text-zinc-400 mb-4">{{ __('client.archived_cases') }}</h2>
|
||||
<div class="space-y-3 sm:space-y-4 opacity-75">
|
||||
@foreach($archivedTimelines as $timeline)
|
||||
<div wire:key="timeline-{{ $timeline->id }}" class="bg-zinc-50 dark:bg-zinc-900 p-4 rounded-lg shadow-sm">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="font-medium text-zinc-700 dark:text-zinc-300">{{ $timeline->case_name }}</h3>
|
||||
<div wire:key="timeline-{{ $timeline->id }}" class="bg-zinc-50 dark:bg-zinc-900 p-3 sm:p-4 rounded-lg shadow-sm">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-medium text-zinc-700 dark:text-zinc-300 truncate">{{ $timeline->case_name }}</h3>
|
||||
@if($timeline->case_reference)
|
||||
<p class="text-sm text-zinc-500 dark:text-zinc-500">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
|
||||
@endif
|
||||
<p class="text-sm text-zinc-400 dark:text-zinc-600 mt-1">
|
||||
<p class="text-xs sm:text-sm text-zinc-400 dark:text-zinc-600 mt-1">
|
||||
{{ __('client.updates') }}: {{ $timeline->updates_count }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-2 flex-shrink-0">
|
||||
<flux:badge>{{ __('client.archived') }}</flux:badge>
|
||||
<flux:button size="sm" variant="ghost" href="{{ route('client.timelines.show', $timeline) }}">
|
||||
<flux:button size="sm" variant="ghost" href="{{ route('client.timelines.show', $timeline) }}" class="min-h-[44px]">
|
||||
{{ __('client.view') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
@@ -106,8 +106,8 @@ new class extends Component
|
||||
|
||||
{{-- Empty State --}}
|
||||
@if($activeTimelines->total() === 0 && $archivedTimelines->total() === 0)
|
||||
<div class="text-center py-12">
|
||||
<flux:icon name="folder-open" class="w-12 h-12 text-zinc-300 dark:text-zinc-600 mx-auto mb-4" />
|
||||
<div class="empty-state">
|
||||
<flux:icon name="folder-open" class="empty-state-icon text-zinc-300 dark:text-zinc-600" />
|
||||
<p class="text-zinc-500 dark:text-zinc-400">{{ __('client.no_cases_yet') }}</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user