@necrolab/dashboard 0.5.28 → 0.5.29

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

@@ -33,19 +33,23 @@
                 <h4 class="hidden text-white md:flex md:ml-3">Actions</h4>
             </div>
         </Header>
-        <div
-            v-if="toRender.length != 0"
-            class="hidden-scrollbars flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll"
-            :style="{ maxHeight: dynamicTableHeight }">
-            <div
-                v-for="(profile, i) in toRender"
-                :key="profile.id || profile.index"
-                class="min-h-16 flex-shrink-0 hover:bg-dark-550">
-                <Profile
-                    :class="getRowClass(i)"
-                    :profile="profile" />
-            </div>
-        </div>
+        <RecycleScroller
+            v-if="props.profiles.length !== 0"
+            class="hidden-scrollbars touch-pan-y overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll scrollable"
+            :style="{ height: dynamicTableHeight, maxHeight: dynamicTableHeight }"
+            :items="virtualProfiles"
+            key-field="virtualKey"
+            :item-size="64"
+            @wheel.passive="handleVirtualWheel">
+            <template #default="{ item, index }">
+                <div class="min-h-16 flex-shrink-0 hover:bg-dark-550">
+                    <Profile
+                        :class="getRowClass(index)"
+                        :profile="item.profile"
+                        :privacy="props.privacy" />
+                </div>
+            </template>
+        </RecycleScroller>
         <EmptyState v-else :icon="ProfileIcon" message="No profiles found" subtitle="Create profiles to get started" />
     </div>
 </template>
@@ -57,22 +61,37 @@ import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import EmptyState from "@/components/ui/EmptyState.vue";
 import { useUIStore } from "@/stores/ui";
 import { useDynamicTableHeight } from "@/composables/useDynamicTableHeight";
-import { computed } from "vue";
-import { useTableRender } from "@/composables/useTableRender";
 import { getRowClass } from "@/utils/tableHelpers";
+import { RecycleScroller } from "vue-virtual-scroller";
+import { computed } from "vue";
 
 const props = defineProps({
     profiles: {
-        type: Object,
+        type: Array,
         required: true
+    },
+    privacy: {
+        type: Boolean,
+        default: true
     }
 });
 
 const ui = useUIStore();
 
-const { toRender } = useTableRender(computed(() => props.profiles));
-
 import { TABLE_LAYOUT } from "@/constants/tableLayout";
 
 const { dynamicTableHeight } = useDynamicTableHeight(TABLE_LAYOUT.PROFILES);
+
+const virtualProfiles = computed(() =>
+    props.profiles.map((profile) => ({
+        profile,
+        virtualKey: String(profile.id ?? `${profile.profileName ?? "profile"}-${profile.cardNumber ?? ""}`)
+    }))
+);
+
+const handleVirtualWheel = (event) => {
+    const target = event.currentTarget;
+    if (!target) return;
+    target.scrollTop += event.deltaY;
+};
 </script>

package/src/components/Tasks/CreateTaskAXS.vue

@@ -108,6 +108,7 @@ import {
     StadiumIcon,
     ScannerIcon,
     BagIcon,
+    HashIcon,
     TagIcon,
     SkiIcon,
     HandIcon,
@@ -131,7 +132,7 @@ const defaultTags = ["Amex", "Visa", "Master"];
 const profileTagsOptions = ref(
     removeDuplicates(["Any", ...defaultTags, ...ui.profile.profileTags.map((x) => firstUpper(x))])
 );
-const baseTask = ref({
+const createBaseTask = () => ({
     selected: false,
     taskId: "",
     active: false,
@@ -153,7 +154,20 @@ const baseTask = ref({
     promoId: ""
 });
 
-const task = ref(ui.modalData[`task_${ui.currentCountry.siteId}`] || baseTask);
+const booleanTaskFields = ["manual", "doNotPay", "quickQueue", "smartTimer"];
+
+const sanitizeTaskState = (savedState = {}) => {
+    const defaults = createBaseTask();
+    const merged = { ...defaults, ...savedState };
+
+    for (const field of booleanTaskFields) {
+        merged[field] = typeof merged[field] === "boolean" ? merged[field] : defaults[field];
+    }
+
+    return merged;
+};
+
+const task = ref(sanitizeTaskState(ui.modalData[`task_${ui.currentCountry.siteId}`]));
 
 function createTask() {
     ui.logger.Info("Created new task", task.value.taskId);

package/src/components/Tasks/CreateTaskTM.vue

@@ -136,6 +136,7 @@ import {
     StadiumIcon,
     ScannerIcon,
     BagIcon,
+    HashIcon,
     TagIcon,
     SkiIcon,
     HandIcon,
@@ -164,7 +165,7 @@ const profileTagsOptions = ref(
     removeDuplicates(["Any", ...defaultTags, ...ui.profile.profileTags.map((x) => firstUpper(x))])
 );
 
-const baseTask = ref({
+const createBaseTask = () => ({
     selected: false,
     taskId: "",
     active: false,
@@ -179,10 +180,12 @@ const baseTask = ref({
     manual: true,
     doNotPay: false,
     quickQueue: false,
-    loginAfterCart: false,
+    loginAfterCart: isEU(ui.currentCountry.siteId),
     smartTimer: false,
     presaleMode: false,
+    presaleStrict: false,
     agedAccount: false,
+    otpAccount: false,
     accountTag: accountTagOptions.value[0],
     profileTags: ["Any"],
     clOrigin: undefined,
@@ -190,9 +193,30 @@ const baseTask = ref({
     taskQuantity: 1
 });
 
-baseTask.value.loginAfterCart = isEU(ui.currentCountry.siteId);
+const booleanTaskFields = [
+    "manual",
+    "doNotPay",
+    "quickQueue",
+    "loginAfterCart",
+    "smartTimer",
+    "presaleMode",
+    "presaleStrict",
+    "agedAccount",
+    "otpAccount"
+];
 
-const task = ref(ui.modalData[`task_${ui.currentCountry.siteId}`] || baseTask);
+const sanitizeTaskState = (savedState = {}) => {
+    const defaults = createBaseTask();
+    const merged = { ...defaults, ...savedState };
+
+    for (const field of booleanTaskFields) {
+        merged[field] = typeof merged[field] === "boolean" ? merged[field] : defaults[field];
+    }
+
+    return merged;
+};
+
+const task = ref(sanitizeTaskState(ui.modalData[`task_${ui.currentCountry.siteId}`]));
 
 function createTask() {
     ui.logger.Info("Created new task", task.value.taskId);
@@ -251,4 +275,3 @@ watch(
     }
 );
 </script>
-

package/src/components/Tasks/QuickSettings.vue

@@ -15,7 +15,7 @@
                 <div class="w-2/3 h-full relative">
                     <input
                         type="text"
-                        class="api-key-input pr-16"
+                        class="api-key-input"
                         :placeholder="`Enter ${keyName} key`"
                         v-model="quickConfig.keys[categoryName][keyName]"
                     />
@@ -33,7 +33,7 @@
                         </div>
                         <div v-else-if="balanceState[categoryName]?.[keyName]?.balance !== null && balanceState[categoryName]?.[keyName]?.balance !== undefined" class="flex-gap-1 items-center text-green-400" :title="`Balance: ${balanceState[categoryName]?.[keyName]?.balance}`">
                             <img src="@/assets/img/sell.svg" width="9" class="opacity-60" />
-                            <span class="text-2xs font-bold tabular-nums">{{ formatBalance(balanceState[categoryName]?.[keyName]?.balance) }}</span>
+                            <span class="text-2xs font-bold tabular-nums balance-value">{{ formatBalance(balanceState[categoryName]?.[keyName]?.balance) }}</span>
                         </div>
                     </div>
                 </div>
@@ -154,7 +154,7 @@
 
 .api-key-input {
     @apply w-full h-full text-sm text-white border-0 rounded-md;
-    @apply px-3 py-2;
+    @apply px-3 py-2 pr-24;
     @apply focus:outline-none;
     background: oklch(26% 0 68deg);
 
@@ -167,6 +167,13 @@
     @apply absolute right-3 top-1/2 -translate-y-1/2;
     @apply flex items-center justify-center;
     @apply pointer-events-none;
+    max-width: 5.25rem;
+    min-width: 1rem;
+}
+
+.balance-value {
+    @apply truncate inline-block align-middle;
+    max-width: 4.25rem;
 }
 </style>
 <script setup>
@@ -245,11 +252,7 @@ const checkBalances = async () => {
                     // Match service name (case-insensitive)
                     if (keyName.toLowerCase().includes(service.toLowerCase()) ||
                         service.toLowerCase().includes(keyName.toLowerCase())) {
-                        balanceState.value[categoryName][keyName] = {
-                            loading: false,
-                            error: false,
-                            balance: balance
-                        };
+                        balanceState.value[categoryName][keyName] = normalizeBalanceState(balance);
                     }
                 });
             });
@@ -285,7 +288,7 @@ const checkBalances = async () => {
 };
 
 const formatBalance = (balance) => {
-    if (typeof balance === 'number') {
+    if (typeof balance === 'number' && Number.isFinite(balance)) {
         // Format large numbers with K, M suffixes if needed
         if (balance >= 1000000) {
             return (balance / 1000000).toFixed(1) + 'M';
@@ -296,7 +299,71 @@ const formatBalance = (balance) => {
         }
         return balance.toLocaleString();
     }
-    return String(balance);
+    return "--";
+};
+
+const normalizeBalanceState = (rawBalance) => {
+    if (typeof rawBalance === "number" && Number.isFinite(rawBalance)) {
+        return {
+            loading: false,
+            error: false,
+            balance: rawBalance
+        };
+    }
+
+    if (typeof rawBalance === "string") {
+        const cleaned = rawBalance.trim();
+        const lower = cleaned.toLowerCase();
+        const isErrorLike =
+            lower.includes("could not check balance") ||
+            lower.includes("could not") ||
+            lower.includes("failed") ||
+            lower.includes("error") ||
+            lower.includes("invalid");
+
+        if (isErrorLike) {
+            return {
+                loading: false,
+                error: true,
+                balance: null
+            };
+        }
+
+        const parsed = Number(cleaned.replace(/[$,\s]/g, ""));
+        if (Number.isFinite(parsed)) {
+            return {
+                loading: false,
+                error: false,
+                balance: parsed
+            };
+        }
+    }
+
+    if (rawBalance && typeof rawBalance === "object") {
+        const objectError = rawBalance.error || rawBalance.message || rawBalance.status;
+        if (objectError) {
+            return {
+                loading: false,
+                error: true,
+                balance: null
+            };
+        }
+
+        const nestedBalance = rawBalance.balance ?? rawBalance.value;
+        if (typeof nestedBalance === "number" && Number.isFinite(nestedBalance)) {
+            return {
+                loading: false,
+                error: false,
+                balance: nestedBalance
+            };
+        }
+    }
+
+    return {
+        loading: false,
+        error: true,
+        balance: null
+    };
 };
 
 loadProxyLists();

package/src/components/Tasks/Task.vue

@@ -3,8 +3,8 @@
         class="relative min-h-full grid-cols-10 gap-2 text-white lg:grid-cols-12"
         @click="ui.setOpenContextMenu('')"
         @dblclick="handleDoubleClick"
-        @touchstart="handleTouchStart"
-        @touchend="handleTouchEnd">
+        @touchstart.passive="handleTouchStart"
+        @touchend.passive="handleTouchEnd">
         <div class="col-span-1 flex items-center justify-start py-2 lg:col-span-2">
             <Checkbox
                 class="ml-2 mr-4 flex-shrink-0"
@@ -109,10 +109,9 @@
                 <span
                     class="mt-1 block text-xs font-bold"
                     :class="{
-                        'text-red-400':
-                            props.task._timeLeftString === '00:00' || props.task._timeLeftString === 'No Cartholds'
+                        'text-red-400': taskTimeLeft === '00:00' || taskTimeLeft === 'No Cartholds'
                     }">
-                    {{ props.task._timeLeftString !== "00:00" ? props.task._timeLeftString : "Expired" }}
+                    {{ taskTimeLeft !== "00:00" ? taskTimeLeft : "Expired" }}
                 </span>
             </h4>
         </div>
@@ -144,7 +143,7 @@
                         <PlayIcon />
                     </button>
                 </li>
-                <li v-if="task.status?.toLowerCase() == 'waiting' && props.task._timeLeftString !== '00:00'">
+                <li v-if="task.status?.toLowerCase() == 'waiting' && taskTimeLeft !== '00:00'">
                     <button @click="ui.continueTask(task.taskId, 'autocheckout')" aria-label="Auto checkout">
                         <BagWhiteIcon />
                     </button>
@@ -203,12 +202,13 @@ import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import ActionButtonGroup from "@/components/ui/ActionButtonGroup.vue";
 import EventDetailRow from "@/components/Tasks/EventDetailRow.vue";
 import { useUIStore } from "@/stores/ui";
-import { ref, onUnmounted, nextTick } from "vue";
+import { computed, ref, onUnmounted, nextTick } from "vue";
 import { useRowSelection } from "@/composables/useRowSelection";
 import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
 import { useColorMapping } from "@/composables/useColorMapping";
 import { useDateFormatting } from "@/composables/useDateFormatting";
 import { useTicketPricing } from "@/composables/useTicketPricing";
+import { timeDifference } from "@/libs/utils/time";
 
 const ui = useUIStore();
 const { copy } = useCopyToClipboard();
@@ -237,6 +237,19 @@ const { handleDoubleClick, handleTouchStart, handleTouchEnd } = useRowSelection(
     ui.toggleTaskSelected(props.task.taskId);
 });
 
+const taskTimeLeft = computed(() => {
+    const now = ui.taskTimeTick || Date.now();
+    if (!props.task.expirationTime) return props.task._timeLeftString || "";
+    if (props.task.expirationTime === "Invalid Date") return "No Cartholds";
+
+    const asNumber = Number(props.task.expirationTime);
+    const expirationTimestamp = Number.isFinite(asNumber) && asNumber > 0
+        ? asNumber
+        : Date.parse(props.task.expirationTime);
+    if (Number.isNaN(expirationTimestamp)) return props.task._timeLeftString || "00:00";
+    return timeDifference(expirationTimestamp, now);
+});
+
 const MENU_WIDTH = 168;
 const MENU_HEIGHT = 200;
 

package/src/components/Tasks/TaskView.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="table-component relative box-border flex flex-col rounded-lg bg-dark-500 bg-clip-padding overflow-hidden shadow-sm">
+    <div class="table-component relative box-border flex flex-col rounded-lg bg-dark-500 bg-clip-padding overflow-x-hidden 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
@@ -34,28 +34,54 @@
                 <h4 class="text-center text-xs text-white">ID</h4>
             </div>
         </Header>
+        <DynamicScroller
+            v-if="virtualTaskItems.length"
+            class="hidden-scrollbars touch-pan-y min-h-0 overflow-y-auto overflow-x-hidden scrollable"
+            :style="{ height: dynamicTableHeight, maxHeight: dynamicTableHeight }"
+            :items="virtualTaskItems"
+            :min-item-size="virtualMinItemSize"
+            :buffer="virtualBuffer"
+            @wheel.passive="handleVirtualWheel"
+            key-field="taskId">
+            <template #default="{ item, index, active }">
+                <DynamicScrollerItem
+                    :item="item"
+                    :active="active"
+                    :size-dependencies="[
+                        props.tasks[item.taskId]?.status,
+                        props.tasks[item.taskId]?.expirationTime,
+                        ui.taskTimeTick,
+                        props.tasks[item.taskId]?.reservedTicketsList,
+                        props.tasks[item.taskId]?.eventName
+                    ]"
+                    :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">
+                        <Task
+                            v-if="props.tasks[item.taskId]"
+                            :task="props.tasks[item.taskId]"
+                            :preferEventName="props.preferEventName"
+                            :class="getRowClass(index)" />
+                    </div>
+                </DynamicScrollerItem>
+            </template>
+        </DynamicScroller>
         <div
-            class="hidden-scrollbars touch-pan-y flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
-            :style="{ maxHeight: dynamicTableHeight }">
-            <div v-for="(task, i) in getTasksInOrder()" :key="task.taskId" class="shrink-0 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">
-                <Task :task="task" :preferEventName="props.preferEventName" :class="getRowClass(i)" />
-            </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"
+            :style="{ minHeight: dynamicTableHeight, maxHeight: dynamicTableHeight }">
             <div
-                v-if="getTasksInOrder().length === 0"
-                class="empty-state flex flex-col items-center justify-center py-8 text-center bg-dark-400 text-light-500 text-sm font-medium">
-                <div
-                    v-if="
-                        !ui.queueStats.queued && !ui.queueStats.sleeping && ui.queueStats.nextQueuePasses.length === 0
-                    ">
-                    <TasksIcon class="mx-auto empty-state-icon" />
-                    <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" />
-                    <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>
+                v-if="
+                    !ui.queueStats.queued && !ui.queueStats.sleeping && ui.queueStats.nextQueuePasses.length === 0
+                ">
+                <TasksIcon class="mx-auto empty-state-icon" />
+                <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" />
+                <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>
         </div>
     </div>
@@ -68,6 +94,7 @@ import Task from "./Task.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import { getRowClass } from "@/utils/tableHelpers";
+import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
 
 const props = defineProps({
     tasks: {
@@ -99,47 +126,97 @@ const siteIdEdgeCases = {
     TM_NZ: ["TM_AU"]
 };
 
-const getTasksInOrder = () => {
-    let out = [];
+const virtualItemCache = new Map();
+const searchTextCache = new Map();
+
+const shouldTaskMatchSearch = (task, searchLower) => {
+    if (!searchLower) return true;
+
+    const cached = searchTextCache.get(task.taskId);
+    if (
+        cached &&
+        cached.eventId === task.eventId &&
+        cached.eventName === task.eventName &&
+        cached.eventVenue === task.eventVenue &&
+        cached.email === task.email &&
+        cached.status === task.status &&
+        cached.profileName === task.profileName &&
+        cached.presaleCode === task.presaleCode &&
+        cached.reservedTicketsList === task.reservedTicketsList
+    ) {
+        return cached.text.includes(searchLower);
+    }
+
+    const searchableText = [
+        task.eventId,
+        task.eventName,
+        task.eventVenue,
+        task.email,
+        task.taskId,
+        task.status,
+        task.profileName,
+        task.presaleCode,
+        task.reservedTicketsList
+    ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+
+    searchTextCache.set(task.taskId, {
+        eventId: task.eventId,
+        eventName: task.eventName,
+        eventVenue: task.eventVenue,
+        email: task.email,
+        status: task.status,
+        profileName: task.profileName,
+        presaleCode: task.presaleCode,
+        reservedTicketsList: task.reservedTicketsList,
+        text: searchableText
+    });
+
+    return searchableText.includes(searchLower);
+};
+
+const filteredTaskIds = computed(() => {
+    const out = [];
     const searchLower = props.searchQuery?.toLowerCase().trim() || "";
 
-    ui.taskIdOrder.forEach((id) => {
-        if (props.tasks[id] && !props.tasks[id]?.hidden) {
-            const task = props.tasks[id];
-
-            if (
-                task.siteId !== ui.currentCountry.siteId &&
-                !siteIdEdgeCases[task.siteId]?.includes(ui.currentCountry.siteId)
-            )
-                return;
-            if (ui.currentEvent && task.eventId !== ui.currentEvent) return;
-            if (!shouldTaskShow(task)) return;
-
-            // Search filter
-            if (searchLower) {
-                const searchableText = [
-                    task.eventId,
-                    task.eventName,
-                    task.eventVenue,
-                    task.email,
-                    task.taskId,
-                    task.status,
-                    task.profileName,
-                    task.presaleCode,
-                    task.reservedTicketsList
-                ]
-                    .filter(Boolean)
-                    .join(" ")
-                    .toLowerCase();
-
-                if (!searchableText.includes(searchLower)) return;
-            }
-
-            out.push(task);
+    for (const id of ui.taskIdOrder) {
+        const task = props.tasks[id];
+        if (!task || task.hidden) {
+            searchTextCache.delete(id);
+            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;
+
+        out.push(id);
+    }
+
     return out;
-};
+});
+
+const virtualTaskItems = computed(() => {
+    const idsInUse = new Set(filteredTaskIds.value);
+    for (const cachedId of virtualItemCache.keys()) {
+        if (!idsInUse.has(cachedId)) virtualItemCache.delete(cachedId);
+    }
+    for (const cachedId of searchTextCache.keys()) {
+        if (!idsInUse.has(cachedId) && !props.tasks[cachedId]) searchTextCache.delete(cachedId);
+    }
+
+    return filteredTaskIds.value.map((taskId) => {
+        let item = virtualItemCache.get(taskId);
+        if (!item) {
+            item = { taskId };
+            virtualItemCache.set(taskId, item);
+        }
+        return item;
+    });
+});
 
 // Dynamic height calculation to prevent page scrolling
 const windowHeight = ref(window.innerHeight);
@@ -158,6 +235,15 @@ onUnmounted(() => {
     window.removeEventListener("resize", updateDimensions);
 });
 
+const virtualMinItemSize = computed(() => (windowWidth.value <= 768 ? 58 : 69));
+const virtualBuffer = computed(() => virtualMinItemSize.value * 8);
+
+const handleVirtualWheel = (event) => {
+    const target = event.currentTarget;
+    if (!target) return;
+    target.scrollTop += event.deltaY;
+};
+
 const dynamicTableHeight = computed(() => {
     // Detect PWA mode (standalone display)
     const isPWA = window.matchMedia('(display-mode: standalone)').matches;

package/src/components/Tasks/ViewTask.vue

@@ -47,11 +47,11 @@
                     <span>{{ taskSnapshot.status }}</span>
                 </InfoRow>
                 <InfoRow
-                    v-if="taskSnapshot._timeLeftString && taskSnapshot._timeLeftString !== 'No Cartholds'"
+                    v-if="taskTimeLeft && taskTimeLeft !== 'No Cartholds'"
                     :icon="TimerIcon"
                     label="Cart Expiration"
-                    :value-class="`font-semibold text-right ${taskSnapshot._timeLeftString === '00:00' ? 'text-red-400' : ''}`">
-                    {{ taskSnapshot._timeLeftString !== "00:00" ? taskSnapshot._timeLeftString : "Expired" }}
+                    :value-class="`font-semibold text-right ${taskTimeLeft === '00:00' ? 'text-red-400' : ''}`">
+                    {{ taskTimeLeft !== "00:00" ? taskTimeLeft : "Expired" }}
                 </InfoRow>
                 <InfoRow
                     v-if="taskSnapshot.reservedTicketsList"
@@ -192,6 +192,7 @@ import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
 import { useColorMapping } from "@/composables/useColorMapping";
 import { useDateFormatting } from "@/composables/useDateFormatting";
 import { useTicketPricing } from "@/composables/useTicketPricing";
+import { timeDifference } from "@/libs/utils/time";
 import {
     EyeIcon,
     StadiumIcon,
@@ -260,4 +261,17 @@ const toggles = computed(() => ({
     quickQueue: taskSnapshot.value.quickQueue,
     agedAccount: taskSnapshot.value.agedAccount
 }));
+
+const taskTimeLeft = computed(() => {
+    const now = ui.taskTimeTick || Date.now();
+    if (!taskSnapshot.value.expirationTime) return taskSnapshot.value._timeLeftString || "";
+    if (taskSnapshot.value.expirationTime === "Invalid Date") return "No Cartholds";
+
+    const asNumber = Number(taskSnapshot.value.expirationTime);
+    const expirationTimestamp = Number.isFinite(asNumber) && asNumber > 0
+        ? asNumber
+        : Date.parse(taskSnapshot.value.expirationTime);
+    if (Number.isNaN(expirationTimestamp)) return taskSnapshot.value._timeLeftString || "00:00";
+    return timeDifference(expirationTimestamp, now);
+});
 </script>