Filter Sidebar Should Auto-Close When Navigating to Another Page

public/assets/css/core-extend.css

@@ -280,3 +280,7 @@
   .w-8-xl{ width: 2rem; }
   .w-10-xl{ width: 2.5rem; }
 }
+
+.cursor-not-allowed{
+  cursor: not-allowed;
+}

src/components/Charts/HorizontalBarChart.jsx

@@ -23,7 +23,7 @@ const HorizontalBarChart = ({
   if (loading) {
     return (
       <div className="w-full h-[380px] flex items-center justify-center bg-gray-100 rounded-xl">
-        <span className="text-gray-500 text-sm">Loading chart...</span>
+        <span className="text-gray-500">Loading chart...</span>
         {/* Replace this with a skeleton or spinner if you prefer */}
       </div>
     );

src/components/Dashboard/ProjectCompletionChart.jsx

@@ -3,7 +3,8 @@ import HorizontalBarChart from "../Charts/HorizontalBarChart";
 import { useProjects } from "../../hooks/useProjects";
 
 const ProjectCompletionChart = () => {
-  const { projects, loading } = useProjects();
+  const { data: projects = [], isLoading: loading, isError, error } = useProjects();
+
 
   // Bar chart logic
   const projectNames = projects?.map((p) => p.name) || [];
@@ -11,7 +12,7 @@ const ProjectCompletionChart = () => {
     projects?.map((p) => {
       const completed = p.completedWork || 0;
       const planned = p.plannedWork || 1;
-      const percent = (completed / planned) * 100;
+      const percent = planned ? (completed / planned) * 100 : 0;
       return Math.min(Math.round(percent), 100);
     }) || [];
 

src/components/Documents/DocumentFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDocumentFilterEntities } from "../../hooks/useDocument";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -9,9 +9,11 @@ import {
 import { DateRangePicker1 } from "../common/DateRangePicker";
 import SelectMultiple from "../common/SelectMultiple";
 import moment from "moment";
+import { useLocation } from "react-router-dom";
 
 const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
   const [resetKey, setResetKey] = useState(0);
+  const location = useLocation();
 
   const { data, isError, isLoading, error } =
     useDocumentFilterEntities(entityTypeId);
@@ -52,6 +54,13 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
     closePanel();
   };
 
+  //  Close popup when navigating to another component
+  useEffect(() => {
+    return () => {
+      closePanel();
+    };
+  }, []);
+
   if (isLoading) return <div>Loading...</div>;
   if (isError)
     return <div>Error: {error?.message || "Something went wrong!"}</div>;
@@ -63,6 +72,8 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
     documentTag = [],
   } = data?.data || {};
 
+
+
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -73,18 +84,16 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
             <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
               <button
                 type="button"
-                className={`btn px-2 py-1 rounded-0 text-tiny ${
-                  isUploadedAt ? "active btn-secondary text-white" : ""
-                }`}
+                className={`btn px-2 py-1 rounded-0 text-tiny ${isUploadedAt ? "active btn-secondary text-white" : ""
+                  }`}
                 onClick={() => setValue("isUploadedAt", true)}
               >
                 Uploaded On
               </button>
               <button
                 type="button"
-                className={`btn px-2 py-1 rounded-0 text-tiny ${
-                  !isUploadedAt ? "active btn-secondary text-white" : ""
-                }`}
+                className={`btn px-2 py-1 rounded-0 text-tiny ${!isUploadedAt ? "active btn-secondary text-white" : ""
+                  }`}
                 onClick={() => setValue("isUploadedAt", false)}
               >
                 Updated On

src/components/Organization/OrganizationsList.jsx

@@ -131,7 +131,7 @@ const OrganizationsList = ({searchText}) => {
                       <div className="d-flex justify-content-center gap-2">
                         <i className="bx bx-show text-primary cursor-pointer"  onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
                         <i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
-                        <i className="bx bx-trash text-danger cursor-pointer"></i>
+                        <i className="bx bx-trash text-danger cursor-not-allowed"></i>
                       </div>
                     </td>
                   </tr>

src/pages/Directory/ContactFilterPanel.jsx

@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
+import React, { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   contactsFilter,
@@ -8,11 +8,14 @@ import {
 import { useContactFilter } from "../../hooks/useDirectory";
 import { ExpenseFilterSkeleton } from "../../components/Expenses/ExpenseSkeleton";
 import SelectMultiple from "../../components/common/SelectMultiple";
+import { useLocation } from "react-router-dom";
 
 const ContactFilterPanel = ({ onApply, clearFilter }) => {
   const { data, isError, isLoading, error, isFetched, isFetching } =
     useContactFilter();
 
+  const location = useLocation();
+
   const methods = useForm({
     resolver: zodResolver(contactsFilter),
     defaultValues: defaultContactFilter,
@@ -30,14 +33,24 @@ const ContactFilterPanel = ({ onApply, clearFilter }) => {
   };
 
   const handleClose = () => {
-    reset(defaultContactFilter);         
-    onApply(defaultContactFilter);       
+    reset(defaultContactFilter);
+    onApply(defaultContactFilter);
     closePanel();
   };
 
+
+  useEffect(() => {
+    return () => {
+      closePanel();
+    };
+  }, []);
+
   if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
   if (isError && isFetched)
     return <div>Something went wrong Here- {error.message} </div>;
+
+
+
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">

src/pages/Directory/NoteFilterPanel.jsx

@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
+import React, { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   defaultNotesFilter,
@@ -8,11 +8,18 @@ import {
 import { useContactFilter, useNoteFilter } from "../../hooks/useDirectory";
 import { ExpenseFilterSkeleton } from "../../components/Expenses/ExpenseSkeleton";
 import SelectMultiple from "../../components/common/SelectMultiple";
+import { useLocation } from "react-router-dom";
 
 const NoteFilterPanel = ({ onApply, clearFilter }) => {
   const { data, isError, isLoading, error, isFetched, isFetching } =
     useNoteFilter();
 
+  useEffect(() => {
+    return () => {
+      closePanel();
+    };
+  }, []);
+
   const methods = useForm({
     resolver: zodResolver(notesFilter),
     defaultValues: defaultNotesFilter,
@@ -31,7 +38,7 @@ const NoteFilterPanel = ({ onApply, clearFilter }) => {
 
   const handleClose = () => {
     reset(defaultNotesFilter);
-    onApply(defaultNotesFilter); 
+    onApply(defaultNotesFilter);
     closePanel();
   };