Add Fitur Search Di setiap menu

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>