implement search in agent/template page

automonous_agent_frontend/src/app/(pages)/agents/page.tsx

@@ -1,45 +1,51 @@
 'use client';
 
 import Link from 'next/link';
-
 import { useMutation, useQuery } from '@tanstack/react-query';
-
-import { IAgent, fetchAgents } from '@app/app/api/agents';
-import { deleteAgentbyID } from '@app/app/api/agents';
+import { IAgent, fetchAgents, deleteAgentbyID } from '@app/app/api/agents';
 import { Button } from '@app/components/atoms/Button';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger
-} from '@app/components/atoms/DropDownMenu';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@app/components/atoms/DropDownMenu';
 import { SearchField } from '@app/components/atoms/SearchField';
 import AgentCard, { IAgentCard } from '@app/components/molecules/AgentCard';
 import { queryClient } from '@app/utils/providers/ReactQueryProvider';
 import { useEffect, useState } from 'react';
-import {atom, useAtom} from 'jotai'
+import { atom, useAtom } from 'jotai';
 import { agentCreatedAtom } from '@app/store/loaclStore';
 import { SuccessToast } from '@app/components/molecules/CustomToasts';
 
-
-
 export default function AgentsPage() {
-    const [agentCreated , setAgentCreated] = useAtom(agentCreatedAtom)
+    const [agentCreated, setAgentCreated] = useAtom(agentCreatedAtom);
     const {
         data: agents,
         isLoading: loadingAgents,
-        isError: errorAgents
+        isError: errorAgents,
     } = useQuery<IAgent[]>({ queryKey: ['agents'], queryFn: fetchAgents });
-
-
-    useEffect(()=>{
-        if (agentCreated === true){
-            SuccessToast('Agent Created Successfully')
-            setAgentCreated(false)
+
+    const [filteredAgents, setFilteredAgents] = useState<IAgent[]>([]);
+
+    useEffect(() => {
+        if (agentCreated === true) {
+            SuccessToast('Agent Created Successfully');
+            setAgentCreated(false);
         }
-    },[])
+        if (agents) {
+            setFilteredAgents(agents);
+        }
+    }, [agentCreated, agents]);
+
+    useEffect(() => {
+        if (agents) {
+            setFilteredAgents(agents);
+        }
+    }, [agents]);
+
+    function handleSearch(agentName: string) {
+        const newAgents = agents?.filter(agent =>
+            agent.name.toLowerCase().includes(agentName.toLowerCase())
+        ) || [];
+        setFilteredAgents(newAgents);
+    }
 
-
     return (
         <>
             <div className="flex justify-between">
@@ -49,6 +55,7 @@ export default function AgentsPage() {
                         placeholder="Search agents"
                         variant={'secondary'}
                         className="h-10 min-w-[290px]"
+                        onSearch={handleSearch}
                     ></SearchField>
                     <DropdownMenu>
                         <DropdownMenuTrigger border={true} className="h-10">
@@ -68,7 +75,7 @@ export default function AgentsPage() {
                 </Link>
             </div>
             <div className="3xl:grid-cols-4 5xl:grid-cols-6 mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-4 gap-5 4xl:grid-cols-5">
-                {agents?.map((agent: IAgent, index) => (
+                {filteredAgents.map((agent: IAgent, index) => (
                     <AgentCard
                         agentName={agent?.name || 'NA'}
                         agentID={agent?.id}
@@ -80,7 +87,7 @@ export default function AgentsPage() {
                         key={index}
                     />
                 ))}
-                </div>
+            </div>
         </>
     );
 }

automonous_agent_frontend/src/app/(pages)/templates/page.tsx

@@ -1,9 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-
 import { useQuery } from '@tanstack/react-query';
-
 import { fetchTemplates, ITemplate } from '@app/app/api/templates';
 import { Button } from '@app/components/atoms/Button';
 import {
@@ -16,7 +14,7 @@ import { SearchField } from '@app/components/atoms/SearchField';
 import TemplatesContainer from './TemplatesContainer';
 import { templateCreatedAtom } from '@app/store/loaclStore';
 import { useAtom } from 'jotai';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { SuccessToast } from '@app/components/molecules/CustomToasts';
 
 export default function TemplatesPage() {
@@ -26,25 +24,40 @@ export default function TemplatesPage() {
         isLoading: loadingTemplates
     } = useQuery<ITemplate[]>({ queryKey: ['templates'], queryFn: fetchTemplates });
 
-    const [templateCreated , setTemplateCreated] = useAtom(templateCreatedAtom)
+    const [templateCreated, setTemplateCreated] = useAtom(templateCreatedAtom);
+    const [filteredTemplates, setFilteredTemplates] = useState<ITemplate[]>([]);
 
-    useEffect(()=>{
-        if (templateCreated === true){
-            SuccessToast('Template Created Successfully')
-            setTemplateCreated(false)
+    useEffect(() => {
+        if (templateCreated === true) {
+            SuccessToast('Template Created Successfully');
+            setTemplateCreated(false);
         }
-    })
+    }, [templateCreated, setTemplateCreated]);
+
+    useEffect(() => {
+        if (templates) {
+            setFilteredTemplates(templates);
+        }
+    }, [templates]);
+
+    function handleSearch(templateName: string) {
+        const newTemplates = templates?.filter(template =>
+            template.name.toLowerCase().includes(templateName.toLowerCase())
+        ) || [];
+        setFilteredTemplates(newTemplates);
+    }
 
     return (
         <div>
             <div className="flex justify-between">
                 <div className="flex gap-x-4">
-                <span className="h1-new">Templates({templates?.length})</span>
+                    <span className="h1-new">Templates({templates?.length})</span>
                     <SearchField
                         variant="secondary"
                         className="h-10 min-w-[240px]"
                         placeholder="Search Templates"
-                    ></SearchField>
+                        onSearch={handleSearch}
+                    />
                     <DropdownMenu>
                         <DropdownMenuTrigger border={true}>
                             Function
@@ -66,11 +79,11 @@ export default function TemplatesPage() {
             <div className="flex flex-col gap-y-[80px] pb-10 pt-10">
                 <div className="mt-2 flex flex-col gap-y-5">
                     <span className="h5 inline-block">My Templates</span>
-                    <TemplatesContainer templates={templates}/>
+                    <TemplatesContainer templates={filteredTemplates} />
                 </div>
                 <div className="flex flex-col gap-y-5">
                     <span className="h5 inline-block">Existing Templates</span>
-                    <TemplatesContainer templates={templates}/>
+                    <TemplatesContainer templates={filteredTemplates} />
                 </div>
             </div>
         </div>

automonous_agent_frontend/src/components/atoms/SearchField.tsx

@@ -18,23 +18,31 @@ const SearchFieldVariants = cva(
             variant : 'primary'
         }
 })
-
 export interface SearchFieldProps
     extends React.InputHTMLAttributes<HTMLInputElement>,
         VariantProps<typeof SearchFieldVariants> {
     asChild?: boolean;
+    onSearch?: (value: string) => void;
 }
 
 export const SearchField = React.forwardRef<HTMLInputElement, SearchFieldProps>(
-    ({ className, variant, size, asChild = false, ...props }, ref) => {
+    ({ className, variant, size, onChange, onSearch, asChild = false, ...props }, ref) => {
         const Comp = asChild ? Slot : 'input';
+
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            const value = e.target.value;
+            onChange?.(e);
+            onSearch?.(value);
+        };
+
         return (
             <div className={cn(SearchFieldVariants({ variant, className }))}>
-                <Search size={16}/>
+                <Search size={16} />
                 <Comp
                     className='bg-transparent outline-none w-[90%]'
                     ref={ref}
                     {...props}
+                    onChange={handleChange}
                 />
             </div>
         );

automonous_agent_frontend/src/components/molecules/chart/CustomTooltip.tsx

@@ -11,8 +11,8 @@ const CustomTooltip = ({
     if (active) {
         return (
             <Card className="rounded-xl min-w-32 items-center text-center pt-4 pb-4 shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
+                <div className='h4'>{payload?.[0]?.payload?.name.split(" ")[1]}</div>
                 <div className='h1'>{payload?.[0]?.payload?.amt || 'NA'} <span className='h2 !text-brand-Gray-100'>Transaction</span></div>
-                <div className='h4'>{payload?.[0]?.payload?.name}</div>
             </Card>
         );
     }