connected notifications to api

frontend/pages/profile/tickets/index.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 // imports
 
-import useGetAllTickets, {
+import useGetAllTickets, { type GetAllTicketsRequest } from "~/composables/api/tickets/useGetAllTickets";
-    type GetAllTicketsRequest,
-} from "~/composables/api/tickets/useGetAllTickets";
 
 // meta
 
 useSeoMeta({
-    title : "پنل کاربری تیکت ها"
+    title: "پنل کاربری تیکت ها",
 });
 
 definePageMeta({
@@ -28,13 +26,7 @@ const filters = computed(() => {
     };
 });
 
-const tableHeads = ref([
+const tableHeads = ref(["دسته بندی", "موضوع", "تاریخ ایجاد و بروز رسانی", "وضعیت", "عملیات"]);
-    "دسته بندی",
-    "موضوع",
-    "تاریخ ایجاد و بروز رسانی",
-    "وضعیت",
-    "عملیات",
-]);
 
 const sortFilters = ref([
     {
@@ -100,15 +92,14 @@ const clearFilters = () => {
 
 <template>
     <div class="w-full flex flex-col gap-5">
-        <ProfilePageTitle title="تیکت های شما" icon="bi:ticket" />
+        <ProfilePageTitle
+            title="تیکت های شما"
+            icon="bi:ticket"
+        />
 
         <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"
                     >
@@ -129,11 +120,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 lg:text-sm">
-                                            class="text-end font-iran-yekan-x lg:text-sm"
-                                        >
                                             {{ category.title }}
                                         </SelectItemText>
                                     </SelectItem>
@@ -153,9 +145,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"
@@ -163,11 +153,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>
@@ -217,11 +208,7 @@ const clearFilters = () => {
                         :key="index"
                         scope="col"
                         :class="
-                            [0, 1, 2].includes(index)
+                            [0, 1, 2].includes(index) ? 'w-3/12' : tableHeads.length - 1 == index ? 'w-1/2' : 'w-2/12'
-                                ? '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"
                     >
@@ -246,7 +233,10 @@ const clearFilters = () => {
                 v-if="data && paginationData && data.count > 7"
                 class="w-full flex-center py-10"
             >
-                <Pagination :items="paginationData" :total="data?.count" />
+                <Pagination
+                    :items="paginationData"
+                    :total="data?.count"
+                />
             </div>
         </div>
     </div>