UI & API Menu PPID, Submenu Struktur PPID

src/app/registrasi/page.tsx

@@ -1,10 +1,20 @@
+'use client'
 import colors from '@/con/colors';
 import { Box, Button, Center, Checkbox, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import Link from 'next/link';
 import BackButton from '../darmasaba/(pages)/desa/layanan/_com/BackButto';
+import { useRouter } from 'next/navigation';
+import { useSnapshot } from 'valtio';
+import userState from '../admin/(dashboard)/_state/user/user-state';
+
 
 
 function Page() {
+  const router = useRouter()
+  const registrerState = useSnapshot(userState.userState)
+  const handleSubmit = async () => {
+    router.push("/login")
+    await registrerState.register.submit()
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -33,27 +43,37 @@ function Page() {
               <Box>
                 <TextInput placeholder='Nama Lengkap'
                   label='Nama Lengkap'
+                  value={registrerState.register.form.nama}
+                  onChange={(e) => {
+                    userState.userState.register.form.nama = e.target.value
+                  }}
+                  required
+
                 />
                 <TextInput py={10} placeholder='Email'
                   label='Email'
-                />
-                <TextInput placeholder='day / month / year'
-                  label='Tanggal Lahir'
-                />
-                <TextInput py={10} placeholder='08xx-xxxx-xxxx'
-                  label='Nomor Telepon'
+                  value={registrerState.register.form.email}
+                  onChange={(e) => {
+                    userState.userState.register.form.email = e.target.value
+                  }}
+                  required
                 />
                 <TextInput pb={10} placeholder='Password'
+                type='password'
                   label='Password'
+                  value={registrerState.register.form.password}
+                  onChange={(e) => {
+                    userState.userState.register.form.password = e.target.value
+                  }}
+                  required
                 />
                 <Box pb={10}>
                   <Checkbox
-                    
                     label="Saya menyetujui syarat dan ketentuan yang berlaku"
                   />
                 </Box>
                 <Box pb={20} >
-                  <Button component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital'} fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
+                  <Button onClick={handleSubmit} fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
                 </Box>
               </Box>
             </Stack>