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

UI & API Menu Pendidikan, Submenu Beasiswa tab beasiswa pendaftar

Browse Source
This commit is contained in:
nico
2025-07-29 12:29:25 +08:00
parent 50e8999205
commit 0109886e00
18 changed files with 1129 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,11 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Image, Paper, SimpleGrid, Stack, Stepper, StepperStep, Text, Title } from '@mantine/core';
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 { useProxy } from 'valtio/utils';
import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
const dataBeasiswa = [
{
@@ -39,6 +42,32 @@ const dataProgram = [
}
]
function Page() {
const beasiswaDesa = useProxy(beasiswaDesaState.beasiswaPendaftar)
const [opened, { open, close }] = useDisclosure(false);
const resetForm = () => {
beasiswaDesa.create.form = {
namaLengkap: "",
nik: "",
tempatLahir: "",
tanggalLahir: "",
jenisKelamin: "",
kewarganegaraan: "",
agama: "",
alamatKTP: "",
alamatDomisili: "",
noHp: "",
email: "",
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));
@@ -69,7 +98,7 @@ function Page() {
md: 2
}}
>
<Button bg={colors['blue-button']} fz={'lg'}>Daftar Sekarang</Button>
<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>
</Box>
@@ -144,6 +173,157 @@ function Page() {
<Button onClick={nextStep}>Next step</Button>
</Group>
</Box>
<Modal
opened={opened}
onClose={close}
radius={0}
transitionProps={{ transition: 'fade', duration: 200 }}
>
<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>
</Stack>
</Paper>
</Modal>
</Stack>
);
}