admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Correction in UI in Dashboard weidget.

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-14 12:58:47 +05:30
parent 05f45a66d8
commit 64d96d46d0
9 changed files with 42 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Dashboard/AttendanceChart.jsx → src/components/Dashboard/AttendanceOverview.jsx
View File

@ -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>

45
src/components/Dashboard/Dashboard.jsx
View File

@ -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 "./AttendanceChart";
import AttendanceOverview from "./AttendanceOverview";
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>

6
src/components/Dashboard/ExpenseAnalysis.jsx
View File

@ -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

2
src/components/Dashboard/ExpenseByProject.jsx
View File

@ -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>

7
src/components/Dashboard/ProjectCompletionChart.jsx
View File

@ -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 =

4
src/components/Project/ProjectOverview.jsx → src/components/Project/ProjectStatistics.jsx
View File

@ -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;

8
src/hooks/useProjects.js
View File

@ -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);
return response.data;
const response = await ProjectRepository.getProjectList(pageNumber,pageSize);
return response?.data?.data;
},
enabled: !!loggedUser,
});

4
src/pages/project/ProjectDetails.jsx
View File

@ -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";

2
src/repositories/ProjectRepository.jsx
View File

@ -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}`),