feat: implement AuditLogsList and PolicyEngineList components to visualize system logs and engine configurations.

src/app/auditLogs/components/AuditLogsList.tsx

@@ -108,20 +108,9 @@ export default function AuditLogsList() {
 
         const result = await getAuditLogs(filters);
 
-        // Client-side search on entityLabel / entityId
+        setLogs(result.data || []);
-        const filtered = search
+        setTotalItems(result.total || 0);
-          ? result.data.filter(
+        setTotalPages(result.totalPages || 1);
-              (l) =>
-                l.entityLabel?.toLowerCase().includes(search.toLowerCase()) ||
-                l.entityId?.toLowerCase().includes(search.toLowerCase()) ||
-                l.module?.toLowerCase().includes(search.toLowerCase()) ||
-                l.performedBy?.toLowerCase().includes(search.toLowerCase()),
-            )
-          : result.data;
-
-        setLogs(filtered);
-        setTotalItems(result.total);
-        setTotalPages(result.totalPages);
       } catch (err) {
         console.error("Failed to fetch audit logs", err);
         setLogs([]);
@@ -129,7 +118,7 @@ export default function AuditLogsList() {
         setLoading(false);
       }
     },
-    [search, daysFilter],
+    [daysFilter],
   );
 
   useEffect(() => {
@@ -290,6 +279,15 @@ export default function AuditLogsList() {
 
   // ─── Render ─────────────────────────────────────────────────────────────────
 
+  const displayedLogs = search
+    ? logs.filter((l) =>
+        l.entityLabel?.toLowerCase().includes(search.toLowerCase()) ||
+        l.entityId?.toLowerCase().includes(search.toLowerCase()) ||
+        l.module?.toLowerCase().includes(search.toLowerCase()) ||
+        l.performedBy?.toLowerCase().includes(search.toLowerCase())
+      )
+    : logs;
+
   const startIndex = totalItems > 0 ? (currentPage - 1) * PAGE_SIZE + 1 : 0;
   const endIndex = Math.min(currentPage * PAGE_SIZE, totalItems);
 
@@ -297,7 +295,7 @@ export default function AuditLogsList() {
     <div className="w-full flex flex-col gap-6">
       <CustomTable<AuditLog>
         columns={columns}
-        data={logs}
+        data={displayedLogs}
         leftHeaderActions={
           <div className="w-[360px]">
             <CustomInput

src/app/policyEngine/components/PolicyEngineList.tsx

@@ -83,7 +83,7 @@ export default function PolicyEngineList() {
   const fetchPolicies = useCallback(
     (page: number) => {
       setLoading(true);
-      getPolicies(page, PAGE_SIZE, search)
+      getPolicies(page, PAGE_SIZE)
         .then((res) => {
           setPolicies(res.data || []);
           setTotalItems(res.total || 0);
@@ -99,12 +99,12 @@ export default function PolicyEngineList() {
           setLoading(false);
         });
     },
-    [search],
+    [],
   );
 
   useEffect(() => {
     fetchPolicies(currentPage);
-  }, [currentPage, search, fetchPolicies]);
+  }, [currentPage, fetchPolicies]);
 
   // ─── Handlers ──────────────────────────────────────────────────────────────
 
@@ -141,6 +141,13 @@ export default function PolicyEngineList() {
     }
   };
 
+  const displayedPolicies = search 
+    ? policies.filter(p => 
+        p.policyName?.toLowerCase().includes(search.toLowerCase()) ||
+        p.jurisdiction?.toLowerCase().includes(search.toLowerCase())
+      )
+    : policies;
+
   const startIndex = totalItems > 0 ? (currentPage - 1) * PAGE_SIZE + 1 : 0;
   const endIndex = Math.min(currentPage * PAGE_SIZE, totalItems);
 
@@ -233,7 +240,7 @@ export default function PolicyEngineList() {
     <>
       <CustomTable<PolicyEngineResponse>
         columns={columns}
-        data={policies}
+        data={displayedPolicies}
         leftHeaderActions={
           <div className="w-[380px]">
             <CustomInput