naser/libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

complete story 9.9 with qa test

Browse Source
This commit is contained in:
Naser Mansour
2026-01-03 02:39:33 +02:00
parent 9abaa93a49
commit 9228921669
16 changed files with 968 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+268
View File
@@ -434,3 +434,271 @@ button.btn-danger:disabled {
direction: ltr;
unicode-bidi: isolate;
}
/* ==========================================================================
Responsive Design System (Story 9.9)
Breakpoints per PRD Section 7.4:
- Mobile: < 576px (single column, stacked layouts)
- Tablet: 576px - 991px (two columns where appropriate)
- Desktop: 992px - 1199px (full layouts with sidebars)
- Large Desktop: >= 1200px (max-width container: 1200px)
========================================================================== */
/* Prevent horizontal page scroll at any viewport */
html, body {
@apply overflow-x-hidden;
}
/* Ensure images/media don't overflow */
img, video, iframe {
@apply max-w-full h-auto;
}
/* Touch-friendly targets - minimum 44px for interactive elements */
.touch-target {
@apply min-h-[44px] min-w-[44px];
}
/* Dashboard grid - responsive column layout */
.dashboard-grid {
@apply grid gap-4;
@apply grid-cols-1; /* Mobile: single column */
@apply sm:grid-cols-2; /* Tablet: 2 columns */
@apply lg:grid-cols-3; /* Desktop: 3 columns */
@apply xl:grid-cols-4; /* Large: 4 columns */
}
/* Stats grid - responsive layout for stat cards */
.stats-grid {
@apply grid gap-4;
@apply grid-cols-1; /* Mobile: single column */
@apply sm:grid-cols-2; /* Tablet: 2 columns */
@apply lg:grid-cols-4; /* Desktop: 4 columns */
}
/* Widget grid - responsive layout for dashboard widgets */
.widget-grid {
@apply grid gap-6;
@apply grid-cols-1; /* Mobile: single column */
@apply lg:grid-cols-3; /* Desktop: 3 columns */
}
/* Responsive table wrapper - horizontal scroll for tables on mobile */
.table-responsive {
@apply overflow-x-auto -mx-4 px-4;
@apply sm:mx-0 sm:px-0; /* Remove negative margin on larger screens */
}
/* Table wrapper with shadow indicator for scrollable content */
.table-scroll-wrapper {
@apply relative overflow-x-auto;
-webkit-overflow-scrolling: touch;
}
/* Form layout - responsive form field arrangement */
.form-row {
@apply flex flex-col gap-4;
@apply sm:flex-row sm:items-end;
}
/* Form actions - responsive button placement */
.form-actions {
@apply flex flex-col gap-3;
@apply sm:flex-row sm:justify-end;
}
/* Mobile-first button - full width on mobile, auto on larger screens */
.btn-responsive {
@apply w-full sm:w-auto;
}
/* Card full-width on mobile */
.card-responsive {
@apply w-full;
}
/* Collapsible content - for accordion sections on mobile */
.collapsible-content {
@apply transition-all duration-200 ease-in-out overflow-hidden;
}
/* Modal responsive - full screen on mobile, centered on desktop */
.modal-responsive {
@apply fixed inset-0 sm:inset-auto sm:relative;
@apply w-full sm:max-w-lg sm:mx-auto;
@apply h-full sm:h-auto sm:max-h-[90vh];
@apply rounded-none sm:rounded-lg;
}
/* Charts container - responsive height */
.chart-container {
@apply h-64 sm:h-72 lg:h-80;
@apply w-full;
}
/* Header actions - stack on mobile, inline on larger screens */
.header-actions {
@apply flex flex-col gap-3 w-full;
@apply sm:flex-row sm:w-auto sm:items-center;
}
/* Page header - responsive layout */
.page-header {
@apply flex flex-col gap-4;
@apply sm:flex-row sm:items-center sm:justify-between;
}
/* Filter bar - responsive layout */
.filter-bar {
@apply flex flex-col gap-4;
@apply sm:flex-row sm:items-end sm:flex-wrap;
}
/* Content section - responsive padding */
.section-responsive {
@apply px-4 py-6;
@apply sm:px-6 sm:py-8;
@apply lg:px-8;
}
/* RTL-aware responsive sidebar */
@media (max-width: 991px) {
.sidebar-responsive {
@apply fixed inset-y-0 start-0 w-64;
@apply transform -translate-x-full transition-transform duration-200;
@apply z-40;
}
.sidebar-responsive.open {
@apply translate-x-0;
}
/* RTL: sidebar comes from right */
[dir="rtl"] .sidebar-responsive {
@apply end-0 start-auto translate-x-full;
}
[dir="rtl"] .sidebar-responsive.open {
@apply translate-x-0;
}
}
/* Sidebar overlay for mobile */
.sidebar-overlay {
@apply fixed inset-0 bg-black/50 z-30;
@apply transition-opacity duration-200;
}
/* Calendar responsive - smaller cells on mobile */
.calendar-grid {
@apply grid grid-cols-7 gap-1;
}
.calendar-cell {
@apply h-10 sm:h-12;
@apply text-sm sm:text-base;
}
/* Time slot grid - responsive columns */
.time-slots-grid {
@apply grid gap-2;
@apply grid-cols-2 sm:grid-cols-3 md:grid-cols-4;
}
/* Time slot button - touch-friendly */
.time-slot-btn {
@apply p-3 min-h-[44px];
@apply text-sm sm:text-base;
}
/* Post/blog grid - responsive layout */
.posts-grid {
@apply grid gap-6;
@apply grid-cols-1;
@apply sm:grid-cols-2;
@apply lg:grid-cols-3;
}
/* Timeline/case view - responsive layout */
.timeline-container {
@apply relative;
}
.timeline-line {
@apply absolute top-0 bottom-0 w-0.5 bg-zinc-200 dark:bg-zinc-700;
@apply start-4 sm:start-6;
}
.timeline-item {
@apply relative ps-10 sm:ps-14;
@apply pb-6;
}
.timeline-dot {
@apply absolute start-2 sm:start-4;
@apply w-4 h-4 sm:w-5 sm:h-5;
@apply rounded-full bg-gold;
@apply transform -translate-x-1/2;
}
/* Empty state - responsive sizing */
.empty-state {
@apply py-8 sm:py-12;
@apply text-center;
}
.empty-state-icon {
@apply w-12 h-12 sm:w-16 sm:h-16;
@apply mx-auto mb-4;
}
/* Pagination responsive */
.pagination-responsive {
@apply flex flex-wrap justify-center gap-1;
@apply sm:gap-2;
}
/* Hide on mobile / show on desktop utilities */
.hide-mobile {
@apply hidden sm:block;
}
.show-mobile {
@apply block sm:hidden;
}
/* Stack on mobile, inline on desktop */
.stack-mobile {
@apply flex flex-col;
@apply sm:flex-row sm:items-center;
}
/* Gap utilities for responsive spacing */
.gap-responsive {
@apply gap-3 sm:gap-4 lg:gap-6;
}
/* Text size responsive */
.text-responsive-sm {
@apply text-xs sm:text-sm;
}
.text-responsive-base {
@apply text-sm sm:text-base;
}
.text-responsive-lg {
@apply text-base sm:text-lg lg:text-xl;
}
.text-responsive-xl {
@apply text-lg sm:text-xl lg:text-2xl;
}
/* Heading responsive sizes */
.heading-responsive-page {
@apply text-xl sm:text-2xl lg:text-3xl;
@apply font-bold;
}
.heading-responsive-section {
@apply text-lg sm:text-xl;
@apply font-semibold;
}
resources/views/components/footer.blade.php
+12 -12
View File
@@ -1,8 +1,8 @@
<footer class="bg-navy mt-auto" data-test="main-footer">
<div class="max-w-[1200px] mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Logo & Description -->
<div class="text-center md:text-start">
<div class="text-center sm:text-start">
<x-logo size="small" />
<p class="mt-3 text-gold-light text-sm">
{{ __('footer.description') }}
@@ -10,23 +10,23 @@
</div>
<!-- Contact Information -->
<div class="text-center md:text-start">
<div class="text-center sm:text-start">
<h3 class="text-gold font-semibold mb-3">{{ __('footer.contact') }}</h3>
<address class="text-gold-light text-sm not-italic space-y-1">
<p>{{ __('footer.address') }}</p>
<p>{{ __('footer.phone') }}</p>
<p>{{ __('footer.email') }}</p>
<p class="ltr-content">{{ __('footer.phone') }}</p>
<p class="ltr-content">{{ __('footer.email') }}</p>
</address>
</div>
<!-- Legal Links -->
<div class="text-center md:text-start">
<div class="text-center sm:text-start sm:col-span-2 lg:col-span-1">
<h3 class="text-gold font-semibold mb-3">{{ __('footer.legal') }}</h3>
<ul class="space-y-2">
<ul class="space-y-2 flex flex-row sm:flex-col gap-4 sm:gap-0 justify-center sm:justify-start">
<li>
<a
href="{{ route('terms') }}"
class="text-gold-light hover:text-gold transition-colors text-sm"
class="text-gold-light hover:text-gold transition-colors text-sm min-h-[44px] inline-flex items-center"
data-test="footer-terms"
>
{{ __('footer.terms') }}
@@ -35,7 +35,7 @@
<li>
<a
href="{{ route('privacy') }}"
class="text-gold-light hover:text-gold transition-colors text-sm"
class="text-gold-light hover:text-gold transition-colors text-sm min-h-[44px] inline-flex items-center"
data-test="footer-privacy"
>
{{ __('footer.privacy') }}
@@ -46,8 +46,8 @@
</div>
<!-- Copyright -->
<div class="mt-8 pt-6 border-t border-gold/20 text-center">
<p class="text-gold-light text-sm" data-test="footer-copyright">
<div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-gold/20 text-center">
<p class="text-gold-light text-xs sm:text-sm" data-test="footer-copyright">
&copy; {{ date('Y') }} {{ __('footer.copyright') }}
</p>
</div>
resources/views/components/layouts/public.blade.php
+1 -1
View File
@@ -19,7 +19,7 @@
<div class="h-16"></div>
<main id="main-content" class="flex-1" tabindex="-1">
<div class="max-w-[1200px] mx-auto px-4 py-8">
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
{{ $slot }}
</div>
</main>
resources/views/livewire/admin/clients/company/index.blade.php
+6 -6
View File
@@ -52,16 +52,16 @@ new class extends Component {
}; ?>
<div>
<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div class="page-header mb-6">
<div>
<flux:heading size="xl">{{ __('clients.company_clients') }}</flux:heading>
<flux:heading size="xl" class="text-xl sm:text-2xl">{{ __('clients.company_clients') }}</flux:heading>
<flux:text class="mt-1 text-zinc-500 dark:text-zinc-400">{{ __('clients.clients') }}</flux:text>
</div>
<div class="flex gap-3">
<flux:button :href="route('admin.users.export')" wire:navigate icon="arrow-down-tray">
<div class="header-actions">
<flux:button :href="route('admin.users.export')" wire:navigate icon="arrow-down-tray" class="w-full sm:w-auto justify-center">
{{ __('export.export_users') }}
</flux:button>
<flux:button variant="primary" :href="route('admin.clients.company.create')" wire:navigate icon="plus">
<flux:button variant="primary" :href="route('admin.clients.company.create')" wire:navigate icon="plus" class="w-full sm:w-auto justify-center">
{{ __('clients.create_company') }}
</flux:button>
</div>
@@ -102,7 +102,7 @@ new class extends Component {
</div>
<div class="overflow-hidden rounded-lg border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-800">
<div class="overflow-x-auto">
<div class="table-scroll-wrapper">
<table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700">
<thead class="bg-zinc-50 dark:bg-zinc-900">
<tr>
resources/views/livewire/admin/clients/individual/index.blade.php
+6 -6
View File
@@ -52,16 +52,16 @@ new class extends Component {
}; ?>
<div>
<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div class="page-header mb-6">
<div>
<flux:heading size="xl">{{ __('clients.individual_clients') }}</flux:heading>
<flux:heading size="xl" class="text-xl sm:text-2xl">{{ __('clients.individual_clients') }}</flux:heading>
<flux:text class="mt-1 text-zinc-500 dark:text-zinc-400">{{ __('clients.clients') }}</flux:text>
</div>
<div class="flex gap-3">
<flux:button :href="route('admin.users.export')" wire:navigate icon="arrow-down-tray">
<div class="header-actions">
<flux:button :href="route('admin.users.export')" wire:navigate icon="arrow-down-tray" class="w-full sm:w-auto justify-center">
{{ __('export.export_users') }}
</flux:button>
<flux:button variant="primary" :href="route('admin.clients.individual.create')" wire:navigate icon="plus">
<flux:button variant="primary" :href="route('admin.clients.individual.create')" wire:navigate icon="plus" class="w-full sm:w-auto justify-center">
{{ __('clients.create_client') }}
</flux:button>
</div>
@@ -102,7 +102,7 @@ new class extends Component {
</div>
<div class="overflow-hidden rounded-lg border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-800">
<div class="overflow-x-auto">
<div class="table-scroll-wrapper">
<table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700">
<thead class="bg-zinc-50 dark:bg-zinc-900">
<tr>
resources/views/livewire/admin/dashboard.blade.php
+44 -37
View File
@@ -186,11 +186,11 @@ new class extends Component
<div>
<div class="mb-6">
<flux:heading size="xl">{{ __('admin_metrics.title') }}</flux:heading>
<flux:heading size="xl" class="text-xl sm:text-2xl">{{ __('admin_metrics.title') }}</flux:heading>
<flux:text class="mt-1 text-zinc-500 dark:text-zinc-400">{{ __('admin_metrics.subtitle') }}</flux:text>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
<div class="stats-grid">
{{-- User Metrics Card --}}
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
<div class="mb-4 flex items-center gap-3">
@@ -318,45 +318,52 @@ new class extends Component
{{-- Analytics Charts Section --}}
<div class="mt-8">
<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div class="page-header mb-6">
<flux:heading size="lg">{{ __('admin_metrics.analytics_charts') }}</flux:heading>
{{-- Date Range Selector --}}
<div class="flex flex-wrap items-center gap-2">
<flux:button
wire:click="$set('chartPeriod', '6m')"
:variant="$chartPeriod === '6m' ? 'primary' : 'ghost'"
size="sm"
>
{{ __('admin_metrics.last_6_months') }}
</flux:button>
<flux:button
wire:click="$set('chartPeriod', '12m')"
:variant="$chartPeriod === '12m' ? 'primary' : 'ghost'"
size="sm"
>
{{ __('admin_metrics.last_12_months') }}
</flux:button>
<div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
<div class="flex gap-2">
<flux:button
wire:click="$set('chartPeriod', '6m')"
:variant="$chartPeriod === '6m' ? 'primary' : 'ghost'"
size="sm"
class="flex-1 sm:flex-none"
>
{{ __('admin_metrics.last_6_months') }}
</flux:button>
<flux:button
wire:click="$set('chartPeriod', '12m')"
:variant="$chartPeriod === '12m' ? 'primary' : 'ghost'"
size="sm"
class="flex-1 sm:flex-none"
>
{{ __('admin_metrics.last_12_months') }}
</flux:button>
</div>
{{-- Custom Range --}}
<div class="flex items-center gap-2">
<flux:input
type="month"
wire:model="customStartMonth"
class="w-36"
size="sm"
/>
<span class="text-zinc-500">-</span>
<flux:input
type="month"
wire:model="customEndMonth"
class="w-36"
size="sm"
/>
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
<div class="flex items-center gap-2">
<flux:input
type="month"
wire:model="customStartMonth"
class="w-full sm:w-36"
size="sm"
/>
<span class="text-zinc-500">-</span>
<flux:input
type="month"
wire:model="customEndMonth"
class="w-full sm:w-36"
size="sm"
/>
</div>
<flux:button
wire:click="setCustomRange"
:variant="$chartPeriod === 'custom' ? 'primary' : 'ghost'"
size="sm"
class="w-full sm:w-auto"
>
{{ __('admin_metrics.apply') }}
</flux:button>
@@ -586,24 +593,24 @@ new class extends Component
<div class="mt-8">
<flux:heading size="lg" class="mb-6">{{ __('widgets.quick_actions') }}</flux:heading>
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
<div class="widget-grid">
{{-- Quick Actions Panel --}}
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800 lg:col-span-3">
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 dark:border-zinc-700 dark:bg-zinc-800 lg:col-span-3">
<livewire:admin.widgets.quick-actions />
</div>
{{-- Pending Bookings Widget --}}
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 dark:border-zinc-700 dark:bg-zinc-800">
<livewire:admin.widgets.pending-bookings />
</div>
{{-- Today's Schedule Widget --}}
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 dark:border-zinc-700 dark:bg-zinc-800">
<livewire:admin.widgets.todays-schedule />
</div>
{{-- Recent Updates Widget --}}
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 dark:border-zinc-700 dark:bg-zinc-800">
<livewire:admin.widgets.recent-updates />
</div>
</div>
resources/views/livewire/availability-calendar.blade.php
+5 -5
View File
@@ -179,15 +179,15 @@ new class extends Component
</div>
<!-- Calendar Grid -->
<div class="grid grid-cols-7 gap-1" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<div class="calendar-grid" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
@foreach($calendarDays as $dayData)
@if($dayData === null)
<div class="h-12"></div>
<div class="calendar-cell"></div>
@else
<button
wire:click="selectDate('{{ $dayData['date'] }}')"
@class([
'h-12 rounded-lg text-center transition-colors font-medium',
'calendar-cell rounded-lg text-center transition-colors font-medium min-h-[44px]',
'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:hover:bg-emerald-900/50' => $dayData['status'] === 'available',
'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:hover:bg-amber-900/50' => $dayData['status'] === 'partial',
'bg-sky-100 text-sky-700 cursor-not-allowed dark:bg-sky-900/30 dark:text-sky-400' => $dayData['status'] === 'user_booked',
@@ -211,11 +211,11 @@ new class extends Component
</flux:heading>
@if(count($availableSlots) > 0)
<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
<div class="time-slots-grid">
@foreach($availableSlots as $slot)
<button
wire:click="$parent.selectSlot('{{ $selectedDate }}', '{{ $slot }}')"
class="p-3 rounded-lg border border-amber-500 text-amber-600 hover:bg-amber-500 hover:text-white transition-colors dark:border-amber-400 dark:text-amber-400 dark:hover:bg-amber-500 dark:hover:text-white"
class="time-slot-btn rounded-lg border border-amber-500 text-amber-600 hover:bg-amber-500 hover:text-white transition-colors dark:border-amber-400 dark:text-amber-400 dark:hover:bg-amber-500 dark:hover:text-white"
>
{{ \Carbon\Carbon::parse($slot)->format('g:i A') }}
</button>
resources/views/livewire/client/consultations/book.blade.php
+5 -4
View File
@@ -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>
resources/views/livewire/client/consultations/index.blade.php
+22 -21
View File
@@ -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
resources/views/livewire/client/dashboard.blade.php
+13 -13
View File
@@ -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>
resources/views/livewire/client/timelines/index.blade.php
+22 -22
View File
@@ -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
resources/views/livewire/pages/posts/index.blade.php
+14 -14
View File
@@ -55,15 +55,15 @@ new #[Layout('components.layouts.public')] class extends Component
}
}; ?>
<div class="max-w-4xl mx-auto">
<flux:heading size="xl" class="text-navy">{{ __('posts.posts') }}</flux:heading>
<div class="max-w-4xl mx-auto px-0">
<flux:heading size="xl" class="text-navy text-xl sm:text-2xl lg:text-3xl">{{ __('posts.posts') }}</flux:heading>
<!-- Search Bar -->
<div class="mt-6 relative">
<div class="mt-4 sm:mt-6 relative">
<flux:input
wire:model.live.debounce.300ms="search"
placeholder="{{ __('posts.search_placeholder') }}"
class="w-full"
class="w-full min-h-[44px]"
>
<x-slot:iconLeading>
<flux:icon name="magnifying-glass" class="w-5 h-5 text-charcoal/50" />
@@ -73,7 +73,7 @@ new #[Layout('components.layouts.public')] class extends Component
@if($search)
<button
wire:click="clearSearch"
class="absolute end-3 top-1/2 -translate-y-1/2 text-charcoal/50 hover:text-charcoal"
class="absolute end-3 top-1/2 -translate-y-1/2 text-charcoal/50 hover:text-charcoal min-h-[44px] min-w-[44px] flex items-center justify-center"
>
<flux:icon name="x-mark" class="w-5 h-5" />
</button>
@@ -92,10 +92,10 @@ new #[Layout('components.layouts.public')] class extends Component
@endif
<!-- Posts List -->
<div class="mt-8 space-y-6">
<div class="mt-6 sm:mt-8 space-y-4 sm:space-y-6">
@forelse($posts as $post)
<article wire:key="post-{{ $post->id }}" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h2 class="text-xl font-semibold text-navy">
<article wire:key="post-{{ $post->id }}" class="bg-white p-4 sm:p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h2 class="text-lg sm:text-xl font-semibold text-navy">
<a href="{{ route('posts.show', $post) }}" class="hover:text-gold" wire:navigate>
@if($search)
{!! $this->highlightSearch($post->getTitle(), $search) !!}
@@ -105,11 +105,11 @@ new #[Layout('components.layouts.public')] class extends Component
</a>
</h2>
<time class="text-sm text-charcoal/70 mt-2 block">
<time class="text-xs sm:text-sm text-charcoal/70 mt-2 block">
{{ $post->published_at?->translatedFormat('d F Y') ?? $post->created_at->translatedFormat('d F Y') }}
</time>
<p class="mt-3 text-charcoal">
<p class="mt-2 sm:mt-3 text-charcoal text-sm sm:text-base">
@if($search)
{!! $this->highlightSearch($post->getExcerpt(), $search) !!}
@else
@@ -117,20 +117,20 @@ new #[Layout('components.layouts.public')] class extends Component
@endif
</p>
<a href="{{ route('posts.show', $post) }}" class="text-gold hover:underline mt-4 inline-block" wire:navigate>
<a href="{{ route('posts.show', $post) }}" class="text-gold hover:underline mt-3 sm:mt-4 inline-flex items-center min-h-[44px]" wire:navigate>
{{ __('posts.read_more') }} &rarr;
</a>
</article>
@empty
<div class="text-center py-12 bg-white rounded-lg">
<div class="empty-state bg-white rounded-lg">
@if($search)
<flux:icon name="magnifying-glass" class="w-12 h-12 mx-auto mb-4 text-charcoal/30" />
<flux:icon name="magnifying-glass" class="empty-state-icon text-charcoal/30" />
<p class="text-charcoal/70">{{ __('posts.no_results', ['query' => $search]) }}</p>
<flux:button wire:click="clearSearch" class="mt-4">
{{ __('posts.clear_search') }}
</flux:button>
@else
<flux:icon name="document-text" class="w-12 h-12 mx-auto mb-4 text-charcoal/40" />
<flux:icon name="document-text" class="empty-state-icon text-charcoal/40" />
<p class="text-charcoal/70">{{ __('posts.no_posts') }}</p>
@endif
</div>
resources/views/pages/home.blade.php
+13 -13
View File
@@ -1,20 +1,20 @@
<x-layouts.public>
<div class="text-center py-12">
<h1 class="text-4xl font-bold text-navy mb-4">{{ __('Libra Law Firm') }}</h1>
<p class="text-charcoal text-lg mb-8">{{ __('Professional legal services with integrity and excellence.') }}</p>
<div class="text-center py-8 sm:py-12">
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-navy mb-4">{{ __('Libra Law Firm') }}</h1>
<p class="text-charcoal text-base sm:text-lg mb-6 sm:mb-8 px-4">{{ __('Professional legal services with integrity and excellence.') }}</p>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-navy mb-2">{{ __('Expert Consultations') }}</h3>
<p class="text-charcoal">{{ __('Professional legal advice tailored to your needs.') }}</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 mt-8 sm:mt-12">
<div class="bg-white p-4 sm:p-6 rounded-lg shadow-md">
<h3 class="text-lg sm:text-xl font-semibold text-navy mb-2">{{ __('Expert Consultations') }}</h3>
<p class="text-charcoal text-sm sm:text-base">{{ __('Professional legal advice tailored to your needs.') }}</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-navy mb-2">{{ __('Case Management') }}</h3>
<p class="text-charcoal">{{ __('Track your cases and stay informed every step of the way.') }}</p>
<div class="bg-white p-4 sm:p-6 rounded-lg shadow-md">
<h3 class="text-lg sm:text-xl font-semibold text-navy mb-2">{{ __('Case Management') }}</h3>
<p class="text-charcoal text-sm sm:text-base">{{ __('Track your cases and stay informed every step of the way.') }}</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-navy mb-2">{{ __('Legal Resources') }}</h3>
<p class="text-charcoal">{{ __('Access our library of legal insights and articles.') }}</p>
<div class="bg-white p-4 sm:p-6 rounded-lg shadow-md sm:col-span-2 lg:col-span-1">
<h3 class="text-lg sm:text-xl font-semibold text-navy mb-2">{{ __('Legal Resources') }}</h3>
<p class="text-charcoal text-sm sm:text-base">{{ __('Access our library of legal insights and articles.') }}</p>
</div>
</div>
</div>