Add Fitur Search Di setiap menu

src/app/admin/(dashboard)/_com/header.tsx

@@ -1,22 +1,37 @@
 import React from 'react';
 import { Grid, GridCol, Paper, TextInput, Title } from '@mantine/core';
-import { IconSearch } from '@tabler/icons-react'; // Sesuaikan jika kamu pakai icon lain
+import { IconSearch } from '@tabler/icons-react';
 import colors from '@/con/colors';
 
+type HeaderSearchProps = {
+  title: string;
+  placeholder?: string;
+  searchIcon?: React.ReactNode;
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
 
-const HeaderSearch = ({ title = "", placeholder = "pencarian", searchIcon = <IconSearch size={20} /> }: { title: string, placeholder?: string, searchIcon?: React.ReactNode }) => {
+const HeaderSearch = ({
+  title = "",
+  placeholder = "pencarian",
+  searchIcon = <IconSearch size={20} />,
+  value,
+  onChange,
+}: HeaderSearchProps) => {
   return (
     <Grid>
       <GridCol span={{ base: 12, md: 9 }}>
         <Title order={3}>{title}</Title>
       </GridCol>
       <GridCol span={{ base: 12, md: 3 }}>
-        <Paper radius={"lg"} bg={colors['white-1']}>
+        <Paper radius="lg" bg={colors['white-1']}>
           <TextInput
             radius="lg"
             placeholder={placeholder}
             leftSection={searchIcon}
             w="100%"
+            value={value}
+            onChange={onChange}
           />
         </Paper>
       </GridCol>
@@ -24,4 +39,4 @@ const HeaderSearch = ({ title = "", placeholder = "pencarian", searchIcon = <Ico
   );
 };
 
-export default HeaderSearch;
+export default HeaderSearch;

src/app/admin/(dashboard)/desa/berita/page.tsx

@@ -1,43 +1,47 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
 import stateDashboardBerita from '../../_state/desa/berita';
 
 
-function Page() {
+function Berita() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
-      <Grid>
+      <HeaderSearch
-        <GridCol span={{ base: 12, md: 9 }}>
+        title='Berita'
-          <Title order={3}>Berita</Title>
+        placeholder='pencarian'
-        </GridCol>
+        searchIcon={<IconSearch size={20} />}
-        <GridCol span={{ base: 12, md: 3 }}>
+        value={search}
-          <Paper radius={"lg"} bg={colors['white-1']}>
+        onChange={(e) => setSearch(e.currentTarget.value)}
-            <TextInput
+      />
-              radius={"lg"}
+      <ListBerita search={search} />
-              placeholder='pencarian'
-              leftSection={<IconSearch size={20} />}
-            />
-          </Paper>
-        </GridCol>
-      </Grid>
-      <BeritaList />
     </Box>
   );
 }
 
-function BeritaList() {
+function ListBerita({ search }: { search: string }) {
   const beritaState = useProxy(stateDashboardBerita)
+  const router = useRouter()
 
   useShallowEffect(() => {
     beritaState.berita.findMany.load()
   }, [])
 
-  const router = useRouter()
+  const filteredData = (beritaState.berita.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.judul.toLowerCase().includes(keyword) ||
+      item.kategoriBerita?.name.toLowerCase().includes(keyword)
+    );
+  });
+
 
   if (!beritaState.berita.findMany.data) {
     return (
@@ -62,7 +66,7 @@ function BeritaList() {
             </GridCol>
           </Grid>
           <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}> 
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
               <TableThead>
                 <TableTr>
                   <TableTh w={250}>Judul</TableTh>
@@ -73,7 +77,7 @@ function BeritaList() {
                 </TableTr>
               </TableThead>
               <TableTbody >
-                {beritaState.berita.findMany.data?.map((item) => (
+                {filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd >
                       <Box w={100}>
@@ -101,4 +105,4 @@ function BeritaList() {
   )
 }
 
-export default Page;
+export default Berita;

src/app/admin/(dashboard)/desa/gallery/foto/page.tsx

@@ -7,8 +7,26 @@ import JudulListTab from '../../../_com/jusulListTab';
 import { useProxy } from 'valtio/utils';
 import stateGallery from '../../../_state/desa/gallery';
 import { useShallowEffect } from '@mantine/hooks';
+import HeaderSearch from '../../../_com/header';
+import { useState } from 'react';
 
 function Foto() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Posisi Organisasi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListFoto search={search} />
+    </Box>
+  );
+}
+
+function ListFoto({ search }: { search: string }) {
   const fotoState = useProxy(stateGallery.foto)
   const router = useRouter();
 
@@ -16,6 +34,14 @@ function Foto() {
     fotoState.findMany.load()
   }, [])
 
+  const filteredData = (fotoState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!fotoState.findMany.data) {
     return (
       <Box py={10}>
@@ -43,7 +69,7 @@ function Foto() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {fotoState.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.name}</TableTd>
                 <TableTd>{new Date(item.createdAt).toDateString()}</TableTd>

src/app/admin/(dashboard)/desa/gallery/video/page.tsx

@@ -7,8 +7,26 @@ import JudulListTab from '../../../_com/jusulListTab';
 import { useProxy } from 'valtio/utils';
 import stateGallery from '../../../_state/desa/gallery';
 import { useShallowEffect } from '@mantine/hooks';
+import HeaderSearch from '../../../_com/header';
+import { useState } from 'react';
 
 function Video() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Posisi Organisasi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListVideo search={search} />
+    </Box>
+  );
+}
+
+function ListVideo({ search }: { search: string }) {
   const videoState = useProxy(stateGallery.video)
   const router = useRouter();
 
@@ -16,6 +34,14 @@ function Video() {
     videoState.findMany.load()
   }, [])
 
+  const filteredData = (videoState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!videoState.findMany.data) {
     return (
       <Box py={10}>
@@ -43,7 +69,7 @@ function Video() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {videoState.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.name}</TableTd>
                 <TableTd>{new Date(item.createdAt).toDateString()}</TableTd>

src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx

@@ -7,8 +7,26 @@ import { useProxy } from 'valtio/utils';
 import stateLayananDesa from '../../../_state/desa/layananDesa';
 import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import HeaderSearch from '../../../_com/header';
 
 function SuratKeterangan() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Posisi Organisasi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListSuratKeterangan search={search} />
+    </Box>
+  );
+}
+
+function ListSuratKeterangan({ search }: { search: string }) {
   const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan)
   const router = useRouter()
 
@@ -16,6 +34,14 @@ function SuratKeterangan() {
     suratKeteranganState.findMany.load()
   }, [])
 
+  const filteredData = (suratKeteranganState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!suratKeteranganState.findMany.data) {
     return (
       <Stack py={10}>
@@ -43,7 +69,7 @@ function SuratKeterangan() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {suratKeteranganState.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.name}</TableTd>
                 <TableTd>

src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/page.tsx

@@ -7,8 +7,26 @@ import { useProxy } from 'valtio/utils';
 import stateLayananDesa from '../../../_state/desa/layananDesa';
 import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import HeaderSearch from '../../../_com/header';
 
 function PelayananTelunjukSakti() {
+    const [search, setSearch] = useState("");
+    return (
+      <Box>
+        <HeaderSearch
+          title='Posisi Organisasi'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={20} />}
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+        />
+        <ListPelayananTelunjukSakti search={search} />
+      </Box>
+    );
+}
+
+function ListPelayananTelunjukSakti({ search }: { search: string }) {
   const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
   const router = useRouter()
 
@@ -16,6 +34,14 @@ function PelayananTelunjukSakti() {
     telunjukSaktiState.findMany.load()
   }, [])
 
+  const filteredData = (telunjukSaktiState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!telunjukSaktiState.findMany.data) {
     return (
       <Stack py={10}>
@@ -42,7 +68,7 @@ function PelayananTelunjukSakti() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {telunjukSaktiState.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
               <TableTd>{item.name}</TableTd>
               <TableTd><Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} /></TableTd>

src/app/admin/(dashboard)/desa/penghargaan/page.tsx

@@ -7,14 +7,40 @@ import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import JudulListTab from '../../_com/jusulListTab';
+import { useState } from 'react';
+import HeaderSearch from '../../_com/header';
 
 function Penghargaan() {
+    const [search, setSearch] = useState("");
+    return (
+      <Box>
+        <HeaderSearch
+          title='Posisi Organisasi'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={20} />}
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+        />
+        <ListPenghargaan search={search} />
+      </Box>
+    );
+}
+
+function ListPenghargaan({ search }: { search: string }) {
   const state = useProxy(penghargaanState)
   const router = useRouter()
   useShallowEffect(() => {
     state.findMany.load()
   }, [])
 
+  const filteredData = (state.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!state.findMany.data) {
     return(
       <Stack py={10}>
@@ -41,7 +67,7 @@ function Penghargaan() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {state.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.name}</TableTd>
                 <TableTd>

src/app/admin/(dashboard)/desa/pengumuman/page.tsx

@@ -11,21 +11,25 @@ import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 import { useState } from 'react';
 
 
-function Page() {
+function Pengumuman() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-        title='Pengumuman'
+        title='Posisi Organisasi'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <PengumumanList />
+      <ListPengumuman search={search} />
     </Box>
   );
 }
 
-function PengumumanList() {
+function ListPengumuman({ search }: { search: string }) {
   const pengumumanState = useProxy(stateDesaPengumuman)
+  const router = useRouter()
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
 
@@ -33,7 +37,6 @@ function PengumumanList() {
     pengumumanState.pengumuman.findMany.load()
   }, [])
 
-  const router = useRouter()
 
   const handleHapus = () => {
     if (selectedId) {
@@ -43,6 +46,14 @@ function PengumumanList() {
     }
   }
 
+  const filteredData = (pengumumanState.pengumuman.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.judul.toLowerCase().includes(keyword) ||
+      item.CategoryPengumuman?.name.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!pengumumanState.pengumuman.findMany.data) {
     return (
       <Stack py={10}>
@@ -76,7 +87,7 @@ function PengumumanList() {
                 </TableTr>
               </TableThead>
               <TableTbody >
-                {pengumumanState.pengumuman.findMany.data?.map((item) => (
+                {filteredData.map((item) => (
                   <TableTr key={item.id}>
                   <TableTd >
                     <Box w={100}>
@@ -108,4 +119,4 @@ function PengumumanList() {
   )
 }
 
-export default Page;
+export default Pengumuman;

src/app/admin/(dashboard)/desa/potensi/page.tsx

@@ -9,29 +9,40 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import potensiDesaState from '../../_state/desa/potensi';
+import { useState } from 'react';
 
 
 function Potensi() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-        title='Potensi Desa'
+        title='Posisi Organisasi'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPotensi />
+      <ListPotensi search={search} />
     </Box>
   );
 }
 
-function ListPotensi() {
+function ListPotensi({ search }: { search: string }) {
   const potensiState = useProxy(potensiDesaState)
+  const router = useRouter()
+
   useShallowEffect(() => {
     potensiState.findMany.load()
   }, [])
 
-  const router = useRouter()
+const filteredData = (potensiState.findMany.data || []).filter(item => {
-
+  const keyword = search.toLowerCase();
+  return (
+    item.name.toLowerCase().includes(keyword) ||
+    item.kategori.toLowerCase().includes(keyword)
+  );
+});
 
   if (!potensiState.findMany.data) {
     return (
@@ -60,7 +71,7 @@ function ListPotensi() {
                 </TableTr>
               </TableThead>
               <TableTbody>
-                {potensiState.findMany.data?.map((item) => (
+                {filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
                       <Box w={100}>

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -8,21 +8,25 @@ import { useRouter } from 'next/navigation';
 import lowonganKerjaState from '../../_state/ekonomi/lowongan-kerja';
 import { useProxy } from 'valtio/utils';
 import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function LowonganKerjaLokal() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Lowongan Kerja Lokal'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListLowonganKerjaLokal/>
+      <ListLowonganKerjaLokal search={search} />
     </Box>
   );
 }
 
-function ListLowonganKerjaLokal() {
+function ListLowonganKerjaLokal({ search }: { search: string }) {
   const lowonganState = useProxy(lowonganKerjaState)
   const router = useRouter();
 
@@ -30,6 +34,15 @@ function ListLowonganKerjaLokal() {
     lowonganState.findMany.load();
   }, [])
 
+  const filteredData = (lowonganState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.posisi.toLowerCase().includes(keyword) ||
+      item.namaPerusahaan.toLowerCase().includes(keyword) ||
+      item.lokasi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!lowonganState.findMany.data) {
     return (
       <Stack py={10}>
@@ -54,7 +67,7 @@ function ListLowonganKerjaLokal() {
               </TableTr>
           </TableThead>
           <TableTbody>
-            {lowonganState.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.posisi}</TableTd>
                 <TableTd>{item.namaPerusahaan}</TableTd>

src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/page.tsx

@@ -11,20 +11,24 @@ import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import pasarDesaState from '../../../_state/ekonomi/pasar-desa/pasar-desa';
 
+
 function PasarDesa() {
+  const [search, setSearch] = useState("")
   return (
     <Box>
       <HeaderSearch
         title='Kategori Produk'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPasarDesa />
+      <ListPasarDesa search={search} />
     </Box>
   );
 }
 
-function ListPasarDesa() {
+function ListPasarDesa({ search }: { search: string }) {
   const statePasar = useProxy(pasarDesaState.kategoriProduk)
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
@@ -43,6 +47,13 @@ function ListPasarDesa() {
     }
   }
 
+  const filteredData = (statePasar.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!statePasar.findMany.data) {
     return (
       <Stack py={10}>
@@ -67,11 +78,11 @@ function ListPasarDesa() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {statePasar.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.nama}</TableTd>
                 <TableTd>
-                  <Button onClick={() => router.push(`/admin/ekonomi/pasar-desa/kategori-produk/${item.id}`)}>
+                  <Button color="green" onClick={() => router.push(`/admin/ekonomi/pasar-desa/kategori-produk/${item.id}`)}>
                     <IconEdit size={20} />
                   </Button>
                 </TableTd>

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/page.tsx

@@ -8,21 +8,25 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import JudulList from '../../../_com/judulList';
 import pasarDesaState from '../../../_state/ekonomi/pasar-desa/pasar-desa';
+import { useState } from 'react';
 
 function PasarDesa() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Produk Pasar Desa'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPasarDesa />
+      <ListPasarDesa search={search} />
     </Box>
   );
 }
 
-function ListPasarDesa() {
+function ListPasarDesa({ search }: { search: string }) {
   const statePasar = useProxy(pasarDesaState.pasarDesa)
   const router = useRouter();
 
@@ -30,6 +34,16 @@ function ListPasarDesa() {
     statePasar.findMany.load()
   }, [])
 
+  const filteredData = (statePasar.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword) ||
+      item.harga.toString().toLowerCase().includes(keyword) ||
+      item.rating.toString().toLowerCase().includes(keyword) ||
+      item.alamatUsaha.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!statePasar.findMany.data) {
     return (
       <Stack py={10}>
@@ -56,7 +70,7 @@ function ListPasarDesa() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {statePasar.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.nama}</TableTd>
                 <TableTd>Rp.{item.harga}</TableTd>

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx

@@ -13,19 +13,22 @@ import { useEffect, useState } from 'react';
 import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
 
 function ProgramKemiskinan() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Program Kemiskinan'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListProgramKemiskinan />
+      <ListProgramKemiskinan search={search}/>
     </Box>
   );
 }
 
-function ListProgramKemiskinan() {
+function ListProgramKemiskinan({ search }: { search: string }) {
   const programState = useProxy(programKemiskinanState)
   const router = useRouter();
   const [lineChart, setLineChart] = useState<any[]>([]);
@@ -51,6 +54,15 @@ function ListProgramKemiskinan() {
     }
   }, [programState.findMany.data])
 
+  const filteredData = (programState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword) ||
+      item.statistik?.tahun.toString().includes(keyword)
+    );
+  });
+
   if (!programState.findMany.data) {
     return (
       <Stack py={10}>
@@ -75,7 +87,7 @@ function ListProgramKemiskinan() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {programState.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.nama}</TableTd>
                 <TableTd>

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/page.tsx

@@ -12,44 +12,58 @@ import { useState } from 'react';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function HubunganOrganisasi() {
+  const [search, setSearch] = useState("");
+
   return (
     <Box>
       <HeaderSearch
         title='Hubungan Organisasi'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListHubunganOrganisasi />
+      <ListHubunganOrganisasi search={search} />
     </Box>
   );
 }
 
-function ListHubunganOrganisasi() {
+
+function ListHubunganOrganisasi({ search }: { search: string }) {
   const stateOrganisasi = useProxy(strukturorganisasiState.hubunganOrganisasi);
-  const [modalHapus, setModalHapus] = useState(false)
+  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null);
-  // const params = useParams()
+  const router = useRouter();
-  const router = useRouter()
 
   useShallowEffect(() => {
-    stateOrganisasi.findMany.load()
+    stateOrganisasi.findMany.load();
-  }, [])
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      stateOrganisasi.delete.byId(selectedId)
+      stateOrganisasi.delete.byId(selectedId);
-      setModalHapus(false)
+      setModalHapus(false);
-      setSelectedId(null)
+      setSelectedId(null);
     }
-  }
+  };
+
+  const filteredData = (stateOrganisasi.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.atasan?.namaLengkap?.toLowerCase().includes(keyword) ||
+      item.bawahan?.namaLengkap?.toLowerCase().includes(keyword) ||
+      item.tipe?.toLowerCase().includes(keyword)
+    );
+  });
 
   if (!stateOrganisasi.findMany.data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
       </Stack>
-    )
+    );
   }
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -68,34 +82,40 @@ function ListHubunganOrganisasi() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {([...stateOrganisasi.findMany.data || []]
+            {filteredData
-              .sort((a, b) => {
+              .sort((a, b) =>
-                return a.atasan?.namaLengkap.localeCompare(b.atasan?.namaLengkap); // kalau status sama, urut nama
+                a.atasan?.namaLengkap.localeCompare(b.atasan?.namaLengkap)
-              }) // Aktif di atas
+              )
-            ).map((item) => (
+              .map((item) => (
-              <TableTr key={item.id}>
+                <TableTr key={item.id}>
-                <TableTd>{item.atasan?.namaLengkap}</TableTd>
+                  <TableTd>{item.atasan?.namaLengkap}</TableTd>
-                <TableTd>{item.bawahan?.namaLengkap}</TableTd>
+                  <TableTd>{item.bawahan?.namaLengkap}</TableTd>
-                <TableTd>{item.tipe}</TableTd>
+                  <TableTd>{item.tipe}</TableTd>
-                <TableTd>
+                  <TableTd>
-                  <Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/${item.id}`)}>
+                    <Button
-                    <IconEdit size={25} />
+                      bg="green"
-                  </Button>
+                      onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/${item.id}`)}
-                </TableTd>
+                    >
-                <TableTd>
+                      <IconEdit size={25} />
-                  <Button color="red" onClick={() => {
+                    </Button>
-                    setSelectedId(item.id)
+                  </TableTd>
-                    setModalHapus(true)
+                  <TableTd>
-                  }}>
+                    <Button
-                    <IconTrash size={20} />
+                      color="red"
-                  </Button>
+                      onClick={() => {
-                </TableTd>
+                        setSelectedId(item.id);
-              </TableTr>
+                        setModalHapus(true);
-            ))}
+                      }}
+                    >
+                      <IconTrash size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
           </TableTbody>
         </Table>
       </Paper>
-      {/* Modal Konfirmasi Hapus */}
+
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
@@ -106,4 +126,5 @@ function ListHubunganOrganisasi() {
   );
 }
 
+
 export default HubunganOrganisasi;

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/page.tsx

@@ -8,21 +8,25 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import JudulList from '../../../_com/judulList';
 import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import { useState } from 'react';
 
 function Pegawai() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Pegawai'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPegawai />
+      <ListPegawai search={search} />
     </Box>
   );
 }
 
-function ListPegawai() {
+function ListPegawai({ search }: { search: string }) {
   const stateOrganisasi = useProxy(strukturorganisasiState.pegawai);
   const router = useRouter();
 
@@ -59,8 +63,15 @@ function ListPegawai() {
     };
   }, []);
 
-  // Log render cycle
+  const filteredData = (stateOrganisasi.findMany.data || []).filter(item => {
-  console.log('Rendering with data:', stateOrganisasi.findMany.data);
+    const keyword = search.toLowerCase();
+    return (
+      item.namaLengkap?.toLowerCase().includes(keyword) ||
+      item.gelarAkademik?.toLowerCase().includes(keyword) ||
+      item.telepon?.toLowerCase().includes(keyword) ||
+      item.posisi?.nama?.toLowerCase().includes(keyword)
+    );
+  });
 
   // Handle loading state
   if (stateOrganisasi.findMany.data === null) {
@@ -107,7 +118,7 @@ function ListPegawai() {
               console.log('Rendering table with items:', stateOrganisasi.findMany.data);
               return null;
             })()}
-            {([...stateOrganisasi.findMany.data || []]
+            {([...filteredData]
               .sort((a, b) => {
                 if (a.isActive === b.isActive) {
                   return a.namaLengkap.localeCompare(b.namaLengkap); // kalau status sama, urut nama

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/page.tsx

@@ -6,25 +6,28 @@ import { useRouter } from 'next/navigation';
 import HeaderSearch from '../../../_com/header';
 import JudulList from '../../../_com/judulList';
 import { useProxy } from 'valtio/utils';
-import { useState } from 'react';
 import { useShallowEffect } from '@mantine/hooks';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import { useState } from 'react';
 
 function PosisiOrganisasi() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Posisi Organisasi'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPosisiOrganisasi />
+      <ListPosisiOrganisasi search={search} />
     </Box>
   );
 }
 
-function ListPosisiOrganisasi() {
+function ListPosisiOrganisasi({ search }: { search: string }) {
   const stateOrganisasi = useProxy(strukturorganisasiState.posisiOrganisasi)
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false)
@@ -42,6 +45,15 @@ function ListPosisiOrganisasi() {
     }
   }
 
+  const filteredData = (stateOrganisasi.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama?.toLowerCase().includes(keyword) ||
+      item.deskripsi?.toLowerCase().includes(keyword) ||
+      item.hierarki?.toString().toLowerCase().includes(keyword)
+    );
+  });
+
   if (!stateOrganisasi.findMany.data) {
     return (
       <Stack py={10}>
@@ -68,7 +80,7 @@ function ListPosisiOrganisasi() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {stateOrganisasi.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.nama}</TableTd>
                 <TableTd>

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -8,21 +8,25 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import keamananLingkunganState from '../../_state/keamanan/keamanan-lingkungan';
 import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function KeamananLingkungan() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Keamanan Lingkungan'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListKeamananLingkungan />
+      <ListKeamananLingkungan search={search}/>
     </Box>
   );
 }
 
-function ListKeamananLingkungan() {
+function ListKeamananLingkungan({ search }: { search: string }) {
   const keamananState = useProxy(keamananLingkunganState)
   const router = useRouter();
 
@@ -30,6 +34,14 @@ function ListKeamananLingkungan() {
     keamananState.findMany.load()
   }, [])
 
+  const filteredData = (keamananState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!keamananState.findMany.data) {
     return (
       <Stack py={10}>
@@ -53,7 +65,7 @@ function ListKeamananLingkungan() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            {keamananState.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.name}</TableTd>
                 <TableTd>

src/app/admin/(dashboard)/keamanan/kontak-darurat/page.tsx

@@ -8,21 +8,25 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import kontakDaruratKeamananState from '../../_state/keamanan/kontak-darurat-keamanan';
 import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function KontakDaurat() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Kontak Darurat'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListKontakDaurat/>
+      <ListKontakDaurat search={search}/>
     </Box>
   );
 }
 
-function ListKontakDaurat() {
+function ListKontakDaurat({ search }: { search: string }) {
   const kontakState = useProxy(kontakDaruratKeamananState)
   const router = useRouter();
 
@@ -30,6 +34,15 @@ function ListKontakDaurat() {
     kontakState.findMany.load()
   }, [])
 
+  const filteredData = (kontakState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword) ||
+      item.kontakItems[0].nama.toLowerCase().includes(keyword) ||
+      item.kontakItems[0].nomorTelepon.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!kontakState.findMany.data) {
     return (
       <Stack py={10}>
@@ -54,7 +67,7 @@ function ListKontakDaurat() {
               </TableTr>
           </TableThead>
           <TableTbody>
-            {kontakState.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.nama}</TableTd>
                 <TableTd>{item.kontakItems[0].nama}</TableTd>

src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx

@@ -8,21 +8,25 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import laporanPublikState from '../../_state/keamanan/laporan-publik';
 import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function LaporanPublik() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Laporan Publik'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListLaporanPublik/>
+      <ListLaporanPublik search={search}/>
     </Box>
   );
 }
 
-function ListLaporanPublik() {
+function ListLaporanPublik({ search }: { search: string }) {
   const stateLaporan = useProxy(laporanPublikState)
   const router = useRouter();
 
@@ -30,6 +34,15 @@ function ListLaporanPublik() {
     stateLaporan.findMany.load()
   }, [])
 
+  const filteredData = (stateLaporan.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.judul.toLowerCase().includes(keyword) ||
+      item.status.toLowerCase().includes(keyword) ||
+      item.kronologi?.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!stateLaporan.findMany.data) {
     return (
       <Stack py={10}>
@@ -55,7 +68,7 @@ function ListLaporanPublik() {
               </TableTr>
           </TableThead>
           <TableTbody>
-            {stateLaporan.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.judul}</TableTd>
                 <TableTd>{new Date(item.tanggalWaktu).toLocaleDateString('id-ID')}</TableTd>

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -8,21 +8,25 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import pencegahanKriminalitasState from '../../_state/keamanan/pencegahan-kriminalitas';
 import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function PencegahanKriminalitas() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Pencegahan Kriminalitas'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPencegahanKriminalitas/>
+      <ListPencegahanKriminalitas search={search}/>
     </Box>
   );
 }
 
-function ListPencegahanKriminalitas() {
+function ListPencegahanKriminalitas({ search }: { search: string }) {
   const kriminalitasState = useProxy(pencegahanKriminalitasState)
   const router = useRouter();
 
@@ -30,6 +34,15 @@ function ListPencegahanKriminalitas() {
     kriminalitasState.findMany.load()
   }, [])
 
+  const filteredData = (kriminalitasState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.programKeamanan.nama.toLowerCase().includes(keyword) ||
+      item.programKeamanan.slug.toLowerCase().includes(keyword) ||
+      item.programKeamanan.deskripsi?.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!kriminalitasState.findMany.data) {
     return (
       <Box py={10}>
@@ -55,7 +68,7 @@ function ListPencegahanKriminalitas() {
               </TableTr>
           </TableThead>
           <TableTbody>
-            {kriminalitasState.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.programKeamanan.nama}</TableTd>
                 <TableTd>{item.programKeamanan.slug}</TableTd>

src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx

@@ -8,21 +8,25 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import polsekTerdekat from '../../_state/keamanan/polsek-terdekat';
+import { useState } from 'react';
 
 function PolsekTerdekat() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Polsek Terdekat'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPolsekTerdekat/>
+      <ListPolsekTerdekat search={search}/>
     </Box>
   );
 }
 
-function ListPolsekTerdekat() {
+function ListPolsekTerdekat({ search }: { search: string }) {
   const polsekState = useProxy(polsekTerdekat)
   const router = useRouter();
 
@@ -30,6 +34,15 @@ function ListPolsekTerdekat() {
     polsekState.findMany.load()
   }, [])
 
+  const filteredData = (polsekState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword) ||
+      item.jarakKeDesa.toLowerCase().includes(keyword) ||
+      item.alamat.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!polsekState.findMany.data) {
     return (
       <Stack py={10}>
@@ -54,7 +67,7 @@ function ListPolsekTerdekat() {
               </TableTr>
           </TableThead>
           <TableTbody>
-            {polsekState.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.nama}</TableTd>
                 <TableTd>{item.jarakKeDesa}</TableTd>

src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx

@@ -8,21 +8,25 @@ import { useRouter } from 'next/navigation';
 import tipsKeamananState from '../../_state/keamanan/tips-keamanan';
 import { useProxy } from 'valtio/utils';
 import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function TipsKeamanan() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Tips Keamanan'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListTipsKeamanan/>
+      <ListTipsKeamanan search={search}/>
     </Box>
   );
 }
 
-function ListTipsKeamanan() {
+function ListTipsKeamanan({ search }: { search: string }) {
   const stateKeamanan = useProxy(tipsKeamananState)
   const router = useRouter();
 
@@ -30,6 +34,14 @@ function ListTipsKeamanan() {
     stateKeamanan.findMany.load()
   }, [])
 
+  const filteredData = (stateKeamanan.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.judul.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!stateKeamanan.findMany.data) {
     return (
       <Stack py={10}>
@@ -53,7 +65,7 @@ function ListTipsKeamanan() {
               </TableTr>
           </TableThead>
           <TableTbody>
-            {stateKeamanan.findMany.data?.map((item) => (
+            {filteredData.map((item) => (
               <TableTr key={item.id}>
                 <TableTd>{item.judul}</TableTd>
                 <TableTd>

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

@@ -8,22 +8,26 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import JudulList from '../../../_com/judulList';
 import artikelKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import { useState } from 'react';
 
 
 function ArtikelKesehatan() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Artikel Kesehatan'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListArtikelKesehatan/>
+      <ListArtikelKesehatan search={search}/>
     </Box>
   );
 }
 
-function ListArtikelKesehatan() {
+function ListArtikelKesehatan({ search }: { search: string }) {
   const stateArtikelKesehatan = useProxy(artikelKesehatanState)
   const router = useRouter();
 
@@ -31,6 +35,14 @@ function ListArtikelKesehatan() {
     stateArtikelKesehatan.findMany.load()
   }, [])
 
+  const filteredData = (stateArtikelKesehatan.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.title.toLowerCase().includes(keyword) ||
+      item.content.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!stateArtikelKesehatan.findMany.data) {
     return (
       <Box py={10}>
@@ -56,7 +68,7 @@ function ListArtikelKesehatan() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {stateArtikelKesehatan.findMany.data?.map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>{item.title}</TableTd>
                   <TableTd>{item.content}</TableTd>

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

@@ -8,22 +8,26 @@ import { useProxy } from 'valtio/utils';
 import fasilitasKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import HeaderSearch from '../../../_com/header';
 import JudulList from '../../../_com/judulList';
+import { useState } from 'react';
 
 
 function FasilitasKesehatan() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Fasilitas Kesehatan'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListFasilitasKesehatan/>
+      <ListFasilitasKesehatan search={search}/>
     </Box>
   );
 }
 
-function ListFasilitasKesehatan() {
+function ListFasilitasKesehatan({ search }: { search: string }) {
   const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState)
   const router = useRouter();
 
@@ -31,6 +35,15 @@ function ListFasilitasKesehatan() {
     stateFasilitasKesehatan.findMany.load()
   }, [])
 
+  const filteredData = (stateFasilitasKesehatan.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.informasiumum.alamat.toLowerCase().includes(keyword) ||
+      item.informasiumum.jamOperasional.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!stateFasilitasKesehatan.findMany.data) {
     return (
       <Box py={10}>
@@ -57,7 +70,7 @@ function ListFasilitasKesehatan() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {stateFasilitasKesehatan.findMany.data?.map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>{item.name}</TableTd>
                   <TableTd>{item.informasiumum.alamat}</TableTd>

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

@@ -10,8 +10,24 @@ import { useProxy } from 'valtio/utils';
 import JudulListTab from '../../../_com/jusulListTab';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikkepuasan from '../../../_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
+import HeaderSearch from '../../../_com/header';
 
 function GrafikHasilKepuasanMasyarakat() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Grafik Hasil Kepuasan Masyarakat'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListGrafikHasilKepuasanMasyarakat search={search} />
+    </Box>
+  );
+}
+function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
   type PDKMGrafik = {
     id: string;
     label: string;
@@ -52,6 +68,14 @@ function GrafikHasilKepuasanMasyarakat() {
     }
   }, [stateGrafikKepuasan.findMany.data]);
 
+  const filteredData = (stateGrafikKepuasan.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.label.toLowerCase().includes(keyword) ||
+      item.jumlah.toString().toLowerCase().includes(keyword)
+    );
+  });
+
   if (!stateGrafikKepuasan.findMany.data) {
     return (
       <Stack>
@@ -81,7 +105,7 @@ function GrafikHasilKepuasanMasyarakat() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {stateGrafikKepuasan.findMany.data?.map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>{item.label}</TableTd>
                   <TableTd>{item.jumlah}</TableTd>

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>

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

@@ -10,8 +10,24 @@ import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 import { useProxy } from 'valtio/utils';
 import JudulListTab from '../../../_com/jusulListTab';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import HeaderSearch from '../../../_com/header';
 
 function PersentaseDataKelahiranKematian() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Persentase Data Kelahiran & Kematian'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPersentaseDataKelahiranKematian search={search} />
+    </Box>
+  );
+}
+function ListPersentaseDataKelahiranKematian({ search }: { search: string }) {
   type PDKMGrafik = {
     id: string;
     tahun: string;
@@ -56,6 +72,16 @@ function PersentaseDataKelahiranKematian() {
     }
   }, [statePersentase.findMany.data]);
 
+  const filteredData = (statePersentase.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.tahun.toLowerCase().includes(keyword) ||
+      item.kematianKasar.toString().toLowerCase().includes(keyword) ||
+      item.kematianBayi.toString().toLowerCase().includes(keyword) ||
+      item.kelahiranKasar.toString().toLowerCase().includes(keyword)
+    );
+  });
+
   if (!statePersentase.findMany.data) {
     return (
       <Stack>
@@ -87,7 +113,7 @@ function PersentaseDataKelahiranKematian() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {statePersentase.findMany.data?.map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>{item.tahun}</TableTd>
                   <TableTd>{item.kematianKasar}</TableTd>

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx

@@ -8,21 +8,25 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import infoWabahPenyakit from '../../_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
 import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function InfoWabahPenyakit() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Info Wabah Penyakit'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListInfoWabahPenyakit/>
+      <ListInfoWabahPenyakit search={search}/>
     </Box>
   );
 }
 
-function ListInfoWabahPenyakit() {
+function ListInfoWabahPenyakit({ search }: { search: string }) {
   const infoWabahPenyakitState = useProxy(infoWabahPenyakit)
   const router = useRouter()
 
@@ -30,6 +34,14 @@ function ListInfoWabahPenyakit() {
     infoWabahPenyakitState.findMany.load()
   }, [])
 
+  const filteredData = (infoWabahPenyakitState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsiSingkat.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!infoWabahPenyakitState.findMany.data) {
     return (
       <Box py={10}>
@@ -56,7 +68,7 @@ function ListInfoWabahPenyakit() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {infoWabahPenyakitState.findMany.data?.map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>
                     <Box w={100}>

src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx

@@ -8,21 +8,25 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import kontakDarurat from '../../_state/kesehatan/kontak-darurat/kontakDarurat';
 import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function KontakDarurat() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Kontak Darurat'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListKontakDarurat />
+      <ListKontakDarurat search={search}/>
     </Box>
   );
 }
 
-function ListKontakDarurat() {
+function ListKontakDarurat({ search }: { search: string }) {
   const kontakDaruratState = useProxy(kontakDarurat)
   const router = useRouter();
 
@@ -30,6 +34,14 @@ function ListKontakDarurat() {
     kontakDaruratState.findMany.load()
   }, [])
 
+  const filteredData = (kontakDaruratState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!kontakDaruratState.findMany.data) {
     return (
       <Box py={10}>
@@ -57,7 +69,7 @@ function ListKontakDarurat() {
                 </TableTr>
               </TableThead>
               <TableTbody>
-                {kontakDaruratState.findMany.data?.map((item) => (
+                {filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
                       <Box w={100}>

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx

@@ -8,22 +8,25 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import { useShallowEffect } from '@mantine/hooks';
 import penangananDarurat from '../../_state/kesehatan/penanganan-darurat/penangananDarurat';
-
+import { useState } from 'react';
 
 function PenangananDarurat() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='PenangananDarurat'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPenangananDarurat/>
+      <ListPenangananDarurat search={search}/>
     </Box>
   );
 }
 
-function ListPenangananDarurat() {
+function ListPenangananDarurat({ search }: { search: string }) {
   const penangananDaruratState = useProxy(penangananDarurat)
   const router = useRouter();
 
@@ -31,6 +34,14 @@ function ListPenangananDarurat() {
     penangananDaruratState.findMany.load()
   }, [])
 
+  const filteredData = (penangananDaruratState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!penangananDaruratState.findMany.data) {
     return (
       <Box py={10}>
@@ -58,7 +69,7 @@ function ListPenangananDarurat() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {penangananDaruratState.findMany.data?.map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                 <TableTd>
                   <Box w={100}>

src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx

@@ -8,21 +8,25 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import posyandustate from '../../_state/kesehatan/posyandu/posyandu';
 import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function Posyandu() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Posyandu'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPosyandu />
+      <ListPosyandu search={search} />
     </Box>
   );
 }
 
-function ListPosyandu() {
+function ListPosyandu({ search }: { search: string }) {
   const statePosyandu = useProxy(posyandustate)
   const router = useRouter();
 
@@ -30,6 +34,14 @@ function ListPosyandu() {
     statePosyandu.findMany.load()
   }, [])
 
+  const filteredData = (statePosyandu.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.nomor.toString().toLowerCase().includes(keyword)
+    );
+  });
+
   if (!statePosyandu.findMany.data) {
     return (
       <Box py={10}>
@@ -56,7 +68,7 @@ function ListPosyandu() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {statePosyandu.findMany.data?.map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>{item.name}</TableTd>
                   <TableTd>{item.nomor}</TableTd>

src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx

@@ -8,21 +8,25 @@ import { useRouter } from 'next/navigation';
 import programKesehatan from '../../_state/kesehatan/program-kesehatan/programKesehatan';
 import { useProxy } from 'valtio/utils';
 import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function ProgramKesehatan() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Program Kesehatan'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListProgramKesehatan />
+      <ListProgramKesehatan search={search}/>
     </Box>
   );
 }
 
-function ListProgramKesehatan() {
+function ListProgramKesehatan({ search }: { search: string }) {
   const programKesehatanState = useProxy(programKesehatan)
   const router = useRouter()
 
@@ -30,6 +34,14 @@ function ListProgramKesehatan() {
     programKesehatanState.findMany.load()
   }, [])
 
+  const filteredData = (programKesehatanState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsiSingkat.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!programKesehatanState.findMany.data) {
     return (
       <Box py={10}>
@@ -57,14 +69,16 @@ function ListProgramKesehatan() {
                 </TableTr>
               </TableThead>
               <TableTbody>
-                {programKesehatanState.findMany.data?.map((item) => (
+                {filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
                       <Box w={100}>
                         <Text truncate="end" fz={"sm"}>{item.name}</Text>
                       </Box>
                     </TableTd>
-                    <TableTd>{item.deskripsiSingkat}</TableTd>
+                    <TableTd>
+                      <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
+                    </TableTd>
                     <TableTd>
                       <Image w={100} src={item.image?.link} alt="image" />
                     </TableTd>

src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx

@@ -8,21 +8,25 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import puskesmasState from '../../_state/kesehatan/puskesmas/puskesmas';
+import { useState } from 'react';
 
 function Puskesmas() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Puskesmas'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPuskesmas/>
+      <ListPuskesmas search={search}/>
     </Box>
   );
 }
 
-function ListPuskesmas() {
+function ListPuskesmas({ search }: { search: string }) {
   const statePuskesmas = useProxy(puskesmasState)
   const router = useRouter();
 
@@ -30,6 +34,14 @@ function ListPuskesmas() {
     statePuskesmas.findMany.load()
   }, [])
 
+  const filteredData = (statePuskesmas.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.alamat.toLowerCase().includes(keyword)
+    );
+  });
+
   if (!statePuskesmas.findMany.data) {
     return (
       <Box py={10}>
@@ -56,7 +68,7 @@ function ListPuskesmas() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {statePuskesmas.findMany.data?.map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>{item.name}</TableTd>
                   <TableTd>{item.alamat}</TableTd>

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -1,42 +1,46 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
 import daftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
 
-function Page() {
+function DaftarInformasiPublik() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
-      <Grid>
+      <HeaderSearch
-        <GridCol span={{ base: 12, md: 9 }}>
+        title='Posisi Organisasi'
-          <Title order={3}>Daftar Informasi Publik Desa Darmasaba</Title>
+        placeholder='pencarian'
-        </GridCol>
+        searchIcon={<IconSearch size={20} />}
-        <GridCol span={{ base: 12, md: 3 }}>
+        value={search}
-          <Paper radius={"lg"} bg={colors['white-1']}>
+        onChange={(e) => setSearch(e.currentTarget.value)}
-            <TextInput
+      />
-              radius={"lg"}
+      <ListDaftarInformasi search={search} />
-              placeholder='pencarian'
-              leftSection={<IconSearch size={20} />}
-            />
-          </Paper>
-        </GridCol>
-      </Grid>
-      <ListDaftarInformasi />
     </Box>
   );
 }
 
-function ListDaftarInformasi() {
+function ListDaftarInformasi({ search }: { search: string }) {
   const listData = useProxy(daftarInformasiPublik)
+  const router = useRouter()
 
   useShallowEffect(() => {
     listData.findMany.load()
   }, [])
 
-  const router = useRouter()
+
+  const filteredData = (listData.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.jenisInformasi.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
 
   if (!listData.findMany.data) {
     return (
@@ -77,7 +81,7 @@ function ListDaftarInformasi() {
                 </TableTr>
               </TableThead>
               <TableTbody>
-                {listData.findMany.data?.map((item, index) => (
+                {filteredData.map((item, index) => (
                   <TableTr key={item.id}>
                     <TableTd>{index + 1}</TableTd>
                     <TableTd>{item.jenisInformasi}</TableTd>
@@ -98,4 +102,4 @@ function ListDaftarInformasi() {
   )
 }
 
-export default Page;
+export default DaftarInformasiPublik;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/page.tsx

@@ -11,8 +11,25 @@ import { Cell, Pie, PieChart } from 'recharts';
 import { useProxy } from 'valtio/utils';
 import JudulListTab from '../../../_com/jusulListTab';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import HeaderSearch from '../../../_com/header';
 
 function GrafikBerdasarkanJenisKelamin() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Grafik Berdasarkan Jenis Kelamin Responden'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListGrafikBerdasarkanJenisKelamin search={search} />
+    </Box>
+  );
+}
+
+function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
   const stategrafikBerdasarkanJenisKelamin = useProxy(grafikBerdasarkanJenisKelamin)
   const [donutData, setDonutData] = useState<any[]>([]);
   const [mounted, setMounted] = useState(false);
@@ -46,6 +63,14 @@ function GrafikBerdasarkanJenisKelamin() {
     }
   }, [stategrafikBerdasarkanJenisKelamin.findMany.data])
 
+  const filteredData = (stategrafikBerdasarkanJenisKelamin.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.laki.toString().toLowerCase().includes(keyword) ||
+      item.perempuan.toString().toLowerCase().includes(keyword)
+    );
+  });
+
   if (!stategrafikBerdasarkanJenisKelamin.findMany.data) {
     return (
       <Box>
@@ -74,14 +99,14 @@ function GrafikBerdasarkanJenisKelamin() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {stategrafikBerdasarkanJenisKelamin.findMany.data.length === 0 ? (
+              {filteredData.length === 0 ? (
                 <TableTr>
                   <TableTd colSpan={6}>
                     <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
                   </TableTd>
                 </TableTr>
               ) : (
-                stategrafikBerdasarkanJenisKelamin.findMany.data.map((item) => (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>{item.laki}</TableTd>
                     <TableTd>{item.perempuan}</TableTd>

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/page.tsx

@@ -11,9 +11,25 @@ import { useSnapshot } from 'valtio';
 import JudulListTab from '../../../_com/jusulListTab';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikBerdasarkanResponden from '../../../_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
+import HeaderSearch from '../../../_com/header';
 
 function GrafikBerdasarkanResponden() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Grafik Berdasarkan Pilihan Responden'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListGrafikBerdasarkanResponden search={search} />
+    </Box>
+  );
+}
 
+function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
   const stategrafikBerdasarkanResponden = useSnapshot(grafikBerdasarkanResponden)
   const [donutData, setDonutData] = useState<any[]>([]);
   const [mounted, setMounted] = useState(false);
@@ -38,6 +54,16 @@ function GrafikBerdasarkanResponden() {
     stategrafikBerdasarkanResponden.findMany.load()
   }, [])
 
+  const filteredData = (stategrafikBerdasarkanResponden.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.sangatbaik.toString().toLowerCase().includes(keyword) ||
+      item.baik.toString().toLowerCase().includes(keyword) ||
+      item.kurangbaik.toString().toLowerCase().includes(keyword) ||
+      item.tidakbaik.toString().toLowerCase().includes(keyword)
+    );
+  });
+
   useEffect(() => {
     if (stategrafikBerdasarkanResponden.findMany.data) {
       const totalSangatBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.sangatbaik || 0), 0);
@@ -83,14 +109,14 @@ function GrafikBerdasarkanResponden() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {stategrafikBerdasarkanResponden.findMany.data.length === 0 ? (
+              {filteredData.length === 0 ? (
                 <TableTr>
                   <TableTd colSpan={6}>
                     <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
                   </TableTd>
                 </TableTr>
               ) : (
-                stategrafikBerdasarkanResponden.findMany.data.map((item) => (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>{item.sangatbaik}</TableTd>
                     <TableTd>{item.baik}</TableTd>

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/page.tsx

@@ -11,8 +11,25 @@ import { Cell, Pie, PieChart } from 'recharts';
 import { useProxy } from 'valtio/utils';
 import JudulListTab from '../../../_com/jusulListTab';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import HeaderSearch from '../../../_com/header';
 
 function GrafikBerdasarakanUmur() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Grafik Berdasarkan Umur Responden'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListGrafikBerdasarakanUmur search={search} />
+    </Box>
+  );
+}
+
+function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
   const stategrafikBerdasarkanUmur = useProxy(grafikBerdasarkanUmur)
   const [donutData, setDonutData] = useState<any[]>([]);
   const [mounted, setMounted] = useState(false);
@@ -50,6 +67,16 @@ function GrafikBerdasarakanUmur() {
     }
   }, [stategrafikBerdasarkanUmur.findMany.data])
 
+  const filteredData = (stategrafikBerdasarkanUmur.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.remaja.toString().toLowerCase().includes(keyword) ||
+      item.dewasa.toString().toLowerCase().includes(keyword) ||
+      item.orangtua.toString().toLowerCase().includes(keyword) ||
+      item.lansia.toString().toLowerCase().includes(keyword)
+    );
+  });
+
   if (!stategrafikBerdasarkanUmur.findMany.data) {
     return (
       <Box>
@@ -57,7 +84,7 @@ function GrafikBerdasarakanUmur() {
       </Box>
     )
   }
- 
+
   return (
     <Box>
       <Stack gap={"xs"}>
@@ -80,14 +107,14 @@ function GrafikBerdasarakanUmur() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {stategrafikBerdasarkanUmur.findMany.data.length === 0 ? (
+              {filteredData.length === 0 ? (
                 <TableTr>
                   <TableTd colSpan={6}>
                     <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
                   </TableTd>
                 </TableTr>
               ) : (
-                stategrafikBerdasarkanUmur.findMany.data.map((item) => (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>{item.remaja}</TableTd>
                     <TableTd>{item.dewasa}</TableTd>

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/page.tsx

@@ -10,9 +10,26 @@ import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 import { useSnapshot } from 'valtio';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikHasilKepuasanMasyarakat from '../../../_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan';
+import HeaderSearch from '../../../_com/header';
 
 
 function GrafikHasilKepuasanMasyarakat() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Grafik Hasil Kepuasan Masyarakat'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListGrafikHasilKepuasanMasyarakat search={search} />
+    </Box>
+  );
+}
+
+function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
   type IKMGrafik = {
     id: string;
     label: string;
@@ -58,6 +75,14 @@ function GrafikHasilKepuasanMasyarakat() {
     }
   }, [stateGrafikHasilKepuasan.findMany.data]);
 
+  const filteredData = (stateGrafikHasilKepuasan.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.label.toLowerCase().includes(keyword) ||
+      item.kepuasan.toString().toLowerCase().includes(keyword)
+    );
+  });
+
 
 
   if (!stateGrafikHasilKepuasan.findMany.data) {
@@ -87,7 +112,7 @@ function GrafikHasilKepuasanMasyarakat() {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {stateGrafikHasilKepuasan.findMany.data?.map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>{item.label}</TableTd>
                   <TableTd>{item.kepuasan}</TableTd>