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

profile ,footer , ...

Browse Source
This commit is contained in:
hamid zarghami
2025-02-19 14:51:12 +03:30
parent f53b246905
commit 43af6ba3e6
12 changed files with 284 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/langs/fa.json
+7 -3
View File
@@ -43,7 +43,8 @@
},
"errors": {
"required": "این فیلد اجباری می باشد",
"password_not_match": "رمز عبور با تکرار آن مطابقت ندارد"
"password_not_match": "رمز عبور با تکرار آن مطابقت ندارد",
"is_not_image": "فرمت فایل انتخاب شده اشتباه می باشد"
},
"description": "توضیحات",
"sidebar": {
@@ -300,7 +301,9 @@
"image_profile": "تصویر حساب کاربری",
"image_profile_desc": "تصویر خود را در حساب کاربری قرار دهید.",
"upload_image": "آپلود تصویر",
"format_image": "فرمت های jpg, png,jpeg.حداکثر ۱مگابایت",
"formats": "فرمت های",
"max_size": "حداکثر ۱مگابایت",
"format_image": " jpg, png,jpeg.",
"info_account": "اطلاعات حساب",
"auth_after_change_info": "در صورت تغییر اطلاعات حساب باید مجددا احراز هویت انجام شود.",
"username": "نام کاربری",
@@ -316,7 +319,8 @@
"postal_code": "کد پستی",
"username_available": "نام کاربری موجود",
"username_not_available": "نام کاربری موجود نیست",
"username_save_success": "نام کاربری با موفقیت ذخیره شد"
"username_save_success": "نام کاربری با موفقیت ذخیره شد",
"image_uploaded_successfully": "تصویر با موفقیت آپلود شد"
},
"email": "ایمیل",
"save": "ذخیره",
src/pages/annoncement/List.tsx
+2
View File
@@ -6,9 +6,11 @@ import StatusWithText from '../../components/StatusWithText'
import { clx } from '../../helpers/utils'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetAnnoncement } from './hooks/useAnnoncementData'
const AnnouncementtList: FC = () => {
const getAnnoncements = useGetAnnoncement()
const { t } = useTranslation('global')
const navigate = useNavigate()
src/pages/annoncement/hooks/useAnnoncementData.ts
+9
View File
@@ -0,0 +1,9 @@
import * as api from "../service/AnnoncementService";
import { useQuery } from "@tanstack/react-query";
export const useGetAnnoncement = () => {
return useQuery({
queryKey: ["announcements"],
queryFn: () => api.getAnnoncements(),
});
};
src/pages/annoncement/service/AnnoncementService.ts
+6
View File
@@ -0,0 +1,6 @@
import axios from "../../../config/axios";
export const getAnnoncements = async () => {
const { data } = await axios.get(`/announcements/user`);
return data;
};
src/pages/auth/components/LoginStep2.tsx
+30 -2
View File
@@ -1,4 +1,4 @@
import { FC } from 'react'
import { FC, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { OtpVerifyType } from '../types/AuthTypes'
import { useFormik } from 'formik'
@@ -47,6 +47,28 @@ const LoginStep2: FC = () => {
},
})
useEffect(() => {
// بررسی پشتیبانی از Web OTP API
if (!("OTPCredential" in window)) return;
const ac = new AbortController();
navigator.credentials
.get({
otp: { transport: ["sms"] },
signal: ac.signal,
} as CredentialRequestOptions) // اطمینان از تطابق تایپ‌ها
.then((otpCredential) => {
if (otpCredential && "code" in otpCredential) {
alert("OTP Received: " + otpCredential.code);
formik.setFieldValue("code", (otpCredential).code);
}
})
.catch((err) => console.error("SMS AutoFill Error:", err));
return () => ac.abort();
}, []);
return (
<div>
<div className='mt-5'>
@@ -78,7 +100,13 @@ const LoginStep2: FC = () => {
numInputs={5}
inputType='tel'
onChange={(otp: string) => formik.setFieldValue('code', otp)}
renderInput={(props) => <input {...props} className='w-full h-[50px] flex-1 mx-2 bg-white border rounded-2.5' />}
renderInput={(props) =>
<input
{...props}
autoComplete="one-time-code"
inputMode="numeric"
className='w-full h-[50px] flex-1 mx-2 bg-white border rounded-2.5' />
}
/>
</div>
src/pages/financial/components/Legal.tsx
+9 -1
View File
@@ -4,7 +4,7 @@ import Input from '../../../components/Input'
import { useFormik } from 'formik'
import Textarea from '../../../components/Textarea'
import Button from '../../../components/Button'
import { TickCircle } from 'iconsax-react'
import { InfoCircle, TickCircle } from 'iconsax-react'
import { CreateLegalUserType, ProvinesItemType } from '../types/FinancialTypes'
import * as Yup from 'yup'
import { useCreateLegalUser, useGetCities, useGetFinancialInfo, useGetProvines } from '../hooks/useFinancialData'
@@ -186,6 +186,14 @@ const Legal: FC = () => {
/>
</div>
<div className='mt-8 h-10 text-xs bg-[#FFF2F2] text-[#DB0105] rounded-xl px-4 flex gap-2 items-center'>
<InfoCircle
size={18}
color='#DB0105'
/>
<div>{t('financial.notice_cannot_edit')}</div>
</div>
{
!isReadOnly &&
<div className='mt-8 flex justify-end'>
src/pages/profile/Profile.tsx
+58 -6
View File
@@ -1,4 +1,4 @@
import { FC } from 'react'
import { FC, useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import AvatarImage from '../../assets/images/avatar_image.png'
import Button from '../../components/Button'
@@ -7,13 +7,56 @@ import Input from '../../components/Input'
import DatePickerComponent from '../../components/DatePicker'
import Select from '../../components/Select'
import Textarea from '../../components/Textarea'
import { useGetProfile } from './hooks/useProfileData'
import { useGetProfile, useUpdateProfile } from './hooks/useProfileData'
import Username from './components/Username'
import { useDropzone } from 'react-dropzone'
import { toast } from 'react-toastify'
import { useSingleUpload } from '../ticket/hooks/useTicketData'
import { ErrorType } from '../../helpers/types'
import { UpdateProfileType } from './types/ProfileTypes'
import PageLoading from '../../components/PageLoading'
const Profile: FC = () => {
const { t } = useTranslation('global')
const singleUpload = useSingleUpload()
const [file, setFile] = useState<File>()
const getProfile = useGetProfile()
const updateProfile = useUpdateProfile()
const onDrop = useCallback((acceptedFiles: File[]) => {
if (acceptedFiles.length > 0) {
const file = acceptedFiles[0];
if (file.type.startsWith('image/')) {
setFile(file);
const formData = new FormData()
formData.append('file', file)
singleUpload.mutate(formData, {
onSuccess: (data) => {
const params: UpdateProfileType = {
profilePic: data.data?.url
}
updateProfile.mutate(params, {
onSuccess: () => {
toast.success(t('profile.image_uploaded_successfully'))
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error?.message[0])
}
})
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error?.message[0])
}
})
} else {
toast.error(t('errors.is_not_image'))
}
}
}, [])
const { getRootProps, getInputProps } = useDropzone({ onDrop })
return (
<div className='mt-4 '>
@@ -21,6 +64,10 @@ const Profile: FC = () => {
{t('profile.account_user')}
</div>
{
getProfile.isPending ?
<PageLoading />
:
<div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
<div className='xl:mt-10 mt-4 flex xl:flex-row flex-col xl:gap-0 gap-7 xl:items-center border-b pb-7'>
<div className='flex-1'>
@@ -32,18 +79,22 @@ const Profile: FC = () => {
</div>
</div>
<div className='flex-1 flex xl:gap-6 gap-4'>
<img src={AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
<img src={file ? URL.createObjectURL(file) : getProfile.data?.data?.user?.profilePic ? getProfile.data?.data?.user?.profilePic : AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
<div>
<Button
isLoading={singleUpload.isPending || updateProfile.isPending}
className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
>
<div className='flex items-center gap-3'>
<input {...getInputProps()} />
<div {...getRootProps()} className='flex items-center gap-3'>
<DocumentUpload color='white' size={18} />
<div>{t('profile.upload_image')}</div>
</div>
</Button>
<p className='mt-3 text-description'>
{t('profile.format_image')}
<p className='mt-3 items-center flex gap-0.5 text-description'>
{t('profile.formats')}
<div className='-mt-0.5'>{t('profile.format_image')}</div>
<span>{t('profile.max_size')}</span>
</p>
</div>
</div>
@@ -166,6 +217,7 @@ const Profile: FC = () => {
<div className='h-20 xl:hidden'></div>
</div>
}
</div>
)
src/pages/profile/types/ProfileTypes.ts
+1
View File
@@ -8,4 +8,5 @@ export type UpdateProfileType = {
lastName?: string;
birthDate?: string;
userName?: string;
profilePic?: string;
};
src/pages/ticket/CreateTicket.tsx
+1 -1
View File
@@ -224,7 +224,7 @@ const CreateTicket: FC = () => {
<TickSquare size={20} color='black' variant='Bold' />
</div>
<div className='text-description text-xs leading-5'>
پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
پاسخگویی 24 ساعته تلفنی را تنها از داناک می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
</div>
</div>
</div>
src/shared/Footer.tsx
+27 -21
View File
@@ -2,72 +2,78 @@ import { Element3, Element4, Home2, Messages3, NotificationStatus } from 'iconsa
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Pages } from '../config/Pages'
import { Link } from 'react-router-dom'
import { Link, useLocation } from 'react-router-dom'
const Footer: FC = () => {
const { t } = useTranslation('global')
const location = useLocation()
const isActive = (path: string) => location.pathname === path
return (
<div className='xl:hidden'>
<div className='h-[60px] '></div>
<div className='fixed bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
<Link to={Pages.dashboard}>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.dashboard) ? 'text-black' : ''}`}>
<Home2
className='size-5'
color='#8C90A3'
color={isActive(Pages.dashboard) ? 'black' : '#8C90A3'}
variant={isActive(Pages.dashboard) ? 'Bold' : 'Linear'}
/>
<div className='text-[10px]'>
<div className={`text-[10px] ${isActive(Pages.dashboard) ? 'text-black' : ''}`}>
{t('footer.home')}
</div>
</div>
</Link>
<Link to={Pages.services.other}>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<Element4
<div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.services.other) ? 'text-black' : ''}`}>
<Element3
className='size-5'
color='#8C90A3'
color={isActive(Pages.services.other) ? 'black' : '#8C90A3'}
variant={isActive(Pages.services.other) ? 'Bold' : 'Linear'}
/>
<div className='text-[10px]'>
<div className={`text-[10px] ${isActive(Pages.services.other) ? 'text-black' : ''}`}>
{t('footer.other_services')}
</div>
</div>
</Link>
<Link to={Pages.services.mine}>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
<div className='bg-white p-1 rounded-full -mt-7'>
<div className='bg-black flex justify-center items-center size-10 rounded-full'>
<Element3
<div className={`bg-black flex justify-center items-center size-10 rounded-full ${isActive(Pages.services.mine) ? 'bg-black' : ''}`}>
<Element4
className='size-5'
color='white'
color={isActive(Pages.services.mine) ? 'white' : 'white'}
variant={isActive(Pages.services.mine) ? 'Bold' : 'Linear'}
/>
</div>
</div>
<div className='text-[10px] '>
<div className={`text-[10px] ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
{t('footer.my_services')}
</div>
</div>
</Link>
<Link to={Pages.announcement.list}>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.announcement.list) ? 'text-black' : ''}`}>
<NotificationStatus
className='size-5'
color='#8C90A3'
color={isActive(Pages.announcement.list) ? 'black' : '#8C90A3'}
variant={isActive(Pages.announcement.list) ? 'Bold' : 'Linear'}
/>
<div className='text-[10px]'>
<div className={`text-[10px] ${isActive(Pages.announcement.list) ? 'text-black' : ''}`}>
{t('footer.announcements')}
</div>
</div>
</Link>
<Link to={Pages.ticket.list}>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.ticket.list) ? 'text-black' : ''}`}>
<Messages3
className='size-5'
color='#8C90A3'
color={isActive(Pages.ticket.list) ? 'black' : '#8C90A3'}
variant={isActive(Pages.ticket.list) ? 'Bold' : 'Linear'}
/>
<div className='text-[10px]'>
<div className={`text-[10px] ${isActive(Pages.ticket.list) ? 'text-black' : ''}`}>
{t('footer.tickets')}
</div>
</div>
src/shared/Header.tsx
+2
View File
@@ -37,7 +37,9 @@ const Header: FC = () => {
</div>
{/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
<div className='flex xl:gap-6 gap-4 items-center'>
<Link to={Pages.services.other}>
<Element3 color='black' className='xl:size-[18px] size-[17px]' />
</Link>
<Link to={Pages.wallet}>
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
</Link>
src/shared/SideBar.tsx
+2 -2
View File
@@ -48,13 +48,13 @@ const SideBar: FC = () => {
link={Pages.dashboard}
/>
<SideBarItem
icon={<Element3 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
icon={<Element4 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.myservice')}
isActive={isActive('services')}
link={Pages.services.mine}
/>
<SideBarItem
icon={<Element4 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
icon={<Element3 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.other_service')}
isActive={isActive('other-service')}
link={Pages.services.other}