@necrolab/dashboard 0.4.39 → 0.4.41

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

@@ -7,48 +7,77 @@
 
         <div>
             <div class="form-grid mt-7 mb-4">
-                <div class="input-wrapper col-span-8 z-inf">
-                    <label class="label-override">Account Tag </label>
-                    <div :class="`input-default ${errors.includes('accountTag') ? 'error' : ''}`">
-                        <Dropdown
-                            class="text-xs w-64 h-8"
-                            :default="ui.profile.accountTags[0]"
-                            :options="ui.profile.accountTags"
-                            :onClick="(f) => (creatorConfig.tag = f)"
-                            :capitalize="true"
-                            rightAmount="right-6 lg:right-2 top-2"
-                        />
-                    </div>
+                <div class="input-wrapper col-span-8" style="z-index: 200 !important; position: relative">
+                    <label class="label-override mb-2"
+                        >Account Tag
+                        <TagIcon />
+                    </label>
+                    <Dropdown
+                        class="input-default dropdown p-4 w-full"
+                        :default="ui.profile.accountTags[0]"
+                        :options="ui.profile.accountTags"
+                        :onClick="(f) => (creatorConfig.tag = f)"
+                        :capitalize="true"
+                        :allowDefault="false"
+                        :chosen="creatorConfig.tag"
+                    />
                 </div>
 
                 <div class="input-wrapper col-span-4">
-                    <label class="label-override">Threads</label>
+                    <label class="label-override mb-2"
+                        >Threads
+                        <EditIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('threads') ? 'error' : ''}`">
                         <input placeholder="1" type="number" min="1" max="50" v-model="creatorConfig.threads" />
+                        <div class="input-incrementer">
+                            <button @click="creatorConfig.threads++">
+                                <UpIcon />
+                            </button>
+                            <button @click="if (creatorConfig.threads > 1) creatorConfig.threads--;">
+                                <DownIcon />
+                            </button>
+                        </div>
                     </div>
                 </div>
                 <div class="input-wrapper col-span-8">
-                    <label class="label-override">Email catchall</label>
+                    <label class="label-override mb-2"
+                        >Email catchall
+                        <MailIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('catchall') ? 'error' : ''}`">
-                        <input placeholder="mycatchall.com" v-model="creatorConfig.catchall" />
+                        <input placeholder="example.com" v-model="creatorConfig.catchall" />
                     </div>
                 </div>
                 <div class="input-wrapper col-span-4">
-                    <label class="label-override">Catchall amount</label>
+                    <label class="label-override mb-2"
+                        >Catchall amount
+                        <BagIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('number') ? 'error' : ''}`">
                         <input placeholder="1" type="number" min="0" max="5000" v-model="creatorConfig.number" />
+                        <div class="input-incrementer">
+                            <button @click="creatorConfig.number++">
+                                <UpIcon />
+                            </button>
+                            <button @click="if (creatorConfig.number > 0) creatorConfig.number--;">
+                                <DownIcon />
+                            </button>
+                        </div>
                     </div>
                 </div>
                 <div class="input-wrapper col-span-12">
-                    <div class="flex items-center gap-2">
-                        <label class="label-override">Emails </label>
-                    </div>
+                    <label class="label-override mb-2"
+                        >Emails
+                        <MailIcon />
+                    </label>
                     <div :class="`${errors.includes('emails') ? 'error-border' : ''}`">
                         <textarea
                             v-model="creatorConfig.emails"
                             class="proxy-editor"
                             spellcheck="false"
                             style="max-height: 250px; min-height: 150px"
+                            placeholder="Enter emails here - One per line"
                         ></textarea>
                     </div>
                 </div>
@@ -97,8 +126,8 @@
 }
 
 .proxy-editor:focus {
-    border-color: #5d7cc0;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
+    border-color: #44454b;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
 }
 
 .z-inf {
@@ -107,7 +136,7 @@
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
-import { EditIcon } from "@/components/icons";
+import { EditIcon, TagIcon, SpinnerIcon, UpIcon, DownIcon, MailIcon, BagIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 

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

@@ -30,19 +30,20 @@
                 <h4 class="hidden ipadlg:flex">Actions</h4>
             </div>
         </Header>
-        <div v-if="toRender.length > 0">
+        <div v-if="toRender.length != 0">
             <RecycleScroller
                 :items="toRender"
                 :item-size="64"
-                key-field="_id"
-                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650 max-h-big overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+                key-field="index"
+                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650 overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+                :style="{ maxHeight: dynamicTableHeight }"
             >
                 <template #default="props">
-                    <div class="task" :key="i[props.item._id]">
+                    <div class="account" :key="`account-${props.item._id || props.item.index}`">
                         <Account
-                            @click="i[props.item._id]++"
-                            :style="{ backgroundColor: props.item.index % 2 == 1 ? '#35363c' : '#2e2f34' }"
-                            :task="props.item"
+                            @click="i[props.item.index]++"
+                            :style="{ backgroundColor: props.item.index % 2 == 1 ? '#1a1b1e' : '#242529' }"
+                            :account="props.item"
                         />
                     </div>
                 </template>
@@ -56,7 +57,7 @@
     </Table>
 </template>
 <style lang="scss" scoped>
-.task {
+.account {
     height: 64px;
 }
 h4 {
@@ -88,18 +89,68 @@ import {
 import Account from "./Account.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
-import { computed, ref } from "vue";
+import { computed, ref, onMounted, onUnmounted } from "vue";
 
 const props = defineProps({
     accounts: { type: Object }
 });
-const i = ref({});
-props.accounts.forEach((t) => (i.value[t._id] = 0));
-
 const ui = useUIStore();
 
+const i = ref({});
 const toRender = computed(() => {
     let c = 0;
-    return props.accounts.map((t) => ({ ...t, index: c++ }));
+    const rendered = props.accounts.map((t) => ({ ...t, index: c++ }));
+
+    // Initialize reactive refs for click tracking
+    rendered.forEach((t) => {
+        if (t._id && !(t._id in i.value)) {
+            i.value[t._id] = 0;
+        }
+        if (!(t.index in i.value)) {
+            i.value[t.index] = 0;
+        }
+    });
+
+    return rendered;
+});
+
+// Dynamic height calculation for perfect item fitting
+const windowHeight = ref(window.innerHeight);
+const windowWidth = ref(window.innerWidth);
+
+const updateDimensions = () => {
+    windowHeight.value = window.innerHeight;
+    windowWidth.value = window.innerWidth;
+};
+
+onMounted(() => {
+    window.addEventListener("resize", updateDimensions);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("resize", updateDimensions);
+});
+
+const dynamicTableHeight = computed(() => {
+    // Calculate available space for accounts table with conservative buffer
+    const headerHeight = 60; // Header + navbar
+    const titleHeight = 50; // Accounts title and controls
+    const searchHeight = 50; // Search and filter controls
+    const margins = windowWidth.value >= 1024 ? 40 : 25;
+    const bufferSpace = 50; // Conservative buffer to prevent partial items
+    
+    const totalUsedSpace = headerHeight + titleHeight + searchHeight + margins + bufferSpace;
+    const availableHeight = windowHeight.value - totalUsedSpace;
+    
+    // Account row height is always 64px
+    const rowHeight = 64;
+    const minRowsToShow = 2;
+    const minHeight = minRowsToShow * rowHeight;
+    
+    // Calculate exact number of complete rows that fit with conservative approach
+    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
+    const exactHeight = maxCompleteRows * rowHeight;
+    
+    return exactHeight + "px";
 });
 </script>

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

@@ -7,27 +7,32 @@
         </template>
 
         <div>
-            <div class="my-3 grid grid-cols-12 gap-3 mt-7 mb-4">
-                <div class="input-wrapper col-span-4 z-10">
-                    <label class="label-override">Profile Tag 
+            <div class="grid grid-cols-12 gap-3 my-3">
+                <!-- Profile tag -->
+                <div class="input-wrapper col-span-4" style="z-index: 200 !important; position: relative">
+                    <label class="label-override mb-2">Profile Tag 
                         <TagIcon />
                     </label>
                     <Dropdown
-                        :class="`input-default dropdown w-full ${errors.includes('profileTag') ? 'error' : ''}`"
+                        :class="`input-default dropdown p-4 w-full ${errors.includes('profileTag') ? 'error' : ''}`"
                         :default="ui.profile.accountTags[0]"
                         :options="ui.profile.accountTags"
                         :onClick="(f) => (account.tag = f)"
                         :capitalize="true"
+                        :allowDefault="false"
+                        :chosen="account.tag"
                     />
                 </div>
-                <div class="input-wrapper col-span-8">
-                    <label class="label-override">Email 
+
+                <!-- Email -->
+                <div class="input-wrapper col-span-8 z-0">
+                    <label class="label-override mb-2">Email 
                         <MailIcon />
                     </label>
-                    <div :class="`input-default required ${errors.includes('email') ? 'error' : ''}`">
+                    <div :class="`input-default ${errors.includes('email') ? 'error' : ''}`">
                         <input
                             placeholder="email@example.com"
-                            type="text"
+                            type="email"
                             v-model="account.email"
                             required
                             autocomplete="new-password"
@@ -41,28 +46,32 @@
                         />
                     </div>
                 </div>
-            </div>
-            <div class="input-wrapper col-span-12">
-                <label class="label-override">Password 
-                    <KeyIcon />
-                </label>
-                <div :class="`input-default required ${errors.includes('password') ? 'error' : ''}`">
-                    <input
-                        placeholder="***********"
-                        v-model="account.password"
-                        required
-                        autocomplete="off"
-                        name="account_password_disableautocomplete"
-                    />
+
+                <!-- Password -->
+                <div class="input-wrapper col-span-12 z-0">
+                    <label class="label-override mb-2">Password 
+                        <KeyIcon />
+                    </label>
+                    <div :class="`input-default ${errors.includes('password') ? 'error' : ''}`">
+                        <input
+                            placeholder="***********"
+                            type="password"
+                            v-model="account.password"
+                            required
+                            autocomplete="off"
+                            name="account_password_disableautocomplete"
+                        />
+                    </div>
                 </div>
             </div>
-            <button
-                class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-auto mt-4"
-                @click="done()"
-            >
-                Save <EditIcon />
-            </button>
         </div>
+
+        <button
+            class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-auto mt-4"
+            @click="done()"
+        >
+            Save <EditIcon />
+        </button>
     </Modal>
 </template>
 <style lang="scss" scoped>
@@ -71,6 +80,16 @@
         @apply flex;
     }
 }
+.z-0 {
+    z-index: 0 !important;
+}
+.z-1 {
+    z-index: 1 !important;
+}
+.z-2 {
+    z-index: 2 !important;
+}
+
 .error {
     border-width: 2px !important;
     border-color: rgb(238 130 130) !important;
@@ -78,7 +97,7 @@
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
-import { EditIcon, MailIcon, KeyIcon, ProfileIcon, TimerIcon, SandclockIcon, TagIcon } from "@/components/icons";
+import { EditIcon, MailIcon, KeyIcon, ProfileIcon, TimerIcon, SandclockIcon, TagIcon, ScannerIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 

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

@@ -6,8 +6,7 @@
                     class="mr-3"
                     :toggled="ui.mainCheckbox.profiles"
                     @valueUpdate="ui.toggleMainCheckbox('profiles')"
-                    :isHeader="true"
-                />
+                    :isHeader="true" />
                 <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
                     <ProfileIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
                     <h4 class="hidden ipadlg:flex">Profile Name</h4>
@@ -19,7 +18,7 @@
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
                 <TimerIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
-                <h4 class="hidden ipadlg:flex">Exp. Date</h4>
+                <h4 class="hidden ipadlg:flex">Expiration</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
                 <CheckmarkIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
@@ -39,15 +38,14 @@
                 :items="toRender"
                 :item-size="64"
                 key-field="index"
-                class="scroller max-h-big vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650 overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
-            >
+                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650 overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+                :style="{ maxHeight: dynamicTableHeight }">
                 <template #default="props">
                     <div class="profile" :key="`profile-${props.item._id || props.item.index}`">
                         <Profile
                             @click="i[props.item.index]++"
                             :style="{ backgroundColor: props.item.index % 2 == 1 ? '#1a1b1e' : '#242529' }"
-                            :profile="props.item"
-                        />
+                            :profile="props.item" />
                     </div>
                 </template>
             </RecycleScroller>
@@ -88,7 +86,7 @@ import { CartIcon, TicketIcon, ClickIcon, TimerIcon, ProfileIcon, CheckmarkIcon
 import Profile from "./Profile.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
-import { computed, ref } from "vue";
+import { computed, ref, onMounted, onUnmounted } from "vue";
 
 const props = defineProps({
     profiles: { type: Object }
@@ -113,4 +111,44 @@ const toRender = computed(() => {
 
     return rendered;
 });
+
+// Dynamic height calculation for perfect item fitting
+const windowHeight = ref(window.innerHeight);
+const windowWidth = ref(window.innerWidth);
+
+const updateDimensions = () => {
+    windowHeight.value = window.innerHeight;
+    windowWidth.value = window.innerWidth;
+};
+
+onMounted(() => {
+    window.addEventListener("resize", updateDimensions);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("resize", updateDimensions);
+});
+
+const dynamicTableHeight = computed(() => {
+    // Calculate available space for profiles table with conservative buffer
+    const headerHeight = 60; // Header + navbar
+    const titleHeight = 50; // Profiles title and controls
+    const searchHeight = 50; // Search and filter controls
+    const margins = windowWidth.value >= 1024 ? 40 : 25;
+    const bufferSpace = 50; // Conservative buffer to prevent partial items
+
+    const totalUsedSpace = headerHeight + titleHeight + searchHeight + margins + bufferSpace;
+    const availableHeight = windowHeight.value - totalUsedSpace;
+
+    // Profile row height is always 64px
+    const rowHeight = 64;
+    const minRowsToShow = 2;
+    const minHeight = minRowsToShow * rowHeight;
+
+    // Calculate exact number of complete rows that fit with conservative approach
+    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
+    const exactHeight = maxCompleteRows * rowHeight;
+
+    return exactHeight + "px";
+});
 </script>

package/src/components/Filter/FilterPreview.vue

@@ -92,10 +92,6 @@
     overflow: auto;
 }
 
-/* Enhance the text selection color */
-.code-editor::selection {
-    background: rgba(98, 114, 164, 0.4);
-}
 
 .code-highlight {
     width: 100%;

package/src/components/Tasks/Stats.vue

@@ -1,37 +1,43 @@
 <template>
-    <div class="flex text-white font-bold lg:gap-5 gap-1 lg:mb-2 mb-1" v-if="show" :key="key">
+    <div class="flex text-white font-bold lg:gap-5 gap-1 lg:mb-2 mb-1 min-h-[2.5rem]" v-if="show" :key="key">
         <div
             v-if="ui.queueStats.total"
-            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between"
+            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8"
         >
-            <h2 class="font-bold text-sm flex items-center gap-1 scale-100">
+            <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap">
                 <img width="14px" src="@/assets/img/wildcard.svg" />Total MQM
             </h2>
-            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.total }} </span>
+            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">{{
+                ui.queueStats.total
+            }}</span>
         </div>
         <div
             v-if="ui.queueStats.queued"
-            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between"
+            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8"
         >
-            <h2 class="font-bold text-sm flex items-center gap-1"><SkiIcon />Queued</h2>
-            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.queued }} </span>
+            <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap"><SkiIcon />Queued</h2>
+            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">{{
+                ui.queueStats.queued
+            }}</span>
         </div>
         <div
             v-if="ui.queueStats.sleeping"
-            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between"
+            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8"
         >
-            <h2 class="font-bold text-sm flex items-center gap-1"><TimerIcon />Sleeping</h2>
-            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.sleeping }} </span>
+            <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap"><TimerIcon />Sleeping</h2>
+            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">{{
+                ui.queueStats.sleeping
+            }}</span>
         </div>
         <div
             v-if="ui.queueStats.nextQueuePasses.length > 0"
-            class="stats-card lg:mb-5 mb-2 rounded-xl text-sm flex justify-between lg:p-3 p-2 lg:gap-3 gap-2"
+            class="stats-card lg:mb-5 mb-2 rounded-xl text-sm flex justify-between items-center lg:p-3 p-2 lg:gap-3 gap-2 min-w-0 h-8"
         >
-            <h2 class="font-bold flex text-sm items-center gap-1">
+            <h2 class="font-bold flex text-sm items-center gap-1 whitespace-nowrap">
                 <CartIcon /><span class="sm:block hidden">Next Passes</span>
                 <span class="sm:hidden block">Pass</span>
             </h2>
-            <span class="text-light-400 text-sm font-black">{{
+            <span class="text-light-400 text-xs font-black flex items-center text-right truncate">{{
                 ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ")
             }}</span>
         </div>
@@ -68,16 +74,16 @@ window.addEventListener("resize", () => (queuePassAmount.value = getQueuePassAmo
 .stats-card {
     @apply bg-dark-500 border border-dark-650 rounded;
     transition: all 0.15s ease;
-    
+
     &:hover {
         @apply bg-dark-550 border-dark-700;
     }
-    
+
     h2 {
         font-weight: 600;
         color: #d4d4d4;
     }
-    
+
     span {
         font-weight: 700;
         color: #cccccc;