New metrics dashboard

app/Models/Result.php

@@ -48,6 +48,14 @@ public function prunable(): Builder
         return static::where('created_at', '<=', now()->subDays(config('speedtest.prune_results_older_than')));
     }
 
+    /**
+     * Scope a query to only include completed results.
+     */
+    public function scopeCompleted(Builder $query): Builder
+    {
+        return $query->where('status', ResultStatus::Completed);
+    }
+
     /**
      * Get the user who dispatched this speedtest.
      */

composer.json

@@ -25,6 +25,7 @@
         "laravel/framework": "^12.41.1",
         "laravel/prompts": "^0.3.8",
         "laravel/sanctum": "^4.2.1",
+        "livewire/flux": "^2.10.1",
         "livewire/livewire": "^3.7.1",
         "lorisleiva/laravel-actions": "^2.9.1",
         "maennchen/zipstream-php": "^2.4",

lang/en/general.php

@@ -52,6 +52,9 @@
     'links' => 'Links',
     'donate' => 'Donate',
     'donations' => 'Donations',
+    'light' => 'Light',
+    'dark' => 'Dark',
+    'system' => 'System',
 
     // Roles
     'admin' => 'Admin',

package.json

@@ -12,5 +12,9 @@
         "laravel-vite-plugin": "^1.0.0",
         "tailwindcss": "^4.1.17",
         "vite": "^6.4.1"
+    },
+    "dependencies": {
+        "@alpinejs/sort": "^3.15.3",
+        "chart.js": "^4.5.1"
     }
 }

resources/css/app.css

@@ -1,31 +1,33 @@
 @import 'tailwindcss';
-@import './custom.css';
-
-/* Safelist max-width utilities to always generate them */
-@source inline("max-w-{xs,sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,full,min,max,fit,prose,screen-sm,screen-md,screen-lg,screen-xl,screen-2xl}");
-
-/* Required by all components */
-@import '../../vendor/filament/support/resources/css/index.css';
-
-/* Required by actions and tables */
-@import '../../vendor/filament/actions/resources/css/index.css';
-
-/* Required by actions, forms and tables */
-@import '../../vendor/filament/forms/resources/css/index.css';
-
-/* Required by actions and infolists */
-@import '../../vendor/filament/infolists/resources/css/index.css';
-
-/* Required by notifications */
-/* @import '../../vendor/filament/notifications/resources/css/index.css'; */
-
-/* Required by actions, infolists, forms, schemas and tables */
-@import '../../vendor/filament/schemas/resources/css/index.css';
-
-/* Required by tables */
-/* @import '../../vendor/filament/tables/resources/css/index.css'; */
-
-/* Required by widgets */
-@import '../../vendor/filament/widgets/resources/css/index.css';
-
-@variant dark (&:where(.dark, .dark *));
+@import '../../vendor/livewire/flux/dist/flux.css';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Re-assign Flux's gray of choice... */
+@theme {
+    --color-zinc-50: var(--color-neutral-50);
+    --color-zinc-100: var(--color-neutral-100);
+    --color-zinc-200: var(--color-neutral-200);
+    --color-zinc-300: var(--color-neutral-300);
+    --color-zinc-400: var(--color-neutral-400);
+    --color-zinc-500: var(--color-neutral-500);
+    --color-zinc-600: var(--color-neutral-600);
+    --color-zinc-700: var(--color-neutral-700);
+    --color-zinc-800: var(--color-neutral-800);
+    --color-zinc-900: var(--color-neutral-900);
+    --color-zinc-950: var(--color-neutral-950);
+}
+
+@theme {
+    --color-accent: var(--color-amber-400);
+    --color-accent-content: var(--color-amber-600);
+    --color-accent-foreground: var(--color-amber-950);
+}
+
+@layer theme {
+    .dark {
+        --color-accent: var(--color-amber-400);
+        --color-accent-content: var(--color-amber-400);
+        --color-accent-foreground: var(--color-amber-950);
+    }
+}

resources/css/dashboard.css

@@ -0,0 +1,31 @@
+@import 'tailwindcss';
+@import './custom.css';
+
+/* Safelist max-width utilities to always generate them */
+@source inline("max-w-{xs,sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,full,min,max,fit,prose,screen-sm,screen-md,screen-lg,screen-xl,screen-2xl}");
+
+/* Required by all components */
+@import '../../vendor/filament/support/resources/css/index.css';
+
+/* Required by actions and tables */
+@import '../../vendor/filament/actions/resources/css/index.css';
+
+/* Required by actions, forms and tables */
+@import '../../vendor/filament/forms/resources/css/index.css';
+
+/* Required by actions and infolists */
+@import '../../vendor/filament/infolists/resources/css/index.css';
+
+/* Required by notifications */
+/* @import '../../vendor/filament/notifications/resources/css/index.css'; */
+
+/* Required by actions, infolists, forms, schemas and tables */
+@import '../../vendor/filament/schemas/resources/css/index.css';
+
+/* Required by tables */
+/* @import '../../vendor/filament/tables/resources/css/index.css'; */
+
+/* Required by widgets */
+@import '../../vendor/filament/widgets/resources/css/index.css';
+
+@variant dark (&:where(.dark, .dark *));

resources/js/app.js

@@ -0,0 +1,39 @@
+import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
+import sort from '@alpinejs/sort';
+
+import {
+    Chart,
+    LineController,
+    LineElement,
+    PointElement,
+    LinearScale,
+    CategoryScale,
+    BarController,
+    BarElement,
+    ScatterController,
+    Tooltip,
+    Legend,
+    Filler
+} from 'chart.js';
+
+Chart.register(
+    LineController,
+    LineElement,
+    PointElement,
+    LinearScale,
+    CategoryScale,
+    BarController,
+    BarElement,
+    ScatterController,
+    Tooltip,
+    Legend,
+    Filler
+);
+
+window.Chart = Chart;
+
+document.addEventListener('livewire:init', () => {
+    window.Alpine.plugin(sort);
+});
+
+Livewire.start();

resources/views/components/dashboard/stats-card.blade.php

@@ -0,0 +1,7 @@
+<div {{ $attributes->merge(['class' => 'px-6 py-3']) }}>
+    @isset($heading)
+        <flux:heading class="flex items-center">{{ $heading }}</flux:heading>
+    @endisset
+
+    {{ $slot }}
+</div>

resources/views/components/layouts/app.blade.php

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>{{ $title ?? 'Page Title' }} - {{ config('app.name') }}</title>
+
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
+
+        <script>
+            const theme = localStorage.getItem('theme') ?? 'system'
+            const effectiveTheme = theme === 'system'
+                ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+                : theme
+
+            if (effectiveTheme === 'dark') {
+                document.documentElement.classList.add('dark')
+            }
+        </script>
+    </head>
+    <body class="min-h-screen bg-white dark:bg-neutral-950 antialiased">
+        @include('partials.header')
+
+        <flux:main container>
+            {{ $slot }}
+        </flux:main>
+
+        @fluxScripts
+        @livewireScriptConfig
+    </body>
+</html>