stats + services

src/pages/home/components/ServiceItem.tsx

@@ -1,10 +1,11 @@
 import { type FC } from 'react'
+import { type ProductType } from '@/pages/request/type/Types'
 
-const ServiceItem: FC = () => {
+const ServiceItem: FC<{ product: ProductType }> = ({ product }) => {
     return (
         <div>
             <div className='size-20 rounded-full bg-gray-200 border-[3px] border-primary'>
-
+                <img src={product.images?.[0]} alt={product.title} className='w-full h-full object-cover' />
             </div>
         </div>
     )

src/pages/home/components/Services.tsx

@@ -2,9 +2,11 @@ import { t } from '@/locale'
 import { type FC } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import ServiceItem from './ServiceItem'
+import { useGetProducts } from '@/pages/request/hooks/useRequestData'
 
 
 const Services: FC = () => {
+    const { data } = useGetProducts();
     return (
         <div className='mt-6 bg-white p-6 rounded-3xl'>
             <h4 className='text-lg font-light'>
@@ -22,18 +24,13 @@ const Services: FC = () => {
                         },
                     }}
                 >
-                    <SwiperSlide className='!w-auto'>
-                        <ServiceItem />
-                    </SwiperSlide>
-                    <SwiperSlide className='!w-auto'>
-                        <ServiceItem />
-                    </SwiperSlide>
-                    <SwiperSlide className='!w-auto'>
-                        <ServiceItem />
-                    </SwiperSlide>
-                    <SwiperSlide className='!w-auto'>
-                        <ServiceItem />
-                    </SwiperSlide>
+                    {
+                        data?.data.map((item) => (
+                            <SwiperSlide className='w-auto!' key={item.id}>
+                                <ServiceItem product={item} />
+                            </SwiperSlide>
+                        ))
+                    }
                 </Swiper>
             </div>
 

src/pages/home/components/StatCard.tsx

@@ -4,7 +4,7 @@ import { type FC, type ReactNode } from 'react'
 
 type Props = {
     icon: ReactNode,
-    count: number,
+    count: number | undefined,
     description: string
 }
 

src/pages/home/components/Stats.tsx

@@ -4,8 +4,12 @@ import { t } from '@/locale'
 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 = () => {
+
+    const { data } = useGetOrderStats();
+
     return (
         <GridWrapper
             desktop={4}
@@ -15,7 +19,7 @@ const Stats: FC = () => {
             className='mt-5'
         >
             <StatCard
-                count={2}
+                count={data?.data.requestsCount}
                 description={t('home.requestCount')}
                 icon={<BoxTime
                     size={27}
@@ -23,7 +27,7 @@ const Stats: FC = () => {
                 />}
             />
             <StatCard
-                count={2}
+                count={data?.data.invoicesCount}
                 description={t('home.factureCount')}
                 icon={<ReceiptText
                     size={27}
@@ -31,7 +35,7 @@ const Stats: FC = () => {
                 />}
             />
             <StatCard
-                count={10}
+                count={data?.data.inProgressOrdersCount}
                 description={t('home.orderCount')}
                 icon={<BoxTick
                     size={27}
@@ -39,7 +43,7 @@ const Stats: FC = () => {
                 />}
             />
             <StatCard
-                count={20}
+                count={data?.data.completedOrdersCount}
                 description={t('home.orderDoneCount')}
                 icon={<TruckTick
                     size={27}