diff --git a/src/app/darmasaba/(pages)/desa/potensi/[id]/page.tsx b/src/app/darmasaba/(pages)/desa/potensi/[id]/page.tsx index f5a7cadc..fe8bf5fa 100644 --- a/src/app/darmasaba/(pages)/desa/potensi/[id]/page.tsx +++ b/src/app/darmasaba/(pages)/desa/potensi/[id]/page.tsx @@ -67,16 +67,26 @@ function Page() { Informasi & Pelayanan Potensi Desa Digital - {state.findUnique.data?.name + style={{ + overflow: 'hidden', + borderRadius: 'var(--mantine-radius-lg)', + }} + > + {state.findUnique.data?.name + diff --git a/src/app/darmasaba/(pages)/desa/profile/page.tsx b/src/app/darmasaba/(pages)/desa/profile/page.tsx index e2f08dd5..9103580c 100644 --- a/src/app/darmasaba/(pages)/desa/profile/page.tsx +++ b/src/app/darmasaba/(pages)/desa/profile/page.tsx @@ -26,7 +26,7 @@ function Page() { - + @@ -35,7 +35,7 @@ function Page() { - + {/* Tombol Scroll ke Atas */} diff --git a/src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx b/src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx index baefc403..9ad92167 100644 --- a/src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx +++ b/src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx @@ -24,7 +24,7 @@ function LambangDesa() { } return ( - +
@@ -59,7 +59,7 @@ function LambangDesa() { }} > + Ikon Desa diff --git a/src/app/darmasaba/(pages)/desa/profile/ui/motoDesa.tsx b/src/app/darmasaba/(pages)/desa/profile/ui/motoDesa.tsx index baee3347..53e73d55 100644 --- a/src/app/darmasaba/(pages)/desa/profile/ui/motoDesa.tsx +++ b/src/app/darmasaba/(pages)/desa/profile/ui/motoDesa.tsx @@ -36,7 +36,7 @@ const letters = ["S", "I", "G", "A", "P"]; function MotoDesa() { return ( - + + +
diff --git a/src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx b/src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx index 185f4606..1acc52f1 100644 --- a/src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx +++ b/src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx @@ -24,7 +24,7 @@ function SejarahDesa() { } return ( - +
diff --git a/src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx b/src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx index 46f6594b..29bc2809 100644 --- a/src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx +++ b/src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx @@ -36,7 +36,7 @@ function SemuaPerbekel() { } return ( - + + - - - - + + - Struktur Organisasi Dan SK Pengurus BumDes + Struktur Organisasi & SK Pengurus BumDes - Gambaran visual peran dan pegawai yang ditugaskan. Arahkan kursor - untuk melihat detail atau klik node untuk fokus tampilan. + Gambaran visual peran dan pengurus yang ditugaskan. Gunakan kontrol + di bawah untuk mencari, memperbesar, atau melihat lebih jelas. + - + ) } function StrukturOrganisasiBumDes() { const stateOrganisasi: any = useProxy(stateStrukturBumDes.pegawai) + const chartContainerRef = useRef(null) + const [scale, setScale] = useState(1) + const [isFullscreen, setFullscreen] = useState(false) + const [searchQuery, setSearchQuery] = useState('') + const debouncedSearch = useRef( + debounce((value: string) => setSearchQuery(value), 400) + ).current useEffect(() => { void stateOrganisasi.findMany.load() @@ -81,17 +94,15 @@ function StrukturOrganisasiBumDes() { Memuat struktur organisasi… - Mengambil data pegawai dan posisi. Mohon tunggu sebentar. + Mengambil data pengurus dan posisi. Mohon tunggu sebentar.
) } - if ( - !stateOrganisasi.findMany.data || - stateOrganisasi.findMany.data.length === 0 - ) { + const data = stateOrganisasi.findMany.data || [] + if (data.length === 0) { return (
@@ -109,11 +120,10 @@ function StrukturOrganisasiBumDes() {
- Data pegawai belum tersedia + Data pengurus belum tersedia - Belum ada data pegawai yang tercatat untuk BumDes. Silakan coba - muat ulang atau periksa sumber data. + Belum ada data pengurus yang tercatat untuk BumDes. - @@ -140,161 +141,232 @@ function StrukturOrganisasiBumDes() { ) } + // πŸ“Š susun struktur organisasi const posisiMap = new Map() - - const aktifPegawai = stateOrganisasi.findMany.data.filter((p: any) => p.isActive); + const aktifPegawai = data.filter((p: any) => p.isActive) for (const pegawai of aktifPegawai) { - const posisiId = pegawai.posisi.id; + const posisiId = pegawai.posisi.id if (!posisiMap.has(posisiId)) { posisiMap.set(posisiId, { ...pegawai.posisi, pegawaiList: [], children: [], - }); + }) } - posisiMap.get(posisiId)!.pegawaiList.push(pegawai); + posisiMap.get(posisiId)!.pegawaiList.push(pegawai) } - // First, create a map of all unique positions -const allPositions = new Map(); -aktifPegawai.forEach((pegawai: any) => { - if (!allPositions.has(pegawai.posisi.id)) { - allPositions.set(pegawai.posisi.id, { - ...pegawai.posisi, - pegawaiList: [], - children: [] - }); - } -}); + const root: any[] = [] + posisiMap.forEach((posisi) => { + if (posisi.parentId) { + const parent = posisiMap.get(posisi.parentId) + if (parent) parent.children.push(posisi) + else root.push(posisi) + } else root.push(posisi) + }) -// Then assign employees to their positions -aktifPegawai.forEach((pegawai: any) => { - const posisi = allPositions.get(pegawai.posisi.id); - if (posisi) { - posisi.pegawaiList.push(pegawai); - } -}); - -// Now build the hierarchy -const root = []; -for (const [_, posisi] of allPositions) { - if (posisi.parentId) { - const parent = allPositions.get(posisi.parentId); - if (parent) { - parent.children.push(posisi); - } else { - // Only add to root if it's a top-level position - if (!posisi.parentId) { - root.push(posisi); - } - } - } else { - root.push(posisi); - } -} - function toOrgChartFormat(node: any): any { + const toOrgChartFormat = (node: any): any => { + const pegawai = node.pegawaiList?.[0] return { expanded: true, - type: 'person', - styleClass: 'p-person', data: { - name: node.pegawaiList?.[0]?.namaLengkap || 'Belum ditugaskan', - title: node.nama || 'Tanpa jabatan', - image: node.pegawaiList?.[0]?.image?.link || '/img/default.png', + id: pegawai?.id, + name: pegawai?.namaLengkap || 'Belum Ditugaskan', + title: node.nama || 'Tanpa Jabatan', + image: pegawai?.image?.link || '/img/default.png', description: node.deskripsi || '', - positionId: node.id || null, }, children: node.children?.map(toOrgChartFormat) || [], } } - const chartData = root.map(toOrgChartFormat) + let chartData = root.map(toOrgChartFormat) + + // πŸ” filter by search + if (searchQuery) { + const filterNodes = (nodes: any[]): any[] => + nodes + .map((n) => ({ + ...n, + children: filterNodes(n.children || []), + })) + .filter( + (n) => + n.data.name.toLowerCase().includes(searchQuery.toLowerCase()) || + n.data.title.toLowerCase().includes(searchQuery.toLowerCase()) || + n.children.length > 0 + ) + chartData = filterNodes(chartData) + } + + // πŸ” fullscreen dan zoom control + const toggleFullscreen = () => { + if (!document.fullscreenElement) { + chartContainerRef.current?.requestFullscreen() + setFullscreen(true) + } else { + document.exitFullscreen() + setFullscreen(false) + } + } + + const handleZoomIn = () => setScale((s) => Math.min(s + 0.1, 2)) + const handleZoomOut = () => setScale((s) => Math.max(s - 0.1, 0.5)) + const resetZoom = () => setScale(1) return ( - - - + + {/* 🧭 Kontrol atas */} + + + } + onChange={(e) => debouncedSearch(e.target.value)} + styles={{ + input: { + minWidth: 250, + }, + }} + /> + + + + {Math.round(scale * 100)}% + + + + + + - + + {/* πŸ“Š Chart Container */} +
+ + } + className="p-organizationchart p-organizationchart-horizontal" + /> + +
+ ) } -function nodeTemplate(node: any) { +function NodeCard({ node }: any) { const imageSrc = node?.data?.image || '/img/default.png' const name = node?.data?.name || 'Tanpa Nama' const title = node?.data?.title || 'Tanpa Jabatan' const description = node?.data?.description || '' return ( - + {(styles) => ( - {name} - {name} - - {title} - - - {description || 'Belum ada deskripsi.'} - - - - + {name} + + + {name} + + + {title} + + + {description || 'Belum ada deskripsi.'} + + )} ) } - - diff --git a/src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx b/src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx index ca16da90..e08d86a2 100644 --- a/src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx +++ b/src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx @@ -57,7 +57,8 @@ function Page() { /> - Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga. + Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, + mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga. diff --git a/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx b/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx new file mode 100644 index 00000000..5d33fd81 --- /dev/null +++ b/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx @@ -0,0 +1,89 @@ +'use client' + +import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core' +import { useShallowEffect } from '@mantine/hooks' +import { useParams } from 'next/navigation' +import { useProxy } from 'valtio/utils' + +import keamananLingkunganState from '@/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan' +import colors from '@/con/colors' +import BackButton from '../../../desa/layanan/_com/BackButto' + +function DetailKeamananLingkunganUser() { + const keamananState = useProxy(keamananLingkunganState) + const params = useParams() + + // Ambil data berdasarkan ID dari URL + useShallowEffect(() => { + keamananState.findUnique.load(params?.id as string) + }, []) + + // Loading state + if (!keamananState.findUnique.data) { + return ( + + + + ) + } + + const data = keamananState.findUnique.data + + return ( + + + + + {/* Wrapper Detail */} + + + {/* Judul */} + + {data?.name || 'Tanpa Judul'} + + + {/* Gambar */} +
+ {data?.name +
+ + {/* Deskripsi */} + + + Deskripsi + + + + + + + + ) +} + +export default DetailKeamananLingkunganUser diff --git a/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx b/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx index b4abcb7e..b7fa9c11 100644 --- a/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx +++ b/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx @@ -1,17 +1,18 @@ 'use client' import keamananLingkunganState from '@/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan'; import colors from '@/con/colors'; -import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, TextInput } from '@mantine/core'; +import { Box, Button, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; import { useDebouncedValue, useShallowEffect } from '@mantine/hooks'; import { IconSearch } from '@tabler/icons-react'; import { useState } from 'react'; import { useProxy } from 'valtio/utils'; import BackButton from '../../desa/layanan/_com/BackButto'; +import { useRouter } from 'next/navigation'; function Page() { const state = useProxy(keamananLingkunganState) - const [expandedMap, setExpandedMap] = useState>({}); + const router = useRouter() const [search, setSearch] = useState('') const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay const { @@ -26,13 +27,6 @@ function Page() { load(page, 3, debouncedSearch) }, [page, debouncedSearch]) - const toggleExpanded = (index: number, value: boolean) => { - setExpandedMap((prev) => ({ - ...prev, - [index]: value, - })); - }; - if (loading || !data) { return ( @@ -65,60 +59,100 @@ function Page() { - Pecalang dan Patwal (Patroli Pengawal) bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga. + Pecalang dan Patwal (Patroli Pengawal) bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga. - {data.map((v, k) => { - return ( - - -
- -
- - - - {v.name} - - - Show more - - } - hideLabel={ - - Hide details - - } - expanded={expandedMap[k] || false} - onExpandedChange={(val) => toggleExpanded(k, val)} - > - - - - - - - ) - })} + cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" mt="lg"> + {data.map((v, k) => ( + + + + {v.name} (e.currentTarget.style.transform = 'scale(1.05)')} + onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')} + /> + + + {v.name} + + + + + +
+ +
+ + ))} -
+ +
load(newPage)} // ini penting! + onChange={(newPage) => load(newPage, 3, search)} total={totalPages} - my="md" + size="lg" + radius="xl" + styles={{ + control: { + border: `1px solid ${colors['blue-button']}`, + }, + }} />
diff --git a/src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx b/src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx index 92ab3537..13281bce 100644 --- a/src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx +++ b/src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx @@ -45,7 +45,7 @@ function Page() { Kontak Darurat - + Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung. diff --git a/src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/program-lainnya/page.tsx b/src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/program-lainnya/page.tsx index caa91d39..bbd7ce17 100644 --- a/src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/program-lainnya/page.tsx +++ b/src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/program-lainnya/page.tsx @@ -1,27 +1,26 @@ 'use client' import { Box, + Button, Card, Center, Group, Pagination, + Paper, Skeleton, Stack, Text, - Title, - Tooltip, - Button, - Paper, + Title } from '@mantine/core'; -import { IconSearch, IconArrowRight } from '@tabler/icons-react'; +import { IconArrowRight, IconSearch } from '@tabler/icons-react'; -import { useRouter } from 'next/navigation'; -import { useProxy } from 'valtio/utils'; +import HeaderSearch from '@/app/admin/(dashboard)/_com/header'; import pencegahanKriminalitasState from '@/app/admin/(dashboard)/_state/keamanan/pencegahan-kriminalitas'; import { useShallowEffect } from '@mantine/hooks'; -import { useState } from 'react'; -import HeaderSearch from '@/app/admin/(dashboard)/_com/header'; import { IconArrowLeft } from '@tabler/icons-react'; +import { useRouter } from 'next/navigation'; +import { useState } from 'react'; +import { useProxy } from 'valtio/utils'; function PencegahanKriminalitas() { const [search, setSearch] = useState(""); @@ -96,7 +95,6 @@ function ListPencegahanKriminalitas({ search }: { search: string }) { style={{ wordBreak: "break-word", whiteSpace: "normal" }} /> - - diff --git a/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx b/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx index 3111e04f..0d730ba5 100644 --- a/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx +++ b/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx @@ -9,21 +9,16 @@ import { useProxy } from 'valtio/utils'; import BackButton from '../../desa/layanan/_com/BackButto'; import { useRouter } from 'next/navigation'; - function Page() { const state = useProxy(polsekTerdekatState.findFirst); - const router = useRouter() - const { - data, - loading, - load, - } = state; + const router = useRouter(); + const { data, loading, load } = state; useEffect(() => { load(); }, []); - // kalau masih loading + // Loading state if (loading) { return ( @@ -32,104 +27,175 @@ function Page() { ); } - // kalau data kosong + // Data kosong if (!data) { return ( - - - - - - - Kantor Polisi Terdekat - - - Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung - - -
- - Data Polsek tidak ada - -
- + + + + + + + Kantor Polisi Terdekat + + + Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung + + +
+ + Data Polsek tidak ada + +
+ ); } return ( - + + - + Kantor Polisi Terdekat - + Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung - - - - - - {/* Content Sebelah Kiri */} + + + + + + {loading ? ( -
- ) : data ? ( +
+ +
+ ) : ( <> + {/* === KIRI === */} - {data.nama} - {data.jarakKeDesa} - - - {data.alamat} - - - - {data.nomorTelepon} - - - - {data.jamOperasional} - - - Layanan Yang Tersedia : - + {data.nama} + + + {data.jarakKeDesa} + + + {/* Alamat */} + + + + + - - {data.layananPolsek.nama} - + {data.alamat} + + + + {/* Telepon */} + + + + + + {data.nomorTelepon} + + + + {/* Jam Operasional */} + + + + + + {data.jamOperasional} + + + + {/* Layanan */} + + + Layanan Yang Tersedia : + + + + {data.layananPolsek.nama} + + - + - + + {/* === KANAN === */} + - Buka + + Buka + + - + + - + - ) : null} + )} diff --git a/src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx b/src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx index e4709396..d24e95e6 100644 --- a/src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx +++ b/src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx @@ -56,8 +56,11 @@ function Page() { /> - - Keamanan dan ketertiban lingkungan di Desa Darmasaba dijaga melalui peran aktif Pecalang dan Patwal (Patroli Pengawal). Mereka bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga. + + Keamanan dan ketertiban lingkungan di Desa Darmasaba dijaga melalui peran aktif Pecalang dan Patwal (Patroli Pengawal). + + + Mereka bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga. @@ -82,7 +85,7 @@ function Page() { {v.judul} - + diff --git a/src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx b/src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx index 5ca70ed1..0e7913f3 100644 --- a/src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx +++ b/src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx @@ -88,59 +88,83 @@ function Page() { ) : ( {data.map((v, k) => ( - - - - {v.name} (e.currentTarget.style.transform = 'scale(1.05)')} - onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')} - /> - - - - {v.name} - - - - - - - + + + + {v.name} (e.currentTarget.style.transform = 'scale(1.05)')} + onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')} + /> + + + + {v.name} + + + + + + + + {/* βœ… Tombol selalu di bagian bawah card */} +
+ +
+ + + ))} )} diff --git a/src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/[id]/page.tsx b/src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/[id]/page.tsx index 399d7f4f..633bff4b 100644 --- a/src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/[id]/page.tsx +++ b/src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/[id]/page.tsx @@ -1,15 +1,14 @@ 'use client'; import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat'; import colors from '@/con/colors'; -import { Box, Button, Image, Paper, Skeleton, Stack, Text } from '@mantine/core'; +import { Box, Image, Paper, Skeleton, Stack, Text } from '@mantine/core'; import { useShallowEffect } from '@mantine/hooks'; -import { IconArrowBack } from '@tabler/icons-react'; -import { useParams, useRouter } from 'next/navigation'; +import { useParams } from 'next/navigation'; import { useProxy } from 'valtio/utils'; +import BackButton from '../../../desa/layanan/_com/BackButto'; function DetailPenangananDaruratUser() { const state = useProxy(penangananDarurat); - const router = useRouter(); const params = useParams(); useShallowEffect(() => { @@ -32,14 +31,7 @@ function DetailPenangananDaruratUser() { {/* Tombol Back */} - + {/* Wrapper Detail */} diff --git a/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx b/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx index a91947bf..92fe9f3a 100644 --- a/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx +++ b/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx @@ -1,7 +1,7 @@ // Create a new component: components/EdukasiCard.tsx 'use client'; -import { Box, Paper, Stack, Text, Tooltip } from '@mantine/core'; +import { Box, Paper, Stack, Text } from '@mantine/core'; import { ReactNode } from 'react'; interface EdukasiCardProps { @@ -31,7 +31,6 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu {icon} - - @@ -78,21 +77,21 @@ export default function EdukasiLingkunganPage() { verticalSpacing={{ base: 'md', md: 'xl' }} > } + icon={} title={tujuan.data?.judul || ''} description={tujuan.data?.deskripsi || ''} color={colors['blue-button']} /> } + icon={} title={materi.data?.judul || ''} description={materi.data?.deskripsi || ''} color={colors['blue-button']} /> } + icon={} title={contoh.data?.judul || ''} description={contoh.data?.deskripsi || ''} color={colors['blue-button']} diff --git a/src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx b/src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx index 718cb23e..76a39cf6 100644 --- a/src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx +++ b/src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx @@ -44,13 +44,12 @@ function Page() { @@ -74,13 +73,12 @@ function Page() { @@ -105,13 +103,12 @@ function Page() { diff --git a/src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx b/src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx index 48d4baf9..d50df75c 100644 --- a/src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx +++ b/src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx @@ -91,7 +91,7 @@ function Page() { {iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null} - {v.name} + {v.name} diff --git a/src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx b/src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx index 8c696b82..9ac1be46 100644 --- a/src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx +++ b/src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx @@ -57,7 +57,7 @@ function Page() { Statistik Data Pendidikan - + Visualisasi jumlah pendidikan berdasarkan kategori yang tersedia diff --git a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/lembaga/page.tsx b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/lembaga/page.tsx index 801854da..1a66e860 100644 --- a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/lembaga/page.tsx +++ b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/lembaga/page.tsx @@ -55,7 +55,7 @@ function Page({ params }: PageProps) { - Daftar Lembaga Pendidikan + Daftar Lembaga Pendidikan - Daftar Pengajar + Daftar Pengajar - Daftar Siswa + Daftar Siswa {/* Back Button */} - window.history.back()} variant="light" radius="md" size="lg"> - - Kembali - + {/* Search & Filter */} @@ -185,8 +180,8 @@ export default function LayoutSekolah({ radius="xl" size="sm" variant={aktif ? 'filled' : 'light'} - bg={colors['blue-button']} - c={aktif ? colors['white-1'] : 'gray'} + bg={aktif? colors['blue-button'] : '#BDCADE'} + c={aktif ? colors['white-1'] : colors['blue-button']} > {k} diff --git a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx index d395cfd7..07bd3201 100644 --- a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx +++ b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx @@ -47,7 +47,7 @@ function Page() { - Daftar Lembaga Pendidikan + Daftar Lembaga Pendidikan - Daftar Pengajar + Daftar Pengajar - Daftar Siswa + Daftar Siswa - + <Title ta="center" order={1} fw="bold" c={colors['blue-button']}> Program Pendidikan Anak + + + Desa Darmasaba berkomitmen mencetak generasi muda yang cerdas, berkarakter, dan siap bersaing melalui program pendidikan yang inklusif dan berkelanjutan. - - + @@ -87,7 +89,7 @@ function Page() { - + diff --git a/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/[id]/page.tsx b/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik/[id]/page.tsx similarity index 100% rename from src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/[id]/page.tsx rename to src/app/darmasaba/(pages)/ppid/daftar-informasi-publik/[id]/page.tsx diff --git a/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx b/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik/page.tsx similarity index 91% rename from src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx rename to src/app/darmasaba/(pages)/ppid/daftar-informasi-publik/page.tsx index 94358ae4..e5c33633 100644 --- a/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx +++ b/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik/page.tsx @@ -7,6 +7,7 @@ import { Box, Button, Center, + Group, Image, Pagination, Paper, @@ -68,7 +69,7 @@ function Page() { Logo Desa Darmasaba
- Daftar Informasi Publik Desa Darmasaba + Daftar Informasi Publik @@ -178,12 +179,18 @@ function Page() { Kontak PPID - - Email: ppid@desadarmasaba.id - - - WhatsApp: 081-xxx-xxx-xxx - + + + + Email: ppid@desadarmasaba.id + + + + + + WhatsApp: 081-xxx-xxx-xxx + + diff --git a/src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/page.tsx b/src/app/darmasaba/(pages)/ppid/indeks-kepuasan-masyarakat/page.tsx similarity index 99% rename from src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/page.tsx rename to src/app/darmasaba/(pages)/ppid/indeks-kepuasan-masyarakat/page.tsx index 9e134b39..514d9f59 100644 --- a/src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/page.tsx +++ b/src/app/darmasaba/(pages)/ppid/indeks-kepuasan-masyarakat/page.tsx @@ -239,7 +239,7 @@ const state = useProxy(indeksKepuasanState.responden); {/* Chart Rating */} - Pilihan + Ulasan {donutDataRating.every(item => item.value === 0) ? ( Belum ada data untuk ditampilkan dalam grafik @@ -505,7 +505,7 @@ const state = useProxy(indeksKepuasanState.responden); {/* Chart Rating */} - Pilihan + Ulasan {donutDataRating.every(item => item.value === 0) ? ( Belum ada data untuk ditampilkan dalam grafik diff --git a/src/app/darmasaba/(pages)/ppid/struktur-ppid/[id]/page.tsx b/src/app/darmasaba/(pages)/ppid/struktur-ppid/[id]/page.tsx index 36a02bc3..9b0d45cc 100644 --- a/src/app/darmasaba/(pages)/ppid/struktur-ppid/[id]/page.tsx +++ b/src/app/darmasaba/(pages)/ppid/struktur-ppid/[id]/page.tsx @@ -39,9 +39,9 @@ function DetailPegawaiUser() { const data = statePegawai.findUnique.data; return ( - + {/* Back button */} - + router.back()} style={{ diff --git a/src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx b/src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx index 17637cb4..1d921cab 100644 --- a/src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx +++ b/src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx @@ -1,7 +1,6 @@ /* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable @typescript-eslint/no-explicit-any */ 'use client' - import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID' import ScrollToTopButton from '@/app/darmasaba/_com/scrollToTopButton' import colors from '@/con/colors' @@ -10,7 +9,6 @@ import { Button, Card, Center, - Container, Group, Image, Loader, @@ -36,6 +34,7 @@ import { OrganizationChart } from 'primereact/organizationchart' import { useEffect, useRef, useState } from 'react' import { useProxy } from 'valtio/utils' import BackButton from '../../desa/layanan/_com/BackButto' +import './struktur.css' export default function Page() { return ( @@ -47,10 +46,9 @@ export default function Page() { paddingBottom: 48, }} > - - - - + + + </Stack> + <Box mt="lg"> <StrukturOrganisasiPPID /> </Box> - </Container> + </Box> - {/* Tombol Scroll ke Atas */} <ScrollToTopButton /> </Box> ) @@ -84,7 +82,7 @@ function StrukturOrganisasiPPID() { const [isFullscreen, setFullscreen] = useState(false) const [searchQuery, setSearchQuery] = useState('') - // debounce untuk pencarian + // debounce pencarian const debouncedSearch = useRef( debounce((value: string) => { setSearchQuery(value) @@ -112,7 +110,8 @@ function StrukturOrganisasiPPID() { ) } - if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) { + const data = stateOrganisasi.findMany.data || [] + if (data.length === 0) { return ( <Center py={40}> <Stack align="center" gap="md"> @@ -151,9 +150,9 @@ function StrukturOrganisasiPPID() { ) } - // Buat struktur organisasi + // 🧩 buat struktur organisasi const posisiMap = new Map<string, any>() - const aktifPegawai = stateOrganisasi.findMany.data.filter((p: any) => p.isActive) + const aktifPegawai = data.filter((p: any) => p.isActive) for (const pegawai of aktifPegawai) { const posisiId = pegawai.posisi.id @@ -176,19 +175,15 @@ function StrukturOrganisasiPPID() { } else root.push(posisi) }) - function toOrgChartFormat(node: any): any { + const toOrgChartFormat = (node: any): any => { const pegawai = node.pegawaiList?.[0] return { expanded: true, - type: 'person', - styleClass: 'p-person', data: { - id: pegawai?.id || null, - name: pegawai?.namaLengkap || 'Belum ditugaskan', - title: node.nama || 'Tanpa jabatan', + id: pegawai?.id, + name: pegawai?.namaLengkap || 'Belum Ditugaskan', + title: node.nama || 'Tanpa Jabatan', image: pegawai?.image?.link || '/img/default.png', - description: node.deskripsi || '', - positionId: node.id || null, }, children: node.children?.map(toOrgChartFormat) || [], } @@ -213,7 +208,7 @@ function StrukturOrganisasiPPID() { chartData = filterNodes(chartData) } - // 🧭 fungsi fullscreen + // 🎬 fullscreen & zoom control const toggleFullscreen = () => { if (!document.fullscreenElement) { chartContainerRef.current?.requestFullscreen() @@ -224,138 +219,249 @@ function StrukturOrganisasiPPID() { } } - // 🧭 fungsi zoom - const handleZoomIn = () => setScale((prev) => Math.min(prev + 0.1, 2)) - const handleZoomOut = () => setScale((prev) => Math.max(prev - 0.1, 0.5)) + const handleZoomIn = () => setScale((s) => Math.min(s + 0.1, 2)) + const handleZoomOut = () => setScale((s) => Math.max(s - 0.1, 0.5)) const resetZoom = () => setScale(1) return ( <Stack align="center" mt="xl"> - {/* πŸ” Search + Zoom + Fullscreen controls */} - <Group mb="md" justify="center" gap="sm" align="center"> - <TextInput - placeholder="Cari nama atau jabatan..." - leftSection={<IconSearch size={16} />} - onChange={(e) => debouncedSearch(e.target.value)} - /> - - <Button variant="light" size="sm" onClick={handleZoomOut}> - <IconZoomOut size={16} /> - </Button> - - {/* πŸ” Tambahkan indikator zoom di sini */} - {/* Floating Zoom Indicator */} - <Box - bg="#C3D0E8" - c="blue" - px={9} - py={8} - style={{ - fontSize: 14, - fontWeight: 600, - borderRadius: '5px', - }} - > - {Math.round(scale * 100)}% - </Box> - - - <Button variant="light" size="sm" onClick={handleZoomIn}> - <IconZoomIn size={16} /> - </Button> - - <Button variant="light" size="sm" onClick={resetZoom}> - Reset - </Button> - - <Button - variant="light" - size="sm" - onClick={toggleFullscreen} - leftSection={ - isFullscreen ? <IconArrowsMinimize size={16} /> : <IconArrowsMaximize size={16} /> - } - > - {isFullscreen ? 'Keluar' : 'Fullscreen'} - </Button> - </Group> - - - {/* Chart Container */} - <Box - ref={chartContainerRef} + {/* πŸ” Controls */} + <Paper + shadow="xs" + p="md" + radius="md" style={{ - overflow: 'auto', - transform: `scale(${scale})`, - transformOrigin: 'center top', - transition: 'transform 0.25s ease', + background: colors['blue-button'] }} > - <OrganizationChart - value={chartData} - nodeTemplate={(node) => nodeTemplate(node, router)} - /> - </Box> + <Group gap="sm" wrap="wrap" justify="center"> + <TextInput + placeholder="Cari nama atau jabatan..." + leftSection={<IconSearch size={16} />} + onChange={(e) => debouncedSearch(e.target.value)} + styles={{ + input: { + minWidth: 250, + }, + }} + /> + + <Group gap="xs"> + <Button + variant="light" + bg={colors['blue-button-2']} + size="sm" + onClick={handleZoomOut} + leftSection={<IconZoomOut size={16} />} + c={colors['blue-button']} + > + Zoom Out + </Button> + + <Box + bg={colors['blue-button-2']} + c={colors['blue-button']} + px={16} + py={8} + style={{ + fontSize: 14, + fontWeight: 700, + borderRadius: '8px', + minWidth: 70, + textAlign: 'center', + }} + > + {Math.round(scale * 100)}% + </Box> + + <Button + bg={colors['blue-button-2']} + c={colors['blue-button']} + variant="light" + size="sm" + onClick={handleZoomIn} + leftSection={<IconZoomIn size={16} />} + > + Zoom In + </Button> + + <Button + bg={colors['blue-button-2']} + c={colors['blue-button']} + variant="light" + size="sm" + onClick={resetZoom} + > + Reset + </Button> + + <Button + bg={colors['blue-button-2']} + c={colors['blue-button']} + size="sm" + onClick={toggleFullscreen} + leftSection={ + isFullscreen ? ( + <IconArrowsMinimize size={16} /> + ) : ( + <IconArrowsMaximize size={16} /> + ) + } + > + Fullscreen + </Button> + </Group> + </Group> + </Paper> + + {/* 🧩 Chart Container */} + <Center style={{ width: '100%' }}> + <Box + ref={chartContainerRef} + style={{ + overflowX: 'auto', + overflowY: 'auto', + width: '100%', + maxWidth: '100%', + padding: '32px 16px', + transition: 'transform 0.2s ease', + transform: `scale(${scale})`, + transformOrigin: 'center top', + }} + > + <OrganizationChart + value={chartData} + nodeTemplate={(node) => <NodeCard node={node} router={router} />} + className="p-organizationchart p-organizationchart-horizontal" + /> + </Box> + </Center> </Stack> ) } -function nodeTemplate(node: any, router: ReturnType<typeof useTransitionRouter>) { +function NodeCard({ node, router }: any) { const imageSrc = node?.data?.image || '/img/default.png' const name = node?.data?.name || 'Tanpa Nama' const title = node?.data?.title || 'Tanpa Jabatan' - const description = node?.data?.description || '' + const hasId = Boolean(node?.data?.id) return ( - <Transition mounted transition="pop" duration={240}> + <Transition mounted transition="pop" duration={300}> {(styles) => ( <Card - radius="lg" + shadow="md" + radius="xl" withBorder style={{ ...styles, - width: 260, - padding: 16, - background: 'rgba(28,110,164,0.3)', - borderColor: 'rgba(255,255,255,0.15)', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - textAlign: 'center', + width: 240, + minHeight: 280, + padding: 20, + background: 'linear-gradient(135deg, rgba(28,110,164,0.15) 0%, rgba(255,255,255,0.95) 100%)', + borderColor: 'rgba(28, 110, 164, 0.3)', + borderWidth: 2, + transition: 'all 0.3s ease', + cursor: hasId ? 'pointer' : 'default', + }} + onMouseEnter={(e) => { + if (hasId) { + e.currentTarget.style.transform = 'translateY(-4px)' + e.currentTarget.style.boxShadow = '0 8px 24px rgba(28, 110, 164, 0.25)' + } + }} + onMouseLeave={(e) => { + if (hasId) { + e.currentTarget.style.transform = 'translateY(0)' + e.currentTarget.style.boxShadow = '' + } }} > - <Image - src={imageSrc} - alt={name} - radius="md" - width={60} - height={60} - fit="cover" - style={{ - objectFit: 'cover', - border: '2px solid rgba(255,255,255,0.2)', - marginBottom: 12, - }} - loading="lazy" - /> - <Text fw={700}>{name}</Text> - <Text size="sm" c="dimmed" mt={4}> - {title} - </Text> - <Text size="xs" c="dimmed" mt={8} lineClamp={3}> - {description || 'Belum ada deskripsi.'} - </Text> - <Button - variant="light" - size="xs" - mt="md" - onClick={() => { - const id = node?.data?.id - router.push(`/darmasaba/ppid/struktur-ppid/${id}`) + <Stack align="center" gap={12}> + {/* Photo */} + <Box + style={{ + width: 96, + height: 96, + borderRadius: '50%', + overflow: 'hidden', + border: '3px solid rgba(28, 110, 164, 0.4)', + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)', + background: 'white', }} > - Lihat Detail - </Button> + <Image + src={imageSrc} + alt={name} + width={96} + height={96} + fit="cover" + loading="lazy" + style={{ + objectFit: 'cover', + }} + /> + </Box> + + {/* Name */} + <Text + fw={700} + size="sm" + ta="center" + c={colors['blue-button']} + lineClamp={2} + style={{ + minHeight: 40, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + wordBreak: 'break-word', + lineHeight: 1.3, + }} + > + {name} + </Text> + + {/* Title/Position */} + <Text + size="xs" + c="dimmed" + ta="center" + fw={500} + lineClamp={2} + style={{ + minHeight: 32, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + wordBreak: 'break-word', + lineHeight: 1.2, + }} + > + {title} + </Text> + + {/* Detail Button */} + {hasId && ( + <Button + variant="gradient" + gradient={{ from: 'blue', to: 'cyan' }} + size="xs" + fullWidth + mt={8} + radius="md" + onClick={() => + router.push(`/darmasaba/ppid/struktur-ppid/${node.data.id}`) + } + style={{ + height: 32, + fontWeight: 600, + }} + > + Lihat Detail + </Button> + )} + </Stack> </Card> )} </Transition> diff --git a/src/app/darmasaba/(pages)/ppid/struktur-ppid/struktur.css b/src/app/darmasaba/(pages)/ppid/struktur-ppid/struktur.css new file mode 100644 index 00000000..0f9f4fdb --- /dev/null +++ b/src/app/darmasaba/(pages)/ppid/struktur-ppid/struktur.css @@ -0,0 +1,68 @@ +/* ============================================ + STRUKTUR ORGANISASI PPID - STYLING + ============================================ */ + +/* Tabel chart selalu center */ +.p-organizationchart-table { + margin: 0 auto !important; + } + + /* Jarak vertikal antar level - lebih lega */ + .p-organizationchart-line-down { + height: 32px !important; + } + + /* Padding di dalam node - lebih rapi */ + .p-organizationchart-node-content { + padding: 0 !important; + background: transparent !important; + border: none !important; + } + + /* Garis connector antar node - lebih tebal dan jelas */ + .p-organizationchart-line-down, + .p-organizationchart-line-left, + .p-organizationchart-line-right, + .p-organizationchart-line-top { + border-color: rgba(28, 110, 164, 0.4) !important; + border-width: 2px !important; + } + + /* Garis horizontal */ + .p-organizationchart-line-left, + .p-organizationchart-line-right { + border-top-width: 2px !important; + } + + /* Jarak horizontal antar node - lebih proporsional */ + .p-organizationchart-table > tbody > tr > td { + padding: 0 24px !important; + vertical-align: top !important; + } + + /* Node container spacing */ + .p-organizationchart-node { + padding: 8px !important; + } + + /* Responsive adjustments */ + @media (max-width: 768px) { + .p-organizationchart-table > tbody > tr > td { + padding: 0 12px !important; + } + + .p-organizationchart-line-down { + height: 24px !important; + } + } + + /* Smooth transitions untuk zoom */ + .p-organizationchart { + transition: transform 0.2s ease; + } + + /* Fullscreen mode adjustments */ + .p-organizationchart-table:fullscreen { + background: rgba(230, 240, 255, 0.98); + padding: 40px; + } \ No newline at end of file diff --git a/src/app/darmasaba/(tambahan)/apbdes/page.tsx b/src/app/darmasaba/(tambahan)/apbdes/page.tsx index b3d419d4..4d01ed1a 100644 --- a/src/app/darmasaba/(tambahan)/apbdes/page.tsx +++ b/src/app/darmasaba/(tambahan)/apbdes/page.tsx @@ -63,7 +63,7 @@ function Page() { <SimpleGrid px={{ base: 'md', md: 100 }} cols={{ base: 1, sm: 2, md: 3 }} spacing="xl"> {data.map((v: any, k: number) => ( <BackgroundImage key={k} src={v.image?.link || ''} h={360} radius="xl" pos="relative"> - <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} /> + <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 27 }} /> <Stack justify="space-between" h="100%" p="lg" pos="relative"> <Box> <Text fz="lg" fw={600} c="white" ta="center"> diff --git a/src/app/darmasaba/(tambahan)/sdgs-desa/page.tsx b/src/app/darmasaba/(tambahan)/sdgs-desa/page.tsx index 65d78318..bfbfba3d 100644 --- a/src/app/darmasaba/(tambahan)/sdgs-desa/page.tsx +++ b/src/app/darmasaba/(tambahan)/sdgs-desa/page.tsx @@ -1,10 +1,10 @@ 'use client' -import { Box, Center, Container, Image, LoadingOverlay, Paper, SimpleGrid, Stack, Text, Title, Tooltip } from '@mantine/core'; -import { Prisma } from '@prisma/client'; -import { useEffect, useState } from 'react'; -import { IconMoodSad } from '@tabler/icons-react'; -import BackButton from '../../(pages)/desa/layanan/_com/BackButto'; import colors from '@/con/colors'; +import { Box, Center, Container, Image, LoadingOverlay, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core'; +import { Prisma } from '@prisma/client'; +import { IconMoodSad } from '@tabler/icons-react'; +import { useEffect, useState } from 'react'; +import BackButton from '../../(pages)/desa/layanan/_com/BackButto'; function Page() { const [sdgsDesa, setSdgsDesa] = useState<Prisma.SdgsDesaGetPayload<{ include: { image: true } }>[]>([]); @@ -114,11 +114,9 @@ function Page() { /> </Box> <Stack gap="xs" align="center" style={{ width: '100%' }}> - <Tooltip label={item.name} position="top" withArrow> <Title order={4} ta="center" c="dark" fw={600} lineClamp={2} style={{ minHeight: '3rem' }}> {item.name} - { if (item.href) { router.push(item.href); @@ -126,21 +126,21 @@ function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) { style={{ cursor: item.href ? "pointer" : "default", transition: "background 0.15s ease", - borderLeft: active ? "4px solid #1e66f5" : "4px solid transparent", + borderLeft: active ? `4px solid ${colors['blue-button']}` : "4px solid transparent", }} > {item.name} {item.href && ( )} @@ -167,21 +167,21 @@ function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) { cursor: child.href ? "pointer" : "default", opacity: child.href ? 1 : 0.8, borderRadius: "0.5rem", - backgroundColor: childActive ? "#e7f0ff" : "transparent", - borderLeft: childActive ? "3px solid #1e66f5" : "3px solid transparent", + backgroundColor: childActive ? colors["blue-button-2"] : "transparent", + borderLeft: childActive ? `3px solid ${colors['blue-button']}` : "3px solid transparent", transition: "background 0.15s ease", }} > {child.name} ); diff --git a/src/app/darmasaba/_com/NavbarMainMenu.tsx b/src/app/darmasaba/_com/NavbarMainMenu.tsx index 5d796d23..96548a8e 100644 --- a/src/app/darmasaba/_com/NavbarMainMenu.tsx +++ b/src/app/darmasaba/_com/NavbarMainMenu.tsx @@ -112,7 +112,7 @@ function MenuItemCom({ item, isActive = false }: { item: MenuItem, isActive?: bo diff --git a/src/app/darmasaba/page.tsx b/src/app/darmasaba/page.tsx index e601eb4d..3b37c8df 100644 --- a/src/app/darmasaba/page.tsx +++ b/src/app/darmasaba/page.tsx @@ -19,7 +19,7 @@ export default function Page() { diff --git a/src/con/navbar-list-menu.ts b/src/con/navbar-list-menu.ts index 28eaf9c2..f9f0455b 100644 --- a/src/con/navbar-list-menu.ts +++ b/src/con/navbar-list-menu.ts @@ -35,13 +35,13 @@ const navbarListMenu = [ }, { id: "1.7", - name: "Daftar Informasi Publik Desa Darmasaba", - href: "/darmasaba/ppid/daftar-informasi-publik-desa-darmasaba" + name: "Daftar Informasi Publik", + href: "/darmasaba/ppid/daftar-informasi-publik" }, { id: "1.8", - name: "IKM Desa Darmasaba", - href: "/darmasaba/ppid/ikm-desa-darmasaba" + name: "Indeks Kepuasan Masyarakat", + href: "/darmasaba/ppid/indeks-kepuasan-masyarakat" }, ]