crud blog

.env

@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
-VITE_BASE_URL = 'https://api.danakcorp.com'
+# VITE_BASE_URL = 'https://api.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.0.216:4000'
+VITE_BASE_URL = 'http://192.168.1.108:4000'

src/config/Pages.ts

@@ -79,6 +79,7 @@ export const Pages = {
     list: "/blog/list",
     create: "/blog/create",
     category: "/blog/category",
+    detail: "/blog/detail/",
   },
   messages: {
     list: "/messages/list",

src/langs/fa.json

@@ -333,7 +333,7 @@
     "category": "دسته بندی",
     "new_blog": "افزودن بلاگ",
     "blog_title": "عنوان بلاگ",
-    "blog_Summary": "خلاصه بلاگ",
+    "blog_summary": "خلاصه بلاگ",
     "content": "محتوا",
     "blog_status": "وضعیت بلاگ",
     "featured_image": "تصویر شاخص",
@@ -367,7 +367,17 @@
     "discount_code": "کد تخفیف",
     "direct_discount": "تخفیف مستقیم",
     "fixed_amount": "مبلغ ثابت",
-    "percent": "درصد"
+    "percent": "درصد",
+    "enter_your_summary": "خلاصه بلاگ را وارد کنید",
+    "enter_your_content": "محتوای بلاگ را وارد کنید",
+    "blog_content": "محتوای بلاگ",
+    "enter_tags": "برچسب ها را وارد کنید",
+    "enter_your_slug": "اسلاگ بلاگ را وارد کنید",
+    "slug": "اسلاگ",
+    "meta_title": "عنوان متا",
+    "enter_your_meta_title": "عنوان متا بلاگ را وارد کنید",
+    "meta_description": "توضیحات متا",
+    "enter_your_meta_description": "توضیحات متا بلاگ را وارد کنید"
   },
   "receip": {
     "receips": "صورتحساب ها",

src/pages/blog/BlogList.tsx

@@ -1,16 +1,21 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add, Eye } from 'iconsax-react'
+import { Add, Eye, Trash } from 'iconsax-react'
 import Td from '../../components/Td'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
-import SwitchComponent from '../../components/Switch'
-import DatePickerComponent from '../../components/DatePicker'
-import Select from '../../components/Select'
 import Input from '../../components/Input'
+import { useGetBlogs, useDeleteBlog } from './hooks/useBlogData'
+import { BlogItemType } from './types/BlogTypes'
+import moment from 'moment-jalaali'
 const BlogList: FC = () => {
+
     const { t } = useTranslation('global')
+    const [search, setSearch] = useState<string>('')
+    const getBlogs = useGetBlogs(search);
+    const deleteBlog = useDeleteBlog()
+
     return (
         <div className='mt-4 min-h-[500px]'>
             <div className='flex justify-between items-center'>
@@ -37,7 +42,7 @@ const BlogList: FC = () => {
 
             <div className='mt-4'>
                 <div className='flex flex-col xl:flex-row justify-between items-center xl:items-end'>
-                    <div className='flex flex-col xl:flex-row items-center gap-4'>
+                    {/* <div className='flex flex-col xl:flex-row items-center gap-4'>
                         <div className='w-[400px] xl:w-[200px]'>
                             <Select
                                 label={t('blog.category')}
@@ -70,7 +75,7 @@ const BlogList: FC = () => {
                                 defaulValue='1400-01-01'
                             />
                         </div>
-                    </div>
+                    </div> */}
 
 
                     <div className='w-[400px] mt-8 xl:mt-0 xl:w-[300px]'>
@@ -78,6 +83,9 @@ const BlogList: FC = () => {
                             variant='search'
                             placeholder={t('ads.search')}
                             className='bg-white w-full'
+                            onChangeSearchFinal={(value) => {
+                                setSearch(value)
+                            }}
                         />
                     </div>
 
@@ -91,52 +99,53 @@ const BlogList: FC = () => {
                 <table className='w-full text-sm '>
                     <thead className='thead'>
                         <tr>
-                            <Td text={t('blog.number')} />
+                            <Td text={t('blog.picture')} />
                             <Td text={t('blog.blog_title')} />
-                            <Td text={t('blog.blog_Summary')} />
+                            <Td text={t('blog.blog_summary')} />
                             <Td text={t('blog.category')} />
                             <Td text={t('blog.shareDate')} />
-                            <Td text={t('blog.status')} />
+                            {/* <Td text={t('blog.status')} /> */}
                             <Td text={''} />
                         </tr>
                     </thead>
                     <tbody>
-                        <tr className='tr'>
+                        {
-                        <Td text={t('blog.number')} />
+                            getBlogs.data?.data?.blogs?.map((item: BlogItemType) => {
-                            <Td text={t('blog.blog_title')} />
+                                return (
-                            <Td text={t('blog.blog_Summary')} />
+                                    <tr key={item.id} className='tr'>
-                            <Td text={t('blog.category')} />
+                                        <Td text={''}>
-                            <Td text={t('blog.shareDate')} />
+                                            <img src={item.imageUrl} alt={item.title} className='w-20 rounded-lg' />
-                            <Td text={t('')}>
+                                        </Td>
-                                <SwitchComponent
+                                        <Td text={item.title} />
-                                    active={true}
+                                        <Td text={''}>
-                                    onChange={() => { }}
+                                            <p dangerouslySetInnerHTML={{ __html: item.previewContent }}></p>
-                                />
+                                        </Td>
-                            </Td>
+                                        <Td text={item.category.title} />
-                            <Td text={''}>
+                                        <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
-                                <Link to={Pages.ticket.detail + '1'}>
+                                        {/* <Td text={t('')}>
-                                    <Eye size={20} color='#8C90A3' />
+                                            <SwitchComponent
-                                </Link>
+                                                active={true}
-                            </Td>
+                                                onChange={() => { }}
-                        </tr>
+                                            />
-                        <tr className='tr'>
+                                        </Td> */}
-                        <Td text={t('blog.number')} />
+                                        <Td text={''}>
-                            <Td text={t('blog.blog_title')} />
+                                            <div className='flex gap-2'>
-                            <Td text={t('blog.blog_Summary')} />
+                                                <Link to={Pages.blog.detail + item.id}>
-                            <Td text={t('blog.category')} />
+                                                    <Eye size={20} color='#8C90A3' />
-                            <Td text={t('blog.shareDate')} />
+                                                </Link>
-                            <Td text={t('')}>
+                                                <Trash onClick={() => {
-                                <SwitchComponent
+                                                    deleteBlog.mutate(item.id, {
-                                    active={true}
+                                                        onSuccess: () => {
-                                    onChange={() => { }}
+                                                            getBlogs.refetch()
-                                />
+                                                        }
-                            </Td>
+                                                    })
-                            <Td text={''}>
+                                                }} size={20} color='#8C90A3' />
-                                <Link to={Pages.discount + '1'}>
+                                            </div>
-                                    <Eye size={20} color='#8C90A3' />
+                                        </Td>
-                                </Link>
+                                    </tr>
-                            </Td>
+                                )
-                        </tr>
+                            })
+                        }
                     </tbody>
                 </table>
             </div>

src/pages/blog/CreateBlog.tsx

@@ -1,23 +1,106 @@
-
+import { FC, useEffect, useRef, useState } from 'react'
-import { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '../../components/Input'
 import Button from '../../components/Button'
 import SwitchComponent from '../../components/Switch'
-import { TickCircle, TickSquare } from 'iconsax-react'
+import { TickCircle } from 'iconsax-react'
-import ImageUploader from './components/ImageUploader'
 import "quill/dist/quill.snow.css";
-import Quill from 'quill';
+// import Quill from 'quill';
+import { useFormik } from 'formik'
+import { BlogCategoryType, CreateBlogType } from './types/BlogTypes'
+import { useCreateBlog, useGetBlogCategories } from './hooks/useBlogData'
+import * as Yup from 'yup'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
+import UploadBoxDraggble from '../../components/UploadBoxDraggble'
+import Quill from 'quill'
+import { useSingleUpload } from '../service/hooks/useServiceData'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
+import { Pages } from '../../config/Pages'
+import { useNavigate } from 'react-router-dom'
 const CreateBlog: FC = () => {
+
     const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const singleSlug = useSingleUpload()
+    const editorRef = useRef<HTMLDivElement>(null)
+    const editorRef2 = useRef<HTMLDivElement>(null)
     useEffect(() => {
-        new Quill('#editor', {
+        const quill = new Quill('#editor', {
             theme: 'snow',
         });
-        new Quill('#editor2', {
+
+        quill.on('text-change', () => {
+            const html = editorRef.current?.querySelector('.ql-editor')?.innerHTML || '';
+            formik.setFieldValue('previewContent', html);
+        });
+        const quill2 = new Quill('#editor2', {
             theme: 'snow',
         });
+
+        quill2.on('text-change', () => {
+            const html = editorRef2.current?.querySelector('.ql-editor')?.innerHTML || '';
+            formik.setFieldValue('content', html);
+        });
+
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+
+    const navigate = useNavigate()
+    const createBlog = useCreateBlog()
+    const getBlogCategories = useGetBlogCategories()
+    const formik = useFormik<CreateBlogType>({
+        initialValues: {
+            categoryId: '',
+            title: '',
+            previewContent: '',
+            content: '',
+            imageUrl: '',
+            isActive: false,
+            isPinned: false,
+            metaDescription: '',
+            metaTitle: '',
+            tags: [],
+            tagInput: '',
+            slug: '',
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required(t('errors.required')),
+            previewContent: Yup.string().required(t('errors.required')),
+            content: Yup.string().required(t('errors.required')),
+            categoryId: Yup.string().required(t('errors.required')),
+            metaDescription: Yup.string().required(t('errors.required')),
+            metaTitle: Yup.string().required(t('errors.required')),
+            tags: Yup.array().of(Yup.string()).required(t('errors.required')),
+            slug: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: async (values) => {
+            if (!file) {
+                toast.error(t('errors.required'))
+                return
+            }
+            const formData = new FormData()
+            formData.append('file', file)
+            await singleSlug.mutateAsync(formData, {
+                onSuccess(data) {
+                    values.imageUrl = data.data.url
+                },
+            })
+
+            createBlog.mutate(values, {
+                onSuccess() {
+                    toast.success(t('success'))
+                    navigate(Pages.blog.list)
+                },
+                onError(error: ErrorType) {
+                    toast.error(error.response?.data?.error.message[0])
+                }
+            })
+        },
+    })
+
+
     return (
         <div className='mt-4'>
             <div className='flex justify-between items-center'>
@@ -26,6 +109,8 @@ const CreateBlog: FC = () => {
                 </div>
                 <Button
                     className='w-[172px]'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={createBlog.isPending || singleSlug.isPending}
                 >
                     <div className='flex gap-2 items-center'>
                         <TickCircle size={20} color='white' />
@@ -41,19 +126,60 @@ const CreateBlog: FC = () => {
                         <Input
                             label={t('blog.blog_title')}
                             placeholder={t('blog.enter_your_title')}
+                            {...formik.getFieldProps('title')}
+                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : undefined}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Input
+                            label={t('blog.slug')}
+                            placeholder={t('blog.enter_your_slug')}
+                            {...formik.getFieldProps('slug')}
+                            error_text={formik.touched.slug && formik.errors.slug ? formik.errors.slug : undefined}
                         />
                     </div>
 
-                    <p className='mt-6 text-sm'>{t('blog.blog_Summary')}</p>
+                    <p className='mt-6 text-sm'>{t('blog.blog_summary')}</p>
                     <div className='mt-1'>
-                        <div className='min-h-[120px]' id='editor'></div>
+                        <div className='min-h-[120px]' ref={editorRef} id='editor'></div>
                     </div>
 
+                    {
+                        formik.touched.previewContent && formik.errors.previewContent && (
+                            <p className='text-red-500 text-xs mt-1'>{formik.errors.previewContent}</p>
+                        )
+                    }
+
                     <p className='mt-6 text-sm'>{t('blog.content')}</p>
                     <div className='mt-1'>
-                        <div className='min-h-[200px]' id='editor2'></div>
+                        <div className='min-h-[200px]' ref={editorRef2} id='editor2'></div>
                     </div>
 
+                    {
+                        formik.touched.content && formik.errors.content && (
+                            <p className='text-red-500 text-xs mt-1'>{formik.errors.content}</p>
+                        )
+                    }
+
+                    <div className='mt-6'>
+                        <Input
+                            label={t('blog.meta_title')}
+                            placeholder={t('blog.enter_your_meta_title')}
+                            {...formik.getFieldProps('metaTitle')}
+                            error_text={formik.touched.metaTitle && formik.errors.metaTitle ? formik.errors.metaTitle : undefined}
+                        />
+                    </div>
+
+                    <div className='mt-6'>
+                        <Input
+                            label={t('blog.meta_description')}
+                            placeholder={t('blog.enter_your_meta_description')}
+                            {...formik.getFieldProps('metaDescription')}
+                            error_text={formik.touched.metaDescription && formik.errors.metaDescription ? formik.errors.metaDescription : undefined}
+                        />
+                    </div>
+
+
                 </div>
 
 
@@ -63,46 +189,91 @@ const CreateBlog: FC = () => {
                             {t('blog.blog_status')}
                         </p>
                         <div className='flex gap-1 text-xs items-center text-description'>
-                            <div>
-                                {t('ads.deactive')}
-                            </div>
                             <SwitchComponent
-                                active={false}
+                                active={formik.values.isActive}
-                                onChange={() => { }}
+                                onChange={(value) => formik.setFieldValue('isActive', value)}
+                            />
+                        </div>
+                    </div>
+                    <div className='text-sm mt-3 flex items-center justify-between'>
+                        <p>
+                            پین
+                        </p>
+                        <div className='flex gap-1 text-xs items-center text-description'>
+                            <SwitchComponent
+                                active={formik.values.isPinned}
+                                onChange={(value) => formik.setFieldValue('isPinned', value)}
                             />
                         </div>
                     </div>
                     <p className='mt-6 text-sm'>{t('blog.category')}</p>
                     <div className='p-2 border border-[##D0D0D0] rounded-lg mt-1'>
-                        <div className='flex items-start gap-2 py-2'>
+                        {
-                            <div>
+                            getBlogCategories.data?.data?.categories?.map((item: BlogCategoryType) => {
-                                <TickSquare size={20} color='black' variant='Bold' />
+                                return (
-                            </div>
+                                    <div key={item.id} className='flex items-center'>
-                            <div className='text-description text-xs leading-5'>
+                                        <CheckBoxComponent
-                                لورم ایپسوم
+                                            checked={formik.values.categoryId === item.id}
-                            </div>
+                                            onChange={(e) => formik.setFieldValue('categoryId', e.target.checked ? item.id : '')}
-                        </div>
+                                        />
-                        <div className='flex items-start gap-2 py-2'>
+                                        <div>{item.title}</div>
-                            <div>
+                                    </div>
-                                <TickSquare size={20} color='black' variant='Bold' />
+                                )
-                            </div>
+                            })
-                            <div className='text-description text-xs leading-5'>
+                        }
-                                لورم ایپسوم
+                    </div>
-                            </div>
+                    <div className='mt-8'>
-                        </div>
+                        <p className='text-sm'>{t('blog.featured_image')}</p>
-                        <div className='flex items-start gap-2 py-2'>
+                        <div className='mt-4'>
-                            <div>
+                            <UploadBoxDraggble
-                                <TickSquare size={20} color='black' variant='Bold' />
+                                label={t('blog.featured_image')}
-                            </div>
+                                onChange={(files) => setFile(files[0])}
-                            <div className='text-description text-xs leading-5'>
+                            />
-                                لورم ایپسوم
-                            </div>
                         </div>
                     </div>
-                    <ImageUploader />
                     <p className='mt-6 text-sm'>{t('blog.tags')}</p>
                     <div className='mt-6'>
-                        <Input className='-mt-4' />
+                        <Input
+                            className='-mt-4'
+                            placeholder={t('blog.enter_tags')}
+                            value={formik.values.tagInput || ''}
+                            onChange={(e) => {
+                                formik.setFieldValue('tagInput', e.target.value);
+                                formik.setFieldError('tags', undefined);
+                            }}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    const newTag = formik.values.tagInput?.trim();
+                                    if (newTag) {
+                                        if (formik.values.tags.includes(newTag)) {
+                                            formik.setFieldError('tags', t('blog.duplicate_tag_error'));
+                                        } else {
+                                            formik.setFieldValue('tags', [...formik.values.tags, newTag]);
+                                            formik.setFieldValue('tagInput', '');
+                                        }
+                                    }
+                                }
+                            }}
+                            error_text={typeof formik.errors.tags === 'string' ? formik.errors.tags : undefined}
+                        />
+                        <div className='flex flex-wrap gap-2 mt-2'>
+                            {formik.values.tags.map((tag, index) => (
+                                <div key={index} className='flex items-center gap-1 bg-gray-100 px-2 py-1 rounded-full'>
+                                    <span className='text-sm'>{tag}</span>
+                                    <button
+                                        type='button'
+                                        onClick={() => {
+                                            const newTags = formik.values.tags.filter((_, i) => i !== index);
+                                            formik.setFieldValue('tags', newTags);
+                                        }}
+                                        className='text-gray-500 text-xs hover:text-gray-700'
+                                    >
+                                        ×
+                                    </button>
+                                </div>
+                            ))}
+                        </div>
                         <p className='text-description text-xs mt-2'>
                             {t('blog.tag_hint')}
                         </p>

src/pages/blog/Update.tsx

@@ -0,0 +1,308 @@
+import { FC, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '../../components/Input'
+import Button from '../../components/Button'
+import SwitchComponent from '../../components/Switch'
+import { TickCircle } from 'iconsax-react'
+import "quill/dist/quill.snow.css";
+// import Quill from 'quill';
+import { useFormik } from 'formik'
+import { BlogCategoryType, CreateBlogType } from './types/BlogTypes'
+import { useGetBlogCategories, useGetBlogDetail, useUpdateBlog } from './hooks/useBlogData'
+import * as Yup from 'yup'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
+import UploadBoxDraggble from '../../components/UploadBoxDraggble'
+import Quill from 'quill'
+import { useSingleUpload } from '../service/hooks/useServiceData'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
+import { Pages } from '../../config/Pages'
+import { useNavigate, useParams } from 'react-router-dom'
+const UpdateBlog: FC = () => {
+
+    const { id } = useParams()
+    const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const singleSlug = useSingleUpload()
+    const editorRef = useRef<HTMLDivElement>(null)
+    const editorRef2 = useRef<HTMLDivElement>(null)
+    const getBlogDetail = useGetBlogDetail(id || '')
+    useEffect(() => {
+        const quill = new Quill('#editor', {
+            theme: 'snow',
+        });
+
+        quill.on('text-change', () => {
+            const html = editorRef.current?.querySelector('.ql-editor')?.innerHTML || '';
+            formik.setFieldValue('previewContent', html);
+        });
+        const quill2 = new Quill('#editor2', {
+            theme: 'snow',
+        });
+
+        quill2.on('text-change', () => {
+            const html = editorRef2.current?.querySelector('.ql-editor')?.innerHTML || '';
+            formik.setFieldValue('content', html);
+        });
+
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const navigate = useNavigate()
+    const updateBlog = useUpdateBlog()
+    const getBlogCategories = useGetBlogCategories()
+    const formik = useFormik<CreateBlogType>({
+        initialValues: {
+            categoryId: '',
+            title: '',
+            previewContent: '',
+            content: '',
+            imageUrl: '',
+            isActive: false,
+            isPinned: false,
+            metaDescription: '',
+            metaTitle: '',
+            tags: [],
+            tagInput: '',
+            slug: '',
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required(t('errors.required')),
+            previewContent: Yup.string().required(t('errors.required')),
+            content: Yup.string().required(t('errors.required')),
+            categoryId: Yup.string().required(t('errors.required')),
+            metaDescription: Yup.string().required(t('errors.required')),
+            metaTitle: Yup.string().required(t('errors.required')),
+            tags: Yup.array().of(Yup.string()).required(t('errors.required')),
+            slug: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: async (values) => {
+            if (file) {
+                const formData = new FormData()
+                formData.append('file', file)
+                await singleSlug.mutateAsync(formData, {
+                    onSuccess(data) {
+                        values.imageUrl = data.data.url
+                    },
+                })
+            }
+
+
+            updateBlog.mutate({ id: id || '', params: values }, {
+                onSuccess() {
+                    toast.success(t('success'))
+                    navigate(Pages.blog.list)
+                },
+                onError(error: ErrorType) {
+                    toast.error(error.response?.data?.error.message[0])
+                }
+            })
+        },
+    })
+
+    useEffect(() => {
+        if (getBlogDetail.data) {
+            formik.setValues(getBlogDetail.data?.data?.blog)
+            formik.setFieldValue('categoryId', getBlogDetail.data?.data?.blog.category.id)
+
+            const editorElement = editorRef.current?.querySelector('.ql-editor');
+            if (editorElement) {
+                editorElement.innerHTML = getBlogDetail.data?.data?.blog?.previewContent || '';
+            }
+
+            const editorElement2 = editorRef2.current?.querySelector('.ql-editor');
+            if (editorElement2) {
+                editorElement2.innerHTML = getBlogDetail.data?.data?.blog?.content || '';
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getBlogDetail.data])
+
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('blog.add_blog')}
+                </div>
+                <Button
+                    className='w-[172px]'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={updateBlog.isPending || singleSlug.isPending}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <TickCircle size={20} color='white' />
+                        <div>
+                            {t('blog.submit')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+            <div className='flex flex-col-reverse xl:flex-row gap-6 xl:mt-8 mt-4'>
+                <div className='flex-1 min-h-[calc(100vh-201px)] bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+                    <div className='mt-6'>
+                        <Input
+                            label={t('blog.blog_title')}
+                            placeholder={t('blog.enter_your_title')}
+                            {...formik.getFieldProps('title')}
+                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : undefined}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Input
+                            label={t('blog.slug')}
+                            placeholder={t('blog.enter_your_slug')}
+                            {...formik.getFieldProps('slug')}
+                            error_text={formik.touched.slug && formik.errors.slug ? formik.errors.slug : undefined}
+                        />
+                    </div>
+
+                    <p className='mt-6 text-sm'>{t('blog.blog_summary')}</p>
+                    <div className='mt-1'>
+                        <div className='min-h-[120px]' ref={editorRef} id='editor'></div>
+                    </div>
+
+                    {
+                        formik.touched.previewContent && formik.errors.previewContent && (
+                            <p className='text-red-500 text-xs mt-1'>{formik.errors.previewContent}</p>
+                        )
+                    }
+
+                    <p className='mt-6 text-sm'>{t('blog.content')}</p>
+                    <div className='mt-1'>
+                        <div className='min-h-[200px]' ref={editorRef2} id='editor2'></div>
+                    </div>
+
+                    {
+                        formik.touched.content && formik.errors.content && (
+                            <p className='text-red-500 text-xs mt-1'>{formik.errors.content}</p>
+                        )
+                    }
+
+                    <div className='mt-6'>
+                        <Input
+                            label={t('blog.meta_title')}
+                            placeholder={t('blog.enter_your_meta_title')}
+                            {...formik.getFieldProps('metaTitle')}
+                            error_text={formik.touched.metaTitle && formik.errors.metaTitle ? formik.errors.metaTitle : undefined}
+                        />
+                    </div>
+
+                    <div className='mt-6'>
+                        <Input
+                            label={t('blog.meta_description')}
+                            placeholder={t('blog.enter_your_meta_description')}
+                            {...formik.getFieldProps('metaDescription')}
+                            error_text={formik.touched.metaDescription && formik.errors.metaDescription ? formik.errors.metaDescription : undefined}
+                        />
+                    </div>
+
+
+                </div>
+
+
+                <div className='min-h-[calc(100vh-201px)] bg-white w-full xl:w-sidebar py-10 px-5 h-fit rounded-3xl'>
+                    <div className='text-sm flex items-center justify-between'>
+                        <p>
+                            {t('blog.blog_status')}
+                        </p>
+                        <div className='flex gap-1 text-xs items-center text-description'>
+                            <SwitchComponent
+                                active={formik.values.isActive}
+                                onChange={(value) => formik.setFieldValue('isActive', value)}
+                            />
+                        </div>
+                    </div>
+                    <div className='text-sm mt-3 flex items-center justify-between'>
+                        <p>
+                            پین
+                        </p>
+                        <div className='flex gap-1 text-xs items-center text-description'>
+                            <SwitchComponent
+                                active={formik.values.isPinned}
+                                onChange={(value) => formik.setFieldValue('isPinned', value)}
+                            />
+                        </div>
+                    </div>
+                    <p className='mt-6 text-sm'>{t('blog.category')}</p>
+                    <div className='p-2 border border-[##D0D0D0] rounded-lg mt-1'>
+                        {
+                            getBlogCategories.data?.data?.categories?.map((item: BlogCategoryType) => {
+                                return (
+                                    <div key={item.id} className='flex items-center'>
+                                        <CheckBoxComponent
+                                            checked={formik.values.categoryId === item.id}
+                                            onChange={(e) => formik.setFieldValue('categoryId', e.target.checked ? item.id : '')}
+                                        />
+                                        <div>{item.title}</div>
+                                    </div>
+                                )
+                            })
+                        }
+                    </div>
+                    <div className='mt-8'>
+                        <p className='text-sm'>{t('blog.featured_image')}</p>
+                        <div className='mt-4'>
+                            <UploadBoxDraggble
+                                label={t('blog.featured_image')}
+                                onChange={(files) => setFile(files[0])}
+                            />
+                        </div>
+                    </div>
+                    <p className='mt-6 text-sm'>{t('blog.tags')}</p>
+                    <div className='mt-6'>
+                        <Input
+                            className='-mt-4'
+                            placeholder={t('blog.enter_tags')}
+                            value={formik.values.tagInput || ''}
+                            onChange={(e) => {
+                                formik.setFieldValue('tagInput', e.target.value);
+                                formik.setFieldError('tags', undefined);
+                            }}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    const newTag = formik.values.tagInput?.trim();
+                                    if (newTag) {
+                                        if (formik.values.tags.includes(newTag)) {
+                                            formik.setFieldError('tags', t('blog.duplicate_tag_error'));
+                                        } else {
+                                            formik.setFieldValue('tags', [...formik.values.tags, newTag]);
+                                            formik.setFieldValue('tagInput', '');
+                                        }
+                                    }
+                                }
+                            }}
+                            error_text={typeof formik.errors.tags === 'string' ? formik.errors.tags : undefined}
+                        />
+                        <div className='flex flex-wrap gap-2 mt-2'>
+                            {formik.values.tags.map((tag, index) => (
+                                <div key={index} className='flex items-center gap-1 bg-gray-100 px-2 py-1 rounded-full'>
+                                    <span className='text-sm'>{tag}</span>
+                                    <button
+                                        type='button'
+                                        onClick={() => {
+                                            const newTags = formik.values.tags.filter((_, i) => i !== index);
+                                            formik.setFieldValue('tags', newTags);
+                                        }}
+                                        className='text-gray-500 text-xs hover:text-gray-700'
+                                    >
+                                        ×
+                                    </button>
+                                </div>
+                            ))}
+                        </div>
+                        <p className='text-description text-xs mt-2'>
+                            {t('blog.tag_hint')}
+                        </p>
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default UpdateBlog

src/pages/blog/hooks/useBlogData.ts

@@ -0,0 +1,43 @@
+import * as api from "../service/BlogService";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CreateBlogType } from "../types/BlogTypes";
+
+export const useGetBlogCategories = () => {
+  return useQuery({
+    queryKey: ["blog-categories"],
+    queryFn: api.getBlogCategories,
+  });
+};
+
+export const useGetBlogs = (search: string) => {
+  return useQuery({
+    queryKey: ["blogs", search],
+    queryFn: () => api.getBlogs(search),
+  });
+};
+
+export const useGetBlogDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["blog", id],
+    queryFn: () => api.getBlogDetail(id),
+  });
+};
+
+export const useCreateBlog = () => {
+  return useMutation({
+    mutationFn: api.createBlog,
+  });
+};
+
+export const useUpdateBlog = () => {
+  return useMutation({
+    mutationFn: (data: { id: string; params: CreateBlogType }) =>
+      api.updateBlog(data.id, data.params),
+  });
+};
+
+export const useDeleteBlog = () => {
+  return useMutation({
+    mutationFn: api.deleteBlog,
+  });
+};

src/pages/blog/service/BlogService.ts

@@ -0,0 +1,32 @@
+import axios from "../../../config/axios";
+import { CreateBlogType } from "../types/BlogTypes";
+
+export const getBlogCategories = async () => {
+  const { data } = await axios.get("/blogs/categories/list");
+  return data;
+};
+
+export const getBlogs = async (search: string) => {
+  const { data } = await axios.get(`/blogs/list?q=${search}`);
+  return data;
+};
+
+export const getBlogDetail = async (id: string) => {
+  const { data } = await axios.get(`/blogs/${id}`);
+  return data;
+};
+
+export const createBlog = async (params: CreateBlogType) => {
+  const { data } = await axios.post("/blogs", params);
+  return data;
+};
+
+export const updateBlog = async (id: string, params: CreateBlogType) => {
+  const { data } = await axios.patch(`/blogs/${id}`, params);
+  return data;
+};
+
+export const deleteBlog = async (id: string) => {
+  const { data } = await axios.delete(`/blogs/${id}`);
+  return data;
+};

src/pages/blog/types/BlogTypes.ts

@@ -0,0 +1,42 @@
+export type CreateBlogType = {
+  title: string;
+  previewContent: string;
+  content: string;
+  imageUrl: string;
+  metaTitle: string;
+  metaDescription: string;
+  tags: string[];
+  tagInput: string;
+  categoryId: string;
+  isActive: boolean;
+  isPinned: boolean;
+  slug: string;
+};
+
+export type BlogItemType = {
+  id: string;
+  createdAt: string;
+  author: {
+    id: string;
+    firstName: string;
+    lastName: string;
+  };
+  category: {
+    id: string;
+    title: string;
+    iconUrl: string;
+  };
+  imageUrl: string;
+  metaTitle: string;
+  metaDescription: string;
+  previewContent: string;
+  slug: string;
+  title: string;
+  viewCount: number;
+};
+
+export type BlogCategoryType = {
+  id: string;
+  title: string;
+  iconUrl: string;
+};

src/router/Main.tsx

@@ -58,6 +58,7 @@ import Reviews from '../pages/service/Reviews'
 import UpdateAds from '../pages/ads/Update'
 import UpdateService from '../pages/service/UpdateService'
 import UpdateCustomer from '../pages/customer/Update'
+import UpdateBlog from '../pages/blog/Update'
 
 const MainRouter: FC = () => {
 
@@ -98,6 +99,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.blog.list} element={<BlogList />} />
                             <Route path={Pages.blog.create} element={<CreateBlog />} />
                             <Route path={Pages.blog.category} element={<BlogCategory />} />
+                            <Route path={Pages.blog.detail + ':id'} element={<UpdateBlog />} />
                             <Route path={Pages.transactions} element={<TransactionList />} />
                             <Route path={Pages.receipts.index} element={<ReceiptsList />} />
                             <Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />