@necrolab/dashboard 0.4.33 → 0.4.35

package/src/views/Accounts.vue

@@ -44,6 +44,11 @@
                 <input
                     class="h-10 w-44 text-white text-sm p-2 bg-dark-500 flex items-center relative border-2 border-dark-550"
                     placeholder="Search Email"
+                    autocomplete="new-password"
+                    data-dashlane-rid=""
+                    data-dashlane-label=""
+                    data-dashlane-classification=""
+                    data-form-type="other"
                     v-model="ui.search.accounts.query"
                 />
 
@@ -75,14 +80,14 @@
 
             <div class="ml-auto gap-2 hidden lg:flex">
                 <div
-                    class="bg-dark-400 border border-light-300 justify-between px-4 w-44 flex text-white text-xs font-medium items-center rounded-md ml-auto h-10"
+                    class="bg-dark-400 border border-dark-650 justify-between px-4 w-44 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['create-accounts']"
-                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-light-300 hover:border-light-400 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-dark-650 hover:border-dark-700 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
                     @click="ui.toggleModal('account-creator')"
                 >
                     Create Accounts <PlayIcon class="ml-2" />
@@ -90,7 +95,7 @@
 
                 <button
                     :disabled="ui.disabledButtons['add-accounts']"
-                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-light-300 hover:border-light-400 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-dark-650 hover:border-dark-700 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
                     @click="ui.toggleModal('create-account')"
                 >
                     Add Account
@@ -113,7 +118,7 @@
 .custom-dropdown-content {
     top: 2.6rem !important;
     left: -13px;
-    @apply border border-light-300;
+    @apply border border-dark-650;
 }
 
 /* Search dropdown should always be h-10 and have no left corners */

package/src/views/Console.vue

@@ -90,15 +90,22 @@
 
         @apply w-full focus:outline-none text-white;
     }
-    // $border: 1px;
-    // &:before {
-    //     content: "";
-    //     @apply absolute top-0 left-0 right-0 bottom-0 opacity-60;
-    //     z-index: -2;
-    //     margin: -$border;
-    //     border-radius: inherit;
-    //     background: radial-gradient(rgba(96, 66, 255, 0.6), rgba(255, 255, 255, 0));
-    // }
+}
+
+// iPhone vertical (portrait) optimization for console
+@media (max-width: 480px) and (orientation: portrait) {
+    .console {
+        height: calc(100vh - 20rem);
+        @apply p-1 text-xs;
+        
+        pre {
+            line-height: 1.2;
+        }
+        
+        code {
+            font-size: 0.7rem !important;
+        }
+    }
 }
 
 .text-xxs {

package/src/views/Editor.vue

@@ -95,7 +95,7 @@
                     <p class="text-red-400 text-bold">{{ errorMessage }}</p>
                 </div>
             </transition>
-            <div class="border border-light-300 my-8" />
+            <div class="border border-dark-650 my-8" />
 
             <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Proxy Editor</h5>
             <div class="flex justify-between items-center mb-4 relative z-60">
@@ -541,7 +541,7 @@ loadProxyLists();
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     overflow: hidden;
-    background-color: #1a1a2e;
+    background-color: #2e2f34;
 }
 
 .editor-wrapper {
@@ -617,10 +617,10 @@ loadProxyLists();
 
 /* Proxy editor container */
 .proxy-editor-container {
-    @apply w-full overflow-hidden rounded-lg border border-dark-550;
+    @apply w-full overflow-hidden rounded-lg border border-dark-600;
     height: 400px;
     max-height: 60vh;
-    background-color: #1a1a2e;
+    background-color: #2e2f34;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
@@ -640,7 +640,7 @@ loadProxyLists();
 .proxy-editor {
     @apply w-full h-full resize-none focus:outline-none;
     background-color: transparent;
-    color: #f8f8f2;
+    color: #e2e2e5;
     font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
     padding: 12px;
     border: none;
@@ -655,8 +655,8 @@ loadProxyLists();
 }
 
 .proxy-editor-container:focus-within {
-    border-color: #6272a4;
-    box-shadow: 0 0 0 2px rgba(98, 114, 164, 0.25);
+    border-color: #5d7cc0;
+    box-shadow: 0 0 0 2px rgba(93, 124, 192, 0.25);
 }
 
 /* Prism.js dark theme */

package/src/views/FilterBuilder.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="filter-builder-container w-full min-h-0 flex flex-col overflow-hidden">
         <!-- Heading -->
-        <div class="flex-between pt-5 pb-2 mx-4 mt-2">
+        <div class="flex-between pt-4 pb-1 px-4 mt-1">
             <div class="flex-center gap-4">
                 <FilterIcon class="cursor-pointer smooth-hover text-white" />
                 <h4 class="text-heading">Filter creator</h4>
             </div>
             <div class="flex items-center">
                 <input
-                    class="h-10 text-white text-sm p-2 bg-dark-500 w-48 flex items-center rounded-l relative border-2 border-dark-550"
+                    class="h-10 text-white text-sm p-2 bg-dark-500 w-48 flex items-center rounded-l rounded-r-none relative border-2 border-dark-550"
                     placeholder="Event ID"
                     v-model="eventId"
                 />
@@ -21,7 +21,7 @@
             </div>
         </div>
 
-        <div class="card-dark mx-4 mb-3 p-3 overflow-hidden">
+        <div class="card-dark mb-2 p-3 overflow-hidden">
             <div class="w-full h-full">
                 <!-- Main -->
                 <div class="grid grid-cols-1 lg:grid-cols-5 gap-3 lg:gap-4 w-full h-full">
@@ -90,17 +90,11 @@
                                         />
                                     </div>
                                     <div class="flex gap-2 items-center">
-                                        <button
-                                            class="header-btn save-btn"
-                                            @click="saveFilter"
-                                        >
+                                        <button class="header-btn save-btn" @click="saveFilter">
                                             <EditIcon class="w-4 h-4" />
                                             <span class="lg:block hidden">Save</span>
                                         </button>
-                                        <button
-                                            class="header-btn clear-btn"
-                                            @click="filterBuilder.reset(false)"
-                                        >
+                                        <button class="header-btn clear-btn" @click="filterBuilder.reset(false)">
                                             <TrashIcon class="w-4 h-4" />
                                             <span class="lg:block hidden">Clear</span>
                                         </button>
@@ -137,21 +131,24 @@
                                         </template>
                                     </draggable>
                                 </div>
-                                <div v-else class="empty-state flex flex-col items-center justify-center py-8 text-center">
+                                <div
+                                    v-else
+                                    class="empty-state flex flex-col items-center justify-center py-8 text-center"
+                                >
                                     <FilterIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50" />
                                     <p class="text-dark-400 text-sm">No filters yet</p>
                                     <p class="text-dark-500 text-xs mt-1">Click on the map to create filters</p>
                                 </div>
                             </div>
                         </Table>
-                        <div class="flex items-center justify-between text-white gap-2 mt-1 mb-4 md:mb-0 flex-shrink-0">
+                        <div class="flex items-center justify-between text-white gap-2 mt-1 mb-2 md:mb-0 flex-shrink-0">
                             <button
                                 @click="addWildcardFilter"
                                 :disabled="hasWildcardFilter"
                                 :class="[
                                     'border-2 rounded border-dark-550 px-2 h-7 text-xs bg-dark-500 overflow-hidden shadow transition-all duration-200',
-                                    hasWildcardFilter 
-                                        ? 'text-gray opacity-50 cursor-not-allowed' 
+                                    hasWildcardFilter
+                                        ? 'text-gray opacity-50 cursor-not-allowed'
                                         : 'text-gray smooth-hover hover:bg-dark-400 hover:border-light-300'
                                 ]"
                                 :title="hasWildcardFilter ? 'Wildcard filter already exists' : 'Add wildcard filter'"
@@ -349,9 +346,7 @@ const shownFilters = ref("All");
 const filterBuilder = ref(new FilterBuilder());
 
 const hasWildcardFilter = computed(() => {
-    return filterBuilder.value.filters.some(filter => 
-        filter.buyAny && filterBuilder.value.isForCurrentEvent(filter)
-    );
+    return filterBuilder.value.filters.some((filter) => filter.buyAny && filterBuilder.value.isForCurrentEvent(filter));
 });
 
 const addWildcardFilter = () => {
@@ -646,13 +641,13 @@ watch(renderSeats, async () => {
 /* Dragging states for better UX */
 .sortable-ghost {
     @apply opacity-30;
-    border: 1px solid #4A4A61;
-    background-color: rgba(74, 74, 97, 0.1);
+    border: 1px solid #44454b;
+    background-color: rgba(68, 69, 75, 0.1);
 }
 
 .sortable-chosen .drag-handle {
-    border: 1px solid #4A4A61;
-    background-color: rgba(74, 74, 97, 0.2);
+    border: 1px solid #44454b;
+    background-color: rgba(68, 69, 75, 0.2);
 }
 
 .sortable-drag {
@@ -699,6 +694,29 @@ watch(renderSeats, async () => {
     }
 
     .card-dark {
+        height: auto;
+        overflow: auto;
+    }
+}
+
+/* Mobile portrait header spacing fixes */
+@media (max-width: 640px) {
+    .filter-builder-container .flex-center {
+        gap: 0.5rem;
+    }
+}
+
+/* iPhone landscape and tablet portrait mode fixes */
+@media (max-width: 1023px) and (max-height: 768px) {
+    .filter-builder-container {
+        height: auto;
+        min-height: 100vh;
+        overflow: auto;
+    }
+
+    .card-dark {
+        height: auto;
+        min-height: 500px;
         overflow: auto;
     }
 }

package/src/views/Profiles.vue

@@ -68,7 +68,7 @@
                     @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"
+                    class="rounded-r-lg w-32 bg-dark-500 relative z-50 border-2 border-dark-600 search-dropdown"
                     style="margin-left: 0 !important; border-width: 2px !important"
                     rightAmount="right-1"
                     default="Any"
@@ -81,7 +81,7 @@
 
             <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"
+                    class="bg-dark-400 border border-dark-650 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" />
@@ -102,7 +102,7 @@
                 </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"
+                    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-dark-650 hover:border-dark-700 ml-auto h-10"
                     @click="ui.toggleModal('create-profile')"
                 >
                     Add Profile
@@ -124,7 +124,7 @@
 .custom-dropdown-content {
     top: 2.6rem !important;
     left: -13px;
-    @apply border border-light-300;
+    @apply border border-dark-650;
 }
 
 /* Search dropdown should always be h-10 and have no left corners */

package/src/views/Tasks.vue

@@ -1,7 +1,6 @@
 <template>
-    <div>
+    <div class="tasks-page">
         <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">
@@ -11,14 +10,10 @@
             </div>
             <ul class="mobile-icons mobile-header-controls">
                 <li>
-                    <button @click="ui.startTasks()">
-                        <PlayIcon class="w-4 h-4" />
-                    </button>
+                    <button @click="ui.startTasks()"><PlayIcon class="w-4 h-4" /></button>
                 </li>
                 <li>
-                    <button @click="ui.stopTasks()">
-                        <PauseIcon class="w-4 h-4" />
-                    </button>
+                    <button @click="ui.stopTasks()"><PauseIcon class="w-4 h-4" /></button>
                 </li>
                 <li>
                     <button
@@ -30,17 +25,14 @@
                     </button>
                 </li>
                 <li>
-                    <button @click="ui.deleteTasks()">
-                        <TrashIcon class="h-3.5 w-3.5" />
-                    </button>
+                    <button @click="ui.deleteTasks()"><TrashIcon class="h-3.5 w-3.5" /></button>
                 </li>
             </ul>
         </div>
 
         <Stats />
 
-        <!-- Controls -->
-        <div class="controls-wrapper mb-6">
+        <div class="controls-wrapper lg:mb-6 mb-3">
             <DesktopControls
                 class="desktop-controls-hide"
                 @stopAll="ui.stopTasks()"
@@ -48,49 +40,35 @@
                 @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 class="flex items-center justify-between gap-2 lg:mb-2 mb-1">
+            <div v-if="uniqEventIds.length > 1" class="flex-1 md:min-w-96 md:max-w-96 md:flex-none">
+                <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>
-            <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>
+            <PriceSortToggle
+                class="min-w-24 max-w-28 flex-shrink-0"
+                :options="['All', 'Checkout']"
+                :darker="true"
+                :current="ui.taskFilter"
+                @change="(e) => ui.setTaskFilter(e)"
+            />
         </div>
 
-        <!-- Tasks (Table) -->
-        <TaskView class="mb-6" :tasks="ui.tasks" />
-        <!-- Utilities -->
-        <Utilities />
-        <!-- Modal -->
+        <TaskView class="lg:mb-6 mb-3" :tasks="ui.tasks" />
+
+        <Utilities class="utilities-section" />
+
         <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'" />
@@ -102,7 +80,7 @@
 .custom-dropdown-content {
     top: 2.6rem !important;
     left: -13px;
-    @apply border border-light-300;
+    @apply border border-dark-650;
 }
 
 .desktop-controls-hide {
@@ -117,7 +95,7 @@
     .desktop-controls-hide {
         display: flex !important;
     }
-    
+
     .mobile-header-controls {
         display: none !important;
     }
@@ -136,9 +114,10 @@ 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 { TrashIcon, GearIcon, PlusIcon, PlayIcon, PauseIcon } 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);
@@ -149,7 +128,7 @@ const uniqEventIds = computed(() => {
         ...new Set(
             Object.values(ui.tasks)
                 .filter((t) => t.siteId === ui.currentCountry.siteId && !t.eventId.includes("@"))
-                .map((v) => v.eventId)
+                .map((v) => `${v.eventName} (${v.eventId})`)
         )
     ];
     return ids;

package/tailwind.config.js

@@ -4,29 +4,77 @@ module.exports = {
     theme: {
         colors: {
             transparent: "transparent",
-            white: "#FFFFFF",
+            white: "#ffffff",
+            pure: "#ffffff", 
             lightgray: "#e5e7eb",
             green: {
-                400: "#44b744",
-                500: "#22c55e"
+                300: "#4ade80",
+                400: "#22c55e",
+                500: "#16a34a"
             },
             red: {
-                300: "#F87171",
-                400: "#EE8282"
+                300: "#f87171",
+                400: "#ef4444",
+                500: "#dc2626"
+            },
+            blue: {
+                300: "#60a5fa",
+                400: "#3b82f6",
+                500: "#2563eb"
+            },
+            yellow: {
+                300: "#fbbf24",
+                400: "#f59e0b",
+                500: "#d97706"
             },
             dark: {
-                300: "#1B1C2B",
-                400: "#2D2F4A",
-                500: "#202036",
-                550: "#292a43",
-                600: "#25263c"
+                50: "#f8fafc",
+                100: "#f1f5f9", 
+                200: "#e2e8f0",
+                300: "#1a1b1e", // Deep charcoal base
+                400: "#242529", // Card backgrounds  
+                500: "#2e2f34", // Input backgrounds
+                550: "#35363c", // Subtle elevation
+                600: "#3d3e44", // Borders
+                650: "#44454b", // Hover states
+                700: "#4b4c53", // Active states
+                750: "#52535a", // Selected states
+                800: "#13141a", // Deep background
+                850: "#0d0e14", // Deepest background
+                900: "#06070d"  // Ultra deep
             },
             light: {
-                300: "#4A4A61",
-                400: "#A7A8AF"
+                100: "#f6f8fa",
+                200: "#e1e4e8", 
+                300: "#e2e2e5", // Primary text
+                400: "#d0d0d3", // Secondary text
+                500: "#a0a0a6", // Muted text
+                600: "#71717a", // Disabled text
+                700: "#57575f", // Very muted
+                800: "#3e3e46", // Dark muted
+                900: "#27272d"  // Darkest muted
+            },
+            gray: {
+                50: "#f9fafb",
+                100: "#f3f4f6",
+                200: "#e5e7eb",
+                300: "#d1d5db",
+                400: "#9ca3af",
+                500: "#6b7280",
+                600: "#4b5563",
+                700: "#374151",
+                800: "#1f2937",
+                900: "#111827"
+            },
+            accent: {
+                blue: "#5d7cc0",
+                purple: "#b794c0", 
+                pink: "#d16d9e",
+                orange: "#d4976e",
+                yellow: "#e6d192",
+                green: "#88c999"
             },
-            gray: "#9CA3AF",
-            border: "#29293F"
+            border: "#3d3e44"
         },
         screens: {
             xs: "500px",

package/vite.config.js

@@ -58,6 +58,7 @@ export default defineConfig({
         port: 5173,
         strictPort: true,
         host: true,
-        cors: true
+        cors: true,
+        hmr: false
     }
 });