From cb2a6daa2950e8e25fe30b3af48e33b60c1ee1b8 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Tue, 24 Feb 2026 15:40:50 +0330
Subject: [PATCH] ticket detail

---
 src/locale/fa.ts                          |   2 +
 src/pages/ticket/Detail.tsx               | 396 +++++++---------------
 src/pages/ticket/MessageBubble.tsx        |  50 +++
 src/pages/ticket/ReplyForm.tsx            |  54 +++
 src/pages/ticket/TicketDetailActions.tsx  |  33 ++
 src/pages/ticket/TicketInfoSidebar.tsx    |  83 +++++
 src/pages/ticket/detailUtils.ts           |  39 +++
 src/pages/ticket/service/TicketService.ts |   6 +-
 src/pages/ticket/types/TicketTypes.ts     |  27 ++
 9 files changed, 421 insertions(+), 269 deletions(-)
 create mode 100644 src/pages/ticket/MessageBubble.tsx
 create mode 100644 src/pages/ticket/ReplyForm.tsx
 create mode 100644 src/pages/ticket/TicketDetailActions.tsx
 create mode 100644 src/pages/ticket/TicketInfoSidebar.tsx
 create mode 100644 src/pages/ticket/detailUtils.ts

diff --git a/src/locale/fa.ts b/src/locale/fa.ts
index 8d07c4c..783bad9 100644
--- a/src/locale/fa.ts
+++ b/src/locale/fa.ts
@@ -66,6 +66,7 @@ export const fa = {
     status: "وضعیت",
     priority: "اولویت",
     detail: "جزئیات",
+    open: "باز",
     PENDING: "در حال بررسی",
     ANSWERED: "پاسخ داده شده",
     CLOSED: "بسته شده",
@@ -75,6 +76,7 @@ export const fa = {
     subject: "موضوع",
     select_your_service: "انتخاب سرویس شما",
     user_name: "نام کاربر",
+    customer: "کاربر",
     expert: "کارشناس",
     answer: "پاسخ",
     your_description: "توضیحات شما",
diff --git a/src/pages/ticket/Detail.tsx b/src/pages/ticket/Detail.tsx
index ed21799..4d7b124 100644
--- a/src/pages/ticket/Detail.tsx
+++ b/src/pages/ticket/Detail.tsx
@@ -1,294 +1,158 @@
-import { type FC, Fragment, useState } from 'react'
-import Input from '../../components/Input'
-import Textarea from '@/components/Textarea'
-import UploadBox from '../../components/UploadBox'
-import Button from '../../components/Button'
-import { CloseCircle, InfoCircle, Paperclip2, Send2 } from 'iconsax-react'
-import { useNavigate, useParams } from 'react-router-dom'
-import { type MessageType, type AttachmentType } from './types/TicketTypes'
-import { useGetTicketById, useCreateOrReplyTicket } from './hooks/useTicketData'
-import moment from 'moment-jalaali'
-import { clx } from '../../helpers/utils'
-import { fa } from '@/locale/fa'
-import { Paths } from '@/config/Paths'
+import { type FC, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import Input from "@/components/Input";
+import { Paths } from "@/config/Paths";
+import { clx } from "@/helpers/utils";
+import { t } from "@/locale";
+import { getTicketDisplayName } from "./types/TicketTypes";
+import type { TicketDetailType } from "./types/TicketTypes";
+import { useCreateOrReplyTicket, useGetTicketById } from "./hooks/useTicketData";
+import { buildThreadItems, getStatusClass } from "./detailUtils";
+import MessageBubble from "./MessageBubble";
+import ReplyForm from "./ReplyForm";
+import TicketInfoSidebar from "./TicketInfoSidebar";
+import TicketDetailActions from "./TicketDetailActions";
+
+const STATUS_CLOSED = "closed";
 
 const TicketDetail: FC = () => {
-    const t = (key: string) => {
-        const keys = key.split('.');
-        let value: unknown = fa;
-        for (const k of keys) {
-            value = (value as Record<string, unknown>)?.[k];
-        }
-        return (value as string) || key;
-    }
-    const navigate = useNavigate()
-    const { id } = useParams<{ id: string }>()
-    const [content, setContent] = useState('')
-    const [files, setFiles] = useState<File[]>([])
+    const navigate = useNavigate();
+    const { id } = useParams<{ id: string }>();
+    const [content, setContent] = useState("");
+    const [files, setFiles] = useState<File[]>([]);
 
-    const getTicket = useGetTicketById(id ?? '')
-    const addMessage = useCreateOrReplyTicket()
+    const getTicket = useGetTicketById(id ?? "");
+    const addMessage = useCreateOrReplyTicket();
 
-    const raw = getTicket.data?.data
-    const ticket = raw?.ticket ?? raw
-    const messages: MessageType[] = raw?.messages ?? raw?.ticket?.messages ?? []
+    const ticket = getTicket.data?.data;
+    const threadItems = useMemo(
+        () => (ticket ? buildThreadItems(ticket) : []),
+        [ticket]
+    );
+    const isClosed =
+        ticket?.status?.toLowerCase() === STATUS_CLOSED ||
+        ticket?.status?.toUpperCase() === "CLOSED";
+
+    const handleCloseTicket = () => navigate(Paths.tickets.list);
 
     const handleSendReply = () => {
-        if (!id || !content.trim()) return
+        if (!id || !ticket || !content.trim()) return;
         addMessage.mutate(
             {
                 parentId: id,
-                subject: (ticket as { subject?: string })?.subject ?? '',
+                subject: ticket.subject,
                 content: content.trim(),
                 attachments: files.length ? files.map(() => ({})) : [],
             },
             {
                 onSuccess: () => {
-                    setContent('')
-                    setFiles([])
-                    getTicket.refetch()
+                    setContent("");
+                    setFiles([]);
+                    getTicket.refetch();
                 },
             }
-        )
+        );
+    };
+
+    const handleScrollToReply = () => {
+        document.getElementById("content")?.scrollIntoView({ behavior: "smooth" });
+        document.getElementById("content")?.focus();
+    };
+
+    if (getTicket.isPending) {
+        return (
+            <div className="mt-4">
+                <div className="flex gap-1">{t("ticket.ticket_number")}</div>
+                <div className="mt-6">Loading...</div>
+            </div>
+        );
     }
 
-    const hadleCloseTicket = () => {
-        navigate(Paths.tickets.list)
+    if (!ticket) {
+        return (
+            <div className="mt-4">
+                <div className="flex gap-1">{t("ticket.ticket_number")}</div>
+                <div className="mt-6 text-description">{t("ticket.info_ticket")}</div>
+            </div>
+        );
     }
 
-    const handleSendAnswer = () => {
-        const messageEndRef = document.getElementById('content')
-        if (messageEndRef) {
-            messageEndRef.scrollIntoView({ behavior: 'smooth' })
-            messageEndRef.focus()
-        }
-    }
+    const extendedTicket = ticket as TicketDetailType & {
+        danakService?: { name?: string };
+        numericId?: string;
+    };
 
     return (
-        <div className='mt-4'>
-            <div className='flex gap-1'>
-                <div>{t('ticket.ticket_number')}</div>
+        <div className="mt-4">
+            <div className="flex items-center gap-2 flex-wrap">
+                <span className="text-description">{t("ticket.ticket_number")}:</span>
+                <span className="font-medium">{extendedTicket.numericId ?? ticket.id}</span>
+                <span
+                    className={clx(
+                        "text-xs px-3 py-1 rounded-xl",
+                        getStatusClass(ticket.status)
+                    )}
+                >
+                    {t(`ticket.${ticket.status}`) || t(`ticket.${ticket.status?.toUpperCase()}`)}
+                </span>
             </div>
-            {
-                getTicket.isPending ?
-                    <div>Loading...</div>
-                    :
-                    <div className='flex xl:flex-row flex-col-reverse gap-6 xl:mt-8 mt-6'>
-                        <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+            <div className="flex xl:flex-row flex-col-reverse gap-6 xl:mt-8 mt-6">
+                <div className="flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl">
+                    <Input
+                        label={t("ticket.subject")}
+                        value={ticket.subject}
+                        readOnly
+                    />
+                    <div className="gap-6 rowTwoInput mt-5">
+                        {extendedTicket.danakService && (
                             <Input
-                                label={t('ticket.subject')}
-                                value={(ticket as { subject?: string })?.subject}
+                                label={t("ticket.select_your_service")}
+                                value={extendedTicket.danakService.name}
                                 readOnly
                             />
-                            <div className='gap-6 rowTwoInput mt-5'>
-                                <Input
-                                    label={t('ticket.select_your_service')}
-                                    value={(ticket as { danakService?: { name?: string } })?.danakService?.name}
-                                    readOnly
-                                />
-                                <Input
-                                    label={t('ticket.user_name')}
-                                    value={[(ticket as { user?: { firstName?: string; lastName?: string } })?.user?.firstName, (ticket as { user?: { lastName?: string } })?.user?.lastName].filter(Boolean).join(' ')}
-                                    readOnly
-                                />
-                            </div>
-
-                            {
-                                messages.map((item: MessageType) => {
-                                    if (item?.author?.roles[0]?.name === 'user') {
-                                        return (
-                                            <div key={item.id} className='mt-6 xl:text-sm text-xs bg-[#F6F7FA] p-6 rounded-3xl rounded-tr-none xl:max-w-[70%] max-w-[90%]'>
-                                                <div className='leading-7'>
-                                                    {item.content}
-                                                </div>
-                                                <div className='flex dltr end mt-6 text-xs text-description'>
-                                                    {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
-                                                </div>
-
-                                                <div className='flex gap-2 flex-wrap text-sm'>
-                                                    {
-                                                        item.attachments && item?.attachments?.map((attachment: AttachmentType, index: number) => {
-                                                            return (
-                                                                <div className='text-[#0047FF] mt-2 flex  gap-1 items-center' key={attachment.id}>
-                                                                    <Paperclip2 size={20} color='#0047FF' />
-                                                                    <a href={attachment.attachmentUrl} target='_blank' rel='noreferrer'>
-                                                                        {t('attach') + ' ' + Number(index + 1)}
-                                                                    </a>
-                                                                </div>
-                                                            )
-                                                        })
-                                                    }
-                                                </div>
-                                            </div>
-                                        )
-                                    } else {
-                                        return (
-                                            <div className='w-full flex justify-end' key={item.id}>
-                                                <div className='mt-6 xl:text-sm text-xs bg-[#EBEDF5] p-6 rounded-3xl rounded-tl-none xl:max-w-[70%] max-w-[90%]'>
-                                                    <div className='flex gap-1'>
-                                                        <div className='font-bold'>
-                                                            {t('ticket.expert')}
-                                                        </div>
-                                                        <div>{item.author?.firstName + ' ' + item?.author?.lastName}</div>
-                                                    </div>
-                                                    <div className='leading-7 mt-4'>
-                                                        {item.content}
-                                                    </div>
-                                                    <div className='flex dltr end mt-6 text-xs text-description'>
-                                                        {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
-                                                    </div>
-                                                </div>
-
-                                                <div className='flex gap-2 flex-wrap text-sm'>
-                                                    {
-                                                        item.attachments && item?.attachments?.map((attachment: AttachmentType, index: number) => {
-                                                            return (
-                                                                <div className='text-[#0047FF] mt-2 flex  gap-1 items-center' key={attachment.id}>
-                                                                    <Paperclip2 size={20} color='#0047FF' />
-                                                                    <a href={attachment.attachmentUrl} target='_blank' rel='noreferrer'>
-                                                                        {t('attach') + ' ' + Number(index + 1)}
-                                                                    </a>
-                                                                </div>
-                                                            )
-                                                        })
-                                                    }
-                                                </div>
-                                            </div>
-                                        )
-                                    }
-                                })
-                            }
-
-
-
-                            {
-                                (ticket as { status?: string })?.status !== 'CLOSED' &&
-                                <Fragment>
-                                    <div className='mt-9'>
-                                        <Textarea
-                                            id='content'
-                                            placeholder={t('ticket.your_description')}
-                                            value={content}
-                                            onChange={(e) => setContent(e.target.value)}
-                                        />
-                                    </div>
-
-                                    <div className='mt-7'>
-                                        <UploadBox
-                                            label={t('ticket.attachment')}
-                                            onChange={setFiles}
-                                            isMultiple
-                                        />
-                                    </div>
-
-                                    <div className='flex justify-end mt-6'>
-                                        <Button
-                                            className='xl:max-w-[100px]'
-                                            onClick={handleSendReply}
-                                            isLoading={addMessage.isPending}
-                                        >
-                                            <div className='flex gap-2 items-center'>
-                                                <Send2 size={20} color='black' />
-                                                <div>
-                                                    {t('ticket.send')}
-                                                </div>
-                                            </div>
-                                        </Button>
-                                    </div>
-                                </Fragment>
-                            }
-                            <div className='h-8'></div>
-                        </div>
-                        <div className={`h-fit lg:sticky left-0 lg:top-0 xl:w-[300px] w-full`}>
-                            {
-                                (ticket as { status?: string })?.status !== 'CLOSED' &&
-                                <div className='bg-white xl:p-6 p-4 rounded-3xl flex gap-4'>
-                                    <Button
-                                        label={t('ticket.send_answer')}
-                                        className='text-xs xl:h-10 h-8'
-                                        onClick={handleSendAnswer}
-                                    />
-                                    <Button
-                                        className='bg-[#D52903] xl:h-10 h-8'
-                                        onClick={hadleCloseTicket}
-                                    >
-                                        <div className='flex gap-2 text-xs items-center'>
-                                            <CloseCircle
-                                                color='white'
-                                                size={20}
-                                            />
-                                            <div className='text-white'>
-                                                {t('ticket.close_ticket')}
-                                            </div>
-                                        </div>
-                                    </Button>
-                                </div>
-                            }
-                            <div className={clx(
-                                'bg-white p-6 rounded-3xl mt-8',
-                                (ticket as { status?: string })?.status === 'CLOSED' && 'mt-0'
-                            )}>
-                                <div className='flex justify-between'>
-                                    <div className='text-sm'>
-                                        {t('ticket.info_ticket')}
-                                    </div>
-                                    <div className={clx(
-                                        'h-7 px-3 rounded-xl flex items-center text-xs bg-green-100 text-green-400',
-                                        (ticket as { status?: string })?.status === 'PENDING' && 'bg-orange-100 text-orange-700',
-                                        (ticket as { status?: string })?.status === 'CLOSED' && 'bg-red-100 text-red-400'
-                                    )}>
-                                        {t(`ticket.${(ticket as { status?: string })?.status}`)}
-                                    </div>
-                                </div>
-
-                                <div className='mt-14 text-xs w-full'>
-                                    <div className='flex justify-between text-description'>
-                                        <div>{t('ticket.ticket_number')}</div>
-                                        <div>
-                                            {(ticket as { numericId?: string })?.numericId}
-                                        </div>
-                                    </div>
-                                    <div className='flex mt-6 justify-between text-description'>
-                                        <div>{t('ticket.asignto')}</div>
-                                        <div>
-                                            {(ticket as { assignedTo?: { firstName?: string; lastName?: string } })?.assignedTo
-                                                ? [(ticket as { assignedTo?: { firstName?: string } })?.assignedTo?.firstName, (ticket as { assignedTo?: { lastName?: string } })?.assignedTo?.lastName].filter(Boolean).join(' ')
-                                                : ''}
-                                        </div>
-                                    </div>
-                                    <div className='flex mt-6 justify-between text-description'>
-                                        <div>{t('date')}</div>
-                                        <div className='dltr'>
-                                            {moment((ticket as { createdAt?: string })?.createdAt).format('jYYYY/jMM/jDD HH:mm')}
-                                        </div>
-                                    </div>
-                                    <div className='flex mt-6 justify-between text-description'>
-                                        <div>{t('ticket.category')}</div>
-                                        <div>
-                                            {(ticket as { category?: { title?: string } })?.category?.title}
-                                        </div>
-                                    </div>
-                                    <div className='flex mt-6 justify-between text-description'>
-                                        <div>{t('ticket.priority')}</div>
-                                        <div>
-                                            {(ticket as { priority?: string })?.priority === 'low' ? t('ticket.low') : (ticket as { priority?: string })?.priority === 'medium' ? t('ticket.medium') : t('ticket.high')}
-                                        </div>
-                                    </div>
-
-                                </div>
-
-                                <div className='mt-10 border-t text-xs pt-5 border-border items-center flex gap-2'>
-                                    <InfoCircle size={20} color='black' />
-                                    <div>
-                                        {t('ticket.update_sms')}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                        )}
+                        <Input
+                            label={t("ticket.user_name")}
+                            value={getTicketDisplayName(ticket.user)}
+                            readOnly
+                        />
                     </div>
-            }
-        </div>
-    )
-}
 
-export default TicketDetail
\ No newline at end of file
+                    <div className={threadItems.length ? "space-y-0" : ""}>
+                        {threadItems.map((item) => (
+                            <div
+                                key={item.id}
+                                className={!item.isFromUser ? "w-full flex justify-end" : ""}
+                            >
+                                <MessageBubble item={item} />
+                            </div>
+                        ))}
+                    </div>
+
+                    {!isClosed && (
+                        <ReplyForm
+                            content={content}
+                            onContentChange={setContent}
+                            onFilesChange={setFiles}
+                            onSubmit={handleSendReply}
+                            isPending={addMessage.isPending}
+                        />
+                    )}
+                    <div className="h-8" />
+                </div>
+
+                <aside className="h-fit lg:sticky lg:top-0 xl:w-[300px] w-full">
+                    {!isClosed && (
+                        <TicketDetailActions
+                            onScrollToReply={handleScrollToReply}
+                            onCloseTicket={handleCloseTicket}
+                        />
+                    )}
+                    <TicketInfoSidebar ticket={ticket} />
+                </aside>
+            </div>
+        </div>
+    );
+};
+
+export default TicketDetail;
diff --git a/src/pages/ticket/MessageBubble.tsx b/src/pages/ticket/MessageBubble.tsx
new file mode 100644
index 0000000..18e24ef
--- /dev/null
+++ b/src/pages/ticket/MessageBubble.tsx
@@ -0,0 +1,50 @@
+import { type FC } from "react";
+import { Paperclip2 } from "iconsax-react";
+import { clx } from "@/helpers/utils";
+import { t } from "@/locale";
+import type { TicketThreadItemType } from "./types/TicketTypes";
+import { formatDate } from "./detailUtils";
+
+export type MessageBubbleProps = { item: TicketThreadItemType };
+
+const MessageBubble: FC<MessageBubbleProps> = ({ item }) => {
+    const isUser = item.isFromUser;
+    return (
+        <div
+            className={clx(
+                "mt-6 xl:text-sm text-xs p-6 rounded-3xl xl:max-w-[70%] max-w-[90%]",
+                isUser
+                    ? "bg-[#F6F7FA] rounded-tr-none"
+                    : "bg-[#EBEDF5] rounded-tl-none"
+            )}
+        >
+            <div className="flex gap-1 mb-4">
+                <span className="font-bold">
+                    {isUser ? t("ticket.customer") : t("ticket.expert")}
+                </span>
+            </div>
+            <div className="leading-7">{item.content}</div>
+            <div className="flex dltr end mt-6 text-xs text-description">
+                {formatDate(item.createdAt)}
+            </div>
+            {item.attachments && item.attachments.length > 0 && (
+                <div className="flex gap-2 flex-wrap text-sm mt-2">
+                    {item.attachments.map((att, index) => (
+                        <a
+                            key={att.id}
+                            href={att.attachmentUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-[#0047FF] flex gap-1 items-center"
+                        >
+                            <Paperclip2 size={20} color="#0047FF" />
+                            {t("attach")} {index + 1}
+                        </a>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default MessageBubble;
diff --git a/src/pages/ticket/ReplyForm.tsx b/src/pages/ticket/ReplyForm.tsx
new file mode 100644
index 0000000..6df34f8
--- /dev/null
+++ b/src/pages/ticket/ReplyForm.tsx
@@ -0,0 +1,54 @@
+import { type FC, Fragment } from "react";
+import { Send2 } from "iconsax-react";
+import Button from "@/components/Button";
+import Textarea from "@/components/Textarea";
+import UploadBox from "@/components/UploadBox";
+import { t } from "@/locale";
+
+export type ReplyFormProps = {
+    content: string;
+    onContentChange: (v: string) => void;
+    onFilesChange: (f: File[]) => void;
+    onSubmit: () => void;
+    isPending: boolean;
+};
+
+const ReplyForm: FC<ReplyFormProps> = ({
+    content,
+    onContentChange,
+    onFilesChange,
+    onSubmit,
+    isPending,
+}) => (
+    <Fragment>
+        <div className="mt-9">
+            <Textarea
+                id="content"
+                placeholder={t("ticket.your_description")}
+                value={content}
+                onChange={(e) => onContentChange(e.target.value)}
+            />
+        </div>
+        <div className="mt-7">
+            <UploadBox
+                label={t("ticket.attachment")}
+                onChange={onFilesChange}
+                isMultiple
+            />
+        </div>
+        <div className="flex justify-end mt-6">
+            <Button
+                className="xl:max-w-[100px]"
+                onClick={onSubmit}
+                isLoading={isPending}
+            >
+                <div className="flex gap-2 items-center">
+                    <Send2 size={20} color="black" />
+                    <span>{t("ticket.send")}</span>
+                </div>
+            </Button>
+        </div>
+    </Fragment>
+);
+
+export default ReplyForm;
diff --git a/src/pages/ticket/TicketDetailActions.tsx b/src/pages/ticket/TicketDetailActions.tsx
new file mode 100644
index 0000000..0b0836b
--- /dev/null
+++ b/src/pages/ticket/TicketDetailActions.tsx
@@ -0,0 +1,33 @@
+import { type FC } from "react";
+import { CloseCircle } from "iconsax-react";
+import Button from "@/components/Button";
+import { t } from "@/locale";
+
+export type TicketDetailActionsProps = {
+    onScrollToReply: () => void;
+    onCloseTicket: () => void;
+};
+
+const TicketDetailActions: FC<TicketDetailActionsProps> = ({
+    onScrollToReply,
+    onCloseTicket,
+}) => (
+    <div className="bg-white xl:p-6 p-4 rounded-3xl flex gap-4">
+        <Button
+            label={t("ticket.send_answer")}
+            className="text-xs xl:h-10 h-8"
+            onClick={onScrollToReply}
+        />
+        <Button
+            className="bg-[#D52903] xl:h-10 h-8"
+            onClick={onCloseTicket}
+        >
+            <div className="flex gap-2 text-xs items-center text-white">
+                <CloseCircle color="white" size={20} />
+                <span>{t("ticket.close_ticket")}</span>
+            </div>
+        </Button>
+    </div>
+);
+
+export default TicketDetailActions;
diff --git a/src/pages/ticket/TicketInfoSidebar.tsx b/src/pages/ticket/TicketInfoSidebar.tsx
new file mode 100644
index 0000000..670714b
--- /dev/null
+++ b/src/pages/ticket/TicketInfoSidebar.tsx
@@ -0,0 +1,83 @@
+import { type FC } from "react";
+import { InfoCircle } from "iconsax-react";
+import { clx } from "@/helpers/utils";
+import { t } from "@/locale";
+import type { TicketDetailType } from "./types/TicketTypes";
+import { formatDate, getStatusClass } from "./detailUtils";
+
+export type TicketInfoSidebarProps = {
+    ticket: TicketDetailType;
+};
+
+type ExtendedTicketFields = {
+    numericId?: string;
+    assignedTo?: { firstName?: string; lastName?: string };
+    category?: { title?: string };
+    priority?: string;
+};
+
+const TicketInfoSidebar: FC<TicketInfoSidebarProps> = ({ ticket }) => {
+    const status = ticket.status?.toUpperCase() ?? "";
+    const statusLabel = t(`ticket.${ticket.status}`) || t(`ticket.${status}`);
+    const extendedTicket = ticket as TicketDetailType & ExtendedTicketFields;
+
+    const infoRows: { label: string; value: string }[] = [
+        { label: t("ticket.ticket_number"), value: extendedTicket.numericId ?? ticket.id },
+        { label: t("ticket.date"), value: formatDate(ticket.createdAt) },
+    ];
+    if (extendedTicket.assignedTo) {
+        const name = [extendedTicket.assignedTo.firstName, extendedTicket.assignedTo.lastName]
+            .filter(Boolean)
+            .join(" ");
+        if (name) infoRows.push({ label: t("ticket.asignto"), value: name });
+    }
+    if (extendedTicket.category?.title) {
+        infoRows.push({ label: t("ticket.category"), value: extendedTicket.category.title });
+    }
+    if (extendedTicket.priority) {
+        const priorityLabel =
+            extendedTicket.priority === "low"
+                ? t("ticket.low")
+                : extendedTicket.priority === "medium"
+                    ? t("ticket.medium")
+                    : t("ticket.high");
+        infoRows.push({ label: t("ticket.priority"), value: priorityLabel });
+    }
+
+    return (
+        <div
+            className={clx(
+                "bg-white p-5 rounded-3xl",
+                status === "CLOSED" ? "mt-0" : "mt-6"
+            )}
+        >
+            <div className="flex justify-between items-center gap-3">
+                <span className="text-sm font-medium">{t("ticket.info_ticket")}</span>
+                <span
+                    className={clx(
+                        "shrink-0 h-7 px-3 rounded-xl flex items-center text-xs font-medium",
+                        getStatusClass(ticket.status)
+                    )}
+                >
+                    {statusLabel}
+                </span>
+            </div>
+            <dl className="mt-5 space-y-4 text-xs">
+                {infoRows.map(({ label, value }) => (
+                    <div key={label} className="flex justify-between gap-3 items-baseline">
+                        <dt className="text-description shrink-0">{label}</dt>
+                        <dd className="dltr text-left font-medium min-w-0 truncate" title={value}>
+                            {value}
+                        </dd>
+                    </div>
+                ))}
+            </dl>
+            <div className="mt-6 pt-4 border-t border-border flex items-center gap-2 text-xs text-description">
+                <InfoCircle size={18} className="shrink-0" />
+                <span>{t("ticket.update_sms")}</span>
+            </div>
+        </div>
+    );
+};
+
+export default TicketInfoSidebar;
diff --git a/src/pages/ticket/detailUtils.ts b/src/pages/ticket/detailUtils.ts
new file mode 100644
index 0000000..6ded8c0
--- /dev/null
+++ b/src/pages/ticket/detailUtils.ts
@@ -0,0 +1,39 @@
+import moment from "moment-jalaali";
+import { t } from "@/locale";
+import type { TicketDetailType, TicketThreadItemType } from "./types/TicketTypes";
+import type { AttachmentType } from "./types/TicketTypes";
+import { getTicketDisplayName } from "./types/TicketTypes";
+
+export const buildThreadItems = (ticket: TicketDetailType): TicketThreadItemType[] => {
+    const main: TicketThreadItemType = {
+        id: ticket.id,
+        content: ticket.content,
+        createdAt: ticket.createdAt,
+        authorLabel: getTicketDisplayName(ticket.user),
+        isFromUser: true,
+        attachments: (ticket.attachments as AttachmentType[] | undefined) ?? [],
+    };
+    const children: TicketThreadItemType[] = (ticket.children ?? []).map((c) => {
+        const isFromUser = c.admin == null;
+        return {
+            id: c.id,
+            content: c.content,
+            createdAt: c.createdAt,
+            authorLabel: isFromUser
+                ? getTicketDisplayName(ticket.user)
+                : t("ticket.expert"),
+            isFromUser,
+            attachments: (c.attachments as AttachmentType[] | undefined) ?? [],
+        };
+    });
+    return [main, ...children];
+};
+
+export const formatDate = (date: string) => moment(date).format("jYYYY-jMM-jDD HH:mm");
+
+export const getStatusClass = (status: string) => {
+    const s = status?.toUpperCase();
+    if (s === "CLOSED") return "bg-red-100 text-red-400";
+    if (s === "PENDING") return "bg-orange-100 text-orange-700";
+    return "bg-green-100 text-green-400";
+};
diff --git a/src/pages/ticket/service/TicketService.ts b/src/pages/ticket/service/TicketService.ts
index 24d659b..dfea1f0 100644
--- a/src/pages/ticket/service/TicketService.ts
+++ b/src/pages/ticket/service/TicketService.ts
@@ -4,6 +4,7 @@ import {
   type AddMessageTicketType,
   type CreateTicketPayload,
   type CreateTicketType,
+  type GetTicketByIdResponseType,
   type GetTicketsResponseType,
 } from "../types/TicketTypes";
 
@@ -14,9 +15,8 @@ export const getTickets = async (status?: string): Promise<GetTicketsResponseTyp
   return data;
 };
 
-/** جزئیات یک تیکت - GET /public/tickets/{id} */
-export const getTicketById = async (id: string) => {
-  const { data } = await axios.get(`/public/tickets/${id}`);
+export const getTicketById = async (id: string): Promise<GetTicketByIdResponseType> => {
+  const { data } = await axios.get<GetTicketByIdResponseType>(`/public/tickets/${id}`);
   return data;
 };
 
diff --git a/src/pages/ticket/types/TicketTypes.ts b/src/pages/ticket/types/TicketTypes.ts
index 29f0847..c44f1f0 100644
--- a/src/pages/ticket/types/TicketTypes.ts
+++ b/src/pages/ticket/types/TicketTypes.ts
@@ -31,6 +31,20 @@ export type TicketListItemType = {
 
 export type GetTicketsResponseType = BaseResponse<TicketListItemType[]>;
 
+/** آیتم تیکت در children (user به‌صورت id یا null، admin برای تشخیص پیام ادمین/کاربر) */
+export type TicketDetailChildType = Omit<TicketListItemType, "user" | "children"> & {
+  user: string | null;
+  /** null = پیام از کاربر، مقدار دارد = پیام از ادمین/کارشناس */
+  admin: string | null;
+};
+
+/** جزئیات یک تیکت (پاسخ GET /public/tickets/:id) */
+export type TicketDetailType = Omit<TicketListItemType, "children"> & {
+  children: TicketDetailChildType[];
+};
+
+export type GetTicketByIdResponseType = BaseResponse<TicketDetailType>;
+
 /** برای ایجاد تیکت جدید (بدون parentId) یا ارسال پیام (با parentId) */
 export type CreateTicketPayload = {
   parentId?: string;
@@ -70,3 +84,16 @@ export type MessageType = {
   };
   attachments?: AttachmentType[];
 };
+
+/** آیتم قابل نمایش در رشته مکالمه (تیکت اصلی یا پاسخ) */
+export type TicketThreadItemType = {
+  id: string;
+  content: string;
+  createdAt: string;
+  authorLabel: string;
+  isFromUser: boolean;
+  attachments?: AttachmentType[];
+};
+
+export const getTicketDisplayName = (user: TicketUserType): string =>
+  [user.firstName, user.lastName].filter(Boolean).join(" ").trim() || user.phone || "-";