up

src/pages/dashboard/hooks/useDashboardData.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import * as api from '../service/DashboardService';
+
+export const useGetDashboardCounts = () => {
+  return useQuery({
+    queryKey: ['dashboard-counts'],
+    queryFn: () => api.getDashboardCounts(),
+  });
+};

src/pages/dashboard/service/DashboardService.ts

@@ -0,0 +1,14 @@
+import axios from '@/config/axios';
+import type { BaseResponse } from '@/shared/types/Types';
+
+export type DashboardCountsType = {
+  requestsCount: number;
+  invoicesCount: number;
+  ordersCount: number;
+  paymentsCount: number;
+};
+
+export const getDashboardCounts = async (): Promise<BaseResponse<DashboardCountsType>> => {
+  const { data } = await axios.get<BaseResponse<DashboardCountsType>>('/admin/dashboard/counts');
+  return data;
+};

src/shared/Sidebar.tsx

@@ -23,11 +23,14 @@ import { Paths } from '../config/Paths';
 import { useSharedStore } from './store/useSharedStore';
 import { clx } from '../helpers/utils';
 import { t } from '../locale';
+import { useGetDashboardCounts } from '@/pages/dashboard/hooks/useDashboardData';
 
 const SideBar: FC = () => {
 
   const { openSidebar, setOpenSidebar } = useSharedStore();
   const location = useLocation();
+  const { data: dashboardCounts } = useGetDashboardCounts();
+  const counts = dashboardCounts?.data;
 
   const isActive = (name: string) => {
     return location.pathname.includes(name);
@@ -68,19 +71,12 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={<ElementEqual size={iconSizeSideBar} color="#4F5260" />}
+              icon={<Element3 size={iconSizeSideBar} color="#4F5260" />}
-              title={'محصولات'}
+              title={'سفارشات'}
-              isActive={isActive('product')}
+              isActive={isActive('order')}
-              link={Paths.product.list}
+              link={Paths.order.list}
-              activeName='manage_products'
+              activeName={['view_orders', 'view_assigned_orders']}
-            />
+              badge={counts?.ordersCount}
-
-            <SideBarItem
-              icon={<MessageText size={iconSizeSideBar} color="#4F5260" />}
-              title={'درخواست ها'}
-              isActive={isActive('requests')}
-              link={Paths.requests.list}
-              activeName='view_requests'
             />
 
             <SideBarItem
@@ -89,6 +85,16 @@ const SideBar: FC = () => {
               isActive={isActive('/invoice')}
               link={Paths.perfomaInvoice.list}
               activeName='view_invoices'
+              badge={counts?.invoicesCount}
+            />
+            
+            <SideBarItem
+              icon={<MessageText size={iconSizeSideBar} color="#4F5260" />}
+              title={'درخواست ها'}
+              isActive={isActive('requests')}
+              link={Paths.requests.list}
+              activeName='view_requests'
+              badge={counts?.requestsCount}
             />
 
             <SideBarItem
@@ -97,15 +103,10 @@ const SideBar: FC = () => {
               isActive={isActive('/payments')}
               link={Paths.payments.list}
               activeName='manage_payments'
+              badge={counts?.paymentsCount}
             />
 
-            <SideBarItem
+
-              icon={<Element3 size={iconSizeSideBar} color="#4F5260" />}
-              title={'سفارشات'}
-              isActive={isActive('order')}
-              link={Paths.order.list}
-              activeName={['view_orders', 'view_assigned_orders']}
-            />
 
 
 
@@ -140,6 +141,14 @@ const SideBar: FC = () => {
               link={Paths.role.list}
               activeName='manage_roles'
             />
+
+            <SideBarItem
+              icon={<ElementEqual size={iconSizeSideBar} color="#4F5260" />}
+              title={'محصولات'}
+              isActive={isActive('product')}
+              link={Paths.product.list}
+              activeName='manage_products'
+            />
           </div>
 
           <div className="mt-10 px-6 text-description text-sm font-bold">{t('sidebar.other')}</div>

src/shared/SidebarItem.tsx

@@ -15,7 +15,8 @@ type Props = {
     link: string,
     isLogout?: boolean,
     isWithoutLine?: boolean,
-    activeName?: string | string[]
+    activeName?: string | string[],
+    badge?: number,
 }
 
 const SideBarItem: FC<Props> = (props: Props) => {
@@ -40,7 +41,7 @@ const SideBarItem: FC<Props> = (props: Props) => {
 
         return (
             <Link onClick={props.isLogout ? handleLogout : undefined} to={props.link} className={clx(
-                'h-12 rounded-2xl flex gap-2 text-[#4F5260] px-4 text-[13px] items-center',
+                'h-12 rounded-2xl flex justify-between gap-2 text-[#4F5260] px-4 text-[13px] items-center',
                 props.isActive && 'bg-[#F5F7FC]',
             )}>
                 <div className='flex gap-3 items-center'>
@@ -49,7 +50,11 @@ const SideBarItem: FC<Props> = (props: Props) => {
                         {props.title}
                     </div>
                 </div>
-
+                {props.badge != null && props.badge > 0 && (
+                    <span className="min-w-5 h-5 px-1.5 rounded-full bg-[#FFEDCA] text-[#FF7B00] text-[10px] font-medium flex items-center justify-center">
+                        {props.badge > 99 ? '99+' : props.badge}
+                    </span>
+                )}
             </Link>
         )
     }