Add bandwidth quota display and usage calculation to platform stats

Author: alexjustesen

app/Livewire/PlatformStats.php

@@ -4,6 +4,7 @@
 
 use App\Enums\ResultStatus;
 use App\Models\Result;
+use App\Services\DataUsageCalculator;
 use Carbon\Carbon;
 use Cron\CronExpression;
 use Illuminate\Support\Number;
@@ -30,11 +31,19 @@ public function platformStats(): array
         $totalResults = Result::count();
         $completedResults = Result::where('status', ResultStatus::Completed)->count();
         $failedResults = Result::where('status', ResultStatus::Failed)->count();
+        $bandwidthLimit = null;
+        $bandwidthUsed = DataUsageCalculator::calculate(now()->startOfMonth(), now());
 
         return [
             'total' => Number::format($totalResults),
             'completed' => Number::format($completedResults),
             'failed' => Number::format($failedResults),
+            'bandwidth_limit' => $bandwidthLimit,
+            'bandwidth_used' => [
+                'download_bytes' => $bandwidthUsed['download_bytes'],
+                'upload_bytes' => $bandwidthUsed['upload_bytes'],
+                'total_bytes' => $bandwidthUsed['total_bytes'],
+            ],
         ];
     }
 

resources/views/livewire/platform-stats.blade.php

@@ -5,24 +5,6 @@
             {{ __('general.statistics') }}
         </h2>
 
-        {{-- <x-filament::section class="col-span-full">
-            <div class="flex items-center justify-between">
-                <p class="text-sm/6 font-medium text-zinc-500">Quota Usage</p>
-                <a href="#" class="text-sm font-medium text-zinc-600 hover:text-amber-500 underline">Edit</a>
-            </div>
-
-            <div class="mt-2">
-                <div class="flex justify-between mb-1">
-                    <span class="text-sm font-medium text-body">Bandwidth</span>
-                    <span class="text-sm font-medium text-body">450MB of 1 GB</span>
-                </div>
-
-                <div class="w-full bg-zinc-200 rounded-full h-2">
-                    <div class="bg-amber-500 h-2 rounded-full" style="width: 45%"></div>
-                </div>
-            </div>
-        </x-filament::section> --}}
-
         @filled($this->nextSpeedtest)
             <x-filament::section class="col-span-1">
                 <x-slot name="heading">
@@ -64,5 +46,46 @@
 
             <p class="text-xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">{{ $this->platformStats['failed'] }}</p>
         </x-filament::section>
+
+        <x-filament::section class="col-span-full" icon="tabler-chart-pie" icon-size="md">
+            <x-slot name="heading">
+                Bandwidth Quota
+            </x-slot>
+
+            <x-slot name="description">
+                Resets on {{ today()->addMonth()->startOfMonth()->format('M. jS, Y') }}
+            </x-slot>
+
+            @auth
+                <x-slot name="afterHeader">
+                    <x-filament::button
+                        href="#"
+                        tag="a"
+                        size="sm"
+                    >
+                        {{ __('general.edit') }}
+                    </x-filament::button>
+                </x-slot>
+            @endauth
+
+            <div>
+                <div class="flex justify-between mb-1">
+                    <span class="text-sm font-medium text-body">Usage</span>
+                    <span class="text-sm font-medium text-body">{{ Number::fileSize($this->platformStats['bandwidth_used']['total_bytes'] ?? 0, 2) }} of {{ $this->platformStats['bandwidth_limit'] ?? 'Unlimited' }}</span>
+                </div>
+
+                @php
+                    $used = 0;
+
+                    if (isset($this->platformStats['bandwidth_used']['total_bytes']) && isset($this->platformStats['bandwidth_limit'])) {
+                        $used = round($this->platformStats['bandwidth_used']['total_bytes'] / (\App\Helpers\FileSize::toBytes($this->platformStats['bandwidth_limit']) ?: 1) * 100);
+                    }
+                @endphp
+
+                <div class="w-full bg-zinc-200 rounded-full h-2">
+                    <div class="bg-amber-500 h-2 rounded-full" style="width: {{ min($used, 100) }}%" title="{{ number_format($used) }}%"></div>
+                </div>
+            </div>
+        </x-filament::section>
     </div>
 </div>