From 6fa0017ca56405344c1a95147d9e640cb28259bd Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:07:33 +0330
Subject: [PATCH 01/15] added jalali package

---
 frontend/package-lock.json | 14 ++++++++++++++
 frontend/package.json      |  2 ++
 2 files changed, 16 insertions(+)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index acf8c36..2f29369 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,9 +18,11 @@
         "@vueuse/nuxt": "^12.3.0",
         "animate.css": "^4.1.1",
         "axios": "^1.7.9",
+        "date-fns-jalali": "^4.1.0-0",
         "fast-average-color": "^9.4.0",
         "gsap": "^3.12.5",
         "isomorphic-dompurify": "^2.21.0",
+        "jalali-ts": "^8.0.0",
         "masonry-layout": "^4.2.2",
         "nuxt": "^3.14.1592",
         "reka-ui": "^1.0.0-alpha.6",
@@ -5860,6 +5862,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
     "node_modules/db0": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/db0/-/db0-0.2.1.tgz",
@@ -7536,6 +7544,12 @@
       "integrity": "sha512-gE+YHWSbygYAoJa+Xg8LWxGILqFOxZSBQQw39ghel01fVFUxV7bjL0x1JFsHcLQ3uPjvn81HQMa+kxwyPWnxGQ==",
       "license": "MIT"
     },
+    "node_modules/jalali-ts": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/jalali-ts/-/jalali-ts-8.0.0.tgz",
+      "integrity": "sha512-XZmEjaw56w47ZjJUnC/18juoJta4BcpKRE3cFZpw07+gy+nt3b9e+KGqlcRFph8Xn4LRtyx6l5QpEZftbtDZ3Q==",
+      "license": "MIT"
+    },
     "node_modules/jiti": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8ba8134..7c2e962 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,9 +24,11 @@
     "@vueuse/nuxt": "^12.3.0",
     "animate.css": "^4.1.1",
     "axios": "^1.7.9",
+    "date-fns-jalali": "^4.1.0-0",
     "fast-average-color": "^9.4.0",
     "gsap": "^3.12.5",
     "isomorphic-dompurify": "^2.21.0",
+    "jalali-ts": "^8.0.0",
     "masonry-layout": "^4.2.2",
     "nuxt": "^3.14.1592",
     "reka-ui": "^1.0.0-alpha.6",

From 91fc821576f5d17eb9d26bd31431144255b4272f Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:07:46 +0330
Subject: [PATCH 02/15] added scroll to top on pagination change

---
 frontend/components/global/Pagination.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
index 0e3ee75..cfed27a 100644
--- a/frontend/components/global/Pagination.vue
+++ b/frontend/components/global/Pagination.vue
@@ -17,11 +17,16 @@ defineProps<Props>();
 
 const params: any = inject("params");
 
+const { y } = useWindowScroll({ behavior: "smooth" });
+
 // computed
 
 const page = computed({
     get: () => (params?.page ? Number(params.page) : 1),
-    set: (value: number) => (params.page = value),
+    set: (value: number) => {
+        params.page = value;
+        y.value = 0;
+    },
 });
 </script>
 

From a7c464d32e11e43db420377a7dd438ca434d2008 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:08:04 +0330
Subject: [PATCH 03/15] added attachment component

---
 .../profile/tickets/[id]/Attachment.vue       | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 frontend/components/profile/tickets/[id]/Attachment.vue

diff --git a/frontend/components/profile/tickets/[id]/Attachment.vue b/frontend/components/profile/tickets/[id]/Attachment.vue
new file mode 100644
index 0000000..f30b7fa
--- /dev/null
+++ b/frontend/components/profile/tickets/[id]/Attachment.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    index: number;
+    size: number;
+    link: string;
+};
+
+// props
+
+defineProps<Props>();
+</script>
+
+<template>
+    <NuxtLink
+        :to="link"
+        target="_blank"
+        class="w-full flex items-center cursor-pointer p-2 gap-2 rounded-100 bg-slate-100 border border-slate-300"
+    >
+        <div class="size-10 flex-center border border-slate-300 rounded-md">
+            <Icon name="bi:pin-angle" class="**:fill-black" size="20" />
+        </div>
+        <div class="flex flex-col gap-1">
+            <span class="text-sm line-clamp-1">
+                {{ `فایل ضمیمه ${index}` }}
+            </span>
+            <span class="text-xs">{{ (size / 1024).toFixed(2) }}KB</span>
+        </div>
+    </NuxtLink>
+</template>
+
+<style scoped></style>

From bead035a7bf0837a670495872ef05aa12950be33 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:09:06 +0330
Subject: [PATCH 04/15] re designed ticket bubble

---
 .../profile/tickets/[id]/TicketBubble.vue     | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 frontend/components/profile/tickets/[id]/TicketBubble.vue

diff --git a/frontend/components/profile/tickets/[id]/TicketBubble.vue b/frontend/components/profile/tickets/[id]/TicketBubble.vue
new file mode 100644
index 0000000..b7f0da6
--- /dev/null
+++ b/frontend/components/profile/tickets/[id]/TicketBubble.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+// imports
+
+import useGetAccount from "~/composables/api/account/useGetAccount";
+import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
+
+// types
+
+type Props = {
+    is_user: boolean;
+    date: string;
+    message: string;
+    files: ServerFile[];
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { is_user, files, date } = toRefs(props);
+
+// state
+
+const timeAgo = usePersianTimeAgo(new Date(date.value));
+
+// queries
+
+const { data: account } = useGetAccount();
+
+// computed
+
+const profile = computed(() => {
+    return is_user.value
+        ? account.value?.profile_photo
+            ? account.value?.profile_photo
+            : "/avatars/1.jpg"
+        : "/avatars/3.jpg";
+});
+
+const username = computed(() => {
+    return is_user.value
+        ? `${account.value?.first_name} ${account.value?.last_name}`
+        : "ادمین پشتیبانی هی ملز";
+});
+</script>
+
+<template>
+    <div
+        class="w-full flex flex-col justify-center gap-2"
+        :class="is_user ? 'items-start' : 'items-end'"
+    >
+        <div
+            class="w-full lg:w-1/2 bg-slate-50 border border-slate-200 rounded-xl p-5 flex items-start"
+            :class="is_user ? 'rounded-br-none' : 'rounded-bl-none'"
+        >
+            <div class="w-2/12 flex items-start justify-start">
+                <img :src="profile" class="size-16 rounded-full" />
+            </div>
+
+            <div class="w-10/12 flex flex-col items-start pt-2">
+                <div class="flex flex-col gap-0.5 w-full">
+                    <p
+                        class="text-[10px] font-semibold text-[#1677FF] line-clamp-1 text-right"
+                        style="direction: ltr"
+                    >
+                        {{ timeAgo }}
+                    </p>
+                    <p
+                        class="text-xs font-semibold text-dynamic-secondary line-clamp-1"
+                    >
+                        {{ username }}
+                    </p>
+                </div>
+                <div class="py-2 text-start">
+                    {{ message }}
+                </div>
+            </div>
+        </div>
+
+        <div class="w-1/2 grid grid-cols-2 lg:grid-cols-3 gap-2">
+            <Attachment
+                v-for="(attachment, index) in files"
+                :index="index + 1"
+                :link="attachment.file_link"
+                :size="attachment.size"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped></style>

From f9e69f21bd802c2106ebd89d2a8e6997a8b8e1f1 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:09:17 +0330
Subject: [PATCH 05/15] re designed ticket bubble loading

---
 .../tickets/[id]/TicketBubbleLoading.vue      | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 frontend/components/profile/tickets/[id]/TicketBubbleLoading.vue

diff --git a/frontend/components/profile/tickets/[id]/TicketBubbleLoading.vue b/frontend/components/profile/tickets/[id]/TicketBubbleLoading.vue
new file mode 100644
index 0000000..62bc9c4
--- /dev/null
+++ b/frontend/components/profile/tickets/[id]/TicketBubbleLoading.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    is_user: boolean;
+};
+
+// props
+
+defineProps<Props>();
+</script>
+
+<template>
+    <div
+        class="w-full flex items-center"
+        :class="is_user ? 'justify-start' : 'justify-end'"
+    >
+        <Skeleton
+            class="!w-full lg:!w-1/2 !h-32 border border-slate-200 !rounded-xl p-5 flex items-start"
+            :class="is_user ? '!rounded-br-none' : '!rounded-bl-none'"
+        ></Skeleton>
+    </div>
+</template>
+
+<style scoped></style>

From e8e60ded2632abaff16f08247ed18f8481171e8e Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:10:44 +0330
Subject: [PATCH 06/15] added new attachment component

---
 .../profile/tickets/global/NewAttachment.vue  | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 frontend/components/profile/tickets/global/NewAttachment.vue

diff --git a/frontend/components/profile/tickets/global/NewAttachment.vue b/frontend/components/profile/tickets/global/NewAttachment.vue
new file mode 100644
index 0000000..bb9d62c
--- /dev/null
+++ b/frontend/components/profile/tickets/global/NewAttachment.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+// imports
+
+import useDeleteAttachment from "~/composables/api/tickets/useDeleteAttachment";
+
+// types
+
+type Props = {
+    id: number;
+    size: number;
+    name: string;
+};
+
+type Emits = {
+    delete: [value: number];
+};
+
+// props
+
+defineProps<Props>();
+
+// Emits
+
+const emit = defineEmits<Emits>();
+
+// queries
+
+const { mutateAsync: deleteAttachment, isPending: deleteAttachmentPending } =
+    useDeleteAttachment();
+
+const handleDeleteAttachment = (id: number) => {
+    deleteAttachment(
+        { id },
+        {
+            onSuccess: () => {
+                emit("delete", id);
+            },
+        }
+    );
+};
+</script>
+
+<template>
+    <li class="w-full flex items-center">
+        <div class="w-2/12 flex justify-start">
+            <p class="text-sm text-black">{{ (size / 1024).toFixed(2) }}KB</p>
+        </div>
+        <div class="flex justify-end w-9/12">
+            <p class="text-sm text-black">
+                {{ name }}
+            </p>
+        </div>
+        <div class="w-1/12 ps-1">
+            <button class="cursor-pointer" @click="handleDeleteAttachment(id)">
+                <Icon
+                    :name="
+                        deleteAttachmentPending
+                            ? 'svg-spinners:ring-resize'
+                            : 'ci:close'
+                    "
+                    :class="
+                        deleteAttachmentPending
+                            ? 'text-black/50'
+                            : '**:stroke-red-500'
+                    "
+                    class="pt-1"
+                    size="28"
+                />
+            </button>
+        </div>
+    </li>
+</template>
+
+<style scoped></style>

From 7cead187bef1fa2323573a256eb27e9b31818ec6 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:11:05 +0330
Subject: [PATCH 07/15] connected ticket table row date

---
 .../profile/tickets/index/TicketsTableRow.vue | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/components/profile/tickets/index/TicketsTableRow.vue b/frontend/components/profile/tickets/index/TicketsTableRow.vue
index 45600cb..2f6f116 100644
--- a/frontend/components/profile/tickets/index/TicketsTableRow.vue
+++ b/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 } }"

From 703cb9a2ce2e41f41d72580d70ded095f4d3306b Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:11:16 +0330
Subject: [PATCH 08/15] route changed

---
 .../profile/tickets/new/NewAttachment.vue     | 74 -------------------
 .../profile/tickets/new/TicketBubble.vue      | 53 -------------
 2 files changed, 127 deletions(-)
 delete mode 100644 frontend/components/profile/tickets/new/NewAttachment.vue
 delete mode 100644 frontend/components/profile/tickets/new/TicketBubble.vue

diff --git a/frontend/components/profile/tickets/new/NewAttachment.vue b/frontend/components/profile/tickets/new/NewAttachment.vue
deleted file mode 100644
index bb9d62c..0000000
--- a/frontend/components/profile/tickets/new/NewAttachment.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup lang="ts">
-// imports
-
-import useDeleteAttachment from "~/composables/api/tickets/useDeleteAttachment";
-
-// types
-
-type Props = {
-    id: number;
-    size: number;
-    name: string;
-};
-
-type Emits = {
-    delete: [value: number];
-};
-
-// props
-
-defineProps<Props>();
-
-// Emits
-
-const emit = defineEmits<Emits>();
-
-// queries
-
-const { mutateAsync: deleteAttachment, isPending: deleteAttachmentPending } =
-    useDeleteAttachment();
-
-const handleDeleteAttachment = (id: number) => {
-    deleteAttachment(
-        { id },
-        {
-            onSuccess: () => {
-                emit("delete", id);
-            },
-        }
-    );
-};
-</script>
-
-<template>
-    <li class="w-full flex items-center">
-        <div class="w-2/12 flex justify-start">
-            <p class="text-sm text-black">{{ (size / 1024).toFixed(2) }}KB</p>
-        </div>
-        <div class="flex justify-end w-9/12">
-            <p class="text-sm text-black">
-                {{ name }}
-            </p>
-        </div>
-        <div class="w-1/12 ps-1">
-            <button class="cursor-pointer" @click="handleDeleteAttachment(id)">
-                <Icon
-                    :name="
-                        deleteAttachmentPending
-                            ? 'svg-spinners:ring-resize'
-                            : 'ci:close'
-                    "
-                    :class="
-                        deleteAttachmentPending
-                            ? 'text-black/50'
-                            : '**:stroke-red-500'
-                    "
-                    class="pt-1"
-                    size="28"
-                />
-            </button>
-        </div>
-    </li>
-</template>
-
-<style scoped></style>
diff --git a/frontend/components/profile/tickets/new/TicketBubble.vue b/frontend/components/profile/tickets/new/TicketBubble.vue
deleted file mode 100644
index 6d1f8af..0000000
--- a/frontend/components/profile/tickets/new/TicketBubble.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-// types
-
-type Props = {
-    is_user: boolean;
-    date: string;
-    username: string;
-    message: string;
-    profile: string;
-    files: string[];
-};
-
-// props
-
-defineProps<Props>();
-</script>
-
-<template>
-    <div
-        class="w-full flex items-center"
-        :class="is_user ? 'justify-start' : 'justify-end'"
-    >
-        <div
-            class="w-full lg:w-1/2 bg-slate-50 border border-slate-200 rounded-xl p-5 flex items-start"
-            :class="is_user ? 'rounded-br-none' : 'rounded-bl-none'"
-        >
-            <div class="w-2/12 flex items-start justify-start">
-                <img :src="profile" class="size-16 rounded-full" />
-            </div>
-
-            <div class="w-10/12 flex flex-col items-start pt-8">
-                <div class="flex flex-col gap-0.5 w-full">
-                    <p
-                        class="text-[10px] font-semibold text-[#1677FF] line-clamp-1 text-right"
-                        style="direction: ltr"
-                    >
-                        {{ date }}
-                    </p>
-                    <p
-                        class="text-xs font-semibold text-dynamic-secondary line-clamp-1"
-                    >
-                        {{ username }}
-                    </p>
-                </div>
-                <div class="py-2 text-start">
-                    {{ message }}
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped></style>

From d4218296b4178023cc7f8d30f6fecff59f860064 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:11:38 +0330
Subject: [PATCH 09/15] added useCreateMessage

---
 .../api/tickets/useCreateMessage.ts           | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 frontend/composables/api/tickets/useCreateMessage.ts

diff --git a/frontend/composables/api/tickets/useCreateMessage.ts b/frontend/composables/api/tickets/useCreateMessage.ts
new file mode 100644
index 0000000..c3893d4
--- /dev/null
+++ b/frontend/composables/api/tickets/useCreateMessage.ts
@@ -0,0 +1,39 @@
+// imports
+
+import { useMutation } from "@tanstack/vue-query";
+import { API_ENDPOINTS } from "~/constants";
+
+// types
+
+export type CreateMessageRequest = {
+    content: string;
+    attachments: ServerFile[];
+    ticket_id: number | string;
+};
+
+const useCreateMessage = () => {
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleCreateMessage = async (params: CreateMessageRequest) => {
+        const { data } = await axios.post(
+            API_ENDPOINTS.tickets.create_message,
+            {
+                content: params.content,
+                attachments: params.attachments.map((i) => i.id),
+                ticket: params.ticket_id,
+            }
+        );
+        return data;
+    };
+
+    return useMutation({
+        mutationFn: (messageData: CreateMessageRequest) =>
+            handleCreateMessage(messageData),
+    });
+};
+
+export default useCreateMessage;

From 043fab9b9bfa0b61f79efa27a6ed8d06d6a18c19 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:11:59 +0330
Subject: [PATCH 10/15] changed useCreateTicket

---
 .../api/tickets/useCreateTicket.ts            | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/frontend/composables/api/tickets/useCreateTicket.ts b/frontend/composables/api/tickets/useCreateTicket.ts
index 6c65edc..cc63570 100644
--- a/frontend/composables/api/tickets/useCreateTicket.ts
+++ b/frontend/composables/api/tickets/useCreateTicket.ts
@@ -7,7 +7,7 @@ import { API_ENDPOINTS } from "~/constants";
 
 export type CreateTicketRequest = {
     ticket_category: string | undefined;
-    order: number | undefined;
+    order_id: number | undefined;
     subject: string;
     content: string;
     attachments: ServerFile[];
@@ -21,23 +21,15 @@ const useCreateTicket = () => {
     // methods
 
     const handleCreateTicket = async (params: CreateTicketRequest) => {
-        const { data } = await axios.post(
-            API_ENDPOINTS.tickets.create,
-            {
-                message: {
-                    content: params.content,
-                    attachments: params.attachments,
-                },
-                subject: params.subject,
-                ticket_category: params.ticket_category,
-                order: params.order,
+        const { data } = await axios.post(API_ENDPOINTS.tickets.create, {
+            message: {
+                content: params.content,
+                attachments: params.attachments.map((i) => i.id),
             },
-            {
-                headers: {
-                    "Content-Type": "multipart/form-data",
-                },
-            }
-        );
+            subject: params.subject,
+            ticket_category: params.ticket_category,
+            order_id: params.order_id,
+        });
         return data;
     };
 

From 069e595bea97313484ef71f26e99e752c4cfacf4 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:12:23 +0330
Subject: [PATCH 11/15] added usePersianTimeAgo

---
 .../composables/global/usePersianTimeAgo.ts   | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 frontend/composables/global/usePersianTimeAgo.ts

diff --git a/frontend/composables/global/usePersianTimeAgo.ts b/frontend/composables/global/usePersianTimeAgo.ts
new file mode 100644
index 0000000..f22405b
--- /dev/null
+++ b/frontend/composables/global/usePersianTimeAgo.ts
@@ -0,0 +1,25 @@
+// composables/usePersianTimeAgo.ts
+import { ref, onMounted, onUnmounted } from "vue";
+import { formatDistance, toDate } from "date-fns-jalali";
+import { faIR } from "date-fns-jalali/locale";
+
+export function usePersianTimeAgo(date: Date) {
+    const timeAgo = ref("");
+
+    const updateTimeAgo = () => {
+        timeAgo.value = formatDistance(toDate(date), new Date(), {
+            addSuffix: true,
+            locale: faIR,
+        });
+    };
+
+    onMounted(() => {
+        updateTimeAgo();
+
+        const interval = setInterval(updateTimeAgo, 60000);
+
+        onUnmounted(() => clearInterval(interval));
+    });
+
+    return timeAgo;
+}

From a073bb3fffd70e3c0b64094e13e8d5fe6e8d322b Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:12:37 +0330
Subject: [PATCH 12/15] added create message route

---
 frontend/constants/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
index b301e58..b206d3e 100644
--- a/frontend/constants/index.ts
+++ b/frontend/constants/index.ts
@@ -40,6 +40,7 @@ export const API_ENDPOINTS = {
         upload_attachment: "/tickets/attachment/create",
         delete_attachment: "/tickets/attachment/delete",
         get_one: "/tickets",
+        create_message: "/tickets/message/create",
     },
     orders: {
         get_all: "/order/list",

From a6c5d5b65b8a0a55aa28a75a3726dbccd3dacbc6 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:12:51 +0330
Subject: [PATCH 13/15] added ticket status types

---
 frontend/types/global.d.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/types/global.d.ts b/frontend/types/global.d.ts
index 10f0cb4..7abb872 100644
--- a/frontend/types/global.d.ts
+++ b/frontend/types/global.d.ts
@@ -189,6 +189,7 @@ declare global {
 
     type TicketMessage = {
         id: number;
+        is_user: boolean;
         content: string;
         created_at: string;
         attachments: ServerFile[];
@@ -199,7 +200,7 @@ declare global {
         messages: TicketMessage[];
         subject: string;
         ticket_category: string;
-        status: string;
+        status: "در انتظار پاسخ" | "پاسخ داده شده" | "بسته شده";
         created_at: string;
         updated_at: string;
         order: Order;

From cd06b99f6e451f7aa7f51760e100444835bb846c Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:13:16 +0330
Subject: [PATCH 14/15] connected ticket id page to api

---
 frontend/pages/profile/tickets/[id].vue | 323 +++++++++++++++++++-----
 1 file changed, 254 insertions(+), 69 deletions(-)

diff --git a/frontend/pages/profile/tickets/[id].vue b/frontend/pages/profile/tickets/[id].vue
index 272e4a8..66109c7 100644
--- a/frontend/pages/profile/tickets/[id].vue
+++ b/frontend/pages/profile/tickets/[id].vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
+// imports
+
+import useCreateMessage, {
+    type CreateMessageRequest,
+} from "~/composables/api/tickets/useCreateMessage";
 import useGetTicket from "~/composables/api/tickets/useGetTicket";
+import useUploadAttachment from "~/composables/api/tickets/useUploadAttachment";
+import { useToast } from "~/composables/global/useToast";
+import useVuelidate from "@vuelidate/core";
+import { helpers, required, minLength } from "@vuelidate/validators";
+import { QUERY_KEYS } from "~/constants";
 
 // meta
 
@@ -8,22 +18,140 @@ definePageMeta({
     layout: "profile",
 });
 
-// state
-
-const route = useRoute();
-
-const ticketData = ref({
-    message: "",
-    files: [],
-});
-
 // computed
 
 const ticketId = computed(() => route.params.id as string);
 
+// state
+
+const route = useRoute();
+
+const { $queryClient: queryClient } = useNuxtApp();
+
+const { addToast } = useToast();
+
+const messagesContainerRefEl = ref<HTMLElement | null>(null);
+
+const { y: messagesContainerRefElY } = useScroll(messagesContainerRefEl, {
+    behavior: "smooth",
+});
+
+const messageData = ref<CreateMessageRequest>({
+    content: "",
+    attachments: [],
+    ticket_id: ticketId.value,
+});
+
+// computed
+
+const formRules = computed(() => {
+    return {
+        content: {
+            required: helpers.withMessage(
+                "فیلد متن تیکت الزامی می باشد",
+                required
+            ),
+            minLength: helpers.withMessage(
+                "فیلد متن تیکت حداقل ۵ کرکتر می باشد",
+                minLength(5)
+            ),
+        },
+    };
+});
+
+const formValidator$ = useVuelidate(formRules, messageData);
+
 // queries
 
 const { data: ticket, isLoading: ticketIsLoading } = useGetTicket(ticketId);
+
+const { mutateAsync: uploadAttachment, isPending: uploadAttachmentIsPending } =
+    useUploadAttachment();
+
+const { mutateAsync: createMessage, isPending: createMessageIsPending } =
+    useCreateMessage();
+
+// methods
+
+const handleAddNewMessageToMessages = async () => {
+    await ticket.value?.messages.push({
+        id: 0,
+        content: messageData.value.content,
+        is_user: true,
+        attachments: messageData.value.attachments,
+        created_at: Date.now().toString(),
+    });
+};
+
+const handleUploadAttachment = (file: File) => {
+    uploadAttachment(
+        { file },
+        {
+            onSuccess: (data) => {
+                messageData.value.attachments.push({ ...data });
+            },
+            onError: (error) => {
+                addToast({
+                    message: error.message
+                        ? error.message
+                        : "خطایی در آپلود پیوست رخ داد",
+                    options: {
+                        status: "error",
+                        description: "لطفا مجدد تلاش کنید",
+                    },
+                });
+            },
+        }
+    );
+};
+
+const handleSubmit = async () => {
+    await formValidator$.value.$validate();
+    if (!formValidator$.value.$errors.length) {
+        handleAddNewMessageToMessages().then(() => {
+            setTimeout(() => {
+                messagesContainerRefElY.value =
+                    messagesContainerRefEl.value?.scrollHeight!;
+            }, 500);
+        });
+        createMessage(
+            { ...messageData.value },
+            {
+                onSuccess: () => {
+                    queryClient.invalidateQueries({
+                        queryKey: [QUERY_KEYS.ticket],
+                    });
+                    addToast({
+                        message: "پیام شما با موفقیت ثبت شد",
+                        options: {
+                            status: "success",
+                            description:
+                                "پس از بررسی پشتیبانی به شما اطلاع رسانی می شود",
+                        },
+                    });
+                    messageData.value = {
+                        content: "",
+                        attachments: [],
+                        ticket_id: ticketId.value,
+                    };
+                    formValidator$.value.$reset();
+                },
+                onError: () => {
+                    queryClient.invalidateQueries({
+                        queryKey: [QUERY_KEYS.ticket],
+                    });
+                    addToast({
+                        message: "خطایی در ثبت پیام رخ داد",
+                        options: {
+                            status: "success",
+                            description: "لطفا مجدد تلاش کنید",
+                        },
+                    });
+                },
+            }
+        );
+    }
+};
 </script>
 
 <template>
@@ -34,38 +162,55 @@ const { data: ticket, isLoading: ticketIsLoading } = useGetTicket(ticketId);
             class="flex flex-wrap items-center justify-between w-full py-4 border-b lg:px-5 border-slate-200"
         >
             <div
-                class="flex flex-col items-start w-1/2 gap-4 lg:gap-5 lg:w-full lg:items-center lg:flex-row"
+                class="flex flex-col items-start w-1/2 gap-4 lg:gap-5 lg:w-full lg:items-center lg:justify-between lg:flex-row"
             >
-                <div
-                    class="flex flex-col w-full gap-2 lg:py-2 lg:pe-5 lg:w-1/3 lg:border-e border-slate-200"
-                >
-                    <p class="text-xs lg:text-sm text-dynamic-secondary">
-                        دسته&zwnj;بندی :
-                    </p>
-                    <p class="text-xs font-semibold lg:text-sm text-black">
-                        {{ ticket?.ticket_category }}
-                    </p>
-                </div>
-                <div
-                    class="flex flex-col w-full gap-2 lg:py-2 lg:pe-5 lg:w-1/3"
-                >
-                    <p class="text-xs lg:text-sm text-dynamic-secondary">
-                        وضعیت :
-                    </p>
-                    <p
-                        class="text-xs font-semibold lg:text-sm text-black text-dynamic-secondary"
+                <div class="flex items-center w-full gap-4">
+                    <div
+                        class="flex flex-col w-full gap-2 lg:py-2 lg:pe-5 lg:w-1/3 lg:border-e border-slate-200"
                     >
-                        {{ ticket?.status }}
-                    </p>
-                </div>
-                <div class="flex flex-col w-full gap-2 lg:hidden border-black">
-                    <p class="text-xs lg:text-sm text-dynamic-secondary">
-                        موضوع :
-                    </p>
-                    <p class="text-xs font-semibold lg:text-sm text-black">
-                        {{ ticket?.subject }}
-                    </p>
+                        <p class="text-xs lg:text-sm text-dynamic-secondary">
+                            دسته&zwnj;بندی :
+                        </p>
+                        <Skeleton
+                            v-if="ticketIsLoading"
+                            class="!w-1/2 !h-5 !rounded-sm"
+                        />
+                        <p
+                            v-else
+                            class="text-xs font-semibold lg:text-sm text-black"
+                        >
+                            {{ ticket?.ticket_category }}
+                        </p>
+                    </div>
+                    <div
+                        class="flex flex-col w-full gap-2 lg:py-2 lg:pe-5 lg:w-1/3"
+                    >
+                        <p class="text-xs lg:text-sm text-dynamic-secondary">
+                            وضعیت :
+                        </p>
+                        <Skeleton
+                            v-if="ticketIsLoading"
+                            class="!w-1/2 !h-5 !rounded-sm"
+                        />
+                        <p
+                            v-else
+                            class="text-xs font-semibold lg:text-sm text-black text-dynamic-secondary"
+                        >
+                            {{ ticket?.status }}
+                        </p>
+                    </div>
+                    <div
+                        class="flex flex-col w-full gap-2 lg:hidden border-black"
+                    >
+                        <p class="text-xs lg:text-sm text-dynamic-secondary">
+                            موضوع :
+                        </p>
+                        <p class="text-xs font-semibold lg:text-sm text-black">
+                            {{ ticket?.subject }}
+                        </p>
+                    </div>
                 </div>
+
                 <div class="items-center justify-end hidden w-1/4 lg:flex">
                     <NuxtLink :to="{ name: 'profile-tickets' }">
                         <Button
@@ -81,46 +226,86 @@ const { data: ticket, isLoading: ticketIsLoading } = useGetTicket(ticketId);
         </div>
 
         <div
-            class="hidden w-full text-sm px-5 pb-8 mt-3 border-b lg:block text-md border-slate-200"
+            class="hidden w-full text-sm px-5 pb-6 mt-1 border-b lg:block text-md border-slate-200"
         >
             <span class="text-black/50"> موضوع : </span>
-            {{ ticket?.subject }}
-        </div>
-
-        <div class="w-full flex flex-col gap-5 h-[32rem] overflow-y-auto">
-            <!-- <TicketBubble
-                v-for="(message, index) in messages"
-                :key="index"
-                :is_user="message.is_user"
-                :date="message.date"
-                :message="message.message"
-                :profile="message.profile"
-                :username="message.username"
-                :files="message.files"
-            /> -->
+            <Skeleton v-if="ticketIsLoading" class="!w-1/2 !h-5 !rounded-sm" />
+            <span v-else>
+                {{ ticket?.subject }}
+            </span>
         </div>
 
         <div
-            class="grid grid-cols-1 lg:grid-cols-2 gap-5 mt-5 pt-5 border-t border-slate-200"
+            ref="messagesContainerRefEl"
+            class="w-full flex flex-col gap-5 h-[32rem] overflow-y-auto"
         >
-            <DataField id="message" :required="true" label="متن پیام">
-                <textarea
-                    v-model="ticketData.message"
-                    class="w-full bg-white border-[1.5px] border-slate-200 rounded-xl text-xs lg:text-sm p-5 text-black h-[10rem] lg:h-[20rem] transition resize-none outline-none focus:!border-black"
-                    placeholder="متن تیکت را اینجا بنویسید ..."
+            <template v-if="ticketIsLoading">
+                <TicketBubbleLoading
+                    v-for="i in 4"
+                    :key="i"
+                    :is_user="i % 2 != 0 ? true : false"
                 />
-            </DataField>
-            <FileInput v-model="ticketData.files" />
+            </template>
+            <template v-else>
+                <TicketBubble
+                    v-for="(message, index) in ticket?.messages"
+                    :key="index"
+                    :is_user="message.is_user"
+                    :date="message.created_at"
+                    :message="message.content"
+                    :files="message.attachments"
+                />
+            </template>
         </div>
 
-        <div class="w-full flex-center py-5">
-            <Button class="rounded-full px-20" end-icon="bi:send" size="md">
-                <!-- <Icon
-                    v-if="createAddressIsPending"
-                    name="svg-spinners:3-dots-bounce"
-                /> -->
-                <span>ارسال پیام</span>
-            </Button>
+        <div
+            v-if="ticket?.status !== 'بسته شده' && !ticketIsLoading"
+            class="w-full flex flex-col gap-5"
+        >
+            <div
+                class="grid grid-cols-1 lg:grid-cols-2 gap-5 pt-5 border-t border-slate-200"
+            >
+                <DataField
+                    id="message"
+                    :required="true"
+                    label="متن پیام"
+                    :error="formValidator$.content"
+                >
+                    <Textarea
+                        v-model="messageData.content"
+                        :error="formValidator$.content.$error"
+                        class="h-[10rem] lg:h-[20rem]"
+                        variant="outlined"
+                        placeholder="متن پیام را اینجا بنویسید ..."
+                    />
+                </DataField>
+                <FileInput
+                    v-model="messageData.attachments"
+                    @change="handleUploadAttachment"
+                    :loading="uploadAttachmentIsPending"
+                />
+            </div>
+
+            <div class="w-full flex-center py-5">
+                <Button
+                    @click="handleSubmit"
+                    :loading="
+                        createMessageIsPending || uploadAttachmentIsPending
+                    "
+                    class="rounded-full w-[14rem] h-11"
+                    size="md"
+                >
+                    <Icon
+                        v-if="createMessageIsPending"
+                        :name="
+                            createMessageIsPending
+                                ? 'svg-spinners:3-dots-bounce'
+                                : 'bi:send'
+                        "
+                    />
+                    <span v-else>ارسال پیام</span>
+                </Button>
+            </div>
         </div>
     </div>
 </template>

From 28c2847d8ee7ac93811e1719b89294c803a97c82 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:13:37 +0330
Subject: [PATCH 15/15] changed order field to order_id

---
 frontend/pages/profile/tickets/new.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/profile/tickets/new.vue b/frontend/pages/profile/tickets/new.vue
index 9b1f04b..30f3d2b 100644
--- a/frontend/pages/profile/tickets/new.vue
+++ b/frontend/pages/profile/tickets/new.vue
@@ -9,7 +9,7 @@ import useUploadAttachment from "~/composables/api/tickets/useUploadAttachment";
 import { useToast } from "~/composables/global/useToast";
 import { QUERY_KEYS } from "~/constants";
 import useVuelidate from "@vuelidate/core";
-import { helpers, required, minLength, email } from "@vuelidate/validators";
+import { helpers, required, minLength } from "@vuelidate/validators";
 
 // meta
 
@@ -66,7 +66,7 @@ const ticketCategories: TicketCategory[] = [
 
 const ticketData = ref<CreateTicketRequest>({
     ticket_category: undefined,
-    order: undefined,
+    order_id: undefined,
     subject: "",
     content: "",
     attachments: [],
@@ -234,21 +234,21 @@ const handleSubmit = async () => {
                     <Select
                         placeholder="انتخاب کنید"
                         variant="outlined"
-                        v-model="ticketData.order"
+                        v-model="ticketData.order_id"
                         :loading="ordersIsLoading"
                     >
                         <template #trigger>
                             <SelectValue
                                 :class="
-                                    ticketData.order
+                                    ticketData.order_id
                                         ? 'text-black'
                                         : 'text-slate-400'
                                 "
                                 class="font-iran-yekan-x text-sm text-start placeholder-slate-400"
                             >
                                 {{
-                                    ticketData.order
-                                        ? `شماره سفارش : ${ticketData.order}`
+                                    ticketData.order_id
+                                        ? `شماره سفارش : ${ticketData.order_id}`
                                         : "وارد نشده"
                                 }}
                             </SelectValue>
@@ -338,6 +338,7 @@ const handleSubmit = async () => {
         <div class="w-full flex-center py-5">
             <Button
                 @click="handleSubmit"
+                :loading="createTicketIsPending || uploadAttachmentIsPending"
                 class="rounded-full w-[14rem] h-11"
                 size="md"
             >