Fix UI Admin Menu Pendidikam, Add Menu User & Role

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx

@@ -1,7 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
@@ -10,7 +21,7 @@ import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
 
 function CreateLembaga() {
   const router = useRouter();
-  const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan)
+  const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan);
 
   useEffect(() => {
     stateLembaga.findMany.load();
@@ -19,56 +30,84 @@ function CreateLembaga() {
 
   const resetForm = () => {
     stateLembaga.create.form = {
-      nama: "",
-      jenjangId: "",
+      nama: '',
+      jenjangId: '',
     };
-  }
+  };
 
   const handleSubmit = async () => {
     await stateLembaga.create.create();
     resetForm();
-    router.push("/admin/pendidikan/info-sekolah/lembaga")
-  }
+    router.push('/admin/pendidikan/info-sekolah/lembaga');
+  };
 
   return (
-    <Box>
-      <Box>
-        <Box mb={10}>
-          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-            <IconArrowBack color={colors['blue-button']} size={25} />
+    <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>
-        </Box>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Lembaga Pendidikan
+        </Title>
+      </Group>
 
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Lembaga</Title>
-            <TextInput
-              value={stateLembaga.create.form.nama}
-              onChange={(val) => {
-                stateLembaga.create.form.nama = val.target.value;
-              }}
-              label={<Text fw={"bold"} fz={"sm"}>Nama Lembaga</Text>}
-              placeholder='Masukkan nama lembaga'
-            />
-            <Select
-              label="Jenjang Pendidikan"
-              placeholder="Pilih jenjang pendidikan"
-              searchable
-              data={infoSekolahPaud.jenjangPendidikan.findMany.data?.map(j => ({
+      {/* 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={stateLembaga.create.form.nama}
+            onChange={(val) => {
+              stateLembaga.create.form.nama = val.target.value;
+            }}
+            label={<Text fw="bold" fz="sm">Nama Lembaga</Text>}
+            placeholder="Masukkan nama lembaga"
+            required
+          />
+
+          <Select
+            label={<Text fw="bold" fz="sm">Jenjang Pendidikan</Text>}
+            placeholder="Pilih jenjang pendidikan"
+            searchable
+            data={
+              infoSekolahPaud.jenjangPendidikan.findMany.data?.map((j) => ({
                 value: j.id,
                 label: j.nama,
-              })) || []}
-              value={stateLembaga.create.form.jenjangId}
-              onChange={(val) => {
-                stateLembaga.create.form.jenjangId = val || '';
+              })) || []
+            }
+            value={stateLembaga.create.form.jenjangId}
+            onChange={(val) => {
+              stateLembaga.create.form.jenjangId = val || '';
+            }}
+            required
+          />
+
+          <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)',
               }}
-            />
-            <Group>
-              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }