Fix UI Admin Menu Kesehatan, Login Admin, OTP

src/app/admin/(dashboard)/kesehatan/posyandu/create/page.tsx

@@ -1,7 +1,18 @@
-'use client'
+'use client';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+ Box,
+ Button,
+ Group,
+ Image,
+ Paper,
+ Stack,
+ Text,
+ TextInput,
+ Title,
+ Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -11,159 +22,193 @@ import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import posyandustate from '../../../_state/kesehatan/posyandu/posyandu';
 
+
 function CreatePosyandu() {
-  const statePosyandu = useProxy(posyandustate)
-  const router = useRouter();
-  const [file, setFile] = useState<File | null>(null);
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-
-  const resetForm = () => {
-    statePosyandu.create.form = {
-      name: "",
-      nomor: "",
-      deskripsi: "",
-      imageId: "",
-      jadwalPelayanan: "",
-    };
-
-    setFile(null);
-    setPreviewImage(null);
-  }
-
-  const handleSubmit = async () => {
-    if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
-    }
-
-    // Upload gambar dulu
-    const res = await ApiFetch.api.fileStorage.create.post({
-      file,
-      name: file.name,
-    });
-
-    const uploaded = res.data?.data;
-    if (!uploaded?.id) {
-      return toast.error("Gagal upload gambar");
-    }
-
-    statePosyandu.create.form.imageId = uploaded.id;
-
-    await statePosyandu.create.create();
-
-    resetForm();
-    router.push("/admin/kesehatan/posyandu")
-  }
+ const statePosyandu = useProxy(posyandustate);
+ const router = useRouter();
+ const [file, setFile] = useState<File | null>(null);
+ const [previewImage, setPreviewImage] = useState<string | null>(null);
 
 
+ const resetForm = () => {
+   statePosyandu.create.form = {
+     name: '',
+     nomor: '',
+     deskripsi: '',
+     imageId: '',
+     jadwalPelayanan: '',
+   };
+   setFile(null);
+   setPreviewImage(null);
+ };
 
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Posyandu</Title>
-          <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+ const handleSubmit = async () => {
+   if (!file) {
+     return toast.warn('Silakan pilih file gambar terlebih dahulu');
+   }
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
 
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
+   // Upload gambar dulu
+   const res = await ApiFetch.api.fileStorage.create.post({
+     file,
+     name: file.name,
+   });
 
-            </Box>
-          </Box>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Posyandu</Text>}
-            placeholder='Masukkan nama posyandu'
-            value={statePosyandu.create.form.name}
-            onChange={(e) => {
-              statePosyandu.create.form.name = e.target.value;
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nomor Posyandu</Text>}
-            placeholder='Masukkan nomor posyandu'
-            value={statePosyandu.create.form.nomor}
-            onChange={(e) => {
-              statePosyandu.create.form.nomor = e.target.value;
-            }}
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Posyandu</Text>
-            <CreateEditor
-              value={statePosyandu.create.form.deskripsi}
-              onChange={(htmlContent) => {
-                statePosyandu.create.form.deskripsi = htmlContent;
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Jadwal Pelayanan</Text>
-            <CreateEditor
-              value={statePosyandu.create.form.jadwalPelayanan}
-              onChange={(htmlContent) => {
-                statePosyandu.create.form.jadwalPelayanan = htmlContent;
-              }}
-            />
-          </Box>
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
+
+   const uploaded = res.data?.data;
+   if (!uploaded?.id) {
+     return toast.error('Gagal upload gambar');
+   }
+
+
+   statePosyandu.create.form.imageId = uploaded.id;
+
+
+   await statePosyandu.create.create();
+
+
+   resetForm();
+   router.push('/admin/kesehatan/posyandu');
+ };
+
+
+ return (
+   <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     {/* Header */}
+     <Group mb="md">
+       <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+           <IconArrowBack color={colors['blue-button']} size={24} />
+         </Button>
+       </Tooltip>
+       <Title order={4} ml="sm" c="dark">
+         Tambah Posyandu
+       </Title>
+     </Group>
+
+
+     <Paper
+       w={{ base: '100%', md: '50%' }}
+       bg={colors['white-1']}
+       p="lg"
+       radius="md"
+       shadow="sm"
+       style={{ border: '1px solid #e0e0e0' }}
+     >
+       <Stack gap="md">
+         {/* Upload Gambar */}
+         <Box>
+           <Text fw="bold" fz="sm" mb={6}>
+             Gambar Posyandu
+           </Text>
+           <Dropzone
+             onDrop={(files) => {
+               const selectedFile = files[0];
+               if (selectedFile) {
+                 setFile(selectedFile);
+                 setPreviewImage(URL.createObjectURL(selectedFile));
+               }
+             }}
+             onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+             maxSize={5 * 1024 ** 2}
+             accept={{ 'image/*': [] }}
+             radius="md"
+             p="xl"
+           >
+             <Group justify="center" gap="xl" mih={180}>
+               <Dropzone.Accept>
+                 <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+               </Dropzone.Accept>
+               <Dropzone.Reject>
+                 <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+               </Dropzone.Reject>
+               <Dropzone.Idle>
+                 <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+               </Dropzone.Idle>
+             </Group>
+             <Text ta="center" mt="sm" size="sm" color="dimmed">
+               Seret gambar atau klik untuk memilih file (maks 5MB)
+             </Text>
+           </Dropzone>
+
+
+           {previewImage && (
+             <Box mt="sm" style={{ textAlign: 'center' }}>
+               <Image
+                 src={previewImage}
+                 alt="Preview Gambar"
+                 radius="md"
+                 style={{
+                   maxHeight: 200,
+                   objectFit: 'contain',
+                   border: '1px solid #ddd',
+                 }}
+               />
+             </Box>
+           )}
+         </Box>
+
+
+         {/* Input Form */}
+         <TextInput
+           label="Nama Posyandu"
+           placeholder="Masukkan nama posyandu"
+           value={statePosyandu.create.form.name || ''}
+           onChange={(e) => (statePosyandu.create.form.name = e.target.value)}
+           required
+         />
+         <TextInput
+           label="Telepon Posyandu"
+           placeholder="Masukkan telepon posyandu"
+           value={statePosyandu.create.form.nomor || ''}
+           onChange={(e) => (statePosyandu.create.form.nomor = e.target.value)}
+           required
+         />
+         <Box>
+           <Text fw="bold" fz="sm" mb={6}>
+             Deskripsi Posyandu
+           </Text>
+           <CreateEditor
+             value={statePosyandu.create.form.deskripsi}
+             onChange={(htmlContent) => {
+               statePosyandu.create.form.deskripsi = htmlContent;
+             }}
+           />
+         </Box>
+         <Box>
+           <Text fw="bold" fz="sm" mb={6}>
+             Jadwal Pelayanan
+           </Text>
+           <CreateEditor
+             value={statePosyandu.create.form.jadwalPelayanan}
+             onChange={(htmlContent) => {
+               statePosyandu.create.form.jadwalPelayanan = htmlContent;
+             }}
+           />
+         </Box>
+
+
+         {/* Button */}
+         <Group justify="right">
+           <Button
+             onClick={handleSubmit}
+             radius="md"
+             size="md"
+             style={{
+               background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+               color: '#fff',
+               boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+             }}
+           >
+             Simpan
+           </Button>
+         </Group>
+       </Stack>
+     </Paper>
+   </Box>
+ );
 }
 
-export default CreatePosyandu;
+
+export default CreatePosyandu;