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 />
+                        data?.data.map((item) => (
-                    </SwiperSlide>
+                            <SwiperSlide className='w-auto!' key={item.id}>
-                    <SwiperSlide className='!w-auto'>
+                                <ServiceItem product={item} />
-                        <ServiceItem />
+                            </SwiperSlide>
-                    </SwiperSlide>
+                        ))
-                    <SwiperSlide className='!w-auto'>
+                    }
-                        <ServiceItem />
-                    </SwiperSlide>
-                    <SwiperSlide className='!w-auto'>
-                        <ServiceItem />
-                    </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}

src/pages/order/hooks/useOrderData.ts

@@ -1,33 +1,33 @@
-import { useMutation, useQuery } from '@tanstack/react-query'
+import { useMutation, useQuery } from "@tanstack/react-query";
-import * as api from '../service/OrderService'
+import * as api from "../service/OrderService";
-import type { TabMyRequestsEnum } from '../enum/OrderEnum'
+import type { TabMyRequestsEnum } from "../enum/OrderEnum";
-import type { AddTicketType } from '../type/Types'
+import type { AddTicketType } from "../type/Types";
 
 export const useGetMyOrders = (
   page: number = 1,
   statuses: TabMyRequestsEnum,
 ) => {
   return useQuery({
-    queryKey: ['my-orders', page, statuses],
+    queryKey: ["my-orders", page, statuses],
     queryFn: () => api.getMyOrders(page, statuses),
-  })
+  });
-}
+};
 
 export const useGetOrderDetails = (id: string) => {
   return useQuery({
-    queryKey: ['order', id],
+    queryKey: ["order", id],
     queryFn: () => api.getOrderDetails(id),
     enabled: !!id,
-  })
+  });
-}
+};
 
 export const useGetTickets = (orderId: string) => {
   return useQuery({
-    queryKey: ['tickets', orderId],
+    queryKey: ["tickets", orderId],
     queryFn: () => api.getTickets(orderId),
     enabled: !!orderId,
-  })
+  });
-}
+};
 
 export const useAddTicket = () => {
   return useMutation({
@@ -35,8 +35,15 @@ export const useAddTicket = () => {
       requestId,
       params,
     }: {
-      requestId: string
+      requestId: string;
-      params: AddTicketType
+      params: AddTicketType;
     }) => api.addTicket(requestId, params),
-  })
+  });
-}
+};
+
+export const useGetOrderStats = () => {
+  return useQuery({
+    queryKey: ["order-stats"],
+    queryFn: api.getOrderStats,
+  });
+};

src/pages/order/service/OrderService.ts

@@ -1,11 +1,12 @@
-import axios from '@/config/axios'
+import axios from "@/config/axios";
 import type {
   AddTicketType,
   MyOrdersResponseType,
   OrderDetailResponseType,
+  OrderStatsResponseType,
   TicketsResponseType,
-} from '../type/Types'
+} from "../type/Types";
-import { RequestStatusEnum, TabMyRequestsEnum } from '../enum/OrderEnum'
+import { RequestStatusEnum, TabMyRequestsEnum } from "../enum/OrderEnum";
 
 export const getMyOrders = async (
   page: number = 1,
@@ -25,36 +26,41 @@ export const getMyOrders = async (
           RequestStatusEnum.READY_TO_PRINTING,
         ]
       : active === TabMyRequestsEnum.CANCELLED
-        ? [RequestStatusEnum.CANCELED]
+      ? [RequestStatusEnum.CANCELED]
-        : active === TabMyRequestsEnum.DELIVERED
+      : active === TabMyRequestsEnum.DELIVERED
-          ? [RequestStatusEnum.DELIVERED]
+      ? [RequestStatusEnum.DELIVERED]
-          : undefined
+      : undefined;
 
-  let query = `?page=${page}`
+  let query = `?page=${page}`;
   if (statuses) {
-    query += `&statuses=${statuses}`
+    query += `&statuses=${statuses}`;
   }
   const { data } = await axios.get<MyOrdersResponseType>(
     `/public/orders${query}`,
-  )
+  );
-  return data
+  return data;
-}
+};
 
 export const getOrderDetails = async (id: string) => {
   const { data } = await axios.get<OrderDetailResponseType>(
     `/public/orders/${id}`,
-  )
+  );
-  return data
+  return data;
-}
+};
 
 export const getTickets = async (id: string) => {
   const { data } = await axios.get<TicketsResponseType>(
     `/public/ticket/ref/${id}`,
-  )
+  );
-  return data
+  return data;
-}
+};
 
 export const addTicket = async (id: string, params: AddTicketType) => {
-  const { data } = await axios.post(`/public/ticket/ref/${id}`, params)
+  const { data } = await axios.post(`/public/ticket/ref/${id}`, params);
-  return data
+  return data;
-}
+};
+
+export const getOrderStats = async () => {
+  const { data } = await axios.get<OrderStatsResponseType>(`/public/orders/stats`);
+  return data;
+};

src/pages/order/type/Types.ts

@@ -55,3 +55,12 @@ export interface OrderType extends RowDataType {
 export type MyOrdersResponseType = BaseResponse<OrderType[]>
 
 export type OrderDetailResponseType = BaseResponse<OrderType>
+
+export type OrderStatsType = {
+  requestsCount: number
+  invoicesCount: number
+  inProgressOrdersCount: number
+  completedOrdersCount: number
+}
+
+export type OrderStatsResponseType = BaseResponse<OrderStatsType>