stat

src/pages/home/components/StatCard.tsx

@@ -1,17 +1,22 @@
 import { COLORS } from '@/constants/colors'
 import { ArrowLeft } from 'iconsax-react'
 import { type FC, type ReactNode } from 'react'
+import { Link } from 'react-router-dom'
 
 type Props = {
     icon: ReactNode,
     count: number | undefined,
-    description: string
+    description: string,
+    to: string,
 }
 
 const StatCard: FC<Props> = (props) => {
-    const { icon, count, description } = props
+    const { icon, count, description, to } = props
     return (
-        <div className='flex-1 bg-white rounded-3xl p-6'>
+        <Link
+            to={to}
+            className='flex-1 bg-white rounded-3xl p-6 block transition-shadow hover:shadow-md'
+        >
             <div className='flex justify-between items-center'>
                 {icon}
 
@@ -27,8 +32,8 @@ const StatCard: FC<Props> = (props) => {
             <div className='mt-2 text-sm'>
                 {description}
             </div>
-        </div>
+        </Link>
     )
 }
 
-export default StatCard
+export default StatCard

src/pages/home/components/Stats.tsx

@@ -1,10 +1,13 @@
 import GridWrapper from '@/components/GridWrapper'
+import { Paths } from '@/config/Paths'
 import { COLORS } from '@/constants/colors'
 import { t } from '@/locale'
+import { ProformaInvoiceStatusEnum } from '@/pages/invoice/enum/InvoiceEnum'
+import { TabMyOrdersEnum } from '@/pages/order/enum/OrderEnum'
+import { useGetOrderStats } from '@/pages/order/hooks/useOrderData'
 import { BoxTick, BoxTime, ReceiptText, TruckTick } from 'iconsax-react'
 import { type FC } from 'react'
 import StatCard from './StatCard'
-import { useGetOrderStats } from '@/pages/order/hooks/useOrderData'
 
 const Stats: FC = () => {
 
@@ -21,6 +24,7 @@ const Stats: FC = () => {
             <StatCard
                 count={data?.data.requestsCount}
                 description={t('home.requestCount')}
+                to={Paths.myRequests}
                 icon={<BoxTime
                     size={27}
                     color={COLORS.primary}
@@ -29,6 +33,7 @@ const Stats: FC = () => {
             <StatCard
                 count={data?.data.invoicesCount}
                 description={t('home.factureCount')}
+                to={`${Paths.proformaInvoice}?tab=${ProformaInvoiceStatusEnum.NOT_CONFIRMED}`}
                 icon={<ReceiptText
                     size={27}
                     color={COLORS.primary}
@@ -37,6 +42,7 @@ const Stats: FC = () => {
             <StatCard
                 count={data?.data.inProgressOrdersCount}
                 description={t('home.orderCount')}
+                to={`${Paths.order.myOrders}?tab=${TabMyOrdersEnum.IN_PROGRESS}`}
                 icon={<BoxTick
                     size={27}
                     color={COLORS.primary}
@@ -45,6 +51,7 @@ const Stats: FC = () => {
             <StatCard
                 count={data?.data.completedOrdersCount}
                 description={t('home.orderDoneCount')}
+                to={`${Paths.order.myOrders}?tab=${TabMyOrdersEnum.DELIVERED}`}
                 icon={<TruckTick
                     size={27}
                     color={COLORS.primary}