Fix QC Kak Inno Admin, Fix QC Keano UI User, Fix QC Pak jun tabel apbdes

src/app/admin/(dashboard)/user&role/role/[id]/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import colors from '@/con/colors';
-import { Box, Button, Group, MultiSelect, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Loader, Group, MultiSelect, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
@@ -20,6 +20,13 @@ function EditRole() {
     permissions: [] as string[],
   });
 
+  const [originalData, setOriginalData] = useState({
+    name: '',
+    permissions: [] as string[],
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   // Load role data
   const loadRole = useCallback(async (id: string) => {
     try {
@@ -29,6 +36,10 @@ function EditRole() {
           name: data.name || '',
           permissions: data.permissions || [],
         });
+        setOriginalData({
+          name: data.name || '',
+          permissions: data.permissions || [],
+        });
       }
     } catch (error) {
       console.error('Error loading role:', error);
@@ -42,6 +53,13 @@ function EditRole() {
     if (id) loadRole(id);
   }, [params?.id, loadRole, stateRole.findMany]);
 
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      permissions: originalData.permissions,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
   // Submit handler
   const handleSubmit = async () => {
     if (!formData.name.trim()) {
@@ -54,6 +72,7 @@ function EditRole() {
     }
 
     try {
+      setIsSubmitting(true);
       // Update global state only on submit
       stateRole.update.form = {
         ...stateRole.update.form,
@@ -66,6 +85,8 @@ function EditRole() {
     } catch (error) {
       console.error('Error updating role:', error);
       toast.error('Terjadi kesalahan saat memperbarui role');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -112,18 +133,30 @@ function EditRole() {
             error={!formData.permissions.length ? 'Pilih minimal satu permission' : undefined}
           />
 
-          <Group justify="right">
+<Group justify="right">
+            {/* Tombol Batal */}
             <Button
+              variant="outline"
+              color="gray"
               radius="md"
               size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
+            <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)',
               }}
             >
-              Submit
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>

src/app/admin/(dashboard)/user&role/role/create/page.tsx

@@ -7,15 +7,17 @@ import {
   Group,
   MultiSelect,
   Paper,
+  Loader,
   Stack,
   TextInput,
   Title
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import user from '../../../_state/user/user-state';
+import { toast } from 'react-toastify';
 
 
 export default function CreateRole() {
@@ -25,6 +27,8 @@ export default function CreateRole() {
     stateRole.findMany.load();
   }, []);
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   const resetForm = () => {
     stateRole.create.form = {
       name: '',
@@ -33,10 +37,18 @@ export default function CreateRole() {
   };
 
   const handleSubmit = async () => {
-    await stateRole.create.create();
+    try {
+      setIsSubmitting(true);
+      await stateRole.create.create();
 
-    resetForm();
-    router.push('/admin/user&role/role');
+      resetForm();
+      router.push('/admin/user&role/role');
+    } catch (error) {
+      console.error('Error creating role:', error);
+      toast.error('Terjadi kesalahan saat membuat role');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -63,7 +75,7 @@ export default function CreateRole() {
             <TextInput
               label="Nama Role"
               placeholder="Masukkan nama role"
-              defaultValue={stateRole.create.form.name || ''}
+              value={stateRole.create.form.name || ''}
               onChange={(e) => (stateRole.create.form.name = e.target.value)}
               required
             />
@@ -92,6 +104,17 @@ export default function CreateRole() {
           </Box>
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -102,7 +125,7 @@ export default function CreateRole() {
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>