@necrolab/dashboard 0.4.38 → 0.4.40

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

@@ -7,20 +7,20 @@
         <div class="col-span-3 lg:col-span-2 flex">
             <Checkbox
                 class="ml-0 mr-4"
-                :toggled="props.task.selected"
-                @valueUpdate="ui.toggleAccountSelected(props.task._id)"
+                :toggled="props.account.selected"
+                @valueUpdate="ui.toggleAccountSelected(props.account._id)"
             />
-            <h4 class="mx-auto text-white" @click="copy(props.task.email)">
-                {{ props.task.email }}
+            <h4 class="mx-auto text-white" @click="copy(props.account.email)">
+                {{ props.account.email }}
             </h4>
         </div>
-        <div class="col-span-2 hidden ipadlg:block" @click="copy(props.task.password)">
+        <div class="col-span-2 hidden ipadlg:block" @click="copy(props.account.password)">
             <h4 class="text-white">
-                {{ props.task.privacy ? "•".repeat(props.task.password.length) : props.task.password }}
+                {{ props.account.privacy ? "•".repeat(props.account.password.length) : props.account.password }}
             </h4>
         </div>
         <div class="col-span-1">
-            <h4 v-if="props.task.enabled" class="text-green-400 flex justify-center">
+            <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">
@@ -30,18 +30,18 @@
 
         <div class="col-span-1 hidden lg:block">
             <h4 class="text-white flex justify-center gap-1">
-                <TagLabel v-for="tag in props.task.tags" :key="tag" :text="tag" />
+                <TagLabel v-for="tag in props.account.tags" :key="tag" :text="tag" />
             </h4>
         </div>
 
         <div class="col-span-1 flex">
-            <ul class="task-buttons">
+            <ul class="account-buttons">
                 <li>
                     <button @click="edit">
                         <EditIcon />
                     </button>
                 </li>
-                <li v-if="props.task.enabled">
+                <li v-if="props.account.enabled">
                     <button @click="disable">
                         <img class="w-4 h-4" src="/img/controls/disable.svg" />
                     </button>
@@ -59,7 +59,7 @@
 h4 {
     @apply text-center;
 }
-.task-buttons {
+.account-buttons {
     @apply flex items-center justify-center mx-auto bg-dark-500 border border-dark-650 rounded;
     padding: 3px;
     gap: 2px;
@@ -102,7 +102,7 @@ h4 {
         font-size: 10px !important;
     }
 
-    .task-buttons {
+    .account-buttons {
         padding: 3px;
         gap: 2px;
 
@@ -118,7 +118,7 @@ h4 {
         }
     }
 
-    .task-id {
+    .account-id {
         font-size: 6px !important;
         margin-right: -12px;
         margin-top: 20px;
@@ -127,7 +127,7 @@ h4 {
 
 // Mobile optimization
 @media (max-width: 768px) {
-    .task-buttons {
+    .account-buttons {
         padding: 2px;
         gap: 1px;
 
@@ -146,7 +146,7 @@ h4 {
 
 // iPhone vertical (portrait) specific
 @media (max-width: 480px) and (orientation: portrait) {
-    .task-buttons {
+    .account-buttons {
         padding: 2px;
         gap: 1px;
 
@@ -177,7 +177,7 @@ import TagLabel from "@/components/Editors/TagLabel.vue";
 const ui = useUIStore();
 
 const props = defineProps({
-    task: { type: Object }
+    account: { type: Object }
 });
 
 const copy = (txt) => {
@@ -185,10 +185,10 @@ const copy = (txt) => {
     navigator.clipboard.writeText(txt);
     ui.showSuccess("Copied text");
 };
-const enable = async () => await ui.addAccount({ ...props.task, enabled: true });
-const disable = async () => await ui.addAccount({ ...props.task, enabled: false });
+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.task;
+    ui.currentlyEditing = props.account;
     ui.toggleModal("create-account");
 };
 </script>

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;"
+                            style="max-height: 250px; min-height: 150px"
+                            placeholder="Enter emails here - One per line"
                         ></textarea>
                     </div>
                 </div>
@@ -83,7 +112,7 @@
     width: 100%;
     background-color: #2e2f34;
     color: #e2e2e5;
-    font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', monospace;
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
     padding: 12px;
     border: none;
     resize: none;
@@ -97,8 +126,8 @@
 }
 
 .proxy-editor:focus {
-    border-color: #5d7cc0;
-    box-shadow: 0 0 0 2px rgba(93, 124, 192, 0.25);
+    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,31 +30,34 @@
                 <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>
             </RecycleScroller>
         </div>
-        <div v-else class="flex justify-center py-8 bg-dark-400 empty-state">
-            No accounts found
+        <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>
     </Table>
 </template>
 <style lang="scss" scoped>
-.task {
+.account {
     height: 64px;
 }
 h4 {
@@ -73,22 +76,81 @@ h4 {
 </style>
 <script setup>
 import { Table, Header } from "@/components/Table";
-import { EventIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, MailIcon, KeyIcon, CheckmarkIcon } from "@/components/icons";
+import {
+    EventIcon,
+    TicketIcon,
+    StatusIcon,
+    ClickIcon,
+    DownIcon,
+    MailIcon,
+    KeyIcon,
+    CheckmarkIcon
+} from "@/components/icons";
 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({
-    tasks: { type: Object }
+    accounts: { type: Object }
 });
-const i = ref({});
-props.tasks.forEach((t) => (i.value[t._id] = 0));
-
 const ui = useUIStore();
 
+const i = ref({});
 const toRender = computed(() => {
     let c = 0;
-    return props.tasks.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/Profile.vue

@@ -7,21 +7,21 @@
         <div class="col-span-3 lg:col-span-2 flex">
             <Checkbox
                 class="ml-0 mr-4"
-                :toggled="props.task.selected"
-                @valueUpdate="ui.toggleProfileSelected(props.task._id)"
+                :toggled="props.profile.selected"
+                @valueUpdate="ui.toggleProfileSelected(props.profile._id)"
             />
             <h4 class="mx-auto text-white">
-                {{ props.task.profileName }}
+                {{ 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 ipadlg:block">{{
-                    props.task.privacy
-                        ? props.task.cardNumber[0] +
-                          "•".repeat(props.task.cardNumber.length - 5) +
-                          props.task.cardNumber.slice(-4)
-                        : validateCard(props.task.cardNumber).formatted
+                    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>
@@ -30,7 +30,7 @@
             <h4 class="text-white">{{ expDate() }}</h4>
         </div>
         <div class="col-span-1">
-            <h4 v-if="props.task.enabled" class="text-green-400 flex justify-center">
+            <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>
             <h4 v-else class="text-red-400 flex justify-center">
@@ -40,18 +40,18 @@
 
         <div class="col-span-1 hidden lg:block">
             <h4 class="text-white flex justify-center gap-1">
-                <TagLabel v-for="tag in props.task.tags" :key="tag" :text="tag" />
+                <TagLabel v-for="tag in props.profile.tags" :key="tag" :text="tag" />
             </h4>
         </div>
 
         <div class="col-span-1 flex">
-            <ul class="task-buttons">
+            <ul class="profile-buttons">
                 <li>
                     <button @click="edit">
                         <EditIcon />
                     </button>
                 </li>
-                <li v-if="props.task.enabled">
+                <li v-if="props.profile.enabled">
                     <button @click="disable">
                         <img class="w-4 h-4" src="/img/controls/disable.svg" />
                     </button>
@@ -76,7 +76,7 @@
 h4 {
     @apply text-center;
 }
-.task-buttons {
+.profile-buttons {
     @apply flex items-center justify-center mx-auto bg-dark-500 border border-dark-650 rounded;
     padding: 3px;
     gap: 2px;
@@ -119,7 +119,7 @@ h4 {
         font-size: 10px !important;
     }
 
-    .task-buttons {
+    .profile-buttons {
         padding: 3px;
         gap: 2px;
 
@@ -135,7 +135,7 @@ h4 {
         }
     }
 
-    .task-id {
+    .profile-id {
         font-size: 6px !important;
         margin-right: -12px;
         margin-top: 20px;
@@ -144,7 +144,7 @@ h4 {
 
 // Mobile optimization
 @media (max-width: 768px) {
-    .task-buttons {
+    .profile-buttons {
         padding: 2px;
         gap: 1px;
 
@@ -163,7 +163,7 @@ h4 {
 
 // iPhone vertical (portrait) specific
 @media (max-width: 480px) and (orientation: portrait) {
-    .task-buttons {
+    .profile-buttons {
         padding: 2px;
         gap: 1px;
 
@@ -195,23 +195,23 @@ import TagLabel from "@/components/Editors/TagLabel.vue";
 const ui = useUIStore();
 
 const props = defineProps({
-    task: { type: Object }
+    profile: { type: Object }
 });
 
 const getAccountType = () => {
-    var cn = props.task.cardNumber;
+    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
     else if (cn.startsWith("5")) return `/img/banks/mastercard.svg`; // master
 };
 
 const expDate = () =>
-    props.task.privacy ? "••/••" : `${props.task.expMonth}/${props.task.expYear?.replace("20", "")}`;
-const enable = async () => await ui.addProfile({ ...props.task, enabled: true });
-const disable = async () => await ui.addProfile({ ...props.task, enabled: false });
+    props.profile.privacy ? "••/••" : `${props.profile.expMonth}/${props.profile.expYear?.replace("20", "")}`;
+const enable = async () => await ui.addProfile({ ...props.profile, enabled: true });
+const disable = async () => await ui.addProfile({ ...props.profile, enabled: false });
 const edit = () => {
-    ui.currentlyEditing = props.task;
+    ui.currentlyEditing = props.profile;
     ui.toggleModal("create-profile");
 };
-const deleteProfile = async () => await ui.deleteProfile(props.task._id);
+const deleteProfile = async () => await ui.deleteProfile(props.profile._id);
 </script>