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

19
src/utils/dateUtils.jsx
View File

@ -94,10 +94,21 @@ export const getCompletionPercentage = (completedWork, plannedWork)=> {
return clamped.toFixed(2); return clamped.toFixed(2);
} }
export const formatDate_DayMonth = (dateInput)=>{ // export const formatDate_DayMonth = (dateInput)=>{
const date = new Date(dateInput); // const date = new Date(dateInput);
return format(date, "d MMM"); // 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)=>{ export const getTenantStatus =(statusId)=>{
return ActiveTenant === statusId ? " bg-label-success":"bg-label-secondary" return ActiveTenant === statusId ? " bg-label-success":"bg-label-secondary"