Fix Menu Lingkungan Darmasaba User
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import { useParams } from 'next/navigation';
|
||||
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Container, Group, Image, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import BackButton from '../_com/BackButto';
|
||||
@@ -34,46 +34,44 @@ function Page() {
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
await state.suratKeterangan.findUnique.load(id);
|
||||
const result = state.suratKeterangan.findUnique.data as unknown as LayananData;
|
||||
setData(result);
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
console.error('Terjadi kesalahan saat memuat data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Center>
|
||||
<Skeleton height={500} />
|
||||
<Center h="100vh" bg={colors.Bg}>
|
||||
<Skeleton height={500} radius="md" animate />
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<Center>
|
||||
<Text>Data tidak ditemukan</Text>
|
||||
<Center h="100vh" bg={colors.Bg}>
|
||||
<Text fz="xl" c="dimmed">Maaf, data layanan tidak ditemukan</Text>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Container w={{ base: "100%", md: "50%" }}>
|
||||
<Container w={{ base: "100%", md: "60%" }}>
|
||||
<Text
|
||||
fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }}
|
||||
fz={{ base: "2rem", md: "2.5rem", lg: "3rem" }}
|
||||
ta="center"
|
||||
fw="bold"
|
||||
>
|
||||
@@ -81,19 +79,32 @@ function Page() {
|
||||
</Text>
|
||||
</Container>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={0}>
|
||||
<Stack gap="md">
|
||||
<Text
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
fz={{ base: "h4", md: "h2" }}
|
||||
pb={20}
|
||||
fz={{ base: "md", md: "lg" }}
|
||||
c="dark.7"
|
||||
ta="justify"
|
||||
/>
|
||||
{data.image2?.link && (
|
||||
<Center>
|
||||
<Image src={data.image2.link} alt={data.name} />
|
||||
<Image
|
||||
src={data.image2.link}
|
||||
alt={data.name}
|
||||
radius="md"
|
||||
maw={500}
|
||||
mx="auto"
|
||||
style={{ boxShadow: '0 0 20px rgba(28,110,164,0.2)' }}
|
||||
/>
|
||||
</Center>
|
||||
)}
|
||||
<Group justify='center' mt="md">
|
||||
<Button radius="lg" fz="h4" bg={colors['blue-button']}>
|
||||
<Group justify="center" mt="md">
|
||||
<Button
|
||||
radius="xl"
|
||||
size="lg"
|
||||
variant="gradient"
|
||||
gradient={{ from: '#1C6EA4', to: '#63B3ED' }}
|
||||
>
|
||||
Ajukan Permohonan
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
@@ -5,112 +5,130 @@ import { IconArrowRight } from '@tabler/icons-react';
|
||||
|
||||
function Page() {
|
||||
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>
|
||||
<SimpleGrid
|
||||
px={{ base: 20, md: 100 }}
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 2
|
||||
}}
|
||||
cols={{ base: 1, md: 2 }}
|
||||
spacing="xl"
|
||||
>
|
||||
{/* Content 1 */}
|
||||
<Box pt={{base: 0, md: 35}}>
|
||||
<Text c={colors["blue-button"]} fz={{ base: "h4", md: "h3" }} >
|
||||
Info Keamanan dan Pencegahan Kriminalitas
|
||||
<Box pt={{ base: 0, md: 35 }}>
|
||||
<Text c={colors['blue-button']} fz={{ base: 'h4', md: 'h3' }}>
|
||||
Community Safety & Crime Prevention
|
||||
</Text>
|
||||
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Kontak Darurat
|
||||
<Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
|
||||
Emergency Contacts
|
||||
</Text>
|
||||
<Group>
|
||||
<Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
|
||||
Lihat Detail
|
||||
<Button
|
||||
rightSection={<IconArrowRight />}
|
||||
mt={20}
|
||||
radius="xl"
|
||||
size="md"
|
||||
bg={colors['blue-button']}
|
||||
c={colors['white-1']}
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Group>
|
||||
</Box>
|
||||
{/* Content 2 */}
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }}>
|
||||
<Paper p={"lg"}>
|
||||
<Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
|
||||
Tips menjaga keamanan lingkungan
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
|
||||
<Paper p="lg" radius="xl" shadow="md">
|
||||
<Text c={colors['blue-button']} fw="bold" fz={{ base: 'h4', md: 'h3' }}>
|
||||
How to Keep Your Neighborhood Safe
|
||||
</Text>
|
||||
<Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
<Text fz={{ base: 'h5', md: 'h4' }} c={colors['blue-button']} mt="sm">
|
||||
Practical safety habits everyone can apply daily to reduce risks.
|
||||
</Text>
|
||||
<Group>
|
||||
<Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
|
||||
Lihat Detail
|
||||
<Button
|
||||
rightSection={<IconArrowRight />}
|
||||
mt={20}
|
||||
radius="xl"
|
||||
size="md"
|
||||
bg={colors['blue-button']}
|
||||
c={colors['white-1']}
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
</Group>
|
||||
</Paper>
|
||||
<Paper p={"lg"}>
|
||||
<Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
|
||||
Mengenali tanda-tanda kegiatan kriminal
|
||||
<Paper p="lg" radius="xl" shadow="md">
|
||||
<Text c={colors['blue-button']} fw="bold" fz={{ base: 'h4', md: 'h3' }}>
|
||||
Recognizing Criminal Activities
|
||||
</Text>
|
||||
<Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
|
||||
the printing and typesetting industry. the printing and typesetting industry.
|
||||
<Text fz={{ base: 'h5', md: 'h4' }} c={colors['blue-button']} mt="sm">
|
||||
Key warning signs and behavior patterns you should stay aware of.
|
||||
</Text>
|
||||
<Group>
|
||||
<Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
|
||||
Lihat Detail
|
||||
<Button
|
||||
rightSection={<IconArrowRight />}
|
||||
mt={20}
|
||||
radius="xl"
|
||||
size="md"
|
||||
bg={colors['blue-button']}
|
||||
c={colors['white-1']}
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
</Group>
|
||||
</Paper>
|
||||
</SimpleGrid>
|
||||
{/* Content 3 */}
|
||||
<Paper p={'xl'}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Program Keamanan Rutin
|
||||
<Paper p="xl" radius="xl" shadow="lg">
|
||||
<Text fz={{ base: 'h3', md: 'h2' }} c={colors['blue-button']} fw="bold">
|
||||
Ongoing Security Programs
|
||||
</Text>
|
||||
<Stack pt={30} gap={'lg'}>
|
||||
<Box>
|
||||
<Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
|
||||
<Flex align={'center'} justify={'space-between'}>
|
||||
<Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
|
||||
<IconArrowRight size={30} color={colors['white-1']} />
|
||||
<Stack pt={30} gap="lg">
|
||||
{['Night Patrol', 'Neighborhood Watch', 'Emergency Preparedness'].map((program, i) => (
|
||||
<Paper key={i} p="md" bg={colors['blue-button']} radius="md" shadow="sm">
|
||||
<Flex align="center" justify="space-between">
|
||||
<Text fz="h3" c={colors['white-1']}>
|
||||
{program}
|
||||
</Text>
|
||||
<IconArrowRight size={28} color={colors['white-1']} />
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Box>
|
||||
<Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
|
||||
<Flex align={'center'} justify={'space-between'}>
|
||||
<Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
|
||||
<IconArrowRight size={30} color={colors['white-1']} />
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Box>
|
||||
<Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
|
||||
<Flex align={'center'} justify={'space-between'}>
|
||||
<Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
|
||||
<IconArrowRight size={30} color={colors['white-1']} />
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Box>
|
||||
))}
|
||||
<Box pt={25}>
|
||||
<Button fullWidth rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat program lainnya</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
radius="xl"
|
||||
size="md"
|
||||
bg={colors['blue-button']}
|
||||
rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
|
||||
>
|
||||
Explore More Programs
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
{/* Content 4 */}
|
||||
<Box>
|
||||
<Paper p={'xl'} >
|
||||
<Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
|
||||
<iframe width="100%"
|
||||
<Paper p="xl" radius="xl" shadow="lg">
|
||||
<Box style={{ maxWidth: 560, width: '100%', aspectRatio: '16/9' }}>
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
src="https://www.youtube.com/embed/p5OkdBgasWA?si=6lFKXeE9LN5zcJQq" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" ></iframe>
|
||||
src="https://www.youtube.com/embed/p5OkdBgasWA?si=6lFKXeE9LN5zcJQq"
|
||||
title="Community Safety Patrol"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
/>
|
||||
</Box>
|
||||
<Text py={10} fz={{ base: "h3", md: "h2" }} fw={'bold'} c={colors['blue-button']}>
|
||||
Patroli Malam Darmasaba
|
||||
<Text py={10} fz={{ base: 'h3', md: 'h2' }} fw="bold" c={colors['blue-button']}>
|
||||
Darmasaba Night Patrol
|
||||
</Text>
|
||||
<Text fz={'h4'} >
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
<Text fz="h4" c={colors['blue-button']}>
|
||||
A closer look at how the community works together to maintain safety.
|
||||
</Text>
|
||||
<Box pt={10}>
|
||||
<Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>
|
||||
Lihat Video Lainnya
|
||||
<Button
|
||||
radius="xl"
|
||||
size="md"
|
||||
bg={colors['blue-button']}
|
||||
rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
|
||||
>
|
||||
Watch More Videos
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
@@ -1,85 +1,126 @@
|
||||
'use client'
|
||||
import dataLingkunganDesaState from '@/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { IconChristmasTree, IconDroplet, IconHome, IconLeaf, IconTrash } from '@tabler/icons-react';
|
||||
import { Badge, Box, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Tooltip } from '@mantine/core';
|
||||
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
|
||||
import { Icon, IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDroplet, IconHome, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent, IconTrashFilled, IconTree, IconTrendingUp, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
|
||||
import React, { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
icon: <IconLeaf size={100} color={colors['blue-button']} />,
|
||||
title: 'Luas Lahan Hijau',
|
||||
jumlah: '± 25 hektar',
|
||||
deskripsi: 'tersebar di area persawahan, kebun, dan taman desa.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: <IconHome size={100} color={colors['blue-button']} />,
|
||||
title: 'Jumlah Rumah Tangga',
|
||||
jumlah: '± 1.500 rumah tangga',
|
||||
deskripsi: 'yang mayoritas sudah memiliki fasilitas pengelolaan sampah mandiri.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: <IconDroplet size={100} color={colors['blue-button']} />,
|
||||
title: 'Jumlah Sungai dan Saluran Air',
|
||||
jumlah: '± 3 Sungai Besar',
|
||||
deskripsi: 'dan beberapa saluran irigasi tradisional (subak) yang masih aktif digunakan.'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: <IconChristmasTree size={100} color={colors['blue-button']} />,
|
||||
title: 'Program Penghijauan',
|
||||
jumlah: '± 1000 Pohon',
|
||||
deskripsi: 'Dilaksanakan secara berkala melalui kegiatan menanam pohon di area umum dan perbukitan.'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: <IconTrash size={100} color={colors['blue-button']} />,
|
||||
title: 'Pengelolaan Sampah',
|
||||
jumlah: '± 5 Bank Sampah',
|
||||
deskripsi: 'Didukung oleh Bank Sampah dan sistem pemilahan sampah rumah tangga.'
|
||||
},
|
||||
]
|
||||
function Page() {
|
||||
const state = useProxy(dataLingkunganDesaState.findMany)
|
||||
const [search, setSearch] = useState('')
|
||||
const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
|
||||
|
||||
const {
|
||||
data,
|
||||
load,
|
||||
page,
|
||||
totalPages,
|
||||
} = state
|
||||
|
||||
const iconMap: Record<string, Icon> = {
|
||||
ekowisata: IconLeaf,
|
||||
kompetisi: IconTrophy,
|
||||
wisata: IconTent,
|
||||
ekonomi: IconChartLine,
|
||||
sampah: IconRecycle,
|
||||
truck: IconTruckFilled,
|
||||
scale: IconScale,
|
||||
clipboard: IconClipboardTextFilled,
|
||||
trash: IconTrashFilled,
|
||||
lingkunganSehat: IconHomeEco,
|
||||
sumberOksigen: IconChristmasTreeFilled,
|
||||
ekonomiBerkelanjutan: IconTrendingUp,
|
||||
mencegahBencana: IconShieldFilled,
|
||||
rumah: IconHome,
|
||||
pohon: IconTree,
|
||||
air: IconDroplet
|
||||
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 6, debouncedSearch)
|
||||
}, [page, debouncedSearch])
|
||||
|
||||
if (state.loading || !data) {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Skeleton h={500} />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="28px">
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Data Lingkungan Desa
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Group justify="space-between" align='center' mt="md">
|
||||
<Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
|
||||
Data Lingkungan Desa
|
||||
</Text>
|
||||
<TextInput
|
||||
radius="xl"
|
||||
w={'30%'}
|
||||
placeholder="Cari Data Lingkungan Desa"
|
||||
leftSection={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
</Group>
|
||||
<Text fz="lg" c={'black'}>
|
||||
Desa Darmasaba menjaga dan mengembangkan lingkungan demi kesejahteraan warganya. Fokus utama meliputi penghijauan, pengelolaan sampah, dan perlindungan kawasan hijau.
|
||||
</Text>
|
||||
<Text px={20} ta={'center'} fz={'h4'}>Desa Darmasaba memiliki lingkungan yang terus dijaga dan dikembangkan demi kesejahteraan warganya. Upaya pelestarian lingkungan difokuskan pada penghijauan, pengelolaan sampah, serta perlindungan kawasan hijau.</Text>
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 2,
|
||||
}}>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<Box key={k}>
|
||||
<Paper p={20} bg={colors['white-trans-1']}>
|
||||
<Text fw={'bold'} c={colors['blue-button']} fz={{ base: "lg", md: "xl" }} >
|
||||
{v.title}
|
||||
</Text>
|
||||
<Box>
|
||||
{v.icon}
|
||||
<Text c={colors['blue-button']} fz={'h4'} fw={'bold'}>
|
||||
{v.jumlah}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text fz={{ base: "lg", md: "xl" }} >
|
||||
{v.deskripsi}
|
||||
</Text>
|
||||
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
|
||||
{data.map((item) => (
|
||||
<Paper
|
||||
key={item.id}
|
||||
p="lg"
|
||||
bg={colors['white-trans-2']}
|
||||
radius="md"
|
||||
shadow="xl"
|
||||
style={{ transition: 'all 0.3s', '&:hover': { transform: 'translateY(-5px)', boxShadow: `0 0 20px ${colors['blue-button']}` } }}
|
||||
>
|
||||
<Stack align="center" gap="md">
|
||||
<Tooltip label={item.name} position="top" withArrow>
|
||||
<Center>
|
||||
{iconMap[item.icon] ? (
|
||||
React.createElement(iconMap[item.icon], {
|
||||
size: 55,
|
||||
color: colors['blue-button'],
|
||||
style: {
|
||||
transition: 'all 0.3s',
|
||||
filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))'
|
||||
}
|
||||
})
|
||||
) : null}
|
||||
</Center>
|
||||
</Tooltip>
|
||||
<Text fw="bold" fz="xl" c={colors['blue-button']}>
|
||||
± {item.jumlah}
|
||||
</Text>
|
||||
<Text ta="center" fz="md" c={"black"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
|
||||
<Badge variant="gradient" gradient={{ from: '#1C6EA4', to: '#69C0FF' }} size="sm">
|
||||
{item.name}
|
||||
</Badge>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
<Center mt="xl">
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => load(newPage)}
|
||||
total={totalPages}
|
||||
color="blue"
|
||||
radius="xl"
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -1,93 +1,79 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Filosofi Tri Hita Karana',
|
||||
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
|
||||
<ListItem>
|
||||
Parahyangan: Hubungan manusia dengan Tuhan
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Pawongan: Hubungan antar manusia
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Palemahan: Hubungan manusia dengan alam
|
||||
</ListItem>
|
||||
</List>
|
||||
listDeskripsi: (
|
||||
<List fz={'lg'} spacing="sm" ta={'justify'}>
|
||||
<ListItem>Parahyangan: Hubungan manusia dengan Tuhan yang dijaga penuh kesadaran spiritual</ListItem>
|
||||
<ListItem>Pawongan: Harmoni dan kerja sama antar manusia dalam masyarakat</ListItem>
|
||||
<ListItem>Palemahan: Pelestarian lingkungan dan hubungan manusia dengan alam</ListItem>
|
||||
</List>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Bentuk Konservasi Berdasarkan Adat',
|
||||
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
|
||||
<ListItem>
|
||||
Pelestarian Hutan Adat seperti Alas Pala Sangeh atau Wana Kerthi
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Subak: Sistem pengelolaan irigasi tradisional yang menjunjung kebersamaan dan keberlanjutan
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Hari Raya Tumpek Uduh: Perayaan khusus untuk menghormati pohon dan tumbuhan
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Perarem dan Awig-Awig: Aturan adat desa yang mengatur larangan menebang pohon sembarangan, membuang limbah ke sungai, dll.
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Ritual penyucian alam seperti Melasti, Piodalan Segara, dan lainnya
|
||||
</ListItem>
|
||||
</List>
|
||||
listDeskripsi: (
|
||||
<List fz={'lg'} spacing="sm" ta={'justify'}>
|
||||
<ListItem>Pelestarian Hutan Adat seperti Alas Pala Sangeh dan Wana Kerthi</ListItem>
|
||||
<ListItem>Subak: Sistem irigasi tradisional yang menekankan kebersamaan dan keberlanjutan</ListItem>
|
||||
<ListItem>Hari Raya Tumpek Uduh: Perayaan untuk menghormati pohon dan tumbuhan</ListItem>
|
||||
<ListItem>Perarem & Awig-Awig: Aturan adat untuk menjaga lingkungan dari kerusakan</ListItem>
|
||||
<ListItem>Ritual penyucian alam seperti Melasti dan Piodalan Segara</ListItem>
|
||||
</List>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Nilai Konservasi Adat',
|
||||
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
|
||||
<ListItem>
|
||||
Menjaga keseimbangan ekosistem
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Melestarikan spiritualitas lokal dan kesucian alam
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Menumbuhkan kesadaran kolektif untuk hidup selaras dengan lingkungan
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Menjaga keberlangsungan sumber daya alam untuk generasi mendatang
|
||||
</ListItem>
|
||||
</List>
|
||||
listDeskripsi: (
|
||||
<List fz={'lg'} spacing="sm" ta={'justify'}>
|
||||
<ListItem>Menjaga keseimbangan ekosistem dan lingkungan hidup</ListItem>
|
||||
<ListItem>Melestarikan spiritualitas lokal dan kesucian alam</ListItem>
|
||||
<ListItem>Meningkatkan kesadaran kolektif untuk hidup selaras dengan alam</ListItem>
|
||||
<ListItem>Menjamin keberlanjutan sumber daya alam untuk generasi mendatang</ListItem>
|
||||
</List>
|
||||
),
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="24">
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} pb={20}>
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
<Box px={{ base: 'md', md: 100 }} pb={30}>
|
||||
<Text ta="center" fz={{ base: '2xl', md: '3rem' }} c={colors['blue-button']} fw="bold">
|
||||
Konservasi Adat Bali
|
||||
</Text>
|
||||
<Text px={20} ta={'center'} fz={'h4'}>
|
||||
Konservasi Adat Bali adalah upaya pelestarian lingkungan yang berpijak pada kearifan lokal masyarakat Bali, di mana alam dan budaya dianggap sebagai satu kesatuan yang harus dijaga secara harmonis.
|
||||
<Text px={20} ta="center" fz="lg" c="dimmed">
|
||||
Pelestarian lingkungan di Bali yang berpijak pada kearifan lokal, menjaga harmoni antara alam, budaya, dan manusia.
|
||||
</Text>
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 3,
|
||||
}}>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<Box key={k}>
|
||||
<Paper h={{ base: 0, md: 450 }} p={20} bg={colors['white-trans-1']}>
|
||||
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.title}</Text>
|
||||
{v.listDeskripsi}
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
|
||||
{data.map((item) => (
|
||||
<Paper
|
||||
key={item.id}
|
||||
p="lg"
|
||||
bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
|
||||
style={{ borderRadius: 16, boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)' }}
|
||||
>
|
||||
<Stack gap="md" px={20}>
|
||||
<Center>
|
||||
<Text fz="xl" fw="bold" c="black">
|
||||
{item.title}
|
||||
</Text>
|
||||
</Center>
|
||||
{item.listDeskripsi}
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
@@ -1,63 +1,60 @@
|
||||
'use client'
|
||||
import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Flex, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { IconClipboardTextFilled, IconMapPin, IconRecycle, IconScale, IconSearch, IconTrashFilled, IconTruckFilled } from '@tabler/icons-react';
|
||||
import { Box, Flex, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { Icon, IconChartLine, IconClipboardTextFilled, IconLeaf, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
// Dynamically import the map component to avoid SSR issues with Leaflet
|
||||
const LeafletMultiMarkerMap = dynamic(
|
||||
() => import('@/app/admin/(dashboard)/_com/LeafletMultiMarkerMap'),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
icon: <IconRecycle size={50} color={colors['blue-button']} />,
|
||||
deskripsi: '1. Pilah sampah sesuai jenisnya'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: <IconTruckFilled size={50} color={colors["blue-button"]} />,
|
||||
deskripsi: '2. Bawa sampah ke Bank Sampah'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: <IconScale size={50} color={colors["blue-button"]} />,
|
||||
deskripsi: '3. Timbang sampah di Bank Sampah'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: <IconClipboardTextFilled size={50} color={colors["blue-button"]} />,
|
||||
deskripsi: '4. Catat hasil timbangan di buku tabungan'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: <IconTrashFilled size={50} color={colors["blue-button"]} />,
|
||||
deskripsi: '5. Sampah didaur ulang oleh petugas Bank Sampah'
|
||||
},
|
||||
]
|
||||
|
||||
const bankSampah = [
|
||||
{
|
||||
id: 1,
|
||||
icon: <IconMapPin size={50} color={colors['blue-button']} />,
|
||||
deskripsi: 'Bank Sampah Sarana Gathi',
|
||||
alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: <IconMapPin size={50} color={colors['blue-button']} />,
|
||||
deskripsi: 'Bank Sampah BALI WASTU LESTARI',
|
||||
alamat: 'Jl. Ahmad Yani Utara Gg. Garuda No.1, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: <IconMapPin size={50} color={colors['blue-button']} />,
|
||||
deskripsi: 'Bank Sampah Jempiring Sari',
|
||||
alamat: 'Jl. Gn. Lebah I No.9, Tegal Harum, Kec. Denpasar Bar., Kota Denpasar, Bali 80119'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: <IconMapPin size={50} color={colors['blue-button']} />,
|
||||
deskripsi: 'Bank Sampah Sarana Gathi',
|
||||
alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
|
||||
},
|
||||
]
|
||||
function Page() {
|
||||
const state = useProxy(pengelolaanSampahState.pengelolaanSampah)
|
||||
const state2 = useProxy(pengelolaanSampahState.keteranganSampah)
|
||||
|
||||
const {
|
||||
data,
|
||||
load
|
||||
} = state.findMany
|
||||
|
||||
const {
|
||||
data: data2,
|
||||
load: load2
|
||||
} = state2.findMany
|
||||
|
||||
useShallowEffect(() => {
|
||||
load()
|
||||
load2()
|
||||
}, [])
|
||||
|
||||
const iconMap: Record<string, Icon> = {
|
||||
ekowisata: IconLeaf,
|
||||
kompetisi: IconTrophy,
|
||||
wisata: IconTent,
|
||||
ekonomi: IconChartLine,
|
||||
sampah: IconRecycle,
|
||||
truck: IconTruckFilled,
|
||||
scale: IconScale,
|
||||
clipboard: IconClipboardTextFilled,
|
||||
trash: IconTrashFilled,
|
||||
};
|
||||
|
||||
if (state.findMany.loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
@@ -84,10 +81,10 @@ function Page() {
|
||||
<Box key={k} px={28}>
|
||||
<Paper p={20} bg={colors['white-trans-1']}>
|
||||
<Flex gap={20} align={'center'}>
|
||||
<Box>
|
||||
{v.icon}
|
||||
<Box style={{ alignContent: 'center', alignItems: 'center' }}>
|
||||
{k + 1} {iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null}
|
||||
</Box>
|
||||
<Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.deskripsi}</Text>
|
||||
<Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Box>
|
||||
@@ -96,7 +93,7 @@ function Page() {
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Keterangan Bank Sampah Terdekat
|
||||
</Text>
|
||||
@@ -107,66 +104,64 @@ function Page() {
|
||||
leftSection={<IconSearch size={20} />}
|
||||
placeholder='Cari Bank Sampah Terdekat'
|
||||
/>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 2,
|
||||
}}>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
|
||||
{/* Left side - List of bank locations */}
|
||||
<Box>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 1,
|
||||
}}
|
||||
>
|
||||
{bankSampah.map((v, k) => {
|
||||
return (
|
||||
<Box key={k} px={20}>
|
||||
<Paper p={20} bg={colors['white-trans-1']} radius={'lg'}>
|
||||
<Flex gap={20} align={'center'}>
|
||||
<Box>
|
||||
{v.icon}
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>
|
||||
{v.deskripsi}
|
||||
</Text>
|
||||
<Text fz={{ base: "md", md: "lg" }} c={'black'}>
|
||||
{v.alamat}
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Paper p="md" bg={colors['white-trans-1']} radius="lg">
|
||||
<Text fz="xl" fw="bold" mb="md">Daftar Bank Sampah</Text>
|
||||
<Stack gap="md">
|
||||
{data2?.map((v, k) => (
|
||||
<Paper key={k} p="md" withBorder radius="md">
|
||||
<Text fw="bold" fz="lg">{v.namaTempatMaps}</Text>
|
||||
<Text c="dimmed" fz="sm" mb="sm">{v.alamat}</Text>
|
||||
{v.lat && v.lng ? (
|
||||
<a
|
||||
href={`https://www.google.com/maps/dir/?api=1&destination=${v.lat},${v.lng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ color: colors['blue-button'], textDecoration: 'none' }}
|
||||
>
|
||||
<Text fz="sm">📌 Buka di Google Maps</Text>
|
||||
</a>
|
||||
) : (
|
||||
<Text c="dimmed" fz="sm">Koordinat belum tersedia</Text>
|
||||
)}
|
||||
</Paper>
|
||||
))}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Box style={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
paddingBottom: '90.5%', // Aspek rasio 16:9 (atau gunakan '100%' untuk aspek rasio 1:1)
|
||||
height: 0,
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31558.578355337635!2d115.18413781150647!3d-8.613053599999985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23ff3a9d0f0ab%3A0xb6bb54a820adbae6!2sBank%20Sampah%20Sarana%20Gathi!5e0!3m2!1sid!2sid!4v1743994947623!5m2!1sid!2sid"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 0
|
||||
}}
|
||||
loading="lazy"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
|
||||
{/* Right side - Single map showing all locations */}
|
||||
<Box style={{ position: 'sticky', top: '20px' }}>
|
||||
<Paper p="md" bg={colors['white-trans-1']} radius="lg" h="100%">
|
||||
<Text fz="xl" fw="bold" mb="md">Peta Lokasi</Text>
|
||||
{data2?.some(v => v.lat && v.lng) ? (
|
||||
<Box style={{ height: '600px', width: '100%', borderRadius: '8px', overflow: 'hidden' }}>
|
||||
<LeafletMultiMarkerMap
|
||||
center={[
|
||||
data2[0]?.lat || -8.3405,
|
||||
data2[0]?.lng || 115.0920
|
||||
]}
|
||||
markers={data2
|
||||
.filter(v => v.lat && v.lng)
|
||||
.map(v => ({
|
||||
position: [v.lat, v.lng],
|
||||
popup: v.namaTempatMaps
|
||||
}))}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Text c="dimmed" fz="sm">Tidak ada koordinat yang tersedia</Text>
|
||||
)}
|
||||
</Paper>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack >
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
|
||||
@@ -1,71 +1,131 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { IconChristmasTreeFilled, IconHomeEco, IconShieldFilled, IconTrendingUp } from '@tabler/icons-react';
|
||||
import { Box, Button, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import { IconSearch, IconLeaf, IconTrophy, IconTent, IconChartLine, IconRecycle, IconTruckFilled, IconScale, IconClipboardTextFilled, IconTrashFilled, IconHomeEco, IconChristmasTreeFilled, IconTrendingUp, IconShieldFilled } from '@tabler/icons-react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
|
||||
import { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
deskripsi: 'Lingkungan Sehat',
|
||||
icon: <IconHomeEco size={80} color={colors['blue-button']} />,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
deskripsi: 'Sumber Oksigen',
|
||||
icon: <IconChristmasTreeFilled size={80} color={colors['blue-button']} />,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
deskripsi: 'Ekonomi Berkelanjutan',
|
||||
icon: <IconTrendingUp size={80} color={colors['blue-button']} />,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
deskripsi: 'Mencegah Bencana',
|
||||
icon: <IconShieldFilled size={80} color={colors['blue-button']} />,
|
||||
},
|
||||
]
|
||||
function Page() {
|
||||
const state = useProxy(programPenghijauanState);
|
||||
const [search, setSearch] = useState("");
|
||||
const [debouncedSearch] = useDebouncedValue(search, 500);
|
||||
const { data, load, page, totalPages, loading } = state.findMany;
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, debouncedSearch);
|
||||
}, [page, debouncedSearch]);
|
||||
|
||||
const iconMap: Record<string, any> = {
|
||||
ekowisata: IconLeaf,
|
||||
kompetisi: IconTrophy,
|
||||
wisata: IconTent,
|
||||
ekonomi: IconChartLine,
|
||||
sampah: IconRecycle,
|
||||
truck: IconTruckFilled,
|
||||
scale: IconScale,
|
||||
clipboard: IconClipboardTextFilled,
|
||||
trash: IconTrashFilled,
|
||||
lingkunganSehat: IconHomeEco,
|
||||
sumberOksigen: IconChristmasTreeFilled,
|
||||
ekonomiBerkelanjutan: IconTrendingUp,
|
||||
mencegahBencana: IconShieldFilled,
|
||||
};
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={20}>
|
||||
<Skeleton h={500} radius="xl" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Program Penghijauan Desa
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Box>
|
||||
<Group justify="space-between" align='center' mt="md">
|
||||
<Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
|
||||
Program Penghijauan Desa
|
||||
</Text>
|
||||
<TextInput
|
||||
radius="xl"
|
||||
w={'30%'}
|
||||
placeholder="Cari program atau kegiatan"
|
||||
leftSection={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
</Group>
|
||||
</Box>
|
||||
<Text c="dimmed" fz={{ base: 'sm', md: 'lg' }} mt="sm">
|
||||
Mari berpartisipasi menanam dan merawat pohon untuk menciptakan lingkungan hijau, sehat, dan seimbang bagi seluruh warga desa.
|
||||
</Text>
|
||||
<Text px={20} ta={'center'} fz={'h4'}>Program Penghijauan Desa bertujuan untuk meningkatkan kesadaran masyarakat akan pentingnya lingkungan hijau melalui penanaman pohon dan perawatan tanaman.</Text>
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} pb={60}>
|
||||
<Text c={colors['blue-button']} fw={'bold'} py={10} px={28} fz={{ base: "lg", md: "xl" }} ta={"justify"}>
|
||||
Manfaat Program Penghijauan
|
||||
</Text>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 4
|
||||
}}>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<Box key={k}>
|
||||
<Paper p={20} bg={colors['white-trans-1']}>
|
||||
<Stack flex={5}>
|
||||
<Center>
|
||||
{v.icon}
|
||||
</Center>
|
||||
<Box>
|
||||
<Text fz={{ base: "lg", md: "xl" }} ta={'center'} c={colors['blue-button']} fw={'bold'}>{v.deskripsi}</Text>
|
||||
</Box>
|
||||
<Group justify='center'>
|
||||
<Button bg={colors['blue-button']}>Detail</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
<Title order={2} c={colors['blue-button']} fw="bold" py={10} px={28} fz={{ base: 'lg', md: 'xl' }}>
|
||||
Manfaat Program
|
||||
</Title>
|
||||
<SimpleGrid cols={{ base: 1, md: 4 }} spacing="lg" mt="md">
|
||||
{data.map((v) => (
|
||||
<Paper
|
||||
key={v.id}
|
||||
p="xl"
|
||||
radius="xl"
|
||||
bg={colors['white-trans-1']}
|
||||
withBorder
|
||||
style={{
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: `1px solid rgba(255,255,255,0.2)`,
|
||||
transition: 'transform 0.3s, box-shadow 0.3s',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
const el = e.currentTarget;
|
||||
el.style.transform = 'translateY(-8px)';
|
||||
el.style.boxShadow = '0 15px 30px rgba(28,110,164,0.5)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const el = e.currentTarget;
|
||||
el.style.transform = 'translateY(0)';
|
||||
el.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';
|
||||
}}
|
||||
>
|
||||
<Stack align="center" gap="sm">
|
||||
<Center>
|
||||
{iconMap[v.icon] && React.createElement(iconMap[v.icon], { size: 50, stroke: 1.5, color: colors['blue-button'] })}
|
||||
</Center>
|
||||
<Tooltip label={v.judul} withArrow position="bottom">
|
||||
<Text fz={{ base: 'md', md: 'lg' }} ta="center" c={colors['blue-button']} fw="bold">
|
||||
{v.name}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
<Text fz="sm" ta="center" c="dimmed">
|
||||
{v.judul}
|
||||
</Text>
|
||||
<Button variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="sm" radius="xl" mt="sm">
|
||||
Pelajari Lebih Lanjut
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
<Center mt="xl">
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => load(newPage)}
|
||||
total={totalPages}
|
||||
color="blue"
|
||||
radius="xl"
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -3,119 +3,132 @@ import stateProfilePPID from '@/app/admin/(dashboard)/_state/ppid/profile_ppid/p
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Divider, Flex, Image, List, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconBuildingCommunity, IconTargetArrow, IconTimeline, IconUser } from '@tabler/icons-react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
|
||||
function Page() {
|
||||
const allList = useProxy(stateProfilePPID)
|
||||
useShallowEffect(() => {
|
||||
allList.profile.load("edit") // Assuming "1" is your default ID, adjust as needed
|
||||
allList.profile.load("edit")
|
||||
}, [])
|
||||
|
||||
if (!allList.profile.data) return <Stack bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Skeleton style={{backgroundColor: colors.Bg}} h={40} />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Skeleton h={80} />
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Paper p={"xl"} bg={colors['white-trans-1']}>
|
||||
{Array.from({ length: 10 }).map((v, k) =>
|
||||
<Skeleton key={k} h={40} />
|
||||
)}
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
if (!allList.profile.data) return (
|
||||
<Stack bg={colors.Bg} py="xl" gap="22">
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Skeleton h={40} />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Skeleton h={80} />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Paper p="xl" bg={colors['white-trans-1']}>
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<Skeleton key={i} h={40} mb="sm" />
|
||||
))}
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
)
|
||||
|
||||
const dataArray = Array.isArray(allList.profile.data)
|
||||
? allList.profile.data
|
||||
: [allList.profile.data];
|
||||
: [allList.profile.data]
|
||||
|
||||
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>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Text ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Profil Singkat PPID Desa Darmasaba
|
||||
<Text ta="center" fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }} c={colors["blue-button"]} fw="bold">
|
||||
PPID Desa Darmasaba Profile
|
||||
</Text>
|
||||
</Box>
|
||||
{dataArray.map((item) => (
|
||||
<Box key={item.id} px={{ base: "md", md: 100 }}>
|
||||
<Paper p={"xl"} bg={colors['white-trans-1']}>
|
||||
<Paper p="xl" bg={colors['white-trans-1']} radius="lg" shadow="xl">
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Flex align={"center"} gap={50}>
|
||||
<Image src={"/darmasaba-icon.png"} h={{ base: 80, md: 150 }} alt='' />
|
||||
<Text fz={{ base: "1.4rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
|
||||
<Flex align="center" gap={40} justify="center">
|
||||
<Image src="/darmasaba-icon.png" h={{ base: 70, md: 120 }} alt="Village logo" />
|
||||
<Text fz={{ base: "1.5rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw="bold">
|
||||
Public Information Officer
|
||||
</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Divider my={"md"} />
|
||||
{/* biodata perbekel */}
|
||||
<Box px={{ base: 0, md: 50 }} pb={30}>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 1,
|
||||
lg: 1,
|
||||
xl: 2,
|
||||
}}
|
||||
>
|
||||
<Box px={{ base: 0, md: 50 }}>
|
||||
<Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Stack gap={0}>
|
||||
<Center>
|
||||
<Image pt={{ base: 0, md: 90 }} src={item.imageUrl ? `${item.imageUrl}?t=${Date.now()}` : "/api/img/perbekel.png"} w={{ base: 250, md: 355 }} alt='' />
|
||||
</Center>
|
||||
<Paper
|
||||
bg={colors['blue-button']}
|
||||
py={30}
|
||||
className="glass3"
|
||||
px={{ base: 20, md: 20 }}
|
||||
<Divider my="lg" />
|
||||
|
||||
>
|
||||
<Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.5rem", md: "2.125rem", lg: "2.25rem", xl: "1.5rem" }}>
|
||||
<Box px={{ base: 0, md: 50 }} pb={40}>
|
||||
<SimpleGrid cols={{ base: 1, xl: 2 }} spacing="xl">
|
||||
<Box px={{ base: 0, md: 50 }}>
|
||||
<Paper bg={colors['white-trans-1']} radius="lg" shadow="sm">
|
||||
<Stack gap="md">
|
||||
<Center>
|
||||
<Image
|
||||
src={item.imageUrl ? `${item.imageUrl}?t=${Date.now()}` : "/api/img/perbekel.png"}
|
||||
w={{ base: 220, md: 330 }}
|
||||
alt="Leader photo"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
<Paper bg={colors['blue-button']} py={25} radius="lg" className="glass3">
|
||||
<Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.5rem", md: "2rem" }}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Box>
|
||||
<Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Biodata</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.biodata }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Riwayat Karir</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} dangerouslySetInnerHTML={{ __html: item.riwayat }} />
|
||||
</Box>
|
||||
<Stack gap="xl">
|
||||
<Box>
|
||||
<Flex align="center" gap="sm" mb="sm">
|
||||
<IconUser size={28} />
|
||||
<Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Biography</Text>
|
||||
</Flex>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: item.biodata }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex align="center" gap="sm" mb="sm">
|
||||
<IconTimeline size={28} />
|
||||
<Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Career History</Text>
|
||||
</Flex>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem" }} dangerouslySetInnerHTML={{ __html: item.riwayat }} />
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
<Box pb={30}>
|
||||
<Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
|
||||
<List>
|
||||
|
||||
<Box pb={40}>
|
||||
<Flex align="center" gap="sm" mb="sm">
|
||||
<IconBuildingCommunity size={28} />
|
||||
<Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Organizational Experience</Text>
|
||||
</Flex>
|
||||
<List spacing="xs" size="sm">
|
||||
<Box px={20}>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.pengalaman }} />
|
||||
<Text fz={{ base: "1rem", md: "1.125rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: item.pengalaman }} />
|
||||
</Box>
|
||||
</List>
|
||||
</Box>
|
||||
<Box pb={20}>
|
||||
<Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
|
||||
<List>
|
||||
|
||||
<Box>
|
||||
<Flex align="center" gap="sm" mb="sm">
|
||||
<IconTargetArrow size={28} />
|
||||
<Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Flagship Programs</Text>
|
||||
</Flex>
|
||||
<List spacing="xs" size="sm">
|
||||
<Box px={20}>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.unggulan }} />
|
||||
<Text fz={{ base: "1rem", md: "1.125rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: item.unggulan }} />
|
||||
</Box>
|
||||
</List>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default Page;
|
||||
export default Page
|
||||
|
||||
@@ -1,121 +1,395 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import { OrganizationChart } from 'primereact/organizationchart';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
// /* eslint-disable react-hooks/exhaustive-deps */
|
||||
// /* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
// 'use client'
|
||||
// import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID';
|
||||
// import colors from '@/con/colors';
|
||||
// import { Box, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
// import { OrganizationChart } from 'primereact/organizationchart';
|
||||
// import { useEffect } from 'react';
|
||||
// import { useProxy } from 'valtio/utils';
|
||||
// import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Title ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>Struktur PPID</Title>
|
||||
<StrukturOrganisasiPPID />
|
||||
// function Page() {
|
||||
// return (
|
||||
// <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
// <Box px={{ base: 'md', md: 100 }}>
|
||||
// <BackButton />
|
||||
// </Box>
|
||||
// <Title ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>Struktur PPID</Title>
|
||||
// <StrukturOrganisasiPPID />
|
||||
|
||||
</Stack>
|
||||
);
|
||||
// </Stack>
|
||||
// );
|
||||
// }
|
||||
|
||||
// function StrukturOrganisasiPPID() {
|
||||
// const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
|
||||
|
||||
// useEffect(() => {
|
||||
// stateOrganisasi.findMany.load()
|
||||
// }, [])
|
||||
|
||||
// if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
|
||||
// return (
|
||||
// <Stack py={10}>
|
||||
// <Skeleton h={500} />
|
||||
// </Stack>
|
||||
// );
|
||||
// }
|
||||
|
||||
// // Step 1: Group pegawai berdasarkan posisiId
|
||||
// const posisiMap = new Map<string, any>();
|
||||
|
||||
// for (const pegawai of stateOrganisasi.findMany.data) {
|
||||
// const posisiId = pegawai.posisi.id;
|
||||
// if (!posisiMap.has(posisiId)) {
|
||||
// posisiMap.set(posisiId, {
|
||||
// ...pegawai.posisi,
|
||||
// pegawaiList: [],
|
||||
// children: []
|
||||
// });
|
||||
// }
|
||||
// posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
|
||||
// }
|
||||
|
||||
|
||||
// // Step 2: Buat struktur pohon berdasarkan parentId
|
||||
// const root: any[] = [];
|
||||
|
||||
// posisiMap.forEach((posisi) => {
|
||||
// if (posisi.parentId) {
|
||||
// const parent = posisiMap.get(posisi.parentId);
|
||||
// if (parent) {
|
||||
// parent.children.push(posisi);
|
||||
// }
|
||||
// } else {
|
||||
// root.push(posisi);
|
||||
// }
|
||||
// });
|
||||
|
||||
// // Step 3: Ubah struktur ke format OrganizationChart
|
||||
// function toOrgChartFormat(node: any): any {
|
||||
// return {
|
||||
// expanded: true,
|
||||
// type: 'person',
|
||||
// styleClass: 'p-person',
|
||||
// data: {
|
||||
// name: node.pegawaiList?.[0]?.namaLengkap || 'Tidak ada pegawai',
|
||||
// status: node.nama,
|
||||
// image: node.pegawaiList?.[0]?.image?.link || '/img/default.png'
|
||||
// },
|
||||
// children: node.children.map(toOrgChartFormat)
|
||||
// };
|
||||
// }
|
||||
|
||||
|
||||
// const chartData = root.map(toOrgChartFormat);
|
||||
|
||||
// return (
|
||||
// <Box py={10}>
|
||||
// <Paper bg={colors.grey} p="md" style={{ overflowX: 'auto' }}>
|
||||
// <OrganizationChart style={{ color: colors['blue-button'] }} value={chartData} nodeTemplate={nodeTemplate} />
|
||||
// </Paper>
|
||||
// </Box>
|
||||
// );
|
||||
// }
|
||||
|
||||
|
||||
// function nodeTemplate(node: any) {
|
||||
// const imageSrc = node?.data?.image || '/img/default.png';
|
||||
// const name = node?.data?.name || 'Tanpa Nama';
|
||||
// const status = node?.data?.status || 'Tidak ada deskripsi';
|
||||
|
||||
// return (
|
||||
// <Stack pos={"relative"} py={"xl"} gap={"22"}>
|
||||
// <Stack align="center" gap={4}>
|
||||
// <Image
|
||||
// src={imageSrc}
|
||||
// alt={name}
|
||||
// radius="xl"
|
||||
// w={120}
|
||||
// h={120}
|
||||
// fit="cover"
|
||||
// />
|
||||
// <Text fw={600} ta="center">{name}</Text>
|
||||
// <Text size="sm" c="dimmed" ta="center">{status}</Text>
|
||||
// </Stack>
|
||||
// </Stack>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default Page;
|
||||
|
||||
'use client'
|
||||
import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Center,
|
||||
Container,
|
||||
Group,
|
||||
Image,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
Transition,
|
||||
} from '@mantine/core'
|
||||
import { IconRefresh, IconSearch, IconUsers } from '@tabler/icons-react'
|
||||
import { OrganizationChart } from 'primereact/organizationchart'
|
||||
import { useEffect } from 'react'
|
||||
import { useProxy } from 'valtio/utils'
|
||||
import BackButton from '../../desa/layanan/_com/BackButto'
|
||||
import colors from '@/con/colors'
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
background: colors['Bg'],
|
||||
color: '#E6F0FF',
|
||||
paddingBottom: 48,
|
||||
}}
|
||||
>
|
||||
<Container size="xl" py="xl">
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Stack align="center" gap="xl" mt="xl">
|
||||
<Title
|
||||
order={1}
|
||||
ta="center"
|
||||
c={colors['blue-button']}
|
||||
fz={{ base: 28, md: 36, lg: 44 }}
|
||||
|
||||
>
|
||||
Struktur Organisasi PPID
|
||||
</Title>
|
||||
<Text ta="center" c="black" maw={800}>
|
||||
Gambaran visual peran dan pegawai yang ditugaskan. Arahkan kursor
|
||||
untuk melihat detail atau klik node untuk fokus tampilan.
|
||||
</Text>
|
||||
</Stack>
|
||||
<Box mt="lg">
|
||||
<StrukturOrganisasiPPID />
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
function StrukturOrganisasiPPID() {
|
||||
const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
|
||||
const stateOrganisasi: any = useProxy(stateStrukturPPID.pegawai)
|
||||
|
||||
useEffect(() => {
|
||||
stateOrganisasi.findMany.load()
|
||||
void stateOrganisasi.findMany.load()
|
||||
}, [])
|
||||
|
||||
if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
|
||||
const isLoading =
|
||||
!stateOrganisasi.findMany.data &&
|
||||
stateOrganisasi.findMany.loading !== false
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
</Stack>
|
||||
);
|
||||
<Center py={48}>
|
||||
<Stack align="center" gap="sm">
|
||||
<Loader size="lg" />
|
||||
<Text fw={600}>Memuat struktur organisasi…</Text>
|
||||
<Text c="dimmed" size="sm">
|
||||
Mengambil data pegawai dan posisi. Mohon tunggu sebentar.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
)
|
||||
}
|
||||
|
||||
// Step 1: Group pegawai berdasarkan posisiId
|
||||
const posisiMap = new Map<string, any>();
|
||||
if (
|
||||
!stateOrganisasi.findMany.data ||
|
||||
stateOrganisasi.findMany.data.length === 0
|
||||
) {
|
||||
return (
|
||||
<Center py={40}>
|
||||
<Stack align="center" gap="md">
|
||||
<Paper
|
||||
radius="md"
|
||||
p="xl"
|
||||
style={{
|
||||
width: 560,
|
||||
background: 'rgba(28,110,164,0.2)',
|
||||
border: `1px solid rgba(255,255,255,0.1)`,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<IconUsers size={56} />
|
||||
</Center>
|
||||
<Title order={3} mt="md">
|
||||
Data pegawai belum tersedia
|
||||
</Title>
|
||||
<Text c="dimmed" mt="xs">
|
||||
Belum ada data pegawai yang tercatat untuk PPID. Silakan coba
|
||||
muat ulang atau periksa sumber data.
|
||||
</Text>
|
||||
<Group justify="center" mt="lg">
|
||||
<Button
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
variant="gradient"
|
||||
gradient={{ from: 'indigo', to: 'cyan' }}
|
||||
onClick={() => stateOrganisasi.findMany.load()}
|
||||
>
|
||||
Muat Ulang
|
||||
</Button>
|
||||
<Button
|
||||
leftSection={<IconSearch size={16} />}
|
||||
variant="subtle"
|
||||
onClick={() =>
|
||||
stateOrganisasi.findMany.load({ query: { q: '' } })
|
||||
}
|
||||
>
|
||||
Cari Pegawai
|
||||
</Button>
|
||||
</Group>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Center>
|
||||
)
|
||||
}
|
||||
|
||||
const posisiMap = new Map<string, any>()
|
||||
for (const pegawai of stateOrganisasi.findMany.data) {
|
||||
const posisiId = pegawai.posisi.id;
|
||||
const posisiId = pegawai.posisi.id
|
||||
if (!posisiMap.has(posisiId)) {
|
||||
posisiMap.set(posisiId, {
|
||||
...pegawai.posisi,
|
||||
pegawaiList: [],
|
||||
children: []
|
||||
});
|
||||
children: [],
|
||||
})
|
||||
}
|
||||
posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
|
||||
posisiMap.get(posisiId)!.pegawaiList.push(pegawai)
|
||||
}
|
||||
|
||||
|
||||
// Step 2: Buat struktur pohon berdasarkan parentId
|
||||
const root: any[] = [];
|
||||
|
||||
const root: any[] = []
|
||||
posisiMap.forEach((posisi) => {
|
||||
if (posisi.parentId) {
|
||||
const parent = posisiMap.get(posisi.parentId);
|
||||
const parent = posisiMap.get(posisi.parentId)
|
||||
if (parent) {
|
||||
parent.children.push(posisi);
|
||||
parent.children.push(posisi)
|
||||
} else {
|
||||
root.push(posisi)
|
||||
}
|
||||
} else {
|
||||
root.push(posisi);
|
||||
root.push(posisi)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// Step 3: Ubah struktur ke format OrganizationChart
|
||||
function toOrgChartFormat(node: any): any {
|
||||
return {
|
||||
expanded: true,
|
||||
type: 'person',
|
||||
styleClass: 'p-person',
|
||||
data: {
|
||||
name: node.pegawaiList?.[0]?.namaLengkap || 'Tidak ada pegawai',
|
||||
status: node.nama,
|
||||
image: node.pegawaiList?.[0]?.image?.link || '/img/default.png'
|
||||
name: node.pegawaiList?.[0]?.namaLengkap || 'Belum ditugaskan',
|
||||
title: node.nama || 'Tanpa jabatan',
|
||||
image: node.pegawaiList?.[0]?.image?.link || '/img/default.png',
|
||||
description: node.deskripsi || '',
|
||||
positionId: node.id || null,
|
||||
},
|
||||
children: node.children.map(toOrgChartFormat)
|
||||
};
|
||||
children: node.children?.map(toOrgChartFormat) || [],
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const chartData = root.map(toOrgChartFormat);
|
||||
const chartData = root.map(toOrgChartFormat)
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors.grey} p="md" style={{ overflowX: 'auto' }}>
|
||||
<OrganizationChart style={{ color: colors['blue-button'] }} value={chartData} nodeTemplate={nodeTemplate} />
|
||||
<Box py={16} >
|
||||
<Paper
|
||||
radius="md"
|
||||
p="md"
|
||||
style={{
|
||||
background: 'rgba(28,110,164,0.2)',
|
||||
border: `1px solid rgba(255,255,255,0.1)`,
|
||||
overflowX: 'auto',
|
||||
}}
|
||||
>
|
||||
<OrganizationChart
|
||||
value={chartData}
|
||||
nodeTemplate={nodeTemplate}
|
||||
/>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
function nodeTemplate(node: any) {
|
||||
const imageSrc = node?.data?.image || '/img/default.png';
|
||||
const name = node?.data?.name || 'Tanpa Nama';
|
||||
const status = node?.data?.status || 'Tidak ada deskripsi';
|
||||
const imageSrc = node?.data?.image || '/img/default.png'
|
||||
const name = node?.data?.name || 'Tanpa Nama'
|
||||
const title = node?.data?.title || 'Tanpa Jabatan'
|
||||
const description = node?.data?.description || ''
|
||||
|
||||
return (
|
||||
<Stack pos={"relative"} py={"xl"} gap={"22"}>
|
||||
<Stack align="center" gap={4}>
|
||||
<Image
|
||||
src={imageSrc}
|
||||
alt={name}
|
||||
radius="xl"
|
||||
w={120}
|
||||
h={120}
|
||||
fit="cover"
|
||||
/>
|
||||
<Text fw={600} ta="center">{name}</Text>
|
||||
<Text size="sm" c="dimmed" ta="center">{status}</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
<Transition mounted transition="pop" duration={240}>
|
||||
{(styles) => (
|
||||
<Card
|
||||
radius="lg"
|
||||
withBorder
|
||||
style={{
|
||||
...styles,
|
||||
width: 260,
|
||||
padding: 16,
|
||||
background: 'rgba(28,110,164,0.3)',
|
||||
borderColor: 'rgba(255,255,255,0.15)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={imageSrc}
|
||||
alt={name}
|
||||
radius="md"
|
||||
width={120}
|
||||
height={120}
|
||||
fit="cover"
|
||||
style={{
|
||||
objectFit: 'cover',
|
||||
border: '2px solid rgba(255,255,255,0.2)',
|
||||
marginBottom: 12,
|
||||
}}
|
||||
/>
|
||||
<Text fw={700}>{name}</Text>
|
||||
<Text size="sm" c="dimmed" mt={4}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed" mt={8} lineClamp={3}>
|
||||
{description || 'Belum ada deskripsi.'}
|
||||
</Text>
|
||||
<Tooltip label="Lihat detail" withArrow position="bottom">
|
||||
<Button
|
||||
variant="light"
|
||||
size="xs"
|
||||
mt="md"
|
||||
onClick={() => {
|
||||
const id = node?.data?.positionId
|
||||
if (id && (window as any).scrollTo) {
|
||||
;(window as any).scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
}}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Card>
|
||||
)}
|
||||
</Transition>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user