@necrolab/dashboard 0.5.12 → 0.5.14

package/src/components/Tasks/ViewTask.vue

@@ -1,190 +1,214 @@
 <template>
     <Modal>
         <template #header>
-            <span class="flex">View Task <EyeIcon class="ml-4 w-4" /></span>
+            <span class="flex">
+                View Task
+                <EyeIcon class="ml-4 w-4" />
+            </span>
         </template>
 
+        <!-- Task data updates in real-time via socket.
+             If task is deleted from table, modal retains last known data -->
+
         <!-- Task Overview Card -->
-        <div class="section-card mb-4 mt-4">
-            <h3 class="section-title">Task Overview</h3>
+        <SectionCard title="Task Overview" class="mb-4 mt-4">
             <div class="grid grid-cols-1 gap-3">
-                <div class="info-row" @click="copy(task.taskId)">
-                    <span class="info-icon flex items-center justify-center text-base font-bold">#</span>
-                    <span class="info-label">Task ID</span>
-                    <span class="info-value copyable">{{ task.taskId }}</span>
-                </div>
-                <div class="info-row" @click="copy(task.eventId)">
-                    <StadiumIcon class="info-icon" />
-                    <span class="info-label">Event ID</span>
-                    <span class="info-value copyable">{{ task.eventId }}</span>
-                </div>
-                <div class="info-row" v-if="task.eventName">
-                    <StadiumWhiteIcon class="info-icon" />
-                    <span class="info-label">Event Name</span>
-                    <span class="info-value">{{ task.eventName }}</span>
-                </div>
-                <div class="info-row" v-if="task.venueName || task.eventCity">
-                    <StadiumWhiteIcon class="info-icon" />
-                    <span class="info-label">Venue</span>
-                    <span class="info-value">{{ [task.venueName, task.eventCity].filter(Boolean).join(', ') }}</span>
-                </div>
-                <div class="info-row" v-if="task.eventLocalDate">
-                    <StadiumWhiteIcon class="info-icon" />
-                    <span class="info-label">Date</span>
-                    <span class="info-value">{{ formatDate(task.eventLocalDate) }}</span>
-                </div>
-                <div class="info-row">
-                    <div class="status-indicator info-icon" :class="colorToClass(task.active || task.status.toLowerCase() === 'idle' ? task.statusColor : 'red')"></div>
-                    <span class="info-label">Status</span>
-                    <span class="info-value uppercase font-semibold whitespace-normal break-words text-right">{{ task.status }}</span>
-                </div>
-                <div class="info-row" v-if="task._timeLeftString && task._timeLeftString !== 'No Cartholds'">
-                    <TimerIcon class="info-icon" />
-                    <span class="info-label">Cart Expiration</span>
-                    <span class="info-value font-semibold text-right" :class="{ 'text-red-400': task._timeLeftString === '00:00' }">
-                        {{ task._timeLeftString !== '00:00' ? task._timeLeftString : 'Expired' }}
-                    </span>
-                </div>
-                <div class="info-row items-start" v-if="task.reservedTicketsList">
-                    <TicketIcon class="info-icon flex-shrink-0" />
-                    <span class="info-label flex-shrink-0">Reserved Tickets</span>
-                    <div class="info-value text-right flex-1">
-                        <div v-for="(line, index) in task.reservedTicketsList.split('\n')" :key="index" class="text-xs leading-tight">
-                            <span v-if="line.trim()" :class="{ 'text-green-400 font-bold': isTotalPrice(line, index, task.reservedTicketsList.split('\n')) }">
-                                {{ line.trim() }}
-                            </span>
-                        </div>
+                <InfoRow
+                    icon-text="#"
+                    label="Task ID"
+                    :value="taskSnapshot.taskId"
+                    copyable
+                    :copy-value="taskSnapshot.taskId"
+                    copy-message="Copied task ID" />
+                <InfoRow
+                    :icon="StadiumIcon"
+                    label="Event ID"
+                    :value="taskSnapshot.eventId"
+                    copyable
+                    :copy-value="taskSnapshot.eventId"
+                    copy-message="Copied event ID" />
+                <InfoRow
+                    v-if="taskSnapshot.eventName"
+                    :icon="StadiumWhiteIcon"
+                    label="Event Name"
+                    :value="taskSnapshot.eventName" />
+                <InfoRow
+                    v-if="taskSnapshot.venueName || taskSnapshot.eventCity"
+                    :icon="StadiumWhiteIcon"
+                    label="Venue"
+                    :value="[taskSnapshot.venueName, taskSnapshot.eventCity].filter(Boolean).join(', ')" />
+                <InfoRow
+                    v-if="taskSnapshot.eventLocalDate"
+                    :icon="StadiumWhiteIcon"
+                    label="Date"
+                    :value="formatDate(taskSnapshot.eventLocalDate)" />
+                <InfoRow :icon="StatusIcon" label="Status" value-class="uppercase font-semibold flex items-center gap-2">
+                    <div class="status-indicator flex-shrink-0" :class="colorToClass(taskSnapshot.active || taskSnapshot.status.toLowerCase() === 'idle' ? taskSnapshot.statusColor : 'red')"></div>
+                    <span>{{ taskSnapshot.status }}</span>
+                </InfoRow>
+                <InfoRow
+                    v-if="taskSnapshot._timeLeftString && taskSnapshot._timeLeftString !== 'No Cartholds'"
+                    :icon="TimerIcon"
+                    label="Cart Expiration"
+                    :value-class="`font-semibold text-right ${taskSnapshot._timeLeftString === '00:00' ? 'text-red-400' : ''}`">
+                    {{ taskSnapshot._timeLeftString !== "00:00" ? taskSnapshot._timeLeftString : "Expired" }}
+                </InfoRow>
+                <InfoRow
+                    v-if="taskSnapshot.reservedTicketsList"
+                    :icon="TicketIcon"
+                    label="Reserved Tickets"
+                    align-start
+                    value-class="text-right flex-1">
+                    <div
+                        v-for="(line, index) in taskSnapshot.reservedTicketsList.split('\n')"
+                        :key="index"
+                        class="text-xs leading-tight">
+                        <span
+                            v-if="line.trim()"
+                            :class="{
+                                'font-bold text-green-400': isTotalPrice(
+                                    line,
+                                    index,
+                                    taskSnapshot.reservedTicketsList.split('\n')
+                                )
+                            }">
+                            {{ line.trim() }}
+                        </span>
                     </div>
-                </div>
+                </InfoRow>
             </div>
-        </div>
+        </SectionCard>
 
         <!-- Account Details Card -->
-        <div class="section-card mb-4">
-            <h3 class="section-title">Account Details</h3>
+        <SectionCard title="Account Details" class="mb-4">
             <div class="grid grid-cols-1 gap-3">
-                <div class="info-row" v-if="task.email" @click="copy(task.email)">
-                    <MailIcon class="info-icon" />
-                    <span class="info-label">Email</span>
-                    <span class="info-value copyable">{{ task.email }}</span>
-                </div>
-                <div class="info-row" v-if="task.password" @click="copy(task.password)">
-                    <KeyIcon class="info-icon" />
-                    <span class="info-label">Password</span>
-                    <span class="info-value copyable">{{ showPassword ? task.password : '••••••••' }}</span>
-                    <button @click.stop="showPassword = !showPassword" class="ml-auto">
-                        <EyeToggle :visible="showPassword" />
-                    </button>
-                </div>
-                <div class="info-row" v-if="!task.email && !task.password">
-                    <MailIcon class="info-icon" />
-                    <span class="info-label">Account</span>
-                    <span class="info-value text-light-500">No account chosen</span>
-                </div>
-                <div class="info-row" v-if="task.profileName">
-                    <ProfileIcon class="info-icon" />
-                    <span class="info-label">Profile</span>
-                    <span class="info-value">{{ task.profileName }}</span>
-                </div>
+                <InfoRow
+                    v-if="taskSnapshot.email"
+                    :icon="MailIcon"
+                    label="Email"
+                    :value="taskSnapshot.email"
+                    copyable
+                    :copy-value="taskSnapshot.email"
+                    copy-message="Copied email" />
+                <InfoRow
+                    v-if="taskSnapshot.password"
+                    :icon="KeyIcon"
+                    label="Password">
+                    {{ showPassword ? taskSnapshot.password : "••••••••" }}
+                    <template #action>
+                        <button @click.stop="showPassword = !showPassword" class="flex items-center justify-center w-8 h-8 rounded transition-all hover:bg-dark-600">
+                            <EyeToggle :visible="showPassword" />
+                        </button>
+                        <button @click.stop="copy(taskSnapshot.password, 'Copied password')" class="copy-button flex items-center justify-center w-8 h-8 rounded transition-all hover:bg-dark-600 text-light-500 hover:text-light-300">
+                            <CopyIcon class="w-4 h-4" />
+                        </button>
+                    </template>
+                </InfoRow>
+                <InfoRow
+                    v-if="!taskSnapshot.email && !taskSnapshot.password"
+                    :icon="MailIcon"
+                    label="Account"
+                    value="No account chosen"
+                    value-class="text-light-500" />
+                <InfoRow
+                    v-if="taskSnapshot.profileName"
+                    :icon="ProfileIcon"
+                    label="Profile"
+                    :value="taskSnapshot.profileName" />
             </div>
-        </div>
+        </SectionCard>
 
         <!-- Task Configuration -->
-        <div class="section-card mb-4">
-            <h3 class="section-title">Task Configuration</h3>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <div class="info-row">
-                    <BagIcon class="info-icon" />
-                    <span class="info-label">Ticket Quantity</span>
-                    <span class="info-value">{{ task.quantity }}</span>
-                </div>
-                <div class="info-row">
-                    <ScannerIcon class="info-icon" />
-                    <span class="info-label">Account Tag</span>
-                    <span class="info-value">{{ task.accountTag || 'None' }}</span>
-                </div>
-                <div class="info-row">
-                    <SellIcon class="info-icon" />
-                    <span class="info-label">Profile Tags</span>
-                    <span class="info-value">{{ task.profileTags?.join(', ') || 'None' }}</span>
-                </div>
-                <div class="info-row" v-if="task.presaleCode" @click="copy(task.presaleCode)">
-                    <PencilIcon class="info-icon" />
-                    <span class="info-label">Presale Code</span>
-                    <span class="info-value copyable">{{ task.presaleCode }}</span>
-                </div>
-                <div class="info-row" v-if="task.startOffset">
-                    <ShieldIcon class="info-icon" />
-                    <span class="info-label">Start Offset</span>
-                    <span class="info-value">{{ task.startOffset }} min</span>
-                </div>
+        <SectionCard title="Task Configuration" class="mb-4">
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <InfoRow :icon="BagIcon" label="Ticket Quantity" :value="String(taskSnapshot.quantity)" />
+                <InfoRow :icon="ScannerIcon" label="Account Tag" :value="taskSnapshot.accountTag || 'None'" />
+                <InfoRow
+                    :icon="SellIcon"
+                    label="Profile Tags"
+                    :value="taskSnapshot.profileTags?.join(', ') || 'None'" />
+                <InfoRow
+                    v-if="taskSnapshot.presaleCode"
+                    :icon="PencilIcon"
+                    label="Presale Code"
+                    :value="taskSnapshot.presaleCode"
+                    copyable
+                    :copy-value="taskSnapshot.presaleCode"
+                    copy-message="Copied presale code" />
+                <InfoRow
+                    v-if="taskSnapshot.startOffset"
+                    :icon="ShieldIcon"
+                    label="Start Offset"
+                    :value="`${taskSnapshot.startOffset} min`" />
             </div>
-        </div>
+        </SectionCard>
 
         <!-- Task Settings Toggles -->
-        <div class="section-card mb-4">
-            <h3 class="section-title mb-3">Task Settings</h3>
-            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+        <SectionCard title="Task Settings" class="mb-4">
+            <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
                 <div class="toggle-item">
                     <div class="toggle-label">
-                        <TimerIcon class="w-4 h-4" />
+                        <TimerIcon class="h-4 w-4" />
                         <span>Smart Timer</span>
                     </div>
                     <Switch v-model="toggles.smartTimer" disabled />
                 </div>
                 <div class="toggle-item">
                     <div class="toggle-label">
-                        <GroupIcon class="w-4 h-4" />
+                        <GroupIcon class="h-4 w-4" />
                         <span>Login Later</span>
                     </div>
                     <Switch v-model="toggles.loginAfterCart" disabled />
                 </div>
                 <div class="toggle-item">
                     <div class="toggle-label">
-                        <HandIcon class="w-4 h-4" />
+                        <HandIcon class="h-4 w-4" />
                         <span>Manual</span>
                     </div>
                     <Switch v-model="toggles.manual" disabled />
                 </div>
                 <div class="toggle-item">
                     <div class="toggle-label">
-                        <SavingsIcon class="w-4 h-4" />
+                        <SavingsIcon class="h-4 w-4" />
                         <span>Do Not Pay</span>
                     </div>
                     <Switch v-model="toggles.doNotPay" disabled />
                 </div>
                 <div class="toggle-item">
                     <div class="toggle-label">
-                        <LoyaltyIcon class="w-4 h-4" />
+                        <LoyaltyIcon class="h-4 w-4" />
                         <span>Presale Mode</span>
                     </div>
                     <Switch v-model="toggles.presaleMode" disabled />
                 </div>
                 <div class="toggle-item">
                     <div class="toggle-label">
-                        <SkiIcon class="w-4 h-4" />
+                        <SkiIcon class="h-4 w-4" />
                         <span>Quick Queue</span>
                     </div>
                     <Switch v-model="toggles.quickQueue" disabled />
                 </div>
                 <div class="toggle-item">
                     <div class="toggle-label">
-                        <SandclockIcon class="w-4 h-4" />
+                        <SandclockIcon class="h-4 w-4" />
                         <span>Aged Account</span>
                     </div>
                     <Switch v-model="toggles.agedAccount" disabled />
                 </div>
             </div>
-        </div>
+        </SectionCard>
     </Modal>
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
-import Modal from '@/components/ui/Modal.vue';
-import Switch from '@/components/ui/controls/atomic/Switch.vue';
-import EyeToggle from '@/components/ui/controls/EyeToggle.vue';
-import { useUIStore } from '@/stores/ui';
+import { ref, computed, watch } from "vue";
+import Modal from "@/components/ui/Modal.vue";
+import Switch from "@/components/ui/controls/atomic/Switch.vue";
+import EyeToggle from "@/components/ui/controls/EyeToggle.vue";
+import InfoRow from "@/components/ui/InfoRow.vue";
+import SectionCard from "@/components/ui/SectionCard.vue";
+import { useUIStore } from "@/stores/ui";
+import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
 import {
     EyeIcon,
     StadiumIcon,
@@ -204,10 +228,13 @@ import {
     SavingsIcon,
     LoyaltyIcon,
     SkiIcon,
-    SandclockIcon
-} from '@/components/icons';
+    SandclockIcon,
+    StatusIcon,
+    CopyIcon
+} from "@/components/icons";
 
 const ui = useUIStore();
+const { copy } = useCopyToClipboard();
 const showPassword = ref(false);
 
 const props = defineProps({
@@ -217,35 +244,50 @@ const props = defineProps({
     }
 });
 
+// Keep a local snapshot of task data that updates in real-time
+const taskSnapshot = ref({ ...props.task });
+
+// Watch for changes in the live task data from the store
+const liveTask = computed(() => {
+    // Try to find the live task in the store
+    return ui.tasks?.[props.task.taskId];
+});
+
+watch(
+    liveTask,
+    (newTask) => {
+        if (newTask) {
+            // Task still exists - update snapshot with live data
+            taskSnapshot.value = { ...newTask };
+        }
+        // If newTask is undefined/null, task was deleted - keep last snapshot
+    },
+    { deep: true, immediate: true }
+);
 
 const toggles = computed(() => ({
-    smartTimer: props.task.smartTimer,
-    loginAfterCart: props.task.loginAfterCart,
-    manual: props.task.manual,
-    doNotPay: props.task.doNotPay,
-    presaleMode: props.task.presaleMode,
-    quickQueue: props.task.quickQueue,
-    agedAccount: props.task.agedAccount
+    smartTimer: taskSnapshot.value.smartTimer,
+    loginAfterCart: taskSnapshot.value.loginAfterCart,
+    manual: taskSnapshot.value.manual,
+    doNotPay: taskSnapshot.value.doNotPay,
+    presaleMode: taskSnapshot.value.presaleMode,
+    quickQueue: taskSnapshot.value.quickQueue,
+    agedAccount: taskSnapshot.value.agedAccount
 }));
 
-const copy = (text) => {
-    navigator.clipboard.writeText(text);
-    ui.showSuccess(`Copied: ${text}`);
-};
-
 const formatDate = (dateString) => {
-    if (!dateString) return '';
+    if (!dateString) return "";
     try {
         const date = new Date(dateString);
         const options = {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-            hour: 'numeric',
-            minute: '2-digit',
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+            hour: "numeric",
+            minute: "2-digit",
             hour12: true
         };
-        return date.toLocaleString('en-US', options).replace(',', '');
+        return date.toLocaleString("en-US", options).replace(",", "");
     } catch {
         return dateString;
     }
@@ -258,103 +300,48 @@ const isTotalPrice = (line, index, lines) => {
     if (!isLastLine) return false;
     // Match currency symbols ($, €, £, etc.) OR currency codes (USD, EUR, AUD, etc.)
     const totalPricePattern = /^([$€£¥₹₽¢]|[A-Z]{3})\s*[\d,]+\.?\d*$/;
-    return totalPricePattern.test(trimmed) && !trimmed.includes('(');
+    return totalPricePattern.test(trimmed) && !trimmed.includes("(");
 };
 
 const colorToClass = (color) => {
     const colorMap = {
-        red: 'bg-red-400',
-        green: 'bg-green-400',
-        yellow: 'bg-yellow-400',
-        blue: 'bg-blue-400'
+        red: "bg-red-400",
+        green: "bg-green-400",
+        yellow: "bg-yellow-400",
+        blue: "bg-blue-400"
     };
-    return colorMap[color?.toLowerCase()] || 'bg-gray-400';
+    return colorMap[color?.toLowerCase()] || "bg-gray-400";
 };
 </script>
 
 <style lang="scss" scoped>
-.section-card {
-    @apply rounded-lg border p-4;
-    background: oklch(0.2046 0 0);
-    border-color: oklch(0.2809 0 0);
-}
-
-.section-title {
-    @apply text-sm font-semibold mb-3;
-    color: oklch(0.90 0 0);
-}
-
-.info-row {
-    @apply flex items-center gap-3 px-3 py-2 rounded-lg;
-    background: oklch(0.2603 0 0);
-    border: 1px solid oklch(0.2809 0 0);
-    min-height: 40px;
-
-    &.copyable {
-        cursor: pointer;
-
-        &:hover {
-            border-color: oklch(0.72 0.15 145);
-            background: oklch(0.72 0.15 145 / 0.08);
-        }
-    }
-}
-
-.info-icon {
-    @apply w-4 h-4 flex-shrink-0;
-    color: oklch(0.90 0 0) !important;
-
-    svg {
-        color: oklch(0.90 0 0) !important;
-        width: 16px !important;
-        height: 16px !important;
-    }
-}
-
-.info-label {
-    @apply text-xs font-medium flex-shrink-0;
-    color: oklch(0.65 0 0);
-    min-width: 100px;
-}
-
-.info-value {
-    @apply text-sm flex-1;
-    color: oklch(0.90 0 0);
-    overflow-wrap: break-word;
-    word-break: break-word;
-}
-
-.copyable {
-    cursor: pointer;
-}
-
 .toggle-item {
     @apply flex flex-col items-center gap-2;
 }
 
 .toggle-label {
     @apply flex items-center gap-2 text-xs;
-    color: oklch(0.90 0 0);
+    color: oklch(0.9 0 0);
 
     svg {
-        color: oklch(0.90 0 0) !important;
+        color: oklch(0.9 0 0) !important;
         width: 16px !important;
         height: 16px !important;
     }
 }
 
 .status-indicator {
-    @apply w-2 h-2 rounded-full flex-shrink-0;
+    @apply h-2 w-2 flex-shrink-0 rounded-full;
 }
 
-@media (max-width: 768px) {
-    .info-label {
-        min-width: 80px;
-        font-size: 11px;
-    }
+.info-icon {
+    @apply h-4 w-4 flex-shrink-0;
+    color: oklch(0.9 0 0) !important;
 
-    .info-value {
-        font-size: 13px;
+    svg {
+        color: oklch(0.9 0 0) !important;
+        width: 16px !important;
+        height: 16px !important;
     }
 }
 </style>

package/src/components/icons/Copy.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+    </svg>
+</template>

package/src/components/icons/index.js

@@ -55,6 +55,7 @@ import CloseXIcon from "./CloseX.vue";
 import CheckIcon from "./Check.vue";
 import SpinnerIcon from "./Spinner.vue";
 import EyeIcon from "./Eye.vue";
+import CopyIcon from "./Copy.vue";
 
 export {
     EditIcon,
@@ -109,5 +110,6 @@ export {
     CloseXIcon,
     CheckIcon,
     SpinnerIcon,
-    EyeIcon
+    EyeIcon,
+    CopyIcon
 };

package/src/components/ui/ActionButtonGroup.vue

@@ -0,0 +1,70 @@
+<template>
+    <ul class="mx-auto flex items-center justify-center rounded overflow-visible flex-wrap
+                bg-dark-400 border-2 border-dark-600 p-[3px] gap-0.5
+                md:p-0.5 md:gap-px md:rounded-md
+                lg:p-[3px] lg:gap-0.5 lg:rounded-lg lg:flex-nowrap
+                max-md:max-w-[44px] max-md:min-h-7 max-md:h-auto max-md:justify-start max-md:mx-0">
+        <slot />
+    </ul>
+</template>
+
+<script setup>
+// Simple wrapper component for action button groups
+</script>
+
+<style lang="scss" scoped>
+ul {
+    :deep(button) {
+        @apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
+        @apply bg-transparent text-light-300;
+        @apply w-7 h-7 rounded-md;
+
+        &:hover {
+            @apply bg-accent-green/15 text-white;
+        }
+
+        &:active {
+            @apply bg-accent-green/25;
+        }
+
+        // Tablet sizing
+        @media (min-width: 768px) and (max-width: 1023px) {
+            @apply w-[26px] h-[26px] rounded;
+        }
+
+        // Desktop sizing
+        @media (min-width: 1024px) {
+            @apply w-7 h-7 rounded-md;
+        }
+
+        // Mobile sizing
+        @media (max-width: 640px) {
+            @apply w-[18px] h-[18px] rounded-xs min-w-[18px] m-px;
+        }
+    }
+
+    :deep(svg),
+    :deep(img) {
+        @apply w-4 h-4 relative z-[1];
+
+        // Tablet sizing
+        @media (min-width: 768px) and (max-width: 1023px) {
+            @apply w-3.5 h-3.5;
+        }
+
+        // Desktop sizing
+        @media (min-width: 1024px) {
+            @apply w-4 h-4;
+        }
+
+        // Mobile sizing
+        @media (max-width: 640px) {
+            @apply w-[12px] h-[12px];
+        }
+    }
+
+    :deep(li) {
+        @apply flex m-0 p-0;
+    }
+}
+</style>