fixed order page bug in panels

frontend/pages/profile/purchases-and-orders/index.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import useGetAllOrders, {
+import useGetAllOrders, { type GetAllOrdersRequest } from "~/composables/api/orders/useGetAllOrders";
-    type GetAllOrdersRequest,
-} from "~/composables/api/orders/useGetAllOrders";
 
 // meta
 
 useSeoMeta({
-    title : "پنل کاربری سفارشات"
+    title: "پنل کاربری سفارشات",
 });
 
 definePageMeta({
@@ -26,14 +24,7 @@ const filters = computed(() => {
     };
 });
 
-const tableHeads = ref([
+const tableHeads = ref(["شماره سفارش", "تاریخ ثبت", "تعداد اقلام", "مبلغ", "وضعیت", "عملیات"]);
-    "شماره سفارش",
-    "تاریخ ثبت",
-    "تعداد اقلام",
-    "مبلغ",
-    "وضعیت",
-    "عملیات",
-]);
 
 const sortFilters = ref([
     {
@@ -119,15 +110,14 @@ const clearFilters = () => {
 
 <template>
     <div class="w-full flex flex-col gap-5">
-        <ProfilePageTitle title="خرید ها و سفارش های شما" icon="bi:cart" />
+        <ProfilePageTitle
+            title="خرید ها و سفارش های شما"
+            icon="bi:cart"
+        />
 
         <div class="w-full flex flex-col gap-5">
-            <div
+            <div class="w-full flex flex-col-reverse lg:flex-row items-center justify-between lg:px-5 gap-5">
-                class="w-full flex flex-col-reverse lg:flex-row items-center justify-between lg:px-5 gap-5"
+                <div class="max-lg:w-full flex items-center justify-start gap-8">
-            >
-                <div
-                    class="max-lg:w-full flex items-center justify-start gap-8"
-                >
                     <div
                         class="flex flex-col lg:flex-row items-start lg:items-center justify-start gap-3 max-lg:w-full"
                     >
@@ -148,11 +138,12 @@ const clearFilters = () => {
                                         <SelectItemIndicator
                                             class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                         >
-                                            <Icon name="bi:check" size="20" />
+                                            <Icon
+                                                name="bi:check"
+                                                size="20"
+                                            />
                                         </SelectItemIndicator>
-                                        <SelectItemText
+                                        <SelectItemText class="text-end font-iran-yekan-x text-xs lg:text-sm">
-                                            class="text-end font-iran-yekan-x text-xs lg:text-sm"
-                                        >
                                             {{ category.title }}
                                         </SelectItemText>
                                     </SelectItem>
@@ -172,9 +163,7 @@ const clearFilters = () => {
                             <template #content>
                                 <SelectGroup>
                                     <SelectItem
-                                        v-for="(
+                                        v-for="(category, index) in statusFilters"
-                                            category, index
-                                        ) in statusFilters"
                                         :key="index"
                                         class="text-xs leading-none w-full rounded-sm py-4 lg:py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
                                         :value="category.value"
@@ -182,11 +171,12 @@ const clearFilters = () => {
                                         <SelectItemIndicator
                                             class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                         >
-                                            <Icon name="bi:check" size="20" />
+                                            <Icon
+                                                name="bi:check"
+                                                size="20"
+                                            />
                                         </SelectItemIndicator>
-                                        <SelectItemText
+                                        <SelectItemText class="text-end font-iran-yekan-x text-xs lg:text-sm">
-                                            class="text-end font-iran-yekan-x text-xs lg:text-sm"
-                                        >
                                             {{ category.title }}
                                         </SelectItemText>
                                     </SelectItem>
@@ -210,7 +200,7 @@ const clearFilters = () => {
                         <span class="whitespace-pre"> حذف فیلتر ها </span>
                     </Button>
 
-                    <NuxtLink :to="{ name: 'products' }">
+                    <NuxtLink to="/products">
                         <Button
                             end-icon="bi:plus"
                             size="md"
@@ -235,13 +225,7 @@ const clearFilters = () => {
                         v-for="(tableHead, index) in tableHeads"
                         :key="index"
                         scope="col"
-                        :class="
+                        :class="[0, 1].includes(index) ? 'w-3/12' : tableHeads.length - 1 == index ? 'w-1/2' : 'w-2/12'"
-                            [0, 1].includes(index)
-                                ? 'w-3/12'
-                                : tableHeads.length - 1 == index
-                                ? 'w-1/2'
-                                : 'w-2/12'
-                        "
                         class="px-6 py-5 text-xs lg:text-sm font-normal shrink-0 whitespace-pre"
                     >
                         {{ tableHead }}
@@ -265,7 +249,10 @@ const clearFilters = () => {
                 v-if="data && paginationData && data.count > 10"
                 class="w-full flex-center py-10"
             >
-                <Pagination :items="paginationData" :total="data.count" />
+                <Pagination
+                    :items="paginationData"
+                    :total="data.count"
+                />
             </div>
         </div>
     </div>