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

Fix UI User Menu Ekonomi & Fix UI Submenu Profile, Desa Anti Korupsi

Browse Source
This commit is contained in:
nico
2025-08-28 11:44:03 +08:00
parent f9530c32eb
commit a8fd715822
27 changed files with 2404 additions and 1885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

385
src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx
View File

@@ -1,46 +1,25 @@
'use client'
import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
import colors from '@/con/colors';
import { Box, Button, Center, Group, Image, Modal, Paper, Select, SimpleGrid, Stack, Stepper, StepperStep, Text, TextInput, Title } from '@mantine/core';
import { useState } from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
import { useDisclosure } from '@mantine/hooks';
import { IconArrowRight, IconCoin, IconInfoCircle, IconSchool, IconUsers } from '@tabler/icons-react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
import BackButton from '../../desa/layanan/_com/BackButto';
const dataBeasiswa = [
{
id: 1,
nama: 'Penerima Beasiswa',
jumlah: '250+'
},
{
id: 2,
nama: 'Peluang Kelulusan',
jumlah: '90%'
},
{
id: 3,
nama: 'Dana Tersalurkan',
jumlah: '1.5M'
},
]
{ id: 1, nama: 'Penerima Beasiswa', jumlah: '250+', icon: IconUsers },
{ id: 2, nama: 'Peluang Kelulusan', jumlah: '90%', icon: IconSchool },
{ id: 3, nama: 'Dana Tersalurkan', jumlah: '1.5M', icon: IconCoin },
];
const dataProgram = [
{
id: 1,
judul: "Pelatihan SoftSkill",
deskripsi: "Program pengembangan diri untuk mempersiapkan karir masa depan",
},
{
id: 2,
judul: "Peningkatan Akses Pendidikan ",
deskripsi: "Program yang menjangkau masyarakat kurang mampu secara finansial, mengurangi angka putus sekolah",
},
{
id: 3,
judul: "Pendampingan Intensif",
deskripsi: "Program dengan mentor berpengalaman yang membimbing dalam perjalanan akademik",
}
]
{ id: 1, judul: "Pelatihan SoftSkill", deskripsi: "Pengembangan diri untuk mempersiapkan karir masa depan." },
{ id: 2, judul: "Peningkatan Akses Pendidikan", deskripsi: "Memberi kesempatan bagi masyarakat kurang mampu untuk tetap sekolah." },
{ id: 3, judul: "Pendampingan Intensif", deskripsi: "Bimbingan dari mentor berpengalaman untuk mendukung akademik." },
];
function Page() {
const beasiswaDesa = useProxy(beasiswaDesaState.beasiswaPendaftar)
const [opened, { open, close }] = useDisclosure(false);
@@ -60,267 +39,173 @@ function Page() {
statusPernikahan: "",
ukuranBaju: "",
};
}
};
const handleSubmit = async () => {
await beasiswaDesa.create.create();
resetForm();
close();
}
};
const [active, setActive] = useState(1);
const nextStep = () => setActive((current) => (current < 5 ? current + 1 : current));
const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Stack pos="relative" bg={colors.Bg} py="xl" gap={40}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
{/* Page 1 */}
<Box px={{ base: 'md', md: 100 }} pb={50}>
<SimpleGrid
cols={{
base: 1,
md: 2
}}
>
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
<Box>
<Title fz={55} fw={'bold'} c={colors['blue-button']}>
<Title fz={55} fw={900} c={colors['blue-button']}>
Wujudkan Mimpi Pendidikanmu di Desa Darmasaba
</Title>
<Text fz={'xl'} >
Program beasiswa komprehensif untuk mendukung pendidikan berkualitas bagi putra-putri Desa Darmasaba.
<Text fz="lg" mt="md" c="dimmed">
Program beasiswa untuk mendukung pendidikan berkualitas bagi generasi muda Desa Darmasaba.
</Text>
<SimpleGrid
mt={10}
cols={{
base: 1,
md: 2
}}
>
<Button bg={colors['blue-button']} fz={'lg'} onClick={open}>Daftar Sekarang</Button>
<Button bg={colors['blue-button-trans']} fz={'lg'}>Pelajari Lebih Lanjut</Button>
</SimpleGrid>
<Group mt="xl">
<Button size="lg" radius="xl" bg={colors['blue-button']} rightSection={<IconArrowRight size={20} />} onClick={open}>
Daftar Sekarang
</Button>
<Button size="lg" radius="xl" variant="light" color={colors['blue-button']} rightSection={<IconInfoCircle size={20} />}>
Pelajari Lebih Lanjut
</Button>
</Group>
</Box>
<Box>
<Image alt='' src={'/api/img/beasiswa-siswa.png'} />
<Image alt="Beasiswa Desa" src="/api/img/beasiswa-siswa.png" radius="lg" />
</Box>
</SimpleGrid>
<SimpleGrid mt={30}
cols={{
base: 1,
md: 3
}}
>
<SimpleGrid mt={50} cols={{ base: 1, md: 3 }} spacing="lg">
{dataBeasiswa.map((v, k) => {
const IconComp = v.icon;
return (
<Box key={k}>
<Paper p={'xl'} bg={colors['white-trans-1']}>
<Title ta={'center'} fz={55} fw={'bold'} c={colors['blue-button']}>
{v.jumlah}
</Title>
<Text ta={'center'}>
{v.nama}
</Text>
</Paper>
</Box>
)
<Paper key={k} p="xl" radius="xl" shadow="md" bg={colors['white-trans-1']} withBorder>
<Stack align="center" gap="sm">
<IconComp size={45} color={colors['blue-button']} />
<Title fz={42} fw={900} c={colors['blue-button']}>{v.jumlah}</Title>
<Text fz="sm" ta="center">{v.nama}</Text>
</Stack>
</Paper>
);
})}
</SimpleGrid>
</Box>
{/* ---- */}
<Box px={{ base: 'md', md: 100 }} pb={20}>
<Title pb={20} ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
<Title pb={20} ta="center" order={1} fw={900} c={colors['blue-button']}>
Keunggulan Program
</Title>
<Paper p={'xl'} bg={colors['white-trans-1']}>
<SimpleGrid
cols={{
base: 1,
md: 3
}}
>
{dataProgram.map((v, k) => {
return (
<Box key={k}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
{v.judul}
</Title>
<Text>
{v.deskripsi}
</Text>
{/* <Divider orientation="vertical" size="md" h="auto" /> */}
</Box>
)
})}
</SimpleGrid>
</Paper>
<Title py={20} ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
{dataProgram.map((v, k) => (
<Paper key={k} p="xl" radius="xl" shadow="sm" bg={colors['white-trans-1']}>
<Title order={3} fw={700} c={colors['blue-button']} mb="xs">{v.judul}</Title>
<Text fz="sm" c="dimmed">{v.deskripsi}</Text>
</Paper>
))}
</SimpleGrid>
<Title py={40} ta="center" order={1} fw={900} c={colors['blue-button']}>
Timeline Pendaftaran
</Title>
<Center>
<Stepper mt={20} active={active} onStepClick={setActive} orientation="vertical" allowNextStepsSelect={false}>
<StepperStep label="Pembukaan Pendaftaran 1 Maret 2025" description="" />
<StepperStep label="Seleksi Administrasi 15 Maret 2025" description="" />
<StepperStep label="Tes Potensi Akademik 1 April 2025" description="" />
<StepperStep label="Wawancara 15 April 2025" description="" />
<StepperStep label="Pengumuman 1 Mei 2025" description="" />
<StepperStep label="1 Maret 2025" description="Pembukaan Pendaftaran" />
<StepperStep label="15 Maret 2025" description="Seleksi Administrasi" />
<StepperStep label="1 April 2025" description="Tes Potensi Akademik" />
<StepperStep label="15 April 2025" description="Wawancara" />
<StepperStep label="1 Mei 2025" description="Pengumuman Hasil" />
</Stepper>
</Center>
<Group justify="center" mt="xl">
<Button variant="default" onClick={prevStep}>Back</Button>
<Button onClick={nextStep}>Next step</Button>
<Button variant="default" radius="xl" onClick={prevStep}>Kembali</Button>
<Button radius="xl" bg={colors['blue-button']} onClick={nextStep}>Lanjut</Button>
</Group>
</Box>
<Modal
opened={opened}
onClose={close}
radius={0}
radius="xl"
size="lg"
transitionProps={{ transition: 'fade', duration: 200 }}
title={
<Text fz="xl" fw={800} c={colors['blue-button']}>
Formulir Beasiswa
</Text>
}
>
<Paper p={"md"} withBorder>
<Stack gap={"xs"}>
<Title order={3}>Ajukan Beasiswa</Title>
<TextInput
label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
placeholder="masukkan nama"
onChange={(val) => {
beasiswaDesa.create.form.namaLengkap = val.target.value
}}
/>
<TextInput
type='number'
label={<Text fz={"sm"} fw={"bold"}>NIK</Text>}
placeholder="masukkan nik"
onChange={(val) => {
beasiswaDesa.create.form.nik = val.target.value
}}
/>
<TextInput
label={<Text fz={"sm"} fw={"bold"}>Tempat Lahir</Text>}
placeholder="masukkan tempat lahir"
onChange={(val) => {
beasiswaDesa.create.form.tempatLahir = val.target.value
}}
/>
<TextInput
type='date'
label={<Text fz={"sm"} fw={"bold"}>Tanggal Lahir</Text>}
placeholder="masukkan tanggal lahir"
onChange={(val) => {
beasiswaDesa.create.form.tanggalLahir = val.target.value
}}
/>
<Select
label={<Text fz={"sm"} fw={"bold"}>Jenis Kelamin</Text>}
placeholder="Pilih jenis kelamin"
data={[
{ value: "LAKI_LAKI", label: "Laki-laki" },
{ value: "PEREMPUAN", label: "Perempuan" },
]}
onChange={(val) => {
if (val) beasiswaDesa.create.form.jenisKelamin = val as "LAKI_LAKI" | "PEREMPUAN";
}}
/>
<TextInput
label={<Text fz={"sm"} fw={"bold"}>Kewarganegaraan</Text>}
placeholder="masukkan kewarganegaraan"
onChange={(val) => {
beasiswaDesa.create.form.kewarganegaraan = val.target.value
}}
/>
<Select
label={<Text fz={"sm"} fw={"bold"}>Agama</Text>}
placeholder="Pilih agama"
data={[
{ value: "ISLAM", label: "Islam" },
{ value: "KRISTEN_PROTESTAN", label: "Kristen Protestan" },
{ value: "KRISTEN_KATOLIK", label: "Kristen Katolik" },
{ value: "HINDU", label: "Hindu" },
{ value: "BUDDHA", label: "Buddha" },
{ value: "KONGHUCU", label: "Konghucu" },
{ value: "LAINNYA", label: "Lainnya" },
]}
onChange={(val) => {
if (val) beasiswaDesa.create.form.agama = val as
"ISLAM"
| "KRISTEN_PROTESTAN"
| "KRISTEN_KATOLIK"
| "HINDU"
| "BUDDHA"
| "KONGHUCU"
| "LAINNYA";
}}
/>
<TextInput
label={<Text fz={"sm"} fw={"bold"}>Alamat KTP</Text>}
placeholder="masukkan alamat ktp"
onChange={(val) => {
beasiswaDesa.create.form.alamatKTP = val.target.value
}}
/>
<TextInput
label={<Text fz={"sm"} fw={"bold"}>Alamat Domisili</Text>}
placeholder="masukkan alamat domisili"
onChange={(val) => {
beasiswaDesa.create.form.alamatDomisili = val.target.value
}}
/>
<TextInput
type='number'
label={<Text fz={"sm"} fw={"bold"}>No Hp</Text>}
placeholder="masukkan no hp"
onChange={(val) => {
beasiswaDesa.create.form.noHp = val.target.value
}}
/>
<TextInput
type='email'
label={<Text fz={"sm"} fw={"bold"}>Email</Text>}
placeholder="masukkan email"
onChange={(val) => {
beasiswaDesa.create.form.email = val.target.value
}}
/>
<Select
label={<Text fz={"sm"} fw={"bold"}>Status Pernikahan</Text>}
placeholder="Pilih status pernikahan"
data={[
{ value: "BELUM_MENIKAH", label: "Belum Menikah" },
{ value: "MENIKAH", label: "Menikah" },
{ value: "JANDA_DUDA", label: "Janda/Duda" },
]}
onChange={(val) => {
if (val) beasiswaDesa.create.form.statusPernikahan = val as
"BELUM_MENIKAH"
| "MENIKAH"
| "JANDA_DUDA";
}}
/>
<Select
label={<Text fz={"sm"} fw={"bold"}>Ukuran Baju</Text>}
placeholder="Pilih ukuran baju"
data={[
{ value: "S", label: "S" },
{ value: "M", label: "M" },
{ value: "L", label: "L" },
{ value: "XL", label: "XL" },
{ value: "XXL", label: "XXL" },
{ value: "LAINNYA", label: "Lainnya" },
]}
onChange={(val) => {
if (val) beasiswaDesa.create.form.ukuranBaju = val as
"S"
| "M"
| "L"
| "XL"
| "XXL"
| "LAINNYA";
}}
/>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
<Paper p="lg" radius="xl" withBorder shadow="sm">
<Stack gap="sm">
<TextInput
label="Nama Lengkap"
placeholder="Masukkan nama lengkap"
onChange={(val) => { beasiswaDesa.create.form.namaLengkap = val.target.value }} />
<TextInput
type="number"
label="NIK"
placeholder="Masukkan NIK"
onChange={(val) => { beasiswaDesa.create.form.nik = val.target.value }} />
<TextInput
label="Tempat Lahir"
placeholder="Masukkan tempat lahir"
onChange={(val) => { beasiswaDesa.create.form.tempatLahir = val.target.value }} />
<TextInput
type="date"
label="Tanggal Lahir"
placeholder="Pilih tanggal lahir"
onChange={(val) => { beasiswaDesa.create.form.tanggalLahir = val.target.value }} />
<Select
label="Jenis Kelamin"
placeholder="Pilih jenis kelamin"
data={[{ value: "LAKI_LAKI", label: "Laki-laki" }, { value: "PEREMPUAN", label: "Perempuan" }]}
onChange={(val) => { if (val) beasiswaDesa.create.form.jenisKelamin = val }} />
<TextInput
label="Kewarganegaraan"
placeholder="Masukkan kewarganegaraan"
onChange={(val) => { beasiswaDesa.create.form.kewarganegaraan = val.target.value }} />
<Select
label="Agama"
placeholder="Pilih agama"
data={[{ value: "ISLAM", label: "Islam" }, { value: "KRISTEN_PROTESTAN", label: "Kristen Protestan" }, { value: "KRISTEN_KATOLIK", label: "Kristen Katolik" }, { value: "HINDU", label: "Hindu" }, { value: "BUDDHA", label: "Buddha" }, { value: "KONGHUCU", label: "Konghucu" }, { value: "LAINNYA", label: "Lainnya" }]}
onChange={(val) => { if (val) beasiswaDesa.create.form.agama = val }} />
<TextInput
label="Alamat KTP"
placeholder="Masukkan alamat sesuai KTP"
onChange={(val) => { beasiswaDesa.create.form.alamatKTP = val.target.value }} />
<TextInput
label="Alamat Domisili"
placeholder="Masukkan alamat domisili"
onChange={(val) => { beasiswaDesa.create.form.alamatDomisili = val.target.value }} />
<TextInput
type="number"
label="Nomor HP"
placeholder="Masukkan nomor HP"
onChange={(val) => { beasiswaDesa.create.form.noHp = val.target.value }} />
<TextInput
type="email"
label="Email"
placeholder="Masukkan alamat email"
onChange={(val) => { beasiswaDesa.create.form.email = val.target.value }} />
<Select
label="Status Pernikahan"
placeholder="Pilih status pernikahan"
data={[{ value: "BELUM_MENIKAH", label: "Belum Menikah" }, { value: "MENIKAH", label: "Menikah" }, { value: "JANDA_DUDA", label: "Janda/Duda" }]}
onChange={(val) => { if (val) beasiswaDesa.create.form.statusPernikahan = val }} />
<Select
label="Ukuran Baju"
placeholder="Pilih ukuran baju"
data={[{ value: "S", label: "S" }, { value: "M", label: "M" }, { value: "L", label: "L" }, { value: "XL", label: "XL" }, { value: "XXL", label: "XXL" }, { value: "LAINNYA", label: "Lainnya" }]}
onChange={(val) => { if (val) beasiswaDesa.create.form.ukuranBaju = val }} />
<Group justify="flex-end" mt="md">
<Button variant="default" radius="xl" onClick={close}>Batal</Button>
<Button radius="xl" bg={colors['blue-button']} onClick={handleSubmit}>Kirim</Button>
</Group>
</Stack>
</Paper>
</Modal>

136
src/app/darmasaba/(pages)/pendidikan/bimbingan-belajar-desa/page.tsx
View File

@@ -1,67 +1,97 @@
'use client'
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
import colors from '@/con/colors';
import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } from '@mantine/core';
import React from 'react';
import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip, Divider, Badge } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';
import { IconMapPin, IconCalendarTime, IconBook2 } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
function Page() {
const stateTujuanProgram = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
const stateLokasiDanJadwal = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
const stateFasilitas = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
useShallowEffect(() => {
stateTujuanProgram.findById.load('edit');
stateLokasiDanJadwal.findById.load('edit');
stateFasilitas.findById.load('edit');
}, []);
if (!stateTujuanProgram.findById.data || !stateLokasiDanJadwal.findById.data || !stateFasilitas.findById.data)
return (
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} pb={50}>
<Skeleton h={60} radius="xl" />
<Skeleton h={200} mt="lg" radius="md" />
</Box>
</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 }} pb={50}>
<Box>
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
Bimbingan Belajar Desa
<Box px={{ base: 'md', md: 120 }} pb={80}>
<Box mb="lg">
<Title ta="center" order={1} fw="bold" c={colors['blue-button']} fz={{ base: 28, md: 38 }}>
Program Bimbingan Belajar Desa
</Title>
<Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
Bimbingan Belajar Desa merupakan program unggulan untuk membantu siswa-siswi di Desa Darmasaba dalam memahami pelajaran sekolah, meningkatkan prestasi akademik, serta membangun semangat belajar yang tinggi sejak dini.
<Divider size="sm" my="md" mx="auto" w="60%" color={colors['blue-button']} />
<Text ta="center" fz="lg" c="dimmed" px={{ base: 'sm', md: 120 }}>
Program unggulan untuk mendukung siswa Desa Darmasaba memahami pelajaran sekolah, meningkatkan prestasi akademik, dan menumbuhkan semangat belajar sejak dini.
</Text>
</Box>
<SimpleGrid
cols={{
base: 1,
md: 3
}}
>
<Box>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Tujuan Program
</Title>
<List>
<ListItem fz={'h4'}>Memberikan pendampingan belajar secara gratis bagi siswa SD hingga SMP</ListItem>
<ListItem fz={'h4'}>Membantu siswa dalam menghadapi ujian dan menyelesaikan tugas sekolah</ListItem>
<ListItem fz={'h4'}>Menumbuhkan kepercayaan diri dan kemandirian dalam belajar</ListItem>
<ListItem fz={'h4'}>Meningkatkan kesetaraan pendidikan untuk seluruh anak desa</ListItem>
</List>
</Paper>
</Box>
<Box>
<Paper h={{base: 0, md: 324}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Lokasi dan Jadwal
</Title>
<List>
<ListItem fz={'h4'}>Lokasi: Balai Banjar / Balai Desa Darmasaba / Perpustakaan Desa</ListItem>
<ListItem fz={'h4'}>Jadwal: Setiap hari Senin, Rabu, dan Jumat pukul 16.00–18.00 WITA</ListItem>
<ListItem fz={'h4'}>Peserta: Terbuka untuk semua siswa SD–SMP di wilayah desa</ListItem>
</List>
</Paper>
</Box>
<Box>
<Paper h={{base: 0, md: 324}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Fasilitas yang Disediakan
</Title>
<List>
<ListItem fz={'h4'}>Buku-buku pelajaran dan alat tulis</ListItem>
<ListItem fz={'h4'}>Ruang belajar nyaman dan kondusif</ListItem>
<ListItem fz={'h4'}>Modul latihan dan pendampingan tugas</ListItem>
<ListItem fz={'h4'}>Minuman ringan dan dukungan motivasi belajar</ListItem>
</List>
</Paper>
</Box>
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl">
<Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
<Stack gap="sm">
<Box>
<Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
Tujuan Program
</Badge>
<Tooltip label="Gambaran manfaat utama program" position="top-start" withArrow>
<Box>
<IconBook2 size={36} stroke={1.5} color={colors['blue-button']} />
</Box>
</Tooltip>
</Box>
<Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: stateTujuanProgram.findById.data?.deskripsi }} />
</Stack>
</Paper>
<Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
<Stack gap="sm">
<Box>
<Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
Lokasi & Jadwal
</Badge>
<Tooltip label="Tempat dan waktu pelaksanaan" position="top-start" withArrow>
<Box>
<IconMapPin size={36} stroke={1.5} color={colors['blue-button']} />
</Box>
</Tooltip>
</Box>
<Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: stateLokasiDanJadwal.findById.data?.deskripsi }} />
</Stack>
</Paper>
<Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
<Stack gap="sm">
<Box>
<Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
Fasilitas
</Badge>
<Tooltip label="Sarana yang disediakan untuk peserta" position="top-start" withArrow>
<Box>
<IconCalendarTime size={36} stroke={1.5} color={colors['blue-button']} />
</Box>
</Tooltip>
</Box>
<Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: stateFasilitas.findById.data?.deskripsi }} />
</Stack>
</Paper>
</SimpleGrid>
</Box>
</Stack>

151
src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx
View File

@@ -1,71 +1,102 @@
import colors from '@/con/colors';
import { Stack, Box, Title, Paper } from '@mantine/core';
import React from 'react';
'use client'
import dataPendidikan from '@/app/admin/(dashboard)/_state/pendidikan/data-pendidikan';
import { Box, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconSchool } from '@tabler/icons-react';
import { useEffect, useState } from 'react';
import { Bar, BarChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
import { BarChart } from '@mantine/charts';
import colors from '@/con/colors';
const data = [
{
kategori: 'Jumlah penduduk usia 15-64 th yang tidak bisa baca tulis',
jumlah: 30
},
{
kategori: 'Jumlah penduduk tidak tamat SD/sederajat',
jumlah: 25
},
{
kategori: 'Jumlah penduduk tidak tamat SLTP/Sederajat',
jumlah: 20
},
{
kategori: 'Jumlah penduduk tidak tamat SLTA/Sederajat',
jumlah: 10
},
{
kategori: 'Jumlah penduduk tamat Sarjana/S1',
jumlah: 15
},
{
kategori: 'Jumlah penduduk tamat Pascsarjana',
jumlah: 30
},
]
function Page() {
type DPMrafik = {
id: string;
name: string;
jumlah: number;
};
const stateDPM = useProxy(dataPendidikan);
const [chartData, setChartData] = useState<DPMrafik[]>([]);
const [mounted, setMounted] = useState(false);
useShallowEffect(() => {
setMounted(true);
stateDPM.findMany.load();
}, []);
useEffect(() => {
if (stateDPM.findMany.data) {
setChartData(
stateDPM.findMany.data.map((item) => ({
id: item.id,
name: item.name,
jumlah: Number(item.jumlah),
}))
);
}
}, [stateDPM.findMany.data]);
if (!stateDPM.findMany.data) {
return (
<Stack px="md" py="xl">
<Skeleton h={400} radius="lg" />
</Stack>
);
}
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Stack bg="var(--mantine-color-gray-0)" py="xl" gap="lg" pos="relative">
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} >
<Box pb={20}>
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
Data Pendidikan
<Box px={{ base: 'md', md: 100 }}>
<Stack gap="xs" align="center" pb="lg">
<IconSchool size={48} stroke={1.5} color={colors['blue-button']} />
<Title order={1} fw={700} ta="center" c={colors['blue-button']}>
Statistik Data Pendidikan
</Title>
</Box>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<BarChart
p={'100'}
h={600}
data={data}
dataKey="kategori"
series={[
{ name: 'jumlah', color: colors['blue-button'] },
]}
tickLine="y"
xAxisProps={{
angle: -45, // Rotate labels by -45 degrees
textAnchor: 'end', // Anchor text to the end for better alignment
height: 100, // Increase height for rotated labels
interval: 0, // Show all labels
style: {
fontSize: '12px', // Adjust font size if needed
overflow: 'visible',
whiteSpace: 'nowrap'
}
}}
/>
</Paper>
<Text c="dimmed" size="sm" ta="center">
Visualisasi jumlah pendidikan berdasarkan kategori yang tersedia
</Text>
</Stack>
{!mounted || chartData.length === 0 ? (
<Paper radius="lg" p="xl" withBorder shadow="sm" bg="var(--mantine-color-white)">
<Stack align="center" gap="sm" justify="center" h={350}>
<IconSchool size={40} stroke={1.5} color="var(--mantine-color-gray-5)" />
<Title order={4} fw={600}>
Belum Ada Data
</Title>
<Text c="dimmed" size="sm">
Data pendidikan belum tersedia. Silakan tambahkan data untuk melihat grafik.
</Text>
</Stack>
</Paper>
) : (
<Paper radius="lg" p="xl" withBorder shadow="sm" bg="var(--mantine-color-white)">
<Title order={4} fw={600} mb="md">
Grafik Pendidikan
</Title>
<ResponsiveContainer width="100%" height={350}>
<BarChart data={chartData}>
<XAxis dataKey="name" />
<YAxis />
<Tooltip
contentStyle={{
borderRadius: 12,
background: 'var(--mantine-color-gray-0)',
border: '1px solid var(--mantine-color-gray-3)',
}}
cursor={{ fill: 'var(--mantine-color-gray-1)' }}
/>
<Legend />
<Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah Pendidikan" radius={[8, 8, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</Paper>
)}
</Box>
</Stack>
);

159
src/app/darmasaba/(pages)/pendidikan/pendidikan-non-formal/page.tsx
View File

@@ -1,92 +1,107 @@
'use client'
import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
import colors from '@/con/colors';
import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } from '@mantine/core';
import React from 'react';
import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';
import { IconMapPin, IconTarget, IconBook2 } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
function Page() {
const stateTujuanPendidikanNonFormal = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal);
const stateTempatKegiatan = useProxy(pendidikanNonFormalState.stateTempatKegiatan);
const stateJenisProgram = useProxy(pendidikanNonFormalState.stateJenisProgram);
useShallowEffect(() => {
stateTujuanPendidikanNonFormal.findById.load('edit');
stateTempatKegiatan.findById.load('edit');
stateJenisProgram.findById.load('edit');
}, []);
if (!stateTujuanPendidikanNonFormal.findById.data || !stateTempatKegiatan.findById.data || !stateJenisProgram.findById.data)
return (
<Stack pos="relative" bg={colors.Bg} py="xl" gap="lg" mih="100vh" justify="flex-start">
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} pb={50}>
<Skeleton h={50} radius="xl" />
<Skeleton h={150} mt="lg" radius="md" />
<Skeleton h={150} mt="lg" radius="md" />
</Box>
</Stack>
);
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Stack pos="relative" bg={colors.Bg} py="xl" gap="lg" mih="100vh">
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} pb={50}>
<Box>
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
<Title ta="center" order={1} fw="bold" c={colors['blue-button']} mb="sm">
Pendidikan Non Formal
</Title>
<Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
Pendidikan Non Formal adalah bentuk pendidikan di luar sekolah yang diselenggarakan secara terstruktur dan bertujuan memberikan keterampilan, pengetahuan, serta pengembangan karakter masyarakat dari berbagai usia dan latar belakang.
<Text ta="center" fz="lg" lh={1.6} c="black" maw={800} mx="auto">
Bentuk pendidikan di luar sekolah yang terstruktur, bertujuan memberikan keterampilan, pengetahuan, dan pengembangan karakter masyarakat dari berbagai usia serta latar belakang.
</Text>
</Box>
<SimpleGrid
cols={{
base: 1,
md: 2
}}
cols={{ base: 1, md: 2 }}
spacing="lg"
mt={40}
>
<Box>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Tujuan Program
</Title>
<List>
<ListItem fz={'h4'}>Memberikan kesempatan belajar yang fleksibel bagi warga desa</ListItem>
<ListItem fz={'h4'}>Meningkatkan keterampilan hidup dan kemandirian ekonomi</ListItem>
<ListItem fz={'h4'}>Mendorong partisipasi masyarakat dalam pembangunan desa</ListItem>
<ListItem fz={'h4'}>Mengurangi angka putus sekolah dan meningkatkan kualitas SDM</ListItem>
</List>
</Paper>
</Box>
<Box>
<Paper h={{ base: 0, md: 210 }} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Tempat Kegiatan
</Title>
<List>
<ListItem fz={'h4'}>Balai Desa Darmasaba</ListItem>
<ListItem fz={'h4'}>TPK, Perpustakaan Desa, atau Posyandu</ListItem>
<ListItem fz={'h4'}>Bisa juga dilakukan secara mobile atau door to door</ListItem>
</List>
</Paper>
</Box>
</SimpleGrid>
<Box py={20}>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Jenis Program yang Diselenggarakan
</Title>
<Text fz={'h4'}>Program Pendidikan Non Formal yang diselenggarakan di Desa Darmasaba meliputi:</Text>
<Paper
p="xl"
radius="lg"
bg={colors['white-trans-1']}
shadow="md"
withBorder
>
<Stack>
<Box>
<Text fz={'h4'}> 1) Keaksaraan Fungsional</Text>
<List>
<ListItem fz={'h4'}>Untuk warga yang belum bisa membaca dan menulis</ListItem>
</List>
</Box>
<Box>
<Text fz={'h4'}> 2) Pendidikan Kesetaraan (Paket A, B, C)</Text>
<List>
<ListItem fz={'h4'}>Setara SD, SMP, dan SMA bagi yang tidak menyelesaikan pendidikan formal</ListItem>
</List>
</Box>
<Box>
<Text fz={'h4'}> 3) Pelatihan Keterampilan</Text>
<List>
<ListItem fz={'h4'}>Menjahit, memasak, sablon, pertanian, peternakan, hingga teknologi digital</ListItem>
</List>
</Box>
<Box>
<Text fz={'h4'}> 4) Kursus & Pelatihan Soft Skill</Text>
<List>
<ListItem fz={'h4'}>Public speaking, pengelolaan keuangan, kepemimpinan pemuda</ListItem>
</List>
</Box>
<Box>
<Text fz={'h4'}> 5) Pendidikan Keluarga & Parenting</Text>
<List>
<ListItem fz={'h4'}>Untuk membekali orang tua dalam mendampingi tumbuh kembang anak</ListItem>
</List>
</Box>
<Tooltip label="Fokus utama program" withArrow>
<Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
<IconTarget size={28} style={{ marginRight: 8 }} />
Tujuan Program
</Title>
</Tooltip>
<Text fz="md" lh={1.7} c="dark" dangerouslySetInnerHTML={{ __html: stateTujuanPendidikanNonFormal.findById.data?.deskripsi }} />
</Stack>
</Paper>
<Paper
p="xl"
radius="lg"
bg={colors['white-trans-1']}
shadow="md"
withBorder
>
<Stack>
<Tooltip label="Lokasi pelaksanaan kegiatan" withArrow>
<Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
<IconMapPin size={28} style={{ marginRight: 8 }} />
Tempat Kegiatan
</Title>
</Tooltip>
<Text fz="md" lh={1.7} c="dark" dangerouslySetInnerHTML={{ __html: stateTempatKegiatan.findById.data?.deskripsi }} />
</Stack>
</Paper>
</SimpleGrid>
<Box py={40}>
<Paper
p="xl"
radius="lg"
bg={colors['white-trans-1']}
shadow="md"
withBorder
>
<Stack>
<Tooltip label="Ragam jenis program yang tersedia" withArrow>
<Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
<IconBook2 size={28} style={{ marginRight: 8 }} />
Jenis Program yang Diselenggarakan
</Title>
</Tooltip>
<Text fz="md" lh={1.7} c="dark" dangerouslySetInnerHTML={{ __html: stateJenisProgram.findById.data?.deskripsi }} />
</Stack>
</Paper>
</Box>

115
src/app/darmasaba/(pages)/pendidikan/program-pendidikan-anak/page.tsx
View File

@@ -1,55 +1,96 @@
'use client'
import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
import colors from '@/con/colors';
import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } from '@mantine/core';
import React from 'react';
import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip, Divider, Group } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';
import { IconBook2, IconTargetArrow } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
function Page() {
const stateUnggulan = useProxy(stateProgramPendidikanAnak.programUnggulanState);
const stateTujuan = useProxy(stateProgramPendidikanAnak.stateTujuanProgram);
useShallowEffect(() => {
stateUnggulan.findById.load('edit');
stateTujuan.findById.load('edit');
}, []);
if (!stateUnggulan.findById.data || !stateTujuan.findById.data)
return (
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} pb={50}>
<Skeleton h={50} radius="xl" />
<Skeleton h={150} mt="lg" radius="md" />
</Box>
</Stack>
);
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} pb={50}>
<Box>
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
<Box mb="xl">
<Title ta="center" order={1} fw="bold" c={colors['blue-button']} mb="sm">
Program Pendidikan Anak
</Title>
<Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
Desa Darmasaba berkomitmen untuk menciptakan generasi muda yang cerdas, berkarakter, dan berdaya saing melalui berbagai program pendidikan yang inklusif dan berkelanjutan. Pendidikan anak menjadi pondasi utama dalam mewujudkan masa depan desa yang lebih baik.
<Text ta="center" fz="lg" c="black" mb="lg" maw={800} mx="auto">
Desa Darmasaba berkomitmen mencetak generasi muda yang cerdas, berkarakter, dan siap bersaing melalui program pendidikan yang inklusif dan berkelanjutan.
</Text>
<Divider size="sm" color={colors['blue-button']} mx="auto" maw={120} />
</Box>
<SimpleGrid
cols={{
base: 1,
md: 2
}}
cols={{ base: 1, md: 2 }}
spacing="xl"
>
<Box>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Tujuan Program
</Title>
<List>
<ListItem fz={'h4'}>Meningkatkan akses pendidikan yang merata dan berkualitas</ListItem>
<ListItem fz={'h4'}>Menumbuhkan semangat belajar sejak dini</ListItem>
<ListItem fz={'h4'}>Membentuk karakter anak yang berakhlak dan berwawasan lingkungan</ListItem>
<ListItem fz={'h4'}>Mendukung tumbuh kembang anak melalui pendekatan pendidikan yang holistik</ListItem>
</List>
</Paper>
</Box>
<Box>
<Paper h={{base: 0, md: 239}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Program Unggulan
</Title>
<List>
<ListItem fz={'h4'}>Bimbingan Belajar Gratis: Untuk siswa kurang mampu</ListItem>
<ListItem fz={'h4'}>Gerakan Literasi Desa: Meningkatkan minat baca sejak dini</ListItem>
<ListItem fz={'h4'}>Pelatihan Digital untuk Anak dan Remaja</ListItem>
<ListItem fz={'h4'}>Beasiswa Anak Berprestasi & Kurang Mampu</ListItem>
</List>
</Paper>
</Box>
<Paper
p="xl"
radius="xl"
withBorder
bg="white"
shadow="md"
style={{ transition: 'transform 0.2s ease', cursor: 'default' }}
>
<Stack gap="sm">
<Group gap="sm">
<IconTargetArrow size={28} color={colors['blue-button']} />
<Title order={2} fw="bold" c={colors['blue-button']}>
Tujuan Program
</Title>
</Group>
<Tooltip label="Detail tujuan program pendidikan anak" position="top-start" withArrow>
<Text fz="lg" lh={1.6} c="dark" dangerouslySetInnerHTML={{ __html: stateTujuan.findById.data?.deskripsi }} />
</Tooltip>
</Stack>
</Paper>
<Paper
p="xl"
radius="xl"
withBorder
bg="white"
shadow="md"
style={{ transition: 'transform 0.2s ease', cursor: 'default' }}
>
<Stack gap="sm">
<Group gap="sm">
<IconBook2 size={28} color={colors['blue-button']} />
<Title order={2} fw="bold" c={colors['blue-button']}>
Program Unggulan
</Title>
</Group>
<Tooltip label="Detail program unggulan yang sedang berjalan" position="top-start" withArrow>
<Text fz="lg" lh={1.6} c="dark" dangerouslySetInnerHTML={{ __html: stateUnggulan.findById.data?.deskripsi }} />
</Tooltip>
</Stack>
</Paper>
</SimpleGrid>
</Box>
</Stack>

2
src/app/darmasaba/_com/Footer.tsx
View File

@@ -5,7 +5,7 @@ import { IconAt, IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBr
function Footer() {
return (
<Stack bg="linear-gradient(180deg, #1C6EA4, #124170)" c="white">
<Box w="100%" p="xl" h={{ base: 1800, md: 1100 }}>
<Box w="100%" p="xl">
<Center>
<Paper w="100%" bg="transparent" shadow="md" radius="lg" p="xl">
<Box component="footer">

43
src/app/darmasaba/_com/Navbar.tsx
View File

@@ -26,8 +26,8 @@ export function Navbar() {
>
<NavbarMainMenu listNavbar={navbarListMenu} />
<Stack hiddenFrom="sm" bg={colors.grey[2]} px="md" py="sm">
<Group justify="space-between">
<Box hiddenFrom="sm" bg={colors.grey[2]} px="md" py="sm">
<Group justify="space-between" wrap="nowrap">
<ActionIcon
variant="transparent"
size="xl"
@@ -51,16 +51,23 @@ export function Navbar() {
</Tooltip>
</Group>
{mobileOpen && (
<motion.div
initial={{ x: 300 }}
<Paper
component={motion.div}
initial={{ x: '100%' }}
animate={{ x: 0 }}
exit={{ x: '100%' }}
transition={{ duration: 0.2 }}
style={{ height: "100vh" }}
pos="absolute"
left={0}
right={0}
top="100%"
m={0}
radius={0}
>
<NavbarMobile listNavbar={navbarListMenu} />
</motion.div>
</Paper>
)}
</Stack>
</Box>
</Paper>
{(item || isSearch) && <Box className="glass" />}
</Box>
@@ -70,28 +77,34 @@ export function Navbar() {
function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) {
const router = useRouter();
return (
<ScrollArea h="100vh" offsetScrollbars>
<Stack p="lg" gap="md" style={{ backgroundColor: "rgba(255, 255, 255, 0.25)" }}>
<ScrollArea.Autosize mah="calc(100vh - 80px)" offsetScrollbars>
<Stack p="md" gap="xs">
{listNavbar.map((item, k) => (
<Stack key={k} gap={4}>
<Box key={k}>
<Group
justify="space-between"
align="center"
p="xs"
onClick={() => {
router.push(item.href);
stateNav.mobileOpen = false;
}}
style={{ cursor: "pointer" }}
>
<Text c="dark.9" fw={600} fz="lg">
<Text c="dark.9" fw={600} fz="md">
{item.name}
</Text>
<IconSquareArrowRight size={20} />
<IconSquareArrowRight size={18} />
</Group>
{item.children && <NavbarMobile listNavbar={item.children} />}
</Stack>
{item.children && (
<Box pl="md">
<NavbarMobile listNavbar={item.children} />
</Box>
)}
</Box>
))}
</Stack>
</ScrollArea>
</ScrollArea.Autosize>
);
}