@necrolab/dashboard 0.4.61 → 0.4.208

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

@@ -1,64 +1,64 @@
 <template>
     <Row
-        class="relative grid-cols-7 text-white lg:grid-cols-8"
+        class="relative text-white grid-cols-7 lg:grid-cols-8"
         @click="ui.setOpenContextMenu('')"
-        @click.right.prevent="ui.setOpenContextMenu('')">
-        <div class="col-span-3 flex lg:col-span-2">
+        @click.right.prevent="ui.setOpenContextMenu('')"
+    >
+        <div class="col-span-3 lg:col-span-2 flex">
             <Checkbox
                 class="ml-0 mr-4"
-                :toggled="props.profile.selected"
-                @valueUpdate="ui.toggleProfileSelected(props.profile.id)" />
+                :toggled="props.task.selected"
+                @valueUpdate="ui.toggleProfileSelected(props.task._id)"
+            />
             <h4 class="mx-auto text-white">
-                {{ props.profile.profileName }}
+                {{ props.task.profileName }}
             </h4>
         </div>
         <div class="col-span-1 lg:col-span-2">
-            <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 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
+                }}</span>
+                <img width="22 px" :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="flex justify-center text-green-400">
-                <img class="green h-3 w-3" src="/img/controls/enable.svg" />
+            <h4 v-if="props.task.enabled" class="text-green-400 flex justify-center">
+                <img width="12px" height="12px" class="green" 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 v-else class="text-red-400 flex justify-center">
+                <img width="12px" height="12px" class="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.profile.tags" :key="tag" :text="tag" />
+            <h4 class="text-white flex justify-center gap-1">
+                <TagLabel v-for="tag in props.task.tags" :key="tag" :text="tag" />
             </h4>
         </div>
 
         <div class="col-span-1 flex">
-            <ul class="profile-buttons">
+            <ul class="task-buttons bg-dark-600 px-2 rounded-full shadow-3xl py-1 items-center">
                 <li>
                     <button @click="edit">
                         <EditIcon />
                     </button>
                 </li>
-                <li v-if="props.profile.enabled">
+                <li v-if="props.task.enabled">
                     <button @click="disable">
-                        <img class="h-4 w-4" src="/img/controls/disable.svg" />
+                        <img width="16px" height="16px" class="mt-0.5" src="/img/controls/disable.svg" />
                     </button>
                 </li>
                 <li v-else>
                     <button @click="enable">
-                        <img class="h-4 w-4" src="/img/controls/enable.svg" />
+                        <img width="16px" height="16px" class="mt-0.5" src="/img/controls/enable.svg" />
                     </button>
                 </li>
                 <li>
@@ -76,111 +76,28 @@
 h4 {
     @apply text-center;
 }
-.profile-buttons {
-    @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;
-    }
-
-    svg path {
-        fill: currentColor;
+.task-buttons {
+    @apply flex mx-auto gap-x-3;
+    svg {
+        width: 15px;
+        height: 15px;
     }
 }
 
-// Tablet optimization
 @media (max-width: 1024px) {
     h4 {
         font-size: 10px !important;
     }
-
-    .profile-buttons {
-        padding: 3px;
-        gap: 2px;
-
-        button {
-            width: 26px;
-            height: 26px;
-        }
-
-        svg,
-        img {
-            width: 14px;
-            height: 14px;
-        }
+    .task-buttons {
+        @apply gap-x-3;
     }
-
-    .profile-id {
+    .task-id {
         font-size: 6px !important;
         margin-right: -12px;
         margin-top: 20px;
     }
-}
-
-// Mobile optimization
-@media (max-width: 768px) {
-    .profile-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) {
-    .profile-buttons {
-        padding: 2px;
-        gap: 1px;
-
-        button {
-            width: 18px;
-            height: 18px;
-
-            &:hover {
-                transform: scale(1.1);
-            }
-        }
-
-        svg,
-        img {
-            width: 10px;
-            height: 10px;
-        }
+    .task-id-alt {
+        font-size: 7px !important;
     }
 }
 </style>
@@ -190,30 +107,28 @@ import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/compon
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import { validateCard } from "@/stores/utils";
-import TagLabel from "@/components/Editors/TagLabel.vue";
+import TagLabel from "@/components/editors/TagLabel.vue";
 
 const ui = useUIStore();
 
 const props = defineProps({
-    profile: { type: Object }
+    task: { type: Object }
 });
 
 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
+    var cn = props.task.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.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 });
+    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 });
 const edit = () => {
-    ui.currentlyEditing = props.profile;
+    ui.currentlyEditing = props.task;
     ui.toggleModal("create-profile");
 };
-const deleteProfile = async () => await ui.deleteProfile(props.profile.id);
+const deleteProfile = async () => await ui.deleteProfile(props.task._id);
 </script>

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

@@ -1,75 +1,43 @@
 <template>
     <div>
-        <div class="dropdown input-default p-4 w-16 bg-dark-550 small-dropdown rounded-lg" ref="dropdownRef">
-            <span @click="toggleOpen" class="flex justify-between items-center z-50 text-white">
+        <div class="dropdown input-default p-4 w-16 bg-dark-550 small-dropdown rounded-lg">
+            <span @click="open = !open" class="flex justify-between items-center z-inf text-white">
                 <div class="flex gap-3 justify-center">
                     <img class="w-5" :src="`/flags/${current?.toLowerCase()}.svg`" />
                 </div>
             </span>
-            <Teleport to="body">
+            <div
+                v-if="open && !disabled"
+                class="dropdown-content special-dropdown snap-mandatory snap-y z-inf max-h-48 overflow-scroll hidden-scrollbars"
+            >
                 <div
-                    v-if="open && !disabled"
-                    class="dropdown-content-portal special-dropdown"
-                    :style="menuStyle"
-                    @click.stop
-                    @wheel.stop
-                    @touchmove.stop>
-                    <div
-                        v-for="(country, i) in countries"
-                        v-bind:key="country"
-                        :class="`cursor-pointer w-12 ${i === 0 ? '' : 'my-2'}`"
-                        @click="set(country)">
-                        <div class="flex justify-center items-center smooth-hover">
-                            <span class="text-sm">{{ country }}</span>
-                            <img class="w-5 ml-3" :src="`/flags/${country?.toLowerCase()}.svg`" />
-                        </div>
+                    v-for="(country, i) in countries"
+                    v-bind:key="country"
+                    :class="`cursor-pointer w-12 snap-start ${i === 0 ? '' : 'my-2'}`"
+                    @click="set(country)"
+                >
+                    <div class="flex gap-3 justify-between smooth-hover">
+                        <span class="text-sm">{{ country }} </span>
+                        <img class="w-5" :src="`/flags/${country?.toLowerCase()}.svg`" />
                     </div>
                 </div>
-            </Teleport>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup>
 import { ref, watch } from "vue";
-import { useDropdownPosition } from "@/composables/useDropdownPosition";
-import { useClickOutside } from "@/composables/useClickOutside";
-
 const countries = ["US", "CA", "DE", "FR", "DK"];
 const open = ref(false);
-const dropdownRef = ref(null);
 
 const props = defineProps({
     value: { type: String },
     onClick: { type: Function },
     disabled: { type: Boolean, required: false }
 });
-
 const current = ref(props.value || "US");
 
-// Use composables for positioning and click outside
-const { menuStyle, updatePosition } = useDropdownPosition(dropdownRef, {
-    offset: { x: -17.6, y: 4 },
-    minWidth: 80,
-    maxHeight: 192,
-    zIndex: 99999999999999,
-    estimateHeight: () => Math.min(countries.length * 32, 192)
-});
-
-useClickOutside(dropdownRef, () => {
-    if (open.value) {
-        open.value = false;
-    }
-});
-
-const toggleOpen = () => {
-    if (props.disabled) return;
-    open.value = !open.value;
-    if (open.value) {
-        updatePosition();
-    }
-};
-
 const set = (c) => {
     if (props.disabled) return;
     current.value = c;
@@ -89,49 +57,19 @@ watch(
 }
 
 .small-dropdown {
-    @apply h-10 !important;
     background-clip: border-box !important;
     /* border-radius: 100% !important; */
     padding: 0;
     width: 3em !important;
+    /* height: 3em !important; */
     display: flex;
     justify-items: center;
     justify-content: center;
 }
 
-@media (min-width: 768px) {
-    .small-dropdown {
-        height: 40px !important; /* Match input-default responsive height */
-    }
-}
-
-.dropdown-content-portal {
-    @apply bg-dark-400 border border-dark-650 rounded-lg shadow-2xl z-50;
-    padding: 0.5rem;
-    max-height: 192px !important;
-    overflow-y: auto !important;
-    overscroll-behavior: contain !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-.dropdown-content-portal::-webkit-scrollbar {
-    display: none;
-}
-
-.dropdown-content-portal > div {
-    @apply px-3 py-2 text-sm text-white cursor-pointer;
-    border-radius: 6px;
-}
-
-.dropdown-content-portal > div:hover {
-    /* Removed hover background */
-}
-
-.dropdown-content-portal > div .flex {
-    @apply items-center justify-center;
-    gap: 0.75rem;
+.dropdown-content {
+    left: -1.1rem;
+    z-index: 99999999999999;
 }
 </style>
+, watch

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

@@ -1,64 +1,64 @@
 <template>
     <Table>
-        <Header class="grid-cols-7 text-center lg:grid-cols-8">
-            <div class="col-span-3 flex lg:col-span-2">
+        <Header class="text-center grid-cols-7 lg:grid-cols-8">
+            <div class="col-span-3 lg:col-span-2 flex">
                 <Checkbox
                     class="mr-3"
                     :toggled="ui.mainCheckbox.profiles"
                     @valueUpdate="ui.toggleMainCheckbox('profiles')"
-                    :isHeader="true" />
+                />
                 <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
-                    <ProfileIcon class="mr-0 h-4 w-4 md:mr-3" />
-                    <h4 class="hidden md:flex">Profile Name</h4>
+                    <img src="/img/profile.svg" width="14" class="mr-0 ipadlg:mr-3" />
+                    <h4 class="hidden ipadlg:flex">Profile Name</h4>
+                    <!-- <DownIcon v-if="ui.sortData.sortBy === 'eventId'" class="ml-1" /> -->
                 </div>
             </div>
-            <div class="col-span-1 flex items-center justify-center lg:col-span-2" v-once>
-                <CartIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Card Number</h4>
+            <div class="lg:col-span-2 col-span-1 items-center justify-center flex" v-once>
+                <CartIcon class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Card Number</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <TimerIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Expiration</h4>
+                <TimerIcon class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Exp. Date</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <CheckmarkIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Enabled</h4>
+                <img src="/img/controls/enable.svg" width="14" class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Enabled</h4>
             </div>
-            <div class="col-span-1 hidden items-center justify-center lg:flex" v-once>
-                <TicketIcon class="mr-0 h-4 w-4 lg:mr-3" />
+            <div class="col-span-1 hidden lg:flex items-center justify-center" v-once>
+                <TicketIcon class="mr-0 lg:mr-3" />
                 <h4 class="hidden lg:flex">Tags</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <ClickIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Actions</h4>
+                <ClickIcon class="mr-0 ipadlg:mr-3" />
+                <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="index"
-                class="scroller vue-recycle-scroller ready direction-vertical hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
-                :style="{ maxHeight: dynamicTableHeight }">
-                <template #default="props">
-                    <div class="profile" :key="`profile-${props.item.id || props.item.index}`">
+                class="scroller max-h-big vue-recycle-scroller ready direction-vertical flex flex-col divide-y-2 divide-border overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+            >
+                <template #default="props" :key="i[props.item.idex]">
+                    <div class="task">
                         <Profile
                             @click="i[props.item.index]++"
-                            :class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
-                            :profile="props.item" />
+                            :class="[props.item.index % 2 == 1 ? 'bg-dark-500' : 'bg-dark-550']"
+                            :task="props.item"
+                        />
                     </div>
                 </template>
             </RecycleScroller>
         </div>
-        <div v-else class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center">
-            <ProfileIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
-            <p class="text-sm text-light-400">No profiles found</p>
-            <p class="mt-1 text-xs text-light-500">Create profiles to get started</p>
+        <div v-else class="flex justify-center text-light-400 py-2 bg-dark-500 border-b-2 border-border">
+            No profiles found
         </div>
     </Table>
 </template>
 <style lang="scss" scoped>
-.profile {
+.task {
     height: 64px;
 }
 h4 {
@@ -73,82 +73,25 @@ h4 {
     max-height: calc(100vh - 20rem);
     overflow: hidden;
 }
-
-.empty-state {
-    color: #969696;
-    font-size: 14px;
-    font-weight: 500;
-}
 </style>
 <script setup>
 import { Table, Header } from "@/components/Table";
-import { CartIcon, TicketIcon, ClickIcon, TimerIcon, ProfileIcon, CheckmarkIcon } from "@/components/icons";
+import { CartIcon, TicketIcon, ClickIcon, TimerIcon } from "@/components/icons";
 import Profile from "./Profile.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { computed, ref } from "vue";
 
 const props = defineProps({
-    profiles: { type: Object }
+    tasks: { 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;
-    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;
-});
-
-// 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";
+    return props.tasks.map((t) => ({ ...t, index: c++ }));
 });
 </script>

package/src/components/Editors/TagLabel.vue

@@ -1,77 +1,16 @@
 <template>
-    <div class="tag-pill">
-        <span class="tag-text">{{ formatText(props.text) }}</span>
+    <div class="flex rounded-2xl w-fit shadow-3xl items-center justify-center bg-dark-600">
+        <span class="font-bold p-2 truncate small">{{ props.text }}</span>
     </div>
 </template>
 
-<style lang="scss" scoped>
-.tag-pill {
-    @apply inline-flex items-center justify-center rounded-md transition-all duration-200;
-    background: linear-gradient(145deg, #3d3e44, #35363c);
-    border: 1px solid #4b4c53;
-    padding: 0.1875rem 0.5rem;
-    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;
-        transform: translateY(-0.5px);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
-    }
-}
-
-.tag-text {
-    @apply text-white font-semibold truncate;
-    font-size: 0.6875rem;
-    line-height: 1.1;
-    letter-spacing: 0.025em;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-// Ultra responsive design
-@media (max-width: 1024px) {
-    .tag-pill {
-        padding: 0.1rem 0.3rem;
-        max-width: 3.5rem;
-    }
-
-    .tag-text {
-        font-size: 0.575rem;
-    }
-}
-
-@media (max-width: 768px) {
-    .tag-pill {
-        padding: 0.075rem 0.25rem;
-        max-width: 3rem;
-        min-width: 1.25rem;
-    }
-
-    .tag-text {
-        font-size: 0.55rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .tag-pill {
-        padding: 0.05rem 0.2rem;
-        max-width: 2.5rem;
-        min-width: 1rem;
-    }
-
-    .tag-text {
-        font-size: 0.5rem;
-    }
+<style scoped>
+.small {
+    font-size: 0.6rem;
+    line-height: 0.8rem;
 }
 </style>
 
 <script setup>
 const props = defineProps({ text: { type: String } });
-
-const formatText = (text) => {
-    if (!text) return "";
-    return text.toUpperCase();
-};
 </script>