From f198ac1be160b0739bd3c924533d8609b036ab7d Mon Sep 17 00:00:00 2001
From: Julian Prieber <julian.prieber@gmail.com>
Date: Tue, 17 Dec 2024 20:35:35 +0100
Subject: [PATCH] Add placeholder animation

---
 resources/views/panel/index.blade.php | 265 +++++++++++++++++++++++---
 1 file changed, 240 insertions(+), 25 deletions(-)

diff --git a/resources/views/panel/index.blade.php b/resources/views/panel/index.blade.php
index 668f7e3..90cb2b5 100755
--- a/resources/views/panel/index.blade.php
+++ b/resources/views/panel/index.blade.php
@@ -2,7 +2,31 @@
 
 
 @section('content')
-    <div id="site-stats" class="conatiner-fluid content-inner mt-n5 py-0">
+    <div id="site-stats" class="conatiner-fluid content-inner mt-n5 py-0" style="">
+        <style>
+            :root {
+                --spinnerColor: #8a92a6;
+            }
+
+            .placeholder {
+                height: 1.2rem;
+                display: inline-block;
+                background-color: #8a92a6;
+                background: linear-gradient(90deg, var(--spinnerColor) 25%, #b8bcc5 50%, var(--spinnerColor) 75%);
+                background-size: 200% 100%;
+                animation: shimmer 2s infinite linear;
+            }
+
+            @keyframes shimmer {
+                0% {
+                    background-position: -200% 0;
+                }
+
+                100% {
+                    background-position: 200% 0;
+                }
+            }
+        </style>
         <div class="row">
 
             <div class="col-lg-12">
@@ -14,8 +38,45 @@
                                 <h3 class="mb-4"><i class="bi bi-menu-up"></i> {{ __('messages.Dashboard') }}</h3>
 
                                 <section class="mb-3 text-center p-4 w-full">
-                                    <div class="spinner-border text-primary" role="status">
-                                        <span class="visually-hidden">Loading...</span>
+                                    <div class=" d-flex">
+
+                                        <div class="p-2 h6 d-flex align-items-center"><i class="bi bi-link"></i>
+                                            {{ __('messages.Total Links:') }}
+                                            <span style="width:3rem" class="placeholder ms-1"></span>
+                                        </div>
+
+                                        <div class="p-2 h6 d-flex align-items-center"><i class="bi bi-link"></i>
+                                            {{ __('messages.Link Clicks:') }}
+                                            <span style="width:3rem" class="placeholder ms-1"></span>
+                                        </div>
+                                    </div>
+                                    <div class="text-center w-100">
+                                        <a href="{{ url('/studio/links') }}">{{ __('messages.View/Edit Links') }}</a>
+
+                                    </div>
+                                    <div class="w-100 text-left">
+                                        <h6><i class="bi bi-sort-up"></i> {{ __('messages.Top Links:') }}</h6>
+
+
+
+                                        <div class="bd-example">
+                                            <ol class="list-group list-group-numbered" style="text-align: left;">
+
+                                                @for ($i = 0; $i < 5; $i++)
+                                                    <li
+                                                        class="list-group-item d-flex justify-content-between align-items-start">
+                                                        <div class="ms-2 me-auto text-truncate">
+                                                            <div class="d-flex align-items-center"><span style="width:9rem"
+                                                                    class="placeholder ms-1"></span></div>
+                                                            <span style="width:20rem" class="placeholder ms-1 mt-1"></span>
+                                                        </div>
+                                                        <span style="height:2rem;width:5rem"
+                                                            class="placeholder rounded-pill p-2"></span>
+                                                    </li>
+                                                @endfor
+                                            </ol>
+                                        </div>
+
                                     </div>
                                 </section>
 
@@ -25,26 +86,180 @@
                 </div>
             </div>
 
-            @push('sidebar-scripts')
-                <script>
-                    $(document).ready(function() {
-                        async function fetchAndReplaceContent() {
-                            try {
-                                const response = await $.ajax({
-                                    url: "{{ url('dashboard/site-stats') }}",
-                                    method: 'GET',
-                                    dataType: 'html'
-                                });
-                                $('#site-stats').fadeOut(0, function() {
-                                    $('#site-stats').html(response).fadeIn(400);
-                                });
-                            } catch (error) {
-                                console.error('Error fetching content:', error);
-                            }
-                        }
+            @if (auth()->user()->role == 'admin' && !config('linkstack.single_user_mode'))
+                <div class="col-lg-12">
+                    <div class="card   rounded">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-sm-12">
 
-                        fetchAndReplaceContent();
-                    });
-                </script>
-            @endpush
-        @endsection
+                                    <section class="mb-3 text-gray-800 text-center p-4 w-full">
+                                        <div class='font-weight-bold text-left h3'>{{ __('messages.Site statistics:') }}
+                                        </div>
+                                        <br>
+                                        <div class="d-flex flex-wrap justify-content-around">
+
+                                            <div class="p-2">
+                                                <h3 class="text-primary d-flex align-items-center">
+                                                    <i class="bi bi-share-fill"></i>
+                                                    <div class="spinner-border text-primary ms-2" role="status">
+                                                        <span class="visually-hidden">Loading...</span>
+                                                    </div>
+                                                </h3>
+                                                <span class="text-muted">{{ __('messages.Total links') }}</span>
+                                            </div>
+
+                                            <div class="p-2">
+                                                <h3 class="text-primary d-flex align-items-center">
+                                                    <i class="bi bi-share-fill"></i>
+                                                    <div class="spinner-border text-primary ms-2" role="status">
+                                                        <span class="visually-hidden">Loading...</span>
+                                                    </div>
+                                                </h3>
+                                                <span class="text-muted">{{ __('messages.Total clicks') }}</span>
+                                            </div>
+
+                                            <div class="p-2">
+                                                <h3 class="text-primary d-flex align-items-center">
+                                                    <i class="bi bi-share-fill"></i>
+                                                    <div class="spinner-border text-primary ms-2" role="status">
+                                                        <span class="visually-hidden">Loading...</span>
+                                                    </div>
+                                                </h3>
+                                                <span class="text-muted">{{ __('messages.Total users') }}</span>
+                                            </div>
+
+                                        </div>
+                                    </section>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-12">
+                    <div class="card   rounded">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-sm-12">
+
+                                    <section class="mb-3 text-gray-800 text-center p-4 w-full">
+                                        <div class='font-weight-bold text-left h3'>{{ __('messages.Registrations:') }}
+                                        </div>
+                                        <br>
+                                        <div class="d-flex flex-wrap justify-content-around">
+
+                                            <div class="p-2">
+                                                <h3 class="text-primary d-flex align-items-center">
+                                                    <i class="bi bi-share-fill"></i>
+                                                    <div class="spinner-border text-primary ms-2" role="status">
+                                                        <span class="visually-hidden">Loading...</span>
+                                                    </div>
+                                                </h3>
+                                                <span class="text-muted">{{ __('messages.Last 30 days') }}</span>
+                                            </div>
+
+                                            <div class="p-2">
+                                                <h3 class="text-primary d-flex align-items-center">
+                                                    <i class="bi bi-share-fill"></i>
+                                                    <div class="spinner-border text-primary ms-2" role="status">
+                                                        <span class="visually-hidden">Loading...</span>
+                                                    </div>
+                                                </h3>
+                                                <span class="text-muted">{{ __('messages.Last 7 days') }}</span>
+                                            </div>
+
+                                            <div class="p-2">
+                                                <h3 class="text-primary d-flex align-items-center">
+                                                    <i class="bi bi-share-fill"></i>
+                                                    <div class="spinner-border text-primary ms-2" role="status">
+                                                        <span class="visually-hidden">Loading...</span>
+                                                    </div>
+                                                </h3>
+                                                <span class="text-muted">{{ __('messages.Last 24 hours') }}</span>
+                                            </div>
+
+                                        </div>
+                                    </section>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-12">
+                    <div class="card   rounded">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-sm-12">
+
+                                    <section class="mb-3 text-gray-800 text-center p-4 w-full">
+                                        <div class='font-weight-bold text-left h3'>{{ __('messages.Active users:') }}</div>
+                                        <br>
+                                        <div class="d-flex flex-wrap justify-content-around">
+
+                                            <div class="p-2">
+                                                <h3 class="text-primary d-flex align-items-center">
+                                                    <i class="bi bi-share-fill"></i>
+                                                    <div class="spinner-border text-primary ms-2" role="status">
+                                                        <span class="visually-hidden">Loading...</span>
+                                                    </div>
+                                                </h3>
+                                                <span class="text-muted">{{ __('messages.Last 30 days') }}</span>
+                                            </div>
+
+                                            <div class="p-2">
+                                                <h3 class="text-primary d-flex align-items-center">
+                                                    <i class="bi bi-share-fill"></i>
+                                                    <div class="spinner-border text-primary ms-2" role="status">
+                                                        <span class="visually-hidden">Loading...</span>
+                                                    </div>
+                                                </h3>
+                                                <span class="text-muted">{{ __('messages.Last 7 days') }}</span>
+                                            </div>
+
+                                            <div class="p-2">
+                                                <h3 class="text-primary d-flex align-items-center">
+                                                    <i class="bi bi-share-fill"></i>
+                                                    <div class="spinner-border text-primary ms-2" role="status">
+                                                        <span class="visually-hidden">Loading...</span>
+                                                    </div>
+                                                </h3>
+                                                <span class="text-muted">{{ __('messages.Last 24 hours') }}</span>
+                                            </div>
+
+                                        </div>
+                                    </section>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            @endif
+
+        </div>
+    </div>
+
+    @push('sidebar-scripts')
+        <script>
+            $(document).ready(function() {
+                async function fetchAndReplaceContent() {
+                    try {
+                        const response = await $.ajax({
+                            url: "{{ url('dashboard/site-stats') }}",
+                            method: 'GET',
+                            dataType: 'html'
+                        });
+                        $('#site-stats').html(response);
+                    } catch (error) {
+                        console.error('Error fetching content:', error);
+                    }
+                }
+
+                fetchAndReplaceContent();
+            });
+        </script>
+    @endpush
+@endsection