From 0a16dbe20ae96f6066fa52b115af60ca5116f033 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Thu, 12 Jun 2025 20:23:22 +0700
Subject: [PATCH] fix:role menu

---
 app/(admin)/settings/page.tsx                |   7 +-
 components/form/login.tsx                    |  11 +-
 components/form/settings/profile.tsx         |  16 +-
 components/layout/sidebar/sidebar-mobile.tsx | 285 ++++++++++++++++--
 components/layout/sidebar/sidebar.tsx        | 289 ++++++++++++++++++-
 components/table/article-table.tsx           |  25 +-
 6 files changed, 571 insertions(+), 62 deletions(-)

diff --git a/app/(admin)/settings/page.tsx b/app/(admin)/settings/page.tsx
index 9f6d307..69d900d 100644
--- a/app/(admin)/settings/page.tsx
+++ b/app/(admin)/settings/page.tsx
@@ -2,18 +2,21 @@
 import PasswordForm from "@/components/form/settings/password";
 import ProfileForm from "@/components/form/settings/profile";
 import { close, loading } from "@/config/swal";
-import { getProfile } from "@/services/master-user";
+import { getDetailMasterUsers, getProfile } from "@/services/master-user";
 import { Tab, Tabs } from "@heroui/react";
+import Cookies from "js-cookie";
 import { useEffect, useState } from "react";
 
 export default function Settings() {
   const [profile, setProfile] = useState<any>();
+  const uid = Cookies.get("uie");
   useEffect(() => {
     initFetch();
   }, []);
   const initFetch = async () => {
     loading();
-    const profile = await getProfile();
+    const profile = await getDetailMasterUsers(String(uid));
+    // const profile = await getProfile();
     setProfile(profile?.data?.data);
     close();
   };
diff --git a/components/form/login.tsx b/components/form/login.tsx
index 12dfd58..45834b2 100644
--- a/components/form/login.tsx
+++ b/components/form/login.tsx
@@ -139,10 +139,7 @@ export default function Login() {
       //   Cookies.set("username", profile?.data?.data?.username, {
       //     expires: 1,
       //   });
-      //   Cookies.set("urie", profile?.data?.data?.roleId, {
-      //     expires: 1,
-      //   });
-      //   Cookies.set("roleName", profile?.data?.data?.roleName, {
+      //   Cookies.set("urie", profile?.data?.data?.userRoleId, {
       //     expires: 1,
       //   });
       //   Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
@@ -151,9 +148,9 @@ export default function Login() {
       //   Cookies.set("ulne", profile?.data?.data?.userLevelId, {
       //     expires: 1,
       //   });
-      //   Cookies.set("urce", profile?.data?.data?.roleCode, {
-      //     expires: 1,
-      //   });
+      //   // Cookies.set("urce", profile?.data?.data?.roleCode, {
+      //   //   expires: 1,
+      //   // });
       //   Cookies.set("email", profile?.data?.data?.email, {
       //     expires: 1,
       //   });
diff --git a/components/form/settings/profile.tsx b/components/form/settings/profile.tsx
index d5ceb13..b3b6a48 100644
--- a/components/form/settings/profile.tsx
+++ b/components/form/settings/profile.tsx
@@ -26,18 +26,10 @@ const formSchema = z.object({
     .min(2, {
       message: "Harus diisi",
     }),
-  nrp: z.string().min(1, {
-    message: "Harus diisi",
-  }),
-  address: z.string().min(1, {
-    message: "Harus diisi",
-  }),
-  gender: z.string().min(1, {
-    message: "Harus diisi",
-  }),
-  phoneNumber: z.string().min(1, {
-    message: "Harus diisi",
-  }),
+  nrp: z.string().optional(),
+  address: z.string().optional(),
+  gender: z.string().optional(),
+  phoneNumber: z.string().optional(),
 });
 
 export default function ProfileForm(props: {
diff --git a/components/layout/sidebar/sidebar-mobile.tsx b/components/layout/sidebar/sidebar-mobile.tsx
index 7b9e3cd..32de173 100644
--- a/components/layout/sidebar/sidebar-mobile.tsx
+++ b/components/layout/sidebar/sidebar-mobile.tsx
@@ -59,7 +59,7 @@ interface SidebarProps {
   updateSidebarData: (newData: boolean) => void;
 }
 
-const sidebarOtherRole = [
+const sidebarLevel3 = [
   {
     id: 1,
     name: "Dashboard",
@@ -134,7 +134,7 @@ const sidebarOtherRole = [
   },
 ];
 
-const sideBarDummyData = [
+const sidebarLevel2 = [
   {
     id: 1,
     name: "Dashboard",
@@ -263,6 +263,197 @@ const sideBarDummyData = [
     statusName: "Active",
     childModule: null,
   },
+
+  {
+    id: 5,
+    name: "Master",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    isGroup: true,
+    modulePathUrl: "/admin/basic",
+    parentId: -1,
+    icon: "table",
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+
+  {
+    id: 11,
+    name: "Master Static Page",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/static-page",
+    parentId: -1,
+    icon: <StaticPageIcon size={24} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 8,
+    name: "Master User",
+    moduleId: 654,
+    moduleName: "Form Vertical",
+    modulePathUrl: "/admin/master-user",
+    parentId: -1,
+    icon: <MasterUsersIcon />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 23,
+    name: "Master User Level",
+    moduleId: 656,
+    moduleName: "Form Validation",
+    modulePathUrl: "/admin/user-level",
+    parentId: -1,
+    icon: <MasterUserLevelIcon />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+];
+
+const sidebarLevel1 = [
+  {
+    id: 1,
+    name: "Dashboard",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/dashboard",
+    isGroup: true,
+    parentId: -1,
+    icon: "dashboard",
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 2,
+    name: "Dashboard",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/dashboard",
+    parentId: -1,
+    icon: <DashboardIcon />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 3,
+    name: "Apps",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/basic",
+    isGroup: true,
+    parentId: -1,
+    icon: "table",
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 4,
+    name: "Artikel",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/article",
+    parentId: -1,
+    icon: <ArticleIcon size={24} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 30,
+    name: "Kategori",
+    moduleId: 654,
+    moduleName: "Master",
+    modulePathUrl: "/admin/master-category",
+    parentId: -1,
+    icon: <MasterCategoryIcon size={22} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 6,
+    name: "Majalah",
+    moduleId: 652,
+    moduleName: "Apps",
+    modulePathUrl: "/admin/magazine",
+    parentId: -1,
+    icon: <MagazineIcon size={23} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 33,
+    name: "Advertise",
+    moduleId: 652,
+    moduleName: "Apps",
+    modulePathUrl: "/admin/advertise",
+    parentId: -1,
+    icon: <AddvertiseIcon size={23} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 34,
+    name: "Kritik & Saran",
+    moduleId: 652,
+    moduleName: "Apps",
+    modulePathUrl: "/admin/feedbacks",
+    parentId: -1,
+    icon: <SuggestionsIcon size={23} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 35,
+    name: "Komentar",
+    moduleId: 652,
+    moduleName: "Apps",
+    modulePathUrl: "/admin/comment",
+    parentId: -1,
+    icon: <CommentIcon size={23} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+
   // {
   //     id: 4,
   //     name: "E-Magazine",
@@ -388,6 +579,7 @@ const SidebarMobile: React.FC<SidebarProps> = ({ updateSidebarData }) => {
   const username = Cookies.get("username");
   const isAuthenticated = Cookies.get("is_authenticated");
   const roles = Cookies.get("ulie");
+  const rolesId = Cookies.get("urie");
 
   useEffect(() => {
     if (!token) {
@@ -451,8 +643,8 @@ const SidebarMobile: React.FC<SidebarProps> = ({ updateSidebarData }) => {
           </div>
 
           <SidebarMenu>
-            {roles?.includes("mabes") || username?.includes("mabes")
-              ? sideBarDummyData?.map((list: any, index: number) =>
+            {rolesId === "1"
+              ? sidebarLevel1?.map((list: any, index: number) =>
                   list.isGroup ? (
                     <p
                       key={list.id}
@@ -465,13 +657,6 @@ const SidebarMobile: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                   ) : list.childMenu?.length < 1 ? (
                     isOpen ? (
                       <Link key={list.id} href={list.modulePathUrl}>
-                        {/* <div
-                            className={`px-3.5 py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row gap-2 ${
-                              pathname.includes(list.modulePathUrl)
-                                ? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold"
-                                : "text-zinc-600 dark:text-zinc-400"
-                            }`}
-                          > */}
                         <div
                           className={`px-3.5 py-2 mr-4 rounded-lg  flex flex-row gap-2 ${
                             pathname.includes(list.modulePathUrl)
@@ -526,7 +711,8 @@ const SidebarMobile: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                     />
                   )
                 )
-              : sidebarOtherRole?.map((list: any, index: number) =>
+              : rolesId === "2"
+              ? sidebarLevel2?.map((list: any, index: number) =>
                   list.isGroup ? (
                     <p
                       key={list.id}
@@ -539,13 +725,6 @@ const SidebarMobile: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                   ) : list.childMenu?.length < 1 ? (
                     isOpen ? (
                       <Link key={list.id} href={list.modulePathUrl}>
-                        {/* <div
-                          className={`px-3.5 py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row gap-2 ${
-                            pathname.includes(list.modulePathUrl)
-                              ? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold"
-                              : "text-zinc-600 dark:text-zinc-400"
-                          }`}
-                        > */}
                         <div
                           className={`px-3.5 py-2 mr-4 rounded-lg  flex flex-row gap-2 ${
                             pathname.includes(list.modulePathUrl)
@@ -562,6 +741,74 @@ const SidebarMobile: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                         placement="right"
                         delay={0}
                         closeDelay={0}
+                        key={list.name}
+                      >
+                        <Link key={list.id} href={list.modulePathUrl}>
+                          <div
+                            className={`py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row justify-center gap-1 ${
+                              pathname.includes(list.modulePathUrl)
+                                ? "bg-zinc-300 text-zinc-500 font-bold hover:text-black"
+                                : "text-zinc-400 hover:text-black"
+                            }`}
+                          >
+                            {list.icon} {isOpen && list.name}
+                          </div>
+                        </Link>
+                      </Tooltip>
+                    )
+                  ) : (
+                    <SidebarCollapseItems
+                      key={list.id}
+                      title={list.name}
+                      isActive={pathname.includes(list.modulePathUrl)}
+                      icon={list.icon}
+                      items={[
+                        list?.childMenu?.map((item: any) => (
+                          <SidebarCollapseSubItems
+                            key={item.id}
+                            title={item?.name}
+                            isActive={pathname.includes(item.modulePathUrl)}
+                            isParentActive={pathname.includes(
+                              list.modulePathUrl
+                            )}
+                            path={item.modulePathUrl}
+                            icon={item.icon}
+                          />
+                        )),
+                      ]}
+                    />
+                  )
+                )
+              : sidebarLevel3?.map((list: any, index: number) =>
+                  list.isGroup ? (
+                    <p
+                      key={list.id}
+                      className={`font-bold mr-4 text-white ${
+                        !isOpen ? "text-center" : ""
+                      }`}
+                    >
+                      {isOpen ? list.name : "..."}
+                    </p>
+                  ) : list.childMenu?.length < 1 ? (
+                    isOpen ? (
+                      <Link key={list.id} href={list.modulePathUrl}>
+                        <div
+                          className={`px-3.5 py-2 mr-4 rounded-lg  flex flex-row gap-2 ${
+                            pathname.includes(list.modulePathUrl)
+                              ? "bg-white text-black font-bold"
+                              : "text-white hover:bg-gray-200 hover:text-black"
+                          }`}
+                        >
+                          {list.icon} {isOpen && list.name}
+                        </div>
+                      </Link>
+                    ) : (
+                      <Tooltip
+                        content={list.name}
+                        placement="right"
+                        delay={0}
+                        closeDelay={0}
+                        key={list.name}
                       >
                         <Link key={list.id} href={list.modulePathUrl}>
                           <div
diff --git a/components/layout/sidebar/sidebar.tsx b/components/layout/sidebar/sidebar.tsx
index 923441c..90ea078 100644
--- a/components/layout/sidebar/sidebar.tsx
+++ b/components/layout/sidebar/sidebar.tsx
@@ -60,7 +60,7 @@ interface SidebarProps {
   updateSidebarData: (newData: boolean) => void;
 }
 
-const sidebarOtherRole = [
+const sidebarLevel3 = [
   {
     id: 1,
     name: "Dashboard",
@@ -135,7 +135,197 @@ const sidebarOtherRole = [
   },
 ];
 
-const sideBarDummyData = [
+const sidebarLevel2 = [
+  {
+    id: 1,
+    name: "Dashboard",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/dashboard",
+    isGroup: true,
+    parentId: -1,
+    icon: "dashboard",
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 2,
+    name: "Dashboard",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/dashboard",
+    parentId: -1,
+    icon: <DashboardIcon />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 3,
+    name: "Apps",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/basic",
+    isGroup: true,
+    parentId: -1,
+    icon: "table",
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 4,
+    name: "Artikel",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/article",
+    parentId: -1,
+    icon: <ArticleIcon size={24} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 30,
+    name: "Kategori",
+    moduleId: 654,
+    moduleName: "Master",
+    modulePathUrl: "/admin/master-category",
+    parentId: -1,
+    icon: <MasterCategoryIcon size={22} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 6,
+    name: "Majalah",
+    moduleId: 652,
+    moduleName: "Apps",
+    modulePathUrl: "/admin/magazine",
+    parentId: -1,
+    icon: <MagazineIcon size={23} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 33,
+    name: "Advertise",
+    moduleId: 652,
+    moduleName: "Apps",
+    modulePathUrl: "/admin/advertise",
+    parentId: -1,
+    icon: <AddvertiseIcon size={23} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 34,
+    name: "Kritik & Saran",
+    moduleId: 652,
+    moduleName: "Apps",
+    modulePathUrl: "/admin/feedbacks",
+    parentId: -1,
+    icon: <SuggestionsIcon size={23} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 35,
+    name: "Komentar",
+    moduleId: 652,
+    moduleName: "Apps",
+    modulePathUrl: "/admin/comment",
+    parentId: -1,
+    icon: <CommentIcon size={23} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+
+  {
+    id: 5,
+    name: "Master",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    isGroup: true,
+    modulePathUrl: "/admin/basic",
+    parentId: -1,
+    icon: "table",
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+
+  {
+    id: 11,
+    name: "Master Static Page",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/static-page",
+    parentId: -1,
+    icon: <StaticPageIcon size={24} />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 8,
+    name: "Master User",
+    moduleId: 654,
+    moduleName: "Form Vertical",
+    modulePathUrl: "/admin/master-user",
+    parentId: -1,
+    icon: <MasterUsersIcon />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+  {
+    id: 23,
+    name: "Master User Level",
+    moduleId: 656,
+    moduleName: "Form Validation",
+    modulePathUrl: "/admin/user-level",
+    parentId: -1,
+    icon: <MasterUserLevelIcon />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
+];
+
+const sidebarLevel1 = [
   {
     id: 1,
     name: "Dashboard",
@@ -390,6 +580,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
   const username = Cookies.get("username");
   const isAuthenticated = Cookies.get("is_authenticated");
   const roles = Cookies.get("ulie");
+  const rolesId = Cookies.get("urie");
 
   useEffect(() => {
     if (!token) {
@@ -415,7 +606,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
       }`}
     >
       <div
-        className={` flex h-full flex-col p-4 mb-0 bg-gray-950 z-40 transition-width !ease-in-out justify-between ${
+        className={` flex flex-col p-4 mb-0 bg-gray-950 z-40 transition-width !ease-in-out justify-between  ${
           isOpen ? "w-[238px]" : "w-[80px]"
         }`}
       >
@@ -453,8 +644,8 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
           </div>
 
           <SidebarMenu>
-            {roles?.includes("mabes") || username?.includes("mabes")
-              ? sideBarDummyData?.map((list: any, index: number) =>
+            {rolesId === "1"
+              ? sidebarLevel1?.map((list: any, index: number) =>
                   list.isGroup ? (
                     <p
                       key={list.id}
@@ -528,7 +719,82 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                     />
                   )
                 )
-              : sidebarOtherRole?.map((list: any, index: number) =>
+              : rolesId === "2"
+              ? sidebarLevel2?.map((list: any, index: number) =>
+                  list.isGroup ? (
+                    <p
+                      key={list.id}
+                      className={`font-bold mr-4 text-white ${
+                        !isOpen ? "text-center" : ""
+                      }`}
+                    >
+                      {isOpen ? list.name : "..."}
+                    </p>
+                  ) : list.childMenu?.length < 1 ? (
+                    isOpen ? (
+                      <Link key={list.id} href={list.modulePathUrl}>
+                        {/* <div
+                            className={`px-3.5 py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row gap-2 ${
+                              pathname.includes(list.modulePathUrl)
+                                ? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold"
+                                : "text-zinc-600 dark:text-zinc-400"
+                            }`}
+                          > */}
+                        <div
+                          className={`px-3.5 py-2 mr-4 rounded-lg  flex flex-row gap-2 ${
+                            pathname.includes(list.modulePathUrl)
+                              ? "bg-white text-black font-bold"
+                              : "text-white hover:bg-gray-200 hover:text-black"
+                          }`}
+                        >
+                          {list.icon} {isOpen && list.name}
+                        </div>
+                      </Link>
+                    ) : (
+                      <Tooltip
+                        content={list.name}
+                        placement="right"
+                        delay={0}
+                        closeDelay={0}
+                        key={list.name}
+                      >
+                        <Link key={list.id} href={list.modulePathUrl}>
+                          <div
+                            className={`py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row justify-center gap-1 ${
+                              pathname.includes(list.modulePathUrl)
+                                ? "bg-zinc-300 text-zinc-500 font-bold hover:text-black"
+                                : "text-zinc-400 hover:text-black"
+                            }`}
+                          >
+                            {list.icon} {isOpen && list.name}
+                          </div>
+                        </Link>
+                      </Tooltip>
+                    )
+                  ) : (
+                    <SidebarCollapseItems
+                      key={list.id}
+                      title={list.name}
+                      isActive={pathname.includes(list.modulePathUrl)}
+                      icon={list.icon}
+                      items={[
+                        list?.childMenu?.map((item: any, index: number) => (
+                          <SidebarCollapseSubItems
+                            key={item.id + index}
+                            title={item?.name}
+                            isActive={pathname.includes(item.modulePathUrl)}
+                            isParentActive={pathname.includes(
+                              list.modulePathUrl
+                            )}
+                            path={item.modulePathUrl}
+                            icon={item.icon}
+                          />
+                        )),
+                      ]}
+                    />
+                  )
+                )
+              : sidebarLevel3?.map((list: any, index: number) =>
                   list.isGroup ? (
                     <p
                       key={list.id}
@@ -564,6 +830,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                         placement="right"
                         delay={0}
                         closeDelay={0}
+                        key={list.id}
                       >
                         <Link key={list.id} href={list.modulePathUrl}>
                           <div
@@ -604,7 +871,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
           </SidebarMenu>
         </div>
         <div
-          className={`mt-12 p-2 flex ${
+          className={`mt-12 p-2 flex !h-1/3 justify-end ${
             isOpen ? "justify-start ml-2" : "justify-center"
           } mt-auto flex flex-col items-between`}
         >
@@ -651,13 +918,13 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
             )}
             {isOpen ? (
               <div className="flex flex-row gap-3 items-center text-white">
-                <UserProfileIcon size={36} />
+                <UserProfileIcon size={24} />
                 <div className="flex flex-col ">
-                  <a className="cursor-pointer ">
+                  <a className="cursor-pointer text-sm">
                     {textEllipsis(String(username), 18)}
                   </a>
                   <a
-                    className="hover:text-red-600 underline text-sm cursor-pointer"
+                    className="hover:text-red-600 underline text-xs cursor-pointer"
                     onClick={() => onLogout()}
                   >
                     Logout
@@ -677,7 +944,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
                   } gap-2  items-center text-zinc-600 dark:text-zinc-400 hover:font-semibold hover:text-zinc-700 dark:hover:text-zinc-300`}
                   onClick={toggleSidebar}
                 >
-                  <UserProfileIcon size={28} />
+                  <UserProfileIcon size={16} />
                 </a>
               </Tooltip>
             )}
diff --git a/components/table/article-table.tsx b/components/table/article-table.tsx
index 6f6864d..62500b9 100644
--- a/components/table/article-table.tsx
+++ b/components/table/article-table.tsx
@@ -63,7 +63,7 @@ import makeAnimated from "react-select/animated";
 const columns = [
   { name: "No", uid: "no" },
   { name: "Judul", uid: "title" },
-  { name: "Banner", uid: "isBanner" },
+  // { name: "Banner", uid: "isBanner" },
   { name: "Kategori", uid: "category" },
   { name: "Tanggal Unggah", uid: "createdAt" },
   { name: "Kreator", uid: "createdByName" },
@@ -96,6 +96,7 @@ export default function ArticleTable() {
   const username = Cookies.get("username");
   const userId = Cookies.get("uie");
   const animatedComponents = makeAnimated();
+  const roleId = Cookies.get("urie");
 
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
@@ -339,13 +340,13 @@ export default function ArticleTable() {
                   <DropdownItem
                     key="edit"
                     className={
-                      username?.includes("mabes") ||
+                      (roleId && Number(roleId) < 3) ||
                       Number(userId) === article.createdById
                         ? ""
                         : "hidden"
                     }
                   >
-                    {(username?.includes("mabes") ||
+                    {((roleId && Number(roleId) < 3) ||
                       Number(userId) === article.createdById) && (
                       <Link href={`/admin/article/edit/${article.id}`}>
                         <CreateIconIon className="inline mr-2 mb-1" />
@@ -353,14 +354,14 @@ export default function ArticleTable() {
                       </Link>
                     )}
                   </DropdownItem>
-                  <DropdownItem
+                  {/* <DropdownItem
                     key="setBanner"
                     onPress={() =>
                       handleBanner(article?.id, !article?.isBanner)
                     }
-                    className={username?.includes("mabes") ? "" : "hidden"}
+                    className={roleId && Number(roleId) < 3 ? "" : "hidden"}
                   >
-                    {username?.includes("mabes") && (
+                    {roleId && Number(roleId) < 3 && (
                       <>
                         <BannerIcon size={24} className="inline mr-2 mb-1" />
                         {article?.isBanner
@@ -368,18 +369,18 @@ export default function ArticleTable() {
                           : "Jadikan Banner"}
                       </>
                     )}
-                  </DropdownItem>
+                  </DropdownItem> */}
                   <DropdownItem
                     key="delete"
                     onPress={() => handleDelete(article.id)}
                     className={
-                      username?.includes("mabes") ||
+                      (roleId && Number(roleId) < 3) ||
                       Number(userId) === article.createdById
                         ? ""
                         : "hidden"
                     }
                   >
-                    {(username?.includes("mabes") ||
+                    {((roleId && Number(roleId) < 3) ||
                       Number(userId) === article.createdById) && (
                       <>
                         {" "}
@@ -517,7 +518,7 @@ export default function ArticleTable() {
                 // }}
               />
             </div>
-            {username?.includes("mabes") && (
+            {roleId && Number(roleId) < 3 && (
               <div className="flex flex-col gap-1 w-full lg:w-[230px]">
                 <p className="font-semibold text-sm">Author</p>
 
@@ -636,7 +637,9 @@ export default function ArticleTable() {
             }}
           >
             <TableHeader
-              columns={username?.includes("mabes") ? columns : columnsOtherRole}
+              columns={
+                roleId && Number(roleId) < 3 ? columns : columnsOtherRole
+              }
             >
               {(column) => (
                 <TableColumn key={column.uid}>{column.name}</TableColumn>