Nico 20 Nov 25

Dibagian layout admin sudah disesuaikan dengan rolenya : supadmin, admin desa, admin kesehatan, admin pendidikan Fix API User & Role Admin
2025-11-20 16:42:36 +08:00
parent 78b8aa74cd
commit 0dff8f3254
19 changed files with 835 additions and 209 deletions
--- a/src/app/admin/(dashboard)/user&role/role/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/user&role/role/[id]/page.tsx
@@ -1,7 +1,8 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'

 import colors from '@/con/colors';
-import { Box, Button, Loader, Group, MultiSelect, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Loader, 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';
@@ -9,6 +10,7 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import user from '../../../_state/user/user-state';

+
 function EditRole() {
  const stateRole = useProxy(user.roleState);
  const router = useRouter();
@@ -17,46 +19,37 @@ function EditRole() {
  // Controlled local state
  const [formData, setFormData] = useState({
    name: '',
-    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 {
-      const data = await stateRole.update.load(id);
-      if (data) {
-        setFormData({
-          name: data.name || '',
-          permissions: data.permissions || [],
-        });
-        setOriginalData({
-          name: data.name || '',
-          permissions: data.permissions || [],
-        });
-      }
-    } catch (error) {
-      console.error('Error loading role:', error);
-      toast.error(error instanceof Error ? error.message : 'Gagal mengambil data role');
+    const data = await stateRole.update.load(id);
+
+    if (data) {
+      setFormData({
+        name: data.name ?? '',
+      });
+
+      setOriginalData({
+        name: data.name ?? '',
+      });
    }
-  }, [stateRole.update]);
+  }, []);

  useEffect(() => {
-    stateRole.findMany.load(); // Load permissions/options
-    const id = params?.id as string;
-    if (id) loadRole(id);
-  }, [params?.id, loadRole, stateRole.findMany]);
+    stateRole.findMany.load();   // load permission
+    if (params?.id) loadRole(params.id as string);
+  }, [params?.id]);

  const handleResetForm = () => {
    setFormData({
      name: originalData.name,
-      permissions: originalData.permissions,
    });
    toast.info("Form dikembalikan ke data awal");
  };
@@ -66,10 +59,6 @@ function EditRole() {
      toast.error('Nama role tidak boleh kosong');
      return;
    }
-    if (!formData.permissions.length) {
-      toast.error('Pilih minimal satu permission');
-      return;
-    }

    try {
      setIsSubmitting(true);
@@ -77,7 +66,6 @@ function EditRole() {
      stateRole.update.form = {
        ...stateRole.update.form,
        name: formData.name,
-        permissions: formData.permissions,
      };
      await stateRole.update.update();
      toast.success('Role berhasil diperbarui!');
@@ -116,24 +104,7 @@ function EditRole() {
            label={<Text fw="bold" fz="sm">Nama Role</Text>}
            placeholder="Masukkan nama role"
          />
-          <MultiSelect
-            value={formData.permissions}
-            onChange={(val) => setFormData({ ...formData, permissions: val })}
-            label={<Text fw="bold" fz="sm">Permission</Text>}
-            placeholder="Pilih permission"
-            data={
-              stateRole.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.name,
-              })) || []
-            }
-            clearable
-            searchable
-            required
-            error={!formData.permissions.length ? 'Pilih minimal satu permission' : undefined}
-          />
-
-<Group justify="right">
+          <Group justify="right">
            {/* Tombol Batal */}
            <Button
              variant="outline"
--- a/src/app/admin/(dashboard)/user&role/role/create/page.tsx
+++ b/src/app/admin/(dashboard)/user&role/role/create/page.tsx
@@ -5,9 +5,8 @@ import {
  Box,
  Button,
  Group,
-  MultiSelect,
-  Paper,
  Loader,
+  Paper,
  Stack,
  TextInput,
  Title
@@ -15,9 +14,9 @@ import {
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import user from '../../../_state/user/user-state';
-import { toast } from 'react-toastify';


 export default function CreateRole() {
@@ -31,8 +30,7 @@ export default function CreateRole() {

  const resetForm = () => {
    stateRole.create.form = {
-      name: '',
-      permissions: [],
+      name: ''
    };
  };

@@ -80,28 +78,6 @@ export default function CreateRole() {
              required
            />
          </Box>
-          <Box>
-            <MultiSelect
-              label="Permission"
-              placeholder="Pilih permission"
-              data={
-                Array.from(
-                  new Set(
-                    stateRole.findMany.data
-                      ?.map((item) => item.permissions)
-                      .flat()
-                  )
-                )
-                  .filter((p): p is string => typeof p === 'string')
-                  .map((p) => ({ label: p, value: p }))
-              }
-              value={stateRole.create.form.permissions}
-              onChange={(value) => (stateRole.create.form.permissions = value)}
-              required
-            />
-
-
-          </Box>

          <Group justify="right">
            <Button
--- a/src/app/admin/(dashboard)/user&role/user/page.tsx
+++ b/src/app/admin/(dashboard)/user&role/user/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import { Box, Button, Center, Group, Pagination, Paper, Select, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCheck, IconSearch, IconX } from '@tabler/icons-react';
 import { useState } from 'react';
@@ -28,6 +28,7 @@ function User() {

 function ListUser({ search }: { search: string }) {
  const stateUser = useProxy(user.userState)
+  const stateRole = useProxy(user.roleState)
  const [modalHapus, setModalHapus] = useState(false)
  const [selectedId, setSelectedId] = useState<string | null>(null)

@@ -51,6 +52,7 @@ function ListUser({ search }: { search: string }) {


  useShallowEffect(() => {
+    stateRole.findMany.load()
    load(page, 10, search)
  }, [page, search])

@@ -92,11 +94,31 @@ function ListUser({ search }: { search: string }) {
                        {item.nomor}
                      </Text>
                    </TableTd>
-                    <TableTd style={{ width: '20%', }}>
-                      <Text truncate fz="sm" c="dimmed">
-                        {item.role.name}
-                      </Text>
+                    <TableTd style={{ width: '20%' }}>
+                      <Select
+                        placeholder="Pilih role"
+                        data={stateRole.findMany.data.map((r) => ({
+                          label: r.name,
+                          value: r.id,
+                        }))}
+                        value={item.roleId} // ⬅ role milik user ini
+                        onChange={async (val) => {
+                          if (!val) return;
+
+                          await stateUser.update.submit({
+                            id: item.id,
+                            roleId: val, // ⬅ kirim roleId
+                          });
+
+                          // reload data supaya UI up-to-date
+                          stateUser.findMany.load(page, 10, search);
+                        }}
+                        searchable
+                        clearable={false} // role harus ada
+                        nothingFoundMessage="Role tidak ditemukan"
+                      />
                    </TableTd>
+
                    <TableTd style={{ width: '15%' }}>
                      <Tooltip
                        label={item.isActive ? "Nonaktifkan user" : "Aktifkan user"}
@@ -106,8 +128,12 @@ function ListUser({ search }: { search: string }) {
                          variant="light"
                          color={item.isActive ? "green" : "red"}
                          onClick={async () => {
-                            await stateUser.updateActive.submit(item.id, !item.isActive)
-                            stateUser.findMany.load(page, 10, search)
+                            await stateUser.update.submit({
+                              id: item.id,
+                              isActive: !item.isActive, // toggle
+                            });
+
+                            stateUser.findMany.load(page, 10, search);
                          }}
                        >
                          {item.isActive ? <IconCheck size={20} /> : <IconX size={20} />}