diff --git a/src/app/master-data/customer/detail/layout.tsx b/src/app/master-data/customer/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/customer/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/supplier/detail/layout.tsx b/src/app/master-data/supplier/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/supplier/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/services/hooks/useAuth.tsx b/src/services/hooks/useAuth.tsx
index 86bf43ed..79fa8981 100644
--- a/src/services/hooks/useAuth.tsx
+++ b/src/services/hooks/useAuth.tsx
@@ -6,22 +6,43 @@ type AuthStore = {
   isLoadingUser?: boolean;
   setUser: (newUserData?: UserWithRoles) => void;
   setIsLoadingUser: (isLoading?: boolean) => void;
+  permissionCheck: (permissionName: string) => boolean;
 };
 
-const useAuthStore = create<AuthStore>()((set) => ({
+const useAuthStore = create<AuthStore>()((set, get) => ({
   user: undefined,
   isLoadingUser: false,
   setUser: (newUserData) => set({ user: newUserData }),
   setIsLoadingUser: (isLoading) => set({ isLoadingUser: Boolean(isLoading) }),
+
+  permissionCheck: (name) => {
+    const { user, isLoadingUser } = get();
+
+    if (!isLoadingUser && user) {
+      const isAllowed = user.roles.some((role) => {
+        const isPermissionNameAllowed = role.permissions.some(
+          (permission) => permission.name === name
+        );
+
+        return isPermissionNameAllowed;
+      });
+
+      return isAllowed;
+    }
+
+    return false;
+  },
 }));
 
 export const useAuth = () => {
-  const { user, setUser, isLoadingUser, setIsLoadingUser } = useAuthStore();
+  const { user, setUser, isLoadingUser, setIsLoadingUser, permissionCheck } =
+    useAuthStore();
 
   return {
     user,
     setUser,
     isLoadingUser,
     setIsLoadingUser,
+    permissionCheck,
   };
 };
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index cf3e57f7..c118b5a4 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -24,6 +24,36 @@ export type LogoutResponse = BaseApiResponse;
 
 export type GetMeResponse = BaseApiResponse<UserWithRoles>;
 
+export type Client = {
+  id: number;
+  name: stirng;
+  alias: string;
+  created_at: string;
+  updated_at: string;
+};
+
+export type Permission = {
+  id: number;
+  name: string;
+  action: string;
+  client: Omit<Client, 'created_at' | 'updated_at'>;
+  created_at: string;
+  updated_at: string;
+};
+
+export type Role = {
+  id: number;
+  key: string;
+  name: string;
+  client: Omit<Client, 'created_at' | 'updated_at'>;
+  created_at: string;
+  updated_at: string;
+};
+
+export type RoleWithPermissions = Omit<Role, 'created_at' | 'updated_at'> & {
+  permissions: Omit<Permission, 'created_at' | 'updated_at'>[];
+};
+
 export type User = {
   id: number;
   email: string;