useEffect(() => {
    const fetchOnTabOrModeChange = async () => {
      setLoading(true);
      setErrorMessage(null);
  
      try {
        let error = null;
  
        if (fetchFromApi) {

          await getAgents(client, setAgent);
          
          if (recentDataCache[activeTab]) {
            console.log(`[Cache Hit] Using cached recent data for tab: ${activeTab}`);
  
            // Use cached data - just set the state accordingly
            if (activeTab === "ticketcreate") {
              setTicketCreationRules(recentDataCache.ticketcreate);
            } else if (activeTab === "ticketupdate") {
              setTicketUpdateRules(recentDataCache.ticketupdate);
            } else if (activeTab === "hourly") {
              setHourlyTriggerRules(recentDataCache.hourly);
            }
          } else {
            console.log(`[Cache Miss] Fetching recent data for tab: ${activeTab}`);
  
            // No cache - fetch from API and store in cache
            if (activeTab === "ticketcreate") {
              error = await getTicketCreationRules(client, (data) => {
                setTicketCreationRules(data);
                setRecentDataCache((prev) => ({ ...prev, ticketcreate: data }));
              });
            } else if (activeTab === "ticketupdate") {
              error = await getTicketUpdationRules(client, (data) => {
                setTicketUpdateRules(data);
                setRecentDataCache((prev) => ({ ...prev, ticketupdate: data }));
              });
            } else if (activeTab === "hourly") {
              error = await getHourlyRules(client, (data) => {
                setHourlyTriggerRules(data);
                setRecentDataCache((prev) => ({ ...prev, hourly: data }));
              });
            }
          }
  



        } else {
          console.log(`[Entity Mode] Fetching fresh data for tab: ${activeTab} and clearing cache.`);
  
          // Entity mode - fetch fresh from entity DB always (do not cache)
          if (!newRulePloadDB5.current) {
            console.error("❌ Entity DB reference not initialized.");
            setLoading(false);
            return;
          }
          if (activeTab === "ticketcreate") {
            const data = await Filterrecords(ticketCreate, newRulePloadDB5.current);
            setTicketCreationRules(data);
          } else if (activeTab === "ticketupdate") {
            const data = await Filterrecords(ticketUpdate, newRulePloadDB5.current);
            setTicketUpdateRules(data);
          } else if (activeTab === "hourly") {
            const data = await Filterrecords(hourlyTriggers, newRulePloadDB5.current);
            setHourlyTriggerRules(data);
          }
  
          // Clear recent data cache since we're back to entity mode
          setRecentDataCache({
            ticketcreate: null,
            ticketupdate: null,
            hourly: null,
          });
        }
  
        if (error) {
          setErrorMessage(error);
        }
      } catch (err) {
        console.error("Error fetching data:", err);
        setErrorMessage("An unexpected error occurred while fetching data.");
      }
  
      setLoading(false);
    };
  
    if (tabsInitialized && isRulesDBReady) {
      fetchOnTabOrModeChange();
    }
  }, [activeTab, fetchFromApi, client, tabsInitialized, isRulesDBReady]);


agent also should cache