@necrolab/dashboard 0.4.221 → 0.5.1

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

@@ -1,64 +1,64 @@
 <template>
     <Row
-        class="relative text-white grid-cols-7 lg:grid-cols-8"
+        class="relative grid-cols-7 text-white lg:grid-cols-8"
         @click="ui.setOpenContextMenu('')"
-        @click.right.prevent="ui.setOpenContextMenu('')"
-    >
-        <div class="col-span-3 lg:col-span-2 flex">
+        @click.right.prevent="ui.setOpenContextMenu('')">
+        <div class="col-span-3 flex lg:col-span-2">
             <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
-                }}</span>
-                <img width="22 px" :src="getAccountType()" />
+            <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>
         </div>
         <div class="col-span-1">
             <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">
-                <img width="12px" height="12px" class="green" src="/img/controls/enable.svg" />
+            <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>
-            <h4 v-else class="text-red-400 flex justify-center">
-                <img width="12px" height="12px" class="fill-red-400" src="/img/close.svg" />
+            <h4 v-else class="flex justify-center text-red-400">
+                <img class="h-3 w-3 fill-red-400" src="/img/close.svg" />
             </h4>
         </div>
 
         <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" />
+            <h4 class="flex justify-center gap-1 text-white">
+                <TagLabel v-for="tag in props.profile.tags" :key="tag" :text="tag" />
             </h4>
         </div>
 
         <div class="col-span-1 flex">
-            <ul class="task-buttons bg-dark-600 px-2 rounded-full shadow-3xl py-1 items-center">
+            <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 width="16px" height="16px" class="mt-0.5" src="/img/controls/disable.svg" />
+                        <img class="h-4 w-4" src="/img/controls/disable.svg" />
                     </button>
                 </li>
                 <li v-else>
                     <button @click="enable">
-                        <img width="16px" height="16px" class="mt-0.5" src="/img/controls/enable.svg" />
+                        <img class="h-4 w-4" src="/img/controls/enable.svg" />
                     </button>
                 </li>
                 <li>
@@ -76,28 +76,111 @@
 h4 {
     @apply text-center;
 }
-.task-buttons {
-    @apply flex mx-auto gap-x-3;
-    svg {
-        width: 15px;
-        height: 15px;
+.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: oklch(0.82 0 0);
+
+        &: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;
     }
 }
 
+// Tablet optimization
 @media (max-width: 1024px) {
     h4 {
         font-size: 10px !important;
     }
-    .task-buttons {
-        @apply gap-x-3;
+
+    .profile-buttons {
+        padding: 3px;
+        gap: 2px;
+
+        button {
+            width: 26px;
+            height: 26px;
+        }
+
+        svg,
+        img {
+            width: 14px;
+            height: 14px;
+        }
     }
-    .task-id {
+
+    .profile-id {
         font-size: 6px !important;
         margin-right: -12px;
         margin-top: 20px;
     }
-    .task-id-alt {
-        font-size: 7px !important;
+}
+
+// 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;
+        }
     }
 }
 </style>
@@ -107,28 +190,30 @@ 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({
-    task: { type: Object }
+    profile: { type: Object }
 });
 
 const getAccountType = () => {
-    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
+    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/ProfileCountryChooser.vue

@@ -1,43 +1,75 @@
 <template>
     <div>
-        <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="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="flex gap-3 justify-center">
                     <img class="w-5" :src="`/flags/${current?.toLowerCase()}.svg`" />
                 </div>
             </span>
-            <div
-                v-if="open && !disabled"
-                class="dropdown-content special-dropdown snap-mandatory snap-y z-inf max-h-48 overflow-scroll hidden-scrollbars"
-            >
+            <Teleport to="body">
                 <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`" />
+                    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>
                     </div>
                 </div>
-            </div>
+            </Teleport>
         </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;
@@ -57,19 +89,49 @@ 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;
 }
 
-.dropdown-content {
-    left: -1.1rem;
-    z-index: 99999999999999;
+@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;
 }
 </style>
-, watch

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

@@ -1,37 +1,36 @@
 <template>
     <Table>
-        <Header class="text-center grid-cols-7 lg:grid-cols-8">
-            <div class="col-span-3 lg:col-span-2 flex">
+        <Header class="grid-cols-7 text-center lg:grid-cols-8">
+            <div class="col-span-3 flex lg:col-span-2">
                 <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')">
-                    <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" /> -->
+                    <ProfileIcon class="mr-0 h-4 w-4 md:mr-3" />
+                    <h4 class="hidden md:flex">Profile Name</h4>
                 </div>
             </div>
-            <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 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>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <TimerIcon class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Exp. Date</h4>
+                <TimerIcon class="mr-0 h-4 w-4 md:mr-3" />
+                <h4 class="hidden md:flex">Expiration</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <img src="/img/controls/enable.svg" width="14" class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Enabled</h4>
+                <CheckmarkIcon class="mr-0 h-4 w-4 md:mr-3" />
+                <h4 class="hidden md:flex">Enabled</h4>
             </div>
-            <div class="col-span-1 hidden lg:flex items-center justify-center" v-once>
-                <TicketIcon class="mr-0 lg:mr-3" />
+            <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" />
                 <h4 class="hidden lg:flex">Tags</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <ClickIcon class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Actions</h4>
+                <ClickIcon class="mr-0 h-4 w-4 md:mr-3" />
+                <h4 class="hidden md:flex">Actions</h4>
             </div>
         </Header>
         <div v-if="toRender.length != 0">
@@ -39,26 +38,27 @@
                 :items="toRender"
                 :item-size="64"
                 key-field="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"
-            >
+                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="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"
-                        />
+                            :class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
+                            :profile="props.item" />
                     </div>
                 </template>
             </RecycleScroller>
         </div>
-        <div v-else class="flex justify-center text-light-400 py-2 bg-dark-500 border-b-2 border-border">
-            No profiles found
+        <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>
     </Table>
 </template>
 <style lang="scss" scoped>
-.task {
+.profile {
     height: 64px;
 }
 h4 {
@@ -73,25 +73,82 @@ 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 } from "@/components/icons";
+import { CartIcon, TicketIcon, ClickIcon, TimerIcon, ProfileIcon, CheckmarkIcon } 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 } from "vue";
+import { computed, ref, onMounted, onUnmounted } 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;
+});
+
+// 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/Editors/TagLabel.vue

@@ -1,16 +1,77 @@
 <template>
-    <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 class="tag-pill">
+        <span class="tag-text">{{ formatText(props.text) }}</span>
     </div>
 </template>
 
-<style scoped>
-.small {
-    font-size: 0.6rem;
-    line-height: 0.8rem;
+<style lang="scss" scoped>
+.tag-pill {
+    @apply inline-flex items-center justify-center rounded-md transition-all duration-200;
+    background: linear-gradient(145deg, oklch(0.26 0 0), oklch(0.22 0 0));
+    border: 1px solid oklch(0.31 0 0);
+    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, oklch(0.28 0 0), oklch(0.26 0 0));
+        border-color: oklch(0.33 0 0);
+        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>
 
 <script setup>
 const props = defineProps({ text: { type: String } });
+
+const formatText = (text) => {
+    if (!text) return "";
+    return text.toUpperCase();
+};
 </script>