@necrolab/dashboard 0.5.6 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.6",
+    "version": "0.5.7",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && npx workbox-cli generateSW workbox-config.cjs && vite build",

package/src/components/Tasks/Task.vue

@@ -10,7 +10,25 @@
                 class="ml-2 mr-4 flex-shrink-0"
                 :toggled="props.task.selected"
                 @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
+            <div
+                v-if="props.preferEventName && props.task.eventName"
+                class="event-details hidden cursor-pointer lg:flex flex-col gap-0.5"
+                @click="copy(props.task.eventId)"
+                :title="`Event ID: ${props.task.eventId}`">
+                <div class="event-name text-white text-xs font-semibold leading-tight">
+                    {{ props.task.eventName }}
+                </div>
+                <div v-if="props.task.eventVenue" class="event-venue flex items-center gap-1 text-[10px] text-light-400">
+                    <StadiumIcon class="w-2.5 h-2.5 flex-shrink-0" />
+                    <span class="truncate">{{ props.task.eventVenue }}</span>
+                </div>
+                <div v-if="props.task.eventLocalDate" class="event-date flex items-center gap-1 text-[10px] text-light-400">
+                    <TimerIcon class="w-2.5 h-2.5 flex-shrink-0" />
+                    <span>{{ formatEventDate(props.task.eventLocalDate) }}</span>
+                </div>
+            </div>
             <h4
+                v-else
                 class="task-event-id mx-auto hidden cursor-pointer text-white hover:text-light-300 lg:block"
                 @click="copy(props.task.eventId)">
                 {{ props.task.eventId }}
@@ -375,7 +393,7 @@ h4 {
 /// <reference path="@/types/index.js" />
 
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, EyeIcon } from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, EyeIcon, StadiumIcon, TimerIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import TaskLabel from "@/components/Tasks/TaskLabel.vue";
@@ -386,9 +404,29 @@ const ui = useUIStore();
 
 /** @type {{ task: Task }} */
 const props = defineProps({
-    task: { type: Object }
+    task: { type: Object },
+    preferEventName: { type: Boolean, default: false }
 });
 
+// Format event date for display
+const formatEventDate = (dateString) => {
+    if (!dateString) return '';
+    try {
+        const date = new Date(dateString);
+        const options = {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: true
+        };
+        return date.toLocaleString('en-US', options).replace(',', '');
+    } catch {
+        return dateString;
+    }
+};
+
 // Context menu positioning
 const contextMenuPosition = ref({});
 const contextMenuRef = ref(null);

package/src/components/Tasks/TaskView.vue

@@ -14,31 +14,31 @@
                     <UpIcon v-if="ui.sortData.sortBy === 'eventId' && ui.sortData.reversed" class="ml-1" />
                 </div>
             </div>
-            <div class="col-span-2 flex items-center justify-start" v-once>
+            <div class="col-span-2 flex items-center justify-start lg:justify-center" v-once>
                 <TicketIcon class="mr-0 lg:mr-3" />
                 <h4 class="hidden lg:flex">Tickets</h4>
             </div>
-            <div class="col-span-5 md:col-span-4 lg:col-span-5 flex items-center justify-center" @click="ui.toggleSort('status')">
+            <div
+                class="col-span-5 flex items-center justify-center md:col-span-4 lg:col-span-5"
+                @click="ui.toggleSort('status')">
                 <StatusIcon class="mr-0 lg:mr-3" />
                 <h4 class="hidden 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-2 lg:col-span-3 flex items-center justify-center" v-once>
+            <div class="col-span-2 flex items-center justify-center lg:col-span-3" v-once>
                 <ClickIcon class="mr-0 lg:mr-3" />
                 <h4 class="hidden lg:flex">Actions</h4>
             </div>
-            <div class="absolute right-5 top-3.5 hidden items-center lg:flex" @click="ui.toggleSort('taskId')">
+            <div class="absolute right-5 top-3.5 hidden items-center lg:flex">
                 <h4 class="text-center text-xs">ID</h4>
-                <DownIcon v-if="ui.sortData.sortBy === 'taskId' && !ui.sortData.reversed" class="ml-1" />
-                <UpIcon v-if="ui.sortData.sortBy === 'taskId' && ui.sortData.reversed" class="ml-1" />
             </div>
         </Header>
         <div
             class="hidden-scrollbars stop-pan 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="task-row-container">
-                <Task :task="task" :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'" />
+                <Task :task="task" :preferEventName="props.preferEventName" :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'" />
             </div>
             <div
                 v-if="getTasksInOrder().length === 0"
@@ -104,12 +104,13 @@ import { useUIStore } from "@/stores/ui";
 
 const props = defineProps({
     tasks: { type: Object },
-    searchQuery: { type: String, default: '' }
+    searchQuery: { type: String, default: "" },
+    preferEventName: { type: Boolean, default: false }
 });
 
 const shouldTaskShow = (task) => {
     if (ui.taskFilter === "All") return true;
-    else if (ui.taskFilter === "Checkout") return task.expirationTime;
+    else if (ui.taskFilter === "Checkout") return Boolean(task.checkoutUrl);
     else return true;
 };
 
@@ -124,7 +125,7 @@ const siteIdEdgeCases = {
 
 const getTasksInOrder = () => {
     let out = [];
-    const searchLower = props.searchQuery?.toLowerCase().trim() || '';
+    const searchLower = props.searchQuery?.toLowerCase().trim() || "";
 
     ui.taskIdOrder.forEach((id) => {
         if (props.tasks[id] && !props.tasks[id]?.hidden) {
@@ -150,7 +151,10 @@ const getTasksInOrder = () => {
                     task.profileName,
                     task.presaleCode,
                     task.reservedTicketsList
-                ].filter(Boolean).join(' ').toLowerCase();
+                ]
+                    .filter(Boolean)
+                    .join(" ")
+                    .toLowerCase();
 
                 if (!searchableText.includes(searchLower)) return;
             }
@@ -185,9 +189,14 @@ const dynamicTableHeight = computed(() => {
     const controlsHeight = windowWidth.value >= 650 ? 55 : 0; // Desktop controls
     // On desktop: stats + filters all in one row (45px)
     // On mobile: stats row (40px) + filters stacked (90px) = 130px
-    const filtersAndStatsHeight = windowWidth.value >= 768
-        ? (ui.queueStats.show ? 50 : 45) // Desktop: single row
-        : (ui.queueStats.show ? 130 : 90); // Mobile: stats row + stacked filters
+    const filtersAndStatsHeight =
+        windowWidth.value >= 768
+            ? ui.queueStats.show
+                ? 50
+                : 45 // Desktop: single row
+            : ui.queueStats.show
+              ? 130
+              : 90; // Mobile: stats row + stacked filters
     const utilitiesHeight = windowWidth.value <= 768 ? 180 : 160; // Increase mobile utilities space to prevent cutoff
     const margins =
         windowWidth.value >= 1024 ? 20 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 8 : 12;

package/src/views/Tasks.vue

@@ -45,13 +45,19 @@
 
       <div class="flex md:hidden items-center justify-between gap-2 mb-1">
         <Stats class="stats-component flex-1" />
-        <PriceSortToggle
-          class="min-w-20 max-w-28 flex-shrink-0 h-8"
-          :options="['All', 'Checkout']"
-          :darker="true"
-          :current="ui.taskFilter"
-          @change="(e) => ui.setTaskFilter(e)"
-        />
+        <div class="flex gap-2 items-center">
+          <div class="bg-dark-400 border border-dark-650 justify-between px-2 flex text-white text-xs font-medium items-center rounded-md h-8">
+            <p class="text-[10px]">Name</p>
+            <Switch class="scale-75" v-model="preferEventName" />
+          </div>
+          <PriceSortToggle
+            class="min-w-20 max-w-28 flex-shrink-0 h-8"
+            :options="['All', 'Checkout']"
+            :darker="true"
+            :current="ui.taskFilter"
+            @change="(e) => ui.setTaskFilter(e)"
+          />
+        </div>
       </div>
 
       <div class="hidden md:flex items-center gap-2 lg:mb-2 mb-1">
@@ -80,6 +86,10 @@
             <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
           </div>
         </div>
+        <div class="bg-dark-400 border border-dark-650 justify-between px-3 w-32 flex text-white text-xs font-medium items-center rounded-md h-10">
+          <p>Name</p>
+          <Switch class="scale-75" v-model="preferEventName" />
+        </div>
         <PriceSortToggle
           class="min-w-24 max-w-28 flex-shrink-0"
           :options="['All', 'Checkout']"
@@ -118,7 +128,7 @@
         </div>
       </div>
 
-      <TaskView class="lg:mb-3 mb-2" :tasks="ui.tasks" :searchQuery="taskSearchQuery" />
+      <TaskView class="lg:mb-3 mb-2" :tasks="ui.tasks" :searchQuery="taskSearchQuery" :preferEventName="preferEventName" />
 
       <Utilities class="utilities-section" />
     </div>
@@ -230,7 +240,7 @@
 }
 </style>
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { DesktopControls } from "@/components/Tasks/Controls";
 import TaskView from "@/components/Tasks/TaskView.vue";
 import ViewTask from "@/components/Tasks/ViewTask.vue";
@@ -242,6 +252,7 @@ import ScrapeVenue from "@/components/Tasks/ScrapeVenue.vue";
 import MassEditPresaleCode from "@/components/Tasks/MassEdit.vue";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import Stats from "@/components/Tasks/Stats.vue";
+import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import { useUIStore } from "@/stores/ui";
 import { TrashIcon, GearIcon, PlusIcon, PlayIcon, PauseIcon } from "@/components/icons";
 import QuickSettings from "@/components/Tasks/QuickSettings.vue";
@@ -253,6 +264,13 @@ const taskCount = computed(() => Object.keys(ui.getSelectedTasks()).length);
 ui.refreshQueueStats();
 
 const taskSearchQuery = ref('');
+// Load preference from localStorage, default to true
+const preferEventName = ref(localStorage.getItem('preferEventName') !== 'false');
+
+// Persist preference to localStorage when changed
+watch(preferEventName, (newValue) => {
+  localStorage.setItem('preferEventName', String(newValue));
+});
 
 const filteredTaskCount = computed(() => {
   if (!taskSearchQuery.value.trim()) return '';