Fix UI Admin Menu Pendidikam, Add Menu User & Role

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx

@@ -1,83 +1,156 @@
 'use client'
 import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
 
-const JenisProgramYangDiselenggarakanTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
-  ssr: false,
-});
+const JenisProgramYangDiselenggarakanTextEditor = dynamic(
+  () =>
+    import('../../_lib/pendidikanNonFormalTextEditor').then(
+      (mod) => mod.PendidikanNonFormalTextEditor
+    ),
+  { ssr: false }
+);
 
 function EditJenisProgramYangDiselenggarakan() {
-  const router = useRouter()
-  const editState = useProxy(pendidikanNonFormalState.stateJenisProgram)
+  const router = useRouter();
+  const editState = useProxy(pendidikanNonFormalState.stateJenisProgram);
+
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
-      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      editState.findById.initialize();
     }
   }, []);
 
+  // Sync state dengan data hasil fetch
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '')
-      setContent(editState.findById.data.deskripsi ?? '')
+      setJudul(editState.findById.data.judul ?? '');
+      setContent(editState.findById.data.deskripsi ?? '');
     }
-  }, [editState.findById.data])
+  }, [editState.findById.data]);
 
-  const submit = () => {
-    if (editState.findById.data) {
-      editState.findById.data.judul = judul;
-      editState.findById.data.deskripsi = content;
-      editState.update.save(editState.findById.data)
+  const handleSubmit = async () => {
+    if (!judul.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
     }
-    router.push('/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan')
+
+    setIsSubmitting(true);
+    try {
+      if (editState.findById.data) {
+        editState.findById.data.judul = judul;
+        editState.findById.data.deskripsi = content;
+        await editState.update.save(editState.findById.data);
+
+        toast.success('Berhasil menyimpan perubahan');
+        router.push(
+          '/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan'
+        );
+      }
+    } catch (err) {
+      console.error('Error saving:', err);
+      toast.error('Gagal menyimpan data');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => router.back();
+
+  if (editState.findById.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data jenis program...</Text>
+        </Center>
+      </Box>
+    );
   }
+
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Jenis Program Yang Diselenggarakan</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-                value={judul}
-                onChange={(e) => setJudul(e.target.value)}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        {/* Back Button + Title */}
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={22} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Jenis Program Yang Diselenggarakan
+          </Title>
+        </Group>
+
+        <Paper
+          w={{ base: '100%', md: '50%' }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="Masukkan judul program"
+              value={judul}
+              onChange={(e) => setJudul(e.currentTarget.value)}
+              error={!judul && 'Judul wajib diisi'}
+            />
+
+            <Box>
+              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <JenisProgramYangDiselenggarakanTextEditor
                 showSubmit={false}
                 onChange={setContent}
                 initialContent={content}
               />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={editState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || editState.update.loading}
+                disabled={!judul}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={isSubmitting || editState.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/page.tsx

@@ -1,6 +1,18 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  GridCol,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -8,47 +20,86 @@ import { useProxy } from 'valtio/utils';
 import pendidikanNonFormalState from '../../../_state/pendidikan/pendidikan-non-formal';
 
 function Page() {
-  const router = useRouter()
-  const listPreview = useProxy(pendidikanNonFormalState.stateJenisProgram)
+  const router = useRouter();
+  const listPreview = useProxy(pendidikanNonFormalState.stateJenisProgram);
+
   useShallowEffect(() => {
-    listPreview.findById.load('edit')
-  }, [])
+    listPreview.findById.load('edit');
+  }, []);
 
   if (!listPreview.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={400} w="90%" />
       </Stack>
-    )
+    );
   }
+
+  const data = listPreview.findById.data;
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Jenis Program Yang Diselenggarakan</Title>
+            <Title order={3} c={colors['blue-button']}>
+              Preview Jenis Program Yang Diselenggarakan
+            </Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit')}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Jenis Program" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit'
+                  )
+                }
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
+
+        {/* Konten Preview */}
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '1rem', md: '1.2rem' }}
+                lh={1.7}
+                ta="justify"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 export default Page;