@necrolab/dashboard 0.4.37 → 0.4.39

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>

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

@@ -42,23 +42,25 @@
                 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"
             >
                 <template #default="props">
-                    <div class="task" :key="i[props.item.index]">
+                    <div class="profile" :key="`profile-${props.item._id || props.item.index}`">
                         <Profile
                             @click="i[props.item.index]++"
-                            :class="[props.item.index % 2 == 1 ? 'bg-dark-500' : 'bg-dark-550']"
-                            :task="props.item"
+                            :style="{ backgroundColor: props.item.index % 2 == 1 ? '#1a1b1e' : '#242529' }"
+                            :profile="props.item"
                         />
                     </div>
                 </template>
             </RecycleScroller>
         </div>
-        <div v-else class="flex justify-center py-8 bg-dark-400 empty-state">
-            No profiles found
+        <div v-else class="flex flex-col items-center justify-center py-8 bg-dark-400 empty-state text-center">
+            <ProfileIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50" />
+            <p class="text-light-400 text-sm">No profiles found</p>
+            <p class="text-light-500 text-xs mt-1">Create profiles to get started</p>
         </div>
     </Table>
 </template>
 <style lang="scss" scoped>
-.task {
+.profile {
     height: 64px;
 }
 h4 {
@@ -89,15 +91,26 @@ import { useUIStore } from "@/stores/ui";
 import { computed, ref } from "vue";
 
 const props = defineProps({
-    tasks: { type: Object }
+    profiles: { 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.profiles.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;
 });
 </script>

package/src/components/Editors/TagLabel.vue

@@ -13,7 +13,7 @@
     min-width: 2rem;
     max-width: 4.5rem;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
-    
+
     &:hover {
         background: linear-gradient(145deg, #44454b, #3d3e44);
         border-color: #52535a;
@@ -36,7 +36,7 @@
         padding: 0.1rem 0.3rem;
         max-width: 3.5rem;
     }
-    
+
     .tag-text {
         font-size: 0.575rem;
     }
@@ -48,7 +48,7 @@
         max-width: 3rem;
         min-width: 1.25rem;
     }
-    
+
     .tag-text {
         font-size: 0.55rem;
     }
@@ -60,7 +60,7 @@
         max-width: 2.5rem;
         min-width: 1rem;
     }
-    
+
     .tag-text {
         font-size: 0.5rem;
     }
@@ -71,8 +71,7 @@
 const props = defineProps({ text: { type: String } });
 
 const formatText = (text) => {
-    if (!text) return '';
-    // Capitalize first letter and keep rest as-is
-    return text.charAt(0).toUpperCase() + text.slice(1);
+    if (!text) return "";
+    return text.toUpperCase();
 };
 </script>

package/src/components/Table/Header.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="border-b border-dark-600 w-full px-2 md:px-4 text-white text-xs py-4 grid items-center">
+    <div class="border-b border-dark-600 w-full px-2 md:px-4 text-white text-xs py-4 grid items-center" style="background-color: rgb(26 27 30);">
         <slot />
     </div>
 </template>

package/src/components/Table/Row.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="px-2 md:px-4 text-xs grid text-white py-4 items-center h-full bg-dark-400 even:bg-dark-350 hover:bg-dark-500 transition-colors">
+    <div class="px-2 md:px-4 text-xs grid text-white py-4 items-center h-full hover:bg-dark-500 transition-colors">
         <slot />
     </div>
 </template>

package/src/components/Table/Table.vue

@@ -7,10 +7,25 @@
 .table-component {
     @apply flex-col bg-clip-padding rounded relative box-border border border-dark-600 bg-dark-500;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    overflow: auto !important;
+    overscroll-behavior: auto !important;
+    touch-action: auto !important;
+    max-height: calc(100vh - 200px);
 }
 
 .table-component > .grid {
     @apply bg-dark-400;
     border-bottom: 1px solid #3d3e44;
 }
+
+/* iPhone landscape mode table optimization */
+@media screen and (max-height: 500px) and (orientation: landscape) {
+    .table-component {
+        max-height: calc(100vh - 160px) !important; // Leave even more space at bottom 
+        width: 100% !important;
+        overflow-x: auto !important; // Allow horizontal scrolling if needed
+        overflow-y: auto !important; // Allow vertical scrolling
+        margin-bottom: 2rem !important; // Increase bottom margin for better spacing
+    }
+}
 </style>

package/src/components/Tasks/Controls/DesktopControls.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="task-controls flex-row" v-once>
+    <div class="task-controls flex-row">
         <div class="control-buttons mb-4 xl:mb-0">
             <button @click="$emit('startAll')" class="bg-green-400 smooth-hover responsive-button border-none">
                 Start <PlayIcon />

package/src/components/Tasks/CreateTaskAXS.vue

@@ -5,7 +5,6 @@
             <img src="@/assets/img/pencil.svg" class="ml-4" />
         </template>
 
-
         <!-- Task Form -->
         <div class="form-grid mt-4 mb-4">
             <!-- Event ID -->
@@ -25,10 +24,10 @@
                     <MailIcon />
                 </label>
                 <div class="input-default">
-                    <input 
-                        placeholder="Email" 
-                        v-model="task.email" 
-                        autocomplete="off" 
+                    <input
+                        placeholder="Email"
+                        v-model="task.email"
+                        autocomplete="off"
                         data-form-type="other"
                         name="axs_email_not_for_auth"
                     />
@@ -89,7 +88,7 @@
             </div>
 
             <!-- Profile Tag(s)  -->
-            <div class="input-wrapper" style="z-index: 50 !important">
+            <div class="input-wrapper" style="z-index: 200 !important; position: relative">
                 <label class="label-override mb-2"
                     >Profile Tag(s)
                     <TagIcon />
@@ -107,7 +106,7 @@
             </div>
 
             <!-- Account Tag  -->
-            <div class="input-wrapper">
+            <div class="input-wrapper" style="z-index: 100 !important; position: relative">
                 <label class="label-override mb-2"
                     >Account Tag
                     <ScannerIcon />
@@ -141,7 +140,7 @@
                 </div>
             </div>
         </div>
-        <div class="border border-light-300 mb-3" />
+        <div class="border border-dark-650 mb-3" />
         <!-- Task Switches -->
         <div class="grid grid-cols-4 gap-y-4 mb-4 justify-between task-switches">
             <div class="switch-wrapper flex flex-col">
@@ -169,14 +168,15 @@
             </div>
             <div class="switch-wrapper flex flex-col">
                 <h4>
-                    <span class="hidden xs:block">Manual</span>
+                    Manual
+                    <HandIcon />
                 </h4>
                 <Switch class="mx-auto" v-model="task.manual" />
             </div>
         </div>
 
         <!-- Task prefab -->
-        <div class="border border-light-300 my-3" />
+        <div class="border border-dark-650 my-3" />
         <button class="btn-action mx-auto" @click="createTask">
             Create
             <EditIcon />
@@ -268,7 +268,7 @@ watch(
     }
 );
 
-watch(() => task.value, (ui.modalData[`task_${ui.currentCountry.siteId}`] = task.value));
+watch(() => task.value, () => (ui.modalData[`task_${ui.currentCountry.siteId}`] = task.value), { deep: true });
 
 watch(
     () => task.value.eventId,
@@ -283,7 +283,7 @@ watch(
 <style lang="scss" scoped>
 .label-override {
     @apply flex;
-    color: #6e7084 !important;
+    color: #e1e1e4 !important;
 
     img {
         @apply ml-2;
@@ -292,7 +292,7 @@ watch(
 
 .task-switches {
     h4 {
-        color: #6e7084;
+        color: #e1e1e4;
         @apply text-xs text-center flex items-center gap-x-2 mx-auto;
     }
 
@@ -315,7 +315,7 @@ watch(
         @apply ml-2;
 
         path {
-            fill: #6e7084 !important;
+            fill: #e1e1e4 !important;
         }
     }
     @apply flex items-center;
@@ -324,7 +324,7 @@ watch(
 .switch-wrapper {
     svg {
         path {
-            fill: #6e7084 !important;
+            fill: #a0a0a6 !important;
         }
     }
 }

package/src/components/Tasks/CreateTaskTM.vue

@@ -94,7 +94,7 @@
             </div>
 
             <!-- Profile Tag(s)  -->
-            <div class="input-wrapper" style="z-index: 50 !important">
+            <div class="input-wrapper" style="z-index: 200 !important; position: relative">
                 <label class="label-override mb-2"
                     >Profile Tag(s)
                     <TagIcon />
@@ -120,7 +120,7 @@
             </div>
 
             <!-- Account Tag  -->
-            <div class="input-wrapper">
+            <div class="input-wrapper" style="z-index: 100 !important; position: relative">
                 <label class="label-override mb-2"
                     >Account Tag
                     <ScannerIcon />
@@ -255,7 +255,8 @@
                 </div>
                 <div class="switch-wrapper flex flex-col">
                     <h4>
-                        Login Later
+                        <span class="hidden xs:block">Login Later</span>
+                        <span class="block xs:hidden">Login Lat.</span>
                         <GroupIcon class="scale-90" />
                     </h4>
                     <Switch class="mx-auto" v-model="task.loginAfterCart" />
@@ -390,7 +391,7 @@ watch(
     }
 );
 
-watch(() => task.value, (ui.modalData[`task_${ui.currentCountry.siteId}`] = task.value));
+watch(() => task.value, () => (ui.modalData[`task_${ui.currentCountry.siteId}`] = task.value), { deep: true });
 
 watch(
     () => task.value.eventId,

package/src/components/Tasks/Task.vue

@@ -1,6 +1,6 @@
 <template>
     <Row
-        class="relative text-white grid-cols-12 gap-2"
+        class="relative text-white grid-cols-10 gap-2 ipadlg:grid-cols-12"
         @click="ui.setOpenContextMenu('')"
         @click.right.prevent="ui.setOpenContextMenu('')"
     >
@@ -22,9 +22,6 @@
                 {{ props.task.eventId }}
             </h4>
         </div>
-        <div class="col-span-2 hidden lg:block">
-            <h4 class="text-white">{{ props.task.quantity }}</h4>
-        </div>
         <div class="col-span-2">
             <h4 class="text-white">
                 <span v-if="!props.task.reservedTicketsList">-</span>
@@ -44,7 +41,7 @@
                 </span>
             </h4>
         </div>
-        <div class="col-span-6 md:col-span-4 lg:col-span-3 text-center justify-center">
+        <div class="col-span-5 md:col-span-4 lg:col-span-5 ipadlg:col-span-6 text-center justify-center">
             <div class="status-container">
                 <div
                     class="status-indicator"
@@ -56,10 +53,10 @@
                         )
                     "
                 ></div>
-                <span class="status-text">{{ truncate(props.task.status, statusTruncateLength) }}</span>
+                <span class="status-text">{{ props.task.status }}</span>
             </div>
         </div>
-        <div class="col-span-2 flex">
+        <div class="col-span-2 ipadlg:col-span-3 flex">
             <ul class="task-buttons">
                 <li>
                     <button v-if="task.active" @click="ui.stopTask(task.taskId)">
@@ -98,7 +95,7 @@
         </div>
         <transition name="fade">
             <div
-                class="col-span-12 flex flex-wrap gap-x-4 gap-y-4 lg:gap-x-10 pt-8 pb-2 xl:justify-around will-change-auto"
+                class="col-span-10 ipadlg:col-span-12 flex flex-wrap gap-x-4 gap-y-4 lg:gap-x-10 pt-8 pb-2 xl:justify-around will-change-auto"
                 v-if="props.task.isExpanded"
             >
                 <!-- Details -->
@@ -183,6 +180,7 @@ h4 {
     padding: 6px 12px;
     gap: 6px;
     transition: all 0.15s ease;
+    max-width: 100%;
 
     &:hover {
         @apply bg-dark-550 border-dark-700;
@@ -300,19 +298,23 @@ h4 {
         gap: 0;
         border-radius: 7px;
         box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+        max-width: calc(100vw - 260px); /* Prevent overflow on small screens */
+        overflow: hidden;
 
         button {
-            width: 22px;
-            height: 22px;
+            width: 20px;
+            height: 20px;
             border-radius: 5px;
+            min-width: 20px;
+            flex-shrink: 0;
         }
         svg,
         img {
-            width: 11px;
-            height: 11px;
+            width: 10px;
+            height: 10px;
         }
         span {
-            font-size: 10px;
+            font-size: 9px;
         }
     }
 }
@@ -340,12 +342,13 @@ h4 {
     .task-buttons {
         padding: 1px;
         gap: 0;
-        border-radius: 6px;
+        border-radius: 5px;
 
         button {
-            width: 18px;
-            height: 18px;
-            border-radius: 4px;
+            width: 15px;
+            height: 15px;
+            border-radius: 2px;
+            min-width: 15px;
 
             &:hover {
                 transform: scale(1.1);
@@ -354,11 +357,11 @@ h4 {
 
         svg,
         img {
-            width: 9px;
-            height: 9px;
+            width: 8px;
+            height: 8px;
         }
         span {
-            font-size: 9px;
+            font-size: 8px;
         }
     }
 }
@@ -372,7 +375,6 @@ import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/compon
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import TaskLabel from "@/components/Tasks/TaskLabel.vue";
-import { ref } from "vue";
 
 const ui = useUIStore();
 
@@ -396,10 +398,6 @@ const colorToClass = (color) => {
     return colorMapping.get(color) || "bg-white";
 };
 
-const truncate = (text, after) => {
-    if (text?.length <= after || after === -1) return text;
-    return text?.substring(0, after) + "...";
-};
 
 const openInBrowser = (debug) => {
     if (!props.task.openerLink) return;
@@ -434,14 +432,4 @@ const openInNewTab = (href) => {
     }).click();
 };
 
-const getMaxStatusLength = (width) => {
-    if (width > 1279) return -1;
-    if (width > 767) return 25;
-    if (width > 639) return 30;
-    if (width > 540) return 18;
-    return 13;
-};
-
-let statusTruncateLength = ref(getMaxStatusLength(window.innerWidth));
-window.addEventListener("resize", () => (statusTruncateLength.value = getMaxStatusLength(window.innerWidth)));
 </script>