Files
desa-darmasaba/src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx

82 lines
2.4 KiB
TypeScript

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
function CreateDataPendidikan() {
const stateDPM = useProxy(dataPendidikan);
const [chartData, setChartData] = useState<any[]>([]);
const router = useRouter()
const resetForm = () => {
stateDPM.create.form = {
name: "",
jumlah: "",
}
}
const handleSubmit = async () => {
const id = await stateDPM.create.create();
if (id) {
const idStr = String(id);
await stateDPM.findUnique.load(idStr);
if (stateDPM.findUnique.data) {
setChartData([stateDPM.findUnique.data]);
}
}
resetForm();
router.push("/admin/pendidikan/data-pendidikan");
}
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack size={20} />
</Button>
</Box>
<Box>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Title order={4}>Tambah Data Pendidikan</Title>
<Stack gap={"xs"}>
<TextInput
label="Nama"
type="text"
value={stateDPM.create.form.name}
placeholder="Masukkan nama"
onChange={(val) => {
stateDPM.create.form.name = val.currentTarget.value;
}}
/>
<TextInput
label="Jumlah"
type="number"
value={stateDPM.create.form.jumlah}
placeholder="Masukkan jumlah"
onChange={(val) => {
stateDPM.create.form.jumlah = val.currentTarget.value;
}}
/>
<Group>
<Button
bg={colors['blue-button']}
mt={10}
onClick={handleSubmit}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Box>
);
}
export default CreateDataPendidikan;