@necrolab/dashboard 0.4.3

package/src/components/Tasks/ScrapeVenue.vue

@@ -0,0 +1,42 @@
+<template>
+    <Modal>
+        <template #header> Scrape Venue <ScrapeIcon class="ml-4" /></template>
+        <!-- Event ID -->
+        <div class="input-wrapper mt-7 mb-4">
+            <label class="label-override mb-2">Event ID or URL <StadiumIcon /></label>
+            <div class="input-default required">
+                <input
+                    :placeholder="!isEU(ui.currentCountry.siteId) ? '102PDA9125510GYU' : '529171'"
+                    v-model="eventId"
+                />
+            </div>
+        </div>
+        <button
+            class="btn-action ml-auto"
+            @click="done()"
+        >
+            Scrape Venue <ScrapeIcon />
+        </button>
+    </Modal>
+</template>
+<style lang="scss" scoped>
+.input-wrapper {
+    label {
+        @apply flex;
+    }
+}
+</style>
+<script setup>
+import Modal from "@/components/ui/Modal.vue";
+import { StadiumIcon, ScrapeIcon } from "@/components/icons";
+import { useUIStore } from "@/stores/ui";
+import { ref } from "vue";
+import { isEU } from "@/stores/utils";
+
+const ui = useUIStore();
+const eventId = ref("");
+function done() {
+    ui.toggleModal("");
+    ui.scrapeVenue(eventId.value);
+}
+</script>

package/src/components/Tasks/Stats.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="flex text-white font-bold lg:gap-5 gap-1" v-if="show" :key="key">
+        <div
+            v-if="ui.queueStats.total"
+            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
+        >
+            <h2 class="font-bold text-sm flex items-center gap-1 scale-100">
+                <img width="14px" src="@/assets/img/wildcard.svg" />Total MQM
+            </h2>
+            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.total }} </span>
+        </div>
+        <div
+            v-if="ui.queueStats.queued"
+            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
+        >
+            <h2 class="font-bold text-sm flex items-center gap-1"><SkiIcon />Queued</h2>
+            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.queued }} </span>
+        </div>
+        <div
+            v-if="ui.queueStats.sleeping"
+            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
+        >
+            <h2 class="font-bold text-sm flex items-center gap-1"><TimerIcon />Sleeping</h2>
+            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.sleeping }} </span>
+        </div>
+        <div
+            v-if="ui.queueStats.nextQueuePasses.length > 0"
+            class="bg-dark-500 mb-5 rounded-lg text-sm flex justify-between lg:p-2 p-1 lg:gap-3 gap-2"
+        >
+            <h2 class="font-bold flex text-sm items-center gap-1">
+                <CartIcon /><span class="sm:block hidden">Next Passes</span>
+                <span class="sm:hidden block">Pass</span>
+            </h2>
+            <span class="text-light-400 text-sm font-black">{{
+                ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ")
+            }}</span>
+        </div>
+        <!-- <div
+            v-if="ui.queueStats.carts"
+            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
+        >
+            <h2 class="font-bold text-sm flex items-center gap-1"><CartIcon />Carts</h2>
+            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.sleeping }} </span>
+        </div> -->
+    </div>
+</template>
+
+<script setup>
+import { SkiIcon, TimerIcon, CartIcon } from "@/components/icons";
+import { useUIStore } from "@/stores/ui";
+import { ref } from "vue";
+
+const ui = useUIStore();
+
+const getQueuePassAmount = (width) => {
+    if (width > 1024) return 8;
+    if (width > 640) return 3;
+    return 1;
+};
+
+let show = ref(true);
+let key = ref(0);
+let queuePassAmount = ref(getQueuePassAmount(window.innerWidth));
+
+window.addEventListener("resize", () => (queuePassAmount.value = getQueuePassAmount(window.innerWidth)));
+</script>

package/src/components/Tasks/Task.vue

@@ -0,0 +1,296 @@
+<template>
+    {{ console.log(task) }}
+    <Row
+        class="relative text-white grid-cols-12 gap-2"
+        @click="ui.setOpenContextMenu('')"
+        @click.right.prevent="ui.setOpenContextMenu('')"
+    >
+        <div class="block md:hidden absolute left-1 top-0">
+            <h4 class="text-xs task-id text-white">
+                {{ props.task.taskId }}
+            </h4>
+        </div>
+        <div class="col-span-1 lg:col-span-2 flex">
+            <Checkbox
+                class="ml-0 mr-4"
+                :toggled="props.task.selected"
+                @valueUpdate="ui.toggleTaskSelected(props.task.taskId)"
+            />
+            <h4 class="task-id-alt mx-auto hidden md:block text-white" @click="copy(props.task.eventId)">
+                {{ props.task.eventId }}
+            </h4>
+        </div>
+        <div class="col-span-2 hidden md:block">
+            <h4 class="text-white">{{ props.task.quantity }}</h4>
+        </div>
+        <div class="col-span-2">
+            <h4 class="text-white">
+                <span v-if="!props.task.reservedTicketsList">-</span>
+                <div v-else>
+                    <div v-for="l in props.task.reservedTicketsList.split(' | ')" :key="l">
+                        <span v-if="!!l.trim()">{{ l.trim() }}</span>
+                    </div>
+                </div>
+                <span
+                    class="ml-1 font-bold"
+                    :class="{
+                        'text-red-400': props.task._timeLeftString === '00:00' || props.task._timeLeftString === 'No Cartholds'
+                    }"
+                >
+                    {{ props.task._timeLeftString !== "00:00" ? props.task._timeLeftString : "Expired" }}
+                </span>
+            </h4>
+        </div>
+        <div class="col-span-6 md:col-span-4 lg:col-span-3 text-center justify-center">
+            <div class="flex md:gap-x-2 rounded-2xl w-fit shadow-3xl mx-auto items-center justify-center bg-dark-600">
+                <!-- Status circle -->
+                <div
+                    class="status-indicator mx-1 md:ml-3 ml-2"
+                    :class="colorToClass(
+                        props.task.active || props.task.status.toLowerCase() === 'idle'
+                            ? props.task.statusColor
+                            : 'red'
+                    )"
+                ></div>
+                <!-- Actual status -->
+                <span class="font-bold text-sm p-1 md:mr-3 mr-2 truncate uppercase">{{
+                    truncate(props.task.status, statusTruncateLength)
+                }}</span>
+            </div>
+        </div>
+        <div class="col-span-2 flex">
+            <ul class="task-buttons">
+                <li>
+                    <button v-if="task.active" @click="ui.stopTask(task.taskId)">
+                        <PauseIcon />
+                    </button>
+                    <button v-else @click="ui.startTask(task.taskId)">
+                        <PlayIcon />
+                    </button>
+                </li>
+                <li v-if="task.status?.toLowerCase().includes('waiting') && props.task._timeLeftString !== '00:00'">
+                    <button @click="ui.continueTask(task.taskId, 'autocheckout')">
+                        <BagWhiteIcon />
+                    </button>
+                </li>
+                <li v-if="task.status?.toLowerCase().includes('waiting')">
+                    <button @click="ui.continueTask(task.taskId, 'change_reservation')">
+                        <EditIcon />
+                    </button>
+                </li>
+                <li>
+                    <button @click="ui.deleteTask(task.taskId)">
+                        <TrashIcon />
+                    </button>
+                </li>
+                <li class="text-xl -mt-2" @click.right.prevent="window.setTimeout(() => ui.setOpenContextMenu(task.taskId), 10)">
+                    <button class="mt-1" @click="props.task.isExpanded = !props.task.isExpanded">
+                        <span>{{ props.task.isExpanded ? "-" : "+" }}</span>
+                    </button>
+                </li>
+            </ul>
+        </div>
+        <div class="hidden md:block col-span-1 absolute right-5 top-4 lg:flex items-center justify-center">
+            <h4 class="text-center text-xs task-id text-white">
+                {{ props.task.taskId }}
+            </h4>
+        </div>
+        <transition name="fade">
+            <div
+                class="col-span-12 flex flex-wrap gap-x-4 gap-y-4 lg:gap-x-10 pt-8 pb-2 xl:justify-around will-change-auto"
+                v-if="props.task.isExpanded"
+            >
+
+                <!-- Details -->
+                <TaskLabel
+                    class="md:hidden"
+                    image="stadium_w"
+                    :text="props.task.eventId"
+                    @click="copy(props.task.eventId)"
+                />
+
+                <TaskLabel class="md:hidden" image="bag_w" :text="props.task.quantity" />
+                <TaskLabel
+                    v-if="props.task.email"
+                    image="mail"
+                    :text="props.task.email"
+                    @click="copy(props.task.email)"
+                />
+                <TaskLabel
+                    v-if="props.task.password"
+                    image="key"
+                    :text="props.task.password"
+                    @click="copy(props.task.password)"
+                />
+                <TaskLabel v-if="!props.task.email && !props.task.password" image="mail" text="No account chosen yet" />
+                <TaskLabel v-if="props.task.profileName" image="profile" :text="props.task.profileName" />
+                <TaskLabel image="camera" :text="props.task.proxy" @click="copy(props.task.proxy)" />
+                <TaskLabel image="timer" :text="props.task.smartTimer ? 'On' : 'Off'" />
+                <TaskLabel image="groups" :text="props.task.loginAfterCart ? 'On' : 'Off'" />
+                <TaskLabel image="hand" :text="props.task.manual ? 'On' : 'Off'" />
+                <TaskLabel image="savings" :text="props.task.doNotPay ? 'On' : 'Off'" />
+                <TaskLabel image="loyalty" :text="props.task.presaleMode ? 'On' : 'Off'" />
+                <TaskLabel image="ski" :text="props.task.quickQueue ? 'On' : 'Off'" />
+                <TaskLabel image="scanner" :text="props.task.accountTag" />
+                <TaskLabel image="sell" :text="props.task.profileTags.join(', ')" />
+                <TaskLabel
+                    v-if="props.task.presaleCode"
+                    @click="copy(props.task.presaleCode)"
+                    image="pencil"
+                    :text="props.task.presaleCode"
+                />
+
+                <TaskLabel v-if="props.task.eventName" image="stadium_w" :text="props.task.eventName" />
+                <TaskLabel v-if="props.task.eventVenue" image="stadium_w" :text="props.task.eventVenue" />
+                <TaskLabel
+                    v-if="props.task.eventLocalDate"
+                    image="stadium_w"
+                    :text="formatDate(props.task.eventLocalDate)"
+                />
+                <TaskLabel image="sandclock" :text="props.task.agedAccount ? 'On' : 'Off'" />
+            </div>
+        </transition>
+
+        <!-- Context menu -->
+
+        <div class="absolute -bottom-1.5 right-5">
+            <transition name="fade">
+                <div
+                    v-if="ui.openContextMenu === task.taskId"
+                    class="bg-light-300 text-white w-42 grid grid-cols-1 p-1 gap-1 z-50 rounded-lg shadow-xl relative"
+                >
+                    <button class="btn-primary" @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)">
+                        Open Event
+                    </button>
+                    <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(false)">
+                        Open in browser (proxy)
+                    </button>
+                    <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(true)">
+                        Open in browser (debug)
+                    </button>
+                </div>
+            </transition>
+        </div>
+    </Row>
+</template>
+<style lang="scss" scoped>
+h4 {
+    @apply text-center;
+}
+
+.task-buttons {
+    @apply flex mx-auto gap-x-2;
+    
+    button {
+        @apply p-1 rounded transition-colors hover:bg-dark-500;
+    }
+    
+    svg {
+        @apply w-4 h-4;
+    }
+    
+    img {
+        @apply w-4 h-4;
+    }
+}
+
+@media (max-width: 1024px) {
+    h4 {
+        font-size: 10px;
+    }
+    
+    .task-buttons {
+        @apply gap-x-1;
+    }
+    
+    .task-id {
+        font-size: 6px;
+    }
+    
+    .task-id-alt {
+        font-size: 7px;
+    }
+}
+</style>
+
+<script setup>
+/// <reference path="@/types/index.js" />
+
+import { Row } from "@/components/Table";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
+import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
+import { useUIStore } from "@/stores/ui";
+import TaskLabel from "@/components/Tasks/TaskLabel.vue";
+import { ref } from "vue";
+
+const ui = useUIStore();
+
+/** @type {{ task: Task }} */
+const props = defineProps({
+    task: { type: Object }
+});
+
+const copy = (txt) => {
+    if (!txt) return;
+    navigator.clipboard.writeText(txt);
+    ui.showSuccess("Copied text");
+};
+
+const colorMapping = new Map();
+colorMapping.set("green", "bg-green-400");
+colorMapping.set("red", "bg-red-400");
+colorMapping.set("error", "bg-red-400");
+colorMapping.set("success", "bg-green-400");
+const colorToClass = (color) => {
+    return colorMapping.get(color) || "bg-white";
+};
+
+const truncate = (text, after) => {
+    if (text?.length <= after || after === -1) return text;
+    return text?.substring(0, after) + "...";
+};
+
+const openInBrowser = (debug) => {
+    if (!props.task.openerLink) return;
+    ui.showSuccess(`Opening in browser ${debug ? "(debug)" : ""}`);
+    const input = props.task.openerLink;
+    const data = JSON.parse(atob(input.split("://")[1]));
+    data.config.debug = debug;
+    const out = "necro://" + btoa(JSON.stringify(data));
+    openInNewTab(out);
+};
+
+const formatDate = (date) => {
+    if (!date) return "-";
+    const d = new Date(date);
+    const iso = d.toISOString();
+    const [year, month, day] = iso.substring(0, 10).split("-");
+    const time = iso.substring(11, 16);
+    const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const dayName = dayNames[d.getUTCDay()];
+    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    const monthName = monthNames[parseInt(month) - 1];
+    return `${dayName} ${monthName} ${parseInt(day)} ${year} ${time}`;
+};
+
+const openInNewTab = (href) => {
+    if (!href) return;
+    ui.logger.Info("Opening", href);
+    Object.assign(document.createElement("a"), {
+        target: "_blank",
+        rel: "noopener noreferrer",
+        href: href
+    }).click();
+};
+
+const getMaxStatusLength = (width) => {
+    if (width > 1279) return -1;
+    if (width > 767) return 25;
+    if (width > 639) return 30;
+    if (width > 540) return 18;
+    return 13;
+};
+
+let statusTruncateLength = ref(getMaxStatusLength(window.innerWidth));
+window.addEventListener("resize", () => (statusTruncateLength.value = getMaxStatusLength(window.innerWidth)));
+</script>

package/src/components/Tasks/TaskLabel.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="flex rounded-2xl gap-x-2 w-fit shadow-3xl mx-auto items-center justify-center bg-dark-600">
+        <img class="ml-3" v-if="logo" :src="logo" />
+        <div v-else class="ml-3"></div>
+        <span class="font-bold p-2 truncate mr-3">{{ text }}</span>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+    image: { type: String },
+    text: { type: String }
+});
+
+const logo = ref(`/img/${props.image}.svg`);
+if (!props.image) logo.value = "";
+const text = ref(props.text);
+</script>

package/src/components/Tasks/TaskView.vue

@@ -0,0 +1,126 @@
+<template>
+    <Table>
+        <Header class="text-center grid-cols-12 gap-2">
+            <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>
+                    <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-center" v-once>
+                <TicketIcon class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Tickets</h4>
+            </div>
+            <div
+                class="col-span-6 md:col-span-4 lg:col-span-3 flex-center"
+                @click="ui.toggleSort('status')"
+            >
+                <StatusIcon class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg: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-center" v-once>
+                <ClickIcon class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg: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>
+                <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']" />
+            </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>
+            </div>
+        </div>
+    </Table>
+</template>
+<style lang="scss" scoped>
+h4 {
+    @apply text-white;
+}
+
+.stop-pan {
+    touch-action: pan-y pan-up pan-down;
+}
+
+.tasks-table-height {
+    max-height: 33rem !important;
+}
+
+@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;
+    }
+}
+
+@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;
+    }
+}
+</style>
+<script setup>
+import { Table, Header } from "@/components/Table";
+import { EventIcon, CartIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon } from "@/components/icons";
+import Task from "./Task.vue";
+import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
+import { useUIStore } from "@/stores/ui";
+
+const props = defineProps({
+    tasks: { type: Object }
+});
+
+const shouldTaskShow = (task) => {
+    if (ui.taskFilter === "All") return true;
+    else if (ui.taskFilter === "Checkout") return task.expirationTime || task.noCartholds;
+    else return true;
+};
+
+const ui = useUIStore();
+
+const siteIdEdgeCases = {
+    LN_US: ["TM_US"],
+    TM_CA: ["TM_US"],
+    TM_IE: ["TM_UK"],
+    TM_NZ: ["TM_AU"]
+};
+
+const getTasksInOrder = () => {
+    let out = [];
+    ui.taskIdOrder.forEach((id) => {
+        if (props.tasks[id] && !props.tasks[id]?.hidden) {
+            const task = props.tasks[id];
+
+            if (
+                task.siteId !== ui.currentCountry.siteId &&
+                !siteIdEdgeCases[task.siteId]?.includes(ui.currentCountry.siteId)
+            )
+                return;
+            if (ui.currentEvent && task.eventId !== ui.currentEvent) return;
+            if (!shouldTaskShow(task)) return;
+            out.push(task);
+        }
+    });
+    return out;
+};
+</script>

package/src/components/Tasks/Utilities.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="grid grid-cols-1 gap-3 lg:grid-cols-1" v-once 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 />
+                    Scrape Venue
+                </button>
+                <button class="button-default w-44" @click="ui.toggleModal('check-stock')">
+                    <BoxIcon />Check Stock
+                </button>
+                <!-- Mobile Label -->
+            </div>
+            <h4 class="text-white opacity-40 uppercase font-medium block lg:hidden">Utils</h4>
+        </div>
+    </div>
+</template>
+<script setup>
+import { BoxIcon, ScrapeIcon, CameraIcon, GroupIcon } from "@/components/icons";
+import { useUIStore } from "@/stores/ui";
+
+const ui = useUIStore();
+</script>
+<style lang="scss" scoped>
+button {
+    height: 50px;
+    @apply bg-dark-400 text-xs flex items-center justify-center gap-x-2 border border-light-300 hover:border-light-400;
+}
+h4 {
+    font-size: 12px;
+}
+</style>

package/src/components/icons/Award.vue

@@ -0,0 +1,8 @@
+<template>
+    <svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M0.25 0.5H7.75V6.3875C7.75 6.675 7.6875 6.93125 7.5625 7.15625C7.4375 7.38125 7.2625 7.5625 7.0375 7.7L4.375 9.275L4.9 11H7.75L5.425 12.65L6.325 15.5L4 13.7375L1.675 15.5L2.575 12.65L0.25 11H3.1L3.625 9.275L0.9625 7.7C0.7375 7.5625 0.5625 7.38125 0.4375 7.15625C0.3125 6.93125 0.25 6.675 0.25 6.3875V0.5ZM1.75 2V6.3875L3.25 7.2875V2H1.75ZM6.25 2H4.75V7.2875L6.25 6.3875V2Z"
+            fill="white"
+        />
+    </svg>
+</template>

package/src/components/icons/Bag.vue

@@ -0,0 +1,8 @@
+<template>
+    <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"
+        />
+    </svg>
+</template>

package/src/components/icons/BagWhite.vue

@@ -0,0 +1,8 @@
+<template>
+    <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="#ffffff"
+        />
+    </svg>
+</template>

package/src/components/icons/Box.vue

@@ -0,0 +1,8 @@
+<template>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M1.25 14V5.525C1.0375 5.3875 0.8595 5.2125 0.716 5C0.572 4.7875 0.5 4.5375 0.5 4.25V2C0.5 1.5875 0.647 1.23425 0.941 0.94025C1.2345 0.64675 1.5875 0.5 2 0.5H14C14.4125 0.5 14.7658 0.64675 15.0598 0.94025C15.3533 1.23425 15.5 1.5875 15.5 2V4.25C15.5 4.5375 15.428 4.7875 15.284 5C15.1405 5.2125 14.9625 5.3875 14.75 5.525V14C14.75 14.4125 14.6033 14.7658 14.3098 15.0598C14.0158 15.3533 13.6625 15.5 13.25 15.5H2.75C2.3375 15.5 1.98425 15.3533 1.69025 15.0598C1.39675 14.7658 1.25 14.4125 1.25 14ZM2.75 5.75V14H13.25V5.75H2.75ZM14 4.25V2H2V4.25H14ZM5.75 9.5H10.25V8H5.75V9.5Z"
+            fill="white"
+        />
+    </svg>
+</template>

package/src/components/icons/Camera.vue

@@ -0,0 +1,8 @@
+<template>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M7.55 5.75H13.55C13.2125 4.8875 12.697 4.14675 12.0035 3.52775C11.3095 2.90925 10.5125 2.475 9.6125 2.225L7.55 5.75ZM5.825 7.25L8.825 2.075C8.6875 2.05 8.55 2.03125 8.4125 2.01875C8.275 2.00625 8.1375 2 8 2C7.175 2 6.40625 2.15625 5.69375 2.46875C4.98125 2.78125 4.35 3.2 3.8 3.725L5.825 7.25ZM2.1875 9.5H6.275L3.275 4.325C2.875 4.8375 2.5625 5.40325 2.3375 6.02225C2.1125 6.64075 2 7.3 2 8C2 8.2625 2.0155 8.5155 2.0465 8.759C2.078 9.003 2.125 9.25 2.1875 9.5ZM6.3875 13.775L8.4125 10.25H2.45C2.7875 11.1125 3.30325 11.853 3.99725 12.4715C4.69075 13.0905 5.4875 13.525 6.3875 13.775ZM8 14C8.825 14 9.59375 13.8437 10.3062 13.5312C11.0187 13.2188 11.65 12.8 12.2 12.275L10.175 8.75L7.175 13.925C7.3125 13.95 7.447 13.9688 7.5785 13.9813C7.7095 13.9938 7.85 14 8 14ZM12.725 11.675C13.125 11.1625 13.4375 10.5968 13.6625 9.97775C13.8875 9.35925 14 8.7 14 8C14 7.7375 13.9845 7.4845 13.9535 7.241C13.922 6.997 13.875 6.75 13.8125 6.5H9.725L12.725 11.675ZM8 15.5C6.975 15.5 6.00625 15.303 5.09375 14.909C4.18125 14.5155 3.3845 13.978 2.7035 13.2965C2.022 12.6155 1.4845 11.8188 1.091 10.9062C0.697 9.99375 0.5 9.025 0.5 8C0.5 6.9625 0.697 5.99075 1.091 5.08475C1.4845 4.17825 2.022 3.3845 2.7035 2.7035C3.3845 2.022 4.18125 1.48425 5.09375 1.09025C6.00625 0.69675 6.975 0.5 8 0.5C9.0375 0.5 10.0093 0.69675 10.9153 1.09025C11.8218 1.48425 12.6155 2.022 13.2965 2.7035C13.978 3.3845 14.5155 4.17825 14.909 5.08475C15.303 5.99075 15.5 6.9625 15.5 8C15.5 9.025 15.303 9.99375 14.909 10.9062C14.5155 11.8188 13.978 12.6155 13.2965 13.2965C12.6155 13.978 11.8218 14.5155 10.9153 14.909C10.0093 15.303 9.0375 15.5 8 15.5Z"
+            fill="white"
+        />
+    </svg>
+</template>

package/src/components/icons/Cart.vue

@@ -0,0 +1,8 @@
+<template>
+    <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M6.125 18.25C5.64375 18.25 5.23192 18.0788 4.8895 17.7364C4.5465 17.3934 4.375 16.9813 4.375 16.5C4.375 16.0187 4.5465 15.6066 4.8895 15.2636C5.23192 14.9212 5.64375 14.75 6.125 14.75C6.60625 14.75 7.01808 14.9212 7.3605 15.2636C7.7035 15.6066 7.875 16.0187 7.875 16.5C7.875 16.9813 7.7035 17.3934 7.3605 17.7364C7.01808 18.0788 6.60625 18.25 6.125 18.25ZM14.875 18.25C14.3937 18.25 13.9819 18.0788 13.6395 17.7364C13.2965 17.3934 13.125 16.9813 13.125 16.5C13.125 16.0187 13.2965 15.6066 13.6395 15.2636C13.9819 14.9212 14.3937 14.75 14.875 14.75C15.3563 14.75 15.7684 14.9212 16.1114 15.2636C16.4538 15.6066 16.625 16.0187 16.625 16.5C16.625 16.9813 16.4538 17.3934 16.1114 17.7364C15.7684 18.0788 15.3563 18.25 14.875 18.25ZM5.38125 4.25L7.48125 8.625H13.6062L16.0125 4.25H5.38125ZM4.55 2.5H17.4563C17.7917 2.5 18.0469 2.64933 18.2219 2.948C18.3969 3.24725 18.4042 3.55 18.2437 3.85625L15.1375 9.45625C14.9771 9.74792 14.7618 9.97396 14.4918 10.1344C14.2223 10.2948 13.9271 10.375 13.6062 10.375H7.0875L6.125 12.125H16.625V13.875H6.125C5.46875 13.875 4.97292 13.5868 4.6375 13.0105C4.30208 12.4347 4.2875 11.8625 4.59375 11.2937L5.775 9.15L2.625 2.5H0.875V0.75H3.71875L4.55 2.5Z"
+            fill="white"
+        />
+    </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>