195 lines
9.1 KiB
JavaScript

// import React, { useState, useEffect } from "react";
// import LineChart from "../Charts/LineChart";
// import { useProjects } from "../../hooks/useProjects";
// import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
// import ApexChart from "../Charts/Circlechart";
// const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
// const Activity = () => {
// const { projects } = useProjects();
// const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
// const [selectedDate, setSelectedDate] = useState(today);
// const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
// const initialProjectId = storedProjectId || "all";
// const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
// const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
// const [activeTab, setActiveTab] = useState("all");
// const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
// useDashboard_ActivityData(selectedDate, selectedProjectId);
// useEffect(() => {
// if (selectedProjectId === "all") {
// setDisplayedProjectName("All Projects");
// } else if (projects) {
// const foundProject = projects.find((p) => p.id === selectedProjectId);
// setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
// } else {
// setDisplayedProjectName("Select Project");
// }
// localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
// }, [selectedProjectId, projects]);
// const handleProjectSelect = (projectId) => {
// setSelectedProjectId(projectId);
// };
// const handleDateChange = (e) => {
// setSelectedDate(e.target.value);
// };
// return (
// <div className="card h-100">
// <div className="card-header">
// <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
// <div className="card-title mb-0 text-start">
// <h5 className="mb-1">Activity</h5>
// <p className="card-subtitle text-primary">Activity Progress Chart</p>
// </div>
// <div className="btn-group">
// <button
// className="btn btn-outline-primary btn-sm dropdown-toggle"
// type="button"
// data-bs-toggle="dropdown"
// aria-expanded="false"
// >
// {displayedProjectName}
// </button>
// <ul className="dropdown-menu">
// <li>
// <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
// All Projects
// </button>
// </li>
// {projects?.map((project) => (
// <li key={project.id}>
// <button
// className="dropdown-item"
// onClick={() => handleProjectSelect(project.id)}
// >
// {project.name}
// </button>
// </li>
// ))}
// </ul>
// </div>
// </div>
// </div>
// {/* ✅ Date Picker Aligned Left with Padding */}
// <div className="d-flex justify-content-start ps-3 mb-3">
// <div style={{ width: "150px" }}>
// <input
// type="date"
// className="form-control"
// value={selectedDate}
// onChange={handleDateChange}
// />
// </div>
// </div>
// {/* Tabs */}
// <ul className="nav nav-tabs " role="tablist">
// <li className="nav-item">
// <button
// type="button"
// className={`nav-link ${activeTab === "all" ? "active" : ""}`}
// onClick={() => setActiveTab("all")}
// data-bs-toggle="tab"
// >
// Summary
// </button>
// </li>
// <li className="nav-item">
// <button
// type="button"
// className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
// onClick={() => setActiveTab("logs")}
// data-bs-toggle="tab"
// >
// Details
// </button>
// </li>
// </ul>
// <div className="card-body">
// {activeTab === "all" && (
// <div className="row justify-content-between">
// <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
// {isLoading ? (
// <p>Loading activity data...</p>
// ) : isError ? (
// <p>No data available.</p>
// ) : (
// ActivityData && (
// <>
// <h5 className="fw-bold mb-0 text-start w-80">
// <i className="bx bx-task text-info"></i> Allocated Task
// </h5>
// <h4 className="mb-0 fw-bold">
// {ActivityData.totalCompletedWork?.toLocaleString()}/
// {ActivityData.totalPlannedWork?.toLocaleString()}
// </h4>
// <small className="text-muted">Completed / Assigned</small>
// <div style={{ maxWidth: "180px" }}>
// <ApexChart />
// </div>
// </>
// )
// )}
// </div>
// <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
// {!isLoading && !isError && ActivityData && (
// <>
// <h5 className="fw-bold mb-0 text-start w-110">
// <i className="bx bx-task text-info"></i> Activities
// </h5>
// <h4 className="mb-0 fw-bold">
// {ActivityData.totalCompletedWork?.toLocaleString()}/
// {ActivityData.totalPlannedWork?.toLocaleString()}
// </h4>
// <small className="text-muted ">Pending / Assigned</small>
// <div style={{ maxWidth: "180px" }}>
// <ApexChart />
// </div>
// </>
// )}
// </div>
// </div>
// )}
// {activeTab === "logs" && (
// <div className="table-responsive">
// <table className="table table-bordered table-hover">
// <thead>
// <tr>
// <th>Activity / Location</th>
// <th>Assigned / Completed</th>
// </tr>
// </thead>
// <tbody>
// {[{
// activity: "Code Review / Remote",
// assignedToday: 3,
// completed: 2
// }].map((log, index) => (
// <tr key={index}>
// <td>{log.activity}</td>
// <td>{log.assignedToday} / {log.completed}</td>
// </tr>
// ))}
// </tbody>
// </table>
// </div>
// )}
// </div>
// </div>
// );
// };
// export default Activity;