feat: analytics UI

packages/analytics/views/commands.handlebars

@@ -1,11 +1,15 @@
-<h1>Commands</h1>
+<h1 class='heading'>Commands</h1>
 <div>
-  <h2>Error commands</h2>
-  <div class='pagination'>
-    <a href='/commands?order=asc'>Ascending</a>
-    <a href='/commands?order=desc'>Descending</a>
+  <h2 class='heading'>Error commands</h2>
+  <div class='sort'>
+    <a href='/commands?order=asc'><div class='btn'>
+        <h3>Ascending</h3>
+      </div></a>
+    <a href='/commands?order=desc'><div class='btn'>
+        <h3>Descending</h3>
+      </div></a>
   </div>
-  <table>
+  <table class='data-table'>
     <tr>
       <th>Command</th>
       <th>User</th>
@@ -25,7 +29,9 @@
       </tr>
     {{/each}}
   </table>
-  <div class='pagination'>
-    <a href='/commands?nextKey={{nextKey}}&order={{order}}'>Next</a>
+  <div class='pagination sort'>
+    <a href='/commands?nextKey={{nextKey}}&order={{order}}'><div class='btn'>
+        <h3>Next</h3>
+      </div></a>
   </div>
 </div>

packages/analytics/views/home.handlebars

@@ -1,22 +1,27 @@
-<h1>Welcome to {{title}}</h1>
-<div>
-  <h2>Overview</h2>
-  <table>
-    <tr>
-      <th>Registered Users</th>
-      <td>{{userCount}}</td>
-    </tr>
-    <tr>
-      <th>Total Started Quests</th>
-      <td>{{totalQuests}}</td>
-    </tr>
-    <tr>
-      <th>Completed Quests</th>
-      <td>{{totalCompleted}}</td>
-    </tr>
-    <tr>
-      <th>Completed Rate</th>
-      <td>{{completedRate}}%</td>
-    </tr>
-  </table>
-</div>
+<body>
+  <div class='title'>
+    <img src='icon_totem.svg' class='styled-image' />
+    <h1>Welcome to {{title}}</h1>
+  </div>
+  <div class='container'>
+    <h2 class='heading'>Overview</h2>
+    <table class='data-table'>
+      <tr>
+        <th>Registered Users</th>
+        <td>{{userCount}}</td>
+      </tr>
+      <tr>
+        <th>Total Started Quests</th>
+        <td>{{totalQuests}}</td>
+      </tr>
+      <tr>
+        <th>Completed Quests</th>
+        <td>{{totalCompleted}}</td>
+      </tr>
+      <tr>
+        <th>Completed Rate</th>
+        <td>{{completedRate}}%</td>
+      </tr>
+    </table>
+  </div>
+</body>

packages/analytics/views/layouts/main.handlebars

@@ -4,14 +4,12 @@
     <link rel='stylesheet' href='/css/style.css' />
   </head>
   <body>
-    <nav>
-      <ul>
-        <li><a href='/'>Home</a></li>
-        <li><a href='/users'>Users</a></li>
-        <li><a href='/quests'>Quests</a></li>
-        <li><a href='/commands'>Commands</a></li>
-        <li><a href='/sessions'>Sessions</a></li>
-      </ul>
+    <nav class='nav'>
+      <div><a href='/'>Home</a></div>
+      <div><a href='/users'>Users</a></div>
+      <div><a href='/quests'>Quests</a></div>
+      <div><a href='/commands'>Commands</a></div>
+      <div><a href='/sessions'>Sessions</a></div>
     </nav>
     {{{body}}}
   </body>

packages/analytics/views/quests.handlebars

@@ -1,6 +1,6 @@
-<h1>Quests</h1>
+<h1 class='heading'>Quests</h1>
 <div>
-  <table>
+  <table class='data-table'>
     <tr>
       <th>Id</th>
       <th>Started</th>

packages/analytics/views/sessionDetail.handlebars

@@ -1,7 +1,7 @@
-<h1>{{title}}</h1>
-<div>
-  {{#with session}}
-    <table>
+{{#with session}}<h1 class='heading'>Session {{_id}}</h1>
+  <div>
+
+    <table class='data-table'>
       <tr>
         <th>Quest</th>
         <td>{{quest}}</td>
@@ -32,9 +32,9 @@
       </tr>
     </table>
 
-    <h2>Commands</h2>
+    <h2 class='heading'>Commands</h2>
 
-    <table>
+    <table class='data-table'>
       <tr>
         <th>Stage</th>
         <th>PWD</th>
@@ -54,5 +54,5 @@
         </tr>
       {{/each}}
     </table>
-  {{/with}}
-</div>
+
+  </div>{{/with}}

packages/analytics/views/sessions.handlebars

@@ -1,10 +1,14 @@
-<h1>Sessions</h1>
-<div class='pagination'>
-  <a href='/sessions?order=asc'>Ascending</a>
-  <a href='/sessions?order=desc'>Descending</a>
+<h1 class='heading'>Sessions</h1>
+<div class='sort'>
+  <a href='/sessions?order=asc'><div class='btn'>
+      <h3>Ascending</h3>
+    </div></a>
+  <a href='/sessions?order=desc'><div class='btn'>
+      <h3>Descending</h3>
+    </div></a>
 </div>
 <div>
-  <table>
+  <table class='data-table'>
     <tr>
       <th>User</th>
       <th>Quest</th>
@@ -29,6 +33,8 @@
     {{/each}}
   </table>
 </div>
-<div class='pagination'>
-  <a href='/sessions?nextKey={{nextKey}}&order={{order}}'>Next</a>
+<div class='pagination sort'>
+  <a href='/sessions?nextKey={{nextKey}}&order={{order}}'><div class='btn'>
+      <h3>Next</h3>
+    </div></a>
 </div>

packages/analytics/views/users.handlebars

@@ -1,10 +1,14 @@
-<h1>Users List</h1>
-<div class='pagination'>
-  <a href='/users?order=asc'>Ascending</a>
-  <a href='/users?order=desc'>Descending</a>
+<h1 class='heading'>Users List</h1>
+<div class='sort'>
+  <a href='/users?order=asc'><div class='btn'>
+      <h3>Ascending</h3>
+    </div></a>
+  <a href='/users?order=desc'><div class='btn'>
+      <h3>Descending</h3>
+    </div></a>
 </div>
 <div>
-  <table>
+  <table class='data-table'>
     <tr>
       <th>Username</th>
       <th>Last Activity</th>
@@ -25,6 +29,8 @@
     {{/each}}
   </table>
 </div>
-<div class='pagination'>
-  <a href='/users?nextKey={{nextKey}}&order={{order}}'>Next</a>
+<div class='pagination sort'>
+  <a href='/users?nextKey={{nextKey}}&order={{order}}'><div class='btn'>
+      <h3>Next</h3>
+    </div></a>
 </div>

packages/analytics/views/usersDetail.handlebars

@@ -1,6 +1,6 @@
-<h1>{{user}}'s Sessions History</h1>
+<h1 class='heading'>{{user}}'s Sessions History</h1>
 <div>
-  <table>
+  <table class='data-table'>
     <tr>
       <th>Quest</th>
       <th>Status</th>