From fea90831bb8fc6e606202bfabc0aae5eea33a5b3 Mon Sep 17 00:00:00 2001
From: programmernb-ctrl <141086417+programmernb-ctrl@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:11:25 +0100
Subject: [PATCH 01/10] Update

---
 server/index.ts        | 74 +++++++++++++++++++++++++++---------------
 shared/events.ts       | 15 +++++----
 webview/Adminpanel.vue | 36 +++++++++++++-------
 webview/Users.vue      | 66 ++++++++++++++++---------------------
 4 files changed, 107 insertions(+), 84 deletions(-)

diff --git a/server/index.ts b/server/index.ts
index a73231f..5a5bec9 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -1,24 +1,32 @@
 import * as alt from 'alt-server';
 import { useRebar } from '@Server/index.js';
 import { adminpanelConfig } from '@Plugins/rebar-adminpanel/shared/config.js';
-import { adminPanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
+import { adminpanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
 
 const Rebar = useRebar();
+
 const getter = Rebar.get.usePlayersGetter();
-const Keybinder = Rebar.useKeybinder();
+const worldGetter = Rebar.get.useWorldGetter();
+const keyBinding = Rebar.useKeybinder();
 
 if (adminpanelConfig.Settings.debug) {
-    alt.log('[rebar-adminpanel] Debug Mode is activated for the plugin.')
+    alt.logWarning('[rebar-adminpanel] Debug Mode is still activated. Consider disable it to prevent unwanted' +
+        ' behaviour')
 }
 
+/**
+ * Checks if the player is a member of the 'admin' group, if true continue with showing the webview
+ * @param player to show the webview to | alt.Player
+ */
 async function adminpanelShow(player: alt.Player) {
-    // useWebview(player).show('Adminpanel', 'page', true);
     const character = Rebar.document.character.useCharacter(player);
     const isMember = character.groups.memberOf('admin');
+    // const hasPermission = Rebar.permissions.usePermissions(player).hasPermission('adminpanel');
 
     if (isMember || adminpanelConfig.Settings.adminMode) {
         const view = Rebar.player.useWebview(player);
         Rebar.player.useWorld(player).disableControls();
+        Rebar.player.useAudio(player).playFrontendSound('Click_Special', 'WEB_NAVIGATION_SOUNDS_PHONE');
         view.show('Adminpanel', 'page');
     } else {
         return;
@@ -28,21 +36,29 @@ async function adminpanelShow(player: alt.Player) {
 async function adminpanelHide(player: alt.Player) {
     const view = Rebar.player.useWebview(player);
     view.hide('Adminpanel');
+    Rebar.player.useAudio(player).playFrontendSound('Click_Fail', 'WEB_NAVIGATION_SOUNDS_PHONE');
     Rebar.player.useWorld(player).enableControls();
 }
 
-async function makeAdmin(player: alt.Player) {
-    const rPlayer = Rebar.usePlayer(player);
+async function getAdmin(player: alt.Player) {
+    const character = Rebar.document.character.useCharacter(player);
+    const hasGroup = character.groups.memberOf('admin');
 
-    rPlayer.character.groups.add('admin');
-    rPlayer.account.permissions.grant('admin');
+    if (!hasGroup) {
+        alt.log('[rebar-adminpanel] The admin group is now being added to your character!');
+        await character.groups.add('admin');
+    } else {
+        alt.logWarning('[rebar-adminpanel] No need to get it again... You already got the admin group.');
+        return;
+    }
 }
 
 async function adminpanelShowAllUsers(player: alt.Player) {
-    // useWebview(player).show('Adminpanel', 'page', true);
     const playersOnline = getter.online();
     const view = Rebar.player.useWebview(player);
+
     Rebar.player.useWorld(player).disableControls();
+    Rebar.player.useAudio(player).playFrontendSound('Click_Special', 'WEB_NAVIGATION_SOUNDS_PHONE');
 
     view.show('Users', 'persistent');
 
@@ -51,58 +67,62 @@ async function adminpanelShowAllUsers(player: alt.Player) {
         name: p.name,
         discordId: p.discordID,
     }));
-    view.emit(adminPanelEvents.WebView.getUsers, playerDetails);
+
+    view.emit(adminpanelEvents.webview.getUsers, playerDetails);
 }
 
 async function adminpanelHideUser(player: alt.Player) {
     const view = Rebar.player.useWebview(player);
+
     view.hide('Users');
+    Rebar.player.useAudio(player).playFrontendSound('Click_Fail', 'WEB_NAVIGATION_SOUNDS_PHONE');
     Rebar.player.useWorld(player).enableControls();
 }
 
-alt.onRpc(adminPanelEvents.RPC.giveAdmin, async (player: alt.Player) => {
+alt.onRpc(adminpanelEvents.rpc.giveAdmin, async (player: alt.Player) => {
     try {
         alt.log(`${player.name} called adminpanel:giveadmin rpc`);
-        await makeAdmin(player);
+        await getAdmin(player);
     } catch (error) {
-        alt.log(`${player.name} called adminpanel rpc but got an error ${error}`);
+        alt.log(`${player.name} called adminpanel:giveadmin rpc but with an error ${error}`);
     }
 });
 
-alt.onRpc(adminPanelEvents.RPC.toWaypoint, async (player: alt.Player, x: number, y: number, z: number) => {
+alt.onRpc(adminpanelEvents.rpc.toWaypoint, async (player: alt.Player, x: number, y: number, z: number) => {
+    const isClear = await worldGetter.positionIsClear(new alt.Vector3(x, y, z), 'all');
+
     try {
         alt.log(`${player.name} called adminpanel:towaypoint rpc with coords: ${x}, ${y}, ${z}`);
 
-        if (player && player.valid) {
+        if (player && player.valid && isClear) {
             player.pos = new alt.Vector3(x, y, z); // Teleport the player
-            alt.log(`${player.name} has been teleported to coordinates`);
         } else {
-            alt.log(`Invalid player attempted to teleport: ${player.name}`);
+            alt.log(`Invalid player attempted to teleport: ${player.name} or new position is not clear.`);
         }
-    } catch (error) {
-        alt.log(`${player.name} encountered an error: ${error}`);
+    } catch (err) {
+        alt.log(`${player.name} encountered an error with adminpanel:towaypoint rpc: ${err}`);
     }
 });
 
-alt.onRpc(adminPanelEvents.RPC.showAllUsers, async (player: alt.Player) => {
+alt.onRpc(adminpanelEvents.rpc.showAllUsers, async (player: alt.Player) => {
     await adminpanelShowAllUsers(player);
 });
 
-alt.onClient(adminPanelEvents.ToServer.closePanel, async (player: alt.Player) => {
+alt.onClient(adminpanelEvents.toServer.closePanel, async (player: alt.Player) => {
     await adminpanelHide(player);
 });
 
-alt.onClient(adminPanelEvents.ToServer.closeUsers, async (player: alt.Player) => {
+alt.onClient(adminpanelEvents.toServer.closeUsers, async (player: alt.Player) => {
     await adminpanelHideUser(player);
     await adminpanelShow(player);
 });
 
-alt.once('playerSpawn', async () => {
-    await showView();
+alt.once('playerConnect', async (player: alt.Player) => {
+    await showView(player);
 });
 
-async function showView() {
-    Keybinder.on(adminPanelEvents.KeyCodes.f4, (player) => {
+async function showView(player: alt.Player) {
+    keyBinding.on(adminpanelEvents.bindings.F4, () => {
         adminpanelShow(player);
     });
-};
+}
\ No newline at end of file
diff --git a/shared/events.ts b/shared/events.ts
index 574a481..29388cb 100644
--- a/shared/events.ts
+++ b/shared/events.ts
@@ -1,21 +1,22 @@
-export const adminPanelEvents = {
-   ToServer: {
+export const adminpanelEvents = {
+   toClient: {},
+   toServer: {
       closePanel: 'adminpanel:close',
       closeUsers: 'adminpanel:closeUsers',
    },
-   WebView: {
+   webview: {
       closeAdminpanelCallback: 'adminpanel',
       closeUserpanelCallback: 'adminpanel:users',
       getUsers: 'adminpanel:getUsers',
 
    },
-   RPC: {
+   rpc: {
       showAllUsers: 'adminpanel:showAllUsers',
       giveAdmin: 'adminpanel:giveadmin',
       toWaypoint: 'adminpanel:towaypoint',
    },
-   KeyCodes: {
-      escape: 27,
-      f4: 115,
+   bindings: {
+      ESC: 27,
+      F4: 115,
    }
 };
\ No newline at end of file
diff --git a/webview/Adminpanel.vue b/webview/Adminpanel.vue
index 5dab918..760235b 100644
--- a/webview/Adminpanel.vue
+++ b/webview/Adminpanel.vue
@@ -1,46 +1,46 @@
 <script lang="ts" setup>
 import { ref, onUnmounted, onMounted } from 'vue';
 import { useEvents } from '@Composables/useEvents';
-import { adminPanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
+import { adminpanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
 
 const Events = useEvents();
 
 const coordinatesInput = ref<string>('');
 
 async function showUsers() {
-    await Events.emitServerRpc(adminPanelEvents.RPC.showAllUsers);
+    await Events.emitServerRpc(adminpanelEvents.rpc.showAllUsers);
 }
 
 async function giveAdmin() {
-    await Events.emitServerRpc(adminPanelEvents.RPC.giveAdmin);
+    await Events.emitServerRpc(adminpanelEvents.rpc.giveAdmin);
 }
 
 async function toWaypoint() {
     const coords = coordinatesInput.value.split(',').map(Number);
     if (coords.length === 3 && coords.every((num) => !isNaN(num))) {
-        await Events.emitServerRpc(adminPanelEvents.RPC.toWaypoint, ...coords);
+        await Events.emitServerRpc(adminpanelEvents.rpc.toWaypoint, ...coords);
     } else {
         return;
     }
 }
 
 function closeAdminpanel() {
-    Events.emitServer(adminPanelEvents.ToServer.closePanel);
+    Events.emitServer(adminpanelEvents.toServer.closePanel);
 }
 
 onMounted(() => {
-    Events.onKeyUp(adminPanelEvents.WebView.closeAdminpanelCallback, 27, closeAdminpanel);
+    Events.onKeyUp(adminpanelEvents.webview.closeAdminpanelCallback, adminpanelEvents.bindings.ESC, closeAdminpanel);
 });
 
 onUnmounted(() => {
-    Events.offKeyUp(adminPanelEvents.WebView.closeAdminpanelCallback);
+    Events.offKeyUp(adminpanelEvents.webview.closeAdminpanelCallback);
 });
 </script>
 
 <template>
     <div class="fixed right-5 top-1/2 -translate-y-1/2 transform">
         <div
-            class="min-h-80 w-72 overflow-hidden rounded-lg border-2 border-solid border-red-400 bg-gradient-to-br from-gray-900 to-gray-800 shadow-2xl"
+            class="min-h-72 w-72 overflow-hidden rounded-lg border-2 border-solid border-red-400 intense-glow-border bg-gradient-to-br from-gray-900 to-gray-800 shadow-2xl"
         >
             <div class="relative mb-4">
                 <img
@@ -59,13 +59,13 @@ onUnmounted(() => {
             <div class="px-6 pb-6">
                 <ul class="space-y-3">
                     <li>
-                        <button @click="showUsers" class="neon-button">User Management</button>
+                        <button @click="showUsers" class="menu-text">User Management</button>
                     </li>
                     <li>
-                        <button @click="giveAdmin" class="neon-button">Give Admin</button>
+                        <button @click="giveAdmin" class="menu-text">Give Admin</button>
                     </li>
                     <li class="space-y-2">
-                        <button @click="toWaypoint" class="neon-button">Teleport</button>
+                        <button @click="toWaypoint" class="menu-text">Teleport</button>
                         <input
                             v-model="coordinatesInput"
                             placeholder="x, y, z"
@@ -78,7 +78,7 @@ onUnmounted(() => {
     </div>
 </template>
 
-<style>
+<style scoped>
 @keyframes gradient {
     0% {
         background-position: 0% 50%;
@@ -95,4 +95,16 @@ onUnmounted(() => {
     background-size: 200% 200%;
     animation: gradient 5s ease infinite;
 }
+
+.intense-glow-border {
+    box-shadow:
+        0 0 5px #ef4444,
+        0 0 10px #ef4444,
+        0 0 15px #ef4444;
+}
+
+.menu-text {
+    @apply text-justify h-8 w-full rounded-lg text-sm text-white hover:animate-pulse hover:border-2
+    hover:border-red-500 hover:bg-transparent
+}
 </style>
diff --git a/webview/Users.vue b/webview/Users.vue
index af61be0..5081e1e 100644
--- a/webview/Users.vue
+++ b/webview/Users.vue
@@ -1,58 +1,38 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useEvents } from '@Composables/useEvents';
 import { usePlayerStats } from '@Composables/usePlayerStats';
-import { adminPanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
-
-const {
-        armour,
-        engineOn,
-        fps,
-        gear,
-        headlights,
-        health,
-        highbeams,
-        indicatorLights,
-        inVehicle,
-        inWater,
-        isAiming,
-        isFlying,
-        isTalking,
-        locked,
-        maxGear,
-        ping,
-        seat,
-        speed,
-        stamina,
-        street,
-        time,
-        vehicleHealth,
-        weapon,
-        weather,
-        zone,
-    } = usePlayerStats();
+import { adminpanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 
 const Events = useEvents();
 
+const {
+    health,
+    stamina,
+    ping,
+    street
+} = usePlayerStats();
+
 const playerDetails = ref<{ id: string; name: string; discordId: number; }[]>([]);
 const searchQuery = ref<string>('');
 
-Events.on(adminPanelEvents.WebView.getUsers, (details: { id: string; name: string; discordId: number; ip: string }[]) => {
+Events.on(adminpanelEvents.webview.getUsers, (details: { id: string; name: string; discordId: number; ip: string }[]) => {
     playerDetails.value = details;
 });
 
-function closeAdminpanelUsers() {
-    Events.emitServer(adminPanelEvents.ToServer.closeUsers);
+const closePanel = function() {
+    Events.emitServer(adminpanelEvents.toServer.closeUsers);
 }
 
 onMounted(() => {
-    Events.onKeyUp(adminPanelEvents.WebView.closeUserpanelCallback, adminPanelEvents.KeyCodes.escape, closeAdminpanelUsers);
+    Events.onKeyUp(adminpanelEvents.webview.closeUserpanelCallback, adminpanelEvents.bindings.ESC, closePanel);
 });
 
 onUnmounted(() => {
-    Events.offKeyUp(adminPanelEvents.WebView.closeUserpanelCallback);
+    Events.offKeyUp(adminpanelEvents.webview.closeUserpanelCallback);
 });
 
+
 const filteredPlayers = computed(() => {
     if (!searchQuery.value) return playerDetails.value;
     const lowercaseQuery = searchQuery.value.toLowerCase();
@@ -78,7 +58,8 @@ const searchResultClass = computed(() => {
 
 <template>
     <div class="flex h-screen w-screen items-center justify-center p-4">
-        <div class="h-[50%] w-1/2 max-w-4xl rounded-lg border-2 border-solid border-red-500 bg-gray-800 text-white shadow-2xl">
+        <div
+            class="h-[50%] w-1/2 max-w-4xl rounded-lg border-2 border-solid border-red-500 intense-glow-border bg-gray-800 text-white shadow-2xl">
             <div class="flex h-full flex-col p-6">
                 <div class="mb-6 flex flex-col items-center justify-between sm:flex-row">
                     <h2 class="mb-4 text-2xl font-bold sm:mb-0">⚙️ User Management</h2>
@@ -133,8 +114,9 @@ const searchResultClass = computed(() => {
                                 </div>
                                 <p class="text-style">Ping: {{ ping }}</p>
                                 <p class="text-style">Health: {{ health }}</p>
+                                <p class="text-style">Stamina: {{ stamina }}</p>
                                 <p class="text-style">Street: {{ street }}</p>
-                                <p class="text-style">Discord Id: {{ player.discordId }}</p>
+                                <p class="text-style">Discord ID: {{ player.discordId }}</p>
                                 <span v-if="searchQuery" class="ml-auto text-yellow-300">
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -160,8 +142,16 @@ const searchResultClass = computed(() => {
     </div>
 </template>
 
-<style>
+<style scoped>
 .text-style {
     @apply text-xs text-gray-200 sm:ml-1
 }
+
+.intense-glow-border {
+    box-shadow:
+        0 0 5px #ef4444,
+        0 0 10px #ef4444,
+        0 0 15px #ef4444;
+}
+
 </style>

From 053aeef07d5c459cb09341fb34ac6871f800db05 Mon Sep 17 00:00:00 2001
From: programmernb-ctrl <141086417+programmernb-ctrl@users.noreply.github.com>
Date: Fri, 6 Dec 2024 02:15:48 +0100
Subject: [PATCH 02/10] changed code to include tp to marker function

---
 webview/Adminpanel.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/webview/Adminpanel.vue b/webview/Adminpanel.vue
index 760235b..da79f99 100644
--- a/webview/Adminpanel.vue
+++ b/webview/Adminpanel.vue
@@ -16,9 +16,12 @@ async function giveAdmin() {
 }
 
 async function toWaypoint() {
+    const coordsInput = coordinatesInput.value.trim();
     const coords = coordinatesInput.value.split(',').map(Number);
     if (coords.length === 3 && coords.every((num) => !isNaN(num))) {
         await Events.emitServerRpc(adminpanelEvents.rpc.toWaypoint, ...coords);
+    } else if (coordsInput === "") {
+        Events.emitServer(adminpanelEvents.toServer.tpMarker);
     } else {
         return;
     }

From 070f4686cb3db6e334db4294c4d35e94a5b1f4f6 Mon Sep 17 00:00:00 2001
From: programmernb-ctrl <141086417+programmernb-ctrl@users.noreply.github.com>
Date: Fri, 6 Dec 2024 02:16:45 +0100
Subject: [PATCH 03/10] included new event for tp marker

---
 shared/events.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/shared/events.ts b/shared/events.ts
index 29388cb..15897c4 100644
--- a/shared/events.ts
+++ b/shared/events.ts
@@ -3,6 +3,7 @@ export const adminpanelEvents = {
    toServer: {
       closePanel: 'adminpanel:close',
       closeUsers: 'adminpanel:closeUsers',
+      tpMarker: 'adminpanel:teleport:marker:hud',
    },
    webview: {
       closeAdminpanelCallback: 'adminpanel',

From f4ef838e518f0611c6e9de6e46ca5eb4f5ba9759 Mon Sep 17 00:00:00 2001
From: programmernb-ctrl <141086417+programmernb-ctrl@users.noreply.github.com>
Date: Fri, 6 Dec 2024 02:22:53 +0100
Subject: [PATCH 04/10] Including function to handle teleport to marker

---
 server/index.ts | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/server/index.ts b/server/index.ts
index 5a5bec9..f17a053 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -79,6 +79,48 @@ async function adminpanelHideUser(player: alt.Player) {
     Rebar.player.useWorld(player).enableControls();
 }
 
+async function adminpanelTpMarker(player: alt.Player) {
+    if (!player?.valid) return;
+
+    const rPlayer = Rebar.usePlayer(player);
+    const waypoint = await Rebar.usePlayer(player).waypoint.get()
+
+    if (!waypoint) {
+        return;
+    }
+
+    rPlayer.native.invokeMany([
+        { native: 'setFocusPosAndVel', args: [waypoint.x, waypoint.y, waypoint.z, 0, 0, 0] },
+        { native: 'requestCollisionAtCoord', args: [waypoint.x, waypoint.y, waypoint.z] }
+    ])
+
+    alt.Utils.wait(1000);
+
+    player.pos = new alt.Vector3(waypoint);
+
+    const interval = alt.setInterval(async () => {
+        const groundZResponse = await rPlayer.native.invokeWithResult('getGroundZFor3dCoord', waypoint.x, waypoint.y, waypoint.z, 1000, false, false);
+
+        if (groundZResponse[0] === true && typeof groundZResponse[1] === 'number') {
+            const groundZ = groundZResponse[1];
+
+            if (groundZ === 0) {
+                alt.clearInterval(interval);
+                return;
+            }
+
+            player.pos = new alt.Vector3(waypoint.x, waypoint.y, groundZ);
+
+            rPlayer.notify.showNotification('Teleported successfully');
+        } else {
+            alt.clearInterval(interval);
+
+            rPlayer.notify.showNotification('Teleport not successfully');
+            return;
+        }
+    }, 500);
+}
+
 alt.onRpc(adminpanelEvents.rpc.giveAdmin, async (player: alt.Player) => {
     try {
         alt.log(`${player.name} called adminpanel:giveadmin rpc`);
@@ -117,6 +159,10 @@ alt.onClient(adminpanelEvents.toServer.closeUsers, async (player: alt.Player) =>
     await adminpanelShow(player);
 });
 
+alt.onClient(adminpanelEvents.toServer.tpMarker, async (player: alt.Player) => {
+    await adminpanelTpMarker(player);
+})
+
 alt.once('playerConnect', async (player: alt.Player) => {
     await showView(player);
 });

From a349ab789697cb4a567ecf64fa2ca290bd6a63e9 Mon Sep 17 00:00:00 2001
From: programmernb-ctrl <141086417+programmernb-ctrl@users.noreply.github.com>
Date: Sat, 7 Dec 2024 06:37:16 +0100
Subject: [PATCH 05/10] synced cash and bank character values, test function
 for tp to marker

---
 server/index.ts | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/server/index.ts b/server/index.ts
index f17a053..daec598 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -9,6 +9,10 @@ const getter = Rebar.get.usePlayersGetter();
 const worldGetter = Rebar.get.useWorldGetter();
 const keyBinding = Rebar.useKeybinder();
 
+const syncedBinder = Rebar.systems.useStreamSyncedBinder();
+syncedBinder.syncCharacterKey('cash');
+syncedBinder.syncCharacterKey('bank');
+
 if (adminpanelConfig.Settings.debug) {
     alt.logWarning('[rebar-adminpanel] Debug Mode is still activated. Consider disable it to prevent unwanted' +
         ' behaviour')
@@ -79,6 +83,10 @@ async function adminpanelHideUser(player: alt.Player) {
     Rebar.player.useWorld(player).enableControls();
 }
 
+/**
+ * Gets the waypoint set by the player and then teleports them to the new position
+ * @param player the player to teleport to the marker
+ */
 async function adminpanelTpMarker(player: alt.Player) {
     if (!player?.valid) return;
 
@@ -89,15 +97,6 @@ async function adminpanelTpMarker(player: alt.Player) {
         return;
     }
 
-    rPlayer.native.invokeMany([
-        { native: 'setFocusPosAndVel', args: [waypoint.x, waypoint.y, waypoint.z, 0, 0, 0] },
-        { native: 'requestCollisionAtCoord', args: [waypoint.x, waypoint.y, waypoint.z] }
-    ])
-
-    alt.Utils.wait(1000);
-
-    player.pos = new alt.Vector3(waypoint);
-
     const interval = alt.setInterval(async () => {
         const groundZResponse = await rPlayer.native.invokeWithResult('getGroundZFor3dCoord', waypoint.x, waypoint.y, waypoint.z, 1000, false, false);
 
@@ -109,13 +108,21 @@ async function adminpanelTpMarker(player: alt.Player) {
                 return;
             }
 
-            player.pos = new alt.Vector3(waypoint.x, waypoint.y, groundZ);
+            alt.clearInterval(interval);
+
+            rPlayer.native.invoke('setFocusPosAndVel', waypoint.x, waypoint.y, groundZ, 0.0, 0.0, 0.0);
+            rPlayer.native.invoke('requestCollisionAtCoord', waypoint.x, waypoint.y, groundZ);
+
+            const nextTick = alt.nextTick(async () => {
+                player.frozen = true;
+                player.pos = new alt.Vector3(waypoint.x, waypoint.y, groundZ);
+                player.frozen = false;
+                alt.clearNextTick(nextTick);
+            })
 
             rPlayer.notify.showNotification('Teleported successfully');
         } else {
             alt.clearInterval(interval);
-
-            rPlayer.notify.showNotification('Teleport not successfully');
             return;
         }
     }, 500);

From d8cf0c78d7bd935d8ec3f853ed3ac7f308ad6d3d Mon Sep 17 00:00:00 2001
From: programmernb-ctrl <141086417+programmernb-ctrl@users.noreply.github.com>
Date: Sat, 7 Dec 2024 06:38:57 +0100
Subject: [PATCH 06/10] added useAdminPanel and useUserSearch composable

---
 webview/composables/useAdminPanel.ts | 41 ++++++++++++++++++++
 webview/composables/useUserSearch.ts | 56 ++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 webview/composables/useAdminPanel.ts
 create mode 100644 webview/composables/useUserSearch.ts

diff --git a/webview/composables/useAdminPanel.ts b/webview/composables/useAdminPanel.ts
new file mode 100644
index 0000000..f7015b1
--- /dev/null
+++ b/webview/composables/useAdminPanel.ts
@@ -0,0 +1,41 @@
+import { ref } from 'vue';
+import { useEvents } from '@Composables/useEvents.js';
+import { adminpanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
+
+const events = useEvents();
+
+export function useAdminPanel() {
+    const coordinatesInput = ref<string>('');
+
+    const closePanel = () => {
+        events.emitServer(adminpanelEvents.toServer.closePanel);
+    }
+
+    const showUsers = async () => {
+        await events.emitServerRpc(adminpanelEvents.rpc.showAllUsers);
+    };
+
+    const giveAdmin = async () => {
+        await events.emitServerRpc(adminpanelEvents.rpc.giveAdmin);
+    };
+
+    const toWaypoint = async () => {
+        const coordsInput = coordinatesInput.value.trim();
+        const coords = coordinatesInput.value.split(',').map(Number);
+        if (coords.length === 3 && coords.every((num) => !isNaN(num))) {
+            await events.emitServerRpc(adminpanelEvents.rpc.toWaypoint, ...coords);
+        } else if (coordsInput === "") {
+            events.emitServer(adminpanelEvents.toServer.tpMarker);
+        } else {
+            return;
+        }
+    }
+
+    return {
+        coordinatesInput,
+        closePanel,
+        showUsers,
+        giveAdmin,
+        toWaypoint,
+    }
+}
diff --git a/webview/composables/useUserSearch.ts b/webview/composables/useUserSearch.ts
new file mode 100644
index 0000000..67361d3
--- /dev/null
+++ b/webview/composables/useUserSearch.ts
@@ -0,0 +1,56 @@
+import { ref, computed } from 'vue';
+import { useEvents } from '@Composables/useEvents.js';
+import { useSyncedMeta } from '@Composables/useSyncedMeta.js';
+import { adminpanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
+
+const events = useEvents();
+const syncedMeta = useSyncedMeta();
+
+export function useUserSearch() {
+
+    const characterData = syncedMeta.getCharacter();
+
+    const playerDetails = ref<{id : string; name: string; discordId: number; }[]>([]);
+    const searchQuery = ref<string>('');
+
+    const getPlayerDetails = (details: { id: string; name: string; discordId: number; }[]) => {
+        playerDetails.value = details;
+    }
+
+    const closePanel = () => {
+        events.emitServer(adminpanelEvents.toServer.closeUsers);
+    };
+
+    const filteredPlayers = computed(() => {
+        if (!searchQuery.value) return playerDetails.value;
+        const lowerCaseQuery = searchQuery.value.toLowerCase();
+        return playerDetails.value
+            .map((player) => ({
+                ...player,
+                highlighted: player.name.toLowerCase().includes(lowerCaseQuery) || player.id.toString().includes(lowerCaseQuery),
+            }))
+            .filter((player) => player.highlighted);
+    });
+
+    const searchResult = computed(() => {
+        if (!searchQuery.value) return '';
+        const count = filteredPlayers.value.length;
+        return count > 0 ? `${count} user${count > 1 ? 's' : ''} found` : 'No users found';
+    });
+
+    const searchResultClass = computed(() => {
+        if (!searchQuery.value) return '';
+        return filteredPlayers.value.length > 0 ? 'bg-green-500' : 'bg-yellow-500';
+    })
+
+    return {
+        closePanel,
+        characterData,
+        playerDetails,
+        searchQuery,
+        filteredPlayers,
+        searchResult,
+        searchResultClass,
+    }
+
+}
\ No newline at end of file

From d1bbd5d0f94688f16260f4baddb90976e801c19a Mon Sep 17 00:00:00 2001
From: programmernb-ctrl <141086417+programmernb-ctrl@users.noreply.github.com>
Date: Sat, 7 Dec 2024 06:40:04 +0100
Subject: [PATCH 07/10] changed code to include useAdminPanel composable

---
 webview/Adminpanel.vue | 43 +++++++++++++-----------------------------
 1 file changed, 13 insertions(+), 30 deletions(-)

diff --git a/webview/Adminpanel.vue b/webview/Adminpanel.vue
index da79f99..dc2ddc7 100644
--- a/webview/Adminpanel.vue
+++ b/webview/Adminpanel.vue
@@ -1,49 +1,32 @@
 <script lang="ts" setup>
-import { ref, onUnmounted, onMounted } from 'vue';
+import { onUnmounted, onMounted, ref } from 'vue';
 import { useEvents } from '@Composables/useEvents';
+import { useAdminPanel } from '@Plugins/rebar-adminpanel/webview/composables/useAdminPanel.js';
 import { adminpanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
 
-const Events = useEvents();
+const events = useEvents();
 
-const coordinatesInput = ref<string>('');
-
-async function showUsers() {
-    await Events.emitServerRpc(adminpanelEvents.rpc.showAllUsers);
-}
-
-async function giveAdmin() {
-    await Events.emitServerRpc(adminpanelEvents.rpc.giveAdmin);
-}
-
-async function toWaypoint() {
-    const coordsInput = coordinatesInput.value.trim();
-    const coords = coordinatesInput.value.split(',').map(Number);
-    if (coords.length === 3 && coords.every((num) => !isNaN(num))) {
-        await Events.emitServerRpc(adminpanelEvents.rpc.toWaypoint, ...coords);
-    } else if (coordsInput === "") {
-        Events.emitServer(adminpanelEvents.toServer.tpMarker);
-    } else {
-        return;
-    }
-}
-
-function closeAdminpanel() {
-    Events.emitServer(adminpanelEvents.toServer.closePanel);
-}
+const {
+    coordinatesInput,
+    showUsers,
+    giveAdmin,
+    toWaypoint,
+    closePanel
+} = useAdminPanel();
 
 onMounted(() => {
-    Events.onKeyUp(adminpanelEvents.webview.closeAdminpanelCallback, adminpanelEvents.bindings.ESC, closeAdminpanel);
+    events.onKeyUp(adminpanelEvents.webview.closeAdminpanelCallback, adminpanelEvents.bindings.ESC, closePanel);
 });
 
 onUnmounted(() => {
-    Events.offKeyUp(adminpanelEvents.webview.closeAdminpanelCallback);
+    events.offKeyUp(adminpanelEvents.webview.closeAdminpanelCallback);
 });
 </script>
 
 <template>
     <div class="fixed right-5 top-1/2 -translate-y-1/2 transform">
         <div
-            class="min-h-72 w-72 overflow-hidden rounded-lg border-2 border-solid border-red-400 intense-glow-border bg-gradient-to-br from-gray-900 to-gray-800 shadow-2xl"
+            class="min-h-72 w-72 overflow-hidden rounded-lg border-2 border-solid border-red-500 intense-glow-border bg-gradient-to-br from-gray-900 to-gray-800 shadow-2xl"
         >
             <div class="relative mb-4">
                 <img

From 8d82c6bd08bbae7df56951667f41dc02c3d47bff Mon Sep 17 00:00:00 2001
From: programmernb-ctrl <141086417+programmernb-ctrl@users.noreply.github.com>
Date: Sat, 7 Dec 2024 06:40:58 +0100
Subject: [PATCH 08/10] changed code to include useUserSearch composable

---
 webview/Users.vue | 47 +++++++++++++++--------------------------------
 1 file changed, 15 insertions(+), 32 deletions(-)

diff --git a/webview/Users.vue b/webview/Users.vue
index 5081e1e..db36b43 100644
--- a/webview/Users.vue
+++ b/webview/Users.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
 import { useEvents } from '@Composables/useEvents';
 import { usePlayerStats } from '@Composables/usePlayerStats';
+import { useUserSearch } from '@Plugins/rebar-adminpanel/webview/composables/useUserSearch.js';
 import { adminpanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
-import { ref, computed, onMounted, onUnmounted } from 'vue';
 
 const Events = useEvents();
 
@@ -13,17 +14,20 @@ const {
     street
 } = usePlayerStats();
 
-const playerDetails = ref<{ id: string; name: string; discordId: number; }[]>([]);
-const searchQuery = ref<string>('');
+const {
+    characterData,
+    playerDetails,
+    filteredPlayers,
+    searchQuery,
+    searchResult,
+    searchResultClass,
+    closePanel
+} = useUserSearch();
 
-Events.on(adminpanelEvents.webview.getUsers, (details: { id: string; name: string; discordId: number; ip: string }[]) => {
+Events.on(adminpanelEvents.webview.getUsers, (details: { id: string; name: string; discordId: number }[]) => {
     playerDetails.value = details;
 });
 
-const closePanel = function() {
-    Events.emitServer(adminpanelEvents.toServer.closeUsers);
-}
-
 onMounted(() => {
     Events.onKeyUp(adminpanelEvents.webview.closeUserpanelCallback, adminpanelEvents.bindings.ESC, closePanel);
 });
@@ -31,29 +35,6 @@ onMounted(() => {
 onUnmounted(() => {
     Events.offKeyUp(adminpanelEvents.webview.closeUserpanelCallback);
 });
-
-
-const filteredPlayers = computed(() => {
-    if (!searchQuery.value) return playerDetails.value;
-    const lowercaseQuery = searchQuery.value.toLowerCase();
-    return playerDetails.value
-        .map((player) => ({
-            ...player,
-            highlighted: player.name.toLowerCase().includes(lowercaseQuery) || player.id.toString().includes(lowercaseQuery),
-        }))
-        .filter((player) => player.highlighted);
-});
-
-const searchResultMessage = computed(() => {
-    if (!searchQuery.value) return '';
-    const count = filteredPlayers.value.length;
-    return count > 0 ? `${count} user${count > 1 ? 's' : ''} found` : 'No users found';
-});
-
-const searchResultClass = computed(() => {
-    if (!searchQuery.value) return '';
-    return filteredPlayers.value.length > 0 ? 'bg-green-500' : 'bg-yellow-500';
-});
 </script>
 
 <template>
@@ -86,7 +67,7 @@ const searchResultClass = computed(() => {
                 </div>
                 <div class="flex flex-grow flex-col overflow-hidden">
                     <div v-if="searchQuery" class="mb-2 rounded-md p-2 text-sm font-medium" :class="searchResultClass">
-                        {{ searchResultMessage }}
+                        {{ searchResult }}
                     </div>
                     <div class="flex-grow overflow-y-auto rounded-md border border-gray-700">
                         <div class="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -115,6 +96,8 @@ const searchResultClass = computed(() => {
                                 <p class="text-style">Ping: {{ ping }}</p>
                                 <p class="text-style">Health: {{ health }}</p>
                                 <p class="text-style">Stamina: {{ stamina }}</p>
+                                <p class="text-style">Bank: {{ '$' + characterData.bank }}</p>
+                                <p class="text-style">Cash: {{ '$' + characterData.cash }}</p>
                                 <p class="text-style">Street: {{ street }}</p>
                                 <p class="text-style">Discord ID: {{ player.discordId }}</p>
                                 <span v-if="searchQuery" class="ml-auto text-yellow-300">

From e9efed7deeda4100c125b84b9bf71106fc36b007 Mon Sep 17 00:00:00 2001
From: programmernb-ctrl <141086417+programmernb-ctrl@users.noreply.github.com>
Date: Sat, 7 Dec 2024 08:43:28 +0100
Subject: [PATCH 09/10] (test) changed tp marker function

---
 server/index.ts | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/server/index.ts b/server/index.ts
index daec598..80e06a4 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -98,34 +98,31 @@ async function adminpanelTpMarker(player: alt.Player) {
     }
 
     const interval = alt.setInterval(async () => {
+        rPlayer.native.invoke('setFocusPosAndVel', waypoint.x, waypoint.y, waypoint.z, 0.0, 0.0, 0.0);
+
         const groundZResponse = await rPlayer.native.invokeWithResult('getGroundZFor3dCoord', waypoint.x, waypoint.y, waypoint.z, 1000, false, false);
 
         if (groundZResponse[0] === true && typeof groundZResponse[1] === 'number') {
             const groundZ = groundZResponse[1];
 
-            if (groundZ === 0) {
-                alt.clearInterval(interval);
-                return;
-            }
-
             alt.clearInterval(interval);
 
-            rPlayer.native.invoke('setFocusPosAndVel', waypoint.x, waypoint.y, groundZ, 0.0, 0.0, 0.0);
             rPlayer.native.invoke('requestCollisionAtCoord', waypoint.x, waypoint.y, groundZ);
 
             const nextTick = alt.nextTick(async () => {
                 player.frozen = true;
+                rPlayer.native.invoke('clearFocus');
                 player.pos = new alt.Vector3(waypoint.x, waypoint.y, groundZ);
                 player.frozen = false;
+                rPlayer.notify.showNotification('Teleported successfully');
                 alt.clearNextTick(nextTick);
             })
-
-            rPlayer.notify.showNotification('Teleported successfully');
         } else {
             alt.clearInterval(interval);
+            rPlayer.native.invoke('clearFocus');
             return;
         }
-    }, 500);
+    }, 1000);
 }
 
 alt.onRpc(adminpanelEvents.rpc.giveAdmin, async (player: alt.Player) => {

From 6bb1838b61b40d8c39ab7a549a323b06084bf975 Mon Sep 17 00:00:00 2001
From: programmernb-ctrl <141086417+programmernb-ctrl@users.noreply.github.com>
Date: Thu, 12 Dec 2024 21:03:26 +0100
Subject: [PATCH 10/10] Update

---
 README.md                            | 23 ++++-------
 server/index.ts                      | 62 ++++++++++++++++++----------
 shared/config.ts                     |  2 +-
 shared/events.ts                     |  9 ++--
 webview/Adminpanel.vue               | 24 ++++++-----
 webview/Users.vue                    |  1 -
 webview/composables/useAdminPanel.ts | 15 +++----
 webview/composables/useUserSearch.ts | 12 +++---
 8 files changed, 82 insertions(+), 66 deletions(-)

diff --git a/README.md b/README.md
index 85d543d..d67885c 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,22 @@
 # rebar-adminpanel
 
 > [!IMPORTANT]
-> It's required that you go to your Rebar directory
-> and set up some things first before using the rebar-adminpanel plugin
+> Please read all installation steps to prevent unwanted behaviour
 
-## Installation
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/S6S3171498)
 
-1. Go to your Rebar `main` server's directory and then to `./webview/src/index.css`
-2. Add following code at the end of `index.css`
+## Installation
 
-```css
-.neon-button {
-    @apply w-full rounded-lg border-2 border-transparent px-4 py-3 text-left text-sm text-gray-200 hover:animate-pulse hover:border-red-500 hover:bg-opacity-75 hover:shadow-md;
-}
-```
+1. Go to your Rebar `main` server's directory.
 
-3. Now clone this repository in to your Rebar `main` directory using git commands.
+2. Now clone this repository in to your Rebar `main` directory using git commands.
 
 ```bash
 cd path/to/your/rebar-altv/
 git clone https://github.com/programmernb-ctrl/rebar-adminpanel.git src/plugins/rebar-adminpanel
 ```
 
-4. Should your character don't have the admin group you'll need to customize the config in `./shared/config.ts`
+3. If your character doesn't already have the admin group, you'll need to customize the config in `./shared/config.ts`
 
 ```typescript
 export const adminpanelConfig = {
@@ -30,7 +24,7 @@ export const adminpanelConfig = {
 };
 ```
 
-5. Start the server once by using one of the below commands. The plugin will load __automatically.__
+4. Start the server once by using one of the below commands. The plugin will load __automatically.__
 
 ```
 pnpm start
@@ -57,7 +51,8 @@ cd path/to/your/rebar-altv/src/plugins/rebar-adminpanel
 git pull
 ```
 
-- If you forked this repo and wanna update it, simply search for `merge from upstream` on [Google](https://www.google.com)
+- If you forked this repo and want to update it, simply search for `merge from upstream` on [Google](https://www.google.
+  com)
 
 ## Dependencies
 
diff --git a/server/index.ts b/server/index.ts
index 80e06a4..1e4560e 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -4,18 +4,25 @@ import { adminpanelConfig } from '@Plugins/rebar-adminpanel/shared/config.js';
 import { adminpanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
 
 const Rebar = useRebar();
-
+const keyBinding = Rebar.useKeybinder();
 const getter = Rebar.get.usePlayersGetter();
 const worldGetter = Rebar.get.useWorldGetter();
-const keyBinding = Rebar.useKeybinder();
 
 const syncedBinder = Rebar.systems.useStreamSyncedBinder();
 syncedBinder.syncCharacterKey('cash');
 syncedBinder.syncCharacterKey('bank');
 
 if (adminpanelConfig.Settings.debug) {
-    alt.logWarning('[rebar-adminpanel] Debug Mode is still activated. Consider disable it to prevent unwanted' +
-        ' behaviour')
+    alt.logWarning(
+        '[rebar-adminpanel] Debug Mode is still activated. Consider disable it to prevent unwanted' + ' behaviour',
+    );
+}
+
+let keybinding = undefined;
+async function showView(player: alt.Player) {
+    keybinding = keyBinding.on(adminpanelEvents.bindings.F4, () => {
+        adminpanelShow(player);
+    });
 }
 
 /**
@@ -23,6 +30,10 @@ if (adminpanelConfig.Settings.debug) {
  * @param player to show the webview to | alt.Player
  */
 async function adminpanelShow(player: alt.Player) {
+    if (!player?.valid) {
+        return;
+    }
+
     const character = Rebar.document.character.useCharacter(player);
     const isMember = character.groups.memberOf('admin');
     // const hasPermission = Rebar.permissions.usePermissions(player).hasPermission('adminpanel');
@@ -44,6 +55,14 @@ async function adminpanelHide(player: alt.Player) {
     Rebar.player.useWorld(player).enableControls();
 }
 
+async function adminpanelHideUser(player: alt.Player) {
+    const view = Rebar.player.useWebview(player);
+
+    view.hide('Users');
+    Rebar.player.useAudio(player).playFrontendSound('Click_Fail', 'WEB_NAVIGATION_SOUNDS_PHONE');
+    Rebar.player.useWorld(player).enableControls();
+}
+
 async function getAdmin(player: alt.Player) {
     const character = Rebar.document.character.useCharacter(player);
     const hasGroup = character.groups.memberOf('admin');
@@ -75,14 +94,6 @@ async function adminpanelShowAllUsers(player: alt.Player) {
     view.emit(adminpanelEvents.webview.getUsers, playerDetails);
 }
 
-async function adminpanelHideUser(player: alt.Player) {
-    const view = Rebar.player.useWebview(player);
-
-    view.hide('Users');
-    Rebar.player.useAudio(player).playFrontendSound('Click_Fail', 'WEB_NAVIGATION_SOUNDS_PHONE');
-    Rebar.player.useWorld(player).enableControls();
-}
-
 /**
  * Gets the waypoint set by the player and then teleports them to the new position
  * @param player the player to teleport to the marker
@@ -91,7 +102,7 @@ async function adminpanelTpMarker(player: alt.Player) {
     if (!player?.valid) return;
 
     const rPlayer = Rebar.usePlayer(player);
-    const waypoint = await Rebar.usePlayer(player).waypoint.get()
+    const waypoint = await Rebar.usePlayer(player).waypoint.get();
 
     if (!waypoint) {
         return;
@@ -100,7 +111,15 @@ async function adminpanelTpMarker(player: alt.Player) {
     const interval = alt.setInterval(async () => {
         rPlayer.native.invoke('setFocusPosAndVel', waypoint.x, waypoint.y, waypoint.z, 0.0, 0.0, 0.0);
 
-        const groundZResponse = await rPlayer.native.invokeWithResult('getGroundZFor3dCoord', waypoint.x, waypoint.y, waypoint.z, 1000, false, false);
+        const groundZResponse = await rPlayer.native.invokeWithResult(
+            'getGroundZFor3dCoord',
+            waypoint.x,
+            waypoint.y,
+            waypoint.z,
+            1000,
+            false,
+            false,
+        );
 
         if (groundZResponse[0] === true && typeof groundZResponse[1] === 'number') {
             const groundZ = groundZResponse[1];
@@ -111,12 +130,13 @@ async function adminpanelTpMarker(player: alt.Player) {
 
             const nextTick = alt.nextTick(async () => {
                 player.frozen = true;
+                alt.log(player.dimension);
                 rPlayer.native.invoke('clearFocus');
                 player.pos = new alt.Vector3(waypoint.x, waypoint.y, groundZ);
                 player.frozen = false;
                 rPlayer.notify.showNotification('Teleported successfully');
                 alt.clearNextTick(nextTick);
-            })
+            });
         } else {
             alt.clearInterval(interval);
             rPlayer.native.invoke('clearFocus');
@@ -165,14 +185,12 @@ alt.onClient(adminpanelEvents.toServer.closeUsers, async (player: alt.Player) =>
 
 alt.onClient(adminpanelEvents.toServer.tpMarker, async (player: alt.Player) => {
     await adminpanelTpMarker(player);
-})
+});
 
-alt.once('playerConnect', async (player: alt.Player) => {
+alt.on('playerConnect', async (player: alt.Player) => {
     await showView(player);
 });
 
-async function showView(player: alt.Player) {
-    keyBinding.on(adminpanelEvents.bindings.F4, () => {
-        adminpanelShow(player);
-    });
-}
\ No newline at end of file
+alt.on('playerDisconnect', async (player: alt.Player) => {
+    keyBinding.off(adminpanelEvents.bindings.F4, keybinding);
+});
diff --git a/shared/config.ts b/shared/config.ts
index 389aead..19e2488 100644
--- a/shared/config.ts
+++ b/shared/config.ts
@@ -3,4 +3,4 @@ export const adminpanelConfig = {
         debug: false,
         adminMode: false,
     }
-};
+};
\ No newline at end of file
diff --git a/shared/events.ts b/shared/events.ts
index 15897c4..a5936ed 100644
--- a/shared/events.ts
+++ b/shared/events.ts
@@ -2,18 +2,17 @@ export const adminpanelEvents = {
    toClient: {},
    toServer: {
       closePanel: 'adminpanel:close',
-      closeUsers: 'adminpanel:closeUsers',
+      closeUsers: 'adminpanel:close:users',
       tpMarker: 'adminpanel:teleport:marker:hud',
    },
    webview: {
       closeAdminpanelCallback: 'adminpanel',
       closeUserpanelCallback: 'adminpanel:users',
-      getUsers: 'adminpanel:getUsers',
-
+      getUsers: 'adminpanel:get:users',
    },
    rpc: {
-      showAllUsers: 'adminpanel:showAllUsers',
-      giveAdmin: 'adminpanel:giveadmin',
+      showAllUsers: 'adminpanel:show:all:users',
+      giveAdmin: 'adminpanel:admin',
       toWaypoint: 'adminpanel:towaypoint',
    },
    bindings: {
diff --git a/webview/Adminpanel.vue b/webview/Adminpanel.vue
index dc2ddc7..45d791b 100644
--- a/webview/Adminpanel.vue
+++ b/webview/Adminpanel.vue
@@ -1,21 +1,25 @@
 <script lang="ts" setup>
-import { onUnmounted, onMounted, ref } from 'vue';
+import { onUnmounted, onMounted } from 'vue';
 import { useEvents } from '@Composables/useEvents';
-import { useAdminPanel } from '@Plugins/rebar-adminpanel/webview/composables/useAdminPanel.js';
 import { adminpanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
-
-const events = useEvents();
+import { useAdminPanel } from './composables/useAdminPanel';
 
 const {
     coordinatesInput,
     showUsers,
+    closePanel,
     giveAdmin,
-    toWaypoint,
-    closePanel
+    toWaypoint
 } = useAdminPanel();
 
+const events = useEvents();
+
 onMounted(() => {
-    events.onKeyUp(adminpanelEvents.webview.closeAdminpanelCallback, adminpanelEvents.bindings.ESC, closePanel);
+    events.onKeyUp(
+        adminpanelEvents.webview.closeAdminpanelCallback, // identifier
+        adminpanelEvents.bindings.ESC, // keybinding
+        closePanel, // callback
+    );
 });
 
 onUnmounted(() => {
@@ -26,7 +30,7 @@ onUnmounted(() => {
 <template>
     <div class="fixed right-5 top-1/2 -translate-y-1/2 transform">
         <div
-            class="min-h-72 w-72 overflow-hidden rounded-lg border-2 border-solid border-red-500 intense-glow-border bg-gradient-to-br from-gray-900 to-gray-800 shadow-2xl"
+            class="intense-glow-border min-h-72 w-72 overflow-hidden rounded-lg border-2 border-solid border-red-500 bg-gradient-to-br from-gray-900 to-gray-800 shadow-2xl"
         >
             <div class="relative mb-4">
                 <img
@@ -90,7 +94,7 @@ onUnmounted(() => {
 }
 
 .menu-text {
-    @apply text-justify h-8 w-full rounded-lg text-sm text-white hover:animate-pulse hover:border-2
-    hover:border-red-500 hover:bg-transparent
+    @apply h-8 w-full rounded-lg text-justify text-sm text-white hover:animate-pulse hover:border-2
+    hover:border-red-500 hover:bg-transparent;
 }
 </style>
diff --git a/webview/Users.vue b/webview/Users.vue
index db36b43..4ebb0d9 100644
--- a/webview/Users.vue
+++ b/webview/Users.vue
@@ -136,5 +136,4 @@ onUnmounted(() => {
         0 0 10px #ef4444,
         0 0 15px #ef4444;
 }
-
 </style>
diff --git a/webview/composables/useAdminPanel.ts b/webview/composables/useAdminPanel.ts
index f7015b1..ac0dc83 100644
--- a/webview/composables/useAdminPanel.ts
+++ b/webview/composables/useAdminPanel.ts
@@ -4,12 +4,9 @@ import { adminpanelEvents } from '@Plugins/rebar-adminpanel/shared/events.js';
 
 const events = useEvents();
 
-export function useAdminPanel() {
-    const coordinatesInput = ref<string>('');
+export const useAdminPanel = () => {
 
-    const closePanel = () => {
-        events.emitServer(adminpanelEvents.toServer.closePanel);
-    }
+    let coordinatesInput = ref<string>('');
 
     const showUsers = async () => {
         await events.emitServerRpc(adminpanelEvents.rpc.showAllUsers);
@@ -19,6 +16,10 @@ export function useAdminPanel() {
         await events.emitServerRpc(adminpanelEvents.rpc.giveAdmin);
     };
 
+    const closePanel = () => {
+        events.emitServer(adminpanelEvents.toServer.closePanel);
+    }
+
     const toWaypoint = async () => {
         const coordsInput = coordinatesInput.value.trim();
         const coords = coordinatesInput.value.split(',').map(Number);
@@ -33,9 +34,9 @@ export function useAdminPanel() {
 
     return {
         coordinatesInput,
-        closePanel,
         showUsers,
+        closePanel,
         giveAdmin,
         toWaypoint,
     }
-}
+}
\ No newline at end of file
diff --git a/webview/composables/useUserSearch.ts b/webview/composables/useUserSearch.ts
index 67361d3..b689b94 100644
--- a/webview/composables/useUserSearch.ts
+++ b/webview/composables/useUserSearch.ts
@@ -10,17 +10,13 @@ export function useUserSearch() {
 
     const characterData = syncedMeta.getCharacter();
 
-    const playerDetails = ref<{id : string; name: string; discordId: number; }[]>([]);
+    const playerDetails = ref<{ id: string; name: string; discordId: number; }[]>([]);
     const searchQuery = ref<string>('');
 
     const getPlayerDetails = (details: { id: string; name: string; discordId: number; }[]) => {
         playerDetails.value = details;
     }
 
-    const closePanel = () => {
-        events.emitServer(adminpanelEvents.toServer.closeUsers);
-    };
-
     const filteredPlayers = computed(() => {
         if (!searchQuery.value) return playerDetails.value;
         const lowerCaseQuery = searchQuery.value.toLowerCase();
@@ -43,6 +39,11 @@ export function useUserSearch() {
         return filteredPlayers.value.length > 0 ? 'bg-green-500' : 'bg-yellow-500';
     })
 
+    const closePanel = () => {
+        events.emitServer(adminpanelEvents.toServer.closeUsers);
+    };
+
+
     return {
         closePanel,
         characterData,
@@ -52,5 +53,4 @@ export function useUserSearch() {
         searchResult,
         searchResultClass,
     }
-
 }
\ No newline at end of file