danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create support plan

Browse Source
This commit is contained in:
hamid zarghami
2025-05-05 12:27:23 +03:30
parent a72e8a5b9d
commit fbb7f409ab
12 changed files with 370 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2 -2
View File
@@ -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 = 'http://192.168.1.117:4000'
# VITE_BASE_URL = 'https://api.danakcorp.com'
VITE_BASE_URL = 'http://192.168.1.117:4000'
src/config/Pages.ts
+4
View File
@@ -106,4 +106,8 @@ export const Pages = {
payment: {
list: "/payments/list",
},
support: {
create: "/support/create",
list: "/support/list",
},
};
src/langs/fa.json
+15
View File
@@ -763,5 +763,20 @@
"accept_confrim": "آیا از تایید این پرداخت مطمئن هستید؟",
"reject_comment_error": "لطفا دلیل رد پرداخت را وارد کنید",
"receip_image": "تصویر فیش واریزی"
},
"support": {
"support_plan": "پلن پشتیبانی",
"support_plan_list": "لیست پلن پشتیبانی",
"support_plan_create": "ایجاد پلن پشتیبانی",
"support_plan_edit": "ویرایش پلن پشتیبانی",
"learning_docs": "راهنما و مستندات آموزشی",
"ticket_support": "ارسال تیکت",
"response_time": "زمان پاسخگویی به تیکت",
"phone_support": "پاسخگویی تلفنی",
"backup_version": "نسخه بکاپ",
"technical_expert_access": "دسترسی به متخصصین فنی",
"on_site_support": "پشتیبانی در محل",
"on_site_training": "آموزش در محل",
"ticket_limit": "ظرفیت ارسال تیکت"
}
}
src/pages/support/Create.tsx
+212
View File
@@ -0,0 +1,212 @@
import { FC, useState } from 'react'
import Input from '../../components/Input'
import SwitchComponent from '../../components/Switch'
import Textarea from '../../components/Textarea'
import Button from '../../components/Button'
import { SupportPlanFeatureKey } from './enum/SupportEnum'
import { useTranslation } from 'react-i18next'
import PlanItem from './components/PlanItem'
import { useFormik } from 'formik'
import { CreatePlanType } from './types/SupportTypes'
import * as Yup from 'yup'
import Select from '../../components/Select'
import { useCreateSupport } from './hooks/useSupportData'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
interface PlanFeature {
featureKey: string;
featureValue: string | boolean;
featureType: 'boolean' | 'text';
isEnabled: boolean;
}
const CreatePlan: FC = () => {
const navigate = useNavigate()
const { t } = useTranslation('global')
const createSupport = useCreateSupport()
const [features, setFeatures] = useState<PlanFeature[]>(
Object.values(SupportPlanFeatureKey).map(key => ({
featureKey: key,
featureValue: true,
featureType: 'boolean',
isEnabled: true
}))
)
const handleFeatureChange = (id: string, value: string | boolean, isEnabled: boolean) => {
setFeatures(prevFeatures =>
prevFeatures.map(feature =>
feature.featureKey === id ? { ...feature, featureValue: value, isEnabled } : feature
)
)
}
const handleFeatureTypeChange = (id: string, type: 'boolean' | 'text') => {
setFeatures(prevFeatures =>
prevFeatures.map(feature =>
feature.featureKey === id ? {
...feature,
featureType: type,
featureValue: type === 'boolean' ? true : '',
isEnabled: type === 'boolean' ? true : false
} : feature
)
)
}
const prepareFeaturesForSubmission = (features: PlanFeature[]) => {
return features.map(feature => {
if (feature.featureType === 'boolean') {
return {
featureKey: feature.featureKey,
featureValue: feature.isEnabled,
featureType: 'boolean',
}
} else {
return {
featureKey: feature.featureKey,
featureValue: feature.featureValue as string,
featureType: 'string',
}
}
})
}
const formik = useFormik<CreatePlanType>({
initialValues: {
name: '',
description: '',
price: 0,
duration: 0,
isActive: true,
features: [],
},
validationSchema: Yup.object({
name: Yup.string().required('نام پلن الزامی است'),
description: Yup.string().required('توضیحات پلن الزامی است'),
price: Yup.number().required('قیمت پلن الزامی است'),
duration: Yup.number().required('مدت پلن الزامی است'),
}),
onSubmit: (values) => {
values.price = Number(values.price)
values.duration = Number(values.duration)
const preparedFeatures = prepareFeaturesForSubmission(features)
const planData: CreatePlanType = {
...values,
features: preparedFeatures.map(feature => ({
featureKey: feature.featureKey,
featureValue: String(feature.featureValue),
featureType: feature.featureType as "string" | "boolean"
}))
}
createSupport.mutate(planData, {
onSuccess: () => {
toast.success('پلن با موفقیت ساخته شد')
navigate(Pages.support.list)
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error.message[0])
}
})
},
})
return (
<div className='mt-4'>
<div className='text-lg font-semibold mb-6'>ساخت پلن</div>
<div className='bg-white rounded-lg p-6 shadow-sm mb-6'>
<div className='text-base font-medium mb-4'>اطلاعات اصلی پلن</div>
<div className='space-y-6'>
<div className='rowTwoInput'>
<Input
label='نام پلن'
placeholder='نام پلن'
{...formik.getFieldProps('name')}
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : undefined}
/>
</div>
<div className='rowTwoInput'>
<Input
label='قیمت پلن'
placeholder='قیمت پلن'
{...formik.getFieldProps('price')}
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : undefined}
/>
<Input
label='مدت پلن'
placeholder='مدت پلن'
{...formik.getFieldProps('duration')}
error_text={formik.touched.duration && formik.errors.duration ? formik.errors.duration : undefined}
/>
</div>
<div className='rowTwoInput'>
<Textarea
label='توضیحات پلن'
placeholder='توضیحات پلن'
{...formik.getFieldProps('description')}
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : undefined}
/>
</div>
<div className='rowTwoInput'>
<SwitchComponent
active={formik.values.isActive}
onChange={(active: boolean) => formik.setFieldValue('isActive', active)}
label='فعال'
/>
</div>
</div>
</div>
<div className='bg-white rounded-lg p-6 shadow-sm'>
<div className='text-base font-medium mb-4'>ویژگی‌های پلن</div>
<div className='space-y-8'>
{features.map((feature) => (
<div key={feature.featureKey} className='border-b border-gray-100 pb-6 last:border-0'>
<div className='flex items-center gap-4 mb-4'>
<div className='w-48'>
<Select
label='نوع مقدار'
items={[
{ label: 'بله/خیر', value: 'boolean' },
{ label: 'مقدار', value: 'text' }
]}
value={feature.featureType}
onChange={(e) => handleFeatureTypeChange(feature.featureKey, e.target.value as 'boolean' | 'text')}
/>
</div>
</div>
<PlanItem
id={feature.featureKey}
label={t(`support.${feature.featureKey}`)}
value={feature.featureValue}
checked={feature.isEnabled}
featureType={feature.featureType}
onChange={handleFeatureChange}
/>
</div>
))}
</div>
</div>
<div className='mt-6 flex justify-end'>
<Button
label='ثبت پلن'
onClick={() => formik.handleSubmit()}
disabled={!formik.isValid || !formik.dirty}
className='w-fit px-7'
isLoading={createSupport.isPending}
/>
</div>
</div>
)
}
export default CreatePlan
src/pages/support/List.tsx
+9
View File
@@ -0,0 +1,9 @@
import { FC } from 'react'
const SupportList: FC = () => {
return (
<div>List</div>
)
}
export default SupportList
src/pages/support/components/PlanItem.tsx
+50
View File
@@ -0,0 +1,50 @@
import { ChangeEvent, FC } from 'react'
import Input from '../../../components/Input'
import CheckBoxComponent from '../../../components/CheckBoxComponent'
interface Props {
id: string
label: string
value: string | boolean
checked: boolean
featureType: 'boolean' | 'text'
onChange: (id: string, value: string | boolean, checked: boolean) => void
}
const PlanItem: FC<Props> = ({ id, label, value, checked, featureType, onChange }) => {
const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
const newChecked = e.target.checked
onChange(id, value, newChecked)
}
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
onChange(id, e.target.value, checked)
}
return (
<div key={id} className='mt-4 text-sm flex gap-4 items-center'>
<div className='flex-1 whitespace-nowrap'>
{label}
</div>
{featureType === 'text' && (
<div className='flex-1'>
<Input
placeholder='مقدار'
value={value as string}
onChange={handleInputChange}
/>
</div>
)}
{featureType === 'boolean' && (
<CheckBoxComponent
checked={checked}
onChange={handleCheckboxChange}
/>
)}
</div>
)
}
export default PlanItem
src/pages/support/enum/SupportEnum.ts
+11
View File
@@ -0,0 +1,11 @@
export enum SupportPlanFeatureKey {
LEARNING_DOCS = "learning_docs", // راهنما و مستندات آموزشی
TICKET_SUPPORT = "ticket_support", // ارسال تیکت
RESPONSE_TIME = "response_time", // زمان پاسخگویی به تیکت
PHONE_SUPPORT = "phone_support", // پاسخگویی تلفنی
BACKUP_VERSION = "backup_version", // نسخه بکاپ
TECHNICAL_EXPERT_ACCESS = "technical_expert_access", // دسترسی به متخصصین فنی
ON_SITE_SUPPORT = "on_site_support", // پشتیبانی در محل
ON_SITE_TRAINING = "on_site_training", // آموزش در محل
TICKET_LIMIT = "ticket_limit", // ظرفیت ارسال تیکت
}
src/pages/support/hooks/useSupportData.ts
+23
View File
@@ -0,0 +1,23 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import * as api from "../service/SupportService";
import { CreatePlanType } from "../types/SupportTypes";
export const useCreateSupport = () => {
return useMutation({
mutationFn: (variables: CreatePlanType) => api.createPlan(variables),
});
};
export const useGetPlans = () => {
return useQuery({
queryKey: ["plans"],
queryFn: () => api.getPlans(),
});
};
export const useGetPlanById = (id: string) => {
return useQuery({
queryKey: ["plan", id],
queryFn: () => api.getPlanById(id),
});
};
src/pages/support/service/SupportService.ts
+17
View File
@@ -0,0 +1,17 @@
import axios from "../../../config/axios";
import { CreatePlanType } from "../types/SupportTypes";
export const createPlan = async (plan: CreatePlanType) => {
const { data } = await axios.post("/support-plans", plan);
return data;
};
export const getPlans = async () => {
const { data } = await axios.get("/support-plans/list");
return data;
};
export const getPlanById = async (id: string) => {
const { data } = await axios.get(`/support-plans/${id}`);
return data;
};
src/pages/support/types/SupportTypes.ts
+12
View File
@@ -0,0 +1,12 @@
export type CreatePlanType = {
name: string;
description: string;
price: number;
duration: number;
isActive: boolean;
features: {
featureKey: string;
featureValue: string | boolean;
featureType: "boolean" | "string";
}[];
};
src/router/Main.tsx
+4
View File
@@ -65,6 +65,8 @@ import CreateSlider from '../pages/slider/Create'
import SliderList from '../pages/slider/List'
import UpdateSlider from '../pages/slider/Update'
import Comments from '../pages/blog/Comments'
import CreatePlan from '../pages/support/Create'
import SupportList from '../pages/support/List'
const MainRouter: FC = () => {
const { hasSubMenu } = useSharedStore()
@@ -141,6 +143,8 @@ const MainRouter: FC = () => {
<Route path={Pages.sliders.list} element={<SliderList />} />
<Route path={Pages.sliders.detail + ':id'} element={<UpdateSlider />} />
<Route path={Pages.blog.comments} element={<Comments />} />
<Route path={Pages.support.create} element={<CreatePlan />} />
<Route path={Pages.support.list} element={<SupportList />} />
</Routes>
</div>
</div>
src/shared/SideBar.tsx
+11 -1
View File
@@ -2,7 +2,7 @@ import { FC, useEffect } from 'react'
import LogoImage from '../assets/images/logo.svg'
import LogoSmall from '../assets/images/logo-small.svg'
import { useTranslation } from 'react-i18next'
import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
import SideBarItem from './SideBarItem'
import { useLocation } from 'react-router-dom'
import { Pages } from '../config/Pages'
@@ -93,6 +93,15 @@ const SideBar: FC = () => {
name='services'
activeName='services'
/>
<SideBarItem
icon={<Headphone variant={isActive('support') ? 'Bold' : 'Outline'} color={isActive('support') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.support')}
isActive={isActive('support')}
link={Pages.support.list}
activeName='support_plan'
/>
<SideBarItem
icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.customers')}
@@ -165,6 +174,7 @@ const SideBar: FC = () => {
link={Pages.sliders.list}
activeName='blogs'
/>
</div>
{