Fix QC Kak Inno : tanggal 14 Oktober

Fitur Search bisa digunakan di 6 Menu, sisa 3 Menu Lagi
2025-10-15 17:29:57 +08:00
parent ccf39bc778
commit 0b574406e2
16 changed files with 1300 additions and 407 deletions
--- a/src/app/darmasaba/_com/NavBarSearch.tsx
+++ b/src/app/darmasaba/_com/NavBarSearch.tsx
@@ -1,20 +1,63 @@
+import { useRef, useState, useEffect } from 'react';
 import stateNav from "@/state/state-nav";
-import { Container, Stack, Tooltip } from "@mantine/core";
+import { Container, Stack, ActionIcon, Box } from "@mantine/core";
+import { IconX } from '@tabler/icons-react';
 import GlobalSearch from "./globalSearch";

 export function NavbarSearch() {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        stateNav.clear();
+      }
+    }
+
+    // Add event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
  return (
-    <Container
-      w={{ base: "100%", md: "80%" }}
-      fluid
-      py="xl"
-      onMouseLeave={stateNav.clear}
+    <Box
+      ref={containerRef}
+      style={{ position: 'relative' }}
    >
-      <Stack pt="xl">
-        <Tooltip label="Type to search across the site" position="bottom-start" withArrow>
-          <GlobalSearch />
-        </Tooltip>
-      </Stack>
-    </Container>
+      <Container
+        w={{ base: "100%", md: "80%" }}
+        fluid
+        py="xl"
+      >
+        <Stack pt="xl">
+          <Box style={{ position: 'relative' }}>
+            <GlobalSearch />
+            {isOpen && (
+              <ActionIcon
+                onClick={() => {
+                  setIsOpen(false);
+                  stateNav.clear();
+                }}
+                style={{
+                  position: 'absolute',
+                  right: 10,
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  zIndex: 1000
+                }}
+              >
+                <IconX size={16} />
+              </ActionIcon>
+            )}
+          </Box>
+        </Stack>
+      </Container>
+    </Box>
  );
-}
+}
--- a/src/app/darmasaba/_com/globalSearch.tsx
+++ b/src/app/darmasaba/_com/globalSearch.tsx
@@ -1,53 +1,17 @@
 'use client';
-import { TextInput, Loader, Stack, Box, Text } from '@mantine/core';
-import { useSnapshot } from 'valtio';
-import { useRouter } from 'next/navigation';
+import searchState, { debouncedFetch } from '@/app/api/[[...slugs]]/_lib/search/searchState';
+import { Box, Center, Loader, Stack, Text, TextInput } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
 import { useEffect } from 'react';
-import searchState from '@/app/api/[[...slugs]]/_lib/search/searchState';
+import { useSnapshot } from 'valtio';
+import getDetailUrl from './searchUrl';

-// Mapping type ke URL
-const getDetailUrl = (item: { type?: string; id: string | number; [key: string]: unknown }) => {
-  const { type, id, kategori } = item;
-
-  const typeUrlMap: Record<string, string> = {
-    programinovasi: `/darmasaba/program-inovasi/${id}`,
-    desaantikorupsi: '/darmasaba/desa-anti-korupsi',
-    sdgsdesa: '/darmasaba/sdgs-desa',
-    apbdes: '/darmasaba/apbdes',
-    prestasidesa: '/darmasaba/prestasi-desa',
-    pejabatdesa: '/darmasaba/profile/pejabat-desa',
-    strukturppid: '/darmasaba/ppid/struktur-ppid',
-    visimisippid: '/darmasaba/ppid/visi-misi',
-    dasarhukumppid: '/darmasaba/ppid/dasar-hukum',
-    profileppid: '/darmasaba/ppid/profile',
-    daftarinformasipublik: '/darmasaba/ppid/daftar-informasi-publik',
-    perbekeldarmasaba: '/darmasaba/desa/profile',
-    berita: `/darmasaba/desa/berita/${kategori}/${id}`,
-    pengumuman: `/darmasaba/desa/pengumuman/${kategori}/${id}`,
-    sejarahdesa: '/darmasaba/desa/profile',
-    visimisidesa: '/darmasaba/desa/profile',
-    lambangdesa: '/darmasaba/desa/profile',
-    maskotdesa: '/darmasaba/desa/profile',
-    profilperbekel: '/darmasaba/desa/profile',
-    potensi: '/darmasaba/desa/potensi-desa',
-    galleryFoto: '/darmasaba/desa/gallery/foto',
-    galleryVideo: '/darmasaba/desa/gallery/video',
-    pelayananSuratKeterangan: '/darmasaba/desa/layanan',
-    pelayananPerizinanBerusaha: '/darmasaba/desa/layanan',
-    pelayananTelunjukSaktiDesa: '/darmasaba/desa/layanan',
-    pelayananPendudukNonPermanent: '/darmasaba/desa/layanan',
-    penghargaan: '/darmasaba/desa/penghargaan',
-  };
-
-  return type ? typeUrlMap[type] || '/darmasaba' : '/darmasaba';
-};


 export default function GlobalSearch() {
  const snap = useSnapshot(searchState);
-  const router = useRouter();

-  // Infinite scroll listener
+  // Infinite scroll
  useEffect(() => {
    const handleScroll = () => {
      const bottom =
@@ -59,13 +23,32 @@ export default function GlobalSearch() {
  }, [snap.loading]);

  return (
-    <Stack>
+    <Stack maw={800} mx="auto">
+      {/* 🔍 Search input */}
      <TextInput
        placeholder="Cari apapun..."
        value={snap.query}
-        onChange={(e) => (searchState.query = e.currentTarget.value)}
+        onChange={(e) => (
+          searchState.query = e.currentTarget.value,
+          debouncedFetch()
+        )}
+        radius="xl"
+        rightSection={
+          snap.query ? (
+            <IconX
+              size={16}
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                searchState.query = '';
+                searchState.results = [];
+              }}
+            />
+          ) : undefined
+        }
      />

+      {/* 📄 Hasil pencarian */}
+      <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
      {snap.results.map((item, i) => (
        <Box
          key={i}
@@ -74,12 +57,16 @@ export default function GlobalSearch() {
            borderBottom: '1px solid #eee',
            cursor: 'pointer',
            transition: 'background 0.2s',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            maxWidth: '100%'
          }}
          onMouseEnter={(e) => (e.currentTarget.style.background = '#f5f5f5')}
          onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
          onClick={() => {
            const url = getDetailUrl(item);
-            router.push(url);
+            window.location.href = url;
          }}
        >
          <Text size="sm" fw={500}>
@@ -90,8 +77,15 @@ export default function GlobalSearch() {
          </Text>
        </Box>
      ))}
+      </div>

-      {snap.loading && <Loader size="sm" />}
+      {/* ⏳ Loader di bawah hasil */}
+      {snap.loading && (
+        <Center py="md">
+          <Loader size="sm" />
+        </Center>
+      )}
    </Stack>
  );
 }
+
--- a/src/app/darmasaba/_com/main-page/penghargaan/index.tsx
+++ b/src/app/darmasaba/_com/main-page/penghargaan/index.tsx
@@ -68,7 +68,7 @@ function Penghargaan() {
              variant="gradient"
              gradient={{ from: "cyan", to: "blue", deg: 60 }}
            >
-              Penghargaan & Prestasi Desa
+              Penghargaan Desa
            </Text>

            {loading ? (
--- a/src/app/darmasaba/_com/scrollToTopButton.tsx
+++ b/src/app/darmasaba/_com/scrollToTopButton.tsx
@@ -0,0 +1,36 @@
+'use client'
+import { useWindowScroll } from '@mantine/hooks';
+import { ActionIcon, Transition } from '@mantine/core';
+import { IconArrowUp } from '@tabler/icons-react';
+import colors from '@/con/colors';
+
+function ScrollToTopButton() {
+  const [scroll, scrollTo] = useWindowScroll();
+
+  return (
+    <Transition
+      mounted={scroll.y > 300}
+      transition="slide-up"
+      duration={300}
+      timingFunction="ease"
+    >
+      {(styles) => (
+        <ActionIcon
+          style={styles}
+          size="xl"
+          radius="xl"
+          variant="filled"
+          color={colors['blue-button']}
+          onClick={() => scrollTo({ y: 0 })}
+          pos="fixed"
+          bottom={24}
+          right={24}
+          aria-label="Kembali ke atas"
+        >
+          <IconArrowUp size={20} />
+        </ActionIcon>
+      )}
+    </Transition>
+  );
+}
+export default ScrollToTopButton
--- a/src/app/darmasaba/_com/searchUrl.tsx
+++ b/src/app/darmasaba/_com/searchUrl.tsx
@@ -0,0 +1,60 @@
+const getDetailUrl = (item: { type?: string; id: string | number; [key: string]: unknown }) => {
+  const { type, id, kategori } = item;
+  const typeUrlMap: Record<string, string> = {
+    programinovasi: `/darmasaba/program-inovasi/${id}`,
+    desaantikorupsi: '/darmasaba/desa-anti-korupsi',
+    sdgsdesa: '/darmasaba/sdgs-desa',
+    apbdes: '/darmasaba/apbdes',
+    prestasidesa: '/darmasaba/prestasi-desa',
+    pejabatdesa: '/darmasaba/profile/pejabat-desa',
+    strukturppid: '/darmasaba/ppid/struktur-ppid',
+    visimisippid: '/darmasaba/ppid/visi-misi',
+    dasarhukumppid: '/darmasaba/ppid/dasar-hukum',
+    profileppid: '/darmasaba/ppid/profile',
+    daftarinformasipublik: '/darmasaba/ppid/daftar-informasi-publik',
+    perbekeldarmasaba: '/darmasaba/desa/profile',
+    berita: `/darmasaba/desa/berita/${kategori}/${id}`,
+    pengumuman: `/darmasaba/desa/pengumuman/${kategori}/${id}`,
+    sejarahdesa: '/darmasaba/desa/profile',
+    visimisidesa: '/darmasaba/desa/profile',
+    lambangdesa: '/darmasaba/desa/profile',
+    maskotdesa: '/darmasaba/desa/profile',
+    profilperbekel: '/darmasaba/desa/profile',
+    potensi: '/darmasaba/desa/potensi-desa',
+    galleryFoto: '/darmasaba/desa/gallery/foto',
+    galleryVideo: '/darmasaba/desa/gallery/video',
+    pelayananSuratKeterangan: '/darmasaba/desa/layanan',
+    pelayananPerizinanBerusaha: '/darmasaba/desa/layanan',
+    pelayananTelunjukSaktiDesa: '/darmasaba/desa/layanan',
+    pelayananPendudukNonPermanent: '/darmasaba/desa/layanan',
+    penghargaan: '/darmasaba/desa/penghargaan',
+    posyandu: '/darmasaba/kesehatan/posyandu',
+    fasilitasKesehatan: '/darmasaba/kesehatan/data-kesehatan-warga',
+    jadwalKegiatan: '/darmasaba/kesehatan/data-kesehatan-warga',
+    artikelKesehatan: '/darmasaba/kesehatan/data-kesehatan-warga',
+    puskesmas: '/darmasaba/kesehatan/puskesmas',
+    programKesehatan: '/darmasaba/kesehatan/program-kesehatan',
+    penangananDarurat: '/darmasaba/kesehatan/penanganan-darurat',
+    kontakDarurat: '/darmasaba/kesehatan/kontak-darurat',
+    infoWabahPenyakit: '/darmasaba/kesehatan/info-wabah-penyakit',
+    keamananLingkungan: '/darmasaba/keamanan/keamanan-lingkungan-pecalang-patwal',
+    polsekTerdekat: '/darmasaba/keamanan/polsek-terdekat',
+    kontakDaruratKeamanan: '/darmasaba/keamanan/kontak-darurat',
+    pencegahanKriminalitas: '/darmasaba/keamanan/pencegahan-kriminalitas',
+    laporanPublik: '/darmasaba/keamanan/laporan-publik',
+    tipsKeamanan: '/darmasaba/keamanan/tips-keamanan',
+    pasarDesa: '/darmasaba/ekonomi/pasar-desa',
+    lowonganKerjaLokal: '/darmasaba/ekonomi/lowongan-kerja-lokal',
+    strukturOrganisasi: '/darmasaba/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa',
+    jumlahPendudukUsiaKerjaYangMenganggurUsia: '/darmasaba/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur',
+    jumlahPendudukUsiaKerjaYangMenganggurPendidikan: '/darmasaba/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur',
+    jumlahPendudukMiskin: '/darmasaba/ekonomi/jumlah-penduduk-miskin',
+    programKemiskinan: '/darmasaba/ekonomi/program-kemiskinan',
+    sektorUnggulanDesa: '/darmasaba/ekonomi/sektor-unggulan-desa',
+    demografiPekerjaan: '/darmasaba/ekonomi/demografi-pekerjaan',
+  };
+
+  return typeUrlMap[type || ''] || '/darmasaba';
+};
+
+export default getDetailUrl;