```blade
<?php

use Carbon\CarbonImmutable;
use Flux\DateRange;
use Illuminate\Support\Number;
use Livewire\Attributes\Computed;

new class extends \Livewire\Component {
    public string $chartType = 'bar';

    public DateRange $dateRange;

    public function mount(): void
    {
        $this->initializeDateRange();
    }

    protected function initializeDateRange(): void
    {
        $this->dateRange = DateRange::last7Days();
    }

    #[Computed]
    public function visitorData(): array
    {
        $visitorCounts = [369, 729, 852, 2150, 1250, 1383, 1165, 1875, 852, 729, 1042, 2415, 1250, 909, 1080, 1383, 814, 767, 559, 852, 1165, 767, 1761, 2150, 1165, 1042, 1496, 521, 1998, 1581, 1250];

        $startDate = CarbonImmutable::create(2025, 6, 1);
        $visitorData = [];

        foreach ($visitorCounts as $index => $visitors) {
            $visitorData[] = [
                'date' => $startDate->addDays($index)->toDateString(),
                'visitors' => $visitors,
            ];
        }

        return $visitorData;
    }

    #[Computed]
    public function stats(): array
    {
        return [
            ['label' => 'Visitors', 'value' => '128.6K', 'change' => '24.7%', 'trend' => 'up'],
            ['label' => 'Page views', 'value' => '389.1K', 'change' => '2.4%', 'trend' => 'down'],
            ['label' => 'Bounce rate', 'value' => '27.11%', 'change' => '1.7%', 'trend' => 'up'],
            ['label' => 'Average session', 'value' => '2m 57s', 'change' => '13.0%', 'trend' => 'up'],
        ];
    }

    #[Computed]
    public function topPages(): array
    {
        return [
            ['path' => '/', 'views' => 84600],
            ['path' => '/features', 'views' => 45800],
            ['path' => '/pricing', 'views' => 30700],
            ['path' => '/blog', 'views' => 29900],
            ['path' => '/docs', 'views' => 21200],
            ['path' => '/team', 'views' => 11100],
        ];
    }

    #[Computed]
    public function topPageScale(): int
    {
        return 110000;
    }

    #[Computed]
    public function countries(): array
    {
        return [
            ['name' => 'United States', 'visitors' => 42900, 'code' => 'US'],
            ['name' => 'United Kingdom', 'visitors' => 18800, 'code' => 'GB'],
            ['name' => 'Canada', 'visitors' => 12000, 'code' => 'CA'],
            ['name' => 'Germany', 'visitors' => 9500, 'code' => 'DE'],
            ['name' => 'Brazil', 'visitors' => 7700, 'code' => 'BR'],
            ['name' => 'Sweden', 'visitors' => 5400, 'code' => 'SE'],
        ];
    }

    #[Computed]
    public function sources(): array
    {
        return [
            ['name' => 'Organic search', 'percentage' => 42],
            ['name' => 'Direct', 'percentage' => 29],
            ['name' => 'Referral', 'percentage' => 13],
            ['name' => 'Social', 'percentage' => 9],
            ['name' => 'Paid search', 'percentage' => 5],
            ['name' => 'AI referrals', 'percentage' => 2],
        ];
    }
}
?>

{{-- This standalone demo keeps its application shell inline. In a production app, move shared navigation into your app layout. --}}

<div>
    <flux:sidebar sticky collapsible class="border-r border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
        <flux:sidebar.header>
            <flux:dropdown class="min-w-0 flex-1">
                <flux:sidebar.brand
                    as="button"
                    logo="https://fluxui.dev/img/demo/logo.png"
                    logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png"
                    name="acme.co"
                    icon:trailing="chevron-down"
                    class="w-full"
                />

                <flux:menu class="min-w-56">
                    <flux:menu.radio.group>
                        <flux:menu.radio value="acme.co" checked>acme.co</flux:menu.radio>
                        <flux:menu.radio value="shop.acme.co">shop.acme.co</flux:menu.radio>
                        <flux:menu.radio value="docs.acme.co">docs.acme.co</flux:menu.radio>
                    </flux:menu.radio.group>

                    <flux:menu.separator />

                    <flux:menu.item icon="plus">Add property</flux:menu.item>
                </flux:menu>
            </flux:dropdown>

            <flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" />
        </flux:sidebar.header>

        <flux:sidebar.search placeholder="Search..." />

        <flux:sidebar.nav>
            <flux:sidebar.item icon="squares-2x2" href="#" current>Analytics</flux:sidebar.item>
            <flux:sidebar.item icon="user-group" href="#">Visitors</flux:sidebar.item>
            <flux:sidebar.item icon="chart-bar" href="#">Traffic</flux:sidebar.item>
            <flux:sidebar.item icon="document" href="#">Pages</flux:sidebar.item>
            <flux:sidebar.item icon="calendar-days" href="#">Events</flux:sidebar.item>
            <flux:sidebar.item icon="clock" href="#">Sessions</flux:sidebar.item>
            <flux:sidebar.item icon="device-phone-mobile" href="#">Devices</flux:sidebar.item>
            <flux:sidebar.item icon="sparkles" href="#">Insights</flux:sidebar.item>
        </flux:sidebar.nav>

        <flux:sidebar.spacer />

        <flux:sidebar.nav>
            <flux:sidebar.item icon="user-group" href="#">Team</flux:sidebar.item>
            <flux:sidebar.item icon="information-circle" href="#">Help</flux:sidebar.item>
        </flux:sidebar.nav>
    </flux:sidebar>

    <flux:header container class="border-b border-zinc-200 bg-white lg:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
        <flux:sidebar.toggle class="me-4 lg:hidden" icon="bars-2" inset="left" />

        <flux:breadcrumbs class="max-sm:hidden">
            <flux:breadcrumbs.item href="#">Analytics</flux:breadcrumbs.item>
            <flux:breadcrumbs.item>Overview</flux:breadcrumbs.item>
        </flux:breadcrumbs>

        <flux:spacer />

        <flux:navbar class="me-4">
            <flux:navbar.item icon="cog-6-tooth" href="#" label="Settings" aria-label="Settings" />
            <flux:navbar.item icon="bell" href="#" label="Notifications" aria-label="Notifications" />
        </flux:navbar>

        <flux:dropdown position="top" align="start">
            <flux:profile avatar="https://fluxui.dev/img/demo/user.png" aria-label="Account menu" />

            <flux:menu>
                <flux:menu.radio.group>
                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>
                    <flux:menu.radio>Truly Delta</flux:menu.radio>
                </flux:menu.radio.group>

                <flux:menu.separator />

                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>
            </flux:menu>
        </flux:dropdown>
    </flux:header>

    <flux:main container>
        <flux:heading level="1" class="sr-only">Analytics overview</flux:heading>

        <div class="flex flex-wrap items-center gap-x-2 gap-y-4">
            <flux:select class="w-fit" variant="listbox" size="sm" prefix="Compare to">
                <flux:select.option selected>Previous period</flux:select.option>
                <flux:select.option>Previous month</flux:select.option>
                <flux:select.option>Same period last year</flux:select.option>
                <flux:select.option>Custom…</flux:select.option>
                <flux:select.option>No comparison</flux:select.option>
            </flux:select>

            <flux:spacer />

            <flux:dropdown class="sm:hidden">
                <flux:button size="sm" icon="ellipsis-horizontal" aria-label="More actions" />

                <flux:menu>
                    <flux:menu.item icon="arrow-up-tray">Export</flux:menu.item>
                </flux:menu>
            </flux:dropdown>

            <flux:date-picker class="min-w-56 max-sm:w-full" mode="range" size="sm" with-presets wire:model="dateRange" />

            <flux:button size="sm" icon="arrow-up-tray" class="max-sm:hidden">Export</flux:button>
        </div>

        <div class="h-4 sm:h-6"></div>

        <flux:carousel arrows:position="overlap" track:class="gap-5" fade>
            @foreach ($this->stats as $stat)
                <flux:carousel.slide class="min-w-56 grow basis-0">
                    <flux:card data-trend="{{ $stat['trend'] }}" variant="soft" class="relative min-w-0 py-4">
                        {{-- Leave room for the absolutely positioned action button. --}}
                        <div class="pr-6">
                            <flux:text class="truncate font-medium">{{ $stat['label'] }}</flux:text>
                        </div>

                        <div class="absolute top-0 right-0 pt-2 pr-2">
                            <flux:button variant="subtle" size="sm" icon="ellipsis-horizontal" aria-label="More options for {{ $stat['label'] }}" />
                        </div>

                        <flux:heading size="xl" class="mt-1">{{ $stat['value'] }}</flux:heading>

                        <div class="mt-1 flex flex-wrap items-center gap-x-1">
                            <flux:text inline class="flex items-center gap-1 font-medium in-data-[trend=down]:text-red-500 in-data-[trend=up]:text-green-600 dark:in-data-[trend=down]:text-red-500 dark:in-data-[trend=up]:text-green-400">
                                <flux:icon.arrow-trending-up variant="micro" class="hidden in-data-[trend=up]:block" />
                                <flux:icon.arrow-trending-down variant="micro" class="hidden in-data-[trend=down]:block" />
                                {{ $stat['change'] }}
                            </flux:text>

                            <flux:text inline class="whitespace-nowrap">vs last month</flux:text>
                        </div>
                    </flux:card>
                </flux:carousel.slide>
            @endforeach
        </flux:carousel>

        <div class="h-8 sm:h-12"></div>

        <flux:card wire:bind:data-chart-type="chartType" class="space-y-6">
            <div class="flex items-center justify-between gap-4">
                <div class="flex min-w-0 items-center gap-2">
                    <flux:heading size="lg">Visitors</flux:heading>
                    <flux:badge size="sm" color="zinc" rounded class="max-sm:hidden">Unique visitors</flux:badge>
                </div>

                <flux:radio.group wire:model="chartType" variant="segmented" size="sm">
                    <flux:radio value="bar" aria-label="Bar chart">
                        <slot name="icon">
                            <svg class="size-5 shrink-0 text-zinc-500 dark:text-zinc-400 [ui-radio[data-checked]_&]:text-zinc-800 dark:[ui-radio[data-checked]_&]:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" stroke-width="1.25" stroke="currentColor" aria-hidden="true" data-slot="icon">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.50009 2.5 2.49992 17.5H17.5001M15 14.1667V7.5M10.8333 14.1667V4.16667M6.66667 14.1667V11.6667" />
                            </svg>
                        </slot>
                    </flux:radio>

                    <flux:radio value="line" aria-label="Line chart">
                        <slot name="icon">
                            <svg class="size-5 shrink-0 text-zinc-500 dark:text-zinc-400 [ui-radio[data-checked]_&]:text-zinc-800 dark:[ui-radio[data-checked]_&]:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" stroke-width="1.25" stroke="currentColor" aria-hidden="true" data-slot="icon">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.5 2.5 2.49984 17.5H17.5M5.83333 13.3333 9.16667 7.5 12.5 10 16.6667 4.16667" />
                            </svg>
                        </slot>
                    </flux:radio>
                </flux:radio.group>
            </div>

            <flux:chart :value="$this->visitorData" class="h-48 sm:h-72">
                <flux:chart.svg>
                    <flux:chart.bar field="visitors" class="text-[#2574ff] in-data-[chart-type=line]:hidden" radius="4 0" />
                    <flux:chart.line field="visitors" class="text-[#2574ff] in-data-[chart-type=bar]:hidden" wire:cloak curve="none" />

                    <flux:chart.axis axis="x" field="date" tick-count="10">
                        <flux:chart.axis.tick />
                    </flux:chart.axis>

                    <flux:chart.axis axis="y">
                        <flux:chart.axis.grid />
                        <flux:chart.axis.tick />
                    </flux:chart.axis>

                    <flux:chart.cursor type="area" />
                </flux:chart.svg>

                <flux:chart.tooltip>
                    <flux:chart.tooltip.heading field="date" :format="['month' => 'short', 'day' => 'numeric']" />
                    <flux:chart.tooltip.value field="visitors" label="Visitors" :format="['useGrouping' => true]" />
                </flux:chart.tooltip>
            </flux:chart>
        </flux:card>

        <div class="h-8 sm:h-12"></div>

        <div class="grid gap-6 md:grid-cols-3">
            <flux:card variant="soft" class="flex min-w-0 flex-col">
                <div class="flex items-baseline justify-between gap-4">
                    <flux:heading>Top pages</flux:heading>
                    <flux:text class="font-medium">Views</flux:text>
                </div>

                <div class="mt-6 space-y-4">
                    @foreach ($this->topPages as $page)
                        <div class="space-y-3">
                            <div class="flex items-center justify-between gap-4">
                                <flux:text variant="strong" class="truncate font-medium">{{ $page['path'] }}</flux:text>
                                <flux:text variant="strong" class="shrink-0 font-medium">{{ Number::abbreviate($page['views'], precision: 1) }}</flux:text>
                            </div>

                            <flux:progress
                                :value="$page['views']"
                                :max="$this->topPageScale"
                                aria-label="{{ Number::abbreviate($page['views'], precision: 1) }} views for {{ $page['path'] }}"
                                class="h-1 bg-transparent"
                                color="blue"
                            />
                        </div>
                    @endforeach
                </div>

                <div class="mt-auto pt-6">
                    <flux:button size="sm" icon:trailing="arrow-right" icon:variant="micro" href="#" class="w-full">View all pages</flux:button>
                </div>
            </flux:card>

            <flux:card variant="soft" class="flex min-w-0 flex-col">
                <div class="flex items-baseline justify-between gap-4">
                    <flux:heading>Countries</flux:heading>
                    <flux:text class="font-medium">Visitors</flux:text>
                </div>

                <div class="mt-6 space-y-8">
                    @foreach ($this->countries as $country)
                        <div class="flex items-center gap-3">
                            <flux:flag :country="$country['code']" size="md" class="w-7" />

                            <flux:text variant="strong" class="min-w-0 flex-1 truncate">{{ $country['name'] }}</flux:text>
                            <flux:text variant="strong" class="shrink-0 font-medium">{{ Number::abbreviate($country['visitors'], precision: 1) }}</flux:text>
                        </div>
                    @endforeach
                </div>

                <div class="mt-auto pt-6">
                    <flux:button size="sm" icon:trailing="arrow-right" icon:variant="micro" href="#" class="w-full">View all countries</flux:button>
                </div>
            </flux:card>

            <flux:card variant="soft" class="flex min-w-0 flex-col">
                <div class="flex items-baseline justify-between gap-4">
                    <flux:heading>Sources</flux:heading>
                    <flux:text class="font-medium">Views</flux:text>
                </div>

                <div class="mt-6 space-y-4">
                    @foreach ($this->sources as $source)
                        <div class="space-y-3">
                            <div class="flex items-center justify-between gap-4">
                                <flux:text variant="strong" class="truncate font-medium">{{ $source['name'] }}</flux:text>
                                <flux:text variant="strong" class="shrink-0 font-medium">{{ $source['percentage'] }}%</flux:text>
                            </div>

                            <flux:progress
                                :value="$source['percentage']"
                                aria-label="{{ $source['name'] }}: {{ $source['percentage'] }}%"
                                class="h-1"
                                color="blue"
                            />
                        </div>
                    @endforeach
                </div>

                <div class="mt-auto pt-6">
                    <flux:button size="sm" icon:trailing="arrow-right" icon:variant="micro" href="#" class="w-full">View all sources</flux:button>
                </div>
            </flux:card>
        </div>
    </flux:main>
</div>

```

