Fix UI Admin menu desa

src/app/admin/(dashboard)/desa/penghargaan/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,74 +22,88 @@ import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import penghargaanState from '../../../_state/desa/penghargaan';
 
-
 function CreatePenghargaan() {
-  const statePenghargaan = useProxy(penghargaanState)
+  const statePenghargaan = useProxy(penghargaanState);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const router = useRouter()
+  const router = useRouter();
 
   const resetForm = () => {
     statePenghargaan.create.form = {
-      name: "",
-      juara: "",
-      deskripsi: "",
-      imageId: "",
-    }
-    setPreviewImage(null)
-    setFile(null)
-  }
+      name: '',
+      juara: '',
+      deskripsi: '',
+      imageId: '',
+    };
+    setPreviewImage(null);
+    setFile(null);
+  };
 
   const handleSubmit = async () => {
     if (!file) {
-      return toast.error("Silahkan pilih file gambar terlebih dahulu")
+      return toast.warn('Silakan pilih file gambar terlebih dahulu');
     }
 
     const res = await ApiFetch.api.fileStorage.create.post({
-      file: file,
-      name: file.name
-    })
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
 
-    const uploaded = res.data?.data
     if (!uploaded?.id) {
-      return toast.error("Gagal upload gambar")
+      return toast.error('Gagal mengunggah gambar, silakan coba lagi');
     }
 
-    statePenghargaan.create.form.imageId = uploaded.id
+    statePenghargaan.create.form.imageId = uploaded.id;
 
-    await statePenghargaan.create.create()
-    resetForm()
-    router.push("/admin/desa/penghargaan")
+    await statePenghargaan.create.create();
+    resetForm();
+    router.push('/admin/desa/penghargaan');
+  };
 
-  }
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Penghargaan</Title>
+    <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 Penghargaan
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             value={statePenghargaan.create.form.name}
-            onChange={(val) => {
-              statePenghargaan.create.form.name = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Penghargaan</Text>}
-            placeholder="masukkan nama penghargaan"
+            onChange={(val) => (statePenghargaan.create.form.name = val.target.value)}
+            label={<Text fz="sm" fw="bold">Nama Penghargaan</Text>}
+            placeholder="Masukkan nama penghargaan"
+            required
           />
+
           <TextInput
             value={statePenghargaan.create.form.juara}
-            onChange={(val) => {
-              statePenghargaan.create.form.juara = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Juara</Text>}
-            placeholder="masukkan juara"
+            onChange={(val) => (statePenghargaan.create.form.juara = val.target.value)}
+            label={<Text fz="sm" fw="bold">Juara</Text>}
+            placeholder="Masukkan juara"
+            required
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fz="sm" fw="bold" mb={6}>Deskripsi</Text>
             <CreateEditor
               value={statePenghargaan.create.form.deskripsi}
               onChange={(htmlContent) => {
@@ -86,63 +111,67 @@ function CreatePenghargaan() {
               }}
             />
           </Box>
+
+          {/* Dropzone Upload */}
           <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>
+            <Text fz="sm" fw="bold" mb={6}>Gambar</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>
 
-                  <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>
-              )}
-
-            </Box>
+            {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>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+
+          {/* Button Submit */}
+          <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>