merge
This commit is contained in:
hamid zarghami
@@ -12,7 +12,6 @@ import { IApiErrorRepsonse } from './types/error.types'
|
||||
import MainRouter from './router/Main'
|
||||
import AuthRouter from './router/Auth'
|
||||
import { Pages } from './config/Pages'
|
||||
|
||||
i18next.init({
|
||||
interpolation: { escapeValue: false },
|
||||
lng: 'fa',
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import {Editor, EditorState} from 'draft-js';
|
||||
|
||||
function MyEditor() {
|
||||
const [editorState, setEditorState] = React.useState(
|
||||
EditorState.createEmpty()
|
||||
);
|
||||
|
||||
const editor = React.useRef(null);
|
||||
|
||||
function focusEditor() {
|
||||
editor.current.focus();
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
focusEditor()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div onClick={focusEditor}>
|
||||
<Editor
|
||||
ref={editor}
|
||||
editorState={editorState}
|
||||
onChange={editorState => setEditorState(editorState)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default MyEditor
|
||||
@@ -45,6 +45,7 @@ export const Pages = {
|
||||
},
|
||||
discount: {
|
||||
list: "/discounts/list",
|
||||
create: "/discounts/create"
|
||||
},
|
||||
referralCode: {
|
||||
list: "/referral-code/list",
|
||||
@@ -54,9 +55,12 @@ export const Pages = {
|
||||
},
|
||||
ads: {
|
||||
list: "/ads/list",
|
||||
create: "/ads/create"
|
||||
},
|
||||
blog: {
|
||||
list: "/blog/list",
|
||||
create: "/blog/create",
|
||||
category: "/blog/category"
|
||||
},
|
||||
messages: {
|
||||
list: "/messages/list",
|
||||
|
||||
@@ -142,3 +142,6 @@ tbody tr {
|
||||
.ql-editor {
|
||||
@apply !text-right;
|
||||
}
|
||||
.ql-toolbar:first-child {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -206,6 +206,92 @@
|
||||
},
|
||||
"status": "وضعیت",
|
||||
"title": "عنوان",
|
||||
"ads": {
|
||||
"ads": "تبلیغات",
|
||||
"upload": "آپلود",
|
||||
"deactive": "غیرفعال",
|
||||
"submit": "ثبت تبلیغ",
|
||||
"upload_picture": "تصویر نمایش تبلیغ",
|
||||
"to_upload_message": "تصویر مورد نظر را آپلود کنید",
|
||||
"new_ads": "افزودن تبلیغ",
|
||||
"location": "جایگاه",
|
||||
"startDate": "تاریخ شروع نمایش",
|
||||
"endDate": "تاریخ پایان نمایش",
|
||||
"search": "جستجو",
|
||||
"number": "شماره",
|
||||
"title": "عنوان",
|
||||
"date": "تاریخ",
|
||||
"status": "وضعیت",
|
||||
"enter_your_title": "عنوان تبلیغ را وارد کنید",
|
||||
"link": "لینک",
|
||||
"enter_your_link": "لینک تبلیغ را وارد کنید"
|
||||
},
|
||||
"discount": {
|
||||
"list": "لیست تخفیفات",
|
||||
"type": "نوع تخفیف",
|
||||
"price": "مبلغ تخفیف",
|
||||
"title": "عنوان کد",
|
||||
"code": "کد تخفیف",
|
||||
"enter_discount_description": "عنوان کد تخفیف را وارد کنید",
|
||||
"add_new_discount": "افزودن تخفیف",
|
||||
"auto_generate_code": "ساخت کد",
|
||||
"price_or_percent": "درصد / مبلغ تخفیف",
|
||||
"enter_price_or_percent": "درصد / مبلغ تخفیف را وارد کنید",
|
||||
"service": "سرویس",
|
||||
"status": "وضعیت",
|
||||
"number": "شماره",
|
||||
"startDate": "تاریخ شروع",
|
||||
"endDate": "تاریخ پایان",
|
||||
"service_status": "وضعیت سرویس",
|
||||
"availabe_service": "سرویس هایی که شامل تخفیف میشوند",
|
||||
"new_discount": "کد تخفیف جدید",
|
||||
"submit": "ثبت تخفیف",
|
||||
"discount_code": "کد تخفیف",
|
||||
"direct_discount": "تخفیف مستقیم",
|
||||
"fixed_amount": "مبلغ ثابت",
|
||||
"percent": "درصد"
|
||||
},
|
||||
"blog": {
|
||||
"blog": "بلاگ",
|
||||
"category": "دسته بندی",
|
||||
"new_blog": "افزودن بلاگ",
|
||||
"blog_title": "عنوان بلاگ",
|
||||
"blog_Summary": "خلاصه بلاگ",
|
||||
"content": "محتوا",
|
||||
"blog_status": "وضعیت بلاگ",
|
||||
"featured_image": "تصویر شاخص",
|
||||
"tags": "برچسب ها",
|
||||
"tag_hint": "جدا کردن با کاما یا کلید Enter ",
|
||||
"shareDate": "تاریخ انتشار",
|
||||
"enter_your_title": "عنوان بلاگ را وارد کنید",
|
||||
"add_blog": "افزودن بلاگ",
|
||||
"blog_category": "دسته بندی بلاگ",
|
||||
"add_category": "اضافه کردن دسته بندی",
|
||||
"category_status": "وضعیت دسته بندی",
|
||||
"category_title": "عنوان دسته بندی",
|
||||
"parent_category": "دسته بندی مادر",
|
||||
"price": "مبلغ تخفیف",
|
||||
"title": "عنوان کد",
|
||||
"code": "کد تخفیف",
|
||||
"enter_discount_description": "عنوان کد تخفیف را وارد کنید",
|
||||
"add_new_discount": "افزودن تخفیف",
|
||||
"auto_generate_code": "ساخت کد",
|
||||
"price_or_percent": "درصد / مبلغ تخفیف",
|
||||
"enter_price_or_percent": "درصد / مبلغ تخفیف را وارد کنید",
|
||||
"service": "سرویس",
|
||||
"status": "وضعیت",
|
||||
"number": "شماره",
|
||||
"startDate": "تاریخ شروع",
|
||||
"endDate": "تاریخ پایان",
|
||||
"service_status": "وضعیت سرویس",
|
||||
"availabe_service": "سرویس هایی که شامل تخفیف میشوند",
|
||||
"new_discount": "کد تخفیف جدید",
|
||||
"submit": "ثبت بلاگ",
|
||||
"discount_code": "کد تخفیف",
|
||||
"direct_discount": "تخفیف مستقیم",
|
||||
"fixed_amount": "مبلغ ثابت",
|
||||
"percent": "درصد"
|
||||
},
|
||||
"receip": {
|
||||
"receips": "صورتحساب ها",
|
||||
"receip_list": "لیست صورتحساب ها",
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add, Eye } 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'
|
||||
const AddList: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
return (
|
||||
<div className='mt-4 min-h-[500px]'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('ads.ads')}
|
||||
</div>
|
||||
|
||||
<Link to={Pages.ads.create}>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Add size={20} color='white' />
|
||||
<div>
|
||||
{t('ads.new_ads')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className='mt-4'>
|
||||
<div className='flex flex-col xl:flex-row justify-between items-center xl:items-end'>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='w-[200px]'>
|
||||
<DatePickerComponent
|
||||
label={t('ads.date')}
|
||||
onChange={() => { }}
|
||||
placeholder=''
|
||||
defaulValue='1400-01-01'
|
||||
/>
|
||||
</div>
|
||||
<div className='w-[200px]'>
|
||||
<Select
|
||||
label={t('ads.status')}
|
||||
items={[
|
||||
{
|
||||
label: 'فعال',
|
||||
value: 'active'
|
||||
}
|
||||
]}
|
||||
className='bg-white border'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 xl:mt-0 max-w-[420px] xl:w-[300px] w-full'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('ads.search')}
|
||||
className='bg-white w-full'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('ads.number')} />
|
||||
<Td text={t('ads.title')} />
|
||||
<Td text={t('ads.location')} />
|
||||
<Td text={t('ads.startDate')} />
|
||||
<Td text={t('ads.endDate')} />
|
||||
<Td text={t('ads.status')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text={t('ads.number')} />
|
||||
<Td text={t('ads.title')} />
|
||||
<Td text={t('ads.location')} />
|
||||
<Td text={t('ads.startDate')} />
|
||||
<Td text={t('ads.endDate')} />
|
||||
<Td text={t('')}>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
</tr>
|
||||
<tr className='tr'>
|
||||
<Td text={t('ads.number')} />
|
||||
<Td text={t('ads.title')} />
|
||||
<Td text={t('ads.location')} />
|
||||
<Td text={t('ads.startDate')} />
|
||||
<Td text={t('ads.endDate')} />
|
||||
<Td text={t('')}>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.discount + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddList
|
||||
@@ -0,0 +1,108 @@
|
||||
import { FC } 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, Link2 } from 'iconsax-react'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
import ImageUploader from './components/ImageUploader'
|
||||
const CreateAd: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('ads.new_ads')}
|
||||
</div>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('ads.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('ads.title')}
|
||||
placeholder={t('ads.enter_your_title')}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<DatePickerComponent
|
||||
label={t('ads.startDate')}
|
||||
onChange={() => { }}
|
||||
placeholder=''
|
||||
defaulValue='1400-01-01'
|
||||
/>
|
||||
<DatePickerComponent
|
||||
label={t('ads.endDate')}
|
||||
onChange={() => { }}
|
||||
placeholder=''
|
||||
defaulValue='1400-01-01'
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6 relative'>
|
||||
<Input
|
||||
label={t('ads.link')}
|
||||
placeholder={t('ads.enter_your_link')}
|
||||
/>
|
||||
<Link2 size={20} color='blue' className='absolute left-4 bottom-[10px]' />
|
||||
</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>
|
||||
وضعیت تبلیغ
|
||||
</p>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<div>
|
||||
{t('ads.deactive')}
|
||||
</div>
|
||||
<SwitchComponent
|
||||
active={false}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className='mt-6 text-sm'>{t('ads.location')}</p>
|
||||
<div className='p-2 border border-[##D0D0D0] rounded-lg mt-1'>
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ImageUploader />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateAd
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
import { FC, useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Image, DocumentUpload } from 'iconsax-react'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
|
||||
|
||||
|
||||
const ImageUploader: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
const [file, setFile] = useState<File>()
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
setFile(acceptedFiles[0])
|
||||
}, [])
|
||||
const { getRootProps, getInputProps } = useDropzone({ onDrop })
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className='mt-6 text-sm'>{t('ads.upload_picture')}</p>
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className='py-12 border border-dashed border-[#8C90A3] rounded-lg mt-2 flex items-center justify-center'>
|
||||
<div className='flex flex-col items-center space-y-4'>
|
||||
<Image size={45} color='#8C90A3' variant="Bold" className='border-[3px] border-[#8C90A3] rounded-md'
|
||||
/>
|
||||
<p className='text-sm text-[#8C90A3]'>
|
||||
{
|
||||
file ?
|
||||
file.name
|
||||
:
|
||||
t('ads.to_upload_message')
|
||||
|
||||
}
|
||||
</p>
|
||||
<div className='flex gap-1'>
|
||||
<DocumentUpload
|
||||
size={20}
|
||||
color='black'
|
||||
/>
|
||||
<button className='text-sm'>
|
||||
<input {...getInputProps()} />
|
||||
{t('ads.upload')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default ImageUploader
|
||||
@@ -0,0 +1,147 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Select from '../../components/Select'
|
||||
import Input from '../../components/Input'
|
||||
import Td from '../../components/Td'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import { TickSquare, More, TickCircle } from 'iconsax-react'
|
||||
import "quill/dist/quill.snow.css";
|
||||
import Button from '../../components/Button'
|
||||
const BlogCategory: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-start items-center'>
|
||||
<div>
|
||||
{t('blog.blog_category')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-6 xl:mt-8 mt-4'>
|
||||
<div className='flex-1'>
|
||||
<div className='flex items-end w-full justify-between'>
|
||||
<div className='w-[200px]'>
|
||||
<Select
|
||||
items={[
|
||||
{
|
||||
label: 'تست',
|
||||
value: 'active'
|
||||
}
|
||||
]}
|
||||
className='bg-white border'
|
||||
/>
|
||||
</div>
|
||||
<div className='xl:w-[300px] w-full'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('ads.search')}
|
||||
className='bg-white w-full'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white min-h-[calc(100vh-245px)] mt-4 rounded-3xl'>
|
||||
<div className='relative overflow-x-auto rounded-3xl w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<td className='w-[100px]'>
|
||||
|
||||
</td>
|
||||
<Td text={t('blog.number')} />
|
||||
<Td text={t('blog.blog_title')} />
|
||||
<Td text={t('blog.blog_Summary')} />
|
||||
<Td text={t('blog.category')} />
|
||||
<Td text={t('blog.shareDate')} />
|
||||
<Td text={t('blog.status')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<td>
|
||||
<div className='flex justify-center'>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
</td>
|
||||
<Td text={t('blog.number')} />
|
||||
<Td text={t('blog.blog_title')} />
|
||||
<Td text={t('blog.blog_Summary')} />
|
||||
<Td text={t('blog.category')} />
|
||||
<Td text={t('blog.shareDate')} />
|
||||
<Td text={t('')}>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<More size={20} color='black' className='rotate-90' />
|
||||
</Td>
|
||||
</tr>
|
||||
<tr className='tr'>
|
||||
<td>
|
||||
<div className='flex justify-center'>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
</td>
|
||||
<Td text={t('blog.number')} />
|
||||
<Td text={t('blog.blog_title')} />
|
||||
<Td text={t('blog.blog_Summary')} />
|
||||
<Td text={t('blog.category')} />
|
||||
<Td text={t('blog.shareDate')} />
|
||||
<Td text={t('')}>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<More size={20} color='black' className='rotate-90' />
|
||||
</Td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='relative bg-white min-h-[calc(100vh-185px)] w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
|
||||
<p className='text-md'>{t('blog.add_category')}</p>
|
||||
<div className='text-sm flex items-center justify-between mt-4'>
|
||||
<p>
|
||||
{t('blog.category_status')}
|
||||
</p>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<div>
|
||||
{t('ads.deactive')}
|
||||
</div>
|
||||
<SwitchComponent
|
||||
active={false}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className='mt-6 text-sm'>{t('blog.category_title')}</p>
|
||||
<div className='mt-6'>
|
||||
<Input className='-mt-4' />
|
||||
</div>
|
||||
<p className='mt-6 text-sm'>{t('blog.parent_category')}</p>
|
||||
<div className='mt-6'>
|
||||
<Input className='-mt-4' />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className='w-[172px] absolute bottom-4 left-4'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('blog.submit')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default BlogCategory
|
||||
@@ -0,0 +1,147 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add, Eye } 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'
|
||||
const BlogList: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
return (
|
||||
<div className='mt-4 min-h-[500px]'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('blog.blog')}
|
||||
</div>
|
||||
|
||||
<Link to={Pages.blog.create}>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Add size={20} color='white' />
|
||||
<div>
|
||||
{t('blog.new_blog')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<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='w-[400px] xl:w-[200px]'>
|
||||
<Select
|
||||
label={t('blog.category')}
|
||||
items={[
|
||||
{
|
||||
label: 'تست',
|
||||
value: 'active'
|
||||
}
|
||||
]}
|
||||
className='bg-white border'
|
||||
/>
|
||||
</div>
|
||||
<div className='w-[400px] xl:w-[200px]'>
|
||||
<Select
|
||||
label={t('ads.status')}
|
||||
items={[
|
||||
{
|
||||
label: 'فعال',
|
||||
value: 'active'
|
||||
}
|
||||
]}
|
||||
className='bg-white border'
|
||||
/>
|
||||
</div>
|
||||
<div className='w-[400px] xl:w-[200px]'>
|
||||
<DatePickerComponent
|
||||
label={t('ads.date')}
|
||||
onChange={() => { }}
|
||||
placeholder=''
|
||||
defaulValue='1400-01-01'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='w-[400px] mt-8 xl:mt-0 xl:w-[300px]'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('ads.search')}
|
||||
className='bg-white w-full'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('blog.number')} />
|
||||
<Td text={t('blog.blog_title')} />
|
||||
<Td text={t('blog.blog_Summary')} />
|
||||
<Td text={t('blog.category')} />
|
||||
<Td text={t('blog.shareDate')} />
|
||||
<Td text={t('blog.status')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text={t('blog.number')} />
|
||||
<Td text={t('blog.blog_title')} />
|
||||
<Td text={t('blog.blog_Summary')} />
|
||||
<Td text={t('blog.category')} />
|
||||
<Td text={t('blog.shareDate')} />
|
||||
<Td text={t('')}>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
</tr>
|
||||
<tr className='tr'>
|
||||
<Td text={t('blog.number')} />
|
||||
<Td text={t('blog.blog_title')} />
|
||||
<Td text={t('blog.blog_Summary')} />
|
||||
<Td text={t('blog.category')} />
|
||||
<Td text={t('blog.shareDate')} />
|
||||
<Td text={t('')}>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.discount + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogList
|
||||
@@ -0,0 +1,118 @@
|
||||
|
||||
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 ImageUploader from './components/ImageUploader'
|
||||
import "quill/dist/quill.snow.css";
|
||||
import Quill from 'quill';
|
||||
const CreateBlog: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
useEffect(() => {
|
||||
new Quill('#editor', {
|
||||
theme: 'snow',
|
||||
});
|
||||
new Quill('#editor2', {
|
||||
theme: 'snow',
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('blog.add_blog')}
|
||||
</div>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
>
|
||||
<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')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className='mt-6 text-sm'>{t('blog.blog_Summary')}</p>
|
||||
<div className='mt-1'>
|
||||
<div className='min-h-[120px]' id='editor'></div>
|
||||
</div>
|
||||
|
||||
<p className='mt-6 text-sm'>{t('blog.content')}</p>
|
||||
<div className='mt-1'>
|
||||
<div className='min-h-[200px]' id='editor2'></div>
|
||||
</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'>
|
||||
<div>
|
||||
{t('ads.deactive')}
|
||||
</div>
|
||||
<SwitchComponent
|
||||
active={false}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</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>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<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' />
|
||||
<p className='text-description text-xs mt-2'>
|
||||
{t('blog.tag_hint')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateBlog
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
import { FC, useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Image, DocumentUpload } from 'iconsax-react'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
|
||||
|
||||
|
||||
const ImageUploader: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
const [file, setFile] = useState<File>()
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
setFile(acceptedFiles[0])
|
||||
}, [])
|
||||
const { getRootProps, getInputProps } = useDropzone({ onDrop })
|
||||
|
||||
return(
|
||||
<>
|
||||
<p className='mt-6 text-sm'>{t('blog.featured_image')}</p>
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className='py-12 border border-dashed border-[#8C90A3] rounded-lg mt-2 flex items-center justify-center'>
|
||||
<div className='flex flex-col items-center space-y-4'>
|
||||
<Image size={45} color='#8C90A3' variant="Bold" className='border-[3px] border-[#8C90A3] rounded-md'
|
||||
/>
|
||||
<p className='text-sm text-[#8C90A3]'>
|
||||
{
|
||||
file ?
|
||||
file.name
|
||||
:
|
||||
t('ads.to_upload_message')
|
||||
|
||||
}
|
||||
</p>
|
||||
<div className='flex gap-1'>
|
||||
<DocumentUpload
|
||||
size={20}
|
||||
color='black'
|
||||
/>
|
||||
<button className='text-sm'>
|
||||
<input {...getInputProps()} />
|
||||
{t('ads.upload')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default ImageUploader
|
||||
@@ -0,0 +1,156 @@
|
||||
import { FC } 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, Refresh } from 'iconsax-react'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
import RadioGroup from '../../components/RadioGroup'
|
||||
const CreateDiscount: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('discount.new_discount')}
|
||||
</div>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('discount.submit')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className='flex 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'>
|
||||
{t('discount.type')}
|
||||
<div className='rowTwoInput mt-2'>
|
||||
<RadioGroup
|
||||
items={[
|
||||
{
|
||||
label: t('discount.direct_discount'),
|
||||
value: '3month'
|
||||
},
|
||||
{
|
||||
label: t('discount.discount_code'),
|
||||
value: 'year'
|
||||
}
|
||||
]}
|
||||
onChange={() => ''}
|
||||
selected={''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<Input
|
||||
label={t('discount.title')}
|
||||
placeholder={t('discount.enter_discount_description')}
|
||||
/>
|
||||
<div className='w-full sm:mt-7 flex flex-col xl:flex-row items-center'>
|
||||
<button className='text-xs border h-[39px] xl:h-full w-full xl:w-[142px] border-black rounded-xl flex justify-center items-center gap-2'>
|
||||
<Refresh
|
||||
size={18} color='black'
|
||||
/>
|
||||
<p>
|
||||
{t('discount.auto_generate_code')}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<div className='w-full'>
|
||||
{t('discount.price')}
|
||||
<div className='rowTwoInput mt-2'>
|
||||
<RadioGroup
|
||||
items={[
|
||||
{
|
||||
label: t('discount.fixed_amount'),
|
||||
value: '3month'
|
||||
},
|
||||
{
|
||||
label: t('discount.percent'),
|
||||
value: 'year'
|
||||
}
|
||||
]}
|
||||
onChange={() => ''}
|
||||
selected={''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Input
|
||||
label={t('discount.price_or_percent')}
|
||||
placeholder={t('discount.enter_price_or_percent')}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<DatePickerComponent
|
||||
label={t('discount.startDate')}
|
||||
onChange={() => { }}
|
||||
placeholder=''
|
||||
defaulValue='1400-01-01'
|
||||
/>
|
||||
<DatePickerComponent
|
||||
label={t('discount.endDate')}
|
||||
onChange={() => { }}
|
||||
placeholder=''
|
||||
defaulValue='1400-01-01'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='min-h-[calc(100vh-201px)] bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
|
||||
<div className='text-sm flex items-center justify-between'>
|
||||
<p>
|
||||
{t('discount.service_status')}
|
||||
</p>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<div>
|
||||
{t('ads.deactive')}
|
||||
</div>
|
||||
<SwitchComponent
|
||||
active={false}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className='mt-6 text-sm'>{t('discount.availabe_service')}</p>
|
||||
<div className='p-2 border border-[##D0D0D0] rounded-lg mt-2'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('header.search')}
|
||||
/>
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default CreateDiscount
|
||||
@@ -0,0 +1,116 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add, Eye } 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 Input from '../../components/Input'
|
||||
const DiscountList: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
return (
|
||||
<div className='mt-4 min-h-[500px]'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('discount.list')}
|
||||
</div>
|
||||
|
||||
<Link to={Pages.discount.create}>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Add size={20} color='white' />
|
||||
<div>
|
||||
{t('discount.add_new_discount')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-end items-center'>
|
||||
|
||||
<div className='xl:w-[300px] w-full'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('ads.search')}
|
||||
className='bg-white w-full'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('discount.number')} />
|
||||
<Td text={t('discount.type')} />
|
||||
<Td text={t('discount.code')} />
|
||||
<Td text={t('discount.startDate')} />
|
||||
<Td text={t('discount.endDate')} />
|
||||
<Td text={t('discount.price_or_percent')} />
|
||||
<Td text={t('discount.service')} />
|
||||
<Td text={t('discount.status')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text={t('discount.number')} />
|
||||
<Td text={t('discount.type')} />
|
||||
<Td text={t('discount.code')} />
|
||||
<Td text={t('discount.startDate')} />
|
||||
<Td text={t('discount.endDate')} />
|
||||
<Td text={t('discount.price_or_percent')} />
|
||||
<Td text={t('discount.service')} />
|
||||
<Td text={t('')}>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
</tr>
|
||||
<tr className='tr'>
|
||||
<Td text={t('discount.number')} />
|
||||
<Td text={t('discount.type')} />
|
||||
<Td text={t('discount.code')} />
|
||||
<Td text={t('discount.startDate')} />
|
||||
<Td text={t('discount.endDate')} />
|
||||
<Td text={t('discount.price_or_percent')} />
|
||||
<Td text={t('discount.service')} />
|
||||
<Td text={t('')}>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.discount + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DiscountList
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
import { FC, useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Image, DocumentUpload } from 'iconsax-react'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
|
||||
|
||||
|
||||
const ImageUploader: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
const [file, setFile] = useState<File>()
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
setFile(acceptedFiles[0])
|
||||
}, [])
|
||||
const { getRootProps, getInputProps } = useDropzone({ onDrop })
|
||||
|
||||
return(
|
||||
<>
|
||||
<p className='mt-6 text-sm'>{t('ads.upload_picture')}</p>
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className='py-12 border border-dashed border-[#8C90A3] rounded-lg mt-2 flex items-center justify-center'>
|
||||
<div className='flex flex-col items-center space-y-4'>
|
||||
<Image size={45} color='#8C90A3' variant="Bold" className='border-[3px] border-[#8C90A3] rounded-md'
|
||||
/>
|
||||
<p className='text-sm text-[#8C90A3]'>
|
||||
{
|
||||
file ?
|
||||
file.name
|
||||
:
|
||||
t('ads.to_upload_message')
|
||||
|
||||
}
|
||||
</p>
|
||||
<div className='flex gap-1'>
|
||||
<DocumentUpload
|
||||
size={20}
|
||||
color='black'
|
||||
/>
|
||||
<button className='text-sm'>
|
||||
<input {...getInputProps()} />
|
||||
{t('ads.upload')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default ImageUploader
|
||||
@@ -5,6 +5,13 @@ import { Route, Routes } from 'react-router-dom'
|
||||
import { Pages } from '../config/Pages'
|
||||
import Home from '../pages/home/Home'
|
||||
import MyServices from '../pages/service/MyServices'
|
||||
import DiscountsList from '../pages/discounts/DiscountsList'
|
||||
import CreateDiscount from '../pages/discounts/CreateDiscount'
|
||||
import AdsList from '../pages/ads/AdsList'
|
||||
import BlogList from '../pages/blog/BlogList'
|
||||
import CreateBlog from '../pages/blog/CreateBlog'
|
||||
import BlogCategory from '../pages/blog/BlogCategory'
|
||||
import CreateAds from '../pages/ads/CreateAds'
|
||||
import TicketList from '../pages/ticket/TicketList'
|
||||
import CreateTicket from '../pages/ticket/CreateTicket'
|
||||
import TicketDetail from '../pages/ticket/Detail'
|
||||
@@ -59,6 +66,13 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.ticket.create} element={<CreateTicket />} />
|
||||
<Route path={Pages.ticket.category} element={<TicketCategory />} />
|
||||
<Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
|
||||
<Route path={Pages.ads.list} element={<AdsList />} />
|
||||
<Route path={Pages.ads.create} element={<CreateAds />} />
|
||||
<Route path={Pages.discount.list} element={<DiscountsList />} />
|
||||
<Route path={Pages.discount.create} element={<CreateDiscount />} />
|
||||
<Route path={Pages.blog.list} element={<BlogList />} />
|
||||
<Route path={Pages.blog.create} element={<CreateBlog />} />
|
||||
<Route path={Pages.blog.category} element={<BlogCategory />} />
|
||||
<Route path={Pages.transactions} element={<TransactionList />} />
|
||||
<Route path={Pages.receipts.index} element={<ReceiptsList />} />
|
||||
<Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
|
||||
|
||||
Reference in New Issue
Block a user