marco.pms.web/src/components/Dashboard/Dashboard.jsx

import React from "react";
import { useSelector } from "react-redux";
import {
  useDashboardProjectsCardData,
  useDashboardTeamsCardData,
  useDashboardTasksCardData,
  useAttendanceOverviewData,
  useGetCollectionOverview,
} from "../../hooks/useDashboard_Data";

import Projects from "./Projects";
import Teams from "./Teams";
import TasksCard from "./Tasks";
import ProjectCompletionChart from "./ProjectCompletionChart";
import ProjectProgressChart from "./ProjectProgressChart";
import AttendanceOverview from "./AttendanceOverview";
import ExpenseAnalysis from "./ExpenseAnalysis";
import ExpenseStatus from "./ExpenseStatus";
import ExpenseByProject from "./ExpenseByProject";
import ProjectStatistics from "../Project/ProjectStatistics";
import ServiceJobs from "./ServiceJobs";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import {
  REGULARIZE_ATTENDANCE,
  SELF_ATTENDANCE,
  TEAM_ATTENDANCE,
} from "../../utils/constants";
import CollectionOverview, { TopicBarChart } from "./CollectionOverview";
import { CollectionOverviewSkeleton } from "./CollectionOverviewSkeleton";

const Dashboard = () => {
  // Get the selected project ID from Redux store
  const projectId = useSelector((store) => store.localVariables.projectId);
  const isAllProjectsSelected = projectId === null;
  const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
  const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
  const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);

  const { data, isLoading, isError } = useGetCollectionOverview();
  console.log("data-->", data);
  return (
    <div className="container-fluid mt-5">
      <div className="row gy-4">
        {isAllProjectsSelected && (
          <div className="col-sm-6 col-lg-4">
            <Projects />
          </div>
        )}

        <div
          className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
            }`}
        >
          <Teams />
        </div>

        <div
          className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
            }`}
        >
          <TasksCard />
        </div>
        <div className="col-12 col-xl-4 col-md-6">
          <div className="card ">
            <ExpenseStatus />
          </div>
        </div>

        <div className="col-12 col-xl-8">
          <div className="card h-100">
            <ExpenseAnalysis />
          </div>
        </div>
        <div className="col-12 col-md-6">
          <ExpenseByProject />
        </div>

        {isAllProjectsSelected && (
          <div className="col-xxl-6 col-lg-6">
            <ProjectCompletionChart />
          </div>
        )}
        <div className="col-xxl-6 col-lg-6">
          <ProjectProgressChart />
        </div>
        {!isAllProjectsSelected &&
          (canRegularize || canTeamAttendance || canSelfAttendance) && (
            <div className="col-12 col-md-6 mb-sm-0 mb-4">
              <AttendanceOverview />
            </div>
          )}

        {!isAllProjectsSelected && (
          <div className="col-xxl-4 col-lg-4">
            <div className="card h-100">
              <ProjectStatistics />
            </div>
          </div>
        )}
        {isAllProjectsSelected && (
          <div className="col-xxl-6 col-lg-6">
            <ServiceJobs />
          </div>
        )}
        <div className="col-md-8">
          {isLoading ? (
            <CollectionOverviewSkeleton />
          ) : (
            data && (
              <div className="card">
                <TopicBarChart data={data} />
              </div>
            )
          )}
        </div>
      </div>
    </div>
  );
};

export default Dashboard;

//  <div class="col-12 col-xl-8">
//           <div class="card h-100">
// <div class="card-header d-flex align-items-center justify-content-between">
//   <h5 class="card-title m-0 me-2">Topic you are interested in</h5>
//   <div class="dropdown">
//     <button
//       class="btn p-0"
//       type="button"
//       id="topic"
//       data-bs-toggle="dropdown"
//       aria-haspopup="true"
//       aria-expanded="false">
//       <i class="bx bx-dots-vertical-rounded bx-lg text-muted"></i>
//     </button>
//     <div class="dropdown-menu dropdown-menu-end" aria-labelledby="topic">
//       <a class="dropdown-item" href="javascript:void(0);">Highest Views</a>
//       <a class="dropdown-item" href="javascript:void(0);">See All</a>
//     </div>
//   </div>
// </div>
//             <div class="card-body row g-3">
//               <div class="col-md-8">
//                 <div id="horizontalBarChart"></div>
//               </div>
//               <div class="col-md-4 d-flex justify-content-around align-items-center">
//                 <div>
//                   <div class="d-flex align-items-baseline">
//                     <span class="text-primary me-2"><i class="bx bxs-circle bx-12px"></i></span>
//                     <div>
//                       <p class="mb-0">UI Design</p>
//                       <h5>35%</h5>
//                     </div>
//                   </div>
//                   <div class="d-flex align-items-baseline my-12">
//                     <span class="text-success me-2"><i class="bx bxs-circle bx-12px"></i></span>
//                     <div>
//                       <p class="mb-0">Music</p>
//                       <h5>14%</h5>
//                     </div>
//                   </div>
//                   <div class="d-flex align-items-baseline">
//                     <span class="text-danger me-2"><i class="bx bxs-circle bx-12px"></i></span>
//                     <div>
//                       <p class="mb-0">React</p>
//                       <h5>10%</h5>
//                     </div>
//                   </div>
//                 </div>

//                 <div>
//                   <div class="d-flex align-items-baseline">
//                     <span class="text-info me-2"><i class="bx bxs-circle bx-12px"></i></span>
//                     <div>
//                       <p class="mb-0">UX Design</p>
//                       <h5>20%</h5>
//                     </div>
//                   </div>
//                   <div class="d-flex align-items-baseline my-12">
//                     <span class="text-secondary me-2"><i class="bx bxs-circle bx-12px"></i></span>
//                     <div>
//                       <p class="mb-0">Animation</p>
//                       <h5>12%</h5>
//                     </div>
//                   </div>
//                   <div class="d-flex align-items-baseline">
//                     <span class="text-warning me-2"><i class="bx bxs-circle bx-12px"></i></span>
//                     <div>
//                       <p class="mb-0">SEO</p>
//                       <h5>9%</h5>
//                     </div>
//                   </div>
//                 </div>
//               </div>
//             </div>
//           </div>
//         </div>