Merge branch 'Feature_Task_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Feature_Task_Management

- Reduce dropdown font
- sort project list

public/assets/vendor/css/core.css

@@ -3832,7 +3832,7 @@ fieldset:disabled .btn {
   --bs-dropdown-padding-x: 0;
   --bs-dropdown-padding-y: 0.5rem;
   --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 0.9375rem;
+  --bs-dropdown-font-size: 0.8125rem;
   --bs-dropdown-color: var(--bs-body-color);
   --bs-dropdown-bg: #fff;
   --bs-dropdown-border-color: #e4e6e8;

src/components/Dashboard/Dashboard.jsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import HorizontalBarChart from '../Charts/HorizontalBarChart';
+import HorizontalBarChart from "../Charts/HorizontalBarChart";
-import LineChart from '../Charts/LineChart';
+import LineChart from "../Charts/LineChart";
-import { useProjects } from '../../hooks/useProjects';
+import { useProjects } from "../../hooks/useProjects";
 import {
   useDashboard_Data,
   useDashboardProjectsCardData,
@@ -10,26 +10,34 @@ import {
 } from "../../hooks/useDashboard_Data";
 
 const Dashboard = () => {
-  const { projects,loading } = useProjects();
+  const { projects, loading } = useProjects();
-  const [selectedProjectId, setSelectedProjectId] = useState('all');
+  const [selectedProjectId, setSelectedProjectId] = useState("all");
-  const [range, setRange] = useState('1W');
+  const [range, setRange] = useState("1W");
 
   const getDaysFromRange = (range) => {
     switch (range) {
-      case '1D': return 1;
+      case "1D":
-      case '1W': return 7;
+        return 1;
-      case '15D': return 15;
+      case "1W":
-      case '1M': return 30;
+        return 7;
-      case '3M': return 90;
+      case "15D":
-      case '1Y': return 365;
+        return 15;
-      case '5Y': return 1825;
+      case "1M":
-      default: return 7;
+        return 30;
+      case "3M":
+        return 90;
+      case "1Y":
+        return 365;
+      case "5Y":
+        return 1825;
+      default:
+        return 7;
     }
   };
 
   const days = getDaysFromRange(range);
   const today = new Date();
-  const FromDate = today.toISOString().split('T')[0]; // Always today
+  const FromDate = today.toISOString().split("T")[0]; // Always today
 
   const { projectsCardData } = useDashboardProjectsCardData();
   const { teamsCardData } = useDashboardTeamsCardData();
@@ -38,54 +46,66 @@ const Dashboard = () => {
   const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
     days,
     FromDate,
-    projectId: selectedProjectId === 'all' ? 0 : selectedProjectId,
+    projectId: selectedProjectId === "all" ? 0 : selectedProjectId,
   });
 
   // Sort dashboard_data by date ascending
-  const sortedDashboardData = [...dashboard_data].sort((a, b) => new Date(a.date) - new Date(b.date));
+  const sortedDashboardData = [...dashboard_data].sort(
+    (a, b) => new Date(a.date) - new Date(b.date)
+  );
 
   // Bar chart logic
-  const projectNames = projects?.map(p => p.name) || [];
+  const projectNames = projects?.map((p) => p.name) || [];
-  const projectProgress = projects?.map(p => {
+  const projectProgress =
-    const completed = p.completedWork || 0;
+    projects?.map((p) => {
-    const planned = p.plannedWork || 1;
+      const completed = p.completedWork || 0;
-    const percent = (completed / planned) * 100;
+      const planned = p.plannedWork || 1;
-    return Math.min(Math.round(percent), 100);
+      const percent = (completed / planned) * 100;
-  }) || [];
+      return Math.min(Math.round(percent), 100);
+    }) || [];
 
   // Line chart data
   const lineChartSeries = [
     {
-      name: 'Planned Work',
+      name: "Planned Work",
-      data: sortedDashboardData.map(d => d.plannedTask || 0),
+      data: sortedDashboardData.map((d) => d.plannedTask || 0),
     },
     {
-      name: 'Completed Work',
+      name: "Completed Work",
-      data: sortedDashboardData.map(d => d.completedTask || 0),
+      data: sortedDashboardData.map((d) => d.completedTask || 0),
     },
   ];
 
-  const lineChartCategories = sortedDashboardData.map(d =>
+  const lineChartCategories = sortedDashboardData.map((d) =>
-    new Date(d.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+    new Date(d.date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+    })
   );
 
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <div className="row gy-4">
-
         {/* Projects Card */}
         <div className="col-sm-6 col-lg-4">
           <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="rounded-circle bx bx-building-house"></i> Projects</h5>
+              <h5 className="fw-bold mb-0 ms-2">
+                <i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
+                Projects
+              </h5>
             </div>
             <div className="d-flex justify-content-around align-items-start mt-n2">
               <div>
-                <h4 className="mb-0 fw-bold">{projectsCardData.totalProjects?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {projectsCardData.totalProjects?.toLocaleString()}
+                </h4>
                 <small className="text-muted">Total</small>
               </div>
               <div>
-                <h4 className="mb-0 fw-bold">{projectsCardData.ongoingProjects?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {projectsCardData.ongoingProjects?.toLocaleString()}
+                </h4>
                 <small className="text-muted">Ongoing</small>
               </div>
             </div>
@@ -96,15 +116,21 @@ const Dashboard = () => {
         <div className="col-sm-6 col-lg-4">
           <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>
+              <h5 className="fw-bold mb-0 ms-2">
+                <i className="bx bx-group text-warning"></i> Teams
+              </h5>
             </div>
             <div className="d-flex justify-content-around align-items-start mt-n2">
               <div>
-                <h4 className="mb-0 fw-bold">{teamsCardData.totalEmployees?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {teamsCardData.totalEmployees?.toLocaleString()}
+                </h4>
                 <small className="text-muted">Total Employees</small>
               </div>
               <div>
-                <h4 className="mb-0 fw-bold">{teamsCardData.inToday?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {teamsCardData.inToday?.toLocaleString()}
+                </h4>
                 <small className="text-muted">In Today</small>
               </div>
             </div>
@@ -115,15 +141,21 @@ const Dashboard = () => {
         <div className="col-sm-6 col-lg-4">
           <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-task text-success"></i> Tasks</h5>
+              <h5 className="fw-bold mb-0 ms-2">
+                <i className="bx bx-task text-success"></i> Tasks
+              </h5>
             </div>
             <div className="d-flex justify-content-around align-items-start mt-n2">
               <div>
-                <h4 className="mb-0 fw-bold">{tasksCardData.totalTasks?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {tasksCardData.totalTasks?.toLocaleString()}
+                </h4>
                 <small className="text-muted">Total</small>
               </div>
               <div>
-                <h4 className="mb-0 fw-bold">{tasksCardData.completedTasks?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {tasksCardData.completedTasks?.toLocaleString()}
+                </h4>
                 <small className="text-muted">Completed</small>
               </div>
             </div>
@@ -161,28 +193,34 @@ const Dashboard = () => {
                 </div>
 
                 <div className="btn-group">
-                  <button type="button" className="btn btn-label-primary btn-sm">
-                    {selectedProjectId === 'all'
-                      ? 'All Projects'
-                      : projects?.find(p => p.id === selectedProjectId)?.name || 'Select Project'}
-                  </button>
                   <button
                     type="button"
-                    className="btn btn-label-primary dropdown-toggle dropdown-toggle-split"
+                    className="btn btn-outline-primary btn-sm dropdown-toggle"
+                    type="button"
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
-                    <span className="visually-hidden">Toggle Dropdown</span>
+                    {selectedProjectId === "all"
+                      ? "All Projects"
+                      : projects?.find((p) => p.id === selectedProjectId)
+                          ?.name || "Select Project"}
                   </button>
+
                   <ul className="dropdown-menu">
                     <li>
-                      <button className="dropdown-item" onClick={() => setSelectedProjectId('all')}>
+                      <button
+                        className="dropdown-item"
+                        onClick={() => setSelectedProjectId("all")}
+                      >
                         All Projects
                       </button>
                     </li>
                     {projects?.map((project) => (
                       <li key={project.id}>
-                        <button className="dropdown-item" onClick={() => setSelectedProjectId(project.id)}>
+                        <button
+                          className="dropdown-item"
+                          onClick={() => setSelectedProjectId(project.id)}
+                        >
                           {project.name}
                         </button>
                       </li>
@@ -193,12 +231,15 @@ const Dashboard = () => {
 
               {/* Row 2: Time Range Buttons */}
               <div className="d-flex flex-wrap gap-2 mt-2">
-                {['1D', '1W', '15D', '1M', '3M', '1Y', '5Y'].map((key) => (
+                {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
                   <button
                     key={key}
-                    className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${range === key ? 'fw-bold border-bottom border-primary text-primary' : 'text-muted'
+                    className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
-                      }`}
+                      range === key
-                    style={{ cursor: 'pointer', transition: 'all 0.2s ease' }}
+                        ? "fw-bold border-bottom border-primary text-primary"
+                        : "text-muted"
+                    }`}
+                    style={{ cursor: "pointer", transition: "all 0.2s ease" }}
                     onClick={() => setRange(key)}
                   >
                     {key}
@@ -207,11 +248,14 @@ const Dashboard = () => {
               </div>
             </div>
             <div className="card-body ">
-              <LineChart seriesData={lineChartSeries} categories={lineChartCategories} loading={isLineChartLoading} />
+              <LineChart
+                seriesData={lineChartSeries}
+                categories={lineChartCategories}
+                loading={isLineChartLoading}
+              />
             </div>
           </div>
         </div>
-
       </div>
     </div>
   );

src/hooks/useProjects.js

@@ -1,126 +1,126 @@
-import { useEffect,useState } from "react"
+import { useEffect, useState } from "react";
-import {
+import { cacheData, getCachedData } from "../slices/apiDataManager";
-    cacheData,
-    getCachedData,
-  } from "../slices/apiDataManager"
 import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
 
-
+export const useProjects = () => {
-  
-export const useProjects =()=>{
-
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-      const projects_cache = getCachedData("projectslist");
+    const projects_cache = getCachedData("projectslist");
-     
+
-      if (!projects_cache) {
+    if (!projects_cache) {
-        setLoading(true)   
+      setLoading(true);
-        ProjectRepository.getProjectList()
+      ProjectRepository.getProjectList()
         .then((response) => {
-          setProjects(response.data);
+          let projects = response.data;
-         
+          const sortedProject = [...projects].sort((a, b) =>
-          cacheData("projectslist", response.data);
+            a.name.localeCompare(b.name)
+          );
+
+          setProjects(sortedProject);
+
+          cacheData("projectslist", sortedProject);
           setLoading(false);
         })
         .catch((error) => {
-          setLoading(false)
+          setLoading(false);
-          console.error(error);
           setError("Failed to fetch data.");
         });
-      
+    } else {
-      } else {
+      if (!projects.length) {
-        if (!projects.length) setProjects(projects_cache);
+        let projects = projects_cache;
+        const sortedProject = [...projects].sort((a, b) =>
+          a.name.localeCompare(b.name)
+        );
+        setProjects(sortedProject);
       }
+    }
   };
- 
-  useEffect(()=>{
-    fetchData()
 
-   },[])
+  useEffect(() => {
+    fetchData();
+  }, []);
 
-  return  { projects,loading,error,refetch:fetchData}
+  return { projects, loading, error, refetch: fetchData };
-  
+};
-}
 
-export const useEmployeesByProjectAllocated = ( selectedProject ) =>
+export const useEmployeesByProjectAllocated = (selectedProject) => {
-  {
+  const [projectEmployees, setEmployeeList] = useState([]);
-    const [projectEmployees, setEmployeeList] = useState([]);
+  const [loading, setLoading] = useState(true);
-    const[loading,setLoading] = useState(true)
+  const [projects, setProjects] = useState([]);
-    const [projects, setProjects] = useState([]);
+
-  
+  const fetchData = async (projectid) => {
-     const fetchData = async (projectid) => {
+    try {
-         try {
+      let EmployeeByProject_Cache = getCachedData("empListByProjectAllocated");
-               let EmployeeByProject_Cache = getCachedData("empListByProjectAllocated")
+      if (
-            if(!EmployeeByProject_Cache || !EmployeeByProject_Cache.projectId === projectid) {
+        !EmployeeByProject_Cache ||
-            
+        !EmployeeByProject_Cache.projectId === projectid
-            let response = await  ProjectRepository.getProjectAllocation(projectid)
+      ) {
-            setEmployeeList(response.data);
+        let response = await ProjectRepository.getProjectAllocation(projectid);
-            cacheData("empListByProjectAllocated",{data:response.data,projectId:projectid});
+        setEmployeeList(response.data);
-            setLoading(false)
+        cacheData("empListByProjectAllocated", {
-            }else{
+          data: response.data,
-                 setEmployeeList(EmployeeByProject_Cache.data)
+          projectId: projectid,
-                 setLoading(false)
+        });
-           }
+        setLoading(false);
-          
+      } else {
-         
+        setEmployeeList(EmployeeByProject_Cache.data);
-         } catch (err) {
+        setLoading(false);
-           setError("Failed to fetch data.");
+      }
-           setLoading(false)
+    } catch (err) {
-         }
+      setError("Failed to fetch data.");
-      };
+      setLoading(false);
- 
+    }
-  
+  };
-    useEffect(()=>{
+
-     if(selectedProject){
+  useEffect(() => {
+    if (selectedProject) {
       fetchData(selectedProject);
-     }
+    }
-    },[selectedProject])
+  }, [selectedProject]);
-  
+
-  
+  return { projectEmployees, loading, projects };
-    return {projectEmployees,loading,projects}
+};
-}
+
-  
+export const useProjectDetails = (projectId) => {
-export const useProjectDetails =(projectId)=>{
+  const { profile } = useProfile();
-  const {profile} = useProfile();
   const [projects_Details, setProject_Details] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-    setLoading( true )  
+    setLoading(true);
-    
+
     const project_cache = getCachedData("projectInfo");
     if (!project_cache || project_cache?.projectId != projectId) {
       ProjectRepository.getProjectByprojectId(projectId)
-        .then( ( response ) =>
+        .then((response) => {
-        {
+          setProject_Details(response.data);
-          setProject_Details( response.data );
+          cacheData("projectInfo", {
-          cacheData("projectInfo", {projectId:projectId,data: response.data} );
+            projectId: projectId,
-          setLoading(false)
+            data: response.data,
+          });
+          setLoading(false);
         })
         .catch((error) => {
           console.error(error);
-          setError( "Failed to fetch data." );
+          setError("Failed to fetch data.");
-          setLoading(false)
+          setLoading(false);
         });
     } else {
-      setProject_Details( project_cache.data );
+      setProject_Details(project_cache.data);
-      setLoading(false)
+      setLoading(false);
-    } 
+    }
-  
+  };
-};
- 
-  useEffect(()=>{
-    if ( profile && (projectId != undefined) )
-    {
-      fetchData()
-   }
-   },[projectId,profile])
 
-  return  { projects_Details,loading,error,refetch:fetchData}
+  useEffect(() => {
-  
+    if (profile && projectId != undefined) {
-}
+      fetchData();
+    }
+  }, [projectId, profile]);
+
+  return { projects_Details, loading, error, refetch: fetchData };
+};