@necrolab/dashboard 0.4.48 → 0.4.50

package/src/components/Tasks/TaskView.vue

@@ -1,140 +1,188 @@
 <template>
-    <Table>
-        <Header class="text-center grid-cols-10 gap-2 ipadlg:grid-cols-12">
-            <div class="col-span-1 lg:col-span-2 flex items-center justify-start">
-                <Checkbox
-                    class="ml-2 mr-4"
-                    :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="ipadlg:mr-3" />
-                    <h4 class="hidden ipadlg: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 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Tickets</h4>
-            </div>
-            <div
-                class="col-span-5 md:col-span-4 lg:col-span-5 ipadlg:col-span-6 flex-center"
-                @click="ui.toggleSort('status')">
-                <StatusIcon class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg: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 ipadlg:col-span-3 flex-center" v-once>
-                <ClickIcon class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Actions</h4>
-            </div>
-            <div class="absolute right-5 hidden md:flex items-center top-3,5" @click="ui.toggleSort('taskId')">
-                <h4 class="">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" :style="{ backgroundColor: i % 2 == 1 ? '#1a1b1e' : '#242529' }" />
-            </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>
-    </Table>
+      </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;
+  }
 }
 
 .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
@@ -142,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/components/icons/Sandclock.vue

@@ -13,14 +13,14 @@
             <g>
                 <g>
                     <path
-                        style="fill: #6e7084"
+                        fill="white"
                         d="M16.192,5.224V4.487h-8.77v0.737c0,0,1.334,3.713,3.838,5.428v1.785c0,0-2.761,2.686-3.838,5.775
 				v0.842h8.77v-0.842c-1.399-3.41-3.837-5.775-3.837-5.775v-1.785C15.759,7.726,16.192,5.224,16.192,5.224z"
                     />
                 </g>
                 <g>
                     <path
-                        style="fill: #6e7084"
+                        fill="white"
                         d="M19.353,3.856V2.529h1.258V0H3.002v2.529h1.259v1.327c0,2.025,3.634,7.555,3.804,7.955
 				c-0.167,0.397-3.804,5.929-3.804,7.946v1.325H3.002v2.53h17.609v-2.53h-1.258v-1.325c0-2.025-3.635-7.521-3.829-7.951
 				C15.718,11.376,19.353,5.88,19.353,3.856z M18.096,19.757v1.325H5.519v-1.325c0-1.455,3.854-7.222,3.854-7.951

package/src/components/icons/Stadium.vue

@@ -6,7 +6,7 @@
         <g mask="url(#mask0_16_241)">
             <path
                 d="M2.37499 5.54165V2.37498L5.54166 3.95831L2.37499 5.54165ZM14.25 5.54165V2.37498L17.4167 3.95831L14.25 5.54165ZM8.70833 4.74998V1.58331L11.875 3.16665L8.70833 4.74998ZM8.70833 17.4166C7.70555 17.3903 6.77218 17.3079 5.9082 17.1696C5.0437 17.0308 4.29162 16.8559 3.65195 16.6448C3.01176 16.4337 2.50694 16.1896 2.13749 15.9125C1.76805 15.6354 1.58333 15.3451 1.58333 15.0416V7.91665C1.58333 7.58678 1.79127 7.27988 2.20716 6.99594C2.62252 6.71252 3.18645 6.46183 3.89895 6.24385C4.61145 6.02641 5.4493 5.85488 6.4125 5.72927C7.37569 5.60419 8.40486 5.54165 9.49999 5.54165C10.5951 5.54165 11.6243 5.60419 12.5875 5.72927C13.5507 5.85488 14.3885 6.02641 15.101 6.24385C15.8135 6.46183 16.3775 6.71252 16.7928 6.99594C17.2087 7.27988 17.4167 7.58678 17.4167 7.91665V15.0416C17.4167 15.3451 17.2319 15.6354 16.8625 15.9125C16.493 16.1896 15.9885 16.4337 15.3488 16.6448C14.7086 16.8559 13.9565 17.0308 13.0926 17.1696C12.2281 17.3079 11.2944 17.3903 10.2917 17.4166V14.25H8.70833V17.4166ZM9.49999 8.70831C10.7799 8.70831 11.885 8.63231 12.8155 8.48031C13.7454 8.32884 14.4875 8.15415 15.0417 7.95623C15.0417 7.89026 14.5403 7.73509 13.5375 7.49073C12.5347 7.2469 11.1889 7.12498 9.49999 7.12498C7.81111 7.12498 6.46527 7.2469 5.46249 7.49073C4.45972 7.73509 3.95833 7.89026 3.95833 7.95623C4.51249 8.15415 5.25481 8.32884 6.18529 8.48031C7.11523 8.63231 8.22013 8.70831 9.49999 8.70831ZM7.12499 15.7146V12.6666H11.875V15.7146C12.9305 15.609 13.7948 15.4538 14.4677 15.2491C15.1406 15.0448 15.5958 14.8635 15.8333 14.7052V9.34165C15.1076 9.63192 14.1972 9.86283 13.1021 10.0344C12.0069 10.2059 10.8062 10.2916 9.49999 10.2916C8.19374 10.2916 6.99305 10.2059 5.89791 10.0344C4.80277 9.86283 3.89236 9.63192 3.16666 9.34165V14.7052C3.40416 14.8635 3.85937 15.0448 4.53229 15.2491C5.2052 15.4538 6.06944 15.609 7.12499 15.7146Z"
-                fill="currentColor"
+                fill="white"
             />
         </g>
     </svg>

package/src/components/ui/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="modal-mask pt-14 ipadlg:py-1 overflow-y-scroll scrollable" @touchmove.prevent>
+    <div class="modal-mask pt-14 md:py-1 overflow-y-scroll scrollable" @touchmove.prevent>
         <div class="component-modal" ref="target" @touchmove.stop>
             <div class="modal-header">
                 <slot name="header" />
@@ -57,17 +57,19 @@ onClickOutside(target, (event) => {
 <style lang="scss" scoped>
 .modal-mask {
     @apply fixed top-0 left-0 w-screen h-screen flex duration-300 ease-in-out;
-    z-index: 9998;
+    z-index: 25000;
     background-color: rgba(17, 17, 17, 0.85);
     backdrop-filter: blur(4px);
-    align-items: center; // Keep centered on desktop
+    align-items: center;
     justify-content: center;
-    padding: 2rem;
+    padding: 1rem;
 }
 
 .component-modal {
     width: 640px;
-    // Remove max-height on desktop to show full modal
+    max-height: calc(100vh - 8rem); // Ensure bottom margin on desktop
+    margin-bottom: 3rem;
+    overflow-y: auto; // Make scrollable when content is too tall
     @apply bg-dark-300 px-5 py-5 rounded-lg flex flex-col;
 
     .modal-header {
@@ -80,6 +82,8 @@ onClickOutside(target, (event) => {
 
     .modal-body {
         @apply flex flex-col;
+        flex: 1;
+        min-height: 0;
     }
 }
 
@@ -88,54 +92,52 @@ onClickOutside(target, (event) => {
         align-items: flex-start; // Start from top on mobile
         justify-content: center;
         padding: 1rem;
-        padding-top: 2rem;
+        padding-top: 3rem;
+        padding-bottom: 2rem; // Ensure bottom space
     }
 
     .component-modal {
         width: calc(100vw - 2rem);
-        max-height: calc(100vh - 8rem); // Only limit height on mobile
-        overflow-y: auto; // Only add scrolling on mobile
+        margin-bottom: 6rem; // Increased bottom margin for better button access
     }
 
     .modal-body {
-        padding-bottom: 3rem; // Increased padding for create button accessibility
+        padding-bottom: 4rem; // Increased padding for create button accessibility
         overflow-y: auto; // Allow scrolling on mobile
         flex: 1;
         min-height: 0;
     }
 }
 
-// iPhone landscape mode specific adjustments
-@media only screen and (max-device-width: 430px) and (orientation: landscape) {
+/* iPhone portrait mode - extra spacing for create button */
+@media (max-width: 480px) and (orientation: portrait) {
     .modal-mask {
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100vw;
-        height: 100vh;
-        padding: 0;
-        padding-top: calc(env(safe-area-inset-top, 0px) + 4rem); // Navbar + safe area
-        padding-bottom: env(safe-area-inset-bottom, 0.5rem);
-        padding-left: env(safe-area-inset-left, 0.5rem);
-        padding-right: env(safe-area-inset-right, 0.5rem);
-        align-items: flex-start;
-        justify-content: center;
+        padding-bottom: 3rem !important; // Extra bottom padding for iPhone
     }
-    
+
     .component-modal {
-        width: 100%;
-        max-width: none;
-        max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 5rem);
-        min-height: auto;
-        margin: 0;
+        margin-bottom: 8rem !important; // Even more bottom margin for iPhone portrait
+        max-height: calc(100vh - 12rem) !important; // Ensure modal doesn't get too tall
     }
-    
+
     .modal-body {
-        padding-bottom: 4rem; // Ensure create button is accessible
-        max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8rem);
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
+        padding-bottom: 5rem !important; // Extra padding for create button on iPhone
+    }
+}
+
+// iPhone landscape mode - proper modal centering with consistent spacing
+@media (max-height: 500px) and (orientation: landscape) {
+    .modal-mask {
+        padding: 1rem 1rem 4rem 1rem !important;
+        align-items: center !important;
+        justify-content: center !important;
+    }
+
+    .component-modal {
+        max-height: calc(100vh - 10rem) !important;
+        overflow-y: auto !important;
+        margin: 0 !important;
+        margin-bottom: 30px;
     }
 }
 </style>