Correction in UI in Dashboard weidget.

src/components/Dashboard/AttendanceOverview.jsx

@@ -100,9 +100,9 @@ const AttendanceOverview = () => {
   };
 
   return (
-    <div className="bg-white p-4 rounded shadow d-flex flex-column h-100">
+    <div className="bg-white px-4 rounded shadow d-flex flex-column h-100">
       {/* Header */}
-      <div className="d-flex justify-content-between align-items-center mb-3">
+      <div className="d-flex mt-2 justify-content-between align-items-center mb-3">
         <div className="card-title mb-0 text-start">
           <h5 className="mb-1 fw-bold">Attendance Overview</h5>
           <p className="card-subtitle">Role-wise present count</p>

src/components/Dashboard/Dashboard.jsx

@@ -12,11 +12,11 @@ import Teams from "./Teams";
 import TasksCard from "./Tasks";
 import ProjectCompletionChart from "./ProjectCompletionChart";
 import ProjectProgressChart from "./ProjectProgressChart";
-import ProjectOverview from "../Project/ProjectOverview";
+import AttendanceOverview from "./AttendanceOverview";
-import AttendanceOverview from "./AttendanceChart";
 import ExpenseAnalysis from "./ExpenseAnalysis";
 import ExpenseStatus from "./ExpenseStatus";
 import ExpenseByProject from "./ExpenseByProject";
+import ProjectStatistics from "../Project/ProjectStatistics";
 
 const Dashboard = () => {
 
@@ -29,16 +29,16 @@ const Dashboard = () => {
             <div className="row gy-4">
                 {isAllProjectsSelected && (
                     <div className="col-sm-6 col-lg-4">
-                        <Projects  />
+                        <Projects />
                     </div>
                 )}
 
                 <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-                    <Teams  />
+                    <Teams />
                 </div>
 
                 <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-                    <TasksCard/>
+                    <TasksCard />
                 </div>
 
                 {isAllProjectsSelected && (
@@ -46,32 +46,31 @@ const Dashboard = () => {
                         <ProjectCompletionChart />
                     </div>
                 )}
-
-                {!isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <ProjectOverview />
-                    </div>
-                )}
-
                 <div className="col-xxl-6 col-lg-6">
                     <ProjectProgressChart />
                 </div>
-                <div className="col-12 col-xl-8">
-                    <div className="card">
-                        <ExpenseAnalysis />
-                    </div>
-                </div>
-
-                <div className="col-12 col-xl-4 col-md-6">
-                    <div className="card h-100">
-                        <ExpenseStatus />
-                    </div>
-                </div>
                 {!isAllProjectsSelected && (
                     <div className="col-12 col-md-6 mb-sm-0 mb-4">
                         <AttendanceOverview />
                     </div>
                 )}
+
+                {!isAllProjectsSelected && (
+                    <div className="col-xxl-4 col-lg-4">
+                        <ProjectStatistics />
+                    </div>
+                )}
+                <div className="col-12 col-xl-4 col-md-6">
+                    <div className="card ">
+                        <ExpenseStatus />
+                    </div>
+                </div>
+
+                <div className="col-12 col-xl-8">
+                    <div className="card h-100">
+                        <ExpenseAnalysis />
+                    </div>
+                </div>
                 <div className="col-12 col-md-6">
                     <ExpenseByProject />
                 </div>

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -122,18 +122,18 @@ const ExpenseAnalysis = () => {
 
             <div className="row">
               {/* Chart Column */}
-              <div className="col-12 col-lg-6 d-flex justify-content-center mb-3 mb-lg-0">
+              <div className="col-12 col-lg-6 d-flex justify-content-center mt-5 mb-3 mb-lg-0">
                 <Chart
                   options={donutOptions}
                   series={series}
                   type="donut"
-                  width="80%"
+                  width="70%"
                   height={320}
                 />
               </div>
 
               {/* Data/Legend Column */}
-              <div className="col-12 col-lg-6">
+              <div className="col-12 mt-6 col-lg-6">
                 <div className="row g-4">
                   {report.map((item, idx) => (
                     <div

src/components/Dashboard/ExpenseByProject.jsx

@@ -92,7 +92,7 @@ const ExpenseByProject = () => {
     <div className="card shadow-sm h-100 rounded ">
       {/* Header */}
       <div className="card-header">
-        <div className="d-flex justify-content-start align-items-center mb-1 mt-1">
+        <div className="d-flex justify-content-between align-items-center mb-1 mt-1">
           <div className="text-start">
             <h5 className="mb-1 me-6 card-title">Monthly Expense -</h5>
             <p className="card-subtitle m-0">{projectName}</p>

src/components/Dashboard/ProjectCompletionChart.jsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
 import HorizontalBarChart from "../Charts/HorizontalBarChart";
 import { useProjects } from "../../hooks/useProjects";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
 
 const ProjectCompletionChart = () => {
-  const { data: projects = [], isLoading: loading, isError, error } = useProjects();
 
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data: projects, isLoading: loading, isError, error } = useProjects(currentPage, ITEMS_PER_PAGE);
 
+  console.log("Kartik", projects)
   // Bar chart logic
   const projectNames = projects?.map((p) => p.name) || [];
   const projectProgress =

src/components/Project/ProjectStatistics.jsx

@@ -9,7 +9,7 @@ import {
 import ReactApexChart from "react-apexcharts";
 import Chart from "react-apexcharts";
 
-const ProjectOverview = ({ project }) => {
+const ProjectStatistics = ({ project }) => {
   const { data } = useProjects();
   const [current_project, setCurrentProject] = useState(
     data?.find((pro) => pro.id == project)
@@ -247,4 +247,4 @@ const ProjectOverview = ({ project }) => {
   );
 };
 
-export default ProjectOverview;
+export default ProjectStatistics;

src/hooks/useProjects.js

@@ -20,13 +20,13 @@ export const useCurrentService = () => {
 
 // ------------------------------Query-------------------
 
-export const useProjects = (pageSize,pageNumber) => {
+export const useProjects = (pageNumber,pageSize) => {
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
   return useQuery({
-    queryKey: ["ProjectsList",pageSize,pageNumber],
+    queryKey: ["ProjectsList",pageNumber,pageSize],
     queryFn: async () => {
-      const response = await ProjectRepository.getProjectList(pageSize,pageNumber);
+      const response = await ProjectRepository.getProjectList(pageNumber,pageSize);
-      return response.data;
+      return response?.data?.data;
     },
     enabled: !!loggedUser,
   });

src/pages/project/ProjectDetails.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
-import ProjectOverview from "../../components/Project/ProjectOverview";
+import ProjectOverview from "../../components/Project/ProjectStatistics";
 import AboutProject from "../../components/Project/AboutProject";
 import ProjectNav from "../../components/Project/ProjectNav";
 import Teams from "../../components/Project/Team/Teams";
@@ -15,7 +15,7 @@ import { useProjectDetails, useProjectName } from "../../hooks/useProjects";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
 import eventBus from "../../services/eventBus";
 import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
-import AttendanceOverview from "../../components/Dashboard/AttendanceChart";
+import AttendanceOverview from "../../components/Dashboard/AttendanceOverview";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import ProjectDocuments from "../../components/Project/ProjectDocuments";
 import ProjectSetting from "../../components/Project/ProjectSetting";

src/repositories/ProjectRepository.jsx

@@ -1,7 +1,7 @@
 import { api } from "../utils/axiosClient";
 
 const ProjectRepository = {
-  getProjectList: (pageSize,pageNumber) => api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
+  getProjectList: (pageNumber,pageSize) => api.get(`/api/project/list?&pageNumber=${pageNumber}&pageSize=${pageSize}`),
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),