API & UI Menu Lingkungan, Submenu Data Lingkungan Desa

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx

@@ -1,69 +1,68 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import React from 'react';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import SelectIconProgram from '../../../_com/selectIcon';
+import dataLingkunganDesaState from '../../../_state/lingkungan/data-lingkungan-desa';
+
 
 function CreateDataLingkunganDesa() {
-  const router = useRouter()
+  const stateCreate = useProxy(dataLingkunganDesaState)
+  const router = useRouter();
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      name: "",
+      deskripsi: "",
+      jumlah: "",
+      icon: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+    resetForm();
+    router.push("/admin/lingkungan/data-lingkungan-desa")
+  }
   return (
     <Box>
       <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
           <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
           <Title order={3}>Create Data Lingkungan Desa</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Data Lingkungan Desa</Text>}
             placeholder="masukkan nama data lingkungan desa"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Jumlah</Text>}
-            placeholder="masukkan jumlah"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            onChange={(val) => stateCreate.create.form.name = val.target.value}
           />
           <Box>
-            <Text fz="sm" fw="bold">Gambar</Text>
-            <IconImageInPicture size={25} />
+            <Text fz={"sm"} fw={"bold"}>Ikon Data Lingkungan Desa</Text>
+            <SelectIconProgram onChange={(value) => stateCreate.create.form.icon = value} />
           </Box>
-          {/* <FileInput
-                        label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-                        value={file}
-                        onChange={async (e) => {
-                            if (!e) return;
-                            setFile(e);
-                            const base64 = await e.arrayBuffer().then((buf) =>
-                                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-                            );
-                            setPreviewImage(base64);
-                        }}
-                    /> */}
-
-          {/* {previewImage ? (
-                        <Image alt="" src={previewImage} w={200} h={200} />
-                    ) : (
-                        <Center w={200} h={200} bg="gray">
-                            <IconImageInPicture />
-                        </Center>
-                    )} */}
+          <TextInput
+            type='number'
+            onChange={(e) => stateCreate.create.form.jumlah = e.currentTarget.value}
+            label={<Text fw={"bold"} fz={"sm"}>Jmlah data lingkungan desa</Text>}
+            placeholder='Masukkan jumlah data lingkungan desa'
+          />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Data Lingkungan Desa</Text>
-            <KeamananEditor
-              showSubmit={false}
+            <Text fw={"bold"} fz={"sm"}>Deskripsi data lingkungan desa</Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
             />
           </Box>
-          <Button bg={colors['blue-button']} >
-            Simpan Data
-          </Button>
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>