wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Add Fitur Search Di setiap menu

Browse Source
This commit is contained in:
nico
2025-07-08 00:30:55 +08:00
parent 2725c2c064
commit 7e95d5fbb4
38 changed files with 792 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>