@necrolab/dashboard 0.4.49 → 0.4.50

package/.prettierrc

@@ -11,12 +11,23 @@
     "htmlWhitespaceSensitivity": "ignore",
     "bracketSameLine": true,
     "singleAttributePerLine": false,
+    "endOfLine": "lf",
     "overrides": [
         {
             "files": "*.vue",
             "options": {
                 "vueIndentScriptAndStyle": false,
-                "htmlWhitespaceSensitivity": "ignore"
+                "htmlWhitespaceSensitivity": "ignore",
+                "singleAttributePerLine": false,
+                "bracketSameLine": true,
+                "printWidth": 120,
+                "tabWidth": 4,
+                "useTabs": false,
+                "semi": true,
+                "singleQuote": false,
+                "trailingComma": "none",
+                "bracketSpacing": true,
+                "arrowParens": "always"
             }
         }
     ]

package/package.json

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

package/src/components/Auth/LoginForm.vue

@@ -2,20 +2,20 @@
     <div class="form-section">
         <!-- Username -->
         <div class="input-wrapper mb-4">
-                    <label class="label-override">
-            Username
-            <ProfileIcon />
-        </label>
+            <label class="label-override">
+                <span>Username</span>
+                <ProfileIcon class="ml-2" />
+            </label>
             <div class="input-default">
                 <input v-model="user" placeholder="Username" />
             </div>
         </div>
         <!-- Password -->
         <div class="input-wrapper">
-                    <label class="label-override">
-            Password
-            <KeyIcon />
-        </label>
+            <label class="label-override">
+                <span>Password</span>
+                <KeyIcon class="ml-2" />
+            </label>
             <div class="input-default">
                 <input v-model="password" type="password" placeholder="Password" />
             </div>
@@ -30,6 +30,7 @@
         </button>
     </div>
 </template>
+
 <script setup>
 import { useUIStore } from "@/stores/ui";
 import { ref } from "vue";
@@ -53,3 +54,45 @@ async function login() {
     buttonDisabled.value = false;
 }
 </script>
+
+<style lang="scss" scoped>
+.label-override {
+    @apply flex items-center text-sm mb-2;
+    color: #e1e1e4 !important;
+
+    svg {
+        width: 16px;
+        height: 16px;
+        path {
+            fill: #e1e1e4 !important;
+        }
+    }
+}
+
+.input-default {
+    @apply bg-dark-400 border border-dark-650 rounded-lg px-4 py-2 flex items-center;
+    min-height: 40px;
+
+    input {
+        @apply bg-transparent border-none outline-none w-full text-white;
+        &::placeholder {
+            color: #a0a0a6;
+        }
+    }
+}
+
+@media (max-height: 500px) and (orientation: landscape) {
+    .label-override {
+        @apply text-xs mb-1;
+        
+        svg {
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    .input-default {
+        min-height: 36px;
+    }
+}
+</style>

package/src/components/Tasks/Stats.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex text-white font-bold lg:gap-5 gap-1 lg:mb-1 min-h-[2.5rem]" v-if="show" :key="key">
+    <div class="flex text-white font-bold lg:gap-5 gap-1 lg:mb-1 min-h-[2.5rem]" v-if="ui.queueStats.show" :key="key">
         <div
             v-if="ui.queueStats.total"
             class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8">
@@ -68,7 +68,6 @@ const getQueuePassAmount = (width) => {
     return 1;
 };
 
-let show = ref(true);
 let key = ref(0);
 let queuePassAmount = ref(getQueuePassAmount(window.innerWidth));
 

package/src/components/Tasks/Task.vue

@@ -330,83 +330,93 @@ h4 {
 @media (max-width: 480px) and (orientation: portrait) {
   /* Position adjustment for mobile taskId */
   .block.md\\:hidden {
-    left: 4rem !important; /* Move further right to avoid checkbox collision */
+    left: 4rem !important;
     top: 0.25rem !important;
     z-index: 1 !important;
   }
 
-  /* Ultra-compact button layout for mobile portrait */
+  /* Improved button layout for mobile portrait */
   .task-buttons {
     padding: 1px;
-    gap: 0;
+    gap: 1px;
     border-radius: 4px;
-    border: none !important;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+    border: 1px solid #3d3e44 !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
     max-width: 100%;
-    overflow: visible;
+    min-height: 28px;
+    height: auto;
     flex-wrap: wrap;
     justify-content: center;
-    min-height: 18px;
-    height: auto;
+    align-items: center;
+    background: #2e2f34;
 
     button {
-      width: 15px;
-      height: 15px;
-      border-radius: 2px;
-      min-width: 15px;
+      width: 20px;
+      height: 20px;
+      border-radius: 3px;
+      min-width: 20px;
       border: none !important;
       flex-shrink: 0;
       margin: 0.5px;
+      background: transparent;
 
       &:hover {
-        transform: scale(1.1);
+        background: rgba(255, 255, 255, 0.1);
+        transform: scale(1.05);
+      }
+
+      &:active {
+        background: rgba(255, 255, 255, 0.15);
+        transform: scale(0.95);
       }
     }
 
     svg,
     img {
-      width: 7px;
-      height: 7px;
+      width: 10px;
+      height: 10px;
     }
 
     span {
-      font-size: 0.5rem;
+      font-size: 0.7rem;
       line-height: 1;
     }
 
-    /* Allow buttons to wrap to second row if needed */
+    /* Improved list item layout */
     li {
       display: flex;
       margin: 0;
+      padding: 0;
     }
   }
 
-  /* Make the actions column slightly more flexible */
+  /* Make the actions column more flexible */
   .col-span-2.lg\\:col-span-3 {
     min-width: 0;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 0 2px;
   }
 
   /* Compact status container */
   .status-container {
     border: none !important;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
-    padding: 3px 6px;
-    font-size: 0.75rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+    padding: 2px 4px;
+    font-size: 0.7rem;
     max-width: 100%;
   }
 
   .status-text {
-    font-size: 0.7rem;
+    font-size: 0.65rem;
     letter-spacing: 0;
   }
 
   /* Reduce row height to accommodate smaller elements */
   .task-row-container {
-    min-height: 50px !important;
+    min-height: 45px !important;
   }
 }
 

package/src/components/Tasks/TaskView.vue

@@ -1,138 +1,188 @@
 <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="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" />
-                </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="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="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.total === 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">
-                        {{ ui.queueStats.total }} hidden task{{ ui.queueStats.total === 1 ? "" : "s" }}
-                    </p>
-                    <p class="text-light-500 text-xs mt-1">Adjust filters to see tasks</p>
-                </div>
-            </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"
+          />
         </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 || task.noCartholds;
+  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
@@ -140,42 +190,54 @@ 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

@@ -1,3 +1,5 @@
+const queueStats = false;
+
 export default {
     Profile: {
         name: "Admin",
@@ -17,7 +19,7 @@ export default {
             email: "grantelam@hotmail.com",
             password: "Dkstrhf4srth56Gksj",
             status: "Event already happened long long long long long long longlong long long long",
-            inQueue: true,
+            inQueue: queueStats,
             statusColor: "red",
             manual: false,
             incapsulaBypass: false,
@@ -324,7 +326,7 @@ export default {
             active: true,
             email: "taylortaxjbr26248@gmail.com",
             password: "OwZz9PfKtWsrS7",
-            status: "Waiting for Queue",
+            status: queueStats ? "Waiting for Queue" : "Waiting for Stock",
             statusColor: "white",
             manual: false,
             incapsulaBypass: false,

package/src/stores/ui.js

@@ -233,10 +233,7 @@ export const useUIStore = defineStore("ui", () => {
         let relevantTasks = Object.values(tasks.value).filter((t) => t.siteId === currentCountry.value.siteId);
         if (currentEvent.value) relevantTasks = relevantTasks.filter((t) => t.eventId === currentEvent.value);
 
-        queueStats.value.total = 0;
         queueStats.value.queued = relevantTasks.filter((t) => t.inQueue).length || 0;
-        // if (DEBUG) queueStats.value.queued += 50000;
-        queueStats.value.show = queueStats.value.total > 0;
         const sleepingStatuses = ["sleeping in queue", "waiting for drop", "waiting for carting", "waiting for queue"];
         queueStats.value.sleeping = relevantTasks.filter((t) =>
             sleepingStatuses.includes(t.status.toLowerCase())
@@ -246,6 +243,10 @@ export const useUIStore = defineStore("ui", () => {
             .filter((e) => !isNaN(e))
             .filter(Boolean);
         queueStats.value.nextQueuePasses = positions.sort((a, b) => a - b);
+
+        // Only show stats if there are any queued tasks, sleeping tasks, or queue positions
+        queueStats.value.show =
+            queueStats.value.queued > 0 || queueStats.value.sleeping > 0 || queueStats.value.nextQueuePasses.length > 0;
     };
 
     const toggleModal = (name, clearValue = false) => {