@necrolab/dashboard 0.4.57 → 0.4.59

package/backend/endpoints.js

@@ -272,9 +272,9 @@ const saveProfile = async (profile) => {
 };
 
 const deleteProfile = async (profile) => {
-    const { _id } = profile;
-    Bot.Profiles = Bot.Profiles.filter((p) => p._id !== profile._id);
-    pushWSUpdate({ event: "delete-profile", profile: { _id: _id } });
+    const { id } = profile;
+    Bot.Profiles = Bot.Profiles.filter((p) => p.id !== profile.id);
+    pushWSUpdate({ event: "delete-profile", profile: { id } });
 };
 
 async function handleWebsocketMessage(msg) {

package/backend/mock-data.js

@@ -1,7 +1,7 @@
 const users = [
     {
         event: "auth",
-        _id: "641a5292b561088b64fe390b",
+        id: "641a5292b561088b64fe390b",
         name: "Admin",
         password: "admin",
         profilePicture: "https://cdn.discordapp.com/avatars/435549216304267264/6cfd74ad7c5939a0bcbf218aa08be8cb.png",
@@ -13,7 +13,7 @@ const users = [
 ];
 
 const profile = {
-    _id: "645a82606ef8b7201b728805",
+    id: "645a82606ef8b7201b728805",
     enabled: false,
     profileName: "Master US 43725 [admin]",
     address: "88081 Piper Ways",
@@ -34,14 +34,14 @@ const profile = {
 };
 
 const profiles = [];
-for (let i = 0; i < 1000; i++) profiles.push({ ...profile, _id: i });
+for (let i = 0; i < 1000; i++) profiles.push({ ...profile, id: i });
 
 export { users, profiles };
 
 export const tmAccounts = [
     {
         tags: ["admin"],
-        _id: 1,
+        id: 1,
         password: "123",
         email: "tm@tm.com"
     }
@@ -50,7 +50,7 @@ export const tmAccounts = [
 export const axsAccounts = [
     {
         tags: ["admin"],
-        _id: 2,
+        id: 2,
         password: "123",
         email: "axs@axs.com"
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.4.57",
+    "version": "0.4.59",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && npx workbox-cli generateSW workbox-config.cjs && vite build",
@@ -15,7 +15,7 @@
     "dependencies": {
         "@faker-js/faker": "^7.6.0",
         "@msgpack/msgpack": "^3.0.0-beta2",
-        "@necrolab/tm-renderer": "^0.1.11",
+        "@necrolab/tm-renderer": "^0.1.12",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vueuse/core": "^11.3.0",
         "autoprefixer": "^10.4.21",

package/src/components/Editors/Account/Account.vue

@@ -1,185 +1,173 @@
 <template>
-  <Row
-    class="relative text-white grid-cols-5 md:grid-cols-7 h-16"
-    @click="ui.setOpenContextMenu('')"
-    @click.right.prevent="ui.setOpenContextMenu('')"
-  >
-    <div class="col-span-3 lg:col-span-2 flex">
-      <Checkbox
-        class="ml-0 mr-4"
-        :toggled="props.account.selected"
-        @valueUpdate="ui.toggleAccountSelected(props.account._id)"
-      />
-      <h4 class="mx-auto text-white" @click="copy(props.account.email)">
-        {{ props.account.email }}
-      </h4>
-    </div>
-    <div class="col-span-2 hidden md:block" @click="copy(props.account.password)">
-      <h4 class="text-white">
-        {{
-          props.account.privacy
-            ? "•".repeat(props.account.password.length)
-            : props.account.password
-        }}
-      </h4>
-    </div>
-    <div class="col-span-1">
-      <h4 v-if="props.account.enabled" class="text-green-400 flex justify-center">
-        <img class="w-3 h-3 green" src="/img/controls/enable.svg" />
-      </h4>
-      <h4 v-else class="text-red-400 flex justify-center">
-        <img class="w-3 h-3 fill-red-400" src="/img/close.svg" />
-      </h4>
-    </div>
-
-    <div class="col-span-1 hidden lg:block">
-      <h4 class="text-white flex justify-center gap-1">
-        <TagLabel v-for="tag in props.account.tags" :key="tag" :text="tag" />
-      </h4>
-    </div>
-
-    <div class="col-span-1 flex">
-      <ul class="account-buttons">
-        <li>
-          <button @click="edit">
-            <EditIcon />
-          </button>
-        </li>
-        <li v-if="props.account.enabled">
-          <button @click="disable">
-            <img class="w-4 h-4" src="/img/controls/disable.svg" />
-          </button>
-        </li>
-        <li v-else>
-          <button @click="enable">
-            <img class="w-4 h-4" src="/img/controls/enable.svg" />
-          </button>
-        </li>
-      </ul>
-    </div>
-  </Row>
+    <Row
+        class="relative h-16 grid-cols-5 text-white md:grid-cols-7"
+        @click="ui.setOpenContextMenu('')"
+        @click.right.prevent="ui.setOpenContextMenu('')">
+        <div class="col-span-3 flex lg:col-span-2">
+            <Checkbox
+                class="ml-0 mr-4"
+                :toggled="props.account.selected"
+                @valueUpdate="ui.toggleAccountSelected(props.account.id)" />
+            <h4 class="mx-auto text-white" @click="copy(props.account.email)">
+                {{ props.account.email }}
+            </h4>
+        </div>
+        <div class="col-span-2 hidden md:block" @click="copy(props.account.password)">
+            <h4 class="text-white">
+                {{ props.account.privacy ? "•".repeat(props.account.password.length) : props.account.password }}
+            </h4>
+        </div>
+        <div class="col-span-1">
+            <h4 v-if="props.account.enabled" class="flex justify-center text-green-400">
+                <img class="green h-3 w-3" src="/img/controls/enable.svg" />
+            </h4>
+            <h4 v-else class="flex justify-center text-red-400">
+                <img class="h-3 w-3 fill-red-400" src="/img/close.svg" />
+            </h4>
+        </div>
+
+        <div class="col-span-1 hidden lg:block">
+            <h4 class="flex justify-center gap-1 text-white">
+                <TagLabel v-for="tag in props.account.tags" :key="tag" :text="tag" />
+            </h4>
+        </div>
+
+        <div class="col-span-1 flex">
+            <ul class="account-buttons">
+                <li>
+                    <button @click="edit">
+                        <EditIcon />
+                    </button>
+                </li>
+                <li v-if="props.account.enabled">
+                    <button @click="disable">
+                        <img class="h-4 w-4" src="/img/controls/disable.svg" />
+                    </button>
+                </li>
+                <li v-else>
+                    <button @click="enable">
+                        <img class="h-4 w-4" src="/img/controls/enable.svg" />
+                    </button>
+                </li>
+            </ul>
+        </div>
+    </Row>
 </template>
 <style lang="scss" scoped>
 h4 {
-  @apply text-center;
+    @apply text-center;
 }
 .account-buttons {
-  @apply flex items-center justify-center mx-auto bg-dark-500 border border-dark-650 rounded;
-  padding: 3px;
-  gap: 2px;
-
-  button {
-    @apply flex items-center justify-center transition-all duration-150 border-0 outline-0 relative rounded;
-    background: transparent;
-    width: 28px;
-    height: 28px;
-    color: #d0d0d3;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: #ffffff;
-      transform: scale(1.05);
+    @apply mx-auto flex items-center justify-center rounded border border-dark-650 bg-dark-500;
+    padding: 3px;
+    gap: 2px;
+
+    button {
+        @apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
+        background: transparent;
+        width: 28px;
+        height: 28px;
+        color: #d0d0d3;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: #ffffff;
+            transform: scale(1.05);
+        }
+
+        &:active {
+            background: rgba(255, 255, 255, 0.2);
+            transform: scale(0.95);
+        }
+    }
+
+    svg,
+    img {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        z-index: 1;
     }
 
-    &:active {
-      background: rgba(255, 255, 255, 0.2);
-      transform: scale(0.95);
+    svg path {
+        fill: currentColor;
     }
-  }
-
-  svg,
-  img {
-    width: 16px;
-    height: 16px;
-    position: relative;
-    z-index: 1;
-  }
-
-  svg path {
-    fill: currentColor;
-  }
 }
 
 // Tablet optimization
 @media (max-width: 1024px) {
-  h4 {
-    font-size: 10px !important;
-  }
+    h4 {
+        font-size: 10px !important;
+    }
 
-  .account-buttons {
-    padding: 3px;
-    gap: 2px;
+    .account-buttons {
+        padding: 3px;
+        gap: 2px;
 
-    button {
-      width: 26px;
-      height: 26px;
-    }
+        button {
+            width: 26px;
+            height: 26px;
+        }
 
-    svg,
-    img {
-      width: 14px;
-      height: 14px;
+        svg,
+        img {
+            width: 14px;
+            height: 14px;
+        }
     }
-  }
 
-  .account-id {
-    font-size: 6px !important;
-    margin-right: -12px;
-    margin-top: 20px;
-  }
+    .account-id {
+        font-size: 6px !important;
+        margin-right: -12px;
+        margin-top: 20px;
+    }
 }
 
 // Mobile optimization
 @media (max-width: 768px) {
-  .account-buttons {
-    padding: 2px;
-    gap: 1px;
-
-    button {
-      width: 22px;
-      height: 22px;
-    }
-
-    svg,
-    img {
-      width: 12px;
-      height: 12px;
+    .account-buttons {
+        padding: 2px;
+        gap: 1px;
+
+        button {
+            width: 22px;
+            height: 22px;
+        }
+
+        svg,
+        img {
+            width: 12px;
+            height: 12px;
+        }
     }
-  }
 }
 
 // iPhone vertical (portrait) specific
 @media (max-width: 480px) and (orientation: portrait) {
-  .account-buttons {
-    padding: 2px;
-    gap: 1px;
-
-    button {
-      width: 18px;
-      height: 18px;
-
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-
-    svg,
-    img {
-      width: 10px;
-      height: 10px;
+    .account-buttons {
+        padding: 2px;
+        gap: 1px;
+
+        button {
+            width: 18px;
+            height: 18px;
+
+            &:hover {
+                transform: scale(1.1);
+            }
+        }
+
+        svg,
+        img {
+            width: 10px;
+            height: 10px;
+        }
     }
-  }
 }
 </style>
 <script setup>
 import { Row } from "@/components/Table";
-import {
-  PlayIcon,
-  TrashIcon,
-  BagWhiteIcon,
-  PauseIcon,
-  EditIcon,
-} from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import TagLabel from "@/components/Editors/TagLabel.vue";
@@ -187,18 +175,18 @@ import TagLabel from "@/components/Editors/TagLabel.vue";
 const ui = useUIStore();
 
 const props = defineProps({
-  account: { type: Object },
+    account: { type: Object }
 });
 
 const copy = (txt) => {
-  if (!txt) return;
-  navigator.clipboard.writeText(txt);
-  ui.showSuccess("Copied text");
+    if (!txt) return;
+    navigator.clipboard.writeText(txt);
+    ui.showSuccess("Copied text");
 };
 const enable = async () => await ui.addAccount({ ...props.account, enabled: true });
 const disable = async () => await ui.addAccount({ ...props.account, enabled: false });
 const edit = () => {
-  ui.currentlyEditing = props.account;
-  ui.toggleModal("create-account");
+    ui.currentlyEditing = props.account;
+    ui.toggleModal("create-account");
 };
 </script>

package/src/components/Editors/Account/AccountView.vue

@@ -1,37 +1,37 @@
 <template>
     <Table>
-        <Header class="text-center grid-cols-5 md:grid-cols-7 sticky top-0 bg-dark-400 z-10">
-            <div class="lg:col-span-2 col-span-3 flex">
+        <Header class="sticky top-0 z-10 grid-cols-5 bg-dark-400 text-center md:grid-cols-7">
+            <div class="col-span-3 flex lg:col-span-2">
                 <Checkbox
                     class="mr-3"
                     :toggled="ui.mainCheckbox.accounts"
                     @valueUpdate="ui.toggleMainCheckbox('accounts')"
                     :isHeader="true" />
                 <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
-                    <MailIcon class="mr-0 md:mr-3 w-4 h-4" />
+                    <MailIcon class="mr-0 h-4 w-4 md:mr-3" />
                     <h4 class="hidden md:flex">Email</h4>
                 </div>
             </div>
-            <div class="col-span-2 items-center justify-center hidden md:flex" v-once>
-                <KeyIcon class="mr-0 md:mr-3 w-4 h-4" />
+            <div class="col-span-2 hidden items-center justify-center md:flex" v-once>
+                <KeyIcon class="mr-0 h-4 w-4 md:mr-3" />
                 <h4 class="hidden md:flex">Password</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <CheckmarkIcon class="mr-0 md:mr-3 w-4 h-4" />
+                <CheckmarkIcon class="mr-0 h-4 w-4 md:mr-3" />
                 <h4 class="hidden md:flex">Enabled</h4>
             </div>
-            <div class="col-span-1 hidden lg:flex items-center justify-center" v-once>
-                <TicketIcon class="mr-0 md:mr-3 w-4 h-4" />
+            <div class="col-span-1 hidden items-center justify-center lg:flex" v-once>
+                <TicketIcon class="mr-0 h-4 w-4 md:mr-3" />
                 <h4 class="hidden md:flex">Tags</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <ClickIcon class="mr-0 md:mr-3 w-4 h-4" />
+                <ClickIcon class="mr-0 h-4 w-4 md:mr-3" />
                 <h4 class="hidden md:flex">Actions</h4>
             </div>
         </Header>
         <div
             v-if="toRender.length != 0"
-            class="overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+            class="hidden-scrollbars stop-pan overflow-y-auto overflow-x-hidden"
             :style="{ maxHeight: dynamicTableHeight }">
             <RecycleScroller
                 :items="toRender"
@@ -39,7 +39,7 @@
                 key-field="index"
                 class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650">
                 <template #default="props">
-                    <div class="account" :key="`account-${props.item._id || props.item.index}`">
+                    <div class="account" :key="`account-${props.item.id || props.item.index}`">
                         <Account
                             @click="i[props.item.index]++"
                             :class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
@@ -48,10 +48,10 @@
                 </template>
             </RecycleScroller>
         </div>
-        <div v-else class="flex flex-col items-center justify-center py-8 bg-dark-400 empty-state text-center">
-            <MailIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50" />
-            <p class="text-light-400 text-sm">No accounts found</p>
-            <p class="text-light-500 text-xs mt-1">Create accounts to get started</p>
+        <div v-else class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center">
+            <MailIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
+            <p class="text-sm text-light-400">No accounts found</p>
+            <p class="mt-1 text-xs text-light-500">Create accounts to get started</p>
         </div>
     </Table>
 </template>
@@ -102,8 +102,8 @@ const toRender = computed(() => {
 
     // Initialize reactive refs for click tracking
     rendered.forEach((t) => {
-        if (t._id && !(t._id in i.value)) {
-            i.value[t._id] = 0;
+        if (t.id && !(t.id in i.value)) {
+            i.value[t.id] = 0;
         }
         if (!(t.index in i.value)) {
             i.value[t.index] = 0;

package/src/components/Editors/Profile/Profile.vue

@@ -1,45 +1,45 @@
 <template>
     <Row
-        class="relative text-white grid-cols-7 lg:grid-cols-8"
+        class="relative grid-cols-7 text-white lg:grid-cols-8"
         @click="ui.setOpenContextMenu('')"
-        @click.right.prevent="ui.setOpenContextMenu('')"
-    >
-        <div class="col-span-3 lg:col-span-2 flex">
+        @click.right.prevent="ui.setOpenContextMenu('')">
+        <div class="col-span-3 flex lg:col-span-2">
             <Checkbox
                 class="ml-0 mr-4"
                 :toggled="props.profile.selected"
-                @valueUpdate="ui.toggleProfileSelected(props.profile._id)"
-            />
+                @valueUpdate="ui.toggleProfileSelected(props.profile.id)" />
             <h4 class="mx-auto text-white">
                 {{ props.profile.profileName }}
             </h4>
         </div>
         <div class="col-span-1 lg:col-span-2">
-            <h4 class="text-white flex justify-center items-center gap-2">
-                <span class="hidden sm:block">{{
-                    props.profile.privacy
-                        ? props.profile.cardNumber[0] +
-                          "•".repeat(props.profile.cardNumber.length - 5) +
-                          props.profile.cardNumber.slice(-4)
-                        : validateCard(props.profile.cardNumber).formatted
-                }}</span>
-                <img class="w-6 h-6" :src="getAccountType()" />
+            <h4 class="flex items-center justify-center gap-2 text-white">
+                <span class="hidden sm:block">
+                    {{
+                        props.profile.privacy
+                            ? props.profile.cardNumber[0] +
+                              "•".repeat(props.profile.cardNumber.length - 5) +
+                              props.profile.cardNumber.slice(-4)
+                            : validateCard(props.profile.cardNumber).formatted
+                    }}
+                </span>
+                <img class="h-6 w-6" :src="getAccountType()" />
             </h4>
         </div>
         <div class="col-span-1">
             <h4 class="text-white">{{ expDate() }}</h4>
         </div>
         <div class="col-span-1">
-            <h4 v-if="props.profile.enabled" class="text-green-400 flex justify-center">
-                <img class="w-3 h-3 green" src="/img/controls/enable.svg" />
+            <h4 v-if="props.profile.enabled" class="flex justify-center text-green-400">
+                <img class="green h-3 w-3" src="/img/controls/enable.svg" />
             </h4>
-            <h4 v-else class="text-red-400 flex justify-center">
-                <img class="w-3 h-3 fill-red-400" src="/img/close.svg" />
+            <h4 v-else class="flex justify-center text-red-400">
+                <img class="h-3 w-3 fill-red-400" src="/img/close.svg" />
             </h4>
         </div>
 
         <div class="col-span-1 hidden lg:block">
-            <h4 class="text-white flex justify-center gap-1">
+            <h4 class="flex justify-center gap-1 text-white">
                 <TagLabel v-for="tag in props.profile.tags" :key="tag" :text="tag" />
             </h4>
         </div>
@@ -53,12 +53,12 @@
                 </li>
                 <li v-if="props.profile.enabled">
                     <button @click="disable">
-                        <img class="w-4 h-4" src="/img/controls/disable.svg" />
+                        <img class="h-4 w-4" src="/img/controls/disable.svg" />
                     </button>
                 </li>
                 <li v-else>
                     <button @click="enable">
-                        <img class="w-4 h-4" src="/img/controls/enable.svg" />
+                        <img class="h-4 w-4" src="/img/controls/enable.svg" />
                     </button>
                 </li>
                 <li>
@@ -77,12 +77,12 @@ h4 {
     @apply text-center;
 }
 .profile-buttons {
-    @apply flex items-center justify-center mx-auto bg-dark-500 border border-dark-650 rounded;
+    @apply mx-auto flex items-center justify-center rounded border border-dark-650 bg-dark-500;
     padding: 3px;
     gap: 2px;
 
     button {
-        @apply flex items-center justify-center transition-all duration-150 border-0 outline-0 relative rounded;
+        @apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
         background: transparent;
         width: 28px;
         height: 28px;
@@ -200,8 +200,10 @@ const props = defineProps({
 
 const getAccountType = () => {
     var cn = props.profile.cardNumber;
-    if (cn.startsWith("4")) return `/img/banks/visa.svg`; // visa
-    else if (cn.startsWith("3")) return `/img/banks/amex.svg`; // amex
+    if (cn.startsWith("4"))
+        return `/img/banks/visa.svg`; // visa
+    else if (cn.startsWith("3"))
+        return `/img/banks/amex.svg`; // amex
     else if (cn.startsWith("5")) return `/img/banks/mastercard.svg`; // master
 };
 
@@ -213,5 +215,5 @@ const edit = () => {
     ui.currentlyEditing = props.profile;
     ui.toggleModal("create-profile");
 };
-const deleteProfile = async () => await ui.deleteProfile(props.profile._id);
+const deleteProfile = async () => await ui.deleteProfile(props.profile.id);
 </script>