feat: add monthly traffic calculation to Proxmox server component and update view to display traffic usage for improved monitoring

extensions/Servers/Proxmox/Livewire/Server.php

@@ -3,6 +3,7 @@
 namespace Paymenter\Extensions\Servers\Proxmox\Livewire;
 
 use Paymenter\Extensions\Servers\Proxmox\Models\Server as ServerModel;
+use Carbon\Carbon;
 
 class Server extends Component
 {
@@ -11,6 +12,34 @@ class Server extends Component
         parent::mount($server);
     }
 
+    public function getMonthlyTrafficProperty()
+    {
+        $startOfMonth = Carbon::now()->startOfMonth();
+        
+        // Get the earliest and latest statistics for this month
+        $firstStat = $this->server->statistics()
+            ->where('DateTime', '>=', $startOfMonth)
+            ->orderBy('DateTime', 'asc')
+            ->first();
+            
+        $latestStat = $this->server->statistics()
+            ->where('DateTime', '>=', $startOfMonth)
+            ->orderBy('DateTime', 'desc')
+            ->first();
+        
+        if (!$firstStat || !$latestStat) {
+            return 0;
+        }
+        
+        // Calculate total traffic (in + out) for the month
+        $netinDiff = max(0, $latestStat->netin - $firstStat->netin);
+        $netoutDiff = max(0, $latestStat->netout - $firstStat->netout);
+        $totalBytes = $netinDiff + $netoutDiff;
+        
+        // Convert to GiB
+        return round($totalBytes / (1024 * 1024 * 1024), 2);
+    }
+
     public function render()
     {
         return view('proxmox::server');

extensions/Servers/Proxmox/views/server.blade.php

@@ -9,18 +9,28 @@
                     </div>
                     <span class="font-medium">{{ $status->name }}</span>
                 </div>
-                <div
-                    class="size-5 rounded-md p-0.5
-                        @if($status->status == 'running') text-success bg-success/20
-                        @elseif($status->status == 'stopped') text-inactive bg-inactive/20
-                        @else text-warning bg-warning/20 @endif">
-                    @if($status->status == 'running')
-                        <x-ri-checkbox-circle-fill />
-                    @elseif($status->status == 'stopped')
-                        <x-ri-forbid-fill />
-                    @else
-                        <x-ri-error-warning-fill />
-                    @endif
+                <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg
+                    @if($status->status == 'running') text-success bg-success/20
+                    @elseif($status->status == 'stopped') text-inactive bg-inactive/20
+                    @else text-warning bg-warning/20 @endif">
+                    <div class="size-5">
+                        @if($status->status == 'running')
+                            <x-ri-checkbox-circle-fill />
+                        @elseif($status->status == 'stopped')
+                            <x-ri-forbid-fill />
+                        @else
+                            <x-ri-error-warning-fill />
+                        @endif
+                    </div>
+                    <span class="text-sm font-medium">
+                        @if($status->status == 'running')
+                            Running
+                        @elseif($status->status == 'stopped')
+                            Stopped
+                        @else
+                            {{ ucfirst($status->status) }}
+                        @endif
+                    </span>
                 </div>
             </div>
 
@@ -109,7 +119,8 @@
                             <x-ri-speed-line class="size-4 text-base/50" />
                             <span class="text-xs text-base/50">Bandwidth</span>
                         </div>
-                        <span class="text-base text-xs leading-relaxed">
+                        <span class="text-base font-medium">{{ $this->monthlyTraffic }} GiB this month</span>
+                        <span class="text-base text-xs leading-relaxed text-base/60 mt-1">
                             Connection reduced to 1 MiB/s if account's data usage exceeds network's 95% threshold.
                         </span>
                     </div>