debouncing added in search and dp updated

frontend/src/components/common/Cards/ProjectCard.tsx

@@ -5,17 +5,18 @@ import MoreButton from '../Buttons/MoreButton'
 import { IProjects } from '@/interfaces/Project'
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
 import Link from 'next/link'
+import { getColorForLetter } from '@/utils/dpColor'
 
 function ProjectCard({ data, handleDelete, role }: { data: IProjects, handleDelete: (projectId: string) => void, role: string }) {
 
-    const bgColor = randomColor()
-    const textFont = fontColorContrast(bgColor)
+    const initial=data.name.charAt(0).toUpperCase()
+    const { bgColor, textFont } = getColorForLetter(initial);
 
     return (
         <div className='border border-border rounded-2xl  h-32 p-3  shadow-lg m-4'>
             <div className='flex justify-between'>
                 <div className='w-8 h-8 font-semibold  flex justify-center items-center rounded-md ' style={{ backgroundColor: bgColor, color: textFont }}>
-                    {data.name.charAt(0).toUpperCase()}
+                    {initial}
                 </div>
                 <div>
                     <MoreButton >

frontend/src/components/common/Cards/TaskCard.tsx

@@ -5,17 +5,18 @@ import MoreButton from '../Buttons/MoreButton'
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
 import Link from 'next/link'
 import { ITask } from '@/interfaces/Task'
+import { getColorForLetter } from '@/utils/dpColor'
 
 function TaskCard({ data, handleDelete, role, projectId }: { data: ITask, handleDelete: (pId: string) => void, role: string, projectId: string }) {
 
-    const bgColor = randomColor()
-    const textFont = fontColorContrast(bgColor)
+    const initial=data.title.charAt(0).toUpperCase()
+    const { bgColor, textFont } = getColorForLetter(initial);
 
     return (
         <div className='border border-border rounded-2xl  h-32 p-3  shadow-lg m-4'>
             <div className='flex justify-between'>
                 <div className='w-8 h-8 font-semibold  flex justify-center items-center rounded-md ' style={{ backgroundColor: bgColor, color: textFont }}>
-                    {data.title.charAt(0).toUpperCase()}
+                    {initial}
                 </div>
                 <div>
                     <MoreButton >

frontend/src/components/common/ProjectDetails.tsx

@@ -11,13 +11,14 @@ import { SelectComponent } from './Buttons/Select';
 import { logout } from '@/features/user/userSlice';
 import { useDispatch } from 'react-redux';
 import { useRouter } from 'next/navigation';
+import { getColorForLetter } from '@/utils/dpColor';
 
 function ProjectDetails({ projectId, role }: { projectId: string, role: string }) {
 
     const [toggle, setToggle] = useState<boolean>(true);
     const [project, setProject] = useState<IProjects>();
-    const bgColor = randomColor()
-    const textFont = fontColorContrast(bgColor)
+    const initial = project?.name.charAt(0).toUpperCase()
+    const { bgColor, textFont } = getColorForLetter(initial!);
     const dispatch = useDispatch()
     const router = useRouter()
 
@@ -63,7 +64,7 @@ function ProjectDetails({ projectId, role }: { projectId: string, role: string }
                 </p>
                 <div className='w-full md:w-auto flex justify-end'>
                     {
-                        (role === 'Project_Manager'||role==='Manager') && (<SelectComponent placeholder='Select a status' active={project?.stage as string} options={options} handleValueChange={(value) => handleStatusChange(project?._id!, value)} />)
+                        (role === 'Project_Manager' || role === 'Manager') && (<SelectComponent placeholder='Select a status' active={project?.stage as string} options={options} handleValueChange={(value) => handleStatusChange(project?._id!, value)} />)
                     }
 
                 </div>
@@ -80,7 +81,7 @@ function ProjectDetails({ projectId, role }: { projectId: string, role: string }
                             color: textFont,
                             fontWeight: 'bold'
                         },
-                        name: project?.name.charAt(0).toUpperCase()
+                        name: initial
                     }}
                 />
             </div>

frontend/src/components/common/Projects.tsx

@@ -1,42 +1,49 @@
 "use client";
-import React from 'react'
-import ProjectCard from './Cards/ProjectCard'
+import React, { useEffect, useState } from 'react';
+import ProjectCard from './Cards/ProjectCard';
 import { Pagination } from "@nextui-org/react";
-import StatusCard from './Cards/StatusCard';
 import MainButton from './Buttons/MainButton';
 import { fetchAllProjects, fetchAllProjectsByPManager, fetchAllProjectsDeveloper, fetchAllProjectsTester, projectDelete, updateProjectStatus } from '@/api/projectService/project';
 import Empty from '@/components/common/Empty';
 import { logout } from '@/features/user/userSlice';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import Swal from 'sweetalert2';
 import { Input } from '../ui/input';
 import { IProjects } from '@/interfaces/Project';
 import ProjectSkelton from './ProjectSkelton';
 
-
-
 function Projects({ role }: { role: string }) {
 
     const [projects, setProjects] = useState<IProjects[]>([]);
     const [toggle, setToggle] = useState<boolean>(true);
     const [search, setSearch] = useState<string>('');
+    const [debouncedSearch, setDebouncedSearch] = useState<string>(''); // Debounced search state
     const [page, setPage] = useState<number>(1);
     const [limit] = useState<number>(6);
     const [total, setTotal] = useState<number>(0);
-    const [loading, setLoading] = useState(true)
+    const [loading, setLoading] = useState(true);
 
     const router = useRouter();
     const dispatch = useDispatch();
 
     useEffect(() => {
-        setPage(1);
+        const handler = setTimeout(() => {
+            setDebouncedSearch(search); 
+        }, 500); 
+
+        return () => {
+            clearTimeout(handler); 
+        };
     }, [search]);
 
     useEffect(() => {
-        setLoading(true)
+        setPage(1);
+    }, [debouncedSearch]);
+
+    useEffect(() => {
+        setLoading(true);
         let fetchProjects = null;
 
         if (role === 'Manager') {
@@ -49,17 +56,17 @@ function Projects({ role }: { role: string }) {
             fetchProjects = fetchAllProjectsTester;
         }
 
-        fetchProjects && fetchProjects(search, page, limit).then((result: any) => {
+        fetchProjects && fetchProjects(debouncedSearch, page, limit).then((result: any) => {
             setProjects(result.data.data);
             setTotal(Number(result.data.totalCount));
-            setLoading(false)
+            setLoading(false);
         }).catch((err: any) => {
             if (err.response.status === 401) {
                 dispatch(logout());
                 router.push('/employee/login');
             }
         });
-    }, [toggle, search, page, limit]);
+    }, [toggle, debouncedSearch, page, limit]);
 
     const handleDelete = (projectId: string) => {
         if (role === 'Manager') {
@@ -143,11 +150,9 @@ function Projects({ role }: { role: string }) {
                                     <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 sm:gap-1'>
                                         {
                                             projects.map((project, index) => (
-
                                                 <ProjectCard key={project._id} data={project} handleDelete={handleDelete} role={role} />
                                             ))
                                         }
-
                                     </div> :
                                     <Empty />
                                 :
@@ -157,27 +162,13 @@ function Projects({ role }: { role: string }) {
 
                     {
                         !loading && total > 0 && <div className='flex justify-center mt-2 h-1/6'>
-
                             <Pagination total={Math.ceil(total / limit)} initialPage={page} color="success" onChange={handlePageChange} />
                         </div>
                     }
                 </div>
-                {/* <div className='w-full mt-10 mb-10 md:mb-0 md:mt-0 lg:w-96 md:h-[calc(100vh-10rem)] border border-border'>
-                    <div className='font-semibold text-center mt-5'>
-                        On Going Projects
-                    </div>
-
-                    <div className='mt-5'>
-                        <StatusCard />
-                        <StatusCard />
-                        <StatusCard />
-                        <StatusCard />
-                    </div>
-                </div> */}
-
             </div>
         </div>
     )
 }
 
-export default Projects
+export default Projects;

frontend/src/components/common/Task.tsx

@@ -1,6 +1,6 @@
 "use client";
-import React from 'react'
-import ProjectCard from './Cards/ProjectCard'
+import React, { useEffect, useState } from 'react';
+import ProjectCard from './Cards/ProjectCard';
 import { Pagination } from "@nextui-org/react";
 import StatusCard from './Cards/StatusCard';
 import MainButton from './Buttons/MainButton';
@@ -9,7 +9,6 @@ import Empty from '@/components/common/Empty';
 import { logout } from '@/features/user/userSlice';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Swal from 'sweetalert2';
 import { Input } from '../ui/input';
@@ -18,38 +17,46 @@ import ProjectSkelton from './ProjectSkelton';
 import { ITask } from '@/interfaces/Task';
 import TaskCard from './Cards/TaskCard';
 
-
-
 function Task({ projectId, role }: { projectId: string, role: string }) {
 
     const [tasks, setTasks] = useState<ITask[]>([]);
     const [toggle, setToggle] = useState<boolean>(true);
     const [search, setSearch] = useState<string>('');
+    const [debouncedSearch, setDebouncedSearch] = useState<string>(search);
     const [page, setPage] = useState<number>(1);
     const [limit] = useState<number>(10);
     const [total, setTotal] = useState<number>(0);
     const router = useRouter();
     const dispatch = useDispatch();
-    const [loading, setLoading] = useState(true)
+    const [loading, setLoading] = useState(true);
 
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedSearch(search);
+        }, 500); 
+
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [search]);
 
     useEffect(() => {
         setPage(1);
-    }, [search]);
+    }, [debouncedSearch]);
 
     useEffect(() => {
-        setLoading(true)
-        fetchAllTasks(projectId, search, page, limit).then((result: any) => {
+        setLoading(true);
+        fetchAllTasks(projectId, debouncedSearch, page, limit).then((result: any) => {
             setTasks(result.data.data);
             setTotal(result.data.totalCount);
-            setLoading(false)
+            setLoading(false);
         }).catch((err: any) => {
             if (err.response?.status === 401) {
                 dispatch(logout());
                 router.push('/employee/login');
             }
         });
-    }, [toggle, search, page, limit]);
+    }, [toggle, debouncedSearch, page, limit]);
 
     const handleDelete = (taskId: string) => {
         Swal.fire({
@@ -109,7 +116,7 @@ function Task({ projectId, role }: { projectId: string, role: string }) {
                     All Tasks
                 </div>
                 <div>
-                    <Input placeholder='Search Projects' onChange={(e) => setSearch(e.target.value)} value={search} />
+                    <Input placeholder='Search Tasks' onChange={(e) => setSearch(e.target.value)} value={search} />
                 </div>
 
                 {
@@ -131,11 +138,9 @@ function Task({ projectId, role }: { projectId: string, role: string }) {
                                     <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 sm:gap-1'>
                                         {
                                             tasks.map((task, index) => (
-
                                                 <TaskCard key={task._id} data={task} handleDelete={handleDelete} role={role} projectId={projectId} />
                                             ))
                                         }
-
                                     </div> :
                                     <Empty />
                                 :
@@ -145,7 +150,6 @@ function Task({ projectId, role }: { projectId: string, role: string }) {
 
                     {
                         !loading && total > 0 && <div className='flex justify-center mt-2 h-1/6'>
-
                             <Pagination total={Math.ceil(total / limit)} initialPage={page} color="success" onChange={handlePageChange} />
                         </div>
                     }
@@ -168,4 +172,4 @@ function Task({ projectId, role }: { projectId: string, role: string }) {
     )
 }
 
-export default Task
+export default Task;

frontend/src/components/common/TaskDetails.tsx

@@ -12,13 +12,14 @@ import { logout } from '@/features/user/userSlice';
 import { useDispatch } from 'react-redux';
 import { useRouter } from 'next/navigation';
 import { ITask } from '../TenantUserPanel/Tables/TaskTable';
+import { getColorForLetter } from '@/utils/dpColor';
 
 const TaskDetails = ({ projectId, taskId, role }: { projectId: string, taskId: string, role: string }) => {
 
     const [toggle, setToggle] = useState<boolean>(true);
     const [task, setTask] = useState<ITask>();
-    const bgColor = randomColor()
-    const textFont = fontColorContrast(bgColor)
+    const initial = task?.title.charAt(0).toUpperCase()
+    const { bgColor, textFont } = getColorForLetter(initial!);
     const dispatch = useDispatch()
     const router = useRouter()
 
@@ -80,7 +81,7 @@ const TaskDetails = ({ projectId, taskId, role }: { projectId: string, taskId: s
                             color: textFont,
                             fontWeight: 'bold'
                         },
-                        name: task?.title.charAt(0).toUpperCase()
+                        name: initial
                     }}
                 />
             </div>