From 72b9bb1383879c609e84e7ee4a9d8fdc33c7c3d1 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 11 Feb 2025 19:56:33 +0200
Subject: [PATCH 01/11] init Admin page

---
 client/src/router/index.js                    |  24 +-
 client/src/services/userService.js            |  10 +-
 client/src/store/UserStore.js                 |  14 +-
 client/src/views/Admin.vue                    | 717 ++++++++----------
 .../{tabs => accManagemenTabs}/AuditLogs.vue  |   0
 .../ChangePassword.vue                        |   0
 .../DeleteAccount.vue                         |   0
 .../{tabs => accManagemenTabs}/Invoices.vue   |   0
 .../{tabs => accManagemenTabs}/Payments.vue   |   0
 .../{tabs => accManagemenTabs}/Profile.vue    |   0
 client/src/views/adminTabs/History.vue        |   5 +
 client/src/views/adminTabs/Requests.vue       | 260 +++++++
 12 files changed, 625 insertions(+), 405 deletions(-)
 rename client/src/views/{tabs => accManagemenTabs}/AuditLogs.vue (100%)
 rename client/src/views/{tabs => accManagemenTabs}/ChangePassword.vue (100%)
 rename client/src/views/{tabs => accManagemenTabs}/DeleteAccount.vue (100%)
 rename client/src/views/{tabs => accManagemenTabs}/Invoices.vue (100%)
 rename client/src/views/{tabs => accManagemenTabs}/Payments.vue (100%)
 rename client/src/views/{tabs => accManagemenTabs}/Profile.vue (100%)
 create mode 100644 client/src/views/adminTabs/History.vue
 create mode 100644 client/src/views/adminTabs/Requests.vue

diff --git a/client/src/router/index.js b/client/src/router/index.js
index 2dc44db3..dba083c8 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -5,14 +5,16 @@ import Account from "@/views/Account.vue";
 import VM from "@/views/VM.vue";
 import Admin from "@/views/Admin.vue";
 import NewPassword from "@/views/Newpassword.vue";
-import ProfileTab from "@/views/tabs/Profile.vue";
-import PaymentsTab from "@/views/tabs/Payments.vue";
-import Invoices from "@/views/tabs/Invoices.vue";
-import ChangePassword from "@/views/tabs/ChangePassword.vue";
-import AuditLogs from "@/views/tabs/AuditLogs.vue";
-import DeleteAccount from "@/views/tabs/DeleteAccount.vue";
+import ProfileTab from "@/views/accManagemenTabs/Profile.vue";
+import PaymentsTab from "@/views/accManagemenTabs/Payments.vue";
+import Invoices from "@/views/accManagemenTabs/Invoices.vue";
+import ChangePassword from "@/views/accManagemenTabs/ChangePassword.vue";
+import AuditLogs from "@/views/accManagemenTabs/AuditLogs.vue";
+import DeleteAccount from "@/views/accManagemenTabs/DeleteAccount.vue";
 import Deploy from "@/views/Deploy.vue";
 import Home from "@/views/HomeWrapper.vue";
+import Requests from "@/views/adminTabs/Requests.vue";
+import History from "@/views/adminTabs/History.vue";
 
 const routes = [
   {
@@ -149,6 +151,16 @@ const routes = [
       layout: "Default",
       requiresAuth: true,
     },
+    children: [
+      {
+        path: "",
+        component: Requests,
+      },
+      {
+        path: "history",
+        component: History,
+      },
+    ],
   },
   {
     path: "/logout",
diff --git a/client/src/services/userService.js b/client/src/services/userService.js
index 37121d18..f1f7be7a 100644
--- a/client/src/services/userService.js
+++ b/client/src/services/userService.js
@@ -255,7 +255,7 @@ export default {
 
   // Deployments
   async getDeploymentsCount() {
-    return await authClient().get("/deployment/count");
+    return await authClient().get("/deployments/count");
   },
 
   // Vouchers
@@ -271,8 +271,8 @@ export default {
     return await authClient().put("/voucher");
   },
 
-  async generateVoucher(length, vms, public_ips) {
-    return await authClient().post("/voucher", { length, vms, public_ips });
+  async generateVoucher(balance, length) {
+    return await authClient().post("/voucher", { balance, length });
   },
 
   async getAuditEvents() {
@@ -323,8 +323,6 @@ export default {
 
   // setting next launch value
   async setNextLaunch(value) {
-    return await authClient().put("/nextlaunch", {
-      launched: value,
-    });
+    return await authClient().put("/nextlaunch", { launched: value });
   },
 };
diff --git a/client/src/store/UserStore.js b/client/src/store/UserStore.js
index d0abd886..e4a1e031 100644
--- a/client/src/store/UserStore.js
+++ b/client/src/store/UserStore.js
@@ -9,8 +9,7 @@ export const useUserStore = defineStore("userStore", {
     isLoaded: false,
     notifications: [],
     maintenance: false,
-    next_launch: false,
-    next_launch_admin: false,
+    next_launch_admin: true,
     isAuthenticated: localStorage.getItem("token"),
   }),
   actions: {
@@ -60,13 +59,21 @@ export const useUserStore = defineStore("userStore", {
       try {
         const response = await userService.nextLaunch();
         const { launched } = response.data.data;
-        this.next_launch = launched;
         this.next_launch_admin = launched;
       } catch (error) {
         return error;
       }
     },
 
+    async setNextLaunch(value) {
+      try {
+        const response = await userService.setNextLaunch(value);
+        return response
+      } catch (error) {
+        return error;
+      }
+    },
+
     async checkMaintenance() {
       try {
         const response = await userService.maintenance();
@@ -79,5 +86,6 @@ export const useUserStore = defineStore("userStore", {
   },
   getters: {
     isUserLoaded: (state) => state.isLoaded,
+    isNextLaunchEnabled: (state) => state.next_launch_admin,
   },
 });
diff --git a/client/src/views/Admin.vue b/client/src/views/Admin.vue
index 5a1c1e22..6682e63d 100644
--- a/client/src/views/Admin.vue
+++ b/client/src/views/Admin.vue
@@ -1,15 +1,74 @@
 <template>
-  <v-container style="max-width: 1700px" fill-height>
+  <v-container fluid>
+    <h5 class="text-h5 text-md-h4 font-weight-bold my-5">Admin Panel</h5>
+    <v-divider />
+
     <v-row>
-      <v-col>
-        <h5
-          class="text-h5 text-md-h4 font-weight-bold text-center my-10 secondary"
-        >
-          Admin Panel
-        </h5>
+      <v-col cols="12">
+        <v-card flat class="my-5">
+          <v-list-item>
+            <template v-slot:prepend>
+              <v-sheet class="px-5 py-3" border rounded
+                >Balance: {{ balance }} TFT</v-sheet
+              >
+
+              <v-sheet class="px-5 py-3 d-flex align-center">
+                <v-icon class="mr-2" size="35">mdi-server</v-icon>
+                <div>
+                  <span>Used VMs: {{ usedResources }} </span><br />
+                  <span>Deployed VMs: {{ deployedResources }} </span>
+                </div>
+              </v-sheet>
+
+              <v-sheet class="px-5 py-3 d-flex align-center">
+                <v-icon class="mr-2" size="45">mdi-ip</v-icon>
+                <div>
+                  <span>Used IPs: {{ usedIPs }} </span><br />
+                  <span>Reserved IPs: {{ reservedIPs }} </span>
+                </div>
+              </v-sheet>
+            </template>
+            <template v-slot:append>
+              <BaseButton
+                v-if="isNextLaunchEnabled"
+                @click="setNextLaunch"
+                text="Disable Launch"
+                color="error"
+                class="mr-2"
+              />
+              <BaseButton
+                v-else
+                @click="setNextLaunch"
+                text="Enable Launch"
+                color="success"
+                class="mr-2"
+              />
+
+              <BaseButton text="Generate a Voucher" color="success" />
+            </template>
+          </v-list-item>
+        </v-card>
       </v-col>
     </v-row>
+
     <v-row>
+      <v-col cols="12">
+        <v-card class="my-5">
+          <v-tabs v-model="activeTab" class="tabs">
+            <v-tab v-for="tab in tabs" :key="tab" :to="tab.route" exact>{{
+              tab.name
+            }}</v-tab>
+          </v-tabs>
+
+          <v-card-text>
+            <v-tabs-window v-model="activeTab">
+              <router-view></router-view>
+            </v-tabs-window>
+          </v-card-text>x``
+        </v-card>
+      </v-col>
+    </v-row>
+    <!-- <v-row>
       <v-col cols="12" md="8">
         <v-data-table
           v-model:items-per-page="itemsPerPage"
@@ -415,403 +474,281 @@
       :msg="message"
       :voucher="voucher"
       :reset="resetVoucher"
-    />
+    /> -->
+    <Toast ref="toast" />
   </v-container>
 </template>
 
-<script>
+<script setup>
 import { ref, onMounted, watch } from "vue";
 import BaseButton from "@/components/Form/BaseButton.vue";
 import userService from "@/services/userService.js";
 import Toast from "@/components/Toast.vue";
-import Voucher from "@/components/Voucher.vue";
-import UserInfo from "@/components/UserInfo.vue";
-import { useRouter } from "vue-router";
-
-export default {
-  components: {
-    BaseButton,
-    Toast,
-    Voucher,
-    UserInfo,
-  },
-  setup() {
-    const router = useRouter();
-    const confirm = ref(null);
-    const vouchersHeaders = ref([
-      { title: "No", key: "id" },
-      { title: "User", key: "user", sortable: false },
-      { title: "Updated at", key: "updated_at" },
-      { title: "Reason for Voucher", key: "reason", sortable: false },
-      { title: "VMs", key: "vms" },
-      { title: "Public IPs", key: "public_ips" },
-      { title: "Voucher", key: "voucher" },
-      { title: "Actions", key: "actions", sortable: false },
-    ]);
-
-    const pendingVouchersHeaders = ref([
-      { title: "No", key: "id" },
-      { title: "User", key: "user", sortable: false },
-      { title: "Created at", key: "created_at" },
-      { title: "Reason for Voucher", key: "reason", sortable: false },
-      { title: "VMs", key: "vms" },
-      { title: "Public IPs", key: "public_ips" },
-      { title: "Actions", key: "actions", sortable: false },
-    ]);
-
-    const usersHeaders = ref([
-      { title: "No", key: "id", sortable: false },
-      { title: "Name", key: "name", sortable: false },
-      { title: "VMs", key: "vms", sortable: false },
-      { title: "IPs", key: "public_ips", sortable: false },
-      { title: "Actions", key: "actions", sortable: false },
-    ]);
-
-    const form = ref(null);
-    const vouchers = ref([]);
-    const pendingVouchers = ref([]);
-    const users = ref([]);
-    const toast = ref(null);
-    const loading = ref(false);
-    const usedResources = ref(0);
-    const deployedResources = ref(0);
-    const balance = ref(0);
-    const usedIPs = ref(0);
-    const reservedIPs = ref(0);
-    const approveAllCount = ref(null);
-    const userInfo = ref(null);
-    const itemsPerPage = ref(5);
-    const dialog = ref(false);
-    const announcementDialog = ref(false);
-    const showUserInfo = ref(false);
-    const vms = ref(1);
-    const ips = ref(0);
-    const length = ref(3);
-    const message = ref(null);
-    const voucher = ref(null);
-    const subject = ref(null);
-    const announcement = ref(null);
-    const nextLaunchDialog = ref(false);
-
-    nextLaunchDialog.value = localStorage.getItem("nextlaunchadmin") == "true";
-
-    const requiredRules = ref([
-      (value) => {
-        if (value === "") return "Field is required";
-        return true;
-      },
-    ]);
-
-    const setAdmin = (user, admin) => {
-      userService
-        .setAdmin(user.email, admin)
-        .then((response) => {
-          toast.value.toast(response.data.msg, "#388E3C");
-
-          userService.getUser().then((response) => {
-            const current_user = response.data.data.user;
-            if (!current_user.admin) {
-              router.push({
-                name: "Home",
-              });
-            }
-          });
-
-          getUsers();
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const openUserInfo = (user) => {
-      showUserInfo.value = true;
-      userInfo.value = user;
-    };
-
-    const getVouchers = () => {
-      userService
-        .getVouchers()
-        .then((response) => {
-          const { data } = response.data;
-          approveAllCount.value = 0;
-
-          let updateDataPromise = data.map(function (voucher) {
-            return new Promise(function (resolve) {
-              setTimeout(() => {
-                if (!voucher?.approved && !voucher?.rejected) {
-                  approveAllCount.value++;
-                }
-
-                if (voucher.user_id) {
-                  userInfo.value = users?.value?.find(
-                    (user) => user.user_id === voucher.user_id
-                  );
-                  if (voucher.user_id === userInfo?.value?.user_id) {
-                    Object.assign(voucher, {
-                      email: userInfo?.value?.email,
-                      name: userInfo?.value?.name,
-                    });
-                  }
-                }
-                resolve();
-              }, 10);
-            });
-          });
-
-          Promise.all(updateDataPromise).then(function () {
-            vouchers.value = data.filter(
-              (voucher) => voucher.approved || voucher.rejected
-            );
-            pendingVouchers.value = data.filter(
-              (voucher) => !voucher.approved && !voucher.rejected
-            );
-          });
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const approveVoucher = (id, approved) => {
-      userService
-        .approveVoucher(id, approved)
-        .then((response) => {
-          toast.value.toast(response.data.msg, "#388E3C");
-          getVouchers();
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const approveAllVouchers = () => {
-      userService
-        .approveAllVouchers()
-        .then((response) => {
-          toast.value.toast(response.data.msg, "#388E3C");
-          getVouchers();
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const getUsers = () => {
-      userService
-        .getUsers()
-        .then((response) => {
-          const { data } = response.data;
-          users.value = data;
-          users.value.map((usedData) => {
-            usedResources.value += usedData.used_vms;
-            usedIPs.value += usedData.used_public_ips;
-          });
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const getDeploymentsCount = () => {
-      userService
-        .getDeploymentsCount()
-        .then((response) => {
-          const { data } = response.data;
-          deployedResources.value += data.vms;
-          reservedIPs.value += data.ips;
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const getBalance = () => {
-      userService
-        .getBalance()
-        .then((response) => {
-          const { data } = response.data;
-          balance.value = data;
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const addAvatar = (name) => {
-      return name.charAt(0);
-    };
-
-    if (localStorage.getItem("token")) {
-      setInterval(() => {
-        getBalance();
-      }, 30 * 1000);
-    }
-
-    watch(dialog, (val) => {
-      if (val) {
-        vms.value = 1;
-        ips.value = 0;
-        length.value = 3;
-      }
+import { storeToRefs } from "pinia";
+import { useUserStore } from "@/store/UserStore";
+// import Voucher from "@/components/Voucher.vue";
+// import UserInfo from "@/components/UserInfo.vue";
+// import { useRouter } from "vue-router";
+
+// const router = useRouter();
+// const confirm = ref(null);
+// const vouchersHeaders = ref([
+//   { title: "No", key: "id" },
+//   { title: "User", key: "user", sortable: false },
+//   { title: "Updated at", key: "updated_at" },
+//   { title: "Reason for Voucher", key: "reason", sortable: false },
+//   { title: "VMs", key: "vms" },
+//   { title: "Public IPs", key: "public_ips" },
+//   { title: "Voucher", key: "voucher" },
+//   { title: "Actions", key: "actions", sortable: false },
+// ]);
+
+// const pendingVouchersHeaders = ref([
+//   { title: "No", key: "id" },
+//   { title: "User", key: "user", sortable: false },
+//   { title: "Created at", key: "created_at" },
+//   { title: "Reason for Voucher", key: "reason", sortable: false },
+//   { title: "VMs", key: "vms" },
+//   { title: "Public IPs", key: "public_ips" },
+//   { title: "Actions", key: "actions", sortable: false },
+// ]);
+
+// const usersHeaders = ref([
+//   { title: "No", key: "id", sortable: false },
+//   { title: "Name", key: "name", sortable: false },
+//   { title: "VMs", key: "vms", sortable: false },
+//   { title: "IPs", key: "public_ips", sortable: false },
+//   { title: "Actions", key: "actions", sortable: false },
+// ]);
+
+// const form = ref(null);
+
+const users = ref([]);
+const toast = ref();
+const tabs = ref([
+  { name: "Users Requests", route: `/admin` },
+  { name: "Users History", route: `/admin/history` },
+]);
+const activeTab = ref(tabs.value[0]);
+
+// const loading = ref(false);
+const usedResources = ref(0);
+const deployedResources = ref(0);
+const balance = ref(0);
+const usedIPs = ref(0);
+const reservedIPs = ref(0);
+// const itemsPerPage = ref(5);
+const dialog = ref(false);
+const announcementDialog = ref(false);
+// const showUserInfo = ref(false);
+const vms = ref(1);
+const ips = ref(0);
+const length = ref(3);
+// const message = ref(null);
+// const voucher = ref(null);
+const subject = ref(null);
+const announcement = ref(null);
+const nextLaunchDialog = ref(false);
+const store = useUserStore();
+const { isNextLaunchEnabled } = storeToRefs(store);
+nextLaunchDialog.value = localStorage.getItem("nextlaunchadmin") == "true";
+
+// const requiredRules = ref([
+//   (value) => {
+//     if (value === "") return "Field is required";
+//     return true;
+//   },
+// ]);
+
+// const setAdmin = (user, admin) => {
+//   userService
+//     .setAdmin(user.email, admin)
+//     .then((response) => {
+//       toast.value.toast(response.data.msg, "#388E3C");
+
+//       userService.getUser().then((response) => {
+//         const current_user = response.data.data.user;
+//         if (!current_user.admin) {
+//           router.push({
+//             name: "Home",
+//           });
+//         }
+//       });
+
+//       getUsers();
+//     })
+//     .catch((response) => {
+//       const { err } = response.response.data;
+//       toast.value.toast(err, "#FF5252");
+//     });
+// };
+
+// const openUserInfo = (user) => {
+//   showUserInfo.value = true;
+//   userInfo.value = user;
+// };
+
+const getUsers = () => {
+  userService
+    .getUsers()
+    .then((response) => {
+      const { data } = response.data;
+      users.value = data;
+      users.value.map((usedData) => {
+        // FIXME
+        usedResources.value += usedData.used_vms;
+        usedIPs.value += usedData.used_public_ips;
+      });
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    });
+};
+
+const getDeploymentsCount = () => {
+  userService
+    .getDeploymentsCount()
+    .then((response) => {
+      const { data } = response.data;
+      deployedResources.value += data.vms;
+      reservedIPs.value += data.ips;
+    })
+    .catch((response) => {
+      const msg = response.message;
+      toast.value.toast(msg, "#FF5252");
     });
+};
 
-    watch(announcementDialog, (val) => {
-      if (val) {
-        announcement.value = "";
-        subject.value = "";
-      }
+const getBalance = () => {
+  userService
+    .getBalance()
+    .then((response) => {
+      const { data } = response.data;
+      balance.value = data;
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
     });
+};
+
+if (localStorage.getItem("token")) {
+  setInterval(() => {
+    getBalance();
+  }, 30 * 1000);
+}
 
-    const generateVoucher = async () => {
-      var { valid } = await form.value.validate();
-      if (!valid) return;
-
-      userService
-        .generateVoucher(+length.value, +vms.value, +ips.value)
-        .then((response) => {
-          const { data, msg } = response.data;
-          message.value = msg;
-          voucher.value = data.voucher;
-        })
-        .catch((response) => {
-          toast.value.toast(response.response.data.err, "#FF5252");
-        })
-        .finally(() => {
-          getVouchers();
-          dialog.value = false;
-        });
-    };
-
-    const sendAnnouncement = async () => {
-      var { valid } = await form.value.validate();
-      if (!valid) return;
-
-      userService
-        .sendAnnouncement(subject.value, announcement.value)
-        .then((response) => {
-          const { msg } = response.data;
-          toast.value.toast(msg, "#388E3C");
-        })
-        .catch((response) => {
-          toast.value.toast(response.response.data.err, "#FF5252");
-        })
-        .finally(() => {
-          announcementDialog.value = false;
-        });
-    };
-    const setNextLaunch = async () => {
-      await userService.nextLaunch();
-      await userService
-        .setNextLaunch(!(localStorage.getItem("nextlaunchadmin") == "true"))
-        .then((response) => {
-          if (response.status == 200) {
-            nextLaunchDialog.value = !nextLaunchDialog.value;
-          }
-        });
-    };
-
-    const resetVoucher = () => {
-      message.value = null;
-      voucher.value = null;
-    };
-
-    const dateIsNull = (date) => {
-      return (
-        new Date(date).toLocaleString() ==
-        new Date("0001-01-01").toLocaleString()
-      );
-    };
-
-    const stringDate = (date) => {
-      return new Date(date).toLocaleString();
-    };
-
-    onMounted(() => {
-      let token = localStorage.getItem("token");
-      if (token) {
-        getUsers();
-        getVouchers();
-        getBalance();
-        getDeploymentsCount();
-      }
+watch(dialog, (val) => {
+  if (val) {
+    vms.value = 1;
+    ips.value = 0;
+    length.value = 3;
+  }
+});
+
+watch(announcementDialog, (val) => {
+  if (val) {
+    announcement.value = "";
+    subject.value = "";
+  }
+});
+
+// TODO generate voucher
+// const generateVoucher = async () => {
+//   var { valid } = await form.value.validate();
+//   if (!valid) return;
+
+//   userService
+//     .generateVoucher(+length.value, +vms.value, +ips.value)
+//     .then((response) => {
+//       const { data, msg } = response.data;
+//       message.value = msg;
+//       voucher.value = data.voucher;
+//     })
+//     .catch((response) => {
+//       toast.value.toast(response.response.data.err, "#FF5252");
+//     })
+//     .finally(() => {
+//       getVouchers();
+//       dialog.value = false;
+//     });
+// };
+
+// const sendAnnouncement = async () => {
+//   var { valid } = await form.value.validate();
+//   if (!valid) return;
+
+//   userService
+//     .sendAnnouncement(subject.value, announcement.value)
+//     .then((response) => {
+//       const { msg } = response.data;
+//       toast.value.toast(msg, "#388E3C");
+//     })
+//     .catch((response) => {
+//       toast.value.toast(response.response.data.err, "#FF5252");
+//     })
+//     .finally(() => {
+//       announcementDialog.value = false;
+//     });
+// };
+function setNextLaunch() {
+  store
+    .setNextLaunch(!isNextLaunchEnabled.value)
+    .then((response) => {
+      const { msg } = response.data;
+      toast.value.toast(msg, "#388E3C");
+      store.getNextLaunch();
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
     });
+}
 
-    return {
-      vouchersHeaders,
-      pendingVouchersHeaders,
-      vouchers,
-      pendingVouchers,
-      usedResources,
-      usedIPs,
-      deployedResources,
-      reservedIPs,
-      balance,
-      approveAllCount,
-      usersHeaders,
-      users,
-      userInfo,
-      loading,
-      confirm,
-      toast,
-      itemsPerPage,
-      dialog,
-      announcementDialog,
-      showUserInfo,
-      vms,
-      ips,
-      length,
-      requiredRules,
-      voucher,
-      message,
-      form,
-      announcement,
-      subject,
-      getVouchers,
-      getBalance,
-      approveVoucher,
-      approveAllVouchers,
-      getUsers,
-      addAvatar,
-      generateVoucher,
-      resetVoucher,
-      getDeploymentsCount,
-      openUserInfo,
-      setAdmin,
-      sendAnnouncement,
-      dateIsNull,
-      stringDate,
-      setNextLaunch,
-      nextLaunchDialog,
-    };
-  },
-  beforeRouteEnter(to, from, next) {
-    userService
-      .getUser()
-      .then((response) => {
-        const { user } = response.data.data;
-        const isAdmin = user.admin;
-        if (isAdmin) {
-          next();
-        } else {
-          next("/home");
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  },
-};
+// const resetVoucher = () => {
+//   message.value = null;
+//   voucher.value = null;
+// };
+
+// const dateIsNull = (date) => {
+//   return (
+//     new Date(date).toLocaleString() == new Date("0001-01-01").toLocaleString()
+//   );
+// };
+
+// const stringDate = (date) => {
+//   return new Date(date).toLocaleString();
+// };
+
+onMounted(() => {
+  let token = localStorage.getItem("token");
+  if (token) {
+    getUsers();
+    // getVouchers();
+    getBalance();
+    getDeploymentsCount();
+  }
+});
+// beforeRouteEnter(to, from, next) {
+//   userService
+//     .getUser()
+//     .then((response) => {
+//       const { user } = response.data.data;
+//       const isAdmin = user.admin;
+//       if (isAdmin) {
+//         next();
+//       } else {
+//         next("/home");
+//       }
+//     })
+//     .catch((err) => {
+//       console.log(err);
+//     });
+// },
 </script>
 
-<style>
+<!-- <style>
 .resources {
   margin-top: 0.5rem;
 }
@@ -827,4 +764,4 @@ td {
 .shadow {
   box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.1);
 }
-</style>
+</style> -->
diff --git a/client/src/views/tabs/AuditLogs.vue b/client/src/views/accManagemenTabs/AuditLogs.vue
similarity index 100%
rename from client/src/views/tabs/AuditLogs.vue
rename to client/src/views/accManagemenTabs/AuditLogs.vue
diff --git a/client/src/views/tabs/ChangePassword.vue b/client/src/views/accManagemenTabs/ChangePassword.vue
similarity index 100%
rename from client/src/views/tabs/ChangePassword.vue
rename to client/src/views/accManagemenTabs/ChangePassword.vue
diff --git a/client/src/views/tabs/DeleteAccount.vue b/client/src/views/accManagemenTabs/DeleteAccount.vue
similarity index 100%
rename from client/src/views/tabs/DeleteAccount.vue
rename to client/src/views/accManagemenTabs/DeleteAccount.vue
diff --git a/client/src/views/tabs/Invoices.vue b/client/src/views/accManagemenTabs/Invoices.vue
similarity index 100%
rename from client/src/views/tabs/Invoices.vue
rename to client/src/views/accManagemenTabs/Invoices.vue
diff --git a/client/src/views/tabs/Payments.vue b/client/src/views/accManagemenTabs/Payments.vue
similarity index 100%
rename from client/src/views/tabs/Payments.vue
rename to client/src/views/accManagemenTabs/Payments.vue
diff --git a/client/src/views/tabs/Profile.vue b/client/src/views/accManagemenTabs/Profile.vue
similarity index 100%
rename from client/src/views/tabs/Profile.vue
rename to client/src/views/accManagemenTabs/Profile.vue
diff --git a/client/src/views/adminTabs/History.vue b/client/src/views/adminTabs/History.vue
new file mode 100644
index 00000000..26f8bd91
--- /dev/null
+++ b/client/src/views/adminTabs/History.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>History</div>
+</template>
+
+<script setup></script>
diff --git a/client/src/views/adminTabs/Requests.vue b/client/src/views/adminTabs/Requests.vue
new file mode 100644
index 00000000..b21a32c7
--- /dev/null
+++ b/client/src/views/adminTabs/Requests.vue
@@ -0,0 +1,260 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12" md="8">
+        <v-data-table
+          :loading="loading"
+          :headers="pendingVouchersHeaders"
+          :items="pendingVouchers"
+          class="d-flex justify-center elevation-1"
+          :hide-default-footer="pendingVouchers == 0"
+        >
+          <template #[`item.id`]="{ index }"> {{ index + 1 }} </template>
+
+          <template #[`item.name`]="{ item }">
+            <div class="d-flex align-center" v-if="item.name">
+              <v-avatar color="secondary" size="30" class="mr-2">
+                <span class="text-uppercase">{{ userAvatar(item.name) }}</span>
+              </v-avatar>
+              <div>
+                <p>{{ item.name }}</p>
+                <p>
+                  {{ item.email }}
+                </p>
+              </div>
+            </div>
+            <div v-else>
+              <v-avatar color="warning" size="30" class="mr-2">
+                <span class="text-uppercase">A</span>
+              </v-avatar>
+              <div>
+                <p>Voucher generated by Admin</p>
+              </div>
+            </div>
+          </template>
+          <template #[`item.created_at`]="{ item }">
+            {{ formatDate(item.created_at) }}
+          </template>
+          <template #[`item.actions`]="{ item }">
+            <BaseButton
+              color="secondary"
+              text="Approve"
+              size="small"
+              class="mr-1 text-capitalize"
+              @click="approveVoucher(item.id, true)"
+            />
+            <BaseButton
+              color="error"
+              text="Reject"
+              size="small"
+              class="text-capitalize"
+              @click="approveVoucher(item.id, false)"
+            />
+          </template>
+        </v-data-table>
+        <div class="d-flex justify-end">
+          <BaseButton
+            color="info"
+            text="Approve All"
+            class="my-2"
+            :disabled="approveAllCount == 0"
+            @click="approveAllVouchers"
+          />
+        </div>
+      </v-col>
+      <v-col cols="12" md="4">
+        <v-data-table
+          :loading="loading"
+          :headers="usersHeaders"
+          :items="users"
+          class="d-flex justify-center elevation-1"
+          :hide-default-footer="users == 0"
+        >
+          <template #[`item.id`]="{ index }"> {{ index + 1 }} </template>
+
+          <template #[`item.name`]="{ item }">
+            <div class="d-flex align-center" v-if="item.name">
+              <v-avatar color="secondary" size="30" class="mr-2">
+                <span class="text-uppercase">{{ userAvatar(item.name) }}</span>
+              </v-avatar>
+              <div>
+                <p>{{ item.name }}</p>
+                <p>
+                  {{ item.email }}
+                </p>
+              </div>
+            </div>
+            <div v-else>
+              <v-avatar color="warning" size="30" class="mr-2">
+                <span class="text-uppercase">A</span>
+              </v-avatar>
+              <div>
+                <p>Voucher generated by Admin</p>
+              </div>
+            </div>
+          </template>
+          <template #[`item.created_at`]="{ item }">
+            {{ formatDate(item.created_at) }}
+          </template>
+          <template #[`item.actions`]="{ item }">
+            <v-icon v-if="item" class="mr-2">mdi-information</v-icon>
+            <v-icon>mdi-account-lock</v-icon>
+          </template>
+        </v-data-table></v-col
+      >
+    </v-row>
+  </v-container>
+  <Toast ref="toast" />
+</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import userService from "@/services/userService";
+import BaseButton from "@/components/Form/BaseButton.vue";
+import Toast from "@/components/Toast.vue";
+
+const vouchers = ref([]);
+const pendingVouchers = ref([]);
+const approveAllCount = ref(0);
+const userInfo = ref(null);
+const users = ref([]);
+const toast = ref(null);
+const loading = ref(false);
+
+const pendingVouchersHeaders = ref([
+  { title: "No", key: "id" },
+  { title: "User", key: "name", sortable: false },
+  { title: "Created at", key: "created_at" },
+  { title: "Reason for Voucher", key: "reason", sortable: false },
+  { title: "VMs", key: "vms" },
+  { title: "Voucher", key: "voucher" },
+  { title: "Actions", key: "actions", sortable: false },
+]);
+
+const usersHeaders = ref([
+  { title: "No", key: "id", sortable: false },
+  { title: "Name", key: "name", sortable: false },
+  { title: "VMs", key: "vms", sortable: false },
+  { title: "IPs", key: "public_ips", sortable: false },
+  { title: "Actions", key: "actions", sortable: false },
+]);
+
+function getVouchers() {
+  loading.value = true;
+  userService
+    .getVouchers()
+    .then((response) => {
+      const { data } = response.data;
+      approveAllCount.value = 0;
+
+      let updateDataPromise = data.map(function (voucher) {
+        return new Promise(function (resolve) {
+          setTimeout(() => {
+            if (voucher.approved && voucher.rejected) {
+              approveAllCount.value++;
+            }
+
+            if (users.value && voucher.user_id) {
+              userInfo.value = users.value.find(
+                (user) => user.ID === voucher.user_id
+              );
+
+              if (voucher.user_id === userInfo.value.ID) {
+                Object.assign(voucher, {
+                  email: userInfo.value.email,
+                  name: userInfo.value.first_name,
+                });
+              }
+            }
+            resolve();
+          }, 10);
+        });
+      });
+
+      Promise.all(updateDataPromise).then(function () {
+        vouchers.value = data.filter(
+          (voucher) => voucher.approved || voucher.rejected
+        );
+        pendingVouchers.value = data.filter(
+          (voucher) => !voucher.approved && !voucher.rejected
+        );
+      });
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function formatDate(date) {
+  return new Date(date).toLocaleString();
+}
+
+async function getUsers() {
+  loading.value = true;
+  await userService
+    .getUsers()
+    .then((response) => {
+      const { data } = response.data;
+      users.value = data;
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function userAvatar(name) {
+  return name.charAt(0);
+}
+
+async function approveVoucher(id, approved) {
+  await userService
+    .approveVoucher(id, approved)
+    .then(async (response) => {
+      toast.value.toast(response.data.msg, "#388E3C");
+      await getVouchers();
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    });
+}
+
+async function approveAllVouchers() {
+  await userService
+    .approveAllVouchers()
+    .then(async (response) => {
+      toast.value.toast(response.data.msg, "#388E3C");
+      await getVouchers();
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    });
+}
+
+onMounted(async () => {
+  await getVouchers();
+  await getUsers();
+});
+</script>
+<style>
+thead th {
+  background-color: #19647e !important;
+}
+tbody tr {
+  background-color: #474747;
+}
+
+.v-btn--disabled.bg-error,
+.v-btn--disabled.bg-secondary,
+.v-btn--disabled.bg-info {
+  background-color: transparent !important;
+}
+</style>

From 3accb0a66c07c570d4dab837083a972dec5fe9a6 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 12 Feb 2025 17:15:25 +0200
Subject: [PATCH 02/11] Add javascript-time-ago package

---
 client/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/package.json b/client/package.json
index 2ec624ff..7c864cd4 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,6 +15,7 @@
     "axios": "^1.7.2",
     "core-js": "^3.33.2",
     "file-saver": "^2.0.5",
+    "javascript-time-ago": "^2.5.11",
     "jszip": "^3.10.1",
     "mosha-vue-toastify": "^1.0.23",
     "pinia": "^2.3.1",

From 83e13fd9a9b9f09e0617ae2d4c1daa5d611cce5e Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 12 Feb 2025 17:16:45 +0200
Subject: [PATCH 03/11] Calculate balance with voucher balance and display it

---
 client/src/components/TopupPayment.vue | 17 +++--------------
 client/src/layouts/default/AppBar.vue  |  4 ++--
 client/src/store/UserStore.js          |  6 ++++--
 3 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/client/src/components/TopupPayment.vue b/client/src/components/TopupPayment.vue
index 7dc643e5..187f770c 100644
--- a/client/src/components/TopupPayment.vue
+++ b/client/src/components/TopupPayment.vue
@@ -14,7 +14,7 @@
           </div>
 
           <v-sheet class="d-flex flex-column pa-5 align-center" color="primary">
-            <p class="font-weight-bold">${{ balance }}</p>
+            <p class="font-weight-bold">${{ getTotalBalance }}</p>
             <span class="text-disabled text-capitalize mt-1"
               >current balance</span
             >
@@ -111,7 +111,7 @@
   </v-row>
 </template>
 <script setup>
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import BaseInput from "./Form/BaseInput.vue";
 import BaseButton from "./Form/BaseButton.vue";
 import userService from "@/services/userService";
@@ -130,8 +130,7 @@ const loading = ref(false);
 const verifyVoucher = ref(false);
 const toast = ref(null);
 const store = useUserStore();
-const { user } = storeToRefs(store);
-const balance = ref(user.value.balance + user.value.voucher_balance);
+const { user, getTotalBalance } = storeToRefs(store);
 const defaultCard = ref(user.value.stripe_default_payment_id);
 const voucher = ref();
 const amount = ref(null);
@@ -187,14 +186,4 @@ async function chargeBalance() {
       await store.getUserInfo();
     });
 }
-
-watch(
-  user,
-  (newVal) => {
-    if (newVal) {
-      balance.value = newVal.balance;
-    }
-  },
-  { immediate: true }
-);
 </script>
diff --git a/client/src/layouts/default/AppBar.vue b/client/src/layouts/default/AppBar.vue
index eb253ab6..f49b5346 100644
--- a/client/src/layouts/default/AppBar.vue
+++ b/client/src/layouts/default/AppBar.vue
@@ -43,7 +43,7 @@
           </v-btn>
         </v-toolbar-items>
         <v-btn class="text-capitalize" flat>
-          Balance: ${{ user?.balance }}
+          Balance: ${{ getTotalBalance }}
         </v-btn>
         <v-menu id="notifications" location="bottom">
           <template v-slot:activator="{ props }">
@@ -133,7 +133,7 @@ const drawer = ref(false);
 const isActive = ref(0);
 const toast = ref(null);
 const store = useUserStore();
-const { user, isLoading, notifications } = storeToRefs(store);
+const { user, isLoading, notifications, getTotalBalance } = storeToRefs(store);
 
 const navItems = ref([
   { title: "Home", path: "/" },
diff --git a/client/src/store/UserStore.js b/client/src/store/UserStore.js
index e4a1e031..a9a500ea 100644
--- a/client/src/store/UserStore.js
+++ b/client/src/store/UserStore.js
@@ -32,7 +32,7 @@ export const useUserStore = defineStore("userStore", {
       } catch (error) {
         if (error.response.status == 401) {
           localStorage.removeItem("token");
-          router.push("/login");
+          router.push("/");
           return error;
         }
         return error;
@@ -68,7 +68,7 @@ export const useUserStore = defineStore("userStore", {
     async setNextLaunch(value) {
       try {
         const response = await userService.setNextLaunch(value);
-        return response
+        return response;
       } catch (error) {
         return error;
       }
@@ -87,5 +87,7 @@ export const useUserStore = defineStore("userStore", {
   getters: {
     isUserLoaded: (state) => state.isLoaded,
     isNextLaunchEnabled: (state) => state.next_launch_admin,
+    getTotalBalance: (state) => state.user.balance + state.user.voucher_balance,
+    isAdmin: (state) => state.user.admin,
   },
 });

From 7e27161370fa8f7bd6d362e3bc9a2e92c13779ed Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 12 Feb 2025 17:17:31 +0200
Subject: [PATCH 04/11] Update timestamp format using time-ago package

---
 .../src/views/accManagemenTabs/AuditLogs.vue  | 22 ++++++++-----------
 .../src/views/accManagemenTabs/Invoices.vue   | 18 ++++++---------
 2 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/client/src/views/accManagemenTabs/AuditLogs.vue b/client/src/views/accManagemenTabs/AuditLogs.vue
index 3dd97eb0..885bdea1 100644
--- a/client/src/views/accManagemenTabs/AuditLogs.vue
+++ b/client/src/views/accManagemenTabs/AuditLogs.vue
@@ -14,7 +14,7 @@
           </template>
 
           <template #[`item.timestamp`]="{ item }">
-            {{ formatDate(item.timestamp) }}
+            {{ timeAgo.format(convertDate(item.timestamp)) }}
           </template>
         </v-data-table>
       </v-col>
@@ -26,7 +26,11 @@
 import { ref, onMounted } from "vue";
 import userService from "@/services/userService";
 import Toast from "@/components/Toast.vue";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+TimeAgo.addLocale(en)
 
+const timeAgo = ref(new TimeAgo("en-US"));
 const events = ref([]);
 const toast = ref(null);
 const loading = ref(false);
@@ -41,6 +45,10 @@ const headers = ref([
   },
 ]);
 
+function convertDate(date) {
+  return new Date(date);
+}
+
 async function getAuditEvents() {
   loading.value = true;
   await userService
@@ -58,18 +66,6 @@ async function getAuditEvents() {
     });
 }
 
-function formatDate(date) {
-  var d = new Date(date),
-    month = "" + (d.getMonth() + 1),
-    day = "" + d.getDate(),
-    year = d.getFullYear();
-
-  if (month.length < 2) month = "0" + month;
-  if (day.length < 2) day = "0" + day;
-
-  return [day, month, year].join("-");
-}
-
 onMounted(async () => {
   await getAuditEvents();
 });
diff --git a/client/src/views/accManagemenTabs/Invoices.vue b/client/src/views/accManagemenTabs/Invoices.vue
index 4f297079..5978b08f 100644
--- a/client/src/views/accManagemenTabs/Invoices.vue
+++ b/client/src/views/accManagemenTabs/Invoices.vue
@@ -19,7 +19,7 @@
           :hide-default-footer="invoices == 0"
         >
           <template #[`item.created_at`]="{ item }">
-            {{ formatDate(item.created_at) }}
+            {{ timeAgo.format(convertDate(item.created_at)) }}
           </template>
 
           <template #[`item.invoice`]="{ item }">
@@ -52,7 +52,11 @@ import userService from "@/services/userService";
 import Toast from "@/components/Toast.vue";
 import { storeToRefs } from "pinia";
 import { useUserStore } from "@/store/UserStore";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+TimeAgo.addLocale(en);
 
+const timeAgo = ref(new TimeAgo("en-US"));
 const invoices = ref();
 const toast = ref(null);
 const message = ref();
@@ -75,16 +79,8 @@ const headers = ref([
   },
 ]);
 
-function formatDate(date) {
-  var d = new Date(date),
-    month = "" + (d.getMonth() + 1),
-    day = "" + d.getDate(),
-    year = d.getFullYear();
-
-  if (month.length < 2) month = "0" + month;
-  if (day.length < 2) day = "0" + day;
-
-  return [day, month, year].join("-");
+function convertDate(date) {
+  return new Date(date);
 }
 
 // TODO handle invoices InvoiceID

From 342534092ad41d92ef7b1d3f37b03fb45fe09371 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 12 Feb 2025 17:33:05 +0200
Subject: [PATCH 05/11] Fix !user

---
 client/src/store/UserStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/store/UserStore.js b/client/src/store/UserStore.js
index a9a500ea..d9aa05a9 100644
--- a/client/src/store/UserStore.js
+++ b/client/src/store/UserStore.js
@@ -87,7 +87,7 @@ export const useUserStore = defineStore("userStore", {
   getters: {
     isUserLoaded: (state) => state.isLoaded,
     isNextLaunchEnabled: (state) => state.next_launch_admin,
-    getTotalBalance: (state) => state.user.balance + state.user.voucher_balance,
+    getTotalBalance: (state) => state.user? state.user.balance + state.user.voucher_balance : 0,
     isAdmin: (state) => state.user.admin,
   },
 });

From 1616493461345b962490207d7e81562a54c9460a Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 12 Feb 2025 17:34:15 +0200
Subject: [PATCH 06/11] Request tab improvments

---
 client/src/views/Admin.vue              |  14 +-
 client/src/views/adminTabs/Requests.vue | 165 +++++++++++++++---------
 2 files changed, 108 insertions(+), 71 deletions(-)

diff --git a/client/src/views/Admin.vue b/client/src/views/Admin.vue
index 6682e63d..70447fbb 100644
--- a/client/src/views/Admin.vue
+++ b/client/src/views/Admin.vue
@@ -14,18 +14,12 @@
 
               <v-sheet class="px-5 py-3 d-flex align-center">
                 <v-icon class="mr-2" size="35">mdi-server</v-icon>
-                <div>
-                  <span>Used VMs: {{ usedResources }} </span><br />
-                  <span>Deployed VMs: {{ deployedResources }} </span>
-                </div>
+                <span>Deployed VMs: {{ deployedResources }} </span>
               </v-sheet>
 
               <v-sheet class="px-5 py-3 d-flex align-center">
-                <v-icon class="mr-2" size="45">mdi-ip</v-icon>
-                <div>
-                  <span>Used IPs: {{ usedIPs }} </span><br />
-                  <span>Reserved IPs: {{ reservedIPs }} </span>
-                </div>
+                <v-icon class="mr-2" size="35">mdi-ip</v-icon>
+                <span>Reserved IPs: {{ reservedIPs }} </span>
               </v-sheet>
             </template>
             <template v-slot:append>
@@ -64,7 +58,7 @@
             <v-tabs-window v-model="activeTab">
               <router-view></router-view>
             </v-tabs-window>
-          </v-card-text>x``
+          </v-card-text>
         </v-card>
       </v-col>
     </v-row>
diff --git a/client/src/views/adminTabs/Requests.vue b/client/src/views/adminTabs/Requests.vue
index b21a32c7..643e3076 100644
--- a/client/src/views/adminTabs/Requests.vue
+++ b/client/src/views/adminTabs/Requests.vue
@@ -23,7 +23,7 @@
                 </p>
               </div>
             </div>
-            <div v-else>
+            <div class="d-flex align-center" v-else>
               <v-avatar color="warning" size="30" class="mr-2">
                 <span class="text-uppercase">A</span>
               </v-avatar>
@@ -33,7 +33,10 @@
             </div>
           </template>
           <template #[`item.created_at`]="{ item }">
-            {{ formatDate(item.created_at) }}
+            {{ timeAgo.format(convertDate(item.created_at)) }}
+          </template>
+          <template #[`item.balance`]="{ item }">
+            {{ item.balance > 0 ? `$${item.balance}` : item.balance }}
           </template>
           <template #[`item.actions`]="{ item }">
             <BaseButton
@@ -54,17 +57,16 @@
         </v-data-table>
         <div class="d-flex justify-end">
           <BaseButton
-            color="info"
+            color="secondary"
             text="Approve All"
             class="my-2"
-            :disabled="approveAllCount == 0"
+            :disabled="pendingVouchers > 0"
             @click="approveAllVouchers"
           />
         </div>
       </v-col>
       <v-col cols="12" md="4">
         <v-data-table
-          :loading="loading"
           :headers="usersHeaders"
           :items="users"
           class="d-flex justify-center elevation-1"
@@ -72,13 +74,15 @@
         >
           <template #[`item.id`]="{ index }"> {{ index + 1 }} </template>
 
-          <template #[`item.name`]="{ item }">
-            <div class="d-flex align-center" v-if="item.name">
+          <template #[`item.first_name`]="{ item }">
+            <div class="d-flex align-center" v-if="item.first_name">
               <v-avatar color="secondary" size="30" class="mr-2">
-                <span class="text-uppercase">{{ userAvatar(item.name) }}</span>
+                <span class="text-uppercase">{{
+                  userAvatar(item.first_name)
+                }}</span>
               </v-avatar>
               <div>
-                <p>{{ item.name }}</p>
+                <p>{{ item.first_name }}</p>
                 <p>
                   {{ item.email }}
                 </p>
@@ -93,12 +97,26 @@
               </div>
             </div>
           </template>
+          <template #[`item.count.vms`]="{ item }">
+            {{ item.count.vms }}
+          </template>
+          <template #[`item.count.ips`]="{ item }">
+            {{ item.count.ips }}
+          </template>
+
           <template #[`item.created_at`]="{ item }">
-            {{ formatDate(item.created_at) }}
+            <timeago :datetime="item.created_at"></timeago>
           </template>
           <template #[`item.actions`]="{ item }">
-            <v-icon v-if="item" class="mr-2">mdi-information</v-icon>
-            <v-icon>mdi-account-lock</v-icon>
+            <v-icon class="mr-2">mdi-information</v-icon>
+            <v-icon
+              v-if="item.admin"
+              @click="setAdmin(item.email, !item.admin)"
+              >mdi-account-key</v-icon
+            >
+            <v-icon v-else @click="setAdmin(item.email, !item.admin)"
+              >mdi-account-lock</v-icon
+            >
           </template>
         </v-data-table></v-col
       >
@@ -108,10 +126,17 @@
 </template>
 <script setup>
 import { ref, onMounted } from "vue";
+import router from "@/router";
 import userService from "@/services/userService";
 import BaseButton from "@/components/Form/BaseButton.vue";
 import Toast from "@/components/Toast.vue";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+import { storeToRefs } from "pinia";
+import { useUserStore } from "@/store/UserStore";
 
+TimeAgo.addLocale(en);
+const timeAgo = ref(new TimeAgo("en-US"));
 const vouchers = ref([]);
 const pendingVouchers = ref([]);
 const approveAllCount = ref(0);
@@ -119,77 +144,77 @@ const userInfo = ref(null);
 const users = ref([]);
 const toast = ref(null);
 const loading = ref(false);
+const store = useUserStore();
+const { isAdmin } = storeToRefs(store);
 
 const pendingVouchersHeaders = ref([
   { title: "No", key: "id" },
   { title: "User", key: "name", sortable: false },
   { title: "Created at", key: "created_at" },
   { title: "Reason for Voucher", key: "reason", sortable: false },
-  { title: "VMs", key: "vms" },
+  { title: "Balance", key: "balance" },
   { title: "Voucher", key: "voucher" },
   { title: "Actions", key: "actions", sortable: false },
 ]);
 
 const usersHeaders = ref([
   { title: "No", key: "id", sortable: false },
-  { title: "Name", key: "name", sortable: false },
-  { title: "VMs", key: "vms", sortable: false },
-  { title: "IPs", key: "public_ips", sortable: false },
+  { title: "Name", key: "first_name", sortable: false },
+  { title: "VMs", key: "count.vms", sortable: false },
+  { title: "IPs", key: "count.ips", sortable: false },
   { title: "Actions", key: "actions", sortable: false },
 ]);
 
-function getVouchers() {
+async function getVouchers() {
   loading.value = true;
-  userService
-    .getVouchers()
-    .then((response) => {
-      const { data } = response.data;
-      approveAllCount.value = 0;
 
-      let updateDataPromise = data.map(function (voucher) {
-        return new Promise(function (resolve) {
-          setTimeout(() => {
-            if (voucher.approved && voucher.rejected) {
-              approveAllCount.value++;
-            }
+  try {
+    const response = await userService.getVouchers();
+    const { data } = response.data;
+
+    approveAllCount.value = 0;
+
+    await updateVouchers(data);
+
+    vouchers.value = data.filter(
+      (voucher) => voucher.approved || voucher.rejected
+    );
+    pendingVouchers.value = data.filter(
+      (voucher) => !voucher.approved && !voucher.rejected
+    );
+  } catch (error) {
+    const { err } = error.response.data;
+    toast.value.toast(err, "#FF5252");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function updateVouchers(data) {
+  const updatePromises = data.map(async (voucher) => {
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    if (voucher.approved && voucher.rejected) {
+      approveAllCount.value++;
+    }
 
-            if (users.value && voucher.user_id) {
-              userInfo.value = users.value.find(
-                (user) => user.ID === voucher.user_id
-              );
+    if (users.value && voucher.user_id) {
+      userInfo.value = users.value.find((user) => user.ID === voucher.user_id);
 
-              if (voucher.user_id === userInfo.value.ID) {
-                Object.assign(voucher, {
-                  email: userInfo.value.email,
-                  name: userInfo.value.first_name,
-                });
-              }
-            }
-            resolve();
-          }, 10);
+      if (userInfo.value && voucher.user_id === userInfo.value.ID) {
+        Object.assign(voucher, {
+          email: userInfo.value.email,
+          name: userInfo.value.first_name,
         });
-      });
+      }
+    }
+  });
 
-      Promise.all(updateDataPromise).then(function () {
-        vouchers.value = data.filter(
-          (voucher) => voucher.approved || voucher.rejected
-        );
-        pendingVouchers.value = data.filter(
-          (voucher) => !voucher.approved && !voucher.rejected
-        );
-      });
-    })
-    .catch((response) => {
-      const { err } = response.response.data;
-      toast.value.toast(err, "#FF5252");
-    })
-    .finally(() => {
-      loading.value = false;
-    });
+  await Promise.all(updatePromises);
 }
 
-function formatDate(date) {
-  return new Date(date).toLocaleString();
+function convertDate(date) {
+  return new Date(date);
 }
 
 async function getUsers() {
@@ -239,9 +264,27 @@ async function approveAllVouchers() {
     });
 }
 
+async function setAdmin(email, admin) {
+  await userService
+    .setAdmin(email, admin)
+    .then(async (response) => {
+      toast.value.toast(response.data.msg, "#388E3C");
+      if (!isAdmin) {
+        router.push({
+          name: "Home",
+        });
+      }
+      await getUsers();
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    });
+}
+
 onMounted(async () => {
-  await getVouchers();
   await getUsers();
+  await getVouchers();
 });
 </script>
 <style>

From 4d0a59d888a33205c157724d7f4688e0d9802882 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 12 Feb 2025 18:50:59 +0200
Subject: [PATCH 07/11] Verify admin before entering admin page

---
 client/src/router/index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/client/src/router/index.js b/client/src/router/index.js
index dba083c8..c603e16f 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -147,6 +147,14 @@ const routes = [
     path: "/admin",
     name: "Admin",
     component: Admin,
+    beforeEnter(to, from, next) {
+      const store = useUserStore();
+
+      if (!store.isAdmin) {
+        next("/");
+      }
+      next();
+    },
     meta: {
       layout: "Default",
       requiresAuth: true,

From 8347e76d8e8ed91426fb8b939c11f3ca96c89dfd Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 12 Feb 2025 18:52:10 +0200
Subject: [PATCH 08/11] Handle admin after unassigning

---
 client/src/views/adminTabs/Requests.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/src/views/adminTabs/Requests.vue b/client/src/views/adminTabs/Requests.vue
index 643e3076..77a28958 100644
--- a/client/src/views/adminTabs/Requests.vue
+++ b/client/src/views/adminTabs/Requests.vue
@@ -109,9 +109,7 @@
           </template>
           <template #[`item.actions`]="{ item }">
             <v-icon class="mr-2">mdi-information</v-icon>
-            <v-icon
-              v-if="item.admin"
-              @click="setAdmin(item.email, !item.admin)"
+            <v-icon v-if="item.admin" @click="setAdmin(item.email, !item.admin)"
               >mdi-account-key</v-icon
             >
             <v-icon v-else @click="setAdmin(item.email, !item.admin)"
@@ -270,9 +268,7 @@ async function setAdmin(email, admin) {
     .then(async (response) => {
       toast.value.toast(response.data.msg, "#388E3C");
       if (!isAdmin) {
-        router.push({
-          name: "Home",
-        });
+        router.push("/");
       }
       await getUsers();
     })

From 176f4538ff6e578dd3cdcc7271bd861f36ff5647 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 13 Feb 2025 17:31:26 +0200
Subject: [PATCH 09/11] init History tab

---
 client/src/views/adminTabs/History.vue | 104 ++++++++++++++++++++++++-
 1 file changed, 102 insertions(+), 2 deletions(-)

diff --git a/client/src/views/adminTabs/History.vue b/client/src/views/adminTabs/History.vue
index 26f8bd91..c7a3a020 100644
--- a/client/src/views/adminTabs/History.vue
+++ b/client/src/views/adminTabs/History.vue
@@ -1,5 +1,105 @@
 <template>
-  <div>History</div>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <v-data-table
+          :headers="vouchersHeaders"
+          :items="vouchers"
+          :loading="vouchers.length == 0"
+          sort-desc.sync
+          class="d-flex justify-center elevation-1"
+          :hide-default-footer="vouchers.length == 0"
+        >
+          <template #[`item.id`]="{ index }"> {{ index + 1 }} </template>
+
+          <template #[`item.name`]="{ item }">
+            <div class="d-flex align-center" v-if="item.name">
+              <v-avatar color="secondary" size="30" class="mr-2">
+                <span class="text-uppercase">{{ userAvatar(item.name) }}</span>
+              </v-avatar>
+              <div>
+                <p>{{ item.name }}</p>
+                <p>
+                  {{ item.email }}
+                </p>
+              </div>
+            </div>
+            <div class="d-flex align-center" v-else>
+              <v-avatar color="warning" size="30" class="mr-2">
+                <span class="text-uppercase">A</span>
+              </v-avatar>
+              <div>
+                <p>Voucher generated by Admin</p>
+              </div>
+            </div>
+          </template>
+          <template #[`item.created_at`]="{ item }">
+            {{ timeAgo.format(convertDate(item.created_at)) }}
+          </template>
+          <template #[`item.updated_at`]="{ item }">
+            {{ timeAgo.format(convertDate(item.updated_at)) }}
+          </template>
+
+          <template #[`item.reason`]="{ item }">
+            {{ item.reason || "-" }}
+          </template>
+
+          <template #[`item.balance`]="{ item }">
+            {{ item.balance > 0 ? `$${item.balance}` : item.balance }}
+          </template>
+
+          <template #[`item.actions`]="{ item }">
+            <BaseButton
+              v-if="item.rejected"
+              variant="text"
+              color="error"
+              text="Rejected"
+              class="mr-1 text-capitalize"
+            />
+            <BaseButton
+              v-else
+              variant="text"
+              color="success"
+              text="Approved"
+              class="mr-1 text-capitalize"
+            />
+          </template>
+        </v-data-table>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from "vue";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+import BaseButton from "@/components/Form/BaseButton.vue";
+
+TimeAgo.addLocale(en);
+defineProps({
+  vouchers: {
+    type: Array,
+  },
+});
+
+const vouchersHeaders = ref([
+  { title: "#", key: "id" },
+  { title: "User", key: "name", sortable: false },
+  { title: "created at", key: "created_at" },
+  { title: "Updated at", key: "updated_at" },
+  { title: "Reason for Voucher", key: "reason", sortable: false },
+  { title: "Balance", key: "balance" },
+  { title: "Voucher", key: "voucher" },
+  { title: "Actions", key: "actions", sortable: false },
+]);
+const timeAgo = ref(new TimeAgo("en-US"));
+
+function userAvatar(name) {
+  return name.charAt(0);
+}
+
+function convertDate(date) {
+  return new Date(date);
+}
+</script>

From a2d4725b3af852b01f2fbd9f097323bd16c0d10e Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 13 Feb 2025 17:33:24 +0200
Subject: [PATCH 10/11] Pass data from admin page to the dynamic route

---
 client/src/views/Admin.vue              | 611 +++---------------------
 client/src/views/adminTabs/Requests.vue |  68 +--
 2 files changed, 71 insertions(+), 608 deletions(-)

diff --git a/client/src/views/Admin.vue b/client/src/views/Admin.vue
index 70447fbb..4e1c0a3e 100644
--- a/client/src/views/Admin.vue
+++ b/client/src/views/Admin.vue
@@ -56,419 +56,16 @@
 
           <v-card-text>
             <v-tabs-window v-model="activeTab">
-              <router-view></router-view>
+              <router-view
+                :vouchers="vouchers"
+                :pendingVouchers="pendingVouchers"
+                @update-vouchers="getVouchers"
+              />
             </v-tabs-window>
           </v-card-text>
         </v-card>
       </v-col>
     </v-row>
-    <!-- <v-row>
-      <v-col cols="12" md="8">
-        <v-data-table
-          v-model:items-per-page="itemsPerPage"
-          :headers="vouchersHeaders"
-          :items="vouchers"
-          class="elevation-1 my-2 rounded shadow"
-        >
-          <template v-slot:item="{ item }">
-            <tr>
-              <td>{{ item.id }}</td>
-              <td v-if="item.name" class="d-flex align-center">
-                <v-avatar color="primary" size="30" class="mr-2">
-                  <span class="text-uppercase">{{ addAvatar(item.name) }}</span>
-                </v-avatar>
-                <div>
-                  <p>{{ item.name }}</p>
-                  <p>
-                    {{ item.email }}
-                  </p>
-                </div>
-              </td>
-
-              <td class="d-flex align-center" v-else>
-                <v-avatar color="warning" size="30" class="mr-2">
-                  <span class="text-uppercase">A</span>
-                </v-avatar>
-                <div>
-                  <p>Voucher generated by Admin</p>
-                </div>
-              </td>
-              <td v-if="!dateIsNull(item.updated_at)">
-                {{ stringDate(item.updated_at) }}
-              </td>
-              <td v-else>-</td>
-              <td v-if="item.reason">{{ item.reason }}</td>
-              <td v-else>-</td>
-              <td>{{ item.vms }}</td>
-              <td>{{ item.public_ips }}</td>
-              <td>{{ item.voucher }}</td>
-              <td v-if="item.rejected">
-                <span class="text-error">Rejected</span>
-              </td>
-              <td v-else>
-                <span class="text-success">Approved</span>
-              </td>
-            </tr>
-          </template>
-        </v-data-table>
-        <v-data-table
-          v-model:items-per-page="itemsPerPage"
-          :headers="pendingVouchersHeaders"
-          :items="pendingVouchers"
-          class="elevation-1 my-2 rounded shadow"
-        >
-          <template v-slot:item="{ item }">
-            <tr>
-              <td>{{ item.id }}</td>
-              <td v-if="item.name" class="d-flex align-center">
-                <v-avatar color="primary" size="30" class="mr-2">
-                  <span class="text-uppercase">{{ addAvatar(item.name) }}</span>
-                </v-avatar>
-                <div>
-                  <p>{{ item.name }}</p>
-                  <p>
-                    {{ item.email }}
-                  </p>
-                </div>
-              </td>
-
-              <td class="d-flex align-center" v-else>
-                <v-avatar color="warning" size="30" class="mr-2">
-                  <span class="text-uppercase">A</span>
-                </v-avatar>
-                <div>
-                  <p>Voucher generated by Admin</p>
-                </div>
-              </td>
-              <td v-if="!dateIsNull(item.created_at)">
-                {{ stringDate(item.created_at) }}
-              </td>
-              <td v-else>-</td>
-              <td v-if="item.reason">{{ item.reason }}</td>
-              <td v-else>-</td>
-              <td>{{ item.vms }}</td>
-              <td>{{ item.public_ips }}</td>
-              <td v-if="!item.approved && !item.rejected">
-                <v-row>
-                  <v-col cols="6">
-                    <BaseButton
-                      color="primary"
-                      text="Approve"
-                      size="small"
-                      class="mr-1 px-8 text-capitalize"
-                      variant="flat"
-                      @click="approveVoucher(item.id, true)"
-                    />
-                  </v-col>
-                  <v-col cols="6">
-                    <BaseButton
-                      color="red-lighten-1"
-                      text="Reject"
-                      size="small"
-                      class="text-capitalize"
-                      variant="flat"
-                      @click="approveVoucher(item.id, false)"
-                    />
-                  </v-col>
-                </v-row>
-              </td>
-            </tr>
-          </template>
-        </v-data-table>
-        <div class="actions d-flex justify-end my-2">
-          <div class="text-center">
-            <v-dialog v-model="announcementDialog" width="auto">
-              <template v-slot:activator="{ props }">
-                <BaseButton
-                  color="primary"
-                  text="Send an announcement"
-                  class="text-capitalize mr-2"
-                  v-bind="props"
-                />
-              </template>
-
-              <v-card class="pa-5">
-                <v-form @submit.prevent="sendAnnouncement" ref="form">
-                  <v-card-text>
-                    <h5
-                      class="text-h5 text-md-h4 text-center mb-5 pa-5 secondary"
-                    >
-                      Send an announcement
-                    </h5>
-                    <v-text-field
-                      label="Subject"
-                      v-model="subject"
-                      :rules="requiredRules"
-                      oninput="validity.valid||(value='')"
-                      bg-color="accent"
-                      variant="outlined"
-                      density="compact"
-                      class="my-3"
-                    ></v-text-field>
-
-                    <v-textarea
-                      clearable
-                      label="Announcement"
-                      v-model="announcement"
-                      :rules="requiredRules"
-                      oninput="validity.valid||(value='')"
-                      bg-color="accent"
-                      variant="outlined"
-                      density="compact"
-                      class="my-3"
-                    ></v-textarea>
-                  </v-card-text>
-                  <v-card-actions class="justify-center">
-                    <BaseButton
-                      class="bg-primary mr-5"
-                      text="Cancel"
-                      @click="announcementDialog = false"
-                    />
-                    <BaseButton type="submit" class="bg-primary" text="Send" />
-                  </v-card-actions>
-                </v-form>
-              </v-card>
-            </v-dialog>
-          </div>
-          <div class="text-center">
-            <v-dialog v-model="dialog" width="auto">
-              <template v-slot:activator="{ props }">
-                <BaseButton
-                  color="warning"
-                  text="Generate a voucher"
-                  class="text-capitalize mr-2"
-                  v-bind="props"
-                />
-              </template>
-
-              <v-card class="pa-5">
-                <v-form @submit.prevent="generateVoucher" ref="form">
-                  <v-card-text>
-                    <h5
-                      class="text-h5 text-md-h4 text-center mb-5 pa-5 secondary"
-                    >
-                      Generate a voucher
-                    </h5>
-                    <v-row>
-                      <v-col>
-                        <v-text-field
-                          label="VMs"
-                          v-model="vms"
-                          :rules="requiredRules"
-                          min="1"
-                          type="number"
-                          oninput="validity.valid||(value='')"
-                          bg-color="accent"
-                          variant="outlined"
-                          density="compact"
-                        ></v-text-field>
-                      </v-col>
-                      <v-col>
-                        <v-text-field
-                          label="IPs"
-                          v-model="ips"
-                          :rules="requiredRules"
-                          min="0"
-                          oninput="validity.valid||(value='')"
-                          type="number"
-                          bg-color="accent"
-                          variant="outlined"
-                          density="compact"
-                        ></v-text-field>
-                      </v-col>
-                    </v-row>
-
-                    <v-text-field
-                      label="Length"
-                      v-model="length"
-                      :rules="requiredRules"
-                      min="3"
-                      max="20"
-                      oninput="validity.valid||(value='')"
-                      type="number"
-                      bg-color="accent"
-                      variant="outlined"
-                      density="compact"
-                      class="my-3"
-                    ></v-text-field>
-                  </v-card-text>
-                  <v-card-actions class="justify-center">
-                    <BaseButton
-                      class="bg-primary mr-5"
-                      text="Cancel"
-                      @click="dialog = false"
-                    />
-                    <BaseButton
-                      type="submit"
-                      class="bg-primary"
-                      text="Generate"
-                    />
-                  </v-card-actions>
-                </v-form>
-              </v-card>
-            </v-dialog>
-          </div>
-          <div class="text-center">
-            <template v-if="nextLaunchDialog">
-              <BaseButton
-                color="green"
-                text="Disable Launch"
-                class="text-capitalize mr-2"
-                @click="setNextLaunch"
-              />
-            </template>
-            <template v-else>
-              <BaseButton
-                color="red"
-                text="Enable Launch"
-                class="text-capitalize mr-2"
-                @click="setNextLaunch"
-              />
-            </template>
-          </div>
-          <BaseButton
-            :disabled="approveAllCount <= 0"
-            color="success"
-            text="Approve All"
-            class="approve text-capitalize"
-            @click="approveAllVouchers"
-          />
-        </div>
-      </v-col>
-      <v-col cols="12" md="4">
-        <v-col class="pa-0">
-          <div
-            class="balance text-primary pa-3 my-2 text-center rounded-lg bg-white shadow"
-          >
-            <p class="mx-lg-auto font-weight-medium">Balance</p>
-            <strong style="font-size: 2rem">{{ balance }} TFT</strong>
-          </div>
-        </v-col>
-        <v-row>
-          <v-col>
-            <div
-              class="resources text-white text-center rounded-lg bg-primary py-5 shadow"
-            >
-              <p class="mx-lg-auto font-weight-medium">
-                Used VMs: {{ usedResources }}
-              </p>
-              <p class="mx-lg-auto font-weight-medium">
-                Deployed VMs: {{ deployedResources }}
-              </p>
-            </div>
-          </v-col>
-          <v-col>
-            <div
-              class="resources text-white text-center rounded-lg bg-primary py-5 shadow"
-            >
-              <p class="mx-lg-auto font-weight-medium">
-                Used IPs: {{ usedIPs }}
-              </p>
-              <p class="mx-lg-auto font-weight-medium">
-                Reserved IPs: {{ reservedIPs }}
-              </p>
-            </div>
-          </v-col>
-        </v-row>
-        <section class="my-5">
-          <v-data-table
-            v-model:items-per-page="itemsPerPage"
-            :headers="usersHeaders"
-            :items="users"
-            class="elevation-1"
-          >
-            <template v-slot:item="{ item, index }">
-              <tr>
-                <td>
-                  {{ ++index }}
-                </td>
-                <td v-if="item.name" class="d-flex align-center">
-                  <v-avatar color="primary" size="30" class="mr-2">
-                    <v-icon
-                      v-if="item.admin"
-                      icon="mdi-account-key"
-                      size="17"
-                    ></v-icon>
-                    <span v-else class="text-uppercase">
-                      {{ addAvatar(item.name) }}
-                    </span>
-                  </v-avatar>
-                  <div>
-                    <p>{{ item.name }}</p>
-                    <p>
-                      {{ item.email }}
-                    </p>
-                  </div>
-                </td>
-                <td>
-                  <span class="text-red">{{ item.used_vms }}</span>
-                  /<span>{{ item.vms }}</span>
-                </td>
-                <td>
-                  <span class="text-red">{{ item.used_public_ips }}</span
-                  >/<span>{{ item.public_ips }}</span>
-                </td>
-                <td>
-                  <v-row>
-                    <v-tooltip block text="View user" left>
-                      <template v-slot:activator="{ props }">
-                        <v-icon
-                          v-bind="props"
-                          color="primary"
-                          dark
-                          class="ml-3 text-primary cursor-pointer"
-                          @click="openUserInfo(item)"
-                        >
-                          mdi-information
-                        </v-icon>
-                      </template>
-                    </v-tooltip>
-
-                    <v-tooltip v-if="!item.admin" block text="Set admin" left>
-                      <template v-slot:activator="{ props }">
-                        <v-icon
-                          v-bind="props"
-                          color="primary"
-                          dark
-                          class="ml-1 text-primary cursor-pointer"
-                          @click="setAdmin(item, true)"
-                        >
-                          mdi-account-key
-                        </v-icon>
-                      </template>
-                    </v-tooltip>
-
-                    <v-tooltip v-if="item.admin" block text="Remove admin" left>
-                      <template v-slot:activator="{ props }">
-                        <v-icon
-                          v-bind="props"
-                          color="primary"
-                          dark
-                          class="ml-1 text-primary cursor-pointer"
-                          @click="setAdmin(item, false)"
-                        >
-                          mdi-account-lock
-                        </v-icon>
-                      </template>
-                    </v-tooltip>
-                  </v-row>
-                </td>
-              </tr>
-            </template>
-          </v-data-table>
-        </section>
-      </v-col>
-    </v-row>
-    <v-dialog transition="dialog-top-transition" v-model="showUserInfo">
-      <UserInfo :user="userInfo"></UserInfo>
-    </v-dialog>
-    <Toast ref="toast" />
-    <Voucher
-      v-if="voucher"
-      :msg="message"
-      :voucher="voucher"
-      :reset="resetVoucher"
-    /> -->
     <Toast ref="toast" />
   </v-container>
 </template>
@@ -480,43 +77,12 @@ import userService from "@/services/userService.js";
 import Toast from "@/components/Toast.vue";
 import { storeToRefs } from "pinia";
 import { useUserStore } from "@/store/UserStore";
-// import Voucher from "@/components/Voucher.vue";
-// import UserInfo from "@/components/UserInfo.vue";
-// import { useRouter } from "vue-router";
-
-// const router = useRouter();
-// const confirm = ref(null);
-// const vouchersHeaders = ref([
-//   { title: "No", key: "id" },
-//   { title: "User", key: "user", sortable: false },
-//   { title: "Updated at", key: "updated_at" },
-//   { title: "Reason for Voucher", key: "reason", sortable: false },
-//   { title: "VMs", key: "vms" },
-//   { title: "Public IPs", key: "public_ips" },
-//   { title: "Voucher", key: "voucher" },
-//   { title: "Actions", key: "actions", sortable: false },
-// ]);
-
-// const pendingVouchersHeaders = ref([
-//   { title: "No", key: "id" },
-//   { title: "User", key: "user", sortable: false },
-//   { title: "Created at", key: "created_at" },
-//   { title: "Reason for Voucher", key: "reason", sortable: false },
-//   { title: "VMs", key: "vms" },
-//   { title: "Public IPs", key: "public_ips" },
-//   { title: "Actions", key: "actions", sortable: false },
-// ]);
-
-// const usersHeaders = ref([
-//   { title: "No", key: "id", sortable: false },
-//   { title: "Name", key: "name", sortable: false },
-//   { title: "VMs", key: "vms", sortable: false },
-//   { title: "IPs", key: "public_ips", sortable: false },
-//   { title: "Actions", key: "actions", sortable: false },
-// ]);
-
-// const form = ref(null);
+import router from "@/router";
 
+const vouchers = ref([]);
+const pendingVouchers = ref([]);
+const approveAllCount = ref(0);
+const userInfo = ref(null);
 const users = ref([]);
 const toast = ref();
 const tabs = ref([
@@ -524,22 +90,14 @@ const tabs = ref([
   { name: "Users History", route: `/admin/history` },
 ]);
 const activeTab = ref(tabs.value[0]);
-
-// const loading = ref(false);
+const loading = ref(false);
 const usedResources = ref(0);
 const deployedResources = ref(0);
 const balance = ref(0);
 const usedIPs = ref(0);
 const reservedIPs = ref(0);
-// const itemsPerPage = ref(5);
-const dialog = ref(false);
 const announcementDialog = ref(false);
 // const showUserInfo = ref(false);
-const vms = ref(1);
-const ips = ref(0);
-const length = ref(3);
-// const message = ref(null);
-// const voucher = ref(null);
 const subject = ref(null);
 const announcement = ref(null);
 const nextLaunchDialog = ref(false);
@@ -547,36 +105,6 @@ const store = useUserStore();
 const { isNextLaunchEnabled } = storeToRefs(store);
 nextLaunchDialog.value = localStorage.getItem("nextlaunchadmin") == "true";
 
-// const requiredRules = ref([
-//   (value) => {
-//     if (value === "") return "Field is required";
-//     return true;
-//   },
-// ]);
-
-// const setAdmin = (user, admin) => {
-//   userService
-//     .setAdmin(user.email, admin)
-//     .then((response) => {
-//       toast.value.toast(response.data.msg, "#388E3C");
-
-//       userService.getUser().then((response) => {
-//         const current_user = response.data.data.user;
-//         if (!current_user.admin) {
-//           router.push({
-//             name: "Home",
-//           });
-//         }
-//       });
-
-//       getUsers();
-//     })
-//     .catch((response) => {
-//       const { err } = response.response.data;
-//       toast.value.toast(err, "#FF5252");
-//     });
-// };
-
 // const openUserInfo = (user) => {
 //   showUserInfo.value = true;
 //   userInfo.value = user;
@@ -627,19 +155,51 @@ const getBalance = () => {
     });
 };
 
-if (localStorage.getItem("token")) {
-  setInterval(() => {
-    getBalance();
-  }, 30 * 1000);
+async function getVouchers() {
+  loading.value = true;
+
+  try {
+    const response = await userService.getVouchers();
+    const { data } = response.data;
+
+    await updateVouchers(data);
+
+    vouchers.value = data.filter(
+      (voucher) => voucher.approved || voucher.rejected
+    );
+    pendingVouchers.value = data.filter(
+      (voucher) => !voucher.approved && !voucher.rejected
+    );
+  } catch (error) {
+    const { err } = error.response.data;
+    toast.value.toast(err, "#FF5252");
+  } finally {
+    loading.value = false;
+  }
 }
 
-watch(dialog, (val) => {
-  if (val) {
-    vms.value = 1;
-    ips.value = 0;
-    length.value = 3;
-  }
-});
+async function updateVouchers(data) {
+  const updatePromises = data.map(async (voucher) => {
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    if (voucher.approved && voucher.rejected) {
+      approveAllCount.value++;
+    }
+
+    if (users.value && voucher.user_id) {
+      userInfo.value = users.value.find((user) => user.ID === voucher.user_id);
+
+      if (userInfo.value && voucher.user_id === userInfo.value.ID) {
+        Object.assign(voucher, {
+          email: userInfo.value.email,
+          name: userInfo.value.first_name,
+        });
+      }
+    }
+  });
+
+  await Promise.all(updatePromises);
+}
 
 watch(announcementDialog, (val) => {
   if (val) {
@@ -692,7 +252,8 @@ function setNextLaunch() {
     .then((response) => {
       const { msg } = response.data;
       toast.value.toast(msg, "#388E3C");
-      store.getNextLaunch();
+      store.next_launch_admin = false;
+      router.push("/nextlaunch");
     })
     .catch((response) => {
       const { err } = response.response.data;
@@ -700,62 +261,10 @@ function setNextLaunch() {
     });
 }
 
-// const resetVoucher = () => {
-//   message.value = null;
-//   voucher.value = null;
-// };
-
-// const dateIsNull = (date) => {
-//   return (
-//     new Date(date).toLocaleString() == new Date("0001-01-01").toLocaleString()
-//   );
-// };
-
-// const stringDate = (date) => {
-//   return new Date(date).toLocaleString();
-// };
-
 onMounted(() => {
-  let token = localStorage.getItem("token");
-  if (token) {
-    getUsers();
-    // getVouchers();
-    getBalance();
-    getDeploymentsCount();
-  }
+  getUsers();
+  getVouchers();
+  getBalance();
+  getDeploymentsCount();
 });
-// beforeRouteEnter(to, from, next) {
-//   userService
-//     .getUser()
-//     .then((response) => {
-//       const { user } = response.data.data;
-//       const isAdmin = user.admin;
-//       if (isAdmin) {
-//         next();
-//       } else {
-//         next("/home");
-//       }
-//     })
-//     .catch((err) => {
-//       console.log(err);
-//     });
-// },
 </script>
-
-<!-- <style>
-.resources {
-  margin-top: 0.5rem;
-}
-
-.balance {
-  border: 3px solid #217dbb;
-}
-
-td {
-  line-height: 1em;
-}
-
-.shadow {
-  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.1);
-}
-</style> -->
diff --git a/client/src/views/adminTabs/Requests.vue b/client/src/views/adminTabs/Requests.vue
index 77a28958..8bc71270 100644
--- a/client/src/views/adminTabs/Requests.vue
+++ b/client/src/views/adminTabs/Requests.vue
@@ -133,12 +133,15 @@ import en from "javascript-time-ago/locale/en";
 import { storeToRefs } from "pinia";
 import { useUserStore } from "@/store/UserStore";
 
+defineProps({
+  pendingVouchers: {
+    type: Array,
+  },
+});
+const emit = defineEmits("updateVouchers");
+
 TimeAgo.addLocale(en);
 const timeAgo = ref(new TimeAgo("en-US"));
-const vouchers = ref([]);
-const pendingVouchers = ref([]);
-const approveAllCount = ref(0);
-const userInfo = ref(null);
 const users = ref([]);
 const toast = ref(null);
 const loading = ref(false);
@@ -163,54 +166,6 @@ const usersHeaders = ref([
   { title: "Actions", key: "actions", sortable: false },
 ]);
 
-async function getVouchers() {
-  loading.value = true;
-
-  try {
-    const response = await userService.getVouchers();
-    const { data } = response.data;
-
-    approveAllCount.value = 0;
-
-    await updateVouchers(data);
-
-    vouchers.value = data.filter(
-      (voucher) => voucher.approved || voucher.rejected
-    );
-    pendingVouchers.value = data.filter(
-      (voucher) => !voucher.approved && !voucher.rejected
-    );
-  } catch (error) {
-    const { err } = error.response.data;
-    toast.value.toast(err, "#FF5252");
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function updateVouchers(data) {
-  const updatePromises = data.map(async (voucher) => {
-    await new Promise((resolve) => setTimeout(resolve, 10));
-
-    if (voucher.approved && voucher.rejected) {
-      approveAllCount.value++;
-    }
-
-    if (users.value && voucher.user_id) {
-      userInfo.value = users.value.find((user) => user.ID === voucher.user_id);
-
-      if (userInfo.value && voucher.user_id === userInfo.value.ID) {
-        Object.assign(voucher, {
-          email: userInfo.value.email,
-          name: userInfo.value.first_name,
-        });
-      }
-    }
-  });
-
-  await Promise.all(updatePromises);
-}
-
 function convertDate(date) {
   return new Date(date);
 }
@@ -241,12 +196,12 @@ async function approveVoucher(id, approved) {
     .approveVoucher(id, approved)
     .then(async (response) => {
       toast.value.toast(response.data.msg, "#388E3C");
-      await getVouchers();
     })
     .catch((response) => {
       const { err } = response.response.data;
       toast.value.toast(err, "#FF5252");
-    });
+    })
+    .finally(() => emit("updateData"));
 }
 
 async function approveAllVouchers() {
@@ -254,12 +209,12 @@ async function approveAllVouchers() {
     .approveAllVouchers()
     .then(async (response) => {
       toast.value.toast(response.data.msg, "#388E3C");
-      await getVouchers();
     })
     .catch((response) => {
       const { err } = response.response.data;
       toast.value.toast(err, "#FF5252");
-    });
+    })
+    .finally(() => emit("updateData"));
 }
 
 async function setAdmin(email, admin) {
@@ -280,7 +235,6 @@ async function setAdmin(email, admin) {
 
 onMounted(async () => {
   await getUsers();
-  await getVouchers();
 });
 </script>
 <style>

From c378bbabaab66a1ef16961cdf90ca9ef9765ad36 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 13 Feb 2025 17:33:53 +0200
Subject: [PATCH 11/11] Handle next launch route

---
 client/src/router/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/router/index.js b/client/src/router/index.js
index c603e16f..f1dba894 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -191,13 +191,13 @@ const router = createRouter({
 });
 
 router.beforeEach(async (to, from, next) => {
-  const isAuthenticated = localStorage.getItem("token") !== null;
   const store = useUserStore();
+  const { isAuthenticated, user } = store;
 
   if (to.meta.requiresAuth && !isAuthenticated) {
     next("/");
   } else {
-    if (!store.user && isAuthenticated) await store.getUserInfo();
+    if (!user && isAuthenticated) await store.getUserInfo();
     next();
   }
 });