diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index cc22006e..cd39fd82 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -19,7 +19,6 @@ import ExpenseStatus from "./ExpenseStatus"; import ExpenseByProject from "./ExpenseByProject"; const Dashboard = () => { - const { projectsCardData } = useDashboardProjectsCardData(); const { teamsCardData } = useDashboardTeamsCardData(); const { tasksCardData } = useDashboardTasksCardData(); @@ -32,7 +31,7 @@ const Dashboard = () => {
{isAllProjectsSelected && (
- +
)} diff --git a/src/components/Dashboard/DashboardSkeleton.jsx b/src/components/Dashboard/DashboardSkeleton.jsx new file mode 100644 index 00000000..c62a6594 --- /dev/null +++ b/src/components/Dashboard/DashboardSkeleton.jsx @@ -0,0 +1,54 @@ +import React from "react"; + +const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => ( +
+); + +const skeletonStyle = ` +@keyframes skeleton-loading { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} +`; + +export const ProjectCardSkeleton = () => { + return ( + <> + {/* Inject animation CSS once */} + + +
+ {/* Header */} +
+
+ {" "} + Projects +
+
+ + {/* Skeleton body */} +
+
+ + +
+
+ + +
+
+
+ + ); +}; + diff --git a/src/components/Dashboard/Projects.jsx b/src/components/Dashboard/Projects.jsx index 86958aa5..aaa27a06 100644 --- a/src/components/Dashboard/Projects.jsx +++ b/src/components/Dashboard/Projects.jsx @@ -1,6 +1,8 @@ import React, { useEffect } from "react"; import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data"; import eventBus from "../../services/eventBus"; +import ProjectInfra from "../Project/ProjectInfra"; +import { ProjectCardSkeleton } from "./DashboardSkeleton"; const Projects = () => { const { @@ -23,7 +25,7 @@ const Projects = () => { const totalProjects = projectsCardData?.totalProjects ?? 0; const ongoingProjects = projectsCardData?.ongoingProjects ?? 0; - + if(isLoading) return return (
diff --git a/src/components/Organization/OrganizationsList.jsx b/src/components/Organization/OrganizationsList.jsx index 41da2edf..ceacbab5 100644 --- a/src/components/Organization/OrganizationsList.jsx +++ b/src/components/Organization/OrganizationsList.jsx @@ -93,10 +93,12 @@ const OrganizationsList = ({searchText}) => { if (isError) return
{error?.message || "Something went wrong"}
; return ( -
-
-
- +
+
+
{organizationsColumns.map((col) => ( @@ -157,7 +159,6 @@ const OrganizationsList = ({searchText}) => { )} - ); }; diff --git a/src/components/Tenant/TenantsList.jsx b/src/components/Tenant/TenantsList.jsx index 6269a248..089ffe44 100644 --- a/src/components/Tenant/TenantsList.jsx +++ b/src/components/Tenant/TenantsList.jsx @@ -136,7 +136,7 @@ const TenantsList = ({ ); return ( <> -
+
diff --git a/src/components/collections/CollectionList.jsx b/src/components/collections/CollectionList.jsx index 6f64808d..eba51a1d 100644 --- a/src/components/collections/CollectionList.jsx +++ b/src/components/collections/CollectionList.jsx @@ -151,7 +151,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => { if (isError) return

{error.message}

; return ( -
+
{ const [loading, setLoading] = useState(true); const [currentIndex, setCurrentIndex] = useState(index); - console.log(batch); useEffect(() => { setCurrentIndex(index); }, [index, batch]); diff --git a/src/pages/Organization/OrganizationPage.jsx b/src/pages/Organization/OrganizationPage.jsx index 21a28263..95629d87 100644 --- a/src/pages/Organization/OrganizationPage.jsx +++ b/src/pages/Organization/OrganizationPage.jsx @@ -13,7 +13,7 @@ const OrganizationPage = () => { -
+
@@ -42,9 +42,13 @@ const OrganizationPage = () => {
+ +
- +
+ +
); diff --git a/src/pages/Tenant/TenantPage.jsx b/src/pages/Tenant/TenantPage.jsx index 694ff557..3ab2015c 100644 --- a/src/pages/Tenant/TenantPage.jsx +++ b/src/pages/Tenant/TenantPage.jsx @@ -121,7 +121,7 @@ const TenantPage = () => { { label: "Tenant", link: null }, ]} /> -
+
{/* Super Tenant Actions */} {isSuperTenant && (
diff --git a/src/pages/authentication/TenantSelectionPage.jsx b/src/pages/authentication/TenantSelectionPage.jsx index 18028902..b8a5398d 100644 --- a/src/pages/authentication/TenantSelectionPage.jsx +++ b/src/pages/authentication/TenantSelectionPage.jsx @@ -8,35 +8,43 @@ const TenantSelectionPage = () => { const [pendingTenant, setPendingTenant] = useState(null); const navigate = useNavigate(); - const { data, isLoading, isError, error } = useTenants(); + const { data, isLoading, isError } = useTenants(); const { mutate: chooseTenant, isPending } = useSelectTenant(() => { navigate("/dashboard"); }); - const handleTenantselection = (tenantId) => { + const { mutate: handleLogout, isPending: isLogouting } = useLogout(); + + const handleTenantSelection = (tenantId) => { setPendingTenant(tenantId); localStorage.setItem("ctnt", tenantId); chooseTenant(tenantId); }; - - const {mutate:handleLogout,isPending:isLogouting} = useLogout() - + // Auto-select if already stored useEffect(() => { - if (localStorage.getItem("ctnt")) { - chooseTenant(localStorage.getItem("ctnt")) + const storedTenant = localStorage.getItem("ctnt"); + if (storedTenant) { + chooseTenant(storedTenant); } - }, [navigate]); + }, []); + // Auto-select if only one tenant useEffect(() => { if (!isLoading && data?.data?.length === 1) { const tenant = data.data[0]; - handleTenantselection(tenant.id); + handleTenantSelection(tenant.id); } }, [isLoading, data]); - if (isLoading) return ; - - if (isLoading) { + // Show loader if: + // - initial loading + // - only one tenant (auto-selecting) + // - user manually selecting + if ( + isLoading || + isPending || + (data?.data?.length === 1 && pendingTenant !== null) + ) { return ; } @@ -48,7 +56,6 @@ const TenantSelectionPage = () => { ); } - return (
{/* Logo */} @@ -65,20 +72,24 @@ const TenantSelectionPage = () => {

Welcome

- Please select which dashboard you want to explore!!! + Please select which dashboard you want to explore!

-
handleLogout()}> - {isLogouting ? "Please Wait...":SignOut} +
handleLogout()}> + {isLogouting ? ( + "Please Wait..." + ) : ( + + Sign Out + + )}
-
- {/* Card Section */} -
+ {/* Tenant Cards */} +
{data?.data.map((tenant) => (
- {/* Image */}
{ {/* Content */}
- {/* Title */}

{tenant?.name}

- {/* Industry */}

Industry:

@@ -108,21 +117,19 @@ const TenantSelectionPage = () => {

- {/* Description */} {tenant?.description && (

{tenant?.description}

)} - {/* Button */}
@@ -131,8 +138,8 @@ const TenantSelectionPage = () => { ))}
- ); }; -export default TenantSelectionPage; \ No newline at end of file +export default TenantSelectionPage; + diff --git a/src/pages/collections/CollectionPage.jsx b/src/pages/collections/CollectionPage.jsx index aac80d26..298bde19 100644 --- a/src/pages/collections/CollectionPage.jsx +++ b/src/pages/collections/CollectionPage.jsx @@ -82,18 +82,29 @@ const CollectionPage = () => { const handleMarkedPayment = (payload) => { MarkedReceived(payload); }; - if (isAdmin === undefined || - canAddPayment === undefined || - canEditCollection === undefined || - canViewCollection === undefined || + if ( + isAdmin === undefined || + canAddPayment === undefined || + canEditCollection === undefined || + canViewCollection === undefined || canCreate === undefined -) { - return
Checking access...
; -} + ) { + return
Checking access...
; + } -if (!isAdmin && !canAddPayment && !canEditCollection && !canViewCollection && !canCreate) { - return ; -} + if ( + !isAdmin && + !canAddPayment && + !canEditCollection && + !canViewCollection && + !canCreate + ) { + return ( + + ); + } return (
@@ -127,28 +138,31 @@ if (!isAdmin && !canAddPayment && !canEditCollection && !canViewCollection && !c
-
-
+
+
{" "} setSearchText(e.target.value)} - placeholder="search Collection" + placeholder="Search Collection" className="form-control form-control-sm" />
- { (canCreate || isAdmin) && ( - -)} - + {(canCreate || isAdmin) && ( + + )}