wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

refactor(kegiatan-desa): redesign public list page to card grid + kategori filter

Browse Source 
- 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>
This commit is contained in:
nico
2026-04-30 15:09:33 +08:00
parent e0a5177257
commit 83a2dece57
2 changed files with 107 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/app/darmasaba/(pages)/desa/kegiatan-desa/_lib/layoutTabs.tsx
View File

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