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

Adding Spinner in All files.

Browse Source
This commit is contained in:
Kartik Sharma 2025-10-31 12:19:16 +05:30
parent 86f931929a
commit dfad5aac76
19 changed files with 128 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Activities/InfraPlanning.jsx
View File

@ -24,7 +24,7 @@ import { useProfile } from "../../hooks/useProfile";
import { refreshData, setProjectId } from "../../slices/localVariablesSlice";
import InfraTable from "../Project/Infrastructure/InfraTable";
import { useSelectedProject } from "../../slices/apiDataManager";
import Loader from "../common/Loader";
import { SpinnerLoader } from "../common/Loader";
const InfraPlanning = () => {
const { profile: LoggedUser, refetch: fetchData } = useProfile();
@ -57,9 +57,17 @@ const InfraPlanning = () => {
}
if (isLoading) {
return <Loader />;
return(
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "60vh" }}
>
<SpinnerLoader />
</div>
);
}
if (isFetched && (!projectInfra || projectInfra.length === 0)) {
return (
<div

11
src/components/Charts/HorizontalBarChart.jsx
View File

@ -30,7 +30,6 @@ const HorizontalBarChart = ({
>
<SpinnerLoader />
</div>
{/* Replace this with a skeleton or spinner if you prefer */}
</div>
);
}
@ -43,8 +42,16 @@ const HorizontalBarChart = ({
categories.length === seriesData.length;
if (!hasValidData) {
return <div className="text-center text-gray-500">No data to display</div>;
return (
<div
className="d-flex justify-content-center align-items-center text-muted"
style={{ height: "380px" }}
>
No data to display
</div>
);
}
// Combine seriesData and categories, then sort in descending order
const combined = seriesData.map((value, index) => ({
value,

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

@ -99,7 +99,7 @@ const ExpenseAnalysis = () => {
{isLoading && (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "200px" }}
style={{ minHeight: "50vh" }}
>
<SpinnerLoader />
</div>

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

@ -7,6 +7,7 @@ import { formatCurrency } from "../../utils/appUtils";
import { formatDate_DayMonth } from "../../utils/dateUtils";
import { useProjectName } from "../../hooks/useProjects";
import { useSelectedProject } from "../../slices/apiDataManager";
import { SpinnerLoader } from "../common/Loader";
const ExpenseByProject = () => {
const projectId = useSelector((store) => store.localVariables.projectId);
@ -163,12 +164,15 @@ const ExpenseByProject = () => {
{/* 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>
) : (
<Chart options={options} series={series} type="bar" height={235} />
)}
</div>
</div>

10
src/components/Project/Infrastructure/WorkArea.jsx
View File

@ -16,6 +16,7 @@ import { useParams } from "react-router-dom";
import ProgressBar from "../../common/ProgressBar";
import { formatNumber } from "../../../utils/dateUtils";
import { useServices } from "../../../hooks/masterHook/useMaster";
import { SpinnerLoader } from "../../common/Loader";
const WorkArea = ({ workArea, floor, forBuilding }) => {
const selectedProject = useSelectedProject()
@ -108,7 +109,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
<ProgressBar
completedWork={formatNumber(workArea?.completedWork)}
plannedWork={formatNumber(workArea?.plannedWork)}
className="m-0 my-2 " height="6px"rounded showLabel={true}
className="m-0 my-2 " height="6px" rounded showLabel={true}
/>
</div>
</div>
@ -122,7 +123,12 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
>
<div className="accordion-body px-6">
{isLoading || ProjectTaskList === undefined ? (
<div className="text-center py-2 text-muted">Loading activities...</div>
<div
className="d-flex justify-content-center align-items-center text-muted"
style={{ height: "120px" }}
>
<SpinnerLoader />
</div>
) : ProjectTaskList?.length === 0 ? (
<div className="text-center py-2 text-muted">No activities available for this work area.</div>
) : ProjectTaskList?.length > 0 ? (

1
src/components/Project/ProjectCardView.jsx
View File

@ -1,6 +1,5 @@
import React from 'react'
import { useProjects } from '../../hooks/useProjects'
import Loader from '../common/Loader'
import ProjectCard from './ProjectCard'
const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {

18
src/components/Project/ProjectInfra.jsx
View File

@ -29,6 +29,7 @@ import eventBus from "../../services/eventBus";
import { useParams } from "react-router-dom";
import GlobalModel from "../common/GlobalModel";
import { setService } from "../../slices/globalVariablesSlice";
import { SpinnerLoader } from "../common/Loader";
const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
const projectId = useSelectedProject();
@ -186,21 +187,24 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
)}
</div>
</div>
<div className="row ">
{isLoading && <p>Loading....</p>}
{projectInfra && projectInfra?.length > 0 && (
<div className="row modal-min-h">
{isLoading ? (
<div className="d-flex justify-content-center align-items-center py-5">
<SpinnerLoader />
</div>
) : projectInfra && projectInfra.length > 0 ? (
<InfraTable
buildings={projectInfra}
projectId={projectId}
serviceId={selectedService}
/>
)}
{!isLoading && projectInfra?.length == 0 && (
<div className="mt-5">
<p>No Infra Avaiable</p>
) : (
<div className="text-center py-5">
<p className="text-muted fs-6">No infrastructure data available.</p>
</div>
)}
</div>
</div>
</div>
</div>

17
src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx
View File

@ -2,6 +2,7 @@ import React from "react";
import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
import { useSelectedProject } from "../../../slices/apiDataManager";
import { formatUTCToLocalTime } from "../../../utils/dateUtils";
import { SpinnerLoader } from "../../common/Loader";
const ProjectAssignedOrgs = () => {
const selectedProject = useSelectedProject();
@ -25,12 +26,12 @@ const ProjectAssignedOrgs = () => {
),
align: "text-start",
},
{
{
key: "service",
label: "Service Name",
getValue: (org) => (
<div className="d-flex gap-2 py-1 ">
{org?.service?.name}
{org?.service?.name}
</div>
),
align: "text-start",
@ -49,7 +50,7 @@ const ProjectAssignedOrgs = () => {
align: "text-center",
},
{
{
key: "organizationType",
label: "Organization Type",
getValue: (org) => (
@ -62,7 +63,7 @@ const ProjectAssignedOrgs = () => {
),
align: "text-center",
},
{
{
key: "assignedDate",
label: "Assigned Date",
getValue: (org) => (
@ -78,7 +79,13 @@ const ProjectAssignedOrgs = () => {
},
];
if (isLoading) return <div>Loading...</div>;
if (isLoading)
return (
<div className="d-flex justify-content-center align-items-center py-5">
<SpinnerLoader />
</div>
);
if (isError) return <div>{error.message}</div>;
return (

2
src/components/Project/ProjectOrganizations.jsx
View File

@ -21,7 +21,7 @@ const ProjectOrganizations = () => {
</div>
</div>
<div className="row">
<div className="row modal-min-h">
<ProjectAssignedOrgs />
</div>
</div>

23
src/components/Project/Team/Teams.jsx
View File

@ -21,6 +21,7 @@ import {
import { useSelectedProject } from "../../../slices/apiDataManager";
import GlobalModel from "../../common/GlobalModel";
import TeamAssignToProject from "./TeamAssignToProject";
import { SpinnerLoader } from "../../common/Loader";
const Teams = () => {
const selectedProject = useSelectedProject();
@ -158,16 +159,8 @@ const Teams = () => {
<div>
{!servicesLoading && (
<>
{(!assignedServices || assignedServices.length === 0) && (
<span className="badge bg-label-secondary">
Not Service Assigned
</span>
)}
{assignedServices?.length === 1 && (
<span className="badge bg-label-secondary">
{assignedServices[0].name}
</span>
<h5 className="mb-2">{assignedServices[0].name}</h5>
)}
{assignedServices?.length > 1 && (
@ -189,6 +182,7 @@ const Teams = () => {
)}
</div>
<div className="form-check form-switch d-flex align-items-center text-nowrap">
<input
type="checkbox"
@ -232,7 +226,12 @@ const Teams = () => {
</div>
<div className="table-responsive text-nowrap modal-min-h">
{employeeLodaing && <p>Loading..</p>}
{employeeLodaing && (
<div className="d-flex justify-content-center align-items-center py-5" style={{ minHeight: "50vh" }}>
<SpinnerLoader />
</div>
)}
{projectEmployees && projectEmployees.length > 0 && (
<table className="table ">
<thead>
@ -290,8 +289,8 @@ const Teams = () => {
<td>
{emp.reAllocationDate
? moment(emp.reAllocationDate).format(
"DD-MMM-YYYY"
)
"DD-MMM-YYYY"
)
: "Present"}
</td>
)}

4
src/components/Tenant/Profile.jsx
View File

@ -16,9 +16,9 @@ const Profile = ({ data }) => {
<div className="container-fuid">
<div className="row">
<div className="col-12 my-2">
<div className="col-12">
<div className="d-flex flex-wrap align-items-start position-relative ">
<div className=" d-flex align-items-start gap-2">
<div className=" d-flex align-items-start gap-2 my-1">
{data.logoImage ? (<img
src={data.logoImage}
alt="Preview"

4
src/components/gallary/ImageGalleryListView.jsx
View File

@ -7,7 +7,7 @@ import { useSelectedProject } from "../../slices/apiDataManager";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import Pagination from "../common/Pagination";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Loader from "../common/Loader";
import { SpinnerLoader } from "../common/Loader";
const ImageGalleryListView = ({filter}) => {
const [hoveredImage, setHoveredImage] = useState(null);
@ -47,7 +47,7 @@ const ImageGalleryListView = ({filter}) => {
if (isLoading) {
return (
<div className="page-min-h d-flex justify-content-center align-items-center">
<Loader />
<SpinnerLoader />
</div>
);
}

12
src/pages/Directory/ContactsPage.jsx
View File

@ -11,7 +11,7 @@ import { defaultContactFilter } from "../../components/Directory/DirectorySchema
import { useDebounce } from "../../utils/appUtils";
import Pagination from "../../components/common/Pagination";
import ListViewContact from "../../components/Directory/ListViewContact";
import Loader from "../../components/common/Loader";
import { SpinnerLoader } from "../../components/common/Loader";
// Utility for CSV export
const formatExportData = (contacts) => {
@ -113,7 +113,15 @@ const ContactsPage = ({ projectId, searchText, onExport }) => {
{/* Grid / List View */}
{gridView ? (
<>
{isLoading && <Loader />}
{isLoading && (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "50vh" }}
>
<SpinnerLoader />
</div>
)}
{data?.data?.length === 0 && (
<div className="py-4 text-center">

4
src/pages/Tenant/SelfTenantDetails.jsx
View File

@ -3,7 +3,7 @@ import { useProfile } from "../../hooks/useProfile";
import TenantDetails from "./TenantDetails";
import { VIEW_TENANTS } from "../../utils/constants";
import { useNavigate } from "react-router-dom";
import Loader from "../../components/common/Loader";
import { SpinnerLoader } from "../../components/common/Loader";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
const SelfTenantDetails = () => {
@ -19,7 +19,7 @@ const SelfTenantDetails = () => {
}, [isSelfTenantView, navigate]);
if (loading || !tenantId) {
return <Loader/>;
return <SpinnerLoader/>;
}
return (

34
src/pages/Tenant/TenantDetails.jsx
View File

@ -7,7 +7,7 @@ import { ComingSoonPage } from "../Misc/ComingSoonPage";
import GlobalModel from "../../components/common/GlobalModel";
import EditProfile from "../../components/Tenant/EditProfile";
import SubScriptionHistory from "../../components/Tenant/SubScriptionHistory";
import Loader from "../../components/common/Loader";
import { SpinnerLoader } from "../../components/common/Loader";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_TENANTS, SUPPER_TENANT } from "../../utils/constants";
@ -71,10 +71,14 @@ const TenantDetails = ({
if (!activeTenantId) return <div className="my-4">No tenant selected.</div>;
if (isLoading)
return (
<div className="my-4">
<Loader />
<div
className="page-min-h d-flex justify-content-center align-items-center"
style={{ minHeight: "80vh" }}
>
<SpinnerLoader />
</div>
);
if (isError)
return (
<div className="container-fluid">
@ -110,14 +114,14 @@ const TenantDetails = ({
data={
iTSelf
? [
{ label: "Home", link: "/dashboard" },
{ label: "Tenant Details", link: null },
]
{ label: "Home", link: "/dashboard" },
{ label: "Tenant Details", link: null },
]
: [
{ label: "Home", link: "/dashboard" },
{ label: "Tenant", link: "/tenants" },
{ label: "Tenant Details", link: null },
]
{ label: "Home", link: "/dashboard" },
{ label: "Tenant", link: "/tenants" },
{ label: "Tenant Details", link: null },
]
}
/>
)}
@ -128,9 +132,8 @@ const TenantDetails = ({
<li key={tab.id} className="nav-item">
<button
type="button"
className={`nav-link d-flex align-items-center text-tiny gap-2 ${
index === 0 ? "active" : ""
}`}
className={`nav-link d-flex align-items-center text-tiny gap-2 ${index === 0 ? "active" : ""
}`}
role="tab"
data-bs-toggle="tab"
data-bs-target={`#${tab.id}`}
@ -150,9 +153,8 @@ const TenantDetails = ({
{tabs.map((tab, index) => (
<div
key={tab.id}
className={`tab-pane fade ${
index === 0 ? "show active" : ""
} text-start`}
className={`tab-pane fade ${index === 0 ? "show active" : ""
} text-start`}
id={tab.id}
>
{tab.content}

4
src/pages/authentication/SwitchTenant.jsx
View File

@ -4,7 +4,7 @@ import { useAuthModal, useSelectTenant, useTenants } from "../../hooks/useAuth";
import { useProfile } from "../../hooks/useProfile";
import { useQueryClient } from "@tanstack/react-query";
import AuthRepository from "../../repositories/AuthRepository";
import Loader from "../../components/common/Loader";
import { SpinnerLoader } from "../../components/common/Loader";
const SwitchTenant = () => {
const queryClient = useQueryClient();
@ -99,7 +99,7 @@ const SwitchTenant = () => {
</div>
</div>
);
return <Modal isOpen={isOpen} onClose={onClose} body={isLoading ? <Loader/>:contentBody} />;
return <Modal isOpen={isOpen} onClose={onClose} body={isLoading ? <SpinnerLoader/>:contentBody} />;
};
export default SwitchTenant;

4
src/pages/authentication/TenantSelectionPage.jsx
View File

@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import { useTenants, useSelectTenant, useLogout } from "../../hooks/useAuth.jsx";
import { Link, useNavigate } from "react-router-dom";
import Dashboard from "../../components/Dashboard/Dashboard.jsx";
import Loader from "../../components/common/Loader.jsx";
import { SpinnerLoader } from "../../components/common/Loader.jsx";
const TenantSelectionPage = () => {
const [pendingTenant, setPendingTenant] = useState(null);
@ -45,7 +45,7 @@ const TenantSelectionPage = () => {
isPending ||
(data?.data?.length === 1 && pendingTenant !== null)
) {
return <Loader />;
return <SpinnerLoader />;
}
if (!data?.data?.length) {

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

@ -7,7 +7,7 @@ import AboutProject from "../../components/Project/AboutProject";
import ProjectNav from "../../components/Project/ProjectNav";
import Teams from "../../components/Project/Team/Teams";
import ProjectInfra from "../../components/Project/ProjectInfra";
import Loader from "../../components/common/Loader";
import { SpinnerLoader } from "../../components/common/Loader";
import WorkPlan from "../../components/Project/WorkPlan";
import Breadcrumb from "../../components/common/Breadcrumb";
import { useSelectedProject } from "../../slices/apiDataManager";
@ -20,7 +20,7 @@ import { setProjectId } from "../../slices/localVariablesSlice";
import ProjectDocuments from "../../components/Project/ProjectDocuments";
import ProjectSetting from "../../components/Project/ProjectSetting";
import DirectoryPage from "../Directory/DirectoryPage";
import { useProjectAccess } from "../../hooks/useProjectAccess";
import { useProjectAccess } from "../../hooks/useProjectAccess";
import "./ProjectDetails.css";
import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
@ -65,9 +65,17 @@ const ProjectDetails = () => {
};
if (projectLoading || permsLoading || !projects_Details) {
return <Loader />;
return (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "80vh" }}
>
<SpinnerLoader />
</div>
);
}
const renderContent = () => {
switch (activePill) {
case "profile":

13
src/pages/project/ProjectPage.jsx
View File

@ -7,7 +7,7 @@ import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
import ProjectCardView from "../../components/Project/ProjectCardView";
import usePagination from "../../hooks/usePagination";
import { useProjects } from "../../hooks/useProjects";
import Loader from "../../components/common/Loader";
import { SpinnerLoader } from "../../components/common/Loader";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
const ProjectContext = createContext();
@ -96,7 +96,16 @@ const ProjectPage = () => {
}, [data, isLoading, selectedStatuses]);
if (isLoading) return <div className="page-min-h"><Loader /></div>
if (isLoading)
return (
<div
className="page-min-h d-flex justify-content-center align-items-center"
style={{ minHeight: "80vh" }}
>
<SpinnerLoader />
</div>
);
if (isError) return <div className="page-min-h d-flex justify-content-center align-items-center"><p>{error.message}</p></div>
return (
<ProjectContext.Provider value={contextDispatcher}>