@necrolab/dashboard 0.5.12 → 0.5.14

package/src/components/Table/Table.vue

@@ -6,12 +6,9 @@
 <style lang="scss">
 .table-component {
     @apply flex-col bg-clip-padding rounded relative box-border border border-dark-600 bg-dark-500;
+    @apply overflow-x-auto overflow-y-auto touch-pan-x touch-pan-y;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    overflow-x: auto !important;
-    overflow-y: auto !important;
-    overscroll-behavior: auto !important;
-    // Prevent pinch-to-zoom while allowing scrolling
-    touch-action: pan-x pan-y !important;
+    overscroll-behavior: auto;
     max-height: calc(100vh - 200px);
     -webkit-overflow-scrolling: touch;
 }
@@ -24,15 +21,4 @@
         min-width: 640px;
     }
 }
-
-/* 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/CreateTaskAXS.vue

@@ -8,69 +8,36 @@
         <!-- Task Form -->
         <div class="form-grid mb-4 mt-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>
+            <FormField label="Event ID" :icon="StadiumIcon" required>
+                <input placeholder="827474" v-model="task.eventId" required />
+            </FormField>
+
             <!-- 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>
+            <FormField label="Email" :icon="MailIcon">
+                <input
+                    placeholder="Email"
+                    v-model="task.email"
+                    autocomplete="off"
+                    data-form-type="other"
+                    name="axs_email_not_for_auth" />
+            </FormField>
+
             <!-- 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>
+            <FormField label="Proxy" :icon="CameraIcon">
+                <input placeholder="Proxy" v-model="task.proxy" autocomplete="off" />
+            </FormField>
+
             <!-- 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>
+            <FormField label="Presale Code" :icon="AwardIcon">
+                <input placeholder="Code" v-model="task.presaleCode" maxlength="15" autocomplete="off" />
+            </FormField>
+
             <!-- Ticket Quantity -->
+            <FormField label="Ticket Quantity" :icon="BagIcon" incrementer @increment="task.quantity++" @decrement="task.quantity > 1 && task.quantity--">
+                <input placeholder="20" min="1" type="number" pattern="\d*" v-model="task.quantity" />
+            </FormField>
+
+            <!-- Task Amount -->
             <div class="input-wrapper">
                 <label class="label-override mb-2">
                     Amount
@@ -90,13 +57,13 @@
             </div>
 
             <!-- Profile Tag(s)  -->
-            <div class="input-wrapper relative-positioned z-tooltip">
+            <div class="input-wrapper">
                 <label class="label-override mb-2">
                     Profile Tag(s)
                     <TagIcon />
                 </label>
                 <MultiDropdown
-                    class="input-default w-full will-change-auto"
+                    class="w-full will-change-auto"
                     :onSelect="(v) => (task.profileTags = v)"
                     default="Any"
                     :options="
@@ -107,12 +74,11 @@
             </div>
 
             <!-- Account Tag  -->
-            <div class="input-wrapper relative-positioned z-dropdown">
+            <div class="input-wrapper">
                 <label class="label-override mb-2">
                     Account Tag
                     <ScannerIcon />
                 </label>
-
                 <Dropdown
                     :onClick="(f) => (task.accountTag = f)"
                     default="Default tag"
@@ -120,28 +86,18 @@
                     :options="accountTagOptions"
                     :allowDefault="false"
                     :capitalize="true"
-                    class="input-default dropdown w-full p-4" />
+                    class="dropdown 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>
+            <!-- Start Offset -->
+            <FormField label="Start Offset (Minutes)" :icon="ShieldIcon" incrementer @increment="task.startOffset = (task.startOffset || 0) + 1" @decrement="task.startOffset > 0 && task.startOffset--">
+                <input placeholder="120" type="number" pattern="\d*" v-model.number="task.startOffset" />
+            </FormField>
 
-            <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>
+            <!-- Promo ID -->
+            <FormField label="Promo ID" :icon="AwardIcon">
+                <input placeholder="63668" v-model="task.promoId" />
+            </FormField>
         </div>
         <div class="mb-3 border border-dark-650" />
         <!-- Task Switches -->
@@ -194,6 +150,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 {
     MailIcon,
@@ -306,11 +263,15 @@ watch(
 
 <style lang="scss" scoped>
 .label-override {
-    @apply flex;
+    @apply flex items-center;
     color: #e1e1e4 !important;
 
-    img {
+    svg {
         @apply ml-2;
+
+        path {
+            fill: #e1e1e4 !important;
+        }
     }
 }
 
@@ -332,18 +293,6 @@ watch(
         }
     }
 }
-</style>
-<style lang="scss" scoped>
-.label-override {
-    svg {
-        @apply ml-2;
-
-        path {
-            fill: #e1e1e4 !important;
-        }
-    }
-    @apply flex items-center;
-}
 
 .switch-wrapper {
     svg {
@@ -352,12 +301,4 @@ watch(
         }
     }
 }
-
-.z-inf {
-    z-index: 1000;
-}
-
-.z-inf2 {
-    z-index: 2000;
-}
 </style>

package/src/components/Tasks/CreateTaskTM.vue

@@ -10,72 +10,39 @@
         <!-- Task Form -->
         <div class="grid-responsive-1-2 gap-responsive mb-4 mt-4">
             <!-- Event ID -->
-            <div class="input-wrapper">
-                <label class="label-override mb-2">
-                    Event ID
-                    <StadiumIcon />
-                </label>
-                <div class="input-default required">
-                    <input
-                        :placeholder="!isEU(ui.currentCountry.siteId) ? '102PDA9125510GYU' : '529171'"
-                        v-model="task.eventId"
-                        required />
-                </div>
-            </div>
+            <FormField label="Event ID" :icon="StadiumIcon" required>
+                <input
+                    :placeholder="!isEU(ui.currentCountry.siteId) ? '102PDA9125510GYU' : '529171'"
+                    v-model="task.eventId"
+                    required />
+            </FormField>
+
             <!-- 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="tm_email_disableautocomplete" />
-                </div>
-            </div>
+            <FormField label="Email" :icon="MailIcon">
+                <input
+                    placeholder="Email"
+                    v-model="task.email"
+                    autocomplete="off"
+                    data-form-type="other"
+                    name="tm_email_disableautocomplete" />
+            </FormField>
+
             <!-- 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>
+            <FormField label="Proxy" :icon="CameraIcon">
+                <input placeholder="Proxy" v-model="task.proxy" autocomplete="off" />
+            </FormField>
+
             <!-- 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>
+            <FormField label="Presale Code" :icon="AwardIcon">
+                <input placeholder="Code" v-model="task.presaleCode" maxlength="15" autocomplete="off" />
+            </FormField>
+
             <!-- Ticket Quantity -->
+            <FormField label="Ticket Quantity" :icon="BagIcon" incrementer @increment="task.quantity++" @decrement="task.quantity > 1 && task.quantity--">
+                <input placeholder="20" min="1" type="number" pattern="\d*" v-model="task.quantity" />
+            </FormField>
+
+            <!-- Task Amount -->
             <div class="input-wrapper">
                 <label class="label-override mb-2">
                     Amount
@@ -95,13 +62,13 @@
             </div>
 
             <!-- Profile Tag(s)  -->
-            <div class="input-wrapper relative-positioned z-tooltip">
+            <div class="input-wrapper">
                 <label class="label-override mb-2">
                     Profile Tag(s)
                     <TagIcon />
                 </label>
                 <MultiDropdown
-                    class="input-default w-full will-change-auto"
+                    class="w-full will-change-auto"
                     :onSelect="(v) => (task.profileTags = v)"
                     default="Any"
                     :options="
@@ -112,23 +79,16 @@
             </div>
 
             <!-- CL Origin -->
-            <div v-if="isEU(ui.currentCountry.siteId)" class="input-wrapper">
-                <label class="label-override mb-2">
-                    CL Origin
-                    <AwardIcon />
-                </label>
-                <div class="input-default">
-                    <input placeholder="ORIGIN2" type="text" v-model="task.clOrigin" maxlength="15" />
-                </div>
-            </div>
+            <FormField v-if="isEU(ui.currentCountry.siteId)" label="CL Origin" :icon="AwardIcon">
+                <input placeholder="ORIGIN2" type="text" v-model="task.clOrigin" maxlength="15" />
+            </FormField>
 
             <!-- Account Tag  -->
-            <div class="input-wrapper relative-positioned z-dropdown">
+            <div class="input-wrapper">
                 <label class="label-override mb-2">
                     Account Tag
                     <ScannerIcon />
                 </label>
-
                 <Dropdown
                     :onClick="(f) => (task.accountTag = f)"
                     default="Default tag"
@@ -136,30 +96,18 @@
                     :options="accountTagOptions"
                     :allowDefault="false"
                     :capitalize="true"
-                    class="input-default dropdown w-full p-4" />
+                    class="dropdown 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>
+            <!-- Start Offset -->
+            <FormField label="Start Offset (Minutes)" :icon="ShieldIcon" incrementer @increment="task.startOffset = (task.startOffset || 0) + 1" @decrement="task.startOffset > 0 && task.startOffset--">
+                <input placeholder="120" type="number" pattern="\d*" v-model.number="task.startOffset" />
+            </FormField>
 
-            <div v-if="!isEU(ui.currentCountry.siteId)">
-                <div class="input-wrapper">
-                    <label class="label-override mb-2">
-                        Presale DID
-                        <AwardIcon />
-                    </label>
-                    <div class="input-default">
-                        <input placeholder="uklnfan2ps" v-model="task.eventDid" maxlength="15" />
-                    </div>
-                </div>
-            </div>
+            <!-- Presale DID -->
+            <FormField v-if="!isEU(ui.currentCountry.siteId)" label="Presale DID" :icon="AwardIcon">
+                <input placeholder="uklnfan2ps" v-model="task.eventDid" maxlength="15" />
+            </FormField>
         </div>
         <div class="mb-3 border border-dark-650" />
         <!-- Task Switches -->
@@ -314,6 +262,7 @@
 <script setup>
 import { ref, watch } from "vue";
 import Modal from "@/components/ui/Modal.vue";
+import FormField from "@/components/ui/FormField.vue";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import {
     MailIcon,
@@ -440,6 +389,19 @@ watch(
 </script>
 
 <style lang="scss" scoped>
+.label-override {
+    @apply flex items-center;
+    color: #e1e1e4 !important;
+
+    svg {
+        @apply ml-2;
+
+        path {
+            fill: #e1e1e4 !important;
+        }
+    }
+}
+
 .switch-wrapper {
     svg path {
         fill: oklch(0.65 0 0) !important;