From 3eff05d97d9fe8a72aaa127a646702524308f9f7 Mon Sep 17 00:00:00 2001
From: jelveh <nj@puter.com>
Date: Fri, 27 Dec 2024 22:05:15 -0800
Subject: [PATCH] add a little STYLE to analytics

---
 src/dev-center/index.html       | 10 ++++++++++
 src/dev-center/js/dev-center.js | 24 +++++++++++++++---------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/dev-center/index.html b/src/dev-center/index.html
index 14eb58e1..bdcc8d5e 100644
--- a/src/dev-center/index.html
+++ b/src/dev-center/index.html
@@ -51,6 +51,16 @@
         tags{
             min-width: 500px;
         }
+        .analytics-card{
+            margin-top: 20px;
+            padding: 20px;
+            border-radius: 10px;
+            background-color: #f2f4f5;
+            width: 200px;
+            text-align: center;
+            float:left;
+            margin-right: 23px;
+        }
     </style>
 </head>
 
diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index ccbcba1e..52662130 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -644,14 +644,19 @@ function generate_edit_app_section(app) {
                 <option value="last_12_months">Last 12 months</option>
                 <option value="all_time">All time</option>
             </select>
-            <div id="analytics-users">
-                <h3>Users</h3>
-                <div class="count"></div>
-            </div>
-            <div id="analytics-opens">
-                <h3>Opens</h3>
-                <div class="count"></div>
+            <div style="overflow:hidden;">
+                <div class="analytics-card" id="analytics-users">
+                    <h3 style="margin-top:0;">Users</h3>
+                    <div class="count" style="font-size: 35px;"></div>
+                </div>
+                <div class="analytics-card" id="analytics-opens">
+                    <h3 style="margin-top:0;">Opens</h3>
+                    <div class="count" style="font-size: 35px;"></div>
+                </div>
             </div>
+            <hr style="margin-top: 50px;">
+            <p>Timezone: UTC</p>
+            <p>More analytics features coming soon...</p>
         </div>
     `
     return h;
@@ -1237,8 +1242,6 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
     // show working spinner
     puter.ui.showSpinner();
 
-    
-    
     // disable submit button
     $('.edit-app-save-btn').prop('disabled', true);
 
@@ -2816,8 +2819,11 @@ $(document).on('click', '.copy-app-uid', function(e) {
 });
 
 $(document).on('change', '#analytics-period', async function(e) {
+    puter.ui.showSpinner();
     const app = await puter.apps.get(currently_editing_app.name, { icon_size: 64, stats_period: $(this).val() });
 
     $('#analytics-users .count').html(number_format(app.stats.user_count));
     $('#analytics-opens .count').html(number_format(app.stats.open_count));
+
+    puter.ui.hideSpinner();
 })
\ No newline at end of file