From 83a2dece57baa276db02a2f78afd8f44398c6ff4 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Thu, 30 Apr 2026 15:09:33 +0800
Subject: [PATCH] refactor(kegiatan-desa): redesign public list page to card
 grid + kategori filter

- Remove hero/featured section and tab navigation
- Redesign to pecalang-style: 3-col card grid (image, title, desc, Detail button)
- Replace tabs with Select dropdown filter by kategori
- Search + kategori filter use query params, stay on /semua route
- Image hidden when empty (no placeholder)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../desa/kegiatan-desa/_lib/layoutTabs.tsx    | 113 ++++------
 .../(pages)/desa/kegiatan-desa/semua/page.tsx | 206 ++++++------------
 2 files changed, 107 insertions(+), 212 deletions(-)

diff --git a/src/app/darmasaba/(pages)/desa/kegiatan-desa/_lib/layoutTabs.tsx b/src/app/darmasaba/(pages)/desa/kegiatan-desa/_lib/layoutTabs.tsx
index 3fe8eb32..fa2e4fc4 100644
--- a/src/app/darmasaba/(pages)/desa/kegiatan-desa/_lib/layoutTabs.tsx
+++ b/src/app/darmasaba/(pages)/desa/kegiatan-desa/_lib/layoutTabs.tsx
@@ -4,69 +4,45 @@
 import stateDashboardKegiatan from '@/app/admin/(dashboard)/_state/desa/kegiatanDesa';
 import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
-import { Box, Group, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
+import { Box, Group, Select, Stack, Text, TextInput } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function LayoutTabsKegiatanDesa({ children }: { children: React.ReactNode }) {
   const router = useRouter();
-  const pathname = usePathname();
   const searchParams = useSearchParams();
-
   const kategoriState = useProxy(stateDashboardKegiatan.kategoriKegiatan);
-  const activeTab = pathname.split('/').pop() || 'semua';
-  const [activeTabState, setActiveTabState] = useState(activeTab);
+
+  const [searchValue, setSearchValue] = useState(searchParams.get('search') || '');
+  const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 
   useEffect(() => {
     kategoriState.findMany.load(1, 100);
   }, []);
 
   useEffect(() => {
-    setActiveTabState(activeTab);
-  }, [activeTab]);
+    const params = new URLSearchParams(searchParams.toString());
+    if (debouncedSearch) params.set('search', debouncedSearch);
+    else params.delete('search');
+    params.delete('page');
+    router.push(`/darmasaba/desa/kegiatan-desa/semua?${params.toString()}`);
+  }, [debouncedSearch]);
 
-  const initialSearch = searchParams.get('search') || '';
-  const [searchValue, setSearchValue] = useState(initialSearch);
-  const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
-
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    setSearchValue(value);
-
-    if (searchTimeout !== null) clearTimeout(searchTimeout);
-
-    const newTimeout = window.setTimeout(() => {
-      const params = new URLSearchParams(searchParams.toString());
-      if (value) params.set('search', value);
-      else params.delete('search');
-
-      router.push(
-        `/darmasaba/desa/kegiatan-desa/${activeTab}${params.toString() ? `?${params.toString()}` : ''}`
-      );
-    }, 500);
-
-    setSearchTimeout(newTimeout);
+  const handleKategoriChange = (value: string | null) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (value) params.set('kategori', value);
+    else params.delete('kategori');
+    params.delete('page');
+    router.push(`/darmasaba/desa/kegiatan-desa/semua?${params.toString()}`);
   };
 
-  const tabs = [
-    { label: 'Semua', value: 'semua', href: '/darmasaba/desa/kegiatan-desa/semua' },
-    ...(kategoriState.findMany.data || []).map((kat: any) => ({
-      label: kat.nama,
-      value: kat.nama.toLowerCase(),
-      href: `/darmasaba/desa/kegiatan-desa/${kat.nama.toLowerCase()}`,
-    })),
-  ];
-
-  const handleTabChange = (value: string | null) => {
-    if (!value) return;
-    const tab = tabs.find((t) => t.value === value);
-    if (tab) {
-      const params = new URLSearchParams(searchParams.toString());
-      router.push(`${tab.href}${params.toString() ? `?${params.toString()}` : ''}`);
-    }
-  };
+  const kategoriOptions = (kategoriState.findMany.data || []).map((k: any) => ({
+    value: k.nama,
+    label: k.nama,
+  }));
 
   return (
     <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
@@ -75,7 +51,7 @@ function LayoutTabsKegiatanDesa({ children }: { children: React.ReactNode }) {
       </Box>
 
       <Box px={{ base: 'md', md: 100 }}>
-        <Group justify="space-between" align="center" wrap="wrap" gap="md">
+        <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
           <Stack gap={4}>
             <Text fz={{ base: '2rem', md: '3.4rem' }} c={colors['blue-button']} fw="bold" lh={1.2}>
               Kegiatan Desa Darmasaba
@@ -84,43 +60,30 @@ function LayoutTabsKegiatanDesa({ children }: { children: React.ReactNode }) {
               Temukan berbagai kegiatan dan program yang dilaksanakan Desa Darmasaba
             </Text>
           </Stack>
-          <Box w={{ base: '100%', sm: 260 }}>
+
+          <Group gap="sm" wrap="nowrap" align="center">
+            <Select
+              radius="lg"
+              placeholder="Semua Kategori"
+              data={kategoriOptions}
+              value={searchParams.get('kategori') || null}
+              onChange={handleKategoriChange}
+              clearable
+              w={180}
+            />
             <TextInput
               radius="lg"
               placeholder="Cari kegiatan..."
               leftSection={<IconSearch size={18} />}
               value={searchValue}
-              onChange={handleSearchChange}
+              onChange={(e) => setSearchValue(e.target.value)}
+              w={220}
             />
-          </Box>
+          </Group>
         </Group>
       </Box>
 
-      <Tabs
-        color={colors['blue-button']}
-        variant="pills"
-        value={activeTabState}
-        onChange={handleTabChange}
-      >
-        <Box px={{ base: 'md', md: 100 }} py="md" bg={colors['BG-trans']}>
-          <Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
-            <TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
-              {tabs.map((tab, i) => (
-                <TabsTab
-                  key={i}
-                  value={tab.value}
-                  onClick={() => router.push(tab.href)}
-                  style={{ flex: '0 0 auto', minWidth: 100, textAlign: 'center' }}
-                >
-                  {tab.label}
-                </TabsTab>
-              ))}
-            </TabsList>
-          </Box>
-        </Box>
-
-        {children}
-      </Tabs>
+      {children}
     </Stack>
   );
 }
diff --git a/src/app/darmasaba/(pages)/desa/kegiatan-desa/semua/page.tsx b/src/app/darmasaba/(pages)/desa/kegiatan-desa/semua/page.tsx
index 7c84b573..04189a87 100644
--- a/src/app/darmasaba/(pages)/desa/kegiatan-desa/semua/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/kegiatan-desa/semua/page.tsx
@@ -2,42 +2,18 @@
 'use client'
 import stateDashboardKegiatan from '@/app/admin/(dashboard)/_state/desa/kegiatanDesa';
 import colors from '@/con/colors';
-import {
-  Badge,
-  Box,
-  Button,
-  Center,
-  Container,
-  Divider,
-  Grid,
-  GridCol,
-  Group,
-  Image,
-  Pagination,
-  Paper,
-  SimpleGrid,
-  Skeleton,
-  Stack,
-  Text,
-  Title,
-} from '@mantine/core';
-import { KegiatanCard } from '../_com/KegiatanCard';
-import { IconArrowRight, IconCalendar, IconMapPin, IconUsers } from '@tabler/icons-react';
+import { Box, Button, Center, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { useTransitionRouter } from 'next-view-transitions';
 import { useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 
-const formatTanggal = (val: string) =>
-  val
-    ? new Date(val).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })
-    : '-';
-
 function Semua() {
   const router = useTransitionRouter();
   const searchParams = useSearchParams();
 
   const search = searchParams.get('search') || '';
+  const kategori = searchParams.get('kategori') || '';
   const page = parseInt(searchParams.get('page') || '1');
 
   const state = useProxy(stateDashboardKegiatan.kegiatan);
@@ -45,123 +21,79 @@ function Semua() {
   const items = state.findMany.data || [];
   const totalPages = state.findMany.totalPages || 1;
 
-  useEffect(() => {
-    state.findMany.load(page, 7, search);
-  }, [page, search]);
-
-  const handlePageChange = (newPage: number) => {
-    const url = new URLSearchParams(searchParams.toString());
-    if (search) url.set('search', search);
-    if (newPage > 1) url.set('page', newPage.toString());
-    else url.delete('page');
-    router.replace(`?${url.toString()}`);
-  };
-
-  const featured = items[0] ?? null;
-  const rest = items.slice(1);
+  useShallowEffect(() => {
+    state.findMany.load(page, 9, search, kategori);
+  }, [page, search, kategori]);
 
   const toDetail = (item: { id: string; kategoriKegiatan?: { nama: string } | null }) =>
     `/darmasaba/desa/kegiatan-desa/${item.kategoriKegiatan?.nama?.toLowerCase() || 'semua'}/${item.id}`;
 
+  const handlePageChange = (newPage: number) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (newPage > 1) params.set('page', newPage.toString());
+    else params.delete('page');
+    router.replace(`/darmasaba/desa/kegiatan-desa/semua?${params.toString()}`);
+  };
+
   return (
-    <Box py={20}>
-      <Container size="xl" px={{ base: 'md', md: 'xl' }}>
-
-        {/* ─── Hero / Kegiatan Utama ─── */}
-        {loading ? (
-          <Center><Skeleton h={380} radius="md" /></Center>
-        ) : featured ? (
-          <Box mb={50}>
-            <Title order={2} mb="md" c="dark">Kegiatan Terbaru</Title>
-            <Paper shadow="md" radius="lg" withBorder style={{ overflow: 'hidden' }}>
-              <Grid gutter={0}>
-                <GridCol span={{ base: 12, md: 6 }}>
-                  <Image
-                    src={featured.image?.link || '/images/placeholderx.jpg'}
-                    alt={featured.judul || 'Kegiatan Utama'}
-                    height={380}
-                    fit="cover"
-                    style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
-                    loading="lazy"
-                  />
-                </GridCol>
-                <GridCol span={{ base: 12, md: 6 }} p="xl">
-                  <Stack h="100%" justify="space-between" gap="md">
-                    <Stack gap="sm">
-                      <Badge color={colors['blue-button']} variant="light" size="md" radius="md">
-                        {featured.kategoriKegiatan?.nama || 'Kegiatan'}
-                      </Badge>
-                      <Title order={3} lh={1.3} lineClamp={2}>
-                        {featured.judul}
-                      </Title>
-                      <Text c="dimmed" lineClamp={3} fz={{ base: 'sm', md: 'md' }} lh={1.6}>
-                        {featured.deskripsiSingkat}
-                      </Text>
-                    </Stack>
-
-                    <Stack gap="xs">
-                      <Group gap="xs" wrap="nowrap">
-                        <IconCalendar size={16} color={colors['blue-button']} />
-                        <Text fz="sm" c="dimmed">{formatTanggal(featured.tanggal)}</Text>
-                      </Group>
-                      <Group gap="xs" wrap="nowrap">
-                        <IconMapPin size={16} color={colors['blue-button']} />
-                        <Text fz="sm" c="dimmed" lineClamp={1}>{featured.lokasi || '-'}</Text>
-                      </Group>
-                      <Group gap="xs" wrap="nowrap">
-                        <IconUsers size={16} color={colors['blue-button']} />
-                        <Text fz="sm" c="dimmed">{featured.partisipan ?? 0} partisipan</Text>
-                      </Group>
-                    </Stack>
-
-                    <Button
-                      variant="light"
-                      color={colors['blue-button']}
-                      rightSection={<IconArrowRight size={16} />}
-                      radius="md"
-                      onClick={() => router.push(toDetail(featured))}
-                    >
-                      Lihat Detail
-                    </Button>
-                  </Stack>
-                </GridCol>
-              </Grid>
+    <Box px={{ base: 'md', md: 100 }} pb="xl">
+      {loading ? (
+        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl">
+          {Array(6).fill(0).map((_, i) => <Skeleton key={i} h={400} radius="lg" />)}
+        </SimpleGrid>
+      ) : items.length === 0 ? (
+        <Center py="xl">
+          <Text c="dimmed" fz="sm">Belum ada kegiatan desa.</Text>
+        </Center>
+      ) : (
+        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl">
+          {items.map((item) => (
+            <Paper key={item.id} shadow="sm" radius="lg" withBorder style={{ overflow: 'hidden' }}>
+              {item.image?.link && (
+                <Image
+                  src={item.image.link}
+                  height={220}
+                  alt={item.judul}
+                  fit="cover"
+                  loading="lazy"
+                />
+              )}
+              <Stack p="md" gap="xs">
+                <Title order={4} c={colors['blue-button']} ta="center" lineClamp={2}>
+                  {item.judul}
+                </Title>
+                <Text
+                  fz="sm"
+                  c="dark"
+                  ta="justify"
+                  lineClamp={3}
+                  lh={1.6}
+                >
+                  {item.deskripsiSingkat}
+                </Text>
+              </Stack>
+              <Center pb="md">
+                <Button variant="light" onClick={() => router.push(toDetail(item))}>
+                  Detail
+                </Button>
+              </Center>
             </Paper>
-          </Box>
-        ) : null}
+          ))}
+        </SimpleGrid>
+      )}
 
-        {/* ─── Grid Kegiatan ─── */}
-        <Box mt={loading ? 0 : 50}>
-          <Title order={2} mb="md" c="dark">Semua Kegiatan</Title>
-          <Divider mb="xl" />
-
-          {loading ? (
-            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
-              {Array(6).fill(0).map((_, i) => <Skeleton key={i} h={320} radius="md" />)}
-            </SimpleGrid>
-          ) : rest.length === 0 && !featured ? (
-            <Text c="dimmed" ta="center" fz="sm" py="xl">Belum ada kegiatan desa.</Text>
-          ) : rest.length > 0 ? (
-            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
-              {rest.map((item) => (
-                <KegiatanCard key={item.id} item={item} onNavigate={() => router.push(toDetail(item))} />
-              ))}
-            </SimpleGrid>
-          ) : null}
-
-          <Center mt="xl">
-            <Pagination
-              total={totalPages}
-              value={page}
-              onChange={handlePageChange}
-              siblings={1}
-              boundaries={1}
-              withEdges
-              color={colors['blue-button']}
-            />
-          </Center>
-        </Box>
-      </Container>
+      <Center mt="xl">
+        <Pagination
+          value={page}
+          onChange={handlePageChange}
+          total={totalPages}
+          size="lg"
+          radius="xl"
+          styles={{
+            control: { border: `1px solid ${colors['blue-button']}` },
+          }}
+        />
+      </Center>
     </Box>
   );
 }