sackey
cbae4564b9
- Implemented dashboard view with vehicle stats, active services, recent activity, and upcoming appointments. - Created estimates view with filtering options and a list of service estimates. - Developed invoices view to manage service invoices and payment history with filtering. - Added vehicles view to display registered vehicles and their details. - Built work orders view to track the progress of vehicle services with filtering and detailed information.
259 lines
18 KiB
PHP
259 lines
18 KiB
PHP
<div>
|
|
<x-slot name="header">
|
|
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
|
{{ __('Timesheets') }}
|
|
</h2>
|
|
</x-slot>
|
|
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<!-- Header with Actions -->
|
|
<div class="mb-6 flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Timesheets</h1>
|
|
<p class="text-gray-600 dark:text-gray-400">Track technician work hours and job progress</p>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button wire:click="$set('showCreateModal', true)"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
|
</svg>
|
|
New Entry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Technician</label>
|
|
<select wire:model.live="selectedTechnician" class="w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
|
|
<option value="">All Technicians</option>
|
|
@foreach($technicians as $technician)
|
|
<option value="{{ $technician->id }}">{{ $technician->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Date From</label>
|
|
<input type="date" wire:model.live="dateFrom" class="w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Date To</label>
|
|
<input type="date" wire:model.live="dateTo" class="w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</label>
|
|
<select wire:model.live="selectedStatus" class="w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
|
|
<option value="">All Statuses</option>
|
|
<option value="draft">Draft</option>
|
|
<option value="submitted">Submitted</option>
|
|
<option value="approved">Approved</option>
|
|
<option value="rejected">Rejected</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timesheets Table -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<thead class="bg-gray-50 dark:bg-gray-700">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Technician
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Job Card
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Date
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Start Time
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
End Time
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Hours
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
|
@forelse($timesheets as $timesheet)
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 h-8 w-8">
|
|
<div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm font-medium">
|
|
{{ substr($timesheet->user->name, 0, 1) }}
|
|
</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
|
{{ $timesheet->user->name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm text-gray-900 dark:text-white">
|
|
@if($timesheet->job_card_id)
|
|
<a href="{{ route('job-cards.show', $timesheet->job_card_id) }}" class="text-blue-600 hover:text-blue-800">
|
|
#{{ $timesheet->job_card_id }}
|
|
</a>
|
|
@else
|
|
<span class="text-gray-500">-</span>
|
|
@endif
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
|
|
{{ $timesheet->date->format('M j, Y') }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
|
|
{{ $timesheet->start_time ? $timesheet->start_time->format('g:i A') : '-' }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
|
|
{{ $timesheet->end_time ? $timesheet->end_time->format('g:i A') : '-' }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
|
|
{{ number_format($timesheet->hours_worked, 2) }}h
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full
|
|
@if($timesheet->status === 'active') bg-green-100 text-green-800
|
|
@elseif($timesheet->status === 'completed') bg-blue-100 text-blue-800
|
|
@elseif($timesheet->status === 'pending') bg-yellow-100 text-yellow-800
|
|
@else bg-gray-100 text-gray-800 @endif">
|
|
{{ ucfirst($timesheet->status) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<div class="flex space-x-2">
|
|
<button wire:click="editTimesheet({{ $timesheet->id }})"
|
|
class="text-indigo-600 hover:text-indigo-900">
|
|
Edit
|
|
</button>
|
|
<button wire:click="deleteTimesheet({{ $timesheet->id }})"
|
|
class="text-red-600 hover:text-red-900"
|
|
onclick="return confirm('Are you sure?')">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="8" class="px-6 py-12 text-center">
|
|
<div class="text-gray-500 dark:text-gray-400">
|
|
<svg class="mx-auto h-12 w-12 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
|
</svg>
|
|
<h3 class="text-lg font-medium mb-2">No timesheets found</h3>
|
|
<p class="mb-4">Get started by creating your first timesheet entry.</p>
|
|
<button wire:click="$set('showCreateModal', true)"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
|
|
Create First Entry
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
@if($timesheets->hasPages())
|
|
<div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700">
|
|
{{ $timesheets->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create/Edit Modal -->
|
|
@if($showCreateModal || $showEditModal)
|
|
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
|
|
<div class="mt-3">
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
|
|
{{ $showCreateModal ? 'Create Timesheet Entry' : 'Edit Timesheet Entry' }}
|
|
</h3>
|
|
|
|
<form wire:submit.prevent="{{ $showCreateModal ? 'createTimesheet' : 'updateTimesheet' }}">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Technician</label>
|
|
<select wire:model="form.user_id" class="w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" required>
|
|
<option value="">Select Technician</option>
|
|
@foreach($technicians as $technician)
|
|
<option value="{{ $technician->id }}">{{ $technician->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('form.technician_id') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Job Card (Optional)</label>
|
|
<select wire:model="form.job_card_id" class="w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
|
|
<option value="">Select Job Card</option>
|
|
@foreach($jobCards as $jobCard)
|
|
<option value="{{ $jobCard->id }}">#{{ $jobCard->id }} - {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('form.job_card_id') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Date</label>
|
|
<input type="date" wire:model="form.date" class="w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" required>
|
|
@error('form.date') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Time</label>
|
|
<input type="time" wire:model="form.start_time" class="w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" required>
|
|
@error('form.start_time') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Time</label>
|
|
<input type="time" wire:model="form.end_time" class="w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
|
|
@error('form.end_time') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
|
|
<textarea wire:model="form.description" rows="3" class="w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" placeholder="What work was performed?"></textarea>
|
|
@error('form.description') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3 mt-6">
|
|
<button type="button" wire:click="closeModal" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
|
|
{{ $showCreateModal ? 'Create' : 'Update' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|