wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 2 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

23
src/app/admin/(dashboard)/_com/header.tsx
View File

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

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

@@ -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>
<GridCol span={{ base: 12, md: 9 }}>
<Title order={3}>Berita</Title>
</GridCol>
<GridCol span={{ base: 12, md: 3 }}>
<Paper radius={"lg"} bg={colors['white-1']}>
<TextInput
radius={"lg"}
placeholder='pencarian'
leftSection={<IconSearch size={20} />}
/>
</Paper>
</GridCol>
</Grid>
<BeritaList />
<HeaderSearch
title='Berita'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListBerita search={search} />
</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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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 [selectedId, setSelectedId] = useState<string | null>(null)
// const params = useParams()
const router = useRouter()
const [modalHapus, setModalHapus] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const router = useRouter();
useShallowEffect(() => {
stateOrganisasi.findMany.load()
}, [])
stateOrganisasi.findMany.load();
}, []);
const handleHapus = () => {
if (selectedId) {
stateOrganisasi.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
stateOrganisasi.delete.byId(selectedId);
setModalHapus(false);
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 || []]
.sort((a, b) => {
return a.atasan?.namaLengkap.localeCompare(b.atasan?.namaLengkap); // kalau status sama, urut nama
}) // Aktif di atas
).map((item) => (
<TableTr key={item.id}>
<TableTd>{item.atasan?.namaLengkap}</TableTd>
<TableTd>{item.bawahan?.namaLengkap}</TableTd>
<TableTd>{item.tipe}</TableTd>
<TableTd>
<Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/${item.id}`)}>
<IconEdit size={25} />
</Button>
</TableTd>
<TableTd>
<Button color="red" onClick={() => {
setSelectedId(item.id)
setModalHapus(true)
}}>
<IconTrash size={20} />
</Button>
</TableTd>
</TableTr>
))}
{filteredData
.sort((a, b) =>
a.atasan?.namaLengkap.localeCompare(b.atasan?.namaLengkap)
)
.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.atasan?.namaLengkap}</TableTd>
<TableTd>{item.bawahan?.namaLengkap}</TableTd>
<TableTd>{item.tipe}</TableTd>
<TableTd>
<Button
bg="green"
onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/${item.id}`)}
>
<IconEdit size={25} />
</Button>
</TableTd>
<TableTd>
<Button
color="red"
onClick={() => {
setSelectedId(item.id);
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;

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

@@ -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
console.log('Rendering with data:', stateOrganisasi.findMany.data);
const filteredData = (stateOrganisasi.findMany.data || []).filter(item => {
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

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

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

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>

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>

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

@@ -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>
<GridCol span={{ base: 12, md: 9 }}>
<Title order={3}>Daftar Informasi Publik Desa Darmasaba</Title>
</GridCol>
<GridCol span={{ base: 12, md: 3 }}>
<Paper radius={"lg"} bg={colors['white-1']}>
<TextInput
radius={"lg"}
placeholder='pencarian'
leftSection={<IconSearch size={20} />}
/>
</Paper>
</GridCol>
</Grid>
<ListDaftarInformasi />
<HeaderSearch
title='Posisi Organisasi'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListDaftarInformasi search={search} />
</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;

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

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

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

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

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

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

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

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