Fix Middleware

Fix Layout sesuai role, dan superadmin bisa menambahkan menu ke user jika diperlukan
Penambahan menu di user & role : menu access

src/app/admin/(dashboard)/auth/validasi-admin/page.tsx

@@ -4,7 +4,7 @@
 
 import { apiFetchOtpData, apiFetchVerifyOtp } from '@/app/api/auth/_lib/api_fetch_auth';
 import colors from '@/con/colors';
-import { Box, Button, Loader, Paper, PinInput, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Loader, Paper, PinInput, Stack, Text, Title } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -98,10 +98,10 @@ export default function Validasi() {
         router.replace('/waiting-room');
         return;
       }
-      
+
       // ✅ Switch statement lebih clean
       let redirectPath: string;
-      
+
       switch (roleId) {
         case 0:
         case 1:
@@ -117,7 +117,7 @@ export default function Validasi() {
           redirectPath = '/admin';
           console.warn('Unknown roleId:', roleId);
       }
-      
+
       console.log('Redirecting to:', redirectPath);
       router.replace(redirectPath);
 
@@ -151,6 +151,7 @@ export default function Validasi() {
         authStore.setUser({
           id: 'pending',
           name: username,
+          roleId: 1,
         });
         cleanupStorage();
         router.replace('/waiting-room');
@@ -219,14 +220,16 @@ export default function Validasi() {
                   <Text c={colors['blue-button']} ta="center" fz="sm" fw="bold">
                     Masukkan Kode Verifikasi
                   </Text>
-                  <PinInput
-                    length={4}
-                    value={otp}
-                    onChange={setOtp}
-                    onComplete={handleVerify}
-                    inputMode="numeric"
-                    size="lg"
-                  />
+                  <Center>
+                    <PinInput
+                      length={4}
+                      value={otp}
+                      onChange={setOtp}
+                      onComplete={handleVerify}
+                      inputMode="numeric"
+                      size="lg"
+                    />
+                  </Center>
                 </Box>
 
                 <Button

src/app/admin/(dashboard)/user&role/_com/dynamicNavbar.ts

@@ -0,0 +1,22 @@
+// src/app/admin/(dashboard)/user&role/_com/dynamicNavbar.ts
+import { navBar, role1, role2, role3 } from '@/app/admin/_com/list_PageAdmin';
+
+export function getNavbar({
+  roleId,
+  menuIds,
+}: {
+  roleId: number;           // pastikan number
+  menuIds?: string[] | null; // opsional
+}) {
+  // Prioritas: menuIds > roleId
+  if (menuIds && menuIds.length > 0) {
+    return navBar.filter(section => menuIds.includes(section.id));
+  }
+
+  // Fallback ke role-based
+  if (roleId === 0) return navBar;
+  if (roleId === 1) return role1;
+  if (roleId === 2) return role2;
+  if (roleId === 3) return role3;
+  return [];
+}

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

@@ -2,7 +2,7 @@
 'use client'
 import colors from '@/con/colors';
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import { IconForms, IconUser } from '@tabler/icons-react';
+import { IconBrush, IconForms, IconUser } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
@@ -23,6 +23,12 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
       href: "/admin/user&role/role",
       icon: <IconForms size={18} stroke={1.8} />,
     },
+    {
+      label: "Menu Access",
+      value: "menu-access",
+      href: "/admin/user&role/menu-access",
+      icon: <IconBrush size={18} stroke={1.8} />,
+    }
   ];
 
   const currentTab = tabs.find(tab => tab.href === pathname);

src/app/admin/(dashboard)/user&role/menu-access/page.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+// src/app/admin/user&role/menu-access/page.tsx
+
+'use client'
+
+import { navBar } from '@/app/admin/_com/list_PageAdmin'
+import { Button, Checkbox, Group, Paper, Select, Stack, Text, Title } from '@mantine/core'
+import { useEffect, useState } from 'react'
+import { useProxy } from 'valtio/utils'
+import user from '../../_state/user/user-state'
+
+
+// ✅ Helper: ekstrak semua menu ID dari struktur navBar
+const extractMenuIds = (navSections: typeof navBar) => {
+  return navSections.map(section => ({
+    value: section.id,      // "Landing Page", "Kesehatan", dll
+    label: section.name     // "Landing Page", "Kesehatan", dll
+  }));
+};
+
+function MenuAccessPage() {
+  const stateUser = useProxy(user.userState)
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null)
+  const [userMenus, setUserMenus] = useState<string[]>([])
+
+  // ✅ Gunakan helper untuk ekstrak menu
+  const availableMenus = extractMenuIds(navBar);
+
+  // Ambil data menu akses user
+  const loadUserMenuAccess = async () => {
+    if (!selectedUserId) return
+
+    try {
+      // ✅ Perbaiki URL: gunakan query string bukan dynamic route
+      const res = await fetch(`/api/admin/user-menu-access?userId=${selectedUserId}`)
+      const data = await res.json()
+
+      if (data.success) {
+        setUserMenus(data.menuIds || [])
+      }
+    } catch (error) {
+      console.error('Gagal memuat menu akses:', error)
+    }
+  }
+
+  useEffect(() => {
+    if (selectedUserId) {
+      loadUserMenuAccess()
+    }
+  }, [selectedUserId])
+
+  const handleToggleMenu = (menuId: string) => {
+    setUserMenus(prev => 
+      prev.includes(menuId)
+        ? prev.filter(id => id !== menuId)
+        : [...prev, menuId]
+    )
+  }
+
+  const handleSave = async () => {
+    if (!selectedUserId) return
+
+    try {
+      const res = await fetch('/api/admin/user-menu-access', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ userId: selectedUserId, menuIds: userMenus }),
+      })
+
+      const data = await res.json()
+      if (data.success) {
+        alert('Menu akses berhasil disimpan')
+      }
+    } catch (error) {
+      console.error('Gagal menyimpan menu akses:', error)
+      alert('Terjadi kesalahan')
+    }
+  }
+
+  return (
+    <Stack>
+      <Title order={2}>Tampilan Menu</Title>
+      <Paper p="xl" shadow="md" radius="md">
+        <Stack gap="lg">
+          <Group>
+            <Text fw={500}>Pilih User:</Text>
+            <Select
+              placeholder="Pilih user"
+              data={stateUser.findMany.data.map(u => ({
+                value: u.id,
+                label: `${u.username} (${u.nomor})`,
+              }))}
+              value={selectedUserId}
+              onChange={setSelectedUserId}
+              w={300}
+            />
+          </Group>
+
+          {selectedUserId && (
+            <>
+              <Text fw={500}>Menu yang Bisa Diakses:</Text>
+              <Stack>
+                {availableMenus.map(menu => (
+                  <Checkbox
+                    key={menu.value}
+                    label={menu.label}
+                    checked={userMenus.includes(menu.value)}
+                    onChange={() => handleToggleMenu(menu.value)}
+                  />
+                ))}
+              </Stack>
+
+              <Button onClick={handleSave} mt="md">
+                Simpan Perubahan
+              </Button>
+            </>
+          )}
+        </Stack>
+      </Paper>
+    </Stack>
+  )
+}
+
+export default MenuAccessPage

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

@@ -95,7 +95,24 @@ function ListUser({ search }: { search: string }) {
     });
 
     if (success) {
-      // Reload data setelah berhasil update
+      // Cek apakah role berubah
+      const res = await fetch('/api/user/updt', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          id: userId,
+          roleId: newRoleId,
+        }),
+      });
+      const data = await res.json();
+
+      if (data.roleChanged) {
+        // Tampilkan notifikasi
+        alert(`User ${username} akan logout otomatis!`);
+      }
+
       stateUser.findMany.load(page, 10, search);
     }
 
@@ -114,7 +131,9 @@ function ListUser({ search }: { search: string }) {
     }
   };
 
-  const filteredData = data || [];
+  const filteredData = (data || []).filter(
+    (item) => item.roleId !== "0" // asumsikan id role SUPERADMIN = "0"
+  );
 
   if (loading || !data) {
     return (
@@ -158,10 +177,12 @@ function ListUser({ search }: { search: string }) {
                     <TableTd style={{ width: '20%' }}>
                       <Select
                         placeholder="Pilih role"
-                        data={stateRole.findMany.data.map((r) => ({
-                          label: r.name,
-                          value: r.id,
-                        }))}
+                        data={stateRole.findMany.data
+                          .filter(r => r.id !== "0") // ❌ Sembunyikan SUPERADMIN
+                          .map(r => ({
+                            label: r.name,
+                            value: r.id,
+                          }))}
                         value={item.roleId}
                         onChange={(val) => {
                           if (!val) return;

src/app/admin/_com/list_PageAdmin.tsx

@@ -392,6 +392,11 @@ export const navBar = [
         id: "Role",
         name: "Role",
         path: "/admin/user&role/role"
+      },
+      {
+        id: "Menu Access",
+        name: "Menu Access",
+        path: "/admin/user&role/menu-access"
       }
     ]
   }
@@ -785,4 +790,4 @@ export const role3 = [
       }
     ]
   }
-]
+]

src/app/admin/layout.tsx

@@ -1,263 +1,3 @@
-// /* eslint-disable react-hooks/exhaustive-deps */
-// 'use client'
-
-// import colors from "@/con/colors";
-// import {
-//   ActionIcon,
-//   AppShell,
-//   AppShellHeader,
-//   AppShellMain,
-//   AppShellNavbar,
-//   Burger,
-//   Flex,
-//   Group,
-//   Image,
-//   NavLink,
-//   ScrollArea,
-//   Text,
-//   Tooltip,
-//   rem
-// } from "@mantine/core";
-// import { useDisclosure } from "@mantine/hooks";
-// import {
-//   IconChevronLeft,
-//   IconChevronRight,
-//   IconLogout2
-// } from "@tabler/icons-react";
-// import _ from "lodash";
-// import Link from "next/link";
-// import { useRouter, useSelectedLayoutSegments } from "next/navigation";
-// import { navBar } from "./_com/list_PageAdmin";
-
-// export default function Layout({ children }: { children: React.ReactNode }) {
-//   const [opened, { toggle }] = useDisclosure();
-//   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
-//   const router = useRouter();
-//   const segments = useSelectedLayoutSegments().map((s) => _.lowerCase(s));
-
-//   return (
-//     <AppShell
-//       suppressHydrationWarning
-//       header={{ height: 64 }}
-//       navbar={{
-//         width: { base: 260, sm: 280, lg: 300 },
-//         breakpoint: 'sm',
-//         collapsed: {
-//           mobile: !opened,
-//           desktop: !desktopOpened,
-//         },
-//       }}
-//       padding="md"
-//     >
-//       <AppShellHeader
-//         style={{
-//           background: "linear-gradient(90deg, #ffffff, #f9fbff)",
-//           borderBottom: `1px solid ${colors["blue-button"]}20`,
-//           padding: '0 16px',
-//         }}
-//         px={{ base: 'sm', sm: 'md' }}
-//         py={{ base: 'xs', sm: 'sm' }}
-//       >
-//         <Group w="100%" h="100%" justify="space-between" wrap="nowrap">
-//           <Flex align="center" gap="sm">
-//             <Image
-//               src="/assets/images/darmasaba-icon.png"
-//               alt="Logo Darmasaba"
-//               w={{ base: 32, sm: 40 }}
-//               h={{ base: 32, sm: 40 }}
-//               radius="md"
-//               loading="lazy"
-//               style={{
-//                 minWidth: '32px',
-//                 height: 'auto',
-//               }}
-//             />
-//             <Text
-//               fw={700}
-//               c={colors["blue-button"]}
-//               fz={{ base: 'md', sm: 'xl' }}
-//             >
-//               Admin Darmasaba
-//             </Text>
-//           </Flex>
-
-//           <Group gap="xs">
-//             {!desktopOpened && (
-//               <Tooltip label="Buka Navigasi" position="bottom" withArrow>
-//                 <ActionIcon
-//                   variant="light"
-//                   radius="xl"
-//                   size="lg"
-//                   onClick={toggleDesktop}
-//                   color={colors["blue-button"]}
-//                 >
-//                   <IconChevronRight />
-//                 </ActionIcon>
-//               </Tooltip>
-//             )}
-
-//             <Burger
-//               opened={opened}
-//               onClick={toggle}
-//               hiddenFrom="sm"
-//               size="md"
-//               color={colors["blue-button"]}
-//               mr="xs"
-//             />
-
-//             <Tooltip label="Kembali ke Website Desa" position="bottom" withArrow>
-//               <ActionIcon
-//                 onClick={() => {
-//                   router.push("/darmasaba");
-//                 }}
-//                 color={colors["blue-button"]}
-//                 radius="xl"
-//                 size="lg"
-//                 variant="gradient"
-//                 gradient={{ from: colors["blue-button"], to: "#228be6" }}
-//               >
-//                 <Image 
-//                   src="/assets/images/darmasaba-icon.png" 
-//                   alt="Logo Darmasaba" 
-//                   w={20} 
-//                   h={20} 
-//                   radius="md" 
-//                   loading="lazy" 
-//                   style={{
-//                     minWidth: '20px',
-//                     height: 'auto',
-//                   }}
-//                 />
-//               </ActionIcon>
-//             </Tooltip>
-//             <Tooltip label="Keluar" position="bottom" withArrow>
-//               <ActionIcon
-//                 onClick={() => {
-//                   router.push("/darmasaba");
-//                 }}
-//                 color={colors["blue-button"]}
-//                 radius="xl"
-//                 size="lg"
-//                 variant="gradient"
-//                 gradient={{ from: colors["blue-button"], to: "#228be6" }}
-//               >
-//                 <IconLogout2 size={22} />
-//               </ActionIcon>
-//             </Tooltip>
-//           </Group>
-//         </Group>
-//       </AppShellHeader>
-
-//       <AppShellNavbar
-//         component={ScrollArea}
-//         style={{
-//           background: "#ffffff",
-//           borderRight: `1px solid ${colors["blue-button"]}20`,
-//         }}
-//         p={{ base: 'xs', sm: 'sm' }}
-//       >
-//         <AppShell.Section p="sm">
-//           {navBar.map((v, k) => {
-//             const isParentActive = segments.includes(_.lowerCase(v.name));
-
-//             return (
-//               <NavLink
-//                 key={k}
-//                 defaultOpened={isParentActive}
-//                 c={isParentActive ? colors["blue-button"] : "gray"}
-//                 label={
-//                   <Text fw={isParentActive ? 600 : 400} fz="sm">
-//                     {v.name}
-//                   </Text>
-//                 }
-//                 style={{
-//                   borderRadius: rem(10),
-//                   marginBottom: rem(4),
-//                   transition: "background 150ms ease",
-//                 }}
-//                 styles={{
-//                   root: {
-//                     '&:hover': {
-//                       backgroundColor: 'rgba(25, 113, 194, 0.05)',
-//                     },
-//                   },
-//                 }}
-//                 variant="light"
-//                 active={isParentActive}
-//               >
-//                 {v.children.map((child, key) => {
-//                   const isChildActive = segments.includes(
-//                     _.lowerCase(child.name)
-//                   );
-
-//                   return (
-//                     <NavLink
-//                       key={key}
-//                       href={child.path}
-//                       c={isChildActive ? colors["blue-button"] : "gray"}
-//                       label={
-//                         <Text fw={isChildActive ? 600 : 400} fz="sm">
-//                           {child.name}
-//                         </Text>
-//                       }
-//                       styles={{
-//                         root: {
-//                           borderRadius: rem(8),
-//                           marginBottom: rem(2),
-//                           transition: 'background 150ms ease',
-//                           padding: '6px 12px',
-//                           '&:hover': {
-//                             backgroundColor: isChildActive ? 'rgba(25, 113, 194, 0.15)' : 'rgba(25, 113, 194, 0.05)',
-//                           },
-//                           ...(isChildActive && {
-//                             backgroundColor: 'rgba(25, 113, 194, 0.1)',
-//                           }),
-//                         },
-//                       }}
-//                       active={isChildActive}
-//                       component={Link}
-//                     />
-//                   );
-//                 })}
-//               </NavLink>
-//             );
-//           })}
-//         </AppShell.Section>
-
-//         <AppShell.Section py="md">
-//           <Group justify="end" pr="sm">
-//             <Tooltip
-//               label={desktopOpened ? "Tutup Navigasi" : "Buka Navigasi"}
-//               position="top"
-//               withArrow
-//             >
-//               <ActionIcon
-//                 variant="light"
-//                 radius="xl"
-//                 size="lg"
-//                 onClick={toggleDesktop}
-//                 color={colors["blue-button"]}
-//               >
-//                 <IconChevronLeft />
-//               </ActionIcon>
-//             </Tooltip>
-//           </Group>
-//         </AppShell.Section>
-//       </AppShellNavbar>
-
-//       <AppShellMain
-//         style={{
-//           background: "linear-gradient(180deg, #fdfdfd, #f6f9fc)",
-//           minHeight: "100vh",
-//         }}
-//       >
-//         {children}
-//       </AppShellMain>
-//     </AppShell>
-//   );
-// }
-
-
 'use client'
 
 import colors from "@/con/colors";
@@ -290,26 +30,25 @@ import _ from "lodash";
 import Link from "next/link";
 import { useRouter, useSelectedLayoutSegments } from "next/navigation";
 import { useEffect, useState } from "react";
-import { navigationByRole } from "./_com/navigationByRole";
 import { useSnapshot } from "valtio";
-import { toast } from "react-toastify";
+import { getNavbar } from "./(dashboard)/user&role/_com/dynamicNavbar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  const [opened, { toggle }] = useDisclosure();
+ const [opened, { toggle }] = useDisclosure();
   const [loading, setLoading] = useState(true);
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
   const router = useRouter();
   const segments = useSelectedLayoutSegments().map((s) => _.lowerCase(s));
 
   const { user } = useSnapshot(authStore);
+
   console.log("Current user in store:", user);
 
-  // ✅ Fetch user dari backend jika belum ada di store
-  useEffect(() => {
-    if (user) {
+ useEffect(() => {
+    if (authStore.user) {
       setLoading(false);
       return;
-    } // Sudah ada → jangan fetch
+    }
 
     const fetchUser = async () => {
       try {
@@ -317,10 +56,19 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         const data = await res.json();
 
         if (data.user) {
+          const menuRes = await fetch(`/api/admin/user-menu-access?userId=${data.user.id}`);
+          const menuData = await menuRes.json();
+
+          // ✅ Clone ke array mutable
+          const menuIds = menuData.success && Array.isArray(menuData.menuIds)
+            ? [...menuData.menuIds] // Converts readonly array to mutable
+            : null;
+
           authStore.setUser({
             id: data.user.id,
             name: data.user.name,
             roleId: Number(data.user.roleId),
+            menuIds,
           });
         } else {
           authStore.setUser(null);
@@ -336,94 +84,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     };
 
     fetchUser();
-  }, [user, router]); // ✅ Sekarang 'user' terdefinisi
-
-  // ✅ Polling untuk cek perubahan role setiap 30 detik
-  // Di layout.tsx - useEffect polling
-useEffect(() => {
-  if (!user?.id) return;
-
-  const checkRoleUpdate = async () => {
-    try {
-      const res = await fetch('/api/auth/me');
-      const data = await res.json();
-
-      // ✅ Session tidak valid (sudah dihapus karena role berubah)
-      if (!data.success || !data.user) {
-        console.log('⚠️ Session tidak valid, logout...');
-        authStore.setUser(null);
-        
-        // Clear cookie manual (backup)
-        document.cookie = `${process.env.NEXT_PUBLIC_SESSION_KEY}=; Max-Age=0; path=/;`;
-        
-        toast.info('Role Anda telah diubah. Silakan login kembali.', {
-          autoClose: 5000,
-        });
-        
-        router.push('/login');
-        return;
-      }
-
-      // Cek perubahan roleId (seharusnya tidak sampai sini jika session dihapus)
-      const currentRoleId = Number(data.user.roleId);
-      
-      if (currentRoleId !== user.roleId) {
-        console.log('🔄 Role berubah! Dari', user.roleId, 'ke', currentRoleId);
-        
-        // Update store
-        authStore.setUser({
-          id: data.user.id,
-          name: data.user.name || data.user.username,
-          roleId: currentRoleId,
-        });
-
-        // Redirect ke halaman default role baru
-        let redirectPath = '/admin';
-
-        switch (currentRoleId) {
-          case 0:
-          case 1:
-            redirectPath = '/admin/landing-page/profil/program-inovasi';
-            break;
-          case 2:
-            redirectPath = '/admin/kesehatan/posyandu';
-            break;
-          case 3:
-            redirectPath = '/admin/pendidikan/info-sekolah/jenjang-pendidikan';
-            break;
-        }
-
-        toast.info('Role Anda telah diubah. Mengalihkan halaman...', {
-          autoClose: 5000,
-        });
-        
-        router.push(redirectPath);
-        
-        // Reload untuk clear semua state
-        setTimeout(() => {
-          window.location.reload();
-        }, 500);
-      }
-    } catch (error) {
-      console.error('❌ Error checking role update:', error);
-    }
-  };
-
-  // ✅ Polling setiap 10 detik (lebih responsif dari 30 detik)
-  const interval = setInterval(checkRoleUpdate, 10000);
-
-  // Juga cek saat window focus (user kembali ke tab)
-  const handleFocus = () => {
-    checkRoleUpdate();
-  };
-  
-  window.addEventListener('focus', handleFocus);
-
-  return () => {
-    clearInterval(interval);
-    window.removeEventListener('focus', handleFocus);
-  };
-}, [user, router]);
+  }, [router]);
 
   if (loading) {
     return (
@@ -438,8 +99,8 @@ useEffect(() => {
   }
 
   // ✅ Ambil menu berdasarkan roleId
-  const currentNav = user?.roleId !== undefined
-    ? (navigationByRole[user.roleId as keyof typeof navigationByRole] || [])
+  const currentNav = authStore.user
+    ? getNavbar({ roleId: authStore.user.roleId, menuIds: authStore.user.menuIds })
     : [];
 
   const handleLogout = () => {
@@ -667,4 +328,3 @@ useEffect(() => {
     </AppShell>
   );
 }
-