connected ticket table row date

frontend/components/profile/tickets/index/TicketsTableRow.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// imports
+
+import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
+
 // types
 
 type Props = {
@@ -7,7 +11,13 @@ type Props = {
 
 // props
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const { data } = toRefs(props);
+
+// computed
+
+const timeAgo = usePersianTimeAgo(new Date(data.value.created_at));
 </script>
 
 <template>
@@ -18,11 +28,29 @@ defineProps<Props>();
             scope="row"
             class="w-3/12 px-6 py-6 font-medium whitespace-nowrap text-black"
         >
-            {{ data.ticket_category }}
+            {{ data.ticket_category ? data.ticket_category : "--" }}
+        </td>
+        <td class="w-3/12 px-6 py-6">
+            {{ data.subject ? data.subject : "--" }}
+        </td>
+        <td class="w-3/12 px-6 py-6">
+            {{ data.created_at ? timeAgo : "--" }}
+        </td>
+        <td class="w-2/12 px-6 py-6">
+            <div
+                class="w-max rounded-full py-1.5 px-3 text-xs border"
+                :class="{
+                    'text-warning-600 bg-warning-100 border-warning-600':
+                        data.status == 'در انتظار پاسخ',
+                    'text-success-600 bg-success-100 border-success-600':
+                        data.status == 'پاسخ داده شده',
+                    'text-danger-600 bg-danger-100 border-danger-600':
+                        data.status == 'بسته شده',
+                }"
+            >
+                {{ data.status ? data.status : "--" }}
+            </div>
         </td>
-        <td class="w-3/12 px-6 py-6">{{ data.subject }}</td>
-        <td class="w-3/12 px-6 py-6">{{ data.created_at }}</td>
-        <td class="w-2/12 px-6 py-6">{{ data.status }}</td>
         <td class="w-1/12 px-6 py-6">
             <NuxtLink
                 :to="{ name: 'profile-tickets-id', params: { id: data.id } }"