dashboard
This commit is contained in:
hamid zarghami
+9
-1
@@ -103,7 +103,15 @@
|
||||
"add_access": "دسترسی سریع تازه ایجاد کنید.",
|
||||
"danak_learning": "آموزش داناک",
|
||||
"see_all": "دیدن همه",
|
||||
"create_new_access": "ایجاد دسترسی سریع"
|
||||
"create_new_access": "ایجاد دسترسی سریع",
|
||||
"services": "سرویس ها",
|
||||
"service": "سرویس",
|
||||
"customers": "مشتریان",
|
||||
"customer": "مشتری",
|
||||
"invoices": "صورت حساب ها",
|
||||
"new_invoice": "صورت حساب جدید",
|
||||
"ads": "تبلیغات",
|
||||
"active_ads": "تبلیغ فعال"
|
||||
},
|
||||
"all": "همه",
|
||||
"service": {
|
||||
|
||||
+22
-85
@@ -1,127 +1,64 @@
|
||||
import { FC } from 'react'
|
||||
import BannerImage from '../../assets/images/banner.png'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ArrowLeft, Element3, Messages3, NotificationStatus, Teacher } from 'iconsax-react'
|
||||
import { Element3, Messages3, NotificationStatus, People, Receipt2 } from 'iconsax-react'
|
||||
import ItemDashboard from './components/ItemDashboard'
|
||||
import TitleLine from '../../components/TitleLine'
|
||||
import AccessbilityImage from '../../assets/images/accessbility.jpg'
|
||||
import BoxNewAccessbility from './components/BoxNewAccessbility'
|
||||
import DanakLearning from './components/DanakLearning'
|
||||
import { Carousel } from "@material-tailwind/react";
|
||||
import { useGetDashboard } from './hooks/useHomeData'
|
||||
|
||||
|
||||
const Home: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const getDashboard = useGetDashboard()
|
||||
|
||||
return (
|
||||
<div className='w-full flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
<Carousel prevArrow={() => null} nextArrow={() => null} autoplay={false} className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
|
||||
<div className='relative drtl'>
|
||||
<img src={BannerImage} className='w-full rounded-3xl' />
|
||||
<div className='absolute size-full top-0 right-0 xl:py-6 py-4 xl:px-8 px-4 flex flex-col xl:justify-between'>
|
||||
<div className='sm:flex hidden justify-end w-full'>
|
||||
<button className="xl:px-8 px-4 w-fit xl:py-1.5 py-1 bg-white bg-opacity-10 text-white xl:text-sm text-xs rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
|
||||
<div className='xl:tetx-base leading-7 text-xs truncate xl:overflow-auto'>
|
||||
سفارش نرمافزار اختصاصی: سرمایهای برای آینده یا فقط هزینهای برای امروز؟
|
||||
</div>
|
||||
<div className='xl:mt-3 mt-2 text-border text-xs'>
|
||||
۸ دقیقه مطالعه
|
||||
</div>
|
||||
<button className='xl:mt-3 mt-2 xl:px-4 px-2 xl:h-9 h-6 flex gap-2 items-center xl:text-xs text-[10px] xl:rounded-2.5 rounded-lg bg-black text-white'>
|
||||
<div>
|
||||
{t('home.study')}
|
||||
</div>
|
||||
<ArrowLeft size={14} color='white' />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='relative drtl'>
|
||||
<img src={BannerImage} className='w-full rounded-3xl' />
|
||||
<div className='absolute size-full top-0 right-0 xl:py-6 py-4 xl:px-8 px-4 flex flex-col xl:justify-between'>
|
||||
<div className='sm:flex hidden justify-end w-full'>
|
||||
<button className="xl:px-8 px-4 w-fit xl:py-1.5 py-1 bg-white bg-opacity-10 text-white xl:text-sm text-xs rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
|
||||
<div className='xl:tetx-base leading-7 text-xs truncate xl:overflow-auto'>
|
||||
سفارش نرمافزار اختصاصی: سرمایهای برای آینده یا فقط هزینهای برای امروز؟
|
||||
</div>
|
||||
<div className='xl:mt-3 mt-2 text-border text-xs'>
|
||||
۸ دقیقه مطالعه
|
||||
</div>
|
||||
<button className='xl:mt-3 mt-2 xl:px-4 px-2 xl:h-9 h-6 flex gap-2 items-center xl:text-xs text-[10px] xl:rounded-2.5 rounded-lg bg-black text-white'>
|
||||
<div>
|
||||
{t('home.study')}
|
||||
</div>
|
||||
<ArrowLeft size={14} color='white' />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Carousel>
|
||||
|
||||
<div className='mt-8 flex-wrap text-sm flex gap-6 items-center'>
|
||||
<ItemDashboard
|
||||
title={t('home.myservice')}
|
||||
title={t('home.services')}
|
||||
icon={<Element3 size={20} color='black' />}
|
||||
color='#00D16C'
|
||||
count={4}
|
||||
description={t('home.active_service')}
|
||||
count={getDashboard.data?.data?.danakServicesCount}
|
||||
description={t('home.service')}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
title={t('home.customers')}
|
||||
icon={<People size={20} color='black' />}
|
||||
color='#00D16C'
|
||||
count={getDashboard.data?.data?.customersCount}
|
||||
description={t('home.customer')}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
title={t('home.ticket')}
|
||||
icon={<Messages3 size={20} color='black' />}
|
||||
color='#FF7B00'
|
||||
count={4}
|
||||
count={getDashboard.data?.data?.unreadTickets}
|
||||
description={t('home.unread_messages')}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
title={t('home.announcement')}
|
||||
title={t('home.ads')}
|
||||
icon={<NotificationStatus size={20} color='black' />}
|
||||
color='#FF0000'
|
||||
count={4}
|
||||
description={t('home.unread_announcement')}
|
||||
count={getDashboard.data?.data?.adsCount}
|
||||
description={t('home.active_ads')}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
title={t('home.learnings')}
|
||||
icon={<Teacher size={20} color='black' />}
|
||||
title={t('home.invoices')}
|
||||
icon={<Receipt2 size={20} color='black' />}
|
||||
color='#0047FF'
|
||||
count={4}
|
||||
description={t('home.learning')}
|
||||
count={getDashboard.data?.data?.invoicesCount}
|
||||
description={t('home.new_invoice')}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='w-full mt-8'>
|
||||
<TitleLine title={t('home.access')} />
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex flex-wrap gap-6 items-center'>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
|
||||
<img src={AccessbilityImage} className='w-10' />
|
||||
<div className='text-xs'>
|
||||
{t('home.add_access')}
|
||||
</div>
|
||||
</div>
|
||||
<BoxNewAccessbility />
|
||||
<BoxNewAccessbility />
|
||||
<BoxNewAccessbility />
|
||||
</div>
|
||||
</div>
|
||||
<DanakLearning />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ type Props = {
|
||||
const ItemDashboard: FC<Props> = (props: Props) => {
|
||||
|
||||
return (
|
||||
<div className='p-6 min-w-[40%] xl:min-w-[20%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl'>
|
||||
<div className='p-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl'>
|
||||
<div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
|
||||
{props.icon}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/HomeService";
|
||||
|
||||
export const useGetDashboard = () => {
|
||||
return useQuery({
|
||||
queryKey: ["dashboard"],
|
||||
queryFn: api.getDashboard,
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
import axios from "../../../config/axios";
|
||||
|
||||
export const getDashboard = async () => {
|
||||
const { data } = await axios.get(`/dashboards/reports`);
|
||||
return data;
|
||||
};
|
||||
Reference in New Issue
Block a user