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}

src/pages/invoice/ProformaInvoice.tsx

@@ -1,6 +1,6 @@
 import Tabs from '@/components/Tabs'
 import { useMemo, useState, type FC } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { ProformaInvoiceStatusEnum } from './enum/InvoiceEnum'
 import Filters from '@/components/Filters'
 import Table from '@/components/Table'
@@ -14,6 +14,12 @@ import moment from 'moment-jalaali'
 import StatusWithText from '@/components/StatusWithText'
 import { Eye } from 'iconsax-react'
 
+const isInvoiceTab = (value: string | null): value is ProformaInvoiceStatusEnum =>
+    value === ProformaInvoiceStatusEnum.ALL ||
+    value === ProformaInvoiceStatusEnum.NOT_CONFIRMED ||
+    value === ProformaInvoiceStatusEnum.PARTIALLY_CONFIRMED ||
+    value === ProformaInvoiceStatusEnum.CONFIRMED
+
 const getServiceNames = (invoice: Invoice): string => {
     const names = [...new Set(invoice.items.map((item) => item.product.title))]
     return names.join('، ') || '-'
@@ -21,7 +27,11 @@ const getServiceNames = (invoice: Invoice): string => {
 
 const ProformaInvoice: FC = () => {
     const navigate = useNavigate()
-    const [activeTab, setActiveTab] = useState<ProformaInvoiceStatusEnum>(ProformaInvoiceStatusEnum.ALL)
+    const [searchParams] = useSearchParams()
+    const tabFromQuery = searchParams.get('tab')
+    const [activeTab, setActiveTab] = useState<ProformaInvoiceStatusEnum>(
+        isInvoiceTab(tabFromQuery) ? tabFromQuery : ProformaInvoiceStatusEnum.ALL,
+    )
     const [filters, setFilters] = useState<FilterValues>({})
 
     const { data, isPending } = useGetInvoices()

src/pages/order/MyOrders.tsx

@@ -6,14 +6,22 @@ import { Eye } from 'iconsax-react'
 import Table from '@/components/Table'
 import { useGetMyOrders } from './hooks/useOrderData'
 import moment from 'moment-jalaali'
-import { Link } from 'react-router-dom'
+import { Link, useSearchParams } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
 import StatusBadge from '@/components/StatusBadge'
 
+const isOrderTab = (value: string | null): value is TabMyOrdersEnum =>
+  value === TabMyOrdersEnum.ALL ||
+  value === TabMyOrdersEnum.IN_PROGRESS ||
+  value === TabMyOrdersEnum.DELIVERED ||
+  value === TabMyOrdersEnum.CANCELLED
+
 const MyOrders: FC = () => {
+  const [searchParams] = useSearchParams()
+  const tabFromQuery = searchParams.get('tab')
   const [page, setPage] = useState<number>(1)
   const [activeTab, setActiveTab] = useState<TabMyOrdersEnum>(
-    TabMyOrdersEnum.ALL,
+    isOrderTab(tabFromQuery) ? tabFromQuery : TabMyOrdersEnum.ALL,
   )
   const { data } = useGetMyOrders(page, activeTab)