Car-Repairs-Shop/resources/views/livewire/dashboard/workflow-overview.blade.php
sackey e3b2b220d2
Some checks are pending
linter / quality (push) Waiting to run
tests / ci (push) Waiting to run
Enhance UI and functionality across various components
- Increased icon sizes in service items, service orders, users, and technician management for better visibility.
- Added custom loading indicators with appropriate icons in search fields for vehicles, work orders, and technicians.
- Introduced invoice management routes for better organization and access control.
- Created a new test for the estimate PDF functionality to ensure proper rendering and data integrity.
2025-08-16 14:36:58 +00:00

191 lines
14 KiB
PHP

<div class="space-y-6">
<!-- Role-specific header -->
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{{ $roleSpecificData['title'] }}</h2>
<span class="px-3 py-1 text-sm bg-zinc-100 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-300 rounded-full">
{{ now()->format('g:i A') }}
</span>
</div>
<!-- Overall Statistics Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
<div class="text-blue-600 dark:text-blue-400 text-sm font-medium mb-1">Pending Inspection</div>
<div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['pending_inspection'] }}</div>
<svg class="w-5 h-5 text-blue-500 mt-2" 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 class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
<div class="text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-1">Diagnosis</div>
<div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['assigned_for_diagnosis'] + $stats['diagnosis_in_progress'] }}</div>
<svg class="w-5 h-5 text-yellow-500 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
<div class="text-orange-600 dark:text-orange-400 text-sm font-medium mb-1">Estimates Pending</div>
<div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['estimates_pending_approval'] }}</div>
<svg class="w-5 h-5 text-orange-500 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
</svg>
</div>
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
<div class="text-purple-600 dark:text-purple-400 text-sm font-medium mb-1">Active Work Orders</div>
<div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['work_orders_active'] }}</div>
<svg class="w-5 h-5 text-purple-500 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
<div class="text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-1">Quality Inspection</div>
<div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['quality_inspections_pending'] }}</div>
<svg class="w-5 h-5 text-indigo-500 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
<div class="text-green-600 dark:text-green-400 text-sm font-medium mb-1">Total Active</div>
<div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ array_sum($stats) }}</div>
<svg class="w-5 h-5 text-green-500 mt-2" 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>
<!-- Role-specific section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Role Tasks -->
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
<div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
<h3 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">My Tasks</h3>
</div>
<div class="p-6">
@if(!empty($roleSpecificData['tasks']))
<div class="space-y-4">
@foreach($roleSpecificData['tasks'] as $task => $count)
<div class="flex justify-between items-center p-3 bg-zinc-50 dark:bg-zinc-800 rounded-lg">
<span class="text-zinc-700 dark:text-zinc-300 font-medium">{{ $task }}</span>
<span class="px-2 py-1 text-sm rounded-full {{ $count > 0 ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' }}">
{{ $count }}
</span>
</div>
@endforeach
</div>
@else
<div class="text-center py-8">
<svg class="w-12 h-12 text-green-500 mx-auto mb-3" 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>
<p class="text-zinc-500 dark:text-zinc-400">All caught up! No pending tasks.</p>
</div>
@endif
</div>
</div>
<!-- Recent Activity -->
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
<div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
<h3 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">Recent Job Cards</h3>
</div>
<div class="p-6">
@if($recentJobCards->count() > 0)
<div class="space-y-4">
@foreach($recentJobCards as $jobCard)
<div class="flex justify-between items-start p-3 bg-zinc-50 dark:bg-zinc-800 rounded-lg">
<div class="flex-1">
<div class="font-medium text-zinc-900 dark:text-white">{{ $jobCard->job_card_number ?? $jobCard->job_number }}</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400 mt-1">
{{ $jobCard->customer->name ?? $jobCard->customer->first_name . ' ' . $jobCard->customer->last_name }} -
{{ $jobCard->vehicle->year }} {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }}
</div>
<div class="text-xs text-zinc-500 dark:text-zinc-500 mt-1">
{{ $jobCard->created_at->diffForHumans() }}
</div>
</div>
<span class="px-2 py-1 text-xs rounded-full bg-zinc-100 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200">
{{ ucfirst(str_replace('_', ' ', $jobCard->status)) }}
</span>
</div>
@endforeach
</div>
<div class="mt-6 pt-4 border-t border-zinc-200 dark:border-zinc-700">
<a href="{{ route('job-cards.index') }}" class="inline-flex items-center text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200">
View all job cards
<svg class="w-6 h-6 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</a>
</div>
@else
<div class="text-center py-8">
<svg class="w-12 h-12 text-zinc-400 mx-auto mb-3" 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>
<p class="text-zinc-500 dark:text-zinc-400">No recent job cards.</p>
<a href="{{ route('job-cards.create') }}" class="inline-flex items-center px-3 py-2 mt-3 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg">
Create First Job Card
</a>
</div>
@endif
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
<div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
<h3 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">Quick Actions</h3>
</div>
<div class="p-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
@can('job-cards.create')
<a href="{{ route('job-cards.create') }}" class="h-20 flex flex-col items-center justify-center border border-zinc-300 dark:border-zinc-600 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
<svg class="w-6 h-6 mb-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>
<span class="text-sm">New Job Card</span>
</a>
@endcan
@can('inspections.view')
<a href="{{ route('inspections.index') }}" class="h-20 flex flex-col items-center justify-center border border-zinc-300 dark:border-zinc-600 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
<svg class="w-6 h-6 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
<span class="text-sm">Inspections</span>
</a>
@endcan
@can('estimates.view')
<a href="{{ route('estimates.index') }}" class="h-20 flex flex-col items-center justify-center border border-zinc-300 dark:border-zinc-600 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
<svg class="w-6 h-6 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
</svg>
<span class="text-sm">Estimates</span>
</a>
@endcan
@can('work-orders.view')
<a href="{{ route('work-orders.index') }}" class="h-20 flex flex-col items-center justify-center border border-zinc-300 dark:border-zinc-600 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
<svg class="w-6 h-6 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a1 1 0 01-1-1V9a1 1 0 011-1h1a2 2 0 100-4H4a1 1 0 01-1-1V5a1 1 0 011-1h3a1 1 0 001-1V2a2 2 0 012-2z"/>
</svg>
<span class="text-sm">Work Orders</span>
</a>
@endcan
</div>
</div>
</div>
</div>