sackey a65fee9d75
Some checks are pending
linter / quality (push) Waiting to run
tests / ci (push) Waiting to run
Add customer portal workflow progress component and analytics dashboard
- 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.
2025-08-10 19:41:25 +00:00

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>