@necrolab/dashboard 0.4.3

package/src/views/Login.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="flex flex-col justify-center mt-20" v-once>
+        <div class="mx-auto flex w-auto rounded-xl mb-8">
+            <img src="@/assets/img/logo_trans.png" class="h-14 mr-4 z-30 object-cover" alt="Logo: Necro" />
+        </div>
+        <h2 class="text-3xl text-white text-center font-bold mb-4">Login</h2>
+
+        <div class="login">
+            <LoginForm />
+        </div>
+    </div>
+</template>
+<script setup>
+import LoginForm from "@/components/Auth/LoginForm.vue";
+</script>
+<style lang="scss" scoped>
+.login {
+    //   @apply m-auto;
+    @media (min-width: 900px) {
+        width: 400px;
+        @apply m-auto;
+    }
+    @media (max-width: 899px) {
+        @apply px-6;
+    }
+}
+</style>

package/src/views/Profiles.vue

@@ -0,0 +1,209 @@
+<template>
+    <div>
+        <div class="flex-between pt-5 pb-2">
+            <!-- Heading -->
+            <div class="flex-center gap-4">
+                <GroupIcon class="cursor-pointer smooth-hover text-white" />
+                <h4 class="text-heading">
+                    Profiles
+                    <span class="text-subheading pl-1">{{ ui.getSelectedProfiles().length }}</span>
+                </h4>
+            </div>
+            <ul class="mobile-icons">
+                <li>
+                    <EyeToggle v-model="privacy" />
+                </li>
+                <li>
+                    <button
+                        :disabled="ui.disabledButtons['add-profiles']"
+                        @click="ui.toggleModal('create-profile', true)"
+                        class="smooth-hover"
+                    >
+                        <PlusIcon class="w-4 h-4" />
+                    </button>
+                </li>
+                <li>
+                    <button 
+                        :disabled="ui.disabledButtons['add-profiles']" 
+                        @click="disable" 
+                        class="smooth-hover text-red-400"
+                    >
+                        <CloseXIcon />
+                    </button>
+                </li>
+                <li>
+                    <button 
+                        :disabled="ui.disabledButtons['add-profiles']" 
+                        @click="enable" 
+                        class="smooth-hover text-green-400"
+                    >
+                        <CheckIcon />
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <div class="flex justify-between mb-3">
+            <div class="sm:w-auto w-full flex items-center justify-start gap-1">
+                <TagToggle
+                    class="smooth-hover rounded-l min-w-9"
+                    :options="['All', 'Enabled', 'Disabled']"
+                    @change="(f) => (ui.search.profiles.show = f)"
+                />
+                <TagToggle
+                    class="smooth-hover min-w-14"
+                    :options="['Name', 'Card']"
+                    @change="(f) => (ui.search.profiles.field = f)"
+                />
+
+                <input
+                    class="h-10 min-w-32 lg:min-w-38 text-white text-sm p-2 bg-dark-500 relative border-2 border-dark-550"
+                    :placeholder="`Search ${ui.search.profiles.field}s`"
+                    v-model="ui.search.profiles.query"
+                />
+
+                <!-- <TagToggle
+                    class="smooth-hover w-32 rounded-r"
+                    :options="allTags"
+                    @change="(f) => (ui.search.profiles.tag = f)"
+                /> -->
+                <Dropdown
+                    class="rounded-r-lg w-32 bg-dark-500 relative z-50 border-2 border-dark-550 search-dropdown"
+                    style="margin-left: 0 !important; border-width: 2px !important"
+                    rightAmount="right-1"
+                    default="Any"
+                    :value="ui.search.profiles.tag"
+                    :onClick="(f) => (ui.search.profiles.tag = f)"
+                    :options="allTags"
+                    :capitalize="true"
+                />
+            </div>
+
+            <div class="gap-3 lg:flex hidden">
+                <div
+                    class="bg-dark-400 border border-light-300 justify-between px-4 w-36 flex text-white text-xs font-medium items-center rounded-md ml-auto h-10"
+                >
+                    <p>Privacy</p>
+                    <Switch class="scale-75" v-model="privacy" />
+                </div>
+                <button
+                    :disabled="ui.disabledButtons['disable-profiles']"
+                    @click="disable"
+                    class="bg-red-400 disabled:opacity-70 smooth-hover border-none w-36 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                >
+                    Disable <img class="w-4 h-4 ml-2" src="/img/controls/disable.svg" />
+                </button>
+                <button
+                    :disabled="ui.disabledButtons['enable-profiles']"
+                    @click="enable"
+                    class="bg-green-400 disabled:opacity-70 smooth-hover border-none w-36 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                >
+                    Enable <img class="w-4 h-4 ml-2" src="/img/controls/enable.svg" />
+                </button>
+                <button
+                    :disabled="ui.disabledButtons['add-profiles']"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover w-36 flex text-white text-xs font-medium justify-center items-center rounded-md border border-light-300 hover:border-light-400 ml-auto h-10"
+                    @click="ui.toggleModal('create-profile')"
+                >
+                    Add Profile
+                    <PlusIcon class="ml-2" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Tasks (Table) -->
+        <ProfileView :tasks="processedTasks" />
+
+        <!-- Modal -->
+        <transition-group name="fade" mode="out-in">
+            <CreateProfile v-if="activeModal === 'create-profile'" />
+        </transition-group>
+    </div>
+</template>
+<style lang="scss" scoped>
+.custom-dropdown-content {
+    top: 2.6rem !important;
+    left: -13px;
+    @apply border border-light-300;
+}
+
+/* Search dropdown should always be h-10 and have no left corners */
+.search-dropdown {
+    height: 2.5rem !important; /* Always 40px regardless of screen size */
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+</style>
+<script setup>
+import { computed, ref, watch } from "vue";
+import ProfileView from "@/components/Editors/Profile/ProfileView.vue";
+import CreateProfile from "@/components/Editors/Profile/CreateProfile.vue";
+import { useUIStore } from "@/stores/ui";
+import { PlusIcon, GroupIcon, CloseXIcon, CheckIcon } from "@/components/icons";
+import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+import EyeToggle from "@/components/ui/controls/EyeToggle.vue";
+import TagToggle from "@/components/Editors/TagToggle.vue";
+import Switch from "@/components/ui/controls/atomic/Switch.vue";
+
+const ui = useUIStore();
+ui.search.profiles.results = ui.profiles;
+
+const activeModal = computed(() => ui.activeModal);
+const filterFieldMap = { Name: "profileName", Card: "cardNumber" };
+const allTags = ref([]);
+const privacy = ref(true);
+
+const processedTasks = computed(() => {
+    return ui.search.profiles.results.map((e) => ({ ...e, privacy: privacy.value }));
+});
+
+watch(
+    () =>
+        ui.search.profiles.query +
+        ui.search.profiles.field +
+        ui.search.profiles.show +
+        ui.profiles.length +
+        ui.search.profiles.tag,
+    () => {
+        const { query, show, field, tag } = ui.search.profiles;
+
+        let profs = ui.profiles;
+        if (show === "Enabled") profs = profs.filter((p) => p.enabled);
+        if (show === "Disabled") profs = profs.filter((p) => !p.enabled);
+
+        if (tag !== "Any") profs = profs.filter((p) => p.tags.includes(tag));
+
+        if (!query) return (ui.search.profiles.results = profs);
+        let searchRegex = new RegExp(query, "i");
+
+        const f = (p) => searchRegex.test(p[filterFieldMap[field]]);
+        ui.search.profiles.results = profs.filter(f);
+
+        allTags.value = getAllTags();
+    }
+);
+
+const enable = async () => {
+    const selected = ui.getSelectedProfiles().filter((p) => !p.enabled);
+    if (!window.confirm(`Do you really want to enable all selected profiles? (${selected.length})`)) return;
+    await Promise.all(selected.map(async (profile) => await ui.addProfile({ ...profile, enabled: true })));
+};
+
+const disable = async () => {
+    const selected = ui.getSelectedProfiles().filter((p) => p.enabled);
+    if (!window.confirm(`Do you really want to disable all selected profiles? (${selected.length})`)) return;
+    await Promise.all(selected.map(async (profile) => await ui.addProfile({ ...profile, enabled: false })));
+};
+
+const getAllTags = () => {
+    let tags = ["Any"];
+    ui.search.profiles.results.forEach((p) =>
+        p.tags.forEach((tag) => {
+            if (!tags.includes(tag)) tags.push(tag);
+        })
+    );
+    return tags;
+};
+
+allTags.value = getAllTags();
+</script>

package/src/views/Tasks.vue

@@ -0,0 +1,157 @@
+<template>
+    <div>
+        <div class="flex-between pt-5 pb-2">
+            <!-- Heading -->
+            <div class="flex-center gap-4">
+                <GearIcon class="w-5 cursor-pointer smooth-hover" @click="ui.toggleModal('quick-settings')" />
+                <h4 class="text-heading">
+                    Tasks
+                    <span class="text-subheading pl-1">{{ taskCount }}</span>
+                </h4>
+            </div>
+            <ul class="mobile-icons mobile-header-controls">
+                <li>
+                    <button @click="ui.startTasks()">
+                        <PlayIcon class="w-4 h-4" />
+                    </button>
+                </li>
+                <li>
+                    <button @click="ui.stopTasks()">
+                        <PauseIcon class="w-4 h-4" />
+                    </button>
+                </li>
+                <li>
+                    <button
+                        class="text-sm"
+                        :disabled="ui.disabledButtons['add-tasks']"
+                        @click="ui.toggleModal('create-task')"
+                    >
+                        <PlusIcon class="w-4 h-4" />
+                    </button>
+                </li>
+                <li>
+                    <button @click="ui.deleteTasks()">
+                        <TrashIcon class="h-3.5 w-3.5" />
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <Stats />
+
+        <!-- Controls -->
+        <div class="controls-wrapper mb-6">
+            <DesktopControls
+                class="desktop-controls-hide"
+                @stopAll="ui.stopTasks()"
+                @startAll="ui.startTasks()"
+                @deleteAll="ui.deleteTasks()"
+            />
+        </div>
+        <div class="flex items-center justify-between gap-2 mb-2">
+            <div class="flex items-center gap-2">
+                <div
+                    v-if="uniqEventIds.length > 1"
+                    class="min-w-32 max-w-72 md:max-w-48"
+                >
+                    <Dropdown
+                        :onClick="(f) => ui.setCurrentEvent(f)"
+                        default="All events"
+                        :chosen="ui.currentEvent"
+                        :options="uniqEventIds"
+                        :allowDefault="true"
+                        class="input-default w-full hover:bg-dark-400 h-10"
+                        rightAmount="right-2"
+                    />
+                </div>
+                <PriceSortToggle
+                    class="min-w-24 max-w-28"
+                    :options="['All', 'Checkout']"
+                    :darker="true"
+                    :current="ui.taskFilter"
+                    @change="(e) => ui.setTaskFilter(e)"
+                />
+            </div>
+            <div class="flex gap-x-3">
+                <button @click="ui.expandTasks()" class="bg-dark-400 smooth-hover w-36 border border-light-300 hover:border-light-400 text-white h-10 rounded-md text-xs flex items-center justify-center font-medium px-4">
+                    Expand <ExpandIcon class="ml-2" />
+                </button>
+                <button @click="ui.foldTasks()" class="bg-dark-400 smooth-hover w-36 border border-light-300 hover:border-light-400 text-white h-10 rounded-md text-xs flex items-center justify-center font-medium px-4">
+                    Fold <ShrinkIcon class="ml-2" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Tasks (Table) -->
+        <TaskView class="mb-6" :tasks="ui.tasks" />
+        <!-- Utilities -->
+        <Utilities />
+        <!-- Modal -->
+        <transition-group name="fade" mode="out-in">
+            <CreateTaskTM v-if="ui.currentModule == 'TM' && activeModal === 'create-task'" @new="ui.addNewTask" />
+            <CreateTaskAXS v-if="ui.currentModule == 'AXS' && activeModal === 'create-task'" @new="ui.addNewTask" />
+
+            <CheckStock v-if="activeModal === 'check-stock'" />
+            <ScrapeVenue v-if="activeModal === 'scrape-venue'" />
+            <MassEditPresaleCode v-if="activeModal === 'mass-edit-presale-code'" />
+            <QuickSettings v-if="activeModal === 'quick-settings'" />
+        </transition-group>
+    </div>
+</template>
+<style lang="scss" scoped>
+.custom-dropdown-content {
+    top: 2.6rem !important;
+    left: -13px;
+    @apply border border-light-300;
+}
+
+.desktop-controls-hide {
+    display: none !important;
+}
+
+.mobile-header-controls {
+    display: flex !important;
+}
+
+@media (min-width: 650px) {
+    .desktop-controls-hide {
+        display: flex !important;
+    }
+    
+    .mobile-header-controls {
+        display: none !important;
+    }
+}
+</style>
+<script setup>
+import { computed } from "vue";
+import { DesktopControls } from "@/components/Tasks/Controls";
+import TaskView from "@/components/Tasks/TaskView.vue";
+import Utilities from "@/components/Tasks/Utilities.vue";
+import CreateTaskTM from "@/components/Tasks/CreateTaskTM.vue";
+import CreateTaskAXS from "@/components/Tasks/CreateTaskAXS.vue";
+import CheckStock from "@/components/Tasks/CheckStock.vue";
+import ScrapeVenue from "@/components/Tasks/ScrapeVenue.vue";
+import MassEditPresaleCode from "@/components/Tasks/MassEdit.vue";
+import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+import Stats from "@/components/Tasks/Stats.vue";
+import { useUIStore } from "@/stores/ui";
+import { TrashIcon, GearIcon, PlusIcon, PlayIcon, PauseIcon, ExpandIcon, ShrinkIcon } from "@/components/icons";
+import QuickSettings from "@/components/Tasks/QuickSettings.vue";
+import PriceSortToggle from "@/components/Filter/PriceSortToggle.vue";
+const ui = useUIStore();
+const activeModal = computed(() => ui.activeModal);
+const taskCount = computed(() => Object.keys(ui.getSelectedTasks()).length);
+ui.refreshQueueStats();
+
+const uniqEventIds = computed(() => {
+    const ids = [
+        ...new Set(
+            Object.values(ui.tasks)
+                .filter((t) => t.siteId === ui.currentCountry.siteId && !t.eventId.includes("@"))
+                .map((v) => v.eventId)
+        )
+    ];
+    return ids;
+});
+</script>

package/static/offline.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <title>Site Offline</title>
+        <meta name="theme-color" content="rgba(28, 28, 49, 1)" />
+        <style>
+            body,
+            html {
+                margin: 0;
+                padding: 0;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+                background-color: rgba(28, 28, 49, 1);
+                color: #fff;
+                height: 100%;
+            }
+
+            html,
+            body {
+                /* Prevent scrolling on both axes */
+                overflow: hidden;
+                position: fixed;
+                width: 100%;
+                height: 100%;
+
+                /* Prevent touch actions except for buttons */
+                touch-action: none;
+                -ms-touch-action: none;
+
+                /* Prevent text selection */
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+
+                /* Prevent pinch zoom */
+                -webkit-touch-callout: none;
+                -webkit-text-size-adjust: none;
+            }
+
+            .container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-height: 100vh;
+            }
+            .error-card {
+                background-color: rgba(39, 39, 67, 0.4);
+                border-radius: 0.5rem;
+                padding: 2rem;
+                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+                text-align: center;
+                max-width: 20rem;
+                width: 100%;
+                margin: auto;
+            }
+            .icon-wrapper {
+                background-color: #4a4a61;
+                width: 4rem;
+                height: 4rem;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 0 auto 1rem;
+                font-size: 2rem;
+                color: #ee8282;
+            }
+            h1 {
+                font-size: 1.5rem;
+                margin-bottom: 0.5rem;
+            }
+            p {
+                color: rgba(255, 255, 255, 0.7);
+                margin-bottom: 1.5rem;
+            }
+            .refresh-button {
+                background-color: #4a4a61;
+                color: white;
+                border: none;
+                padding: 0.5rem 1rem;
+                border-radius: 0.25rem;
+                font-size: 1rem;
+                cursor: pointer;
+                transition: background-color 0.3s ease;
+                /* Enable touch actions specifically for the button */
+                touch-action: manipulation;
+                -webkit-tap-highlight-color: transparent;
+                touch-action: auto;
+                -webkit-touch-callout: none;
+                cursor: pointer;
+            }
+            .refresh-button:hover {
+                background-color: rgba(255, 255, 255, 0.2);
+            }
+            .refresh-button:focus {
+                outline: none;
+                box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
+            }
+            /* Add active state for better touch feedback */
+            .refresh-button:active {
+                background-color: rgba(255, 255, 255, 0.3);
+                transform: scale(0.98);
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="error-card">
+                <div class="icon-wrapper"><span style="margin-bottom: 0.2rem">&#9888;</span></div>
+                <h1>Site Offline</h1>
+                <p>We're down. Please try again.</p>
+                <button class="refresh-button" id="refreshButton">Refresh Page</button>
+            </div>
+        </div>
+        <script>
+            document.addEventListener("DOMContentLoaded", function () {
+                const button = document.getElementById("refreshButton");
+
+                // Handle button click/touch
+                button.addEventListener("click", function (e) {
+                    window.location.reload();
+                });
+
+                // Prevent zoom and scroll on the page but allow button interaction
+                document.addEventListener(
+                    "touchstart",
+                    function (e) {
+                        if (!e.target.classList.contains("refresh-button")) {
+                            e.preventDefault();
+                        }
+                    },
+                    { passive: false }
+                );
+
+                document.addEventListener(
+                    "touchmove",
+                    function (e) {
+                        e.preventDefault();
+                    },
+                    { passive: false }
+                );
+
+                document.addEventListener(
+                    "touchend",
+                    function (e) {
+                        if (e.target !== button) {
+                            e.preventDefault();
+                        }
+                    },
+                    { passive: false }
+                );
+
+                // Prevent zoom via gesture
+                document.addEventListener("gesturestart", function (e) {
+                    e.preventDefault();
+                });
+
+                // Prevent zoom via mousewheel/trackpad
+                document.addEventListener(
+                    "wheel",
+                    function (e) {
+                        if (e.ctrlKey) {
+                            e.preventDefault();
+                        }
+                    },
+                    { passive: false }
+                );
+
+                // Prevent double-tap zoom
+                let lastTap = 0;
+                document.addEventListener("touchend", function (e) {
+                    const currentTime = new Date().getTime();
+                    const tapLength = currentTime - lastTap;
+                    if (tapLength < 500 && tapLength > 0) {
+                        e.preventDefault();
+                    }
+                    lastTap = currentTime;
+                });
+            });
+        </script>
+    </body>
+</html>

package/tailwind.config.js

@@ -0,0 +1,57 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+    theme: {
+        colors: {
+            transparent: "transparent",
+            white: "#FFFFFF",
+            lightgray: "#e5e7eb",
+            green: {
+                400: "#44b744",
+                500: "#22c55e"
+            },
+            red: {
+                300: "#F87171",
+                400: "#EE8282"
+            },
+            dark: {
+                300: "#1B1C2B",
+                400: "#2D2F4A",
+                500: "#202036",
+                550: "#292a43",
+                600: "#25263c"
+            },
+            light: {
+                300: "#4A4A61",
+                400: "#A7A8AF"
+            },
+            gray: "#9CA3AF",
+            border: "#29293F"
+        },
+        screens: {
+            xs: "500px",
+            sm: "640px",
+            // => @media (min-width: 640px) { ... }
+
+            md: "768px",
+            // => @media (min-width: 768px) { ... }
+
+            ipadlg: "1000px",
+            lg: "1030px",
+            // => @media (min-width: 1024px) { ... }
+
+            xl: "1280px",
+            // => @media (min-width: 1280px) { ... }
+
+            "2xl": "1536px",
+            // => @media (min-width: 1536px) { ... }
+            landscape: {
+                raw: "(orientation: landscape)"
+            }
+        }
+    },
+    plugins: [],
+    experimental: {
+        optimizeUniversalDefaults: false
+    }
+};