From b2d308297afb9ba22c098a06d161a7ee05903f3b Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Thu, 17 Oct 2024 09:35:42 -0400
Subject: [PATCH] Add data tables to admin dash view

---
 src/views/Admin/DashboardView.vue | 126 +++++++++++++++++++++++++++++-
 1 file changed, 124 insertions(+), 2 deletions(-)

diff --git a/src/views/Admin/DashboardView.vue b/src/views/Admin/DashboardView.vue
index 33be75f..bf643d7 100644
--- a/src/views/Admin/DashboardView.vue
+++ b/src/views/Admin/DashboardView.vue
@@ -6,6 +6,7 @@ import CardBox from "@/components/CardBox.vue";
 import CardBoxWidget from "@/components/CardBoxWidget.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
+import GeneralTable from "@/components/GeneralTable.vue";
 
 import { APIAdminDashboard } from "@/stores/api/admin";
 const dashboardData = ref({});
@@ -20,6 +21,99 @@ onMounted(async () => {
     console.log("Failed to fetch admin data:", error);
   }
 });
+
+const eventHeaders = [
+  {
+    text: "Timestamp",
+    value: "timestamp",
+    width: 120,
+  },
+  {
+    text: "IP Address",
+    value: "data.ip",
+    width: 120,
+  },
+  {
+    text: "Game",
+    value: "data.model",
+    width: 120,
+  },
+  {
+    text: "PCBID",
+    value: "data.pcbid",
+    width: 120,
+  },
+  {
+    text: "Name",
+    value: "data.name",
+    width: 120,
+  },
+  {
+    text: "Value",
+    value: "data.value",
+    width: 120,
+  },
+];
+
+const transactionHeaders = [
+  {
+    text: "Timestamp",
+    value: "timestamp",
+    width: 120,
+  },
+  {
+    text: "PCBID",
+    value: "data.pcbid",
+    width: 120,
+  },
+  {
+    text: "Delta",
+    value: "data.delta",
+    width: 120,
+  },
+  {
+    text: "Remaining Balance",
+    value: "data.balance",
+    width: 120,
+  },
+  {
+    text: "Reason",
+    value: "data.reason",
+    width: 120,
+  },
+];
+
+function formatTransactions(events) {
+  var formattedItems = [];
+  for (var item of events) {
+    if (item.type == "paseli_transaction") {
+      if (item.timestamp) {
+        const date = new Date(item.timestamp * 1000);
+        item.timestamp = date.toLocaleString();
+      }
+
+      formattedItems.push(item);
+    }
+  }
+
+  return formattedItems;
+}
+
+function formatEvents(events) {
+  var formattedItems = [];
+  for (var item of events) {
+    if (item.type == "pcbevent") {
+      if (item.timestamp) {
+        const date = new Date(item.timestamp * 1000);
+        item.timestamp = date.toLocaleString();
+      }
+
+      formattedItems.push(item);
+    }
+  }
+
+  return formattedItems;
+}
 </script>
 
 <template>
@@ -79,8 +173,36 @@ onMounted(async () => {
           />
         </div>
 
-        <SectionTitleLine :icon="mdiFlagCheckered" title="Recent Errors" />
-        <CardBox> </CardBox>
+        <SectionTitleLine :icon="mdiFlagCheckered" title="Recent PCB Events" />
+        <CardBox has-table>
+          <div
+            class="bg-white dark:bg-slate-900/95 rounded-2xl lg:flex lg:justify-between"
+          >
+            <div class="w-full">
+              <GeneralTable
+                :headers="eventHeaders"
+                :items="formatEvents(dashboardData?.audit)"
+              />
+            </div>
+          </div>
+        </CardBox>
+
+        <SectionTitleLine
+          :icon="mdiFlagCheckered"
+          title="Recent PASELI Transactions"
+        />
+        <CardBox has-table>
+          <div
+            class="bg-white dark:bg-slate-900/95 rounded-2xl lg:flex lg:justify-between"
+          >
+            <div class="w-full">
+              <GeneralTable
+                :headers="transactionHeaders"
+                :items="formatTransactions(dashboardData?.audit)"
+              />
+            </div>
+          </div>
+        </CardBox>
       </template>
     </SectionMain>
   </LayoutAuthenticated>