From 047260b953cf23a1b7b308866e0de6bd7db47dcf Mon Sep 17 00:00:00 2001
From: cp6 <cp6@users.noreply.github.com>
Date: Tue, 19 Sep 2023 22:47:24 +1000
Subject: [PATCH] Added tabs to home page for stats and avg cards

---
 resources/views/home.blade.php | 192 ++++++++++++++++++++-------------
 1 file changed, 115 insertions(+), 77 deletions(-)

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index d6590b3..fc57fd7 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -1,85 +1,123 @@
 @section("title", "Home")
 <x-app-layout>
-    <div class="row mt-4">
-        <div class="col-6 col-lg-2 mb-3">
-            <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">
-            <x-service-tally-card tally="{{ $information['shared'] }}" route="{{route('shared.index')}}"
-                                  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')}}"
-                                  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')}}"
-                                  service="Domains"></x-service-tally-card>
-        </div>
-        <div class="col-6 col-lg-2 mb-3">
-            <x-service-tally-card tally="{{ $information['misc'] }}" route="{{route('misc.index')}}"
-                                  service="Misc"></x-service-tally-card>
-        </div>
-        <div class="col-6 col-lg-2 mb-3">
-            <x-service-tally-card tally="{{ $information['dns'] }}" route="{{route('dns.index')}}"
-                                  service="DNS"></x-service-tally-card>
-        </div>
+    <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')}}"
+                                                  service="Servers"></x-service-tally-card>
+                        </div>
+                        <div class="col-6 col-lg-2 mb-3">
+                            <x-service-tally-card tally="{{ $information['shared'] }}" route="{{route('shared.index')}}"
+                                                  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')}}"
+                                                  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')}}"
+                                                  service="Domains"></x-service-tally-card>
+                        </div>
+                        <div class="col-6 col-lg-2 mb-3">
+                            <x-service-tally-card tally="{{ $information['misc'] }}" route="{{route('misc.index')}}"
+                                                  service="Misc"></x-service-tally-card>
+                        </div>
+                        <div class="col-6 col-lg-2 mb-3">
+                            <x-service-tally-card tally="{{ $information['dns'] }}" route="{{route('dns.index')}}"
+                                                  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"
+                                         append="{{$information['currency']}}"></x-info-card>
+                        </div>
+                        <div class="col-12 col-lg-2 mb-3">
+                            <x-info-card value="{{$information['total_cost_monthly']}}" title="Monthly cost"
+                                         append="{{$information['currency']}}"></x-info-card>
+                        </div>
+                        <div class="col-12 col-lg-2 mb-3">
+                            <x-info-card value="{{$information['total_cost_yearly']}}" title="Yearly cost"
+                                         append="{{$information['currency']}}"></x-info-card>
+                        </div>
+                        <div class="col-12 col-lg-2 mb-3">
+                            <x-info-card value="{{$information['total_cost_2_yearly']}}" title="2 yearly cost"
+                                         append="{{$information['currency']}}"></x-info-card>
+                        </div>
+                    </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>
+                        </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"
+                                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)}}"
+                                    title="DISK" append="TB"></x-info-card>
+                            @else
+                                <x-info-card value="{{$information['servers_summary']['disk_gb_sum']}}" title="DISK"
+                                             append="GB"></x-info-card>
+                            @endif
+                        </div>
+                        <div class="col-6 col-lg-2 mb-3">
+                            <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>
+                        </div>
+                        <div class="col-6 col-lg-2 mb-3">
+                            <x-info-card value="{{$information['servers_summary']['providers_sum']}}"
+                                         title="Providers"></x-info-card>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
     </div>
 
     <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"
-                         append="{{$information['currency']}}"></x-info-card>
-        </div>
-        <div class="col-12 col-lg-2 mb-3">
-            <x-info-card value="{{$information['total_cost_monthly']}}" title="Monthly cost"
-                         append="{{$information['currency']}}"></x-info-card>
-        </div>
-        <div class="col-12 col-lg-2 mb-3">
-            <x-info-card value="{{$information['total_cost_yearly']}}" title="Yearly cost"
-                         append="{{$information['currency']}}"></x-info-card>
-        </div>
-        <div class="col-12 col-lg-2 mb-3">
-            <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="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>
-        </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"
-                         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)}}"
-                             title="DISK" append="TB"></x-info-card>
-            @else
-                <x-info-card value="{{$information['servers_summary']['disk_gb_sum']}}" title="DISK"
-                             append="GB"></x-info-card>
-            @endif
-        </div>
-        <div class="col-6 col-lg-2 mb-3">
-            <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>
-        </div>
-        <div class="col-6 col-lg-2 mb-3">
-            <x-info-card value="{{$information['servers_summary']['providers_sum']}}" title="Providers"></x-info-card>
-        </div>
-
         @if(Session::get('due_soon_amount') > 0)
             <h3 class="my-3">Due soon</h3>
             @if(!empty($information['due_soon']))