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>

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);
+    const params = new URLSearchParams(searchParams.toString());
-  }, [activeTab]);
+    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 handleKategoriChange = (value: string | null) => {
-  const [searchValue, setSearchValue] = useState(initialSearch);
+    const params = new URLSearchParams(searchParams.toString());
-  const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
+    if (value) params.set('kategori', value);
-
+    else params.delete('kategori');
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    params.delete('page');
-    const value = event.target.value;
+    router.push(`/darmasaba/desa/kegiatan-desa/semua?${params.toString()}`);
-    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 tabs = [
+  const kategoriOptions = (kategoriState.findMany.data || []).map((k: any) => ({
-    { label: 'Semua', value: 'semua', href: '/darmasaba/desa/kegiatan-desa/semua' },
+    value: k.nama,
-    ...(kategoriState.findMany.data || []).map((kat: any) => ({
+    label: k.nama,
-      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()}` : ''}`);
-    }
-  };
 
   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
+      {children}
-        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>
     </Stack>
   );
 }

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 {
+import { Box, Button, Center, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
-  Badge,
+import { useShallowEffect } from '@mantine/hooks';
-  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 { 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(() => {
+  useShallowEffect(() => {
-    state.findMany.load(page, 7, search);
+    state.findMany.load(page, 9, search, kategori);
-  }, [page, search]);
+  }, [page, search, kategori]);
-
-  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);
 
   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}>
+    <Box px={{ base: 'md', md: 100 }} pb="xl">
-      <Container size="xl" px={{ base: 'md', md: 'xl' }}>
+      {loading ? (
-
+        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl">
-        {/* ─── Hero / Kegiatan Utama ─── */}
+          {Array(6).fill(0).map((_, i) => <Skeleton key={i} h={400} radius="lg" />)}
-        {loading ? (
+        </SimpleGrid>
-          <Center><Skeleton h={380} radius="md" /></Center>
+      ) : items.length === 0 ? (
-        ) : featured ? (
+        <Center py="xl">
-          <Box mb={50}>
+          <Text c="dimmed" fz="sm">Belum ada kegiatan desa.</Text>
-            <Title order={2} mb="md" c="dark">Kegiatan Terbaru</Title>
+        </Center>
-            <Paper shadow="md" radius="lg" withBorder style={{ overflow: 'hidden' }}>
+      ) : (
-              <Grid gutter={0}>
+        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl">
-                <GridCol span={{ base: 12, md: 6 }}>
+          {items.map((item) => (
-                  <Image
+            <Paper key={item.id} shadow="sm" radius="lg" withBorder style={{ overflow: 'hidden' }}>
-                    src={featured.image?.link || '/images/placeholderx.jpg'}
+              {item.image?.link && (
-                    alt={featured.judul || 'Kegiatan Utama'}
+                <Image
-                    height={380}
+                  src={item.image.link}
-                    fit="cover"
+                  height={220}
-                    style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
+                  alt={item.judul}
-                    loading="lazy"
+                  fit="cover"
-                  />
+                  loading="lazy"
-                </GridCol>
+                />
-                <GridCol span={{ base: 12, md: 6 }} p="xl">
+              )}
-                  <Stack h="100%" justify="space-between" gap="md">
+              <Stack p="md" gap="xs">
-                    <Stack gap="sm">
+                <Title order={4} c={colors['blue-button']} ta="center" lineClamp={2}>
-                      <Badge color={colors['blue-button']} variant="light" size="md" radius="md">
+                  {item.judul}
-                        {featured.kategoriKegiatan?.nama || 'Kegiatan'}
+                </Title>
-                      </Badge>
+                <Text
-                      <Title order={3} lh={1.3} lineClamp={2}>
+                  fz="sm"
-                        {featured.judul}
+                  c="dark"
-                      </Title>
+                  ta="justify"
-                      <Text c="dimmed" lineClamp={3} fz={{ base: 'sm', md: 'md' }} lh={1.6}>
+                  lineClamp={3}
-                        {featured.deskripsiSingkat}
+                  lh={1.6}
-                      </Text>
+                >
-                    </Stack>
+                  {item.deskripsiSingkat}
-
+                </Text>
-                    <Stack gap="xs">
+              </Stack>
-                      <Group gap="xs" wrap="nowrap">
+              <Center pb="md">
-                        <IconCalendar size={16} color={colors['blue-button']} />
+                <Button variant="light" onClick={() => router.push(toDetail(item))}>
-                        <Text fz="sm" c="dimmed">{formatTanggal(featured.tanggal)}</Text>
+                  Detail
-                      </Group>
+                </Button>
-                      <Group gap="xs" wrap="nowrap">
+              </Center>
-                        <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>
             </Paper>
-          </Box>
+          ))}
-        ) : null}
+        </SimpleGrid>
+      )}
 
-        {/* ─── Grid Kegiatan ─── */}
+      <Center mt="xl">
-        <Box mt={loading ? 0 : 50}>
+        <Pagination
-          <Title order={2} mb="md" c="dark">Semua Kegiatan</Title>
+          value={page}
-          <Divider mb="xl" />
+          onChange={handlePageChange}
-
+          total={totalPages}
-          {loading ? (
+          size="lg"
-            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
+          radius="xl"
-              {Array(6).fill(0).map((_, i) => <Skeleton key={i} h={320} radius="md" />)}
+          styles={{
-            </SimpleGrid>
+            control: { border: `1px solid ${colors['blue-button']}` },
-          ) : rest.length === 0 && !featured ? (
+          }}
-            <Text c="dimmed" ta="center" fz="sm" py="xl">Belum ada kegiatan desa.</Text>
+        />
-          ) : rest.length > 0 ? (
+      </Center>
-            <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>
     </Box>
   );
 }