Add Fitur Search Di setiap menu

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/page.tsx

@@ -8,21 +8,25 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import JudulList from '../../../_com/judulList';
 import jadwalKegiatanState from '../../../_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import { useState } from 'react';
 
 function JadwalKegiatan() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Jadwal Kegiatan'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListJadwalKegiatan/>
+      <ListJadwalKegiatan search={search}/>
     </Box>
   );
 }
 
-function ListJadwalKegiatan() {
+function ListJadwalKegiatan({ search }: { search: string }) {
   const stateJadwalKegiatan = useProxy(jadwalKegiatanState)
   const router = useRouter();
 
@@ -30,6 +34,16 @@ function ListJadwalKegiatan() {
     stateJadwalKegiatan.findMany.load()
   }, [])
 
+  const filteredData = (stateJadwalKegiatan.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.informasijadwalkegiatan.name.toLowerCase().includes(keyword) ||
+      item.informasijadwalkegiatan.tanggal.toLowerCase().includes(keyword) ||
+      item.informasijadwalkegiatan.waktu.toLowerCase().includes(keyword) ||
+      item.informasijadwalkegiatan.lokasi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!stateJadwalKegiatan.findMany.data) {
     return (
       <Box py={10}>
@@ -57,7 +71,7 @@ function ListJadwalKegiatan() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {stateJadwalKegiatan.findMany.data?.map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>{item.informasijadwalkegiatan.name}</TableTd>
                   <TableTd>{item.informasijadwalkegiatan.tanggal}</TableTd>