import React from "react";
import { useSelector } from "react-redux";
// import {
//     useDashboardProjectsCardData,
//     useDashboardTeamsCardData,
//     useDashboardTasksCardData,
//     useAttendanceOverviewData
// } 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 ProjectOverview from "../Project/ProjectOverview";
import AttendanceOverview from "./AttendanceChart";
import ExpenseChart from "./ExpenseChart";
import ExpenseChartDesign2 from "./ExpenseChartDesign2";
import ExpenseChartDesign1 from "./ExpenseChartDesign1";
import ExpenseChartBar from "./ExpenseChartBar";

const Dashboard = () => {
    // const { projectsCardData } = useDashboardProjectsCardData();
    // const { teamsCardData } = useDashboardTeamsCardData();
    // const { tasksCardData } = useDashboardTasksCardData();

    // Get the selected project ID from Redux store
    const projectId = useSelector((store) => store.localVariables.projectId);
    const isAllProjectsSelected = projectId === null;

    return (
        <div className="container-fluid mt-5">
            <div className="row gy-4">
                 <div className="col-xxl-6 col-lg-6">
                    <ExpenseChart />
                </div>
                <div className="col-xxl-6 col-lg-6">
                    <ExpenseChartDesign2 />
                </div>
                <div className="col-xxl-6 col-lg-6">
                    <ExpenseChartDesign1 />
                </div>
                <div className="col-xxl-6 col-lg-6">
                    <ExpenseChartBar />
                </div>

              
                {!isAllProjectsSelected && (
                    <div className="col-xxl-6 col-lg-6">
                        <AttendanceOverview /> {/* Removed unnecessary projectId prop */}
                    </div>
                )}
            </div>
        </div>
    );
};

export default Dashboard;