@necrolab/dashboard 0.4.52 → 0.4.54

package/.prettierrc

@@ -30,5 +30,7 @@
                 "arrowParens": "always"
             }
         }
-    ]
+    ],
+    "plugins": ["prettier-plugin-tailwindcss"],
+    "tailwindConfig": "./tailwind.config.js"
 }

package/.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-    "recommendations": ["Vue.volar"]
+    "recommendations": ["Vue.volar", "esbenp.prettier-vscode"]
 }

package/backend/mock-src/ticketmaster.js

@@ -24,7 +24,7 @@ export default class TicketMaster {
         this.data.eventDate = Date.now();
         this.data.eventLocalDate = Date.now();
         this.data.eventName = "Test Event";
-        this.data.reservedTicketsList = "ticket1 | ticket2 | ticket3\n$100";
+        this.data.reservedTicketsList = "• 2x 301/E ($86.47) \n• 2x 306/U ($86.47) \n$345.88";
 
         refreshTaskOnFrontEnd(taskData);
     }
@@ -89,4 +89,4 @@ export default class TicketMaster {
     scrapeSeats() {
         this.logger.Info("Scraping seats");
     }
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.4.52",
+    "version": "0.4.54",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && npx workbox-cli generateSW workbox-config.cjs && vite build",
@@ -15,7 +15,7 @@
     "dependencies": {
         "@faker-js/faker": "^7.6.0",
         "@msgpack/msgpack": "^3.0.0-beta2",
-        "@necrolab/tm-renderer": "^0.1.9",
+        "@necrolab/tm-renderer": "^0.1.10",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vueuse/core": "^11.3.0",
         "autoprefixer": "^10.4.21",
@@ -28,6 +28,8 @@
         "ipaddr.js": "^2.2.0",
         "pinia": "^2.3.0",
         "postcss": "^8.4.49",
+        "prettier": "^3.5.3",
+        "prettier-plugin-tailwindcss": "^0.6.12",
         "register-service-worker": "^1.7.2",
         "sass": "^1.83.0",
         "tailwindcss": "^3.4.17",

package/src/components/Tasks/Task.vue

@@ -1,8 +1,8 @@
 <template>
-    <Row class="relative text-white grid-cols-10 gap-2 lg:grid-cols-12" @click="ui.setOpenContextMenu('')">
-        <div class="block md:hidden absolute left-1 top-1">
+    <Row class="relative grid-cols-10 gap-2 text-white lg:grid-cols-12" @click="ui.setOpenContextMenu('')">
+        <div class="absolute left-1 top-1 block md:hidden">
             <h4
-                class="text-xs text-white font-bold"
+                class="text-xs font-bold text-white"
                 style="
                     background: transparent !important;
                     border: none !important;
@@ -16,13 +16,13 @@
                 {{ props.task.taskId }}
             </h4>
         </div>
-        <div class="col-span-1 lg:col-span-2 flex items-center justify-start">
+        <div class="col-span-1 flex items-center justify-start lg:col-span-2">
             <Checkbox
                 class="ml-2 mr-4 flex-shrink-0"
                 :toggled="props.task.selected"
                 @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
             <h4
-                class="task-event-id mx-auto hidden lg:block text-white cursor-pointer hover:text-light-300"
+                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 }}
             </h4>
@@ -31,7 +31,7 @@
             <h4 class="text-white">
                 <span v-if="!props.task.reservedTicketsList">-</span>
                 <div v-else>
-                    <div v-for="l in props.task.reservedTicketsList.split(' | ')" :key="l">
+                    <div v-for="l in props.task.reservedTicketsList.split('\n')" :key="l">
                         <span v-if="!!l.trim()">{{ l.trim() }}</span>
                     </div>
                 </div>
@@ -45,7 +45,7 @@
                 </span>
             </h4>
         </div>
-        <div class="col-span-5 md:col-span-4 lg:col-span-5 text-center justify-center">
+        <div class="col-span-5 justify-center text-center md:col-span-4 lg:col-span-5">
             <div class="status-container">
                 <div
                     class="status-indicator"
@@ -59,7 +59,7 @@
                 <span class="status-text">{{ props.task.status }}</span>
             </div>
         </div>
-        <div class="col-span-2 lg:col-span-3 flex">
+        <div class="col-span-2 flex lg:col-span-3">
             <ul class="task-buttons">
                 <li>
                     <button v-if="task.active" @click="ui.stopTask(task.taskId)">
@@ -91,14 +91,14 @@
                 </li>
             </ul>
         </div>
-        <div class="hidden md:block col-span-1 absolute right-5 top-4 lg:flex items-center justify-center">
-            <h4 class="text-center text-xs task-id text-white">
+        <div class="absolute right-5 top-4 col-span-1 hidden items-center justify-center md:block lg:flex">
+            <h4 class="task-id text-center text-xs text-white">
                 {{ props.task.taskId }}
             </h4>
         </div>
         <transition name="fade">
             <div
-                class="col-span-10 lg:col-span-12 flex flex-wrap gap-x-4 gap-y-4 lg:gap-x-10 pt-8 pb-2 xl:justify-around will-change-auto"
+                class="col-span-10 flex flex-wrap gap-x-4 gap-y-4 pb-2 pt-8 will-change-auto lg:col-span-12 lg:gap-x-10 xl:justify-around"
                 v-if="props.task.isExpanded">
                 <!-- Details -->
                 <TaskLabel
@@ -149,7 +149,7 @@
             <div
                 v-if="ui.openContextMenu === task.taskId"
                 ref="contextMenuRef"
-                class="fixed bg-dark-500 text-white w-42 grid grid-cols-1 p-1 gap-1 rounded-lg shadow-xl border border-dark-650 context-menu z-max"
+                class="w-42 context-menu z-max fixed grid grid-cols-1 gap-1 rounded-lg border border-dark-650 bg-dark-500 p-1 text-white shadow-xl"
                 :style="contextMenuPosition">
                 <button class="btn-primary" @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)">
                     Open Event
@@ -171,30 +171,30 @@ h4 {
 }
 
 .status-container {
-    @apply flex items-center justify-center mx-auto w-fit bg-dark-500 border border-dark-650 rounded-lg;
+    @apply mx-auto flex w-fit items-center justify-center rounded-lg border border-dark-650 bg-dark-500;
     padding: 6px 12px;
     gap: 6px;
     transition: all 0.15s ease;
     max-width: 100%;
 
     &:hover {
-        @apply bg-dark-550 border-dark-700;
+        @apply border-dark-700 bg-dark-550;
     }
 }
 
 .status-text {
-    @apply font-medium text-sm truncate uppercase;
+    @apply truncate text-sm font-medium uppercase;
     color: #e2e2e5;
     letter-spacing: 0.025em;
 }
 
 .task-buttons {
-    @apply flex items-center justify-center mx-auto bg-dark-500 border border-dark-650 rounded;
+    @apply mx-auto flex items-center justify-center rounded border border-dark-650 bg-dark-500;
     padding: 2px;
     gap: 1px;
 
     button {
-        @apply flex items-center justify-center transition-all duration-150 border-0 outline-0 relative rounded;
+        @apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
         background: transparent;
         width: 22px;
         height: 22px;
@@ -226,7 +226,7 @@ h4 {
     }
 
     span {
-        @apply text-xs font-medium relative z-[1];
+        @apply relative z-[1] text-xs font-medium;
     }
 }
 

package/src/components/Tasks/TaskView.vue

@@ -1,188 +1,143 @@
 <template>
-  <div class="table-component">
-    <Header class="text-center grid-cols-10 gap-2 lg:grid-cols-12">
-      <div class="col-span-1 lg:col-span-2 flex items-center justify-start">
-        <Checkbox
-          class="ml-2 mr-4 flex-shrink-0"
-          :toggled="ui.mainCheckbox.tasks"
-          @valueUpdate="ui.toggleMainCheckbox('tasks')"
-          :isHeader="true"
-        />
+    <div class="table-component">
+        <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
+                    class="ml-2 mr-4 flex-shrink-0"
+                    :toggled="ui.mainCheckbox.tasks"
+                    @valueUpdate="ui.toggleMainCheckbox('tasks')"
+                    :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">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="flex-center col-span-2" v-once>
+                <TicketIcon class="mr-0 lg:mr-3" />
+                <h4 class="hidden lg:flex">Tickets</h4>
+            </div>
+            <div class="flex-center col-span-5 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="flex-center col-span-2 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')">
+                <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="mx-auto hidden lg:flex items-center"
-          @click="ui.toggleSort('eventId')"
-        >
-          <EventIcon class="lg:mr-3" />
-          <h4 class="hidden 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"
-          />
+            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'" />
+            </div>
+            <div
+                v-if="getTasksInOrder().length === 0"
+                class="empty-state flex flex-col items-center justify-center py-8 text-center">
+                <div
+                    v-if="
+                        !ui.queueStats.queued && !ui.queueStats.sleeping && ui.queueStats.nextQueuePasses.length === 0
+                    ">
+                    <TasksIcon class="mx-auto mb-3 h-12 w-12 text-dark-400 opacity-50" />
+                    <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 mb-3 h-12 w-12 text-dark-400 opacity-50" />
+                    <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>
-      </div>
-      <div class="col-span-2 flex-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-center"
-        @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-center" v-once>
-        <ClickIcon class="mr-0 lg:mr-3" />
-        <h4 class="hidden lg:flex">Actions</h4>
-      </div>
-      <div
-        class="absolute right-5 hidden lg:flex items-center top-3.5"
-        @click="ui.toggleSort('taskId')"
-      >
-        <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="flex flex-col divide-y divide-dark-650 overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
-      :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'" />
-      </div>
-      <div
-        v-if="getTasksInOrder().length === 0"
-        class="flex flex-col items-center justify-center py-8 empty-state text-center"
-      >
-        <div
-          v-if="
-            !ui.queueStats.queued &&
-            !ui.queueStats.sleeping &&
-            ui.queueStats.nextQueuePasses.length === 0
-          "
-        >
-          <TasksIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50 mx-auto" />
-          <p class="text-light-400 text-sm">No tasks yet</p>
-          <p class="text-light-500 text-xs mt-1">Create tasks to get started</p>
-        </div>
-        <div v-else>
-          <TasksIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50 mx-auto" />
-          <p class="text-light-400 text-sm">No tasks match current filters</p>
-          <p class="text-light-500 text-xs mt-1">Adjust filters to see tasks</p>
-        </div>
-      </div>
     </div>
-  </div>
 </template>
 <style lang="scss" scoped>
 h4 {
-  @apply text-white;
+    @apply text-white;
 }
 
 .stop-pan {
-  touch-action: pan-y pan-up pan-down;
+    touch-action: pan-y pan-up pan-down;
 }
 
 .task-row-container {
-  min-height: 69px;
-  flex-shrink: 0;
-  transition: background-color 0.15s ease;
+    min-height: 69px;
+    flex-shrink: 0;
+    transition: background-color 0.15s ease;
 
-  &:hover {
-    @apply bg-dark-550 !important;
-  }
+    &:hover {
+        @apply bg-dark-550 !important;
+    }
 
-  @media (max-width: 768px) {
-    min-height: 58px;
-  }
+    @media (max-width: 768px) {
+        min-height: 58px;
+    }
 
-  @media (max-width: 480px) and (orientation: portrait) {
-    min-height: 50px;
-  }
+    @media (max-width: 480px) and (orientation: portrait) {
+        min-height: 50px;
+    }
 }
 
 .empty-state {
-  @apply bg-dark-400;
-  color: #969696;
-  font-size: 14px;
-  font-weight: 500;
+    @apply bg-dark-400;
+    color: #969696;
+    font-size: 14px;
+    font-weight: 500;
 }
 </style>
 <script setup>
 import { computed, ref, onMounted, onUnmounted } from "vue";
 import { Table, Header } from "@/components/Table";
-import {
-  EventIcon,
-  TicketIcon,
-  StatusIcon,
-  ClickIcon,
-  DownIcon,
-  UpIcon,
-  TasksIcon,
-} from "@/components/icons";
+import { EventIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon, TasksIcon } from "@/components/icons";
 import Task from "./Task.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 
 const props = defineProps({
-  tasks: { type: Object },
+    tasks: { type: Object }
 });
 
 const shouldTaskShow = (task) => {
-  if (ui.taskFilter === "All") return true;
-  else if (ui.taskFilter === "Checkout") return task.expirationTime || task.noCartholds;
-  else return true;
+    if (ui.taskFilter === "All") return true;
+    else if (ui.taskFilter === "Checkout") return task.expirationTime;
+    else return true;
 };
 
 const ui = useUIStore();
 
 const siteIdEdgeCases = {
-  LN_US: ["TM_US"],
-  TM_CA: ["TM_US"],
-  TM_IE: ["TM_UK"],
-  TM_NZ: ["TM_AU"],
+    LN_US: ["TM_US"],
+    TM_CA: ["TM_US"],
+    TM_IE: ["TM_UK"],
+    TM_NZ: ["TM_AU"]
 };
 
 const getTasksInOrder = () => {
-  let out = [];
-  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;
-      out.push(task);
-    }
-  });
-  return out;
+    let out = [];
+    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;
+            out.push(task);
+        }
+    });
+    return out;
 };
 
 // Dynamic height calculation to prevent page scrolling
@@ -190,54 +145,42 @@ const windowHeight = ref(window.innerHeight);
 const windowWidth = ref(window.innerWidth);
 
 const updateDimensions = () => {
-  windowHeight.value = window.innerHeight;
-  windowWidth.value = window.innerWidth;
+    windowHeight.value = window.innerHeight;
+    windowWidth.value = window.innerWidth;
 };
 
 onMounted(() => {
-  window.addEventListener("resize", updateDimensions);
+    window.addEventListener("resize", updateDimensions);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("resize", updateDimensions);
+    window.removeEventListener("resize", updateDimensions);
 });
 
 const dynamicTableHeight = computed(() => {
-  // Calculate available space for table
-  const headerHeight = 60; // Header + navbar
-  const titleHeight = 50; // Tasks title and mobile controls
-  const statsHeight = 50; // Queue stats
-  const controlsHeight = windowWidth.value >= 650 ? 60 : 0; // Desktop controls
-  const filtersHeight = 50; // Event dropdown and filter toggle
-  const utilitiesHeight =
-    windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 150 : 200; // Reduce utilities height in mobile portrait
-  const margins =
-    windowWidth.value >= 1024
-      ? 40
-      : windowWidth.value <= 480 && windowHeight.value > windowWidth.value
-      ? 15
-      : 20; // Reduce margins in mobile portrait
-
-  const totalUsedSpace =
-    headerHeight +
-    titleHeight +
-    statsHeight +
-    controlsHeight +
-    filtersHeight +
-    utilitiesHeight +
-    margins;
-  const availableHeight = windowHeight.value - totalUsedSpace;
-
-  // Calculate row height based on screen size
-  const rowHeight = windowWidth.value <= 768 ? 58 : 69; // Mobile vs desktop row height
-  const minRowsToShow = 2; // Always show at least 2 rows
-  const minHeight = minRowsToShow * rowHeight;
-
-  // Calculate how many complete rows can fit
-  const maxCompleteRows =
-    Math.floor(Math.max(availableHeight, minHeight) / rowHeight) + 1;
-  const exactHeight = maxCompleteRows * rowHeight;
-
-  return exactHeight + "px";
+    // Calculate available space for table
+    const headerHeight = 60; // Header + navbar
+    const titleHeight = 50; // Tasks title and mobile controls
+    const statsHeight = 50; // Queue stats
+    const controlsHeight = windowWidth.value >= 650 ? 60 : 0; // Desktop controls
+    const filtersHeight = 50; // Event dropdown and filter toggle
+    const utilitiesHeight = windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 150 : 200; // Reduce utilities height in mobile portrait
+    const margins =
+        windowWidth.value >= 1024 ? 40 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 15 : 20; // Reduce margins in mobile portrait
+
+    const totalUsedSpace =
+        headerHeight + titleHeight + statsHeight + controlsHeight + filtersHeight + utilitiesHeight + margins;
+    const availableHeight = windowHeight.value - totalUsedSpace;
+
+    // Calculate row height based on screen size
+    const rowHeight = windowWidth.value <= 768 ? 58 : 69; // Mobile vs desktop row height
+    const minRowsToShow = 2; // Always show at least 2 rows
+    const minHeight = minRowsToShow * rowHeight;
+
+    // Calculate how many complete rows can fit
+    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight) + 1;
+    const exactHeight = maxCompleteRows * rowHeight;
+
+    return exactHeight + "px";
 });
 </script>

package/src/stores/sampleData.js

@@ -28,7 +28,7 @@ export default {
             quantity: 8,
             proxy: "http://events1597:yEXBe4Hs@23.26.22.61:61234",
             eventId: "01005D5C92031D57",
-            reservedTicketsList: "-",
+            reservedTicketsList: "• 2x 301/E ($86.47) \n• 2x 306/U ($86.47) \n$345.88",
             expirationTime: null,
             doNotPay: false,
             agedAccount: true,
@@ -63,7 +63,7 @@ export default {
             quantity: 8,
             proxy: "http://events1338:xN4PBVze@23.26.21.58:61234",
             eventId: "01005D85964A1747",
-            reservedTicketsList: "-",
+            reservedTicketsList: "• 2x 301/E ($86.47) \n• 2x 306/U ($86.47) \n$345.88",
             expirationTime: null,
             doNotPay: false,
             agedAccount: false,

package/src/stores/ui.js

@@ -103,8 +103,10 @@ export const useUIStore = defineStore("ui", () => {
         const t1 = new Date();
         for (const [key, value] of Object.entries(tasks.value)) {
             if (value.expirationTime)
-                tasks.value[key]._timeLeftString = timeDifference(Date.parse(value.expirationTime), t1.getTime());
-            else if (value.noCartholds) tasks.value[key]._timeLeftString = "No Cartholds";
+                tasks.value[key]._timeLeftString =
+                    value.expirationTime == "Invalid Date"
+                        ? "No Cartholds"
+                        : timeDifference(Date.parse(value.expirationTime), t1.getTime());
             else tasks.value[key]._timeLeftString = undefined;
         }