@necrolab/dashboard 0.4.61 → 0.4.208

package/src/components/Filter/PriceSortToggle.vue

@@ -1,19 +1,16 @@
 <template>
     <button
         @click="increase"
-        :class="[
-            'sort-toggle',
-            { 'darker': props.darker }
-        ]"
+        :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`"
     >
-        <component :is="getCurrentIcon()" class="icon" />
-        <span class="text">{{ getCurrentText() }}</span>
+        {{ sortOptions[currentOpt] }}
     </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);
@@ -27,7 +24,6 @@ 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);
 
@@ -38,70 +34,4 @@ const increase = () => {
     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-650 rounded text-sm font-medium transition-all duration-150 hover:bg-dark-550 hover:border-dark-700 focus:outline-none;
-    color: #cccccc;
-    min-width: 80px;
-}
-
-.sort-toggle:hover {
-    color: #ffffff;
-}
-
-.sort-toggle.darker {
-    @apply bg-dark-550 border-dark-700 hover:bg-dark-600;
-    color: #d4d4d4;
-    min-width: 100px;
-    height: 40px;
-}
-
-.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" style="background-color: rgb(26 27 30);">
+    <div class="border-b-2 border-border w-full px-4 text-white text-xs py-4 grid grid-cols-12">
         <slot />
     </div>
 </template>

package/src/components/Table/Row.vue

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

package/src/components/Table/Table.vue

@@ -5,27 +5,10 @@
 </template>
 <style lang="scss">
 .table-component {
-    @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);
+    @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-400;
-    border-bottom: 1px solid #3d3e44;
-}
-
-/* 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
-    }
+    @apply bg-dark-500;
 }
 </style>

package/src/components/Tasks/CheckStock.vue

@@ -3,36 +3,25 @@
         <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"
-                />
+            <label class="label-override mb-2">Event ID <StadiumIcon /></label>
+            <div class="input-default">
+                <input placeholder="102PDA9125510GYU" v-model="eventId" />
+                <span class="text-red-400 my-auto mr-2 mt-3">* </span>
             </div>
         </div>
-        <!-- Presale Code -->
-        <div class="input-wrapper mb-4">
+        <!-- Ticker Quantity -->
+        <div class="input-wrapper mb-8">
             <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>
+        <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()"
+        >
+            Checks Stock <BoxIcon />
+        </button>
     </Modal>
 </template>
 <style lang="scss" scoped>
@@ -47,16 +36,12 @@ 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);
+    ui.checkStock(eventId.value, presaleCode.value);
 }
 </script>

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

@@ -1,21 +1,29 @@
 <template>
-    <div class="task-controls flex-row">
+    <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">
+            <button @click="$emit('startAll')" class="bg-green-400 smooth-hover flex-grow xl:flex-initial">
                 Start <PlayIcon />
             </button>
-            <button @click="$emit('stopAll')" class="bg-red-400 smooth-hover responsive-button border-none">
+            <button @click="$emit('stopAll')" class="bg-red-400 smooth-hover flex-grow xl:flex-initial">
                 Stop <PauseIcon />
             </button>
-            <button @click="$emit('deleteAll')" class="bg-dark-400 smooth-hover responsive-button border border-dark-650 hover:border-dark-700">
+            <button @click="$emit('deleteAll')" class="bg-dark-400 smooth-hover flex-grow xl:flex-initial">
                 Delete <TrashIcon />
             </button>
-            <h4 class="text-light-300 text-sm flex-grow xl:flex-initial"></h4>
+            <h4 class="text-light-300text-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('decrease')" 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 border border-dark-650 hover:border-dark-700"
+                class="bg-dark-400 disabled:opacity-70 smooth-hover flex-grow xl:flex-initial w-36"
                 @click="ui.toggleModal('create-task')"
             >
                 Create Task
@@ -23,10 +31,9 @@
             </button>
 
             <button
-                class="bg-dark-400 smooth-hover flex-grow xl:flex-initial w-36 border border-dark-650 hover:border-dark-700"
+                class="bg-dark-400 smooth-hover 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" />
@@ -46,13 +53,6 @@ const isExpanded = ref(false);
 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 {
@@ -64,9 +64,9 @@ button {
         }
     }
     .expand-shrink {
-        @apply flex gap-x-2;
+        @apply flex border border-dark-400 rounded-md;
         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;
+            @apply text-white text-xs px-4 flex items-center justify-center gap-x-4 duration-200;
         }
     }
 }

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

@@ -1,11 +1,27 @@
 <template>
-    <div class="mobile-controls flex items-center justify-between" v-once>
+    <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="expand-shrink">
-            <button class="mobile-btn" @click="$emit('expand')">
+            <button class="rounded-md flex-1 bg-dark-400 xl:flex-auto" @click="$emit('expand')">
                 Expand
                 <ExpandIcon />
             </button>
-            <button class="mobile-btn" @click="$emit('fold')">
+            <button class="rounded-md flex-1 bg-dark-400 xl:flex-auto" @click="$emit('decrease')">
                 Fold
                 <ShrinkIcon />
             </button>
@@ -20,12 +36,33 @@ const ui = useUIStore();
 </script>
 <style lang="scss" scoped>
 .mobile-controls {
+    @apply gap-x-4;
     .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;
+        @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;
+            }
         }
     }
 }