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

Changes in Dshboard weidget

Browse Source
This commit is contained in:
Kartik Sharma 2025-10-04 10:30:13 +05:30
parent 508ef8a626
commit 2db7faeaa3
3 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,6 +54,9 @@ const Dashboard = () => {
</div>
</div>
</div>
<div className="col-xxl-6 col-lg-6">
<ExpenseByProject />
</div>
</div>
);
};

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

@ -3,6 +3,8 @@ import Chart from "react-apexcharts";
import { useExpenseType } from "../../hooks/masterHook/useMaster";
import { useSelector } from "react-redux";
import { useExpenseDataByProject } from "../../hooks/useDashboard_Data";
import { formatCurrency } from "../../utils/appUtils";
import { formatDate_DayMonth } from "../../utils/dateUtils";
const ExpenseByProject = () => {
const projectId = useSelector((store) => store.localVariables.projectId);
@ -22,7 +24,7 @@ const ExpenseByProject = () => {
useEffect(() => {
if (expenseApiData) {
const categories = expenseApiData.map(
(item) => `${item.monthName} ${item.year}`
(item) => formatDate_DayMonth(item.monthName, item.year)
);
const data = expenseApiData.map((item) => item.total);
setChartData({ categories, data });
@ -40,16 +42,17 @@ const ExpenseByProject = () => {
const options = {
chart: { type: "bar", toolbar: { show: false } },
plotOptions: { bar: { horizontal: false, columnWidth: "55%", borderRadius: 4 } },
dataLabels: { enabled: true, formatter: (val) => val },
dataLabels: { enabled: true, formatter: (val) => formatCurrency(val) },
xaxis: {
categories: chartData.categories,
labels: { style: { fontSize: "12px" }, rotate: -45 },
},
tooltip: {
y: {
formatter: (val) => `${val.toLocaleString()} (${getSelectedTypeName()})`,
formatter: (val) => `${formatCurrency(val)} (${getSelectedTypeName()})`,
},
},
annotations: { xaxis: [{ x: 0, strokeDashArray: 0, }] },
fill: { opacity: 1 },
colors: ["#2196f3"],
@ -131,8 +134,8 @@ const ExpenseByProject = () => {
<button
key={item}
className={`border-0 px-2 py-1 text-sm rounded ${range === item
? "text-white bg-primary"
: "text-body bg-transparent"
? "text-white bg-primary"
: "text-body bg-transparent"
}`}
style={{ cursor: "pointer", transition: "all 0.2s ease" }}
onClick={() => setRange(item)}

19
src/utils/dateUtils.jsx
View File

@ -94,10 +94,21 @@ export const getCompletionPercentage = (completedWork, plannedWork)=> {
return clamped.toFixed(2);
}
export const formatDate_DayMonth = (dateInput)=>{
const date = new Date(dateInput);
return format(date, "d MMM");
}
// export const formatDate_DayMonth = (dateInput)=>{
// const date = new Date(dateInput);
// return format(date, "d MMM");
// }
export const formatDate_DayMonth = (monthName, year) => {
if (!monthName || !year) return "";
try {
const shortMonth = monthName.substring(0, 3);
return `${shortMonth} ${year}`;
} catch {
return "";
}
};
export const getTenantStatus =(statusId)=>{
return ActiveTenant === statusId ? " bg-label-success":"bg-label-secondary"