Car-Repairs-Shop/resources/views/livewire/reports/dashboard.blade.php

<div class="space-y-6">
    <div class="flex items-center justify-between">
        <flux:heading size="xl">Reports & Analytics</flux:heading>
        <div class="flex space-x-3">
            <flux:button size="sm" variant="outline">
                <flux:icon name="arrow-down-tray" class="size-4" />
                Export Report
            </flux:button>
            <flux:button size="sm">
                <flux:icon name="cog-6-tooth" class="size-4" />
                Settings
            </flux:button>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
        <div class="flex flex-col sm:flex-row gap-3">
            <!-- Date Range Selector -->
            <select wire:model.live="dateRange" class="px-4 py-2 border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800">
                @foreach($this->getDateRangeOptions() as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
            
            <!-- Report Type Selector -->
            <select wire:model.live="selectedReport" class="px-4 py-2 border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800">
                @foreach($this->getReportOptions() as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <!-- Overview Stats -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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-center">
                <div class="text-2xl font-bold text-green-600">${{ number_format($overviewStats['total_revenue'], 2) }}</div>
                <div class="text-sm text-zinc-600 dark:text-zinc-400">Total Revenue</div>
            </div>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
            <div class="text-center">
                <div class="text-2xl font-bold text-blue-600">{{ number_format($overviewStats['total_orders']) }}</div>
                <div class="text-sm text-zinc-600 dark:text-zinc-400">Total Orders</div>
            </div>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
            <div class="text-center">
                <div class="text-2xl font-bold text-purple-600">{{ number_format($overviewStats['avg_order_value'], 2) }}</div>
                <div class="text-sm text-zinc-600 dark:text-zinc-400">Avg Order Value</div>
            </div>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
            <div class="text-center">
                <div class="text-2xl font-bold text-orange-600">{{ number_format($overviewStats['total_customers']) }}</div>
                <div class="text-sm text-zinc-600 dark:text-zinc-400">Total Customers</div>
            </div>
        </div>
    </div>

    <!-- Report Sections -->
    @if($selectedReport === 'all' || $selectedReport === 'revenue')
        @include('livewire.reports.partials.revenue-analysis')
    @endif

    @if($selectedReport === 'all' || $selectedReport === 'customers')
        @include('livewire.reports.partials.customer-analytics')
    @endif

    @if($selectedReport === 'all' || $selectedReport === 'services')
        @include('livewire.reports.partials.service-trends')
    @endif

    @if($selectedReport === 'all' || $selectedReport === 'performance')
        @include('livewire.reports.partials.performance-metrics')
    @endif
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Revenue Chart
        @if(isset($revenueData) && isset($revenueData['chart_data']))
            const revenueCtx = document.getElementById('revenueChart');
            if (revenueCtx) {
                new Chart(revenueCtx, {
                    type: 'line',
                    data: {!! json_encode($revenueData['chart_data']) !!},
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value.toLocaleString();
                                    }
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: true,
                                position: 'top'
                            }
                        }
                    }
                });
            }
        @endif

        // Customer Chart
        @if(isset($customerAnalytics) && isset($customerAnalytics['chart_data']))
            const customerCtx = document.getElementById('customerChart');
            if (customerCtx) {
                new Chart(customerCtx, {
                    type: 'doughnut',
                    data: {!! json_encode($customerAnalytics['chart_data']) !!},
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'right'
                            }
                        }
                    }
                });
            }
        @endif

        // Service Trends Chart
        @if(isset($serviceTrends) && isset($serviceTrends['chart_data']))
            const serviceTrendsCtx = document.getElementById('serviceTrendsChart');
            if (serviceTrendsCtx) {
                new Chart(serviceTrendsCtx, {
                    type: 'bar',
                    data: {!! json_encode($serviceTrends['chart_data']) !!},
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        @endif

        // Performance Chart
        @if(isset($performanceMetrics) && isset($performanceMetrics['chart_data']))
            const performanceCtx = document.getElementById('performanceChart');
            if (performanceCtx) {
                new Chart(performanceCtx, {
                    type: 'radar',
                    data: {!! json_encode($performanceMetrics['chart_data']) !!},
                    options: {
                        responsive: true,
                        scales: {
                            r: {
                                beginAtZero: true,
                                max: 100
                            }
                        }
                    }
                });
            }
        @endif
    });
</script>
@endpush