@necrolab/dashboard 0.4.220 → 0.5.1

package/src/components/Tasks/TaskView.vue

@@ -1,58 +1,67 @@
 <template>
-    <Table>
-        <Header class="text-center">
-            <div class="col-span-1 lg:col-span-2 flex">
-                <Checkbox class="mr-3" :toggled="ui.mainCheckbox.tasks" @valueUpdate="ui.toggleMainCheckbox('tasks')" />
-                <div class="mx-auto hidden md:flex items-center" @click="ui.toggleSort('eventId')">
-                    <EventIcon class="ipadlg:mr-3" />
-                    <h4 class="hidden ipadlg:flex">Event</h4>
+    <div class="table-component">
+        <Header class="grid-cols-10 gap-2 text-center lg:grid-cols-12">
+            <div class="col-span-1 flex items-center justify-start lg:col-span-2">
+                <Checkbox
+                    class="ml-2 mr-4 flex-shrink-0"
+                    :toggled="ui.mainCheckbox.tasks"
+                    @valueUpdate="ui.toggleMainCheckbox('tasks')"
+                    :isHeader="true" />
+                <div class="mx-auto hidden items-center lg:flex" @click="ui.toggleSort('eventId')">
+                    <EventIcon class="lg:mr-3" />
+                    <h4 class="hidden lg:flex">Event</h4>
                     <DownIcon v-if="ui.sortData.sortBy === 'eventId' && !ui.sortData.reversed" class="ml-1" />
                     <UpIcon v-if="ui.sortData.sortBy === 'eventId' && ui.sortData.reversed" class="ml-1" />
                 </div>
             </div>
-            <div class="col-span-2 items-center justify-center hidden md:flex" v-once>
-                <CartIcon class="mr-0 ipadlg:mr-3" />
-
-                <h4 class="hidden ipadlg:flex">Quantity</h4>
-            </div>
-            <div class="col-span-2 flex items-center justify-center" v-once>
-                <TicketIcon class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Tickets</h4>
+            <div class="flex items-center justify-center col-span-2" v-once>
+                <TicketIcon class="mr-0 lg:mr-3" />
+                <h4 class="hidden lg:flex">Tickets</h4>
             </div>
-            <div
-                class="col-span-6 md:col-span-4 lg:col-span-3 flex items-center justify-center"
-                @click="ui.toggleSort('status')"
-            >
-                <StatusIcon class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Status</h4>
+            <div class="flex items-center justify-center col-span-5 md:col-span-4 lg:col-span-5" @click="ui.toggleSort('status')">
+                <StatusIcon class="mr-0 lg:mr-3" />
+                <h4 class="hidden lg:flex">Status</h4>
                 <DownIcon v-if="ui.sortData.sortBy === 'status' && !ui.sortData.reversed" class="ml-1" />
                 <UpIcon v-if="ui.sortData.sortBy === 'status' && ui.sortData.reversed" class="ml-1" />
             </div>
-            <div class="col-span-2 flex items-center justify-center" v-once>
-                <ClickIcon class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Actions</h4>
+            <div class="flex items-center justify-center col-span-2 lg:col-span-3" v-once>
+                <ClickIcon class="mr-0 lg:mr-3" />
+                <h4 class="hidden lg:flex">Actions</h4>
             </div>
-            <div class="absolute right-5 hidden md:flex items-center top-3,5" @click="ui.toggleSort('taskId')">
-                <h4 class="">ID</h4>
+            <div class="absolute right-5 top-3.5 hidden items-center lg:flex" @click="ui.toggleSort('taskId')">
+                <h4 class="text-center text-xs">ID</h4>
                 <DownIcon v-if="ui.sortData.sortBy === 'taskId' && !ui.sortData.reversed" class="ml-1" />
                 <UpIcon v-if="ui.sortData.sortBy === 'taskId' && ui.sortData.reversed" class="ml-1" />
             </div>
         </Header>
         <div
-            class="flex flex-col divide-y-2 divide-border overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan max-h-big tasks-table-height"
-        >
-            <div v-for="(task, i) in getTasksInOrder()" :key="i">
-                <Task :task="task" :class="[i % 2 == 1 ? 'bg-dark-500' : 'bg-dark-550']" />
+            class="hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
+            :style="{ maxHeight: dynamicTableHeight }">
+            <div v-for="(task, i) in getTasksInOrder()" :key="task.taskId" class="task-row-container">
+                <Task :task="task" :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'" />
             </div>
             <div
                 v-if="getTasksInOrder().length === 0"
-                class="flex justify-center text-light-400 py-2 bg-dark-500 border-b-2 border-border"
-            >
-                <span v-if="ui.queueStats.total === 0"> No tasks yet.</span>
-                <span v-else>{{ ui.queueStats.total }} hidden task{{ ui.queueStats.total === 1 ? "" : "s" }}</span>
+                class="empty-state flex flex-col items-center justify-center py-8 text-center">
+                <div
+                    v-if="
+                        !ui.queueStats.queued && !ui.queueStats.sleeping && ui.queueStats.nextQueuePasses.length === 0
+                    ">
+                    <TasksIcon class="mx-auto mb-3 h-12 w-12 text-dark-400 opacity-50" />
+                    <p class="text-sm text-light-400">No tasks yet</p>
+                    <p class="mt-1 text-xs text-light-500">Create tasks to get started</p>
+                </div>
+                <div v-else>
+                    <TasksIcon class="mx-auto mb-3 h-12 w-12 text-dark-400 opacity-50" />
+                    <p class="text-sm text-light-400">No tasks match current filters</p>
+                    <p class="mt-1 text-xs text-light-500">Adjust filters to see tasks</p>
+                </div>
             </div>
         </div>
-    </Table>
+
+        <!-- View Task Modal -->
+        <ViewTask v-if="ui.activeModal === 'view-task' && ui.selectedTaskForView" :task="ui.selectedTaskForView" />
+    </div>
 </template>
 <style lang="scss" scoped>
 h4 {
@@ -63,36 +72,48 @@ h4 {
     touch-action: pan-y pan-up pan-down;
 }
 
-.tasks-table-height {
-    max-height: 33rem !important;
-}
+.task-row-container {
+    min-height: 69px;
+    flex-shrink: 0;
+    transition: background-color 0.15s ease;
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
-    .tasks-table-height {
-        max-height: 45vh !important;
+    &:hover {
+        @apply bg-dark-550 !important;
     }
-}
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
-    .tasks-table-height {
-        max-height: 58vh !important;
+    @media (max-width: 768px) {
+        min-height: 58px;
     }
+
+    @media (max-width: 480px) and (orientation: portrait) {
+        min-height: 50px;
+    }
+}
+
+.empty-state {
+    @apply bg-dark-400;
+    color: #969696;
+    font-size: 14px;
+    font-weight: 500;
 }
 </style>
 <script setup>
+import { computed, ref, onMounted, onUnmounted } from "vue";
 import { Table, Header } from "@/components/Table";
-import { EventIcon, CartIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon } from "@/components/icons";
+import { EventIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon, TasksIcon } from "@/components/icons";
 import Task from "./Task.vue";
+import ViewTask from "./ViewTask.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 
 const props = defineProps({
-    tasks: { type: Object }
+    tasks: { type: Object },
+    searchQuery: { type: String, default: '' }
 });
 
 const shouldTaskShow = (task) => {
     if (ui.taskFilter === "All") return true;
-    else if (ui.taskFilter === "Checkout") return task.expirationTime || task.noCartholds;
+    else if (ui.taskFilter === "Checkout") return task.expirationTime;
     else return true;
 };
 
@@ -107,6 +128,8 @@ const siteIdEdgeCases = {
 
 const getTasksInOrder = () => {
     let out = [];
+    const searchLower = props.searchQuery?.toLowerCase().trim() || '';
+
     ui.taskIdOrder.forEach((id) => {
         if (props.tasks[id] && !props.tasks[id]?.hidden) {
             const task = props.tasks[id];
@@ -118,9 +141,74 @@ const getTasksInOrder = () => {
                 return;
             if (ui.currentEvent && task.eventId !== ui.currentEvent) return;
             if (!shouldTaskShow(task)) return;
+
+            // Search filter
+            if (searchLower) {
+                const searchableText = [
+                    task.eventId,
+                    task.eventName,
+                    task.eventVenue,
+                    task.email,
+                    task.taskId,
+                    task.status,
+                    task.profileName,
+                    task.presaleCode,
+                    task.reservedTicketsList
+                ].filter(Boolean).join(' ').toLowerCase();
+
+                if (!searchableText.includes(searchLower)) return;
+            }
+
             out.push(task);
         }
     });
     return out;
 };
+
+// Dynamic height calculation to prevent page scrolling
+const windowHeight = ref(window.innerHeight);
+const windowWidth = ref(window.innerWidth);
+
+const updateDimensions = () => {
+    windowHeight.value = window.innerHeight;
+    windowWidth.value = window.innerWidth;
+};
+
+onMounted(() => {
+    window.addEventListener("resize", updateDimensions);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("resize", updateDimensions);
+});
+
+const dynamicTableHeight = computed(() => {
+    // Calculate available space for table
+    const headerHeight = 55; // Header + navbar
+    const titleHeight = 45; // Tasks title and mobile controls
+    const controlsHeight = windowWidth.value >= 650 ? 55 : 0; // Desktop controls
+    // On desktop: stats + filters all in one row (45px)
+    // On mobile: stats row (40px) + filters stacked (90px) = 130px
+    const filtersAndStatsHeight = windowWidth.value >= 768
+        ? (ui.queueStats.show ? 50 : 45) // Desktop: single row
+        : (ui.queueStats.show ? 130 : 90); // Mobile: stats row + stacked filters
+    const utilitiesHeight = windowWidth.value <= 768 ? 90 : 160; // Utilities section height (ensure buttons fully visible)
+    const margins =
+        windowWidth.value >= 1024 ? 20 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 8 : 12;
+
+    const totalUsedSpace =
+        headerHeight + titleHeight + controlsHeight + filtersAndStatsHeight + utilitiesHeight + margins;
+    const availableHeight = windowHeight.value - totalUsedSpace;
+
+    // Calculate row height based on screen size
+    const rowHeight = windowWidth.value <= 768 ? 58 : 69; // Mobile vs desktop row height
+    const minRowsToShow = 2; // Always show at least 2 rows
+    const minHeight = minRowsToShow * rowHeight;
+
+    // Calculate how many complete rows can fit
+    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight) + 1;
+    const exactHeight = maxCompleteRows * rowHeight;
+
+    return exactHeight + "px";
+});
 </script>

package/src/components/Tasks/Utilities.vue

@@ -1,16 +1,16 @@
 <template>
-    <div class="grid grid-cols-1 gap-3 lg:grid-cols-1" v-once v-if="ui.currentModule == 'TM'">
+    <div class="grid grid-cols-1 gap-3 lg:grid-cols-1" v-if="ui.currentModule == 'TM'">
         <div class="lg:justify-self-end">
-            <h4 class="hidden lg:block text-white opacity-40 uppercase font-medium">Utils</h4>
-            <div class="flex gap-3">
-                <button class="button-default active:opacity-50 w-44" @click="ui.toggleModal('scrape-venue')">
-                    <ScrapeIcon />
+            <h4 class="hidden lg:block text-white opacity-40 uppercase font-medium mb-1">Utils</h4>
+            <div class="flex gap-3 justify-between lg:justify-start">
+                <button class="button-default w-44 bg-dark-400 flex items-center justify-center gap-x-2 utility-btn" @click="ui.toggleModal('scrape-venue')">
                     Scrape Venue
+                    <ScrapeIcon />
                 </button>
-                <button class="button-default w-44" @click="ui.toggleModal('check-stock')">
-                    <BoxIcon />Check Stock
+                <button class="button-default w-44 bg-dark-400 flex items-center justify-center gap-x-2 utility-btn" @click="ui.toggleModal('check-stock')">
+                    Check Stock
+                    <BoxIcon />
                 </button>
-                <!-- Mobile Label -->
             </div>
             <h4 class="text-white opacity-40 uppercase font-medium block lg:hidden">Utils</h4>
         </div>
@@ -23,10 +23,25 @@ import { useUIStore } from "@/stores/ui";
 const ui = useUIStore();
 </script>
 <style lang="scss" scoped>
-button {
+.utility-btn {
     height: 50px;
-    @apply bg-dark-400 text-xs flex items-center justify-center gap-x-2 hover:opacity-70;
+
+    @media (max-width: 768px) {
+        height: 40px;
+        font-size: 0.75rem;
+    }
 }
+
+button {
+    font-size: 0.75rem;
+
+    svg {
+        width: 14px;
+        height: 14px;
+        flex-shrink: 0;
+    }
+}
+
 h4 {
     font-size: 12px;
 }

package/src/components/Tasks/ViewTask.vue

@@ -0,0 +1,321 @@
+<template>
+    <Modal>
+        <template #header>
+            <span class="flex">View Task <EyeIcon class="ml-4 w-4" /></span>
+        </template>
+
+        <!-- Task Overview Card -->
+        <div class="section-card mb-4 mt-4">
+            <h3 class="section-title">Task Overview</h3>
+            <div class="grid grid-cols-1 gap-3">
+                <div class="info-row copyable" @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">{{ 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.eventVenue">
+                    <StadiumWhiteIcon class="info-icon" />
+                    <span class="info-label">Venue</span>
+                    <span class="info-value">{{ task.eventVenue }}</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="flex items-center gap-2">
+                        <div class="status-indicator" :class="colorToClass(task.active || task.status.toLowerCase() === 'idle' ? task.statusColor : 'red')"></div>
+                        <span class="info-label">Status</span>
+                    </div>
+                    <span class="info-value uppercase font-semibold whitespace-normal break-words">{{ task.status }}</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Account Details Card -->
+        <div class="section-card mb-4">
+            <h3 class="section-title">Account Details</h3>
+            <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>
+            </div>
+        </div>
+
+        <!-- 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>
+            </div>
+        </div>
+
+        <!-- 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">
+                <div class="toggle-item">
+                    <div class="toggle-label">
+                        <TimerIcon class="w-4 h-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" />
+                        <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" />
+                        <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" />
+                        <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" />
+                        <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" />
+                        <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" />
+                        <span>Aged Account</span>
+                    </div>
+                    <Switch v-model="toggles.agedAccount" disabled />
+                </div>
+            </div>
+        </div>
+    </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 {
+    EyeIcon,
+    StadiumIcon,
+    StadiumWhiteIcon,
+    MailIcon,
+    KeyIcon,
+    ProfileIcon,
+    BagIcon,
+    ScannerIcon,
+    SellIcon,
+    PencilIcon,
+    ShieldIcon,
+    TimerIcon,
+    GroupIcon,
+    HandIcon,
+    SavingsIcon,
+    LoyaltyIcon,
+    SkiIcon,
+    SandclockIcon
+} from '@/components/icons';
+
+const ui = useUIStore();
+const showPassword = ref(false);
+
+const props = defineProps({
+    task: {
+        type: Object,
+        required: 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
+}));
+
+const copy = (text) => {
+    navigator.clipboard.writeText(text);
+    ui.showSuccess(`Copied: ${text}`);
+};
+
+const formatDate = (dateString) => {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    return date.toLocaleString();
+};
+
+const colorToClass = (color) => {
+    const colorMap = {
+        red: 'bg-red-400',
+        green: 'bg-green-400',
+        yellow: 'bg-yellow-400',
+        blue: 'bg-blue-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);
+
+    svg {
+        color: oklch(0.90 0 0) !important;
+        width: 16px !important;
+        height: 16px !important;
+    }
+}
+
+.status-indicator {
+    @apply w-2 h-2 rounded-full flex-shrink-0;
+}
+
+@media (max-width: 768px) {
+    .info-label {
+        min-width: 80px;
+        font-size: 11px;
+    }
+
+    .info-value {
+        font-size: 13px;
+    }
+}
+</style>

package/src/components/icons/Bag.vue

@@ -2,7 +2,7 @@
     <svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             d="M1.95833 17.4167C1.52292 17.4167 1.15004 17.2618 0.839708 16.952C0.529903 16.6416 0.375 16.2688 0.375 15.8334V6.33335C0.375 5.89794 0.529903 5.52533 0.839708 5.21552C1.15004 4.90519 1.52292 4.75002 1.95833 4.75002H3.54167C3.54167 3.65488 3.92774 2.72124 4.69988 1.9491C5.47149 1.17749 6.40486 0.791687 7.5 0.791687C8.59514 0.791687 9.52878 1.17749 10.3009 1.9491C11.0725 2.72124 11.4583 3.65488 11.4583 4.75002H13.0417C13.4771 4.75002 13.85 4.90519 14.1603 5.21552C14.4701 5.52533 14.625 5.89794 14.625 6.33335V15.8334C14.625 16.2688 14.4701 16.6416 14.1603 16.952C13.85 17.2618 13.4771 17.4167 13.0417 17.4167H1.95833ZM1.95833 15.8334H13.0417V6.33335H1.95833V15.8334ZM7.5 11.0834C8.59514 11.0834 9.52878 10.6973 10.3009 9.92515C11.0725 9.15353 11.4583 8.22016 11.4583 7.12502H9.875C9.875 7.78474 9.6441 8.34551 9.18229 8.80731C8.72049 9.26912 8.15972 9.50002 7.5 9.50002C6.84028 9.50002 6.27951 9.26912 5.81771 8.80731C5.3559 8.34551 5.125 7.78474 5.125 7.12502H3.54167C3.54167 8.22016 3.92774 9.15353 4.69988 9.92515C5.47149 10.6973 6.40486 11.0834 7.5 11.0834ZM5.125 4.75002H9.875C9.875 4.0903 9.6441 3.52953 9.18229 3.06773C8.72049 2.60592 8.15972 2.37502 7.5 2.37502C6.84028 2.37502 6.27951 2.60592 5.81771 3.06773C5.3559 3.52953 5.125 4.0903 5.125 4.75002Z"
-            fill="#6E7084"
+            fill="currentColor"
         />
     </svg>
 </template>

package/src/components/icons/Check.vue

@@ -0,0 +1,5 @@
+<template>
+    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+    </svg>
+</template>

package/src/components/icons/Close.vue

@@ -0,0 +1,21 @@
+<template>
+    <svg
+        width="17"
+        height="17"
+        viewBox="0 0 17 17"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        class="close-icon"
+    >
+        <path
+            d="M2.20006 16.375L0.625061 14.8L6.92506 8.5L0.625061 2.2L2.20006 0.625L8.50006 6.925L14.8001 0.625L16.3751 2.2L10.0751 8.5L16.3751 14.8L14.8001 16.375L8.50006 10.075L2.20006 16.375Z"
+            fill="currentColor"
+        />
+    </svg>
+</template>
+
+<style scoped>
+.close-icon {
+    @apply w-4 h-4;
+}
+</style>

package/src/components/icons/CloseX.vue

@@ -0,0 +1,5 @@
+<template>
+    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
+    </svg>
+</template>