From 43e3784509ea767acd6884652df61dc9f1b5c994 Mon Sep 17 00:00:00 2001
From: pey2 <fayepabs20@gmail.com>
Date: Tue, 7 Oct 2025 01:11:07 +0800
Subject: [PATCH 1/6] feat: added main table component

---
 app/components/Table/index.vue | 224 +++++++++++++++++++++++++++++++++
 app/layouts/default.vue        |  13 +-
 package.json                   |   1 +
 pnpm-lock.yaml                 |   5 +-
 4 files changed, 238 insertions(+), 5 deletions(-)
 create mode 100644 app/components/Table/index.vue

diff --git a/app/components/Table/index.vue b/app/components/Table/index.vue
new file mode 100644
index 0000000..b0a8421
--- /dev/null
+++ b/app/components/Table/index.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { getPaginationRowModel } from '@tanstack/vue-table';
+import { h, resolveComponent } from 'vue';
+import type { TableColumn, TableRow } from '@nuxt/ui';
+
+const table = useTemplateRef('table');
+const UBadge = resolveComponent('UBadge');
+const UCheckbox = resolveComponent('UCheckbox');
+
+type lystraTable = {
+  id: string;
+  item: string;
+  amount: number;
+  link: string;
+  platform: 'facebook' | 'lazada' | 'shopee' | 'tiktok' | 'temu';
+  tags: 'placeholder1' | 'placeholder2';
+  priority: 'low' | 'medium' | 'high';
+  status: 'in_cart' | 'ordered' | 'delivered' | 'cancelled';
+};
+
+const data = ref<lystraTable[]>([
+  {
+    id: '4600',
+    item: 'Placeholder Item',
+    amount: 594,
+    link: 'Placeholder Link',
+    platform: 'facebook',
+    tags: 'placeholder1',
+    priority: 'low',
+    status: 'in_cart',
+  },
+  {
+    id: '4599',
+    item: 'Placeholder Item',
+    amount: 276,
+    link: 'Placeholder Link',
+    platform: 'lazada',
+    tags: 'placeholder2',
+    priority: 'medium',
+    status: 'ordered',
+  },
+  {
+    id: '4598',
+    item: 'Placeholder Item',
+    amount: 315,
+    link: 'Placeholder Link',
+    platform: 'shopee',
+    tags: 'placeholder1',
+    priority: 'high',
+    status: 'delivered',
+  },
+  {
+    id: '4597',
+    item: 'Placeholder Item',
+    amount: 529,
+    link: 'Placeholder Link',
+    platform: 'tiktok',
+    tags: 'placeholder2',
+    priority: 'high',
+    status: 'in_cart',
+  },
+  {
+    id: '4596',
+    item: 'Placeholder Item',
+    amount: 639,
+    link: 'Placeholder Link',
+    platform: 'temu',
+    tags: 'placeholder1',
+    priority: 'low',
+    status: 'cancelled',
+  },
+]);
+
+const columns: TableColumn<lystraTable>[] = [
+  {
+    id: 'select',
+    header: ({ table }) =>
+      h(UCheckbox, {
+        modelValue: table.getIsSomePageRowsSelected()
+          ? 'indeterminate'
+          : table.getIsAllPageRowsSelected(),
+        'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
+          table.toggleAllPageRowsSelected(!!value),
+        'aria-label': 'Select all',
+      }),
+    cell: ({ row }) =>
+      h(UCheckbox, {
+        modelValue: row.getIsSelected(),
+        'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
+        'aria-label': 'Select row',
+      }),
+  },
+  {
+    accessorKey: 'item',
+    header: 'Item',
+  },
+  {
+    accessorKey: 'amount',
+    header: () => h('div', { class: 'text-left' }, 'Price'),
+    cell: ({ row }) => {
+      const amount = Number.parseFloat(row.getValue('amount'));
+
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'PHP',
+      }).format(amount);
+
+      return h('div', { class: 'text-left font-medium' }, formatted);
+    },
+  },
+  {
+    accessorKey: 'link',
+    header: 'Link',
+  },
+  {
+    accessorKey: 'platform',
+    header: 'Platform',
+    cell: ({ row }) => {
+      const color = {
+        facebook: 'success' as const,
+        lazada: 'error' as const,
+        shopee: 'neutral' as const,
+        tiktok: 'neutral' as const,
+        temu: 'neutral' as const,
+      }[row.getValue('platform') as string];
+
+      return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () =>
+        row.getValue('platform')
+      );
+    },
+  },
+  {
+    accessorKey: 'tags',
+    header: 'Tags',
+    cell: ({ row }) => {
+      const color = {
+        placeholder1: 'neutral' as const,
+        placeholder2: 'neutral' as const,
+      }[row.getValue('tags') as string];
+
+      return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () =>
+        row.getValue('tags')
+      );
+    },
+  },
+  {
+    accessorKey: 'priority',
+    header: 'Priority',
+    cell: ({ row }) => {
+      const color = {
+        low: 'success' as const,
+        medium: 'warning' as const,
+        high: 'error' as const,
+      }[row.getValue('priority') as string];
+
+      return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () =>
+        row.getValue('priority')
+      );
+    },
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => {
+      const status = row.getValue('status') as string;
+
+      const color = {
+        in_cart: 'info' as const,
+        ordered: 'warning' as const,
+        delivered: 'success' as const,
+        cancelled: 'neutral' as const,
+      }[status];
+
+      const label =
+        {
+          in_cart: 'In Cart',
+          ordered: 'Ordered',
+          delivered: 'Delivered',
+          cancelled: 'Cancelled',
+        }[status] || status;
+
+      return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => label);
+    },
+  },
+];
+
+const rowSelection = ref<Record<string, boolean>>({});
+
+function onSelect(row: TableRow<lystraTable>) {
+  /* If you decide to also select the column you can do this  */
+  row.toggleSelected(!row.getIsSelected());
+}
+
+const pagination = ref({
+  pageIndex: 0,
+  pageSize: 5,
+});
+</script>
+
+<template>
+  <div class="border boder-white border-collapse rounded-lg rounded-m pb-4">
+    <UTable
+      ref="table"
+      v-model:row-selection="rowSelection"
+      v-model:pagination="pagination"
+      :data="data"
+      :columns="columns"
+      :pagination-options="{
+        getPaginationRowModel: getPaginationRowModel(),
+      }"
+      class="flex-1"
+      @select="onSelect"
+    />
+
+    <div class="flex justify-center border-t border-default pt-4">
+      <UPagination
+        :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
+        :items-per-page="table?.tableApi?.getState().pagination.pageSize"
+        :total="table?.tableApi?.getFilteredRowModel().rows.length"
+        @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 781a35d..66431b6 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="flex flex-col min-h-screen">
-    <Header />
-    <slot />
-  </div>
+  <section class="flex flex-col min-h-screen">
+    <div>
+      <Header />
+      <slot />
+    </div>
+    <div class="p-5">
+      <Table />
+    </div>
+  </section>
 </template>
diff --git a/package.json b/package.json
index 809823d..d23f34b 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@nuxt/fonts": "0.11.4",
     "@nuxt/image": "1.11.0",
     "@nuxt/ui": "4.0.0",
+    "@tanstack/vue-table": "8.21.3",
     "@pinia/nuxt": "0.11.2",
     "@tailwindcss/vite": "^4.1.14",
     "eslint": "^9.37.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0f55262..7e55f79 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,7 +31,10 @@ importers:
         version: 0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))
       '@tailwindcss/vite':
         specifier: ^4.1.14
-        version: 4.1.14(vite@7.1.9(@types/node@24.7.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 4.1.14(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
+      '@tanstack/vue-table':
+        specifier: 8.21.3
+        version: 8.21.3(vue@3.5.22(typescript@5.9.3))
       eslint:
         specifier: ^9.37.0
         version: 9.37.0(jiti@2.6.1)

From 9c68681572e593f30148bad6049bfd3d29c20258 Mon Sep 17 00:00:00 2001
From: pey2 <fayepabs20@gmail.com>
Date: Wed, 8 Oct 2025 22:30:08 +0800
Subject: [PATCH 2/6] feat: added edit and delete dropdown

---
 app/components/Table/index.vue | 168 ++++++++++++++++++++++++++++++++-
 1 file changed, 167 insertions(+), 1 deletion(-)

diff --git a/app/components/Table/index.vue b/app/components/Table/index.vue
index b0a8421..6016cef 100644
--- a/app/components/Table/index.vue
+++ b/app/components/Table/index.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import { getPaginationRowModel } from '@tanstack/vue-table';
 import { h, resolveComponent } from 'vue';
-import type { TableColumn, TableRow } from '@nuxt/ui';
+import type { TableColumn, TableRow, FormError } from '@nuxt/ui';
 
 const table = useTemplateRef('table');
 const UBadge = resolveComponent('UBadge');
 const UCheckbox = resolveComponent('UCheckbox');
+const UDropdownMenu = resolveComponent('UDropdownMenu');
+const UButton = resolveComponent('UButton');
+const toast = useToast();
+
+const showEditModal = ref(false);
 
 type lystraTable = {
   id: string;
@@ -182,6 +187,64 @@ const columns: TableColumn<lystraTable>[] = [
       return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => label);
     },
   },
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: () => {
+      const items = [
+        {
+          type: 'label',
+          label: 'Actions',
+        },
+        {
+          label: 'Edit',
+          onSelect() {
+            showEditModal.value = true;
+            // copy(row.original.id)
+
+            // toast.add({
+            //   title: 'Payment ID copied to clipboard!',
+            //   color: 'success',
+            //   icon: 'i-lucide-circle-check'
+            // })
+          },
+        },
+        {
+          label: 'Delete',
+          onSelect() {
+            toast.add({
+              title: 'Your item has been deleted.',
+              color: 'success',
+              icon: 'i-lucide-circle-check',
+            });
+          },
+        },
+      ];
+
+      return h(
+        'div',
+        { class: 'text-right' },
+        h(
+          UDropdownMenu,
+          {
+            content: {
+              align: 'end',
+            },
+            items,
+            'aria-label': 'Actions dropdown',
+          },
+          () =>
+            h(UButton, {
+              icon: 'i-lucide-ellipsis-vertical',
+              color: 'neutral',
+              variant: 'ghost',
+              class: 'ml-auto',
+              'aria-label': 'Actions dropdown',
+            })
+        )
+      );
+    },
+  },
 ];
 
 const rowSelection = ref<Record<string, boolean>>({});
@@ -195,6 +258,53 @@ const pagination = ref({
   pageIndex: 0,
   pageSize: 5,
 });
+
+// ------------ MODAL ------------ //
+const platform = ref(['Facebook', 'Lazada', 'Shopee', 'Tiktok', 'Shein', 'Temu']);
+const priority = ref(['Low', 'Medium', 'High']);
+const status = ref(['In Cart', 'Ordered', 'Delivered', 'Cancelled']);
+const tags = ref(['Placeholder1', 'Placeholder2', 'Placeholder3', 'Placeholder4']);
+
+interface ItemState {
+  item_name?: string;
+  price?: number;
+  link?: string;
+  platform?: string;
+  priority?: string;
+  status?: string;
+  tags?: string[];
+}
+
+const state = reactive<ItemState>({
+  item_name: undefined,
+  price: undefined,
+  link: undefined,
+  platform: undefined,
+  priority: undefined,
+  status: undefined,
+  tags: undefined,
+});
+
+const validate = (state: ItemState): FormError[] => {
+  const errors = [];
+  if (!state.item_name) errors.push({ name: 'item_name', message: 'Required' });
+  if (!state.price) errors.push({ name: 'price', message: 'Required' });
+  if (!state.link) errors.push({ name: 'link', message: 'Required' });
+  if (!state.platform) errors.push({ name: 'platform', message: 'Required' });
+  if (!state.priority) errors.push({ name: 'priority', message: 'Required' });
+  if (!state.status) errors.push({ name: 'status', message: 'Required' });
+  if (!state.tags) errors.push({ name: 'tags', message: 'Required' });
+  return errors;
+};
+
+async function onSubmit() {
+  showEditModal.value = false;
+  toast.add({
+    title: 'Your item has been edited.',
+    color: 'success',
+    icon: 'i-lucide-circle-check',
+  });
+}
 </script>
 
 <template>
@@ -221,4 +331,60 @@ const pagination = ref({
       />
     </div>
   </div>
+
+  <div>
+    <UModal v-model:open="showEditModal" title="Edit Item">
+      <template #body>
+        <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
+          <div class="grid grid-cols-2 gap-2">
+            <div>
+              <UFormField label="Item Name" name="item_name" required>
+                <UInput v-model="state.item_name" class="w-full" />
+              </UFormField>
+            </div>
+            <div>
+              <UFormField label="Price" name="price" required>
+                <UInput
+                  v-model="state.price"
+                  icon="pepicons-pop:peso"
+                  class="w-full"
+                  type="number"
+                />
+              </UFormField>
+            </div>
+          </div>
+          <div>
+            <UFormField label="Link" name="link" required>
+              <UInput v-model="state.link" class="w-full" />
+            </UFormField>
+          </div>
+          <div class="grid grid-cols-3 gap-2">
+            <div>
+              <UFormField label="Platform" name="platform" required>
+                <UInputMenu v-model="state.platform" :items="platform" class="w-full" />
+              </UFormField>
+            </div>
+            <div>
+              <UFormField label="Priority" name="priority" required>
+                <UInputMenu v-model="state.priority" :items="priority" class="w-full" />
+              </UFormField>
+            </div>
+            <div>
+              <UFormField label="Status" name="status" required>
+                <UInputMenu v-model="state.status" :items="status" class="w-full" />
+              </UFormField>
+            </div>
+          </div>
+          <div>
+            <UFormField label="Tags" name="tags" required>
+              <UInputMenu v-model="state.tags" multiple :items="tags" class="w-full" />
+            </UFormField>
+          </div>
+          <div class="flex justify-center pt-4">
+            <UButton type="submit">Edit Item</UButton>
+          </div>
+        </UForm>
+      </template>
+    </UModal>
+  </div>
 </template>

From 88a0c70ff894804d122fe830f3528b565619d91e Mon Sep 17 00:00:00 2001
From: pey2 <fayepabs20@gmail.com>
Date: Thu, 9 Oct 2025 00:03:57 +0800
Subject: [PATCH 3/6] refactor: modal changes

---
 app/components/Modal/index.vue | 103 ++++++++++++++++++++++++++++
 app/components/Table/index.vue | 118 ++-------------------------------
 app/layouts/default.vue        |   1 +
 app/stores/useModal.ts         |  15 +++++
 app/types/item.ts              |   9 +++
 5 files changed, 132 insertions(+), 114 deletions(-)
 create mode 100644 app/components/Modal/index.vue
 create mode 100644 app/stores/useModal.ts
 create mode 100644 app/types/item.ts

diff --git a/app/components/Modal/index.vue b/app/components/Modal/index.vue
new file mode 100644
index 0000000..2d36163
--- /dev/null
+++ b/app/components/Modal/index.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { FormError } from '@nuxt/ui';
+import { useModalStore } from '@/stores/useModal';
+import type { ItemState } from '@/types/item';
+
+const modal = useModalStore();
+const UButton = resolveComponent('UButton');
+const toast = useToast();
+
+const platform = ref(['Facebook', 'Lazada', 'Shopee', 'Tiktok', 'Shein', 'Temu']);
+const priority = ref(['Low', 'Medium', 'High']);
+const status = ref(['In Cart', 'Ordered', 'Delivered', 'Cancelled']);
+const tags = ref(['Placeholder1', 'Placeholder2', 'Placeholder3', 'Placeholder4']);
+
+const state = reactive<ItemState>({
+  item_name: undefined,
+  price: undefined,
+  link: undefined,
+  platform: undefined,
+  priority: undefined,
+  status: undefined,
+  tags: undefined,
+});
+
+const validate = (state: ItemState): FormError[] => {
+  const errors = [];
+  if (!state.item_name) errors.push({ name: 'item_name', message: 'Required' });
+  if (!state.price) errors.push({ name: 'price', message: 'Required' });
+  if (!state.link) errors.push({ name: 'link', message: 'Required' });
+  if (!state.platform) errors.push({ name: 'platform', message: 'Required' });
+  if (!state.priority) errors.push({ name: 'priority', message: 'Required' });
+  if (!state.status) errors.push({ name: 'status', message: 'Required' });
+  if (!state.tags) errors.push({ name: 'tags', message: 'Required' });
+  return errors;
+};
+
+async function onSubmit() {
+  modal.closeModal();
+  toast.add({
+    title: 'Your item has been edited.',
+    color: 'success',
+    icon: 'i-lucide-circle-check',
+  });
+}
+</script>
+
+<template>
+  <div>
+    <UModal v-model:open="modal.showModal" title="Edit Item">
+      <template #body>
+        <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
+          <div class="grid grid-cols-2 gap-2">
+            <div>
+              <UFormField label="Item Name" name="item_name" required>
+                <UInput v-model="state.item_name" class="w-full" />
+              </UFormField>
+            </div>
+            <div>
+              <UFormField label="Price" name="price" required>
+                <UInput
+                  v-model="state.price"
+                  icon="pepicons-pop:peso"
+                  class="w-full"
+                  type="number"
+                />
+              </UFormField>
+            </div>
+          </div>
+          <div>
+            <UFormField label="Link" name="link" required>
+              <UInput v-model="state.link" class="w-full" />
+            </UFormField>
+          </div>
+          <div class="grid grid-cols-3 gap-2">
+            <div>
+              <UFormField label="Platform" name="platform" required>
+                <UInputMenu v-model="state.platform" :items="platform" class="w-full" />
+              </UFormField>
+            </div>
+            <div>
+              <UFormField label="Priority" name="priority" required>
+                <UInputMenu v-model="state.priority" :items="priority" class="w-full" />
+              </UFormField>
+            </div>
+            <div>
+              <UFormField label="Status" name="status" required>
+                <UInputMenu v-model="state.status" :items="status" class="w-full" />
+              </UFormField>
+            </div>
+          </div>
+          <div>
+            <UFormField label="Tags" name="tags" required>
+              <UInputMenu v-model="state.tags" multiple :items="tags" class="w-full" />
+            </UFormField>
+          </div>
+          <div class="flex justify-center pt-4">
+            <UButton type="submit">Edit Item</UButton>
+          </div>
+        </UForm>
+      </template>
+    </UModal>
+  </div>
+</template>
diff --git a/app/components/Table/index.vue b/app/components/Table/index.vue
index 6016cef..60fbe0e 100644
--- a/app/components/Table/index.vue
+++ b/app/components/Table/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { getPaginationRowModel } from '@tanstack/vue-table';
 import { h, resolveComponent } from 'vue';
-import type { TableColumn, TableRow, FormError } from '@nuxt/ui';
+import type { TableColumn, TableRow } from '@nuxt/ui';
+import { useModalStore } from '@/stores/useModal';
 
 const table = useTemplateRef('table');
 const UBadge = resolveComponent('UBadge');
@@ -10,7 +11,7 @@ const UDropdownMenu = resolveComponent('UDropdownMenu');
 const UButton = resolveComponent('UButton');
 const toast = useToast();
 
-const showEditModal = ref(false);
+const modal = useModalStore();
 
 type lystraTable = {
   id: string;
@@ -199,14 +200,7 @@ const columns: TableColumn<lystraTable>[] = [
         {
           label: 'Edit',
           onSelect() {
-            showEditModal.value = true;
-            // copy(row.original.id)
-
-            // toast.add({
-            //   title: 'Payment ID copied to clipboard!',
-            //   color: 'success',
-            //   icon: 'i-lucide-circle-check'
-            // })
+            modal.openModal();
           },
         },
         {
@@ -250,7 +244,6 @@ const columns: TableColumn<lystraTable>[] = [
 const rowSelection = ref<Record<string, boolean>>({});
 
 function onSelect(row: TableRow<lystraTable>) {
-  /* If you decide to also select the column you can do this  */
   row.toggleSelected(!row.getIsSelected());
 }
 
@@ -258,53 +251,6 @@ const pagination = ref({
   pageIndex: 0,
   pageSize: 5,
 });
-
-// ------------ MODAL ------------ //
-const platform = ref(['Facebook', 'Lazada', 'Shopee', 'Tiktok', 'Shein', 'Temu']);
-const priority = ref(['Low', 'Medium', 'High']);
-const status = ref(['In Cart', 'Ordered', 'Delivered', 'Cancelled']);
-const tags = ref(['Placeholder1', 'Placeholder2', 'Placeholder3', 'Placeholder4']);
-
-interface ItemState {
-  item_name?: string;
-  price?: number;
-  link?: string;
-  platform?: string;
-  priority?: string;
-  status?: string;
-  tags?: string[];
-}
-
-const state = reactive<ItemState>({
-  item_name: undefined,
-  price: undefined,
-  link: undefined,
-  platform: undefined,
-  priority: undefined,
-  status: undefined,
-  tags: undefined,
-});
-
-const validate = (state: ItemState): FormError[] => {
-  const errors = [];
-  if (!state.item_name) errors.push({ name: 'item_name', message: 'Required' });
-  if (!state.price) errors.push({ name: 'price', message: 'Required' });
-  if (!state.link) errors.push({ name: 'link', message: 'Required' });
-  if (!state.platform) errors.push({ name: 'platform', message: 'Required' });
-  if (!state.priority) errors.push({ name: 'priority', message: 'Required' });
-  if (!state.status) errors.push({ name: 'status', message: 'Required' });
-  if (!state.tags) errors.push({ name: 'tags', message: 'Required' });
-  return errors;
-};
-
-async function onSubmit() {
-  showEditModal.value = false;
-  toast.add({
-    title: 'Your item has been edited.',
-    color: 'success',
-    icon: 'i-lucide-circle-check',
-  });
-}
 </script>
 
 <template>
@@ -331,60 +277,4 @@ async function onSubmit() {
       />
     </div>
   </div>
-
-  <div>
-    <UModal v-model:open="showEditModal" title="Edit Item">
-      <template #body>
-        <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
-          <div class="grid grid-cols-2 gap-2">
-            <div>
-              <UFormField label="Item Name" name="item_name" required>
-                <UInput v-model="state.item_name" class="w-full" />
-              </UFormField>
-            </div>
-            <div>
-              <UFormField label="Price" name="price" required>
-                <UInput
-                  v-model="state.price"
-                  icon="pepicons-pop:peso"
-                  class="w-full"
-                  type="number"
-                />
-              </UFormField>
-            </div>
-          </div>
-          <div>
-            <UFormField label="Link" name="link" required>
-              <UInput v-model="state.link" class="w-full" />
-            </UFormField>
-          </div>
-          <div class="grid grid-cols-3 gap-2">
-            <div>
-              <UFormField label="Platform" name="platform" required>
-                <UInputMenu v-model="state.platform" :items="platform" class="w-full" />
-              </UFormField>
-            </div>
-            <div>
-              <UFormField label="Priority" name="priority" required>
-                <UInputMenu v-model="state.priority" :items="priority" class="w-full" />
-              </UFormField>
-            </div>
-            <div>
-              <UFormField label="Status" name="status" required>
-                <UInputMenu v-model="state.status" :items="status" class="w-full" />
-              </UFormField>
-            </div>
-          </div>
-          <div>
-            <UFormField label="Tags" name="tags" required>
-              <UInputMenu v-model="state.tags" multiple :items="tags" class="w-full" />
-            </UFormField>
-          </div>
-          <div class="flex justify-center pt-4">
-            <UButton type="submit">Edit Item</UButton>
-          </div>
-        </UForm>
-      </template>
-    </UModal>
-  </div>
 </template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 66431b6..08fd064 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -6,6 +6,7 @@
     </div>
     <div class="p-5">
       <Table />
+      <Modal />
     </div>
   </section>
 </template>
diff --git a/app/stores/useModal.ts b/app/stores/useModal.ts
new file mode 100644
index 0000000..7ddbf65
--- /dev/null
+++ b/app/stores/useModal.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useModalStore = defineStore('modal', {
+  state: () => ({
+    showModal: false,
+  }),
+  actions: {
+    openModal() {
+      this.showModal = true;
+    },
+    closeModal() {
+      this.showModal = false;
+    },
+  },
+});
diff --git a/app/types/item.ts b/app/types/item.ts
new file mode 100644
index 0000000..3e124c0
--- /dev/null
+++ b/app/types/item.ts
@@ -0,0 +1,9 @@
+export interface ItemState {
+  item_name?: string;
+  price?: number;
+  link?: string;
+  platform?: string;
+  priority?: string;
+  status?: string;
+  tags?: string[];
+}

From e4bb4b740d1bc519129ee45d45256f050bb52b0a Mon Sep 17 00:00:00 2001
From: rockyroed <roed-imp.vo97b@slmail.me>
Date: Thu, 9 Oct 2025 09:55:21 +0800
Subject: [PATCH 4/6] fix: resolve lockfile error

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e55f79..4b24d54 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,7 +31,7 @@ importers:
         version: 0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))
       '@tailwindcss/vite':
         specifier: ^4.1.14
-        version: 4.1.14(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 4.1.14(vite@7.1.9(@types/node@24.7.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
       '@tanstack/vue-table':
         specifier: 8.21.3
         version: 8.21.3(vue@3.5.22(typescript@5.9.3))

From 9bffc6b3ba4b54d732ee7cb9ab1f696420c58e06 Mon Sep 17 00:00:00 2001
From: rockyroed <roed-imp.vo97b@slmail.me>
Date: Thu, 9 Oct 2025 10:00:00 +0800
Subject: [PATCH 5/6] test: update snapshot

---
 .../__snapshots__/components.test.ts.snap     | 490 +++++++++++++++++-
 1 file changed, 465 insertions(+), 25 deletions(-)

diff --git a/test/nuxt/__snapshots__/components.test.ts.snap b/test/nuxt/__snapshots__/components.test.ts.snap
index c4c0b7c..e8270cd 100644
--- a/test/nuxt/__snapshots__/components.test.ts.snap
+++ b/test/nuxt/__snapshots__/components.test.ts.snap
@@ -1,42 +1,482 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`App > should match snapshot 1`] = `
-"<div class="flex flex-col min-h-screen">
-  <div class="flex justify-between items-center px-4 md:px-8 lg:px-28 py-4"><a href="/" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-pointer">
-      <!--v-if--><img width="40" height="40" alt="Lystra logo" data-nuxt-img="" srcset="/_ipx/b_transparent&amp;fit_contain&amp;s_40x40/lystra-logo-light.svg 1x, /_ipx/b_transparent&amp;fit_contain&amp;s_80x80/lystra-logo-light.svg 2x" data-testid="logo" src="/_ipx/b_transparent&amp;fit_contain&amp;s_40x40/lystra-logo-light.svg">
-      <h1 class="text-gray-900 dark:text-white text-lg font-bold">Lystra</h1>
-      <!--v-if-->
-    </a>
-    <div class="flex items-center gap-1.5"><button type="button" aria-label="Switch to dark mode" data-testid="color-mode-toggle" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-pointer"><span class="iconify i-lucide:sun shrink-0 size-5" aria-hidden="true"></span>
-        <!--v-if-->
+"<section class="flex flex-col min-h-screen">
+  <div>
+    <div class="flex justify-between items-center px-4 md:px-8 lg:px-28 py-4"><a href="/" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-pointer">
+        <!--v-if--><img width="40" height="40" alt="Lystra logo" data-nuxt-img="" srcset="/_ipx/b_transparent&amp;fit_contain&amp;s_40x40/lystra-logo-light.svg 1x, /_ipx/b_transparent&amp;fit_contain&amp;s_80x80/lystra-logo-light.svg 2x" data-testid="logo" src="/_ipx/b_transparent&amp;fit_contain&amp;s_40x40/lystra-logo-light.svg">
+        <h1 class="text-gray-900 dark:text-white text-lg font-bold">Lystra</h1>
         <!--v-if-->
-      </button>
-      <signed-out-stub></signed-out-stub>
-      <signed-in-stub></signed-in-stub>
+      </a>
+      <div class="flex items-center gap-1.5"><button type="button" aria-label="Switch to dark mode" data-testid="color-mode-toggle" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-pointer"><span class="iconify i-lucide:sun shrink-0 size-5" aria-hidden="true"></span>
+          <!--v-if-->
+          <!--v-if-->
+        </button>
+        <signed-out-stub></signed-out-stub>
+        <signed-in-stub></signed-in-stub>
+      </div>
     </div>
+    <div></div>
   </div>
-  <div></div>
-</div>
+  <div class="p-5">
+    <div class="border boder-white border-collapse rounded-lg rounded-m pb-4">
+      <div class="relative overflow-auto flex-1">
+        <table class="min-w-full overflow-clip">
+          <!--v-if-->
+          <thead class="relative">
+            <tr class="data-[selected=true]:bg-elevated/50">
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Item</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left">Price</div>
+              </th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Link</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Platform</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Tags</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Priority</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+                <!---->
+              </th>
+            </tr>
+            <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+          </thead>
+          <tbody class="divide-y divide-default [&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary">
+            <tr data-selected="false" data-selectable="true" data-expanded="false" role="button" tabindex="0" class="data-[selected=true]:bg-elevated/50">
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Item</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left font-medium">₱594.00</div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Link</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-success/10 text-success ring ring-inset ring-success/25 capitalize"><!--v-if-->facebook<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->placeholder1<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-success/10 text-success ring ring-inset ring-success/25 capitalize"><!--v-if-->low<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-info/10 text-info ring ring-inset ring-info/25 capitalize"><!--v-if-->In Cart<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions dropdown" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+                    <!--v-if-->
+                    <!--v-if-->
+                  </button>
+                  <!---->
+                  <!--teleport start-->
+                  <!--teleport end-->
+                </div>
+              </td>
+            </tr>
+            <!--v-if-->
+            <tr data-selected="false" data-selectable="true" data-expanded="false" role="button" tabindex="0" class="data-[selected=true]:bg-elevated/50">
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Item</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left font-medium">₱276.00</div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Link</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->lazada<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->placeholder2<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-warning/10 text-warning ring ring-inset ring-warning/25 capitalize"><!--v-if-->medium<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-warning/10 text-warning ring ring-inset ring-warning/25 capitalize"><!--v-if-->Ordered<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions dropdown" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+                    <!--v-if-->
+                    <!--v-if-->
+                  </button>
+                  <!---->
+                  <!--teleport start-->
+                  <!--teleport end-->
+                </div>
+              </td>
+            </tr>
+            <!--v-if-->
+            <tr data-selected="false" data-selectable="true" data-expanded="false" role="button" tabindex="0" class="data-[selected=true]:bg-elevated/50">
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Item</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left font-medium">₱315.00</div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Link</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->shopee<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->placeholder1<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->high<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-success/10 text-success ring ring-inset ring-success/25 capitalize"><!--v-if-->Delivered<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions dropdown" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+                    <!--v-if-->
+                    <!--v-if-->
+                  </button>
+                  <!---->
+                  <!--teleport start-->
+                  <!--teleport end-->
+                </div>
+              </td>
+            </tr>
+            <!--v-if-->
+            <tr data-selected="false" data-selectable="true" data-expanded="false" role="button" tabindex="0" class="data-[selected=true]:bg-elevated/50">
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Item</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left font-medium">₱529.00</div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Link</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->tiktok<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->placeholder2<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->high<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-info/10 text-info ring ring-inset ring-info/25 capitalize"><!--v-if-->In Cart<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions dropdown" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+                    <!--v-if-->
+                    <!--v-if-->
+                  </button>
+                  <!---->
+                  <!--teleport start-->
+                  <!--teleport end-->
+                </div>
+              </td>
+            </tr>
+            <!--v-if-->
+            <tr data-selected="false" data-selectable="true" data-expanded="false" role="button" tabindex="0" class="data-[selected=true]:bg-elevated/50">
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Item</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left font-medium">₱639.00</div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Link</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->temu<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->placeholder1<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-success/10 text-success ring ring-inset ring-success/25 capitalize"><!--v-if-->low<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->Cancelled<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions dropdown" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+                    <!--v-if-->
+                    <!--v-if-->
+                  </button>
+                  <!---->
+                  <!--teleport start-->
+                  <!--teleport end-->
+                </div>
+              </td>
+            </tr>
+            <!--v-if-->
+          </tbody>
+          <!--v-if-->
+        </table>
+      </div>
+      <div class="flex justify-center border-t border-default pt-4">
+        <nav>
+          <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+              <!--v-if-->
+              <!--v-if-->
+            </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+              <!--v-if-->
+              <!--v-if-->
+            </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+              <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+              <!--v-if-->
+            </button><button type="button" disabled="" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+              <!--v-if-->
+              <!--v-if-->
+            </button><button type="button" disabled="" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+              <!--v-if-->
+              <!--v-if-->
+            </button></div>
+        </nav>
+      </div>
+    </div>
+    <div>
+      <!--v-if-->
+      <!--teleport start-->
+      <!--teleport end-->
+    </div>
+  </div>
+</section>
 <!--teleport start-->
 <!--teleport end-->"
 `;
 
 exports[`DefaultLayout > should match snapshot 1`] = `
-"<div class="flex flex-col min-h-screen">
-  <div class="flex justify-between items-center px-4 md:px-8 lg:px-28 py-4"><a href="/" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-pointer">
-      <!--v-if--><img width="40" height="40" alt="Lystra logo" data-nuxt-img="" srcset="/_ipx/b_transparent&amp;fit_contain&amp;s_40x40/lystra-logo-light.svg 1x, /_ipx/b_transparent&amp;fit_contain&amp;s_80x80/lystra-logo-light.svg 2x" data-testid="logo" src="/_ipx/b_transparent&amp;fit_contain&amp;s_40x40/lystra-logo-light.svg">
-      <h1 class="text-gray-900 dark:text-white text-lg font-bold">Lystra</h1>
-      <!--v-if-->
-    </a>
-    <div class="flex items-center gap-1.5"><button type="button" aria-label="Switch to dark mode" data-testid="color-mode-toggle" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-pointer"><span class="iconify i-lucide:sun shrink-0 size-5" aria-hidden="true"></span>
+"<section class="flex flex-col min-h-screen">
+  <div>
+    <div class="flex justify-between items-center px-4 md:px-8 lg:px-28 py-4"><a href="/" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-pointer">
+        <!--v-if--><img width="40" height="40" alt="Lystra logo" data-nuxt-img="" srcset="/_ipx/b_transparent&amp;fit_contain&amp;s_40x40/lystra-logo-light.svg 1x, /_ipx/b_transparent&amp;fit_contain&amp;s_80x80/lystra-logo-light.svg 2x" data-testid="logo" src="/_ipx/b_transparent&amp;fit_contain&amp;s_40x40/lystra-logo-light.svg">
+        <h1 class="text-gray-900 dark:text-white text-lg font-bold">Lystra</h1>
         <!--v-if-->
-        <!--v-if-->
-      </button>
-      <signed-out-stub></signed-out-stub>
-      <signed-in-stub></signed-in-stub>
+      </a>
+      <div class="flex items-center gap-1.5"><button type="button" aria-label="Switch to dark mode" data-testid="color-mode-toggle" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-pointer"><span class="iconify i-lucide:sun shrink-0 size-5" aria-hidden="true"></span>
+          <!--v-if-->
+          <!--v-if-->
+        </button>
+        <signed-out-stub></signed-out-stub>
+        <signed-in-stub></signed-in-stub>
+      </div>
     </div>
   </div>
-</div>"
+  <div class="p-5">
+    <div class="border boder-white border-collapse rounded-lg rounded-m pb-4">
+      <div class="relative overflow-auto flex-1">
+        <table class="min-w-full overflow-clip">
+          <!--v-if-->
+          <thead class="relative">
+            <tr class="data-[selected=true]:bg-elevated/50">
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Item</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left">Price</div>
+              </th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Link</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Platform</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Tags</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Priority</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+              <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+                <!---->
+              </th>
+            </tr>
+            <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+          </thead>
+          <tbody class="divide-y divide-default [&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary">
+            <tr data-selected="false" data-selectable="true" data-expanded="false" role="button" tabindex="0" class="data-[selected=true]:bg-elevated/50">
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Item</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left font-medium">₱594.00</div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Link</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-success/10 text-success ring ring-inset ring-success/25 capitalize"><!--v-if-->facebook<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->placeholder1<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-success/10 text-success ring ring-inset ring-success/25 capitalize"><!--v-if-->low<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-info/10 text-info ring ring-inset ring-info/25 capitalize"><!--v-if-->In Cart<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions dropdown" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+                    <!--v-if-->
+                    <!--v-if-->
+                  </button>
+                  <!---->
+                  <!--teleport start-->
+                  <!--teleport end-->
+                </div>
+              </td>
+            </tr>
+            <!--v-if-->
+            <tr data-selected="false" data-selectable="true" data-expanded="false" role="button" tabindex="0" class="data-[selected=true]:bg-elevated/50">
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Item</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left font-medium">₱276.00</div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Link</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->lazada<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->placeholder2<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-warning/10 text-warning ring ring-inset ring-warning/25 capitalize"><!--v-if-->medium<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-warning/10 text-warning ring ring-inset ring-warning/25 capitalize"><!--v-if-->Ordered<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions dropdown" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+                    <!--v-if-->
+                    <!--v-if-->
+                  </button>
+                  <!---->
+                  <!--teleport start-->
+                  <!--teleport end-->
+                </div>
+              </td>
+            </tr>
+            <!--v-if-->
+            <tr data-selected="false" data-selectable="true" data-expanded="false" role="button" tabindex="0" class="data-[selected=true]:bg-elevated/50">
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Item</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left font-medium">₱315.00</div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Link</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->shopee<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->placeholder1<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->high<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-success/10 text-success ring ring-inset ring-success/25 capitalize"><!--v-if-->Delivered<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions dropdown" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+                    <!--v-if-->
+                    <!--v-if-->
+                  </button>
+                  <!---->
+                  <!--teleport start-->
+                  <!--teleport end-->
+                </div>
+              </td>
+            </tr>
+            <!--v-if-->
+            <tr data-selected="false" data-selectable="true" data-expanded="false" role="button" tabindex="0" class="data-[selected=true]:bg-elevated/50">
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Item</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left font-medium">₱529.00</div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Link</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->tiktok<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->placeholder2<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->high<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-info/10 text-info ring ring-inset ring-info/25 capitalize"><!--v-if-->In Cart<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions dropdown" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+                    <!--v-if-->
+                    <!--v-if-->
+                  </button>
+                  <!---->
+                  <!--teleport start-->
+                  <!--teleport end-->
+                </div>
+              </td>
+            </tr>
+            <!--v-if-->
+            <tr data-selected="false" data-selectable="true" data-expanded="false" role="button" tabindex="0" class="data-[selected=true]:bg-elevated/50">
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="relative flex items-start flex-row">
+                  <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+                      <!---->
+                      <!--v-if-->
+                    </button></div>
+                  <!--v-if-->
+                </div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Item</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-left font-medium">₱639.00</div>
+              </td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Placeholder Link</td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->temu<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->placeholder1<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-success/10 text-success ring ring-inset ring-success/25 capitalize"><!--v-if-->low<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated capitalize"><!--v-if-->Cancelled<!--v-if--></span></td>
+              <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+                <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions dropdown" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+                    <!--v-if-->
+                    <!--v-if-->
+                  </button>
+                  <!---->
+                  <!--teleport start-->
+                  <!--teleport end-->
+                </div>
+              </td>
+            </tr>
+            <!--v-if-->
+          </tbody>
+          <!--v-if-->
+        </table>
+      </div>
+      <div class="flex justify-center border-t border-default pt-4">
+        <nav>
+          <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+              <!--v-if-->
+              <!--v-if-->
+            </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+              <!--v-if-->
+              <!--v-if-->
+            </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+              <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+              <!--v-if-->
+            </button><button type="button" disabled="" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+              <!--v-if-->
+              <!--v-if-->
+            </button><button type="button" disabled="" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+              <!--v-if-->
+              <!--v-if-->
+            </button></div>
+        </nav>
+      </div>
+    </div>
+    <div>
+      <!--v-if-->
+      <!--teleport start-->
+      <!--teleport end-->
+    </div>
+  </div>
+</section>"
 `;
 
 exports[`Header > should match snapshot 1`] = `

From 2174b959230ab6615583bd91b32f02167d75dfd6 Mon Sep 17 00:00:00 2001
From: rockyroed <roed-imp.vo97b@slmail.me>
Date: Thu, 9 Oct 2025 10:16:21 +0800
Subject: [PATCH 6/6] refactor: update store file name

---
 app/components/Modal/index.vue |  2 +-
 app/components/Table/index.vue |  2 +-
 app/stores/modals.ts           | 19 +++++++++++++++++++
 app/stores/useModal.ts         | 15 ---------------
 4 files changed, 21 insertions(+), 17 deletions(-)
 create mode 100644 app/stores/modals.ts
 delete mode 100644 app/stores/useModal.ts

diff --git a/app/components/Modal/index.vue b/app/components/Modal/index.vue
index 2d36163..158ac43 100644
--- a/app/components/Modal/index.vue
+++ b/app/components/Modal/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormError } from '@nuxt/ui';
-import { useModalStore } from '@/stores/useModal';
+import { useModalStore } from '~/stores/modals';
 import type { ItemState } from '@/types/item';
 
 const modal = useModalStore();
diff --git a/app/components/Table/index.vue b/app/components/Table/index.vue
index 60fbe0e..44869a8 100644
--- a/app/components/Table/index.vue
+++ b/app/components/Table/index.vue
@@ -2,7 +2,7 @@
 import { getPaginationRowModel } from '@tanstack/vue-table';
 import { h, resolveComponent } from 'vue';
 import type { TableColumn, TableRow } from '@nuxt/ui';
-import { useModalStore } from '@/stores/useModal';
+import { useModalStore } from '~/stores/modals';
 
 const table = useTemplateRef('table');
 const UBadge = resolveComponent('UBadge');
diff --git a/app/stores/modals.ts b/app/stores/modals.ts
new file mode 100644
index 0000000..f6fcfc3
--- /dev/null
+++ b/app/stores/modals.ts
@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia';
+
+export const useModalStore = defineStore('modals', () => {
+  const showModal = ref<boolean>(false);
+
+  const openModal = () => {
+    showModal.value = true;
+  };
+
+  const closeModal = () => {
+    showModal.value = false;
+  };
+
+  return {
+    showModal,
+    openModal,
+    closeModal,
+  };
+});
diff --git a/app/stores/useModal.ts b/app/stores/useModal.ts
deleted file mode 100644
index 7ddbf65..0000000
--- a/app/stores/useModal.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useModalStore = defineStore('modal', {
-  state: () => ({
-    showModal: false,
-  }),
-  actions: {
-    openModal() {
-      this.showModal = true;
-    },
-    closeModal() {
-      this.showModal = false;
-    },
-  },
-});