From c9781b9074d9350075714d03b214c32309fa496c Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 12 Feb 2025 15:46:39 +0330
Subject: [PATCH] single service

---
 src/langs/fa.json                             |   1 +
 src/pages/service/DetailService.tsx           | 378 +++++++++---------
 .../service/components/ServiceHeader.tsx      |  16 +-
 .../service/components/ServiceImages.tsx      |  38 +-
 src/pages/service/hooks/useServiceData.ts     |   8 +
 src/pages/service/service/ServiceService.ts   |   5 +
 src/pages/service/types/ServiecTypes.ts       |  20 +
 7 files changed, 258 insertions(+), 208 deletions(-)

diff --git a/src/langs/fa.json b/src/langs/fa.json
index 69ed9c0..90f23b0 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -98,6 +98,7 @@
     "year_make": "سال ساخت",
     "lang_app": "زبان نرم افزار",
     "persian": "فارسی",
+    "english": "انگیلیسی",
     "score": "امتیاز",
     "compelete_description": "توضیحات تکمیلی",
     "submit_comment": "ثبت نظر",
diff --git a/src/pages/service/DetailService.tsx b/src/pages/service/DetailService.tsx
index 7da95d2..769d406 100644
--- a/src/pages/service/DetailService.tsx
+++ b/src/pages/service/DetailService.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, Fragment } from 'react'
 import RobotImage from '../../assets/images/robot.jpeg'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
@@ -8,204 +8,218 @@ import Input from '../../components/Input'
 import Textarea from '../../components/Textarea'
 import AvatarImage from '../../assets/images/Avatar.png'
 import ServiceHeader from './components/ServiceHeader'
+import { useGetDetailService } from './hooks/useServiceData'
+import { useParams } from 'react-router-dom'
+import PageLoading from '../../components/PageLoading'
+import moment from 'moment-jalaali'
 
 const DetailService: FC = () => {
 
+    const { id } = useParams()
     const { t } = useTranslation('global')
 
+    const getDetailService = useGetDetailService(id ? id : '')
+
     return (
         <div className='w-full flex gap-6 mt-4'>
 
-            <div className='flex-1 max-w-full'>
+            {
+                getDetailService.isPending ?
+                    <PageLoading />
+                    :
+                    <Fragment>
+                        <div className='flex-1 max-w-full'>
 
-                <ServiceHeader />
-                <div className='mt-8 flex overflowX justify-between items-center xl:gap-8 gap-5'>
-                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
-                        <div className='text-description xl:text-xs text-[11px]'>
-                            {t('service.company_develop')}
+                            <ServiceHeader data={getDetailService?.data?.data?.danakService} />
+                            <div className='mt-8 flex overflowX justify-between items-center xl:gap-8 gap-5'>
+                                <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
+                                    <div className='text-description xl:text-xs text-[11px]'>
+                                        {t('service.company_develop')}
+                                    </div>
+                                    <div className='mt-3 text-sm'>
+                                        {t('service.company_danak')}
+                                    </div>
+                                </div>
+                                <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
+                                    <div className='text-description xl:text-xs text-[11px]'>
+                                        {t('service.user_count')}
+                                    </div>
+                                    <div className='mt-3 text-sm'>
+                                        +{getDetailService?.data?.data?.danakService?.userCount}
+                                    </div>
+                                </div>
+                                <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
+                                    <div className='text-description xl:text-xs text-[11px]'>
+                                        {t('service.year_make')}
+                                    </div>
+                                    <div className='mt-3 text-sm'>
+                                        {moment(getDetailService?.data?.data?.danakService?.createDate, 'jYYYY-jMM-jDD').format('jYYYY')}
+                                    </div>
+                                </div>
+                                <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
+                                    <div className='text-description xl:text-xs text-[11px]'>
+                                        {t('service.lang_app')}
+                                    </div>
+                                    <div className='mt-3 text-sm'>
+                                        {getDetailService?.data?.data?.danakService?.serviceLanguage === 'fa' ? t('service.persian') : t('service.english')}
+                                    </div>
+                                </div>
+                                <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
+                                    <div className='text-description xl:text-xs text-[11px]'>
+                                        {t('service.score')}
+                                    </div>
+                                    <div className='mt-3 dltr flex gap-1 text-sm'>
+                                        <Rate
+                                            count={5}
+                                            style={{ fontSize: 15 }}
+                                            value={4}
+                                            disabled
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <ServiceImages images={getDetailService?.data?.data?.danakService?.images} />
+
+                            <div className='mt-8 bg-white p-6 rounded-3xl'>
+                                <div>
+                                    {t('service.compelete_description')}
+                                </div>
+                                <p dangerouslySetInnerHTML={{ __html: getDetailService.data?.data?.danakService?.metaDescription }} className='text-[11px] mt-4 leading-6'>
+                                </p>
+                            </div>
+
+                            <div className='mt-8 flex xl:flex-row flex-col gap-8 items-start'>
+                                <div className='bg-white p-6 rounded-3xl xl:w-[360px] w-full'>
+                                    <div>
+                                        {t('service.submit_comment')}
+                                    </div>
+                                    <div className='text-xs mt-4'>
+                                        {t('service.hint_comment')}
+                                    </div>
+
+                                    <div className='mt-6 text-description text-sm'>
+                                        <div>
+                                            {t('service.score')}
+                                        </div>
+                                        <div className='mt-2 dltr flex justify-end'>
+                                            <Rate
+                                                count={5}
+                                                style={{ fontSize: 22 }}
+                                            />
+                                        </div>
+
+                                        <div className='mt-6'>
+                                            <Input
+                                                label={t('service.fullName')}
+                                                placeholder={t('service.enter_your_name')}
+                                            />
+                                        </div>
+                                        <div className='mt-6'>
+                                            <Input
+                                                label={t('service.title')}
+                                                placeholder={t('service.enter_title_comment')}
+                                            />
+                                        </div>
+
+                                        <div className='mt-6'>
+                                            <Textarea
+                                                label={t('service.your_comment')}
+                                                placeholder={t('service.write_your_comment')}
+                                            />
+                                        </div>
+
+                                        <div className='mt-6'>
+                                            <Button
+                                                label={t('service.submit_comment')}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className='flex-1 max-w-full bg-white p-6 rounded-3xl'>
+                                    <div className='text-sm'>
+                                        {t('service.users_comments')}
+                                    </div>
+
+                                    <div className='mt-5 border border-border rounded-3xl p-6'>
+                                        <div className='flex gap-2 items-center'>
+                                            <img src={AvatarImage} className='size-6 rounded-full object-cover' />
+                                            <div className='text-description text-xs'>
+                                                فروغ براتی
+                                            </div>
+                                        </div>
+
+                                        <div className='mt-4 flex justify-between'>
+                                            <div className='text-sm max-w-[70%] truncate'>
+                                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
+                                            </div>
+                                            <div className='text-xs text-description'>
+                                                ۳ روز پیش
+                                            </div>
+                                        </div>
+
+                                        <div className='mt-2'>
+                                            <Rate
+                                                disabled
+                                                value={5}
+                                                count={5}
+                                                style={{ fontSize: 14 }}
+                                            />
+                                        </div>
+
+                                        <div className='mt-4 text-[11px] leading-6'>
+                                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
+                                        </div>
+                                    </div>
+                                    <div className='mt-5 border border-border rounded-3xl p-6'>
+                                        <div className='flex gap-2 items-center'>
+                                            <img src={AvatarImage} className='size-6 rounded-full object-cover' />
+                                            <div className='text-description text-xs'>
+                                                فروغ براتی
+                                            </div>
+                                        </div>
+
+                                        <div className='mt-4 flex justify-between'>
+                                            <div className='text-sm max-w-[70%] truncate'>
+                                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
+                                            </div>
+                                            <div className='text-xs text-description'>
+                                                ۳ روز پیش
+                                            </div>
+                                        </div>
+
+                                        <div className='mt-2'>
+                                            <Rate
+                                                disabled
+                                                value={5}
+                                                count={5}
+                                                style={{ fontSize: 14 }}
+                                            />
+                                        </div>
+
+                                        <div className='mt-4 text-[11px] leading-6'>
+                                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                        <div className='mt-3 text-sm'>
-                            {t('service.company_danak')}
-                        </div>
-                    </div>
-                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
-                        <div className='text-description xl:text-xs text-[11px]'>
-                            {t('service.user_count')}
-                        </div>
-                        <div className='mt-3 text-sm'>
-                            +۵۰۰
-                        </div>
-                    </div>
-                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
-                        <div className='text-description xl:text-xs text-[11px]'>
-                            {t('service.year_make')}
-                        </div>
-                        <div className='mt-3 text-sm'>
-                            ۱۴۰۰
-                        </div>
-                    </div>
-                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
-                        <div className='text-description xl:text-xs text-[11px]'>
-                            {t('service.lang_app')}
-                        </div>
-                        <div className='mt-3 text-sm'>
-                            {t('service.persian')}
-                        </div>
-                    </div>
-                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
-                        <div className='text-description xl:text-xs text-[11px]'>
-                            {t('service.score')}
-                        </div>
-                        <div className='mt-3 dltr flex gap-1 text-sm'>
-                            <Rate
-                                count={5}
-                                style={{ fontSize: 15 }}
-                                value={4}
-                                disabled
+                        <div className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
+                            <img
+                                src={RobotImage}
+                                className='w-full backdrop-blur-[100px] h-[550px] object-cover'
                             />
-                        </div>
-                    </div>
-                </div>
 
-                <ServiceImages />
-
-                <div className='mt-8 bg-white p-6 rounded-3xl'>
-                    <div>
-                        {t('service.compelete_description')}
-                    </div>
-                    <p className='text-[11px] mt-4 leading-6'>
-                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-                    </p>
-                </div>
-
-                <div className='mt-8 flex xl:flex-row flex-col gap-8 items-start'>
-                    <div className='bg-white p-6 rounded-3xl xl:w-[360px] w-full'>
-                        <div>
-                            {t('service.submit_comment')}
-                        </div>
-                        <div className='text-xs mt-4'>
-                            {t('service.hint_comment')}
-                        </div>
-
-                        <div className='mt-6 text-description text-sm'>
-                            <div>
-                                {t('service.score')}
-                            </div>
-                            <div className='mt-2 dltr flex justify-end'>
-                                <Rate
-                                    count={5}
-                                    style={{ fontSize: 22 }}
-                                />
-                            </div>
-
-                            <div className='mt-6'>
-                                <Input
-                                    label={t('service.fullName')}
-                                    placeholder={t('service.enter_your_name')}
-                                />
-                            </div>
-                            <div className='mt-6'>
-                                <Input
-                                    label={t('service.title')}
-                                    placeholder={t('service.enter_title_comment')}
-                                />
-                            </div>
-
-                            <div className='mt-6'>
-                                <Textarea
-                                    label={t('service.your_comment')}
-                                    placeholder={t('service.write_your_comment')}
-                                />
-                            </div>
-
-                            <div className='mt-6'>
-                                <Button
-                                    label={t('service.submit_comment')}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                    <div className='flex-1 max-w-full bg-white p-6 rounded-3xl'>
-                        <div className='text-sm'>
-                            {t('service.users_comments')}
-                        </div>
-
-                        <div className='mt-5 border border-border rounded-3xl p-6'>
-                            <div className='flex gap-2 items-center'>
-                                <img src={AvatarImage} className='size-6 rounded-full object-cover' />
-                                <div className='text-description text-xs'>
-                                    فروغ براتی
+                            <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
+                                <div className='max-w-[80%] text-sm leading-6 text-white'>
+                                    سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                                 </div>
                             </div>
-
-                            <div className='mt-4 flex justify-between'>
-                                <div className='text-sm max-w-[70%] truncate'>
-                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
-                                </div>
-                                <div className='text-xs text-description'>
-                                    ۳ روز پیش
-                                </div>
-                            </div>
-
-                            <div className='mt-2'>
-                                <Rate
-                                    disabled
-                                    value={5}
-                                    count={5}
-                                    style={{ fontSize: 14 }}
-                                />
-                            </div>
-
-                            <div className='mt-4 text-[11px] leading-6'>
-                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
-                            </div>
                         </div>
-                        <div className='mt-5 border border-border rounded-3xl p-6'>
-                            <div className='flex gap-2 items-center'>
-                                <img src={AvatarImage} className='size-6 rounded-full object-cover' />
-                                <div className='text-description text-xs'>
-                                    فروغ براتی
-                                </div>
-                            </div>
+                    </Fragment>
+            }
 
-                            <div className='mt-4 flex justify-between'>
-                                <div className='text-sm max-w-[70%] truncate'>
-                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
-                                </div>
-                                <div className='text-xs text-description'>
-                                    ۳ روز پیش
-                                </div>
-                            </div>
 
-                            <div className='mt-2'>
-                                <Rate
-                                    disabled
-                                    value={5}
-                                    count={5}
-                                    style={{ fontSize: 14 }}
-                                />
-                            </div>
-
-                            <div className='mt-4 text-[11px] leading-6'>
-                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
-                <img
-                    src={RobotImage}
-                    className='w-full backdrop-blur-[100px] h-[550px] object-cover'
-                />
-
-                <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
-                    <div className='max-w-[80%] text-sm leading-6 text-white'>
-                        سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
-                    </div>
-                </div>
-            </div>
         </div>
     )
 }
diff --git a/src/pages/service/components/ServiceHeader.tsx b/src/pages/service/components/ServiceHeader.tsx
index 8690658..463f481 100644
--- a/src/pages/service/components/ServiceHeader.tsx
+++ b/src/pages/service/components/ServiceHeader.tsx
@@ -4,25 +4,33 @@ import { useTranslation } from 'react-i18next'
 import ShareIcon from '../../../assets/images/share.svg'
 import Button from '../../../components/Button'
 import { ArrowLeft } from 'iconsax-react'
+import { ServiceDetailDataType } from '../types/ServiecTypes'
 
-const ServiceHeader: FC = () => {
+type Props = {
+    data: ServiceDetailDataType
+}
 
+const ServiceHeader: FC<Props> = (props: Props) => {
+
+    const { data } = props
     const { t } = useTranslation('global')
     const [planSelected, setPlanSelected] = useState<'year' | '3month' | 'month'>('year')
 
     return (
         <div className='w-full p-6 bg-white rounded-3xl flex xl:flex-row flex-col xl:justify-between'>
             <div className='flex xl:gap-8 gap-4'>
-                <div className='xl:size-[70px] size-[50px] bg-blue-400 rounded-xl'></div>
+                <div className='xl:size-[70px] size-[50px] rounded-xl'>
+                    <img src={data?.icon} className='w-full h-full rounded-xl' />
+                </div>
                 <div>
                     <div>
-                        دی منو
+                        {data?.name}
                     </div>
                     <div className='text-xs xl:mt-3 mt-1.5 text-[#4E505A]'>
                         منوی رستوران
                     </div>
                     <p className='text-description mt-1 text-[11px]'>
-                        دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
+                        {data?.description}
                     </p>
                     <div className='hidden xl:flex gap-5 mt-5'>
                         <RadioGroup
diff --git a/src/pages/service/components/ServiceImages.tsx b/src/pages/service/components/ServiceImages.tsx
index 4c17849..9ed9788 100644
--- a/src/pages/service/components/ServiceImages.tsx
+++ b/src/pages/service/components/ServiceImages.tsx
@@ -1,13 +1,16 @@
 import { FC } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
-import AppImage from '../../../assets/images/appimage.png'
 
 const SWIPER_SLIDE_STYLE = {
     overflow: 'visible !important',
     // width: 220,
 }
 
-const ServiceImages: FC = () => {
+type Props = {
+    images: { id: string, imageUrl: string }[]
+}
+
+const ServiceImages: FC<Props> = ({ images }) => {
     return (
         <div className='w-full mt-8'>
             <Swiper
@@ -16,26 +19,17 @@ const ServiceImages: FC = () => {
                 slidesPerView='auto'
             >
 
-                <SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
-                    <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
-                        <img src={AppImage} className='w-full' />
-                    </div>
-                </SwiperSlide>
-                <SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
-                    <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
-                        <img src={AppImage} className='w-full' />
-                    </div>
-                </SwiperSlide>
-                <SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
-                    <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
-                        <img src={AppImage} className='w-full' />
-                    </div>
-                </SwiperSlide>
-                <SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
-                    <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
-                        <img src={AppImage} className='w-full' />
-                    </div>
-                </SwiperSlide>
+                {
+                    images.map((item) => {
+                        return (
+                            <SwiperSlide key={item.id} className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
+                                <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
+                                    <img src={item.imageUrl} className='w-full rounded-2xl' />
+                                </div>
+                            </SwiperSlide>
+                        )
+                    })
+                }
             </Swiper>
         </div>
     )
diff --git a/src/pages/service/hooks/useServiceData.ts b/src/pages/service/hooks/useServiceData.ts
index 7abfe76..de52c27 100644
--- a/src/pages/service/hooks/useServiceData.ts
+++ b/src/pages/service/hooks/useServiceData.ts
@@ -22,3 +22,11 @@ export const useGetServicesByCategory = (categoryId: string) => {
     enabled: !!categoryId,
   });
 };
+
+export const useGetDetailService = (serviceId: string) => {
+  return useQuery({
+    queryKey: ["service", serviceId],
+    queryFn: () => api.getDetailService(serviceId),
+    enabled: !!serviceId,
+  });
+};
diff --git a/src/pages/service/service/ServiceService.ts b/src/pages/service/service/ServiceService.ts
index 40d6bd2..8b49b22 100644
--- a/src/pages/service/service/ServiceService.ts
+++ b/src/pages/service/service/ServiceService.ts
@@ -14,3 +14,8 @@ export const getServicesByCategory = async (categoryId: string) => {
   );
   return data;
 };
+
+export const getDetailService = async (serviceId: string) => {
+  const { data } = await axios.get(`/danak-services/${serviceId}`);
+  return data;
+};
diff --git a/src/pages/service/types/ServiecTypes.ts b/src/pages/service/types/ServiecTypes.ts
index 1a02d1f..5ca6da5 100644
--- a/src/pages/service/types/ServiecTypes.ts
+++ b/src/pages/service/types/ServiecTypes.ts
@@ -25,3 +25,23 @@ export type CategoryItemType = {
   title: string;
   updatedAt: string;
 };
+
+export type ServiceDetailDataType = {
+  author: string;
+  createDate: string;
+  createdAt: string;
+  description: string;
+  icon: string;
+  id: string;
+  images: { id: string; createdAt: string; imageUrl: string }[];
+  isActive: boolean;
+  isDanakSuggest: boolean;
+  link: string;
+  metaDescription: string;
+  name: string;
+  serviceLanguage: string;
+  softwareLanguage: string;
+  subscriptionPlans: any[];
+  updatedAt: string;
+  userCount: number;
+};