Done

src/Pages/Developer/Page.tsx

@@ -15,6 +15,15 @@ function Page() {
     const {data  ,status } = useGetDeveloper()
     const navigate = useNavigate()
     
+        const ExpandedComponent = ({ data }:any) => {
+      console.log(data,"data");
+      
+      return (
+        <div className='p-2'>
+          <p >description : {data?.description}</p>
+        </div>
+      );
+    };
   return (
     // Pass Status to Layout 
     <DashBody status={status as QueryStatusEnum} >
@@ -32,6 +41,8 @@ function Page() {
         isLoading={false}
         columns={column}
         is_pagination={false}
+        expandableRows 
+        expandableRowsComponent={ExpandedComponent}
     />
       
     

src/Pages/Developer/useTableColumns.tsx

@@ -41,7 +41,7 @@ const useTableColumns :any = () => {
         name: t("description"),
         sortable: false,
         center: "true",
-        cell: (row:any) => row?.description
+        cell: (row:any) => <div className="single-line-div">{row?.description} </div> 
       },
       {
         name: "#",

src/Pages/Home/HomePage.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import StatisticsCard from "../../Components/Ui/StaticsCard/StaticCard";
+import { FaFirstOrder, FaProductHunt, FaUser } from "react-icons/fa";
+import { useTranslation } from "react-i18next";
+import {  Col, Row } from "reactstrap";
+import { useGetHome } from "../../api/home";
+import { Spin } from "antd";
+
+export default function HomePage() {
+  const { t } = useTranslation();
+  
+  const {data,isLoading} = useGetHome()
+  console.log(data);
+  
+
+  const cardsData = [
+    {
+      icon: <FaUser className="warning" size={20} />,
+      count: data?.developer_count, // Example count
+      pathWhenClick: '/',
+      titleKey: "developer_count",
+      contentKey: "developer_in_your_Application"
+    },
+    {
+      icon: <FaProductHunt className="warning" size={20} />,
+      count: data?.contact_us_count, // Example count
+      pathWhenClick: "/",
+      titleKey: "contact_us_count",
+      contentKey: "contact_us__Count_in_your_Application"
+    },
+    {
+      icon: <FaFirstOrder className="warning" size={20} />,
+      count: data?.quotation_count, // Example count
+      pathWhenClick: "/",
+      titleKey: "quotation_count",
+      contentKey: "quotation_count_in_your_Application"
+    }
+  ];
+
+  if(isLoading){
+    return <Spin/>
+  }
+  return (
+    <>
+      <Row xs={1} sm={1} md={1} lg={3} xl={3}>
+        {cardsData.map((card, index) => (
+          <Col key={index} style={{ padding: "0.5rem" }}>
+            <div style={{ cursor: "pointer" }}>
+              <StatisticsCard
+                pathWhenClick={card.pathWhenClick}
+                icon={card.icon}
+                count={`${card.count ?? 1}`}
+                CardContent={t(`You_have`) + "  " + ((card.count) ?? 1) + "  " + t(card.contentKey)}
+                CardTitle={t(card.titleKey)}
+              />
+            </div>
+          </Col>
+        ))}
+      </Row>
+    </>
+  );
+}

src/Pages/Key/Page.tsx

@@ -23,6 +23,16 @@ function Page() {
   
   
     ]
+
+        const ExpandedComponent = ({ data }:any) => {
+      console.log(data,"data");
+      
+      return (
+        <div className='p-2'>
+          <p >value : {data?.value}</p>
+        </div>
+      );
+    };
   return (
     // Pass Status to Layout 
     <DashBody status={status as QueryStatusEnum} >
@@ -43,6 +53,8 @@ function Page() {
         isLoading={false}
         columns={column}
         is_pagination={false}
+        expandableRows 
+        expandableRowsComponent={ExpandedComponent}
     />
       
     

src/Pages/Key/useTableColumns.tsx

@@ -43,7 +43,7 @@ const useTableColumns :any = () => {
               let src = row?.value;
               return <ColumnsImage src={src} />
                         } else {
-                return row?.value;
+                return <div className="single-line-div">{row?.value} </div> ;
             }
         }
     },    

src/Pages/Service/Page.tsx

@@ -15,6 +15,15 @@ function Page() {
     const {data  ,status } = useGetService()
     const navigate = useNavigate()
     
+        const ExpandedComponent = ({ data }:any) => {
+      console.log(data,"data");
+      
+      return (
+        <div className='p-2'>
+          <p >description : {data?.description}</p>
+        </div>
+      );
+    };
   return (
     // Pass Status to Layout 
     <DashBody status={status as QueryStatusEnum} >
@@ -32,6 +41,8 @@ function Page() {
         isLoading={false}
         columns={column}
         is_pagination={false}
+        expandableRows 
+        expandableRowsComponent={ExpandedComponent}
     />
       
     

src/Pages/Service/useTableColumns.tsx

@@ -41,7 +41,7 @@ const useTableColumns :any = () => {
         name: t("description"),
         sortable: false,
         center: "true",
-        cell: (row:any) => row?.description
+        cell: (row:any) => <div className="single-line-div">{row?.description} </div> 
       },
       {
         name: "#",

src/Routes.tsx

@@ -48,6 +48,7 @@ import { FaServicestack } from "react-icons/fa";
 import { ContactsOutlined, HomeFilled, ProjectFilled } from "@ant-design/icons";
 import { MdDeveloperBoard } from "react-icons/md";
 import { BsKey } from "react-icons/bs";
+import HomePage from "./Pages/Home/HomePage";
 
 
 interface RoutesLinksType {
@@ -66,7 +67,7 @@ export const RoutesLinks: RoutesLinksType[] = [
    
     {
         name: "Home",
-        element: <h1>Home Page</h1>,
+        element:<HomePage/>,
         icon: <HomeFilled />,
         href: "/",
     },

src/api/home.ts

@@ -0,0 +1,10 @@
+
+import useGetQueryPagination from "./helper/ueGetPagination";
+
+const API = {
+    GET_ALL: `home`,
+};
+const KEY = "home"
+
+
+export const useGetHome = (params?:any) => useGetQueryPagination(KEY, API.GET_ALL,params);