@necrolab/dashboard 0.4.61 → 0.4.208

package/src/views/Login.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="login-container" v-once>
-        <div class="login-card">
-            <div class="flex justify-center mb-8">
-                <img src="@/assets/img/logo_trans.png" class="h-16 object-cover" alt="Logo: Necro" />
-            </div>
-            <h2 class="text-l text-white text-center font-bold mb-6">Please login to proceed</h2>
+    <div class="flex flex-col justify-center mt-20" v-once>
+        <div class="mx-auto flex w-auto rounded-xl mb-8">
+            <img src="@/assets/img/logo_trans.png" class="h-14 mr-4 z-30 object-cover" alt="Logo: Russonoro" />
+        </div>
+        <h2 class="text-3xl text-white text-center font-bold mb-4">Login</h2>
 
+        <div class="login">
             <LoginForm />
         </div>
     </div>
@@ -14,76 +14,14 @@
 import LoginForm from "@/components/Auth/LoginForm.vue";
 </script>
 <style lang="scss" scoped>
-.login-container {
-    @apply flex flex-col items-center min-h-screen px-4;
-    margin-top: 3vh;
-
-    // Mobile devices
-    @media (max-width: 480px) {
-        margin-top: 2vh;
-    }
-
-    // Landscape mode
-    @media (orientation: landscape) {
-        margin-top: 1vh;
-        justify-content: flex-start;
-        min-height: 100vh;
-        min-height: 100dvh;
-    }
-}
-
-.login-card {
-    @apply bg-dark-400 border border-dark-650 rounded-lg shadow-xl;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-    width: 100%;
-    max-width: 420px;
-    padding: 1.75rem;
-
-    // Mobile devices
-    @media (max-width: 480px) {
-        max-width: 380px;
-        padding: 1.5rem;
-    }
-
-    // Landscape mode
-    @media (orientation: landscape) {
-        padding: 1.25rem;
-        margin: 0.25rem 0;
-
-        h2 {
-            @apply text-lg mb-2;
-        }
-
-        .flex.justify-center {
-            @apply mb-2;
-
-            img {
-                @apply h-10;
-            }
-        }
-    }
-}
-
-// Logo responsive sizing
-.login-card img {
-    @media (max-width: 480px) {
-        @apply h-12;
-    }
-
-    @media (orientation: landscape) {
-        @apply h-10;
-    }
-}
-
-// Title responsive sizing
-.login-card h2 {
-    @media (max-width: 480px) {
-        @apply text-lg mb-3;
-    }
-
-    @media (orientation: landscape) {
-        @apply text-base mb-2;
+.login {
+    //   @apply m-auto;
+    @media (min-width: 900px) {
+        width: 400px;
+        @apply m-auto;
+    }
+    @media (max-width: 899px) {
+        @apply px-6;
     }
 }
 </style>

package/src/views/Profiles.vue

@@ -1,14 +1,11 @@
 <template>
     <div>
-        <div class="flex-between pt-5 pb-2">
+        <div class="flex items-center justify-between">
             <!-- Heading -->
-            <div class="flex-center gap-4">
-                <GroupIcon class="cursor-pointer smooth-hover text-white" />
-                <h4 class="text-heading">
-                    Profiles
-                    <span class="text-subheading pl-1">{{ ui.getSelectedProfiles().length }}</span>
-                </h4>
-            </div>
+            <h4 class="text-white text-base font-bold mb-5 pt-5">
+                Profiles
+                <span class="text-light-300 pl-1">{{ ui.getSelectedProfiles().length }}</span>
+            </h4>
             <ul class="mobile-icons">
                 <li>
                     <EyeToggle v-model="privacy" />
@@ -17,27 +14,18 @@
                     <button
                         :disabled="ui.disabledButtons['add-profiles']"
                         @click="ui.toggleModal('create-profile', true)"
-                        class="smooth-hover"
                     >
-                        <PlusIcon class="w-4 h-4" />
+                        <PlusIcon />
                     </button>
                 </li>
                 <li>
-                    <button
-                        :disabled="ui.disabledButtons['add-profiles']"
-                        @click="disable"
-                        class="smooth-hover text-red-400"
-                    >
-                        <CloseXIcon />
+                    <button :disabled="ui.disabledButtons['add-profiles']" @click="disable">
+                        <img width="15px" src="/img/controls/disable.svg" />
                     </button>
                 </li>
                 <li>
-                    <button
-                        :disabled="ui.disabledButtons['add-profiles']"
-                        @click="enable"
-                        class="smooth-hover text-green-400"
-                    >
-                        <CheckIcon />
+                    <button :disabled="ui.disabledButtons['add-profiles']" @click="enable">
+                        <img width="15px" src="/img/controls/enable.svg" />
                     </button>
                 </li>
             </ul>
@@ -68,20 +56,20 @@
                     @change="(f) => (ui.search.profiles.tag = f)"
                 /> -->
                 <Dropdown
-                    class="dropdown-base rounded-r-lg w-32 relative z-50 search-dropdown"
+                    class="rounded-r w-32 bg-dark-500 relative z-50 border-2 border-dark-550"
+                    style="margin-left: 0 !important; border-width: 2px !important"
                     rightAmount="right-1"
                     default="Any"
                     :value="ui.search.profiles.tag"
                     :onClick="(f) => (ui.search.profiles.tag = f)"
                     :options="allTags"
-                    :includeAdjacentButtons="true"
                     :capitalize="true"
                 />
             </div>
 
             <div class="gap-3 lg:flex hidden">
                 <div
-                    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"
+                    class="bg-dark-400 justify-between px-4 w-36 flex text-white text-sm items-center py-1 rounded-lg ml-auto h-10"
                 >
                     <p>Privacy</p>
                     <Switch class="scale-75" v-model="privacy" />
@@ -89,20 +77,20 @@
                 <button
                     :disabled="ui.disabledButtons['disable-profiles']"
                     @click="disable"
-                    class="bg-red-400 disabled:opacity-70 smooth-hover border-none w-36 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    class="bg-red-400 disabled:opacity-70 smooth-hover w-36 flex text-white text-sm justify-center items-center py-1 px-2 rounded-lg ml-auto h-10"
                 >
-                    Disable <img class="w-4 h-4 ml-2" src="/img/controls/disable.svg" />
+                    Disable <img width="16px" src="/img/controls/disable.svg" class="ml-2" />
                 </button>
                 <button
                     :disabled="ui.disabledButtons['enable-profiles']"
                     @click="enable"
-                    class="bg-green-400 disabled:opacity-70 smooth-hover border-none w-36 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    class="bg-green-400 disabled:opacity-70 smooth-hover w-36 flex text-white text-sm justify-center items-center py-1 px-2 rounded-lg ml-auto h-10"
                 >
-                    Enable <img class="w-4 h-4 ml-2" src="/img/controls/enable.svg" />
+                    Enable <img width="16px" src="/img/controls/enable.svg" class="ml-2" />
                 </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-dark-650 hover:border-dark-700 ml-auto h-10"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover w-36 flex text-white text-sm justify-center items-center py-1 px-2 rounded-lg ml-auto h-10"
                     @click="ui.toggleModal('create-profile')"
                 >
                     Add Profile
@@ -112,10 +100,10 @@
         </div>
 
         <!-- Tasks (Table) -->
-        <ProfileView :profiles="processedTasks" />
+        <ProfileView :tasks="processedTasks" />
 
         <!-- Modal -->
-        <transition-group name="fade">
+        <transition-group name="fade" mode="out-in">
             <CreateProfile v-if="activeModal === 'create-profile'" />
         </transition-group>
     </div>
@@ -124,25 +112,18 @@
 .custom-dropdown-content {
     top: 2.6rem !important;
     left: -13px;
-    @apply border border-dark-650;
-}
-
-/* Search dropdown should always be h-10 and have no left corners */
-.search-dropdown {
-    height: 2.5rem !important; /* Always 40px regardless of screen size */
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
+    @apply border border-light-300;
 }
 </style>
 <script setup>
 import { computed, ref, watch } from "vue";
-import ProfileView from "@/components/Editors/Profile/ProfileView.vue";
-import CreateProfile from "@/components/Editors/Profile/CreateProfile.vue";
+import ProfileView from "@/components/editors/Profile/ProfileView.vue";
+import CreateProfile from "@/components/editors/Profile/CreateProfile.vue";
 import { useUIStore } from "@/stores/ui";
-import { PlusIcon, GroupIcon, CloseXIcon, CheckIcon } from "@/components/icons";
+import { PlusIcon } from "@/components/icons";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import EyeToggle from "@/components/ui/controls/EyeToggle.vue";
-import TagToggle from "@/components/Editors/TagToggle.vue";
+import TagToggle from "@/components/editors/TagToggle.vue";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 
 const ui = useUIStore();

package/src/views/Tasks.vue

@@ -1,186 +1,105 @@
 <template>
-  <div class="tasks-page">
-    <div class="flex-between pb-2" style="padding-top: 1.5rem">
-      <div class="flex-center gap-4">
-        <GearIcon
-          class="w-5 cursor-pointer smooth-hover"
-          @click="ui.toggleModal('quick-settings')"
-        />
-        <h4 class="text-heading">
-          Tasks
-          <span class="text-subheading pl-1">{{ taskCount }}</span>
-        </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>
-      </ul>
-    </div>
-
-    <div class="controls-wrapper">
-      <Stats class="stats-component" />
-
-      <div class="controls-wrapper lg:mb-3">
-        <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 filter-controls">
-        <div
-          v-if="uniqEventIds.length > 1"
-          class="flex-1 md:min-w-96 md:max-w-96 md:flex-none min-w-0"
-        >
-          <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 event-dropdown"
-            rightAmount="right-2"
-          />
+    <div>
+        <div class="flex gap-5 items-center pt-5 pb-2">
+            <!-- Heading -->
+            <GearIcon class="w-5 cursor-pointer" @click="ui.toggleModal('quick-settings')" />
+            <h4 class="text-white text-base font-bold">
+                Tasks
+                <span class="text-light-300 pl-1">{{ taskCount }}</span>
+            </h4>
+            <ul class="mobile-icons">
+                <li>
+                    <button
+                        class="text-sm"
+                        :disabled="ui.disabledButtons['add-tasks']"
+                        @click="ui.toggleModal('create-task')"
+                    >
+                        <span class="mb-0.5">+</span>
+                    </button>
+                </li>
+                <li>
+                    <button @click="ui.deleteTasks()">
+                        <TrashIcon class="h-3.5 w-3.5" />
+                    </button>
+                </li>
+            </ul>
         </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>
 
-      <TaskView class="lg:mb-6 mb-3" :tasks="ui.tasks" />
+        <Stats />
+
+        <!-- Controls -->
+        <div class="controls-wrapper mb-6 sm:ml-0 md:ml-0.5 lg:ml-0 ml-0">
+            <DesktopControls
+                class="hidden lg:flex"
+                @stopAll="ui.stopTasks()"
+                @startAll="ui.startTasks()"
+                @expand="ui.expandTasks()"
+                @decrease="ui.decreaseTasks()"
+                @deleteAll="ui.deleteTasks()"
+            />
+            <MobileControls
+                class="flex lg:hidden"
+                @stopAll="ui.stopTasks()"
+                @startAll="ui.startTasks()"
+                @deleteAll="ui.deleteTasks()"
+                @expand="ui.expandTasks()"
+                @decrease="ui.decreaseTasks()"
+            />
+        </div>
+        <div class="flex items-center gap-2 mb-2">
+            <div
+                v-if="uniqEventIds.length > 1"
+                class="w-full min-w-32 max-w-72 md:max-w-48 flex rounded input-default hover:bg-dark-400"
+                style="height: 2.5rem !important"
+            >
+                <Dropdown
+                    :onClick="(f) => ui.setCurrentEvent(f)"
+                    default="All events"
+                    :chosen="ui.currentEvent"
+                    :options="uniqEventIds"
+                    :allowDefault="true"
+                    class="w-56"
+                    rightAmount="right-2"
+                />
+            </div>
+            <div>
+                <PriceSortToggle
+                    class="h-10 hover:bg-dark-400 border-dark-550 border-2 min-w-24"
+                    :options="['All', 'Checkout']"
+                    :darker="true"
+                    :current="ui.taskFilter"
+                    @change="(e) => ui.setTaskFilter(e)"
+                />
+            </div>
+        </div>
 
-      <Utilities class="utilities-section" />
+        <!-- Tasks (Table) -->
+        <TaskView class="mb-6" :tasks="ui.tasks" />
+        <!-- Utilities -->
+        <Utilities />
+        <!-- Modal -->
+        <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" />
+
+            <!-- TODO: make the same changes as above -->
+            <CheckStock v-if="activeModal === 'check-stock'" />
+            <ScrapeVenue v-if="activeModal === 'scrape-venue'" />
+            <MassEditPresaleCode v-if="activeModal === 'mass-edit-presale-code'" />
+            <QuickSettings v-if="activeModal === 'quick-settings'" />
+        </transition-group>
     </div>
-
-    <transition-group name="fade">
-      <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'" />
-      <QuickSettings v-if="activeModal === 'quick-settings'" />
-    </transition-group>
-  </div>
 </template>
 <style lang="scss" scoped>
 .custom-dropdown-content {
-  top: 2.6rem !important;
-  left: -13px;
-  @apply border border-dark-650;
-}
-
-/* ==========================================================================
-   TASKS PAGE RESPONSIVE LAYOUT - MOBILE FIRST
-   ========================================================================== */
-
-/* Default mobile layout */
-.desktop-controls-hide {
-  display: none;
-}
-
-.mobile-header-controls {
-  display: flex;
-}
-
-/* Event dropdown base styling */
-.event-dropdown {
-  min-width: 0;
-  /* Match PriceSortToggle height instead of input-default */
-  height: 40px !important;
-}
-
-.event-dropdown .dropdown-value {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Small mobile screens (portrait) */
-@media (max-width: 480px) and (orientation: portrait) {
-  .event-dropdown {
-    height: 40px !important; /* Match PriceSortToggle height exactly */
-  }
-
-  .event-dropdown .dropdown-value {
-    max-width: calc(100vw - 140px);
-    font-size: 0.875rem;
-  }
-
-  .event-dropdown .dropdown-display {
-    padding-right: 2rem;
-  }
-}
-
-/* Extra small screens */
-@media (max-width: 375px) and (orientation: portrait) {
-  .event-dropdown {
-    height: 40px !important; /* Maintain 40px height to match PriceSortToggle */
-  }
-
-  .event-dropdown .dropdown-value {
-    max-width: calc(100vw - 120px);
-    font-size: 0.8rem;
-  }
-}
-
-/* Mobile landscape - hide non-essential elements */
-@media (max-height: 500px) and (orientation: landscape) {
-  .stats-component,
-  .utilities-section,
-  .filter-controls {
-    display: none;
-  }
-
-  .flex-between.pb-2 {
-    padding-top: 1rem !important;
-    padding-bottom: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-}
-
-/* Tablet and small desktop - show desktop controls */
-@media (min-width: 650px) {
-  .desktop-controls-hide {
-    display: flex;
-  }
-
-  .mobile-header-controls {
-    display: none;
-  }
+    top: 2.6rem !important;
+    left: -13px;
+    @apply border border-light-300;
 }
 </style>
 <script setup>
-import { computed, onMounted } from "vue";
-import { DesktopControls } from "@/components/Tasks/Controls";
+import { computed } from "vue";
+import { MobileControls, DesktopControls } from "@/components/Tasks/Controls";
 import TaskView from "@/components/Tasks/TaskView.vue";
 import Utilities from "@/components/Tasks/Utilities.vue";
 import CreateTaskTM from "@/components/Tasks/CreateTaskTM.vue";
@@ -191,28 +110,22 @@ 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 } from "@/components/icons";
+import { TrashIcon, GearIcon } 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);
 ui.refreshQueueStats();
 
-// Ensure "All events" is always selected on page load
-onMounted(() => {
-  ui.setCurrentEvent("");
-});
-
 const uniqEventIds = computed(() => {
-  const ids = [
-    ...new Set(
-      Object.values(ui.tasks)
-        .filter((t) => t.siteId === ui.currentCountry.siteId && !t.eventId?.includes("@"))
-        .map((v) => `${v.eventName} (${v.eventId})`)
-    ),
-  ];
-  return ids;
+    const ids = [
+        ...new Set(
+            Object.values(ui.tasks)
+                .filter((t) => t.siteId === ui.currentCountry.siteId && !t.eventId.includes("@"))
+                .map((v) => v.eventId)
+        )
+    ];
+    return ids;
 });
 </script>