195 lines
9.1 KiB
JavaScript
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;
|