Add master-detail show pages for all major entities

Every entity list now has clickable rows that navigate to rich detail
pages with KPIs, tabbed content, and related data. New show pages:

- TrainerShow: groups, schedule, attendance, financial, qualifications
- EmployeeShow: personal info, team hierarchy, documents, timeline
- GroupShow: enrollments, schedule, sessions, attendance stats
- ProgramShow: groups, enrollments, settings, requirements
- FacilityShow: layouts, segments, reservations, schedule
- ProductShow: stock levels, movements, analytics
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/Livewire/Facilities/FacilityShow.php

+<?php
+
+namespace App\Livewire\Facilities;
+
+use App\Domain\Facility\Enums\ReservationStatus;
+use App\Domain\Facility\Models\Facility;
+use App\Domain\Facility\Models\SpaceReservation;
+use Carbon\Carbon;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Title;
+use Livewire\Component;
+
+#[Layout('layouts.app')]
+#[Title('تفاصيل المنشأة')]
+class FacilityShow extends Component
+{
+    public Facility $facility;
+    public string $activeTab = 'overview';
+
+    public function mount(Facility $facility): void
+    {
+        $this->authorize('facilities.list');
+
+        $this->facility = $facility->load([
+            'branch',
+            'layouts.segments',
+            'reservations' => fn ($q) => $q->where('status', '!=', ReservationStatus::Cancelled)
+                ->where('reservation_date', '>=', now()->toDateString())
+                ->orderBy('reservation_date')
+                ->orderBy('start_time'),
+            'creator',
+        ]);
+    }
+
+    public function render()
+    {
+        $today = Carbon::today();
+        $todayString = $today->toDateString();
+
+        // KPI calculations
+        $totalLayouts = $this->facility->layouts->count();
+        $totalSegments = $this->facility->layouts->sum(fn ($layout) => $layout->segments->count());
+
+        $todayReservations = SpaceReservation::where('facility_id', $this->facility->id)
+            ->where('reservation_date', $todayString)
+            ->where('status', ReservationStatus::Confirmed)
+            ->get();
+
+        $activeReservationsToday = $todayReservations->count();
+
+        // Segments occupied today
+        $occupiedSegmentsToday = $todayReservations->flatMap(fn ($r) => $r->segment_ids ?? [])->unique()->count();
+        $utilizationPercent = $totalSegments > 0
+            ? round(($occupiedSegmentsToday / $totalSegments) * 100, 1)
+            : 0;
+
+        // Upcoming reservations (next 7 days)
+        $upcomingReservations = SpaceReservation::where('facility_id', $this->facility->id)
+            ->where('reservation_date', '>=', $todayString)
+            ->where('reservation_date', '<=', $today->copy()->addDays(7)->toDateString())
+            ->where('status', '!=', ReservationStatus::Cancelled)
+            ->orderBy('reservation_date')
+            ->orderBy('start_time')
+            ->get();
+
+        // Today's schedule: reservations with time slots
+        $todaySchedule = SpaceReservation::where('facility_id', $this->facility->id)
+            ->where('reservation_date', $todayString)
+            ->where('status', '!=', ReservationStatus::Cancelled)
+            ->orderBy('start_time')
+            ->get();
+
+        return view('livewire.facilities.facility-show', [
+            'totalLayouts' => $totalLayouts,
+            'totalSegments' => $totalSegments,
+            'activeReservationsToday' => $activeReservationsToday,
+            'utilizationPercent' => $utilizationPercent,
+            'upcomingReservations' => $upcomingReservations,
+            'todaySchedule' => $todaySchedule,
+        ]);
+    }
+}

app/Livewire/Groups/GroupShow.php

+<?php
+
+namespace App\Livewire\Groups;
+
+use App\Domain\Attendance\Enums\AttendanceStatus;
+use App\Domain\Attendance\Models\AttendanceRecord;
+use App\Domain\Training\Enums\SessionStatus;
+use App\Domain\Training\Models\Enrollment;
+use App\Domain\Training\Models\TrainingGroup;
+use App\Domain\Training\Models\TrainingSession;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Title;
+use Livewire\Component;
+
+#[Layout('layouts.app')]
+#[Title('تفاصيل المجموعة')]
+class GroupShow extends Component
+{
+    public TrainingGroup $group;
+    public string $activeTab = 'overview';
+
+    public function mount(TrainingGroup $group): void
+    {
+        $this->authorize('groups.list');
+
+        $this->group = $group->load([
+            'program',
+            'branch',
+            'headTrainer',
+            'creator',
+            'schedules',
+            'schedules.facility',
+            'schedules.trainer',
+        ]);
+    }
+
+    public function render()
+    {
+        // Active enrollments with participant details
+        $activeEnrollments = Enrollment::where('training_group_id', $this->group->id)
+            ->where('status', 'active')
+            ->with(['participant.person'])
+            ->orderBy('enrollment_date')
+            ->get();
+
+        // All enrollments count (any status)
+        $totalEnrollments = Enrollment::where('training_group_id', $this->group->id)
+            ->whereNotIn('status', ['cancelled'])
+            ->count();
+
+        // Sessions: recent completed + upcoming scheduled
+        $recentSessions = TrainingSession::where('training_group_id', $this->group->id)
+            ->where('session_date', '<', now()->toDateString())
+            ->orderByDesc('session_date')
+            ->limit(20)
+            ->get();
+
+        $upcomingSessions = TrainingSession::where('training_group_id', $this->group->id)
+            ->where('session_date', '>=', now()->toDateString())
+            ->orderBy('session_date')
+            ->limit(10)
+            ->get();
+
+        // Session stats
+        $totalSessions = TrainingSession::where('training_group_id', $this->group->id)->count();
+        $completedSessions = TrainingSession::where('training_group_id', $this->group->id)
+            ->where('status', SessionStatus::Completed)
+            ->count();
+
+        // Attendance stats for the group (across all sessions)
+        $sessionIds = TrainingSession::where('training_group_id', $this->group->id)
+            ->pluck('id');
+
+        $attendanceQuery = AttendanceRecord::whereIn('training_session_id', $sessionIds);
+
+        $totalAttendanceRecords = (clone $attendanceQuery)->count();
+        $presentCount = (clone $attendanceQuery)->where('status', AttendanceStatus::Present)->count();
+        $lateCount = (clone $attendanceQuery)->where('status', AttendanceStatus::Late)->count();
+        $absentCount = (clone $attendanceQuery)->whereIn('status', [AttendanceStatus::Absent, AttendanceStatus::NoShow])->count();
+        $partialCount = (clone $attendanceQuery)->where('status', AttendanceStatus::Partial)->count();
+        $excusedCount = (clone $attendanceQuery)->where('status', AttendanceStatus::Excused)->count();
+        $cancelledExempt = (clone $attendanceQuery)->whereIn('status', [AttendanceStatus::Cancelled, AttendanceStatus::Exempt])->count();
+
+        $attendanceDenominator = $totalAttendanceRecords - $cancelledExempt;
+        $attendanceRate = $attendanceDenominator > 0
+            ? round(($presentCount + $lateCount + $partialCount) / $attendanceDenominator * 100, 1)
+            : 0;
+
+        // Capacity percentage
+        $capacityPercent = $this->group->max_capacity > 0
+            ? round(($this->group->current_count / $this->group->max_capacity) * 100, 1)
+            : 0;
+
+        // Per-participant attendance rates for enrollments tab
+        $participantAttendanceRates = [];
+        if ($activeEnrollments->isNotEmpty() && $sessionIds->isNotEmpty()) {
+            $participantClass = \App\Domain\Participant\Models\Participant::class;
+            foreach ($activeEnrollments as $enrollment) {
+                $pQuery = AttendanceRecord::whereIn('training_session_id', $sessionIds)
+                    ->where('subject_type', $participantClass)
+                    ->where('subject_id', $enrollment->participant_id);
+
+                $pTotal = (clone $pQuery)->count();
+                $pExcluded = (clone $pQuery)->whereIn('status', [AttendanceStatus::Cancelled, AttendanceStatus::Exempt])->count();
+                $pPositive = (clone $pQuery)->whereIn('status', [AttendanceStatus::Present, AttendanceStatus::Late, AttendanceStatus::Partial])->count();
+
+                $pDenom = $pTotal - $pExcluded;
+                $participantAttendanceRates[$enrollment->participant_id] = $pDenom > 0
+                    ? round(($pPositive / $pDenom) * 100, 1)
+                    : null;
+            }
+        }
+
+        // Waitlist count
+        $waitlistCount = $this->group->waitlist_count ?? 0;
+
+        return view('livewire.groups.group-show', [
+            'activeEnrollments' => $activeEnrollments,
+            'totalEnrollments' => $totalEnrollments,
+            'recentSessions' => $recentSessions,
+            'upcomingSessions' => $upcomingSessions,
+            'totalSessions' => $totalSessions,
+            'completedSessions' => $completedSessions,
+            'totalAttendanceRecords' => $totalAttendanceRecords,
+            'presentCount' => $presentCount,
+            'lateCount' => $lateCount,
+            'absentCount' => $absentCount,
+            'partialCount' => $partialCount,
+            'excusedCount' => $excusedCount,
+            'attendanceRate' => $attendanceRate,
+            'capacityPercent' => $capacityPercent,
+            'participantAttendanceRates' => $participantAttendanceRates,
+            'waitlistCount' => $waitlistCount,
+        ]);
+    }
+}

app/Livewire/HR/EmployeeShow.php

+<?php
+
+namespace App\Livewire\HR;
+
+use App\Domain\HR\Models\Employee;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Title;
+use Livewire\Component;
+
+#[Layout('layouts.app')]
+#[Title('ملف الموظف')]
+class EmployeeShow extends Component
+{
+    public Employee $employee;
+    public string $activeTab = 'overview';
+
+    public function mount(Employee $employee): void
+    {
+        $this->authorize('employees.list');
+        $this->employee = $employee->load([
+            'person',
+            'user',
+            'branch',
+            'manager.person',
+            'directReports.person',
+            'trainer',
+            'creator',
+            'documents',
+        ]);
+    }
+
+    public function render()
+    {
+        $person = $this->employee->person;
+
+        // Tenure calculation
+        $tenureYears = 0;
+        $tenureMonths = 0;
+        if ($this->employee->start_date) {
+            $endDate = $this->employee->end_date ?? now();
+            $tenureYears = $this->employee->start_date->diffInYears($endDate);
+            $tenureMonths = $this->employee->start_date->diffInMonths($endDate) % 12;
+        }
+
+        // Direct reports count
+        $directReportsCount = $this->employee->directReports->count();
+
+        // Documents count
+        $documentsCount = $this->employee->documents->count();
+
+        // Monthly salary equivalent (convert based on frequency)
+        $monthlySalary = $this->calculateMonthlySalary();
+
+        // Is trainer
+        $isTrainer = $this->employee->trainer !== null;
+
+        return view('livewire.hr.employee-show', [
+            'person' => $person,
+            'tenureYears' => $tenureYears,
+            'tenureMonths' => $tenureMonths,
+            'directReportsCount' => $directReportsCount,
+            'documentsCount' => $documentsCount,
+            'monthlySalary' => $monthlySalary,
+            'isTrainer' => $isTrainer,
+        ]);
+    }
+
+    private function calculateMonthlySalary(): int
+    {
+        $salary = $this->employee->salary_amount ?? 0;
+        $frequency = $this->employee->salary_frequency;
+
+        if (!$frequency) {
+            return $salary;
+        }
+
+        return match ($frequency->value) {
+            'monthly' => $salary,
+            'biweekly' => (int) round($salary * 2),
+            'weekly' => (int) round($salary * 4.33),
+            'daily' => (int) round($salary * 30),
+            'hourly' => (int) round($salary * ($this->employee->working_hours_per_week ?? 40) * 4.33),
+            default => $salary,
+        };
+    }
+}

app/Livewire/HR/TrainerShow.php

+<?php
+
+namespace App\Livewire\HR;
+
+use App\Domain\Attendance\Enums\AttendanceStatus;
+use App\Domain\Attendance\Models\AttendanceRecord;
+use App\Domain\HR\Models\Trainer;
+use App\Domain\Training\Models\Enrollment;
+use App\Domain\Training\Models\TrainingGroup;
+use App\Domain\Training\Models\TrainingSession;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Title;
+use Livewire\Component;
+
+#[Layout('layouts.app')]
+#[Title('ملف المدرب')]
+class TrainerShow extends Component
+{
+    public Trainer $trainer;
+    public string $activeTab = 'overview';
+
+    public function mount(Trainer $trainer): void
+    {
+        $this->authorize('trainers.list');
+        $this->trainer = $trainer->load([
+            'employee.person',
+            'employee.branch',
+            'person',
+            'qualifications',
+            'availabilities',
+            'compensations',
+        ]);
+    }
+
+    public function render()
+    {
+        $person = $this->trainer->employee?->person ?? $this->trainer->person;
+        $trainerUserId = $this->trainer->employee?->user_id;
+
+        // Groups where this trainer is head trainer
+        $groups = TrainingGroup::where('head_trainer_id', $trainerUserId)
+            ->with(['program', 'schedules', 'branch'])
+            ->withCount(['enrollments as active_enrollments_count' => function ($q) {
+                $q->where('status', 'active');
+            }])
+            ->get();
+
+        // Upcoming sessions (next 7 days)
+        $upcomingSessions = TrainingSession::whereHas('group', function ($q) use ($trainerUserId) {
+                $q->where('head_trainer_id', $trainerUserId);
+            })
+            ->where('session_date', '>=', now()->toDateString())
+            ->where('session_date', '<=', now()->addDays(7)->toDateString())
+            ->with(['group'])
+            ->orderBy('session_date')
+            ->orderBy('start_time')
+            ->limit(20)
+            ->get();
+
+        // Attendance stats for this trainer (as subject)
+        $trainerClass = Trainer::class;
+        $attendanceQuery = AttendanceRecord::where('subject_type', $trainerClass)
+            ->where('subject_id', $this->trainer->id);
+
+        $totalSessionsAttended = (clone $attendanceQuery)->count();
+        $presentCount = (clone $attendanceQuery)->where('status', AttendanceStatus::Present)->count();
+        $lateCount = (clone $attendanceQuery)->where('status', AttendanceStatus::Late)->count();
+        $absentCount = (clone $attendanceQuery)->whereIn('status', [AttendanceStatus::Absent, AttendanceStatus::NoShow])->count();
+        $cancelledExempt = (clone $attendanceQuery)->whereIn('status', [AttendanceStatus::Cancelled, AttendanceStatus::Exempt])->count();
+
+        $attendanceDenominator = $totalSessionsAttended - $cancelledExempt;
+        $attendanceRate = $attendanceDenominator > 0
+            ? round(($presentCount + $lateCount) / $attendanceDenominator * 100, 1)
+            : 0;
+
+        // Total participants across all groups
+        $totalParticipants = $groups->sum('active_enrollments_count');
+
+        // Capacity utilization
+        $totalCapacity = $groups->sum('max_capacity');
+        $capacityRate = $totalCapacity > 0
+            ? round($totalParticipants / $totalCapacity * 100, 1)
+            : 0;
+
+        // Recent compensations
+        $recentCompensations = $this->trainer->compensations()
+            ->orderByDesc('period_start')
+            ->limit(6)
+            ->get();
+
+        // Monthly earnings (current month)
+        $monthlyEarnings = $this->trainer->compensations()
+            ->where('period_start', '>=', now()->startOfMonth())
+            ->where('period_start', '<=', now()->endOfMonth())
+            ->sum('total_amount');
+
+        // Advances balance
+        $pendingAdvances = $this->trainer->advances()
+            ->where('status', 'pending')
+            ->sum('amount');
+
+        return view('livewire.hr.trainer-show', [
+            'person' => $person,
+            'groups' => $groups,
+            'upcomingSessions' => $upcomingSessions,
+            'totalSessionsAttended' => $totalSessionsAttended,
+            'presentCount' => $presentCount,
+            'lateCount' => $lateCount,
+            'absentCount' => $absentCount,
+            'attendanceRate' => $attendanceRate,
+            'totalParticipants' => $totalParticipants,
+            'capacityRate' => $capacityRate,
+            'recentCompensations' => $recentCompensations,
+            'monthlyEarnings' => $monthlyEarnings,
+            'pendingAdvances' => $pendingAdvances,
+        ]);
+    }
+}

app/Livewire/Inventory/ProductShow.php

+<?php
+
+namespace App\Livewire\Inventory;
+
+use App\Domain\Inventory\Enums\MovementDirection;
+use App\Domain\Inventory\Models\InventoryMovement;
+use App\Domain\Inventory\Models\Product;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Title;
+use Livewire\Component;
+
+#[Layout('layouts.app')]
+#[Title('تفاصيل المنتج')]
+class ProductShow extends Component
+{
+    public Product $product;
+
+    public function mount(Product $product): void
+    {
+        $this->authorize('inventory.list');
+        $this->product = $product->load(['category', 'inventoryLevels.warehouse', 'branch']);
+    }
+
+    public function render()
+    {
+        $levels = $this->product->inventoryLevels;
+
+        $totalOnHand = $levels->sum('quantity_on_hand');
+        $totalReserved = $levels->sum('quantity_reserved');
+        $totalAvailable = $levels->sum('quantity_available');
+
+        $movements = InventoryMovement::where('product_id', $this->product->id)
+            ->with('warehouse')
+            ->orderByDesc('created_at')
+            ->limit(30)
+            ->get();
+
+        // Analytics
+        $totalIn = InventoryMovement::where('product_id', $this->product->id)
+            ->where('direction', MovementDirection::In->value)
+            ->sum('quantity');
+
+        $totalSold = InventoryMovement::where('product_id', $this->product->id)
+            ->where('direction', MovementDirection::Out->value)
+            ->where('movement_type', 'sale')
+            ->sum('quantity');
+
+        $firstMovement = InventoryMovement::where('product_id', $this->product->id)
+            ->orderBy('created_at')
+            ->value('created_at');
+
+        $monthsActive = 1;
+        if ($firstMovement) {
+            $monthsActive = max(1, (int) now()->diffInMonths($firstMovement));
+        }
+
+        $totalMovements = InventoryMovement::where('product_id', $this->product->id)->sum('quantity');
+        $avgMonthlyMovement = round($totalMovements / $monthsActive, 1);
+
+        // Profit margin
+        $margin = 0;
+        if ($this->product->selling_price > 0 && $this->product->cost_price > 0) {
+            $margin = round((($this->product->selling_price - $this->product->cost_price) / $this->product->selling_price) * 100, 1);
+        }
+
+        return view('livewire.inventory.product-show', [
+            'levels' => $levels,
+            'totalOnHand' => $totalOnHand,
+            'totalReserved' => $totalReserved,
+            'totalAvailable' => $totalAvailable,
+            'movements' => $movements,
+            'totalIn' => $totalIn,
+            'totalSold' => $totalSold,
+            'avgMonthlyMovement' => $avgMonthlyMovement,
+            'margin' => $margin,
+        ]);
+    }
+}

app/Livewire/Programs/ProgramShow.php

+<?php
+
+namespace App\Livewire\Programs;
+
+use App\Domain\Training\Models\Enrollment;
+use App\Domain\Training\Models\TrainingGroup;
+use App\Domain\Training\Models\TrainingProgram;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Title;
+use Livewire\Component;
+
+#[Layout('layouts.app')]
+#[Title('تفاصيل البرنامج')]
+class ProgramShow extends Component
+{
+    public TrainingProgram $program;
+    public string $activeTab = 'overview';
+
+    public function mount(TrainingProgram $program): void
+    {
+        $this->authorize('programs.list');
+
+        $this->program = $program->load([
+            'activity',
+            'branch',
+            'defaultTrainer',
+            'creator',
+            'groups.headTrainer',
+            'groups.schedules',
+            'enrollments.participant.person',
+            'enrollments.group',
+        ]);
+    }
+
+    public function render()
+    {
+        $groups = $this->program->groups;
+        $enrollments = $this->program->enrollments;
+
+        // KPI calculations
+        $totalGroups = $groups->count();
+        $activeEnrollments = $enrollments->where('status.value', 'active')->count();
+        $totalCapacity = $groups->sum('max_capacity');
+        $fillRate = $totalCapacity > 0 ? round(($activeEnrollments / $totalCapacity) * 100, 1) : 0;
+        $waitlistTotal = $groups->sum('waitlist_count');
+
+        // Total revenue from enrollment invoices
+        $totalRevenue = Enrollment::where('training_program_id', $this->program->id)
+            ->whereNotNull('invoice_id')
+            ->with('invoice')
+            ->get()
+            ->sum(fn ($e) => $e->invoice?->total_amount ?? 0);
+
+        // Recent enrollments (last 20)
+        $recentEnrollments = $enrollments->sortByDesc('enrollment_date')->take(20);
+
+        return view('livewire.programs.program-show', [
+            'groups' => $groups,
+            'totalGroups' => $totalGroups,
+            'activeEnrollments' => $activeEnrollments,
+            'totalCapacity' => $totalCapacity,
+            'fillRate' => $fillRate,
+            'waitlistTotal' => $waitlistTotal,
+            'totalRevenue' => $totalRevenue,
+            'recentEnrollments' => $recentEnrollments,
+        ]);
+    }
+}

resources/views/livewire/facilities/facility-list.blade.php

@@ -67,10 +67,10 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
                 </thead>
                 <tbody class="divide-y divide-gray-100">
                     @forelse($facilities as $facility)
-                    <tr class="hover:bg-gray-50">
+                    <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='{{ route('facilities.show', $facility) }}'">
                         <td class="px-4 py-3">
                             <div>
-                                <p class="font-medium text-gray-800">{{ $facility->name_ar }}</p>
+                                <a href="{{ route('facilities.show', $facility) }}" wire:navigate class="font-medium text-gray-800 hover:text-blue-600">{{ $facility->name_ar }}</a>
                                 @if($facility->code)
                                     <p class="text-xs text-gray-400" dir="ltr">{{ $facility->code }}</p>
                                 @endif

resources/views/livewire/facilities/facility-show.blade.php

+<div x-data="{ activeTab: @entangle('activeTab') }">
+    {{-- Flash Messages --}}
+    @if(session('success'))
+    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
+        {{ session('success') }}
+    </div>
+    @endif
+    @if(session('error'))
+    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+        {{ session('error') }}
+    </div>
+    @endif
+
+    {{-- Header Card --}}
+    <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-col sm:flex-row sm:items-start justify-between gap-4">
+            <div class="flex items-center gap-4">
+                <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center">
+                    @php
+                        $typeIcons = [
+                            'field' => 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
+                            'court' => 'M4 6h16M4 10h16M4 14h16M4 18h16',
+                            'pool' => 'M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z',
+                            'gym' => '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',
+                        ];
+                        $icon = $typeIcons[$facility->type?->value ?? ''] ?? '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';
+                    @endphp
+                    <svg class="w-7 h-7 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $icon }}"/>
+                    </svg>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-gray-800">
+                        {{ $facility->name_ar }}
+                    </h1>
+                    @if($facility->name)
+                    <p class="text-sm text-gray-500" dir="ltr">
+                        {{ $facility->name }}
+                    </p>
+                    @endif
+                    <div class="flex items-center gap-3 mt-1 flex-wrap">
+                        @if($facility->code)
+                        <span class="text-sm text-gray-500 font-mono" dir="ltr">{{ $facility->code }}</span>
+                        @endif
+                        @php
+                            $statusValue = $facility->status->value ?? $facility->status;
+                            $statusColors = [
+                                'active' => 'green',
+                                'maintenance' => 'amber',
+                                'closed' => 'red',
+                                'reserved' => 'blue',
+                                'unavailable' => 'gray',
+                            ];
+                            $color = $statusColors[$statusValue] ?? 'gray';
+                        @endphp
+                        <span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full font-medium">
+                            {{ $facility->status->label() }}
+                        </span>
+                        <span class="text-xs text-gray-500">
+                            {{ $facility->type?->label() }}
+                        </span>
+                        @if($facility->branch)
+                        <span class="text-xs text-gray-400">|</span>
+                        <span class="text-xs text-gray-500">
+                            {{ $facility->branch->name_ar }}
+                        </span>
+                        @endif
+                    </div>
+                </div>
+            </div>
+            <div class="flex items-center gap-2 self-start sm:self-auto flex-wrap">
+                @can('facilities.update')
+                <a href="{{ route('facilities.edit', $facility) }}" wire:navigate
+                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium transition-colors">
+                    {{ __('تعديل') }}
+                </a>
+                @endcan
+                @can('facilities.manage_layouts')
+                <a href="{{ route('facilities.layouts', $facility) }}" wire:navigate
+                   class="px-4 py-2 bg-indigo-50 text-indigo-700 rounded-lg hover:bg-indigo-100 text-sm font-medium transition-colors">
+                    {{ __('إدارة التخطيطات') }}
+                </a>
+                @endcan
+                <a href="{{ route('facilities.list') }}" wire:navigate
+                   class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
+                    {{ __('رجوع') }}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    {{-- KPI Row --}}
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 mb-4 sm:mb-6">
+        {{-- Total Layouts --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center">
+                    <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>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('التخطيطات') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $totalLayouts }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Total Segments --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('الأجزاء') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $totalSegments }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Active Reservations Today --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-green-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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('حجوزات اليوم') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $activeReservationsToday }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Capacity --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
+                    <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="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>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('السعة') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $facility->capacity ?? '—' }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Area --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('المساحة') }}</p>
+                    <p class="text-lg font-bold text-gray-800" dir="ltr">
+                        {{ $facility->area_sqm ? $facility->area_sqm . ' م²' : '—' }}
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Utilization --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-teal-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-teal-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>
+                    <p class="text-xs text-gray-500">{{ __('الإشغال اليوم') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $utilizationPercent }}%</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {{-- Tabs --}}
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+        {{-- Tab Navigation --}}
+        <div class="border-b border-gray-200">
+            <nav class="flex overflow-x-auto -mb-px">
+                <button @click="activeTab = 'overview'"
+                        :class="activeTab === 'overview' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+                        class="whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors">
+                    {{ __('نظرة عامة') }}
+                </button>
+                <button @click="activeTab = 'layouts'"
+                        :class="activeTab === 'layouts' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+                        class="whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors">
+                    {{ __('التخطيطات') }}
+                    <span class="ms-1 text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{{ $totalLayouts }}</span>
+                </button>
+                <button @click="activeTab = 'reservations'"
+                        :class="activeTab === 'reservations' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+                        class="whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors">
+                    {{ __('الحجوزات') }}
+                    <span class="ms-1 text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{{ $upcomingReservations->count() }}</span>
+                </button>
+                <button @click="activeTab = 'schedule'"
+                        :class="activeTab === 'schedule' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+                        class="whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors">
+                    {{ __('جدول اليوم') }}
+                </button>
+            </nav>
+        </div>
+
+        {{-- Tab Content --}}
+        <div class="p-4 sm:p-6">
+
+            {{-- Overview Tab --}}
+            <div x-show="activeTab === 'overview'" x-cloak>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    {{-- Facility Info Card --}}
+                    <div class="space-y-4">
+                        <h3 class="text-base font-semibold text-gray-800 mb-3">{{ __('معلومات المنشأة') }}</h3>
+                        <div class="bg-gray-50 rounded-lg p-4 space-y-3">
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-gray-500">{{ __('النوع') }}</span>
+                                <span class="text-sm font-medium text-gray-800">{{ $facility->type?->label() ?? '—' }}</span>
+                            </div>
+                            <div class="border-t border-gray-200"></div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-gray-500">{{ __('الفرع') }}</span>
+                                <span class="text-sm font-medium text-gray-800">{{ $facility->branch?->name_ar ?? '—' }}</span>
+                            </div>
+                            <div class="border-t border-gray-200"></div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-gray-500">{{ __('السعة') }}</span>
+                                <span class="text-sm font-medium text-gray-800">{{ $facility->capacity ? $facility->capacity . ' ' . __('فرد') : '—' }}</span>
+                            </div>
+                            <div class="border-t border-gray-200"></div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-gray-500">{{ __('المساحة') }}</span>
+                                <span class="text-sm font-medium text-gray-800" dir="ltr">{{ $facility->area_sqm ? $facility->area_sqm . ' م²' : '—' }}</span>
+                            </div>
+                            @if($facility->length_m && $facility->width_m)
+                            <div class="border-t border-gray-200"></div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-gray-500">{{ __('الأبعاد') }}</span>
+                                <span class="text-sm font-medium text-gray-800" dir="ltr">{{ $facility->length_m }} × {{ $facility->width_m }} {{ __('م') }}</span>
+                            </div>
+                            @endif
+                            <div class="border-t border-gray-200"></div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-gray-500">{{ __('نوع السطح') }}</span>
+                                <span class="text-sm font-medium text-gray-800">{{ $facility->surface_type ?? '—' }}</span>
+                            </div>
+                            <div class="border-t border-gray-200"></div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-gray-500">{{ __('داخلي/خارجي') }}</span>
+                                <span class="text-sm font-medium text-gray-800">{{ $facility->is_indoor ? __('داخلي') : __('خارجي') }}</span>
+                            </div>
+                            <div class="border-t border-gray-200"></div>
+                            <div class="flex items-center gap-4">
+                                @if($facility->has_lighting)
+                                <span class="inline-flex items-center gap-1 text-xs text-green-700 bg-green-50 px-2 py-1 rounded-full">
+                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM4 11a1 1 0 100-2H3a1 1 0 000 2h1zM10 18a1 1 0 001-1v-1a1 1 0 10-2 0v1a1 1 0 001 1z"/><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z" clip-rule="evenodd"/></svg>
+                                    {{ __('إضاءة') }}
+                                </span>
+                                @endif
+                                @if($facility->has_ac)
+                                <span class="inline-flex items-center gap-1 text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded-full">
+                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
+                                    {{ __('تكييف') }}
+                                </span>
+                                @endif
+                            </div>
+                            @if($facility->operating_start || $facility->operating_end)
+                            <div class="border-t border-gray-200"></div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-gray-500">{{ __('ساعات العمل') }}</span>
+                                <span class="text-sm font-medium text-gray-800" dir="ltr">
+                                    {{ $facility->operating_start ? \Carbon\Carbon::parse($facility->operating_start)->format('H:i') : '' }}
+                                    —
+                                    {{ $facility->operating_end ? \Carbon\Carbon::parse($facility->operating_end)->format('H:i') : '' }}
+                                </span>
+                            </div>
+                            @endif
+                            @if($facility->rental_cost_per_hour)
+                            <div class="border-t border-gray-200"></div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-gray-500">{{ __('تكلفة الإيجار/ساعة') }}</span>
+                                <span class="text-sm font-medium text-gray-800">{{ number_format($facility->rental_cost_per_hour / 100, 2) }} {{ __('ج.م') }}</span>
+                            </div>
+                            @endif
+                        </div>
+
+                        @if($facility->description_ar || $facility->description)
+                        <div class="mt-4">
+                            <h4 class="text-sm font-medium text-gray-700 mb-2">{{ __('الوصف') }}</h4>
+                            <p class="text-sm text-gray-600 leading-relaxed">
+                                {{ $facility->description_ar ?? $facility->description }}
+                            </p>
+                        </div>
+                        @endif
+
+                        @if($facility->notes)
+                        <div class="mt-4">
+                            <h4 class="text-sm font-medium text-gray-700 mb-2">{{ __('ملاحظات') }}</h4>
+                            <p class="text-sm text-gray-600 leading-relaxed">{{ $facility->notes }}</p>
+                        </div>
+                        @endif
+                    </div>
+
+                    {{-- Amenities Card --}}
+                    <div>
+                        <h3 class="text-base font-semibold text-gray-800 mb-3">{{ __('المرافق والخدمات') }}</h3>
+                        @if(!empty($facility->amenities) && is_array($facility->amenities) && count($facility->amenities) > 0)
+                        <div class="flex flex-wrap gap-2">
+                            @foreach($facility->amenities as $amenity)
+                            <span class="inline-flex items-center px-3 py-1.5 rounded-lg bg-indigo-50 text-indigo-700 text-sm font-medium">
+                                <svg class="w-4 h-4 me-1.5 text-indigo-400" 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>
+                                {{ $amenity }}
+                            </span>
+                            @endforeach
+                        </div>
+                        @else
+                        <div class="bg-gray-50 rounded-lg p-6 text-center">
+                            <svg class="w-10 h-10 text-gray-300 mx-auto mb-2" 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-sm text-gray-500">{{ __('لا توجد مرافق مسجلة') }}</p>
+                        </div>
+                        @endif
+
+                        {{-- Quick Info --}}
+                        @if($facility->address)
+                        <div class="mt-6">
+                            <h4 class="text-sm font-medium text-gray-700 mb-2">{{ __('العنوان') }}</h4>
+                            <p class="text-sm text-gray-600">{{ $facility->address }}</p>
+                        </div>
+                        @endif
+
+                        @if($facility->creator)
+                        <div class="mt-6 pt-4 border-t border-gray-200">
+                            <p class="text-xs text-gray-400">
+                                {{ __('أنشئت بواسطة') }}: {{ $facility->creator->name }}
+                                &middot;
+                                {{ $facility->created_at?->translatedFormat('d M Y') }}
+                            </p>
+                        </div>
+                        @endif
+                    </div>
+                </div>
+            </div>
+
+            {{-- Layouts Tab --}}
+            <div x-show="activeTab === 'layouts'" x-cloak>
+                @if($facility->layouts->count() > 0)
+                <div class="space-y-4">
+                    @foreach($facility->layouts as $layout)
+                    <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-200 transition-colors">
+                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 rounded-lg {{ $layout->is_active ? 'bg-green-50' : 'bg-gray-100' }} flex items-center justify-center">
+                                    @if($layout->layout_type?->value === 'grid')
+                                    <svg class="w-5 h-5 {{ $layout->is_active ? 'text-green-600' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
+                                    </svg>
+                                    @elseif($layout->layout_type?->value === 'lanes')
+                                    <svg class="w-5 h-5 {{ $layout->is_active ? 'text-green-600' : 'text-gray-400' }}" 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>
+                                    @else
+                                    <svg class="w-5 h-5 {{ $layout->is_active ? 'text-green-600' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"/>
+                                    </svg>
+                                    @endif
+                                </div>
+                                <div>
+                                    <h4 class="text-sm font-semibold text-gray-800">
+                                        {{ $layout->name_ar ?? $layout->name ?? __('تخطيط بدون اسم') }}
+                                    </h4>
+                                    <div class="flex items-center gap-2 mt-0.5 flex-wrap">
+                                        <span class="text-xs px-2 py-0.5 rounded-full {{ $layout->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
+                                            {{ $layout->is_active ? __('مفعل') : __('معطل') }}
+                                        </span>
+                                        <span class="text-xs text-gray-500">
+                                            {{ $layout->layout_type?->label() }}
+                                        </span>
+                                        @if($layout->layout_config)
+                                            @php
+                                                $config = $layout->layout_config;
+                                            @endphp
+                                            @if(isset($config['rows']) && isset($config['columns']))
+                                            <span class="text-xs text-gray-400" dir="ltr">
+                                                ({{ $config['rows'] }}&times;{{ $config['columns'] }})
+                                            </span>
+                                            @elseif(isset($config['lane_count']))
+                                            <span class="text-xs text-gray-400">
+                                                {{ $config['lane_count'] }} {{ __('حارة') }}
+                                            </span>
+                                            @endif
+                                        @endif
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex items-center gap-4 text-sm">
+                                {{-- Segments count --}}
+                                <div class="text-center">
+                                    <p class="text-lg font-bold text-gray-800">{{ $layout->segments->count() }}</p>
+                                    <p class="text-xs text-gray-500">{{ __('جزء') }}</p>
+                                </div>
+                                {{-- Time period --}}
+                                <div class="text-end">
+                                    @php
+                                        $dayNames = [0 => 'الأحد', 1 => 'الإثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
+                                    @endphp
+                                    @if($layout->is_recurring && $layout->effective_day_of_week !== null)
+                                    <p class="text-xs text-gray-600 font-medium">
+                                        {{ $dayNames[$layout->effective_day_of_week] ?? '' }}
+                                    </p>
+                                    @elseif(!$layout->is_recurring && $layout->effective_date)
+                                    <p class="text-xs text-gray-600 font-medium">
+                                        {{ $layout->effective_date->format('Y-m-d') }}
+                                    </p>
+                                    @endif
+                                    @if($layout->start_time && $layout->end_time)
+                                    <p class="text-xs text-gray-400" dir="ltr">
+                                        {{ \Carbon\Carbon::parse($layout->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($layout->end_time)->format('H:i') }}
+                                    </p>
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+
+                        {{-- Segments list --}}
+                        @if($layout->segments->count() > 0)
+                        <div class="mt-3 pt-3 border-t border-gray-100">
+                            <div class="flex flex-wrap gap-1.5">
+                                @foreach($layout->segments as $segment)
+                                <span class="inline-flex items-center text-xs px-2 py-1 rounded {{ $segment->is_available ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200' }}">
+                                    {{ $segment->name_ar ?? $segment->name ?? $segment->code }}
+                                    @if(!$segment->is_available)
+                                    <svg class="w-3 h-3 ms-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"/></svg>
+                                    @endif
+                                </span>
+                                @endforeach
+                            </div>
+                        </div>
+                        @endif
+                    </div>
+                    @endforeach
+                </div>
+                @else
+                <div class="text-center py-12">
+                    <svg class="w-16 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="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>
+                    <h3 class="text-sm font-medium text-gray-700 mb-1">{{ __('لا توجد تخطيطات') }}</h3>
+                    <p class="text-sm text-gray-500 mb-4">{{ __('لم يتم إنشاء أي تخطيط مساحة لهذه المنشأة بعد') }}</p>
+                    @can('facilities.manage_layouts')
+                    <a href="{{ route('facilities.layouts', $facility) }}" wire:navigate
+                       class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium transition-colors">
+                        <svg class="w-4 h-4 me-2" 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>
+                    @endcan
+                </div>
+                @endif
+            </div>
+
+            {{-- Reservations Tab --}}
+            <div x-show="activeTab === 'reservations'" x-cloak>
+                @if($upcomingReservations->count() > 0)
+                <div class="overflow-x-auto">
+                    <table class="w-full text-sm">
+                        <thead>
+                            <tr class="text-start">
+                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50 rounded-ss-lg">{{ __('التاريخ') }}</th>
+                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50">{{ __('الوقت') }}</th>
+                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50">{{ __('العنوان') }}</th>
+                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50">{{ __('الأجزاء المحجوزة') }}</th>
+                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50 rounded-se-lg">{{ __('الحالة') }}</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            @foreach($upcomingReservations as $reservation)
+                            <tr class="hover:bg-gray-50 transition-colors">
+                                <td class="px-4 py-3 text-gray-800 font-medium">
+                                    {{ $reservation->reservation_date?->translatedFormat('D d M') }}
+                                </td>
+                                <td class="px-4 py-3 text-gray-600" dir="ltr">
+                                    {{ \Carbon\Carbon::parse($reservation->start_time)->format('H:i') }}
+                                    -
+                                    {{ \Carbon\Carbon::parse($reservation->end_time)->format('H:i') }}
+                                </td>
+                                <td class="px-4 py-3 text-gray-800">
+                                    {{ $reservation->title ?? __('حجز بدون عنوان') }}
+                                </td>
+                                <td class="px-4 py-3">
+                                    @if(!empty($reservation->segment_ids) && is_array($reservation->segment_ids))
+                                    <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">
+                                        {{ count($reservation->segment_ids) }} {{ __('جزء') }}
+                                    </span>
+                                    @else
+                                    <span class="text-xs text-gray-400">—</span>
+                                    @endif
+                                </td>
+                                <td class="px-4 py-3">
+                                    @php
+                                        $resStatusValue = $reservation->status->value ?? $reservation->status;
+                                        $resStatusColors = [
+                                            'confirmed' => 'green',
+                                            'tentative' => 'amber',
+                                            'cancelled' => 'red',
+                                        ];
+                                        $resColor = $resStatusColors[$resStatusValue] ?? 'gray';
+                                    @endphp
+                                    <span class="px-2 py-0.5 text-xs bg-{{ $resColor }}-100 text-{{ $resColor }}-700 rounded-full font-medium">
+                                        {{ $reservation->status->label() }}
+                                    </span>
+                                </td>
+                            </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+                @else
+                <div class="text-center py-12">
+                    <svg class="w-16 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="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>
+                    <h3 class="text-sm font-medium text-gray-700 mb-1">{{ __('لا توجد حجوزات قادمة') }}</h3>
+                    <p class="text-sm text-gray-500">{{ __('لا يوجد أي حجوزات خلال الأيام السبعة القادمة') }}</p>
+                </div>
+                @endif
+            </div>
+
+            {{-- Schedule Tab (Today) --}}
+            <div x-show="activeTab === 'schedule'" x-cloak>
+                <div class="mb-4">
+                    <h3 class="text-sm font-semibold text-gray-800">
+                        {{ __('جدول اليوم') }} — {{ now()->translatedFormat('l d F Y') }}
+                    </h3>
+                </div>
+
+                @if($todaySchedule->count() > 0)
+                <div class="space-y-3">
+                    @foreach($todaySchedule as $slot)
+                    <div class="flex items-start gap-4 p-3 rounded-lg border border-gray-100 hover:border-indigo-100 transition-colors">
+                        {{-- Time --}}
+                        <div class="flex-shrink-0 text-center w-20">
+                            <p class="text-sm font-bold text-gray-800" dir="ltr">
+                                {{ \Carbon\Carbon::parse($slot->start_time)->format('H:i') }}
+                            </p>
+                            <p class="text-xs text-gray-400" dir="ltr">
+                                {{ \Carbon\Carbon::parse($slot->end_time)->format('H:i') }}
+                            </p>
+                        </div>
+                        {{-- Divider --}}
+                        <div class="w-px self-stretch bg-indigo-200"></div>
+                        {{-- Details --}}
+                        <div class="flex-1 min-w-0">
+                            <p class="text-sm font-medium text-gray-800 truncate">
+                                {{ $slot->title ?? __('حجز') }}
+                            </p>
+                            @if(!empty($slot->segment_ids) && is_array($slot->segment_ids))
+                            <p class="text-xs text-gray-500 mt-0.5">
+                                {{ count($slot->segment_ids) }} {{ __('جزء مشغول') }}
+                            </p>
+                            @endif
+                            @if($slot->notes)
+                            <p class="text-xs text-gray-400 mt-1 truncate">{{ $slot->notes }}</p>
+                            @endif
+                        </div>
+                        {{-- Status --}}
+                        <div class="flex-shrink-0">
+                            @php
+                                $slotStatusValue = $slot->status->value ?? $slot->status;
+                                $slotColor = $resStatusColors[$slotStatusValue] ?? 'gray';
+                            @endphp
+                            <span class="px-2 py-0.5 text-xs bg-{{ $slotColor }}-100 text-{{ $slotColor }}-700 rounded-full font-medium">
+                                {{ $slot->status->label() }}
+                            </span>
+                        </div>
+                    </div>
+                    @endforeach
+                </div>
+                @else
+                <div class="text-center py-12">
+                    <svg class="w-16 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="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                    <h3 class="text-sm font-medium text-gray-700 mb-1">{{ __('لا يوجد جدول اليوم') }}</h3>
+                    <p class="text-sm text-gray-500">{{ __('لا توجد حجوزات أو جلسات مجدولة لهذا اليوم') }}</p>
+                </div>
+                @endif
+            </div>
+
+        </div>
+    </div>
+</div>

resources/views/livewire/groups/group-list.blade.php

@@ -63,10 +63,10 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
                 </thead>
                 <tbody class="divide-y divide-gray-100">
                     @forelse($groups as $group)
-                    <tr class="hover:bg-gray-50">
+                    <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='{{ route('groups.show', $group) }}'">
                         <td class="px-4 py-3 font-mono text-gray-600" dir="ltr">{{ $group->code }}</td>
                         <td class="px-4 py-3">
-                            <span class="font-medium text-gray-800">{{ $group->name_ar }}</span>
+                            <a href="{{ route('groups.show', $group) }}" wire:navigate class="font-medium text-gray-800 hover:text-blue-600">{{ $group->name_ar }}</a>
                             @if($group->name)
                             <p class="text-xs text-gray-500" dir="ltr">{{ $group->name }}</p>
                             @endif

resources/views/livewire/groups/group-show.blade.php

+<div>
+    {{-- Flash Messages --}}
+    @if(session('success'))
+    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
+        {{ session('success') }}
+    </div>
+    @endif
+    @if(session('error'))
+    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+        {{ session('error') }}
+    </div>
+    @endif
+
+    {{-- Header Card --}}
+    <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-col sm:flex-row sm:items-start justify-between gap-4">
+            <div class="flex items-center gap-4">
+                <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center">
+                    <svg class="w-7 h-7 text-indigo-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"/>
+                    </svg>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-gray-800">
+                        {{ $group->name_ar ?? $group->name }}
+                    </h1>
+                    @if($group->name && $group->name_ar)
+                    <p class="text-sm text-gray-500" dir="ltr">{{ $group->name }}</p>
+                    @endif
+                    <div class="flex items-center gap-3 mt-1">
+                        <span class="text-sm text-gray-500 font-mono" dir="ltr">{{ $group->code }}</span>
+                        @php
+                            $statusValue = $group->status->value ?? $group->status;
+                            $statusColors = [
+                                'forming' => 'blue',
+                                'active' => 'green',
+                                'full' => 'amber',
+                                'on_hold' => 'orange',
+                                'completed' => 'purple',
+                                'cancelled' => 'red',
+                            ];
+                            $statusLabels = [
+                                'forming' => 'قيد التشكيل',
+                                'active' => 'نشطة',
+                                'full' => 'مكتملة العدد',
+                                'on_hold' => 'معلقة',
+                                'completed' => 'منتهية',
+                                'cancelled' => 'ملغاة',
+                            ];
+                            $color = $statusColors[$statusValue] ?? 'gray';
+                        @endphp
+                        <span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full font-medium">
+                            {{ __($statusLabels[$statusValue] ?? $statusValue) }}
+                        </span>
+                        {{-- Capacity indicator --}}
+                        <span class="text-xs text-gray-500">
+                            {{ $group->current_count }}/{{ $group->max_capacity }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="flex items-center gap-2 self-start sm:self-auto">
+                @can('groups.update')
+                <a href="{{ route('groups.edit', $group) }}" wire:navigate
+                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium">
+                    {{ __('تعديل') }}
+                </a>
+                @endcan
+                <a href="{{ route('groups.list') }}" wire:navigate
+                   class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
+                    {{ __('رجوع') }}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    {{-- KPI Row --}}
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 mb-4 sm:mb-6">
+        {{-- Enrolled Count --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
+                    <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('المسجلون') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $group->current_count }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Capacity % --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-{{ $capacityPercent >= 90 ? 'red' : ($capacityPercent >= 70 ? 'amber' : 'green') }}-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-{{ $capacityPercent >= 90 ? 'red' : ($capacityPercent >= 70 ? 'amber' : 'green') }}-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('نسبة الامتلاء') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $capacityPercent }}%</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Total Sessions --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-purple-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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('إجمالي الحصص') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $totalSessions }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Completed Sessions --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-green-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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('حصص مكتملة') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $completedSessions }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Attendance Rate --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center">
+                    <svg class="w-5 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="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>
+                    <p class="text-xs text-gray-500">{{ __('نسبة الحضور') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $attendanceRate }}%</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Waitlist --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-orange-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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('قائمة الانتظار') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $waitlistCount }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {{-- Tabs --}}
+    <div x-data="{ activeTab: @entangle('activeTab') }">
+        <div class="border-b border-gray-200 mb-6">
+            <nav class="flex gap-2 sm:gap-6 -mb-px overflow-x-auto pb-1">
+                <button @click="activeTab = 'overview'"
+                        :class="activeTab === 'overview' ? '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">
+                    {{ __('نظرة عامة') }}
+                </button>
+                <button @click="activeTab = 'enrollments'"
+                        :class="activeTab === 'enrollments' ? '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">
+                    {{ __('المشتركون') }}
+                </button>
+                <button @click="activeTab = 'schedule'"
+                        :class="activeTab === 'schedule' ? '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">
+                    {{ __('الجدول') }}
+                </button>
+                <button @click="activeTab = 'sessions'"
+                        :class="activeTab === 'sessions' ? '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">
+                    {{ __('الحصص') }}
+                </button>
+                <button @click="activeTab = 'attendance'"
+                        :class="activeTab === 'attendance' ? '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">
+                    {{ __('الحضور') }}
+                </button>
+            </nav>
+        </div>
+
+        {{-- Overview Tab --}}
+        <div x-show="activeTab === 'overview'" x-cloak>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                {{-- Group Info Card --}}
+                <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>
+                    <dl class="space-y-3">
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('البرنامج') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @if($group->program)
+                                <a href="{{ route('programs.edit', $group->program) }}" wire:navigate
+                                   class="text-blue-600 hover:text-blue-800 hover:underline">
+                                    {{ $group->program->name_ar ?? $group->program->name }}
+                                </a>
+                                @else
+                                    —
+                                @endif
+                            </dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الفرع') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $group->branch?->name_ar ?? $group->branch?->name ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('المدرب الرئيسي') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $group->headTrainer?->name ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الموسم') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $group->season ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('تاريخ البدء') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $group->start_date?->format('Y-m-d') ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('تاريخ الانتهاء') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $group->end_date?->format('Y-m-d') ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('السعة القصوى') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $group->max_capacity }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('أنشأه') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $group->creator?->name ?? '—' }}</dd>
+                        </div>
+                    </dl>
+
+                    @if($group->notes)
+                    <div class="mt-4 pt-4 border-t border-gray-100">
+                        <p class="text-sm text-gray-500 mb-1">{{ __('ملاحظات') }}</p>
+                        <p class="text-sm text-gray-700 whitespace-pre-line">{{ $group->notes }}</p>
+                    </div>
+                    @endif
+                </div>
+
+                {{-- Schedule Grid Card --}}
+                <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>
+
+                    @if($group->schedules->isNotEmpty())
+                    @php
+                        $dayNames = [0 => 'الأحد', 1 => 'الاثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
+                    @endphp
+                    <div class="space-y-3">
+                        @foreach($group->schedules->sortBy('day_of_week') as $schedule)
+                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+                            <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
+                                <span class="text-xs font-bold text-blue-700">
+                                    {{ mb_substr($dayNames[$schedule->day_of_week] ?? '', 0, 2) }}
+                                </span>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <p class="text-sm font-medium text-gray-800">
+                                    {{ $dayNames[$schedule->day_of_week] ?? $schedule->day_of_week }}
+                                </p>
+                                <div class="flex items-center gap-2 text-xs text-gray-500">
+                                    <span dir="ltr">{{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($schedule->end_time)->format('H:i') }}</span>
+                                    @if($schedule->facility)
+                                    <span class="text-gray-300">|</span>
+                                    <span>{{ $schedule->facility->name_ar ?? $schedule->facility->name }}</span>
+                                    @endif
+                                </div>
+                            </div>
+                            @if($schedule->trainer)
+                            <span class="text-xs text-gray-500 flex-shrink-0">{{ $schedule->trainer->name }}</span>
+                            @endif
+                        </div>
+                        @endforeach
+                    </div>
+                    @else
+                    <div class="text-center py-8">
+                        <svg class="w-10 h-10 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="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>
+                        <p class="text-gray-500 text-sm">{{ __('لا توجد مواعيد محددة') }}</p>
+                    </div>
+                    @endif
+                </div>
+
+                {{-- Capacity Visual --}}
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 lg:col-span-2">
+                    <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('حالة السعة') }}</h3>
+                    <div class="flex items-center gap-4">
+                        <div class="flex-1">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-sm text-gray-600">{{ __('المسجلون') }}: {{ $group->current_count }} {{ __('من') }} {{ $group->max_capacity }}</span>
+                                <span class="text-sm font-bold {{ $capacityPercent >= 90 ? 'text-red-600' : ($capacityPercent >= 70 ? 'text-amber-600' : 'text-green-600') }}">{{ $capacityPercent }}%</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-3">
+                                <div class="h-3 rounded-full transition-all duration-500 {{ $capacityPercent >= 90 ? 'bg-red-500' : ($capacityPercent >= 70 ? 'bg-amber-500' : 'bg-green-500') }}"
+                                     style="width: {{ min($capacityPercent, 100) }}%"></div>
+                            </div>
+                        </div>
+                        @if($waitlistCount > 0)
+                        <div class="text-center px-4 py-2 bg-orange-50 rounded-lg flex-shrink-0">
+                            <p class="text-lg font-bold text-orange-700">{{ $waitlistCount }}</p>
+                            <p class="text-xs text-orange-600">{{ __('بالانتظار') }}</p>
+                        </div>
+                        @endif
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {{-- Enrollments Tab --}}
+        <div x-show="activeTab === 'enrollments'" x-cloak>
+            <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">
+                    <h3 class="text-base font-semibold text-gray-800">{{ __('المشتركون النشطون') }} ({{ $activeEnrollments->count() }})</h3>
+                </div>
+
+                @if($activeEnrollments->isNotEmpty())
+                <div class="overflow-x-auto">
+                    <table class="w-full text-sm">
+                        <thead class="bg-gray-50 border-b border-gray-200">
+                            <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-center font-medium text-gray-600">{{ __('الحالة') }}</th>
+                                <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('نسبة الحضور') }}</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            @foreach($activeEnrollments as $enrollment)
+                            <tr class="hover:bg-gray-50 transition">
+                                <td class="px-4 py-3">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+                                            <span class="text-xs font-bold text-blue-700">
+                                                {{ mb_substr($enrollment->participant?->person?->name_ar ?? '', 0, 1) }}
+                                            </span>
+                                        </div>
+                                        <div>
+                                            @can('participants.list')
+                                            <a href="{{ route('participants.show', $enrollment->participant) }}" wire:navigate
+                                               class="text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline">
+                                                {{ $enrollment->participant?->person?->name_ar ?? '—' }}
+                                            </a>
+                                            @else
+                                            <span class="text-sm font-medium text-gray-800">
+                                                {{ $enrollment->participant?->person?->name_ar ?? '—' }}
+                                            </span>
+                                            @endcan
+                                            @if($enrollment->participant?->person?->phone)
+                                            <p class="text-xs text-gray-500" dir="ltr">{{ $enrollment->participant->person->phone }}</p>
+                                            @endif
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-3 text-gray-600" dir="ltr">
+                                    {{ $enrollment->enrollment_date?->format('Y-m-d') ?? '—' }}
+                                </td>
+                                <td class="px-4 py-3 text-center">
+                                    <span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">
+                                        {{ __('نشط') }}
+                                    </span>
+                                </td>
+                                <td class="px-4 py-3 text-center">
+                                    @php
+                                        $pRate = $participantAttendanceRates[$enrollment->participant_id] ?? null;
+                                    @endphp
+                                    @if($pRate !== null)
+                                    <span class="text-sm font-medium {{ $pRate >= 75 ? 'text-green-600' : ($pRate >= 50 ? 'text-amber-600' : 'text-red-600') }}">
+                                        {{ $pRate }}%
+                                    </span>
+                                    @else
+                                    <span class="text-gray-400">—</span>
+                                    @endif
+                                </td>
+                            </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+                @else
+                <div class="px-4 py-12 text-center">
+                    <svg class="w-10 h-10 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 0z"/>
+                    </svg>
+                    <p class="text-gray-500 text-sm">{{ __('لا يوجد مشتركون نشطون في هذه المجموعة') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+
+        {{-- Schedule Tab --}}
+        <div x-show="activeTab === 'schedule'" x-cloak>
+            <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">
+                    <h3 class="text-base font-semibold text-gray-800">{{ __('الجدول الأسبوعي') }}</h3>
+                    @can('groups.list')
+                    <a href="{{ route('groups.print', $group) }}" target="_blank"
+                       class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
+                        <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
+                        </svg>
+                        {{ __('طباعة') }}
+                    </a>
+                    @endcan
+                </div>
+
+                @if($group->schedules->isNotEmpty())
+                @php
+                    $dayNames = [0 => 'الأحد', 1 => 'الاثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
+                    $schedulesByDay = $group->schedules->groupBy('day_of_week');
+                @endphp
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-7 gap-2">
+                    @foreach($dayNames as $dayNum => $dayName)
+                    <div class="border border-gray-200 rounded-lg overflow-hidden">
+                        <div class="bg-gray-50 px-3 py-2 border-b border-gray-200">
+                            <p class="text-xs font-semibold text-gray-700 text-center">{{ $dayName }}</p>
+                        </div>
+                        <div class="p-2 min-h-[60px]">
+                            @if(isset($schedulesByDay[$dayNum]))
+                                @foreach($schedulesByDay[$dayNum] as $schedule)
+                                <div class="p-2 bg-blue-50 rounded text-center mb-1 last:mb-0">
+                                    <p class="text-xs font-medium text-blue-800" dir="ltr">
+                                        {{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }}
+                                    </p>
+                                    <p class="text-xs text-blue-600" dir="ltr">
+                                        {{ \Carbon\Carbon::parse($schedule->end_time)->format('H:i') }}
+                                    </p>
+                                    @if($schedule->facility)
+                                    <p class="text-[10px] text-blue-500 mt-0.5 truncate">{{ $schedule->facility->name_ar ?? $schedule->facility->name }}</p>
+                                    @endif
+                                </div>
+                                @endforeach
+                            @else
+                                <div class="flex items-center justify-center h-full min-h-[40px]">
+                                    <span class="text-xs text-gray-300">—</span>
+                                </div>
+                            @endif
+                        </div>
+                    </div>
+                    @endforeach
+                </div>
+
+                {{-- Schedule Details Table --}}
+                <div class="mt-6 overflow-x-auto">
+                    <table class="w-full text-sm">
+                        <thead class="bg-gray-50 border-b border-gray-200">
+                            <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>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            @foreach($group->schedules->sortBy('day_of_week') as $schedule)
+                            <tr class="hover:bg-gray-50">
+                                <td class="px-4 py-3 font-medium text-gray-800">{{ $dayNames[$schedule->day_of_week] ?? '' }}</td>
+                                <td class="px-4 py-3 text-gray-600" dir="ltr">
+                                    {{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($schedule->end_time)->format('H:i') }}
+                                </td>
+                                <td class="px-4 py-3 text-gray-600">{{ $schedule->facility?->name_ar ?? $schedule->facility?->name ?? '—' }}</td>
+                                <td class="px-4 py-3 text-gray-600">{{ $schedule->trainer?->name ?? '—' }}</td>
+                                <td class="px-4 py-3 text-center">
+                                    @if($schedule->is_active)
+                                    <span class="inline-block w-2 h-2 rounded-full bg-green-500"></span>
+                                    @else
+                                    <span class="inline-block w-2 h-2 rounded-full bg-gray-300"></span>
+                                    @endif
+                                </td>
+                            </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+                @else
+                <div class="text-center py-12">
+                    <svg class="w-10 h-10 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="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>
+                    <p class="text-gray-500 text-sm">{{ __('لم يتم تحديد جدول بعد') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+
+        {{-- Sessions Tab --}}
+        <div x-show="activeTab === 'sessions'" x-cloak>
+            <div class="space-y-6">
+                {{-- Upcoming Sessions --}}
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                    <div class="p-4 border-b border-gray-100">
+                        <h3 class="text-base font-semibold text-gray-800">{{ __('الحصص القادمة') }}</h3>
+                    </div>
+
+                    @if($upcomingSessions->isNotEmpty())
+                    <div class="divide-y divide-gray-100">
+                        @foreach($upcomingSessions as $session)
+                        <div class="p-4 hover:bg-gray-50 transition">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
+                                        <span class="text-xs font-bold text-blue-700" dir="ltr">
+                                            {{ $session->session_date?->format('d') }}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        <p class="text-sm font-medium text-gray-800" dir="ltr">
+                                            {{ $session->session_date?->format('Y-m-d') }}
+                                            @if($session->session_date)
+                                            @php
+                                                $sessionDayNames = [0 => 'الأحد', 1 => 'الاثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
+                                            @endphp
+                                            <span class="text-gray-500 text-xs me-2">({{ $sessionDayNames[$session->session_date->dayOfWeek] ?? '' }})</span>
+                                            @endif
+                                        </p>
+                                        <p class="text-xs text-gray-500" dir="ltr">
+                                            {{ $session->start_time ? \Carbon\Carbon::parse($session->start_time)->format('H:i') : '' }}
+                                            @if($session->end_time)
+                                            - {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}
+                                            @endif
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    @if($session->topic)
+                                    <span class="text-xs text-gray-500 hidden sm:inline">{{ Str::limit($session->topic, 30) }}</span>
+                                    @endif
+                                    @php
+                                        $sStatusValue = $session->status->value ?? $session->status;
+                                        $sStatusColors = [
+                                            'scheduled' => 'blue',
+                                            'in_progress' => 'amber',
+                                            'completed' => 'green',
+                                            'cancelled' => 'red',
+                                            'rescheduled' => 'purple',
+                                        ];
+                                        $sStatusLabels = [
+                                            'scheduled' => 'مجدولة',
+                                            'in_progress' => 'جارية',
+                                            'completed' => 'مكتملة',
+                                            'cancelled' => 'ملغاة',
+                                            'rescheduled' => 'مؤجلة',
+                                        ];
+                                        $sColor = $sStatusColors[$sStatusValue] ?? 'gray';
+                                    @endphp
+                                    <span class="px-2 py-0.5 text-xs bg-{{ $sColor }}-100 text-{{ $sColor }}-700 rounded-full">
+                                        {{ __($sStatusLabels[$sStatusValue] ?? $sStatusValue) }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        @endforeach
+                    </div>
+                    @else
+                    <div class="px-4 py-8 text-center">
+                        <svg class="w-10 h-10 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="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>
+                        <p class="text-gray-500 text-sm">{{ __('لا توجد حصص قادمة') }}</p>
+                    </div>
+                    @endif
+                </div>
+
+                {{-- Recent Sessions --}}
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                    <div class="p-4 border-b border-gray-100">
+                        <h3 class="text-base font-semibold text-gray-800">{{ __('الحصص الأخيرة') }}</h3>
+                    </div>
+
+                    @if($recentSessions->isNotEmpty())
+                    <div class="divide-y divide-gray-100">
+                        @foreach($recentSessions as $session)
+                        <div class="p-4 hover:bg-gray-50 transition">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
+                                        <span class="text-xs font-bold text-gray-600" dir="ltr">
+                                            {{ $session->session_date?->format('d') }}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        <p class="text-sm font-medium text-gray-800" dir="ltr">
+                                            {{ $session->session_date?->format('Y-m-d') }}
+                                            @if($session->session_date)
+                                            @php
+                                                $sessionDayNames2 = [0 => 'الأحد', 1 => 'الاثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
+                                            @endphp
+                                            <span class="text-gray-500 text-xs me-2">({{ $sessionDayNames2[$session->session_date->dayOfWeek] ?? '' }})</span>
+                                            @endif
+                                        </p>
+                                        <div class="flex items-center gap-2 text-xs text-gray-500">
+                                            <span dir="ltr">
+                                                {{ $session->start_time ? \Carbon\Carbon::parse($session->start_time)->format('H:i') : '' }}
+                                                @if($session->end_time)
+                                                - {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}
+                                                @endif
+                                            </span>
+                                            @if($session->actual_participants !== null)
+                                            <span class="text-gray-300">|</span>
+                                            <span>{{ __('حضور') }}: {{ $session->actual_participants }}</span>
+                                            @endif
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    @if($session->topic)
+                                    <span class="text-xs text-gray-500 hidden sm:inline">{{ Str::limit($session->topic, 30) }}</span>
+                                    @endif
+                                    @php
+                                        $sStatusValue2 = $session->status->value ?? $session->status;
+                                        $sColor2 = $sStatusColors[$sStatusValue2] ?? 'gray';
+                                    @endphp
+                                    <span class="px-2 py-0.5 text-xs bg-{{ $sColor2 }}-100 text-{{ $sColor2 }}-700 rounded-full">
+                                        {{ __($sStatusLabels[$sStatusValue2] ?? $sStatusValue2) }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        @endforeach
+                    </div>
+                    @else
+                    <div class="px-4 py-8 text-center">
+                        <svg class="w-10 h-10 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        <p class="text-gray-500 text-sm">{{ __('لا توجد حصص سابقة') }}</p>
+                    </div>
+                    @endif
+                </div>
+            </div>
+        </div>
+
+        {{-- Attendance Tab --}}
+        <div x-show="activeTab === 'attendance'" x-cloak>
+            <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>
+
+                @if($totalAttendanceRecords > 0)
+                {{-- Attendance Rate Bar --}}
+                <div class="mb-6">
+                    <div class="flex items-center justify-between mb-2">
+                        <span class="text-sm text-gray-600">{{ __('نسبة الحضور الإجمالية') }}</span>
+                        <span class="text-sm font-bold {{ $attendanceRate >= 75 ? 'text-green-600' : ($attendanceRate >= 50 ? 'text-amber-600' : 'text-red-600') }}">{{ $attendanceRate }}%</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-3">
+                        <div class="h-3 rounded-full transition-all duration-500 {{ $attendanceRate >= 75 ? 'bg-green-500' : ($attendanceRate >= 50 ? 'bg-amber-500' : 'bg-red-500') }}"
+                             style="width: {{ min($attendanceRate, 100) }}%"></div>
+                    </div>
+                </div>
+
+                {{-- Stats Grid --}}
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+                    <div class="text-center p-3 bg-green-50 rounded-lg">
+                        <p class="text-2xl font-bold text-green-700">{{ $presentCount }}</p>
+                        <p class="text-xs text-green-600 mt-1">{{ __('حاضر') }}</p>
+                    </div>
+                    <div class="text-center p-3 bg-amber-50 rounded-lg">
+                        <p class="text-2xl font-bold text-amber-700">{{ $lateCount }}</p>
+                        <p class="text-xs text-amber-600 mt-1">{{ __('متأخر') }}</p>
+                    </div>
+                    <div class="text-center p-3 bg-red-50 rounded-lg">
+                        <p class="text-2xl font-bold text-red-700">{{ $absentCount }}</p>
+                        <p class="text-xs text-red-600 mt-1">{{ __('غائب') }}</p>
+                    </div>
+                    <div class="text-center p-3 bg-yellow-50 rounded-lg">
+                        <p class="text-2xl font-bold text-yellow-700">{{ $partialCount }}</p>
+                        <p class="text-xs text-yellow-600 mt-1">{{ __('حضور جزئي') }}</p>
+                    </div>
+                    <div class="text-center p-3 bg-blue-50 rounded-lg">
+                        <p class="text-2xl font-bold text-blue-700">{{ $excusedCount }}</p>
+                        <p class="text-xs text-blue-600 mt-1">{{ __('معذور') }}</p>
+                    </div>
+                </div>
+
+                <div class="mt-4 pt-4 border-t border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+                    <p class="text-sm text-gray-500">
+                        {{ __('إجمالي سجلات الحضور') }}: <span class="font-medium text-gray-700">{{ $totalAttendanceRecords }}</span>
+                    </p>
+                    <p class="text-sm text-gray-500">
+                        {{ __('الحصص المكتملة') }}: <span class="font-medium text-gray-700">{{ $completedSessions }}</span> {{ __('من') }} <span class="font-medium text-gray-700">{{ $totalSessions }}</span>
+                    </p>
+                </div>
+                @else
+                <div class="text-center py-8">
+                    <svg class="w-10 h-10 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                    <p class="text-gray-500 text-sm">{{ __('لا توجد سجلات حضور بعد') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+    </div>
+</div>

resources/views/livewire/hr/employee-list.blade.php

@@ -63,8 +63,8 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 f
                 </thead>
                 <tbody class="divide-y divide-gray-100">
                     @forelse($employees as $emp)
-                        <tr class="hover:bg-gray-50">
-                            <td class="px-4 py-3 font-medium text-gray-900">{{ $emp->person?->name_ar ?? '-' }}</td>
+                        <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='{{ route('employees.show', $emp) }}'">
+                            <td class="px-4 py-3"><a href="{{ route('employees.show', $emp) }}" wire:navigate class="font-medium text-gray-900 hover:text-blue-600">{{ $emp->person?->name_ar ?? '-' }}</a></td>
                             <td class="px-4 py-3 text-gray-600 font-mono text-xs">{{ $emp->employee_number }}</td>
                             <td class="px-4 py-3 text-gray-600">{{ $emp->position ?? '-' }}</td>
                             <td class="px-4 py-3">

resources/views/livewire/hr/employee-show.blade.php

+<div>
+    {{-- Flash Messages --}}
+    @if(session('success'))
+    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
+        {{ session('success') }}
+    </div>
+    @endif
+    @if(session('error'))
+    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+        {{ session('error') }}
+    </div>
+    @endif
+
+    {{-- Header Card --}}
+    <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-col sm:flex-row sm:items-start justify-between gap-4">
+            <div class="flex items-center gap-4">
+                <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center">
+                    <span class="text-xl font-bold text-indigo-700">
+                        {{ mb_substr($person?->name_ar ?? '', 0, 1) }}
+                    </span>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-gray-800">
+                        {{ $person?->name_ar }}
+                    </h1>
+                    @if($person?->name)
+                    <p class="text-sm text-gray-500" dir="ltr">
+                        {{ $person->name }}
+                    </p>
+                    @endif
+                    <div class="flex items-center gap-3 mt-1">
+                        <span class="text-sm text-gray-500 font-mono" dir="ltr">{{ $employee->employee_number }}</span>
+                        @php
+                            $statusValue = $employee->status->value ?? $employee->status;
+                            $statusColors = [
+                                'active' => 'green',
+                                'on_leave' => 'amber',
+                                'suspended' => 'red',
+                                'terminated' => 'gray',
+                                'resigned' => 'orange',
+                            ];
+                            $color = $statusColors[$statusValue] ?? 'gray';
+                        @endphp
+                        <span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full font-medium">
+                            {{ $employee->status->label() }}
+                        </span>
+                        @if($employee->position)
+                        <span class="text-sm text-gray-500">{{ $employee->position }}</span>
+                        @endif
+                        @if($employee->department)
+                        <span class="text-sm text-gray-400">|</span>
+                        <span class="text-sm text-gray-500">{{ $employee->department }}</span>
+                        @endif
+                    </div>
+                </div>
+            </div>
+            <div class="flex items-center gap-2 self-start sm:self-auto">
+                @can('employees.update')
+                <a href="{{ route('employees.edit', $employee) }}" wire:navigate
+                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium">
+                    {{ __('تعديل') }}
+                </a>
+                @endcan
+                <a href="{{ route('employees.list') }}" wire:navigate
+                   class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
+                    {{ __('رجوع') }}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    {{-- KPI Row --}}
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 mb-4 sm:mb-6">
+        {{-- Tenure --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
+                    <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="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>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('مدة الخدمة') }}</p>
+                    <p class="text-lg font-bold text-gray-800">
+                        @if($tenureYears > 0)
+                            {{ $tenureYears }} {{ __('سنة') }}
+                            @if($tenureMonths > 0) {{ $tenureMonths }} {{ __('شهر') }} @endif
+                        @elseif($tenureMonths > 0)
+                            {{ $tenureMonths }} {{ __('شهر') }}
+                        @else
+                            {{ __('جديد') }}
+                        @endif
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Working Hours --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-green-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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('ساعات العمل/أسبوع') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $employee->working_hours_per_week ?? '—' }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Direct Reports --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-purple-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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('المرؤوسين') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $directReportsCount }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Documents --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-amber-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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('المستندات') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $documentsCount }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Monthly Salary --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center">
+                    <svg class="w-5 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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('الراتب الشهري') }}</p>
+                    <p class="text-lg font-bold text-gray-800" dir="ltr">
+                        @if($monthlySalary > 0)
+                            {{ number_format($monthlySalary / 100, 2) }} {{ __('ج.م') }}
+                        @else
+                            —
+                        @endif
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Trainer Status --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-cyan-600" 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>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('مدرب') }}</p>
+                    @if($isTrainer)
+                        <p class="text-lg font-bold text-green-600">{{ __('نعم') }}</p>
+                    @else
+                        <p class="text-lg font-bold text-gray-400">{{ __('لا') }}</p>
+                    @endif
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {{-- Tabs --}}
+    <div x-data="{ activeTab: @entangle('activeTab') }">
+        <div class="border-b border-gray-200 mb-6">
+            <nav class="flex gap-2 sm:gap-6 -mb-px overflow-x-auto pb-1">
+                <button @click="activeTab = 'overview'"
+                        :class="activeTab === 'overview' ? '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">
+                    {{ __('نظرة عامة') }}
+                </button>
+                <button @click="activeTab = 'team'"
+                        :class="activeTab === 'team' ? '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">
+                    {{ __('الفريق') }}
+                </button>
+                <button @click="activeTab = 'documents'"
+                        :class="activeTab === 'documents' ? '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">
+                    {{ __('المستندات') }}
+                </button>
+                <button @click="activeTab = 'timeline'"
+                        :class="activeTab === 'timeline' ? '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">
+                    {{ __('السجل الزمني') }}
+                </button>
+            </nav>
+        </div>
+
+        {{-- Overview Tab --}}
+        <div x-show="activeTab === 'overview'" x-cloak>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                {{-- Personal Info Card --}}
+                <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>
+                    <dl class="space-y-3">
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الهاتف') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $person?->phone ?? '—' }}</dd>
+                        </div>
+                        @if($person?->phone_secondary)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('هاتف إضافي') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $person->phone_secondary }}</dd>
+                        </div>
+                        @endif
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('البريد الإلكتروني') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $person?->email ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الرقم القومي') }}</dt>
+                            <dd class="text-sm text-gray-800 font-mono" dir="ltr">{{ $person?->national_id ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الجنس') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $person?->gender === 'male' ? __('ذكر') : ($person?->gender === 'female' ? __('أنثى') : '—') }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('تاريخ الميلاد') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $person?->date_of_birth?->format('Y-m-d') ?? '—' }}</dd>
+                        </div>
+                        @if($person?->address)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('العنوان') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $person->address }}</dd>
+                        </div>
+                        @endif
+                    </dl>
+                </div>
+
+                {{-- Employment Info Card --}}
+                <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>
+                    <dl class="space-y-3">
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('المسمى الوظيفي') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $employee->position ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('القسم') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $employee->department ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الفرع') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $employee->branch?->name_ar ?? $employee->branch?->name ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('نوع التوظيف') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $employee->employment_type?->label() ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('تاريخ البدء') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $employee->start_date?->format('Y-m-d') ?? '—' }}</dd>
+                        </div>
+                        @if($employee->end_date)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('تاريخ الانتهاء') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $employee->end_date->format('Y-m-d') }}</dd>
+                        </div>
+                        @endif
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('المدير المباشر') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @if($employee->manager)
+                                    {{ $employee->manager->person?->name_ar ?? '—' }}
+                                @else
+                                    —
+                                @endif
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+
+                {{-- Compensation Card --}}
+                <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>
+                    <dl class="space-y-3">
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الراتب') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">
+                                @if($employee->salary_amount)
+                                    {{ number_format($employee->salary_amount / 100, 2) }} {{ __('ج.م') }}
+                                @else
+                                    —
+                                @endif
+                            </dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('دورة الصرف') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $employee->salary_frequency?->label() ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('ساعات العمل الأسبوعية') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $employee->working_hours_per_week ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('المعادل الشهري') }}</dt>
+                            <dd class="text-sm font-medium text-gray-800" dir="ltr">
+                                @if($monthlySalary > 0)
+                                    {{ number_format($monthlySalary / 100, 2) }} {{ __('ج.م') }}
+                                @else
+                                    —
+                                @endif
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+
+                {{-- Notes Card --}}
+                @if($employee->notes)
+                <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>
+                    <p class="text-sm text-gray-600 whitespace-pre-line">{{ $employee->notes }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+
+        {{-- Team Tab --}}
+        <div x-show="activeTab === 'team'" x-cloak>
+            <div class="space-y-6">
+                {{-- Manager Card --}}
+                <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>
+                    @if($employee->manager)
+                    <div class="flex items-center gap-4">
+                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
+                            <span class="text-lg font-bold text-blue-700">
+                                {{ mb_substr($employee->manager->person?->name_ar ?? '', 0, 1) }}
+                            </span>
+                        </div>
+                        <div>
+                            @can('employees.list')
+                            <a href="{{ route('employees.show', $employee->manager) }}" wire:navigate
+                               class="text-sm font-semibold text-blue-600 hover:text-blue-800 hover:underline">
+                                {{ $employee->manager->person?->name_ar ?? '—' }}
+                            </a>
+                            @else
+                            <p class="text-sm font-semibold text-gray-800">{{ $employee->manager->person?->name_ar ?? '—' }}</p>
+                            @endcan
+                            <p class="text-xs text-gray-500">{{ $employee->manager->position ?? '' }}</p>
+                            <p class="text-xs text-gray-400">{{ $employee->manager->department ?? '' }}</p>
+                        </div>
+                    </div>
+                    @else
+                    <div class="text-center py-6">
+                        <svg class="w-10 h-10 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                        </svg>
+                        <p class="text-gray-500 text-sm">{{ __('لا يوجد مدير مباشر') }}</p>
+                    </div>
+                    @endif
+                </div>
+
+                {{-- Direct Reports Table --}}
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                    <div class="p-4 border-b border-gray-100">
+                        <h3 class="text-base font-semibold text-gray-800">{{ __('المرؤوسين المباشرين') }} ({{ $directReportsCount }})</h3>
+                    </div>
+
+                    @if($employee->directReports->isNotEmpty())
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-sm">
+                            <thead class="bg-gray-50 border-b border-gray-200">
+                                <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-center font-medium text-gray-600">{{ __('الحالة') }}</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-100">
+                                @foreach($employee->directReports as $report)
+                                <tr class="hover:bg-gray-50">
+                                    <td class="px-4 py-3">
+                                        @can('employees.list')
+                                        <a href="{{ route('employees.show', $report) }}" wire:navigate
+                                           class="font-medium text-blue-600 hover:text-blue-800 hover:underline">
+                                            {{ $report->person?->name_ar ?? '—' }}
+                                        </a>
+                                        @else
+                                        <span class="font-medium text-gray-800">{{ $report->person?->name_ar ?? '—' }}</span>
+                                        @endcan
+                                    </td>
+                                    <td class="px-4 py-3 text-gray-600">{{ $report->position ?? '—' }}</td>
+                                    <td class="px-4 py-3 text-center">
+                                        @php
+                                            $rStatusValue = $report->status->value ?? $report->status;
+                                            $rColor = $statusColors[$rStatusValue] ?? 'gray';
+                                        @endphp
+                                        <span class="px-2 py-0.5 text-xs bg-{{ $rColor }}-100 text-{{ $rColor }}-700 rounded-full font-medium">
+                                            {{ $report->status->label() }}
+                                        </span>
+                                    </td>
+                                </tr>
+                                @endforeach
+                            </tbody>
+                        </table>
+                    </div>
+                    @else
+                    <div class="px-4 py-12 text-center">
+                        <svg class="w-10 h-10 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 0z"/>
+                        </svg>
+                        <p class="text-gray-500 text-sm">{{ __('لا يوجد مرؤوسين') }}</p>
+                    </div>
+                    @endif
+                </div>
+            </div>
+        </div>
+
+        {{-- Documents Tab --}}
+        <div x-show="activeTab === 'documents'" x-cloak>
+            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                <div class="p-4 border-b border-gray-100">
+                    <h3 class="text-base font-semibold text-gray-800">{{ __('المستندات') }} ({{ $documentsCount }})</h3>
+                </div>
+
+                @if($employee->documents->isNotEmpty())
+                <div class="overflow-x-auto">
+                    <table class="w-full text-sm">
+                        <thead class="bg-gray-50 border-b border-gray-200">
+                            <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-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>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            @foreach($employee->documents as $document)
+                            <tr class="hover:bg-gray-50">
+                                <td class="px-4 py-3">
+                                    <span class="font-medium text-gray-800">{{ $document->document_type?->label() ?? '—' }}</span>
+                                </td>
+                                <td class="px-4 py-3 text-gray-600">
+                                    {{ $document->original_filename ?? '—' }}
+                                </td>
+                                <td class="px-4 py-3 text-center">
+                                    @php
+                                        $docStatusValue = $document->status->value ?? $document->status ?? 'pending';
+                                        $docStatusColors = [
+                                            'pending' => 'amber',
+                                            'approved' => 'green',
+                                            'rejected' => 'red',
+                                            'expired' => 'gray',
+                                        ];
+                                        $docStatusLabels = [
+                                            'pending' => 'قيد المراجعة',
+                                            'approved' => 'معتمد',
+                                            'rejected' => 'مرفوض',
+                                            'expired' => 'منتهي',
+                                        ];
+                                        $dColor = $docStatusColors[$docStatusValue] ?? 'gray';
+                                    @endphp
+                                    <span class="px-2 py-0.5 text-xs bg-{{ $dColor }}-100 text-{{ $dColor }}-700 rounded-full">
+                                        {{ __($docStatusLabels[$docStatusValue] ?? $docStatusValue) }}
+                                    </span>
+                                </td>
+                                <td class="px-4 py-3 text-center text-gray-600" dir="ltr">
+                                    {{ $document->created_at?->format('Y-m-d') ?? '—' }}
+                                </td>
+                                <td class="px-4 py-3 text-center" dir="ltr">
+                                    @if($document->expires_at)
+                                        <span class="{{ $document->isExpired() ? 'text-red-600 font-medium' : 'text-gray-600' }}">
+                                            {{ $document->expires_at->format('Y-m-d') }}
+                                        </span>
+                                    @else
+                                        <span class="text-gray-400">—</span>
+                                    @endif
+                                </td>
+                                <td class="px-4 py-3 text-center">
+                                    @if($document->file_path)
+                                    <a href="{{ Storage::url($document->file_path) }}" target="_blank"
+                                       class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-600 hover:text-blue-800 bg-blue-50 rounded hover:bg-blue-100 transition">
+                                        <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="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>
+                                        {{ __('تحميل') }}
+                                    </a>
+                                    @else
+                                    <span class="text-gray-400 text-xs">—</span>
+                                    @endif
+                                </td>
+                            </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+                @else
+                <div class="px-4 py-12 text-center">
+                    <svg class="w-10 h-10 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="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-500 text-sm">{{ __('لا توجد مستندات مرفوعة') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+
+        {{-- Timeline Tab --}}
+        <div x-show="activeTab === 'timeline'" x-cloak>
+            <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-6">{{ __('السجل الزمني') }}</h3>
+
+                <div class="relative">
+                    {{-- Timeline line --}}
+                    <div class="absolute top-0 bottom-0 start-4 w-0.5 bg-gray-200"></div>
+
+                    <div class="space-y-6">
+                        {{-- Start Date --}}
+                        @if($employee->start_date)
+                        <div class="relative flex items-start gap-4 ps-10">
+                            <div class="absolute start-2 w-4 h-4 rounded-full bg-green-500 border-2 border-white shadow"></div>
+                            <div>
+                                <p class="text-sm font-medium text-gray-800">{{ __('تاريخ بدء العمل') }}</p>
+                                <p class="text-sm text-gray-600" dir="ltr">{{ $employee->start_date->format('Y-m-d') }}</p>
+                                @if($employee->employment_type)
+                                <p class="text-xs text-gray-500 mt-1">{{ __('نوع التوظيف') }}: {{ $employee->employment_type->label() }}</p>
+                                @endif
+                            </div>
+                        </div>
+                        @endif
+
+                        {{-- Trainer linked --}}
+                        @if($isTrainer)
+                        <div class="relative flex items-start gap-4 ps-10">
+                            <div class="absolute start-2 w-4 h-4 rounded-full bg-cyan-500 border-2 border-white shadow"></div>
+                            <div>
+                                <p class="text-sm font-medium text-gray-800">{{ __('تعيين كمدرب') }}</p>
+                                <p class="text-xs text-gray-500">{{ __('الموظف مسجل كمدرب في النظام') }}</p>
+                            </div>
+                        </div>
+                        @endif
+
+                        {{-- End Date (if terminated/resigned) --}}
+                        @if($employee->end_date)
+                        <div class="relative flex items-start gap-4 ps-10">
+                            <div class="absolute start-2 w-4 h-4 rounded-full bg-red-500 border-2 border-white shadow"></div>
+                            <div>
+                                <p class="text-sm font-medium text-gray-800">{{ __('تاريخ انتهاء الخدمة') }}</p>
+                                <p class="text-sm text-gray-600" dir="ltr">{{ $employee->end_date->format('Y-m-d') }}</p>
+                                @if($employee->termination_reason)
+                                <div class="mt-2 p-3 bg-red-50 rounded-lg border border-red-100">
+                                    <p class="text-xs text-red-600 font-medium mb-1">{{ __('سبب إنهاء الخدمة') }}:</p>
+                                    <p class="text-sm text-red-700">{{ $employee->termination_reason }}</p>
+                                </div>
+                                @endif
+                            </div>
+                        </div>
+                        @endif
+
+                        {{-- Notes --}}
+                        @if($employee->notes)
+                        <div class="relative flex items-start gap-4 ps-10">
+                            <div class="absolute start-2 w-4 h-4 rounded-full bg-gray-400 border-2 border-white shadow"></div>
+                            <div>
+                                <p class="text-sm font-medium text-gray-800">{{ __('ملاحظات') }}</p>
+                                <p class="text-sm text-gray-600 whitespace-pre-line mt-1">{{ $employee->notes }}</p>
+                            </div>
+                        </div>
+                        @endif
+
+                        {{-- Current status --}}
+                        @if(!$employee->end_date)
+                        <div class="relative flex items-start gap-4 ps-10">
+                            <div class="absolute start-2 w-4 h-4 rounded-full bg-blue-500 border-2 border-white shadow animate-pulse"></div>
+                            <div>
+                                <p class="text-sm font-medium text-gray-800">{{ __('الحالة الحالية') }}</p>
+                                <span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full font-medium">
+                                    {{ $employee->status->label() }}
+                                </span>
+                            </div>
+                        </div>
+                        @endif
+                    </div>
+                </div>
+
+                {{-- Empty state if no start date --}}
+                @if(!$employee->start_date && !$employee->end_date && !$employee->notes)
+                <div class="text-center py-8">
+                    <svg class="w-10 h-10 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                    <p class="text-gray-500 text-sm">{{ __('لا توجد بيانات زمنية متاحة') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+    </div>
+</div>

resources/views/livewire/hr/trainer-list.blade.php

@@ -56,9 +56,9 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 f
                 </thead>
                 <tbody class="divide-y divide-gray-100">
                     @forelse($trainers as $trainer)
-                        <tr class="hover:bg-gray-50">
+                        <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='{{ route('trainers.show', $trainer) }}'">
                             <td class="px-4 py-3">
-                                <p class="font-medium text-gray-900">{{ $trainer->employee?->person?->name_ar ?? $trainer->person?->name_ar ?? '-' }}</p>
+                                <a href="{{ route('trainers.show', $trainer) }}" wire:navigate class="font-medium text-gray-900 hover:text-blue-600">{{ $trainer->employee?->person?->name_ar ?? $trainer->person?->name_ar ?? '-' }}</a>
                                 <p class="text-xs text-gray-500 mt-0.5">{{ $trainer->employee?->branch?->name_ar ?? '' }}</p>
                             </td>
                             <td class="px-4 py-3">

resources/views/livewire/hr/trainer-show.blade.php

+<div>
+    {{-- Flash Messages --}}
+    @if(session('success'))
+    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">{{ session('success') }}</div>
+    @endif
+
+    {{-- Header Card --}}
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-6">
+        <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+            <div class="flex items-center gap-4">
+                <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg">
+                    <span class="text-xl font-bold text-white">
+                        {{ mb_substr($person?->name_ar ?? '', 0, 1) }}
+                    </span>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-gray-800">{{ $person?->name_ar ?? '—' }}</h1>
+                    @if($person?->name)
+                    <p class="text-sm text-gray-500" dir="ltr">{{ $person->name }}</p>
+                    @endif
+                    <div class="flex items-center gap-3 mt-1.5">
+                        <span class="text-xs text-gray-500 font-mono" dir="ltr">{{ $trainer->trainer_number }}</span>
+                        @php
+                            $statusColors = [
+                                'active' => 'green', 'inactive' => 'gray',
+                                'on_leave' => 'yellow', 'suspended' => 'red',
+                            ];
+                            $statusLabels = [
+                                'active' => 'نشط', 'inactive' => 'غير نشط',
+                                'on_leave' => 'إجازة', 'suspended' => 'موقوف',
+                            ];
+                            $sv = $trainer->status->value ?? $trainer->status;
+                            $sc = $statusColors[$sv] ?? 'gray';
+                        @endphp
+                        <span class="px-2 py-0.5 text-xs bg-{{ $sc }}-100 text-{{ $sc }}-700 rounded-full font-medium">
+                            {{ __($statusLabels[$sv] ?? $sv) }}
+                        </span>
+                        <span class="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full font-medium">
+                            {{ $trainer->compensation_model->label() }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="flex items-center gap-2 self-start sm:self-auto">
+                @can('trainers.update')
+                <a href="{{ route('trainers.edit', $trainer) }}" wire:navigate
+                   class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition">
+                    {{ __('تعديل') }}
+                </a>
+                @endcan
+                @can('payroll.manage')
+                <a href="{{ route('payroll.trainer-compensations', $trainer) }}" wire:navigate
+                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium transition">
+                    {{ __('المستحقات') }}
+                </a>
+                @endcan
+                <a href="{{ route('trainers.list') }}" wire:navigate
+                   class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
+                    {{ __('رجوع') }}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    {{-- KPI Cards --}}
+    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 mb-6">
+        {{-- Groups --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center">
+                    <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="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>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('المجموعات') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $groups->count() }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Total Participants --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
+                    <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/></svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('اللاعبين') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $totalParticipants }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Capacity --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('نسبة الإشغال') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $capacityRate }}%</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Attendance --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-green-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"/></svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('نسبة الحضور') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $attendanceRate }}%</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Total Sessions --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-cyan-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"/></svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('إجمالي الحصص') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $trainer->total_sessions_conducted }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Monthly Earnings --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center">
+                    <svg class="w-5 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"/></svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('مستحقات الشهر') }}</p>
+                    <p class="text-lg font-bold text-gray-800" dir="ltr">{{ number_format($monthlyEarnings / 100, 0) }} {{ __('ج.م') }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {{-- Tabs --}}
+    <div x-data="{ activeTab: @entangle('activeTab') }">
+        <div class="border-b border-gray-200 mb-6">
+            <nav class="flex gap-2 sm:gap-6 -mb-px overflow-x-auto pb-1">
+                <button @click="activeTab = 'overview'" :class="activeTab === 'overview' ? '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">{{ __('نظرة عامة') }}</button>
+                <button @click="activeTab = 'groups'" :class="activeTab === 'groups' ? '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">{{ __('المجموعات') }}</button>
+                <button @click="activeTab = 'schedule'" :class="activeTab === 'schedule' ? '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">{{ __('الجدول') }}</button>
+                <button @click="activeTab = 'attendance'" :class="activeTab === 'attendance' ? '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">{{ __('الحضور') }}</button>
+                <button @click="activeTab = 'financial'" :class="activeTab === 'financial' ? '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">{{ __('المالية') }}</button>
+                <button @click="activeTab = 'qualifications'" :class="activeTab === 'qualifications' ? '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">{{ __('المؤهلات') }}</button>
+            </nav>
+        </div>
+
+        {{-- Overview Tab --}}
+        <div x-show="activeTab === 'overview'" x-cloak>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                {{-- Personal Info --}}
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                    <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('البيانات الشخصية') }}</h3>
+                    <dl class="space-y-3">
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الهاتف') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $person?->phone ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('البريد الإلكتروني') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $person?->email ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الفرع') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $trainer->employee?->branch?->name_ar ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('تاريخ البدء') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $trainer->employee?->start_date?->format('Y-m-d') ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('القسم') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $trainer->employee?->department ?? '—' }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('التقييم') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @if($trainer->rating)
+                                <span class="flex items-center gap-1">
+                                    <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                    {{ number_format($trainer->rating, 1) }} / 5
+                                </span>
+                                @else
+                                    —
+                                @endif
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+
+                {{-- Compensation Details --}}
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                    <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('تفاصيل التعويض') }}</h3>
+                    <dl class="space-y-3">
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('نموذج التعويض') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $trainer->compensation_model->label() }}</dd>
+                        </div>
+                        @if($trainer->hourly_rate)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('سعر الساعة') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ number_format($trainer->hourly_rate / 100, 2) }} {{ __('ج.م') }}</dd>
+                        </div>
+                        @endif
+                        @if($trainer->session_rate)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('سعر الحصة') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ number_format($trainer->session_rate / 100, 2) }} {{ __('ج.م') }}</dd>
+                        </div>
+                        @endif
+                        @if($trainer->group_rate)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('سعر المجموعة') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ number_format($trainer->group_rate / 100, 2) }} {{ __('ج.م') }}</dd>
+                        </div>
+                        @endif
+                        @if($trainer->player_rate)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('سعر اللاعب') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ number_format($trainer->player_rate / 100, 2) }} {{ __('ج.م') }}</dd>
+                        </div>
+                        @endif
+                        @if($trainer->revenue_share_percent)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('نسبة المشاركة') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $trainer->revenue_share_percent }}%</dd>
+                        </div>
+                        @endif
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الحد الأقصى يومياً') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $trainer->max_daily_sessions ?? '—' }} {{ __('حصة') }}</dd>
+                        </div>
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('سلف معلقة') }}</dt>
+                            <dd class="text-sm font-medium {{ $pendingAdvances > 0 ? 'text-red-600' : 'text-gray-800' }}" dir="ltr">
+                                {{ number_format($pendingAdvances / 100, 2) }} {{ __('ج.م') }}
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+
+                {{-- Bio --}}
+                @if($trainer->bio_ar || $trainer->bio)
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 lg:col-span-2">
+                    <h3 class="text-base font-semibold text-gray-800 mb-3">{{ __('نبذة') }}</h3>
+                    <p class="text-sm text-gray-600 whitespace-pre-line">{{ $trainer->bio_ar ?? $trainer->bio }}</p>
+                </div>
+                @endif
+
+                {{-- Specializations --}}
+                @if(!empty($trainer->specializations))
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                    <h3 class="text-base font-semibold text-gray-800 mb-3">{{ __('التخصصات') }}</h3>
+                    <div class="flex flex-wrap gap-2">
+                        @foreach($trainer->specializations as $spec)
+                        <span class="px-3 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-full border border-blue-200">{{ $spec }}</span>
+                        @endforeach
+                    </div>
+                </div>
+                @endif
+            </div>
+        </div>
+
+        {{-- Groups Tab --}}
+        <div x-show="activeTab === 'groups'" x-cloak>
+            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                @if($groups->isNotEmpty())
+                <div class="divide-y divide-gray-100">
+                    @foreach($groups as $group)
+                    <div class="p-4 hover:bg-gray-50 transition">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <div class="flex items-center gap-2 mb-1">
+                                    <a href="{{ route('groups.edit', $group) }}" wire:navigate
+                                       class="text-sm font-semibold text-blue-600 hover:text-blue-800 hover:underline">
+                                        {{ $group->name_ar ?? $group->name }}
+                                    </a>
+                                    @php
+                                        $gStatusColors = ['active' => 'green', 'forming' => 'blue', 'full' => 'amber', 'on_hold' => 'yellow', 'completed' => 'gray', 'cancelled' => 'red'];
+                                        $gStatusLabels = ['active' => 'نشط', 'forming' => 'قيد التكوين', 'full' => 'مكتمل', 'on_hold' => 'معلق', 'completed' => 'منتهي', 'cancelled' => 'ملغي'];
+                                        $gSv = $group->status->value ?? $group->status;
+                                        $gSc = $gStatusColors[$gSv] ?? 'gray';
+                                    @endphp
+                                    <span class="px-2 py-0.5 text-xs bg-{{ $gSc }}-100 text-{{ $gSc }}-700 rounded-full">{{ __($gStatusLabels[$gSv] ?? $gSv) }}</span>
+                                </div>
+
+                                @if($group->program)
+                                <p class="text-sm text-gray-600 mb-1">
+                                    <span class="text-gray-400">{{ __('البرنامج') }}:</span>
+                                    {{ $group->program->name_ar ?? $group->program->name }}
+                                </p>
+                                @endif
+
+                                @if($group->branch)
+                                <p class="text-xs text-gray-500">
+                                    <span class="text-gray-400">{{ __('الفرع') }}:</span>
+                                    {{ $group->branch->name_ar }}
+                                </p>
+                                @endif
+
+                                @if($group->schedules->isNotEmpty())
+                                <div class="flex flex-wrap gap-2 mt-2">
+                                    @php
+                                        $dayNames = [0 => 'الأحد', 1 => 'الإثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
+                                    @endphp
+                                    @foreach($group->schedules as $schedule)
+                                    <span class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded">
+                                        <svg class="w-3 h-3" 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"/></svg>
+                                        {{ $dayNames[$schedule->day_of_week] ?? $schedule->day_of_week }}
+                                        <span dir="ltr">{{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }}-{{ \Carbon\Carbon::parse($schedule->end_time)->format('H:i') }}</span>
+                                    </span>
+                                    @endforeach
+                                </div>
+                                @endif
+                            </div>
+
+                            <div class="text-end">
+                                <div class="flex items-center gap-1 text-sm">
+                                    <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/></svg>
+                                    <span class="font-medium text-gray-700">{{ $group->active_enrollments_count }}</span>
+                                    <span class="text-gray-400">/</span>
+                                    <span class="text-gray-500">{{ $group->max_capacity }}</span>
+                                </div>
+                                @php $fillRate = $group->max_capacity > 0 ? round($group->active_enrollments_count / $group->max_capacity * 100) : 0; @endphp
+                                <div class="w-20 bg-gray-200 rounded-full h-1.5 mt-2">
+                                    <div class="h-1.5 rounded-full {{ $fillRate >= 90 ? 'bg-red-500' : ($fillRate >= 70 ? 'bg-amber-500' : 'bg-green-500') }}" style="width: {{ min($fillRate, 100) }}%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    @endforeach
+                </div>
+                @else
+                <div class="px-4 py-12 text-center">
+                    <svg class="w-10 h-10 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 0z"/></svg>
+                    <p class="text-gray-500 text-sm">{{ __('لا توجد مجموعات مسندة لهذا المدرب') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+
+        {{-- Schedule Tab --}}
+        <div x-show="activeTab === 'schedule'" x-cloak>
+            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                <div class="p-4 border-b border-gray-100">
+                    <h3 class="text-base font-semibold text-gray-800">{{ __('الحصص القادمة (7 أيام)') }}</h3>
+                </div>
+                @if($upcomingSessions->isNotEmpty())
+                <div class="divide-y divide-gray-100">
+                    @php $currentDate = null; @endphp
+                    @foreach($upcomingSessions as $session)
+                        @if($currentDate !== $session->session_date->format('Y-m-d'))
+                            @php $currentDate = $session->session_date->format('Y-m-d'); @endphp
+                            <div class="px-4 py-2 bg-gray-50">
+                                <p class="text-xs font-semibold text-gray-600">
+                                    {{ $session->session_date->translatedFormat('l j F') }}
+                                    @if($session->session_date->isToday())
+                                    <span class="px-1.5 py-0.5 text-xs bg-blue-100 text-blue-700 rounded ms-2">{{ __('اليوم') }}</span>
+                                    @endif
+                                </p>
+                            </div>
+                        @endif
+                        <div class="px-4 py-3 hover:bg-gray-50 transition flex items-center justify-between">
+                            <div class="flex items-center gap-3">
+                                <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center">
+                                    <svg class="w-4 h-4 text-blue-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"/></svg>
+                                </div>
+                                <div>
+                                    <p class="text-sm font-medium text-gray-800">{{ $session->group?->name_ar ?? '—' }}</p>
+                                    <p class="text-xs text-gray-500" dir="ltr">{{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}</p>
+                                </div>
+                            </div>
+                            @php
+                                $sessStatusColors = ['scheduled' => 'blue', 'in_progress' => 'green', 'completed' => 'gray', 'cancelled' => 'red', 'rescheduled' => 'amber'];
+                                $sessStatusLabels = ['scheduled' => 'مجدول', 'in_progress' => 'جاري', 'completed' => 'مكتمل', 'cancelled' => 'ملغي', 'rescheduled' => 'مُعاد جدولته'];
+                                $sessSv = $session->status->value ?? $session->status;
+                                $sessSc = $sessStatusColors[$sessSv] ?? 'gray';
+                            @endphp
+                            <span class="px-2 py-0.5 text-xs bg-{{ $sessSc }}-100 text-{{ $sessSc }}-700 rounded-full">{{ __($sessStatusLabels[$sessSv] ?? $sessSv) }}</span>
+                        </div>
+                    @endforeach
+                </div>
+                @else
+                <div class="px-4 py-12 text-center">
+                    <svg class="w-10 h-10 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="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>
+                    <p class="text-gray-500 text-sm">{{ __('لا توجد حصص مجدولة') }}</p>
+                </div>
+                @endif
+            </div>
+
+            {{-- Weekly availability --}}
+            @if($trainer->availabilities->isNotEmpty())
+            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mt-6">
+                <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('ساعات التوفر') }}</h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+                    @php $dayNames = [0 => 'الأحد', 1 => 'الإثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت']; @endphp
+                    @foreach($trainer->availabilities->sortBy('day_of_week') as $avail)
+                    <div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
+                        <p class="text-xs font-semibold text-gray-700 mb-1">{{ $dayNames[$avail->day_of_week] ?? $avail->day_of_week }}</p>
+                        <p class="text-sm text-gray-600" dir="ltr">{{ \Carbon\Carbon::parse($avail->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($avail->end_time)->format('H:i') }}</p>
+                    </div>
+                    @endforeach
+                </div>
+            </div>
+            @endif
+        </div>
+
+        {{-- Attendance Tab --}}
+        <div x-show="activeTab === 'attendance'" x-cloak>
+            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('ملخص الحضور') }}</h3>
+
+                @if($totalSessionsAttended > 0)
+                <div class="mb-6">
+                    <div class="flex items-center justify-between mb-2">
+                        <span class="text-sm text-gray-600">{{ __('نسبة الحضور الإجمالية') }}</span>
+                        <span class="text-sm font-bold {{ $attendanceRate >= 90 ? 'text-green-600' : ($attendanceRate >= 75 ? 'text-amber-600' : 'text-red-600') }}">{{ $attendanceRate }}%</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-3">
+                        <div class="h-3 rounded-full transition-all {{ $attendanceRate >= 90 ? 'bg-green-500' : ($attendanceRate >= 75 ? 'bg-amber-500' : 'bg-red-500') }}" style="width: {{ min($attendanceRate, 100) }}%"></div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <div class="text-center p-3 bg-green-50 rounded-lg">
+                        <p class="text-2xl font-bold text-green-700">{{ $presentCount }}</p>
+                        <p class="text-xs text-green-600 mt-1">{{ __('حاضر') }}</p>
+                    </div>
+                    <div class="text-center p-3 bg-amber-50 rounded-lg">
+                        <p class="text-2xl font-bold text-amber-700">{{ $lateCount }}</p>
+                        <p class="text-xs text-amber-600 mt-1">{{ __('متأخر') }}</p>
+                    </div>
+                    <div class="text-center p-3 bg-red-50 rounded-lg">
+                        <p class="text-2xl font-bold text-red-700">{{ $absentCount }}</p>
+                        <p class="text-xs text-red-600 mt-1">{{ __('غائب') }}</p>
+                    </div>
+                    <div class="text-center p-3 bg-blue-50 rounded-lg">
+                        <p class="text-2xl font-bold text-blue-700">{{ $totalSessionsAttended }}</p>
+                        <p class="text-xs text-blue-600 mt-1">{{ __('إجمالي') }}</p>
+                    </div>
+                </div>
+                @else
+                <div class="text-center py-8">
+                    <svg class="w-10 h-10 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    <p class="text-gray-500 text-sm">{{ __('لا توجد سجلات حضور بعد') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+
+        {{-- Financial Tab --}}
+        <div x-show="activeTab === 'financial'" x-cloak>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+                    <p class="text-xs text-gray-500 mb-1">{{ __('مستحقات الشهر الحالي') }}</p>
+                    <p class="text-2xl font-bold text-gray-800" dir="ltr">{{ number_format($monthlyEarnings / 100, 2) }} {{ __('ج.م') }}</p>
+                </div>
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+                    <p class="text-xs text-gray-500 mb-1">{{ __('سلف معلقة') }}</p>
+                    <p class="text-2xl font-bold {{ $pendingAdvances > 0 ? 'text-red-600' : 'text-gray-800' }}" dir="ltr">{{ number_format($pendingAdvances / 100, 2) }} {{ __('ج.م') }}</p>
+                </div>
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+                    <p class="text-xs text-gray-500 mb-1">{{ __('صافي المستحق') }}</p>
+                    <p class="text-2xl font-bold text-emerald-600" dir="ltr">{{ number_format(($monthlyEarnings - $pendingAdvances) / 100, 2) }} {{ __('ج.م') }}</p>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                <div class="p-4 border-b border-gray-100">
+                    <h3 class="text-base font-semibold text-gray-800">{{ __('سجل المستحقات') }}</h3>
+                </div>
+                @if($recentCompensations->isNotEmpty())
+                <table class="w-full text-sm">
+                    <thead class="bg-gray-50 border-b border-gray-200">
+                        <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>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-100">
+                        @foreach($recentCompensations as $comp)
+                        <tr class="hover:bg-gray-50">
+                            <td class="px-4 py-3 text-gray-800" dir="ltr">{{ $comp->period_start?->format('Y-m-d') }} → {{ $comp->period_end?->format('Y-m-d') }}</td>
+                            <td class="px-4 py-3 text-gray-600">{{ $comp->sessions_count ?? '—' }}</td>
+                            <td class="px-4 py-3 font-medium text-gray-800" dir="ltr">{{ number_format($comp->total_amount / 100, 2) }} {{ __('ج.م') }}</td>
+                            <td class="px-4 py-3">
+                                @php
+                                    $compStatusColors = ['calculated' => 'blue', 'approved' => 'green', 'paid' => 'emerald', 'cancelled' => 'red'];
+                                    $compStatusLabels = ['calculated' => 'محسوب', 'approved' => 'معتمد', 'paid' => 'مدفوع', 'cancelled' => 'ملغي'];
+                                    $compSv = $comp->status ?? 'calculated';
+                                @endphp
+                                <span class="px-2 py-0.5 text-xs bg-{{ $compStatusColors[$compSv] ?? 'gray' }}-100 text-{{ $compStatusColors[$compSv] ?? 'gray' }}-700 rounded-full">
+                                    {{ __($compStatusLabels[$compSv] ?? $compSv) }}
+                                </span>
+                            </td>
+                        </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+                @else
+                <div class="px-4 py-12 text-center">
+                    <p class="text-gray-500 text-sm">{{ __('لا توجد مستحقات مسجلة') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+
+        {{-- Qualifications Tab --}}
+        <div x-show="activeTab === 'qualifications'" x-cloak>
+            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                <div class="p-4 border-b border-gray-100">
+                    <h3 class="text-base font-semibold text-gray-800">{{ __('المؤهلات والشهادات') }}</h3>
+                </div>
+                @if($trainer->qualifications->isNotEmpty())
+                <div class="divide-y divide-gray-100">
+                    @foreach($trainer->qualifications as $qual)
+                    <div class="p-4 hover:bg-gray-50 transition">
+                        <div class="flex items-start justify-between">
+                            <div>
+                                <p class="text-sm font-medium text-gray-800">{{ $qual->title ?? $qual->name ?? '—' }}</p>
+                                @if($qual->issuing_authority)
+                                <p class="text-xs text-gray-500 mt-0.5">{{ $qual->issuing_authority }}</p>
+                                @endif
+                                @if($qual->description)
+                                <p class="text-xs text-gray-400 mt-1">{{ $qual->description }}</p>
+                                @endif
+                            </div>
+                            <div class="text-end">
+                                @if($qual->issue_date)
+                                <p class="text-xs text-gray-500" dir="ltr">{{ $qual->issue_date instanceof \Carbon\Carbon ? $qual->issue_date->format('Y-m-d') : $qual->issue_date }}</p>
+                                @endif
+                                @if($qual->expiry_date)
+                                <p class="text-xs {{ now()->greaterThan($qual->expiry_date) ? 'text-red-500' : 'text-gray-400' }}" dir="ltr">
+                                    {{ __('ينتهي') }}: {{ $qual->expiry_date instanceof \Carbon\Carbon ? $qual->expiry_date->format('Y-m-d') : $qual->expiry_date }}
+                                </p>
+                                @endif
+                            </div>
+                        </div>
+                    </div>
+                    @endforeach
+                </div>
+                @else
+                <div class="px-4 py-12 text-center">
+                    <svg class="w-10 h-10 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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
+                    <p class="text-gray-500 text-sm">{{ __('لا توجد مؤهلات مسجلة') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+    </div>
+</div>

resources/views/livewire/inventory/product-list.blade.php

@@ -67,12 +67,12 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
                 </thead>
                 <tbody class="divide-y divide-gray-100">
                     @forelse($products as $product)
-                    <tr class="hover:bg-gray-50">
+                    <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='{{ route('inventory.products.show', $product) }}'">
                         <td class="px-4 py-3 font-mono text-gray-600 text-xs" dir="ltr">
                             {{ $product->sku }}
                         </td>
                         <td class="px-4 py-3">
-                            <span class="font-medium text-gray-800">{{ $product->name_ar }}</span>
+                            <a href="{{ route('inventory.products.show', $product) }}" wire:navigate class="font-medium text-gray-800 hover:text-blue-600">{{ $product->name_ar }}</a>
                             @if($product->name)
                             <p class="text-xs text-gray-500" dir="ltr">{{ $product->name }}</p>
                             @endif

resources/views/livewire/inventory/product-show.blade.php

+<div x-data="{ activeTab: 'overview' }">
+    {{-- Flash Messages --}}
+    @if(session('success'))
+    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
+        {{ session('success') }}
+    </div>
+    @endif
+
+    @if(session('error'))
+    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+        {{ session('error') }}
+    </div>
+    @endif
+
+    {{-- Header Card --}}
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div>
+                <div class="flex items-center gap-3 mb-2">
+                    <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $product->name_ar }}</h1>
+                    @if($product->is_active)
+                        <span class="px-2.5 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-700">{{ __('نشط') }}</span>
+                    @else
+                        <span class="px-2.5 py-0.5 text-xs font-medium rounded-full bg-red-100 text-red-700">{{ __('غير نشط') }}</span>
+                    @endif
+                </div>
+                @if($product->name)
+                    <p class="text-sm text-gray-500" dir="ltr">{{ $product->name }}</p>
+                @endif
+                <div class="flex items-center gap-4 mt-2 text-sm text-gray-500">
+                    @if($product->sku)
+                        <span class="font-mono" dir="ltr">{{ __('SKU') }}: {{ $product->sku }}</span>
+                    @endif
+                    @if($product->barcode)
+                        <span class="font-mono" dir="ltr">{{ __('باركود') }}: {{ $product->barcode }}</span>
+                    @endif
+                    @if($product->type)
+                        <span>{{ $product->type->label() }}</span>
+                    @endif
+                </div>
+            </div>
+            <div class="flex items-center gap-2">
+                @can('inventory.update')
+                    <a href="{{ route('inventory.products.edit', $product) }}" wire:navigate
+                       class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition-colors">
+                        {{ __('تعديل') }}
+                    </a>
+                @endcan
+                <a href="{{ route('inventory.products') }}" wire:navigate
+                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors">
+                    {{ __('العودة للقائمة') }}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    {{-- KPI Row --}}
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
+        {{-- Total Stock --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('إجمالي المخزون') }}</p>
+            <p class="text-xl font-bold text-gray-800">{{ number_format($totalOnHand) }}</p>
+        </div>
+        {{-- Reserved --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('الكمية المحجوزة') }}</p>
+            <p class="text-xl font-bold text-amber-600">{{ number_format($totalReserved) }}</p>
+        </div>
+        {{-- Available --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('الكمية المتاحة') }}</p>
+            <p class="text-xl font-bold text-green-600">{{ number_format($totalAvailable) }}</p>
+        </div>
+        {{-- Unit Cost --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('سعر التكلفة') }}</p>
+            <p class="text-xl font-bold text-gray-800 font-mono" dir="ltr">{{ number_format($product->cost_price / 100, 2) }} <span class="text-xs text-gray-500">{{ __('ج.م') }}</span></p>
+        </div>
+        {{-- Selling Price --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('سعر البيع') }}</p>
+            <p class="text-xl font-bold text-gray-800 font-mono" dir="ltr">{{ number_format($product->selling_price / 100, 2) }} <span class="text-xs text-gray-500">{{ __('ج.م') }}</span></p>
+        </div>
+        {{-- Profit Margin --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('هامش الربح') }}</p>
+            <p class="text-xl font-bold {{ $margin > 0 ? 'text-green-600' : 'text-red-600' }}">{{ $margin }}%</p>
+        </div>
+    </div>
+
+    {{-- Tabs --}}
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+        {{-- Tab Navigation --}}
+        <div class="border-b border-gray-200">
+            <nav class="flex gap-0 -mb-px">
+                <button @click="activeTab = 'overview'"
+                        :class="activeTab === 'overview' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+                        class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">
+                    {{ __('نظرة عامة') }}
+                </button>
+                <button @click="activeTab = 'stock'"
+                        :class="activeTab === 'stock' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+                        class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">
+                    {{ __('المخزون') }}
+                </button>
+                <button @click="activeTab = 'movements'"
+                        :class="activeTab === 'movements' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+                        class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">
+                    {{ __('الحركات') }}
+                </button>
+                <button @click="activeTab = 'analytics'"
+                        :class="activeTab === 'analytics' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+                        class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">
+                    {{ __('التحليلات') }}
+                </button>
+            </nav>
+        </div>
+
+        {{-- Tab Content --}}
+        <div class="p-6">
+
+            {{-- Overview Tab --}}
+            <div x-show="activeTab === 'overview'" x-cloak>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    {{-- Product Info Card --}}
+                    <div class="border border-gray-200 rounded-lg p-5">
+                        <h3 class="text-sm font-semibold text-gray-500 mb-4">{{ __('معلومات المنتج') }}</h3>
+                        <dl class="space-y-3 text-sm">
+                            @if($product->description_ar)
+                            <div>
+                                <dt class="font-medium text-gray-500">{{ __('الوصف') }}</dt>
+                                <dd class="text-gray-800 mt-1">{{ $product->description_ar }}</dd>
+                            </div>
+                            @endif
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('التصنيف') }}</dt>
+                                <dd class="text-gray-800">{{ $product->category?->name_ar ?? __('بدون تصنيف') }}</dd>
+                            </div>
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('النوع') }}</dt>
+                                <dd class="text-gray-800">{{ $product->type?->label() ?? '-' }}</dd>
+                            </div>
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('الوحدة') }}</dt>
+                                <dd class="text-gray-800">{{ $product->unit ?? '-' }}</dd>
+                            </div>
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('الفرع') }}</dt>
+                                <dd class="text-gray-800">{{ $product->branch?->name_ar ?? __('جميع الفروع') }}</dd>
+                            </div>
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('تتبع المخزون') }}</dt>
+                                <dd>
+                                    @if($product->track_inventory)
+                                        <span class="text-green-600">{{ __('نعم') }}</span>
+                                    @else
+                                        <span class="text-gray-400">{{ __('لا') }}</span>
+                                    @endif
+                                </dd>
+                            </div>
+                            @if($product->track_inventory)
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('حد إعادة الطلب') }}</dt>
+                                <dd class="text-gray-800">{{ $product->min_stock_level ?? '-' }}</dd>
+                            </div>
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('الحد الأقصى') }}</dt>
+                                <dd class="text-gray-800">{{ $product->max_stock_level ?? '-' }}</dd>
+                            </div>
+                            @endif
+                            @if($product->weight_grams)
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('الوزن') }}</dt>
+                                <dd class="text-gray-800" dir="ltr">{{ $product->weight_grams }} {{ __('جم') }}</dd>
+                            </div>
+                            @endif
+                        </dl>
+                    </div>
+
+                    {{-- Pricing Card --}}
+                    <div class="border border-gray-200 rounded-lg p-5">
+                        <h3 class="text-sm font-semibold text-gray-500 mb-4">{{ __('التسعير') }}</h3>
+                        <dl class="space-y-3 text-sm">
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('سعر التكلفة') }}</dt>
+                                <dd class="text-gray-800 font-mono" dir="ltr">{{ number_format($product->cost_price / 100, 2) }} {{ __('ج.م') }}</dd>
+                            </div>
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('سعر البيع') }}</dt>
+                                <dd class="text-gray-800 font-mono" dir="ltr">{{ number_format($product->selling_price / 100, 2) }} {{ __('ج.م') }}</dd>
+                            </div>
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('هامش الربح') }}</dt>
+                                <dd class="font-bold {{ $margin > 0 ? 'text-green-600' : 'text-red-600' }}">{{ $margin }}%</dd>
+                            </div>
+                            @if($product->selling_price > 0 && $product->cost_price > 0)
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('الربح لكل وحدة') }}</dt>
+                                <dd class="text-gray-800 font-mono" dir="ltr">{{ number_format(($product->selling_price - $product->cost_price) / 100, 2) }} {{ __('ج.م') }}</dd>
+                            </div>
+                            @endif
+                            @if($product->tax_rate)
+                            <div class="flex justify-between">
+                                <dt class="font-medium text-gray-500">{{ __('نسبة الضريبة') }}</dt>
+                                <dd class="text-gray-800">{{ $product->tax_rate }}%</dd>
+                            </div>
+                            @endif
+                        </dl>
+
+                        {{-- Inventory Value --}}
+                        @if($product->track_inventory && $totalOnHand > 0)
+                        <div class="mt-5 pt-4 border-t border-gray-200">
+                            <h4 class="text-xs font-medium text-gray-500 mb-2">{{ __('قيمة المخزون') }}</h4>
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-600">{{ __('بسعر التكلفة') }}</span>
+                                <span class="font-mono font-bold text-gray-800" dir="ltr">{{ number_format(($product->cost_price * $totalOnHand) / 100, 2) }} {{ __('ج.م') }}</span>
+                            </div>
+                            <div class="flex justify-between text-sm mt-1">
+                                <span class="text-gray-600">{{ __('بسعر البيع') }}</span>
+                                <span class="font-mono font-bold text-gray-800" dir="ltr">{{ number_format(($product->selling_price * $totalOnHand) / 100, 2) }} {{ __('ج.م') }}</span>
+                            </div>
+                        </div>
+                        @endif
+                    </div>
+                </div>
+            </div>
+
+            {{-- Stock Tab --}}
+            <div x-show="activeTab === 'stock'" x-cloak>
+                @if($levels->count() > 0)
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-sm">
+                            <thead class="bg-gray-50 border-b border-gray-200">
+                                <tr>
+                                    <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>
+                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('آخر حركة') }}</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-100">
+                                @foreach($levels as $level)
+                                <tr>
+                                    <td class="px-4 py-3 font-medium text-gray-800">
+                                        {{ $level->warehouse?->name_ar ?? __('مستودع محذوف') }}
+                                    </td>
+                                    <td class="px-4 py-3 text-center text-gray-700 font-mono">{{ number_format($level->quantity_on_hand) }}</td>
+                                    <td class="px-4 py-3 text-center text-amber-600 font-mono">{{ number_format($level->quantity_reserved) }}</td>
+                                    <td class="px-4 py-3 text-center text-green-600 font-mono">{{ number_format($level->quantity_available) }}</td>
+                                    <td class="px-4 py-3 text-center">
+                                        @if($product->min_stock_level && $level->quantity_on_hand <= $product->min_stock_level)
+                                            <span class="px-2 py-0.5 text-xs rounded-full bg-red-100 text-red-700">{{ __('منخفض') }}</span>
+                                        @elseif($product->max_stock_level && $level->quantity_on_hand >= $product->max_stock_level)
+                                            <span class="px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700">{{ __('مرتفع') }}</span>
+                                        @else
+                                            <span class="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">{{ __('طبيعي') }}</span>
+                                        @endif
+                                    </td>
+                                    <td class="px-4 py-3 text-center text-xs text-gray-500">
+                                        {{ $level->last_movement_at?->diffForHumans() ?? '-' }}
+                                    </td>
+                                </tr>
+                                @endforeach
+                            </tbody>
+                            <tfoot class="bg-gray-50 border-t border-gray-200">
+                                <tr class="font-bold">
+                                    <td class="px-4 py-3 text-gray-700">{{ __('الإجمالي') }}</td>
+                                    <td class="px-4 py-3 text-center text-gray-700 font-mono">{{ number_format($totalOnHand) }}</td>
+                                    <td class="px-4 py-3 text-center text-amber-600 font-mono">{{ number_format($totalReserved) }}</td>
+                                    <td class="px-4 py-3 text-center text-green-600 font-mono">{{ number_format($totalAvailable) }}</td>
+                                    <td class="px-4 py-3"></td>
+                                    <td class="px-4 py-3"></td>
+                                </tr>
+                            </tfoot>
+                        </table>
+                    </div>
+                @else
+                    <div class="text-center py-12">
+                        <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                        </svg>
+                        <p class="mt-3 text-sm text-gray-500">{{ __('لا يوجد مخزون مسجل لهذا المنتج') }}</p>
+                    </div>
+                @endif
+            </div>
+
+            {{-- Movements Tab --}}
+            <div x-show="activeTab === 'movements'" x-cloak>
+                @if($movements->count() > 0)
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-sm">
+                            <thead class="bg-gray-50 border-b border-gray-200">
+                                <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-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">{{ __('قبل') }} &rarr; {{ __('بعد') }}</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>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-100">
+                                @foreach($movements as $movement)
+                                <tr>
+                                    <td class="px-4 py-3 text-xs text-gray-500 whitespace-nowrap" dir="ltr">
+                                        {{ $movement->created_at->format('Y-m-d H:i') }}
+                                    </td>
+                                    <td class="px-4 py-3 text-gray-700">
+                                        {{ $movement->movement_type->label() }}
+                                    </td>
+                                    <td class="px-4 py-3 text-center">
+                                        @if($movement->direction === \App\Domain\Inventory\Enums\MovementDirection::In)
+                                            <span class="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">{{ __('وارد') }}</span>
+                                        @else
+                                            <span class="px-2 py-0.5 text-xs rounded-full bg-red-100 text-red-700">{{ __('صادر') }}</span>
+                                        @endif
+                                    </td>
+                                    <td class="px-4 py-3 text-center font-mono font-medium text-gray-800">
+                                        {{ number_format($movement->quantity) }}
+                                    </td>
+                                    <td class="px-4 py-3 text-center font-mono text-xs text-gray-500" dir="ltr">
+                                        {{ number_format($movement->quantity_before) }} &rarr; {{ number_format($movement->quantity_after) }}
+                                    </td>
+                                    <td class="px-4 py-3 text-gray-600">
+                                        {{ $movement->warehouse?->name_ar ?? '-' }}
+                                    </td>
+                                    <td class="px-4 py-3 text-gray-500 text-xs max-w-[200px] truncate">
+                                        {{ $movement->reason ?? '-' }}
+                                    </td>
+                                </tr>
+                                @endforeach
+                            </tbody>
+                        </table>
+                    </div>
+                @else
+                    <div class="text-center py-12">
+                        <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+                        </svg>
+                        <p class="mt-3 text-sm text-gray-500">{{ __('لا توجد حركات مسجلة لهذا المنتج') }}</p>
+                    </div>
+                @endif
+            </div>
+
+            {{-- Analytics Tab --}}
+            <div x-show="activeTab === 'analytics'" x-cloak>
+                <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
+                    {{-- Total Received --}}
+                    <div class="border border-gray-200 rounded-lg p-5 text-center">
+                        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-100 mb-3">
+                            <svg class="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16l4 4 4-4m-4 4V4m14 0l-4-4-4 4m4-4v16" />
+                            </svg>
+                        </div>
+                        <p class="text-xs font-medium text-gray-500 mb-1">{{ __('إجمالي الوارد') }}</p>
+                        <p class="text-2xl font-bold text-gray-800">{{ number_format($totalIn) }}</p>
+                        <p class="text-xs text-gray-400 mt-1">{{ __('وحدة') }}</p>
+                    </div>
+
+                    {{-- Total Sold --}}
+                    <div class="border border-gray-200 rounded-lg p-5 text-center">
+                        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 mb-3">
+                            <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+                            </svg>
+                        </div>
+                        <p class="text-xs font-medium text-gray-500 mb-1">{{ __('إجمالي المباع') }}</p>
+                        <p class="text-2xl font-bold text-gray-800">{{ number_format($totalSold) }}</p>
+                        <p class="text-xs text-gray-400 mt-1">{{ __('وحدة') }}</p>
+                    </div>
+
+                    {{-- Average Monthly --}}
+                    <div class="border border-gray-200 rounded-lg p-5 text-center">
+                        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-purple-100 mb-3">
+                            <svg class="w-6 h-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <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>
+                        <p class="text-xs font-medium text-gray-500 mb-1">{{ __('متوسط الحركة الشهرية') }}</p>
+                        <p class="text-2xl font-bold text-gray-800">{{ $avgMonthlyMovement }}</p>
+                        <p class="text-xs text-gray-400 mt-1">{{ __('وحدة/شهر') }}</p>
+                    </div>
+                </div>
+
+                {{-- Stock Turnover Note --}}
+                @if($totalSold > 0 && $totalOnHand > 0)
+                <div class="mt-6 border border-gray-200 rounded-lg p-5">
+                    <h4 class="text-sm font-semibold text-gray-600 mb-2">{{ __('معدل دوران المخزون') }}</h4>
+                    <p class="text-sm text-gray-500">
+                        {{ __('بناءً على المبيعات الحالية، المخزون المتوفر يكفي لحوالي') }}
+                        <span class="font-bold text-gray-800">
+                            @php
+                                $monthsOfStock = $avgMonthlyMovement > 0 ? round($totalOnHand / $avgMonthlyMovement, 1) : 0;
+                            @endphp
+                            {{ $monthsOfStock }}
+                        </span>
+                        {{ __('شهر') }}
+                    </p>
+                </div>
+                @endif
+            </div>
+        </div>
+    </div>
+</div>

resources/views/livewire/participants/participant-list.blade.php

@@ -71,12 +71,12 @@ class="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 f
                     </thead>
                     <tbody class="divide-y divide-gray-100">
                         @forelse($participants as $participant)
-                        <tr class="hover:bg-gray-50">
+                        <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='{{ route('participants.show', $participant) }}'">
                             <td class="px-4 py-3 font-mono text-gray-600" dir="ltr">
                                 {{ $participant->participant_number }}
                             </td>
                             <td class="px-4 py-3">
-                                <span class="font-medium text-gray-800">{{ $participant->person?->name_ar }}</span>
+                                <a href="{{ route('participants.show', $participant) }}" wire:navigate class="font-medium text-gray-800 hover:text-blue-600">{{ $participant->person?->name_ar }}</a>
                                 @if($participant->person?->name)
                                 <p class="text-xs text-gray-500" dir="ltr">{{ $participant->person->name }}</p>
                                 @endif
@@ -147,7 +147,7 @@ class="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 f
             ];
             $color = $statusColors[$statusValue] ?? 'gray';
         @endphp
-        <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 hover:border-blue-300 transition">
             <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>

resources/views/livewire/programs/program-list.blade.php

@@ -75,10 +75,10 @@ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 f
                 </thead>
                 <tbody class="divide-y divide-gray-100">
                     @forelse($programs as $program)
-                    <tr class="hover:bg-gray-50">
+                    <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='{{ route('programs.show', $program) }}'">
                         <td class="px-4 py-3">
                             <div>
-                                <p class="font-medium text-gray-800">{{ $program->name_ar }}</p>
+                                <a href="{{ route('programs.show', $program) }}" wire:navigate class="font-medium text-gray-800 hover:text-blue-600">{{ $program->name_ar }}</a>
                                 @if($program->name)
                                     <p class="text-xs text-gray-400" dir="ltr">{{ $program->name }}</p>
                                 @endif

resources/views/livewire/programs/program-show.blade.php

+<div>
+    {{-- Flash Messages --}}
+    @if(session('success'))
+    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
+        {{ session('success') }}
+    </div>
+    @endif
+    @if(session('error'))
+    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+        {{ session('error') }}
+    </div>
+    @endif
+
+    {{-- Header Card --}}
+    <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-col sm:flex-row sm:items-start justify-between gap-4">
+            <div class="flex items-center gap-4">
+                <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center">
+                    <svg class="w-7 h-7 text-indigo-600" 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"/>
+                    </svg>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-gray-800">
+                        {{ $program->name_ar }}
+                    </h1>
+                    @if($program->name)
+                    <p class="text-sm text-gray-500" dir="ltr">
+                        {{ $program->name }}
+                    </p>
+                    @endif
+                    <div class="flex flex-wrap items-center gap-2 mt-2">
+                        {{-- Status Badge --}}
+                        @php
+                            $statusValue = $program->status->value ?? $program->status;
+                            $statusColors = [
+                                'draft' => 'gray',
+                                'active' => 'green',
+                                'full' => 'amber',
+                                'closed' => 'red',
+                                'archived' => 'slate',
+                            ];
+                            $statusLabels = [
+                                'draft' => 'مسودة',
+                                'active' => 'نشط',
+                                'full' => 'مكتمل',
+                                'closed' => 'مغلق',
+                                'archived' => 'مؤرشف',
+                            ];
+                            $sColor = $statusColors[$statusValue] ?? 'gray';
+                        @endphp
+                        <span class="px-2 py-0.5 text-xs bg-{{ $sColor }}-100 text-{{ $sColor }}-700 rounded-full font-medium">
+                            {{ __($statusLabels[$statusValue] ?? $statusValue) }}
+                        </span>
+
+                        {{-- Activity Badge --}}
+                        @if($program->activity)
+                        <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full font-medium">
+                            {{ $program->activity->name_ar ?? $program->activity->name }}
+                        </span>
+                        @endif
+
+                        {{-- Registration Status --}}
+                        @if($program->registration_open)
+                        <span class="px-2 py-0.5 text-xs bg-emerald-100 text-emerald-700 rounded-full font-medium">
+                            {{ __('التسجيل مفتوح') }}
+                        </span>
+                        @else
+                        <span class="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full font-medium">
+                            {{ __('التسجيل مغلق') }}
+                        </span>
+                        @endif
+                    </div>
+                </div>
+            </div>
+            <div class="flex items-center gap-2 self-start sm:self-auto">
+                @can('programs.update')
+                <a href="{{ route('programs.edit', $program) }}" wire:navigate
+                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium">
+                    {{ __('تعديل') }}
+                </a>
+                @endcan
+                <a href="{{ route('programs.list') }}" wire:navigate
+                   class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
+                    {{ __('رجوع') }}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    {{-- KPI Row --}}
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 mb-4 sm:mb-6">
+        {{-- Total Groups --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center">
+                    <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="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 0z"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('المجموعات') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $totalGroups }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Active Enrollments --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-green-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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('تسجيلات نشطة') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $activeEnrollments }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Total Capacity --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
+                    <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('السعة الإجمالية') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $totalCapacity }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Fill Rate --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('نسبة الامتلاء') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $fillRate }}%</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Total Revenue --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center">
+                    <svg class="w-5 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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('الإيرادات') }}</p>
+                    <p class="text-lg font-bold text-gray-800" dir="ltr">{{ number_format($totalRevenue / 100, 2) }}</p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Waitlist --}}
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-purple-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"/>
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-xs text-gray-500">{{ __('قائمة الانتظار') }}</p>
+                    <p class="text-lg font-bold text-gray-800">{{ $waitlistTotal }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {{-- Tabs --}}
+    <div x-data="{ activeTab: @entangle('activeTab') }">
+        <div class="border-b border-gray-200 mb-6">
+            <nav class="flex gap-2 sm:gap-6 -mb-px overflow-x-auto pb-1">
+                <button @click="activeTab = 'overview'"
+                        :class="activeTab === 'overview' ? '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">
+                    {{ __('نظرة عامة') }}
+                </button>
+                <button @click="activeTab = 'groups'"
+                        :class="activeTab === 'groups' ? '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">
+                    {{ __('المجموعات') }}
+                </button>
+                <button @click="activeTab = 'enrollments'"
+                        :class="activeTab === 'enrollments' ? '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">
+                    {{ __('التسجيلات') }}
+                </button>
+                <button @click="activeTab = 'settings'"
+                        :class="activeTab === 'settings' ? '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">
+                    {{ __('الإعدادات') }}
+                </button>
+            </nav>
+        </div>
+
+        {{-- Overview Tab --}}
+        <div x-show="activeTab === 'overview'" x-cloak>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                {{-- Program Details Card --}}
+                <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>
+                    <dl class="space-y-3">
+                        @if($program->description_ar)
+                        <div>
+                            <dt class="text-sm text-gray-500 mb-1">{{ __('الوصف') }}</dt>
+                            <dd class="text-sm text-gray-800 whitespace-pre-line">{{ $program->description_ar }}</dd>
+                        </div>
+                        @endif
+
+                        @if($program->objectives && count($program->objectives) > 0)
+                        <div>
+                            <dt class="text-sm text-gray-500 mb-1">{{ __('الأهداف') }}</dt>
+                            <dd>
+                                <ul class="list-disc list-inside space-y-1">
+                                    @foreach($program->objectives as $objective)
+                                    <li class="text-sm text-gray-800">{{ $objective }}</li>
+                                    @endforeach
+                                </ul>
+                            </dd>
+                        </div>
+                        @endif
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('المستوى') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @php
+                                    $skillLabels = ['beginner' => 'مبتدئ', 'intermediate' => 'متوسط', 'advanced' => 'متقدم', 'professional' => 'محترف', 'all' => 'جميع المستويات'];
+                                @endphp
+                                {{ __($skillLabels[$program->skill_level] ?? $program->skill_level ?? '—') }}
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الفئة العمرية') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @if($program->age_min && $program->age_max)
+                                    {{ $program->age_min }} - {{ $program->age_max }} {{ __('سنة') }}
+                                @elseif($program->age_min)
+                                    {{ __('من') }} {{ $program->age_min }} {{ __('سنة') }}
+                                @elseif($program->age_max)
+                                    {{ __('حتى') }} {{ $program->age_max }} {{ __('سنة') }}
+                                @else
+                                    {{ __('غير محدد') }}
+                                @endif
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الجنس') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @php
+                                    $genderLabels = ['male' => 'ذكور', 'female' => 'إناث', 'mixed' => 'مختلط'];
+                                @endphp
+                                {{ __($genderLabels[$program->gender] ?? '—') }}
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('مدة البرنامج') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @if($program->program_duration_weeks)
+                                    {{ $program->program_duration_weeks }} {{ __('أسبوع') }}
+                                @else
+                                    {{ __('غير محدد') }}
+                                @endif
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الحصص في الأسبوع') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                {{ $program->sessions_per_week ?? '—' }}
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('مدة الحصة') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @if($program->session_duration_minutes)
+                                    {{ $program->session_duration_minutes }} {{ __('دقيقة') }}
+                                @else
+                                    —
+                                @endif
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('إجمالي الحصص') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                {{ $program->total_sessions ?? '—' }}
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الحد الأدنى للمشتركين') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $program->min_participants ?? '—' }}</dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الحد الأقصى للمشتركين') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $program->max_participants ?? '—' }}</dd>
+                        </div>
+
+                        @if($program->defaultTrainer)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('المدرب الافتراضي') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $program->defaultTrainer->name }}</dd>
+                        </div>
+                        @endif
+
+                        @if($program->branch)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الفرع') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $program->branch->name_ar ?? $program->branch->name }}</dd>
+                        </div>
+                        @endif
+                    </dl>
+                </div>
+
+                {{-- Requirements Card --}}
+                <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>
+                    <dl class="space-y-4">
+                        {{-- Prerequisites --}}
+                        <div>
+                            <dt class="text-sm text-gray-500 mb-1">{{ __('المتطلبات المسبقة') }}</dt>
+                            <dd>
+                                @if($program->prerequisites && count($program->prerequisites) > 0)
+                                <ul class="list-disc list-inside space-y-1">
+                                    @foreach($program->prerequisites as $prerequisite)
+                                    <li class="text-sm text-gray-800">{{ $prerequisite }}</li>
+                                    @endforeach
+                                </ul>
+                                @else
+                                <p class="text-sm text-gray-400">{{ __('لا توجد متطلبات مسبقة') }}</p>
+                                @endif
+                            </dd>
+                        </div>
+
+                        {{-- Equipment --}}
+                        <div>
+                            <dt class="text-sm text-gray-500 mb-1">{{ __('المعدات المطلوبة') }}</dt>
+                            <dd>
+                                @if($program->equipment_required && count($program->equipment_required) > 0)
+                                <div class="flex flex-wrap gap-2">
+                                    @foreach($program->equipment_required as $equipment)
+                                    <span class="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-lg">{{ $equipment }}</span>
+                                    @endforeach
+                                </div>
+                                @else
+                                <p class="text-sm text-gray-400">{{ __('لا توجد معدات مطلوبة') }}</p>
+                                @endif
+                            </dd>
+                        </div>
+
+                        {{-- Attendance Requirement --}}
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('الحد الأدنى للحضور') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @if($program->attendance_requirement_percent)
+                                    {{ $program->attendance_requirement_percent }}%
+                                @else
+                                    {{ __('غير محدد') }}
+                                @endif
+                            </dd>
+                        </div>
+
+                        {{-- Assessment Required --}}
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('تقييم مطلوب') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @if($program->assessment_required)
+                                <span class="text-green-600">{{ __('نعم') }}</span>
+                                @else
+                                <span class="text-gray-500">{{ __('لا') }}</span>
+                                @endif
+                            </dd>
+                        </div>
+
+                        {{-- Facility Type --}}
+                        @if($program->facility_type)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('نوع المنشأة') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $program->facility_type }}</dd>
+                        </div>
+                        @endif
+
+                        {{-- Allow Waitlist --}}
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('قائمة انتظار') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @if($program->allow_waitlist)
+                                <span class="text-green-600">{{ __('مفعّلة') }}</span>
+                                @else
+                                <span class="text-gray-500">{{ __('معطّلة') }}</span>
+                                @endif
+                            </dd>
+                        </div>
+
+                        {{-- Program Dates --}}
+                        @if($program->program_start_date || $program->program_end_date)
+                        <div class="border-t border-gray-100 pt-3">
+                            <dt class="text-sm text-gray-500 mb-2">{{ __('فترة البرنامج') }}</dt>
+                            <dd class="flex items-center gap-2 text-sm text-gray-800" dir="ltr">
+                                <span>{{ $program->program_start_date?->format('Y-m-d') ?? '—' }}</span>
+                                <span class="text-gray-400">&rarr;</span>
+                                <span>{{ $program->program_end_date?->format('Y-m-d') ?? '—' }}</span>
+                            </dd>
+                        </div>
+                        @endif
+                    </dl>
+                </div>
+            </div>
+        </div>
+
+        {{-- Groups Tab --}}
+        <div x-show="activeTab === 'groups'" x-cloak>
+            <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">
+                    <h3 class="text-base font-semibold text-gray-800">{{ __('المجموعات') }}</h3>
+                    @can('groups.create')
+                    <a href="{{ route('groups.create') }}" wire:navigate
+                       class="px-3 py-1.5 text-xs font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
+                        {{ __('إضافة مجموعة') }}
+                    </a>
+                    @endcan
+                </div>
+
+                @if($groups->isNotEmpty())
+                <div class="overflow-x-auto">
+                    <table class="w-full text-sm">
+                        <thead class="bg-gray-50 border-b border-gray-200">
+                            <tr>
+                                <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-start font-medium text-gray-600">{{ __('الجدول') }}</th>
+                                <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('التاريخ') }}</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            @foreach($groups as $group)
+                            @php
+                                $gStatusValue = $group->status->value ?? $group->status;
+                                $gStatusColors = [
+                                    'forming' => 'blue',
+                                    'active' => 'green',
+                                    'full' => 'amber',
+                                    'on_hold' => 'orange',
+                                    'completed' => 'purple',
+                                    'cancelled' => 'red',
+                                ];
+                                $gStatusLabels = [
+                                    'forming' => 'قيد التشكيل',
+                                    'active' => 'نشط',
+                                    'full' => 'مكتمل',
+                                    'on_hold' => 'معلق',
+                                    'completed' => 'مكتمل',
+                                    'cancelled' => 'ملغي',
+                                ];
+                                $gColor = $gStatusColors[$gStatusValue] ?? 'gray';
+                            @endphp
+                            <tr class="hover:bg-gray-50">
+                                <td class="px-4 py-3">
+                                    @can('groups.update')
+                                    <a href="{{ route('groups.edit', $group) }}" wire:navigate
+                                       class="font-medium text-blue-600 hover:text-blue-800 hover:underline">
+                                        {{ $group->name_ar ?? $group->name }}
+                                    </a>
+                                    @else
+                                    <span class="font-medium text-gray-800">{{ $group->name_ar ?? $group->name }}</span>
+                                    @endcan
+                                    @if($group->code)
+                                    <p class="text-xs text-gray-400 font-mono" dir="ltr">{{ $group->code }}</p>
+                                    @endif
+                                </td>
+                                <td class="px-4 py-3 text-center">
+                                    <span class="px-2 py-0.5 text-xs bg-{{ $gColor }}-100 text-{{ $gColor }}-700 rounded-full font-medium">
+                                        {{ __($gStatusLabels[$gStatusValue] ?? $gStatusValue) }}
+                                    </span>
+                                </td>
+                                <td class="px-4 py-3 text-gray-600">
+                                    {{ $group->headTrainer?->name ?? '—' }}
+                                </td>
+                                <td class="px-4 py-3 text-center">
+                                    <span class="font-medium {{ $group->current_count >= $group->max_capacity ? 'text-red-600' : 'text-gray-800' }}">
+                                        {{ $group->current_count }}/{{ $group->max_capacity }}
+                                    </span>
+                                </td>
+                                <td class="px-4 py-3">
+                                    @if($group->schedules->isNotEmpty())
+                                    @php
+                                        $dayNames = [0 => 'أحد', 1 => 'إثنين', 2 => 'ثلاثاء', 3 => 'أربعاء', 4 => 'خميس', 5 => 'جمعة', 6 => 'سبت'];
+                                    @endphp
+                                    <div class="flex flex-wrap gap-1">
+                                        @foreach($group->schedules->take(3) as $schedule)
+                                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-700 rounded">
+                                            {{ $dayNames[$schedule->day_of_week] ?? $schedule->day_of_week }}
+                                            <span dir="ltr">{{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }}</span>
+                                        </span>
+                                        @endforeach
+                                        @if($group->schedules->count() > 3)
+                                        <span class="text-xs text-gray-400">+{{ $group->schedules->count() - 3 }}</span>
+                                        @endif
+                                    </div>
+                                    @else
+                                    <span class="text-xs text-gray-400">{{ __('لا يوجد جدول') }}</span>
+                                    @endif
+                                </td>
+                                <td class="px-4 py-3 text-center text-xs text-gray-500" dir="ltr">
+                                    @if($group->start_date)
+                                    {{ $group->start_date->format('Y-m-d') }}
+                                    @else
+                                    —
+                                    @endif
+                                </td>
+                            </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+                @else
+                <div class="px-4 py-12 text-center">
+                    <svg class="w-10 h-10 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 0z"/>
+                    </svg>
+                    <p class="text-gray-500 text-sm">{{ __('لا توجد مجموعات لهذا البرنامج') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+
+        {{-- Enrollments Tab --}}
+        <div x-show="activeTab === 'enrollments'" x-cloak>
+            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                <div class="p-4 border-b border-gray-100">
+                    <h3 class="text-base font-semibold text-gray-800">{{ __('التسجيلات الأخيرة') }}</h3>
+                </div>
+
+                @if($recentEnrollments->isNotEmpty())
+                <div class="overflow-x-auto">
+                    <table class="w-full text-sm">
+                        <thead class="bg-gray-50 border-b border-gray-200">
+                            <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-center font-medium text-gray-600">{{ __('تاريخ التسجيل') }}</th>
+                                <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الحالة') }}</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            @foreach($recentEnrollments as $enrollment)
+                            @php
+                                $eStatusValue = $enrollment->status->value ?? $enrollment->status;
+                                $eStatusColors = [
+                                    'pending' => 'amber',
+                                    'active' => 'green',
+                                    'completed' => 'purple',
+                                    'cancelled' => 'red',
+                                    'expired' => 'gray',
+                                    'waitlisted' => 'blue',
+                                ];
+                                $eStatusLabels = [
+                                    'pending' => 'معلق',
+                                    'active' => 'نشط',
+                                    'completed' => 'مكتمل',
+                                    'cancelled' => 'ملغي',
+                                    'expired' => 'منتهي',
+                                    'waitlisted' => 'قائمة انتظار',
+                                ];
+                                $eColor = $eStatusColors[$eStatusValue] ?? 'gray';
+                            @endphp
+                            <tr class="hover:bg-gray-50">
+                                <td class="px-4 py-3">
+                                    @if($enrollment->participant)
+                                    @can('participants.list')
+                                    <a href="{{ route('participants.show', $enrollment->participant) }}" wire:navigate
+                                       class="font-medium text-blue-600 hover:text-blue-800 hover:underline">
+                                        {{ $enrollment->participant->person?->name_ar ?? '—' }}
+                                    </a>
+                                    @else
+                                    <span class="font-medium text-gray-800">{{ $enrollment->participant->person?->name_ar ?? '—' }}</span>
+                                    @endcan
+                                    @else
+                                    <span class="text-gray-400">—</span>
+                                    @endif
+                                </td>
+                                <td class="px-4 py-3 text-gray-600">
+                                    {{ $enrollment->group?->name_ar ?? $enrollment->group?->name ?? '—' }}
+                                </td>
+                                <td class="px-4 py-3 text-center text-xs text-gray-500" dir="ltr">
+                                    {{ $enrollment->enrollment_date?->format('Y-m-d') ?? '—' }}
+                                </td>
+                                <td class="px-4 py-3 text-center">
+                                    <span class="px-2 py-0.5 text-xs bg-{{ $eColor }}-100 text-{{ $eColor }}-700 rounded-full font-medium">
+                                        {{ __($eStatusLabels[$eStatusValue] ?? $eStatusValue) }}
+                                    </span>
+                                </td>
+                            </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+                @else
+                <div class="px-4 py-12 text-center">
+                    <svg class="w-10 h-10 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="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>
+                    <p class="text-gray-500 text-sm">{{ __('لا توجد تسجيلات لهذا البرنامج') }}</p>
+                </div>
+                @endif
+            </div>
+        </div>
+
+        {{-- Settings Tab --}}
+        <div x-show="activeTab === 'settings'" x-cloak>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                {{-- Billing Details --}}
+                <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>
+                    <dl class="space-y-3">
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('سياسة التجديد') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @php
+                                    $renewalLabels = [
+                                        'auto_renew' => 'تجديد تلقائي',
+                                        'manual' => 'يدوي',
+                                        'none' => 'بدون تجديد',
+                                        'notify_before_expiry' => 'إشعار قبل الانتهاء',
+                                    ];
+                                    $renewalValue = $program->renewal_policy?->value ?? $program->renewal_policy;
+                                @endphp
+                                {{ __($renewalLabels[$renewalValue] ?? $renewalValue ?? '—') }}
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('دورة الفوترة') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                @php
+                                    $billingLabels = [
+                                        'monthly' => 'شهري',
+                                        'quarterly' => 'ربع سنوي',
+                                        'semi_annual' => 'نصف سنوي',
+                                        'annual' => 'سنوي',
+                                        'one_time' => 'مرة واحدة',
+                                        'per_session' => 'لكل حصة',
+                                    ];
+                                @endphp
+                                {{ __($billingLabels[$program->billing_cycle] ?? $program->billing_cycle ?? '—') }}
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('يوم الفوترة') }}</dt>
+                            <dd class="text-sm text-gray-800">
+                                {{ $program->billing_day ? __('يوم') . ' ' . $program->billing_day : '—' }}
+                            </dd>
+                        </div>
+
+                        @if($program->cancellation_policy)
+                        <div>
+                            <dt class="text-sm text-gray-500 mb-1">{{ __('سياسة الإلغاء') }}</dt>
+                            <dd class="text-sm text-gray-800 whitespace-pre-line">{{ $program->cancellation_policy }}</dd>
+                        </div>
+                        @endif
+
+                        @if($program->refund_policy)
+                        <div>
+                            <dt class="text-sm text-gray-500 mb-1">{{ __('سياسة الاسترداد') }}</dt>
+                            <dd class="text-sm text-gray-800 whitespace-pre-line">{{ $program->refund_policy }}</dd>
+                        </div>
+                        @endif
+                    </dl>
+                </div>
+
+                {{-- Registration Settings --}}
+                <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>
+                    <dl class="space-y-3">
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('التسجيل مفتوح') }}</dt>
+                            <dd class="text-sm">
+                                @if($program->registration_open)
+                                <span class="text-green-600 font-medium">{{ __('نعم') }}</span>
+                                @else
+                                <span class="text-red-600 font-medium">{{ __('لا') }}</span>
+                                @endif
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('آخر موعد للتسجيل') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">
+                                {{ $program->registration_deadline?->format('Y-m-d') ?? '—' }}
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('تاريخ بدء البرنامج') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">
+                                {{ $program->program_start_date?->format('Y-m-d') ?? '—' }}
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('تاريخ انتهاء البرنامج') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">
+                                {{ $program->program_end_date?->format('Y-m-d') ?? '—' }}
+                            </dd>
+                        </div>
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('مميز') }}</dt>
+                            <dd class="text-sm">
+                                @if($program->featured)
+                                <span class="text-amber-600 font-medium">{{ __('نعم') }}</span>
+                                @else
+                                <span class="text-gray-500">{{ __('لا') }}</span>
+                                @endif
+                            </dd>
+                        </div>
+
+                        @if($program->creator)
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('أنشئ بواسطة') }}</dt>
+                            <dd class="text-sm text-gray-800">{{ $program->creator->name }}</dd>
+                        </div>
+                        @endif
+
+                        <div class="flex justify-between">
+                            <dt class="text-sm text-gray-500">{{ __('تاريخ الإنشاء') }}</dt>
+                            <dd class="text-sm text-gray-800" dir="ltr">{{ $program->created_at?->format('Y-m-d H:i') }}</dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

routes/web.php

@@ -21,6 +21,7 @@
 use App\Livewire\Evaluations\EvaluationShow;
 use App\Livewire\Facilities\FacilityForm;
 use App\Livewire\Facilities\FacilityList;
+use App\Livewire\Facilities\FacilityShow;
 use App\Livewire\Facilities\VisualScheduleBuilder;
 use App\Livewire\Financial\FinancialOverview;
 use App\Livewire\Auth\Login;
@@ -33,6 +34,7 @@
 use App\Livewire\Enrollments\WaitlistManager;
 use App\Livewire\Groups\GroupForm;
 use App\Livewire\Groups\GroupList;
+use App\Livewire\Groups\GroupShow;
 use App\Livewire\Invoices\InvoiceCreate;
 use App\Livewire\Invoices\InvoiceList;
 use App\Livewire\Invoices\InvoiceShow;
@@ -56,6 +58,7 @@
 use App\Livewire\Pricing\PromotionList;
 use App\Livewire\Programs\ProgramForm;
 use App\Livewire\Programs\ProgramList;
+use App\Livewire\Programs\ProgramShow;
 use App\Livewire\Settings\ReceiptSettings;
 use App\Livewire\Inventory\MovementList;
 use App\Livewire\Inventory\ProductForm as InventoryProductForm;
@@ -188,6 +191,8 @@
         ->middleware('permission:programs.list');
     Route::get('/programs/create', ProgramForm::class)->name('programs.create')
         ->middleware('permission:programs.create');
+    Route::get('/programs/{program}', ProgramShow::class)->name('programs.show')
+        ->middleware('permission:programs.list');
     Route::get('/programs/{program}/edit', ProgramForm::class)->name('programs.edit')
         ->middleware('permission:programs.update');
 
@@ -198,6 +203,8 @@
         ->middleware('permission:groups.create');
     Route::get('/groups/create', GroupForm::class)->name('groups.create')
         ->middleware('permission:groups.create');
+    Route::get('/groups/{group}', GroupShow::class)->name('groups.show')
+        ->middleware('permission:groups.list');
     Route::get('/groups/{group}/edit', GroupForm::class)->name('groups.edit')
         ->middleware('permission:groups.update');
 
@@ -246,6 +253,8 @@
         ->middleware('permission:facilities.create');
     Route::get('/facilities/create', FacilityForm::class)->name('facilities.create')
         ->middleware('permission:facilities.create');
+    Route::get('/facilities/{facility}', FacilityShow::class)->name('facilities.show')
+        ->middleware('permission:facilities.list');
     Route::get('/facilities/{facility}/edit', FacilityForm::class)->name('facilities.edit')
         ->middleware('permission:facilities.update');
     Route::get('/facilities/{facility}/layouts', \App\Livewire\Facilities\SpaceLayoutManager::class)->name('facilities.layouts')
@@ -274,6 +283,8 @@
         ->middleware('permission:employees.create');
     Route::get('/hr/employees/create', \App\Livewire\HR\EmployeeForm::class)->name('employees.create')
         ->middleware('permission:employees.create');
+    Route::get('/hr/employees/{employee}', \App\Livewire\HR\EmployeeShow::class)->name('employees.show')
+        ->middleware('permission:employees.list');
     Route::get('/hr/employees/{employee}/edit', \App\Livewire\HR\EmployeeForm::class)->name('employees.edit')
         ->middleware('permission:employees.update');
 
@@ -284,6 +295,8 @@
         ->middleware('permission:trainers.create');
     Route::get('/hr/trainers/create', \App\Livewire\HR\TrainerForm::class)->name('trainers.create')
         ->middleware('permission:trainers.create');
+    Route::get('/hr/trainers/{trainer}', \App\Livewire\HR\TrainerShow::class)->name('trainers.show')
+        ->middleware('permission:trainers.list');
     Route::get('/hr/trainers/{trainer}/edit', \App\Livewire\HR\TrainerForm::class)->name('trainers.edit')
         ->middleware('permission:trainers.update');
 
@@ -342,6 +355,8 @@
         ->middleware('permission:inventory.create');
     Route::get('/inventory/products/create', InventoryProductForm::class)->name('inventory.products.create')
         ->middleware('permission:inventory.create');
+    Route::get('/inventory/products/{product}', \App\Livewire\Inventory\ProductShow::class)->name('inventory.products.show')
+        ->middleware('permission:inventory.list');
     Route::get('/inventory/products/{product}/edit', InventoryProductForm::class)->name('inventory.products.edit')
         ->middleware('permission:inventory.update');
     Route::get('/inventory/warehouses', InventoryWarehouseList::class)->name('inventory.warehouses')