- Implemented the customer portal workflow progress component with detailed service progress tracking, including current status, workflow steps, and contact information. - Developed a management workflow analytics dashboard featuring key performance indicators, charts for revenue by branch, labor utilization, and recent quality issues. - Created tests for admin-only middleware to ensure proper access control for admin routes. - Added tests for customer portal view rendering and workflow integration, ensuring the workflow service operates correctly through various stages. - Introduced a .gitignore file for the debugbar storage directory to prevent unnecessary files from being tracked.
145 lines
8.7 KiB
PHP
145 lines
8.7 KiB
PHP
{{-- Customer Portal Workflow Progress Component --}}
|
|
<div class="max-w-4xl mx-auto p-6">
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
|
|
<div class="bg-blue-600 text-white p-6">
|
|
<h2 class="text-2xl font-bold">Service Progress</h2>
|
|
<p class="text-blue-100 mt-2">Track your vehicle's repair journey</p>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
{{-- Progress Overview --}}
|
|
<div class="mb-8">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="text-sm text-gray-600">Progress</span>
|
|
<span class="text-sm font-medium text-gray-900">{{ $progressPercentage }}% Complete</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
|
style="width: {{ $progressPercentage }}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Current Status --}}
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-8">
|
|
<div class="flex items-center">
|
|
<div class="bg-blue-600 rounded-full p-2">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
|
|
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">{{ $currentStepTitle }}</h3>
|
|
<p class="text-gray-600">{{ $currentStepDescription }}</p>
|
|
@if($estimatedCompletion)
|
|
<p class="text-sm text-blue-600 mt-1">
|
|
Estimated completion: {{ $estimatedCompletion->format('M j, Y \a\t g:i A') }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Workflow Steps --}}
|
|
<div class="space-y-4">
|
|
@foreach($this->progressSteps as $index => $step)
|
|
<div class="flex items-start">
|
|
{{-- Step Icon --}}
|
|
<div class="flex-shrink-0 relative">
|
|
@if($step['status'] === 'completed')
|
|
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
@elseif($step['status'] === 'current')
|
|
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center animate-pulse">
|
|
<div class="w-3 h-3 bg-white rounded-full"></div>
|
|
</div>
|
|
@else
|
|
<div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center">
|
|
<div class="w-3 h-3 bg-white rounded-full"></div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Connector Line --}}
|
|
@if(!$loop->last)
|
|
<div class="absolute top-8 left-4 w-px h-12 {{ $step['status'] === 'completed' ? 'bg-green-500' : 'bg-gray-300' }}"></div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Step Content --}}
|
|
<div class="ml-4 flex-1 pb-8">
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="text-lg font-medium {{ $step['status'] === 'completed' ? 'text-green-700' : ($step['status'] === 'current' ? 'text-blue-700' : 'text-gray-500') }}">
|
|
{{ $step['title'] }}
|
|
</h4>
|
|
@if($step['completedAt'])
|
|
<span class="text-sm text-gray-500">
|
|
{{ $step['completedAt']->format('M j, g:i A') }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
<p class="text-gray-600 mt-1">{{ $step['description'] }}</p>
|
|
|
|
@if(!empty($step['details']))
|
|
<div class="mt-3 text-sm text-gray-500">
|
|
@foreach($step['details'] as $detail)
|
|
<div class="flex items-center mt-1">
|
|
<svg class="w-4 h-4 text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ $detail }}
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
@if($step['status'] === 'current' && !empty($step['nextActions']))
|
|
<div class="mt-3 p-3 bg-blue-50 rounded-lg">
|
|
<h5 class="text-sm font-medium text-blue-800 mb-2">What's happening next:</h5>
|
|
<ul class="text-sm text-blue-700 space-y-1">
|
|
@foreach($step['nextActions'] as $action)
|
|
<li class="flex items-center">
|
|
<svg class="w-3 h-3 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ $action }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Contact Information --}}
|
|
<div class="mt-8 pt-6 border-t border-gray-200">
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h3 class="font-medium text-gray-900 mb-2">Need Updates?</h3>
|
|
<div class="text-sm text-gray-600">
|
|
<p>Contact your service advisor for real-time updates:</p>
|
|
@if($jobCard->assignedTo)
|
|
<div class="mt-2 flex items-center">
|
|
<svg class="w-4 h-4 text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
|
|
</svg>
|
|
<span class="font-medium">{{ $jobCard->assignedTo->name }}</span>
|
|
</div>
|
|
@endif
|
|
<div class="mt-1 flex items-center">
|
|
<svg class="w-4 h-4 text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
|
|
</svg>
|
|
<span>{{ app(\App\Settings\GeneralSettings::class)->shop_phone }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|