Implementing Spinner and Removing error in Dashboard.
This commit is contained in:
parent
ec38e8f9e0
commit
d18eabf6f5
@ -1,11 +1,14 @@
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import ReactApexChart from "react-apexcharts";
|
||||
import moment from "moment";
|
||||
import { useAttendanceOverviewData } from "../../hooks/useDashboard_Data";
|
||||
import flatColors from "../Charts/flatColor";
|
||||
import ChartSkeleton from "../Charts/Skelton";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { formatDate_DayMonth } from "../../utils/dateUtils";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
|
||||
const formatDate_DayMonth = (dateStr) => moment(dateStr).format("DD MMM YY");
|
||||
|
||||
const AttendanceOverview = () => {
|
||||
const [dayRange, setDayRange] = useState(7);
|
||||
@ -22,6 +25,7 @@ const AttendanceOverview = () => {
|
||||
// Use empty array while loading
|
||||
const attendanceData = attendanceOverviewData || [];
|
||||
|
||||
// Prepare data for chart and table
|
||||
const { tableData, roles, dates } = useMemo(() => {
|
||||
if (!attendanceData || attendanceData.length === 0) {
|
||||
return { tableData: [], roles: [], dates: [] };
|
||||
@ -49,34 +53,60 @@ const AttendanceOverview = () => {
|
||||
return { tableData, roles: uniqueRoles, dates: sortedDates };
|
||||
}, [attendanceData]);
|
||||
|
||||
// Chart data
|
||||
const chartSeries = roles.map((role) => ({
|
||||
name: role,
|
||||
data: tableData.map((row) => row[role]),
|
||||
}));
|
||||
|
||||
// Chart options
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
type: "bar",
|
||||
stacked: true,
|
||||
stacked: true, // make false if you want side-by-side bars
|
||||
height: 400,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: { bar: { borderRadius: 2, columnWidth: "60%" } },
|
||||
xaxis: { categories: tableData.map((row) => row.date) },
|
||||
yaxis: {
|
||||
show: true,
|
||||
axisBorder: { show: true, color: "#78909C" },
|
||||
axisTicks: { show: true, color: "#78909C", width: 6 },
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
columnWidth: "55%",
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: tableData.map((row) => row.date),
|
||||
labels: {
|
||||
rotate: -45,
|
||||
style: { fontSize: "12px" },
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: { show: true, color: "#78909C" },
|
||||
axisTicks: { show: true, color: "#78909C" },
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
horizontalAlign: "center",
|
||||
fontSize: "12px",
|
||||
},
|
||||
grid: {
|
||||
borderColor: "#e0e0e0",
|
||||
strokeDashArray: 3,
|
||||
},
|
||||
legend: { position: "bottom" },
|
||||
fill: { opacity: 1 },
|
||||
colors: roles.map((_, i) => flatColors[i % flatColors.length]),
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: (val) => `${val} present`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white p-4 rounded shadow d-flex flex-column position-relative">
|
||||
<div className="bg-white p-4 rounded shadow d-flex flex-column h-100">
|
||||
{/* Header */}
|
||||
<div className="row mb-3 align-items-center">
|
||||
<div className="col-md-6 text-start">
|
||||
<div className="col-md-6 text-start mb-6">
|
||||
<p className="mb-1 fs-6 fs-md-5 fw-medium">Attendance Overview</p>
|
||||
<p className="card-subtitle text-muted mb-0">
|
||||
Role-wise present count
|
||||
@ -84,6 +114,7 @@ const AttendanceOverview = () => {
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 d-flex flex-column align-items-end gap-2">
|
||||
{/* Day range dropdown */}
|
||||
<select
|
||||
className="form-select form-select-sm w-auto"
|
||||
value={dayRange}
|
||||
@ -94,11 +125,11 @@ const AttendanceOverview = () => {
|
||||
<option value={30}>Last 30 Days</option>
|
||||
</select>
|
||||
|
||||
{/* View toggle buttons */}
|
||||
<div className="d-flex gap-2 justify-content-end">
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${
|
||||
view === "chart" ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
className={`btn btn-sm p-1 ${view === "chart" ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setView("chart")}
|
||||
title="Chart View"
|
||||
>
|
||||
@ -106,9 +137,8 @@ const AttendanceOverview = () => {
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${
|
||||
view === "table" ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
className={`btn btn-sm p-1 ${view === "table" ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setView("table")}
|
||||
title="Table View"
|
||||
>
|
||||
@ -118,28 +148,34 @@ const AttendanceOverview = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="flex-grow-1 d-flex align-items-center justify-content-center position-relative">
|
||||
{isLoading && (
|
||||
{/* Content */}
|
||||
<div className="flex-grow-1 d-flex align-items-center justify-content-center ">
|
||||
{/* {isLoading ? (
|
||||
<div className="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-white bg-opacity-50">
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && (!attendanceData || attendanceData.length === 0) ? (
|
||||
) : !attendanceData || attendanceData.length === 0 ? (
|
||||
<div
|
||||
className="text-muted fw-semibold d-flex align-items-center justify-content-center"
|
||||
style={{ minHeight: "250px" }}
|
||||
>
|
||||
No data found
|
||||
</div>
|
||||
) : view === "chart" ? ( */}
|
||||
{isLoading ? (
|
||||
<SpinnerLoader />
|
||||
) : error ? (
|
||||
<p className="text-danger">{error}</p>
|
||||
) : attendanceOverviewData.length === 0 ||
|
||||
attendanceOverviewData.every((item) => item.present === 0) ? (
|
||||
<div className="text-center text-dark">No data found</div>
|
||||
) : view === "chart" ? (
|
||||
<div className="w-100">
|
||||
<ReactApexChart
|
||||
options={chartOptions}
|
||||
series={chartSeries}
|
||||
type="bar"
|
||||
height={300}
|
||||
height={350}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
@ -156,7 +192,7 @@ const AttendanceOverview = () => {
|
||||
<th style={{ background: "#f8f9fa" }}>Role</th>
|
||||
{dates.map((date, idx) => (
|
||||
<th key={idx} style={{ background: "#f8f9fa" }}>
|
||||
{date}
|
||||
{moment(date, "DD MMM YY").format("DD MMM")}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
@ -165,15 +201,13 @@ const AttendanceOverview = () => {
|
||||
<tbody>
|
||||
{roles.map((role) => (
|
||||
<tr key={role}>
|
||||
<td className="fw-medium text-start table-cell">{role}</td>
|
||||
<td className="fw-medium text-start">{role}</td>
|
||||
{tableData.map((row, idx) => {
|
||||
const value = row[role];
|
||||
return (
|
||||
<td
|
||||
key={idx}
|
||||
style={
|
||||
value > 0 ? { backgroundColor: "#e9ecef" } : {}
|
||||
}
|
||||
style={value > 0 ? { backgroundColor: "#d5d5d5" } : {}}
|
||||
>
|
||||
{value}
|
||||
</td>
|
||||
@ -190,4 +224,4 @@ const AttendanceOverview = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default AttendanceOverview;
|
||||
export default AttendanceOverview;
|
||||
@ -59,7 +59,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="row vh-100">
|
||||
<div className="row">
|
||||
{!isAllProjectsSelected && (
|
||||
<div className="col-12 col-md-6 mb-sm-0 mb-4 ">
|
||||
<AttendanceOverview />
|
||||
|
||||
@ -5,6 +5,7 @@ import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { DateRangePicker1 } from "../common/DateRangePicker";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { formatCurrency, localToUtc } from "../../utils/appUtils";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
|
||||
const ExpenseAnalysis = () => {
|
||||
const projectId = useSelectedProject();
|
||||
@ -54,32 +55,32 @@ const ExpenseAnalysis = () => {
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options: {
|
||||
chart: { width: "100%", height: 350 },
|
||||
legend: { position: "bottom" },
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
options: {
|
||||
chart: { width: "100%", height: 300 },
|
||||
dataLabels: { style: { fontSize: "11px" } },
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
options: {
|
||||
chart: { width: "100%", height: 250 },
|
||||
legend: { fontSize: "10px" },
|
||||
plotOptions: {
|
||||
pie: { donut: { size: "65%" } },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options: {
|
||||
chart: { width: "100%", height: 350 },
|
||||
legend: { position: "bottom" },
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
{
|
||||
breakpoint: 992,
|
||||
options: {
|
||||
chart: { width: "100%", height: 300 },
|
||||
dataLabels: { style: { fontSize: "11px" } },
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
options: {
|
||||
chart: { width: "100%", height: 250 },
|
||||
legend: { fontSize: "10px" },
|
||||
plotOptions: {
|
||||
pie: { donut: { size: "65%" } },
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
@ -98,19 +99,24 @@ const ExpenseAnalysis = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="card-body position-relative">
|
||||
{isLoading && (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "200px" }}
|
||||
style={{ minHeight: "50vh" }}
|
||||
>
|
||||
<span>Loading...</span>
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && report.length === 0 && (
|
||||
<div className="d-flex justify-content-center align-items-center">No data found</div>
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center text-muted"
|
||||
style={{ height: "300px" }}
|
||||
>
|
||||
No data found
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && report.length > 0 && (
|
||||
|
||||
@ -5,6 +5,7 @@ import { useSelector } from "react-redux";
|
||||
import { useExpenseDataByProject } from "../../hooks/useDashboard_Data";
|
||||
import { formatCurrency } from "../../utils/appUtils";
|
||||
import { formatDate_DayMonth } from "../../utils/dateUtils";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
|
||||
const ExpenseByProject = () => {
|
||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||
@ -74,10 +75,10 @@ const ExpenseByProject = () => {
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="card shadow-sm rounded ">
|
||||
<div className="card shadow-sm h-100 rounded ">
|
||||
{/* Header */}
|
||||
<div className="card-header">
|
||||
<div className="d-flex justify-content-between align-items-center mb-3 mt-3">
|
||||
<div className="d-flex justify-content-between align-items-center mb-3 mt-1">
|
||||
<div className="text-start">
|
||||
<p className="mb-1 fw-medium fs-6 fs-md-5 ">Monthly Expense -</p>
|
||||
<p className="card-subtitle me-5 mb-0">Detailed project expenses</p>
|
||||
@ -93,7 +94,7 @@ const ExpenseByProject = () => {
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end ">
|
||||
{ExpenseCategoryType.map((cat) => (
|
||||
<li>
|
||||
<li key={cat.id}>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => {
|
||||
@ -143,15 +144,18 @@ const ExpenseByProject = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chart */}
|
||||
{/* Chart */}
|
||||
<div className="card-body bg-white text-dark p-3 rounded" style={{ minHeight: "210px" }}>
|
||||
{isLoading ? (
|
||||
<p>Loading chart...</p>
|
||||
<div className="d-flex justify-content-center align-items-center py-5">
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
) : !expenseApiData || expenseApiData.length === 0 ? (
|
||||
<div className="text-center text-muted py-5">No data found</div>
|
||||
<div className="text-center text-muted py-12">No data found</div>
|
||||
) : (
|
||||
<Chart options={options} series={series} type="bar" height={235} />
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -20,13 +20,13 @@ const Loader = () => {
|
||||
export default Loader;
|
||||
|
||||
|
||||
export const SpinnerLoader = ()=>{
|
||||
export const SpinnerLoader = () => {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<div className="spinner-border text-primary mb-3" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p className="text-secondary mb-0">Loading data... Please wait</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="spinner-border text-primary mb-3" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p className="text-secondary mb-0">Loading data... </p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user