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)/kesehatan/data-kesehatan-warga/artikel_kesehatan/page.tsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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