91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
import React, { useCallback, useEffect } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
|
|
import eventBus from "../../services/eventBus";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
import { TeamsSkeleton } from "./DashboardSkeleton";
|
|
|
|
const Teams = () => {
|
|
const queryClient = useQueryClient();
|
|
const projectId = useSelectedProject();
|
|
|
|
const {
|
|
data: teamsCardData,
|
|
isLoading,
|
|
isError,
|
|
error,
|
|
isFetching,
|
|
refetch,
|
|
} = useDashboardTeamsCardData(projectId);
|
|
|
|
// Handle real-time updates via eventBus
|
|
const handler = useCallback(
|
|
(msg) => {
|
|
if (msg.activity === 1) {
|
|
queryClient.setQueryData(["dashboardTeams", projectId], (old) => {
|
|
if (!old) return old;
|
|
return {
|
|
...old,
|
|
inToday: (old.inToday || 0) + 1,
|
|
};
|
|
});
|
|
}
|
|
},
|
|
[queryClient, projectId]
|
|
);
|
|
|
|
useEffect(() => {
|
|
eventBus.on("attendance", handler);
|
|
return () => eventBus.off("attendance", handler);
|
|
}, [handler]);
|
|
|
|
const inToday = teamsCardData?.inToday ?? 0;
|
|
const totalEmployees = teamsCardData?.totalEmployees ?? 0;
|
|
|
|
if (isLoading) return <TeamsSkeleton />;
|
|
return (
|
|
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
|
<div className="d-flex justify-content-start align-items-center mb-3">
|
|
<h5 className="fw-bold mb-0 ms-2">
|
|
<i className="bx bx-group text-warning"></i> Teams
|
|
</h5>
|
|
</div>
|
|
|
|
{isError ? (
|
|
<div className="d-flex flex-column justify-content-center align-items-center p-1">
|
|
<i className="bx bx-error-circle bx-sm fs-2 "></i>
|
|
|
|
<small className="text-muted mb-2">
|
|
{error?.message || "Unable to load data at the moment."}
|
|
</small>
|
|
<span
|
|
className={`text-muted ${
|
|
isFetching ? "cursor-wait" : "cursor-pointer"
|
|
}`}
|
|
onClick={refetch}
|
|
>
|
|
<i
|
|
className={`bx bx-refresh me-1 ${isFetching ? "bx-spin" : ""}`}
|
|
></i>{" "}
|
|
Retry
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div className="d-flex justify-content-around align-items-start mt-n2">
|
|
<div>
|
|
<h4 className="mb-0 fw-bold">{totalEmployees.toLocaleString()}</h4>
|
|
<small className="text-muted">Total Employees</small>
|
|
</div>
|
|
<div>
|
|
<h4 className="mb-0 fw-bold">{inToday.toLocaleString()}</h4>
|
|
<small className="text-muted">In Today</small>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Teams;
|