@necrolab/dashboard 0.5.15 → 0.5.17

package/src/components/Filter/PriceSortToggle.vue

@@ -2,12 +2,12 @@
     <button
         @click="increase"
         :class="[
-            'sort-toggle',
-            { 'darker': props.darker }
+            'flex-gap-2 items-center px-3 py-2 rounded text-sm font-medium focus:outline-none text-light-300 border-2 border-dark-550 h-10',
+            props.darker ? 'bg-dark-400 min-w-25' : 'bg-dark-350 min-w-20'
         ]"
     >
-        <component :is="getCurrentIcon()" class="icon" />
-        <span class="text">{{ getCurrentText() }}</span>
+        <component :is="getCurrentIcon()" class="w-4 h-4 flex-shrink-0" />
+        <span class="text-center flex-1">{{ getCurrentText() }}</span>
     </button>
 </template>
 
@@ -19,13 +19,34 @@ let sortOptions = ref(["none", "asc", "desc", "none"]);
 const currentOpt = ref(0);
 
 const props = defineProps({
-    filter: Object,
-    index: Number,
-    expandedFilter: Number,
-    filterBuilder: Object,
-    options: Object,
-    current: String,
-    darker: Boolean
+    filter: {
+        type: Object,
+        default: () => ({})
+    },
+    index: {
+        type: Number,
+        default: 0
+    },
+    expandedFilter: {
+        type: Number,
+        default: null
+    },
+    filterBuilder: {
+        type: Object,
+        default: () => ({})
+    },
+    options: {
+        type: Array,
+        default: () => ['none', 'asc', 'desc', 'none']
+    },
+    current: {
+        type: String,
+        default: 'none'
+    },
+    darker: {
+        type: Boolean,
+        default: false
+    }
 });
 
 if (props.options) sortOptions.value = props.options;
@@ -40,7 +61,7 @@ const increase = () => {
 
 const getCurrentIcon = () => {
     const current = sortOptions.value[currentOpt.value];
-    
+
     // Handle filter options (All, WL, BL)
     if (props.options && props.options.includes('All')) {
         switch (current) {
@@ -50,7 +71,7 @@ const getCurrentIcon = () => {
             default: return FilterIcon;
         }
     }
-    
+
     // Handle sort options (none, asc, desc)
     switch (current) {
         case 'asc': return UpIcon;
@@ -62,12 +83,12 @@ const getCurrentIcon = () => {
 
 const getCurrentText = () => {
     const current = sortOptions.value[currentOpt.value];
-    
+
     // Handle filter options (All, WL, BL)
     if (props.options && props.options.includes('All')) {
         return current;
     }
-    
+
     // Handle sort options
     switch (current) {
         case 'asc': return 'Low';
@@ -77,31 +98,3 @@ const getCurrentText = () => {
     }
 };
 </script>
-
-<style scoped>
-.sort-toggle {
-    @apply flex items-center gap-2 px-3 py-2 rounded text-sm font-medium focus:outline-none;
-    background: oklch(0.2603 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-    color: oklch(0.90 0 0);
-    min-width: 80px;
-    height: 40px;
-}
-
-.sort-toggle.darker {
-    background: oklch(0.2046 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-    color: oklch(0.90 0 0);
-    min-width: 100px;
-    height: 40px;
-    padding: 0 0.75rem;
-}
-
-.icon {
-    @apply w-4 h-4 flex-shrink-0;
-}
-
-.text {
-    @apply text-center flex-1;
-}
-</style>

package/src/components/Table/Header.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="border-b border-dark-600 w-full px-2 md:px-4 text-white text-xs py-4 grid items-center bg-dark-300">
+    <div class="relative border-b border-dark-550 w-full px-2 md:px-4 text-white text-xs py-4 grid items-center bg-dark-300">
         <slot />
     </div>
 </template>

package/src/components/Table/Table.vue

@@ -1,79 +1,73 @@
 <template>
-    <div class="table-component">
+    <div class="table-component" style="border-color: var(--color-border);">
         <slot />
     </div>
 </template>
-<style lang="scss">
+
+<style scoped lang="scss">
 .table-component {
-    @apply relative box-border flex flex-col rounded-lg border border-dark-600 bg-dark-500 bg-clip-padding;
-    @apply overflow-x-auto overflow-y-auto;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    @apply relative box-border flex flex-col rounded-lg;
+    @apply bg-dark-500 bg-clip-padding overflow-auto shadow-sm;
+
+    max-height: calc(100vh - 200px);
     overscroll-behavior: auto;
-    max-height: calc(100vh - 300px);
     -webkit-overflow-scrolling: touch;
     touch-action: pan-x pan-y;
 
-    /* iPad Pro and larger tablets - more space for UTILS */
-    @media (min-width: 768px) and (max-width: 1440px) {
-        max-height: calc(100vh - 400px);
+    @media (min-width: 768px) {
+        max-height: calc(100vh - 280px);
+    }
+
+    @media (min-width: 1024px) {
+        max-height: calc(100vh - 240px);
     }
 
-    /* iPad portrait - even more space needed */
-    @media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
-        max-height: calc(100vh - 450px);
+    @media (min-width: 1280px) {
+        max-height: calc(100vh - 220px);
     }
 
-    /* PWA mode - account for status bar and home indicator */
     @media (display-mode: standalone) {
-        max-height: calc(100vh - 420px);
+        max-height: calc(100vh - 240px);
 
-        @media (min-width: 768px) and (max-width: 1440px) {
-            max-height: calc(100vh - 480px);
+        @media (min-width: 768px) {
+            max-height: calc(100vh - 320px);
         }
 
-        /* iPad portrait PWA - maximum space for UTILS */
-        @media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
-            max-height: calc(100vh - 500px);
+        @media (min-width: 1024px) {
+            max-height: calc(100vh - 280px);
         }
-    }
-}
 
-.table-component > .grid:not(:first-child) {
-    border-bottom: 1px solid oklch(0.26 0 0);
-    // Only enforce min-width on desktop, allow mobile to fit screen
-    @media (min-width: 768px) {
-        min-width: 640px;
+        @media (min-width: 1280px) {
+            max-height: calc(100vh - 260px);
+        }
     }
-}
 
-/* Remove border from last row */
-.table-component > .grid:last-child {
-    border-bottom: none;
-}
+    & > :not(:first-child) {
+        @apply border-b border-dark-500;
 
-/* Odd rows (lighter) */
-.table-component > .grid:nth-child(odd) {
-    @apply bg-dark-300;
-}
+        @media (min-width: 768px) {
+            min-width: 640px;
+        }
+    }
 
-/* Even rows (darker) */
-.table-component > .grid:nth-child(even) {
-    @apply bg-dark-400;
-}
+    & > :last-child {
+        @apply border-b-0 rounded-b-lg overflow-hidden;
+    }
 
-/* First grid child (header) keeps its own background */
-.table-component > .grid:first-child {
-    border-bottom: 1px solid oklch(0.26 0 0);
-    @apply rounded-t-lg;
-    overflow: hidden;
-    @media (min-width: 768px) {
-        min-width: 640px;
+    & > :nth-child(odd) {
+        @apply bg-dark-300;
     }
-}
 
-/* Last row rounded bottom corners */
-.table-component > .grid:last-child {
-    @apply rounded-b-lg;
-    overflow: hidden;
+    & > :nth-child(even) {
+        @apply bg-dark-400;
+    }
+
+    & > :first-child {
+        @apply border-b border-dark-500 rounded-t-lg overflow-hidden;
+
+        @media (min-width: 768px) {
+            min-width: 640px;
+        }
+    }
 }
 </style>

package/src/components/Tasks/CheckStock.vue

@@ -3,7 +3,7 @@
         <template #header> Check Stock <BoxIcon class="ml-4" /> </template>
         <!-- Event ID -->
         <div class="input-wrapper mt-7 mb-4">
-            <label class="label-override mb-2">Event ID or URL <StadiumIcon /></label>
+            <label class="label-override mb-2 flex">Event ID or URL <StadiumIcon /></label>
             <div class="input-default required">
                 <input
                     :placeholder="!isEU(ui.currentCountry.siteId) ? '102PDA9125510GYU' : '529171'"
@@ -13,46 +13,37 @@
         </div>
         <!-- Presale Code -->
         <div class="input-wrapper mb-4">
-            <label class="label-override mb-2">Presale code <AwardIcon /></label>
+            <label class="label-override mb-2 flex">Presale code <AwardIcon /></label>
             <div class="input-default">
                 <input placeholder="Presale code" v-model="presaleCode" />
             </div>
         </div>
         <!-- DID -->
         <div class="input-wrapper mb-4" v-if="!isEU(ui.currentCountry.siteId)">
-            <label class="label-override mb-2">DID <AwardIcon /></label>
+            <label class="label-override mb-2 flex">DID <AwardIcon /></label>
             <div class="input-default">
                 <input placeholder="psl" v-model="eventDid" />
             </div>
         </div>
         <!-- CL ORIGIN -->
         <div class="input-wrapper mb-8" v-if="isEU(ui.currentCountry.siteId)">
-            <label class="label-override mb-2">CL Origin / SubChannel ID <AwardIcon /></label>
+            <label class="label-override mb-2 flex">CL Origin / SubChannel ID <AwardIcon /></label>
             <div class="input-default">
                 <input placeholder="ORIGIN2" v-model="clOrigin" />
             </div>
         </div>
-        <button
-            class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
-            @click="done()">
+        <button class="btn-modal ml-auto mt-4 w-48" @click="done()">
             Check Stock
-            <BoxIcon />
+            <BoxIcon class="ml-2" />
         </button>
     </Modal>
 </template>
-<style lang="scss" scoped>
-.input-wrapper {
-    label {
-        @apply flex;
-    }
-}
-</style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
 import { StadiumIcon, BoxIcon, AwardIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import { ref } from "vue";
-import { isEU } from "@/stores/utils";
+import { isEU } from "@/libs/utils/eventUrl";
 
 const ui = useUIStore();
 const eventId = ref("");

package/src/components/Tasks/Controls/DesktopControls.vue

@@ -1,84 +1,39 @@
 <template>
-    <div class="task-controls flex-row">
-        <div class="control-buttons mb-4 xl:mb-0">
-            <button @click="$emit('startAll')" class="bg-green-400 smooth-hover responsive-button border-none">
-                Start <PlayIcon />
+    <div class="flex-row gap-x-3">
+        <div class="flex gap-x-3 items-center w-full mb-4 xl:mb-0">
+            <button @click="$emit('startAll')" class="btn-control-success" aria-label="Start all tasks">
+                Start <PlayIcon class="ml-2" />
             </button>
-            <button @click="$emit('stopAll')" class="bg-red-400 smooth-hover responsive-button border-none">
-                Stop <PauseIcon />
+            <button @click="$emit('stopAll')" class="btn-control-danger" aria-label="Stop all tasks">
+                Stop <PauseIcon class="ml-2" />
             </button>
-            <button @click="$emit('deleteAll')" class="bg-dark-400 smooth-hover responsive-button border border-dark-650 hover:border-dark-700">
-                Delete <TrashIcon />
+            <button @click="$emit('deleteAll')" class="btn-action-responsive bg-dark-400 border border-dark-650 hover:border-dark-700 smooth-hover min-w-20 max-w-30 flex-grow xl:flex-initial" aria-label="Delete all tasks">
+                Delete <TrashIcon class="ml-2" />
             </button>
             <h4 class="text-light-300 text-sm flex-grow xl:flex-initial"></h4>
         </div>
         <div class="flex gap-x-3">
             <button
                 :disabled="ui.disabledButtons['add-tasks']"
-                class="bg-dark-400 disabled:opacity-70 smooth-hover flex-grow xl:flex-initial w-36 border border-dark-650 hover:border-dark-700"
+                class="btn-modal disabled:opacity-70 flex-grow xl:flex-initial w-36"
                 @click="ui.toggleModal('create-task')"
-            >
-                Create Task
-                <PlusIcon class="ml-2" />
+                aria-label="Create new task">
+                Create Task <PlusIcon class="ml-2" />
             </button>
-
             <button
-                class="bg-dark-400 smooth-hover flex-grow xl:flex-initial w-36 border border-dark-650 hover:border-dark-700"
+                class="btn-modal flex-grow xl:flex-initial w-36"
                 @click="ui.toggleModal('mass-edit-presale-code')"
                 :disabled="ui.disabledButtons['mass-edit']"
                 v-if="ui.currentModule == 'TM'"
-            >
-                Mass Edit
-                <EditIcon class="ml-2" />
+                aria-label="Mass edit presale codes">
+                Mass Edit <EditIcon class="ml-2" />
             </button>
         </div>
     </div>
 </template>
 <script setup>
-import { ref } from "vue";
 import { useUIStore } from "@/stores/ui";
-import { PlayIcon, PauseIcon, TrashIcon, ExpandIcon, ShrinkIcon, PlusIcon, EditIcon } from "@/components/icons";
+import { PlayIcon, PauseIcon, TrashIcon, PlusIcon, EditIcon } from "@/components/icons";
 
 const ui = useUIStore();
-const isExpanded = ref(false);
 </script>
-<style lang="scss" scoped>
-button {
-    @apply text-white h-10 rounded-md text-xs flex items-center justify-center font-medium px-4;
-    transition: all 0.15s ease;
-
-    &.bg-dark-400:active, &.bg-dark-400:focus {
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
-        border-color: oklch(0.72 0.15 145) !important;
-    }
-}
-
-.responsive-button {
-    min-width: 80px;
-    max-width: 120px;
-    @apply flex-grow xl:flex-initial;
-
-    @media (max-width: 768px) {
-        @apply h-10 text-xs;
-    }
-}
-
-.task-controls {
-    @apply gap-x-3;
-    .control-buttons {
-        @apply flex gap-x-3 items-center w-full;
-        button {
-            svg {
-                @apply ml-2;
-            }
-        }
-    }
-    .expand-shrink {
-        @apply flex gap-x-2;
-        button {
-            @apply text-white text-xs px-4 flex items-center justify-center gap-x-4 duration-200 border border-light-300 hover:border-light-400;
-        }
-    }
-}
-</style>

package/src/components/Tasks/Controls/MobileControls.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="mobile-controls flex items-center justify-between" v-once>
-        <div class="expand-shrink">
-            <button class="mobile-btn" @click="$emit('expand')">
+    <div class="flex items-center justify-between" v-once>
+        <div class="flex gap-x-2">
+            <button class="btn-control-mobile" @click="$emit('expand')" aria-label="Expand all tasks">
                 Expand
                 <ExpandIcon />
             </button>
-            <button class="mobile-btn" @click="$emit('fold')">
+            <button class="btn-control-mobile" @click="$emit('fold')" aria-label="Collapse all tasks">
                 Fold
                 <ShrinkIcon />
             </button>
@@ -13,20 +13,5 @@
     </div>
 </template>
 <script setup>
-import { useUIStore } from "@/stores/ui";
-
-import { PlayIcon, PauseIcon, TrashIcon, ExpandIcon, ShrinkIcon, EditIcon } from "@/components/icons";
-const ui = useUIStore();
+import { ExpandIcon, ShrinkIcon } from "@/components/icons";
 </script>
-<style lang="scss" scoped>
-.mobile-controls {
-    .expand-shrink {
-        @apply flex gap-x-2;
-        .mobile-btn {
-            @apply text-white text-xs px-3 flex items-center justify-center gap-x-1 h-10 rounded-md bg-dark-400 border border-dark-650 hover:border-dark-700 transition-all duration-150 font-medium;
-            width: 80px;
-            font-size: 11px;
-        }
-    }
-}
-</style>

package/src/components/Tasks/CreateTaskAXS.vue

@@ -6,7 +6,7 @@
         </template>
 
         <!-- Task Form -->
-        <div class="form-grid mb-4 mt-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 mt-4">
             <!-- Event ID -->
             <FormField label="Event ID" :icon="StadiumIcon" required>
                 <input placeholder="827474" v-model="task.eventId" required />
@@ -38,30 +38,12 @@
             </FormField>
 
             <!-- Task Amount -->
-            <div class="input-wrapper">
-                <label class="label-override mb-2">
-                    Amount
-                    <span class="ml-2 h-[18px]">#</span>
-                </label>
-                <div class="input-default">
-                    <input placeholder="20" min="1" type="number" pattern="\d*" v-model="task.taskQuantity" />
-                    <div class="input-incrementer">
-                        <button @click="task.taskQuantity++">
-                            <UpIcon />
-                        </button>
-                        <button @click="if (task.taskQuantity > 1) task.taskQuantity--;">
-                            <DownIcon />
-                        </button>
-                    </div>
-                </div>
-            </div>
+            <FormField label="Amount" :icon="HashIcon" incrementer @increment="task.taskQuantity++" @decrement="task.taskQuantity > 1 && task.taskQuantity--">
+                <input placeholder="20" min="1" type="number" pattern="\d*" v-model="task.taskQuantity" />
+            </FormField>
 
             <!-- Profile Tag(s)  -->
-            <div class="input-wrapper">
-                <label class="label-override mb-2">
-                    Profile Tag(s)
-                    <TagIcon />
-                </label>
+            <FormField label="Profile Tag(s)" :icon="TagIcon" noWrapper>
                 <MultiDropdown
                     class="w-full will-change-auto"
                     :onSelect="(v) => (task.profileTags = v)"
@@ -71,14 +53,10 @@
                             return { label: opt, value: opt };
                         })
                     " />
-            </div>
+            </FormField>
 
             <!-- Account Tag  -->
-            <div class="input-wrapper">
-                <label class="label-override mb-2">
-                    Account Tag
-                    <ScannerIcon />
-                </label>
+            <FormField label="Account Tag" :icon="ScannerIcon" noWrapper>
                 <Dropdown
                     :onClick="(f) => (task.accountTag = f)"
                     default="Default tag"
@@ -87,7 +65,7 @@
                     :allowDefault="false"
                     :capitalize="true"
                     class="dropdown w-full" />
-            </div>
+            </FormField>
 
             <!-- Start Offset -->
             <FormField label="Start Offset (Minutes)" :icon="ShieldIcon" incrementer @increment="task.startOffset = (task.startOffset || 0) + 1" @decrement="task.startOffset > 0 && task.startOffset--">
@@ -101,47 +79,18 @@
         </div>
         <div class="mb-3 border border-dark-650" />
         <!-- Task Switches -->
-        <div class="task-switches mb-4 grid grid-cols-4 justify-between gap-y-4">
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    <span class="hidden xs:block">Do Not Pay</span>
-                    <span class="block xs:hidden">DNP</span>
-                    <SavingsIcon class="scale-90" />
-                </h4>
-                <Switch class="mx-auto" v-model="task.doNotPay" />
-            </div>
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    <span class="hidden xs:block">Smart Timer</span>
-                    <span class="block xs:hidden">Timer</span>
-                    <TimerIcon class="scale-90" />
-                </h4>
-                <Switch class="mx-auto" v-model="task.smartTimer" />
-            </div>
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    <span class="hidden xs:block">Quick Queue</span>
-                    <span class="block xs:hidden">Quick Q.</span>
-                    <SkiIcon class="scale-90" />
-                </h4>
-                <Switch class="mx-auto" v-model="task.quickQueue" />
-            </div>
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    Manual
-                    <HandIcon />
-                </h4>
-                <Switch class="mx-auto" v-model="task.manual" />
-            </div>
+        <div class="mb-4 grid grid-cols-4 justify-between gap-y-4">
+            <TaskToggle :icon="SavingsIcon" label="Do Not Pay" responsive-label="DNP" v-model="task.doNotPay" />
+            <TaskToggle :icon="TimerIcon" label="Smart Timer" responsive-label="Timer" v-model="task.smartTimer" />
+            <TaskToggle :icon="SkiIcon" label="Quick Queue" responsive-label="Quick Q." v-model="task.quickQueue" />
+            <TaskToggle :icon="HandIcon" label="Manual" v-model="task.manual" icon-class="" />
         </div>
 
         <!-- Task prefab -->
         <div class="my-3 border border-dark-650" />
-        <button
-            class="button-default ml-auto mt-4 bg-dark-400"
-            @click="createTask">
+        <button class="btn-modal ml-auto mt-4 w-36" @click="createTask">
             Create
-            <EditIcon />
+            <EditIcon class="ml-2" />
         </button>
     </Modal>
 </template>
@@ -151,7 +100,7 @@ import { ref, watch } from "vue";
 import { countries } from "@/stores/countries";
 import Modal from "@/components/ui/Modal.vue";
 import FormField from "@/components/ui/FormField.vue";
-import Switch from "@/components/ui/controls/atomic/Switch.vue";
+import TaskToggle from "@/components/ui/TaskToggle.vue";
 import {
     MailIcon,
     CameraIcon,
@@ -162,20 +111,17 @@ import {
     TagIcon,
     SkiIcon,
     HandIcon,
-    GroupIcon,
     ShieldIcon,
     TimerIcon,
     SavingsIcon,
-    EditIcon,
-    UpIcon,
-    DownIcon,
-    SandclockIcon,
-    CartIcon
+    EditIcon
 } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import MultiDropdown from "@/components/ui/controls/atomic/MultiDropdown.vue";
-import { firstUpper, parseAxsEventUrl, removeDuplicates } from "@/stores/utils";
+import { firstUpper } from "@/libs/utils/string";
+import { parseAxsEventUrl } from "@/libs/utils/eventUrl";
+import { removeDuplicates } from "@/libs/utils/array";
 
 const ui = useUIStore();
 
@@ -250,7 +196,6 @@ watch(
             if (country) ui.setCurrentCountry(country, false, ui.currentModule);
 
             task.value.eventId = parsed.eventId;
-            debugger;
             if (parsed.promoId) task.value.promoId = parsed.promoId;
         } catch (ex) {
             ui.logger.Error("Could not parse url (2)", ex);
@@ -258,47 +203,4 @@ watch(
     }
 );
 
-// fetchConfigs();
 </script>
-
-<style lang="scss" scoped>
-.label-override {
-    @apply flex items-center;
-    color: #e1e1e4 !important;
-
-    svg {
-        @apply ml-2;
-
-        path {
-            fill: #e1e1e4 !important;
-        }
-    }
-}
-
-.task-switches {
-    h4 {
-        color: #e1e1e4;
-        @apply mx-auto flex items-center gap-x-2 text-center text-xs;
-    }
-
-    .switch-wrapper {
-        @apply gap-y-2;
-    }
-}
-
-@media (max-width: 720px) {
-    .task-switches {
-        h4 {
-            font-size: 12px !important;
-        }
-    }
-}
-
-.switch-wrapper {
-    svg {
-        path {
-            fill: oklch(0.65 0 0) !important;
-        }
-    }
-}
-</style>