sackey/Car-Repairs-Shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Car-Repairs-Shop/resources/views/livewire/appointments/calendar.blade.php
sackey e3b2b220d2
Some checks are pending
linter / quality (push) Waiting to run
Details
tests / ci (push) Waiting to run
Details
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

431 lines
28 KiB
PHP
Raw Blame History

<div>
{{-- Calendar Header --}}
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg mb-6">
<div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
{{-- Top Row: Title and Today Button --}}
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-zinc-900 dark:text-white dark:text-white">
{{ $currentPeriodLabel }}
</h2>
<button wire:click="today" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-zinc-300 dark:border-zinc-600 rounded-md hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
Today
</button>
</div>
{{-- Bottom Row: Controls --}}
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-3 lg:space-y-0">
{{-- Left Side: Technician Filter --}}
<div class="flex-shrink-0">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Filter by Technician
</label>
<select wire:model.live="selectedTechnician" class="block w-full lg:w-64 rounded-md border-zinc-300 dark:border-zinc-600 border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500 dark:border-zinc-700 dark:bg-gray-900 dark:text-gray-300 text-sm">
<option value="">All Technicians</option>
@foreach($technicians as $technician)
<option value="{{ $technician->id }}">
{{ $technician->first_name }} {{ $technician->last_name }}
</option>
@endforeach
</select>
</div>
{{-- Right Side: View Controls and Navigation --}}
<div class="flex items-center space-x-4">
{{-- View Type Toggles --}}
<div class="flex rounded-md border border-zinc-200 dark:border-zinc-700">
<button
wire:click="setViewType('month')"
class="px-3 py-2 text-sm font-medium rounded-l-md border transition-colors duration-200 {{ $viewType === 'month' ? 'bg-indigo-600 text-white border-indigo-600 z-10' : 'bg-white text-gray-700 border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50' }}"
>
Month
</button>
<button
wire:click="setViewType('week')"
class="px-3 py-2 text-sm font-medium border-t border-b -ml-px transition-colors duration-200 {{ $viewType === 'week' ? 'bg-indigo-600 text-white border-indigo-600 z-10' : 'bg-white text-gray-700 border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50' }}"
>
Week
</button>
<button
wire:click="setViewType('day')"
class="px-3 py-2 text-sm font-medium rounded-r-md border -ml-px transition-colors duration-200 {{ $viewType === 'day' ? 'bg-indigo-600 text-white border-indigo-600 z-10' : 'bg-white text-gray-700 border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50' }}"
>
Day
</button>
</div>
{{-- Navigation --}}
<div class="flex items-center space-x-1 border border-zinc-300 dark:border-zinc-600 rounded-md">
<button
wire:click="previousPeriod"
class="p-2 text-zinc-500 dark:text-zinc-400 hover:text-gray-700 hover:bg-zinc-100 rounded-l-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
title="Previous {{ $viewType }}"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<button
wire:click="nextPeriod"
class="p-2 text-zinc-500 dark:text-zinc-400 hover:text-gray-700 hover:bg-zinc-100 rounded-r-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
title="Next {{ $viewType }}"
>
<svg class="w-6 h-6" 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"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
{{-- Calendar Content --}}
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg">
@if($viewType === 'month')
{{-- Month View --}}
<div class="p-6">
{{-- Day Headers --}}
<div class="grid grid-cols-7 gap-1 mb-2">
@foreach(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as $day)
<div class="text-center text-sm font-medium text-zinc-500 dark:text-zinc-400 dark:text-gray-400 py-2">
{{ $day }}
</div>
@endforeach
</div>
{{-- Calendar Days --}}
<div class="grid grid-cols-7 gap-1">
@foreach($calendarDays as $day)
<div
wire:click="selectDate('{{ $day['date'] }}')"
class="min-h-24 p-1 border border-zinc-200 dark:border-zinc-700 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors
{{ $day['isCurrentMonth'] ? 'bg-white dark:bg-zinc-800' : 'bg-zinc-50 dark:bg-gray-900' }}
{{ $day['isToday'] ? 'ring-2 ring-blue-500' : '' }}
{{ $day['isSelected'] ? 'bg-blue-50 dark:bg-blue-900' : '' }}"
>
<div class="text-sm {{ $day['isCurrentMonth'] ? 'text-zinc-900 dark:text-white dark:text-white' : 'text-gray-400' }}
{{ $day['isToday'] ? 'font-bold' : '' }}">
{{ $day['day'] }}
</div>
{{-- Appointments for this day --}}
@if(isset($appointments[$day['date']]))
<div class="mt-1 space-y-1">
@foreach(array_slice($appointments[$day['date']], 0, 3) as $appointment)
<div
wire:click.stop="showAppointmentDetails({{ $appointment['id'] }})"
class="text-xs p-1 rounded cursor-pointer transition-colors
@if($appointment['status'] === 'confirmed')
bg-green-100 text-green-800 hover:bg-green-200
@elseif($appointment['status'] === 'scheduled')
bg-blue-100 text-blue-800 hover:bg-blue-200
@elseif($appointment['status'] === 'in_progress')
bg-yellow-100 text-yellow-800 hover:bg-yellow-200
@elseif($appointment['status'] === 'completed')
bg-emerald-100 text-emerald-800 hover:bg-emerald-200
@else
bg-gray-100 text-gray-800 hover:bg-gray-200
@endif"
>
<div class="font-medium">
{{ \Carbon\Carbon::parse($appointment['scheduled_datetime'])->format('g:i A') }}
</div>
<div class="truncate">
{{ $appointment['customer']['first_name'] ?? 'Unknown' }}
</div>
</div>
@endforeach
@if(count($appointments[$day['date']]) > 3)
<div class="text-xs text-zinc-500 dark:text-zinc-400">
+{{ count($appointments[$day['date']]) - 3 }} more
</div>
@endif
</div>
@endif
</div>
@endforeach
</div>
</div>
@elseif($viewType === 'week')
{{-- Week View --}}
<div class="flex">
{{-- Time Column --}}
<div class="w-20 border-r border-zinc-200 dark:border-zinc-700">
<div class="h-12 border-b border-zinc-200 dark:border-zinc-700"></div>
@foreach($timeSlots as $slot)
<div class="h-12 text-xs text-zinc-500 dark:text-zinc-400 dark:text-gray-400 p-2 border-b border-gray-100 dark:border-gray-800">
{{ $slot['label'] }}
</div>
@endforeach
</div>
{{-- Days Columns --}}
<div class="flex-1 grid grid-cols-7">
@foreach($calendarDays as $day)
<div class="border-r border-zinc-200 dark:border-zinc-700 last:border-r-0">
{{-- Day Header --}}
<div class="h-12 border-b border-zinc-200 dark:border-zinc-700 p-2 text-center
{{ $day['isToday'] ? 'bg-blue-50 dark:bg-blue-900' : '' }}">
<div class="text-sm font-medium text-zinc-900 dark:text-white dark:text-white">
{{ $day['dayName'] }}
</div>
<div class="text-lg {{ $day['isToday'] ? 'text-blue-600 font-bold' : 'text-gray-700 dark:text-gray-300' }}">
{{ $day['day'] }}
</div>
</div>
{{-- Time Slots --}}
<div class="relative">
@foreach($timeSlots as $slot)
<div class="h-12 border-b border-gray-100 dark:border-gray-800 relative">
{{-- Appointments for this time slot --}}
@if(isset($appointments[$day['date']]))
@foreach($appointments[$day['date']] as $appointment)
@php
$appointmentTime = \Carbon\Carbon::parse($appointment['scheduled_datetime'])->format('H:i');
@endphp
@if($appointmentTime === $slot['time'])
<div
wire:click="showAppointmentDetails({{ $appointment['id'] }})"
class="absolute inset-x-1 top-1 bottom-1 p-1 rounded text-xs cursor-pointer transition-colors
@if($appointment['status'] === 'confirmed')
bg-green-100 text-green-800 hover:bg-green-200
@elseif($appointment['status'] === 'scheduled')
bg-blue-100 text-blue-800 hover:bg-blue-200
@elseif($appointment['status'] === 'in_progress')
bg-yellow-100 text-yellow-800 hover:bg-yellow-200
@elseif($appointment['status'] === 'completed')
bg-emerald-100 text-emerald-800 hover:bg-emerald-200
@else
bg-gray-100 text-gray-800 hover:bg-gray-200
@endif"
>
<div class="font-medium truncate">{{ $appointment['customer']['first_name'] ?? '' }} {{ $appointment['customer']['last_name'] ?? '' }}</div>
<div class="text-xs truncate">{{ $appointment['service_requested'] }}</div>
</div>
@endif
@endforeach
@endif
</div>
@endforeach
</div>
</div>
@endforeach
</div>
</div>
@else
{{-- Day View --}}
<div class="flex">
{{-- Time Column --}}
<div class="w-20 border-r border-zinc-200 dark:border-zinc-700">
<div class="h-16 border-b border-zinc-200 dark:border-zinc-700 p-4">
<div class="text-sm font-medium text-zinc-900 dark:text-white dark:text-white">
{{ $calendarDays[0]['fullDate'] ?? '' }}
</div>
</div>
@foreach($timeSlots as $slot)
<div class="h-16 text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400 p-3 border-b border-gray-100 dark:border-gray-800">
{{ $slot['label'] }}
</div>
@endforeach
</div>
{{-- Day Content --}}
<div class="flex-1">
<div class="h-16 border-b border-zinc-200 dark:border-zinc-700 p-4">
<div class="text-lg font-medium text-zinc-900 dark:text-white dark:text-white">
Schedule
</div>
</div>
<div class="relative">
@foreach($timeSlots as $slot)
<div class="h-16 border-b border-gray-100 dark:border-gray-800 relative px-4">
{{-- Appointments for this time slot --}}
@if(isset($appointments[$selectedDate]))
@foreach($appointments[$selectedDate] as $appointment)
@php
$appointmentTime = \Carbon\Carbon::parse($appointment['scheduled_datetime'])->format('H:i');
@endphp
@if($appointmentTime === $slot['time'])
<div
wire:click="showAppointmentDetails({{ $appointment['id'] }})"
class="absolute inset-x-4 top-2 bottom-2 p-3 rounded-lg shadow cursor-pointer transition-colors border
@if($appointment['status'] === 'confirmed')
bg-green-50 border-green-200 hover:bg-green-100
@elseif($appointment['status'] === 'scheduled')
bg-blue-50 border-blue-200 hover:bg-blue-100
@elseif($appointment['status'] === 'in_progress')
bg-yellow-50 border-yellow-200 hover:bg-yellow-100
@elseif($appointment['status'] === 'completed')
bg-emerald-50 border-emerald-200 hover:bg-emerald-100
@else
bg-zinc-50 border-zinc-200 hover:bg-zinc-100
@endif"
>
<div class="flex items-center justify-between">
<div>
<div class="font-medium
@if($appointment['status'] === 'confirmed')
text-green-900
@elseif($appointment['status'] === 'scheduled')
text-blue-900
@elseif($appointment['status'] === 'in_progress')
text-yellow-900
@elseif($appointment['status'] === 'completed')
text-emerald-900
@else
text-zinc-900 dark:text-white
@endif">
{{ $appointment['customer']['first_name'] ?? '' }} {{ $appointment['customer']['last_name'] ?? '' }}
</div>
<div class="text-sm
@if($appointment['status'] === 'confirmed')
text-green-700
@elseif($appointment['status'] === 'scheduled')
text-blue-700
@elseif($appointment['status'] === 'in_progress')
text-yellow-700
@elseif($appointment['status'] === 'completed')
text-emerald-700
@else
text-gray-700
@endif">
{{ $appointment['service_requested'] }}
</div>
<div class="text-xs
@if($appointment['status'] === 'confirmed')
text-green-600
@elseif($appointment['status'] === 'scheduled')
text-blue-600
@elseif($appointment['status'] === 'in_progress')
text-yellow-600
@elseif($appointment['status'] === 'completed')
text-emerald-600
@else
text-zinc-600 dark:text-zinc-400
@endif">
{{ $appointment['assigned_technician']['first_name'] ?? '' }} {{ $appointment['assigned_technician']['last_name'] ?? '' }}
</div>
</div>
<div class="text-sm
@if($appointment['status'] === 'confirmed')
text-green-700
@elseif($appointment['status'] === 'scheduled')
text-blue-700
@elseif($appointment['status'] === 'in_progress')
text-yellow-700
@elseif($appointment['status'] === 'completed')
text-emerald-700
@else
text-gray-700
@endif">
{{ \Carbon\Carbon::parse($appointment['scheduled_datetime'])->format('g:i A') }}
</div>
</div>
</div>
@endif
@endforeach
@endif
</div>
@endforeach
</div>
</div>
</div>
@endif
</div>
{{-- Appointment Details Modal --}}
@if($showAppointmentModal && $selectedAppointment)
<div class="fixed inset-0 bg-zinc-500 bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-md w-full mx-4">
<div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
<div class="flex items-center justify-between">
<h3 class="text-lg font-medium text-zinc-900 dark:text-white dark:text-white">
Appointment Details
</h3>
<button wire:click="closeAppointmentModal" class="text-gray-400 hover:text-zinc-600 dark:text-zinc-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<div class="px-6 py-4 space-y-4">
<div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
@if($selectedAppointment->status === 'confirmed')
bg-green-100 text-green-800
@elseif($selectedAppointment->status === 'scheduled')
bg-blue-100 text-blue-800
@elseif($selectedAppointment->status === 'in_progress')
bg-yellow-100 text-yellow-800
@elseif($selectedAppointment->status === 'completed')
bg-emerald-100 text-emerald-800
@elseif($selectedAppointment->status === 'cancelled')
bg-red-100 text-red-800
@else
bg-gray-100 text-gray-800
@endif">
{{ ucfirst(str_replace('_', ' ', $selectedAppointment->status)) }}
</span>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Customer</label>
<p class="text-zinc-900 dark:text-white dark:text-white">
{{ $selectedAppointment->customer->first_name }} {{ $selectedAppointment->customer->last_name }}
</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Vehicle</label>
<p class="text-zinc-900 dark:text-white dark:text-white">
{{ $selectedAppointment->vehicle->year }} {{ $selectedAppointment->vehicle->make }} {{ $selectedAppointment->vehicle->model }}
</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Technician</label>
<p class="text-zinc-900 dark:text-white dark:text-white">
{{ $selectedAppointment->assignedTechnician->first_name }} {{ $selectedAppointment->assignedTechnician->last_name }}
</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date & Time</label>
<p class="text-zinc-900 dark:text-white dark:text-white">
{{ $selectedAppointment->formatted_date_time }}
</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Service Requested</label>
<p class="text-zinc-900 dark:text-white dark:text-white">
{{ $selectedAppointment->service_requested }}
</p>
</div>
@if($selectedAppointment->customer_notes)
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Customer Notes</label>
<p class="text-zinc-900 dark:text-white dark:text-white">
{{ $selectedAppointment->customer_notes }}
</p>
</div>
@endif
</div>
<div class="px-6 py-4 border-t border-zinc-200 dark:border-zinc-700">
<button wire:click="closeAppointmentModal" class="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
Close
</button>
</div>
</div>
</div>
@endif
</div>
Reference in New Issue View Git Blame Copy Permalink