@necrolab/dashboard 0.4.221 → 0.5.2

package/src/stores/ui.js

@@ -7,7 +7,7 @@ import { timeDifference, betterSort, sortTaskIds } from "@/stores/utils";
 
 import mockTaskData from "@/stores/sampleData.js";
 import { useRouter } from "vue-router";
-const DEBUG = window.location.href.startsWith("http://localhost:5173");
+import { DEBUG } from "@/utils/debug";
 
 const ALL_SELECTED = 0;
 const SOME_SELECTED = 1;
@@ -26,13 +26,13 @@ export const useUIStore = defineStore("ui", () => {
     const tasks = ref({});
 
     const showSpinner = ref(false);
-    const botVersion = ref("-");
+    const botVersion = ref("0.0.0");
 
     const spinnerMessage = ref("");
 
     const profile = ref({
         profileTags: [],
-        accountTags: [],
+        tags: [],
         admin: false,
         name: ""
     });
@@ -57,6 +57,7 @@ export const useUIStore = defineStore("ui", () => {
     const taskIdOrder = ref(Object.keys(tasks.value));
     const modalData = ref({});
     const taskFilter = ref("All"); // 'All' or 'Checkout'
+    const selectedTaskForView = ref(null);
     const connection = new ConnectionHandler();
 
     const startPoint = ref(0);
@@ -103,8 +104,10 @@ export const useUIStore = defineStore("ui", () => {
         const t1 = new Date();
         for (const [key, value] of Object.entries(tasks.value)) {
             if (value.expirationTime)
-                tasks.value[key]._timeLeftString = timeDifference(Date.parse(value.expirationTime), t1.getTime());
-            else if (value.noCartholds) tasks.value[key]._timeLeftString = "No Cartholds";
+                tasks.value[key]._timeLeftString =
+                    value.expirationTime == "Invalid Date"
+                        ? "No Cartholds"
+                        : timeDifference(Date.parse(value.expirationTime), t1.getTime());
             else tasks.value[key]._timeLeftString = undefined;
         }
 
@@ -138,7 +141,11 @@ export const useUIStore = defineStore("ui", () => {
     connection.init("/api/updates?type=tasks");
 
     const pd = (e) => {
-        if (!e.target.closest(".scrollable")) {
+        if (
+            !e.target.closest(".scrollable") &&
+            !e.target.closest(".dropdown-menu") &&
+            !e.target.closest(".option-list")
+        ) {
             e.preventDefault();
         }
     };
@@ -229,15 +236,20 @@ export const useUIStore = defineStore("ui", () => {
         let relevantTasks = Object.values(tasks.value).filter((t) => t.siteId === currentCountry.value.siteId);
         if (currentEvent.value) relevantTasks = relevantTasks.filter((t) => t.eventId === currentEvent.value);
 
-        queueStats.value.total = 0;
         queueStats.value.queued = relevantTasks.filter((t) => t.inQueue).length || 0;
-        queueStats.value.show = queueStats.value.total > 0;
         const sleepingStatuses = ["sleeping in queue", "waiting for drop", "waiting for carting", "waiting for queue"];
         queueStats.value.sleeping = relevantTasks.filter((t) =>
             sleepingStatuses.includes(t.status.toLowerCase())
         ).length;
-        const positions = relevantTasks.map((t) => t.queuePosition).filter((e) => !isNaN(e));
+        const positions = relevantTasks
+            .map((t) => t.queuePosition)
+            .filter((e) => !isNaN(e))
+            .filter(Boolean);
         queueStats.value.nextQueuePasses = positions.sort((a, b) => a - b);
+
+        // Only show stats if there are any queued tasks, sleeping tasks, or queue positions
+        queueStats.value.show =
+            queueStats.value.queued > 0 || queueStats.value.sleeping > 0 || queueStats.value.nextQueuePasses.length > 0;
     };
 
     const toggleModal = (name, clearValue = false) => {
@@ -377,6 +389,7 @@ export const useUIStore = defineStore("ui", () => {
         activeModal,
         toggleModal,
         modalData,
+        selectedTaskForView,
 
         // sorting
         toggleSort: (sort = null) => {
@@ -481,11 +494,11 @@ export const useUIStore = defineStore("ui", () => {
         },
 
         toggleProfileSelected: (id) => {
-            const idx = profiles.value.findIndex((p) => p._id === id);
+            const idx = profiles.value.findIndex((p) => p.id === id);
             profiles.value[idx].selected = !profiles.value[idx].selected;
         },
         toggleAccountSelected: (id) => {
-            const idx = accounts.value.findIndex((p) => p._id === id);
+            const idx = accounts.value.findIndex((p) => p.id === id);
             accounts.value[idx].selected = !accounts.value[idx].selected;
         },
 
@@ -496,8 +509,30 @@ export const useUIStore = defineStore("ui", () => {
         massEditPresaleCode: (eventId, presaleCode) => connection.sendMassEditPresaleCode(eventId, presaleCode),
 
         // alerts
-        showError: (err) => toast.error(err, { autoClose: 2000 }),
-        showSuccess: (msg) => toast.success(msg, { autoClose: 2000 }),
+        showError: (err) =>
+            toast.error(err, {
+                autoClose: 1400,
+                pauseOnHover: false,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnFocusLoss: false,
+                transition: "slide",
+                position: "top-right",
+                closeButton: true,
+                newestOnTop: true
+            }),
+        showSuccess: (msg) =>
+            toast.success(msg, {
+                autoClose: 1400,
+                pauseOnHover: false,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnFocusLoss: false,
+                transition: "slide",
+                position: "top-right",
+                closeButton: true,
+                newestOnTop: true
+            }),
         // Country
         currentCountry,
         setCurrentCountry: (country, closeModal, newModule) => {
@@ -513,8 +548,8 @@ export const useUIStore = defineStore("ui", () => {
         // Event
         currentEvent,
         setCurrentEvent: (event) => {
-            logger.Info("Setting current event", event);
-            currentEvent.value = event;
+            if (event) logger.Info("Setting current event to:", event);
+            currentEvent.value = event?.match(/\s\((.*?)\)$/)?.[1] || "";
             localStorage.setItem("current-event", currentEvent.value);
             refreshQueueStats();
         },
@@ -530,26 +565,26 @@ export const useUIStore = defineStore("ui", () => {
         accounts,
         addAccount: (acc) => {
             if (!DEBUG) return connection.sendSaveAccount(acc);
-            const isEdit = accounts.value.findIndex((p) => p._id === acc._id);
+            const isEdit = accounts.value.findIndex((p) => p.id === acc.id);
             if (DEBUG && isEdit !== -1) {
                 Object.keys(acc).forEach((k) => (accounts.value[isEdit][k] = acc[k]));
-            } else accounts.value.push({ ...acc, _id: Math.random() });
+            } else accounts.value.push({ ...acc, id: Math.random() });
         },
         setAccounts: (accs) => accounts.value.push(...accs),
         profiles,
         addProfile: (profile) => {
             if (!DEBUG) return connection.sendSaveProfile(profile);
-            const isEdit = profiles.value.findIndex((p) => p._id === profile._id);
+            const isEdit = profiles.value.findIndex((p) => p.id === profile.id);
 
             if (DEBUG && isEdit !== -1) {
                 Object.keys(profile).forEach((k) => (accounts.value[isEdit][k] = profile[k]));
             } else {
-                profiles.value.push({ ...profile, _id: Math.random() });
+                profiles.value.push({ ...profile, id: Math.random() });
             }
         },
         deleteProfile: (id) => {
             if (!DEBUG) return connection.sendDeleteProfile(id);
-            else profiles.value = profiles.value.filter((p) => p._id != id);
+            else profiles.value = profiles.value.filter((p) => p.id != id);
         },
         setProfiles: (profs) => (profiles.value = profs),
         proxies,

package/src/stores/utils.js

@@ -361,7 +361,29 @@ const timeDifference = (date1, date2) => {
     return str;
 };
 
-const parseEventUrl = (url) => {
+const parseAxsEventUrl = (url) => {
+    const HOST = "www.axs.com";
+
+    if (!url.startsWith("https://")) return { eventId: url };
+    if (!url.includes(`https://${HOST}`)) return {};
+
+    const siteMatch = url.match(new RegExp(`https://${HOST}(/uk)?`));
+    const eventMatch = url.match(/\/events\/(\d+)/);
+    const promoMatch = url.match(/\/promopage\/(\d+)/);
+
+    if (!siteMatch || !eventMatch) return {};
+
+    const siteId = siteMatch[1] === "/uk" ? "AXS_UK" : "AXS_US";
+    const eventId = eventMatch[1];
+    const promoId = promoMatch?.[1];
+
+    const result = { eventId, siteId };
+    if (promoId) result.promoId = promoId;
+
+    return result;
+};
+
+const parseTmEventUrl = (url) => {
     if (!url.includes("https://")) {
         return { eventId: url };
     }
@@ -376,14 +398,14 @@ const parseEventUrl = (url) => {
     };
 };
 
-const isEU = (siteId) => !["US", "AU", "UK", "LN", "CA", "NZ", "IE"].includes(siteId.replaceAll("TM_", ""));
+const isEU = (siteId) => !["US", "AU", "UK", "CA", "NZ", "IE"].includes(siteId.split("_")?.[1] || siteId);
 
 const removeDuplicates = (arr) => [...new Set(arr)];
 
 const pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 
 const fakeId = () => {
-    const cityInfo = pickRandom(cities.filter((x) => x.state != "GA" && x.state != "PR" && x.zip_code > 10000));
+    const cityInfo = pickRandom(cities.filter((x) => x[2] != "GA" && x[2] != "PR" && x[0] > 10000));
 
     const profile = {
         zipCode: String(cityInfo[0]),
@@ -509,6 +531,8 @@ function sortTaskIds(a, b) {
     return aInfo.num - bInfo.num;
 }
 
+const firstUpper = (str) => `${str[0].toUpperCase()}${str.slice(1).toLowerCase()}`;
+
 function betterSort(a, b) {
     if (a === undefined || a === null) return b === undefined || b === null ? 0 : -1;
     if (b === undefined || b === null) return 1;
@@ -542,7 +566,8 @@ export {
     generateStreetAddress,
     timeDifference,
     sortAlphaNum,
-    parseEventUrl,
+    parseAxsEventUrl,
+    parseTmEventUrl,
     isEU,
     removeDuplicates,
     pickRandom,
@@ -550,5 +575,6 @@ export {
     getCardType,
     validateCard,
     sortTaskIds,
+    firstUpper,
     betterSort
 };

package/src/types/index.js

@@ -0,0 +1,41 @@
+/**
+ * @typedef {Object} Task
+ * @property {string} accountTag
+ * @property {boolean} active
+ * @property {boolean} agedAccount
+ * @property {string} createdAt
+ * @property {string} createdAt
+ * @property {boolean} doNotPay
+ * @property {string} email
+ * @property {string} eventCity
+ * @property {string} eventDate
+ * @property {string} eventId
+ * @property {string} eventImage
+ * @property {string} eventLocalDate
+ * @property {string} eventName
+ * @property {string} eventUrl
+ * @property {string} eventVenue
+ * @property {string} expirationTime
+ * @property {boolean} isExpanded
+ * @property {boolean} loginAfterCart
+ * @property {boolean} manual
+ * @property {string} mode
+ * @property {string} openerLink
+ * @property {string} password
+ * @property {string} presaleCode
+ * @property {boolean} presaleMode
+ * @property {string} profileName
+ * @property {Array} profileTags
+ * @property {string} proxy
+ * @property {number} quantity
+ * @property {boolean} quickQueue
+ * @property {string} reservedTicketsList
+ * @property {boolean} selected
+ * @property {string} siteId
+ * @property {boolean} smartTimer
+ * @property {string} status
+ * @property {string} statusColor
+ * @property {string} taskId
+ * @property {string} venueName
+ * @property {string} _timeLeftString
+ */

package/src/utils/debug.js

@@ -0,0 +1 @@
+export const DEBUG = window.location.href.includes(":5173");

package/src/views/Accounts.vue

@@ -1,11 +1,14 @@
 <template>
     <div>
-        <div class="flex items-center">
+        <div class="flex items-center justify-between pt-5 pb-2">
             <!-- Heading -->
-            <h4 class="text-white text-base font-bold mb-5 pt-5">
-                Accounts
-                <span class="text-light-300 pl-1">{{ ui.getSelectedAccounts().length }}</span>
-            </h4>
+            <div class="flex items-center justify-center gap-4">
+                <MailIcon class="cursor-pointer smooth-hover text-white" />
+                <h4 class="text-base font-semibold text-light-300">
+                    Accounts
+                    <span class="text-sm font-medium text-light-400 pl-1">{{ ui.getSelectedAccounts().length }}</span>
+                </h4>
+            </div>
             <ul class="mobile-icons">
                 <li>
                     <EyeToggle v-model="privacy" />
@@ -14,80 +17,67 @@
                     <button
                         :disabled="ui.disabledButtons['create-accounts']"
                         @click="ui.toggleModal('account-creator', true)"
-                    >
-                        <PlayIcon />
+                        class="smooth-hover">
+                        <PlayIcon class="w-4 h-4" />
                     </button>
                 </li>
                 <li>
                     <button
                         :disabled="ui.disabledButtons['add-accounts']"
                         @click="ui.toggleModal('create-account', true)"
-                    >
-                        <PlusIcon />
+                        class="smooth-hover">
+                        <PlusIcon class="w-4 h-4" />
                     </button>
                 </li>
             </ul>
         </div>
 
         <div class="flex items-center mb-3">
-            <div class="flex sm:w-auto w-full justify-start items-center gap-1">
+            <div class="unified-search-group flex sm:w-auto w-full justify-start items-center">
                 <TagToggle
-                    class="smooth-hover rounded-l min-w-9"
+                    class="smooth-hover"
                     :options="['All', 'Enabled', 'Disabled']"
                     @change="(f) => (ui.search.accounts.show = f)"
-                />
+                    :noBorder="true" />
                 <input
-                    class="h-10 w-44 text-white text-sm p-2 bg-dark-500 flex items-center relative border-2 border-dark-550"
+                    class="h-10 w-44 text-white text-sm p-2 bg-dark-500 flex items-center relative"
                     placeholder="Search Email"
-                    v-model="ui.search.accounts.query"
-                />
-
-                <!-- <Dropdown
-                    class="min-w-16 text-sm lg:w-24 bg-dark-550 rounded-none"
-                    :onClick="(f) => (ui.search.accounts.show = f)"
-                    default="All"
-                    :chosen="ui.search.accounts.show"
-                    :options="['All', 'Enabled', 'Disabled']"
-                    rightAmount="right-2"
-                /> -->
-                <!-- <TagToggle
-                    class="smooth-hover rounded-r w-32"
-                    :options="allTags"
-                    @change="(f) => (ui.search.accounts.tag = f)"
-                /> -->
+                    autocomplete="new-password"
+                    data-dashlane-rid=""
+                    data-dashlane-label=""
+                    data-dashlane-classification=""
+                    data-form-type="other"
+                    v-model="ui.search.accounts.query" />
 
                 <Dropdown
-                    class="rounded-r min-w-32 bg-dark-500 relative z-50 border-2 border-dark-550"
-                    style="margin-left: 0 !important; border-width: 2px !important"
+                    class="dropdown-unified relative z-50"
                     rightAmount="right-1"
                     default="Any"
                     :value="ui.search.accounts.tag"
                     :onClick="(f) => (ui.search.accounts.tag = f)"
                     :options="allTags"
-                    :capitalize="true"
-                />
+                    :includeAdjacentButtons="true"
+                    :capitalize="true" />
             </div>
 
             <div class="ml-auto gap-2 hidden lg:flex">
                 <div
-                    class="bg-dark-400 justify-between px-4 w-44 flex text-white text-sm items-center py-1 rounded-lg ml-auto h-10"
-                >
+                    class="bg-dark-400 border border-dark-650 justify-between px-4 w-44 flex text-white text-xs font-medium items-center rounded-md ml-auto h-10">
                     <p>Privacy</p>
                     <Switch class="scale-75" v-model="privacy" />
                 </div>
                 <button
                     :disabled="ui.disabledButtons['create-accounts']"
-                    class="bg-dark-400 disabled:opacity-70 smooth-hover w-44 flex text-white text-sm justify-center items-center py-1 px-2 rounded-lg ml-auto h-10"
-                    @click="ui.toggleModal('account-creator')"
-                >
-                    Create Accounts <PlayIcon class="ml-2" />
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-dark-650 hover:border-dark-700 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    @click="ui.toggleModal('account-creator')">
+                    Create Accounts
+                    <PlayIcon class="ml-2" />
                 </button>
 
                 <button
                     :disabled="ui.disabledButtons['add-accounts']"
-                    class="bg-dark-400 disabled:opacity-70 smooth-hover w-44 flex text-white text-sm justify-center items-center py-1 px-2 rounded-lg ml-auto h-10"
-                    @click="ui.toggleModal('create-account')"
-                >
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-dark-650 hover:border-dark-700 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    @click="ui.toggleModal('create-account')">
                     Add Account
                     <PlusIcon class="ml-2" />
                 </button>
@@ -95,10 +85,10 @@
         </div>
 
         <!-- Tasks (Table) -->
-        <AccountView :tasks="processedTasks" class="max-h-big-acc" />
+        <AccountView :accounts="processedTasks" class="max-h-big-acc" />
 
         <!-- Modal -->
-        <transition-group name="fade" mode="out-in">
+        <transition-group name="fade">
             <CreateAccount v-if="activeModal === 'create-account'" />
             <AccountCreator v-if="activeModal === 'account-creator'" />
         </transition-group>
@@ -108,20 +98,96 @@
 .custom-dropdown-content {
     top: 2.6rem !important;
     left: -13px;
-    @apply border border-light-300;
+    @apply border border-dark-650;
+}
+
+/* Unified search component group */
+.unified-search-group {
+    border: 2px solid oklch(0.2809 0 0);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: oklch(0.2603 0 0);
+    transition: all 0.15s ease;
+    display: flex;
+
+    :deep(.tag-toggle),
+    :deep(.dropdown),
+    input {
+        border: none !important;
+        border-width: 0 !important;
+        border-radius: 0 !important;
+        height: 40px !important;
+        background: transparent !important;
+        box-shadow: none !important;
+        min-width: fit-content !important;
+    }
+
+    :deep(.tag-toggle) {
+        padding: 0;
+        border: 0 solid transparent !important;
+        border-top: 0 !important;
+        border-bottom: 0 !important;
+        border-left: 0 !important;
+        border-right: 0 !important;
+    }
+
+    :deep(.tag-toggle button) {
+        font-size: 0.875rem;
+        padding: 0.5rem 0.75rem;
+        min-width: fit-content;
+        border: 0 solid transparent !important;
+        border-top: 0 !important;
+        border-bottom: 0 !important;
+        border-left: 0 !important;
+        border-right: 0 !important;
+    }
+
+    :deep(.dropdown) {
+        width: 120px !important;
+        min-width: 120px !important;
+    }
+
+    :deep(.dropdown-display) {
+        padding: 0 0.75rem;
+        font-size: 0.875rem;
+    }
+
+    input {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        flex: 1;
+
+        &::placeholder {
+            color: oklch(0.50 0 0);
+        }
+
+        &:focus {
+            outline: none !important;
+        }
+    }
+
+    &:hover {
+        border-color: oklch(0.30 0 0);
+    }
+
+    &:focus-within {
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
 }
 .max-h-big-acc {
     max-height: calc(100vh - 14rem);
-    overflow: hidden;
+    overflow: auto;
 }
 </style>
 <script setup>
 import { computed, watch, ref } from "vue";
-import AccountView from "@/components/editors/account/AccountView.vue";
-import AccountCreator from "@/components/editors/account/AccountCreator.vue";
-import CreateAccount from "@/components/editors/account/CreateAccount.vue";
+import AccountView from "@/components/Editors/Account/AccountView.vue";
+import AccountCreator from "@/components/Editors/Account/AccountCreator.vue";
+import CreateAccount from "@/components/Editors/Account/CreateAccount.vue";
 import { useUIStore } from "@/stores/ui";
-import { PlusIcon, PlayIcon } from "@/components/icons";
+import { PlusIcon, PlayIcon, MailIcon } from "@/components/icons";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import TagToggle from "@/components/Editors/TagToggle.vue";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";