329 lines
22 KiB
PHP
329 lines
22 KiB
PHP
<div>
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100">Workflow Manager - {{ $jobCard->job_card_number }}</h1>
|
|
<p class="text-zinc-600 dark:text-zinc-400 mt-2">
|
|
{{ $jobCard->customer->first_name }} {{ $jobCard->customer->last_name }} - {{ $jobCard->vehicle->year }} {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
<!-- Workflow Steps -->
|
|
<div class="lg:col-span-3">
|
|
<div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
|
|
<div class="p-4 border-b border-zinc-200 dark:border-zinc-700">
|
|
<h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Workflow Progress</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="mb-8">
|
|
<div class="flex items-center justify-between mb-2">
|
|
@php
|
|
$steps = [
|
|
'received' => 'Received',
|
|
'in_diagnosis' => 'Diagnosis',
|
|
'estimate_sent' => 'Estimate',
|
|
'approved' => 'Approved',
|
|
'in_progress' => 'Work Order',
|
|
'quality_check' => 'Quality Check',
|
|
'completed' => 'Completed',
|
|
'delivered' => 'Delivered'
|
|
];
|
|
$currentStepIndex = array_search($jobCard->status, array_keys($steps));
|
|
$totalSteps = count($steps);
|
|
@endphp
|
|
|
|
@foreach($steps as $key => $label)
|
|
@php
|
|
$stepIndex = array_search($key, array_keys($steps));
|
|
$isCompleted = $stepIndex <= $currentStepIndex;
|
|
$isCurrent = $stepIndex === $currentStepIndex;
|
|
@endphp
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold
|
|
{{ $isCompleted ? 'bg-green-500 text-white' : ($isCurrent ? 'bg-blue-500 text-white' : 'bg-gray-300 text-zinc-600 dark:text-zinc-400') }}">
|
|
{{ $stepIndex + 1 }}
|
|
</div>
|
|
<span class="text-xs mt-1 text-center">{{ $label }}</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: {{ ($currentStepIndex + 1) / $totalSteps * 100 }}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Step Actions -->
|
|
<div class="space-y-6">
|
|
@if($jobCard->status === 'received')
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg">
|
|
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 1: Initial Inspection & Diagnosis</h3>
|
|
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
|
|
Start the diagnostic process to identify issues and required services.
|
|
</p>
|
|
<a href="{{ route('diagnosis.create', $jobCard) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
|
|
Start Diagnosis
|
|
</a>
|
|
</div>
|
|
@endif
|
|
|
|
@if($jobCard->status === 'in_diagnosis' && $jobCard->diagnosis)
|
|
<div class="bg-yellow-50 dark:bg-yellow-900/20 p-6 rounded-lg">
|
|
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 2: Create Estimate</h3>
|
|
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
|
|
Based on the diagnosis, create a detailed estimate for the customer.
|
|
</p>
|
|
<div class="flex space-x-3">
|
|
<a href="{{ route('diagnosis.show', $jobCard->diagnosis) }}" class="inline-flex items-center px-4 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg transition-colors">
|
|
View Diagnosis
|
|
</a>
|
|
<a href="{{ route('estimates.create', $jobCard->diagnosis) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
|
|
Create Estimate
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($jobCard->status === 'estimate_sent' && $jobCard->estimates->count() > 0)
|
|
<div class="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg">
|
|
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 3: Await Customer Approval</h3>
|
|
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
|
|
Estimate has been sent to customer. Waiting for approval to proceed.
|
|
</p>
|
|
<div class="flex space-x-3">
|
|
@foreach($jobCard->estimates as $estimate)
|
|
<a href="{{ route('estimates.show', $estimate) }}" class="inline-flex items-center px-4 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg transition-colors">
|
|
View Estimate {{ $estimate->estimate_number }}
|
|
</a>
|
|
@endforeach
|
|
<button wire:click="approveEstimate" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
|
|
Mark as Approved
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($jobCard->status === 'approved')
|
|
@php $approvedEstimate = $jobCard->estimates->where('status', 'approved')->first(); @endphp
|
|
<div class="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg">
|
|
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 4: Create Work Order</h3>
|
|
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
|
|
Customer has approved the estimate. Create work order to begin repairs.
|
|
</p>
|
|
<div class="flex space-x-3">
|
|
@if($approvedEstimate)
|
|
<a href="{{ route('estimates.show', $approvedEstimate) }}" class="inline-flex items-center px-4 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg transition-colors">
|
|
View Approved Estimate
|
|
</a>
|
|
<a href="{{ route('work-orders.create', $approvedEstimate) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
|
|
Create Work Order
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($jobCard->status === 'in_progress' && $jobCard->workOrders->count() > 0)
|
|
<div class="bg-orange-50 dark:bg-orange-900/20 p-6 rounded-lg">
|
|
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 5: Work in Progress</h3>
|
|
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
|
|
Technicians are currently working on the vehicle. Monitor progress and update work orders.
|
|
</p>
|
|
<div class="space-y-3">
|
|
@foreach($jobCard->workOrders as $workOrder)
|
|
<div class="flex items-center justify-between p-3 bg-white dark:bg-zinc-700 rounded border border-zinc-200 dark:border-zinc-600">
|
|
<div>
|
|
<span class="font-semibold text-zinc-900 dark:text-zinc-100">{{ $workOrder->work_order_number }}</span>
|
|
<span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">Progress: {{ $workOrder->progress_percentage }}%</span>
|
|
</div>
|
|
<a href="{{ route('work-orders.show', $workOrder) }}" class="inline-flex items-center px-3 py-1 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-sm font-medium rounded transition-colors">
|
|
Manage
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($jobCard->status === 'quality_check')
|
|
<div class="bg-indigo-50 dark:bg-indigo-900/20 p-6 rounded-lg">
|
|
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 6: Quality Check</h3>
|
|
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
|
|
All work has been completed. Perform final quality check before customer delivery.
|
|
</p>
|
|
<div class="flex space-x-3">
|
|
<button wire:click="passQualityCheck" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
|
|
Pass Quality Check
|
|
</button>
|
|
<button wire:click="failQualityCheck" class="inline-flex items-center px-4 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg transition-colors">
|
|
Fail Quality Check
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($jobCard->status === 'completed')
|
|
<div class="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg">
|
|
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 7: Ready for Delivery</h3>
|
|
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
|
|
Vehicle is ready for customer pickup or delivery. Complete the final handover.
|
|
</p>
|
|
<div class="flex space-x-3">
|
|
<button wire:click="markAsDelivered" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
|
|
Mark as Delivered
|
|
</button>
|
|
<a href="{{ route('job-cards.edit', $jobCard) }}" class="inline-flex items-center px-4 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg transition-colors">
|
|
Update Details
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($jobCard->status === 'delivered')
|
|
<div class="bg-zinc-50 dark:bg-zinc-900 p-6 rounded-lg">
|
|
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Workflow Complete</h3>
|
|
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
|
|
Vehicle has been delivered to the customer. Job card is complete.
|
|
</p>
|
|
<span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Delivered</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="space-y-6">
|
|
<!-- Job Card Summary -->
|
|
<div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
|
|
<div class="p-4 border-b border-zinc-200 dark:border-zinc-700">
|
|
<h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Job Card Summary</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="space-y-3">
|
|
<div>
|
|
<label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Status</label>
|
|
@php
|
|
$statusColors = [
|
|
'received' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
|
|
'in_diagnosis' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
|
|
'estimate_sent' => 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
|
|
'approved' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
|
|
'in_progress' => 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
|
|
'quality_check' => 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
|
|
'completed' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
|
|
'delivered' => 'bg-zinc-100 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200'
|
|
];
|
|
@endphp
|
|
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $statusColors[$jobCard->status] ?? 'bg-zinc-100 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200' }}">
|
|
{{ ucwords(str_replace('_', ' ', $jobCard->status)) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Priority</label>
|
|
@php
|
|
$priorityColors = [
|
|
'urgent' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
|
|
'high' => 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
|
|
'medium' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
|
|
'low' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
|
];
|
|
@endphp
|
|
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $priorityColors[$jobCard->priority] ?? 'bg-zinc-100 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200' }}">
|
|
{{ ucfirst($jobCard->priority) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Customer</label>
|
|
<p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $jobCard->customer->first_name }} {{ $jobCard->customer->last_name }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Vehicle</label>
|
|
<p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $jobCard->vehicle->year }} {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Service Advisor</label>
|
|
<p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $jobCard->serviceAdvisor?->name ?? 'Unassigned' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Links -->
|
|
<div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
|
|
<div class="p-4 border-b border-zinc-200 dark:border-zinc-700">
|
|
<h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Quick Links</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="space-y-2">
|
|
<a href="{{ route('job-cards.show', $jobCard) }}" class="w-full inline-flex items-center justify-center px-3 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-sm font-medium rounded transition-colors">
|
|
View Job Card Details
|
|
</a>
|
|
|
|
@if($jobCard->diagnosis)
|
|
<a href="{{ route('diagnosis.show', $jobCard->diagnosis) }}" class="w-full inline-flex items-center justify-center px-3 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-sm font-medium rounded transition-colors">
|
|
View Diagnosis
|
|
</a>
|
|
@endif
|
|
|
|
@foreach($jobCard->estimates as $estimate)
|
|
<a href="{{ route('estimates.show', $estimate) }}" class="w-full inline-flex items-center justify-center px-3 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-sm font-medium rounded transition-colors">
|
|
View Estimate {{ $estimate->estimate_number }}
|
|
</a>
|
|
@endforeach
|
|
|
|
@foreach($jobCard->workOrders as $workOrder)
|
|
<a href="{{ route('work-orders.show', $workOrder) }}" class="w-full inline-flex items-center justify-center px-3 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-sm font-medium rounded transition-colors">
|
|
View Work Order {{ $workOrder->work_order_number }}
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
|
|
<div class="p-4 border-b border-zinc-200 dark:border-zinc-700">
|
|
<h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Recent Activity</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-zinc-900 dark:text-zinc-100">Job Card Created</span>
|
|
<span class="text-zinc-500 dark:text-zinc-400">{{ $jobCard->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
|
|
@if($jobCard->diagnosis)
|
|
<div class="flex justify-between">
|
|
<span class="text-zinc-900 dark:text-zinc-100">Diagnosis Completed</span>
|
|
<span class="text-zinc-500 dark:text-zinc-400">{{ $jobCard->diagnosis->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
@foreach($jobCard->estimates->take(3) as $estimate)
|
|
<div class="flex justify-between">
|
|
<span class="text-zinc-900 dark:text-zinc-100">Estimate {{ $estimate->estimate_number }}</span>
|
|
<span class="text-zinc-500 dark:text-zinc-400">{{ $estimate->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
@endforeach
|
|
|
|
@foreach($jobCard->workOrders->take(3) as $workOrder)
|
|
<div class="flex justify-between">
|
|
<span class="text-zinc-900 dark:text-zinc-100">Work Order {{ $workOrder->work_order_number }}</span>
|
|
<span class="text-zinc-500 dark:text-zinc-400">{{ $workOrder->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|