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

Fix Tampilan User & Admin Menu Inovasi & Lingkungan

Browse Source
This commit is contained in:
nico
2025-09-22 17:15:11 +08:00
parent 0fc47c28ff
commit b5c044df6e
40 changed files with 3114 additions and 1667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/app/darmasaba/(pages)/inovasi/kolaborasi-inovasi/page.tsx
View File

@@ -1,67 +1,76 @@
'use client'
import kolaborasiInovasiState from '@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi';
import mitraKolaborasi from '@/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi';
import colors from '@/con/colors';
import { Box, Center, Grid, GridCol, Group, Image, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import {
Box,
Center,
Grid,
GridCol,
Group,
Image,
Pagination,
Paper,
Select,
SimpleGrid,
Skeleton,
Stack,
Text,
TextInput
} from '@mantine/core';
import { 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';
function Page() {
const state = useProxy(kolaborasiInovasiState)
const kolabState = useProxy(kolaborasiInovasiState)
const mitraState = useProxy(mitraKolaborasi)
const [search, setSearch] = useState('');
const [selectedYear, setSelectedYear] = useState<string | null>(null);
// Get unique years from the data
// Get unique years from kolaborasiInovasi data
const years = Array.from(
new Set(
state.findMany.data?.map(item =>
kolabState.findMany.data?.map(item =>
new Date(item.createdAt).getFullYear().toString()
) || []
)
)
.sort((a, b) => b.localeCompare(a)) // Sort descending (newest first)
.map(year => ({
value: year,
label: year,
}));
.sort((a, b) => b.localeCompare(a))
.map(year => ({ value: year, label: year }));
const {
data,
page,
totalPages,
loading,
load,
} = state.findMany
const { data, page, totalPages, loading, load } = kolabState.findMany;
useShallowEffect(() => {
load(page, 10, search, selectedYear || '')
}, [page, search, selectedYear])
mitraState.findMany.load(page, 10);
load(page, 10, search, selectedYear || '');
}, [page, search, selectedYear]);
const mitraData = mitraState.findMany.data || [];
const mitraLoading = mitraState.findMany.loading;
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton height={650} />
</Stack>
);
}
return (
<>
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
{/* Header Kolaborasi Inovasi */}
<Box px={{ base: 'md', md: 100 }} >
<Grid align='center'>
<GridCol span={{ base: 12, md: 9 }}>
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
Kolaborasi Inovasi
</Text>
</GridCol>
<GridCol span={{ base: 12, md: 3 }}>
<TextInput
radius={"lg"}
radius="lg"
placeholder='Cari Kolaborasi Inovasi'
value={search}
onChange={(e) => setSearch(e.target.value)}
@@ -71,40 +80,43 @@ function Page() {
</GridCol>
</Grid>
</Box>
{/* Filter Tahun */}
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'} justify='center'>
<Group justify='flex-end'>
<Stack gap="lg" justify="center">
<Group justify="flex-end">
<Select
value={selectedYear}
onChange={setSelectedYear}
label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
label={<Text fw="bold" fz="sm">Tahun</Text>}
placeholder='Semua Tahun'
clearable
data={[
{ value: '', label: 'Semua Tahun' },
...years
]}
data={[{ value: '', label: 'Semua Tahun' }, ...years]}
/>
</Group>
<SimpleGrid cols={{ base: 1, md: 2 }} spacing={'lg'}>
{data.map((v, k) => {
return (
<Paper p={'xl'} key={k}>
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
<Box pr={'lg'} pb={20}>
{v.slug}
</Box>
<Box pr={'lg'}>
{v.kolaborator}
</Box>
{/* List Kolaborasi Inovasi */}
{loading || !data ? (
<Stack py={10}>
<Skeleton height={650} />
</Stack>
) : (
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
{data.map((v, k) => (
<Paper p="xl" key={k}>
<Text fz="h3" fw="bold" c={colors['blue-button']}>{v.name}</Text>
<Box pr="lg" pb={20}>{v.slug}</Box>
<Box pr="lg">{v.kolaborator}</Box>
</Paper>
);
})}
</SimpleGrid>
))}
</SimpleGrid>
)}
{/* Pagination */}
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)} // ini penting!
onChange={(newPage) => load(newPage)}
total={totalPages}
mt="md"
mb="md"
@@ -113,17 +125,44 @@ function Page() {
</Stack>
</Box>
</Stack>
{/* Mitra Kolaborasi Section */}
<Box py={40} px={{ base: "md", md: 100 }} bg={colors['white-trans-1']}>
<Stack gap={'lg'} justify='center'>
<Box px={{ base: 'md', md: 100 }} >
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
<Stack gap="lg" justify="center">
<Box px={{ base: 'md', md: 100 }}>
<Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
Mitra Kolaborasi
</Text>
<Text ta={'center'} fz={'h4'}>Kami berkolaborasi dengan berbagai mitra dari berbagai sektor untuk mewujudkan visi Smart Village Darmasaba.</Text>
<Text ta="center" fz="h4">
Kami berkolaborasi dengan berbagai mitra dari berbagai sektor untuk mewujudkan visi Smart Village Darmasaba.
</Text>
</Box>
<Center>
<Image src={'/api/img/logoukm-kolaborasiinvoasi.png'} alt='' w={{ base: 500, md: 650 }} loading="lazy"/>
</Center>
{mitraLoading ? (
<Center py={20}><Skeleton height={100} width="80%" /></Center>
) : (
<SimpleGrid cols={{ base: 2, md: 4 }} spacing="xl">
{mitraData.map((m) => (
<Paper key={m.id} p="md" shadow="sm" radius="md">
<Center mb="sm">
{m.image?.link ? (
<Image
src={`${process.env.NEXT_PUBLIC_BASE_URL || ''}${m.image.link}`}
alt={m.name}
w={150}
h={100}
fit="cover"
radius="md"
/>
) : (
<Box w={100} h={100} bg={colors['blue-button']} style={{ borderRadius: '50%' }} />
)}
</Center>
<Text ta="center" fw="bold">{m.name}</Text>
</Paper>
))}
</SimpleGrid>
)}
</Stack>
</Box>
</>