AirService_potyk/resources/views/livewire/dashboard/dashboard-page.blade.php

<div wire:poll.60s="refreshData" class="space-y-6">
    <div id="dashboard-chart-data" class="hidden"
         data-status='@json($statusChart)'
         data-priority='@json($priorityChart)'></div>

    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="card"><div class="card-body"><p class="text-sm text-slate-500">Открыто сегодня</p><p class="text-3xl font-semibold mt-2">{{ $openToday }}</p></div></div>
        <div class="card"><div class="card-body"><p class="text-sm text-slate-500">Просрочено</p><p class="text-3xl font-semibold mt-2 text-rose-600">{{ $overdue }}</p></div></div>
        <div class="card"><div class="card-body"><p class="text-sm text-slate-500">Среднее время решения (30 дней)</p><p class="text-3xl font-semibold mt-2">{{ number_format($avgResolutionHours, 1) }}ч</p></div></div>
        <div class="card"><div class="card-body"><p class="text-sm text-slate-500">Топ техников</p><p class="text-3xl font-semibold mt-2">{{ count($topTechnicians) }}</p></div></div>
    </div>

    <div class="grid gap-6 xl:grid-cols-2">
        <div class="card" wire:ignore>
            <div class="card-body">
                <h2 class="text-lg font-semibold mb-4">Заявки по статусам</h2>
                <div class="dashboard-chart-wrap">
                    <canvas id="statusChart"></canvas>
                </div>
            </div>
        </div>
        <div class="card" wire:ignore>
            <div class="card-body">
                <h2 class="text-lg font-semibold mb-4">Заявки по приоритетам</h2>
                <div class="dashboard-chart-wrap">
                    <canvas id="priorityChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="grid gap-6 xl:grid-cols-2">
        <div class="card">
            <div class="card-body">
                <h2 class="text-lg font-semibold mb-4">Топ-5 техников</h2>
                <div class="space-y-2">
                    @forelse($topTechnicians as $item)
                        <div class="flex items-center justify-between rounded-lg border border-slate-200 px-3 py-2">
                            <span>{{ $item['name'] }}</span>
                            <span class="text-sm text-slate-500">Закрыто: {{ $item['closed_requests_count'] }}</span>
                        </div>
                    @empty
                        <p class="text-sm text-slate-500">Нет данных.</p>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h2 class="text-lg font-semibold mb-4">Ближайшие плановые работы</h2>
                <div class="space-y-2">
                    @forelse($upcomingTasks as $item)
                        <div class="rounded-lg border border-slate-200 px-3 py-2">
                            <p class="font-medium text-sm">{{ $item['ticket'] }} — {{ $item['title'] }}</p>
                            <p class="text-xs text-slate-500 mt-1">{{ $item['planned_at'] }} • {{ $item['assignee'] }}</p>
                        </div>
                    @empty
                        <p class="text-sm text-slate-500">Нет запланированных задач.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <h2 class="text-lg font-semibold mb-4">Лента активности</h2>
            <div class="space-y-2">
                @forelse($recentActivities as $item)
                    <div class="rounded-lg border border-slate-200 px-3 py-2 flex justify-between items-start gap-4">
                        <div>
                            <p class="text-sm font-medium">{{ $item['user'] }}: {{ $item['description'] }}</p>
                            <p class="text-xs text-slate-500">{{ $item['action'] }}</p>
                        </div>
                        <p class="text-xs text-slate-500 whitespace-nowrap">{{ $item['created_at'] }}</p>
                    </div>
                @empty
                    <p class="text-sm text-slate-500">Активность отсутствует.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>