From e43836c7312a13d9f8d5bd316571f5f49f9daad0 Mon Sep 17 00:00:00 2001
From: rockyroed <roed-imp.vo97b@slmail.me>
Date: Fri, 10 Oct 2025 18:54:19 +0800
Subject: [PATCH 1/3] refactor: layout and main page content

---
 app/layouts/default.vue | 14 +++++---------
 app/pages/index.vue     |  5 ++++-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 08fd064..5a00e2a 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,12 +1,8 @@
 <template>
-  <section class="flex flex-col min-h-screen">
-    <div>
-      <Header />
+  <div class="flex flex-col min-h-screen">
+    <Header />
+    <main class="flex-1">
       <slot />
-    </div>
-    <div class="p-5">
-      <Table />
-      <Modal />
-    </div>
-  </section>
+    </main>
+  </div>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 7b8b46c..0e26452 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,3 +1,6 @@
 <template>
-  <div></div>
+  <section class="p-5">
+    <Table />
+    <Modal />
+  </section>
 </template>

From 4c3394377a3bf205950a6ff2ffd8534ff405163e Mon Sep 17 00:00:00 2001
From: rockyroed <roed-imp.vo97b@slmail.me>
Date: Fri, 10 Oct 2025 19:01:21 +0800
Subject: [PATCH 2/3] refactor: use header tag

---
 app/components/Header/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Header/index.vue b/app/components/Header/index.vue
index 935aab3..710e54a 100644
--- a/app/components/Header/index.vue
+++ b/app/components/Header/index.vue
@@ -5,7 +5,7 @@ const colorMode = useColorMode();
 </script>
 
 <template>
-  <div class="flex justify-between items-center px-4 md:px-8 lg:px-28 py-4">
+  <header class="flex justify-between items-center px-4 md:px-8 lg:px-28 py-4">
     <UButton class="cursor-pointer" variant="ghost" :square="true" color="neutral" to="/">
       <ClientOnly>
         <NuxtImg
@@ -54,5 +54,5 @@ const colorMode = useColorMode();
         />
       </SignedIn>
     </div>
-  </div>
+  </header>
 </template>

From fa9fd9046234164fb8e40a2bb16a0ead940a84f4 Mon Sep 17 00:00:00 2001
From: rockyroed <roed-imp.vo97b@slmail.me>
Date: Fri, 10 Oct 2025 19:01:35 +0800
Subject: [PATCH 3/3] test: update snapshot

---
 .../__snapshots__/components.test.ts.snap     | 690 ++++++------------
 1 file changed, 235 insertions(+), 455 deletions(-)

diff --git a/test/nuxt/__snapshots__/components.test.ts.snap b/test/nuxt/__snapshots__/components.test.ts.snap
index e8270cd..33cfba5 100644
--- a/test/nuxt/__snapshots__/components.test.ts.snap
+++ b/test/nuxt/__snapshots__/components.test.ts.snap
@@ -1,486 +1,266 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`App > should match snapshot 1`] = `
-"<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>
+"<div class="flex flex-col min-h-screen">
+  <header 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-->
-      </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>
+        <!--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-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>
+  </header>
+  <main class="flex-1">
+    <section 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-->
-            <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-->
+            <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-->
-                  </button>
+                  </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">
                   <!---->
-                  <!--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-->
+                </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-->
-                  </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">
-                      <!---->
+                  </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-->
-                    </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>
+                    </button>
+                    <!---->
+                    <!--teleport start-->
+                    <!--teleport end-->
+                  </div>
+                </td>
+              </tr>
               <!--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`] = `
-"<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-->
-      </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 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">
-                      <!---->
+              <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-->
-                    </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-->
+                    </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-->
-                  </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">
-                      <!---->
+                  </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-->
-                    </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-->
+                    </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-->
-                  </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">
-                      <!---->
+                  </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-->
-                    </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-->
+                    </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-->
-                  </button>
-                  <!---->
-                  <!--teleport start-->
-                  <!--teleport end-->
-                </div>
-              </td>
-            </tr>
+                  </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-->
-          </tbody>
-          <!--v-if-->
-        </table>
+          </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 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>
+        <!--v-if-->
+        <!--teleport start-->
+        <!--teleport end-->
       </div>
-    </div>
-    <div>
+    </section>
+  </main>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`DefaultLayout > should match snapshot 1`] = `
+"<div class="flex flex-col min-h-screen">
+  <header 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-->
-      <!--teleport start-->
-      <!--teleport end-->
+    </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>
-</section>"
+  </header>
+  <main class="flex-1"></main>
+</div>"
 `;
 
 exports[`Header > should match snapshot 1`] = `
-"<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">
+"<header 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-->
@@ -492,5 +272,5 @@ exports[`Header > should match snapshot 1`] = `
     <signed-out-stub></signed-out-stub>
     <signed-in-stub></signed-in-stub>
   </div>
-</div>"
+</header>"
 `;