@necrolab/dashboard 0.4.33 → 0.4.35

package/src/components/Editors/Profile/CreateProfile.vue

@@ -10,7 +10,9 @@
             <div class="grid grid-cols-12 gap-3 my-3">
                 <!-- Profile tag -->
                 <div class="input-wrapper col-span-4" style="z-index: 30 !important">
-                    <label class="label-override mb-2">Profile Tag </label>
+                    <label class="label-override mb-2">Profile Tag 
+                        <TagIcon />
+                    </label>
                     <Dropdown
                         :class="`input-default dropdown w-full ${errors.includes('profileTag') ? 'error' : ''}`"
                         :default="ui.profile.accountTags[0]"
@@ -22,7 +24,9 @@
 
                 <!-- Card Number -->
                 <div class="input-wrapper col-span-8 z-0">
-                    <label class="label-override mb-2">Card Number </label>
+                    <label class="label-override mb-2">Card Number 
+                        <CartIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('cardNumber') ? 'error' : ''}`">
                         <input
                             ref="cardNumberInput"
@@ -38,7 +42,9 @@
 
                 <!-- Country chooser -->
                 <div class="input-wrapper col-span-2">
-                    <label class="label-override mb-2">Country </label>
+                    <label class="label-override mb-2">Country 
+                        <SandclockIcon />
+                    </label>
                     <ProfileCountryChooser
                         class="h-8"
                         :value="profile.country"
@@ -49,7 +55,9 @@
 
                 <!-- Exp Year -->
                 <div class="input-wrapper col-span-5">
-                    <label class="label-override mb-2 z-0">Expiry Year </label>
+                    <label class="label-override mb-2 z-0">Expiry Year 
+                        <TimerIcon />
+                    </label>
                     <Dropdown
                         :class="`input-default dropdown w-full ${errors.includes('expYear') ? 'error' : ''}`"
                         default="Expiry Year"
@@ -66,8 +74,10 @@
                 </div>
 
                 <!-- Exp Month -->
-                <div class="input-wrapper col-span-5">
-                    <label class="label-override mb-2">Expiry Month </label>
+                <div class="input-wrapper col-span-5 z-2">
+                    <label class="label-override mb-2">Expiry Month 
+                        <TimerIcon />
+                    </label>
                     <Dropdown
                         :class="`input-default dropdown w-full ${errors.includes('expMonth') ? 'error' : ''}`"
                         default="Expiry Month"
@@ -79,7 +89,9 @@
 
                 <!-- CVV -->
                 <div class="input-wrapper col-span-6 md:col-span-4 z-0">
-                    <label class="label-override mb-2">CVV </label>
+                    <label class="label-override mb-2">CVV 
+                        <ShieldIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('cvv') ? 'error' : ''}`">
                         <input
                             placeholder="183"
@@ -94,20 +106,24 @@
 
                 <!-- City -->
                 <div class="input-wrapper col-span-6 md:col-span-4 z-0">
-                    <label class="label-override mb-2">City </label>
+                    <label class="label-override mb-2">City 
+                        <StadiumIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('city') ? 'error' : ''}`">
                         <input placeholder="Denver" v-model="profile.city" />
                     </div>
                 </div>
 
                 <!-- State -->
-                <div class="input-wrapper col-span-6 md:col-span-4 z-50">
-                    <label class="label-override mb-2">State </label>
+                <div class="input-wrapper col-span-6 md:col-span-4 z-1">
+                    <label class="label-override mb-2">State 
+                        <SandclockIcon />
+                    </label>
                     <div v-if="profile.country === 'US'" :class="`${errors.includes('state') ? 'error' : ''}`">
                         <Dropdown
                             class="input-default w-full"
                             default="Select State"
-                            :onClick="(state) => profile.state = state"
+                            :onClick="(state) => (profile.state = state)"
                             :options="usStates"
                             :allowDefault="false"
                             rightAmount="right-2"
@@ -121,26 +137,45 @@
 
                 <!-- Zip -->
                 <div class="input-wrapper col-span-6 md:col-span-4 z-0">
-                    <label class="label-override mb-2">Zip </label>
+                    <label class="label-override mb-2">Zip 
+                        <KeyIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('zipCode') ? 'error' : ''}`">
-                        <input placeholder="80281" type="number" min="1" max="12" v-model="profile.zipCode" />
+                        <input placeholder="10005" type="number" min="1" max="12" v-model="profile.zipCode" />
                     </div>
                 </div>
 
                 <!-- Address -->
                 <div class="input-wrapper col-span-6 md:col-span-4 z-0">
-                    <label class="label-override mb-2">Address </label>
+                    <label class="label-override mb-2">Address 
+                        <HandIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('address') ? 'error' : ''}`">
-                        <input placeholder="Denver" v-model="profile.address" />
+                        <input placeholder="100 5th Avenue" v-model="profile.address" />
                     </div>
                 </div>
 
                 <!-- Generate -->
                 <div class="input-wrapper col-span-6 md:col-span-4 z-0">
-                    <label class="label-override mb-2 z-0"> Fake ID</label>
+                    <label class="label-override mb-2"> Fake ID
+                        <WildcardIcon />
+                    </label>
                     <div class="input-default mt-2 w-full h-10 flex items-center">
-                        <button @click="generate" class="text-white w-full text-xs flex items-center justify-center gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <button
+                            @click="generate"
+                            class="text-white w-full text-xs flex items-center justify-center gap-2"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="14"
+                                height="14"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
                                 <rect x="3" y="4" width="18" height="16" rx="2" />
                                 <line x1="7" y1="2" x2="7" y2="6" />
                                 <line x1="17" y1="2" x2="17" y2="6" />
@@ -169,6 +204,12 @@
 .z-0 {
     z-index: 0 !important;
 }
+.z-1 {
+    z-index: 1 !important;
+}
+.z-1 {
+    z-index: 2 !important;
+}
 
 .error {
     border-width: 2px !important;
@@ -177,6 +218,7 @@
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
+import { MailIcon, CartIcon, ShieldIcon, StadiumIcon, KeyIcon, HandIcon, ProfileIcon, SandclockIcon, TimerIcon, TagIcon, WildcardIcon } from "@/components/icons";
 import { EditIcon } from "@/components/icons";
 import ProfileCountryChooser from "@/components/Editors/Profile/ProfileCountryChooser.vue";
 import { useUIStore } from "@/stores/ui";
@@ -191,7 +233,55 @@ const ui = useUIStore();
 
 // US States list (excluding GA and PR, alphabetically ordered)
 const usStates = [
-    "AK", "AL", "AR", "AZ", "CA", "CO", "CT", "DE", "FL", "HI", "IA", "ID", "IL", "IN", "KS", "KY", "LA", "MA", "MD", "ME", "MI", "MN", "MO", "MS", "MT", "NC", "ND", "NE", "NH", "NJ", "NM", "NV", "NY", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VA", "VT", "WA", "WI", "WV", "WY"
+    "AK",
+    "AL",
+    "AR",
+    "AZ",
+    "CA",
+    "CO",
+    "CT",
+    "DE",
+    "FL",
+    "HI",
+    "IA",
+    "ID",
+    "IL",
+    "IN",
+    "KS",
+    "KY",
+    "LA",
+    "MA",
+    "MD",
+    "ME",
+    "MI",
+    "MN",
+    "MO",
+    "MS",
+    "MT",
+    "NC",
+    "ND",
+    "NE",
+    "NH",
+    "NJ",
+    "NM",
+    "NV",
+    "NY",
+    "OH",
+    "OK",
+    "OR",
+    "PA",
+    "RI",
+    "SC",
+    "SD",
+    "TN",
+    "TX",
+    "UT",
+    "VA",
+    "VT",
+    "WA",
+    "WI",
+    "WV",
+    "WY"
 ];
 const cardNumberInput = ref(null);
 const profile = ref({
@@ -232,17 +322,20 @@ const formatCardNumberDisplay = () => {
 };
 
 // Watch for changes in profile.cardNumber to sync with display
-watch(() => profile.value.cardNumber, (newValue) => {
-    if (newValue) {
-        const cleanNumber = newValue.replace(/\s+/g, "");
-        if (cleanNumber) {
-            const cardInfo = validateCard(cleanNumber);
-            displayCardNumber.value = cardInfo.formatted;
+watch(
+    () => profile.value.cardNumber,
+    (newValue) => {
+        if (newValue) {
+            const cleanNumber = newValue.replace(/\s+/g, "");
+            if (cleanNumber) {
+                const cardInfo = validateCard(cleanNumber);
+                displayCardNumber.value = cardInfo.formatted;
+            }
+        } else {
+            displayCardNumber.value = "";
         }
-    } else {
-        displayCardNumber.value = "";
     }
-});
+);
 
 // Initialize on modal open
 onMounted(() => {
@@ -277,9 +370,10 @@ const validate = (p) => {
     if (!/^\d{3,4}$/.test(`${p.cvv}`)) errors.value.push("cvv");
     const cleanCardNumber = p.cardNumber.replace(/\s+/g, "");
     // Validate card number based on type and length
-    const isValidCard = cleanCardNumber.match(/^4\d{15}$/) || // Visa (16 digits)
-                       cleanCardNumber.match(/^5[1-5]\d{14}$/) || // Mastercard (16 digits)
-                       cleanCardNumber.match(/^3[47]\d{13}$/); // AMEX (15 digits)
+    const isValidCard =
+        cleanCardNumber.match(/^4\d{15}$/) || // Visa (16 digits)
+        cleanCardNumber.match(/^5[1-5]\d{14}$/) || // Mastercard (16 digits)
+        cleanCardNumber.match(/^3[47]\d{13}$/); // AMEX (15 digits)
     if (!isValidCard) errors.value.push("cardNumber");
     if (!p.expYear) errors.value.push("expYear");
     if (!p.expMonth) errors.value.push("expMonth");
@@ -289,18 +383,18 @@ const validate = (p) => {
 
 const handleCreditCardUpdate = (event) => {
     const value = event.target.value.replace(/\D/g, "");
-    
+
     // Determine max length based on card type
     let maxLength = 16; // Default for Visa/Mastercard
-    if (value.startsWith('3')) {
+    if (value.startsWith("3")) {
         maxLength = 15; // AMEX
-    } else if (value.startsWith('4') || value.startsWith('5')) {
+    } else if (value.startsWith("4") || value.startsWith("5")) {
         maxLength = 16; // Visa/Mastercard
     }
-    
+
     const subs = value.substring(0, maxLength);
     const cardInfo = validateCard(subs);
-    
+
     // Store clean number (without spaces) in profile
     profile.value.cardNumber = subs;
     // Display formatted number in input
@@ -309,10 +403,10 @@ const handleCreditCardUpdate = (event) => {
 
 function done() {
     // Clear state if country is not US
-    if (profile.value.country !== 'US') {
-        profile.value.state = '';
+    if (profile.value.country !== "US") {
+        profile.value.state = "";
     }
-    
+
     ui.logger.Info("Created profile", profile.value);
     if (validate(profile.value) !== true) return;
     ui.toggleModal("");

package/src/components/Editors/Profile/Profile.vue

@@ -77,35 +77,110 @@ h4 {
     @apply text-center;
 }
 .task-buttons {
-    @apply flex mx-auto gap-x-2;
-    
+    @apply flex items-center justify-center mx-auto bg-dark-500 border border-dark-650 rounded;
+    padding: 3px;
+    gap: 2px;
+
     button {
-        @apply p-1 rounded transition-colors hover:bg-dark-500;
-    }
-    
-    svg {
-        @apply w-4 h-4;
+        @apply flex items-center justify-center transition-all duration-150 border-0 outline-0 relative rounded;
+        background: transparent;
+        width: 28px;
+        height: 28px;
+        color: #d0d0d3;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: #ffffff;
+            transform: scale(1.05);
+        }
+
+        &:active {
+            background: rgba(255, 255, 255, 0.2);
+            transform: scale(0.95);
+        }
     }
-    
+
+    svg,
     img {
-        @apply w-4 h-4;
+        width: 16px;
+        height: 16px;
+        position: relative;
+        z-index: 1;
+    }
+
+    svg path {
+        fill: currentColor;
     }
 }
 
+// Tablet optimization
 @media (max-width: 1024px) {
     h4 {
         font-size: 10px !important;
     }
+
     .task-buttons {
-        @apply gap-x-3;
+        padding: 3px;
+        gap: 2px;
+
+        button {
+            width: 26px;
+            height: 26px;
+        }
+
+        svg,
+        img {
+            width: 14px;
+            height: 14px;
+        }
     }
+
     .task-id {
         font-size: 6px !important;
         margin-right: -12px;
         margin-top: 20px;
     }
-    .task-id-alt {
-        font-size: 7px !important;
+}
+
+// Mobile optimization
+@media (max-width: 768px) {
+    .task-buttons {
+        padding: 2px;
+        gap: 1px;
+
+        button {
+            width: 22px;
+            height: 22px;
+        }
+
+        svg,
+        img {
+            width: 12px;
+            height: 12px;
+        }
+    }
+}
+
+// iPhone vertical (portrait) specific
+@media (max-width: 480px) and (orientation: portrait) {
+    .task-buttons {
+        padding: 2px;
+        gap: 1px;
+
+        button {
+            width: 18px;
+            height: 18px;
+
+            &:hover {
+                transform: scale(1.1);
+            }
+        }
+
+        svg,
+        img {
+            width: 10px;
+            height: 10px;
+        }
     }
 }
 </style>

package/src/components/Editors/Profile/ProfileView.vue

@@ -6,6 +6,7 @@
                     class="mr-3"
                     :toggled="ui.mainCheckbox.profiles"
                     @valueUpdate="ui.toggleMainCheckbox('profiles')"
+                    :isHeader="true"
                 />
                 <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
                     <ProfileIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />

package/src/components/Filter/Filter.vue

@@ -15,7 +15,7 @@
                     </div>
                     <div class="flex-1 min-w-0">
                         <h3 class="font-medium text-white group-hover:text-light-400 transition-colors text-sm sm:text-base truncate">{{ filterTitle }}</h3>
-                        <p class="text-xs text-gray mt-1 truncate" v-if="getFilterSubtitle()">{{ getFilterSubtitle() }}</p>
+                        <p class="text-xs mt-1 truncate text-light-400" v-if="getFilterSubtitle()">{{ getFilterSubtitle() }}</p>
                     </div>
                 </div>
                 <div class="expanded-content mt-4 mx-2 sm:mx-0" v-if="filterBuilder.expandedFilter === filter.id">
@@ -87,7 +87,7 @@
                             <label class="text-sm font-medium">Excluded</label>
                         </div>
                         <div class="flex items-center gap-2 control-group">
-                            <label class="text-xs text-gray whitespace-nowrap">Min:</label>
+                            <label class="text-xs whitespace-nowrap text-light-400">Min:</label>
                             <input
                                 type="number"
                                 :value="filter.minPrice"
@@ -105,7 +105,7 @@
                             />
                         </div>
                         <div class="flex items-center gap-2 control-group">
-                            <label class="text-xs text-gray whitespace-nowrap">Max:</label>
+                            <label class="text-xs whitespace-nowrap text-light-400">Max:</label>
                             <input
                                 type="number"
                                 :value="filter.maxPrice"
@@ -289,22 +289,22 @@ props.filterBuilder.onUpdate(() => {
 <style scoped>
 .filter-card {
     @apply bg-dark-500 border-dark-550 relative;
-    border: 1px solid rgba(74, 74, 97, 0.3);
+    border: 1px solid rgba(61, 62, 68, 0.3);
     margin-bottom: 8px;
     transition: all 0.15s ease-out;
 }
 
 .filter-card:hover:not(.expanded-filter) {
-    border-color: rgba(74, 74, 97, 0.6);
-    background-color: rgba(45, 47, 74, 0.8);
+    border-color: rgba(61, 62, 68, 0.6);
+    background-color: rgba(46, 47, 52, 0.8);
 }
 
 .expanded-filter:hover {
-    border-color: rgba(74, 74, 97, 0.8);
+    border-color: rgba(61, 62, 68, 0.8);
 }
 
 .filter-card + .filter-card {
-    border-top: 1px solid rgba(74, 74, 97, 0.2);
+    border-top: 1px solid rgba(61, 62, 68, 0.2);
 }
 
 .filter-type-badge {
@@ -316,7 +316,7 @@ props.filterBuilder.onUpdate(() => {
 }
 
 .label {
-    @apply text-xs text-gray font-medium;
+    @apply text-xs font-medium text-light-400;
 }
 
 .value {
@@ -333,13 +333,13 @@ props.filterBuilder.onUpdate(() => {
 
 .filter-input {
     @apply border border-dark-550 rounded px-2 py-1.5 text-sm text-white focus:outline-none transition-colors;
-    background-color: rgba(32, 32, 54, 0.9);
+    background-color: rgba(35, 36, 41, 0.9);
     color: white;
 }
 
 .filter-input:focus {
-    border-color: #4A4A61;
-    background-color: rgba(45, 47, 74, 0.9);
+    border-color: #44454b;
+    background-color: rgba(46, 47, 52, 0.9);
 }
 
 .filter-input::placeholder {
@@ -351,7 +351,7 @@ props.filterBuilder.onUpdate(() => {
     width: 28px;
     height: 28px;
     color: #9CA3AF;
-    background-color: rgba(32, 32, 54, 0.8);
+    background-color: rgba(35, 36, 41, 0.8);
     backdrop-filter: blur(4px);
 }
 
@@ -369,8 +369,8 @@ props.filterBuilder.onUpdate(() => {
 }
 
 .drag-btn:hover {
-    background-color: rgba(74, 74, 97, 0.8);
-    border-color: #4A4A61;
+    background-color: rgba(68, 69, 75, 0.8);
+    border-color: #44454b;
 }
 
 .delete-btn:hover {
@@ -380,14 +380,14 @@ props.filterBuilder.onUpdate(() => {
 }
 
 .drag-handle.sortable-chosen {
-    border: 1px solid #4A4A61;
-    background-color: rgba(74, 74, 97, 0.2);
+    border: 1px solid #44454b;
+    background-color: rgba(68, 69, 75, 0.2);
 }
 
 .filter-card.sortable-ghost {
     @apply opacity-50;
-    border: 1px solid #4A4A61;
-    background-color: rgba(74, 74, 97, 0.1);
+    border: 1px solid #44454b;
+    background-color: rgba(68, 69, 75, 0.1);
 }
 
 .filter-card.sortable-drag {
@@ -395,18 +395,18 @@ props.filterBuilder.onUpdate(() => {
 }
 
 .expanded-filter {
-    border-left: 4px solid #4A4A61;
-    background-color: rgba(27, 28, 43, 0.95);
+    border-left: 4px solid #44454b;
+    background-color: rgba(26, 27, 30, 0.95);
 }
 
 .expanded-content {
-    background-color: rgba(27, 28, 43, 0.95);
+    background-color: rgba(26, 27, 30, 0.95);
     border-radius: 6px;
     padding: 12px;
 }
 
 .controls-section {
-    background-color: rgba(27, 28, 43, 0.98);
+    background-color: rgba(26, 27, 30, 0.98);
     border-radius: 6px;
     padding: 12px;
 }

package/src/components/Filter/FilterPreview.vue

@@ -52,7 +52,7 @@
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     overflow: hidden;
-    background-color: #1a1a2e;
+    background-color: #2e2f34;
 }
 
 .editor-wrapper {
@@ -80,7 +80,7 @@
     line-height: 1.6;
     tab-size: 4;
     outline: none;
-    border: 1px solid #2d2d3b;
+    border: 1px solid #3d3e44;
     border-radius: 8px;
     z-index: 10;
     position: absolute;

package/src/components/Filter/PriceSortToggle.vue

@@ -81,20 +81,22 @@ const getCurrentText = () => {
 
 <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;
+    @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-400 text-white border-light-300;
+    @apply bg-dark-550 border-dark-700 hover:bg-dark-600;
+    color: #d4d4d4;
     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;
 }

package/src/components/Table/Table.vue

@@ -5,10 +5,12 @@
 </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-b-0 border-dark-650 bg-dark-400;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .table-component > .grid {
     @apply bg-dark-500;
+    border-bottom: 1px solid #3d3e44;
 }
 </style>

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

@@ -7,7 +7,7 @@
             <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">
+            <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-300 text-sm flex-grow xl:flex-initial"></h4>
@@ -15,7 +15,7 @@
         <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"
+                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
@@ -23,7 +23,7 @@
             </button>
 
             <button
-                class="bg-dark-400 smooth-hover flex-grow xl:flex-initial w-36 border border-light-300 hover:border-light-400"
+                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'"