feat: enable rich colors for Toaster component in layout

* feat(gacha): register and login integration

* fix: navbar and gacha landing page

- display fullname when user authenticated
- fix styling and responsive

* fix: minor fix UI

.env.example

@@ -1,14 +0,0 @@
-# API Endpoint
-VITE_API_URL=
-
-# Payload CMS Secret Key (minimum 32 characters)
-CMS_SECRET=your-very-long-secret-key
-
-# PostgreSQL Connection String
-CMS_POSTGRES_URL=postgres://user:password@host:port/database
-
-# S3 Storage Configuration
-CMS_STORAGE_ENDPOINT=https://your-s3-endpoint.com
-CMS_STORAGE_ACCESS_KEY_ID=your-access-key-id
-CMS_STORAGE_SECRET_ACCESS_KEY=your-secret-access-key
-CMS_STORAGE_REGION=ap-southeast-1

README.md

@@ -6,9 +6,10 @@
 
 This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications:
 
-1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">gacha website</a>.
+1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Gacha Website</a>.
-2. **Backoffice** - Application for internal management.
+2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
-3. **Dimentorin** - Application for mentoring services.
+3. **Dimentorin** - Application for <a href="https://dimentorin.imphnen.dev/" target="_blank">Mentoring Service</a>.
+4. **Landing Page** - Application for <a href="https://imphnen.dev/" target="_blank">Landing Page</a>.
 
 ## How to install
 
@@ -24,6 +25,15 @@ This repository is a **monorepo** for all frontend services of IMPHNEN. The mono
 
 ## How to run
 
+### Setup Environment Variables
+
+Before running the applications, you need to set up the environment variables. You can do this by copying the `.env.example` file to `.env` and modifying the values according to your needs.
+
+```sh
+cd apps/{appname}
+cp .env.example .env
+```
+
 ### Development
 
 Use the following commands to run in development mode:
@@ -40,6 +50,10 @@ Use the following commands to run in development mode:
   ```sh
   npm run dimentorin:dev
   ```
+- **Landing Page**:
+  ```sh
+  npm run landing:dev
+  ```
 
 ### Build
 
@@ -57,6 +71,10 @@ Use the following commands to build the applications:
   ```sh
   npm run dimentorin:build
   ```
+- **Landing Page**:
+  ```sh
+  npm run landing:build
+  ```
 
 ### Production
 
@@ -74,6 +92,10 @@ Use the following commands to run the applications in production mode:
   ```sh
   npm run dimentorin:prod
   ```
+- **Landing Page**:
+  ```sh
+  npm run landing:prod
+  ```
 
 ### Storybook
 
@@ -87,7 +109,6 @@ This repository uses Storybook to develop, test, and document UI components in a
   npm run ui:storybook
   ```
 
-
 - **Run Unit Test**
 
   This command runs unit tests for the UI components to ensure they function as expected.

apps/backoffice/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

apps/backoffice/src/app/(protected)/accounts/page.tsx

@@ -18,7 +18,7 @@ import {
   RowSelectionState,
 } from '@tanstack/react-table';
 import ModalEditAccount from './_components/modal-edit-account';
-import { useQueryState } from '../../hook/use-query-state';
+import { useQueryState } from '@imphnen-frontend-service/utils';
 
 interface Account {
   id: number;
@@ -166,7 +166,7 @@ export const Components: FC = (): ReactElement => {
               </Button>
               {showFilter && (
                 <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
-                  <Filter onClose={() => setShowFilter(false)} />
+                  <Filter onClose={() => setShowFilter(false)} options={[]} />
                 </div>
               )}
             </div>

apps/backoffice/src/app/(protected)/dashboard/page.tsx

@@ -10,7 +10,7 @@ import { FC, Fragment, ReactElement, useState } from 'react';
 import ModalAddItem from './_components/modal-add-item';
 import ModalEditItem from './_components/modal-edit-item';
 import ModalDeleteItem from './_components/modal-delete-item';
-import { useQueryState } from '../../hook/use-query-state';
+import { useQueryState } from '@imphnen-frontend-service/utils';
 
 export const Components: FC = (): ReactElement => {
   const [showModalAddItem, setShowModalAddItem] = useState(false);

apps/backoffice/src/app/(public)/auth/login/_hooks/use-login.ts

@@ -2,24 +2,19 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
-  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
+import { useSession } from '@imphnen-frontend-service/utils';
 
 export const useLogin = () => {
-  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
-  const onSubmit = form.handleSubmit((data) => {
+  const { signIn } = useSession();
-    postLogin.mutate(data, {
+
-      onSuccess: () => toast.success("Login sukses"),
+  const onSubmit = form.handleSubmit((data) => signIn(data));
-      onError: (error) => toast.error(error.message),
-    });
-  });
 
   return {
     form,

apps/backoffice/src/app/(public)/auth/login/page.tsx

@@ -32,7 +32,16 @@ export const Components: FC = (): ReactElement => {
             size="lg"
             className="w-full"
           />
-          <Button type="submit" size="md" className="w-full">
+          <Button
+            disabled={
+              form.formState.isSubmitting ||
+              form.formState.isValidating ||
+              !form.formState.isValid
+            }
+            type="submit"
+            size="md"
+            className="w-full"
+          >
             Login
           </Button>
         </form>

apps/backoffice/src/app/dashboard/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/gacha-roll/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/permissions/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/prizes/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/roles/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/transactions/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/middleware.ts

@@ -1,11 +1,108 @@
-import { LoaderFunctionArgs } from 'react-router-dom';
+import {
+  PERMISSIONS,
+  SessionToken,
+  SessionUser,
+} from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs, redirect } from 'react-router';
+
+const mappingPublicRoutes = [
+  '/auth/login',
+  '/auth/forgot',
+  '/auth/new-password',
+];
+
+const mappingRoutePermissions = [
+  {
+    path: '/dashboard',
+    permissions: [],
+  },
+  {
+    path: '/users',
+    permissions: [PERMISSIONS.USERS.READ_LIST],
+  },
+  {
+    path: '/users/create',
+    permissions: [PERMISSIONS.USERS.CREATE],
+  },
+  {
+    path: '/users/update',
+    permissions: [PERMISSIONS.USERS.UPDATE],
+  },
+  {
+    path: '/users/detail',
+    permissions: [PERMISSIONS.USERS.READ_DETAIL],
+  },
+  {
+    path: '/roles',
+    permissions: [PERMISSIONS.ROLES.READ_LIST],
+  },
+  {
+    path: '/roles/create',
+    permissions: [PERMISSIONS.ROLES.CREATE],
+  },
+  {
+    path: '/roles/update',
+    permissions: [PERMISSIONS.ROLES.UPDATE],
+  },
+  {
+    path: '/roles/detail',
+    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
+  },
+  {
+    path: '/permissions',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
+  },
+  {
+    path: '/permissions/create',
+    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
+  },
+  {
+    path: '/permissions/update',
+    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
+  },
+  {
+    path: '/permissions/detail',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
+  },
+];
+
+//TODO : Fix this later
+// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
+//   const fallback = mappingRoutePermissions.find((route) =>
+//     route.permissions.some((perm) => userPermissions.includes(perm))
+//   );
+//   return redirect(fallback?.path ?? '/auth/login');
+// };
 
 export const middleware = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
-
   const pathname = url.pathname;
+  const session = SessionUser.get();
+  const session_token = SessionToken.get();
+  const token = session_token?.token?.access_token;
+  const userPermissions =
+    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
 
-  if (pathname) return null;
+  if (mappingPublicRoutes.includes(pathname)) {
+    if (token) return redirect('/dashboard');
+    return null;
+  }
+
+  if (!session) return redirect('/auth/login');
+
+  const matchedRoute = mappingRoutePermissions.find(
+    (route) => route.path === pathname
+  );
+
+  if (matchedRoute) {
+    const hasPermission =
+      !matchedRoute.permissions ||
+      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
+
+    if (!hasPermission) {
+      return '/dashboard';
+    }
+  }
 
   return null;
 };

apps/dimentorin/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

apps/dimentorin/src/app/_hooks/use-login.ts

@@ -2,27 +2,23 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
-  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
+import { useSession } from '@imphnen-frontend-service/utils';
 
 export const useLogin = () => {
-  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
-  const onSubmit = form.handleSubmit((data) => {
+  const { signIn, isLoading } = useSession();
-    postLogin.mutate(data, {
+
-      onSuccess: () => toast.success("Login sukses"),
+  const onSubmit = form.handleSubmit((data) => signIn(data));
-      onError: (error) => toast.error(error.message),
-    });
-  });
 
   return {
     form,
     onSubmit,
+    isLoading
   };
 };

apps/dimentorin/src/app/_hooks/use-otp.ts

@@ -0,0 +1,24 @@
+import { useForm } from 'react-hook-form';
+import {
+  TVerifyOtpRequest,
+  verifyEmailSchema,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useOtp } from '@imphnen-frontend-service/utils';
+
+export const useOtpHook = () => {
+  const form = useForm<TVerifyOtpRequest>({
+    resolver: zodResolver(verifyEmailSchema),
+    mode: 'all',
+  });
+
+  const { otp, isLoading } = useOtp();
+
+  const onSubmit = form.handleSubmit((data) => otp(data));
+
+  return {
+    form,
+    onSubmit,
+    isLoading
+  };
+};

apps/dimentorin/src/app/_hooks/use-register.ts

@@ -0,0 +1,24 @@
+import { useForm } from 'react-hook-form';
+import {
+  authRegisterSchema,
+  TRegisterRequest,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRegister } from '@imphnen-frontend-service/utils';
+
+export const useRegisterHook = () => {
+  const form = useForm<TRegisterRequest>({
+    resolver: zodResolver(authRegisterSchema),
+    mode: 'all',
+  });
+
+  const { register, isLoading } = useRegister();
+
+  const onSubmit = form.handleSubmit((data) => register(data));
+
+  return {
+    form,
+    onSubmit,
+    isLoading
+  };
+};

apps/dimentorin/src/app/auth/login/page.tsx

@@ -5,7 +5,7 @@ import { useLogin } from '../../_hooks/use-login';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 
 export const Components: FC = (): ReactElement => {
-  const { form, onSubmit } = useLogin();
+  const { form, onSubmit, isLoading } = useLogin();
 
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
@@ -42,7 +42,7 @@ export const Components: FC = (): ReactElement => {
                   Lupa Password ?
                 </a>
               </div>
-              <Button className="w-full" type='submit'>Enter Isekai</Button>
+              <Button className="w-full" type='submit' disabled={(!form.formState.isValid || isLoading)}>Enter Isekai</Button>
             </form>
             
             <div className="flex my-3 gap-3 justify-center">
@@ -74,6 +74,13 @@ export const Components: FC = (): ReactElement => {
               <ArrowLeftOutlined />
               Kembali Ke Homepage
             </Button>
+            <Button
+              className='xl:hidden w-full gap-3'
+              variant='secondary'
+            >
+              <ArrowLeftOutlined />
+              Kembali Ke Homepage
+            </Button>
           </div>
         </div>
       </div>

apps/dimentorin/src/app/auth/register/otp/layout.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

apps/dimentorin/src/app/auth/register/otp/page.tsx

@@ -0,0 +1,37 @@
+import { FC, ReactElement } from 'react';
+import { ControlledInputField, RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { useOtpHook } from '../../../_hooks/use-otp';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { useSearchParams } from 'react-router-dom';
+
+export const Components: FC = (): ReactElement => {
+  const { form, onSubmit, isLoading } = useOtpHook()
+  const [ searchParams ] = useSearchParams()
+
+  return (
+    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
+      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
+          <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Verifikasi Email</h3>
+          <h5 className='mt-2 text-xl font-medium text-primary-500'>Yeay~! Pesan dari dunia lain sudah dikirimkan ke {searchParams.get("email")}</h5>
+          <form onSubmit={onSubmit} className='mt-7'>
+            <ControlledInputField
+              label="OTP"
+              size="lg"
+              className="w-full"
+              placeholder="XXXXXX"
+              max={6}
+              name={'otp'}
+              maxLength={6}
+              control={form.control}
+            />
+            <Button className="xl:w-full mt-2" disabled={(!form.formState.isValid || isLoading)}>Linked Start !!!</Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/auth/register/page.tsx

@@ -1,60 +1,69 @@
 import { FC, ReactElement } from 'react';
-import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputField } from '@imphnen-frontend-service/ui/molecules';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useRegisterHook } from '../../_hooks/use-register';
 
 export const Components: FC = (): ReactElement => {
+  const { form, onSubmit, isLoading } = useRegisterHook();
+
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
-      <div className="bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+      <div className="bg-white xl:min-w-[1130px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
         <RegisterResetBanner />
-        <div className="border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center">
+        <div className="xl:border-2 xl:border-primary-500/50 xl:w-[726px] rounded-lg py-[32px] px-[48px] flex justify-center">
-          <div className="w-[704px]">
+          <div className="xl:w-[714px]">
+            <Button
+              className='xl:hidden gap-3'
+              variant='secondary'
+            >
+              <ArrowLeftOutlined />
+              Login
+            </Button>
             <h3 className="mt-5 text-3xl font-semibold text-primary-500">
               Register
             </h3>
             <h5 className="text-primary-500 font-medium">
               Yosha~! Saatnya Bergabung dengan Dimentorin
             </h5>
-            <div className="grid grid-flow-row-dense my-7 grid-cols-2 gap-2">
+            <form onSubmit={onSubmit}>
-              <InputField
+              <div className='my-7'>
-                label="First Name"
+                <ControlledInputField
-                size="lg"
+                  label="Full name"
-                placeholder="Nama Depan"
-              />
-              <InputField
-                label="Last Name"
                   size="lg"
                   className="w-full"
-                placeholder="Nama Belakang"
+                  placeholder="Nama Lengkap"
+                  name={'fullname'}
+                  control={form.control}
                 />
-              <InputField
+              </div>
+              <div className="grid grid-flow-row-dense my-7 lg:grid-cols-2 gap-2">
+                <ControlledInputField
                   label="Email"
                   size="lg"
-                placeholder="Contoh : yourname@mail.com"
-              />
-              <div className="flex gap-2">
-                <div className="flex flex-col gap-2">
-                  <h4 className="font-medium">OTP Code</h4>
-                  <Input
                   className="w-full"
+                  placeholder="Contoh : yourname@mail.com"
+                  type='email'
+                  control={form.control}
+                  name={'email'}
+                />
+                <ControlledInputField
+                  label="No Hp"
                   size="lg"
-                    placeholder="Kode OTP"
+                  className="w-full"
+                  placeholder="Contoh : 088877665544"
+                  control={form.control}
+                  name={'phone_number'}
                 />  
               </div>
-                <div className="flex flex-col">
+              <ControlledInputField
-                  <Button size="sm" className="mt-[30px]">
-                    Kirim OTP
-                  </Button>
-                </div>
-              </div>
-            </div>
-            <InputField
                 label="Password"
                 className="w-full"
                 size="lg"
                 type="password"
                 placeholder="Buat password sekeren jurus ultimate-mu!"
+                control={form.control}
+                name={'password'}             
               />
               <h6 className="text-sm text-gray-500 mt-1">
                 "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
@@ -83,14 +92,17 @@ export const Components: FC = (): ReactElement => {
                   🚨
                 </span>
               </h6>
-            <InputField
+              <ControlledInputField
                 label="Repeat Password"
                 className="w-full"
                 size="lg"
                 type="password"
                 placeholder="Ulangi password-mu, Senpai~!"
+                control={form.control}
+                name={"confirm_password"}
               />
-            <Button className="w-full mt-2">Linked Start !!!</Button>
+              <Button className="xl:w-full mt-2" disabled={(!form.formState.isValid || isLoading)}>Linked Start !!!</Button>
+            </form>
           </div>
         </div>
       </div>

apps/dimentorin/src/app/auth/register/success/page.tsx

@@ -1,15 +1,21 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useEffect } from 'react';
 import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { ArrowRightOutlined } from '@ant-design/icons';
 
 export const Components: FC = (): ReactElement => {
+  useEffect(() => {
+    setTimeout(() => {
+      document.location.href = "/auth/login"
+    }, 10000)
+  }, [])
+
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
-      <div className="bg-white min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+      <div className="bg-white xl:min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
         <RegisterResetBanner />
-        <div className="border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
+        <div className="border-2 border-primary-500/50 xl:w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
-          <div className="w-[704px] flex flex-col justify-center items-center">
+          <div className="xl:w-[704px] flex flex-col justify-center items-center">
             <h2 className="text-4xl text-primary-500 font-semibold">
               Register Successfull
             </h2>
@@ -41,10 +47,12 @@ export const Components: FC = (): ReactElement => {
             <h4 className="mt-10 text-primary-500 font-medium text-xl">
               Kamu akan memasuki isekai dalam 10 dtk
             </h4>
+            <a href="/auth/login">
               <Button className="gap-3 mt-10" size="lg">
                 Masuk Isekai
                 <ArrowRightOutlined />
               </Button>
+            </a>
           </div>
         </div>
       </div>

apps/dimentorin/src/middleware.ts

@@ -1,11 +1,113 @@
-import { LoaderFunctionArgs } from 'react-router-dom';
+import {
+  PERMISSIONS,
+  SessionToken,
+  SessionUser,
+} from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs, redirect } from 'react-router';
+
+const mappingPublicRoutes = [
+  '/',
+  '/auth/login',
+  '/auth/forgot',
+  '/auth/forgot/otp',
+  '/auth/register',
+  '/auth/register/otp',
+  '/auth/register/success',
+  '/auth/new-password',
+];
+
+const mappingRoutePermissions = [
+  {
+    path: '/dashboard',
+    permissions: [],
+  },
+  {
+    path: '/users',
+    permissions: [PERMISSIONS.USERS.READ_LIST],
+  },
+  {
+    path: '/users/create',
+    permissions: [PERMISSIONS.USERS.CREATE],
+  },
+  {
+    path: '/users/update',
+    permissions: [PERMISSIONS.USERS.UPDATE],
+  },
+  {
+    path: '/users/detail',
+    permissions: [PERMISSIONS.USERS.READ_DETAIL],
+  },
+  {
+    path: '/roles',
+    permissions: [PERMISSIONS.ROLES.READ_LIST],
+  },
+  {
+    path: '/roles/create',
+    permissions: [PERMISSIONS.ROLES.CREATE],
+  },
+  {
+    path: '/roles/update',
+    permissions: [PERMISSIONS.ROLES.UPDATE],
+  },
+  {
+    path: '/roles/detail',
+    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
+  },
+  {
+    path: '/permissions',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
+  },
+  {
+    path: '/permissions/create',
+    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
+  },
+  {
+    path: '/permissions/update',
+    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
+  },
+  {
+    path: '/permissions/detail',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
+  },
+];
+
+//TODO : Fix this later
+// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
+//   const fallback = mappingRoutePermissions.find((route) =>
+//     route.permissions.some((perm) => userPermissions.includes(perm))
+//   );
+//   return redirect(fallback?.path ?? '/auth/login');
+// };
 
 export const middleware = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
-
   const pathname = url.pathname;
+  const session = SessionUser.get();
+  const session_token = SessionToken.get();
+  const token = session_token?.token?.access_token;
+  const userPermissions =
+    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
 
-  if (pathname) return null;
+  if (mappingPublicRoutes.includes(pathname)) {
+    if (token) return redirect('/dashboard');
+    return null;
+  }
+
+  if (!session) return redirect('/auth/login');
+
+  const matchedRoute = mappingRoutePermissions.find(
+    (route) => route.path === pathname
+  );
+
+  if (matchedRoute) {
+    const hasPermission =
+      !matchedRoute.permissions ||
+      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
+
+    if (!hasPermission) {
+      return '/dashboard';
+    }
+  }
 
   return null;
 };