Added tabs to home page for stats and avg cards

resources/views/home.blade.php

@@ -1,8 +1,33 @@
 @section("title", "Home")
 <x-app-layout>
-    <div class="row mt-4">
+    <div class="row mt-3">
+        <ul class="nav nav-tabs mt-3" id="myTab" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="tally-tab" data-bs-toggle="tab" data-bs-target="#tally"
+                        type="button"
+                        role="tab" aria-controls="tally" aria-selected="true">Tally
+                </button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="costings-tab"
+                        data-bs-toggle="tab" data-bs-target="#costings" type="button" role="tab"
+                        aria-controls="costings" aria-selected="false">Costings
+                </button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="averages-tab"
+                        data-bs-toggle="tab" data-bs-target="#averages" type="button" role="tab"
+                        aria-controls="averages" aria-selected="false">Averages
+                </button>
+            </li>
+        </ul>
+
+            <div class="tab-content" id="myTabContent">
+                <div class="tab-pane fade show active" id="tally" role="tabpanel" aria-labelledby="tally-tab">
+                    <div class="row mt-3">
                         <div class="col-6 col-lg-2 mb-3">
-            <x-service-tally-card tally="{{ $information['servers'] }}" route="{{route('servers.index')}}"
+                            <x-service-tally-card tally="{{ $information['servers'] }}"
+                                                  route="{{route('servers.index')}}"
                                                   service="Servers"></x-service-tally-card>
                         </div>
                         <div class="col-6 col-lg-2 mb-3">
@@ -10,11 +35,13 @@
                                                   service="Shared"></x-service-tally-card>
                         </div>
                         <div class="col-6 col-lg-2 mb-3">
-            <x-service-tally-card tally="{{ $information['reseller'] }}" route="{{route('reseller.index')}}"
+                            <x-service-tally-card tally="{{ $information['reseller'] }}"
+                                                  route="{{route('reseller.index')}}"
                                                   service="Reseller"></x-service-tally-card>
                         </div>
                         <div class="col-6 col-lg-2 mb-3">
-            <x-service-tally-card tally="{{ $information['domains'] }}" route="{{route('domains.index')}}"
+                            <x-service-tally-card tally="{{ $information['domains'] }}"
+                                                  route="{{route('domains.index')}}"
                                                   service="Domains"></x-service-tally-card>
                         </div>
                         <div class="col-6 col-lg-2 mb-3">
@@ -26,7 +53,9 @@
                                                   service="DNS"></x-service-tally-card>
                         </div>
                     </div>
+                </div>
 
+                <div class="tab-pane fade" id="costings" role="tabpanel" aria-labelledby="costings-tab">
                     <div class="row mt-3">
                         <div class="col-12 col-lg-2 mb-3">
                             <x-info-card value="{{$information['total_cost_weekly']}}" title="Weekly cost"
@@ -44,25 +73,25 @@
                             <x-info-card value="{{$information['total_cost_2_yearly']}}" title="2 yearly cost"
                                          append="{{$information['currency']}}"></x-info-card>
                         </div>
-        <div class="col-12 col-lg-2 mb-3">
-            <x-info-card value="{{$information['total_services']}}" title="Active services"></x-info-card>
-        </div>
-        <div class="col-12 col-lg-2 mb-3">
-            <x-info-card value="{{$information['total_inactive']}}" title="Inactive services"></x-info-card>
                     </div>
                 </div>
 
+                <div class="tab-pane fade" id="averages" role="tabpanel" aria-labelledby="averages-tab">
                     <div class="row mt-3">
                         <div class="col-6 col-lg-2 mb-3">
-            <x-info-card value="{{$information['servers_summary']['cpu_sum']}}" title="CPU"></x-info-card>
+                            <x-info-card value="{{$information['servers_summary']['cpu_sum']}}"
+                                         title="CPU"></x-info-card>
                         </div>
                         <div class="col-6 col-lg-2 mb-3">
-            <x-info-card value="{{number_format($information['servers_summary']['ram_mb_sum'] / 1024, 2)}}" title="RAM"
+                            <x-info-card
+                                value="{{number_format($information['servers_summary']['ram_mb_sum'] / 1024, 2)}}"
+                                title="RAM"
                                 append="GB"></x-info-card>
                         </div>
                         <div class="col-6 col-lg-2 mb-3">
                             @if($information['servers_summary']['disk_gb_sum'] >= 1000)
-                <x-info-card value="{{number_format($information['servers_summary']['disk_gb_sum'] / 1024,2)}}"
+                                <x-info-card
+                                    value="{{number_format($information['servers_summary']['disk_gb_sum'] / 1024,2)}}"
                                     title="DISK" append="TB"></x-info-card>
                             @else
                                 <x-info-card value="{{$information['servers_summary']['disk_gb_sum']}}" title="DISK"
@@ -70,16 +99,25 @@
                             @endif
                         </div>
                         <div class="col-6 col-lg-2 mb-3">
-            <x-info-card value="{{number_format($information['servers_summary']['bandwidth_sum'] / 1024, 2)}}"
+                            <x-info-card
+                                value="{{number_format($information['servers_summary']['bandwidth_sum'] / 1024, 2)}}"
                                 title="Bandwidth" append="TB"></x-info-card>
                         </div>
                         <div class="col-6 col-lg-2 mb-3">
-            <x-info-card value="{{$information['servers_summary']['locations_sum']}}" title="Locations"></x-info-card>
+                            <x-info-card value="{{$information['servers_summary']['locations_sum']}}"
+                                         title="Locations"></x-info-card>
                         </div>
                         <div class="col-6 col-lg-2 mb-3">
-            <x-info-card value="{{$information['servers_summary']['providers_sum']}}" title="Providers"></x-info-card>
+                            <x-info-card value="{{$information['servers_summary']['providers_sum']}}"
+                                         title="Providers"></x-info-card>
+                        </div>
+                    </div>
+                </div>
             </div>
 
+    </div>
+
+    <div class="row mt-3">
         @if(Session::get('due_soon_amount') > 0)
             <h3 class="my-3">Due soon</h3>
             @if(!empty($information['due_soon']))