onTabChange(item.value)} key={item.value} className={clx(
- 'h-[32px] flex items-center justify-center w-[122px] cursor-pointer rounded-full',
- activeTab === item.value && 'bg-primary'
+
handleChange(item.value)} key={item.value} className={clx(
+ 'h-[32px] flex items-center gap-2 justify-center min-w-[122px] px-3 cursor-pointer rounded-full',
+ currentActive === item.value && 'bg-primary'
)}>
+ {item.icon}
{item.label}
)
diff --git a/src/config/Paths.tsx b/src/config/Paths.tsx
index 165ae24..952d10c 100644
--- a/src/config/Paths.tsx
+++ b/src/config/Paths.tsx
@@ -35,4 +35,10 @@ export const Paths = {
auth: {
login: '/auth/login',
},
+ ticket: {
+ list: "/tickets/list",
+ create: "/tickets/create",
+ detail: "/tickets/messages/",
+ category: "/tickets/category",
+ },
}
\ No newline at end of file
diff --git a/src/pages/ticket/Category.tsx b/src/pages/ticket/Category.tsx
new file mode 100644
index 0000000..c325f28
--- /dev/null
+++ b/src/pages/ticket/Category.tsx
@@ -0,0 +1,196 @@
+import { type FC } from 'react'
+import Select from '@/components/Select'
+import Input from '@/components/Input'
+import Td from '@/components/Td'
+import SwitchComponent from '@/components/Switch'
+import { useFormik } from 'formik'
+import type { CategoriesItemType, CreateCategoryType } from './types/TicketTypes'
+import * as Yup from 'yup'
+import Button from '@/components/Button'
+import { useCreateCategory, useGetCategories } from './hooks/useTicketData'
+import Textarea from '@/components/Textarea'
+import type { ErrorType } from '@/helpers/types'
+import { toast } from 'react-toastify'
+
+const TicketCategory: FC = () => {
+
+ // TODO: این hook باید بعداً وصل شود - مربوط به users است
+ // const getGroups = useGetGroups()
+ const createCategory = useCreateCategory()
+ const getCategories = useGetCategories()
+
+ const formik = useFormik
({
+ initialValues: {
+ title: '',
+ description: '',
+ userGroupId: '',
+ isActive: true
+ },
+ validationSchema: Yup.object({
+ title: Yup.string().required('این فیلد الزامی است'),
+ userGroupId: Yup.string().required('این فیلد الزامی است'),
+ description: Yup.string().required('این فیلد الزامی است'),
+ }),
+ onSubmit: (values: CreateCategoryType) => {
+ createCategory.mutate(values, {
+ onSuccess: () => {
+ formik.resetForm()
+ },
+ onError: (error: ErrorType) => {
+ toast.error(error.response?.data?.error.message[0])
+ }
+ })
+ }
+ })
+
+ return (
+
+
+ دستهبندی تیکتها
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ getCategories.data?.data?.ticketCategories?.map((item: CategoriesItemType) => (
+
+
+ ))
+ }
+
+
+
+
+
+
+
+
+ افزودن دستهبندی
+
+
+
+
+ وضعیت دستهبندی
+
+
+
formik.setFieldValue('isActive', value)}
+ />
+
+
+
+
+
+
+
+
+
+
+ ({
+ // label: item.name,
+ // value: item.id
+ // }))
+ ]}
+ {...formik.getFieldProps('userGroupId')}
+ error_text={formik.touched.userGroupId && formik.errors.userGroupId ? formik.errors.userGroupId : ''}
+ placeholder='انتخاب کنید'
+ className='border'
+ />
+
+
+
+ formik.handleSubmit()}
+ isLoading={createCategory.isPending}
+ />
+
+
+ {/*
*/}
+
+
+
([])
+ const getCategories = useGetCategories()
+ const createTicket = useCreateTicket()
+
+ const formik = useFormik({
+ initialValues: {
+ subject: '',
+ message: '',
+ categoryId: '',
+ priority: 'LOW',
+ attachmentUrls: [],
+ userId: ''
+ },
+ validationSchema: Yup.object({
+ subject: Yup.string().required('این فیلد الزامی است'),
+ message: Yup.string().required('این فیلد الزامی است'),
+ categoryId: Yup.string().required('این فیلد الزامی است'),
+ priority: Yup.string().required('این فیلد الزامی است'),
+ }),
+ onSubmit: async (values) => {
+ // TODO: آپلود فایل باید بعداً وصل شود - نیاز به multiUpload API دارد
+ // if (files.length > 0) {
+ // const images = new FormData()
+ // files.forEach(file => {
+ // images.append('files', file)
+ // })
+ // await multiUpload.mutateAsync(images, {
+ // onSuccess: async (data) => {
+ // values.attachmentUrls = await data.data.map((item: { url: string }) => item?.url)
+ // },
+ // onError: (error: ErrorType) => {
+ // toast.error(error.response?.data?.error?.message[0])
+ // }
+ // })
+ // } else {
+ // delete values.attachmentUrls
+ // }
+ delete values.attachmentUrls
+
+ if (values.danakServiceId === '') {
+ delete values.danakServiceId
+ }
+
+
+ createTicket.mutate(values, {
+ onSuccess: (data) => {
+ toast.success('تیکت با موفقیت ثبت شد')
+ formik.resetForm()
+ navigate(`/ticket/detail/${data.data?.ticketId}`)
+ },
+ onError: (error: ErrorType) => {
+ toast.error(error.response?.data?.error?.message[0])
+ }
+ })
+ }
+ })
+
+
+ return (
+
+
+ تیکت جدید
+
+
+ {
+ getCategories.isPending ?
+
در حال بارگذاری...
+ :
+
+
+
+ پیام خود را ثبت کنید
+
+
+
+ ({
+ // label: item.firstName + ' ' + item.lastName,
+ // value: item.id
+ // }))
+ ]}
+ {...formik.getFieldProps('userId')}
+ />
+
+
+
+
+
+
+
+
+ ({
+ label: item.title,
+ value: item.id
+ })
+ ) ?? []}
+ placeholder='انتخاب کنید'
+ className='border'
+ name='categoryId'
+ value={formik.values.categoryId}
+ onChange={formik.handleChange}
+ error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ''}
+ />
+
+
+
+
+
+
+ { }}
+ />
+
+
+
+
formik.handleSubmit()}
+ isLoading={createTicket.isPending}
+ >
+
+
+
+
+
+
+
+ راهنمای ارسال تیکت
+
+
+
+
+
+
+
+ سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.
+
+
+
+
+
+
+ لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.
+
+
+
+
+
+
+ پاسخگویی 24 ساعته تلفنی را تنها از داناک می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
+
+
+
+
+
+ }
+
+
+
+
([])
+ const addMessage = useAddMessageTicket(id ? id : '')
+ const [isResetFiles, setIsResetFiles] = useState(false)
+ const closeTicket = useCloseTicket()
+
+ const formik = useFormik({
+ initialValues: {
+ content: '',
+ attachmentUrls: [],
+ },
+ validationSchema: Yup.object().shape({
+ content: Yup.string().required('این فیلد الزامیست'),
+ }),
+ onSubmit: async (values) => {
+ // if (files.length > 0) {
+ // const images = new FormData()
+ // files.forEach(file => {
+ // images.append('files', file)
+ // })
+ // await multiUpload.mutateAsync(images, {
+ // onSuccess: async (data) => {
+ // values.attachmentUrls = await data.data.map((item: { url: string }) => item?.url)
+ // },
+ // onError: (error: ErrorType) => {
+ // toast.error(error.response?.data?.error?.message[0])
+ // }
+ // })
+ // } else {
+ // delete values.attachmentUrls
+ // }
+ delete values.attachmentUrls
+
+ addMessage.mutate(values, {
+ onSuccess: () => {
+ toast.success('پیام با موفقیت ارسال شد')
+ formik.resetForm()
+ setFiles([])
+ setIsResetFiles(true)
+ setTimeout(() => {
+ setIsResetFiles(false)
+ }, 1000);
+ },
+ onError: (error: ErrorType) => {
+ toast.error(error.response?.data?.error?.message[0])
+ }
+ })
+ },
+ })
+
+ const hadleCloseTicket = () => {
+ closeTicket.mutate(id ? id : '', {
+ onSuccess: () => {
+ toast.success('تیکت با موفقیت بسته شد')
+ navigate(Paths.ticket.list)
+ },
+ onError: (error: ErrorType) => {
+ toast.error(error.response?.data?.error?.message[0])
+ }
+ })
+ }
+
+ return (
+
+
+
شماره تیکت
+
{getMessages.data?.data?.ticket?.numericId || '12345'}
+
+ {
+ getMessages.isPending ?
+
در حال بارگذاری...
+ :
+
+
+
+
+
+
+ {getMessages.data?.data?.ticket?.subject || 'مشکل در دریافت فایل نهایی پروژه'}
+
+
+ {
+ getMessages.data?.data?.messages && getMessages.data.data.messages.length > 0 ? (
+ getMessages.data.data.messages.map((item: TicketMessageType) => {
+ if (item?.author?.roles[0]?.name === 'user') {
+ return (
+
+
+ {item.content}
+
+
+ {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
+
+
+
+ {
+ item.attachments && item?.attachments?.map((item, index: number) => {
+ return (
+
+ )
+ })
+ }
+
+
+ )
+ } else {
+ return (
+
+
+
+
+ کارشناس
+
+
{item.author?.firstName + ' ' + item?.author?.lastName}
+
+
+ {item.content}
+
+
+ {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
+
+
+
+ {
+ item.attachments && item?.attachments?.map((item, index: number) => {
+ return (
+
+ )
+ })
+ }
+
+
+
+
+
+ )
+ }
+ })
+ ) : (
+ <>
+
+
+ سلام، من فایل نهایی پروژهام رو دریافت نکردم. ممنون میشم پیگیری کنید.
+
+
+ 1403/08/01 14:30
+
+
+
+
+
+
+ کارشناس
+
+
رضا محمدی
+
+
+ سلام، بله حتما. فایل نهایی پروژه شما در حال بررسی نهایی است و تا پایان امروز برای شما ارسال خواهد شد.
+
+
+ 1403/08/01 15:45
+
+
+
+
+ )
+ }
+
+
+
+ {
+ getMessages.data?.data?.ticket?.status !== 'CLOSED' &&
+
+
+
+
+
+
+
+
+
+ formik.handleSubmit()}
+ isLoading={addMessage.isPending}
+ />
+
+
+ }
+
+
+
+ {
+ getMessages.data?.data?.ticket?.status !== 'CLOSED' &&
+
+ }
+
+
+
+ اطلاعات تیکت
+
+
+ {
+ getMessages.data?.data?.ticket?.status === 'PENDING' ? 'در انتظار' :
+ getMessages.data?.data?.ticket?.status === 'ANSWERED' ? 'پاسخ داده شده' :
+ 'بسته شده'
+ }
+
+
+
+
+
+
شماره تیکت
+
+ {getMessages.data?.data?.ticket?.numericId || '12345'}
+
+
+
+
ارجاع به
+
+ {getMessages.data?.data?.ticket?.assignedTo ? (getMessages.data?.data?.ticket?.assignedTo as any)?.firstName + ' ' + (getMessages.data?.data?.ticket?.assignedTo as any)?.lastName : 'رضا محمدی'}
+
+
+
+
تاریخ
+
+ {getMessages.data?.data?.ticket?.createdAt ? moment(getMessages.data?.data?.ticket?.createdAt).format('jYYYY/jMM/jDD HH:mm') : '1403/08/01 14:30'}
+
+
+
+
دستهبندی
+
+ {getMessages.data?.data?.ticket?.category?.title || 'پشتیبانی فنی'}
+
+
+
+
اولویت
+
+ {getMessages.data?.data?.ticket?.priority === 'low' ? 'کم' : getMessages.data?.data?.ticket?.priority === 'medium' ? 'متوسط' : getMessages.data?.data?.ticket?.priority === 'high' ? 'زیاد' : 'متوسط'}
+
+
+
+
+
+
+
+
+ بهروزرسانی از طریق پیامک
+
+
+
+
+ {
+
+ }
+
+
+ }
+
(1)
+ const [searchParams] = useSearchParams()
+ const [customerId, setCustomerId] = useState('')
+ const [activeTab, setActiveTab] = useState<'ANSWERED' | 'PENDING' | 'CLOSED' | ''>('PENDING')
+ const getTicket = useGetTickets(activeTab, customerId, page)
+
+ useEffect(() => {
+ const urlCustomerId = searchParams.get('user')
+ if (urlCustomerId) {
+ setCustomerId(urlCustomerId)
+ setActiveTab('')
+ }
+ }, [searchParams])
+
+ const columns = useMemo[]>(() => [
+ {
+ title: 'شماره',
+ key: 'numericId',
+ render: (item) => item.numericId + ''
+ },
+ {
+ title: 'عنوان',
+ key: 'subject'
+ },
+ {
+ title: 'کاربر',
+ key: 'user',
+ render: (item) => item.user.firstName + ' ' + item.user.lastName
+ },
+ {
+ title: 'ارجاع به',
+ key: 'assignedTo',
+ render: (item) => item?.assignedTo?.firstName + ' ' + item?.assignedTo?.lastName
+ },
+ {
+ title: 'دستهبندی',
+ key: 'category',
+ render: (item) => item?.category?.title
+ },
+ {
+ title: 'سرویس',
+ key: 'danakService',
+ render: (item) => item?.danakService?.name
+ },
+ {
+ title: 'تاریخ',
+ key: 'updatedAt',
+ render: (item) => (
+
+ {moment(item.updatedAt).format('jYYYY-jMM-jDD HH:mm')}
+
+ )
+ },
+ {
+ title: 'وضعیت',
+ key: 'status',
+ render: (item) =>
+ item.status === 'PENDING' ? 'در حال بررسی' :
+ item.status === 'ANSWERED' ? 'پاسخ داده شده' :
+ item.status === 'CLOSED' ? 'بسته شده' : item.status
+ },
+ {
+ title: 'اولویت',
+ key: 'priority',
+ render: (item) =>
+ item.priority === 'LOW' ? 'کم' :
+ item.priority === 'MEDIUM' ? 'متوسط' :
+ item.priority === 'HIGH' ? 'زیاد' : item.priority
+ },
+ {
+ title: 'جزئیات',
+ key: 'actions',
+ render: (item) => (
+
+
+ )
+ }
+ ], [getTicket.refetch])
+
+
+ return (
+
+
+
+
+
+
+
1 ? {
+ currentPage: page,
+ totalPages: getTicket.data?.data?.pager?.totalPages ?? 1,
+ onPageChange: setPage
+ } : undefined}
+ />
+
+ )
+}
+
+export default TicketList
\ No newline at end of file
diff --git a/src/pages/ticket/components/OpenTicket.tsx b/src/pages/ticket/components/OpenTicket.tsx
new file mode 100644
index 0000000..7110453
--- /dev/null
+++ b/src/pages/ticket/components/OpenTicket.tsx
@@ -0,0 +1,34 @@
+import { type FC } from 'react'
+import Button from '@/components/Button'
+import { useOpenTicket } from '../hooks/useTicketData'
+
+type Props = {
+ id: string,
+ refetch: () => void
+}
+
+const OpenTicket: FC = ({ id, refetch }) => {
+
+ const { mutate: openTicket, isPending } = useOpenTicket()
+
+ const handleOpenTicket = () => {
+ openTicket(id, {
+ onSuccess: () => {
+ refetch()
+ }
+ })
+ }
+
+ return (
+
+
+ )
+}
+
+export default OpenTicket
\ No newline at end of file
diff --git a/src/pages/ticket/components/ReferTicket.tsx b/src/pages/ticket/components/ReferTicket.tsx
new file mode 100644
index 0000000..8562726
--- /dev/null
+++ b/src/pages/ticket/components/ReferTicket.tsx
@@ -0,0 +1,76 @@
+import { type FC } from 'react'
+import { useParams } from 'react-router-dom'
+import { useReferTicket } from '../hooks/useTicketData'
+import Button from '@/components/Button'
+import { toast } from 'react-toastify'
+import type { ErrorType } from '@/helpers/types'
+
+type Props = {
+ refetch: () => void
+}
+
+const ReferTicket: FC = ({ refetch }) => {
+
+ const { id } = useParams()
+ // const [userId, setUserId] = useState('')
+ // TODO: این hook باید بعداً وصل شود - مربوط به users است
+ // const getUsers = useGetUsers('', 'tickets')
+ const referTicket = useReferTicket()
+
+ const handleReferTicket = () => {
+ referTicket.mutate({ id: id as string, userId: '' }, {
+ onSuccess: () => {
+ refetch()
+ toast.success('تیکت با موفقیت ارجاع داده شد')
+ },
+ onError: (error: ErrorType) => {
+ toast.error(error.response?.data?.error.message[0])
+ }
+ })
+ }
+
+ return (
+
+
+
+
+ {/* TODO: این بخش باید بعداً وصل شود - نیاز به getUsers.data دارد */}
+ {/* {
+ getUsers.data?.data?.users?.map((item: UserItemType) => (
+
+
+ setUserId(e.target.checked ? item.id : '')}
+ />
+
+
+ {item.firstName + ' ' + item.lastName}
+
+
+ ))
+ } */}
+
+
+ لیست کاربران در حال حاضر در دسترس نیست
+
+
+
+
+
+
+
@@ -34,6 +38,11 @@ const MainRouter: FC = () => {