Merge pull request 'Kartik_Bug#1737 :- UI Implementation in Expense Weidget.' (#507) from Kartik_Bug#1737 into Service_Project_Managment
Reviewed-on: #507
This commit is contained in:
commit
a61e621ce2
@ -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>
|
||||
@ -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 h-100">
|
||||
<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>
|
||||
|
||||
@ -7,11 +7,12 @@ import { FormProvider, useForm } from "react-hook-form";
|
||||
import { formatCurrency, localToUtc } from "../../utils/appUtils";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
import flatColors from "../Charts/flatColor";
|
||||
|
||||
const ExpenseAnalysis = () => {
|
||||
const projectId = useSelectedProject();
|
||||
const [projectName, setProjectName] = useState("All Project");
|
||||
const { projectNames, loading } = useProjectName();
|
||||
const { projectNames } = useProjectName();
|
||||
|
||||
const methods = useForm({
|
||||
defaultValues: { startDate: "", endDate: "" },
|
||||
@ -50,7 +51,7 @@ const ExpenseAnalysis = () => {
|
||||
labels,
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
|
||||
colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455", "#00CFE8", "#FF78B8"],
|
||||
colors: flatColors,
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
@ -79,22 +80,19 @@ const ExpenseAnalysis = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
|
||||
<div className="text-start ">
|
||||
<div className="text-start">
|
||||
<h5 className="mb-1 card-title">Expense Breakdown</h5>
|
||||
{/* <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p> */}
|
||||
<p className="card-subtitle m-0">{projectName}</p>
|
||||
</div>
|
||||
|
||||
<div className="text-end text-sm-end ">
|
||||
<div className="text-end text-sm-end">
|
||||
<FormProvider {...methods}>
|
||||
<DateRangePicker1 />
|
||||
</FormProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card body */}
|
||||
<div className="card-body position-relative">
|
||||
{isLoading && (
|
||||
<div
|
||||
@ -114,7 +112,6 @@ const ExpenseAnalysis = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{!isLoading && report.length > 0 && (
|
||||
<>
|
||||
{isFetching && (
|
||||
@ -123,50 +120,59 @@ const ExpenseAnalysis = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="d-flex justify-content-center mb-3">
|
||||
<Chart
|
||||
options={donutOptions}
|
||||
series={series}
|
||||
type="donut"
|
||||
width="100%"
|
||||
height={320}
|
||||
/>
|
||||
</div>
|
||||
<div className="row">
|
||||
{/* Chart Column */}
|
||||
<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="70%"
|
||||
height={320}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-2 w-100">
|
||||
<div className="row g-2">
|
||||
{report.map((item, idx) => (
|
||||
<div
|
||||
className="col-12 col-sm-6 d-flex align-items-start"
|
||||
key={idx}
|
||||
>
|
||||
<div className="avatar me-2">
|
||||
<span
|
||||
className="avatar-initial rounded-2"
|
||||
style={{
|
||||
backgroundColor:
|
||||
donutOptions.colors[idx % donutOptions.colors.length],
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-receipt fs-4"></i>
|
||||
</span>
|
||||
{/* Data/Legend Column */}
|
||||
<div className="col-12 mt-6 col-lg-6">
|
||||
<div className="row g-4">
|
||||
{report.map((item, idx) => (
|
||||
<div
|
||||
className="col-6"
|
||||
key={idx}
|
||||
style={{
|
||||
borderLeft: `3px solid ${flatColors[idx % flatColors.length]}`,
|
||||
}}
|
||||
>
|
||||
<div className="d-flex flex-column text-start">
|
||||
<small
|
||||
className="fw-semibold text-wrap text-dark"
|
||||
style={{
|
||||
fontSize: "0.8rem",
|
||||
whiteSpace: "normal",
|
||||
wordBreak: "break-word",
|
||||
lineHeight: "1.2",
|
||||
}}
|
||||
>
|
||||
{item.projectName}
|
||||
</small>
|
||||
<span
|
||||
className="fw-semibold text-muted"
|
||||
style={{
|
||||
fontSize: "0.75rem",
|
||||
}}
|
||||
>
|
||||
{formatCurrency(item.totalApprovedAmount)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column gap-1 text-start">
|
||||
<small className="fw-semibold">{item.projectName}</small>
|
||||
<span className="fw-semibold text-muted ms-1">
|
||||
{formatCurrency(item.totalApprovedAmount)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -103,7 +103,7 @@ const ExpenseStatus = () => {
|
||||
</div>
|
||||
<div>
|
||||
<small
|
||||
className={`text-royalblue ${countDigit(item?.count || 0) >= 3 ? "text-xl" : "text-2xl"
|
||||
className={`text-royalblue ${countDigit(item?.count || 0) >= 3 ? "text-xl" : "text-xl"
|
||||
} text-gray-500`}
|
||||
>
|
||||
{item?.count || 0}
|
||||
@ -137,7 +137,7 @@ const ExpenseStatus = () => {
|
||||
</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<span
|
||||
className={`text-end text-royalblue ${countDigit(data?.totalAmount || 0) > 3 ? "text-" : "text-3xl"
|
||||
className={`text-end text-royalblue ${countDigit(data?.totalAmount || 0) > 3 ? "text-xl" : "text-3xl"
|
||||
} text-md`}
|
||||
>
|
||||
{formatCurrency(data?.totalAmount || 0)}
|
||||
|
||||
@ -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 =
|
||||
|
||||
@ -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)
|
||||
@ -165,7 +165,7 @@ const ProjectOverview = ({ project }) => {
|
||||
}, [selectedProject]);
|
||||
|
||||
return (
|
||||
<div className="card" style={{ minHeight: "490px" }}>
|
||||
<div className="card h-100">
|
||||
<div className="card-header text-start">
|
||||
<h5 className="card-action-title mb-0">
|
||||
{" "}
|
||||
@ -173,78 +173,78 @@ const ProjectOverview = ({ project }) => {
|
||||
<span className="ms-2 fw-bold">Project Statistics</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<ul className="list-unstyled m-0 p-0">
|
||||
<li className="d-flex flex-wrap">
|
||||
<div className="w-100 d-flex flex-wrap">
|
||||
{/* Centered Chart */}
|
||||
<div className="w-100 d-flex justify-content-center mb-3">
|
||||
<div >
|
||||
<Chart
|
||||
options={radialBarOptions}
|
||||
series={radialBarOptions.series}
|
||||
type="radialBar"
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Section */}
|
||||
<div className="mb-2" style={{ flex: "1 1 auto" }}>
|
||||
<div>
|
||||
{/* Tasks Planned */}
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<div className="avatar me-2">
|
||||
<span className="avatar-initial rounded-2 bg-label-primary">
|
||||
<i className="bx bx-check text-primary fs-4"></i>
|
||||
</span>
|
||||
<div className="card-body">
|
||||
<ul className="list-unstyled m-0 p-0">
|
||||
<li className="d-flex flex-wrap">
|
||||
<div className="w-100 d-flex flex-wrap">
|
||||
{/* Centered Chart */}
|
||||
<div className="w-100 d-flex justify-content-center mb-3">
|
||||
<div >
|
||||
<Chart
|
||||
options={radialBarOptions}
|
||||
series={radialBarOptions.series}
|
||||
type="radialBar"
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column text-start">
|
||||
<small className="fw-bold">Tasks Planned</small>
|
||||
<h5 className="mb-0">
|
||||
{FormattedNumber(current_project?.plannedWork)}
|
||||
</h5>
|
||||
|
||||
{/* Info Section */}
|
||||
<div className="mb-2" style={{ flex: "1 1 auto" }}>
|
||||
<div>
|
||||
{/* Tasks Planned */}
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<div className="avatar me-2">
|
||||
<span className="avatar-initial rounded-2 bg-label-primary">
|
||||
<i className="bx bx-check text-primary fs-4"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex flex-column text-start">
|
||||
<small className="fw-bold">Tasks Planned</small>
|
||||
<h5 className="mb-0">
|
||||
{FormattedNumber(current_project?.plannedWork)}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tasks Completed */}
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<div className="avatar me-2">
|
||||
<span className="avatar-initial rounded-2 bg-label-info">
|
||||
<i className="bx bx-star text-info fs-4"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex flex-column text-start">
|
||||
<small className="fw-bold">Tasks Completed</small>
|
||||
<h5 className="mb-0">
|
||||
{FormattedNumber(current_project?.completedWork)}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Size */}
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="avatar me-2">
|
||||
<span className="avatar-initial rounded-2 bg-label-primary">
|
||||
<i className="bx bx-group text-primary fs-4"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex flex-column text-start">
|
||||
<small className="fw-bold">Current Team Size</small>
|
||||
<h5 className="mb-0">
|
||||
{FormattedNumber(current_project?.teamSize)}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tasks Completed */}
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<div className="avatar me-2">
|
||||
<span className="avatar-initial rounded-2 bg-label-info">
|
||||
<i className="bx bx-star text-info fs-4"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex flex-column text-start">
|
||||
<small className="fw-bold">Tasks Completed</small>
|
||||
<h5 className="mb-0">
|
||||
{FormattedNumber(current_project?.completedWork)}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Size */}
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="avatar me-2">
|
||||
<span className="avatar-initial rounded-2 bg-label-primary">
|
||||
<i className="bx bx-group text-primary fs-4"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex flex-column text-start">
|
||||
<small className="fw-bold">Current Team Size</small>
|
||||
<h5 className="mb-0">
|
||||
{FormattedNumber(current_project?.teamSize)}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectOverview;
|
||||
export default ProjectStatistics;
|
||||
@ -72,7 +72,7 @@ const AddPayment = ({ onClose }) => {
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label required>Transaction Date </Label>
|
||||
<DatePicker
|
||||
<DatePicker className="w-100"
|
||||
name="paymentReceivedDate"
|
||||
control={control}
|
||||
minDate={
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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}`),
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user