up: dashboard admin

Deskripsi:
- akses role pada menu dashboard
- akses role pada setting
- akses role pada pelayanan surat
- akses role pada pengaduan warga
- akses role pada warga

NO Issues

src/pages/scr/dashboard/setting/detail_setting_page.tsx

@@ -4,6 +4,7 @@ import KategoriPengaduan from "@/components/KategoriPengaduan";
 import ProfileUser from "@/components/ProfileUser";
 import UserRoleSetting from "@/components/UserRoleSetting";
 import UserSetting from "@/components/UserSetting";
+import apiFetch from "@/lib/apiFetch";
 import {
   Card,
   Container,
@@ -18,12 +19,75 @@ import {
   IconUserScreen,
   IconUsersGroup
 } from "@tabler/icons-react";
+import type { JsonValue } from "generated/prisma/runtime/library";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 
 export default function DetailSettingPage() {
   const { search } = useLocation();
   const query = new URLSearchParams(search);
   const type = query.get("type");
+  const [permissions, setPermissions] = useState<JsonValue[]>([]);
+
+  useEffect(() => {
+    async function fetchPermissions() {
+      const { data } = await apiFetch.api.user.find.get();
+      if (Array.isArray(data?.permissions)) {
+        const onlySetting = data.permissions.filter((p: any) => p.startsWith("setting"));
+        setPermissions(onlySetting);
+      } else {
+        setPermissions([]);
+      }
+    }
+    fetchPermissions();
+  }, []);
+
+
+  const navItems = [
+    {
+      key: "setting.profile",
+      path: "profile",
+      icon: <IconUserCog size={20} />,
+      label: "Profile",
+      description: "Manage profile settings",
+    },
+    {
+      key: "setting.user",
+      path: "user",
+      icon: <IconUsersGroup size={20} />,
+      label: "User",
+      description: "Manage user accounts",
+    },
+    {
+      key: "setting.user_role",
+      path: "role",
+      icon: <IconUserScreen size={20} />,
+      label: "Role",
+      description: "Manage user roles",
+    },
+    {
+      key: "setting.kategori_pengaduan",
+      path: "cat-pengaduan",
+      icon: <IconCategory2 size={20} />,
+      label: "Kategori Pengaduan",
+      description: "Manage complaint categories",
+    },
+    {
+      key: "setting.kategori_pelayanan",
+      path: "cat-pelayanan",
+      icon: <IconMailSpark size={20} />,
+      label: "Kategori Pelayanan Surat",
+      description: "Manage letter service categories",
+    },
+    {
+      key: "setting.desa",
+      path: "desa",
+      icon: <IconBuildingBank size={20} />,
+      label: "Desa",
+      description: "Manage desa information",
+    }
+
+  ];
 
   return (
     <Container size="xl" py="xl" w={"100%"}>
@@ -40,42 +104,17 @@ export default function DetailSettingPage() {
               boxShadow: "0 0 20px rgba(0,255,200,0.08)",
             }}
           >
-            <NavLink
-              href={`?type=profile`}
-              label="Profile"
-              leftSection={<IconUserCog size={16} stroke={1.5} />}
-              active={type === "profile" || !type}
-            />
-            <NavLink
-              href={`?type=user`}
-              label="User"
-              leftSection={<IconUsersGroup size={16} stroke={1.5} />}
-              active={type === "user"}
-            />
-            <NavLink
-              href={`?type=role`}
-              label="Role"
-              leftSection={<IconUserScreen size={16} stroke={1.5} />}
-              active={type === "role"}
-            />
-            <NavLink
-              href={`?type=cat-pengaduan`}
-              label="Kategori Pengaduan"
-              leftSection={<IconCategory2 size={16} stroke={1.5} />}
-              active={type === "cat-pengaduan"}
-            />
-            <NavLink
-              href={`?type=cat-pelayanan`}
-              label="Kategori Pelayanan Surat"
-              leftSection={<IconMailSpark size={16} stroke={1.5} />}
-              active={type === "cat-pelayanan"}
-            />
-            <NavLink
-              href={`?type=desa`}
-              label="Desa"
-              leftSection={<IconBuildingBank size={16} stroke={1.5} />}
-              active={type === "desa"}
-            />
+            {
+              navItems.filter((item) => permissions.includes(item.key)).map((item) => (
+                <NavLink
+                  key={item.key}
+                  href={'?type=' + item.path}
+                  label={item.label}
+                  leftSection={item.icon}
+                  active={type === item.path || (!type && item.path === 'profile')}
+                />
+              ))
+            }
           </Card>
         </Grid.Col>
         <Grid.Col span={9}>
@@ -91,17 +130,17 @@ export default function DetailSettingPage() {
             }}
           >
             {type === "cat-pengaduan" ? (
-              <KategoriPengaduan />
+              <KategoriPengaduan permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.kategori_pengaduan"))} />
             ) : type === "cat-pelayanan" ? (
-              <KategoriPelayananSurat />
+              <KategoriPelayananSurat permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.kategori_pelayanan"))} />
             ) : type === "desa" ? (
-              <DesaSetting />
+              <DesaSetting permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.desa"))} />
             ) : type === "user" ? (
-              <UserSetting />
+              <UserSetting permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.user."))} />
             ) : type === "role" ? (
-              <UserRoleSetting />
+              <UserRoleSetting permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.user_role"))} />
             ) : (
-              <ProfileUser />
+              <ProfileUser permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.profile"))} />
             )}
           </Card>
         </Grid.Col>