@necrolab/dashboard 0.5.34 → 0.5.35

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.34",
+    "version": "0.5.35",
     "type": "module",
     "scripts": {
         "build": "node scripts/build.mjs",

package/src/assets/css/components/headers.scss

@@ -7,19 +7,25 @@
     @apply flex items-center justify-between;
     padding-top: 0.75rem;
     padding-bottom: 0.5rem;
-    flex-wrap: nowrap;
+    flex-wrap: nowrap !important;
     gap: 0.5rem;
+    min-height: 0;
 
     .page-header-card {
         @apply flex items-center gap-2.5 rounded-lg;
         padding: 0.375rem 0.75rem;
         background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
         border: 1px solid var(--color-border-light);
-        flex: 0 1 auto;
+        flex: 0 0 auto;
         min-width: 0;
-        max-width: 60%;
         white-space: nowrap;
-        overflow: hidden;
+
+        /* Mobile - allow shrinking if needed */
+        @media (max-width: 767px) {
+            flex: 0 1 auto;
+            max-width: calc(100% - 180px);
+            gap: 0.5rem;
+        }
 
         svg, img {
             width: 17px;

package/src/assets/css/components/toasts.scss

@@ -38,17 +38,33 @@
 .Toastify__toast-container {
     pointer-events: none;
     --toastify-toast-bd-radius: 6px;
+
+    /* Mobile responsive - prevent overflow and edge-to-edge toasts */
+    @media (max-width: 767px) {
+        width: calc(100vw - 2rem) !important;
+        max-width: 360px;
+        right: 1rem !important;
+        left: auto !important;
+        padding: 0 !important;
+        top: calc(env(safe-area-inset-top) + 1rem) !important;
+    }
 }
 
 .Toastify__toast {
     min-height: 50px !important;
-    height: 50px !important;
+    height: auto !important;
     pointer-events: auto !important;
     margin-bottom: 6px !important;
 
     transition: transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
     transform: translate3d(0, 0, 0);
 
+    /* Mobile responsive - ensure proper sizing */
+    @media (max-width: 767px) {
+        margin-bottom: 8px !important;
+        border-radius: 6px !important;
+    }
+
     &.Toastify__slide-enter-active {
         animation: slideInRight 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
     }

package/src/assets/css/main.scss

@@ -114,6 +114,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 
 .mobile-icons {
     @apply ml-auto flex items-center gap-x-2 lg:hidden;
+    flex-shrink: 0;
 
     button {
         @apply flex h-8 w-8 items-center justify-center rounded transition-all duration-150 bg-dark-400;

package/src/components/Tasks/Stats.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="queue-stats"
-        :class="{ 'queue-stats--full': visibleCards === 4 }"
+        :class="[{ 'queue-stats--full': visibleCards === 4 }, $attrs.class]"
         :style="statsGridStyle"
         v-if="ui.queueStats.show"
         :key="key">
@@ -91,6 +91,10 @@ import { SkiIcon, TimerIcon, SandclockIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import { ref, onUnmounted, computed, onMounted } from "vue";
 
+defineOptions({
+    inheritAttrs: false
+});
+
 const ui = useUIStore();
 
 const getQueuePassAmount = (width) => {

package/src/components/Tasks/Task.vue

@@ -85,8 +85,8 @@
             </div>
         </div>
         <div class="col-span-2 overflow-hidden lg:col-span-3 xl:col-span-2">
-            <h4 class="lg:text-2xs text-center text-xs leading-tight text-light-300">
-                <span v-if="!props.task.reservedTicketsList">-</span>
+            <h4 class="lg:text-2xs text-center text-xs leading-tight">
+                <span v-if="!props.task.reservedTicketsList" class="text-light-300">-</span>
                 <div v-else class="overflow-hidden">
                     <div
                         v-for="(l, index) in props.task.reservedTicketsList.split('\n')"
@@ -99,7 +99,12 @@
                                 'font-bold text-green-400': isTotalPrice(
                                     l,
                                     index,
-                                    props.task.reservedTicketsList.split(' ')
+                                    props.task.reservedTicketsList.split('\n')
+                                ),
+                                'text-light-300': !isTotalPrice(
+                                    l,
+                                    index,
+                                    props.task.reservedTicketsList.split('\n')
                                 )
                             }">
                             {{ l.trim() }}
@@ -109,7 +114,8 @@
                 <span
                     class="mt-1 block text-xs font-bold"
                     :class="{
-                        'text-red-400': taskTimeLeft === '00:00' || taskTimeLeft === 'No Cartholds'
+                        'text-red-400': taskTimeLeft === '00:00' || taskTimeLeft === 'No Cartholds',
+                        'text-light-300': taskTimeLeft !== '00:00' && taskTimeLeft !== 'No Cartholds'
                     }">
                     {{ taskTimeLeft !== "00:00" ? taskTimeLeft : "Expired" }}
                 </span>

package/src/components/Tasks/TaskView.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="table-component relative box-border flex flex-col rounded-lg bg-dark-500 bg-clip-padding overflow-x-hidden shadow-sm">
+    <div
+        class="table-component relative box-border flex flex-col overflow-x-hidden rounded-lg bg-dark-500 bg-clip-padding shadow-sm">
         <Header class="grid-cols-10 gap-2 text-center lg:grid-cols-12">
             <div class="col-span-1 flex items-center justify-start lg:col-span-2">
                 <Checkbox
@@ -9,26 +10,26 @@
                     :isHeader="true" />
                 <div class="mx-auto hidden items-center lg:flex" @click="ui.toggleSort('eventId')">
                     <EventIcon class="lg:mr-3" />
-                    <h4 class="hidden lg:flex text-white">Event</h4>
+                    <h4 class="hidden text-white lg:flex">Event</h4>
                     <DownIcon v-if="ui.sortData.sortBy === 'eventId' && !ui.sortData.reversed" class="ml-1" />
                     <UpIcon v-if="ui.sortData.sortBy === 'eventId' && ui.sortData.reversed" class="ml-1" />
                 </div>
             </div>
             <div class="col-span-2 flex items-center justify-center lg:col-span-3 xl:col-span-2" v-once>
                 <TicketIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex text-white">Tickets</h4>
+                <h4 class="hidden text-white lg:flex">Tickets</h4>
             </div>
             <div
                 class="col-span-6 flex items-center justify-center md:col-span-5 lg:col-span-4 xl:col-span-5"
                 @click="ui.toggleSort('status')">
                 <StatusIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex text-white">Status</h4>
+                <h4 class="hidden text-white lg:flex">Status</h4>
                 <DownIcon v-if="ui.sortData.sortBy === 'status' && !ui.sortData.reversed" class="ml-1" />
                 <UpIcon v-if="ui.sortData.sortBy === 'status' && ui.sortData.reversed" class="ml-1" />
             </div>
             <div class="col-span-1 flex items-center justify-end md:col-span-2 md:justify-center lg:col-span-3" v-once>
                 <ClickIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex text-white">Actions</h4>
+                <h4 class="hidden text-white lg:flex">Actions</h4>
             </div>
             <div class="absolute right-5 top-3.5 hidden items-center xl:flex">
                 <h4 class="text-center text-xs text-white">ID</h4>
@@ -36,7 +37,7 @@
         </Header>
         <DynamicScroller
             v-if="virtualTaskItems.length && useVirtualScroller"
-            class="hidden-scrollbars touch-pan-y min-h-0 overflow-y-auto overflow-x-hidden scrollable"
+            class="hidden-scrollbars scrollable min-h-0 touch-pan-y overflow-y-auto overflow-x-hidden"
             :style="{ height: maxTableHeight, maxHeight: maxTableHeight }"
             :items="virtualTaskItems"
             :min-item-size="virtualMinItemSize"
@@ -56,7 +57,7 @@
                     ]"
                     :data-index="index">
                     <div
-                        class="shrink-0 border-b border-dark-650 min-h-14.5 md:min-h-17.25 has-[.event-details]:min-h-18.75 mobile-portrait:min-h-12.5 transition-colors duration-150 ease-in-out hover:!bg-dark-550">
+                        class="mobile-portrait:min-h-12.5 min-h-14.5 shrink-0 border-b border-dark-650 transition-colors duration-150 ease-in-out hover:!bg-dark-550 has-[.event-details]:min-h-18.75 md:min-h-17.25">
                         <Task
                             v-if="props.tasks[item.taskId]"
                             :task="props.tasks[item.taskId]"
@@ -68,12 +69,12 @@
         </DynamicScroller>
         <div
             v-else-if="virtualTaskItems.length"
-            class="hidden-scrollbars touch-pan-y min-h-0 overflow-y-auto overflow-x-hidden scrollable"
+            class="hidden-scrollbars scrollable min-h-0 touch-pan-y overflow-y-auto overflow-x-hidden"
             :style="{ maxHeight: maxTableHeight }">
             <div
                 v-for="(item, index) in virtualTaskItems"
                 :key="item.taskId"
-                class="shrink-0 border-b border-dark-650 min-h-14.5 md:min-h-17.25 has-[.event-details]:min-h-18.75 mobile-portrait:min-h-12.5 transition-colors duration-150 ease-in-out hover:!bg-dark-550">
+                class="mobile-portrait:min-h-12.5 min-h-14.5 shrink-0 border-b border-dark-650 transition-colors duration-150 ease-in-out hover:!bg-dark-550 has-[.event-details]:min-h-18.75 md:min-h-17.25">
                 <Task
                     v-if="props.tasks[item.taskId]"
                     :task="props.tasks[item.taskId]"
@@ -83,18 +84,15 @@
         </div>
         <div
             v-else
-            class="empty-state flex flex-col items-center justify-center py-8 text-center bg-dark-400 text-light-500 text-sm font-medium"
+            class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center text-sm font-medium text-light-500"
             :style="{ minHeight: emptyStateHeight }">
-            <div
-                v-if="
-                    !ui.queueStats.queued && !ui.queueStats.sleeping && ui.queueStats.nextQueuePasses.length === 0
-                ">
-                <TasksIcon class="mx-auto empty-state-icon" />
+            <div v-if="!ui.queueStats.queued && !ui.queueStats.sleeping && ui.queueStats.nextQueuePasses.length === 0">
+                <TasksIcon class="empty-state-icon mx-auto" />
                 <p class="text-sm text-light-400">No tasks yet</p>
                 <p class="mt-1 text-xs text-light-500">Create tasks to get started</p>
             </div>
             <div v-else>
-                <TasksIcon class="mx-auto empty-state-icon" />
+                <TasksIcon class="empty-state-icon mx-auto" />
                 <p class="text-sm text-light-400">No tasks match current filters</p>
                 <p class="mt-1 text-xs text-light-500">Adjust filters to see tasks</p>
             </div>
@@ -118,7 +116,7 @@ const props = defineProps({
     },
     searchQuery: {
         type: String,
-        default: ''
+        default: ""
     },
     preferEventName: {
         type: Boolean,
@@ -203,7 +201,11 @@ const filteredTaskIds = computed(() => {
             continue;
         }
 
-        if (task.siteId !== ui.currentCountry.siteId && !siteIdEdgeCases[task.siteId]?.includes(ui.currentCountry.siteId)) continue;
+        if (
+            task.siteId !== ui.currentCountry.siteId &&
+            !siteIdEdgeCases[task.siteId]?.includes(ui.currentCountry.siteId)
+        )
+            continue;
         if (ui.currentEvent && task.eventId !== ui.currentEvent) continue;
         if (!shouldTaskShow(task)) continue;
         if (!shouldTaskMatchSearch(task, searchLower)) continue;
@@ -264,7 +266,7 @@ const handleVirtualWheel = (event) => {
 
 const maxTableHeight = computed(() => {
     // Detect PWA mode (standalone display)
-    const isPWA = window.matchMedia('(display-mode: standalone)').matches;
+    const isPWA = window.matchMedia("(display-mode: standalone)").matches;
 
     // Calculate available space for table
     const headerHeight = windowWidth.value >= 1024 ? 80 : 64; // Navbar padding (lg:pt-20 vs pt-16)
@@ -292,15 +294,17 @@ const maxTableHeight = computed(() => {
     })();
 
     // Reserve more space for UTILS on iPhone PWA to prevent overflow
-    const utilitiesHeight = isPWA && windowWidth.value <= 768
-        ? 260  // iPhone PWA: extra space for UTILS
-        : windowWidth.value > 1024
-            ? 200  // Desktop
-            : windowWidth.value <= 768
-                ? 220  // Mobile browser
-                : 180; // Tablet
-
-    const margins = windowWidth.value >= 1024 ? 30 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 8 : 12;
+    const utilitiesHeight =
+        isPWA && windowWidth.value <= 768
+            ? 150 // iPhone PWA: extra space for UTILS
+            : windowWidth.value > 1024
+              ? 200 // Desktop
+              : windowWidth.value <= 768
+                ? 150 // Mobile browser
+                : 210; // Tablet
+
+    const margins =
+        windowWidth.value >= 1024 ? 30 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 8 : 12;
 
     const totalUsedSpace =
         headerHeight + titleHeight + controlsHeight + filtersAndStatsHeight + utilitiesHeight + margins;

package/src/libs/Filter.js

@@ -164,7 +164,6 @@ const getSectionNameMapping = () => {
         }
     });
 
-    log("getSectionNameMapping:", sectionRealName);
     return sectionRealName;
 };
 
@@ -583,14 +582,11 @@ export default class FilterBuilder {
         // Use BOTH stroke and fill to cover entire section area, not just row lines
         this.cssClasses += `.svg-wrapper path.hover-highlight-stroke {stroke: ${colors.HIGHLIGHT} !important; fill: ${colors.HIGHLIGHT} !important; fill-opacity: 0.3 !important;}\n`;
         this.cssClasses += `.svg-wrapper path.hover-highlight-fill {fill: ${colors.HIGHLIGHT} !important;}\n`;
-
-        log("Generated CSS:", this.cssClasses);
     }
 
     addLabelHandlers() {
         const labels = document.querySelectorAll("tspan");
         const gaSectionNameMapping = this.getSectionNameMapping();
-        log("addLabelHandlers: gaSectionNameMapping", gaSectionNameMapping);
 
         for (let i = 0; i < labels.length; i++) {
             const label = labels[i];

package/src/main.js

@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import VueVirtualScroller from "vue-virtual-scroller";
+import Vue3Toastify from "vue3-toastify";
 
 import App from "./App.vue";
 import router from "./router";
@@ -18,4 +19,8 @@ app.config.performance = true;
 app.use(createPinia());
 app.use(router);
 app.use(VueVirtualScroller);
+app.use(Vue3Toastify, {
+    newestOnTop: true,
+    position: "top-right"
+});
 app.mount("#app");

package/src/stores/ui.js

@@ -5,6 +5,10 @@ import { toast } from "vue3-toastify";
 import { createLogger } from "@/stores/logger";
 import { betterSort, sortTaskIds } from "@/libs/utils/array";
 
+// Track active toast IDs for manual limit enforcement
+const activeToasts = [];
+const MAX_TOASTS = 2;
+
 const TOAST_CONFIG = {
     autoClose: 1400,
     pauseOnHover: false,
@@ -17,6 +21,27 @@ const TOAST_CONFIG = {
     newestOnTop: true
 };
 
+// Helper to enforce toast limit
+const showToastWithLimit = (type, message) => {
+    // If we're at the limit, remove the oldest toast
+    if (activeToasts.length >= MAX_TOASTS) {
+        const oldestId = activeToasts.shift();
+        toast.remove(oldestId);
+    }
+
+    // Show new toast and track its ID
+    const toastId = toast[type](message, TOAST_CONFIG);
+    activeToasts.push(toastId);
+
+    // Remove from tracking when it auto-closes
+    setTimeout(() => {
+        const index = activeToasts.indexOf(toastId);
+        if (index > -1) activeToasts.splice(index, 1);
+    }, TOAST_CONFIG.autoClose + 100);
+
+    return toastId;
+};
+
 import mockTaskData from "@/stores/sampleData.js";
 import { useRouter } from "vue-router";
 import { DEBUG } from "@/utils/debug";
@@ -264,7 +289,6 @@ export const useUIStore = defineStore("ui", () => {
             input.style.userSelect = "auto";
             input.style.touchAction = "pan-x pan-y";
         });
-
     };
 
     const enableScroll = () => {
@@ -301,7 +325,6 @@ export const useUIStore = defineStore("ui", () => {
 
         // Restore scroll position
         window.scrollTo(0, parseInt(scrollY || "0") * -1);
-
     };
 
     const refreshQueueStats = () => {
@@ -538,7 +561,6 @@ export const useUIStore = defineStore("ui", () => {
         mainCheckbox,
         toggleMainCheckbox,
 
-
         // single
         deleteTask: (taskId) => {
             delete tasks.value[taskId];
@@ -607,8 +629,8 @@ export const useUIStore = defineStore("ui", () => {
         massEditPresaleCode: (eventId, presaleCode) => connection.sendMassEditPresaleCode(eventId, presaleCode),
 
         // alerts
-        showError: (err) => toast.error(err, TOAST_CONFIG),
-        showSuccess: (msg) => toast.success(msg, TOAST_CONFIG),
+        showError: (err) => showToastWithLimit("error", err),
+        showSuccess: (msg) => showToastWithLimit("success", msg),
         // Country
         currentCountry,
         setCurrentCountry: (country, closeModal, newModule) => {

package/src/views/Tasks.vue

@@ -37,21 +37,8 @@
                     @deleteAll="ui.deleteTasks()" />
             </div>
 
-            <div class="mb-2 flex flex-col gap-2 md:hidden">
+            <div class="mb-2 md:hidden">
                 <Stats class="stats-component w-full" />
-                <div class="flex-gap-2 items-center justify-end">
-                    <div
-                        class="flex h-8 items-center justify-between rounded-md border border-dark-650 bg-dark-400 px-2 text-xs font-medium text-white">
-                        <p class="text-2xs">Name</p>
-                        <Switch class="scale-75" v-model="preferEventName" />
-                    </div>
-                    <PriceSortToggle
-                        class="h-8 min-w-20 max-w-28 flex-shrink-0"
-                        :options="['All', 'Checkout']"
-                        :darker="true"
-                        :current="ui.taskFilter"
-                        @change="(e) => ui.setTaskFilter(e)" />
-                </div>
             </div>
 
             <div class="mb-1 hidden flex-wrap items-center gap-2 md:flex xl:flex-nowrap lg:mb-2">
@@ -103,16 +90,29 @@
                         class="input-default event-dropdown w-full hover:bg-dark-400"
                         rightAmount="right-2" />
                 </div>
-                <div class="w-full">
-                    <div class="input-default flex items-center">
-                        <input
-                            v-model="taskSearchQuery"
-                            type="text"
-                            placeholder="Search tasks..."
-                            aria-label="Search tasks"
-                            class="transparent-input" />
-                        <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
+                <div class="flex w-full items-center gap-2">
+                    <div class="flex-1">
+                        <div class="input-default flex items-center">
+                            <input
+                                v-model="taskSearchQuery"
+                                type="text"
+                                placeholder="Search tasks..."
+                                aria-label="Search tasks"
+                                class="transparent-input" />
+                            <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
+                        </div>
+                    </div>
+                    <div
+                        class="flex h-8 items-center justify-between rounded-md border border-dark-650 bg-dark-400 px-2 text-xs font-medium text-white flex-shrink-0">
+                        <p class="text-2xs">Name</p>
+                        <Switch class="scale-75" v-model="preferEventName" />
                     </div>
+                    <PriceSortToggle
+                        class="h-8 min-w-20 max-w-28 flex-shrink-0"
+                        :options="['All', 'Checkout']"
+                        :darker="true"
+                        :current="ui.taskFilter"
+                        @change="(e) => ui.setTaskFilter(e)" />
                 </div>
             </div>