dashboard

src/langs/fa.json

@@ -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": {

src/pages/home/Home.tsx

@@ -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 { useGetDashboard } from './hooks/useHomeData'
-import AccessbilityImage from '../../assets/images/accessbility.jpg'
-import BoxNewAccessbility from './components/BoxNewAccessbility'
-import DanakLearning from './components/DanakLearning'
-import { Carousel } from "@material-tailwind/react";
 
 
 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}
+                        count={getDashboard.data?.data?.danakServicesCount}
-                        description={t('home.active_service')}
+                        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}
+                        count={getDashboard.data?.data?.adsCount}
-                        description={t('home.unread_announcement')}
+                        description={t('home.active_ads')}
                     />
 
                     <ItemDashboard
-                        title={t('home.learnings')}
+                        title={t('home.invoices')}
-                        icon={<Teacher size={20} color='black' />}
+                        icon={<Receipt2 size={20} color='black' />}
                         color='#0047FF'
-                        count={4}
+                        count={getDashboard.data?.data?.invoicesCount}
-                        description={t('home.learning')}
+                        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>
     )
 }

src/pages/home/components/ItemDashboard.tsx

@@ -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>

src/pages/home/hooks/useHomeData.ts

@@ -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,
+  });
+};

src/pages/home/service/HomeService.ts

@@ -0,0 +1,6 @@
+import axios from "../../../config/axios";
+
+export const getDashboard = async () => {
+  const { data } = await axios.get(`/dashboards/reports`);
+  return data;
+};