part 2

src/pages/home/Home.tsx

@@ -9,6 +9,7 @@ import DanakLearning from './components/DanakLearning'
 import { Carousel } from "@material-tailwind/react";
 import { useGetAds } from '../ads/hooks/useAdsData'
 import { AdsDisplayLocation, AdsItemType } from '../ads/types/AdsTypes'
+import { Pages } from '../../config/Pages'
 
 
 const Home: FC = () => {
@@ -63,6 +64,7 @@ const Home: FC = () => {
                         color='#00D16C'
                         count={4}
                         description={t('home.active_service')}
+                        link={Pages.services.mine}
                     />
 
                     <ItemDashboard
@@ -71,6 +73,7 @@ const Home: FC = () => {
                         color='#FF7B00'
                         count={4}
                         description={t('home.unread_messages')}
+                        link={Pages.ticket.list}
                     />
 
                     <ItemDashboard
@@ -79,6 +82,7 @@ const Home: FC = () => {
                         color='#0047FF'
                         count={4}
                         description={t('home.receip')}
+                        link={Pages.receipts.index}
                     />
 
                     <ItemDashboard
@@ -87,6 +91,7 @@ const Home: FC = () => {
                         color='#FF0000'
                         count={4}
                         description={t('home.unread_announcement')}
+                        link={Pages.announcement.list}
                     />
 
                 </div>

src/pages/home/components/ItemDashboard.tsx

@@ -1,17 +1,19 @@
 import { FC, ReactNode } from 'react'
+import { Link } from 'react-router-dom'
 
 type Props = {
     title: string
     icon: ReactNode,
     color: string,
     count: number,
-    description: string
+    description: string,
+    link: string
 }
 
 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'>
+        <Link to={props.link} 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='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
                 {props.icon}
             </div>
@@ -28,7 +30,7 @@ const ItemDashboard: FC<Props> = (props: Props) => {
                     </div>
                 </div>
             </div>
-        </div>
+        </Link>
     )
 }