Fix UI User Menu PPID & Kesehatan
This commit is contained in:
@@ -1,62 +1,95 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
"use client";
|
||||
|
||||
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
|
||||
import colors from '@/con/colors';
|
||||
import { ActionIcon, Box, Divider, Flex, Skeleton, Text } from '@mantine/core';
|
||||
import { ActionIcon, Box, Divider, Flex, Group, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function PelayananPendudukNonPermanent() {
|
||||
const state = useProxy(stateLayananDesa)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const state = useProxy(stateLayananDesa);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
await state.pelayananPendudukNonPermanen.findById.load('1')
|
||||
setLoading(true);
|
||||
await state.pelayananPendudukNonPermanen.findById.load('1');
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
console.error('Gagal memuat data:', error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadData()
|
||||
}, [])
|
||||
};
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const data = state.pelayananPendudukNonPermanen.findById.data;
|
||||
|
||||
const data = state.pelayananPendudukNonPermanen.findById.data
|
||||
return (
|
||||
<Box>
|
||||
<Box py="lg">
|
||||
{loading ? (
|
||||
<Skeleton h={500} />
|
||||
<Stack gap="lg">
|
||||
<Skeleton height={40} radius="md" />
|
||||
<Skeleton height={200} radius="md" />
|
||||
<Skeleton height={30} radius="md" />
|
||||
</Stack>
|
||||
) : (
|
||||
<Box>
|
||||
<Box py={15}>
|
||||
<Text fz={{ base: "h4", md: "h3" }} fw={"bold"}>{data?.name}</Text>
|
||||
<Stack gap="xl">
|
||||
<Box>
|
||||
<Text fz={{ base: "xl", md: "2xl" }} fw={700} lh={1.3} c="dark">
|
||||
{data?.name || "Judul belum tersedia"}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text pb={20} fz={{ base: "sm", md: 'h3' }} ta={"justify"} dangerouslySetInnerHTML={{__html: data?.deskripsi || ''}} />
|
||||
<Divider color={colors["blue-button"]} />
|
||||
<Flex justify={"space-between"} py={20}>
|
||||
<Text fz={{ base: "sm", md: 'h3' }}>25 May 2021 . Darmasaba</Text>
|
||||
<Box>
|
||||
<Flex gap={"lg"}>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandFacebook color={colors["blue-button"]} size={"30"} />
|
||||
|
||||
<Box>
|
||||
{data?.deskripsi ? (
|
||||
<Text
|
||||
fz={{ base: "sm", md: "md" }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data?.deskripsi }}
|
||||
/>
|
||||
) : (
|
||||
<Text fz="sm" c="gray">Deskripsi belum tersedia.</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Divider color={colors["blue-button"]} size="sm" />
|
||||
|
||||
<Flex justify="space-between" align="center" wrap="wrap" gap="md">
|
||||
<Text fz={{ base: "xs", md: "sm" }} c="dimmed">
|
||||
25 Mei 2021 • Darmasaba
|
||||
</Text>
|
||||
<Group gap="md">
|
||||
<Tooltip label="Bagikan ke Facebook" withArrow>
|
||||
<ActionIcon size="lg" radius="xl" variant="subtle" color="blue">
|
||||
<IconBrandFacebook size={24} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandInstagram color={colors["blue-button"]} size={"30"} />
|
||||
</Tooltip>
|
||||
<Tooltip label="Bagikan ke Instagram" withArrow>
|
||||
<ActionIcon size="lg" radius="xl" variant="subtle" color="pink">
|
||||
<IconBrandInstagram size={24} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandTwitter color={colors["blue-button"]} size={"30"} />
|
||||
</Tooltip>
|
||||
<Tooltip label="Bagikan ke Twitter" withArrow>
|
||||
<ActionIcon size="lg" radius="xl" variant="subtle" color="blue">
|
||||
<IconBrandTwitter size={24} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
|
||||
</Tooltip>
|
||||
<Tooltip label="Bagikan ke WhatsApp" withArrow>
|
||||
<ActionIcon size="lg" radius="xl" variant="subtle" color="green">
|
||||
<IconBrandWhatsapp size={24} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Flex>
|
||||
<Divider color={colors["blue-button"]} pb={50} />
|
||||
</Box>
|
||||
|
||||
<Divider color={colors["blue-button"]} size="sm" />
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
|
||||
import { Box, Button, Center, Group, Skeleton, Stepper, StepperCompleted, StepperStep, Text } from '@mantine/core';
|
||||
import { Box, Button, Center, Group, Loader, Stack, Stepper, StepperCompleted, StepperStep, Text, Title } from '@mantine/core';
|
||||
import { IconArrowLeft, IconArrowRight, IconCheck } from '@tabler/icons-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
@@ -18,7 +19,7 @@ function PelayananPerizinanBerusaha() {
|
||||
setLoading(true);
|
||||
await state.pelayananPerizinanBerusaha.findById.load('1')
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
console.error('Gagal memuat data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -28,76 +29,87 @@ function PelayananPerizinanBerusaha() {
|
||||
|
||||
const data = state.pelayananPerizinanBerusaha.findById.data;
|
||||
|
||||
if (!data) {
|
||||
if (!data && !loading) {
|
||||
return (
|
||||
<Center>
|
||||
<Text>Data tidak tersedia</Text>
|
||||
<Center mih={300}>
|
||||
<Stack align="center" gap="sm">
|
||||
<Text fz="lg" fw={500} c="dimmed">Belum ada informasi layanan yang tersedia</Text>
|
||||
<Button component="a" href="https://oss.go.id" target="_blank" radius="xl">Kunjungi OSS</Button>
|
||||
</Stack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box px={{ base: 'md', md: 'xl' }} py="lg">
|
||||
{loading ? (
|
||||
<Center>
|
||||
<Skeleton h={250} />
|
||||
<Center mih={300}>
|
||||
<Loader size="lg" color="blue" />
|
||||
</Center>
|
||||
) : (
|
||||
<Box>
|
||||
<Box py={15}>
|
||||
<Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)</Text>
|
||||
</Box>
|
||||
<Text
|
||||
py={10}
|
||||
ta={"justify"}
|
||||
fz={{ base: "sm", md: 'h3' }}
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi || '' }}
|
||||
/>
|
||||
<Text py={10} fz={{ base: "sm", md: 'h3' }}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
|
||||
<Box p={"xl"} w={{ base: "100%", md: "100%" }}>
|
||||
<Stepper active={active} onStepClick={setActive} orientation="vertical"
|
||||
styles={{
|
||||
separator: {
|
||||
marginLeft: 25
|
||||
},
|
||||
step: {
|
||||
padding: '12px 0'
|
||||
}
|
||||
}}>
|
||||
<StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
|
||||
Pendaftaran akun pada portal OSS
|
||||
</StepperStep>
|
||||
<StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
|
||||
Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
|
||||
</StepperStep>
|
||||
<StepperStep label="Langkah Ketiga" description="Pemilihan KBLI">
|
||||
Memilih KBLI dengan jenis usaha yang akan didaftarkan
|
||||
</StepperStep>
|
||||
<StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
|
||||
Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
|
||||
</StepperStep>
|
||||
<StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
|
||||
Proses verifikasi dan persetujuan oleh instansi terkait
|
||||
</StepperStep>
|
||||
<StepperStep label="Langkah Keenam" description="Penerimaan NIB">
|
||||
Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
|
||||
</StepperStep>
|
||||
<StepperCompleted>
|
||||
Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
|
||||
</StepperCompleted>
|
||||
</Stepper>
|
||||
<Stack gap="lg">
|
||||
<Box>
|
||||
<Title order={2} fw={700} fz={{ base: 22, md: 32 }} mb="sm">
|
||||
Perizinan Berusaha Berbasis Risiko melalui OSS
|
||||
</Title>
|
||||
<Text fz={{ base: 'sm', md: 'md' }} c="dimmed">
|
||||
Sistem Online Single Submission (OSS) untuk pendaftaran NIB
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Group justify="center" mt="xl">
|
||||
<Button variant="default" onClick={prevStep}>Back</Button>
|
||||
<Button onClick={nextStep}>Next step</Button>
|
||||
</Group>
|
||||
<Text py={35} ta={"justify"} fz={{ base: "sm", md: 'h3' }}>
|
||||
Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
|
||||
seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
|
||||
resmi OSS <a href="https://oss.go.id/" target="_blank" rel="noopener noreferrer">(https://oss.go.id/)</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.
|
||||
<Text fz={{ base: 'sm', md: 'md' }} ta="justify" dangerouslySetInnerHTML={{ __html: data?.deskripsi || '' }} />
|
||||
|
||||
<Box>
|
||||
<Text fw={600} mb="sm" fz={{ base: 'sm', md: 'lg' }}>Alur pendaftaran NIB:</Text>
|
||||
<Stepper active={active} onStepClick={setActive} orientation="vertical" color="blue" radius="md"
|
||||
styles={{
|
||||
step: { padding: '14px 0' },
|
||||
stepBody: { marginLeft: 8 }
|
||||
}}
|
||||
>
|
||||
<StepperStep label="Langkah 1" description="Daftar Akun">
|
||||
<Text fz="sm">Membuat akun di portal OSS</Text>
|
||||
</StepperStep>
|
||||
<StepperStep label="Langkah 2" description="Isi Data Perusahaan">
|
||||
<Text fz="sm">Lengkapi informasi perusahaan, data pemegang saham, dan alamat</Text>
|
||||
</StepperStep>
|
||||
<StepperStep label="Langkah 3" description="Pilih KBLI">
|
||||
<Text fz="sm">Menentukan kode KBLI sesuai jenis usaha</Text>
|
||||
</StepperStep>
|
||||
<StepperStep label="Langkah 4" description="Unggah Dokumen">
|
||||
<Text fz="sm">Unggah akta pendirian, surat izin, dan dokumen wajib lainnya</Text>
|
||||
</StepperStep>
|
||||
<StepperStep label="Langkah 5" description="Verifikasi Instansi">
|
||||
<Text fz="sm">Menunggu verifikasi dan persetujuan dari pihak berwenang</Text>
|
||||
</StepperStep>
|
||||
<StepperStep label="Langkah 6" description="Terbit NIB">
|
||||
<Text fz="sm">Menerima NIB sebagai identitas resmi usaha</Text>
|
||||
</StepperStep>
|
||||
<StepperCompleted>
|
||||
<Center>
|
||||
<Stack align="center" gap="xs">
|
||||
<IconCheck size={40} color="green" />
|
||||
<Text fz="sm" fw={500}>Proses pendaftaran selesai</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
</StepperCompleted>
|
||||
</Stepper>
|
||||
|
||||
<Group justify="center" mt="lg">
|
||||
<Button variant="light" leftSection={<IconArrowLeft size={18} />} onClick={prevStep} disabled={active === 0}>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button rightSection={<IconArrowRight size={18} />} onClick={nextStep}>
|
||||
Lanjut
|
||||
</Button>
|
||||
</Group>
|
||||
</Box>
|
||||
|
||||
<Text fz="sm" ta="justify" c="dimmed" mt="md">
|
||||
Catatan: Persyaratan dan prosedur dapat berubah sewaktu-waktu. Untuk informasi resmi terbaru, silakan kunjungi situs{" "}
|
||||
<a href="https://oss.go.id/" target="_blank" rel="noopener noreferrer">oss.go.id</a> atau hubungi instansi pemerintah terkait.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,96 +1,124 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
"use client";
|
||||
|
||||
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
|
||||
import colors from '@/con/colors';
|
||||
import { BackgroundImage, Box, Button, Center, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { BackgroundImage, Box, Button, Center, Group, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { IconFileDescription, IconInfoCircle } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function PelayananSuratKeterangan({ search }: { search: string }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const router = useRouter()
|
||||
const state = useProxy(stateLayananDesa)
|
||||
const router = useRouter();
|
||||
const state = useProxy(stateLayananDesa);
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
if (!state.suratKeterangan.findMany.data) return [];
|
||||
return state.suratKeterangan.findMany.data.filter(item => {
|
||||
return state.suratKeterangan.findMany.data.filter((item) => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.name?.toLowerCase().includes(keyword)
|
||||
);
|
||||
})
|
||||
return item.name?.toLowerCase().includes(keyword);
|
||||
});
|
||||
}, [state.suratKeterangan.findMany.data, search]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await state.suratKeterangan.findMany.load()
|
||||
await state.suratKeterangan.findMany.load();
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
console.error('Gagal memuat data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadData()
|
||||
}, [])
|
||||
};
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box pb={10}>
|
||||
<Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Surat Keterangan</Text>
|
||||
<Box pb="xl">
|
||||
<Group justify="space-between" align="center" mb="md">
|
||||
<Group gap="xs">
|
||||
<IconFileDescription size={28} stroke={1.8} color={colors["blue-button"]} />
|
||||
<Text fz={{ base: "h4", md: "h2" }} fw={700}>
|
||||
Layanan Surat Keterangan
|
||||
</Text>
|
||||
</Group>
|
||||
<Tooltip label="Pilih layanan surat keterangan sesuai kebutuhan Anda" withArrow>
|
||||
<IconInfoCircle size={22} stroke={1.8} color={colors["blue-button"]} />
|
||||
</Tooltip>
|
||||
</Group>
|
||||
|
||||
<SimpleGrid
|
||||
py={20}
|
||||
cols={{
|
||||
base: 1,
|
||||
sm: 3
|
||||
}}
|
||||
py="lg"
|
||||
cols={{ base: 1, sm: 2, md: 3 }}
|
||||
spacing="lg"
|
||||
>
|
||||
{loading ? (
|
||||
<Center>
|
||||
<Skeleton h={250} />
|
||||
Array.from({ length: 3 }).map((_, i) => (
|
||||
<Skeleton key={i} h={250} radius="lg" />
|
||||
))
|
||||
) : filteredData.length === 0 ? (
|
||||
<Center py="xl">
|
||||
<Stack align="center" gap="xs">
|
||||
<IconFileDescription size={40} stroke={1.5} color={colors["blue-button"]} />
|
||||
<Text c="dimmed" ta="center">
|
||||
Tidak ada layanan surat keterangan yang ditemukan
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
) : (
|
||||
filteredData.map((v, k) => {
|
||||
return (
|
||||
<BackgroundImage
|
||||
key={k}
|
||||
src={v.image?.link || ''}
|
||||
h={250}
|
||||
radius={16}
|
||||
pos={"relative"}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
zIndex: 0
|
||||
}}
|
||||
pos={"absolute"}
|
||||
w={"100%"}
|
||||
h={"100%"}
|
||||
bg={colors.trans.dark[2]}
|
||||
/>
|
||||
<Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
|
||||
<Box p={"lg"}>
|
||||
<Text
|
||||
c={"white"}
|
||||
size={"1.5rem"}
|
||||
style={{
|
||||
textAlign: "center",
|
||||
}}>{v.name}</Text>
|
||||
</Box>
|
||||
<Group justify="center">
|
||||
<Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
|
||||
onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}>
|
||||
Detail
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</BackgroundImage>
|
||||
)
|
||||
})
|
||||
filteredData.map((v, k) => (
|
||||
<BackgroundImage
|
||||
key={k}
|
||||
src={v.image?.link || ''}
|
||||
h={250}
|
||||
radius="lg"
|
||||
pos="relative"
|
||||
style={{
|
||||
boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
pos="absolute"
|
||||
w="100%"
|
||||
h="100%"
|
||||
bg="rgba(0,0,0,0.45)"
|
||||
style={{ borderRadius: 16 }}
|
||||
/>
|
||||
<Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
|
||||
<Text
|
||||
c="white"
|
||||
fw={600}
|
||||
fz="lg"
|
||||
ta="center"
|
||||
lineClamp={2}
|
||||
>
|
||||
{v.name}
|
||||
</Text>
|
||||
<Group justify="center">
|
||||
<Button
|
||||
size="md"
|
||||
radius="xl"
|
||||
bg={colors["blue-button"]}
|
||||
px="lg"
|
||||
onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}
|
||||
style={{
|
||||
boxShadow: "0 0 12px rgba(59,130,246,0.6)",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
Lihat Detail
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</BackgroundImage>
|
||||
))
|
||||
)}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
|
||||
import { Box, Flex, Skeleton, Text, Title } from '@mantine/core';
|
||||
import { Box, Card, Flex, Grid, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import { IconExternalLink } from '@tabler/icons-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
@@ -11,22 +12,22 @@ interface ServiceItem {
|
||||
}
|
||||
|
||||
function PelayananTelunjukSaktiDesa() {
|
||||
const state = useProxy(stateLayananDesa)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const state = useProxy(stateLayananDesa);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
await state.pelayananTelunjukSaktiDesa.findMany.load()
|
||||
setLoading(true);
|
||||
await state.pelayananTelunjukSaktiDesa.findMany.load();
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
console.error('Gagal memuat data:', error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadData()
|
||||
}, [])
|
||||
};
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const data = (state.pelayananTelunjukSaktiDesa.findMany.data || []) as Array<{
|
||||
name: string;
|
||||
@@ -37,28 +38,63 @@ function PelayananTelunjukSaktiDesa() {
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
deletedAt: Date | null;
|
||||
}>
|
||||
}>;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Title fz="h2" py={10} mb="md">Terwujudnya Layanan umum bertajuk Sistim administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman. Layanan Telunjuk Sakti Desa meliputi :</Title>
|
||||
<Title order={2} mb="lg" fz={{ base: 22, md: 28 }} fw={700} style={{ lineHeight: 1.4 }}>
|
||||
Layanan Telunjuk Sakti Desa <br />
|
||||
<Text span c="dimmed" fz="lg" fw={400}>
|
||||
Terwujudnya sistem administrasi kependudukan terintegrasi berbasis elektronik, cerdas, dan aman
|
||||
</Text>
|
||||
</Title>
|
||||
|
||||
{loading ? (
|
||||
<Skeleton h={500} />
|
||||
<Skeleton h={400} radius="lg" />
|
||||
) : data.length === 0 ? (
|
||||
<Card shadow="sm" radius="lg" withBorder>
|
||||
<Text c="dimmed" ta="center" py="xl">
|
||||
Belum ada layanan tersedia untuk saat ini
|
||||
</Text>
|
||||
</Card>
|
||||
) : (
|
||||
data.map((v, k) => {
|
||||
return (
|
||||
<Box key={k}>
|
||||
<Box py={10}>
|
||||
<Flex gap={"3"} align={"center"}>
|
||||
<Text fz={{ base: "h4", md: "h3" }} fw={"bold"}>{v.name}
|
||||
<Grid gutter="lg">
|
||||
{data.map((v, k) => (
|
||||
<Grid.Col span={{ base: 12, sm: 6, lg: 4 }} key={k}>
|
||||
<Card
|
||||
shadow="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
p="lg"
|
||||
style={{
|
||||
transition: 'all 0.3s ease',
|
||||
background: 'linear-gradient(145deg, #ffffff, #f8f9fa)',
|
||||
}}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Text fw={700} fz="lg" lh={1.4}>
|
||||
{v.name}
|
||||
</Text>
|
||||
<Text span fz={{ base: "h4", md: "h3" }}>
|
||||
<a href={v.link} target="_blank" rel="noopener noreferrer" style={{ color: '#228be6' }}>{v.deskripsi}</a>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
<Flex gap="xs" align="center">
|
||||
<IconExternalLink size={18} stroke={1.5} />
|
||||
<Text
|
||||
component="a"
|
||||
href={v.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
fz="sm"
|
||||
c="blue"
|
||||
td="underline"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
{v.deskripsi}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -12,7 +12,7 @@ import PelayananPendudukNonPermanent from "./_com/pelayananPendudukNonPermanent"
|
||||
|
||||
export default function Page() {
|
||||
const [search, setSearch] = useState("")
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
@@ -40,14 +40,16 @@ export default function Page() {
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
{/* Bagian Pelayanan Surat Keterangan */}
|
||||
<PelayananSuratKeterangan search={search} />
|
||||
{/* Bagian Pelayanan Perizinan Berusaha */}
|
||||
<PelayananPerizinanBerusaha/>
|
||||
{/* Bagian Pelayanan Telunjuk Sakti Desa */}
|
||||
<PelayananTelunjukSaktiDesa/>
|
||||
{/* Bagian Pelayanan Penduduk Non Permanent */}
|
||||
<PelayananPendudukNonPermanent/>
|
||||
<Stack gap={"xl"}>
|
||||
{/* Bagian Pelayanan Surat Keterangan */}
|
||||
<PelayananSuratKeterangan search={search} />
|
||||
{/* Bagian Pelayanan Perizinan Berusaha */}
|
||||
<PelayananPerizinanBerusaha />
|
||||
{/* Bagian Pelayanan Telunjuk Sakti Desa */}
|
||||
<PelayananTelunjukSaktiDesa />
|
||||
{/* Bagian Pelayanan Penduduk Non Permanent */}
|
||||
<PelayananPendudukNonPermanent />
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
)
|
||||
|
||||
@@ -2,18 +2,18 @@
|
||||
'use client'
|
||||
import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Container, Image, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { Box, Center, Container, Image, Loader, Paper, Stack, Text, Title } from '@mantine/core';
|
||||
import { IconMoodSad } from '@tabler/icons-react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import BackButton from '../../layanan/_com/BackButto';
|
||||
|
||||
|
||||
function Page() {
|
||||
const params = useParams<{ id: string }>();
|
||||
const id = Array.isArray(params.id) ? params.id[0] : params.id;
|
||||
const state = useProxy(potensiDesaState.potensiDesa)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const state = useProxy(potensiDesaState.potensiDesa);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
@@ -22,54 +22,66 @@ function Page() {
|
||||
setLoading(true);
|
||||
await state.findUnique.load(id);
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
console.error('Gagal memuat data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadData()
|
||||
}, [id])
|
||||
};
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Center>
|
||||
<Skeleton height={500} />
|
||||
<Center h="80vh">
|
||||
<Stack align="center" gap="md">
|
||||
<Loader size="lg" color="blue" />
|
||||
<Text c="dimmed" fz="sm">Sedang memuat informasi...</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
if (!state.findUnique.data) {
|
||||
return (
|
||||
<Center>
|
||||
<Text>Data tidak ditemukan</Text>
|
||||
<Center h="80vh">
|
||||
<Stack align="center" gap="sm">
|
||||
<IconMoodSad size={64} stroke={1.5} color="var(--mantine-color-blue-6)" />
|
||||
<Title order={3}>Data Tidak Ditemukan</Title>
|
||||
<Text c="dimmed" fz="sm">Mohon periksa kembali atau coba beberapa saat lagi</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Box pb={20}>
|
||||
<Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
|
||||
{state.findUnique.data?.name}
|
||||
</Text>
|
||||
<Text
|
||||
ta={"center"}
|
||||
fw={"bold"}
|
||||
fz={"1.5rem"}
|
||||
>
|
||||
Informasi dan Pelayanan Administrasi Digital
|
||||
</Text>
|
||||
</Box>
|
||||
<Image src={state.findUnique.data?.image?.link || ''} alt='' w={"100%"} />
|
||||
</Container>
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="xl" px={{ base: "md", md: 0 }}>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
|
||||
{state.findUnique.data?.deskripsi || ''}
|
||||
</Text>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Container w={{ base: "100%", md: "60%" }}>
|
||||
<Paper radius="2xl" shadow="lg" p="xl" withBorder>
|
||||
<Stack gap="lg" align="center">
|
||||
<Title ta="center" fz={{ base: "2rem", md: "3rem" }} c={colors["blue-button"]} fw={800}>
|
||||
{state.findUnique.data?.name}
|
||||
</Title>
|
||||
<Text ta="center" fw={600} fz={{ base: "md", md: "lg" }} c="dimmed">
|
||||
Informasi & Pelayanan Potensi Desa Digital
|
||||
</Text>
|
||||
<Image
|
||||
src={state.findUnique.data?.image?.link || ''}
|
||||
alt={state.findUnique.data?.name || 'Potensi Desa'}
|
||||
radius="lg"
|
||||
fit="cover"
|
||||
w="100%"
|
||||
h={{ base: 220, md: 400 }}
|
||||
fallbackSrc="https://placehold.co/800x400?text=Gambar+tidak+tersedia"
|
||||
/>
|
||||
<Text py="md" fz={{ base: "sm", md: "md" }} ta="justify" lh={1.8}>
|
||||
{state.findUnique.data?.deskripsi || 'Belum ada deskripsi untuk potensi desa ini.'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Container>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
|
||||
import colors from '@/con/colors';
|
||||
import { BackgroundImage, Box, Button, Center, Flex, Group, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { BackgroundImage, Box, Button, Center, Flex, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { IconEye } from '@tabler/icons-react';
|
||||
import { useTransitionRouter } from 'next-view-transitions';
|
||||
import BackButton from '../layanan/_com/BackButto';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
|
||||
|
||||
import BackButton from '../layanan/_com/BackButto';
|
||||
|
||||
function Page() {
|
||||
const router = useTransitionRouter()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const state = useProxy(potensiDesaState)
|
||||
|
||||
useEffect(()=> {
|
||||
useEffect(() => {
|
||||
state.kategoriPotensi.findMany.load()
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
await state.potensiDesa.findMany.load()
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
console.error('Gagal memuat data:', error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
@@ -30,104 +30,121 @@ function Page() {
|
||||
}, [])
|
||||
|
||||
const data = state.potensiDesa.findMany.data
|
||||
// const kategoriData = state.kategoriPotensi.findMany.data
|
||||
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} >
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap={48}>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Box>
|
||||
<Stack gap={0}>
|
||||
<Flex justify={"space-between"} align={"center"} >
|
||||
<Flex justify="space-between" align="center" direction={{ base: "column", md: "row" }} gap="lg">
|
||||
<Stack gap="sm" maw={600}>
|
||||
<Text fz={{ base: "2rem", md: "3rem" }} fw={900} c={colors["blue-button"]} lh={1.2}>
|
||||
Potensi Desa Darmasaba
|
||||
</Text>
|
||||
<Text fz="lg" c="dimmed" ta="justify">
|
||||
Temukan berbagai potensi unggulan, peluang, dan daya tarik yang menjadikan Desa Darmasaba istimewa.
|
||||
</Text>
|
||||
</Stack>
|
||||
<Paper
|
||||
radius="2xl"
|
||||
px="xl"
|
||||
py="md"
|
||||
bg={colors["blue-button"]}
|
||||
shadow="xl"
|
||||
withBorder
|
||||
>
|
||||
<Flex justify="center" align="center" gap="xl">
|
||||
<Box>
|
||||
<Text fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
|
||||
Potensi Desa
|
||||
<Text ta="center" fz="2rem" fw={800} c="white">
|
||||
{data?.filter(item => item.kategori?.nama.toLowerCase() !== 'wisata').length || 0}
|
||||
</Text>
|
||||
<Text ta={"justify"} >
|
||||
Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba.
|
||||
<Text ta="center" fz="sm" c="white" fw={500}>
|
||||
Potensi
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text ta="center" fz="2rem" fw={800} c="white">
|
||||
{data?.filter(item => item.kategori?.nama.toLowerCase() === 'wisata').length || 0}
|
||||
</Text>
|
||||
<Text ta="center" fz="sm" c="white" fw={500}>
|
||||
Wisata
|
||||
</Text>
|
||||
</Box>
|
||||
<Paper radius={"md"} px={"xl"} py={5} bg={colors["blue-button"]} >
|
||||
<Flex justify={"space-between"} align={"center"} gap={"xl"}>
|
||||
<Box>
|
||||
<Text ta={"center"} fz={"h2"} fw={"bold"} c={"white"}>
|
||||
{data?.filter(item => item.kategori?.nama.toLowerCase() !== 'wisata' ).length || 0}
|
||||
</Text>
|
||||
<Text ta={"center"} fz={"sm"} c={"white"}>Potensi</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text ta={"center"} fz={"h2"} fw={"bold"} c={"white"}>
|
||||
{data?.filter(item => item.kategori?.nama.toLowerCase() === 'wisata' ).length || 0}
|
||||
</Text>
|
||||
<Text ta={"center"} fz={"sm"} c={"white"}>Wisata</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Flex>
|
||||
|
||||
<SimpleGrid
|
||||
py={20}
|
||||
cols={{
|
||||
base: 1,
|
||||
sm: 3
|
||||
}}
|
||||
>
|
||||
<SimpleGrid py={48} cols={{ base: 1, sm: 2, lg: 3 }} spacing="2xl">
|
||||
{loading ? (
|
||||
<Center>
|
||||
<Skeleton h={250} />
|
||||
</Center>
|
||||
) : (
|
||||
data?.map((v, k) => {
|
||||
return (
|
||||
Array.from({ length: 6 }).map((_, i) => (
|
||||
<Skeleton key={i} h={360} radius="xl" />
|
||||
))
|
||||
) : data && data.length > 0 ? (
|
||||
data.map((v, k) => (
|
||||
<BackgroundImage
|
||||
key={k}
|
||||
src={v.image?.link || ''}
|
||||
h={350}
|
||||
radius={16}
|
||||
pos={"relative"}
|
||||
h={360}
|
||||
radius="xl"
|
||||
style={{ overflow: 'hidden', position: 'relative' }}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
zIndex: 0
|
||||
}}
|
||||
pos={"absolute"}
|
||||
w={"100%"}
|
||||
h={"100%"}
|
||||
bg={colors.trans.dark[2]}
|
||||
pos="absolute"
|
||||
inset={0}
|
||||
bg="linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.7) 100%)"
|
||||
/>
|
||||
<Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
|
||||
<Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
|
||||
<Group>
|
||||
<Paper radius={"lg"} py={7} px={10}>
|
||||
<Text>{v.kategori?.nama}</Text>
|
||||
<Paper radius="lg" py={6} px={12} shadow="md" withBorder bg="rgba(255,255,255,0.85)">
|
||||
<Text fz="sm" fw={600}>{v.kategori?.nama}</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Box p={"lg"}>
|
||||
<Box>
|
||||
<Text
|
||||
fw={"bold"}
|
||||
c={"white"}
|
||||
size={"1.8rem"}
|
||||
style={{
|
||||
textAlign: "center",
|
||||
}}>{v.name}</Text>
|
||||
fw={800}
|
||||
c="white"
|
||||
fz="xl"
|
||||
ta="center"
|
||||
lineClamp={2}
|
||||
lh={1.3}
|
||||
>
|
||||
{v.name}
|
||||
</Text>
|
||||
</Box>
|
||||
<Group justify="center">
|
||||
<Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
|
||||
onClick={() => router.push(`/darmasaba/desa/potensi/${v.id}`)}>
|
||||
Detail
|
||||
</Button>
|
||||
<Tooltip label="Lihat detail potensi" withArrow>
|
||||
<Button
|
||||
radius="xl"
|
||||
size="md"
|
||||
leftSection={<IconEye size={18} />}
|
||||
bg={colors["blue-button"]}
|
||||
variant="gradient"
|
||||
gradient={{ from: colors["blue-button"], to: "#4dabf7", deg: 45 }}
|
||||
onClick={() => router.push(`/darmasaba/desa/potensi/${v.id}`)}
|
||||
>
|
||||
Lihat Detail
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
</BackgroundImage>
|
||||
)
|
||||
})
|
||||
)}
|
||||
))
|
||||
) : (
|
||||
<Center h={240}>
|
||||
<Stack align="center" gap="xs">
|
||||
<Text fz="lg" fw={600} c="dimmed">
|
||||
Belum ada potensi desa
|
||||
</Text>
|
||||
<Text fz="sm" c="dimmed">
|
||||
Data potensi akan tampil di sini setelah tersedia.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
)}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Stack, Paper, Image, Text, Center, Skeleton } from '@mantine/core';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
|
||||
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile'
|
||||
import colors from '@/con/colors'
|
||||
import { Box, Center, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core'
|
||||
import { useEffect } from 'react'
|
||||
import { useProxy } from 'valtio/utils'
|
||||
|
||||
function LambangDesa() {
|
||||
const state = useProxy(stateProfileDesa.lambangDesa)
|
||||
@@ -17,26 +17,60 @@ function LambangDesa() {
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Box py="lg">
|
||||
<Skeleton h={420} radius="xl" />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box pb={70}>
|
||||
<Stack align='center' gap={0}>
|
||||
<Box pb={30}>
|
||||
<Box pb={90}>
|
||||
<Stack align="center" gap="lg">
|
||||
<Box pb="lg">
|
||||
<Center>
|
||||
<Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
|
||||
<Image
|
||||
src={"/darmasaba-icon.png"}
|
||||
alt="Lambang resmi desa"
|
||||
w={{ base: 180, md: 280 }}
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Lambang Desa</Text>
|
||||
<Text
|
||||
c={colors['blue-button']}
|
||||
ta="center"
|
||||
fw={800}
|
||||
fz={{ base: 28, md: 40 }}
|
||||
mt="sm"
|
||||
style={{ letterSpacing: '-0.5px' }}
|
||||
>
|
||||
Lambang Desa
|
||||
</Text>
|
||||
</Box>
|
||||
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Text fz={{ base: "md", md: "h3"}} ta={"justify"} dangerouslySetInnerHTML={{__html: data.deskripsi}} />
|
||||
<Paper
|
||||
p="xl"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
w="100%"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%)',
|
||||
borderColor: '#e0e9ff',
|
||||
}}
|
||||
>
|
||||
<Tooltip label="Deskripsi lambang desa" position="top-start" withArrow>
|
||||
<Text
|
||||
fz={{ base: 'md', md: 'lg' }}
|
||||
lh={1.8}
|
||||
c="dark"
|
||||
ta="justify"
|
||||
style={{ fontWeight: 400 }}
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box >
|
||||
);
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default LambangDesa;
|
||||
export default LambangDesa
|
||||
|
||||
@@ -1,59 +1,95 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Card, Center, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { Box, Card, Center, Group, Image, Loader, Paper, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { IconPhoto } from '@tabler/icons-react';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
function MaskotDesa() {
|
||||
const state = useProxy(stateProfileDesa.maskotDesa)
|
||||
const state = useProxy(stateProfileDesa.maskotDesa);
|
||||
|
||||
useEffect(() => {
|
||||
state.findUnique.load("edit")
|
||||
}, [])
|
||||
state.findUnique.load('edit');
|
||||
}, []);
|
||||
|
||||
const { data, loading } = state.findUnique
|
||||
const { data, loading } = state.findUnique;
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Skeleton h={500} />
|
||||
</Box>
|
||||
)
|
||||
<Center mih={500}>
|
||||
<Stack align="center" gap="sm">
|
||||
<Loader size="lg" color="blue" />
|
||||
<Text c="dimmed" fz="sm">Sedang memuat data maskot desa...</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box pb={70}>
|
||||
<Stack align='center' gap={0}>
|
||||
<Box pb={30}>
|
||||
<Center>
|
||||
<Image src={"/pudak-icon.png"} alt="" w={{ base: 200, md: 300 }} />
|
||||
</Center>
|
||||
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Maskot Desa</Text>
|
||||
</Box>
|
||||
<Paper p={"xl"} bg={colors['white-trans-1']}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
|
||||
<Group wrap="wrap" gap="md">
|
||||
{data.images.map((img, index) => (
|
||||
<Card key={index} p="xs" w={220}>
|
||||
<Image
|
||||
src={img.image.link}
|
||||
alt={img.label}
|
||||
w={200}
|
||||
h={200}
|
||||
fit="cover"
|
||||
radius="md"
|
||||
style={{ border: '1px solid #ccc', objectFit: 'cover' }}
|
||||
/>
|
||||
<Text ta="center" mt="xs" fw="bold">{img.label}</Text>
|
||||
</Card>
|
||||
))}
|
||||
<Box pb={80}>
|
||||
<Stack align="center" gap="xl">
|
||||
<Stack align="center" gap={10}>
|
||||
<Image src="/pudak-icon.png" alt="Ikon Desa" w={{ base: 160, md: 240 }} />
|
||||
<Text c={colors['blue-button']} ta="center" fw={700} fz={{ base: 28, md: 36 }}>Maskot Desa</Text>
|
||||
</Stack>
|
||||
|
||||
<Paper
|
||||
p={{ base: 'md', md: 'xl' }}
|
||||
radius="lg"
|
||||
shadow="sm"
|
||||
withBorder
|
||||
style={{ background: 'linear-gradient(145deg, #ffffff, #f8f9fa)' }}
|
||||
>
|
||||
<Text
|
||||
fz={{ base: 'sm', md: 'lg' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dark"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
|
||||
<Group justify="center" gap="lg" mt="lg">
|
||||
{data.images.length > 0 ? (
|
||||
data.images.map((img, index) => (
|
||||
<Tooltip key={index} label={img.label} position="bottom" withArrow>
|
||||
<Card
|
||||
radius="lg"
|
||||
shadow="md"
|
||||
withBorder
|
||||
w={220}
|
||||
p="sm"
|
||||
style={{
|
||||
transition: 'transform 200ms ease, box-shadow 200ms ease',
|
||||
}}
|
||||
className="hover:scale-105 hover:shadow-lg"
|
||||
>
|
||||
<Image
|
||||
src={img.image.link}
|
||||
alt={img.label}
|
||||
w="100%"
|
||||
h={200}
|
||||
fit="cover"
|
||||
radius="md"
|
||||
/>
|
||||
<Text ta="center" mt="sm" fw={600} fz="sm" c="dark">
|
||||
{img.label}
|
||||
</Text>
|
||||
</Card>
|
||||
</Tooltip>
|
||||
))
|
||||
) : (
|
||||
<Stack align="center" gap="xs" mt="lg">
|
||||
<IconPhoto size={48} stroke={1.5} color="gray" />
|
||||
<Text c="dimmed" fz="sm">Belum ada gambar maskot yang ditambahkan</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Group>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box >
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default MaskotDesa;
|
||||
|
||||
@@ -1,75 +1,133 @@
|
||||
import colors from '@/con/colors';
|
||||
'use client'
|
||||
import { ActionIcon, Box, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { motion } from 'framer-motion';
|
||||
import { IconSparkles } from '@tabler/icons-react';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
const dataText = [
|
||||
{
|
||||
id: 1,
|
||||
title: "SANTUN",
|
||||
description: "Memberikan pelayanan yang baik, penuh rasa empati, sopan, dan beretika"
|
||||
title: "Santun",
|
||||
description: "Pelayanan ramah, penuh empati, sopan, dan beretika."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "ADAPTIF",
|
||||
description: "Cepat menyesuaikan diri menghadapi perubahan dan bertindak proaktif"
|
||||
title: "Adaptif",
|
||||
description: "Cepat menyesuaikan diri terhadap perubahan dan selalu proaktif."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "INOVATIF",
|
||||
description: "Selalu berusaha menciptakan pembaruan atau kreasi baru"
|
||||
title: "Inovatif",
|
||||
description: "Berani menciptakan pembaruan dan ide-ide kreatif."
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "PROFESIONAL",
|
||||
description: "Memiliki pengetahuan, terampil dan bertanggung jawab"
|
||||
title: "Profesional",
|
||||
description: "Berpengetahuan luas, terampil, dan bertanggung jawab."
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "GESIT",
|
||||
description: "Inisiatif dan cekatan dalam bekerja"
|
||||
title: "Gesit",
|
||||
description: "Cekatan, sigap, dan penuh inisiatif dalam bekerja."
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
const letters = ["S", "I", "G", "A", "P"];
|
||||
|
||||
function MotoDesa() {
|
||||
return (
|
||||
<Box pb={70}>
|
||||
<Stack align='center' gap={0} >
|
||||
<Box pb={30}>
|
||||
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h1", md: "2.5rem" }}>Moto Desa Darmasaba</Text>
|
||||
</Box>
|
||||
<Flex gap={50} pb={50} pt={20} justify={"space-evenly"} align={"center"} >
|
||||
<ActionIcon bg={colors['blue-button']} radius={150} p={{ base: "lg", md: "xl" }}>
|
||||
<Text c={colors['white-1']} ta={"center"} fw={"bold"} fz={{ base: "h2", md: "h1" }}>S</Text>
|
||||
</ActionIcon>
|
||||
<ActionIcon bg={colors['blue-button']} radius={150} p={{ base: "lg", md: "xl" }}>
|
||||
<Text c={colors['white-1']} ta={"center"} fw={"bold"} fz={{ base: "h2", md: "h1" }}>I</Text>
|
||||
</ActionIcon>
|
||||
<ActionIcon bg={colors['blue-button']} radius={150} p={{ base: "lg", md: "xl" }}>
|
||||
<Text c={colors['white-1']} ta={"center"} fw={"bold"} fz={{ base: "h2", md: "h1" }}>G</Text>
|
||||
</ActionIcon>
|
||||
<ActionIcon bg={colors['blue-button']} radius={150} p={{ base: "lg", md: "xl" }}>
|
||||
<Text c={colors['white-1']} ta={"center"} fw={"bold"} fz={{ base: "h2", md: "h1" }}>A</Text>
|
||||
</ActionIcon>
|
||||
<ActionIcon bg={colors['blue-button']} radius={150} p={{ base: "lg", md: "xl" }}>
|
||||
<Text c={colors['white-1']} ta={"center"} fw={"bold"} fz={{ base: "h2", md: "h1" }}>P</Text>
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
<Paper mb={50} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 2,
|
||||
<Box pb={80} px={{ base: "md", md: "xl" }}>
|
||||
<Stack align="center" gap="lg">
|
||||
<Box>
|
||||
<Text
|
||||
ta="center"
|
||||
fw={800}
|
||||
fz={{ base: "2rem", md: "2.8rem" }}
|
||||
style={{
|
||||
background: "linear-gradient(90deg, #0D5594FF, #094678FF)",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
}}
|
||||
>
|
||||
{dataText.map((v, k) => {
|
||||
return (
|
||||
<Box key={k}>
|
||||
<Text fw={"bold"} fz={{ base: "lg", md: "h3" }}>{v.title}</Text>
|
||||
<Text fz={{ base: "sm", md: "md" }}>{v.description}</Text>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
Moto Desa Darmasaba
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Flex gap={30} pb={40} pt={10} wrap="wrap" justify="center">
|
||||
{letters.map((letter, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
whileHover={{ scale: 1.15, rotate: 5 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={{ type: "spring", stiffness: 300 }}
|
||||
>
|
||||
<ActionIcon
|
||||
radius="xl"
|
||||
size={90}
|
||||
variant="gradient"
|
||||
gradient={{ from: "blue", to: "cyan" }}
|
||||
style={{
|
||||
boxShadow: `0 0 18px ${colors['blue-button']}`,
|
||||
backdropFilter: "blur(6px)",
|
||||
}}
|
||||
>
|
||||
<Text c="white" fw={800} fz="xl">
|
||||
{letter}
|
||||
</Text>
|
||||
</ActionIcon>
|
||||
</motion.div>
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
<Paper
|
||||
radius="lg"
|
||||
p="xl"
|
||||
withBorder
|
||||
style={{
|
||||
background: "linear-gradient(145deg, #ffffffcc, #f5faffcc)",
|
||||
boxShadow: "0 8px 24px rgba(0,0,0,0.08)",
|
||||
}}
|
||||
>
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
|
||||
{dataText.map((v) => (
|
||||
<motion.div
|
||||
key={v.id}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Stack gap={4}>
|
||||
<Flex align="center" gap="sm">
|
||||
<IconSparkles size={20} color={colors['blue-button']} />
|
||||
<Text fw={700} fz={{ base: "lg", md: "xl" }} c={colors['blue-button']}>
|
||||
{v.title}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text fz={{ base: "sm", md: "md" }} c="gray.7">
|
||||
{v.description}
|
||||
</Text>
|
||||
</Stack>
|
||||
</motion.div>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Paper>
|
||||
<Text mb={40} c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h4", md: "h3" }}>"Berkomitmen memberikan pelayanan terbaik dengan prinsip SIGAP untuk masyarakat Desa Darmasaba"</Text>
|
||||
|
||||
<Text
|
||||
ta="center"
|
||||
fw={700}
|
||||
fz={{ base: "md", md: "xl" }}
|
||||
c="blue.8"
|
||||
mt="md"
|
||||
style={{
|
||||
maxWidth: 720,
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
"Berkomitmen menghadirkan pelayanan terbaik dengan semangat{" "}
|
||||
<Text span fw={800} c="cyan.6">
|
||||
SIGAP
|
||||
</Text>{" "}
|
||||
untuk masyarakat Desa Darmasaba."
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -2,9 +2,10 @@
|
||||
'use client'
|
||||
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { Box, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Divider, Tooltip } from '@mantine/core';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { IconUser, IconBriefcase, IconUsers, IconTargetArrow } from '@tabler/icons-react';
|
||||
|
||||
function ProfilPerbekel() {
|
||||
const state = useProxy(stateProfileDesa.profilPerbekel)
|
||||
@@ -17,77 +18,155 @@ function ProfilPerbekel() {
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Box py={20} px="md">
|
||||
<Skeleton h={500} radius="lg" />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box pb={70}>
|
||||
<Stack align='center' gap={0}>
|
||||
<Box pb={30}>
|
||||
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Profil Perbekel</Text>
|
||||
</Box>
|
||||
<Box pb={80} px="md">
|
||||
<Stack align="center" gap={0} mb={40}>
|
||||
<Text
|
||||
c={colors['blue-button']}
|
||||
ta="center"
|
||||
fw="bold"
|
||||
fz={{ base: "2rem", md: "2.8rem" }}
|
||||
style={{ letterSpacing: "0.5px" }}
|
||||
>
|
||||
Profil Perbekel
|
||||
</Text>
|
||||
<Divider w={120} size="sm" color={colors['blue-button']} mt={10} />
|
||||
</Stack>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 2,
|
||||
}}
|
||||
pb={50}
|
||||
>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl" pb={50}>
|
||||
<Box>
|
||||
<Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Paper
|
||||
bg={colors['white-trans-1']}
|
||||
w="100%"
|
||||
radius="xl"
|
||||
shadow="md"
|
||||
withBorder
|
||||
>
|
||||
<Stack gap={0}>
|
||||
<Image
|
||||
pt={{ base: 0, md: 120 }}
|
||||
px={"lg"}
|
||||
pt={{ base: 0, md: 100 }}
|
||||
px="lg"
|
||||
src={data.image?.link || "/perbekel.png"}
|
||||
sizes='100%'
|
||||
alt=''
|
||||
alt="Foto Perbekel"
|
||||
radius="lg"
|
||||
onError={(e) => {
|
||||
e.currentTarget.src = "/perbekel.png";
|
||||
}}
|
||||
/>
|
||||
<Paper
|
||||
bg={colors['blue-button']}
|
||||
px={"lg"}
|
||||
px="lg"
|
||||
radius="0 0 var(--mantine-radius-xl) var(--mantine-radius-xl)"
|
||||
className="glass3"
|
||||
py={{ base: 20, md: 50 }}
|
||||
|
||||
>
|
||||
<Text c={colors['white-1']} fz={{ base: "md", md: "h3" }}>Perbekel Desa Darmasaba</Text>
|
||||
<Text c={colors['white-1']} fw={"bolder"} fz={{ base: "md", md: "h2" }}>
|
||||
I.B. Surya Prabhawa Manuaba, S.H.,M.H.,NL.P.
|
||||
<Text c={colors['white-1']} fz={{ base: "lg", md: "h3" }}>
|
||||
Perbekel Desa Darmasaba
|
||||
</Text>
|
||||
<Text
|
||||
c={colors['white-1']}
|
||||
fw="bolder"
|
||||
fz={{ base: "xl", md: "h2" }}
|
||||
mt={8}
|
||||
>
|
||||
{"I.B. Surya Prabhawa Manuaba, S.H.,M.H.,NL.P."}
|
||||
</Text>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Box>
|
||||
<Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Biodata</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.biodata }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.5rem" }} dangerouslySetInnerHTML={{ __html: data.pengalaman }} />
|
||||
</Box>
|
||||
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-trans-1']}
|
||||
w="100%"
|
||||
radius="xl"
|
||||
shadow="md"
|
||||
withBorder
|
||||
>
|
||||
<Stack gap="xl">
|
||||
<Box>
|
||||
<Tooltip label="Informasi pribadi perbekel" withArrow>
|
||||
<Stack gap={6}>
|
||||
<Stack align="center" gap={6}>
|
||||
<IconUser size={22} color={colors['blue-button']} />
|
||||
<Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Biodata</Text>
|
||||
</Stack>
|
||||
<Text
|
||||
fz={{ base: "1rem", md: "1.2rem" }}
|
||||
ta="justify"
|
||||
lh={1.6}
|
||||
dangerouslySetInnerHTML={{ __html: data.biodata }}
|
||||
/>
|
||||
</Stack>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Tooltip label="Pengalaman kerja perbekel" withArrow>
|
||||
<Stack gap={6}>
|
||||
<Stack align="center" gap={6}>
|
||||
<IconBriefcase size={22} color={colors['blue-button']} />
|
||||
<Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman</Text>
|
||||
</Stack>
|
||||
<Text
|
||||
fz={{ base: "1rem", md: "1.2rem" }}
|
||||
ta="justify"
|
||||
lh={1.6}
|
||||
dangerouslySetInnerHTML={{ __html: data.pengalaman }}
|
||||
/>
|
||||
</Stack>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</SimpleGrid >
|
||||
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Box>
|
||||
<Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }} />
|
||||
</Box>
|
||||
<Box pb={20}>
|
||||
<Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
|
||||
<Box px={20}>
|
||||
<Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.programUnggulan }} />
|
||||
</SimpleGrid>
|
||||
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-trans-1']}
|
||||
w="100%"
|
||||
radius="xl"
|
||||
shadow="md"
|
||||
withBorder
|
||||
>
|
||||
<Stack gap="xl">
|
||||
<Box>
|
||||
<Stack align="center" gap={6} >
|
||||
<IconUsers size={22} color={colors['blue-button']} />
|
||||
<Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman Organisasi</Text>
|
||||
</Stack>
|
||||
<Text
|
||||
fz={{ base: "1rem", md: "1.2rem" }}
|
||||
ta="justify"
|
||||
lh={1.6}
|
||||
dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Stack align="center" gap={6} mb={6}>
|
||||
<IconTargetArrow size={22} color={colors['blue-button']} />
|
||||
<Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Program Kerja Unggulan</Text>
|
||||
</Stack>
|
||||
<Box px={10}>
|
||||
<Text
|
||||
fz={{ base: "1rem", md: "1.2rem" }}
|
||||
ta="justify"
|
||||
lh={1.6}
|
||||
dangerouslySetInnerHTML={{ __html: data.programUnggulan }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box >
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,39 +7,69 @@ import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function SejarahDesa() {
|
||||
const state = useProxy(stateProfileDesa.sejarahDesa)
|
||||
const state = useProxy(stateProfileDesa.sejarahDesa);
|
||||
|
||||
useEffect(() => {
|
||||
state.findUnique.load("edit")
|
||||
}, [])
|
||||
state.findUnique.load('edit');
|
||||
}, []);
|
||||
|
||||
const { data, loading } = state.findUnique
|
||||
const { data, loading } = state.findUnique;
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Box py="lg">
|
||||
<Skeleton h={500} radius="lg" />
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box pb={70}>
|
||||
<Stack align='center' gap={0}>
|
||||
<Box pb={30}>
|
||||
<Center>
|
||||
<Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
|
||||
</Center>
|
||||
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Sejarah Desa</Text>
|
||||
</Box>
|
||||
<Paper p={"xl"} bg={colors['white-trans-1']}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
|
||||
</Paper>
|
||||
|
||||
<Box py="xl">
|
||||
<Stack align="center" gap="xl">
|
||||
<Stack align="center" gap="sm">
|
||||
<Center>
|
||||
<Image
|
||||
src="/darmasaba-icon.png"
|
||||
alt="Ikon Desa Darmasaba"
|
||||
w={{ base: 180, md: 260 }}
|
||||
radius="md"
|
||||
style={{ filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.15))' }}
|
||||
/>
|
||||
</Center>
|
||||
<Center>
|
||||
<Text
|
||||
c={colors['blue-button']}
|
||||
ta="center"
|
||||
fw={700}
|
||||
fz={{ base: '2rem', md: '2.8rem' }}
|
||||
style={{ letterSpacing: '-0.5px' }}
|
||||
>
|
||||
Sejarah Desa
|
||||
</Text>
|
||||
</Center>
|
||||
</Stack>
|
||||
</Box >
|
||||
</>
|
||||
<Paper
|
||||
p="xl"
|
||||
radius="lg"
|
||||
bg="white"
|
||||
shadow="sm"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #ffffff 0%, #f9fbfd 100%)',
|
||||
border: `1px solid ${colors['blue-button']}20`,
|
||||
}}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text
|
||||
fz={{ base: 'md', md: 'lg' }}
|
||||
lh={1.8}
|
||||
ta="justify"
|
||||
style={{ color: '#2a2a2a' }}
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,59 +1,102 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { Box, Center, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconUser } from '@tabler/icons-react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function SemuaPerbekel() {
|
||||
const state = useProxy(stateProfileDesa.mantanPerbekel)
|
||||
const state = useProxy(stateProfileDesa.mantanPerbekel);
|
||||
|
||||
useShallowEffect(() => {
|
||||
state.findMany.load()
|
||||
}, [])
|
||||
useShallowEffect(() => {
|
||||
state.findMany.load();
|
||||
}, []);
|
||||
|
||||
const {data, loading} = state.findMany
|
||||
const { data, loading } = state.findMany;
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Skeleton h={500} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Box py="xl">
|
||||
<Skeleton h={500} radius="xl" />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<Center py="xl">
|
||||
<Stack align="center" gap="sm">
|
||||
<IconUser size={48} stroke={1.5} />
|
||||
<Title fw="bold" order={2}>Belum ada data Perbekel</Title>
|
||||
<Text c="dimmed" fz="sm" ta="center">Data mantan Perbekel akan muncul di sini ketika sudah tersedia</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box pb={50}>
|
||||
<Stack align='center'>
|
||||
<Box pb={30}>
|
||||
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h1", md: "2.5rem" }}>Perbekel Dari Masa Ke Masa</Text>
|
||||
<Box pb={80}>
|
||||
<Stack align="center" gap="lg">
|
||||
<Box>
|
||||
<Text
|
||||
ta="center"
|
||||
fw={900}
|
||||
fz={{ base: "2rem", md: "2.5rem" }}
|
||||
variant="gradient"
|
||||
gradient={{ from: "blue", to: "cyan", deg: 45 }}
|
||||
>
|
||||
Perbekel Dari Masa ke Masa
|
||||
</Text>
|
||||
</Box>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 3,
|
||||
}}
|
||||
>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<Box key={k}>
|
||||
<Paper h={620} mb={50} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Box>
|
||||
<Center>
|
||||
<Image src={v.image?.link} alt='' />
|
||||
</Center>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack gap={"sm"} py={10}>
|
||||
<Text ta={"center"} fw={"bold"} fz={{ base: "h3", md: "h3" }}>{v.nama}</Text>
|
||||
<Text ta={"center"} fz={{ base: "h5", md: "h4" }}>{v.daerah}</Text>
|
||||
<Text ta={"center"} fz={{ base: "h5", md: "h4" }}>{v.periode}</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" w="100%">
|
||||
{data.map((v: any, k: number) => (
|
||||
<Paper
|
||||
key={k}
|
||||
radius="2xl"
|
||||
shadow="md"
|
||||
withBorder
|
||||
p="lg"
|
||||
bg="white"
|
||||
style={{
|
||||
transition: "all 250ms ease",
|
||||
}}
|
||||
className="hover:shadow-xl hover:scale-[1.02]"
|
||||
>
|
||||
<Stack gap="md" align="center">
|
||||
<Box w="100%" h={300} style={{ overflow: "hidden", borderRadius: "1rem" }}>
|
||||
<Image
|
||||
src={v.image?.link}
|
||||
alt={v.nama || "Foto Perbekel"}
|
||||
fit="cover"
|
||||
h="100%"
|
||||
w="100%"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Stack gap={4} align="center">
|
||||
<Tooltip label="Nama Perbekel" withArrow>
|
||||
<Text fw={700} fz="lg" ta="center">
|
||||
{v.nama}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="Wilayah menjabat" withArrow>
|
||||
<Text c="dimmed" fz="sm" ta="center">
|
||||
{v.daerah}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="Periode jabatan" withArrow>
|
||||
<Text c="blue" fw={600} fz="sm" ta="center">
|
||||
{v.periode}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
@@ -6,43 +6,90 @@ import { Box, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function VisimisiDesa() {
|
||||
const state = useProxy(stateProfileDesa.visiMisiDesa)
|
||||
function VisiMisiDesa() {
|
||||
const state = useProxy(stateProfileDesa.visiMisiDesa);
|
||||
|
||||
useEffect(() => {
|
||||
state.findUnique.load("edit")
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
state.findUnique.load('edit');
|
||||
}, []);
|
||||
|
||||
const { data, loading } = state.findUnique
|
||||
const { data, loading } = state.findUnique;
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Skeleton h={500} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<>
|
||||
<Box pb={30}>
|
||||
<Stack align='center' gap={0}>
|
||||
<Box pb={30}>
|
||||
<Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
|
||||
</Box>
|
||||
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Text c={colors['blue-button']} ta={"center"} fw={"lighter"} fz={"2.5rem"}>Visi Desa</Text>
|
||||
<Text fz={"1.5rem"} ta={"center"} fw={"bold"} dangerouslySetInnerHTML={{ __html: data.visi }} />
|
||||
</Paper>
|
||||
<Paper my={20} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Text c={colors['blue-button']} ta={"center"} fw={"lighter"} fz={"2.5rem"}>Misi Desa</Text>
|
||||
<Box>
|
||||
<Text fz={"1.5rem"} fw={"bold"} dangerouslySetInnerHTML={{ __html: data.misi }} />
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box >
|
||||
</>
|
||||
<Box py="xl">
|
||||
<Skeleton h={500} radius="lg" />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py="xl">
|
||||
<Stack align="center" gap="xl">
|
||||
<Image
|
||||
src="/darmasaba-icon.png"
|
||||
alt="Lambang Desa Darmasaba"
|
||||
w={{ base: 160, md: 240 }}
|
||||
radius="md"
|
||||
/>
|
||||
|
||||
<Paper
|
||||
p="xl"
|
||||
radius="lg"
|
||||
shadow="md"
|
||||
withBorder
|
||||
w="100%"
|
||||
style={{
|
||||
background: 'linear-gradient(145deg, #ffffff, #f5f7fa)',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
c={colors['blue-button']}
|
||||
ta="center"
|
||||
fw={700}
|
||||
fz={{ base: '2rem', md: '2.5rem' }}
|
||||
mb="md"
|
||||
>
|
||||
Visi Desa
|
||||
</Text>
|
||||
<Text
|
||||
fz={{ base: '1.125rem', md: '1.375rem' }}
|
||||
ta="center"
|
||||
fw={500}
|
||||
lh={1.6}
|
||||
dangerouslySetInnerHTML={{ __html: data.visi }}
|
||||
/>
|
||||
</Paper>
|
||||
|
||||
<Paper
|
||||
p="xl"
|
||||
radius="lg"
|
||||
shadow="md"
|
||||
withBorder
|
||||
w="100%"
|
||||
style={{
|
||||
background: 'linear-gradient(145deg, #ffffff, #f5f7fa)',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
c={colors['blue-button']}
|
||||
ta="center"
|
||||
fw={700}
|
||||
fz={{ base: '2rem', md: '2.5rem' }}
|
||||
mb="md"
|
||||
>
|
||||
Misi Desa
|
||||
</Text>
|
||||
<Text
|
||||
fz={{ base: '1.125rem', md: '1.375rem' }}
|
||||
fw={500}
|
||||
lh={1.6}
|
||||
dangerouslySetInnerHTML={{ __html: data.misi }}
|
||||
/>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default VisimisiDesa;
|
||||
export default VisiMisiDesa;
|
||||
|
||||
Reference in New Issue
Block a user