@necrolab/dashboard 0.4.3

package/src/components/Filter/PriceSortToggle.vue

@@ -0,0 +1,105 @@
+<template>
+    <button
+        @click="increase"
+        :class="[
+            'sort-toggle',
+            { 'darker': props.darker }
+        ]"
+    >
+        <component :is="getCurrentIcon()" class="icon" />
+        <span class="text">{{ getCurrentText() }}</span>
+    </button>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { UpIcon, DownIcon, FilterIcon, CheckIcon, CloseIcon } from "@/components/icons";
+
+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
+});
+
+if (props.options) sortOptions.value = props.options;
+if (props.current) currentOpt.value = sortOptions.value.findIndex((s) => s === props.current);
+
+const emit = defineEmits(["change"]);
+
+const increase = () => {
+    currentOpt.value++;
+    emit("change", sortOptions.value[currentOpt.value]);
+    if (currentOpt.value === (props.options ? sortOptions.value.length : 3)) currentOpt.value = 0;
+};
+
+const getCurrentIcon = () => {
+    const current = sortOptions.value[currentOpt.value];
+    
+    // Handle filter options (All, WL, BL)
+    if (props.options && props.options.includes('All')) {
+        switch (current) {
+            case 'All': return FilterIcon;
+            case 'WL': return CheckIcon;
+            case 'BL': return CloseIcon;
+            default: return FilterIcon;
+        }
+    }
+    
+    // Handle sort options (none, asc, desc)
+    switch (current) {
+        case 'asc': return UpIcon;
+        case 'desc': return DownIcon;
+        case 'none':
+        default: return FilterIcon;
+    }
+};
+
+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';
+        case 'desc': return 'High';
+        case 'none': return 'None';
+        default: return current;
+    }
+};
+</script>
+
+<style scoped>
+.sort-toggle {
+    @apply flex items-center gap-2 px-3 py-2 bg-dark-500 border border-dark-550 rounded text-gray text-sm font-medium transition-all duration-200 hover:bg-dark-400 hover:text-white hover:border-light-300 focus:outline-none;
+    min-width: 80px;
+}
+
+.sort-toggle.darker {
+    @apply bg-dark-400 text-white border-light-300;
+    min-width: 100px;
+    height: 40px;
+}
+
+.sort-toggle.darker:hover {
+    @apply bg-dark-300 border-light-400;
+}
+
+.icon {
+    @apply w-4 h-4 flex-shrink-0;
+}
+
+.text {
+    @apply text-center flex-1;
+}
+</style>

package/src/components/Table/Header.vue

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

package/src/components/Table/Row.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="px-2 md:px-4 text-xs grid text-white py-4 items-center h-full">
+        <slot />
+    </div>
+</template>

package/src/components/Table/Table.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="table-component">
+        <slot />
+    </div>
+</template>
+<style lang="scss">
+.table-component {
+    @apply flex-col bg-clip-padding rounded relative box-border border-2 border-b-0 border-dark-550 bg-dark-500;
+}
+
+.table-component > .grid {
+    @apply bg-dark-500;
+}
+</style>

package/src/components/Table/index.js

@@ -0,0 +1,4 @@
+import Header from "./Header.vue";
+import Table from "./Table.vue";
+import Row from "./Row.vue";
+export { Header, Row, Table };

package/src/components/Tasks/CheckStock.vue

@@ -0,0 +1,62 @@
+<template>
+    <Modal>
+        <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>
+            <div class="input-default required">
+                <input
+                    :placeholder="!isEU(ui.currentCountry.siteId) ? '102PDA9125510GYU' : '529171'"
+                    v-model="eventId"
+                />
+            </div>
+        </div>
+        <!-- Presale Code -->
+        <div class="input-wrapper mb-4">
+            <label class="label-override mb-2">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>
+            <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>
+            <div class="input-default">
+                <input placeholder="ORIGIN2" v-model="clOrigin" />
+            </div>
+        </div>
+        <button class="btn-action ml-auto" @click="done()">Check Stock <BoxIcon /></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";
+
+const ui = useUIStore();
+const eventId = ref("");
+const presaleCode = ref("");
+const eventDid = ref("");
+const clOrigin = ref("");
+
+function done() {
+    ui.toggleModal("");
+    ui.checkStock(eventId.value, presaleCode.value, eventDid.value, clOrigin.value);
+}
+</script>

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

@@ -0,0 +1,73 @@
+<template>
+    <div class="task-controls flex-row" v-once>
+        <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 />
+            </button>
+            <button @click="$emit('stopAll')" class="bg-red-400 smooth-hover responsive-button border-none">
+                Stop <PauseIcon />
+            </button>
+            <button @click="$emit('deleteAll')" class="bg-dark-400 smooth-hover responsive-button border border-light-300 hover:border-light-400">
+                Delete <TrashIcon />
+            </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-light-300 hover:border-light-400"
+                @click="ui.toggleModal('create-task')"
+            >
+                Create Task
+                <PlusIcon class="ml-2" />
+            </button>
+
+            <button
+                class="bg-dark-400 smooth-hover flex-grow xl:flex-initial w-36 border border-light-300 hover:border-light-400"
+                @click="ui.toggleModal('mass-edit-presale-code')"
+                :disabled="ui.disabledButtons['mass-edit']"
+                v-if="ui.currentModule == 'TM'"
+            >
+                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";
+
+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;
+}
+
+.responsive-button {
+    min-width: 80px;
+    max-width: 120px;
+    @apply flex-grow xl:flex-initial;
+}
+
+.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

@@ -0,0 +1,32 @@
+<template>
+    <div class="mobile-controls flex items-center justify-between" v-once>
+        <div class="expand-shrink">
+            <button class="mobile-btn" @click="$emit('expand')">
+                Expand
+                <ExpandIcon />
+            </button>
+            <button class="mobile-btn" @click="$emit('fold')">
+                Fold
+                <ShrinkIcon />
+            </button>
+        </div>
+    </div>
+</template>
+<script setup>
+import { useUIStore } from "@/stores/ui";
+
+import { PlayIcon, PauseIcon, TrashIcon, ExpandIcon, ShrinkIcon, EditIcon } from "@/components/icons";
+const ui = useUIStore();
+</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-light-300 hover:border-light-400 transition-all duration-150 font-medium;
+            width: 80px;
+            font-size: 11px;
+        }
+    }
+}
+</style>

package/src/components/Tasks/Controls/index.js

@@ -0,0 +1,3 @@
+import MobileControls from "./MobileControls.vue";
+import DesktopControls from "./DesktopControls.vue";
+export { DesktopControls, MobileControls };

package/src/components/Tasks/CreateTaskAXS.vue

@@ -0,0 +1,339 @@
+<template>
+    <Modal class="overflow-y-scroll max-w-screen">
+        <template #header>
+            Create Task
+            <img src="@/assets/img/pencil.svg" class="ml-4" />
+        </template>
+
+
+        <!-- Task Form -->
+        <div class="form-grid mt-4 mb-4">
+            <!-- Event ID -->
+            <div class="input-wrapper">
+                <label class="label-override mb-2"
+                    >Event ID
+                    <StadiumIcon />
+                </label>
+                <div class="input-default required">
+                    <input placeholder="827474" v-model="task.eventId" required />
+                </div>
+            </div>
+            <!-- Email -->
+            <div class="input-wrapper">
+                <label class="label-override mb-2"
+                    >Email
+                    <MailIcon />
+                </label>
+                <div class="input-default">
+                    <input 
+                        placeholder="Email" 
+                        v-model="task.email" 
+                        autocomplete="off" 
+                        data-form-type="other"
+                        name="axs_email_not_for_auth"
+                    />
+                </div>
+            </div>
+            <!-- Proxy -->
+            <div class="input-wrapper">
+                <label class="label-override mb-2"
+                    >Proxy
+                    <CameraIcon />
+                </label>
+                <div class="input-default">
+                    <input placeholder="Proxy" v-model="task.proxy" autocomplete="off" />
+                </div>
+            </div>
+            <!-- Presale Code -->
+            <div class="input-wrapper">
+                <label class="label-override mb-2"
+                    >Presale Code
+                    <AwardIcon />
+                </label>
+                <div class="input-default">
+                    <input placeholder="Code" v-model="task.presaleCode" maxlength="15" autocomplete="off" />
+                </div>
+            </div>
+            <!-- Ticket Quantity -->
+            <div class="input-wrapper">
+                <label class="label-override mb-2"
+                    >Ticket Quantity
+                    <BagIcon />
+                </label>
+                <div class="input-default">
+                    <input placeholder="20" min="1" type="number" pattern="\d*" v-model="task.quantity" />
+                    <div class="input-incrementer">
+                        <button @click="task.quantity++">
+                            <UpIcon />
+                        </button>
+                        <button @click="if (task.quantity > 1) task.quantity--;">
+                            <DownIcon />
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Ticket Quantity -->
+            <div class="input-wrapper">
+                <label class="label-override mb-2">Amount <span class="ml-2" style="height: 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>
+
+            <!-- Profile Tag(s)  -->
+            <div class="input-wrapper" style="z-index: 50 !important">
+                <label class="label-override mb-2"
+                    >Profile Tag(s)
+                    <TagIcon />
+                </label>
+                <MultiDropdown
+                    class="w-full will-change-auto input-default"
+                    :onSelect="(v) => (task.profileTags = v)"
+                    default="Any"
+                    :options="
+                        profileTagsOptions.map((opt) => {
+                            return { label: opt, value: opt };
+                        })
+                    "
+                />
+            </div>
+
+            <!-- Account Tag  -->
+            <div class="input-wrapper">
+                <label class="label-override mb-2"
+                    >Account Tag
+                    <ScannerIcon />
+                </label>
+
+                <Dropdown
+                    :onClick="(f) => (task.accountTag = f)"
+                    default="Default tag"
+                    :chosen="task.accountTag"
+                    :options="accountTagOptions"
+                    :allowDefault="false"
+                    :capitalize="true"
+                    class="input-default dropdown p-4 w-full"
+                />
+            </div>
+
+            <div class="input-wrapper">
+                <label class="label-override mb-2">Start Offset (Minutes)<ShieldIcon /></label>
+                <div class="input-default">
+                    <input placeholder="120" type="number" pattern="\d*" v-model="task.startOffset" />
+                </div>
+            </div>
+
+            <div class="input-wrapper">
+                <label class="label-override mb-2"
+                    >Promo ID
+                    <AwardIcon />
+                </label>
+                <div class="input-default">
+                    <input placeholder="63668" v-model="task.promoId" />
+                </div>
+            </div>
+        </div>
+        <div class="border border-light-300 mb-3" />
+        <!-- Task Switches -->
+        <div class="grid grid-cols-4 gap-y-4 mb-4 justify-between task-switches">
+            <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>
+                    <span class="hidden xs:block">Manual</span>
+                </h4>
+                <Switch class="mx-auto" v-model="task.manual" />
+            </div>
+        </div>
+
+        <!-- Task prefab -->
+        <div class="border border-light-300 my-3" />
+        <button class="btn-action mx-auto" @click="createTask">
+            Create
+            <EditIcon />
+        </button>
+    </Modal>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import Modal from "@/components/ui/Modal.vue";
+import Switch from "@/components/ui/controls/atomic/Switch.vue";
+import {
+    MailIcon,
+    CameraIcon,
+    AwardIcon,
+    StadiumIcon,
+    ScannerIcon,
+    BagIcon,
+    TagIcon,
+    SkiIcon,
+    HandIcon,
+    GroupIcon,
+    ShieldIcon,
+    TimerIcon,
+    SavingsIcon,
+    EditIcon,
+    UpIcon,
+    DownIcon,
+    SandclockIcon,
+    CartIcon
+} 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 { isEU, removeDuplicates } from "@/stores/utils";
+
+const ui = useUIStore();
+
+const accountTagOptions = ref(ui.profile.accountTags);
+const defaultTags = ["Amex", "Visa", "Master"];
+
+const profileTagsOptions = ref(removeDuplicates(["Any", ...defaultTags, ...ui.profile.profileTags]));
+
+const baseTask = ref({
+    selected: false,
+    taskId: "",
+    active: false,
+    eventId: "",
+    status: "Created",
+    presaleCode: "",
+    quantity: 4,
+    reservedTicketsList: "ticket1-ticket2-ticket3",
+    email: "",
+    password: "",
+    proxy: "",
+    manual: true,
+    doNotPay: false,
+    quickQueue: false,
+    smartTimer: false,
+    accountTag: accountTagOptions.value[0],
+    profileTags: ["Any"],
+    taskQuantity: 1,
+    promoId: ""
+});
+
+const task = ref(ui.modalData[`task_${ui.currentCountry.siteId}`] || baseTask);
+
+function createTask() {
+    ui.logger.Info("Created new task", task.value);
+    const eventIds = task.value.eventId.split(",").map((t) => t.trim());
+    const presaleCodes = task.value.presaleCode ? task.value.presaleCode.split(",").map((t) => t.trim()) : [undefined];
+    eventIds.forEach((eventId) => {
+        presaleCodes.forEach((presaleCode) => {
+            const t = { ...task.value, eventId: eventId, presaleCode: presaleCode };
+            ui.addNewTask(t);
+        });
+    });
+}
+
+watch(
+    () => task.value.profileTags,
+    (newTags) => {
+        ui.logger.Info("Profile tags update", newTags, task.value);
+        if (!newTags.length) task.value.profileTags.push("Any");
+        else if (newTags.length === profileTagsOptions.value.length - 1 && profileTagsOptions.value.length !== 3)
+            task.value.profileTags = ["Any"];
+        else if (newTags.length > 1 && newTags.includes("Any"))
+            task.value.profileTags = task.value.profileTags = newTags.filter((e) => e != "Any");
+    }
+);
+
+watch(() => task.value, (ui.modalData[`task_${ui.currentCountry.siteId}`] = task.value));
+
+watch(
+    () => task.value.eventId,
+    (url) => {
+        ui.logger.Info("URL changed", url);
+    }
+);
+
+// fetchConfigs();
+</script>
+
+<style lang="scss" scoped>
+.label-override {
+    @apply flex;
+    color: #6e7084 !important;
+
+    img {
+        @apply ml-2;
+    }
+}
+
+.task-switches {
+    h4 {
+        color: #6e7084;
+        @apply text-xs text-center flex items-center gap-x-2 mx-auto;
+    }
+
+    .switch-wrapper {
+        @apply gap-y-2;
+    }
+}
+
+@media (max-width: 720px) {
+    .task-switches {
+        h4 {
+            font-size: 12px !important;
+        }
+    }
+}
+</style>
+<style lang="scss" scoped>
+.label-override {
+    svg {
+        @apply ml-2;
+
+        path {
+            fill: #6e7084 !important;
+        }
+    }
+    @apply flex items-center;
+}
+
+.switch-wrapper {
+    svg {
+        path {
+            fill: #6e7084 !important;
+        }
+    }
+}
+
+.z-inf {
+    z-index: 1000;
+}
+
+.z-inf2 {
+    z-index: 2000;
+}
+</style>