164 lines
7.3 KiB
PHP
164 lines
7.3 KiB
PHP
<x-filament-panels::page>
|
|
{{-- Szűrő panel --}}
|
|
<div class="mb-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Beszállító
|
|
</label>
|
|
<select
|
|
wire:model.live="supplierId"
|
|
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
>
|
|
<option value="">— Válasszon beszállítót —</option>
|
|
@foreach ($this->getSuppliers() as $id => $name)
|
|
<option value="{{ $id }}" @selected($supplierId == $id)>{{ $name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Profitcenter
|
|
</label>
|
|
<select
|
|
wire:model.live="profitCenterId"
|
|
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
>
|
|
<option value="">— Válasszon profitcentert —</option>
|
|
@foreach ($this->getProfitCenters() as $id => $name)
|
|
<option value="{{ $id }}" @selected($profitCenterId == $id)>{{ $name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Jelmagyarázat --}}
|
|
<div class="mb-4 flex flex-wrap items-center gap-4 text-sm">
|
|
<span class="font-semibold text-gray-700 dark:text-gray-300">Jelmagyarázat:</span>
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<span class="inline-block w-4 h-4 rounded" style="background-color: #4CAF50;"></span>
|
|
Szállítási nap
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<span class="inline-block w-4 h-4 rounded" style="background-color: #EF4444;"></span>
|
|
Ünnepnap
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<span class="inline-block w-4 h-4 rounded" style="background-color: #F59E0B;"></span>
|
|
Áthelyezett munkanap
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<span class="inline-block w-4 h-4 rounded" style="background-color: #3B82F6;"></span>
|
|
Megrendelési határidő
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<span class="inline-block w-4 h-4 rounded" style="background-color: #E5E7EB;"></span>
|
|
Hétvége (inaktív)
|
|
</span>
|
|
</div>
|
|
|
|
{{-- Naptár widget spinner overlay-jel --}}
|
|
<div class="relative"
|
|
x-data="{ loading: false }"
|
|
x-init="
|
|
window.addEventListener('filament-fullcalendar--refresh', () => { loading = true; });
|
|
$wire.on('calendar-events-done', () => { loading = false; });
|
|
">
|
|
<div x-show="loading"
|
|
x-transition:enter="transition-opacity duration-150"
|
|
x-transition:leave="transition-opacity duration-300"
|
|
class="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-white/80 dark:bg-gray-900/80"
|
|
style="min-height: 200px; display: none;">
|
|
<div class="flex flex-col items-center gap-3">
|
|
<svg class="h-10 w-10 animate-spin text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.84 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">Naptár betöltése...</span>
|
|
</div>
|
|
</div>
|
|
|
|
@livewire(\App\Filament\Widgets\DeliveryCalendarWidget::class, [
|
|
'supplierId' => $supplierId,
|
|
'profitCenterId' => $profitCenterId,
|
|
])
|
|
</div>
|
|
|
|
<style>
|
|
/* Kompakt multi-hónap nézet a képhez hasonlóan */
|
|
.filament-fullcalendar {
|
|
--fc-small-font-size: 0.8em;
|
|
--fc-page-bg-color: transparent;
|
|
--fc-neutral-bg-color: transparent;
|
|
}
|
|
/* Hónap fejléc */
|
|
.filament-fullcalendar .fc-multimonth-title {
|
|
font-size: 0.9rem !important;
|
|
font-weight: 600;
|
|
padding: 4px 0 !important;
|
|
color: #453821;
|
|
}
|
|
/* Kompaktabb cellaméretek */
|
|
.filament-fullcalendar .fc-multimonth .fc-daygrid-day {
|
|
min-height: 0 !important;
|
|
}
|
|
.filament-fullcalendar .fc-multimonth .fc-daygrid-day-frame {
|
|
min-height: 24px !important;
|
|
padding: 1px !important;
|
|
}
|
|
.filament-fullcalendar .fc-multimonth .fc-daygrid-day-top {
|
|
justify-content: center;
|
|
}
|
|
.filament-fullcalendar .fc-multimonth .fc-daygrid-day-number {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 1px 3px !important;
|
|
}
|
|
/* Napfejléc (H, K, Sz, Cs, P, Szo, V) */
|
|
.filament-fullcalendar .fc-multimonth .fc-col-header-cell {
|
|
font-size: 0.7rem;
|
|
padding: 2px 0 !important;
|
|
font-weight: 700;
|
|
color: #6B7280;
|
|
}
|
|
/* Háttér események jobban kitöltik a cellát */
|
|
.filament-fullcalendar .fc-multimonth .fc-bg-event {
|
|
opacity: 0.85 !important;
|
|
border-radius: 3px;
|
|
}
|
|
/* Mai nap kiemelés */
|
|
.filament-fullcalendar .fc-day-today {
|
|
background-color: rgba(59, 130, 246, 0.1) !important;
|
|
}
|
|
.filament-fullcalendar .fc-day-today .fc-daygrid-day-number {
|
|
font-weight: 800;
|
|
color: #1D4ED8;
|
|
}
|
|
/* Hónapok közötti térköz csökkentése */
|
|
.filament-fullcalendar .fc-multimonth-month {
|
|
padding: 0 4px !important;
|
|
}
|
|
/* Fejléc toolbar */
|
|
.filament-fullcalendar .fc-toolbar {
|
|
margin-bottom: 0.5em !important;
|
|
}
|
|
.filament-fullcalendar .fc-toolbar-title {
|
|
font-size: 1rem !important;
|
|
color: #453821;
|
|
}
|
|
/* Szegély finomítás */
|
|
.filament-fullcalendar .fc-multimonth {
|
|
border: none !important;
|
|
}
|
|
.filament-fullcalendar .fc-multimonth-daygrid {
|
|
border: none !important;
|
|
}
|
|
/* Hétvége napok szürke szöveg */
|
|
.filament-fullcalendar .fc-day-sat .fc-daygrid-day-number,
|
|
.filament-fullcalendar .fc-day-sun .fc-daygrid-day-number {
|
|
color: #9CA3AF;
|
|
}
|
|
</style>
|
|
</x-filament-panels::page>
|