@necrolab/dashboard 0.4.34 → 0.4.35

package/src/stores/sampleData.js

@@ -872,7 +872,7 @@ export default {
         {
             _id: 1,
             profileName: "Harry Potter",
-            cardNumber: "48474638474545",
+            cardNumber: "4847463847454545",
             expMonth: "12",
             expYear: "28",
             country: "US",
@@ -882,7 +882,7 @@ export default {
         {
             _id: 2,
             profileName: "Draco Malfoy",
-            cardNumber: "38474638474545",
+            cardNumber: "3847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"]
@@ -890,7 +890,7 @@ export default {
         {
             _id: 3,
             profileName: "Tom Smith",
-            cardNumber: "58474638474545",
+            cardNumber: "5847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"],
@@ -899,7 +899,7 @@ export default {
         {
             _id: 1,
             profileName: "Harry Potter",
-            cardNumber: "48474638474545",
+            cardNumber: "4847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"]
@@ -907,7 +907,7 @@ export default {
         {
             _id: 2,
             profileName: "Draco Malfoy",
-            cardNumber: "38474638474545",
+            cardNumber: "3847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"]
@@ -915,7 +915,7 @@ export default {
         {
             _id: 3,
             profileName: "Tom Smith",
-            cardNumber: "58474638474545",
+            cardNumber: "5847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"],
@@ -924,7 +924,7 @@ export default {
         {
             _id: 1,
             profileName: "Harry Potter",
-            cardNumber: "48474638474545",
+            cardNumber: "4847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"]
@@ -932,7 +932,7 @@ export default {
         {
             _id: 2,
             profileName: "Draco Malfoy",
-            cardNumber: "38474638474545",
+            cardNumber: "3847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"]
@@ -940,7 +940,7 @@ export default {
         {
             _id: 3,
             profileName: "Tom Smith",
-            cardNumber: "58474638474545",
+            cardNumber: "5847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"],
@@ -949,7 +949,7 @@ export default {
         {
             _id: 1,
             profileName: "Harry Potter",
-            cardNumber: "48474638474545",
+            cardNumber: "4847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"]
@@ -957,7 +957,7 @@ export default {
         {
             _id: 2,
             profileName: "Draco Malfoy",
-            cardNumber: "38474638474545",
+            cardNumber: "3847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"]
@@ -965,7 +965,7 @@ export default {
         {
             _id: 3,
             profileName: "Tom Smith",
-            cardNumber: "58474638474545",
+            cardNumber: "5847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"],
@@ -974,7 +974,7 @@ export default {
         {
             _id: 1,
             profileName: "Harry Potter",
-            cardNumber: "48474638474545",
+            cardNumber: "4847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"]
@@ -982,7 +982,7 @@ export default {
         {
             _id: 2,
             profileName: "Draco Malfoy",
-            cardNumber: "38474638474545",
+            cardNumber: "3847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"]
@@ -990,7 +990,7 @@ export default {
         {
             _id: 3,
             profileName: "Tom Smith",
-            cardNumber: "58474638474545",
+            cardNumber: "5847463847454545",
             expMonth: "12",
             expYear: "28",
             tags: ["admin", "amex"],

package/src/stores/ui.js

@@ -517,7 +517,7 @@ export const useUIStore = defineStore("ui", () => {
         currentEvent,
         setCurrentEvent: (event) => {
             logger.Info("Setting current event", event);
-            currentEvent.value = event;
+            currentEvent.value = event.match(/\s\((.*?)\)$/)[1];
             localStorage.setItem("current-event", currentEvent.value);
             refreshQueueStats();
         },

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/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,7 +1,7 @@
 <template>
     <div class="filter-builder-container w-full min-h-0 flex flex-col overflow-hidden">
         <!-- Heading -->
-        <div class="flex-between pt-4 pb-1 mx-4 mt-1">
+        <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>
@@ -21,7 +21,7 @@
             </div>
         </div>
 
-        <div class="card-dark mx-4 mb-2 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">
@@ -641,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 {

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

@@ -9,28 +9,61 @@
                 </h4>
             </div>
             <ul class="mobile-icons mobile-header-controls">
-                <li><button @click="ui.startTasks()"><PlayIcon class="w-4 h-4" /></button></li>
-                <li><button @click="ui.stopTasks()"><PauseIcon class="w-4 h-4" /></button></li>
-                <li><button class="text-sm" :disabled="ui.disabledButtons['add-tasks']" @click="ui.toggleModal('create-task')"><PlusIcon class="w-4 h-4" /></button></li>
-                <li><button @click="ui.deleteTasks()"><TrashIcon class="h-3.5 w-3.5" /></button></li>
+                <li>
+                    <button @click="ui.startTasks()"><PlayIcon class="w-4 h-4" /></button>
+                </li>
+                <li>
+                    <button @click="ui.stopTasks()"><PauseIcon class="w-4 h-4" /></button>
+                </li>
+                <li>
+                    <button
+                        class="text-sm"
+                        :disabled="ui.disabledButtons['add-tasks']"
+                        @click="ui.toggleModal('create-task')"
+                    >
+                        <PlusIcon class="w-4 h-4" />
+                    </button>
+                </li>
+                <li>
+                    <button @click="ui.deleteTasks()"><TrashIcon class="h-3.5 w-3.5" /></button>
+                </li>
             </ul>
         </div>
 
         <Stats />
 
         <div class="controls-wrapper lg:mb-6 mb-3">
-            <DesktopControls class="desktop-controls-hide" @stopAll="ui.stopTasks()" @startAll="ui.startTasks()" @deleteAll="ui.deleteTasks()" />
+            <DesktopControls
+                class="desktop-controls-hide"
+                @stopAll="ui.stopTasks()"
+                @startAll="ui.startTasks()"
+                @deleteAll="ui.deleteTasks()"
+            />
         </div>
-        
+
         <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-32 md:max-w-72 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 md:min-w-72" rightAmount="right-2" />
+            <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>
-            <PriceSortToggle class="min-w-24 max-w-28 flex-shrink-0" :options="['All', 'Checkout']" :darker="true" :current="ui.taskFilter" @change="(e) => ui.setTaskFilter(e)" />
+            <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>
 
         <TaskView class="lg:mb-6 mb-3" :tasks="ui.tasks" />
-        
+
         <Utilities class="utilities-section" />
 
         <transition-group name="fade" mode="out-in">
@@ -47,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 {
@@ -95,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
     }
 });