@necrolab/dashboard 0.4.221 → 0.5.2

package/src/components/Filter/FilterPreview.vue

@@ -1,58 +1,229 @@
 <template>
     <Modal class="overflow-y-scroll max-w-screen">
-        <template #header> Filter JSON data <FilterIcon class="ml-4" /> </template>
-
-        <div class="max-h-80 overflow-auto hidden-scrollbars z-0 my-3">
-            <CodeEditor
-                v-model="text"
-                width="100%"
-                spellcheck="false"
-                :hide_header="true"
-                :language_selector="false"
-                :languages="[['json', 'JSON']]"
-                theme="dark"
-                class=""
-            ></CodeEditor>
-            <p class="text-red-400 text-bold">{{ errorMessage }}</p>
+        <template #header>
+            Filter JSON data
+            <FilterIcon class="ml-4" />
+        </template>
+
+        <div class="my-3">
+            <div class="editor-container">
+                <div class="editor-wrapper">
+                    <pre ref="codeDisplay" class="language-json code-highlight"></pre>
+                    <textarea
+                        ref="codeEditor"
+                        v-model="text"
+                        class="code-editor"
+                        spellcheck="false"
+                        @scroll="syncScroll"
+                        @input="highlightCode"
+                        @keydown.tab.prevent="handleTab"></textarea>
+                </div>
+            </div>
+            <p class="text-red-400 text-bold mt-2">{{ errorMessage }}</p>
         </div>
 
-        <div class="ml-auto flex">
-            <button
-                class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2"
-                @click="save()"
-            >
-                Apply
-            </button>
-
-            <button
-                class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-2"
-                @click="done()"
-            >
-                Close
-            </button>
+        <div class="ml-auto flex gap-3 mt-3">
+            <button class="modal-btn save-btn" @click="save()">Apply</button>
+            <button class="modal-btn" @click="done()">Close</button>
         </div>
     </Modal>
 </template>
 <style lang="scss" scoped>
+.modal-btn {
+    @apply rounded transition-all duration-150 flex items-center justify-center;
+    background: oklch(0.2046 0 0);
+    border: 2px solid oklch(0.2809 0 0);
+    color: oklch(0.90 0 0);
+    height: 2.5rem;
+    width: 6.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+
+    &:hover {
+        border-color: oklch(0.72 0.15 145);
+    }
+
+    &:active, &:focus {
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
+
+    &.save-btn {
+        background-color: oklch(0.72 0.15 145 / 0.15);
+        border-color: oklch(0.72 0.15 145 / 0.5);
+
+        &:hover {
+            background-color: oklch(0.72 0.15 145 / 0.25);
+            border-color: oklch(0.72 0.15 145);
+        }
+    }
+}
+
 .input-wrapper {
     label {
         @apply flex;
     }
 }
+
+/* Prism.js syntax highlighting styles */
+.editor-container {
+    position: relative;
+    min-height: 300px;
+    max-height: 500px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    background-color: oklch(0.19 0 0);
+}
+
+.editor-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    max-height: 500px;
+}
+
+.code-editor {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    max-height: 500px;
+    background-color: transparent;
+    /* Make text completely transparent */
+    color: rgba(0, 0, 0, 0);
+    caret-color: #e2e8f0;
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
+    padding: 12px;
+    border: none;
+    resize: none;
+    font-size: 14px;
+    line-height: 1.6;
+    tab-size: 4;
+    outline: none;
+    border: 1px solid oklch(0.26 0 0);
+    border-radius: 8px;
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    white-space: pre;
+    overflow: auto;
+}
+
+.code-highlight {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    max-height: 500px;
+    overflow: auto;
+    white-space: pre;
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    background-color: transparent !important;
+    pointer-events: none;
+    z-index: 5;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 12px;
+    margin: 0;
+}
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
 import { FilterIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
-import { ref, computed } from "vue";
-import CodeEditor from "simple-code-editor";
+import { ref, computed, onMounted, nextTick } from "vue";
 
 const props = defineProps({
     filter: Object
 });
 
 const ui = useUIStore();
-const text = ref(JSON.stringify(props.filter.out(), null, "\t"));
+const text = ref(JSON.stringify(props.filter.out(), null, 4));
+const codeEditor = ref(null);
+const codeDisplay = ref(null);
+
+// Function to highlight code using Prism
+const highlightCode = () => {
+    if (!codeDisplay.value || !codeEditor.value) return;
+
+    // Ensure Prism is available
+    if (typeof Prism === "undefined") {
+        console.error("Prism is not loaded");
+        return;
+    }
+
+    // Use requestAnimationFrame for smoother updates
+    requestAnimationFrame(() => {
+        try {
+            // Update the pre element with highlighted HTML
+            const highlighted = Prism.highlight(text.value || "", Prism.languages.json, "json");
+            codeDisplay.value.innerHTML = highlighted;
+            codeDisplay.value.className = "language-json code-highlight";
+        } catch (e) {
+            console.error("Highlight error:", e);
+            // Fallback to plain text if highlighting fails
+            codeDisplay.value.textContent = text.value || "";
+        }
+
+        // Ensure scroll positions are synced after highlighting
+        syncScroll();
+    });
+};
+
+// Function to sync scrolling between textarea and highlighted code
+const syncScroll = () => {
+    if (!codeDisplay.value || !codeEditor.value) return;
+
+    // Synchronize scrolling between the textarea and the highlighted code
+    requestAnimationFrame(() => {
+        codeDisplay.value.scrollTop = codeEditor.value.scrollTop;
+        codeDisplay.value.scrollLeft = codeEditor.value.scrollLeft;
+    });
+};
+
+// Function to handle tab key press in the editor
+const handleTab = (e) => {
+    const textarea = codeEditor.value;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+
+    // Insert 4 spaces at cursor position
+    const spaces = "    ";
+    text.value = text.value.substring(0, start) + spaces + text.value.substring(end);
+
+    // Move cursor position after the inserted tab
+    nextTick(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + spaces.length;
+        highlightCode();
+    });
+};
+
+// Initialize syntax highlighting
+onMounted(() => {
+    // Apply highlighting when the component is mounted
+    nextTick(() => {
+        highlightCode();
+
+        // Ensure scroll synchronization on initial load
+        if (codeEditor.value && codeDisplay.value) {
+            syncScroll();
+        }
+
+        // Focus the editor
+        if (codeEditor.value) {
+            codeEditor.value.focus();
+        }
+    });
+});
 
 function done() {
     ui.toggleModal("");

package/src/components/Filter/PriceSortToggle.vue

@@ -1,16 +1,19 @@
 <template>
     <button
         @click="increase"
-        :class="`w-full min-w-14  px-1 my-2 ${
-            props.darker ? 'bg-dark-500 text-white h-10 rounded-lg' : 'bg-dark-550 text-gray h-8 rounded'
-        } overflow-hidden`"
+        :class="[
+            'sort-toggle',
+            { 'darker': props.darker }
+        ]"
     >
-        {{ sortOptions[currentOpt] }}
+        <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);
@@ -24,14 +27,81 @@ const props = defineProps({
     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++;
+    currentOpt.value = (currentOpt.value + 1) % sortOptions.value.length;
     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 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-2 border-border w-full px-4 text-white text-xs py-4 grid grid-cols-12">
+    <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">
         <slot />
     </div>
 </template>

package/src/components/Table/Row.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="px-4 text-xs grid grid-cols-12 text-white py-4 items-center h-full">
+    <div class="px-2 md:px-4 text-xs grid text-white py-4 items-center h-full hover:bg-dark-500 transition-colors">
         <slot />
     </div>
 </template>

package/src/components/Table/Table.vue

@@ -5,10 +5,27 @@
 </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;
+    @apply flex-col bg-clip-padding rounded relative box-border border border-dark-600 bg-dark-500;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    overflow: auto !important;
+    overscroll-behavior: auto !important;
+    touch-action: auto !important;
+    max-height: calc(100vh - 200px);
 }
 
 .table-component > .grid {
-    @apply bg-dark-500;
+    @apply bg-dark-400;
+    border-bottom: 1px solid oklch(0.26 0 0);
+}
+
+/* iPhone landscape mode table optimization */
+@media screen and (max-height: 500px) and (orientation: landscape) {
+    .table-component {
+        max-height: calc(100vh - 160px) !important; // Leave even more space at bottom 
+        width: 100% !important;
+        overflow-x: auto !important; // Allow horizontal scrolling if needed
+        overflow-y: auto !important; // Allow vertical scrolling
+        margin-bottom: 2rem !important; // Increase bottom margin for better spacing
+    }
 }
 </style>

package/src/components/Tasks/CheckStock.vue

@@ -4,16 +4,14 @@
         <!-- 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 flex items-center">
+            <div class="input-default required">
                 <input
                     :placeholder="!isEU(ui.currentCountry.siteId) ? '102PDA9125510GYU' : '529171'"
                     v-model="eventId"
-                    class="flex-grow"
                 />
-                <span class="text-red-400 text-lg absolute right-3 top-1/2 transform -translate-y-1/2">*</span>
             </div>
         </div>
-        <!-- Ticker Quantity -->
+        <!-- Presale Code -->
         <div class="input-wrapper mb-4">
             <label class="label-override mb-2">Presale code <AwardIcon /></label>
             <div class="input-default">
@@ -35,10 +33,10 @@
             </div>
         </div>
         <button
-            class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-auto"
-            @click="done()"
-        >
-            Check Stock <BoxIcon />
+            class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
+            @click="done()">
+            Check Stock
+            <BoxIcon />
         </button>
     </Modal>
 </template>

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

@@ -1,29 +1,21 @@
 <template>
-    <div class="task-controls flex-row" v-once>
+    <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 flex-grow xl:flex-initial">
+            <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 flex-grow xl:flex-initial">
+            <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 flex-grow xl:flex-initial">
+            <button @click="$emit('deleteAll')" class="bg-dark-400 smooth-hover responsive-button border border-dark-650 hover:border-dark-700">
                 Delete <TrashIcon />
             </button>
-            <h4 class="text-light-300text-sm flex-grow xl:flex-initial"></h4>
+            <h4 class="text-light-300 text-sm flex-grow xl:flex-initial"></h4>
         </div>
         <div class="flex gap-x-3">
-            <button @click="$emit('expand')" class="bg-dark-400 smooth-hover flex-grow xl:flex-initial">
-                Expand
-                <ExpandIcon class="ml-2" />
-            </button>
-            <button @click="$emit('fold')" class="bg-dark-400 smooth-hover flex-grow xl:flex-initial">
-                Fold
-                <ShrinkIcon class="ml-2" />
-            </button>
             <button
                 :disabled="ui.disabledButtons['add-tasks']"
-                class="bg-dark-400 disabled:opacity-70 smooth-hover flex-grow xl:flex-initial w-36"
+                class="bg-dark-400 disabled:opacity-70 smooth-hover flex-grow xl:flex-initial w-36 border border-dark-650 hover:border-dark-700"
                 @click="ui.toggleModal('create-task')"
             >
                 Create Task
@@ -31,7 +23,7 @@
             </button>
 
             <button
-                class="bg-dark-400 smooth-hover flex-grow xl:flex-initial w-36"
+                class="bg-dark-400 smooth-hover flex-grow xl:flex-initial w-36 border border-dark-650 hover:border-dark-700"
                 @click="ui.toggleModal('mass-edit-presale-code')"
                 :disabled="ui.disabledButtons['mass-edit']"
                 v-if="ui.currentModule == 'TM'"
@@ -53,7 +45,25 @@ const isExpanded = ref(false);
 <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 {
@@ -65,9 +75,9 @@ button {
         }
     }
     .expand-shrink {
-        @apply flex border border-dark-400 rounded-md;
+        @apply flex gap-x-2;
         button {
-            @apply text-white text-xs px-4 flex items-center justify-center gap-x-4 duration-200;
+            @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;
         }
     }
 }

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

@@ -1,27 +1,11 @@
 <template>
-    <div class="mobile-controls grow items-center" v-once>
-        <div>
-            <ul class="mobile-icons">
-                <li>
-                    <button @click="$emit('startAll')"><PlayIcon /></button>
-                </li>
-                <li>
-                    <button @click="$emit('stopAll')"><PauseIcon /></button>
-                </li>
-
-                <li>
-                    <button @click="ui.toggleModal('mass-edit-presale-code')">
-                        <EditIcon />
-                    </button>
-                </li>
-            </ul>
-        </div>
+    <div class="mobile-controls flex items-center justify-between" v-once>
         <div class="expand-shrink">
-            <button class="rounded-md flex-1 bg-dark-400 xl:flex-auto" @click="$emit('expand')">
+            <button class="mobile-btn" @click="$emit('expand')">
                 Expand
                 <ExpandIcon />
             </button>
-            <button class="rounded-md flex-1 bg-dark-400 xl:flex-auto" @click="$emit('fold')">
+            <button class="mobile-btn" @click="$emit('fold')">
                 Fold
                 <ShrinkIcon />
             </button>
@@ -36,33 +20,12 @@ const ui = useUIStore();
 </script>
 <style lang="scss" scoped>
 .mobile-controls {
-    @apply gap-x-4;
     .expand-shrink {
-        @apply flex ml-auto gap-x-2;
-        button {
-            width: 140px;
-            @apply text-white text-xs px-4 flex items-center justify-center gap-x-2 duration-200 h-9;
-        }
-    }
-    ul {
-        @apply items-center gap-x-2;
-        li {
-            @apply text-white;
-        }
-        svg {
-            width: 15px;
-            height: 15px;
-        }
-    }
-}
-@media (max-width: 1024px) {
-    .mobile-controls {
-        .expand-shrink {
-            button {
-                width: 100px;
-                font-size: 12px !important;
-                @apply gap-x-2 px-0;
-            }
+        @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;
         }
     }
 }