update frontend

frontend/components/global/BlogPost.vue

@@ -25,7 +25,7 @@ const { date } = toRefs(props);
 
 // state
 
-const createdAt = usePersianTimeAgo(new Date(date.value));
+const createdAt = usePersianTimeAgo(date.value);
 </script>
 
 <template>

frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue

@@ -2,6 +2,7 @@
 // imports
 
 import useDownloadInvoice from "~/composables/api/orders/useDownloadInvoice";
+import usePersianDate from "~/composables/global/usePersianDate";
 
 // types
 
@@ -15,6 +16,10 @@ const props = defineProps<Props>();
 
 const { data } = toRefs(props);
 
+// state
+
+const { formatToPersian } = usePersianDate();
+
 // queries
 
 const { downloadFn, downloadIsLoading } = useDownloadInvoice(String(data.value.id));
@@ -30,7 +35,7 @@ const { downloadFn, downloadIsLoading } = useDownloadInvoice(String(data.value.i
             {{ data.order_id ? `${data.order_id}#` : "--" }}
         </td>
         <td class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0">
-            {{ data.created_at ?? "--" }}
+            {{ data.created_at ? formatToPersian(data.created_at) : "--" }}
         </td>
         <td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
             {{ data.count ? data.count : "--" }}
@@ -53,24 +58,40 @@ const { downloadFn, downloadIsLoading } = useDownloadInvoice(String(data.value.i
             </div>
         </td>
         <td class="w-1/12 px-6 py-6 shrink-0">
-            <button
-                @click="!downloadIsLoading ? downloadFn() : undefined"
-                :disabled="downloadIsLoading"
-                class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
-            >
-                <Icon
-                    v-if="downloadIsLoading"
-                    name="ci:svg-spinners-3-dots-fade"
-                    class="**:stroke-black"
-                    size="20"
-                />
-                <Icon
-                    v-else
-                    name="ci:bi-download"
-                    class="**:stroke-black"
-                    size="20"
-                />
-            </button>
+            <div class="flex items-center gap-2">
+                <NuxtLink :to="{ name: 'profile-purchases-and-orders-id', params: { id: data.id } }">
+                    <button
+                        class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
+                        aria-label="مشاهده جزئیات سفارش"
+                    >
+                        <Icon
+                            name="ci:eye-open"
+                            class="**:stroke-black"
+                            size="20"
+                        />
+                    </button>
+                </NuxtLink>
+                <button
+                    v-if="data.is_paid"
+                    @click="!downloadIsLoading ? downloadFn() : undefined"
+                    :disabled="downloadIsLoading"
+                    class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
+                    aria-label="دانلود فاکتور"
+                >
+                    <Icon
+                        v-if="downloadIsLoading"
+                        name="ci:svg-spinners-3-dots-fade"
+                        class="**:stroke-black"
+                        size="20"
+                    />
+                    <Icon
+                        v-else
+                        name="ci:bi-download"
+                        class="**:stroke-black"
+                        size="20"
+                    />
+                </button>
+            </div>
         </td>
     </tr>
 </template>

frontend/components/profile/purchases-and-orders/index/PurchasesTableRowLoading.vue

@@ -23,7 +23,10 @@
             <Skeleton class="w-full !h-10 !rounded-sm" />
         </td>
         <td class="w-1/12 px-6 py-6 shrink-0">
-            <Skeleton class="!size-10 !rounded-sm" />
+            <div class="flex items-center gap-2">
+                <Skeleton class="!size-10 !rounded-sm" />
+                <Skeleton class="!size-10 !rounded-sm" />
+            </div>
         </td>
     </tr>
 </template>

frontend/components/profile/tickets/[id]/TicketBubble.vue

@@ -21,7 +21,7 @@ const { is_user, files, date } = toRefs(props);
 
 // state
 
-const timeAgo = usePersianTimeAgo(new Date(date.value));
+const timeAgo = usePersianTimeAgo(date.value);
 
 // queries
 

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

@@ -17,8 +17,8 @@ const { data } = toRefs(props);
 
 // computed
 
-const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
-const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
+const createdTimeAgo = usePersianTimeAgo(data.value.created_at);
+const updatedTimeAgo = usePersianTimeAgo(data.value.updated_at);
 </script>
 
 <template>